搜尋
首頁開發工具dreamweaverDreamweaver架設網站的詳細步驟

Dreamweaver架設網站的詳細步驟

Sep 29, 2018 pm 03:03 PM
dreamweaver

這篇文章帶給大家的內容是關於Dreamweaver架設網站的詳細步驟,有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

一、定義網站

1、 在任一根目錄下建立好一個資料夾(我們這裡假設為E碟),如取名為MyWeb。
***備註:網站中所使用的文件都要用英文名。
2、開啟Dreamweaver,選擇“網站—新網站”,開啟對話方塊。在網站名稱中輸入網站的名稱(可用中文),在本機根資料夾中選擇剛才建立的資料夾(E:web)。然後確定即可。
***備註:再次開啟Dreamweaver,會自動找到剛才設立的網站。如果有多個站點,可以在選單「站點—開啟站點」中去選擇。

二、建立頁面

1、在本機資料夾E:\MyWeb下方的空白處,按右鍵選“新建檔案”,這樣就建好了一個頁面,預設的檔案名稱為untitled.htm。 htm就表示這個網頁檔案是一個靜態的HTML檔。給它改名為index.htm。
***網站第一頁的名稱通常是index.htm或index.html。其它頁面的名字可以自己取。
2、雙擊index.htm進入該頁面的編輯狀態。在標題空格里輸入網頁名稱,按右鍵選頁屬性,開啟「頁面屬性」視窗。這裡可以設定網站的標題、背景顏色或背影圖像,超級連結的顏色(一般預設即可),其他都保持預設即可。
3.此時間標位於左上角,可輸入一句話,如「歡迎來到我的首頁」。選取文字,用選單「視窗/屬性」開啟屬性面板,選取文字大小為6,再使文字居中,然後在文字前用幾個回車使其位於頁面中間。
4.若要選取字體,請選擇字體中的最後一項:編輯字體清單。然後在對話方塊中選 號,接著在「可用字體」欄中選擇需要加入到字體清單中的一種字體,點擊中間的按鈕就可以加入了。
***在網頁上最常使用的是宋體字。不要將特殊的字體加到清單中使用,因為別人電腦上未裝就看不到。如果需要用的話,要做成圖片後再使用。
***在網頁上打入空格的方法是:把輸入法調至全角。
***在網頁上換行的方法是:shift Enter。只按Enter則為換段。

三、為頁面新增圖片

1、在本機資料夾E:\MyWeb下方的空白處,按右鍵選「新建資料夾」,這樣建立了一個資料夾,用它來放圖片,可以改名為tu或pic或images都可以。
2、用選單“視窗/物件”開啟物件面板,點選“插入影像”,在對話方塊中選取要插入的圖片。如果會出現對話方塊:“你願意將該檔案複製到根資料夾中嗎?”,必須選“是”,然後將它儲存到剛建置的資料夾中。
3、選取該圖片,開啟屬性面板,可以在上面為圖片取名,重新設定圖片的高、寬,拖住圖片角落的點可以變大小。按住shift鍵,再拖曳角落上的點,可以讓圖片保持寬高比例伸展。如要恢復此原始大小,請按一下右下角的「重設大小」按鈕。
4、 「連結」可以直接在這裡輸入位址。 「替代」是圖片的說明,即滑鼠指向圖片所顯示的文字;「邊框」是圖片邊框寬度,「對齊」是對齊方式。

四、新增超級連結

1、為文字新增連結。
例如,在頁面上輸入“我的文章”,然後將其選中,打開屬性面板,在“連結”一格中,選擇它所要連結到的頁面即可。後面一格「目標」我們一般常用的是self即開啟的新視窗取代了現開的視窗;或是選擇blank即開啟新視窗。
2、為圖片添加連結
與上面文字的連結同理,插入圖片,然後在屬性面板中的連結一格中選擇即可。
****圖片可以建立不同的多個連結。方法如下:
在屬性面板中的「地圖」一項下方有一些圖形,例如點擊方形,遊標變成十字,在圖片上畫一個藍色矩形的熱區,此時在屬性面板上可以為這個熱區設定連結位址,滑鼠指向會顯示。同樣,再用圓形設定一個熱區,就可以再為該圖片設定其他連結了。
3、新增E-mail連結
選取需要新增E-mail連結的文字或圖片,開啟屬性面板,在「連結」一格中輸入填寫郵件地址。格式如下:mailto:郵件地址。注意中間不空格。
4、如果連結到瀏覽器無法開啟的文件,例如exe、Zip等文件,那麼瀏覽者在點擊這個連結的時候,就會實現文件下載、或是線上播放的功能。

五、表格的使用

1、點選插入/表格,開啟表格面板設定。行數、列數、寬度、邊框等,「單元格填滿」為單元格內側與內容的距離;「單元格間距」為單元格之間的距離,單位均為像素。
2、插入表格後,在表格的邊框上點選一下,可以全選整個表格。然後在下面的屬性面板裡可以進行各種設定。
3、把遊標移到其中一個單元格,此時看到的屬性面板,就是單元格的屬性面板。也可以進行各種關於單元格的操作。如背景色、背景圖、邊框、合併、分割等。

