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

2017-03-27

15430

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

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

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

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

2. 掌握運(yùn)用表格進(jìn)行頁面布局；

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

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

圖9-1 個人資料頁面

圖9-2 我的相冊頁面

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

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

操作步驟：

注：準(zhǔn)備一個image 文件夾，包括需要的圖片文件。

1. 啟動Dreamweaver

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

圖9-3所示的歡迎界面圖9-4 站點(diǎn)定義界面一

圖9-5 站點(diǎn)定義界面二

2. 創(chuàng)建站點(diǎn)

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

3. 添加文件

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

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

4. 添加文件夾

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

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

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

圖9-8 index文件界面

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

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

圖9-12 頁面效果

6. 表格布局

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

性。行數(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所示。