網(wǎng)頁設(shè)計與制作教程第1章--網(wǎng)頁設(shè)計與制作基礎(chǔ)課件

1、網(wǎng)頁設(shè)計與制作教程（HTML+CSS+JavaScript）第2版機(jī)械工業(yè)出版社第1章 網(wǎng)頁設(shè)計與制作基礎(chǔ)1.1 網(wǎng)頁與網(wǎng)站的概念網(wǎng)頁與網(wǎng)站的概念 WWW（World Wide Web，萬維網(wǎng)）是Internet上基于客戶/服務(wù)器體系結(jié)構(gòu)的分布式多平臺的超文本超媒體信息服務(wù)系統(tǒng)。網(wǎng)頁（Web Page）是存放在Web服務(wù)器上供客戶端用戶瀏覽的文件，可以在Internet上傳輸。網(wǎng)站（Web Site，也稱站點(diǎn)）被定義為已注冊的域名、主頁或Web服務(wù)器。網(wǎng)站是一系列網(wǎng)頁的組合，這些網(wǎng)頁擁有相同或相似的屬性并通過各種鏈接相關(guān)聯(lián)。如果在瀏覽器的地址欄中輸入網(wǎng)站地址，瀏覽器會自動連接到這個網(wǎng)址所指向的

2、網(wǎng)絡(luò)服務(wù)器，并出現(xiàn)一個默認(rèn)的網(wǎng)頁，這個最先打開的默認(rèn)頁面就被稱為“主頁”或“首頁”。1.2 Web標(biāo)準(zhǔn)1.2.1 Web標(biāo)準(zhǔn)的概念Web標(biāo)準(zhǔn)不是某一種標(biāo)準(zhǔn)，而是一系列標(biāo)準(zhǔn)的集合。網(wǎng)頁主要由3部分組成：結(jié)構(gòu)（Structure）、表現(xiàn)（Presentation）和行為（Behavior）。1結(jié)構(gòu)化標(biāo)準(zhǔn)語言（1）HTML（2）XML（3）XHTML2表現(xiàn)標(biāo)準(zhǔn)語言CSS是Cascading Style Sheets（層疊樣式表）的縮寫。3行為標(biāo)準(zhǔn)（1）DOM（2）ECMAScript1.2 Web標(biāo)準(zhǔn)1.2.2 建立Web標(biāo)準(zhǔn)的優(yōu)點(diǎn) 建立Web標(biāo)準(zhǔn)的優(yōu)點(diǎn)如下： 提供最大利益給最多的網(wǎng)站用戶； 確保任

3、何網(wǎng)站文檔都能夠長期有效； 簡化代碼，降低建設(shè)成本； 讓網(wǎng)站更容易使用，能適應(yīng)更多不同用戶和更多網(wǎng)絡(luò)設(shè)備； 當(dāng)瀏覽器版本更新或者出現(xiàn)新的網(wǎng)絡(luò)交互設(shè)備時，確保所有應(yīng)用能夠繼續(xù)正確執(zhí)行。1.2 Web標(biāo)準(zhǔn)1.2.3 理解表現(xiàn)和結(jié)構(gòu)相分離 1內(nèi)容內(nèi)容就是頁面實際要傳達(dá)的真正信息，包含數(shù)據(jù)、文檔或圖片等。2結(jié)構(gòu)可以看到上面的文本信息本身已經(jīng)完整，但是混亂一團(tuán)，難以閱讀和理解，必須將其格式化一下。3表現(xiàn)雖然定義了結(jié)構(gòu)，但是內(nèi)容還是原來的樣式?jīng)]有改變，所有這些用來改變內(nèi)容外觀的東西，稱之為“表現(xiàn)”。4行為行為是對內(nèi)容的交互及操作效果。例如，使用JavaScript可以使內(nèi)容動起來，可以判斷一些表單提交，進(jìn)

4、行相應(yīng)的一些操作。1.3 HTML語法基礎(chǔ)1.3.1 HTML簡介HTML最早源于SGML（Standard General Markup Language，標(biāo)準(zhǔn)通用化標(biāo)記語言）。2000年，W3C組織公布發(fā)行了XHTML 1.0版本。不過XHTML并沒有成功，而HTML5便因此孕育而生。2012年12月17日，W3C宣布凝結(jié)了大量網(wǎng)絡(luò)工作者心血的HTML5規(guī)范正式定稿，確定了HTML5在Web網(wǎng)絡(luò)平臺奠基石的地位。Web技術(shù)發(fā)展歷程時間表如圖2-1所示。1.3 HTML語法基礎(chǔ)1.3.2 HTML語法結(jié)構(gòu)1標(biāo)簽在HTML中，通常標(biāo)簽都是由開始標(biāo)簽和結(jié)束標(biāo)簽組成的，開始標(biāo)簽用“”表示，結(jié)束標(biāo)簽