六、關於表格的其他動作

一製作細線表格原理:
1、選取整個表格,設定其背景為黑色(此顏色即表格線的顏色)。
2、選取所有儲存格,設定其背景為白色。

二自動格式化表格
1、先製作好一張表格,然後選取。
2、選選單中的指令/格式化表格。即可以其中選擇預設好的一些表格樣式。

三一像素分割條
1、插入一個1行1列,寬度為200像素,邊框邊距均為0的表格。
2、選取表格,設定表格高為1像素,並設定一個背景色(即要的線條顏色)。
3、切換到程式碼和設計窗口,將程式碼

刪除。

七、用表格建立完整的頁面

一網頁頂部(一般包含圖示、廣告、導覽選單)
1、建立1行2列,寬度為760像素,邊框及邊距均為0的表格。
2、選取表格,設定排列方式為居中對齊,背景色為#3366CC。
3、將遊標置於左邊單元格中,設定其水平排列為左對齊,垂直排列為頂端對齊,然後插入一張圖像,一般在此插入的是網站的圖標,即logo。
4、將遊標置於右邊單元格中,設定其寬度為500,水平排列為居中對齊,垂直排列為中間,然後插入圖像,一般是網頁廣告,即banner。
5、將遊標置於剛完成的表格之後,插入/表格,建立一個1行1列,寬為760像素,邊框及邊距均為0的表格。
6、選取剛建立的表格,設定排列方式為居中對齊,背景色為#005173。
7、在該表格中依序插入多個影像,作為導覽列選單。

二網頁中間(左邊欄位清單、中間網站新聞、右邊欄位清單)
1、 在導覽條表格後面,插入/表格,建立一個1行3列,寬為760像素,邊框及邊距均為0的表格。並設定排列方式為居中對齊,背景色為#FFFFFFF。
2、 將遊標置於左邊單元格中,設定其寬度為18%,水平排列為居中對齊,垂直排列為頂端對齊,然後插入一張圖像,插入一個導航條。
3、 將遊標置於剛插入的圖片後,插入/表格,插入一個12行1列,寬為90%的表格。設定其單元格間距為1,背景色為#CCCCCC。
4、 將遊標放在表格第一個單元中,設定其高為20,背景色為#FFFFFF。插入/影像,插入一個導航文字前面的小點。同樣設定其他11個單元格,這樣左邊的欄位分類清單就完成了。
5、 將遊標置於主體表格的中間單元格中,設定其寬度為66%,水平排列為居中對齊,垂直排列為頂端對齊,然後插入/圖像,插入一個導航條。
6、 將遊標置於影像後,插入/表格,插入一個4行1列,寬為95%的表格。設定其單元格間距為1,背景色為#CCCCCC。
7、 將遊標置於表格的第一個儲存格中,拖曳滑鼠,將4個儲存格都選中,設定高為60,背景色為#FFFFFF。
8、 將遊標置於主體表格右邊的單元格中,設定其寬度為16%,水平排列為居中對齊,垂直排列為頂端對齊,插入/圖像,插入一個導航條。
9、 將遊標置於影像後,插入/表格,插入一個7行一列,寬為90%的表格。設定其間距為1,背景色為#CCCCCC。
10、按住Ctrl鍵,用滑鼠點選剛插入的表格的第1、3、5、7儲存格,然後設定它們的高為55,背景色為#FFFFFF。
11、選取第2、4、6單元格,設定其高為6,背景色為#FFFFFF。
12、切換到原始碼窗口,將第2、4、6單元格中的空格符號「 」刪除。

三網頁底部(一般包括版權資訊及其他相關內容)
1、 將遊標置於主體表格後,插入/表格,建立一個2行2列,寬為760像素,邊框及邊距均為0的表格。
2、 選取表格,設定排列方式為居中對齊,背景色為#3366CC。
3、 將遊標置於表格第1行的左邊單元格中,設定其寬度為50%,水平排列為默認,垂直排列為基線,背景色為#FFFFFF,然後輸入版權信息,內容顏色隨便。
4、 將遊標置於表格第1行右邊單元格中,插入/圖像,插入一個圓角圖像,在它後面輸入Email字樣,設定其大小和顏色為1和#FFFFFF。
5、 插入/表單物件/文字域,插入一個文字域,寬度可以隨意。
6、 插入/圖像,插入一個GO的圖像。
7、 設定頁屬性。點選選單修改/頁面屬性,在標題一欄中輸入標題,並選擇背景圖像,將頂部邊界設為0。
***將整個網頁分段放到不同的表格中組合而成,還可以加快瀏覽器讀取頁面的時間。 ;因為瀏覽器是讀完整個表格後才顯示內容的,所以最好不要框在整個一個表格中。

