任務(wù)11完整項(xiàng)目：制作學(xué)院網(wǎng)站

任務(wù)11完整項(xiàng)目：制作學(xué)院網(wǎng)站W(wǎng)eb前端開發(fā)案例教程HTML5+CSS3項(xiàng)目式微課版完整項(xiàng)目：制作學(xué)院網(wǎng)站任務(wù)11本任務(wù)學(xué)習(xí)學(xué)院網(wǎng)站的完整設(shè)計(jì)與實(shí)現(xiàn)，從網(wǎng)站規(guī)劃、到使用Photoshop進(jìn)行效果圖設(shè)計(jì)、再到主頁(yè)設(shè)計(jì)和其它頁(yè)面設(shè)計(jì)，按照真實(shí)網(wǎng)站設(shè)計(jì)流程，完成靜態(tài)網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)。11.1任務(wù)描述山東信息職業(yè)技術(shù)學(xué)院網(wǎng)站首頁(yè)效果圖新聞詳情頁(yè)面新聞列表頁(yè)面 視頻宣傳頁(yè)面其他頁(yè)面效果圖11.1任務(wù)描述知識(shí)點(diǎn)使用Photoshop設(shè)計(jì)網(wǎng)頁(yè)效果圖01HTML5+CSS3進(jìn)行網(wǎng)頁(yè)布局02音頻和視頻在網(wǎng)頁(yè)中的使用03網(wǎng)站規(guī)劃完整項(xiàng)目：制作學(xué)院網(wǎng)站任務(wù)11設(shè)計(jì)山東信息職業(yè)技術(shù)學(xué)院網(wǎng)站，旨在讓任何人在任何時(shí)間、任何地點(diǎn)都能借助網(wǎng)站了解學(xué)院的基本情況與最新招生與就業(yè)信息，通過(guò)該網(wǎng)站可以鏈接到招生信息網(wǎng)、團(tuán)學(xué)在線網(wǎng)站、教務(wù)管理系統(tǒng)等。11.2網(wǎng)站規(guī)劃什么樣的網(wǎng)站適合信息學(xué)院？問題的提出11.2網(wǎng)站規(guī)劃山東信息職業(yè)技術(shù)學(xué)院網(wǎng)站的主要功能示意圖網(wǎng)站需求分析

山東信息職業(yè)技術(shù)學(xué)院網(wǎng)站是學(xué)校門戶網(wǎng)站，他的主要用戶為學(xué)生、教師及學(xué)生家長(zhǎng)等，同時(shí)也是教育類的網(wǎng)站，所以采用藍(lán)色為主色調(diào)，因?yàn)樗{(lán)色代表智慧，代表高科技，代表清爽，有一種寧?kù)o致遠(yuǎn)的感覺。藍(lán)色是海洋、天空的顏色，讓人充滿遐想和向往。另外為了突出網(wǎng)站的熱情、充滿活力，在網(wǎng)站上又加以運(yùn)用了紅色，讓用戶第一眼就被網(wǎng)站亮麗的色彩所吸引。網(wǎng)站的風(fēng)格定位11.2網(wǎng)站規(guī)劃首頁(yè)規(guī)劃草圖11.2網(wǎng)站規(guī)劃一般網(wǎng)站的制作流程：項(xiàng)目計(jì)劃11.2網(wǎng)站規(guī)劃效果圖設(shè)計(jì)完整項(xiàng)目：制作學(xué)院網(wǎng)站任務(wù)1111.3.1效果圖設(shè)計(jì)原則先背景，后前景，先上后下，先左后右。制作軟件：PhotoshopCC中文版。效果圖設(shè)計(jì)中用到的主要知識(shí)點(diǎn)：參考線的應(yīng)用文字工具的應(yīng)用直線工具的應(yīng)用矩形工具的應(yīng)用多邊形套索工具的應(yīng)用圖層樣式的應(yīng)用切片工具的應(yīng)用效果圖設(shè)計(jì)原則選擇“切片工具”，根據(jù)需要進(jìn)行切片。注意：切片時(shí)如果能平鋪形成的圖片，只需切一個(gè)小的圖片。使用一個(gè)顏色作為背景的圖片則不需要切片。最后將素材導(dǎo)出，執(zhí)行“文件”→“存儲(chǔ)為Web設(shè)備所用格式”命令，將網(wǎng)頁(yè)保存類型為“僅圖像”類型。效果圖切片11.3.1效果圖設(shè)計(jì)原則11.3.2效果圖設(shè)計(jì)步驟（1）打開PhotoshopCC軟件，新建文件，命名為“學(xué)院主頁(yè)效果圖”，寬度為1300px，高度為1401px，背景顏色為白色，分辨率為72px/inch。（2）添加參考線。選擇“視圖”｜“新建參考線”選項(xiàng)，添加4條垂直參考線，分別是50px、1250px、512px、530px；添加9條水平參考線，分別是100px、142px、172px、539px、834px、929px、1064px、1201px、1251px，完成后如圖11-5所示。（3）制作背景。打開bodybg.jpg，選擇“編輯”｜“定義圖案”選項(xiàng)，為祥云圖案命名，如圖11-6所示。將打開的bodybg.jpg窗口關(guān)閉。其它略。11.3.3效果圖切片導(dǎo)出網(wǎng)頁(yè)選擇切片工具，根據(jù)需要進(jìn)行切片，切片過(guò)程有以下幾個(gè)技巧。首先將預(yù)期的切片設(shè)計(jì)好，然后進(jìn)行切片。為了切片準(zhǔn)確，減少誤差，盡量放大圖片再進(jìn)行切片。重命名在網(wǎng)頁(yè)中使用的切片圖片，方便在制作網(wǎng)站時(shí)使用。

