實(shí)訓(xùn)一 制作一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)

1、實(shí)訓(xùn)一 創(chuàng)建和管理站點(diǎn)、制作站點(diǎn)首頁(yè)實(shí)訓(xùn)目標(biāo)：用Dreamweaver制作一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)一、用Dreamweaver創(chuàng)建和管理站點(diǎn)（一）在D盤(pán)上創(chuàng)建“暢想未來(lái)”站點(diǎn)在菜單欄中選擇“站點(diǎn)”“新建站點(diǎn)”，在文本框中輸入網(wǎng)站的名稱“暢想未來(lái)”。（二）對(duì)站點(diǎn)進(jìn)行規(guī)劃1在文件面板中搭建站點(diǎn)的結(jié)構(gòu)（1）在站點(diǎn)根文件夾下建立4個(gè)子文件夾“city”、“novel”、“outspace”和“travel”。在文件面板中右單擊站點(diǎn)“暢想未來(lái)”，選擇“新建文件夾”命令。（2）在文件夾“city”中建4個(gè)子文件夾“images”、“sound”、“swf”和“webpages”。（3）將文件夾“city”中的4個(gè)子

2、文件夾分別復(fù)制到“novel”、“outspace”和“travel”中。方法：依次選中“images”、“sound”、“swf”和“webpages”，然后按住Ctrl鍵，分別將其拖動(dòng)到“novel”、“outspace”和“travel”中。結(jié)果如下圖所示。（二）設(shè)置網(wǎng)站首頁(yè)，重新搭建站點(diǎn)結(jié)構(gòu)1設(shè)置網(wǎng)站首頁(yè)（1）右單擊站點(diǎn)的根文件夾，從彈出的快捷菜單中選擇“新建文件”命令。（2）將文件重命名為“index.html”。（3）將其設(shè)置成首頁(yè)。2重新搭建站點(diǎn)結(jié)構(gòu)（1）將站點(diǎn)的根文件夾下的4個(gè)子文件夾“city”、“novel”、“outspace”和“travel”刪除。（2）在站點(diǎn)的根文件

3、夾下新建2個(gè)子文件夾“images”和“webpages”，如下圖所示。在Dreamweaver中打開(kāi)文件“txt3_1.txt”，并將其另存為index.html。二、設(shè)置index.html網(wǎng)頁(yè)屬性選擇“修改”“頁(yè)面屬性”，打開(kāi)“頁(yè)面屬性”對(duì)話框。（一）設(shè)置頁(yè)面外觀在“分類”“外觀”中按下圖設(shè)置“頁(yè)面字體”：宋體、“文本顏色”：#034881、“背景顏色”：#B8DCF4。（二）設(shè)置頁(yè)面標(biāo)題在“分類”“標(biāo)題/編碼”中按下圖設(shè)置“標(biāo)題”：暢想未來(lái)。（三）按F12鍵，保存并預(yù)覽網(wǎng)頁(yè)。三、制作index.html網(wǎng)頁(yè)（一）編輯文本1編輯網(wǎng)頁(yè)中的文本。按下圖編輯index.html網(wǎng)頁(yè)中的文本。換

4、行標(biāo)記的使用HTML文件中任何位置只要使用了標(biāo)記，當(dāng)文件顯示在瀏覽器中時(shí)，該位置之后的文字將顯示于下一行，該標(biāo)記就是起到換行的標(biāo)記。段落標(biāo)記的使用由標(biāo)記所標(biāo)識(shí)和文字，代表同一個(gè)段落的文字。在瀏覽器中，不同段落文字間除了換行外，有時(shí)還會(huì)以一行空白加以間隔，以便區(qū)別出文字的不同段落，其語(yǔ)法如下：文字和的有什么區(qū)別呢？通俗的講就是，它們?cè)诜中械臅r(shí)候分得行比 分得行距比較大！在HTML代碼中，是換行符，表示強(qiáng)制性換到下一行。而則是分段符，相當(dāng)于回車(chē)，等同于兩個(gè)。Copyright ? 2007 - 200x 暢想工作室， All Rights Reserved 如果您對(duì)我們的服務(wù)有任何意見(jiàn)或建議，請(qǐng)惠

5、賜E-mail至:teach_ie 聯(lián)系電話聯(lián)系人：絲雨輕夢(mèng)Copyright ? 2007 - 200x 暢想工作室， All Rights Reserved如果您對(duì)我們的服務(wù)有任何意見(jiàn)或建議，請(qǐng)惠賜E-mail至:teach_ie聯(lián)系電話聯(lián)系人：絲雨輕夢(mèng)2設(shè)置文本格式（1）在第一行前輸入2個(gè)空格，并去掉最后3行之間的空行，如下圖所示。（2）將“未來(lái)都市”、“未來(lái)旅游”、“未來(lái)通訊”、“展望太空”、“科幻小說(shuō)”設(shè)置為“標(biāo)題2”，并為其添加項(xiàng)目符號(hào)。（3）將“設(shè)為首頁(yè)”、“加入收藏”、“聯(lián)系我們”、“網(wǎng)站管理”設(shè)置為“標(biāo)題5”。（4）

