網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)訓(xùn)指導(dǎo)書(shū)

主編：2014年月目

錄網(wǎng)頁(yè)設(shè)計(jì)實(shí)驗(yàn)實(shí)訓(xùn)室備使用安全守則...............實(shí)訓(xùn)一查找網(wǎng)站并析，嘗試申請(qǐng)域名空間...........實(shí)訓(xùn)二練習(xí)制作第個(gè)個(gè)人主頁(yè)....................8實(shí)訓(xùn)三練習(xí)文本、像、超級(jí)鏈接..................9實(shí)訓(xùn)四表格設(shè)計(jì).................................實(shí)訓(xùn)五框架頁(yè)面設(shè)實(shí)六層和動(dòng)畫(huà)的制作.......12實(shí)訓(xùn)七網(wǎng)頁(yè)的美化...............................15網(wǎng)頁(yè)設(shè)計(jì)實(shí)驗(yàn)訓(xùn)室設(shè)使用安全守則嚴(yán)禁在實(shí)驗(yàn)室內(nèi)使用明火、用電充電及取暖等。機(jī)房應(yīng)成為精神文明的良好工作場(chǎng)所，室內(nèi)不得大聲喧鬧。非機(jī)房有關(guān)人員不得隨意進(jìn)入機(jī)房。不要隨便嘗試不明的或不熟悉的計(jì)算機(jī)操作步驟遇到計(jì)算機(jī)發(fā)生異常而自己無(wú)法解決時(shí)，請(qǐng)專(zhuān)業(yè)老師解決。不要隨便運(yùn)行或刪除電腦上的文件或程序，不要隨意計(jì)算機(jī)參數(shù)等。不要隨便安裝或使用不明來(lái)源的軟件或程序不要隨意開(kāi)啟來(lái)歷不明的電子郵件或電子郵件附件。使用計(jì)算機(jī)人員應(yīng)愛(ài)護(hù)計(jì)算機(jī)、要按操作規(guī)程來(lái)操作、使用計(jì)算機(jī)等設(shè)備。7.關(guān)機(jī)前應(yīng)檢查是否有U盤(pán)，如有，先取出，后開(kāi)、關(guān)機(jī)。需要使用U盤(pán)時(shí)，先用殺毒軟件對(duì)U盤(pán)查、殺病毒，后使用。8.禁止私自安裝、修改、刪除非文檔文件。如發(fā)現(xiàn)計(jì)算機(jī)出現(xiàn)異常現(xiàn)象，如：速度特別慢、出現(xiàn)亂碼、防毒軟件報(bào)告有病毒等，應(yīng)及時(shí)反映，并暫停使用。9.保持計(jì)算機(jī)室及計(jì)算機(jī)的周邊環(huán)境衛(wèi)生，禁止在計(jì)算機(jī)旁吸煙、亂扔廢紙和雜物、吃帶皮食物。禁止私自打開(kāi)計(jì)算機(jī)主機(jī)，亂接線(xiàn)。

實(shí)訓(xùn)一找網(wǎng)站并分析，試申請(qǐng)域名間查找各類(lèi)型網(wǎng)站并分析，分析網(wǎng)頁(yè)布局和結(jié)構(gòu)規(guī)劃，網(wǎng)頁(yè)常見(jiàn)布局形式有：“”布局“口”型布局．POP布局根據(jù)本章所學(xué)的內(nèi)容，嘗試申請(qǐng)域名空間。保證internet連暢通，學(xué)生機(jī)安裝相應(yīng)的網(wǎng)頁(yè)設(shè)計(jì)與制作軟件dreamweaver、fireworks、flash、photoshop等

上網(wǎng)瀏覽不同的電子商務(wù)網(wǎng)站，比如：淘寶、聯(lián)想等，分析站點(diǎn)結(jié)構(gòu)、站點(diǎn)風(fēng)格及網(wǎng)頁(yè)配色等，寫(xiě)出分析報(bào)告。嘗試申請(qǐng)域名空間。

