第1章網(wǎng)頁(yè)設(shè)計(jì)簡(jiǎn)介

1、第1章 網(wǎng)頁(yè)設(shè)計(jì)簡(jiǎn)介,主講人：賀道德 電話Email:,主要內(nèi)容,了解萬(wàn)維網(wǎng)的用途,了解網(wǎng)頁(yè)設(shè)計(jì)的基本概念,認(rèn)識(shí)HTML、CSS、JavaScript,Internet的歷史?,1957前蘇聯(lián)發(fā)射世界上第一顆人造衛(wèi)星,ARPA成立,1969年，ARPAnet的誕生,1971年， Email程序 Ray TomlinsonE,1989年， www的誕生， HTML、URL、HTTP Tim Berners-Lee,1978年 BBS開(kāi)放,1992年， 誕生了Mosaic瀏覽器 Marc Andreessen,1.1 萬(wàn)維網(wǎng)概述,WWW（World Wide Web）是一

2、個(gè)基于超文本（Hypertext）方式的信息檢索服務(wù)工具。 WWW系統(tǒng)已在教育、科學(xué)技術(shù)、商業(yè)廣告、公共關(guān)系、大眾媒體和娛樂(lè)等多方面起著愈來(lái)愈重要的作用 。 WWW的應(yīng)用成為Internet上最受歡迎的應(yīng)用之一，它的出現(xiàn)極大的推動(dòng)了Internet的推廣。 WWW獲得成功的秘訣在于它制定了一套標(biāo)準(zhǔn)的、 易于人們掌握的超文本開(kāi)發(fā)語(yǔ)言HTML、信息資源的統(tǒng)一定位格式URL 和超文本傳送通信協(xié)議HTTP，用戶掌握后可以很容易地建立自己的網(wǎng)站。,1.2 HTML語(yǔ)言,HTML是Hypertext Markup Language的英文縮寫，即超文本標(biāo)記語(yǔ)言，它是構(gòu)成Web頁(yè)面（Page）的主要工具。 用

3、HTML編寫的超文本文檔稱為HTML文檔，它是由很多標(biāo)記組成的一種文本文件，HTML標(biāo)記可以說(shuō)明文字、圖形、動(dòng)畫、聲音、表格、鏈接等 。 使用HTML語(yǔ)言描述的文件，能獨(dú)立于各種操作系統(tǒng)平臺(tái)（如UNIX，WINDOWS等），訪問(wèn)它只需要一個(gè)WWW瀏覽器，我們所看到的網(wǎng)頁(yè)，是瀏覽器對(duì)HTML文件進(jìn)行解釋的結(jié)果。,1.2 HTML語(yǔ)言,新浪網(wǎng)的首頁(yè) 可以通過(guò)瀏覽器直接查看一個(gè)頁(yè)面的HTML源代碼，例如在IE瀏覽器菜單欄上選擇“查看源文件”即可。,1.3 網(wǎng)頁(yè)設(shè)計(jì)相關(guān)概念,超鏈接 超鏈接(Hyper Link)是特殊的文字標(biāo)識(shí)，它指向了WWW中的資源，例如一個(gè)網(wǎng)頁(yè)、聲音、文件、網(wǎng)頁(yè)的一個(gè)段落或者WW

4、W中的其他資源等，這些資源均可放在任何一個(gè)服務(wù)器上。在網(wǎng)頁(yè)中，一個(gè)超鏈接可以是一些文字也可以是一張圖片。,1.3 網(wǎng)頁(yè)設(shè)計(jì)相關(guān)概念(1),統(tǒng)一資源定位器 統(tǒng)一資源定位器(Uniform Resource Locator，URL)用于描述Internet上資源的位置和訪問(wèn)方式。 下面是新華網(wǎng)一個(gè)網(wǎng)頁(yè)的網(wǎng)址：,1.3 網(wǎng)頁(yè)設(shè)計(jì)相關(guān)概念(2),基本語(yǔ)法： scheme:/host.domain:port/path/filename 語(yǔ)法說(shuō)明： URL通常包括三個(gè)部分，第一部分是Scheme，告訴瀏覽器該如何工作，第二部分是文件所在的主機(jī)，第三部分是文件的路徑和文件名。 Scheme：定義因特網(wǎng)服務(wù)的

5、類型，告訴瀏覽器如何解析將要打開(kāi)的文件內(nèi)容。最流行的類型是 http，其他的參見(jiàn)表1-1。 domain（域）：定義因特網(wǎng)域名，比如：。 host（主機(jī)）：定義此域中的主機(jī)。如果被省略，缺省的支持 http 的主機(jī)是 www，上例中是news。 port(端口)：定義服務(wù)的端口號(hào)，端口號(hào)通常是被省略的。http默認(rèn)的端口號(hào)是 80。 path（路徑）：定義服務(wù)器上的路徑（一個(gè)輔助的路徑）。如果路徑被省略，資源（文檔）會(huì)被定位到網(wǎng)站的根目錄，上例中是“zlft/2009-02/28/”。 filename（文件名）：定義文檔的名稱。上例中是“content_10918112.htm”。,1.3

