使用html語言和css開發(fā)商業(yè)站點(diǎn)

1、HTML基本標(biāo)簽（一）第一章課程地位每階段已包括：項(xiàng)目實(shí)戰(zhàn)、COT課程 總課時(shí)： 1008C#OOPJavaScriptT-SQLJava OOPS2350Y2344JSPS2：Java階段項(xiàng)目預(yù)備課程WinFormsLogic JavaS1314S1：.NET階段項(xiàng)目 HibernateN-TierAjaxSpringStrutsHTMLC#NTCProject知識(shí)Y2：.NET畢業(yè)設(shè)計(jì)項(xiàng)目COTCOTCOTY2：Java畢業(yè)設(shè)計(jì)項(xiàng)目目標(biāo)崗位標(biāo)準(zhǔn)手冊(cè)就業(yè)技能結(jié)構(gòu)圖客戶端技能結(jié)構(gòu)圖本門課程目標(biāo)學(xué)完本門課程后，你能夠：制作界面美觀大方、面向企業(yè)應(yīng)用的靜態(tài)商業(yè)網(wǎng)站掌握Web開發(fā)的行業(yè)規(guī)范和標(biāo)準(zhǔn)課程

2、項(xiàng)目展示貴美商城首頁商品展示頁（點(diǎn)擊左邊“商品分類”任一鏈接）具體商品詳細(xì)介紹頁（點(diǎn)擊任一商品圖片）購物車頁面（點(diǎn)擊“立刻購買”按鈕）登錄頁（點(diǎn)擊右上方的導(dǎo)航菜單） 注冊(cè)頁（點(diǎn)擊右上方的導(dǎo)航菜單） 幫助中心客服頁面（點(diǎn)擊右上方的導(dǎo)航菜單） 教員現(xiàn)場(chǎng)演示貫穿項(xiàng)目預(yù)習(xí)檢查HTML文檔的基本結(jié)構(gòu)是什么？什么是塊級(jí)、行級(jí)標(biāo)簽？、分別代表什么？插入一條直線用什么標(biāo)簽？本章任務(wù)制作圖文并茂的商品介紹頁 本章目標(biāo)使用HTML的基本結(jié)構(gòu)創(chuàng)建網(wǎng)頁使用行級(jí)和塊級(jí)標(biāo)簽組織頁面內(nèi)容 使用圖像標(biāo)簽實(shí)現(xiàn)圖文并茂的頁面什么是HTMLHTML：Hyper Text Markup Language 超文本標(biāo)簽語言HTML：網(wǎng)頁

3、的“源碼”瀏覽器：“解釋和執(zhí)行”HTML源碼的工具 HTML告知瀏覽器如何顯示網(wǎng)頁HTML文檔的結(jié)構(gòu)我的第一個(gè)網(wǎng)頁 Hello World!HTML 網(wǎng)頁頭部部分主體部分標(biāo)簽標(biāo)記 HTML 文檔的開始和結(jié)束網(wǎng)頁標(biāo)題網(wǎng)頁內(nèi)容，可以是文本、圖像等這部分包括標(biāo)題和其他說明信息，包括在 標(biāo)簽內(nèi)這部分包含文本、圖像和鏈接，它包括在 標(biāo)簽內(nèi)HTML文檔的基本結(jié)構(gòu)記事本UltraEditHTML的編輯工具操作演示1：在記事本里創(chuàng)建網(wǎng)頁 網(wǎng)頁的摘要信息2-1 網(wǎng)頁摘要信息利于瀏覽器解析和搜索引擎搜索：使用標(biāo)簽 搜狐-中國最大的門戶網(wǎng)站 網(wǎng)頁的摘要信息2-1 使用標(biāo)簽（1）描述文檔類型和字符編碼（2）描述搜索關(guān)