注意：能平鋪形成的圖片，只需切一個(gè)小的部分。使用某種顏色作為背景的圖片不需要切片，在制作網(wǎng)頁(yè)時(shí)設(shè)置背景顏色即可。切片創(chuàng)建完成后即可進(jìn)行最后的網(wǎng)頁(yè)導(dǎo)出，選擇“文件”|“導(dǎo)出”|“存儲(chǔ)為Web所用格式”選項(xiàng)，為切片選擇存儲(chǔ)的文件類型，單擊“存儲(chǔ)”，再選擇保存的格式“僅限圖像”，最后單擊“保存”按鈕。制作網(wǎng)站主頁(yè)完整項(xiàng)目：制作學(xué)院網(wǎng)站任務(wù)1111.4制作網(wǎng)站主頁(yè)頁(yè)首主體部分友情鏈接導(dǎo)航滾動(dòng)文本頁(yè)腳11.4制作網(wǎng)站主頁(yè)主體部分第二行主體部分第一行主體部分第三行主體部分第四行主體部分第五行（1）在HBuilderX中，新建項(xiàng)目，項(xiàng)目名稱：chapter11，位置位于“E:/Web前端開發(fā)/源碼”目錄下，選擇模板“空項(xiàng)目”，單擊“創(chuàng)建”按鈕。創(chuàng)建項(xiàng)目后，在項(xiàng)目名稱上右擊，選擇“新建”|“html文件”命令，在“新建html文件”對(duì)話框中輸入文件名稱：index.html，單擊“創(chuàng)建”按鈕。（2）右擊項(xiàng)目名稱chapter12，選擇“目錄”，新建名稱為“css”的目錄。右擊“css”目錄，選擇“新建”|“css文件”命令，在“新建css文件”對(duì)話框中輸入文件名稱：index.css，單擊“創(chuàng)建”按鈕。然后在css文件中書寫通用body的樣式，以及通用超級(jí)鏈接的樣式。11.4制作網(wǎng)站主頁(yè)主頁(yè)設(shè)計(jì)步驟（3）打開文件index.html，將index.css樣式表文件鏈接到index.html頁(yè)面中。（4）制作index.html頁(yè)面的頂部。（5）制作index.html頁(yè)面的導(dǎo)航條部分。導(dǎo)航條內(nèi)容用無(wú)序列表實(shí)現(xiàn)，使用CSS樣式設(shè)置導(dǎo)航塊、列表及超鏈接的各種樣式。11.4制作網(wǎng)站主頁(yè)主頁(yè)設(shè)計(jì)步驟（6）制作導(dǎo)航條和主體內(nèi)容之間的滾動(dòng)文字部分。11.4制作網(wǎng)站主頁(yè)主頁(yè)設(shè)計(jì)步驟（7）制作固定顯示二維碼（8）制作主體部分11.4制作網(wǎng)站主頁(yè)（9）制作主體部分中的第一行主頁(yè)設(shè)計(jì)步驟（10）制作主體部分中的第二行。11.4制作網(wǎng)站主頁(yè)主頁(yè)設(shè)計(jì)步驟（11）制作主體部分中的第三行。11.4制作網(wǎng)站主頁(yè)主頁(yè)設(shè)計(jì)步驟11.4制作網(wǎng)站主頁(yè)（12）制作主體部分中的第四行。主頁(yè)設(shè)計(jì)步驟（13）制作主體部分中的第五行。11.4制作網(wǎng)站主頁(yè)主頁(yè)設(shè)計(jì)步驟（14）制作友情鏈接部分。11.4制作網(wǎng)站主頁(yè)主頁(yè)設(shè)計(jì)步驟（15）制作版權(quán)信息部分。11.4制作網(wǎng)站主頁(yè)主頁(yè)設(shè)計(jì)步驟制作新聞列表頁(yè)完整項(xiàng)目：制作學(xué)院網(wǎng)站任務(wù)1111.5制作新聞列表頁(yè)（1）將主頁(yè)index.html復(fù)制一份，改名為：newsList.html，修改主體部分的代碼。<!—main開始--><divclass="main">

