網(wǎng)頁設(shè)計及制作實訓指導書

1、-網(wǎng)頁設(shè)計實訓指導書主編：2021年 3 月目 錄網(wǎng)頁設(shè)計實驗實訓室設(shè)備使用平安守則2實訓一查找并分析，嘗試申請域名空間3實訓二練習制作第一個個人主頁7實訓三練習文本、圖像、超級8實訓四表格設(shè)計10實訓五框架頁面設(shè)計實訓六層和動畫的制作11實訓七網(wǎng)頁的美化14網(wǎng)頁設(shè)計實驗實訓室設(shè)備使用平安守則1.嚴禁在實驗室使用明火、用電充電及取暖等。 2.機房應(yīng)成為精神文明的良好工作場所，室不得大聲喧鬧。非機房有關(guān)人員不得隨意進入機房。3.不要隨便嘗試不明的或不熟悉的計算機操作步驟。遇到計算機發(fā)生異常而自己無法解決時，請專業(yè)教師解決。4.不要隨便運行或刪除電腦上的文件或程序，不要隨意計算機參數(shù)等。5.不要隨

2、便安裝或使用不明來源的軟件或程序。不要隨意開啟來歷不明的電子或電子。6.使用計算機人員應(yīng)保護計算機、要按操作規(guī)程來操作、使用計算機等設(shè)備。7.關(guān)機前應(yīng)檢查是否有U盤，如有，先取出，后開、關(guān)機。需要使用U盤時，先用殺毒軟件對U盤查、殺病毒，后使用。8.制止私自安裝、修改、刪除非文檔文件。如發(fā)現(xiàn)計算機出現(xiàn)異?，F(xiàn)象，如：速度特別慢、出現(xiàn)亂碼、防毒軟件報告有病毒等，應(yīng)及時反映，并暫停使用。9.保持計算機室及計算機的周邊環(huán)境衛(wèi)生，制止在計算機旁吸煙、亂扔廢紙和雜物、吃帶皮食物。10.制止私自翻開計算機主機，亂接線。實訓一 查找并分析，嘗試申請域名空間1. 背景知識查找各類型并分析，分析網(wǎng)頁布局和構(gòu)造規(guī)劃

3、，網(wǎng)頁常見布局形式有：1. “T型布局2. “口型布局3POP布局根據(jù)本章所學的容，嘗試申請域名空間。實訓準備工作保證internet連接暢通，學生主機安裝相應(yīng)的網(wǎng)頁設(shè)計與制作軟件：dreamweaver、fireworks、flash、photoshop等。2. 實訓要求 (1) 上網(wǎng)瀏覽不同的電子商務(wù)，比方：淘寶、聯(lián)想等，分析站點構(gòu)造、站點風格及網(wǎng)頁配色等，寫出分析報告。 (2) 嘗試申請域名空間。3. 課時安排：2課時4. 實訓指導以中聯(lián)網(wǎng).3326.為例，詳細介紹如何申請免費個人空間和域名。1. 翻開瀏覽器，在地址欄上輸入.3326.，如圖2-36所示。圖2-36 中聯(lián)網(wǎng)主頁2. 點擊

4、100M免費空間，彈出申請條款，開場申請免費個人主頁空間。核實它所給出的條款后，單擊“我同意按鈕，出現(xiàn)圖2-37所示的注冊頁面。圖2-37 用戶注冊頁面3. 所有信息都填好并核實無誤后，單擊提交按鈕。如果填的不正確，頁面會給出提示，并要求重填。注意該中戶名只能用英文或數(shù)字。4. 注冊成功后，會顯示歡送頁面，等待管理員審核，如圖2-38所示。圖2-38 等待審核界面5. 單擊“自助開通個人主頁空間字樣，又重新彈出用戶登錄區(qū)，輸入剛剛注冊的用戶名和密碼登錄。登錄后，顯示登錄情況，如圖2-39所示。圖2-39 登錄情況顯示界面6. 然后單擊頁面左邊“免費主頁申請按鈕，出現(xiàn)審核通過界面，如圖2-40所