八、用佈局表格建立完整的頁面

1、 點擊插入/佈局,裡面的佈局視圖按鈕,就切換到佈局視圖狀態(預設為標準視圖)。也可以用選單裡的檢視/表格視圖/佈局檢視來進入。
2、 先點選繪製佈局表格按鈕,然後在頁面中像繪圖一樣建立出佈局表格。
3、 就像上一個例子一樣,先繪製好網頁的頂部,再中部,再底部的大表格。
4、 再點選繪製佈局單元格按鈕,然後在已經繪製好的佈局表格中,再繪製佈局單元格。
5、 回到標準視圖,在已經分割好的表格裡,再插入嵌套的小的表格,把頁面再細化,就可以完成整個頁面的設計了。
****注意把整個頁面都放在一個大的佈局表格中,因為這樣的網頁瀏覽速度會很慢。應該按照頁面的版面和內容劃分出幾個佈局表格,然後在其中分別插入佈局單元格。

九、層的使用

1、點選插入/層。也可以點選圖標,然後拖曳滑鼠建立出一個圖層。
3、選取建立的圖層,看屬性面板。 “層編號”和“標籤”都使用預設即可。 「層編號」是程式設計時需要用的,我們現在一般不用。 「上」即在頁面上邊界的距離;「左」是距左邊界的距離。 「z軸」是層的順序,數字大的疊在數字小的上面。
****如不設定顏色時,層是透明的。
4、點中層左上角的小方框可以隨意拖曳層,大小也可以調整。
5、「溢出」一欄中,當文字多於層的大小時,visible(超出的部分照樣顯示)、hidden(超出部分隱藏)、scroll(不管有否超出,都顯示滾動條)、 auto(有超出時才出現捲軸)。
6、點選選單視窗/其他/層,此時將出現層管理視窗。可以在其中修改圖層的名稱和Z軸值,也可以點選眼睛圖示使圖層可見或不可見。還有一個防止重疊的選項。
7、層的對齊。按住shift鍵,同時選取幾個層。然後用修改/對齊,用這裡的選項。
8、嵌套層。 ⑴首先在文件中插入一個層。 ⑵將遊標置於該層內,然後繼續插入一個層,就得到了嵌套層。 ⑶裡面的叫子層,外面的父層。它們的Z軸順序是一樣的。拖曳父層時,子層也會相對移動。移動子層時,父層不會隨之移動。

第十、了解時間軸

1、點選選單中的插入/層,插入一個層。
2、在層中插入圖片,如一張飛機的圖片。 (這裡的圖片也可以是一張小動畫的.gif圖片)
3、點擊選單中的視窗/其他/時間軸,開啟時間軸視窗。
4、選取頁面上建立的層,用滑鼠按住層左上角的小方框圖標,將層拖曳到時間軸的第1幀中。這時自動創建了一個長度為15幀的時間軸。
5、選取時間軸上的第1幀,將頁面中的圖層拖曳到頁左上角,也就是動畫開始時的位置。
6、選取時間軸上第15幀,可拖曳該幀至任意長度,如30幀。
7、選取第30幀,將層拖放到頁面的右下方,此時視窗中顯示出層從第1幀到第30幀的運動軌跡。 (此時運動為直線)
8、可點中第15幀,右鍵選“增加關鍵幀”,在選取第15幀的狀態下,拖曳層到頁面中下方。
9、勾選「自動播放」項目。

十一、製作捲動公告牌

1、在頁面上插入一個圖層,然後為圖層設定一個背景,作為公告版的框架。
2、然後在建立的層中插入嵌套層,將嵌套層移到父層的下方。
3、在嵌套層中輸入文本,並將其居中排列。
4、開啟時間軸面板,將子圖層作為物件加入面板。
5、為子層建立一個向上移動的路徑,將其移動到父層的上方。
6、拖曳最後一關鍵幀,增長動畫時間,然後勾選「自動播放」和「循環」兩項。
7、選定父層,在其屬性面板中將「溢出」屬性設定為「hidden」。

十二、在頁面中運用flash動畫

1、點選插入中的Flash按鈕,即可為頁面插入一個動畫。也可以選取選單插入/媒體/Flash來完成這一步。
2、選取已插入的動畫,看屬性面板。這裡可以設定它的寬、高,也可以透過拖曳來改變大小。
3、可以在這裡點選「播放」來預覽動畫。

十三、讓插入的flash動畫變透明

1、當網頁上已經有背景,或是想要在一張圖片上再插入flash動畫,而flash動畫本身也有背景色,所以會影響美觀,這時我們要把它做成透明動畫。
2、如在頁面上插入一張圖像。
3、在影像上插入一個圖層,在圖層中插入好所需的flash動畫。
4、選取flash動畫,在屬性面板中點選「參數」按鈕。
5、在「參數」的左面一格輸入「wmode」。在右邊「值」一格輸入「transparent」。

十四、在頁面中播放聲音