<!--listL左側(cè)內(nèi)容開始--><divid="listL"><divclass="Lnews">新聞中心部分</div><divclass="Lnotice">通知公告部分</div></div><!--左側(cè)內(nèi)容結(jié)束--><!--右側(cè)內(nèi)容開始--><divid="listR">

</div></div><!—main結(jié)束-->11.5制作新聞列表頁(yè)新聞列表頁(yè)設(shè)計(jì)步驟（2）在css文件夾中再新建一個(gè)樣式表文件，名稱為：list.css，將index.css和list.css都鏈接到newsList.html頁(yè)面中。書寫list.css的樣式表代碼。/*左側(cè)內(nèi)容*/#listL{ width:282px; float:left; overflow:hidden; margin-right:15px;}/*新聞中心*/.Lnews{ width:280px; height:166px;……11.5制作新聞列表頁(yè)新聞列表頁(yè)設(shè)計(jì)步驟11.6制作新聞詳情頁(yè)（1）將newsList.html頁(yè)面復(fù)制一份，改名為：newsDetail.html。該頁(yè)面內(nèi)容與newsList.html相比，只是右側(cè)內(nèi)容不同，因此修改該頁(yè)面右側(cè)部分的代碼即可。<!--右側(cè)內(nèi)容開始--><divid="listR"><divclass="Rtop"></div><divclass="Rcon"></div></div><!--右側(cè)內(nèi)容結(jié)束-->新聞詳情頁(yè)設(shè)計(jì)步驟11.6制作新聞詳情頁(yè)（2）該頁(yè)面的樣式表代碼，不需再建樣式表文件，而是直接打開css文件夾中的list.css樣式表文件，繼續(xù)在該文件中添加newsDetail.html頁(yè)面的樣式表代碼即可。/*右邊詳情內(nèi)容*/.Rconh2{width:858px;height:40px;line-height:40px;text-align:center;color:#ff7200;font-size:20px;}……11.6新聞詳情頁(yè)設(shè)計(jì)新聞詳情頁(yè)設(shè)計(jì)步驟制作視頻宣傳頁(yè)完整項(xiàng)目：制作學(xué)院網(wǎng)站任務(wù)1111.7制作視頻宣傳頁(yè)1.Video標(biāo)記<video>表示插入視頻的標(biāo)記。語(yǔ)法格式為：<videosrc="images/video.mp4"controlsautoplayloop></video>src表示視頻的文件路徑，controls表示在播放視頻時(shí)出現(xiàn)控制菜單，autoplay表示自動(dòng)播放，loop表示循環(huán)播放。HTML5支持的視頻格式有Ogg、MP4、WebM等格式。2.audio標(biāo)記

若要播放音頻文件，則用到的標(biāo)記及格式是：<audiosrc="音頻文件路徑"controlsautoplayloop></audio><video>和<audio>這兩個(gè)標(biāo)記中的屬性是相同的，屬性是通用的。HTML5支持的音頻格式有Ogg、MP3、WAV等格式。11.7