1.初級(jí)網(wǎng)頁(yè)制作-實(shí)訓(xùn)指導(dǎo)書

實(shí)訓(xùn)指導(dǎo)書（2011-2012學(xué)年度第二學(xué)期）實(shí)訓(xùn)類型：初級(jí)網(wǎng)頁(yè)制作適用專業(yè)：網(wǎng)絡(luò)技術(shù)撰寫教師：陳冠星素材資源：目錄TOC\o"1-4"\h\z\u一、實(shí)訓(xùn)目標(biāo) 3二、實(shí)訓(xùn)資料、工具設(shè)備 3三、實(shí)訓(xùn)內(nèi)容及具體項(xiàng)目操作步驟 3（一）實(shí)訓(xùn)內(nèi)容 3（二）具體項(xiàng)目操作步驟 4個(gè)人網(wǎng)站的制作 4PAGEPAGE4一、實(shí)訓(xùn)目標(biāo)1.熟練掌握Dreamweaver的基礎(chǔ)操作和操作環(huán)境;2.進(jìn)一步熟悉和掌握網(wǎng)站建設(shè)的基本流程和技術(shù)規(guī)范;3.熟練掌握站點(diǎn)的管理、文本、圖像和鏈接表格、框架和表單的使用等操作;4.能獨(dú)立設(shè)計(jì)一個(gè)內(nèi)容完整、圖文并茂、技術(shù)運(yùn)用得當(dāng)?shù)木W(wǎng)站;5.培養(yǎng)學(xué)生設(shè)計(jì)網(wǎng)頁(yè)時(shí)在“主題展示”、“頁(yè)面布局”、“色彩搭配”等方面的綜合設(shè)計(jì)能力;6.具備獨(dú)立撰寫實(shí)訓(xùn)報(bào)告等科技文件的基本能力;7.提高獨(dú)立分析問(wèn)題和解決問(wèn)題的能力,為以后從事網(wǎng)站設(shè)計(jì)和管理工作打下堅(jiān)實(shí)的基礎(chǔ)。二、實(shí)訓(xùn)資料、工具設(shè)備1．本學(xué)期使用的教材；有關(guān)Dreamweaver的參考書。2．工具與設(shè)備： 硬件：PC機(jī)，能連接外網(wǎng)。 軟件：WINDOWS操作系統(tǒng)；Dreamweavercs3環(huán)境。三、實(shí)訓(xùn)內(nèi)容及具體項(xiàng)目操作步驟（一）實(shí)訓(xùn)內(nèi)容1．在Dreamweaver環(huán)境中設(shè)計(jì)網(wǎng)站：站點(diǎn)規(guī)劃，搜集資料。確定網(wǎng)站主題內(nèi)容，規(guī)劃站點(diǎn)結(jié)構(gòu)，從網(wǎng)上搜索相關(guān)資料（圖片、文字等）。進(jìn)行主頁(yè)設(shè)計(jì)。構(gòu)思主頁(yè)布局，進(jìn)行主頁(yè)標(biāo)題圖片的設(shè)計(jì)，進(jìn)行主頁(yè)其余圖片的設(shè)計(jì)和頁(yè)面內(nèi)容的錄入，最后進(jìn)行主頁(yè)的整體優(yōu)化設(shè)計(jì)。網(wǎng)頁(yè)設(shè)計(jì)。包括版面設(shè)計(jì)和圖形設(shè)計(jì)、內(nèi)容錄入等。綜合優(yōu)化。鏈接正確、得當(dāng)，動(dòng)態(tài)效果好。網(wǎng)站測(cè)試并遞交。在瀏覽器中對(duì)完成的網(wǎng)站逐頁(yè)打開測(cè)試，包括鏈接正確與否，頁(yè)面打開時(shí)間，圖片和動(dòng)畫是否丟失等。該網(wǎng)站需要設(shè)計(jì)的基本要求主要有：從網(wǎng)頁(yè)的構(gòu)思、版式、色彩、賦于網(wǎng)頁(yè)新穎獨(dú)特的樣式，給瀏覽者以良好的視覺(jué)感受。良好的瀏覽導(dǎo)航、讓瀏覽者可以很容易找到要找的東西，網(wǎng)頁(yè)內(nèi)容便于閱讀。與題目特點(diǎn)相符合的創(chuàng)意。網(wǎng)頁(yè)中應(yīng)出現(xiàn):美化文字內(nèi)容、HTML樣式的創(chuàng)建、CSS樣式的創(chuàng)建與運(yùn)用、編輯圖、合理的布局。導(dǎo)航欄包括多個(gè)部分。不少于10個(gè)頁(yè)面，包括首頁(yè)和若干個(gè)二級(jí)子頁(yè)面。（二）具體項(xiàng)目操作步驟個(gè)人網(wǎng)站的制作站點(diǎn)規(guī)劃制作網(wǎng)站時(shí)首先應(yīng)設(shè)計(jì)規(guī)劃一個(gè)具體的方案，以此作為進(jìn)一步工作的依據(jù)，下面就開始進(jìn)行實(shí)例網(wǎng)站的規(guī)劃工作。1．確定建設(shè)網(wǎng)站的目標(biāo)在考慮網(wǎng)站的內(nèi)容之前，首先要明確網(wǎng)站的目標(biāo)。本網(wǎng)站是一個(gè)個(gè)人網(wǎng)站，所以建設(shè)該網(wǎng)站的目標(biāo)是介紹自己，把自己的興趣愛(ài)好做上去，和別人交流，讓朋友們認(rèn)識(shí)自己，同時(shí)為朋友們提供常用軟件下載的網(wǎng)址。2．分析目標(biāo)用戶對(duì)站點(diǎn)的需求洌覽該網(wǎng)站的群體一般都是一些在校學(xué)生，所以在制作網(wǎng)站時(shí)可以考慮結(jié)合當(dāng)前學(xué)生的興趣和愛(ài)好。所以本網(wǎng)站的內(nèi)容從以下幾個(gè)方面來(lái)劃分：我的簡(jiǎn)歷、給我留言、飛鴿傳書、音樂(lè)試聽(tīng)、心情日記、軟件下載等，整個(gè)站點(diǎn)的導(dǎo)航結(jié)構(gòu)如圖1所示。個(gè)人網(wǎng)站首頁(yè)軟件下載飛鴿傳書我的簡(jiǎn)歷給我留言音樂(lè)試聽(tīng)文章1文章2文章3文章4……..文章n心情日記個(gè)人網(wǎng)站首頁(yè)軟件下載飛鴿傳書我的簡(jiǎn)歷給我留言音樂(lè)試聽(tīng)文章1文章2文章3文章4……..文章n心情日記圖1站點(diǎn)結(jié)構(gòu)圖3．確定網(wǎng)站風(fēng)格由于該網(wǎng)站屬于個(gè)人網(wǎng)站，它直接反映人的個(gè)性，所以可以根據(jù)個(gè)人喜好來(lái)設(shè)計(jì)網(wǎng)站的風(fēng)格。4．考慮網(wǎng)絡(luò)的技術(shù)問(wèn)題由于本網(wǎng)站的目標(biāo)用戶極不固定，所以只按照普通目標(biāo)用戶的要求來(lái)規(guī)劃出相關(guān)的技術(shù)約束。使用Windows系統(tǒng)和IE濟(jì)覽器。主要采用1024×768分辨率。需要安裝Flash插件。(Ⅱ)網(wǎng)頁(yè)制作對(duì)網(wǎng)站進(jìn)行基本規(guī)劃之后，就可以開始頁(yè)面設(shè)計(jì)和素材準(zhǔn)備的工作。然后就開始網(wǎng)站制作這一流程，包括站點(diǎn)的創(chuàng)建和具體頁(yè)面的制作。本網(wǎng)站的主題是反映一個(gè)大學(xué)生的校園生活。1．站點(diǎn)的建立新建一個(gè)站點(diǎn)的具體步驟如下：（1）使用Windows資源管理器新建一個(gè)文件夾，本例中選擇E盤，給新建文件命名為grwz。（2）啟動(dòng)Dreamweaver，選擇【站點(diǎn)】→【管理站點(diǎn)】→【新建站點(diǎn)】菜單命令，在“定義站點(diǎn)”對(duì)話框中確定站點(diǎn)名稱。單擊【下一步】按鈕，在“是否打算使用服務(wù)器技術(shù)”中選擇“否”，即不想使用服務(wù)器技術(shù)。再單擊【下一步】按鈕，在“您將把文件存儲(chǔ)在計(jì)算機(jī)上的什么位置”中定位到D:\glwz，單擊【下一步】按鈕，在“您如何連接到遠(yuǎn)程服務(wù)器”選項(xiàng)中選擇“無(wú)”。單擊【下一步】按鈕再單擊【完成】按鈕即可。（3）在站點(diǎn)根文件夾指定好之后，就可以根據(jù)站點(diǎn)設(shè)計(jì)方案在根目錄中添加一些文件夾，搭建起站點(diǎn)的組織結(jié)構(gòu)。將此網(wǎng)站中用到的圖片、音樂(lè)文件及Flash動(dòng)畫保存在站點(diǎn)image，sound及swf文件夾中，同時(shí)再建一個(gè)文件夾other，用來(lái)存放三級(jí)頁(yè)面。2．制作主頁(yè)制作主頁(yè)步驟如下。（1）選擇菜單【文件】→【新建】命令，在彈出的對(duì)話框中選擇“HTML”頁(yè)面類型，在布局中選擇一個(gè)合適的頁(yè)面布局，然后單擊【創(chuàng)建】按鈕。（2）在剛才網(wǎng)頁(yè)中插入一個(gè)預(yù)先準(zhǔn)備好的Flash影片，并使其在單元格中處于水平居中，垂直置底的位置。然后選擇【文件】→【保存】菜單命令，并將其取名為index.html。如果想在打開頁(yè)面的時(shí)候播放音樂(lè)，則可以插入音樂(lè)。由于背景音樂(lè)并不是一種標(biāo)準(zhǔn)的網(wǎng)頁(yè)屬性，所以需要通過(guò)修改源代碼的方式為網(wǎng)頁(yè)添加背景音樂(lè)。方法是：?jiǎn)螕簟按a”或“拆分”按鈕圖標(biāo)將其切換到代碼視圖或混合視圖，在<head>和</head>之間添加代碼為<bgsoundsrc=“背景音樂(lè)的URL”>。（3）然后選擇【文件】→【保存】菜單命令，這樣首頁(yè)就做好了。3．制作“音樂(lè)試聽(tīng)”頁(yè)面具體步驟如下：（1）選擇菜單【文件】→【新建】命令，在彈出的對(duì)話框中選擇“HTML”頁(yè)面類型，在布局中選擇一個(gè)合適的頁(yè)面布局，然后單擊【創(chuàng)建】按鈕。（2）單擊插入選項(xiàng)卡上的“標(biāo)準(zhǔn)”圖標(biāo)按鈕，在可編輯區(qū)中插入一個(gè)10行7列的表格。（3）在表格第一行中輸入文字“序”、“類型”、“歌曲名”、“歌曲手”、“星級(jí)”、“試聽(tīng)”、“下載”。接下去再輸入自已所喜歡的歌曲名，在“星級(jí)”、“試聽(tīng)”、“下載”列中分別插入對(duì)應(yīng)圖片。其中星級(jí)的五角星圖片量根據(jù)需要插入。（4）選中在上一步驟中的表格，在表格的【屬性】面板“間距”文本框中填入“10”。（5）選中表格中的所有單元格，修改【屬性】面板中的字號(hào)大小為14，顏色為藍(lán)色，單元格的水平和垂直都為“居中”，單擊【文件】→【保存】菜單命令，并將文件名保存為yyst.html。4．制作“心情日記”頁(yè)面“心情日記”頁(yè)面制作步驟如下。（1）選擇菜單【文件】→【新建】命令，在彈出的對(duì)話框中選擇“HTML”頁(yè)面類型，在布局中選擇一個(gè)合適的頁(yè)面布局，然后單擊【創(chuàng)建】按鈕。（2）單擊【插入】面板上的“標(biāo)準(zhǔn)”按鈕圖標(biāo)，在可編輯區(qū)域插入一個(gè)10行2列的表格。（3）在單元格中插入圖片，根據(jù)自己的需要輸入文字，在下面的【屬性】面板中設(shè)置文字的大小為14，顏色為綠色，單元格水平為“左對(duì)齊”命令，垂直為“居中”，表格【屬性】面板的“間距”文本框中填入10，選擇菜單【文件】→【保存】菜單命令，并將文件名保存為qrj.html。5．制作軟件下載頁(yè)面制作“軟件下載”頁(yè)面步驟如下：選擇菜單【文件】→【新建】命令，在彈出的對(duì)話框中選擇“HTML”頁(yè)面類型，在布局中選擇一個(gè)合適的頁(yè)面布局，然后單擊【創(chuàng)建】按鈕。（2）單擊【插入】面板上的“標(biāo)準(zhǔn)”按鈕，在可編輯區(qū)插入一個(gè)9行5列的表格。（3）輸入文字及圖片，將文字的“大小”設(shè)置成14，顏色為綠色，在表格【屬性】面板的“間距”文本框中填入10，選擇【文件】→【保存】菜單命令，并將文檔命名為rjxz.html。則軟件下載頁(yè)面基本做完。（4）制作超鏈接。選中序號(hào)1中的詳細(xì)信息，在下面的【屬性】面板的“鏈接”文本框中填入鏈接地址，在下載的圖片的【屬性】面板“鏈接”文本框中輸入鏈接地址，下面的鏈接與此相同，這里就不再敘述，詳細(xì)例子可參看光盤中的案例。（5）若不希望超鏈接下面出現(xiàn)下劃線，或者不喜歡默認(rèn)的鏈接顏色，則可修改頁(yè)面屬性。方法是：選擇【修改】→【頁(yè)面屬性】菜單命令。在出現(xiàn)的“頁(yè)面屬性”對(duì)話框中的“分類”一欄中選擇“鏈接”。在“鏈接顏色”及“已訪問(wèn)鏈接”中都選擇“#009900”。同理在活動(dòng)鏈接中選擇自已喜歡的顏色，在“下劃線樣式”下拉列表中選擇“始終無(wú)下劃線”選項(xiàng)。6．制作“我的簡(jiǎn)歷”的頁(yè)面具體步驟如下：（1）選擇菜單【文件】→【新建】命令，在彈出的對(duì)話框中選擇“HTML”頁(yè)面類型，在布局中選擇一個(gè)合適的頁(yè)面布局，然后單擊【創(chuàng)建】按鈕。（2）單擊插入面板上的“標(biāo)準(zhǔn)”圖標(biāo)按鈕，在可編輯區(qū)域插入一個(gè)7行2列的表格。輸入文字，將文字的“大小”設(shè)置成16，顏色為綠色，在表格【屬性】面板的“間距”文本框中填入10，選擇【文件】→【保存】菜單命令，并將文檔命名為wdjl.html，則“我的簡(jiǎn)歷”頁(yè)面就做完了。7．“給我留言”的頁(yè)面“給我留言”頁(yè)面是一個(gè)正在建設(shè)中的頁(yè)面。具體步驟如下：（1）選擇菜單【文件】→【新建】命令，在彈出的對(duì)話框中選擇“HTML”頁(yè)面類型，在布局中選擇一個(gè)合適的頁(yè)面布局，然后單擊【創(chuàng)建】按鈕。（2）單擊布局單元格按鈕，在可編輯區(qū)域中繪制一個(gè)布局單元格（與做主頁(yè)的方法一樣）插入圖片，并輸入文字“正在建設(shè)中……”。（3）選擇【文件】→【保存】菜單命令，并保存文件名為gwly.html，則“給我留言”的頁(yè)面就制作完成了。到目前為止，首頁(yè)及二級(jí)頁(yè)面就做完了，然后將各個(gè)頁(yè)面之間互相做好超鏈接就行，但是各個(gè)頁(yè)面互作超鏈接的工作量比較大，最為簡(jiǎn)捷的方法是在模板中做好超鏈接,這里我們沒(méi)有使用模板，所以可以在首頁(yè)中殺之好鏈接，然后再把鏈接部分復(fù)制到其他頁(yè)面。在Dreamweaver中打開index.htm，選中“首頁(yè)”圖片，在【屬性】面板的“鏈接”文本框中輸入index.htm；選中“音樂(lè)試聽(tīng)”圖片，在【屬性】面板的“鏈接”文本框中輸入../yyst.htm選中“心情日記”圖片，在【屬性】面板的【鏈接】中輸入../xqrj.htm選中“軟件下載”圖片，在【屬性】面板的“鏈接”文本框中輸入../rjxz.htm。選中“我的簡(jiǎn)歷”圖片，在【屬性】面板的【鏈接】文本框中輸入../wdjl.htm。選中“給我留言”圖片，在【屬性】面板的【鏈接】文本框中輸入../gwly.htm選中“飛鴿傳書”圖片，在【屬性】面板的【鏈接】文本框中輸入mailto:a123@163.com（假設(shè)主人的郵箱地址為：a1@163.com），然后單擊【保存】按鈕。8．制作三級(jí)頁(yè)面由于這幾個(gè)三級(jí)頁(yè)面的布局差不多，所以準(zhǔn)備制作一個(gè)模板。（1）具體操作步驟如下。在“other”下新建一個(gè)頁(yè)面，在頁(yè)面屬性面板中單擊“頁(yè)面屬性”圖標(biāo)按鈕。（2）在“背景圖像”欄中輸入圖片文件，單擊【確定】按鈕。（3）插入一個(gè)1行3列的表格，調(diào)整列距，在第一列和第三列中分別插入插入圖片。選擇【文件】→【另存為模板】菜單命令，給此模板取名為untitle.dwt，單擊【保存】按鈕。選中第2列，選擇【插入】→【模板】→【新建可編輯區(qū)】菜單命