1、在完成全頁以後,如果要為該頁添加背景音樂,注意背景音樂一般是*. midi文件,這樣的聲音檔案十分小,容易快速下載,其他格式不適合作為背景音樂。
2、在頁面中所有表格之外,(注意此時編輯視窗左下方的標籤選擇欄中僅顯示

這一項,或在左下角點一下,這樣才能保證這個行為是添加在整個頁面上的)。點選行為視窗上的「」按鈕,(或用選單 視窗/行為,開啟行為視窗。)
3、從彈出式選單中選擇「播放聲音」。開啟一個對話框。
4、在這個對話框裡用「瀏覽」選擇要播放的聲音,並確定。
5、這時行為面板上自動顯示了事件為onload,動作為播放聲音。點選這一行,中間出現一個按鈕。點選按鈕,可以設定這個聲音在什麼事件下播放。可以選擇「顯示事件」/「IE5.0。
6、我們常用的如Onload(當頁面載入時)、OnClick(點擊滑鼠)、OnMouseOver(滑鼠移到物件上)、OnUnload(關閉頁面時)等。
7、該行為也可以設置在圖片上、文字鏈接上。在文字鏈接上播放聲音之前,先為文字添加一個空鏈接,即選中文字,在鏈接一格里輸入一個「#」符號。 

十五、彈出視窗

1、先製作一個準備在小視窗中顯示的頁面(例如a.htm),由於這個彈出視窗不能太大,所以內容要少一些。
2、打開一個製作好的頁面,把遊標移到頁面中所有我表格以外,點擊行為視窗上的“ ”按鈕,從彈出式選單中選擇“開啟瀏覽器視窗」一項。
3、在對話方塊中輸入對應的設定。要顯示的URL即a.htm,視窗寬度和高度自己設定,單位為像素。屬性中的各項參數需要就打勾。
4、設定完畢後,點「確定」。此時行為視窗中將顯示開啟瀏覽視窗此行為,觸發條件為Onload,如果不是要這項,就自己設定。
5、該行為也可以設定在圖片上、文字連結上。。
6、可以用這個方法來表示對瀏覽者的開啟時的歡迎、網站公告、離開時的告別語等。

十六、控制狀態列資訊

1、開啟頁面,選取一張圖片。
2、點選行為視窗上的「」號按鈕,選擇設定文字/設定狀態條文。
3、在對話框裡的「訊息」一欄裡,輸入需要顯示的話,如對這張圖片的介紹。
4、可以設定行為的觸發條件為OnMouseOver(滑鼠移到物件上),這樣當滑鼠經過這張圖片的時候,狀態列將出現相關的資訊。
5、如果需要滑鼠在移開後,這個資訊消失,那麼再次使用這個行為,在「訊息」一欄裡什麼都不寫,然後把觸發條件改為OnMouseOut(滑鼠移開)。
6、同樣可以在一段文字上設定該行為。或是設定在整個頁面上也可以。

十七、彈出訊息

1、開啟一個製作好的頁面,點左下角

項目。點選行為視窗上的「 」按鈕,從彈出式選單中選擇「彈出資訊」一項。
2、在設定視窗中「訊息」一欄輸入想顯示的訊息即可。
3、觸發條件設定為Onload(頁面載入時),就可以用來作為開啟頁面的歡迎訊息。如設為OnUnload(關閉頁面時),就可以作為使用者關閉頁面時送別資訊。
4、也可以在某一段文字上設定彈出訊息。例如一段文字不願讓人複製,就選取整段文字,注意此時左下角顯示〈P〉,即段落。
5、然後同樣操作,訊息可以輸入版權之類的語句。只是設定觸發條件為OnBeforeCopy(按右鍵時觸發),或OnCopy(按右鍵選複製時觸發)。

十八、動態圖片按鈕

1、準備兩張同樣大小的圖片,常用的方法是如一張為灰階照片,一張為彩色照片。或一張是按鈕凹下的樣式,一張是按鈕凸起的樣式。
2、舉例:插入一個3行1列的表格,設定寬度為180像素。
3、將遊標置於第一行,插入一張灰階的圖片。
4、在屬性面板中「連結」一欄輸入需要連結的位址,並為圖片加上名稱,如tu1.
5、點擊行為視窗上的「 」按鈕,從彈出式選單中選擇「交換影像」。
6、此時在「圖像」一欄中已顯示要交換的圖像,然後在「廟宇原始檔為」一欄中選擇好交換後的那張圖。
7、下面有兩個參數,“預先載入圖像”和“滑鼠滑開時恢復圖像”,都要選取。
8、同樣方法創建另外兩個動態按鈕。

