版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認(rèn)領(lǐng)
文檔簡介
我們畢業(yè)啦其實是答辯的標(biāo)題地方案例26美麗山東網(wǎng)站案例描述設(shè)計并制作美麗山東網(wǎng)站，該網(wǎng)站由3個頁面構(gòu)成，包括主頁、初識山東頁和景點詳情頁，從主頁可以進入其他頁面，從其他頁面可以返回主頁。其中，主頁有使用CSS實現(xiàn)的輪播圖效果，初識山東頁有視頻播放效果，網(wǎng)站瀏覽效果如圖26-1～圖26-3所示。案例描述圖26-1美麗山東網(wǎng)站主頁圖26-2初識山東頁圖26-3景點詳情頁網(wǎng)站規(guī)劃1.網(wǎng)站需求分析設(shè)計美麗山東網(wǎng)站，旨在讓任何人在任何時間、任何地點都能借助網(wǎng)絡(luò)快速了解和品讀山東的歷史文化，同時為廣大游客提供詳細(xì)、準(zhǔn)確、全面的旅游信息，如文旅資訊、專題推介等。在內(nèi)容組織上要做到條理清晰、簡單易懂，能夠讓用戶快速查找到相關(guān)信息。具體網(wǎng)站的功能示意如圖26-4所示。圖26-4網(wǎng)站功能示意圖網(wǎng)站規(guī)劃2.網(wǎng)站的風(fēng)格定位美麗山東網(wǎng)站的主要用戶為關(guān)注山東文化及有意游覽齊魯風(fēng)光的人們，因此，網(wǎng)站的風(fēng)格既要突出齊魯風(fēng)韻的穩(wěn)重，又要注重品牌旅游的活力，所以采用綠色為主色調(diào)，加以運用橘色、灰色作輔助色的配色方案。同時，網(wǎng)站依照當(dāng)下現(xiàn)代設(shè)計的發(fā)展趨勢，頁面設(shè)計簡潔大方，適當(dāng)留白。頁面頭部和底部采用通欄呈現(xiàn)，圖片采用多種動畫效果呈現(xiàn)，于細(xì)節(jié)之處強化頁面視覺效果。網(wǎng)站規(guī)劃3.規(guī)劃草圖圖26-5所示為美麗山東網(wǎng)站主頁草圖。圖26-5美麗山東網(wǎng)站主頁草圖網(wǎng)站規(guī)劃4.素材準(zhǔn)備美麗山東網(wǎng)站的素材主要有圖片和視頻，分別使用images文件夾和video文件夾來存放。為了提高瀏覽器的加載速度，同時滿足一些版面設(shè)計的特殊要求，通常需要把制作好的頁面效果圖中有用的部分剪切下來作為網(wǎng)頁制作時的素材，這個過程被稱為“切圖”。切圖的目的是把頁面效果圖轉(zhuǎn)化成網(wǎng)頁代碼。常用的切圖工具主要有Photoshop和Fireworks。下面以Photoshop的切片工具為例，分步驟講解切圖，具體如下。網(wǎng)站規(guī)劃4.素材準(zhǔn)備（1）選擇切片工具圖26-6Photoshop中的切片工具打開PhotoshopCC，并導(dǎo)入素材。選擇工具箱中的切片工具，如圖26-6所示。網(wǎng)站規(guī)劃4.素材準(zhǔn)備（2）繪制切片區(qū)域圖26-7繪制切片區(qū)域按住鼠標(biāo)左鍵拖動鼠標(biāo)，根據(jù)需要在圖像上繪制切片區(qū)域，如圖26-7所示。網(wǎng)站規(guī)劃4.素材準(zhǔn)備（3）導(dǎo)出切片圖26-8導(dǎo)出切片繪制完成后，在菜單欄中選擇“文件”|“導(dǎo)出”|“存儲為Web所用格式（舊版）…”命令，如圖26-8所示。網(wǎng)站規(guī)劃4.素材準(zhǔn)備在彈出的對話框中，從顯示區(qū)域中使用鼠標(biāo)左鍵分別選中各個切片區(qū)域，在“預(yù)設(shè)”中選擇要保存的圖片格式，默認(rèn)情況下存儲為JPEG格式，如圖26-9所示。如果需要圖片支持透明，則可以選擇GIF格式或者PNG格式，如圖26-10所示。網(wǎng)站規(guī)劃4.素材準(zhǔn)備圖26-9存儲為Web所用格式圖26-10選擇圖片格式網(wǎng)站規(guī)劃4.素材準(zhǔn)備設(shè)置完所有切片區(qū)域的圖片格式后，選中所有切片區(qū)域，單擊“存儲”按鈕，在彈出的對話框中，首先選擇存儲圖片的文件夾，這里設(shè)置為E:/網(wǎng)頁設(shè)計；其次定義文件名，相應(yīng)文件名將會作為導(dǎo)出后各個圖片名稱的前綴；然后在“格式”下拉列表中選擇“僅限圖像”選項，在“切片”下拉列表中選擇“選中的切片”選項；最后單擊“保存”按鈕，如圖26-11所示。網(wǎng)站規(guī)劃4.素材準(zhǔn)備圖26-11設(shè)置存儲選項網(wǎng)站規(guī)劃4.素材準(zhǔn)備（4）存儲圖片圖26-12切圖后的素材導(dǎo)出后的圖片存儲在E:/網(wǎng)頁設(shè)計/images文件夾內(nèi)，切圖后的素材如圖26-12所示。制作網(wǎng)站主頁1.新建項目打開HBuilderX，選擇“文件”|“新建”|“項目”命令，設(shè)置項目名稱為project26，設(shè)置項目存放位置為E:/網(wǎng)頁設(shè)計/源代碼，單擊“創(chuàng)建”按鈕。在項目中創(chuàng)建css、images和video這3個子目錄，用于存放網(wǎng)站所需的CSS樣式表文件、圖片文件和視頻文件。此時，該項目目錄結(jié)構(gòu)如圖26-13所示。圖26-13美麗山東網(wǎng)站項目目錄結(jié)構(gòu)2.創(chuàng)建樣式表文件右擊項目中的css目錄，選擇“新建”|“css文件”命令，在彈出的“新建css文件”對話框中輸入文件名index.css，單擊“創(chuàng)建”按鈕。在index.html靜態(tài)文件中<head>標(biāo)記內(nèi)添加<link>標(biāo)記，鏈接外部CSS樣式文件，具體代碼如下。<head>……<link
rel="stylesheet"
type="text/css"
href="css/index.css"
/></head>制作網(wǎng)站主頁3.主頁效果圖分析制作網(wǎng)站主頁對主頁效果圖的HTML結(jié)構(gòu)、CSS樣式進行分析，具體如下。（1）HTML結(jié)構(gòu)分析觀察圖26-1可以看出，整個頁面可以分為頭部，如導(dǎo)航條、輪播圖、內(nèi)容部分（山東概況）、內(nèi)容部分（禮儀之邦）、內(nèi)容部分（文化遺產(chǎn)）、版權(quán)信息6部分。制作網(wǎng)站主頁（2）CSS樣式分析仔細(xì)觀察圖26-1可以看出，6個部分均為通欄顯示，因此各個部分的寬度都可設(shè)置為100%。另外，頁面中大部分文字大小為16px，字體為微軟雅黑；頁面中超鏈接文字的顏色均為#000。對這些頁面上的公共樣式可以提前定義，以減少代碼冗余。關(guān)于頁面中的CSS3動畫效果，將會在單獨講解每一個部分時詳細(xì)分析。3.主頁效果圖分析制作網(wǎng)站主頁4.頁面整體布局頁面布局對優(yōu)化網(wǎng)站的外觀來說非常重要，它是為了使網(wǎng)站頁面結(jié)構(gòu)更加清晰、有條理，而對頁面進行的“排版”。下面對美麗山東網(wǎng)站主頁進行整體布局，具體代碼如下。整體布局代碼略。制作網(wǎng)站主頁5.定義公共樣式為了清除各瀏覽器的默認(rèn)樣式，使網(wǎng)頁在各瀏覽器中顯示的效果一致，在完成頁面布局后，首先要對CSS樣式進行初始化并聲明一些通用的樣式。打開樣式文件index.css，編寫通用樣式代碼，具體代碼如下。制作網(wǎng)站主頁6.制作頭部和導(dǎo)航條觀察圖26-14，可以看出網(wǎng)頁的頭部分為左（Logo）、右（導(dǎo)航條）2個部分，可對導(dǎo)航條的結(jié)構(gòu)使用無序列表來搭建。當(dāng)鼠標(biāo)指針懸停于導(dǎo)航條中的各個導(dǎo)航條目時，效果如圖26-14所示。圖26-14頭部和導(dǎo)航條效果（1）分析效果圖制作網(wǎng)站主頁在index.html文件內(nèi)編寫頭部和導(dǎo)航條的HTML結(jié)構(gòu)代碼。代碼略。此時瀏覽網(wǎng)頁，效果如圖26-15所示。圖26-15頭部和導(dǎo)航條結(jié)構(gòu)（2）搭建結(jié)構(gòu)6.制作頭部和導(dǎo)航條制作網(wǎng)站主頁在樣式表文件index.css中編寫對應(yīng)的CSS樣式代碼。代碼略。保存index.html文件，此時網(wǎng)頁瀏覽效果如圖26-14所示。（3）定義樣式6.制作頭部和導(dǎo)航條制作網(wǎng)站主頁7.制作輪播圖觀察圖26-16，可以看出只需在該盒子內(nèi)再添加1個包容所有圖片的盒子。每隔30s的時間，圖片會完成1次先向左后向右的交替移動動畫。（1）分析效果圖圖26-16輪播圖效果制作網(wǎng)站主頁在index.html文件內(nèi)編寫輪播圖的HTML結(jié)構(gòu)代碼。代碼略。此時瀏覽網(wǎng)頁，效果如圖26-17所示。（2）搭建結(jié)構(gòu)圖26-17輪播圖結(jié)構(gòu)7.制作輪播圖制作網(wǎng)站主頁在樣式表文件index.css中編寫對應(yīng)的CSS樣式代碼，具體代碼略。（3）定義樣式保存網(wǎng)頁，此時瀏覽網(wǎng)頁，效果如圖26-16所示。7.制作輪播圖制作網(wǎng)站主頁8.制作內(nèi)容部分（山東概況）觀察圖26-18，可以看出內(nèi)容部分（山東概況）分為標(biāo)題和圖文介紹兩部分，當(dāng)鼠標(biāo)指針懸停于中間的圖片上時，出現(xiàn)圖片放大效果。圖26-18內(nèi)容部分（山東概況）效果（1）分析效果圖制作網(wǎng)站主頁在index.html文件內(nèi)編寫內(nèi)容部分（山東概況）的HTML結(jié)構(gòu)代碼。代碼略。（2）搭建結(jié)構(gòu)8.制作內(nèi)容部分（山東概況）在樣式表文件index.css中編寫對應(yīng)的CSS樣式代碼。代碼略。（3）定義樣式保存網(wǎng)頁，此時瀏覽網(wǎng)頁，效果如圖26-18所示。制作網(wǎng)站主頁9.制作內(nèi)容部分（禮儀之邦）仔細(xì)觀察圖26-19，可以看出內(nèi)容部分（禮儀之邦）分為標(biāo)題和圖文介紹2個部分，圖文介紹部分又分為左側(cè)文字和右側(cè)名勝圖片兩部分。當(dāng)鼠標(biāo)指針懸停于任意一張名勝圖片上時，圖片放大、傾斜，同時出現(xiàn)查看相冊的下拉遮罩。圖26-19內(nèi)容部分（禮儀之邦）效果（1）分析效果圖制作網(wǎng)站主頁在index.html文件內(nèi)編寫內(nèi)容部分（禮儀之邦）的HTML結(jié)構(gòu)代碼。代碼略。（2）搭建結(jié)構(gòu)在樣式表文件index.css中編寫對應(yīng)的CSS樣式代碼。代碼略。（3）定義樣式保存，此時瀏覽網(wǎng)頁，效果如圖26-19所示。9.制作內(nèi)容部分（禮儀之邦）制作網(wǎng)站主頁10.制作內(nèi)容部分（文化遺產(chǎn)）觀察圖26-20，可以看出內(nèi)容部分（文化遺產(chǎn)）分為標(biāo)題和圖片組兩部分，當(dāng)鼠標(biāo)指針懸停于任意一張圖片上時，圖片翻轉(zhuǎn)，出現(xiàn)該圖片的相關(guān)介紹，該效果是通過3D變形來實現(xiàn)的。圖26-21所示是其中一張圖片翻轉(zhuǎn)后的效果。（1）分析效果圖制作網(wǎng)站主頁10.制作內(nèi)容部分（文化遺產(chǎn)）圖26-21圖片翻轉(zhuǎn)后效果圖26-20內(nèi)容部分（文化遺產(chǎn)）效果制作網(wǎng)站主頁在index.html文件內(nèi)編寫內(nèi)容部分（文化遺產(chǎn)）的HTML結(jié)構(gòu)代碼。代碼略。（2）搭建結(jié)構(gòu)在樣式表文件index.css中編寫對應(yīng)的CSS樣式代碼。代碼略。（3）定義樣式保存，瀏覽網(wǎng)頁，效果如圖26-20和圖26-21所示。10.制作內(nèi)容部分（文化遺產(chǎn)）制作網(wǎng)站主頁11.制作版權(quán)信息在index.html文件內(nèi)編寫版權(quán)信息的HTML結(jié)構(gòu)代碼。代碼略。（1）搭建結(jié)構(gòu)在樣式表文件index.css中編寫對應(yīng)的CSS樣式代碼。代碼略。（2）定義樣式至此，主頁全部制作完成，瀏覽效果如圖26-1所示。制作初識山東頁面制作初識山東頁，設(shè)置文件名為shandong.html，瀏覽效果如圖26-2所示。具體步驟和代碼請掃碼觀看，此處略。圖26-2初識山東頁制作景點詳情頁制作景點詳情頁，設(shè)置文件名
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 醫(yī)療手術(shù)合同范本
- 合開店合同范本
- 衛(wèi)生間裝修工人合同范本
- 進廠入職合同范本
- 合伙投資合同范本范本
- 個人之間擔(dān)保合同范本
- 合法會員合同范例
- 運行總工績效合同范本
- 2025年常溫遠(yuǎn)紅外陶瓷及制品項目建議書
- 廚房人員用工合同范本
- 交通法律與交通事故處理培訓(xùn)課程與法律解析
- 廣西版四年級下冊美術(shù)教案
- 《換熱器及換熱原理》課件
- 兒童權(quán)利公約演示文稿課件
- UPVC排水管技術(shù)標(biāo)準(zhǔn)
- MSA-測量系統(tǒng)分析模板
- 血透室公休座談水腫的護理
- 急診預(yù)檢分診專家共識課件
- 廣州市海珠區(qū)事業(yè)單位考試歷年真題
- 2023年山西省太原市迎澤區(qū)校園招考聘用教師筆試題庫含答案詳解
- 2023中職27 嬰幼兒保育 賽題 模塊三 嬰幼兒早期學(xué)習(xí)支持（賽項賽題）
評論
0/150
提交評論