5.2網(wǎng)頁(yè)的建立

1、第五章網(wǎng)頁(yè)制作1教學(xué)課題：第二節(jié)網(wǎng)頁(yè)的建立(2個(gè)課時(shí))教學(xué)目的：讓學(xué)生熟悉網(wǎng)頁(yè)中的各種元素及其制作方法對(duì)網(wǎng)頁(yè)制作過(guò)程有初步的了解教學(xué)重點(diǎn)難點(diǎn)：網(wǎng)頁(yè)的制作及其美觀性教學(xué)方法：講解演示法，講練法教學(xué)過(guò)程：[復(fù)習(xí)回顧復(fù)習(xí)回顧]上一節(jié)課我們學(xué)習(xí)了網(wǎng)頁(yè)的幾個(gè)基本的概念。提問(wèn)：1、網(wǎng)頁(yè)由哪幾種元素組成？網(wǎng)頁(yè)中所的元素主要有文字、圖片、聲音、動(dòng)畫、影像以及鏈接等文字是網(wǎng)頁(yè)中最常用的元素；2、網(wǎng)頁(yè)和網(wǎng)站有什么區(qū)別？若干個(gè)通過(guò)鏈接連接在一起的網(wǎng)頁(yè)就構(gòu)成了

2、網(wǎng)站。網(wǎng)站是計(jì)算機(jī)網(wǎng)絡(luò)上的位置。網(wǎng)頁(yè)可以是站點(diǎn)的一部分，也可以獨(dú)立存在。[教授新課教授新課]一、網(wǎng)站的建立方法：文件?新建?站點(diǎn)?單擊“空站點(diǎn)”，指定站點(diǎn)的位置?確定演示演示：演示建立一個(gè)站點(diǎn)。注意注意：站點(diǎn)不推薦建在c盤或我的文檔下，因?yàn)閏盤不可寫。講解：1、在站點(diǎn)下，系統(tǒng)自動(dòng)會(huì)新建一組文件夾，但我們只能看到兩個(gè)_private和Images（存放圖形文件），其余都被隱藏起來(lái)了。2、2000默認(rèn)的視圖方式是“網(wǎng)頁(yè)”3、三個(gè)標(biāo)簽普通——

3、可以直觀地進(jìn)行網(wǎng)頁(yè)的編排html——系統(tǒng)自動(dòng)把我們的所有的操作轉(zhuǎn)化成代碼，我們也可以自己通過(guò)輸入代碼來(lái)進(jìn)行網(wǎng)頁(yè)的制作。預(yù)覽——可以看到制作的網(wǎng)頁(yè)在瀏覽器中的情形。有一些效果在普通中看不出來(lái)，只有在瀏覽器中才能看到，這是我們只要單擊預(yù)覽標(biāo)簽就可以了。討論與思考：為什么要先新建一個(gè)站點(diǎn)，再進(jìn)行網(wǎng)頁(yè)的制作？答：如果進(jìn)入網(wǎng)頁(yè)視圖，就直接制作網(wǎng)頁(yè)，這樣制作出來(lái)的網(wǎng)頁(yè)文件中所插入的圖片、動(dòng)畫、聲音文件的路徑使用的是絕對(duì)路徑，在這種情況下，如果網(wǎng)站位

4、置發(fā)生遷移，所有文件的路徑必須修改為服務(wù)器可以搜索到的位置，否則圖片將無(wú)法顯示，解決辦法是在代碼中將位置改為相對(duì)位置。如果先創(chuàng)建一個(gè)網(wǎng)站，再對(duì)頁(yè)面進(jìn)行編輯，則直接使用相對(duì)地址進(jìn)行文件的引用，即使整個(gè)網(wǎng)站發(fā)生遷移，網(wǎng)站內(nèi)部的相對(duì)位置始終保持不變。二、網(wǎng)頁(yè)的制作1、語(yǔ)言設(shè)置在網(wǎng)頁(yè)編輯窗口空白處右擊?網(wǎng)頁(yè)屬性?語(yǔ)言標(biāo)簽，將語(yǔ)言代碼定義為第五章網(wǎng)頁(yè)制作35、插入水平線水平線是貫穿網(wǎng)頁(yè)寬度的細(xì)灰條，用于分隔文本或加著重符。插入水平線可以幫助我們將

5、各類相關(guān)信息組合到一起，但同一個(gè)頁(yè)面中水平線不宜過(guò)多。方法：1、先將插入點(diǎn)移到目標(biāo)位置2、插入?水平線添加水平線后，可以修改其屬性來(lái)更改寬度、高度、對(duì)齊方式和顏色。如果網(wǎng)頁(yè)使用了主題，則會(huì)使用圖形來(lái)代替水平線以匹配主題。6、設(shè)置背景設(shè)置背景的主要目的是為了使網(wǎng)頁(yè)更美觀。網(wǎng)頁(yè)的背景可以是某一種顏色，也可以是一幅圖片。如果該圖片比屏幕小，則瀏覽器自動(dòng)重復(fù)使用該圖片將屏幕鋪滿（平鋪）。使用較大圖片做背景無(wú)疑會(huì)延長(zhǎng)網(wǎng)頁(yè)的下載時(shí)間，因此建議使用小

6、圖片做背景。方法：1、格式?背景2、打開(kāi)“頁(yè)面屬性”對(duì)話框?背景標(biāo)簽3、“瀏覽”按鈕?在“選擇文件”對(duì)話框中選定背景圖案?確定4、關(guān)閉“選擇文件”對(duì)話框?確定?關(guān)閉“頁(yè)面屬性”對(duì)話框，背景圖案即可插入頁(yè)面三、網(wǎng)頁(yè)的保存方法1：文件?保存文件?彈出“另存為”對(duì)話框?輸入文件名?單擊保存按鈕。方法2：工具欄中的保存按鈕如果要保存的頁(yè)面含有圖片、動(dòng)畫、聲音等元素，F(xiàn)rontPage還會(huì)繼續(xù)詢問(wèn)是否保存這些嵌入的文件。此時(shí)最好將這些文件保存起來(lái)

7、，以保持它們?cè)诰W(wǎng)頁(yè)中的位置，否則，當(dāng)網(wǎng)站發(fā)生遷移時(shí)，可能因找不到這些圖片、動(dòng)畫等文件而無(wú)法顯示。每一個(gè)圖片、動(dòng)畫或其他元素都按規(guī)則取了一個(gè)文件名，存放到默認(rèn)文件夾中，如圖片保存到Images文件夾中。使網(wǎng)站整潔，便于管理和維護(hù)。作業(yè)21、為什么要先新建一個(gè)站點(diǎn)，再進(jìn)行網(wǎng)頁(yè)的制作？2、在設(shè)計(jì)網(wǎng)頁(yè)過(guò)程中，定義字體時(shí)要注意哪些問(wèn)題？3、為什么在網(wǎng)頁(yè)中通常都使用GIF或JPG格式的圖片文件？4、設(shè)置網(wǎng)頁(yè)的背景時(shí)，可不可以使用較大的圖片？有什么缺