案例一 簡單個人網(wǎng)站的制作一、目的及要求 1. 認識Dreamwaver 開發(fā)環(huán)境；2. 掌握站點、網(wǎng)頁的創(chuàng)建、保存、運行；2. 掌握運用表格進行頁面布局；4. 熟練進行圖片、文字、鏈接等網(wǎng)頁元素的

案例一 簡單個人網(wǎng)站的制作

一、目的及要求 1. 認識Dreamwaver 開發(fā)環(huán)境；

2. 掌握站點、網(wǎng)頁的創(chuàng)建、保存、運行；

2. 掌握運用表格進行頁面布局；

4. 熟練進行圖片、文字、鏈接等網(wǎng)頁元素的添加和屬性設(shè)置。

創(chuàng)建個人網(wǎng)站，網(wǎng)站主要包括個人資料、我的相冊和南山學院等項目，運行效果如圖9-1所示，當點擊“我的相冊”，運行效果如圖9-2所示。當單擊“南山學院”鏈接，跳轉(zhuǎn)到南山學院的主頁。 二、案例效果圖

圖9-1 個人資料頁面

圖9-2 我的相冊頁面

三、內(nèi)容及操作本案例創(chuàng)建如圖9-1所示的網(wǎng)站，通過該案例，學會網(wǎng)頁創(chuàng)建、頁面布局、元素添加設(shè)

置、瀏覽頁面等基本操作。

操作步驟：

注：準備一個image 文件夾，包括需要的圖片文件。

1. 啟動Dreamweaver

打開“開始|程序|Dreamweaver”后，彈出如圖9-3所示的歡迎界面。

圖9-3所示的歡迎界面 圖9-4 站點定義界面一

圖9-5 站點定義界面二

2. 創(chuàng)建站點

選擇菜單中“站點|新建”，彈出“站點定義為”對話框，如圖9-4所示的站點定義界面一，在文本框中輸入站點名稱“first ”，選擇“下一步”，選取默認信息至“共享文件”選項，在“如何連接到遠程服務(wù)器”下拉列表中選擇“無”如圖9-5 站點定義界面二，最終選擇“完成”按鈕。

3. 添加文件

右鍵單擊文件面板的站點，彈出快捷菜單如圖9-6所示。選擇“新建文件”，修改默認文件名為“index.html ”，相同操作添加頁面“photo.html ”。

圖9-6 新建文件 圖9-7 站點結(jié)構(gòu)圖

4. 添加文件夾

將準備好的image 文件夾復制到e ：first 文件夾下，在文件屬性中，點擊“刷新” 按鈕。Image 文件夾會顯示到文件站點中。如圖9-7站點結(jié)構(gòu)圖。

5. 頁面屬性設(shè)置

左鍵雙擊“index.html ”頁面文件，在“文檔”窗口會顯示“index.html ”頁面，如圖9-8所示。點擊“屬性”欄中的“頁面屬性”按鈕，彈出頁面屬性對口話框，如圖9-9所示。在頁面屬性對話框中，單擊背景圖像對應(yīng)的“瀏覽”按鈕，彈出“選擇圖片文件源”對話框如圖9-10所示，選擇“bg.gif ”圖片；上邊距和下邊距設(shè)置成 “0像素”；在標題/編碼分類中，標題文本框輸入“我的主頁”如圖9-11所示。選擇“確定”按鈕完成頁面屬性的設(shè)置，界面效果如圖9-12所示。

圖9-8 index文件界面

圖9-9 頁面屬性對話框一

圖9-10 “選擇圖片文件源”對話框 圖9-11 頁面屬性二

圖9-12 頁面效果

6. 表格布局

選擇“插入|常用|表格”，圖標為，在彈出的表格對話框中輸入下列的屬

性。行數(shù)：3 ，列數(shù)2，表格寬度：800 像素，邊框1像素。單擊“確定”按鈕后，顯示效果如圖9-13表格對話框所示。

圖 9-13 表格對話框

7. 表格屬性設(shè)置

（1）表格居中顯示。將“屬性”欄中對齊方式設(shè)置為“居中對齊”。

（2）合并單元格。左鍵選中表格第1行，右鍵單擊|表格|合并表格，第3行操作相同。

(3）設(shè)置單元格屬性。

1）單擊表格第1行，在“屬性”欄中設(shè)置單元格屬性。如表9-1-1所以。

2）分別單擊第2行第1個單元格，設(shè)置屬性及屬性值如下表。單擊第2行第2個單元格，設(shè)置屬性及屬性值如下表。

4）單擊第3

圖9-13 表格布局效果圖

8. 插入表格

單擊第2行第1個單元格，選擇“插入|常用|表格”，選擇4行，1列，寬度100，在第2行，第2個單元格選擇“插入|常用|表格”，選擇8行，2列。并將第1列，第3行道第8行 合并單元格，對表格的操作后如圖9-14所示。

圖9-14在頁面中插入表格效果圖

9. 插入圖片

在左側(cè)表格的相應(yīng)位置選擇“插入|常用|圖片”，選擇圖片“welcome.gif ”，調(diào)整至合適大??；在右側(cè)表格的第3行，第1個單元格選擇“插入|常用|圖片”，選擇“cat.jpg ”, 設(shè)置圖片屬性，寬200px ，高260px 。效果圖如9-15所示。

圖9-15 插入圖片效果圖

10. 設(shè)置鏈接

在左側(cè)表格“插入|常用|鏈接”，制作“我的首頁”超鏈接，在對話康中輸入相應(yīng)信息如圖9-16所示。同樣，制作“我的相冊”超鏈接，及“我的母?！背溄印２⒃O(shè)置中對齊。

圖9-16 我的首頁的超鏈接 圖9-17南山學院超鏈接

11. 輸入文字并設(shè)置字體

① 在相應(yīng)的位置輸入應(yīng)的文字。

② “個人檔案”設(shè)置為字號為36px ，顏色為#663399，居中。設(shè)置其所在單元格背景

圖片為“image/li.gif”。

③ 左鍵第1行，“插入|布局|繪制AP Div ” ，當出現(xiàn)十字架后，拖拽合適寬度，輸入

“歡迎光臨奮斗網(wǎng)站”。在屬性欄中設(shè)置文字的屬性，如圖9-18。設(shè)置字號為48號，“奮斗”兩字為綠色。

圖9-18 文字屬性設(shè)置

12．保存頁面。選擇“文件|保存”。

13．復制頁面

復制整個index.html 頁面。粘貼至photo.html 頁面。

14．刪除表格

選擇“個人檔案”表格，按Delete 鍵刪除表格。

按照樣張，及以上操作，實現(xiàn)對phot o.html 頁面的制作。插入4行兩列表格，“插入|圖片”，設(shè)置圖片合適大小。

15. 保存頁面。選擇“文件|保存”。

16．運行頁面 .運行鍵盤中F12鍵. 按提示保存頁面。運行結(jié)果如樣張所示。