5、示。它提示審核已經(jīng)通過，可以開通個人空間了。圖2-40 通過審核界面7. 單擊“馬上開通字樣，開通個人空間，出現(xiàn)圖2-41所示頁面。在該頁面中填寫的名稱，分類以及的簡介，填好后單擊“即時開通按鈕。圖2-41 簡介8. 即時開通后，出現(xiàn)圖2-42所示頁面。該頁面中給出了FTP登錄用戶名、FTP密碼和FTP地址，這是上傳網(wǎng)頁時要用到的地址。另外還給出了一個HTTP地址，這就是中聯(lián)網(wǎng)提供應(yīng)我們的主頁的二級域名，在主頁上傳后，通過它可以個人主頁。這些地址和密碼都要記錄下來，用于后續(xù)操作。至此，免費個人主頁空間和域名已經(jīng)申請好了。圖2-42 開通主頁資料實訓二 練習制作第一個個人主頁1.背景知識根據(jù)已經(jīng)

6、掌握的網(wǎng)絡(luò)知識和本章學習的html語言的知識，編寫簡單網(wǎng)頁的源代碼；瀏覽，分析的特點。根據(jù)本章所學的容，創(chuàng)立站點和創(chuàng)立個人主頁。2.實訓準備工作保證internet連接暢通，學生主機安裝相應(yīng)的網(wǎng)頁設(shè)計與制作軟件：dreamweaver、fireworks、flash、photoshop等。在本地硬盤創(chuàng)立一個空文件夾myweb，并建一個子文件夾images。3.實訓要求 (3) 翻開瀏覽器，瀏覽*個網(wǎng)頁，查看其源代碼，了解HTML代碼的含義。 (4) 翻開記事本，試用HTML語言編寫一個簡單的網(wǎng)頁，網(wǎng)頁中要包含以下容：網(wǎng)頁標題、文字、圖像、超等。 (5) 上網(wǎng)瀏覽不同的電子商務(wù)，比方：淘寶、聯(lián)想

7、等，分析站點構(gòu)造、站點風格及網(wǎng)頁配色等，寫出分析報告。 (6) 創(chuàng)立站點和創(chuàng)立網(wǎng)頁要求：定義本地站點和新建一個網(wǎng)頁并進展編輯。4.課時安排：2課時5.實訓指導(1) 如何查看網(wǎng)頁源代碼.翻開瀏覽器，點擊“查看菜單“源文件命令。(2) 如何編寫HTML代碼.翻開記事本，手工編寫HTML代碼，注意HTML代碼的編寫順序及網(wǎng)頁元素對應(yīng)的標簽。保存網(wǎng)頁時，網(wǎng)頁的后綴名為html或htm。(3) 略(4) 創(chuàng)立站點和制作簡單個人主頁步驟1定義本地站點，新建假設(shè)干文件夾，如：images、flash、templates等，有些文件夾可暫時為空，以備將來存放設(shè)定的容。步驟2在定義好的站點下新建一個網(wǎng)頁，第一

8、個個人主頁為inde*.htm或是inde*.html，輸入文本，插入Flash動畫和圖像。實訓三 練習文本、圖像、超級1. 背景知識根據(jù)本章所學的文本編輯、圖像及圖像對象的插入、相冊的創(chuàng)立、超的設(shè)置等知識進展的創(chuàng)立。2. 實訓準備工作將文本素材和圖像素材準備好，發(fā)送到學生主機上，以供學生參考使用。3. 實訓要求創(chuàng)立一個以籃球為話題的，要求如下：1編輯首頁，效果圖如下圖，包括有圖像映射、鼠標經(jīng)過圖像、導航條。2編輯其它容網(wǎng)頁并添加超，如下圖，其它頁面中包括有圖像和文本等，有一個網(wǎng)頁中是明星的相冊。圖 籃球俱樂部首頁4. 課時安排：4課時，每一項實訓要求為2課時5. 實訓指導（） 首頁制作過程步

