項(xiàng)目3教育門戶網(wǎng)站前臺(tái)設(shè)計(jì)

項(xiàng)目3（進(jìn)階項(xiàng)目）教育門戶網(wǎng)站前臺(tái)設(shè)計(jì)主講教師：李琳第一頁(yè)，共四十二頁(yè)。知識(shí)目標(biāo)知識(shí)目標(biāo)：掌握響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)方法掌握多網(wǎng)頁(yè)站點(diǎn)設(shè)計(jì)方法第二頁(yè)，共四十二頁(yè)。能力目標(biāo)能力目標(biāo)：能使用Bootstrap進(jìn)行響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)能設(shè)計(jì)多網(wǎng)頁(yè)站點(diǎn)第三頁(yè)，共四十二頁(yè)。目錄3.1項(xiàng)目介紹3.2知識(shí)準(zhǔn)備3.3任務(wù)1網(wǎng)站規(guī)劃與設(shè)計(jì)3.4任務(wù)2學(xué)院首頁(yè)3.5任務(wù)3專業(yè)介紹頁(yè)面3.6任務(wù)4關(guān)于我們頁(yè)面3.7任務(wù)5最新資訊頁(yè)面3.8任務(wù)6聯(lián)系我們頁(yè)面3.9任務(wù)7項(xiàng)目進(jìn)階3.10任務(wù)8課外實(shí)踐第四頁(yè)，共四十二頁(yè)。3.1項(xiàng)目介紹本項(xiàng)目將設(shè)計(jì)一個(gè)教育機(jī)構(gòu)的門戶網(wǎng)站，以多頁(yè)面的形式展示該教育機(jī)構(gòu)的各項(xiàng)信息第五頁(yè)，共四十二頁(yè)。3.2知識(shí)準(zhǔn)備3.2.1Bootstrap樣式框架Bootstrap是Twitter推出的一個(gè)開源的用于前端開發(fā)的工具包。它是一個(gè)CSS和HTML的集合，它使用了最新的瀏覽器技術(shù)，給你的Web開發(fā)提供了時(shí)尚的版式，表單，buttons，表格，網(wǎng)格系統(tǒng)等等。目前最新的版本為v3.3.4第六頁(yè)，共四十二頁(yè)。3.2知識(shí)準(zhǔn)備3.2.1Bootstrap樣式框架1、布局容器2、柵格系統(tǒng)3、表格4、表單5、按鈕6、圖片形狀第七頁(yè)，共四十二頁(yè)。3.2知識(shí)準(zhǔn)備3.2.2JavaScript基礎(chǔ)JavaScript是一種輕量級(jí)的編程語(yǔ)言，一般嵌入在HTML頁(yè)面中，由瀏覽器執(zhí)行第八頁(yè)，共四十二頁(yè)。3.2知識(shí)準(zhǔn)備3.2.2JavaScript基礎(chǔ)1、JavaScript語(yǔ)法特點(diǎn)2、JavaScript變量3、JavaScript基本數(shù)據(jù)類型4、數(shù)據(jù)類型的轉(zhuǎn)換（1）Undefined類型：當(dāng)聲明的變量未初始化時(shí)，該變量的默認(rèn)值是undefined（2）Null類型：null用于表示尚未存在的對(duì)象（3）Boolean類型：它有兩個(gè)值true和false（4）Number類型：這種類型既可以表示32位的整數(shù)，還可以表示64位的浮點(diǎn)數(shù)（5）String類型：字符串，沒(méi)有固定大小第九頁(yè)，共四十二頁(yè)。3.2知識(shí)準(zhǔn)備3.2.2JavaScript基礎(chǔ)5、JavaScript分支語(yǔ)句6、JavaScript循環(huán)語(yǔ)句7、JavaScript測(cè)試語(yǔ)句8、消息框9、JavaScript內(nèi)置對(duì)象10、JavaScript函數(shù)第十頁(yè)，共四十二頁(yè)。3.3任務(wù)1網(wǎng)站規(guī)劃與設(shè)計(jì)3.3.1網(wǎng)站設(shè)計(jì)需求客戶需求，是指學(xué)校創(chuàng)建門戶網(wǎng)站的目的和對(duì)網(wǎng)站提出的特定要求。了解客戶需求，是建好學(xué)校門戶網(wǎng)站的前提第十一頁(yè)，共四十二頁(yè)。3.3任務(wù)1網(wǎng)站規(guī)劃與設(shè)計(jì)3.3.2網(wǎng)站風(fēng)格定位對(duì)于本項(xiàng)目從以下三個(gè)方面來(lái)學(xué)習(xí)該網(wǎng)站的風(fēng)格定位1．色彩2．排版3．特效第十二頁(yè)，共四十二頁(yè)。3.3任務(wù)1網(wǎng)站規(guī)劃與設(shè)計(jì)3.3.3網(wǎng)站結(jié)構(gòu)布局網(wǎng)站的整體布局為上、中、下，上方為標(biāo)題區(qū)域，用于顯示網(wǎng)站標(biāo)題和導(dǎo)航；中部為內(nèi)容區(qū)域，用于放置頁(yè)面的具體內(nèi)容；下方為版權(quán)區(qū)域，用于放置網(wǎng)頁(yè)版權(quán)、機(jī)構(gòu)信息第十三頁(yè)，共四十二頁(yè)。3.4任務(wù)2學(xué)院首頁(yè)常見的手段是“巨屏宣傳畫+圖文內(nèi)容”的組合方式第十四頁(yè)，共四十二頁(yè)。3.4任務(wù)2學(xué)院首頁(yè)3.4.1標(biāo)題區(qū)域設(shè)計(jì)網(wǎng)頁(yè)標(biāo)題區(qū)域分為左右2部分，左邊為具體標(biāo)題（h1），右邊是一個(gè)搜索框（表單）當(dāng)屏幕比較小的情況下，顯示效果如下圖第十五頁(yè)，共四十二頁(yè)。3.4任務(wù)2學(xué)院首頁(yè)3.4.2導(dǎo)航區(qū)域設(shè)計(jì)屏幕較大的情況下，顯示所有菜單項(xiàng)的內(nèi)容第十六頁(yè)，共四十二頁(yè)。3.4任務(wù)2學(xué)院首頁(yè)3.4.2導(dǎo)航區(qū)域設(shè)計(jì)屏幕較小的情況下，隱藏文字菜單項(xiàng)，僅顯示圖標(biāo)菜單項(xiàng)和展開按鈕，點(diǎn)擊展開按鈕，展開文字菜單項(xiàng)第十七頁(yè)，共四十二頁(yè)。3.4任務(wù)2學(xué)院首頁(yè)3.4.3巨屏區(qū)域設(shè)計(jì)巨屏區(qū)域使用了一個(gè)名為jquery.cslider.js的幻燈片插件，該插件能根據(jù)設(shè)定的文字自動(dòng)播放，引用和調(diào)用都比較簡(jiǎn)單，資源方面所需要的僅僅是一副清晰度較高的圖片調(diào)用代碼<linkhref="css/slider.css"rel="stylesheet"type="text/css"/><scripttype="text/javascript"src="js/jquery.cslider.js"></script>第十八頁(yè)，共四十二頁(yè)。3.4任務(wù)2學(xué)院首頁(yè)3.4.4圖文區(qū)域1設(shè)計(jì)該部分是一個(gè)4列的圖文區(qū)域，每列由圖片、標(biāo)題、內(nèi)容組成。因此，該部分既要對(duì)每列進(jìn)行響應(yīng)式布局（使用bootstrap的柵格系統(tǒng)），又要對(duì)每列內(nèi)部的元素進(jìn)行布局第十九頁(yè)，共四十二頁(yè)。3.4任務(wù)2學(xué)院首頁(yè)3.4.5圖文區(qū)域2設(shè)計(jì)該部分是一個(gè)2列的圖文區(qū)域，其中，左邊區(qū)域僅有圖片，右邊區(qū)域僅有標(biāo)題和內(nèi)容第二十頁(yè)，共四十二頁(yè)。3.4任務(wù)2學(xué)院首頁(yè)3.4.6圖文區(qū)域3設(shè)計(jì)這又是一個(gè)4列的圖文區(qū)域，與圖文區(qū)域1不同的是，該部分的內(nèi)容使用了owl.carousel.js這個(gè)javascipt插件，實(shí)現(xiàn)了滾動(dòng)效果第二十一頁(yè)，共四十二頁(yè)。3.4任務(wù)2學(xué)院首頁(yè)3.4.7版權(quán)區(qū)域設(shè)計(jì)版權(quán)區(qū)的內(nèi)容就是文字，所以只需要設(shè)置定位方式以及內(nèi)部文字元素的樣式即可第二十二頁(yè)，共四十二頁(yè)。3.5任務(wù)3專業(yè)介紹頁(yè)面專業(yè)介紹頁(yè)面是一個(gè)典型的“列表型”網(wǎng)頁(yè)，以列表的形式展示多項(xiàng)內(nèi)容，通常情況下會(huì)需要“分頁(yè)”，為了能讓瀏覽者在列表中就預(yù)覽某個(gè)專業(yè)的簡(jiǎn)介，可以在列表項(xiàng)中增加簡(jiǎn)介文字和圖片。該部分是一個(gè)2列的圖文區(qū)域，其中，左邊區(qū)域僅有圖片，右邊區(qū)域僅有標(biāo)題和內(nèi)容第二十三頁(yè)，共四十二頁(yè)。3.5任務(wù)3專業(yè)介紹頁(yè)面頁(yè)面布局如圖第二十四頁(yè)，共四十二頁(yè)。3.5任務(wù)3專業(yè)介紹頁(yè)面3.5.1標(biāo)題區(qū)域設(shè)計(jì)專業(yè)介紹頁(yè)的網(wǎng)頁(yè)標(biāo)題區(qū)和版權(quán)區(qū)與首頁(yè)基本一致，唯一不同的是，在網(wǎng)頁(yè)標(biāo)題區(qū)使用了一個(gè)背景圖片，這個(gè)圖片在首頁(yè)被用于巨屏幻燈，這樣設(shè)計(jì)有助于提高網(wǎng)站的整體性第二十五頁(yè)，共四十二頁(yè)。3.5任務(wù)3專業(yè)介紹頁(yè)面3.5.2圖文區(qū)域設(shè)計(jì)該圖文區(qū)域包含一個(gè)專業(yè)的介紹，包括：專業(yè)名稱、專業(yè)簡(jiǎn)介、圖片、超鏈接按鈕第二十六頁(yè)，共四十二頁(yè)。3.6任務(wù)4關(guān)于我們頁(yè)面關(guān)于我們這個(gè)頁(yè)面是每個(gè)網(wǎng)站都需要的一個(gè)頁(yè)面。頁(yè)面中的內(nèi)容要盡可能的簡(jiǎn)單明了，讓瀏覽者很方便的獲取所需信息關(guān)于我們上部分效果圖第二十七頁(yè)，共四十二頁(yè)。3.6任務(wù)4關(guān)于我們頁(yè)面關(guān)于我們這個(gè)頁(yè)面是每個(gè)網(wǎng)站都需要的一個(gè)頁(yè)面。頁(yè)面中的內(nèi)容要盡可能的簡(jiǎn)單明了，讓瀏覽者很方便的獲取所需信息關(guān)于我們下部分效果圖第二十八頁(yè)，共四十二頁(yè)。3.6任務(wù)4關(guān)于我們頁(yè)面關(guān)于我們頁(yè)面布局圖第二十九頁(yè)，共四十二頁(yè)。3.7任務(wù)5最新資訊頁(yè)面最新資訊頁(yè)和之前的專業(yè)介紹頁(yè)比較類似，都是“列表型”網(wǎng)頁(yè)，集中展示多項(xiàng)相似內(nèi)容，因?yàn)橘Y訊的內(nèi)容比起專業(yè)介紹的內(nèi)容要豐富一些，所以可以把該網(wǎng)頁(yè)設(shè)計(jì)的較為豐富一些，在網(wǎng)頁(yè)的內(nèi)容區(qū)域可以做一個(gè)局部的“左右布局”第三十頁(yè)，共四十二頁(yè)。3.7任務(wù)5最新資訊頁(yè)面最新資訊頁(yè)面布局圖第三十一頁(yè)，共四十二頁(yè)。3.7任務(wù)5最新資訊頁(yè)面3.7.1資訊區(qū)域設(shè)計(jì)資訊區(qū)包括：標(biāo)題、圖片、內(nèi)容、更多按鈕第三十二頁(yè)，共四十二頁(yè)。3.7任務(wù)5最新資訊頁(yè)面3.7.2側(cè)邊區(qū)域設(shè)計(jì)側(cè)邊區(qū)域從上到下依次為：資訊統(tǒng)計(jì)、廣告位、資訊標(biāo)簽、郵件訂閱第三十三頁(yè)，共四十二頁(yè)。3.7任務(wù)5最新資訊頁(yè)面3.7.2側(cè)邊區(qū)域設(shè)計(jì)側(cè)邊區(qū)域從上到下依次為：資訊統(tǒng)計(jì)、廣告位、資訊標(biāo)簽、郵件訂閱第三十四頁(yè)，共四十二頁(yè)。3.7任務(wù)5最新資訊頁(yè)面3.7.2側(cè)邊區(qū)域設(shè)計(jì)側(cè)邊區(qū)域從上到下依次為：資訊統(tǒng)計(jì)、廣告位、資訊標(biāo)簽、郵件訂閱第三十五頁(yè)，共四十二頁(yè)。3.8任務(wù)6聯(lián)系我們頁(yè)面聯(lián)系我們頁(yè)面和關(guān)于我們頁(yè)比較類似，不需要有十分吸引眼球的圖片，但是需要簡(jiǎn)單易讀的文字信息，最好在加上一個(gè)留言板之類的表單第三十六頁(yè)，共四十二頁(yè)。3.8任務(wù)6聯(lián)系我們頁(yè)面3.8.1聯(lián)系方式設(shè)計(jì)第三十七頁(yè)，共四十二頁(yè)。3.8任務(wù)6聯(lián)系我們頁(yè)面3.8.2在線提問(wèn)設(shè)計(jì)第三十八頁(yè)，共四十二頁(yè)。3.9項(xiàng)目進(jìn)階本項(xiàng)目是一個(gè)較為綜合的門戶網(wǎng)站，設(shè)計(jì)了1個(gè)首頁(yè)、4個(gè)二級(jí)頁(yè)面，在設(shè)計(jì)過(guò)程中考慮的多屏幕瀏覽的情況，是一個(gè)“響應(yīng)式”網(wǎng)站。網(wǎng)站的核心樣式是在style.css文件中實(shí)現(xiàn)的，請(qǐng)參考style.css文件中的各個(gè)樣式，制作一個(gè)blue-style.css文件，實(shí)現(xiàn)在不修改網(wǎng)頁(yè)html元素的前提下，通過(guò)切換css文件，實(shí)現(xiàn)網(wǎng)站的風(fēng)格的轉(zhuǎn)換第三十九頁(yè)，共四十二頁(yè)。3.10課外實(shí)踐請(qǐng)自行設(shè)計(jì)一個(gè)企業(yè)門戶，包括：首頁(yè)、企業(yè)簡(jiǎn)介、產(chǎn)品列表、留言板、招賢納士等頁(yè)面第四十頁(yè)，共四十二頁(yè)。ThankYou!第四十一頁(yè)，共四十二頁(yè)。內(nèi)容總結(jié)項(xiàng)目3（進(jìn)階項(xiàng)目）教育門戶網(wǎng)站前臺(tái)設(shè)計(jì)。項(xiàng)目3（進(jìn)階項(xiàng)目）教育門戶網(wǎng)站前臺(tái)設(shè)計(jì)。JavaScript是一種輕量級(jí)的編程語(yǔ)言，一般嵌入在HTML頁(yè)面中，由瀏覽器執(zhí)行。（1）Undefined類型：當(dāng)聲明的變量未初始化時(shí)，該變量的默認(rèn)值是und