以中聯(lián)網(wǎng)為，詳細(xì)介紹如何申請(qǐng)免費(fèi)個(gè)人空間和域名。打?yàn)g覽器，在地址欄上輸入，如圖2-36示。圖中聯(lián)網(wǎng)頁(yè)點(diǎn)免空間，彈出申請(qǐng)條款，開(kāi)始申請(qǐng)免費(fèi)個(gè)人主頁(yè)空間。核實(shí)它所給出的條款后，單擊“我同意”按鈕，出現(xiàn)圖所的注冊(cè)頁(yè)面。圖用戶(hù)注頁(yè)面所有信息都填好并核實(shí)無(wú)誤后，單擊提交按鈕。如果填的不正確，頁(yè)面會(huì)給出提示，并要求重填。注意該網(wǎng)站中戶(hù)名只能用英文或數(shù)字。注冊(cè)成功后，會(huì)顯示歡迎頁(yè)面，等待管理員審核，如圖所。圖等待審界面單“自助開(kāi)通個(gè)人主頁(yè)空間”字樣，又重新彈出用戶(hù)登錄區(qū)，輸入剛才注冊(cè)的用戶(hù)名和密碼登錄。登錄后，顯示登錄情況，如圖所。圖登錄情顯示界面然單擊頁(yè)面左邊“免費(fèi)主頁(yè)申請(qǐng)”按鈕，出現(xiàn)審核通過(guò)界面，如圖2所。它提示審核已經(jīng)通過(guò)，可以開(kāi)通個(gè)人空間了。圖通過(guò)審界面單“馬上開(kāi)通”字樣，開(kāi)通個(gè)人空間，出現(xiàn)圖2所示頁(yè)面。在該頁(yè)面填寫(xiě)網(wǎng)站的名稱(chēng)，網(wǎng)站分類(lèi)以及網(wǎng)站的簡(jiǎn)介，填好后單擊“即時(shí)開(kāi)通”按鈕。圖網(wǎng)站簡(jiǎn)即開(kāi)通后，出現(xiàn)圖所頁(yè)面。該頁(yè)面中給出了FTP登用戶(hù)名FTP碼和FTP址這上傳網(wǎng)頁(yè)時(shí)要用到的地址另外還給出了一個(gè)地這就是中聯(lián)網(wǎng)提供給我們的主頁(yè)的二級(jí)域名在頁(yè)上傳后通它可以訪(fǎng)問(wèn)個(gè)人主頁(yè)些地址和密碼都要記錄下來(lái)，用于后續(xù)操作。至此，免費(fèi)個(gè)人主頁(yè)空間和域名已經(jīng)申請(qǐng)好了。圖開(kāi)通主資料實(shí)訓(xùn)二習(xí)制作第一個(gè)個(gè)主頁(yè)根據(jù)已經(jīng)掌握的網(wǎng)絡(luò)知識(shí)和本章學(xué)習(xí)的html語(yǔ)的知識(shí)，編寫(xiě)簡(jiǎn)單網(wǎng)頁(yè)的源代碼；瀏覽網(wǎng)站，分析網(wǎng)站的特點(diǎn)。根據(jù)本章所學(xué)的內(nèi)容，創(chuàng)建站點(diǎn)和創(chuàng)建個(gè)人主頁(yè)。保證internet連暢通，學(xué)生機(jī)安裝相應(yīng)的網(wǎng)頁(yè)設(shè)計(jì)與制作軟件dreamweaver、fireworks、flash、photoshop等在本地硬盤(pán)創(chuàng)建一個(gè)空文件夾myweb并建一個(gè)子文件夾。打開(kāi)瀏覽器，瀏覽某個(gè)網(wǎng)頁(yè)，查看其源代碼，了解HTML代碼的含義。打開(kāi)記事本，試用HTML語(yǔ)言編寫(xiě)一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)，網(wǎng)頁(yè)中要包含以下內(nèi)容：網(wǎng)頁(yè)標(biāo)題、文字、圖像、超鏈接等。上網(wǎng)瀏覽不同的電子商務(wù)網(wǎng)站，比如：淘寶、聯(lián)想等，分析站點(diǎn)結(jié)構(gòu)、站點(diǎn)風(fēng)格及網(wǎng)頁(yè)配色等，寫(xiě)出分析報(bào)告。創(chuàng)建站點(diǎn)和創(chuàng)建網(wǎng)頁(yè)要：定義本地站點(diǎn)和新建一個(gè)網(wǎng)頁(yè)并進(jìn)行編輯。(1)如何看網(wǎng)頁(yè)源代碼？打開(kāi)瀏覽器，點(diǎn)擊“查看”菜單｜“源文件”命令。(2)如何寫(xiě)HTML代碼打開(kāi)記事本，手工編寫(xiě)HTML代，注意HTML代碼的編寫(xiě)順序及網(wǎng)頁(yè)元素對(duì)應(yīng)的標(biāo)簽。保存網(wǎng)頁(yè)時(shí)，網(wǎng)頁(yè)的后綴名為html或。