9、驟1啟動Dreamweaver，定義本地站點，新建一個網(wǎng)頁，保存為inde*.htm。步驟2單擊“屬性面板中的“頁面屬性按鈕，選擇“常規(guī)選項卡，設(shè)置背景圖像為bg.gif，選擇“標題編碼選項卡，設(shè)置網(wǎng)頁標題為“籃球俱樂部。步驟3單擊“插入欄“常用選項“圖像按鈕，插入標志圖像logo.gif，選中圖像，單擊“屬性面板中的矩形“熱點工具，在NBA標志圖像上繪制矩形區(qū)域，在“屬性面板的框中輸入地址：.nba.，再單擊多邊形“熱點工具，在中國籃球標志圖像上繪制多邊形區(qū)域，在“屬性面板的框中輸入地址：..，如下圖。圖 籃球俱樂部容頁圖 圖像映射實例步驟4單擊“插入欄“常用選項“表格按鈕，插

10、入一個一行兩列的表格，表格的寬度為770像素，單元格邊距和間距為0，邊框粗細為0。把光標放在左邊的那個單元格中，單擊“插入欄“常用選項“圖像組“鼠標經(jīng)過圖像按鈕，彈出“插入鼠標經(jīng)過圖像對話框，選擇原始圖像的文件路徑、鼠標經(jīng)過圖像的文件路徑，選中“預載鼠標經(jīng)過圖像復選框，替換文本、URL地址設(shè)置為空，單擊“確定按鈕。步驟5光標放在右邊的那個單元格中，單擊“插入欄“常用選項“圖像組“導航條按鈕，彈出“插入導航條的對話框，分別設(shè)置導航條元件，每一個導航條元件有二幅圖像：狀態(tài)圖像、鼠標經(jīng)過圖像，在“按下時，前往的URL文本框：選擇URL地址，在插入下拉列表中選擇垂直，導航條垂直排列，選擇“使用表格復選

11、框，單擊“確定按鈕，完成。（） 創(chuàng)立相冊選擇“命令菜單“創(chuàng)立相冊命令，彈出“創(chuàng)立相冊對話框，進展相關(guān)參數(shù)的設(shè)置，單擊“確定按鈕，啟動Fireworks，批處理圖像。（） 其它網(wǎng)頁的制作略（） 添加網(wǎng)頁之間的超實訓四 表格設(shè)計1. 背景知識根據(jù)本章所學的網(wǎng)頁布局、時間軸及行為的知識，再綜合前面所學的創(chuàng)立站點及編輯網(wǎng)頁的知識，進展網(wǎng)頁不同排版方式的練習。2. 實訓準備工作實訓素材和網(wǎng)頁草圖發(fā)送到學生的主機中，以供學生參考使用。3. 實訓要求(1) 根據(jù)網(wǎng)頁草圖1，如下圖，利用表格設(shè)計網(wǎng)頁布局，在單元格中添加網(wǎng)頁元素。圖 表格排版網(wǎng)頁草圖4. 實訓指導(1) 表格設(shè)計網(wǎng)頁布局步驟1首先創(chuàng)立一個本地站

12、點，新建一個文檔其余幾個實訓是一樣的，這是必須的一個步驟，然后單擊“屬性面板中的“頁面屬性按鈕，彈出“頁面屬性對話框，單擊“跟蹤圖像選項卡，將草圖導入到跟蹤圖像中，改變透明度為50%。步驟2選擇“插入欄“布局選項“布局模式按鈕，切換到布局模式，單擊“布局表格按鈕，繪制三個表格上中下，表格的寬度與草圖總的寬度一樣：853，每一個布局表格左側(cè)插入布局單元格，單元格的寬度與綠色色塊一樣：161，如下圖。步驟3插入網(wǎng)頁元素。最后翻開“頁面屬性對話框，刪除跟蹤圖像，保存網(wǎng)頁。綠色色塊公司標志導航欄廣告橫幅綠色色塊公司簡介一個布局表格，左側(cè)插入一個布局單元格一個布局表格，左側(cè)插入一個布局單元格一個布局表格

