實訓一 制作一個簡單的網頁

1、實訓一 創(chuàng)建和管理站點、制作站點首頁實訓目標：用Dreamweaver制作一個簡單的網頁一、用Dreamweaver創(chuàng)建和管理站點（一）在D盤上創(chuàng)建“暢想未來”站點在菜單欄中選擇“站點”“新建站點”，在文本框中輸入網站的名稱“暢想未來”。（二）對站點進行規(guī)劃1在文件面板中搭建站點的結構（1）在站點根文件夾下建立4個子文件夾“city”、“novel”、“outspace”和“travel”。在文件面板中右單擊站點“暢想未來”，選擇“新建文件夾”命令。（2）在文件夾“city”中建4個子文件夾“images”、“sound”、“swf”和“webpages”。（3）將文件夾“city”中的4個子

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

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

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

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

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

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

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

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