略創(chuàng)建站點(diǎn)和制作簡(jiǎn)單個(gè)人主頁(yè)步1定本地站點(diǎn)，建若干文件夾，如flashtemplates等有些文件夾可暫時(shí)為空，以備將來(lái)存放設(shè)定的內(nèi)容。步2在義好的站點(diǎn)下新建一個(gè)網(wǎng)個(gè)人主頁(yè)為i或是index.html，輸入文本，插入Flash動(dòng)畫(huà)圖。

實(shí)訓(xùn)三習(xí)文本、圖像、級(jí)鏈接根據(jù)本章所學(xué)的文本編輯像圖像對(duì)象的插入網(wǎng)站相冊(cè)的創(chuàng)建超鏈接的設(shè)置等知識(shí)進(jìn)行網(wǎng)站的創(chuàng)建。

將文本素材和圖像素材準(zhǔn)備好，發(fā)送到學(xué)生主機(jī)上，以供學(xué)生參考使用。

創(chuàng)建一個(gè)以籃球?yàn)樵?huà)題的網(wǎng)站，要求如下：（）輯網(wǎng)站首頁(yè)，效果圖如圖所示，包括有圖像映射、鼠標(biāo)經(jīng)過(guò)圖像、導(dǎo)航條。（）輯其它內(nèi)容網(wǎng)頁(yè)并添加超鏈接，如圖所示，其它頁(yè)面中包括有圖像和文本等，有一個(gè)網(wǎng)頁(yè)中是明星的相冊(cè)。

