《Web應(yīng)用開發(fā)》課件-02 游戲娛樂網(wǎng)頁

本章簡(jiǎn)介：游戲娛樂網(wǎng)頁包含了游戲網(wǎng)頁和娛樂網(wǎng)頁兩大主題。游戲娛樂網(wǎng)頁是現(xiàn)在最熱門的網(wǎng)頁，主要針對(duì)的是喜歡游戲，追逐娛樂和流行文化的青年。本章以多個(gè)類型的游戲娛樂網(wǎng)頁為例，講解游戲娛樂網(wǎng)頁的設(shè)計(jì)方法和制作技巧。14游戲娛樂網(wǎng)頁課堂學(xué)習(xí)目標(biāo)了解游戲娛樂網(wǎng)頁的內(nèi)容和服務(wù)掌握游戲娛樂網(wǎng)頁的設(shè)計(jì)流程掌握游戲娛樂網(wǎng)頁的設(shè)計(jì)布局掌握游戲娛樂網(wǎng)頁的制作方法14.1游戲娛樂網(wǎng)頁概述游戲網(wǎng)頁以游戲服務(wù)和玩家互動(dòng)娛樂為核心，整合多種信息傳媒，提供游戲官網(wǎng)群、玩家圈子、圖片中心、論壇等一系列優(yōu)質(zhì)的聯(lián)動(dòng)服務(wù)，滿足游戲玩家個(gè)性展示和游戲娛樂的需求。娛樂網(wǎng)頁提供了各類娛樂的相關(guān)信息，包括時(shí)尚、電影、電視、音樂、新聞、最新動(dòng)態(tài)等在線內(nèi)容。14.2鋒芒游戲網(wǎng)頁案例分析案例設(shè)計(jì)案例制作Flash游戲網(wǎng)站提供了大量各種各樣的Flash游戲和配套的講解說明，是喜愛Flash游戲的朋友們不可多得的好地方。本例是為鋒芒游戲公司設(shè)計(jì)制作的Flash游戲網(wǎng)頁界面，是一個(gè)典型的Flash游戲網(wǎng)站。在網(wǎng)頁的設(shè)計(jì)布局上要清晰合理、設(shè)計(jì)風(fēng)格上要活潑生動(dòng)，體現(xiàn)出游戲的趣味性和玩家信息。在設(shè)計(jì)制作過程中，頁面以簡(jiǎn)單的黑白灰為背景，營(yíng)造出清爽舒適的頁面環(huán)境。導(dǎo)航欄放在頁面的上方，方便游戲玩家瀏覽。不同游戲的展示讓人直觀的了解游戲潮流，以更加快速的選擇自己喜歡的游戲。案例分析本例將使用頁面屬性命令修改頁面的頁邊距和頁面標(biāo)題，使用屬性面板設(shè)置單元格寬度、高度及背景顏色，使用CSS樣式設(shè)置文字的大小、字體及行距的顯示效果。效果圖案例設(shè)計(jì)14.3娛樂星聞網(wǎng)頁案例分析案例設(shè)計(jì)案例制作娛樂星聞網(wǎng)頁為瀏覽者提供了娛樂明星的相關(guān)信息，包括明星的電影、電視、音樂、演出、情報(bào)站、專題、資料庫、最新動(dòng)態(tài)等在線內(nèi)容。在設(shè)計(jì)娛樂星聞網(wǎng)頁時(shí)要注意界面的時(shí)尚美觀、布局的合理搭配，并體現(xiàn)出娛樂的現(xiàn)代感和流行文化的魅力。在設(shè)計(jì)制作過程中，采用白色的背景并且使用紅色作為點(diǎn)綴搭配，是畫面觀看起來清爽舒適；導(dǎo)航欄放在頁面上方，方便追星族的瀏覽；頁面中間使用圖片和文字展示娛樂星聞，可以幫助追星族更快捷的了解最新的娛樂信息；網(wǎng)頁整體內(nèi)容豐富使人感受到飽滿的信息量。案例分析本例使用表格布局網(wǎng)頁，使用屬性面板設(shè)置單元格的大小，使用輸入文字制作網(wǎng)頁導(dǎo)航效果，使用CSS樣式設(shè)置圖片的對(duì)齊方式，使用文本字段制作搜素欄，使用CSS樣式控制文字的大小、顏色及行距的顯示。效果圖案例設(shè)計(jì)14.4綜藝頻道網(wǎng)頁案例分析案例設(shè)計(jì)案例制作本例是為一家電視臺(tái)的綜藝節(jié)目制作的網(wǎng)頁，電視綜藝節(jié)目希望通過網(wǎng)站宣傳節(jié)目的內(nèi)容和特色，增加和網(wǎng)友的互動(dòng)，體現(xiàn)出自身節(jié)目的大眾化，以便成為百姓最喜愛的節(jié)目。在設(shè)計(jì)制作過程中，導(dǎo)航欄放在頁面的最上方，每個(gè)欄目的精心設(shè)置都充分考慮網(wǎng)友的喜好，設(shè)計(jì)風(fēng)格簡(jiǎn)潔大方，方便網(wǎng)友瀏覽交流。導(dǎo)航欄下方展示出最新的節(jié)目信息，體現(xiàn)出綜藝節(jié)目的鮮明特色。頁面中央通過欄目、裝飾圖案和文字的巧妙設(shè)計(jì)和編排，充分體現(xiàn)了綜藝節(jié)目的多樣化。整個(gè)頁面設(shè)計(jì)充滿了輕松愉悅的大眾娛樂氛圍。案例分析本例使用頁面屬性面板設(shè)置網(wǎng)頁頁面文字大小、頁面邊距和頁面標(biāo)題，使用屬性面板設(shè)置文字顏色、大小制作導(dǎo)航效果，使用CSS樣式設(shè)置單元格的背景圖像和文字行間距效果。效果圖案例設(shè)計(jì)課堂練習(xí)—時(shí)尚潮流網(wǎng)頁使用“頁面屬性”命令，設(shè)置頁面字體、大小顏色和頁面邊距；使用“屬性”面板，設(shè)置單元格背景顏色、寬度和高度；使用“CSS樣式”命令，設(shè)置文字的顏色、大小和行距。效果圖課后習(xí)題—星運(yùn)奇緣網(wǎng)頁使用“頁面屬性”命令，設(shè)置頁面字體、大小顏色和頁面邊距；