認識HTML5網(wǎng)頁結(jié)構(gòu)

1、第一章 認識HTML5網(wǎng)頁結(jié)構(gòu)北京課工場教育科技有限公司本課目標學完本門課程后，你能夠熟悉HTML5基本的代碼和結(jié)構(gòu)熟悉CSS+DIV布局獨立設(shè)計制作網(wǎng)站2/33本章任務制作李清照的詞網(wǎng)頁制作家用電器排行榜網(wǎng)頁制作聚美優(yōu)品新手指面頁面3/33本章目標掌握網(wǎng)站的開發(fā)流程掌握HTML5的基本結(jié)構(gòu)掌握-/等標簽4/33網(wǎng)站的開發(fā)流程客戶需求分析網(wǎng)站原型制作網(wǎng)站視覺設(shè)計前端開發(fā)后臺開發(fā)網(wǎng)站測試網(wǎng)站發(fā)布產(chǎn)品經(jīng)理UI設(shè)計師開發(fā)人員網(wǎng)站欄目分類網(wǎng)站功能分析網(wǎng)站初步策劃網(wǎng)站費用預算網(wǎng)站首頁視覺設(shè)計網(wǎng)站主欄目頁設(shè)計網(wǎng)站架構(gòu)搭建網(wǎng)站所有頁面制作UE網(wǎng)站運維中期后期前期5/33團隊合作開發(fā)中的常見問題 問題 在實際

2、開發(fā)中，為什么前端開發(fā)人員經(jīng)常和UI設(shè)計師吵架？Web前端開發(fā)人員：有時UI設(shè)計師自認為網(wǎng)站效果圖設(shè)計得很棒，但Web前端開發(fā)人員感覺很難實現(xiàn)，開發(fā)工作量太大UI設(shè)計師：對如何將自己設(shè)計的網(wǎng)站平面效果圖，對于如何變成網(wǎng)頁“搬到網(wǎng)站上”感覺很神秘，也納悶有時前端開發(fā)人員開發(fā)出來的網(wǎng)頁，為什么不如自己設(shè)計的效果圖好呢？6/33團隊合作開發(fā)中的常見問題 解決辦法:對于UI設(shè)計師，需要學會如下知識和技能了解前端開發(fā)人員的關(guān)注點：網(wǎng)站設(shè)計效果圖是否能讓我看懂？切片后的圖片等網(wǎng)站素材，是否方便我做成網(wǎng)頁？能否盡量減小我的工作量？了解網(wǎng)頁開發(fā)的一些基本代碼，從而理解網(wǎng)頁實現(xiàn)的原理；有的企業(yè)要求UI設(shè)計師兼做

3、Web前端開發(fā)的工作掌握前端開發(fā)時常見的UI設(shè)計相關(guān)問題，以便在設(shè)計中規(guī)避，方便和Web前端開發(fā)人員溝通和配合工作了解“互聯(lián)網(wǎng)+”時代下的網(wǎng)站，如何方便網(wǎng)站的網(wǎng)絡(luò)營銷和推廣？所以必須了解網(wǎng)站SEO7/33了解什么是網(wǎng)站SEO 1、什么是SEO？Search Engine Optimization，搜索引擎優(yōu)化2、SEO有什么用？提高網(wǎng)站排名，從而為你的網(wǎng)站帶來更多的客戶，促進產(chǎn)品銷售或品牌傳播3、SEO怎么做？一般是通過優(yōu)化站內(nèi)優(yōu)化（網(wǎng)頁代碼、內(nèi)容）、站外優(yōu)化（加外部友情鏈接等），從而提高網(wǎng)站被百度等搜索引擎的收錄，最終當用戶搜索你網(wǎng)站時，提高網(wǎng)站排名8/33引入網(wǎng)頁由什么組成？（網(wǎng)址：）9/

4、33網(wǎng)頁的組成1、內(nèi)容HTML部分文字、圖像2、樣式CSS部分顏色、字體大小等修飾3、動作(行為) JavaScript部分一些網(wǎng)頁特效（橫幅廣告）、鼠標移過去變顏色、點擊彈出個登錄框或信息提示框等HTML部分（內(nèi)容 ）CSS部分（ 樣式 ）JS部分（ 特效 ）10/33HTML5簡介HTML：Hyper Text Markup Language（超文本標記語言）HTML5效果鏈接（見Word文檔）1993-6超文本標記語言1995-11HTML2.0HTML3.21996-1-14HTML4.01997-12-18HTML4.011999-12-24XHTML1.02000-1-26XHTM