圖籃球俱樂(lè)部首頁(yè)（１）網(wǎng)首頁(yè)制作過(guò)程步1啟，義本地站點(diǎn)，新建一個(gè)網(wǎng)頁(yè)，保存為index.htm步2單“屬性”面中的“頁(yè)面屬性”按鈕，選擇“常規(guī)”選項(xiàng)卡，設(shè)置背景圖像為，選擇“標(biāo)題／編碼”選項(xiàng)卡，設(shè)置網(wǎng)頁(yè)標(biāo)題為“籃球俱樂(lè)部步3單“插入”欄“常用”選項(xiàng)｜“圖像”按鈕，插入網(wǎng)站標(biāo)志圖像l，選中圖像，單擊“屬性”面板中的矩形“熱點(diǎn)”工具，在標(biāo)圖像上繪制矩形區(qū)域，在“屬性”面板的鏈接框中輸入鏈接地址：，單擊多邊形“熱點(diǎn)”工具，在中國(guó)籃球標(biāo)志圖像上繪制多邊形區(qū)域，在“屬性”面板的鏈接框中輸入鏈接地址：，圖所示圖籃球俱樂(lè)部?jī)?nèi)容頁(yè)圖圖像映射實(shí)例步4單“插入”欄“常用”選項(xiàng)｜“表格”按鈕，插入一個(gè)一行兩列的表格，表格的寬度為770像，單元格邊距和間距為0邊框粗細(xì)為0。光標(biāo)放在左邊的那個(gè)單元格中，單擊“插入”欄｜“常用”選項(xiàng)｜“圖像”組｜“鼠標(biāo)經(jīng)過(guò)圖像”按鈕，彈出“插入鼠標(biāo)經(jīng)過(guò)圖像”對(duì)話(huà)框，選擇原始圖像的文件路徑、鼠標(biāo)經(jīng)過(guò)圖像的文件路徑，選中“預(yù)載鼠標(biāo)經(jīng)過(guò)圖像”復(fù)選框，替換文本URL鏈地址設(shè)置為空，單擊“確定”按鈕。步5光放在右邊的個(gè)單元格中“入欄“用選項(xiàng)“像組｜“導(dǎo)航條”按鈕，彈出“插入導(dǎo)航條”的對(duì)話(huà)框，分別設(shè)置導(dǎo)航條元件，每一個(gè)導(dǎo)航條元件有二幅圖像：狀態(tài)圖像、鼠標(biāo)經(jīng)過(guò)圖像，在“按下時(shí)，前往的”本框：選擇地址在入下拉列表中選擇垂直導(dǎo)航條垂直排列“使用表格復(fù)框單“確定”按鈕，完成。（２）創(chuàng)網(wǎng)站相冊(cè)選擇“命令”菜單｜“創(chuàng)建網(wǎng)站相冊(cè)”命令，彈出“創(chuàng)建網(wǎng)站相冊(cè)”對(duì)話(huà)框，進(jìn)行相關(guān)參數(shù)的設(shè)置，單擊“確定”按鈕，啟動(dòng)，批處理圖像。其它網(wǎng)頁(yè)的制作（略）添加網(wǎng)頁(yè)之間的超鏈接實(shí)訓(xùn)四格設(shè)計(jì)

根據(jù)本章所學(xué)的網(wǎng)頁(yè)布局間及行為的知識(shí)綜合前面所學(xué)的創(chuàng)建站點(diǎn)及編輯網(wǎng)頁(yè)的知識(shí)，進(jìn)行網(wǎng)頁(yè)不同排版方式的練習(xí)。

實(shí)訓(xùn)素材和網(wǎng)頁(yè)草圖發(fā)送到學(xué)生的主機(jī)中，以供學(xué)生參考使用。

根據(jù)網(wǎng)頁(yè)草圖，如圖所示，利用表格設(shè)計(jì)網(wǎng)頁(yè)布局，在單元格中添加網(wǎng)頁(yè)元素圖

表格排版網(wǎng)頁(yè)草圖

(1)表格計(jì)網(wǎng)頁(yè)布局步1首創(chuàng)建一個(gè)本站點(diǎn)，新建一個(gè)文檔（其余幾個(gè)實(shí)訓(xùn)是一樣的，這是必須的一個(gè)步驟后擊“屬性”板中的“頁(yè)面屬性”按鈕，彈出“頁(yè)面屬性”對(duì)話(huà)框，單擊“跟蹤圖像”選項(xiàng)卡，將草圖導(dǎo)入到跟蹤圖像中，改變透明度為50%步2選“插入”欄“布局”選項(xiàng)｜“布局模式”按鈕，切換到布局模式，單擊“布局表格”按鈕，繪制三個(gè)表格（上中下寬度與草圖總的寬度相同，每一個(gè)布局表格左側(cè)插入布局單元格，單元格的寬度與綠色色塊相同，如圖所示。步3插網(wǎng)頁(yè)元素。后打開(kāi)“頁(yè)面屬性”對(duì)話(huà)框，刪除跟蹤圖像，保存網(wǎng)頁(yè)。綠色色塊導(dǎo)航欄綠色色塊

公司標(biāo)志廣告橫幅公司簡(jiǎn)介

