《HTML5與CSS3項目實戰(zhàn)》課件-CORE08

項目八開發(fā)迅騰國際集團首頁企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）目錄01學習目標02學習路徑03任務描述04任務技能05任務實施06任務總結(jié)01學習目標

學習目標010203了解網(wǎng)站的設(shè)計流程了解跨平臺的新增屬性掌握HTML5標簽的使用學習目標

通過實現(xiàn)迅騰科技集團網(wǎng)站的界面設(shè)計，學習HTML5、CSS3新特性，了解HTML5新標簽、掌握CSS3新增屬性以及響應式布局的應用。04掌握CSS3新增屬性企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）02學習路徑

學習路徑企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）03任務描述

01情境導入

02功能描述03

基本框架

04開發(fā)環(huán)境

任務描述企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）

情境導入

隨著HTML5的發(fā)展，目前很多APP應用和跨設(shè)備的網(wǎng)站開始使用HTML5開發(fā)，許多購物網(wǎng)站，商業(yè)網(wǎng)站也應用了HTML5的新特性，本項目從需求分析著手，講解HTML5和CSS3網(wǎng)站的設(shè)計與制作。企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）

功能描述頭部包括公司logo，導航條

01

02

03主體包括輪播圖，公司相關(guān)模塊介紹，院校合作底部包括本站點的版權(quán)信息企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）

基本框架企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）系統(tǒng)環(huán)境Windows7系統(tǒng)及以上系統(tǒng)軟件環(huán)境服務器瀏覽器Sublime

TextTomcat7.0電腦端：火狐瀏覽器

谷歌瀏覽器手機端：Webkit內(nèi)核瀏覽器

Android手機內(nèi)置

瀏覽器

開發(fā)環(huán)境企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）04任務技能任務技能

網(wǎng)站定位

需求分析任務技能

網(wǎng)站的風格設(shè)計企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）情境入01網(wǎng)站定位

網(wǎng)站定位就是網(wǎng)站在互聯(lián)網(wǎng)上扮演什么樣的角色，向目標訪問者傳達什么樣的概念，通過網(wǎng)站我們可以獲取那些信息。為了讓公司的訪問者能夠快速的了解公司的框架和文化，并能很好地體會“騰”精神，公司決定使用HTML5+CSS3設(shè)計一個響應式布局的網(wǎng)站。明確了網(wǎng)站的客戶群體后，開始對網(wǎng)站進行需求分析。企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）1管理者需求2訪問者的需求是通過該網(wǎng)站能快速了解公司由幾大模塊組成，公司相關(guān)的業(yè)務有哪些、公司的業(yè)績怎么樣以及公司的最新事件等信息在公司官網(wǎng)中，管理者主要負責新聞、用戶信息和訪問流量的管理需求分析消費者需求企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）情境入01網(wǎng)站的風格設(shè)計一個網(wǎng)站設(shè)計的好壞取決于網(wǎng)站使用的框架是否合理、網(wǎng)站的顏色是否和所要表達的主體貼近以及使用網(wǎng)站的社會群體。在布局上，考慮大多數(shù)人的瀏覽習慣。因此布局采用橫向版式，上中下的格局，并且將網(wǎng)站名稱放入最佳視覺區(qū)域，通常為左上角。版面設(shè)計可以為多種元素的組合，版式設(shè)計簡潔大方，并配合色彩風格形成獨特的視覺效果。企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）05任務實施第一步：頭部為公司的logo和整個網(wǎng)站的導航欄，logo為圖片，導航欄采用無序列表，采用<ul>標簽和<li>標簽，無序列表嵌套在<nav>標簽中第二步：主體輪播圖的制作，公司圖片在<section>標簽中，圖片使用無序列表顯示第三步：主體公司介紹制作，公司介紹分為三部分，第一部分為公司的相關(guān)信息介紹，第二部分為公司廣告條，第三部分為公司的合作院校相關(guān)信息的介紹任務實施企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）06任務總結(jié)任務技能任務實施任務拓展任務描述

通過本項目的學習，掌握HTML5新標簽、CSS3新增屬性以及響應式布局的應用。

任務總結(jié)企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）謝謝觀賞PPT模板下載：/moban/行業(yè)PPT模板：/hangye/節(jié)日PPT模板：/jieri/PPT素材下載：/sucai/PPT背景圖片：/beijing/PPT圖表下載：/tubiao/優(yōu)秀PPT下載：/xiazai/PPT教程：/powerpoint/Word教程：/word/Excel教程：/excel/資料下載：/zilia