最新網頁設計與制作綜合實訓實訓指導書 免費下載.doc

網頁設計與制作綜合實訓實訓指導書武漢商貿職業(yè)學院信息工程學院網頁設計與制作綜合實訓實訓指導書軟件教研室2013年9月目 錄實訓目的1實訓內容及要求1實訓性質、實訓地點、實習時間安排，適用專業(yè)班級2實訓一站點的規(guī)劃設計3實訓二設計案例網站LOGO4實訓三設計案例網站BANNER5實訓四設計案例網站導航條6實訓五設計案例網站網頁內容和網頁版權聲明7實訓六對案例網站版面切圖8實訓七制作完成案例網站首頁9實訓八案例網站模板的制作10實訓九案例網頁超級鏈接的添加11實訓十案例網站加入動態(tài)元素12第12頁實訓目的在前一階段，學生完成了網頁設計與制作、圖形圖像處理、CSS設計、等專業(yè)課程的學習，為了讓學生將前期的專業(yè)課程學以致用，融會貫通，特開設本系統(tǒng)化實訓。本次綜合實訓基于學生的興趣，選取專業(yè)建設網站開發(fā)為主題，基于網頁開發(fā)的流程，把實訓周期當做是一個項目的開發(fā)周期，嚴格把握項目進度，最終要求學生完成網站的前臺設計。通過本次實訓希望達到以下目的：1. 熟悉和掌握Dreamweaver軟件的使用方法；2. 熟悉和掌握PS軟件的使用方法；3. 熟悉FLASH軟件應用的方法；4. 學會使用CSS+DIV做網頁布局；5. 熟練掌握站點的規(guī)劃與設計實訓內容及要求本實訓的內容簡述：1. 網站首頁（1）專業(yè)概況（2）專業(yè)建設規(guī)劃（3）展示最新動態(tài)文章標題（8條）（4）專業(yè)建設成效的文章標題（8項）（5）專業(yè)建設特色文章標題（8項）2. 專業(yè)概況點擊項目概況，顯示相關文本3. 專業(yè)建設規(guī)劃點擊項目申報書菜單，顯示flashpaper格式的申報書內容4. 專業(yè)建設特色顯示專業(yè)建設特色的文章標題列表，點擊標題進入內容5. 專業(yè)建設動態(tài)顯示專業(yè)建設動態(tài)的標題列表，點擊標題進入成果詳細展示6. 專業(yè)建設成效顯示專業(yè)建設成效的標題列表，點擊標題進入成果詳細展示。本實訓的要求：1. 應用css和html（div+css）技術完成至少4個頁面，其中必須包括網站主頁面設計、欄目頁設計、管理員管理登陸頁面、管理員登錄以后的頁面。2. 顯示環(huán)境：網頁視覺效果應采用Internet Explorer 6.0以上版本瀏覽器，顯示分辨率以1024768狀態(tài)為準。3. 網頁規(guī)模：網頁總量原則上不應超過10M，且必須要是不連接互聯(lián)網就可以進行展示的作品。4. 網站結構：要求結構清晰，文件有清晰的分類，比如圖片都放在images文件夾下等。5. 要求頁面美觀大方、顏色搭配協(xié)調；6. 作品留存，下學期或下一階段繼續(xù)完善、開發(fā)。實訓性質、實訓地點、實習時間安排，適用專業(yè)班級該實訓為校內模擬實訓。根據高等教育教學大綱規(guī)定和學院教學計劃安排及培養(yǎng)學生職業(yè)技能的要求，軟微班的學生于第一學期進行為期4周的校內實訓，項目名稱為網頁設計與制作綜合實訓。實訓時間：2013-2014學年第一學期第15-18周實訓班級：軟件1301班、軟件1302班實訓地點： 學校機房實訓一站點的規(guī)劃設計1、學時分配：6學時2、實訓目的（1）熟悉Dreamweaver軟件的界面布局和工作環(huán)境。（2）熟練掌握本地站點創(chuàng)建和管理的方法。3、實訓任務（1）創(chuàng)建一個靜態(tài)網站站點。（2）從網絡上收集網頁素材。（3）根據提供的網站策劃方案范本，結合自己要制作完成的網站，開始著手書寫網站策劃方案。4、實訓內容（1）打開Dreamweaver軟件，熟悉軟件的界面布局和工作面板的擺放，能夠熟練使用Dreamweaver軟件。（2）在本機D盤上創(chuàng)建文件夾“home”，在“home”文件夾下根據網站的規(guī)劃設計，創(chuàng)建相關的文件夾，用來放置不同的文件。（3）在Dreamweaver軟件中，將D盤“home”文件夾定義成靜態(tài)網站站點，站點名稱任意。5、實訓要求（1）由指導教師講清實訓的基本原理，要求，實訓目的。（2）實訓不分小組，要求每位同學均能獨立地完全相關實訓的設計與制作。（3）教學實訓除了驗證課程理論外，還要求學生掌握網絡資源的搜索與應用。（4）除了教師的指導外，還要著重培養(yǎng)學生自學的能力。實訓二設計案例網站LOGO1、學時分配：6學時2、實訓目的（1）熟悉Photoshop軟件的界面布局和工作環(huán)境。（2）熟練掌握網站LOGO的設計方法。（3）創(chuàng)建項目案例網站的LOGO。3、實訓任務（1）掌握Photoshop軟件文字工具工具的使用方法。（2）查看網絡上相關網站LOGO。（3）根據小組討論結果，實際動手完成網站的LOGO。4、實訓內容（1）打開Photoshop軟件，熟悉軟件的界面布局和工作面板的擺放，能夠熟練使用Photoshop軟件。（2）新建Photoshop文件，大小為980*600像素，分辨率為72像素/英寸，顏色模式為RGB顏色8位，背景顏色為白色或者透明都可以。（3）使用文字工具，輸入MZD三個字母，設置文字屬性。（4）柵格化文字圖層，將柵格化后的圖層上的3個字母分別移動到不同的3個圖層上。（5）分別對3個字母進行藝術化處理。（6）輸入其他的文字。（7）為輸入的文字圖層設置“混合選項”。（8）保存文件。5、實訓要求（1）由指導教師講清實訓的基本原理，要求，實訓目的。（2）實訓不分小組，要求每位同學均能獨立地完全相關實訓的設計與制作。（3）教學實訓除了驗證課程理論外，還要求學生掌握網絡資源的搜索與應用。（4）除了教師的指導外，還要著重培養(yǎng)學生自學的能力。實訓三設計案例網站BANNER1、學時分配：6學時2、實訓目的（1）熟悉Photoshop軟件的使用方法。（2）熟練掌握網站BANNER的設計方法。（3）創(chuàng)建項目案例網站的BANNER。3、實訓任務（1）掌握Photoshop軟件漸變工具的使用方法。（2）查看網絡上相關網站BANNER。（3）根據小組討論結果，實際動手完成網站的BANNER。4、實訓內容（1）打開Photoshop軟件，熟悉軟件的界面布局和工作面板的擺放，熟練使用Photoshop軟件。（2）打開上次保存好的Photoshop源文件，在上次完成的LOGO基礎上，準備開始制作本次的BANNER。（3）根據網站策劃方案里的主色調和主題的要求，開始設計網站的BANNER，首先去選擇一張適合的圖片。（4）使用矩形選框工具選擇要使用的圖片部分，圖片的其他部分刪除。（5）根據設計要求，在BANNER上添加其他元素，比如文字或者其他能夠表達網站主題的圖片。（6）使用魔術棒工具將要放置到BANNER上的圖片的某一部分扣出來，然后設置適合的大小，旋轉好方向后放好。（7）設置圖層的樣式，以及文字的混合選項等。（8）保存文件。5、實訓要求（1）由指導教師講清實訓的基本原理，要求，實訓目的。（2）實訓不分小組，要求每位同學均能獨立地完全相關實訓的設計與制作。（3）教學實訓除了驗證課程理論外，還要求學生掌握網絡資源的搜索與應用。（4）除了教師的指導外，還要著重培養(yǎng)學生自學的能力。實訓四設計案例網站導航條1、學時分配：6學時2、實訓目的（1）熟悉Photoshop軟件的使用方法。（2）熟練掌握網站導航條的設計方法。（3）創(chuàng)建項目案例網站的導航條。3、實訓任務（1）掌握Photoshop軟件圓角矩形工具的使用方法。（2）查看網絡上相關網站導航條。（3）根據小組討論結果，實際動手完成網站的導航條。4、實訓內容（1）打開Photoshop軟件，熟悉軟件的界面布局和工作面板的擺放，熟練使用Photoshop軟件。（2）查看網上其它網站的導航條，了解導航條的基本情況。（3）打開上次保存好的Photoshop源文件，在上次完成的基礎上，準備開始制作本次的導航條。（4）根據網站策劃方案里的主色調和主題的要求，開始設計網站的導航條，首先去選擇一張適合的圖片。（5）使用圓角矩形工具繪制一個圓角矩形，顏色與大小要與整個網站的風格與主題相一致。（6）選中繪制好的圓角矩形，使用漸變工具，繪制立體感導航條背景。（7）輸入導航條文字，輸入導航條文字間的豎線間隔。（8）設置文字和豎線的混合選項，增加立體感。（9）保存文件。5、實訓要求（1）由指導教師講清實訓的基本原理，要求，實訓目的。（2）實訓不分小組，要求每位同學均能獨立地完全相關實訓的設計與制作。（3）教學實訓除了驗證課程理論外，還要求學生掌握網絡資源的搜索與應用。（4）除了教師的指導外，還要著重培養(yǎng)學生自學的能力。實訓五設計案例網站網頁內容和網頁版權聲明1、學時分配：6學時2、實訓目的（1）熟悉Photoshop軟件的使用方法。（2）熟練掌握網站網頁內容和網頁版權聲明的設計方法。（3）創(chuàng)建項目案例網站的網頁內容和網頁版權聲明。3、實訓任務（1）掌握Photoshop軟件多種工具結合的使用方法。（2）查看網絡上相關網站網頁。（3）根據小組討論結果，實際動手完成網站的網頁內容和網頁版權聲明。4、實訓內容（1）打開Photoshop軟件，熟悉軟件的界面布局和工作面板的擺放，熟練使用Photoshop軟件。（2）查看網上其它網站的網頁，了解網頁對象分布的基本情況。（3）打開上次保存好的Photoshop源文件，在上次完成的基礎上，準備開始制作本次的網頁內容和網頁版權聲明。（4）根據網站策劃方案里的主色調和主題的要求，選擇灰色與深藍色作為邊框顏色，網頁內容標題文字顏色為黑色。（5）以制作通知公告為例，使用文字工具輸入文字“通知公告”，文字大小為14號，文字顏色為黑色，文字字體為“宋體或者黑體”，根據自己的理解，可以為文字增加“混合選項”，設置文字效果。（6）新建圖層，選擇“線條工具”，線條粗細為1像素，顏色為黑色或者深藍色都可以，繪制一條直線。（7）新建圖層，選擇“圓角矩形工具”，半徑為50像素，顏色為黑色或者深藍色。（8）新建圖層，選擇“文字工具”，在剛才繪制好的圓角矩形上輸入“More”，文字大小是12，顏色為白色，字體為“Arial”。（9）使用同樣的辦法可以制作完成其他網頁內容部分的標題。（10）保存文件。5、實訓要求（1）由指導教師講清實訓的基本原理，要求，實訓目的。（2）實訓不分小組，要求每位同學均能獨立地完全相關實訓的設計與制作。（3）教學實訓除了驗證課程理論外，還要求學生掌握網絡資源的搜索與應用。（4）除了教師的指導外，還要著重培養(yǎng)學生自學的能力。實訓六對案例網站版面切圖1、學時分配：6學時2、實訓目的（1）熟悉Photoshop軟件的使用方法。（2）掌握網站版面設計的方法。（3）對案例網站版面進行切圖。3、實訓任務（1）掌握Photoshop軟件切片工具的使用方法。（2）查看網絡上相關網站網頁。（3）根據小組討論結果，實際動手對網站版面進行切圖。4、實訓內容（1）打開Photoshop軟件，熟悉軟件的界面布局和工作面板的擺放，熟練使用Photoshop軟件。（2）查看網上其它網站的網頁，了解網頁對象分布的基本情況。（3）打開制作好的網站版面源文件，使用切片工具準備對版面進行切圖。（4）使用參考線將網站版面部分之間進行分割。（5）使用切片工具對網站版面進行切割。（6）切圖完成后，選擇“文件”“存儲為WEB所用格式”，存儲文件類型可以選擇“JPEG”或者“GIF”。（7）整理保存好的文件。5、實訓要求（1）由指導教師講清實訓的基本原理，要求，實訓目的。（2）實訓不分小組，要求每位同學均能獨立地完全相關實訓的設計與制作。（3）教學實訓除了驗證課程理論外，還要求學生掌握網絡資源的搜索與應用。（4）除了教師的指導外，還要著重培養(yǎng)學生自學的能力。實訓七制作完成案例網站首頁1、學時分配：6學時2、實訓目的（1）熟悉Dreamweaver軟件的使用方法。（2）掌握使用表格布局網頁的方法。（3）制作完成案例網站首頁。3、實訓任務（1）掌握Dreamweaver軟件的使用方法。（2）查看網絡上相關網站網頁。（3）根據小組討論結果，實際動手完成案例網站首頁。4、實訓內容（1）預覽實訓網頁。（2）在D盤根目錄下新建一個文件夾“home”，在該文件夾中分別新建“css”、“images”，“html”三個文件夾，（3）打開Dreamweaver軟件，將“home”文件夾定義為站點。（4）創(chuàng)建一個命名為“index.html”的網頁文檔，設置網頁的頁面屬性。（5）根據網頁首頁效果圖，插入表格，進行表格的嵌套，完成網頁首頁的布局。（6）在網頁插入的表格中輸入文字、水平線和日期等內容，設置文本的屬性。（7）在網頁中插入圖像，設置圖像的屬性。（8）創(chuàng)建CSS樣式表文件，分別定義需要添加效果的不同CSS樣式。（9）在網頁上分別應用不同的CSS樣式。（10）保存網頁文件。5、實訓要求（1）由指導教師講清實訓的基本原理，要求，實訓目的。（2）實訓不分小組，要求每位同學均能獨立地完全相關實訓的設計與制作。（3）教學實訓除了驗證課程理論外，還要求學生掌握網絡資源的搜索與應用。（4）除了教師的指導外，還要著重培養(yǎng)學生自學的能力。實訓八案例網站模板的制作1、學時分配：6學時2、實訓目的（1）熟悉Dreamweaver軟件的使用方法。（2）掌握網頁模板的制作方法。（3）掌握使用網頁模板創(chuàng)建網頁的方法。3、實訓任務（1）掌握Dreamweaver軟件的使用方法。（2）查看網絡上相關網站網頁。（3）根據小組討論結果，實際動手制作網頁模板。4、實訓內容（1）根據下發(fā)的“二級網頁.jpg”，在Photoshop軟件中設計完成二級網頁版面，并且切圖制作網頁。（2）查看網上其它網站的網頁，了解網頁對象分布的基本情況。（3）在Dreamweaver軟件中打開制作好的二級網頁，選擇“文件”“另存為模板”，將制作好的網頁轉化為模板文件。（4）在創(chuàng)建好的模板網頁上插入“可編輯區(qū)域”，根據需要可以插入多個可編輯區(qū)域。（5）也可以選擇“文件”“新建”“模板文件”，重新創(chuàng)建一個新的模板文件，跟制作網頁的方法一樣，制作完成模板網頁后，一定要在模板網頁中插入可編輯區(qū)域。（6）選擇“文件”“模板”，選擇創(chuàng)建好的網頁模板，選擇“由模板創(chuàng)建”，利用制作好的模板來生成網頁。（7）在生成的網頁中的可編輯區(qū)域中添加相應的網頁內容。（8）對創(chuàng)建好的網頁模板進行編輯，并且進行更新。（9）整理保存好的文件。5、實訓要求（1）由指導教師講清實訓的基本原理，要求，實訓目的。（2）實訓不分小組，要求每位同學均能獨立地完全相關實訓的設計與制作。（3）教學實訓除了驗證課程理論外，還要求學生掌握網絡資源的搜索與應用。（4）除了教師的指導外，還要著重培養(yǎng)學生自學的能力。實訓九案例網頁超級鏈接的添加1、學時分配：6學時2、實訓目的（1）熟悉Dreamweaver軟件的使用方法；（2）掌握網頁超連接的添加和設置方法；（3）創(chuàng)建完成案例網頁的超連接。3、實訓任務（1）掌握Dreamweaver軟件的使用方法。（2）查看網絡上相關網站網頁。（3）根據小組討論結果，實際動手創(chuàng)建網頁超鏈接。4、實訓內容（1）根據設計好的二級網頁版面，制作網頁模板。（2）打開Dreamweaver軟件使用創(chuàng)建的二級網頁模板來創(chuàng)建主頁的新聞網頁。（3）根據首頁新聞鏈接標題內容，選擇新聞網頁內容，并將新聞內容添加到使用網頁模板生成的新聞網頁中。（4）為首頁新聞文字添加文字超鏈接。（5）在創(chuàng)建新聞網頁的模板文件中添加返回首頁的鏈接。（6）更新網頁。（7）根據首頁導航條內容，選擇合適的網頁內容，使用二級網頁模板生成相應網頁。（8）為首頁導航條添加圖片超鏈接，鏈接到相應的二級網頁。（9）在創(chuàng)建二級網頁的模板文件中創(chuàng)建返回首頁，以及二級網頁之間互相鏈接的超鏈接。（10