4、鍵字和描述提供搜索關(guān)鍵字和內(nèi)容描述信息，方便搜索引擎的搜索 HTML頁面中的塊和行HTML標(biāo)簽分類（方便后續(xù)的布局設(shè)計(jì)）：塊級(jí)標(biāo)簽：顯示為“塊”狀，前后隔一行 行級(jí)標(biāo)簽：按行逐一顯示 分類好處：方便后續(xù)的布局設(shè)計(jì) 塊級(jí)：塊內(nèi)包含多行行級(jí)：包括文字、圖片等塊級(jí)標(biāo)簽根據(jù)使用場(chǎng)合，塊級(jí)標(biāo)簽又細(xì)分為：基本塊級(jí)標(biāo)簽 常用于布局的塊級(jí)標(biāo)簽 標(biāo)題標(biāo)簽 一級(jí)標(biāo)題 二級(jí)標(biāo)題 三級(jí)標(biāo)題 四級(jí)標(biāo)題 五級(jí)標(biāo)題 六級(jí)標(biāo)題基本塊級(jí)標(biāo)簽3-1h1最大h6最小前后隔行操作演示2：標(biāo)題標(biāo)簽 標(biāo)題標(biāo)題段落標(biāo)簽 北京歡迎你 北京歡迎你，有夢(mèng)想誰都了不起！/p 有勇氣就會(huì)有奇跡?；緣K級(jí)標(biāo)簽3-2前后換行，類似教材中的段落操作演示3

5、：段落標(biāo)簽 水平線標(biāo)簽 北京歡迎你 北京歡迎你，有夢(mèng)想誰都了不起！/p 有勇氣就會(huì)有奇跡?；緣K級(jí)標(biāo)簽3-3橫線用于內(nèi)容分割單個(gè)標(biāo)簽的閉合形式操作演示4：水平線標(biāo)簽 練習(xí)基本塊級(jí)標(biāo)簽需求說明：顯示唐詩介紹（ UltraEdit環(huán)境 ） 完成時(shí)間：20分鐘分析應(yīng)使用哪些標(biāo)簽？有序列表標(biāo)簽 注冊(cè)步驟： 填寫信息 收電子郵件 注冊(cè)成功 常用于布局的塊級(jí)標(biāo)簽7-1有序列表操作演示5：有序列表標(biāo)簽 列表項(xiàng)1 無序列表標(biāo)簽 新人上路指南 如何激活會(huì)員名？ 如何注冊(cè)貴美會(huì)員？ 注冊(cè)時(shí)密碼設(shè)置有什么要求？ 貴美認(rèn)證常用于布局的塊級(jí)標(biāo)簽7-2無序列表操作演示6：無序列表標(biāo)簽 列表項(xiàng)1 定義描述標(biāo)簽 咖啡 一種黑

6、色的熱飲料，原料據(jù)說是咖啡豆，非洲盛產(chǎn)這類原料。 可以提神，刺激神經(jīng)。常用于布局的塊級(jí)標(biāo)簽7-3這種效果可以和無序列表互相替代，因dt是塊狀元素，所以常用于圖文混編的布局場(chǎng)合操作演示7：dl和dt標(biāo)簽 標(biāo)題 描述1 圖片的HTML代碼（后續(xù)講解） 商品名稱：燦坤蒸氣電熨斗 商品價(jià)格：388元 商品簡介：金鋼低血超硬超順滑,140ml透明大水箱設(shè)計(jì)常用于布局的塊級(jí)標(biāo)簽7-4用定義描述標(biāo)簽實(shí)現(xiàn)圖文混編的效果文字有一定的縮進(jìn)表格 百度 新浪 常用于布局的塊級(jí)標(biāo)簽7-5-表格 -行 -列（單元格）演示示例8：表格標(biāo)簽 常用于布局的塊級(jí)標(biāo)簽7-6表單 一般和table使用： . . .演示示例9：表單標(biāo)