一個(gè)布局表格，左側(cè)插入一個(gè)布局單元格一個(gè)布局表格，左側(cè)插入一個(gè)布局單元格一個(gè)布局表格，左側(cè)插入一個(gè)布局單元格圖利用表格布局網(wǎng)頁(yè)結(jié)構(gòu)圖實(shí)訓(xùn)五架頁(yè)面設(shè)計(jì)實(shí)訓(xùn)六層動(dòng)畫(huà)的制

根據(jù)本章所學(xué)的網(wǎng)頁(yè)布局間及行為的知識(shí)綜合前面所學(xué)的創(chuàng)建站點(diǎn)及編輯網(wǎng)頁(yè)的知識(shí)，進(jìn)行網(wǎng)頁(yè)不同排版方式的練習(xí)。

實(shí)訓(xùn)素材和網(wǎng)頁(yè)草圖發(fā)送到學(xué)生的主機(jī)中，以供學(xué)生參考使用。

（）據(jù)網(wǎng)頁(yè)草圖，如圖所示，利用層設(shè)計(jì)網(wǎng)頁(yè)布局，并向?qū)又刑砑泳W(wǎng)頁(yè)元素。圖

層排版網(wǎng)頁(yè)草圖在上一步的基礎(chǔ)上利用時(shí)間軸行為添加網(wǎng)頁(yè)動(dòng)態(tài)效果動(dòng)的圖片彈出信息和打開(kāi)瀏覽器窗口。根據(jù)網(wǎng)頁(yè)草圖如所示，利用架設(shè)計(jì)網(wǎng)頁(yè)布局，左框架中是導(dǎo)航條，上框架中插入圖片和FLASH動(dòng)，主框架中插入圖片和文本。圖框架排版網(wǎng)頁(yè)草圖

(1)層設(shè)計(jì)網(wǎng)頁(yè)布局步1創(chuàng)本地站點(diǎn)，創(chuàng)建一個(gè)文檔，在“頁(yè)面屬性”中插入跟蹤圖像，單擊“插入”欄｜“布局”｜“繪制層”按鈕，共繪制7層注意層的排列位置、疊放順序，如圖所示。層1

層層2層3層4

層層圖層布局圖步2根草圖，在各內(nèi)插入相應(yīng)的網(wǎng)頁(yè)元素。保存網(wǎng)頁(yè)，瀏覽網(wǎng)頁(yè)效果。(2)在上步的基礎(chǔ)上繼續(xù)制作頁(yè)動(dòng)態(tài)效果）特1隨間飄動(dòng)的圖步1首插入一個(gè)層在層內(nèi)插入一幅圖像。步2選層，選擇“改”菜單｜“錄制層路徑”命令，拖動(dòng)層隨心所欲地移動(dòng)，最后回到起點(diǎn)。步3在時(shí)間軸”面中選擇“自動(dòng)播放”和“循環(huán)”兩個(gè)復(fù)選框。）特2彈信息步1選“窗口”菜｜“行為”命令，打開(kāi)“行為”面板，選中特1中插入的層，單擊“行為”面板中的“添加行為”按鈕，選中“彈出信息”命令，在“彈出信息”對(duì)話(huà)框中輸入“歡迎光臨汽車(chē)沙龍“確定”按鈕。步2在行為”面板，選中事件為）特3打?yàn)g覽窗口步1新一個(gè)網(wǎng)頁(yè)，網(wǎng)頁(yè)中輸入文本，插入圖像，網(wǎng)頁(yè)內(nèi)容相對(duì)簡(jiǎn)單，集中在網(wǎng)頁(yè)的左上部，保存為guanggao.htm。步2打（2中用層布局的網(wǎng)頁(yè)，單擊“文檔”窗口左下角<body>標(biāo)簽，單“行為”面板中“添加行為”按鈕，選擇“打開(kāi)瀏覽器窗口”命令，在“打開(kāi)瀏覽器窗口”對(duì)話(huà)框中，輸入網(wǎng)頁(yè)地址guanggao.htm，定義窗口大小及其它屬性，單擊“確定”鈕。步3在行為”面板，選擇事件為onload(3)框架設(shè)計(jì)網(wǎng)頁(yè)布局框架布局圖，如圖所示。步1分制作三個(gè)網(wǎng)分別為main.htm注意這三個(gè)網(wǎng)頁(yè)中所包含的網(wǎng)頁(yè)內(nèi)容top.htm包的是標(biāo)志，left.htm包的是導(dǎo)航條，main.htm包的是文本和圖像內(nèi)容。步2選“文件”菜｜“新建”命令，在“新建文檔”對(duì)話(huà)框中，單擊“常規(guī)”選項(xiàng)卡，選擇“框架集”中的“上方固定，左側(cè)嵌套”的樣式。步3打“框架”面，然后選中topFrame框，在“屬性”面板中設(shè)置“框架”屬性，在“源文件”文本框中輸入。理選中l(wèi)eftFrame架、mainFrame框分別設(shè)置“框架”屬性，將網(wǎng)頁(yè)路徑分別為left.htm和，各個(gè)框頁(yè)面鏈接到框架集中。（的是leftFrame（包含的是）