5、用“”表示。其格式為： 受標(biāo)簽影響的內(nèi)容 2屬性標(biāo)簽僅僅規(guī)定這是什么信息，但是要想顯示或控制這些信息，就需要在標(biāo)簽后面加上相關(guān)的屬性。其格式為： 受標(biāo)簽影響的內(nèi)容 3元素元素指的是包含標(biāo)簽在內(nèi)的整體，元素的內(nèi)容是開始標(biāo)簽與結(jié)束標(biāo)簽之間的內(nèi)容。1.3 HTML語法基礎(chǔ)1.3.3 HTML語法規(guī)范1標(biāo)簽的規(guī)范（1）標(biāo)簽分單標(biāo)簽和雙標(biāo)簽，雙標(biāo)簽往往是成對出現(xiàn)，所有標(biāo)簽（包括空標(biāo)簽）都必須關(guān)閉，如、等。（2）標(biāo)簽名和屬性建議都用小寫字母。（3）多數(shù)HTML標(biāo)簽可以嵌套，但不允許交叉。（4）HTML文件一行可以寫多個標(biāo)簽，但標(biāo)簽中的一個單詞不能分兩行寫。（5）HTML源文件中的換行、回車符和空格在顯示效

6、果中是無效的。1.3 HTML語法基礎(chǔ)1.3.3 HTML語法規(guī)范2屬性的規(guī)范（1）并不是所有的標(biāo)簽都有屬性，如換行標(biāo)簽就沒有。（2）屬性值都要用雙引號括起來。3代碼的縮進(jìn)HTML代碼并不要求在書寫時縮進(jìn)，但為了文檔的構(gòu)性和層次性，建議初學(xué)者使用標(biāo)記時首尾對齊，內(nèi)部的內(nèi)容向右縮進(jìn)幾格。1.3 HTML語法基礎(chǔ)1.3.4 HTML文檔結(jié)構(gòu)HTML5文檔是一種純文本格式的文件，文檔的基本結(jié)構(gòu)為： 文檔標(biāo)題 網(wǎng)頁內(nèi)容 1.4 網(wǎng)頁結(jié)構(gòu)網(wǎng)頁結(jié)構(gòu)從頁面布局的角度看，一個頁面的布局就類似一篇文章的排版，需要分為多個區(qū)塊，較大的區(qū)塊又可再細(xì)分為小區(qū)塊。塊內(nèi)為多行逐一排列的文字、圖片、超鏈接等內(nèi)容，這些區(qū)塊一

7、般稱為塊級元素；而區(qū)塊內(nèi)的文字、圖片或超鏈接等一般稱為行級元素，如圖1-4所示。1.5 創(chuàng)建HTML文檔創(chuàng)建HTML文檔下面用最簡單的“記事本”來編輯網(wǎng)頁文件。 打開記事本。單擊Windows的“開始”按鈕，在“程序”菜單的“附件”子菜單中單擊“記事本”命令。 創(chuàng)建新文件，并按HTML語言規(guī)則編輯。在“記事本”窗口中輸入HTML代碼。 保存網(wǎng)頁。將記事本中的內(nèi)容保存在磁盤中。 在“我的電腦”相應(yīng)的存盤文件夾中雙擊first.html文件啟動瀏覽器，即可看到網(wǎng)頁的顯示結(jié)果。1.6 頁面摘要信息1.6.1 標(biāo)簽標(biāo)簽位于與中，用于標(biāo)示文檔標(biāo)題，但文本內(nèi)容不會出現(xiàn)在網(wǎng)頁中，而是出現(xiàn)在大多數(shù)瀏覽器的左上

8、角。如果文章沒有標(biāo)題，讀者就必須通過閱讀部分內(nèi)容才能了解其主題。對于網(wǎng)頁來說，也必須有標(biāo)題來歸納要點(diǎn)。標(biāo)簽位于與中，用于標(biāo)示文檔標(biāo)題。格式如下： 標(biāo)題名 1.6 頁面摘要信息1.6.2 標(biāo)簽標(biāo)簽可提供有關(guān)頁面的元信息（meta-information）。分兩大屬性：HTTP標(biāo)題屬性（http-equiv）和頁面描述屬性（name）。標(biāo)簽的name屬性的語法格式為：meta name=參數(shù) content=參數(shù)值。name屬性主要有以下兩個參數(shù)：keywords和description。1keywords（關(guān)鍵字）keywords用來告訴搜索引擎網(wǎng)頁使用的關(guān)鍵字。2description（網(wǎng)站內(nèi)

9、容描述）description用來告訴搜索引擎網(wǎng)站主要的內(nèi)容。1.6 頁面摘要信息1.6.3 光影世界頁面摘要信息【演練1-1】制作光影世界頁面摘要信息，由于摘要信息不能顯示在瀏覽器窗口中，因此這里只給出本例文件1-1.html的代碼。【說明】用戶可以登錄百度搜索引擎/search/url_submit.html收錄網(wǎng)頁，以便瀏覽者訪問到自己的網(wǎng)站。1.7 注釋和特殊符號1.7.1 注釋可以在HTML文檔中添加注釋，增加代碼的可讀性，便于以后維護(hù)和修改。訪問者在瀏覽器中是看不見這些注釋的，只有在用文本編輯器打開文檔源代碼時才可見。注釋標(biāo)簽的格式為：1.7 注釋和特殊符號1.7.2 特殊符號常用的特殊符號及對應(yīng)的字符實體見表1-1。這些字符實體都以“&”開頭，以“;”結(jié)束。1.8 實訓(xùn)制作家具商城頁面的版權(quán)信息家具商城頁面的版權(quán)信息【實訓(xùn)】制作家具商城頁面的版權(quán)信息，頁面中包括版權(quán)符號、空格，本例文件1-2.html在瀏覽器中顯示的效果如圖1-9所示。習(xí)題