(十九、用框架佈局頁面

框架由兩個主要部分組成-框架集和單一框架。
1、 點選插入中的框架,即顯示已定義的13種框架的樣式。我們上—中—下結構為例。
2、 點擊「上—中—下」框架結構的圖標,此時在頁上插入上下兩個框架,整個頁面被分割成了3個部分。我們分別在上面輸入“上”,在中間輸入“中”,在下面輸入“下”。
3、 先保存一下。點選選單中的文件/儲存全部。這時先保存框架集文件,可以自己修改名字,如kuangjia.htm。然後將分別儲存框架集中的其他頁面。在儲存對應的頁面的時候,該部分會以虛線框起來,這樣可將上面部分儲存為shang.htm。以下部分儲存為xia.htm。中間部分儲存為zhong.htm。
4、 至此,我們保存了四個頁面,分別是框架集,和組成框架集的上、中、下三個頁面。所以,其實這個框架是由四個頁面組成的,所以用框架會降低一點使用者瀏覽的速度。
5、 點選視窗/其他/框架,開啟框架的面板。在這裡點選某個框架,即可選取該框架。當框架被選取時,編輯視窗中對應的框架出現虛線。
6、 如:選取上面topframe,此時屬性面板上顯示的是上面這個框架的屬性。同樣選取中間框架和下方框架,也可以分別設定它們的屬性。
7、 在編輯視窗中,將滑鼠放在兩個框架之間的邊框上,遊標將變成上下箭頭形,此時點擊邊框,選取的是整個框架集。
8、 此時屬性面板上出現的是整個框架組的屬性。可以在此設定框架集是否有邊框、寬度及顏色等。不過最重要的是可以在這裡設定框架集中各個框架的大小。
9、 在屬性面板的右面的圖示上選取上面框架,設定它的行為80像素,邊框為0。
10、選取下面框架,設定行高為30像素,邊框為0。
11、選取中間框架,設定行高為1,單位為相對。 (相對的意思是:當前行相對於其他行所佔的比例。設為1就是指佔據除上和下以後的所有瀏覽視窗剩餘空間。
12、舉例:將遊標置於上面框架topFrame上,右鍵選取頁面屬性,設定背景色為#FF6600。然後插入/表格,插入一個1行2列,邊框邊距都為0的表格。設定第1個儲存格的寬度為116像素,然後插入一張圖片。將第2個單元格設定為水平對齊方式為居中,垂直排列方式為底部,然後依序輸入「獅子座」、「魔蠍座」、「雙子座」字樣。
13、將遊標置於中部框架mainFrame中,右鍵選擇頁面屬性,設定背景色為#FFFFCC。然後插入一張大圖像。
14、將遊標置於下面框架bottomFrame中,右鍵選頁屬性,設定一個背景圖片。
15 、另外做好三個頁面,作為“獅子座”、“魔蠍座”、“雙子座”所要鏈接的頁面。
16、選中“獅子座”,在屬性中為它設置好要鏈接的頁面,然後在“目標”裡選“mainframe”,即該內容在中間那個框架中顯示。
17、同樣設定“魔蠍座”、“雙子座”的連結。

二十、跳轉選單

1、 點擊主選單中的插入/表單物件/跳轉選單,也可以用插入/表單,中的跳轉選單圖標,來調出跳轉選單設置視窗。
2、 首先在「文字」一欄裡輸入「請選擇相關網站」字樣。然後點擊視窗上的「 」號按鈕。這時選單裡多了一個選項,這個選項沒有鏈接,僅作為跳轉選單的說明文字。
3、 在文一欄輸入需要的網站,如“新浪”,然後在“選擇時,前往URL”一欄裡輸入網站連結地址http:// www.sina.com.cn,此時,選單項目一欄裡又多了一個選項,這個選項對應一個網的連結位址。
4、 使用相同方法,在選單中加入其他一些選項及對應的連結。也可以用「上」「下」的按鈕,來調整它們的順序。
5、設定視窗的「選單之後插入前往按鈕」一項先不要選擇。勾選「更改URL後選擇第一個項目」一項,這樣當使用跳轉選單到某個頁面後,如果返回到跳轉選單頁面,此時頁面中的跳轉選單預設顯示的依舊是第1項內容。
6 、 設定完畢後點選「確定」即可。
****因為跳轉選單是表單,所以其實是先插入了表單(紅色虛線區域),然後在表單中再插入了下拉式選單。
7、想修改選項,可以選取頁面上的攔下選單,此時點選屬性面板中的“清單值”,即可修改各項內容了。

8、 當選取跳轉選單時,行為視窗中也出現行為。雙擊該行為,也可以進入設定窗口,可以重新設定。
9、 如果「選單項目」裡的第一項就是鏈接,而不是上面所說的一句提示的話,那麼就要選中「選項「中的「選單之後插入前往按鈕」。新增一個“前往”按鈕。

二十一、運用外掛程式(Dreamweaver功能擴充)

1、 先下載好需要的插件,這裡舉例用的是Animate Browser Window。這是一個動態改變視窗的大小的插件。開啟Dreamweaver Extension Manager,安裝下載好的外掛程式。
2、 啟動Dreamweaver,在做好的頁面上,右鍵單擊左下角〈body>,然後點擊行為視窗中的“ ”號按鈕,在其中選擇“Animate Browser Window”,然後在其中做相應的設置。這裡設定視窗開啟前高寬皆為0,開啟後為填滿螢幕。觸發條件為onLoad。

二十二、捲動字幕

1、把遊標插入點放在需要插入捲動字幕的地方。
2、點選插入面板的「標籤選擇器 」。
3、選擇 marquee標籤,點選「插入」按鈕。然後關閉“標籤選擇器 ”。
4、轉換到程式碼視圖。把遊標插入點放在 兩個marquee標籤之間。
5、選擇「視窗」/「標籤檢查器」。可以在「標籤檢查器」中設定標籤的各種用法。
6、點選behavior設定項目右邊的下拉箭頭,選擇捲動字幕內容的移動方式。其中三個選項意思分別是:Alternate:內容在相反兩個方向滾來滾去。 Scroll:內容向同一個方向捲動。 Slide:內容接觸到字幕邊框就停止滾動。
7、direction屬性設定字幕內容的滾動方向。四個選項意思是:down:向下移動。 Left:向左運動。 Right:向右移動。 Up:向上移動。
8、scrollamount屬性設定字幕滾動的速度。一般設為1。
9、scrolldelay屬性設定字幕內容滾動時停頓的時間,單位為毫秒。如果要讓滾動看起來流暢,數值應該盡量小。實例中設定為1毫秒。
10、width屬性設定滾動字幕的寬度。這個任意,例如設定為300。
11、onMouseOver事件設定滑鼠移動到滾動字幕時的動作,常設定為停止滾動。 onMouseOut事件設定滑鼠離開滾動字幕時的動作,通常會設定為開始滾動。這個兩項不能選,只能手筆輸入。在onMouseOver後面輸入「this.stop();」 在onMouseOut後面輸入「this.start();」
12、style屬性設定字幕內容的樣式。實例中設定字幕文字大小,也要手動輸入「font:12px;」。
13、loop屬性設定字幕內容滾動次數,預設值為無限。 「-1」也為無限。
14、全部程式碼:滾動字幕內容 

##二十三、建立CSS樣式表

1、在網頁上輸入一些文字。

2、開啟「CSS樣式」面板,也可以用「視窗/CSS樣式」開啟。
3、面板下方有四個按鈕,分別是附加樣式、新樣式、編輯樣式、刪除樣式。
4、點選“新樣式”,開啟對話框。輸入名稱,注意名稱前有一個點號。如取名為.zi(中文名不行)。類型:建立自訂樣式,定義在:僅對該文件。
5、此時再開啟一個對話框,在左邊的分類裡選擇“類型”,然後在右面設定字體為宋體,大小為14像素,顏色任意。然後確定。
6、選取頁面上的文字,然後點選視窗裡的樣式.zi。此時這段文字就套用了CSS樣式。
7、如要對剛才定義的CSS樣式進行修改,可以點中它,然後點選下面的編輯樣式按鈕。

二十四、建立動態連結樣式表#

1、點選“新建CSS樣式”對話框,在“定義在”一欄選擇“僅對該文件”,在“類型”一欄中選擇“使用CSS選擇器”。
2、當樣式表類型選擇“使用CSS選擇器”時,下拉式選單的名字變成了“選擇器”,表示輸入內容為CSS選擇符,點擊下拉按鈕,可以看到動態連結的4種狀態。
a:link-超級連結的正常狀態; a:visited-造訪過的超級連結狀態。
a:hover-遊標移至超級連結上時的狀態; a:active-選取超級連結的狀態。
3、 接下來將這幾種狀態分別設定,首先從下拉式選單中選擇a:link,點擊「確定」按鈕後彈出樣式表設定窗口,設定此樣式無底線,顏色為#FF6600(橘色).
4、 用相同方法設定a:visited,設定其為無底線,顏色為#FFFF00(黃色)。
5、 接下來設定a:hover,設定其為有劃線,顏色為#FF6600(橘色)。
6、 a:active不用設置,它會自動依照a:hover而定。
7、 在網頁上輸入一句話,在屬性面板中設定它的連結為「#」。即可。
****注意:必須依照這樣a:link、 a:visited 、a:hover 、a:active的順序來設置,否則不會出現預期的效果。

如果我們需要一個頁面上有兩個或更多的連結效果,可以用以下方法:
1、 點擊新樣式按鈕,樣式類型選“使用CSS選擇器”,在“選擇器」一欄裡,直接輸入a.link2:link,接著設定a.link2:link為紅色無底線。
2、 繼續定義下面兩個樣式。名稱都直接輸入,分別設定它們為a.link2:visited,紫色無底線。 a.link2:hover,藍色有底線。
3、 此時在「CSS樣式」選項下多了一個名稱為link2的自訂樣式。
4、 在頁面中輸入一段話,為它添加一個#鏈接,選中這個鏈接,然後點擊樣式表窗口中的樣式link2,將此樣式應用在該鏈接上。
5、 同樣方法可以製作同一頁上的不同連結格式。
****為保持一種風格,在同一頁面上不宜建立過多的連結樣式。

二十五、外部樣式表

***在不同的頁面中套用相同的樣式表。
1、 新樣式表,取名,然後類型選“建立自訂樣式”,定義在選“新樣式表檔”。
2、 確定後,開啟儲存外部樣式表的視窗。然後把它保存到本地站點中即可。
3、 此時,可以看到樣式表視窗中新增了一個樣式表文件,文件的後綴名為css
4、 如果當前頁面中的一個內部樣式表要匯出為外部樣式表文件,以便供其他頁面使用,可以點擊樣式表視窗右上角的灰色的圖標,選“匯出樣式表”,此時可以為樣式取名並儲存為一個外部文件。
5、 當其他頁面需要使用外部樣式表時,可以點樣式表窗口中的第一個按鈕“附加樣式表”,打開窗口,然後選擇外部樣式表文件,在添加為裡選“鏈接” ,確定即可。

二十六、其他CSS

****CSS裡的背景,是設定文字背景、表格背景圖等。
****CSS裡的區塊,是指設定文字的文字間距、對齊方式、下標、上標、排列方式等。
****CSS裡的盒子,是指設定圖片和文字內容之間的空白距離,以及圖文混排的方法。
****CSS裡的邊框,是指設定表格文字區、按鈕等的美化。
****CSS裡的列表,是指設定列表項目樣式。即那種提綱式的一段話。
****CSS裡的定位,是指設定頁面中圖片的相對和絕對定位。
****CSS裡的擴展,其中的遊標,可以設定遊標的樣式,可以設定為hand(手型)、crosshair(十字型)、text(「I」型)、wait(等待型) 、default(預設型)、help(幫助型),還有各種方向的箭頭型。
****CSS裡的擴展,其中的過濾器,可以用來做CSS濾鏡特效,也就是用來處理圖片的透明、發光等。但效果不太明顯,還是用專門加工圖片的軟體來完成比較好。

二十七、建立網路相簿

#

1、 首先要安裝好FireworksMX軟體。
2、 加工好所需要放在網路上的照片,把它們加工成一樣大小,放在一個資料夾裡。
3、 點選選單中的指令/建立網站相冊,開啟設定視窗。
4、 輸入相簿標題,副標訊息,其他資訊(以後也可再修改)。 “來源影像資料夾”,選擇剛才儲存照片的資料夾。
5、 “目標資料夾”,點選“瀏覽”按鈕選擇目前網站目錄。 (即將照片全部保存到站點裡來)
6、 “縮圖大小”一項,可以根據需要選擇,“顯示文件名稱”一項,選中會在生成的相簿中顯示每個圖片的文件名。
7、 「列」一格是每一行顯示的圖片數,預設為5,可以自己改動。
8、 下面兩個「格式」一般都選「品質較高」。
9、 勾選「為每張圖片建立導覽頁面」一項。確定即可。

二十八、自訂網頁過渡功能

*****網頁轉換是指當瀏覽者進入或離開網頁時,頁面呈現的不同的刷新效果,如捲動、百葉窗等。網頁看起來會更有動感,不過也要注意適可而止,否則太花俏的變化也容易引起瀏覽者的反感。步驟:
1、 開啟一個頁面,點選選單中的插入/檔案頭標籤/Meta,會彈出Meta對話框。 
2、 在對話方塊中的屬性選項的下拉清單中選取HTTP-equivalent選項,在值一格中鍵入Page-Enter,表示進入網頁時有網頁過渡效果。
3、在內容一格中鍵入Revealtrans(Duration=4,Transition=2),Duration=4 表示網頁過渡效果的延續時間為4秒,Transition表示過渡效果方式,值為2時表示圓形收縮。
4、輸入完後點選確定,磁碟機。這樣當我們點擊一個超連結進入這個頁面時就可以看到效果了。
5、另外還有二十多種效供你選擇,只要將Transition的值改為對應的效果的代號即可,具體效果和設定如下表所示

效果Transition 效果Transition
盒狀收縮0 溶解12
盒狀展開1 左右向中部收縮13
圓形收縮2 中部向左右展開14
圓形展開3 上下向中部收縮15
向上擦除4 中部向上向下展開16
向下擦除5 階梯狀向左下展開17
向左擦除6 階梯狀向左上展開18
向右擦除7 階梯狀向右下展開19
垂直百葉窗8 階梯狀向右上展開20
水平百葉窗9 隨機水平線21
橫向棋盤式10 隨機垂直線22
縱向棋盤式11 隨機23

#二十九、庫的應用程式

****網站中有些內容需要重複使用,例如自己製作的一個網站圖示等,此時將這個元件存為在庫裡,可以隨時調用。
1、 開啟一個頁面,選擇需要儲存的元件,例如圖示。
2、 點選選單視窗/資源,開啟資源視窗。然後在其中選最下面一本書樣的按鈕,打開庫面板。
3、 點選下面的新建按鈕,就將剛才選取的圖示儲存到庫裡了,此時還可以給它取名。
4、 在一個新頁面上要套用庫裡的內容時,打開庫面板,選中需要使用的圖標,然後點擊下面的「插入」即可。

三十、用模板迅速完成網站(首頁或內部某一頁)

#1、 首先規劃好自己想要製作的網站,要把它的各項連結的內容都設計好。如我的網站:
首頁上的連結有:網頁版、動畫版、請留言、關於我、聯絡我、許願瓶
網頁版上的連結有:站長簡介¦ ¦教研論文¦ ¦課堂尋真¦ ¦原創課件¦ ¦心海擷貝¦ ¦留影人生¦ ¦給我來信¦ ¦雁過留聲¦
動畫版上的連結與網頁版相同。
以下再連結到各種文章或課件的頁面。如「課堂尋真」連結到全是教案標題的頁面,然後由每一個教案標題,再連結到放這個教案的頁面。其他同理。
2、下載好比較適合自己規劃的、所喜歡的網頁模板,(模板網站比較好的如:http://www.mbsky.com )一般它都包括兩個文件:一個是index.htm,另一個一般是命名為images的資料夾,也就是我們所說的用來放置圖片的。
3、定義好站點,然後將這兩個檔案(夾)複製到站點資料夾下。
4、雙擊index.htm文件,即進入首頁的編輯狀態。然後就可以修改這個頁面讓它符合自己的需求。這樣即可完成首頁。

三十一、將已有的網頁儲存為範本

#

****用於在一個網站中有大量重複出現的頁面時。 (在新建和使用模板之前一定要定義好網站)
1、 選擇某一頁,點擊檔案/另存為模板,將目前頁面儲存為一個模板。此時開啟了「另存範本」窗口,為該範本取名,然後儲存。
2、 此時可以發現在網站中自動建立了一個名為Templates的資料夾,在該目錄中存有我們儲存的範本。其副檔名為.dwt
3、 這個模板目前在被運用時,是無法修改的。所以要設定模板的可編輯區域。
4、 例如,在目前範本頁面中,需要讓頁面中間部分可編輯,這樣使用範本時就可以在其中加入內容了。選取頁面中間部分的表格儲存格(按住CTRL鍵在儲存格里點選),點選主選單中的插入/範本物件/可編輯區域。此時會開啟對話框,在其中為範本取名,然後確定。
5、 此時所定義的可編輯區域被淺藍色線條框起來,且左上角還有該區域的名稱。將範本檔案儲存並關閉。
6、 點選主選單中的檔案/新建,在新頁面視窗中點選上方的「範本」選項。
7、 此時在「範本用於」一欄中列出了目前定義的站點,選取某個站點,在視窗中間一欄中顯示的是該站點擁有的範本檔案。選取某個模板,在「預覽」一欄中可以預覽該模板。然後點選「建立」按鈕,就新建了一個頁面。
8、 在出現的新頁中,除可編輯區域外,其他部分是不能進行修改的。

三十二、上傳自己的網站

1、 申請網站空間,然後將它上傳到網路上。目前基本上沒有免費空間,免費空間也都需要放置廣告,或是申請一個收費空間,它都會提供十天左右的試用期,可以當作網站測試來使用。
2、 點選申請後,會出現要求註冊的表格,一般包括使用者名稱、密碼、信箱、聯絡電話、省份、首頁的名稱、首頁的類別、首頁的簡介等。
3、 全部填完之後,即可得到以下幾項:①使用者名稱(剛才填寫)②密碼(剛才填寫)③FTP上傳位址④主頁位址(有時是將以上幾項傳送到填寫的信箱)
4、 下載並安裝FTP上傳軟體,可用CuteFtp(崑山視窗/軟體可以下載,免費)
5、 開啟CuteFtp軟體,點選主選單中的檔案/網站管理員。
6、 在開啟的對話方塊中填入好FTP上傳位址、FTP網站使用者名稱、FTP網站密碼,然後點選連接,就可以連接到網站伺服器。 (第二次打開就自動連接,不用再填寫了)
7、 連接好以後,在頁面上出現框架,左邊為本地計算機上的文件,右邊為遠程計算機,只要將左邊的文件(即做好的網站檔案)一個個拖曳到右邊,即完成了上傳。

三十三、宣傳自己的網站

如何讓網站位址讓別人知道,方法有二:
1、 用專門的軟體,可以將網站登入各大搜尋引擎。
2、 手動登入。如開啟百度(www.baidu.com),在下面有個連結“網站登入”,點擊後會被要求填寫網站地址、名稱、內容等,然後就被收入百度的搜尋引擎了,這樣別人就可以搜尋到你的網站了。其他網站登入同理。

以上是Dreamweaver架設網站的詳細步驟的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文轉載於:博客园。如有侵權,請聯絡admin@php.cn刪除

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )專業的PHP整合開發工具

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用