13、，左側(cè)插入一個布局單元格圖 利用表格布局網(wǎng)頁構(gòu)造圖實訓五 框架頁面設(shè)計 實訓六 層和動畫的制作1. 背景知識根據(jù)本章所學的網(wǎng)頁布局、時間軸及行為的知識，再綜合前面所學的創(chuàng)立站點及編輯網(wǎng)頁的知識，進展網(wǎng)頁不同排版方式的練習。2. 實訓準備工作實訓素材和網(wǎng)頁草圖發(fā)送到學生的主機中，以供學生參考使用。3. 實訓要求1根據(jù)網(wǎng)頁草圖，如下圖，利用層設(shè)計網(wǎng)頁布局，并向?qū)又刑砑泳W(wǎng)頁元素。圖層排版網(wǎng)頁草圖(2) 在上一步的根底上，利用時間軸和行為添加網(wǎng)頁動態(tài)效果：飄動的圖片、彈出信息和翻開瀏覽器窗口。(3) 根據(jù)網(wǎng)頁草圖，如下圖，利用框架設(shè)計網(wǎng)頁布局，左框架中是導航條，上框架中插入圖片和FLASH動畫，主框架

14、中插入圖片和文本。圖 框架排版網(wǎng)頁草圖5. 課時安排：2課時。6. 實訓指導(1)層設(shè)計網(wǎng)頁布局步驟1創(chuàng)立本地站點，創(chuàng)立一個HTML文檔，在“頁面屬性中插入跟蹤圖像，單擊“插入欄“布局“繪制層按鈕，共繪制7層，注意層的排列位置、疊放順序，如下圖。層1層2層3層4層5層6層7圖 層布局圖步驟2根據(jù)草圖，在各層插入相應(yīng)的網(wǎng)頁元素。保存網(wǎng)頁，瀏覽網(wǎng)頁效果。(2) 在上一步的根底上繼續(xù)制作網(wǎng)頁動態(tài)效果1） 特效1隨時間飄動的圖標步驟1首先插入一個層，在層插入一幅圖像。步驟2選中層，選擇“修改菜單“錄制層路徑命令，拖動層隨心所欲地移動，最后回到起點。步驟3在“時間軸面板中選擇“自動播放和“循環(huán)兩個復選框

15、。2） 特效2彈出信息步驟1選擇“窗口菜單“行為命令，翻開“行為面板，選中特效1中已插入的層，單擊“行為面板中的“添加行為按鈕，選中“彈出信息命令，在“彈出信息對話框中輸入“歡送光臨汽車沙龍，單擊“確定按鈕。步驟2在“行為面板中，選中事件為“onclick。3） 特效3翻開瀏覽窗口步驟1新建一個網(wǎng)頁，在網(wǎng)頁中輸入文本，插入圖像，網(wǎng)頁容相對簡單，集中在網(wǎng)頁的左上部，保存為guanggao.htm。步驟2翻開2中用層布局的網(wǎng)頁，單擊“文檔窗口左下角的<body>標簽，單擊“行為面板中“添加行為按鈕，選擇“翻開瀏覽器窗口命令，在“翻開瀏覽器窗口對話框中，輸入網(wǎng)頁地址guanggao.ht

