第1章網(wǎng)頁設計簡介

1、第1章 網(wǎng)頁設計簡介,主講人：賀道德 電話Email:,主要內容,了解萬維網(wǎng)的用途,了解網(wǎng)頁設計的基本概念,認識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開放,1992年， 誕生了Mosaic瀏覽器 Marc Andreessen,1.1 萬維網(wǎng)概述,WWW（World Wide Web）是一

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

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

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

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

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

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

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

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