1、網頁基礎知識,網頁實質上就是一個用HTML(XHTML)書寫的文本文件 文本文件是以ASCII編碼方式存儲的一種文件，可在目前主流的任何操作系統使用。在windows中，我們可以用附件提供的“記事本”程序來打開、查看或修改 HTML是超文本標記語言(Hyper Text Markup Language)的縮寫 XHTML是可擴展超文本標記語言,網頁基礎知識-Html,HTML關心的是網頁元素的展現形式（如文字的大小顏色位置等），只能使用瀏覽器認識的標記。 XML關心的是數據本身以及數據的結構（如一條天氣預報包含的城市、溫度、風向、晴雨等信息），可以自己定義標記及格式。 XHTML是網頁從關心顯

2、示向關心數據的轉變的一種過渡語言，基于HTML，但比HTML要求嚴格。在用XHTML制作網頁的實戰中，HTML僅用來組織數據，網頁元素的外觀形式信息不再由HTML負責，交由CSS（層疊樣式表）處理。這是現在主流的網頁制作方式。,網頁基礎知識-瀏覽器,我們瀏覽網頁，實質上是瀏覽器先把該網頁的文本內容以及相關的圖片動畫等資源文件下載下來，然后瀏覽器根據網頁的HTML文本內容，對相應的標記做出相應的顯示，最后呈現在我們面前的是一個豐富華麗的頁面。所以我們做網頁實質上是用瀏覽器認識的語言對瀏覽器說話。 目前主流的瀏覽器有以下四種： IE系列（Internet explorer）6.0-9.0 火狐（M

3、ozilla FireFox） 谷歌 （Google Chrome） 蘋果 （MAC safari） 以上四種瀏覽器各自有自己的內核，雖然基本差不多，但細節可能會有細微差別，尤其是針對XHTML方面，同一個網頁在不同版本的IE下都可能有巨大差別，這是需要引起我們注意的方面。 其他的如360、遨游等國產瀏覽器事實上都是基于IE，不過換了下皮膚加了點功能而已。,網頁基礎知識-網站,網站事實上就是多個網頁通過超級鏈接組成的。 一個網站一般包含一個主頁（也稱默認頁，索引頁），用戶訪問網站先到達主頁，通過主頁上提供的超鏈接點擊到其他頁面。 (靜態)網頁的擴展名一般是 .htm 或 .html。 主頁命名

4、一般用default或index。,網頁基礎知識-網頁元素,網頁上一般包含以下元素，他們對應的標記如下： HTML基本結構：HTML,HEAD,BODY,TITLE,META,STYLE 頁面排版:H1-H6,BR,HR,P, PRE,CENTER,FONT等 表格:TABLE,TR,TH,TD,CAPTIOND等 圖片和多媒體:IMG,EMBED,OBJECT 列表: UL,OL,LI,DL,DT,DD 超級鏈接:A 表單:FORM,INPUT,CHECKBOX,RADIO,SELECT,OPTION,TEXTAREA等 框架:FRAME,FRAMESET 其他:DIV,SPAN等,網頁制作

5、工具,文本型 Notpad Hotdog Editplus 優點：修改網頁非常方便，可在任何平臺修改。 缺點：制作復雜網頁麻煩，需要非常熟練HTML。 所見即所得型 Frontpage Dreamweaver 優點：制作復雜網頁簡單，不懂Html也可制作。 缺點：修改網頁需要安裝大型軟件，一般遠程服務器不支持,FrontPage,FrontPage是Mircrosoft Office辦公軟件系列的一種，但默認不安裝，需要單獨安裝。 FrontPage是一款非常簡單方便的網頁制作軟件，不僅可以用來制作網頁，還可以用來建設和管理一個站點（不推薦使用站點功能，因FrontPage站點需要使用Fron

6、tpage擴展，大多數服務器不支持該功能，可能會導致網頁無法正常瀏覽或使用）,教學案例一,用FrontPage制作一個表格布局的頁面 素材在“課堂樣例”文件夾內 本頁面用到了絕大部分常用的HTML元素，并融入了一些表格制作網頁的技巧，有興趣的同學可在課下仔細研究。,案例一步驟,打開Frontpage，先將新建的網頁保存，同時將素材文件夾放在和網頁同目錄下。然后空白處按右鍵，點擊“網頁屬性”菜單，會彈出“網頁屬性”對話框。在該對話框中點“高級”選項卡，設定上邊距和 左邊距為0，按“確定”。 （切換到代碼視圖，觀察HTML變化。我們發現原來的body標記后增加了兩個屬性，網頁制作工具就是這個原理，

7、我們只需要點來點去，工具幫我們寫代碼）,案例一步驟,點擊“表格插入表格”菜單，在彈出的對話框中設置需要插入的表格屬性，在此我們如下圖設置。,案例一步驟,新建的表格因為邊框粗細為0，在設計視圖下會以虛線顯示，在表格內按右鍵，點“表格屬性”，在使用背景圖片的“瀏覽”按鈕，選擇素材文件夾中的“banner_bj.jpg”，確定。 在左邊單元格內按右鍵，點“單元格屬性”，設定單元格寬度770像素，再使用背景圖片的“瀏覽”按鈕，選擇素材文件夾中的“banner.jpg”，確定。 在表格內點“插入圖片Flash影片”菜單，選擇素材文件夾內的“top.swf”，確定。在新加入的flash影片上按右鍵，勾選“透明”，設定寬度為770。 采用如上類似步驟制作導航部分。 在瀏覽器中預覽，發現頁面頭部已經按預想完成。,案例一步驟,再次插入表格，1行5列，寬度100%，高度不設置。 將第1,2,4,5列分別設置寬度為193,14,16,193，中間列不設置。將5個單元格全部選中，垂直對齊方式設為“頂端對齊”。 將第2列設置背景