16、m，定義窗口大小及其它屬性，單擊“確定按鈕。步驟3在“行為面板中，選擇事件為“onload。(3)框架設(shè)計網(wǎng)頁布局框架布局圖，如下圖。步驟1分別制作三個網(wǎng)頁分別為：top.htm、left.htm、main.htm，注意這三個網(wǎng)頁中所包含的網(wǎng)頁容：top.htm包括的是標志，left.htm包括的是導航條， main.htm包括的是文本和圖像容。步驟2選擇“文件菜單“新建命令，在“新建文檔對話框中，單擊“常規(guī)選項卡，選擇“框架集中的“上方固定，左側(cè)嵌套的樣式。步驟3翻開“框架面板，然后選中topFrame框架，在“屬性面板中設(shè)置“框架屬性，在“源文件文本框中輸入top.htm。同理選中l(wèi)eft

17、Frame框架、mainFrame框架分別設(shè)置“框架屬性，將網(wǎng)頁路徑分別為：left.htm和main.htm，將各個框架頁面到框架集中。mainFrame包含的是main.htmtopFrame包含的是top.htmleftFrame包含的是left.htm圖 框架布局圖圖 top.htm步驟4單擊左框架，選中導航條按鈕，在“屬性面板中添加超地址：main0.htm，第二個導航欄按鈕的地址為：main.htm，這兩個超的目標均為mainFrame。步驟5鼠標指標放在框架邊框處，調(diào)整各框架的顯示圍，或選中“框架集，在“屬性面板中，設(shè)置框架的行高或列寬，調(diào)整框架顯示圍。步驟6翻開“框架面板，選擇

18、“文件菜單“保存框架頁或“框架集另存為命令，保存框架集。圖 left.htm圖 main.htm實訓七 網(wǎng)頁的美化1. 背景知識根據(jù)本章所學的CSS樣式表的知識，再綜合前面所學的創(chuàng)立站點及編輯網(wǎng)頁的知識，制作精巧的網(wǎng)頁及應(yīng)用CSS擴展功能。2. 實訓準備工作實訓素材、網(wǎng)頁元素及網(wǎng)頁樣圖，發(fā)送到學生的主機中，以供學生參考使用。3. 實訓要求(1) 利用CSS樣式表制作精巧的網(wǎng)頁，如下圖。圖 網(wǎng)頁效果圖要求：根據(jù)給定的素材，首先設(shè)置頁面屬性其次定義特定 Id的DIV標簽的CSS樣式，然后插入DIV標簽，在DIV中插入容，最后通過定義類，設(shè)置圖像CSS樣式。圖 濾鏡效果(2) 在網(wǎng)頁中添加CSS擴展

19、效果：濾鏡要求：制作：投影字體、發(fā)光字體 、圖像的透明效果、圖像的波浪效果等，如下圖。4. 課時安排：2課時5. 實訓指導 (1) 利用CSS樣式表制作精巧的網(wǎng)頁步驟1 新建一個本地站點，站點新建兩個子文件夾，images和CSS，將圖像素材保存到images文件夾。新建一個網(wǎng)頁，保存為inde*.htm。步驟2 頁面屬性的設(shè)置：單擊“屬性面板中的“頁面屬性按鈕，在“頁面屬性對話框中，設(shè)置背景圖像：images/bg.jpg，頁邊距均為0，設(shè)置字體大小為12像素，字體顏色為灰色*666666。步驟3 在“CSS樣式面板中，單擊“新建CSS規(guī)則按鈕，彈出“新建CSS規(guī)則對話框，選擇器類型：高級，“選擇器文本框中輸入*image01這個區(qū)域用于放置圖像，定義在：“新建樣式文件，保存樣式文件在css文件夾中，命名為main.css。彈出“*images01的CSS規(guī)則定義對話框，單擊“方框選項卡，寬度為200像素，浮動為左對齊，填充均為3像素，邊界：上為500像素，左為30像素，右和下均為30，選擇“區(qū)塊選項卡，文本對齊：居中。步驟4 新建一個*content選擇器樣式，定義在main.css文件。彈出“*content的CSS規(guī)則定義對話框，單擊“類型選項卡，行高為20像素，單擊“區(qū)