網(wǎng)頁(yè)制作(FrontPage)案例.ppt

1、網(wǎng)頁(yè)基礎(chǔ)知識(shí),網(wǎng)頁(yè)實(shí)質(zhì)上就是一個(gè)用HTML(XHTML)書寫的文本文件 文本文件是以ASCII編碼方式存儲(chǔ)的一種文件，可在目前主流的任何操作系統(tǒng)使用。在windows中，我們可以用附件提供的“記事本”程序來(lái)打開、查看或修改 HTML是超文本標(biāo)記語(yǔ)言(Hyper Text Markup Language)的縮寫 XHTML是可擴(kuò)展超文本標(biāo)記語(yǔ)言,網(wǎng)頁(yè)基礎(chǔ)知識(shí)-Html,HTML關(guān)心的是網(wǎng)頁(yè)元素的展現(xiàn)形式（如文字的大小顏色位置等），只能使用瀏覽器認(rèn)識(shí)的標(biāo)記。 XML關(guān)心的是數(shù)據(jù)本身以及數(shù)據(jù)的結(jié)構(gòu)（如一條天氣預(yù)報(bào)包含的城市、溫度、風(fēng)向、晴雨等信息），可以自己定義標(biāo)記及格式。 XHTML是網(wǎng)頁(yè)從關(guān)心顯

2、示向關(guān)心數(shù)據(jù)的轉(zhuǎn)變的一種過(guò)渡語(yǔ)言，基于HTML，但比HTML要求嚴(yán)格。在用XHTML制作網(wǎng)頁(yè)的實(shí)戰(zhàn)中，HTML僅用來(lái)組織數(shù)據(jù)，網(wǎng)頁(yè)元素的外觀形式信息不再由HTML負(fù)責(zé)，交由CSS（層疊樣式表）處理。這是現(xiàn)在主流的網(wǎng)頁(yè)制作方式。,網(wǎng)頁(yè)基礎(chǔ)知識(shí)-瀏覽器,我們?yōu)g覽網(wǎng)頁(yè)，實(shí)質(zhì)上是瀏覽器先把該網(wǎng)頁(yè)的文本內(nèi)容以及相關(guān)的圖片動(dòng)畫等資源文件下載下來(lái)，然后瀏覽器根據(jù)網(wǎng)頁(yè)的HTML文本內(nèi)容，對(duì)相應(yīng)的標(biāo)記做出相應(yīng)的顯示，最后呈現(xiàn)在我們面前的是一個(gè)豐富華麗的頁(yè)面。所以我們做網(wǎng)頁(yè)實(shí)質(zhì)上是用瀏覽器認(rèn)識(shí)的語(yǔ)言對(duì)瀏覽器說(shuō)話。 目前主流的瀏覽器有以下四種： IE系列（Internet explorer）6.0-9.0 火狐（M

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

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

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

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

7、我們只需要點(diǎn)來(lái)點(diǎn)去，工具幫我們寫代碼）,案例一步驟,點(diǎn)擊“表格插入表格”菜單，在彈出的對(duì)話框中設(shè)置需要插入的表格屬性，在此我們?nèi)缦聢D設(shè)置。,案例一步驟,新建的表格因?yàn)檫吙虼旨?xì)為0，在設(shè)計(jì)視圖下會(huì)以虛線顯示，在表格內(nèi)按右鍵，點(diǎn)“表格屬性”，在使用背景圖片的“瀏覽”按鈕，選擇素材文件夾中的“banner_bj.jpg”，確定。 在左邊單元格內(nèi)按右鍵，點(diǎn)“單元格屬性”，設(shè)定單元格寬度770像素，再使用背景圖片的“瀏覽”按鈕，選擇素材文件夾中的“banner.jpg”，確定。 在表格內(nèi)點(diǎn)“插入圖片F(xiàn)lash影片”菜單，選擇素材文件夾內(nèi)的“top.swf”，確定。在新加入的flash影片上按右鍵，勾選“透明”，設(shè)定寬度為770。 采用如上類似步驟制作導(dǎo)航部分。 在瀏覽器中預(yù)覽，發(fā)現(xiàn)頁(yè)面頭部已經(jīng)按預(yù)想完成。,案例一步驟,再次插入表格，1行5列，寬度100%，高度不設(shè)置。 將第1,2,4,5列分別設(shè)置寬度為193,14,16,193，中間列不設(shè)置。將5個(gè)單元格全部選中，垂直對(duì)齊方式設(shè)為“頂端對(duì)齊”。 將第2列設(shè)置背景