6、網(wǎng)頁(yè)設(shè)計(jì)相關(guān)概念(3),網(wǎng)站 網(wǎng)站(Web Site)是一個(gè)存放網(wǎng)絡(luò)服務(wù)器上的完整信息的集合體。它包含一個(gè)或多個(gè)網(wǎng)頁(yè)，這些網(wǎng)頁(yè)以一定的方式鏈接在一起，成為一個(gè)整體，用來(lái)描述一組完整的信息或達(dá)到某種期望的宣傳效果。 網(wǎng)頁(yè) 網(wǎng)頁(yè)(Web pages)是網(wǎng)站的組成部分，制作者可以將需要公布的信息按照一定的方式分類，放在每個(gè)網(wǎng)頁(yè)上，網(wǎng)頁(yè)里可以有文字、圖象、聲音及視頻信息等。網(wǎng)頁(yè)可以看成是一個(gè)單一體，是網(wǎng)站的一個(gè)元素。,1.3 網(wǎng)頁(yè)設(shè)計(jì)相關(guān)概念(4),首頁(yè) 首頁(yè)(Home page)，也可以稱之為主頁(yè)，它是一個(gè)單獨(dú)的網(wǎng)頁(yè)，和一般網(wǎng)頁(yè)一樣，可以存放各種信息，同時(shí)又是一個(gè)特殊的網(wǎng)頁(yè)，作為整個(gè)網(wǎng)站的起始點(diǎn)和匯

7、總點(diǎn)，是瀏覽者訪問(wèn)一個(gè)網(wǎng)站的第一個(gè)網(wǎng)頁(yè)。,不一樣的網(wǎng)頁(yè)設(shè)計(jì)欣賞,雜志布局,復(fù)古,印刷字體,1.4網(wǎng)頁(yè)制作開(kāi)發(fā)工具,編輯工具 HTML代碼可以使用Windows操作系統(tǒng)中自帶的記事本進(jìn)行編輯。如果你正在使用的話，你可以使用它自帶的記事本（Notepad）程序，依次點(diǎn)擊“開(kāi)始菜單程序附件”找到該程序,1.4網(wǎng)頁(yè)制作開(kāi)發(fā)工具,1.4網(wǎng)頁(yè)制作開(kāi)發(fā)工具,這是一個(gè)簡(jiǎn)單的HTML代碼，從菜單選擇“文件另存為”，將該文本文件命名為“1-1.html”。在文件夾中雙擊“index.html”，用IE瀏覽器打開(kāi)該網(wǎng)頁(yè)文件, 我們的班級(jí)主頁(yè) 歡迎來(lái)到我們的班級(jí)網(wǎng)站 這是我們開(kāi)發(fā)的第一個(gè)網(wǎng)頁(yè) ,1.4網(wǎng)頁(yè)制作開(kāi)發(fā)工具

8、,文本編輯器 不僅在記事本中可以編寫HTML代碼，任何文本編輯器都可以編寫HTML。比如寫字板、word等，但保存的時(shí)候必須保存為.html或.htm格式。,1.4網(wǎng)頁(yè)制作開(kāi)發(fā)工具,EditPlus 是一款非常好用的 HTML 編輯器，它除了支持顏色標(biāo)記、HTML 標(biāo)記，同時(shí)支持 C、C+、Perl、Java等其他語(yǔ)言，另外，它還內(nèi)建完整的HTML & CSS 指令功能，對(duì)于習(xí)慣用記事本編輯網(wǎng)頁(yè)的朋友，它可幫你節(jié)省一半以上的網(wǎng)頁(yè)制作時(shí)間.,1.4網(wǎng)頁(yè)制作開(kāi)發(fā)工具,Dreamweaver 是一款專業(yè)的HTML編輯器，用于設(shè)計(jì)網(wǎng)頁(yè)和WEB應(yīng)用程序，它提供了很多實(shí)用工具，利用這些工具，我們可以更加方

9、便、快速地制作網(wǎng)頁(yè).,1.4網(wǎng)頁(yè)制作開(kāi)發(fā)工具,瀏覽工具 瀏覽器產(chǎn)品有很多可供選擇，它們都可以瀏覽WWW上的內(nèi)容。目前， 最普及的瀏覽器當(dāng)屬微軟（Microsoft）公司的Internet Explorer（俗稱“IE”），它是和windows系統(tǒng)綁定在一起的，其他的一些瀏覽器包括Opera、Mozilla Firefox（俗稱“火狐貍”或“火狐”）、騰訊TT等。,1.5 網(wǎng)頁(yè)制作相關(guān)技術(shù),CSS CSS就是一種叫做樣式表（Style Sheet）的技術(shù)。也有的人稱之為層疊樣式表（Cascading Style Sheet）。在主頁(yè)制作時(shí)采用CSS技術(shù)，可以有效地對(duì)頁(yè)面的布局、字體、顏色、背景和其它效果實(shí)現(xiàn)更加精確的控制 JavaScript JavaScript是由 Netscape公司開(kāi)發(fā)的一種腳本語(yǔ)言（scripting language）。 在HTML基礎(chǔ)上，使用JavaScript