- Dreamweaver+Photoshop+Flash+Fireworks網站建設與網頁設計完全實用
- 郭娜等編著
- 2196字
- 2019-03-01 21:27:20
1.4 快速創建基本網頁
本節將介紹一個簡單的網頁設計制作方法，使讀者對網頁制作軟件的基本使用方法和網頁制作流程有一定的了解，為后面的學習打下基礎。如圖1-14所示為網頁。
圖1-14 網頁
練習文件CD-ROM/練習文件/01/1.4/
完成文件CD-ROM/完成文件/01/1.4/index.htm
1.4.1 確定網頁主要欄目和整體布局
不管是簡單的個人網站，還是復雜的具有幾千頁面的大型網站，對網站的需求規劃都要放到第一步，因為它直接關系到網站的功能是否完善、是否達到預期的目的等。
規劃一個網站，可以用樹狀結構先把每個頁面的內容大綱列出來。尤其是當要制作一個很大的網站時，特別需要把架構規劃好，也要考慮到以后的擴充性，免得做好以后再更改整個網站的結構。
1.4.2 創建本地站點
為了更好地利用站點對文件進行管理，也為了盡量減少錯誤，如路徑或鏈接出錯，在使用Dreamweaver制作網頁以前，首先應定義一個新站點，具體操作步驟如下。
提示
規劃站點結構需要遵循的規則如下。
① 每個欄目一個文件夾，把站點劃分為多個目錄。
② 不同類型的文件放在不同的文件夾中，以利于調用和管理。
③ 在本地站點和遠端站點使用相同的目錄結構，使在本地制作的站點原封不動地顯示出來。
[1] 執行“站點”|“管理站點”命令，彈出“管理站點”對話框，在對話框中單擊“新建”按鈕，如圖1-15所示。
圖1-15 “管理站點”對話框
[2] 彈出“站點設置對象”對話框，在對話框中選擇“站點”選項，在“站點名稱”文本框中輸入名稱，單擊“本地站點文件夾”文本框右邊的“瀏覽文件夾”按鈕，如圖1-16所示，彈出“選擇根文件夾”對話框，選擇站點文件。
圖1-16 設置站點對象
[3] 單擊“確定”按鈕，返回到“管理站點”對話框，在對話框中顯示新建的站點，如圖1-17所示。單擊“完成”按鈕，即可完成站點的創建。
圖1-17 完成站點創建
1.4.3 新建網頁文檔
在創建完本地站點后，就可以創建具體的網頁了，新建網頁文檔的具體操作步驟如下。
[1] 執行“文件”|“新建”命令，彈出“新建文檔”對話框，在對話框中選擇“空白頁”|“HTML”|“無”選項，如圖1-18所示。
圖1-18 “新建文檔”對話框
[2] 單擊“創建”按鈕，新建網頁文檔，在“標題”文本框中輸入“公司簡介”，如圖1-19所示。
圖1-19 新建文檔
[3] 執行“修改”|“頁面屬性”命令，彈出“頁面屬性”對話框，在對話框中將“左邊距”、“上邊距”、“下邊距”和“右邊距”分別設置為“0”，如圖1-20所示。單擊“確定”按鈕，設置頁面屬性。
圖1-20 “頁面屬性”對話框
1.4.4 插入表格布局網頁
表格是最常用的網頁布局工具，使用表格可以對頁面中的元素進行準確定位。合理利用表格來布局網頁，有助于協調頁面結構的均衡。
[1] 將光標放置在頁面中，執行“插入”|“表格”命令，彈出“表格”對話框，在對話框中將“行數”設置為“3”，“列數”設置為“1”，“表格寬度”設置為“797像素”，如圖1-21所示。
圖1-21 “表格”對話框
[2] 單擊“確定”按鈕，插入表格，此表格記為“表格1”，將“對齊”設置為“居中對齊”，如圖1-22所示。
圖1-22 插入表格1
[3] 將光標置于表格1的第2行單元格中，插入1行5列的表格，此表格記為“表格2”，如圖1-23所示。
圖1-23 插入表格2
[4] 將光標置于表格2的第1列單元格中，插入4行1列的表格，此表格記為“表格3”，如圖1-24所示。
圖1-24 插入表格3
[5] 選擇表格2的后3列合并單元格，插入2行3列的表格，此表格記為“表格4”，如圖1-25所示。
圖1-25 插入表格4
[6] 將光標置于表格4的第1列單元格中，插入2行1列的表格，此表格記為“表格5”，如圖1-26所示。
圖1-26 插入表格5
1.4.5 插入多媒體
多媒體技術的發展使網頁設計者能輕松地在網頁中加入聲音、動畫、影片等內容。下面講述Flash動畫的插入方法，具體操作步驟如下。
[1] 將光標置于表格1的第1行單元格中，執行“插入”|“媒體”|“SWF”命令，彈出“選擇SWF”對話框，在對話框中選擇“banner.swf”，如圖1-27所示。
圖1-27 “選擇SWF”對話框
[2] 單擊“確定”按鈕，插入Flash，設置循環及自動播放，如圖1-28所示。
圖1-28 插入Flash
1.4.6 插入文本內容
文本是基本的信息載體，不管網頁內容如何豐富，文本自始至終都是網頁中最基本的元素，下面講述文本的插入和使用。
[1] 將光標置于表格5的第2行單元格中，輸入文字“2010年”，如圖1-29所示。
圖1-29 輸入文字“2010年”
[2] 同理在表格4內，將剩余部分文字輸入，如圖1-30所示。
圖1-30 輸入剩余部分文字
1.4.7 插入圖像
美觀的網頁是圖文并茂的，漂亮的圖像不但使網頁更加美觀、形象和生動，而且使網頁中的內容更加豐富多彩。
[1] 將光標置于表格3相應的單元格中，執行“插入”|“圖像”命令，在彈出“選擇圖像源文件”對話框中選擇合適的圖片，如圖1-31所示。
圖1-31 選擇圖像
[2] 單擊“確定”按鈕，插入圖像，如圖1-32所示。
圖1-32 插入圖像
[3] 將光標置于表格4相應的單元格中，執行“插入”|“圖像”命令，彈出“選擇圖像源文件”對話框，分別插入圖像，如圖1-33所示。
圖1-33 將光標置于表格4插入圖像
[4] 將光標置于表格5相應的單元格中，執行“插入”|“圖像”命令，彈出“選擇圖像源文件”對話框，分別插入其他圖像，如圖1-34所示。
圖1-34 插入其他圖像
[5] 將光標置于表格5的第2行單元格中相應的位置，插入圖像，如圖1-35所示。
圖1-35 將光標置于表格5第2行單元格插入圖像
[6] 將光標置于表格1的第3行單元格中相應的位置，插入圖像，如圖1-36所示。
圖1-36 將光標置于表格1第3行單元格插入圖像
1.4.8 網頁的保存
網頁制作完成并保存后，即可在瀏覽器中看到網頁效果。
執行“文件”|“保存”命令，彈出“另存為”對話框，在對話框中選擇保存的位置，在“文件名”文本框中輸入index.htm，如圖1-37所示。單擊“保存”按鈕，即可保存文檔。
圖1-37 “另存為”對話框