6、將最后4行文本的對(duì)齊方式設(shè)置為“居中”。（5）將最后3行文本的顏色設(shè)置為灰色（#999999）。3添加和刪除中文字體（1）添加“隸書(shū)”、“華文行楷”等中文字體。（2）將“未來(lái)都市”、“未來(lái)旅游”、“未來(lái)通訊”、“展望太空”、“科幻小說(shuō)”5行文字的字體設(shè)置為華文行楷。（3）按F12，保存并預(yù)覽網(wǎng)頁(yè)。（二）在頁(yè)面中插入和處理圖象1插入圖象（1）在index.html頁(yè)面頂端插入圖象“img3_1.jpg”。（a）將光標(biāo)置于頁(yè)面左上角的起始處，然后按回車(chē)鍵，生成一個(gè)空行。（b）在菜單欄中選擇“插入”“圖象”命令，找到素材文件夾webcoursechapter03images中的圖象“img3_1.j

7、pg”。注意：要將其復(fù)制到站點(diǎn)的“images”文件夾中。（c）用同樣的方法，在第一段下面插入圖象“img3_2.jpg”，效果如下圖所示。2調(diào)整圖象“img3_1.jpg”、“img3_2.jpg”的對(duì)齊方式（1）使圖象“img3_1.jpg”居中對(duì)齊。方法：選中圖象“img3_1.jpg”，在屬性面板中單擊“居中對(duì)齊”按鈕。（2）使圖象“img3_2.jpg”左對(duì)齊。方法同上。3調(diào)整圖象“img3_2.jpg”的周邊間距選中圖象“img3_2.jpg”，按下圖設(shè)置圖象的垂直邊距和水平邊距。4為圖象“img3_2.jpg”添加提示文本：科幻圖象方法：選中圖象“img3_2.jpg”，在“屬性

8、”面板的“替換”文本框中輸入“科幻圖象”，然后按回車(chē)鍵。按F12，保存并預(yù)覽網(wǎng)頁(yè)，效果如下圖所示。（三）插入水平線1在頁(yè)面中插入水平線（1）將插入點(diǎn)置于“設(shè)為首頁(yè)”文本前。（2）在菜單欄中選擇“插入”“HTML”“水平線”。2修改水平線將水平線設(shè)置成居中對(duì)齊、寬：920像素、高：5像素。如下圖所示。3將水平線的顏色設(shè)置為藍(lán)色（1）選中水平線。（2）單擊“屬性”面板右側(cè)的“快速標(biāo)簽編輯器”按鈕，打開(kāi)“快速標(biāo)簽編輯器”，如下圖所示，在其中輸入“color=”#024918”。（3）按F12鍵預(yù)覽，可以看到水平線變?yōu)樗{(lán)色了。（四）插入特殊字符1在頁(yè)面頁(yè)腳插入版權(quán)字符“”（Ctrl+Alt+c）（1）

9、刪除頁(yè)腳中的“？”。（2）在菜單欄上選擇“插入”“HTML”“特殊字符”，從單出的子菜單中選擇“版權(quán)”。2改變欄目顏色將“未來(lái)都市”、“未來(lái)旅游”、“未來(lái)通訊”、“展望太空”、“科幻小說(shuō)”5行文本的顏色設(shè)置為與頂端“暢想未來(lái)”logo相同的顏色。方法：先選中文本，然后在文本的“屬性”面板上單擊“文本顏色”按鈕，拖動(dòng)鼠標(biāo)移動(dòng)滴管到所要設(shè)置的顏色上單擊即可，如下圖所示。至此，本頁(yè)面已完成，完成后的效果如下。四、實(shí)訓(xùn)總結(jié)（一）本實(shí)訓(xùn)介紹了利用Dreamweaver創(chuàng)建站點(diǎn)的方法1建立站點(diǎn)，首先要規(guī)劃站點(diǎn)結(jié)構(gòu)，然后創(chuàng)建站點(diǎn)。2其中重點(diǎn)介紹了利用“文件”面板管理站點(diǎn)文件的方法。（二）制作一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)1設(shè)置頁(yè)面屬性2網(wǎng)頁(yè)中的基本元素（1）在網(wǎng)頁(yè)中編輯文本字體格式和段落格式（2）在網(wǎng)頁(yè)中插入圖片圖片格式的設(shè)置（3）在網(wǎng)頁(yè)中插入水平線水平線格式的設(shè)置（4）在網(wǎng)頁(yè)中插入特殊字符五、作業(yè)參照提供的作業(yè)結(jié)果，利用所給的素材文件，制作一個(gè)介紹臺(tái)灣音樂(lè)團(tuán)體“信樂(lè)團(tuán)”的網(wǎng)站，要求如下：1在Dreamweaver創(chuàng)建本地站點(diǎn)文件夾，將網(wǎng)頁(yè)用到的素材按類別復(fù)制到站點(diǎn)文件夾中。2