包含的是main.htm）圖框架布局圖圖

步4單左框架內(nèi)導(dǎo)航條按鈕中添加超鏈接地址main0.htm，第二個(gè)導(dǎo)航欄按鈕的鏈接地址為，兩個(gè)超鏈接的鏈接目標(biāo)均為。步5鼠指標(biāo)放在框邊框處調(diào)各框架的顯示范圍或選“架集屬性”面板中，設(shè)置框架的行高或列寬，調(diào)整框架顯示范圍。步6打“框架”面，選擇“文件”菜單｜“保存框架頁(yè)”或“框架集另存為”命令，保存框架集。圖left.htm圖main.htm實(shí)訓(xùn)七頁(yè)的美化

根據(jù)本章所學(xué)的CSS樣式表的知綜合前面所學(xué)的創(chuàng)建站點(diǎn)及編輯網(wǎng)頁(yè)的知識(shí)作精美的網(wǎng)頁(yè)及應(yīng)用擴(kuò)展功。

實(shí)訓(xùn)素材、網(wǎng)頁(yè)元素及網(wǎng)頁(yè)樣圖，發(fā)送到學(xué)生的主機(jī)中，以供學(xué)生參考使用。

利用CSS樣表制作精美的網(wǎng)頁(yè)，如圖所示。圖網(wǎng)頁(yè)效果圖要求：根據(jù)給定的素材，首先設(shè)置頁(yè)面屬性其次定義特定Id的DIV標(biāo)簽的CSS樣式，然后插入DIV標(biāo)，在DIV中插入內(nèi)容，最后通過(guò)定義類(lèi)，設(shè)置圖像樣式。在網(wǎng)頁(yè)中添加擴(kuò)效果：濾鏡要求：制作：投影字體、發(fā)光字體、圖像的透明效果、圖像的波浪效果等，如圖所示。

利用樣式表制作精美的網(wǎng)頁(yè)步1新一個(gè)本地站點(diǎn)，站點(diǎn)新建兩個(gè)子文件夾和，將圖像素材保存到images文夾建一個(gè)網(wǎng)頁(yè)，保存為index.htm步2頁(yè)屬性的設(shè)置：?jiǎn)螕簟皩傩浴泵姘逯械摹绊?yè)面屬性”按鈕，在“頁(yè)面屬性”對(duì)話(huà)框中，設(shè)置背像頁(yè)距均為設(shè)字體大小為像素顏為灰步3在樣式”面板中，單擊“新建CSS規(guī)”按鈕，彈出“新建

圖濾鏡效果CSS規(guī)”對(duì)話(huà)，選擇器類(lèi)型：高級(jí)，“選擇器”文本框中輸入#image01（這個(gè)區(qū)域用于放置圖像定在建樣式文件存樣式文件在文夾中，名為。出“的規(guī)則定義”對(duì)話(huà)框，單擊“方框”選項(xiàng)卡，寬度為200像素，浮動(dòng)為左對(duì)齊，填充均為3像，邊界：上5