7、簽 常用于布局的塊級(jí)標(biāo)簽7-7分區(qū)標(biāo)簽 div標(biāo)簽可內(nèi)嵌到等標(biāo)簽內(nèi)，作為普通塊狀元素使用一般當(dāng)作結(jié)構(gòu)化塊狀元素使用，作為邏輯分區(qū)（分塊）即容器來使用 新人上路 div其實(shí)就是一個(gè). 操作演示10：分區(qū)標(biāo)簽 小結(jié)1、div-ul(ol)-li ：常用于分類導(dǎo)航或菜單等 2、div-dl-dt-dd ：常用于圖文混編的場(chǎng)合 3、table-tr-td ：常用于圖文布局或顯示數(shù)據(jù) 4、form-table-tr-td：常用于布局表單 請(qǐng)說出實(shí)際開發(fā)常用的4種塊狀結(jié)構(gòu)是什么？練習(xí)常用于布局的塊級(jí)標(biāo)簽 需求說明：實(shí)現(xiàn)簡單的商品購買頁 完成時(shí)間：25分鐘分析應(yīng)使用哪些標(biāo)簽？共性問題集中講解常見調(diào)試問題及解

8、決辦法代碼規(guī)范問題共性問題集中講解圖像標(biāo)簽 行級(jí)標(biāo)簽3-1為了不同瀏覽器之間的兼容，推薦使用title屬性 ，確保能顯示提示文字操作演示11：圖像標(biāo)簽 范圍標(biāo)簽 ：顯示某行內(nèi)的獨(dú)特樣式 商品價(jià)格:僅售10元行級(jí)標(biāo)簽3-2操作演示12：span標(biāo)簽 文本等行級(jí)內(nèi)容設(shè)置紅色、大號(hào)字突出顯示 換行標(biāo)簽 北京歡迎你，有夢(mèng)想誰都了不起！ 有勇氣就會(huì)有奇跡。 北京歡迎你，為你開天辟地 流動(dòng)中的魅力充滿朝氣。 北京歡迎你，在太陽下分享呼吸 在黃土地刷新成績。 北京歡迎你，像音樂感動(dòng)你 讓我們都加油去超越自己。 行級(jí)標(biāo)簽3-3和的區(qū)別：前后不換行操作演示13：換行標(biāo)簽 為什么需要W3C標(biāo)準(zhǔn)W3C：World

9、Wide Web Consortium，萬維網(wǎng)聯(lián)盟W3C的職能：負(fù)責(zé)制定和維護(hù)web行業(yè)標(biāo)準(zhǔn)W3C標(biāo)準(zhǔn)包括：列的標(biāo)準(zhǔn)：HTML內(nèi)容方面：XHTML樣式美化方面：CSS 結(jié)構(gòu)文檔訪問方面：OM頁面交互方面：ECMAScript 制定統(tǒng)一的web標(biāo)準(zhǔn)W3CNetscape的圖標(biāo)W3C提倡的Web結(jié)構(gòu)不規(guī)范的示例一級(jí)主題一級(jí)主題闡述文字 二級(jí)主題二級(jí)主題相關(guān)文字項(xiàng)目列表1項(xiàng)目列表2項(xiàng)目列表3存在問題：1、內(nèi)容和表現(xiàn)沒分離，后期很難維護(hù)和修改 2、HTML代碼不能表示頁面的內(nèi)容語義，不利于搜索引擎搜索 操作演示：不規(guī)范的示例 W3C提倡的Web結(jié)構(gòu)規(guī)范的示例一級(jí)主題1 一級(jí)主題闡述文字 二級(jí)主題 二級(jí)主題闡述文字 項(xiàng)目列表1 項(xiàng)目列表2 項(xiàng)目列表3 W3C提倡的Web結(jié)構(gòu)：1、內(nèi)容（結(jié)構(gòu)）和表現(xiàn)（樣式）分離2、HTML內(nèi)容結(jié)構(gòu)要求語義化 操作演示：規(guī)范的示例 body部分內(nèi)容XHTML 1.0基本規(guī)范標(biāo)簽名和屬性名稱必須小寫 HTML標(biāo)簽必須關(guān)閉 屬性值必須用引號(hào)括起來 標(biāo)簽必須正確嵌套 必須添加文檔類型聲明 1、聲明必須位于文檔的最前面2、三種級(jí)別：Strict（嚴(yán)格類型） 、Trasitional（過度類型）、 Frameset（框架類型） 練習(xí)行級(jí)元素需求說明：完成時(shí)間：20分鐘注意HTML結(jié)構(gòu)的語義化，遵守XH