5、L1.12001-5-31XHTML2.0HTML52013-5-6目前網(wǎng)頁中常用11/33HTML基本結(jié)構(gòu)HTML5網(wǎng)頁基本結(jié)構(gòu) 我的第一個網(wǎng)頁 我的第一個網(wǎng)頁網(wǎng)頁頭部主體部分標簽標記著 HTML 文檔的開始和結(jié)束聲明12/33網(wǎng)頁編輯工具記事本DreamweaverNotepad+在記事本/Dreamweaver/Notepad+中操作WE CHANGE LIVES 13/33網(wǎng)頁基本信息標簽家用電器排行榜14/33網(wǎng)頁基本信息標簽搜索關(guān)鍵字內(nèi)容描述網(wǎng)頁字符編碼15/33網(wǎng)頁的基本標簽的語義化內(nèi)容的語義化為了方便百度等搜索引擎讀懂你的網(wǎng)頁內(nèi)容，要根據(jù)內(nèi)容的類型，使用對應的標簽類型標題：段落

6、：圖片：16/33標題標簽網(wǎng)頁的基本標簽一級標題二級標題三級標題四級標題五級標題六級標題演示示例2：標題標簽WE CHANGE LIVES 17/33了解相關(guān)的網(wǎng)站SEO方法 1、和標簽中包含關(guān)鍵詞，可提升關(guān)鍵詞在頁面中的權(quán)重2、優(yōu)化標簽標簽和標簽在使用的時候建議包含關(guān)鍵詞標簽和標簽在使用的時候建議只出現(xiàn)一次 、 、標簽SEO作用較小，建議不要亂用18/33網(wǎng)頁的基本標簽段落標簽北京歡迎你北京歡迎你，有夢想誰都了不起！有勇氣就會有奇跡。演示示例3：段落標簽WE CHANGE LIVES 19/33網(wǎng)頁的基本標簽換行標簽北京歡迎你 北京歡迎你，有夢想誰都了不起！ 有勇氣就會有奇跡。 北京歡迎你，

7、為你開天辟地 演示示例4：換行標簽WE CHANGE LIVES 20/33網(wǎng)頁的基本標簽水平線標簽北京歡迎你 北京歡迎你，有夢想誰都了不起！ 有勇氣就會有奇跡。 北京歡迎你，為你開天辟地 演示示例5：水平線標簽WE CHANGE LIVES 21/33圖像標簽常見的圖像格式JPGGIFPNGBMP22/33圖像標簽圖像地址圖像的替代文字鼠標懸停提示文字圖像寬度圖像高度演示示例6：圖像WE CHANGE LIVES 語 法示 例23/33設(shè)計常見問題（顏色）設(shè)計用的顏色盡量少用，紅綠藍等顏色盡量少用下圖中網(wǎng)頁的主色是什么？24/33了解相關(guān)的網(wǎng)站SEO方法 1、標簽中的alt屬性對百度的好處規(guī)

8、定在圖像無法顯示時的替代文本，在圖片上鼠標懸停的時候可以顯示文字注釋，它可以讓百度更好的識別圖片信息，從而使圖片有收錄和排名2、注意事項alt描述要和圖片內(nèi)容相符alt描述控制在100字符內(nèi)（極限）25/33鏈接文本或圖像鏈接路徑鏈接在哪個窗口打開無漂白薄皮核桃常用值：_self、_blank文本超鏈接圖像超鏈接鏈接標簽演示示例7：超鏈接的應用WE CHANGE LIVES 語 法示 例26/33常用的超鏈接3-1頁面間鏈接從一個頁面鏈接到另外一個頁面錨鏈接功能性鏈接演示示例8：頁面間鏈接WE CHANGE LIVES 27/33常用的超鏈接3-2錨鏈接從A頁面的甲位置跳轉(zhuǎn)到本頁中的乙位置從A頁面的甲位置跳轉(zhuǎn)到B頁面中的乙位置創(chuàng)建步驟創(chuàng)建跳轉(zhuǎn)標記創(chuàng)建跳轉(zhuǎn)鏈接乙位置甲位置演示示例9：錨鏈接WE CHANGE LIVES 28/33常用的超鏈接3-3功能性鏈接電子郵件QQMSN聯(lián)系我們演示示例10：郵件鏈接WE CHANGE LIVES 示 例29/33共性問題說明問題