【正文】 分離的實(shí)現(xiàn) 1）、內(nèi)容 (Content) 內(nèi)容是頁(yè)面實(shí)際要傳達(dá)的真正信息，包括數(shù)據(jù)、 文擋或者圖片等； 2）、結(jié)構(gòu)（ Structure） 結(jié)構(gòu)就是對(duì)網(wǎng)頁(yè)內(nèi)容進(jìn)行整理和分類(lèi)。 Web標(biāo)準(zhǔn)不是某一個(gè)標(biāo)準(zhǔn)，而是一系列標(biāo)準(zhǔn)的集合。 Taobao網(wǎng)分析 1 Blog網(wǎng)分析 2 Google地圖 3 6Rooms網(wǎng)分析 4 ? 客戶(hù)既是信息的消費(fèi)者，也是信息的創(chuàng)造者，也就是說(shuō)：整個(gè)網(wǎng)站的內(nèi)容有客戶(hù)產(chǎn)生也由客戶(hù)消費(fèi)； ? 網(wǎng)站的管理者也成了信息的客戶(hù)； ? 網(wǎng)站的框架由網(wǎng)站技術(shù)人員維護(hù)與管理。 網(wǎng)站的內(nèi)容是由網(wǎng)站管理員和編輯人員錄入的 客戶(hù)只是瀏覽網(wǎng)頁(yè)的內(nèi)容 2 ? 客戶(hù)端技術(shù) 主要包括信息的接收、展現(xiàn)技術(shù)； ? 服務(wù)端技術(shù) 主要包括信息的生成、處理、發(fā)送技術(shù)； 客戶(hù) 發(fā)出請(qǐng)求 服務(wù)器 處理請(qǐng)求 生成信息， 并發(fā)送給客戶(hù) 數(shù)據(jù)接收 數(shù)據(jù)展現(xiàn) ? 提出的依據(jù)： O?Reilly公司和 Media國(guó)際公司之間的一次頭腦風(fēng)暴會(huì)議的內(nèi)容； ? Tim O?Reilly根據(jù)會(huì)議頭腦風(fēng)暴內(nèi)容，于 2022 年 3月發(fā)表文章 《 什么是 》 ， Tim O?Reilly在闡述 軟件設(shè)計(jì)模式 和 商業(yè)模式 角度去進(jìn)行闡述和分析。 瀏覽器 : Microsoft Inter Explorer 當(dāng) Microsoft發(fā)布 Windows 95時(shí)， IE Microsoft Plus!包的一部分同時(shí)發(fā)布的。 ? Web網(wǎng)頁(yè)設(shè)計(jì)標(biāo)準(zhǔn) 概述 Web的起源 ? Web，也稱(chēng) WWW (World Wide Web 萬(wàn)維網(wǎng) )，是在 1989年由英國(guó)人 Tim BernersLee 發(fā)明的。 ? Tim BernersLee當(dāng)時(shí)就指出：“ Web是一個(gè)抽象的信息庫(kù)。 Firefox (1994年 12月， Netscape發(fā)布了 ， 第一個(gè)盈利性質(zhì)的瀏覽器從此誕生。 ? 會(huì)議之后的一年半的時(shí)間里，“ Web ”一詞已經(jīng)深入人心，從 Google上可以搜索到 950萬(wàn)以上的鏈接。 ? 網(wǎng)站維護(hù)人員大大減少（相對(duì)于） ? 網(wǎng)站的維護(hù)成本也大大減少； ? XML ? eXtensible Markup Language 可擴(kuò)展標(biāo)記語(yǔ)言 學(xué)生 姓名 張三 /姓名 年齡 20/年齡 民族 漢族 /民族 … /學(xué)生 學(xué)生的 XML文件： ? CSS (Cascading Style Sheets)層疊樣式表 ? 主要是指網(wǎng)頁(yè)的內(nèi)容以什么格式展現(xiàn)出來(lái) 網(wǎng)頁(yè)的樣式層： CSS樣式表文件 網(wǎng)頁(yè)的內(nèi)容層 網(wǎng)頁(yè)的最終表現(xiàn)內(nèi)容 網(wǎng)頁(yè)分的結(jié)構(gòu)層次關(guān)系 ? Asynchronous Javascript + XML ? 也就是 AJAX技術(shù) 局部頁(yè)面刷新技術(shù) 1 ：局部頁(yè)面刷新技術(shù) 2 新浪網(wǎng) 淘寶網(wǎng) ? AJAX 框架 ? 現(xiàn)在比較流行的是： ExtJS ? ? ? 應(yīng)用示例 ? ? 美國(guó)著名科技博客 表文章稱(chēng)， ，市場(chǎng)不斷擴(kuò)大。 網(wǎng)頁(yè)由三部分組成，所以也包括三個(gè)方面的標(biāo)準(zhǔn)： 1)、結(jié)構(gòu) (Structure)：結(jié)構(gòu)化標(biāo)準(zhǔn)語(yǔ)言 XHTML、 XML 2)、表現(xiàn) (Presentation)：表現(xiàn)標(biāo)準(zhǔn)語(yǔ)言 CSS 3)、行為 (Behavior)：行為標(biāo)準(zhǔn)主要包括對(duì)象模型 （ DOM Document Object Model ）、 JavaScript、 VBScript等 采用 Web標(biāo)準(zhǔn)的好處 1)、文件下載和網(wǎng)頁(yè)顯示速度更快； 2)、大大提高搜索引擎的搜索速度； 3)、內(nèi)容能夠被更廣泛的設(shè)備訪(fǎng)問(wèn)（例如：手機(jī)等） 。利用結(jié)構(gòu) 化標(biāo)準(zhǔn)語(yǔ)言使網(wǎng)頁(yè)內(nèi)容更加具有邏輯性和易用性； （ 1）、 HTML （ 2）、 XML,(Extensible Markup Language(可擴(kuò) 展標(biāo)記語(yǔ)言 ))， XML最初設(shè)計(jì)的目的是彌補(bǔ) HTML的 不足，后來(lái)逐漸用于網(wǎng)絡(luò)數(shù)據(jù)的轉(zhuǎn)換和描述； 推薦使用 W3C于 2022年發(fā)布的 （ 3）、 XHTML (可擴(kuò)展超文本標(biāo)記語(yǔ)言 ) 推薦使用 W3C于 2022年發(fā)布的 結(jié)構(gòu)層主要用于對(duì)內(nèi)容進(jìn)行格式化處理。 DOM是 Document Object Model (文檔對(duì)象模型 ) （ 2）、 Script（腳本語(yǔ)言： JavaScript、 VBScript） 網(wǎng)頁(yè)分層樣例 （ 1）、網(wǎng)頁(yè)的內(nèi)容 （ 2）、網(wǎng)頁(yè)的 內(nèi)容 + 結(jié)構(gòu) （ 3）、網(wǎng)頁(yè)的 內(nèi)容 + 結(jié)構(gòu) + 表現(xiàn) 網(wǎng)頁(yè)的組成 html head title /title /head body This is my first homepage. bThis text is bold/b /body /html 這個(gè)文件的第一個(gè) Tag是 html，這個(gè) Tag告訴你的瀏覽器這是 HTML文件的頭。但是這并不表示這些信息沒(méi)有用處。 在 body和 /body之間的信息，是正文。 網(wǎng)頁(yè)的組成元素 文本 圖片 (bmp,jpg,gif) 超連接 動(dòng)畫(huà) (gif圖片信息 ) flash 視頻信息（ media player, realplayer） 靜態(tài)頁(yè)面制作 (1)、靜態(tài)文本（對(duì)齊、字體、大小、顏色） (2)、超連接 (3)、圖片插入 (插入本地圖片 ,插入網(wǎng)圖片 ) (4)、表單數(shù)據(jù)的提交； (5)、表格使用 (單行 ,多行 ,表格數(shù)據(jù)輸出的方法； 表格布局 ) (6)、頁(yè)面布局 (表格布局法 ) HTML教程網(wǎng)址： HTML視頻學(xué)習(xí) 網(wǎng)頁(yè)的標(biāo)簽 圖片標(biāo)簽的使用 img src= width=1004 height=1000 / 圖片超連接 a href=“ img src= width=1004 height=1000 / /a 網(wǎng)頁(yè)里，各個(gè)元素背景圖片的設(shè)置 屬性： background 背景圖片設(shè)置的應(yīng)用 新浪網(wǎng) 1）隨即廣告 2）圖片的輪換 建立符合 web標(biāo)準(zhǔn)的網(wǎng)站 要建立符合 web標(biāo)準(zhǔn)的網(wǎng)站，包括以下兩個(gè)方面： 1）、內(nèi)容標(biāo)準(zhǔn)化設(shè)計(jì) 2）、表現(xiàn)標(biāo)準(zhǔn)化設(shè)計(jì) 內(nèi)容標(biāo)準(zhǔn)化設(shè)計(jì) (1)、為頁(yè)面添加正確的 DOCTYPE DOCTYPE是 document type的簡(jiǎn)寫(xiě)。 !DOCTYPE html PUBLIC //W3C//DTD XHTML Strict//EN “ (3)框架型（ Frameset ） : 專(zhuān)門(mén)針對(duì)框架頁(yè)面設(shè)計(jì)使用的 DTD。 (3)、用小寫(xiě)字母書(shū)寫(xiě)所有的標(biāo)簽 XML對(duì)大小寫(xiě)是敏感的，所以， XHTML也是大小寫(xiě)有區(qū)別的。 (4)、為圖片添加 alt 屬性 alt屬性 指定了當(dāng)圖片不能顯示的時(shí)候就顯示供替換文本， 但對(duì) 純文本瀏覽器 和使用 屏幕閱讀機(jī) 的用戶(hù)來(lái)說(shuō)是至關(guān)重要的。 （ 6）、關(guān)閉所有的標(biāo)簽 在 XHTML中，每一個(gè)打開(kāi)的標(biāo)簽都必須關(guān)閉。 網(wǎng)頁(yè)的布局 網(wǎng)頁(yè)的頭 網(wǎng)頁(yè)體 網(wǎng)頁(yè)的尾 注意與網(wǎng)頁(yè)代碼里的 headbody 的區(qū)別 img src= width=1004 height=1000 / 使用表格來(lái)布局網(wǎng)頁(yè) table tr td /td td /td /tr tr td /td td /td /tr tr td