1、第1章 初識網(wǎng)站和網(wǎng)頁網(wǎng)站和網(wǎng)頁網(wǎng)頁中的元素類型從功能角度分析網(wǎng)頁常用網(wǎng)站管理與制作軟件網(wǎng)站建設(shè)流程1.1 網(wǎng)站和網(wǎng)頁網(wǎng)站是網(wǎng)頁的集合，網(wǎng)頁是組成網(wǎng)站的元素。1.1.1 網(wǎng)站、網(wǎng)頁和主頁網(wǎng)頁大型網(wǎng)站一個小型網(wǎng)站可能只包含幾個網(wǎng)頁，而一個大型網(wǎng)站則可能包含成千上萬個網(wǎng)頁。小型網(wǎng)站新浪網(wǎng)站首頁主頁也叫首頁，每個網(wǎng)站都有自己的首頁，它是瀏覽者登錄網(wǎng)站時看見的第一個網(wǎng)頁，也是網(wǎng)站的入口。 1.1.2 網(wǎng)頁是什么 網(wǎng)頁中除了包含文字外，還包含圖像、動畫等內(nèi)容。圖像動畫文字我們看到的一個個網(wǎng)頁都是由多個文件組成的。網(wǎng)頁文件是“根”，圖像和動畫文件都是“枝葉”。圖像文件網(wǎng)頁文件選擇“文件”“另存為”菜單在瀏

2、覽器中選擇“文件”菜單中的“另存為”，可將網(wǎng)頁保存到磁盤中。 1.2 網(wǎng)頁中的元素類型 1.2.1 網(wǎng)頁中的文字與圖像文字與圖像是網(wǎng)頁中的基本元素，是瀏覽者獲得相關(guān)信息的主要來源。可在設(shè)計網(wǎng)頁時為文字設(shè)置位置、字體、字號、顏色、對齊方式，以及加粗和傾斜等格式。網(wǎng)頁中只能使用和顯示JPEG、GIF和PNG格式的圖像，其他諸如BMP和TIF等格式的圖像目前還都不能用于網(wǎng)頁中。 1.2.2 網(wǎng)頁中使用的動畫與視頻影像視頻流技術(shù)常見的格式有Real Video及Apple QuickTime。 GIF動畫SWF動畫目前，大家在網(wǎng)頁中看到的動畫主要包括兩類，即動態(tài)GIF格式動畫和SWF格式動畫。動態(tài)GI

3、F格式動畫的原理十分簡單，就是高速連續(xù)顯示多幅靜態(tài)圖像，就像播放動畫片一樣。通常用于制作簡單的小型動畫。如果需要在網(wǎng)頁上使用一些大型、復(fù)雜或帶有聲音的動畫，可借助Macromedia的Flash軟件來制作SWF動畫。1.2.3 網(wǎng)頁中使用的聲音適當(dāng)?shù)脑诰W(wǎng)頁上加點音樂效果，會使網(wǎng)頁更具吸引力。目前，網(wǎng)上比較流行的音頻格式主要有MIDI、WAV、MP3與Real Audio。 控制音樂的播放1.3 從功能角度分析網(wǎng)頁從功能的角度來看，可以將網(wǎng)頁中的元素分為站標、導(dǎo)航欄、廣告條、標題欄和按鈕。站標導(dǎo)航欄廣告條標題欄按鈕1.3.1 站標站標也叫LOGO，是網(wǎng)站的標志，其作用是使人看見它就能夠聯(lián)想到企業(yè)

4、。因此，網(wǎng)站LOGO通常采用企業(yè)的LOGO。LOGO通常采用帶有企業(yè)特色和思想的圖案，或是與企業(yè)相關(guān)的字符或符號及其變形，當(dāng)然也有很多是圖文組合。1.3.2 導(dǎo)航欄導(dǎo)航欄實際上是網(wǎng)站內(nèi)多個頁面的超鏈接組合。導(dǎo)航欄也是網(wǎng)站中所有重要內(nèi)容的概括，可以讓瀏覽者在最短時間內(nèi)了解網(wǎng)站的主要內(nèi)容。設(shè)計導(dǎo)航欄時，有幾點需要注意。如果網(wǎng)站內(nèi)容不多，并且導(dǎo)航欄不超過兩排，可以根據(jù)網(wǎng)站風(fēng)格嘗試靈活擺放，如放在網(wǎng)頁的左側(cè)或者放在頁面上方等。頁面左側(cè)頁面上方如果網(wǎng)站的欄目很多，可以將導(dǎo)航欄分為多排放置在主頁LOGO的下方或右側(cè)，為便于觀看，可為各排設(shè)置不同的底色。LOGO右側(cè)LOGO下方如果導(dǎo)航欄內(nèi)容較多的話，盡量使

5、用文字超鏈接而不用圖片。不過，如果導(dǎo)航欄內(nèi)容不多，或者網(wǎng)頁內(nèi)容比較活潑的話，多采用圖片或Flash制作導(dǎo)航欄。圖片導(dǎo)航欄Flash導(dǎo)航欄廣告條又稱Banner，其功能是宣傳網(wǎng)站或替其他企業(yè)做廣告，以賺取廣告費。1.3.3 廣告條在Banner的制作過程中有一些要點需要注意：Banner可以是靜態(tài)的也可以是動態(tài)的。Banner的體積不宜過大，盡量使用GIF格式的圖片與動畫或Flash動畫。Banner中的文字不要太多，只要達到一定的提醒效果就可以。Banner中圖片的顏色不要太多，尤其是GIF格式的圖片或動畫，要避免出現(xiàn)顏色的漸變和光暈效果。這里的標題欄不是指整個網(wǎng)頁的標題欄，而是網(wǎng)頁內(nèi)部各版塊

6、的標題欄，是各版塊內(nèi)容的概括。標題欄可以是文字加單元格背景，也可以是圖片，一般的大型網(wǎng)站都采用前者，一些內(nèi)容少的小網(wǎng)站采用后者。1.3.4 標題欄標題欄標題欄網(wǎng)頁中的按鈕被點擊之后，網(wǎng)頁會實現(xiàn)相應(yīng)的操作，比如頁面跳轉(zhuǎn)，或數(shù)據(jù)的傳輸?shù)取ＴO(shè)計按鈕時，要保證按鈕與頁面的協(xié)調(diào)，不能太搶眼，如果按鈕上有字則盡量使用單色或漸變色背景，保證字跡清晰。當(dāng)頁面上有多個按鈕的時候，應(yīng)分清主次，根據(jù)網(wǎng)頁的需要改變按鈕的顏色或者大小。1.3.5 按鈕按鈕按鈕1.4.1常用網(wǎng)站管理與網(wǎng)頁編輯軟件1.4 常用網(wǎng)站管理與制作軟件Dreamweaver：網(wǎng)頁制作軟件三劍客之一，該軟件是現(xiàn)在使用最多的網(wǎng)頁編輯工具，它支持DHT

7、ML動態(tài)網(wǎng)頁、Flash動畫、插件，能實現(xiàn)很多FrontPage無法實現(xiàn)的功能，如動態(tài)按鈕、下拉菜單等。另外，它還可以用來作為動態(tài)網(wǎng)站的開發(fā)環(huán)境。FrontPage：該軟件是目前最簡單、最容易上手，且功能強大的網(wǎng)頁制作利器，特別適合網(wǎng)頁初學(xué)者使用。不過，F(xiàn)rontpage也有不少缺點：首先是兼容性不好，利用FrontPage做出來的網(wǎng)頁往往不能用Netscape瀏覽器正常顯示；其次，生成的垃圾代碼多；此外，F(xiàn)rontPage對動態(tài)網(wǎng)頁支持不好，不支持Flash，顯得有點落伍了。1.4.2 網(wǎng)頁設(shè)計輔助軟件在進行網(wǎng)頁制作時，除了需要Dreamweaver、FrontPage等軟件外，還會用到Fi

8、reworks、Flash、Photoshop等軟件，這些軟件的主要功能與特點如下：Fireworks：主要用于制作網(wǎng)頁圖像、標志、GIF動畫、圖像按鈕與導(dǎo)航欄等。Flash：主要用于制作矢量動畫，如廣告、網(wǎng)站片頭動畫、動畫短片、MTV等。Photoshop：Adobe公司出品的一個優(yōu)秀而且強大的圖形圖像處理軟件，起初它的應(yīng)用領(lǐng)域主要是平面設(shè)計而不是網(wǎng)頁設(shè)計，但是它所具有的強大功能完全涵蓋了網(wǎng)頁設(shè)計所涉及到的各種需求（除了多媒體）。1.4.3 常用網(wǎng)站程序設(shè)計語言如果網(wǎng)站中包含動態(tài)網(wǎng)頁，除了需要學(xué)習(xí)一些常用的網(wǎng)頁設(shè)計軟件外，還應(yīng)掌握一些常用的網(wǎng)站程序設(shè)計語言。JavaScript和VBScri

9、pt腳本語言JavaCGIASPASP.netPHPJSP1.5 網(wǎng)站建設(shè)流程1.5.1 根據(jù)要求確定網(wǎng)站內(nèi)容建設(shè)網(wǎng)站要有目的性，首先要確定網(wǎng)站的性質(zhì)和受眾，并預(yù)期網(wǎng)站發(fā)布后的反響。確定了這些后就要開始組織網(wǎng)站的主要內(nèi)容。1.5.2 規(guī)劃網(wǎng)站欄目確定了網(wǎng)站內(nèi)容后，就要開始進行網(wǎng)站規(guī)劃。例如，將網(wǎng)站的內(nèi)容劃分成哪些欄目，從而使網(wǎng)站既便于瀏覽者的瀏覽，也有利于網(wǎng)站將來的維護和更新。1.5.3 確定網(wǎng)頁尺寸與版面布局目前顯示器最常用的分辨率是1024768像素和800600像素。在1024768的分辨率下顯示的頁面的尺寸應(yīng)該為1007600像素，而800600的分辨率下顯示的頁面尺寸為778435像

10、素。確定了網(wǎng)頁尺寸后，接下來的任務(wù)就是確定網(wǎng)頁布局類型了。網(wǎng)頁布局類型沒有確定的標準，可以根據(jù)需要制定。常見的布局有上下分割型、左右分割型和復(fù)合分割型（上下分割和左右分割結(jié)合）。上下分割型左右分割型1.5.4 確定網(wǎng)站配色與風(fēng)格不同的網(wǎng)站有著自己不同的風(fēng)格，也有著自己不同的顏色。基本上網(wǎng)站使用的顏色從出發(fā)點上看可以分為以下3種類型：行業(yè)風(fēng)格色：許多網(wǎng)站使用顏色秉承著所屬行業(yè)的風(fēng)格。企業(yè)標準色：在現(xiàn)代企業(yè)中，公司的CI形象顯得尤其重要，每一個公司的CI設(shè)計必然要有標準的顏色。比如Intel官方網(wǎng)站的主色調(diào)是一種接近于天藍的藍色，個人習(xí)慣色：這種配色方法的使用在很大程度上是憑設(shè)計者的個人愛好以及當(dāng)

11、時的心態(tài)決定的，在個人網(wǎng)站較為多見。行業(yè)風(fēng)格色著名的化妝品公司玫琳凱中國網(wǎng)站使用的顏色是粉色。這幾乎是所有化妝品行業(yè)中最常用到的顏色，這種顏色代表了高貴，典雅以及甜蜜等；企業(yè)標準色在現(xiàn)代企業(yè)中，公司的CI形象顯得尤其重要，每一個公司的CI設(shè)計必然要有標準的顏色。比如Intel官方網(wǎng)站的主色調(diào)是一種接近于天藍的藍色。個人習(xí)慣色這種配色方法在設(shè)計的時候自由度非常高，同時所選的題材與要表現(xiàn)的內(nèi)容也是由設(shè)計者自己決定，比如設(shè)計者喜歡紅色和黑色，那么在設(shè)計的時候就傾向于使用這兩種顏色。下面是一些網(wǎng)頁配色時的小技巧用一種色彩：這里是指先選定一種色彩，然后調(diào)整透明度或者飽和度。用兩種色彩：先選定一種色彩，然

12、后選擇它的對比色。用一個色系：簡單地說就是用一個感覺的色彩，例如淡藍、淡黃、淡綠，或者土黃、土灰、土藍。顏色不能太多：不要將所有顏色都用到，盡量控制在35種色彩以內(nèi)。背景和前文的對比：背景和前文的對比盡量要大（尤其不要使用花紋圖案作為頁面背景），以便突出主要文字內(nèi)容。1.5.5 收集網(wǎng)頁所用素材在制作網(wǎng)頁之前，應(yīng)首先收集好制作網(wǎng)頁時要使用的素材，這些素材包括文字資料、圖片、動畫、聲音、視頻等。對于一些原始的材料還可以使用PhotoShop、Fireworks、Flash等軟件進行處理，使其可以更好地應(yīng)用于網(wǎng)頁。1.5.6 利用軟件制作網(wǎng)頁制作網(wǎng)頁也就是整合網(wǎng)頁素材，即使用Dreamweaver

13、等軟件進行網(wǎng)頁設(shè)計。還可以根據(jù)需要為網(wǎng)頁增加一些特效，比如閃爍的字幕、跳出動畫、改變鼠標的形狀等，這些多是通過JavaScript來實現(xiàn)的。1.5.7 測試和發(fā)布網(wǎng)站在發(fā)布之前需要先對網(wǎng)站進行測試，網(wǎng)站測試一般包括服務(wù)器穩(wěn)定和安全測試、程序和數(shù)據(jù)庫測試、網(wǎng)頁兼容性測試等。要發(fā)布網(wǎng)站，用戶需要具備兩個條件：域名和虛擬主機。提供這類服務(wù)的公司被稱為域名和網(wǎng)站托管服務(wù)商，目前，這類公司也有很多，如中國萬網(wǎng)（）、通聯(lián)無限（）等。第2章 初識Dreamweaver 8熟悉Dreamweaver 8操作環(huán)境 網(wǎng)站規(guī)劃與管理 設(shè)置頁面屬性 上機實踐編輯“墨攻”頁面并保存 2.1 熟悉Dreamweaver操

14、作環(huán)境 安裝Dreamweaver 8后，單擊“開始”按鈕，選擇“所有程序”“Macromedia”“Macromedia Dreamweaver 8”菜單，就可以啟動Dreamweaver 8了。進入Dreamweaver 8后，首先映入眼簾的是起始頁。打開最近打開過的文件創(chuàng)建不同類型的新文件在系統(tǒng)內(nèi)置文件的基礎(chǔ)上創(chuàng)建新文件在起始頁的“創(chuàng)建新項目”列中選擇“HTML”后，將會進入Dreamweaver 8的工作界面。 菜單欄標題欄插入欄文檔標簽文檔工具欄收縮與展開下方面板組狀態(tài)欄屬性面板收縮與展開右方面板組面板組2.1.1 “插入”欄“插入”欄包含用于將各種類型的對象（如圖像、表格和層）插入

15、到文檔中的按鈕。單擊“插入”欄左側(cè)的“常用”按鈕可以打開一個下拉列表，從中選擇其他選項可以改變“插入”欄的內(nèi)容。單擊“常用”按鈕，在下拉列表中選擇“顯示為制表符”命令，“插入”欄的外觀將發(fā)生變化。某些按鈕的右側(cè)帶有一個小三角符號“ ”，單擊該三角符號將彈出該按鈕的一組同位按鈕。2.1.2 文檔標簽與文檔工具欄文檔標簽顯示了當(dāng)前打開的網(wǎng)頁文檔的名稱。只顯示代碼視圖顯示代碼視圖和設(shè)計視圖只顯示設(shè)計視圖刷新設(shè)計視圖在瀏覽器中預(yù)覽/調(diào)試文檔工具欄用于切換網(wǎng)頁視圖，管理文件，以及預(yù)覽網(wǎng)頁等。文檔標題2.1.3 文檔窗口中的狀態(tài)欄狀態(tài)欄位于文檔窗口底部，它提供了與當(dāng)前文檔相關(guān)的一些信息。標簽選擇器手形工具

16、縮放工具文檔大小與預(yù)計下載時間標簽選擇器顯示了光標所在位置的標簽的層次結(jié)構(gòu)。選取、手形和縮放工具是Dreamweaver 8新增的功能， 分別用于選取、移動和縮放對象。選取工具2.1.4 屬性面板與面板組屬性面板用于查看或編輯所選對象的屬性。屬性面板會隨著所選對象的不同而變化。選中圖像后的屬性面板選中文字后的屬性面板Dreamweaver 8為用戶提供了眾多面板，如屬性面板、文件面板、歷史記錄面板等。為便于管理，Dreamweaver 8將這些面板歸入到不同的面板組中。“文件”面板組包括三個面板“CSS”面板組包括兩個面板2.2 網(wǎng)站規(guī)劃、創(chuàng)建與管理2.2.1 確定網(wǎng)站結(jié)構(gòu)所謂網(wǎng)站結(jié)構(gòu)，就是網(wǎng)

17、站中各個分支之間以及分支與主頁之間的關(guān)系。 通常情況下，一個網(wǎng)站的結(jié)構(gòu)往往與該網(wǎng)站的導(dǎo)航菜單相對應(yīng)。確定好網(wǎng)站結(jié)構(gòu)后，接下來應(yīng)根據(jù)網(wǎng)站結(jié)構(gòu)創(chuàng)建本地站點，實際上就是確定本地站點以及文件的存放位置。2.2.2 確定站點目錄結(jié)構(gòu)2.2.3 定義站點站點信息新站點為便于管理和編輯站點，在創(chuàng)建網(wǎng)頁之前，首先要在Dreamweaver中定義站點。定義站點可以將本地磁盤中的站點同Dreamweaver建立一定的關(guān)聯(lián)。2.2.4 新建、打開和關(guān)閉網(wǎng)頁文件1.新建網(wǎng)頁文件 Dreamweaver中的文件也就是網(wǎng)頁，可以通過“文件”“新建”菜單來創(chuàng)建新網(wǎng)頁。2.打開網(wǎng)頁文件如果要打開某站點中現(xiàn)有的網(wǎng)頁文件，可以選

18、擇“文件”“打開”菜單，在“打開”對話框中進行選擇。3.關(guān)閉網(wǎng)頁文件要關(guān)閉網(wǎng)頁文件，只需單擊相應(yīng)文件右上角的“關(guān)閉”按鈕，或者按【Ctrl+W】組合鍵。 2.2.5 保存和預(yù)覽網(wǎng)頁文件新建或編輯網(wǎng)頁文件后，需要保存文件，才能使所做的設(shè)置生效。選擇“文件”“保存”菜單或按【Ctrl+S】組合鍵，即可保存文件。對網(wǎng)頁進行編輯或修改后，按【F12】鍵可以在瀏覽器中預(yù)覽其效果。2.2.6 “文件”面板的應(yīng)用在Dreamweaver中，利用“文件”面板可以非常方便地管理站點中的網(wǎng)頁文件和文件夾。顯示站點名稱連接到遠程主機或與遠程主機斷開刷新站點獲取文件上傳文件取出文件存回文件選擇視圖展開以同時顯示本地和

19、遠程站點站點內(nèi)容列表1新建文件和文件夾利用“文件”面板可以方便地新建文件（實際上就是網(wǎng)頁）和文件夾。 如要新建文件夾，可在彈出的菜單中選擇“新建文件夾”選項，其他操作同上。2重命名文件和文件夾在“文件”面板中可以方便地重命名文件和文件夾，在右鍵快捷菜單中選擇“編輯”“重命名”菜單即可。3文件與文件夾的命名規(guī)則為便于日后的維護和管理，網(wǎng)站中所有文件和文件夾的命名都是有一定規(guī)則的。最好不要使用中文命名文件。文件名中不要使用大寫英文字母。運算符符號不能用在文件名的開頭。比較長的文件名可使用下劃線“_”來隔開多個單詞或關(guān)鍵字。在大型網(wǎng)站中，分支頁面的文件應(yīng)存放在單獨的文件夾中存放網(wǎng)頁圖像的文件夾一般命

20、名為“images”或者“img”。在動態(tài)網(wǎng)站中，用來存放數(shù)據(jù)庫的文件夾一般被命名為“data”或者“database”。4在“文件”面板中打開和刪除文件要打開文件，可以直接在文件列表區(qū)雙擊文件名。如果是網(wǎng)頁文件，該文件會自動在網(wǎng)頁編輯區(qū)打開；如果是圖像文件，系統(tǒng)會自動啟動Fireworks并打開文件。要刪除文件或文件夾，可以右擊文件或文件夾，然后在彈出的菜單中選擇“編輯”“刪除”，也可在選中文件后，直接按【Delete】鍵刪除。2.3 設(shè)置頁面屬性2.3.1 外觀選項單擊屬性面板上的“頁面屬性”按鈕，或者選擇“修改”菜單下的“頁面屬性”命令，將打開“頁面屬性”對話框，默認顯示為“外觀”選項。

21、設(shè)置頁面字體設(shè)置頁面字號設(shè)置頁面文本顏色設(shè)置頁面背景顏色設(shè)置頁面背景圖像設(shè)置背景圖像重復(fù)方式設(shè)置頁面與瀏覽器左、右、上、下邊界的距離2.3.2 鏈接選項在“頁面屬性”對話框中，單擊左側(cè)“分類”列表中的“鏈接”選項，其參數(shù)設(shè)置將顯示在對話框右側(cè)。 設(shè)置鏈接文本的字體設(shè)置鏈接文本的字號設(shè)置鏈接文本在不同狀態(tài)下的顏色設(shè)置鏈接對象的下劃線情況2.3.3 標題選項單擊左側(cè)“分類”列表中的“標題”選項，其參數(shù)設(shè)置將顯示在對話框右側(cè)。設(shè)置頁面標題的字體樣式設(shè)置各級標題的字號以及顏色2.3.4 標題/編碼選項單擊左側(cè)“分類”列表中的“標題/編碼”選項，其參數(shù)設(shè)置將顯示在對話框右側(cè)。設(shè)置網(wǎng)頁標題指定文檔類型定義

22、指定文檔中字符所用的編碼類型2.3.5 跟蹤圖像選項單擊左側(cè)“分類”列表中的“跟蹤圖像”選項，其參數(shù)設(shè)置將顯示在對話框右側(cè)。設(shè)置跟蹤圖像設(shè)置跟蹤圖像的透明度2.4 上機實踐編輯“墨攻”頁面并保存本節(jié)通過編輯 “墨攻”頁面，來使讀者進一步領(lǐng)略Dreamweaver的獨特魅力（具體操作見視頻）。第3章編輯基本網(wǎng)頁元素文本輸入與編輯上機實踐設(shè)置“舞林報道”網(wǎng)頁文本使用圖像上機實踐在“拍拍”網(wǎng)頁中插入圖像3.1 文本輸入與編輯在Dreamweaver中可以通過設(shè)置文本的字體、字號、顏色、字符間距與行距等屬性來區(qū)別不同的文本。網(wǎng)頁中文本的使用原則如下：單個頁面中不要使用超過三種以上的字體。不要用太大的字

23、號。不要使用不停閃爍的文字。標題文字的字號應(yīng)當(dāng)比正文字號稍大。3.1.1 輸入文本首先將光標定位在表格的某個單元格中，然后輸入文字就可以了。如果希望文本換行，可以按下【ShiftEnter】組合鍵；如果希望文本換段，可以直接按【Enter】鍵。輸入文本后的代碼視圖 輸入文本后的設(shè)計視圖 3.1.2 設(shè)置文本的段落格式和字符格式在Dreamweaver中，可以利用屬性面板為文本設(shè)置默認格式化樣式或者直接設(shè)置所選文本的字體、大小、顏色等。設(shè)置文本格式設(shè)置文本字體設(shè)置文本樣式設(shè)置文本大小設(shè)置文本顏色設(shè)置文本為粗體或斜體設(shè)置文本對齊和列表格式為所選文本設(shè)置鏈接1設(shè)置字體列表Dreamweaver中自帶

24、的字體有限，一般滿足不了大多數(shù)網(wǎng)頁設(shè)計者的需求。我們可以通過設(shè)置字體列表來解決這一問題。“編輯字體列表”對話框2設(shè)置文本字體及大小學(xué)會設(shè)置字體列表后，就可以隨心所欲地設(shè)置文本的字體了。選中文本設(shè)置字體和傾斜設(shè)置字號3設(shè)置段落縮進通過設(shè)置段落縮進格式，可以更好的布局文檔。在“格式”下拉列表中選擇“段落”段落突出段落縮進4設(shè)置列表項列表分為項目列表和編號列表，項目列表常應(yīng)用在“列舉”類型的文本中，編號列表常應(yīng)用在“條款”類型的文本中，這種方式使得文本更直觀、明了。選中文本應(yīng)用“項目列表”格式3.1.3 輸入特殊符號和不換行空格要插入特殊字符，可選擇“插入”“HTML”“特殊字符”命令，然后在彈出的

25、菜單中選擇相應(yīng)的特殊字符。3.1.4 輸入日期與水平線在“插入”欄的“常用”類別中單擊“日期”按鈕 ，將打開“插入日期”對話框。要插入水平線，可以選擇“插入”“HTML”“水平線”菜單。在插入水平線后，還可通過屬性面板設(shè)置其寬、高、對齊和陰影等。3.2 上機實踐設(shè)置“舞林報道”網(wǎng)頁文本本節(jié)我們以“舞林報道”網(wǎng)頁為例，來練習(xí)網(wǎng)頁文本的設(shè)置（具體操作見視頻 ）。3.3 使用圖像目前在網(wǎng)頁中只能使用JPEG、GIF和PNG格式的圖像。JPEG格式適于表現(xiàn)色彩豐富，具有連續(xù)色調(diào)的圖像。該格式的優(yōu)點是圖像質(zhì)量高，缺點是文件尺寸稍大（相對于GIF格式），且不能包含透明區(qū)。GIF格式最多只能包含256種顏色

26、，適合表現(xiàn)色調(diào)不連續(xù)或具有大面積單一顏色的圖像。該格式的優(yōu)點是圖像尺寸小，可包含透明區(qū)，且可制成包含多幅畫面的簡單動畫，缺點是圖像質(zhì)量稍差。PNG格式集JPEG和GIF格式的優(yōu)點于一身，既能處理照片式的精美圖像，又能包含透明區(qū)域，且可以包含圖層等信息，是Fireworks的默認圖像格式。3.3.1 插入與編輯圖像在確定圖像插入點后，單擊“插入”欄“常用”類別中的“圖像”按鈕，打開“選擇圖像源文件”對話框。從中選擇要插入的圖像，然后單擊“確定”按鈕即可。選中插入后的圖像，可以利用屬性面板對該圖像的各項屬性進行設(shè)置。設(shè)置圖像名稱設(shè)置寬和高設(shè)置圖像文件路徑用于創(chuàng)建從圖像到其他文件的鏈接指定圖像上、下

27、、左、右空白的像素值設(shè)置圖像邊框的粗細確定圖像在單元格或頁面中的對齊方式圖像處理按鈕裁切圖像如果網(wǎng)頁中的某個圖像尚未制作好，可暫時用圖像占位符來代替。待到制作好圖像后，再用它置換圖像占位符。選擇“插入”“圖像對象”“圖像占位符”菜單，可打開“圖像占位符”對話框。3.3.2 使用圖像占位符“圖像占位符”對話框插入的“圖像占位符”替換圖像3.3.3 制作鼠標經(jīng)過圖像當(dāng)鼠標移動到某一圖像上時，圖像變成了另一幅圖像，當(dāng)鼠標移開時，又恢復(fù)成原來的圖像，這就是我們通常所說的鼠標經(jīng)過圖像。原始圖像鼠標經(jīng)過圖像“插入鼠標經(jīng)過圖像”對話框3.3.4 制作導(dǎo)航條利用與制作鼠標經(jīng)過圖像類似的方法，可制作具有可變效果

28、的導(dǎo)航條。下面來制作下圖所示的可變導(dǎo)航條（具體操作見視頻3-2）。3.3.5 插入Fireworks HTMLFireworks是網(wǎng)頁制作三劍客之一，它主要用來處理網(wǎng)頁圖像，可以將優(yōu)化后的圖像和HTML文件導(dǎo)出并保存至站點的圖像文件夾中，然后就可以在Dreamweaver中插入該文件。“插入Fireworks HTML”對話框3.4 上機實踐在“拍拍”網(wǎng)頁中插入圖像本節(jié)以制作“拍拍”網(wǎng)頁為例，來練習(xí)網(wǎng)頁文本的屬性設(shè)置和圖像的插入。第4章 使用超鏈接認識超鏈接為文字和圖片設(shè)置常規(guī)超鏈接不同格式的超鏈接上機實踐為拍拍網(wǎng)頁中的文字和圖像添加鏈接4.1 認識超級鏈接超級鏈接包括內(nèi)部超級鏈接和外部超級鏈

29、接，內(nèi)部超級鏈接是指目標文件位于站點內(nèi)部的鏈接；外部超級鏈接可實現(xiàn)網(wǎng)站與網(wǎng)站之間的跳轉(zhuǎn)，也就是從本網(wǎng)站跳轉(zhuǎn)到其他網(wǎng)站。內(nèi)部超級鏈接會涉及到路徑的使用，且只能使用相對路徑。4.2 為文字和圖片設(shè)置常規(guī)超鏈接 4.2.1 為文字設(shè)置超鏈接要為文字設(shè)置超鏈接，應(yīng)首先選中文字，然后單擊“插入”欄“常用”類別中的“超級鏈接”按鈕 ，打開“超級鏈接”對話框。可以是內(nèi)部鏈接或外部鏈接設(shè)置在何處打開網(wǎng)頁“標題”編輯框用于設(shè)置，當(dāng)鼠標懸停在超鏈接上時出現(xiàn)的說明文字4.2.2 取消超鏈接要取消超鏈接，可在選中設(shè)置為超鏈接的文字后，刪除屬性面板中“鏈接”編輯框中的內(nèi)容。為圖片設(shè)置超鏈接的方法同文字一樣。4.3 不同

30、格式的超鏈接4.3.1 電子郵件鏈接電子郵件鏈接是指當(dāng)瀏覽者單擊某個超鏈接時，系統(tǒng)會自動啟動默認的電子郵件收發(fā)軟件。要設(shè)置電子郵件鏈接，應(yīng)首先選中要設(shè)置為超鏈接的文本，然后單擊“插入”欄“常用”類別中的“電子郵件鏈接”按鈕，接下來在彈出的對話框中輸入鏈接到的電子信箱地址即可。4.3.2 命名錨記鏈接當(dāng)網(wǎng)頁的內(nèi)容非常多，瀏覽器的滾動條變得很長時，可以通過命名錨記鏈接來為網(wǎng)頁添加內(nèi)部鏈接。創(chuàng)建命名錨記鏈接，首先要定義命名錨記，然后創(chuàng)建指向它的鏈接。插入的命名錨記為圖片設(shè)置“命名錨記”鏈接4.3.3 熱點鏈接熱點鏈接是針對圖像而言，利用它可以為一幅圖像的不同區(qū)域添加不同的超鏈接。要為圖像添加熱點鏈接

31、，可以使用圖像屬性面板中的地圖組合按鈕。地圖名稱多邊形熱點工具橢圓形熱點工具矩形熱點工具可以把跳轉(zhuǎn)菜單看作是一種超鏈接的集合，它以彈出式下拉菜單的形式在網(wǎng)頁中展現(xiàn)出來。彈出菜單內(nèi)的鏈接沒有類型上的限制，可以是本地鏈接，也可以是到其他網(wǎng)站的鏈接。4.3.4 使用跳轉(zhuǎn)菜單設(shè)計好的跳轉(zhuǎn)菜單及其屬性面板網(wǎng)頁預(yù)覽效果4.3.5 圖片鏈接和下載鏈接我們在上網(wǎng)時經(jīng)常會碰到圖片鏈接和下載鏈接，例如，單擊網(wǎng)頁中的某個小圖片時會在新窗口中打開一幅大圖片，或者單擊某個鏈接會打開一個下載提示對話框等。這就是我們所說的圖片鏈接和下載鏈接。圖片鏈接下載鏈接4.3.6 定時自動跳轉(zhuǎn)頁面自動跳轉(zhuǎn)也叫自動重定向或自動轉(zhuǎn)向，就是

32、指當(dāng)瀏覽者訪問某個站點時，所訪問的頁面自動轉(zhuǎn)向到其他網(wǎng)頁的一種技術(shù)。應(yīng)用“定時自動跳轉(zhuǎn)”“刷新”文本框4.4 上機實踐為拍拍網(wǎng)頁中的文字和圖像添加鏈接最常用的鏈接是常規(guī)的文本和圖片鏈接，接下來我們就通過下面的例子來進一步掌握這兩種最基本的鏈接形式(具體操作見視頻4-1)。第5章 使用行為認識行為熟悉“行為”面板為對象添加行為編輯行為的方法將行為附加到文本常見行為的應(yīng)用上機實踐在網(wǎng)頁中應(yīng)用“顯示隱藏層”行為5.1 認識行為每個行為都由兩部分組成，即事件和動作。所謂事件是指“發(fā)生什么”，而動作是指“去做什么”。簡單來說，就是當(dāng)發(fā)生某個事件的時候去執(zhí)行某項動作，例如當(dāng)打開某個網(wǎng)站的時候，彈出歡迎信息

33、。5.1.1 事件每個瀏覽器都會提供一組事件，例如，onMouseOut、onMouseOver、onClick用于與某個鏈接關(guān)聯(lián)，而onLoad則用于與圖片及文檔的body關(guān)聯(lián)。5.1.2 動作動作是事件的結(jié)果，同事件一樣，每個瀏覽器都提供一組動作，例如調(diào)用JavaScript、改變屬性、檢查瀏覽器、拖動層等。5.2 熟悉“行為”面板要為文檔添加行為，需要使用“行為”面板，選擇“窗口”“行為”菜單，或按【Shift+F4】組合鍵，即可打開“行為”面板。添加行為刪除行為事件動作顯示已設(shè)置的事件列表顯示所有事件列表上下移動行為5.3 為對象添加行為可以將行為附加到整個文檔（即附加到標簽），還可以

34、附加到超鏈接、圖像、表單元素等，但是不能將其附加到純文本。預(yù)覽效果5.4 編輯行為的方法5.4.1 修改行為修改行為的方法非常簡單，首先選中要修改行為的對象，然后打開“行為”面板并選擇要修改的行為。單擊事件名稱，將在事件名稱右側(cè)出現(xiàn)一個 按鈕，單擊該按鈕將打開事件列表。雙擊動作名稱可編輯行為5.4.2 刪除行為如果要刪除某行為，只需選中該行為，然后單擊面板上方的“刪除行為”按鈕 或直接按【Delete】鍵即可。也可用鼠標右鍵單擊行為，在彈出的快捷菜單中選擇“刪除行為”命令。刪除行為5.4.3 獲取更多行為單擊“行為”面板上的“添加行為”按鈕 ，在彈出的菜單中選擇“獲取更多的行為”命令，將打開M

35、acromedia公司的官方網(wǎng)站，該網(wǎng)站提供了眾多網(wǎng)頁行為的下載。不過，下載行為后還需要使用“Macromedia擴展管理器”進行安裝，然后才能使用它們。添加行為Macromedia擴展管理器5.5 將行為附加到文本默認情況下，不能將行為附加到純文本，但是可以將行為附加到鏈接。因此，若要將行為附加到文本，可以為文本添加一個空鏈接，然后將行為附加到該鏈接上。5.6 常見行為的應(yīng)用5.6.1 彈出信息框我們在打開某些網(wǎng)頁或單擊網(wǎng)頁中的某些元素時經(jīng)常可以看到彈出信息框，這個彈出信息框就是利用“彈出信息”行為實現(xiàn)的。預(yù)覽效果5.6.2 打開伴隨窗口使用“打開瀏覽器窗口”行為可以實現(xiàn)在新窗口中打開網(wǎng)頁的

36、功能，許多站點都使用這種方式來彈出重要的通知、廣告信息等頁面。加載網(wǎng)頁時打開搜狐網(wǎng)首頁5.6.3 關(guān)閉當(dāng)前窗口在頁面中加入一個按鈕，瀏覽者能夠通過單擊這個按鈕來關(guān)閉正在瀏覽的頁面窗口。單擊按鈕時彈出提示窗口添加事件添加事件5.6.4 滾動字幕在瀏覽某些網(wǎng)頁時，常常會看到一些“字幕”效果，也就是一行或多行文字在頁面上按照一定的速度上下或左右移動，通過插入.標簽 可以實現(xiàn)上述效果。添加鼠標觸發(fā)事件創(chuàng)建拖動層行為首先要創(chuàng)建層，層主要有如下功能：層可以游離在文檔之上，因此可以利用層來精確定位文本、圖像等其他網(wǎng)頁元素。利用層的顯示和隱藏功能來控制網(wǎng)頁和網(wǎng)頁元素的可見與不可見性可以使網(wǎng)頁達到快速下載的效果

37、。層與表格之間可以相互轉(zhuǎn)換。5.6.5 拖動層1創(chuàng)建層在頁面中拖動鼠標創(chuàng)建層2拖動層使用拖動層行為可以創(chuàng)建拼板游戲、滑塊控件等界面元素。可以指定瀏覽者能夠向哪個方向拖動層，設(shè)置目標的位置，在層和目標之間多遠時算是捕捉到目標，以及當(dāng)層接觸到目標時應(yīng)該執(zhí)行的操作等。在層中插入對象“拖動層”對話框當(dāng)用戶想要查看商品的詳細說明時，在該商品圖片上單擊即可顯示層來查看該信息。如果不想看時可單擊該說明隱藏層。下面我們通過制作圖示網(wǎng)頁，來學(xué)習(xí)顯示隱藏層的應(yīng)用（ 具體操作見視頻5-1） 。5.7 上機實踐在網(wǎng)頁中應(yīng)用“顯示隱藏層”層第6章 讓網(wǎng)頁動起來應(yīng)用Flash動畫音樂的應(yīng)用使用其他媒體元素上機實踐為“金剛

38、”網(wǎng)頁添加動態(tài)元素6.1 應(yīng)用Flash動畫Flash動畫是目前最為流行的矢量動畫，很多網(wǎng)頁中都包含F(xiàn)lash動畫。Flash文件有3種類型：Flash源文件（.fla），它是所有Flash動畫的源文件，此類型的文件只能在Flash 8中創(chuàng)建、打開并編輯。Flash動畫文件（.swf），它是Flash（.fla）文件的壓縮版本，已進行了優(yōu)化處理以便在網(wǎng)頁中使用。Flash模板文件（.swt），可以直接在Dreamweaver中編輯這類文件，它包括Flash按鈕和Flash文本兩種對象。6.1.1 插入Flash影片確定插入點后，單擊“插入”欄“常用”類別中的“媒體：Flash”按鈕，打開“選擇

39、文件”對話框。從中選擇文件，然后單擊“確定”按鈕即可。預(yù)覽效果6.1.2 Flash背景透明假如我們?yōu)榫W(wǎng)頁、某個表格或某個單元格指定了一張很漂亮的背景圖像，而當(dāng)我們在其中又插入一個Flash動畫的時候，F(xiàn)lash動畫的背景顏色會遮蓋掉背景圖像，這就需要將Flash動畫的背景顏色改成透明。為Flash動畫添加參數(shù)預(yù)覽效果6.1.3 插入Flash按鈕Flash按鈕包括兩類，一類是自己制作的Flash按鈕，另外一類是Dreamweaver中集成的Flash按鈕。前者的插入方法與Flash影片類似，這里主要講解后者的插入。6.1.4 插入Flash文本Flash文本是Dreamweaver中集成的文

40、本，插入Flash文本與插入Flash按鈕類似。6.2 音樂的應(yīng)用6.2.1 為網(wǎng)頁增加背景音樂通過在網(wǎng)頁的與標簽之間加入標簽，并在標簽里添加一些相應(yīng)的屬性即可為網(wǎng)頁添加背景音樂。如果想控制聲音的播放進度、快進和快退、調(diào)整音量等，就必須在網(wǎng)頁中嵌入音樂文件。6.2.2 在頁面中嵌入音樂文件1常用音頻文件格式MID格式：占用空間小，一般為十幾KB、幾十KB不等，適于網(wǎng)上傳播，其缺點是音色單調(diào)。WAV格式：具有較好的聲音品質(zhì)，適應(yīng)性強，在所有安裝有聲卡的電腦中都可以播放。其缺點是占用空間大，動輒幾MB，甚至幾十MB。AIF格式：與WAV格式類似，也具有較好的聲音品質(zhì)，但是，由于AIF文件體積龐大，

41、從而限制了它在網(wǎng)頁上可以使用的長度。MP3格式：是一種壓縮格式，它可令聲音文件明顯縮小。其聲音品質(zhì)非常好。WMA：是微軟公司推出的與MP3格式齊名的一種新的音頻格式。目前，MP3、WMA已經(jīng)成為網(wǎng)絡(luò)音頻的主要格式之一。RA或RAM（Real Audio）格式：具有非常高的壓縮程度，文件大小要小于MP3格式的文件。2在網(wǎng)頁中嵌入音樂下面以插入WMA格式音頻文件為例，具體講述在網(wǎng)頁中插入音頻文件的方法。6.3 使用其他媒體元素6.3.1 插入Shockwave 影片 Shockwave 影片是一種很好的壓縮格式，它能被目前的主流瀏覽器（如IE和Netscape）所支持，可以被快速下載。6.3.2

42、插入Applet利用Applet，可以制作一些非常漂亮的效果，如下雨、漣漪等。Applet插件是非常小的Java應(yīng)用程序，它是動態(tài)、安全、跨平臺的網(wǎng)絡(luò)應(yīng)用程序。6.4 上機實踐為“金剛”網(wǎng)頁添加動態(tài)元素本節(jié)我們來為“金剛”網(wǎng)頁添加視頻文件和Flash影片（具體操作見視頻6-1） 。 第7章 網(wǎng)頁布局使用表格布局網(wǎng)頁上機實踐用表格布局主頁使用框架布局網(wǎng)頁上機實踐用框架布局頁面7.1 使用表格布局網(wǎng)頁表格是由一個或多個單元格構(gòu)成的集合，表格中橫向的多個單元格稱為行，垂直的多個單元格稱為列。行列7.1.1 創(chuàng)建表格確定插入點后，在“插入”欄的“常用”類別中單擊“表格”圖標 ，打開“表格”對話框，可以

43、在“表格”對話框中設(shè)置表格的行數(shù)、列數(shù)、寬度、邊框、邊數(shù)以及間距。7.1.2 改變表格和單元格的寬度與高度使用屬性面板可以非常方便地改變表格和單元格的寬度與高度，也可取消寬度與高度的設(shè)置。通過拖動表格的邊框也可輕易改變表格的寬度與高度。7.1.3 拆分和合并單元格1拆分單元格所謂拆分單元格，就是將一個單元格拆分為幾行或幾列。 2合并單元格所謂合并單元格，就是將相鄰的幾個單元格合并成一個單元格。7.1.4 插入、刪除行和列如果希望在某個單元格上方插入行，或者在其左側(cè)插入列，可首先右擊該單元格，然后從彈出的快捷菜單中選擇“插入行”或“插入列” 。如果希望刪除行或列，可在彈出的快捷菜單中選擇“刪除行

44、”或“刪除列”。7.1.5 為表格和單元格設(shè)置背景顏色或背景圖像可為整個表格設(shè)置背景顏色，也可為單個或多個單元格設(shè)置背景顏色，其設(shè)置方法完全相同。 還可為表格或單元格設(shè)置背景圖像。 7.1.6 為表格和單元格設(shè)置邊框顏色通過設(shè)置表格邊框粗細、單元格間距、背景顏色，以及單元格背景顏色可以制作不同邊框的表格。細線表格粗線表格雙線表格表格的高級操作主要包括對表格的整行內(nèi)容進行移動、排序表格內(nèi)容和導(dǎo)入/導(dǎo)出表格數(shù)據(jù)等。7.1.7 表格的高級操作1.移動表格整行內(nèi)容選中行并剪切將光標置于要移動位置的下一行任意單元格中粘貼表格作為一種常見的數(shù)據(jù)處理形式，免不了要對其中的數(shù)據(jù)進行排序。2排序表格內(nèi)容選中表格

45、選擇“命令”“排序表格”菜單，打開“排序表格”對話框。排序后的表格在Dreamweaver中，可以將表格的內(nèi)容導(dǎo)入或?qū)С?在頁面中添加表格時，如果預(yù)先有表格數(shù)據(jù)存儲在記事本或Word等文檔中，可以直接將數(shù)據(jù)導(dǎo)入。3導(dǎo)入或?qū)С霰砀駜?nèi)容導(dǎo)入的表格數(shù)據(jù)源數(shù)據(jù)選擇“文件”“導(dǎo)入”“表格式數(shù)據(jù)”菜單，打開“導(dǎo)入表格式數(shù)據(jù)”對話框7.1.8 制作嵌套表格所謂嵌套表格，就是在一個大表格的某個單元格里插入一個新表格的情況。 下面通過制作一個簡單的頁面局部布局，詳細分析如何合理使用嵌套表格（具體操作見視頻7-1） 。 7.1.9 制作精美的圓角表格在做網(wǎng)頁時為了美化頁面，常常要把表格制作成圓角表格，這樣可以使整

46、個頁面看起來更加柔和、美觀。7.2 上機實踐用表格布局主頁接下來我們以下面的實例來講解利用表格布局網(wǎng)頁的方法（具體操作見視頻）。7.3 使用框架布局網(wǎng)頁框架可以將一個瀏覽器窗口劃分為多個區(qū)域，且每個區(qū)域都可以顯示不同的HTML文檔。使用框架的最常見情況就是，一個框架顯示包含導(dǎo)航控件的文檔，而另一個框架顯示含有內(nèi)容的文檔。一般大型的論壇會用到框架頁。7.3.1 關(guān)于框架和框架集框架是瀏覽器窗口中的一個區(qū)域，它可以顯示與瀏覽器窗口的其余部分中所顯示內(nèi)容無關(guān)的HTML文檔。框架集是HTML文件，它定義一組框架的布局和屬性。包括框架的數(shù)目、大小和位置，以及在每個框架中初始顯示的頁面URL。7.3.2

47、創(chuàng)建框架集Dreamweaver中有預(yù)定義的框架集，可以直接創(chuàng)建，也可以在普通頁面中加載。1直接創(chuàng)建預(yù)定義框架集“新建文檔”對話框選擇框架集類型創(chuàng)建的框架集2加載預(yù)定義框架集在頁面中加載框架集就像插入表格一樣。如果預(yù)定義框架集不能滿足需要，還可以在它的基礎(chǔ)上進行分割.選擇預(yù)定義框架集加載的框架集7.3.3 框架和框架集的基本操作對框架及框架集的基本操作包括選擇、刪除等操作。1認識“框架”面板利用“框架”面板可以對框架和框架集進行操作，選擇“窗口”“框架”菜單，可以打開“框架”面板。2選擇框架和框架集在文檔窗口中選擇框架的方法為，按住【Alt】鍵，然后在要選擇的框架內(nèi)單擊即可，被選中的框架邊線為

48、虛線。被選中的框架如要選擇框架集，則單擊該框架集上的任意框架即可，選中的框架集所有邊框都呈虛線顯示。利用“框架”面板選擇框架時，直接在面板中單擊即可。選擇框架集時，在面板中單擊框架集的邊框即可。7.3.4 框架及框架集的屬性設(shè)置利用“屬性”面板可以設(shè)置框架和框架集的屬性，包括框架名稱、框架源文件、框架邊框等。1設(shè)置框架屬性命名選取的框架 框架源文件的保存地址選擇是否顯示框架的邊框 設(shè)置框架滾動條的屬性設(shè)置是否能改變框架大小設(shè)置框架邊框的顏色設(shè)置框架內(nèi)容距上下左右邊框的距離2設(shè)置框架集屬性該面板中各參數(shù)的含義同選中框架時的屬性面板基本相同，不同的是在“行”或“列”文本框中可設(shè)置框架的行或列的寬度

49、，在“單位”下拉列表框中可選擇寬度的單位。7.3.5 保存框架及框架集框架及框架集的保存與一般網(wǎng)頁文檔的保存不同。1保存框架將鼠標光標定位到要保存的框架中，選擇“文件”“保存框架”菜單，然后在彈出的對話框中指定保存路徑和文件名后，單擊“保存”按鈕即可。2保存框架集保存框架集的方法與保存框架相似，選中所需保存的框架集，選擇“文件”“保存框架頁”菜單，然后執(zhí)行與保存框架相同的操作即可。3保存框架集中的所有文檔選擇“文件”“保存全部”菜單，即可保存框架集中的所有文檔。此時會依次彈出多個“另存為”對話框，逐個保存框架集中的所有框架。7.4 上機實踐用框架布局頁面本節(jié)以制作 “娛樂空間”為例來練習(xí)一下用

50、框架布局頁面的方法。第8章 HTML與CSS入門HTML與CSS入門編輯HTML代碼創(chuàng)建和使用CSS樣式表上機實踐為網(wǎng)頁中的文字設(shè)置樣式8.1 HTML與CSS入門HTML是超文本標記語言（Hypertext Markup Language）的縮寫，它能獨立于各種操作系統(tǒng)平臺，可以在瀏覽器中解釋執(zhí)行。CSS層疊樣式表主要有兩大優(yōu)點，一個是可以對網(wǎng)頁元素施加更多的控制，二是可以批量更新網(wǎng)頁。8.1.1 為什么要學(xué)習(xí)HTMLHTML語言是網(wǎng)頁制作的基礎(chǔ)，我們使用Dreamweaver設(shè)計網(wǎng)頁的過程，也就是制作HTML文件的過程。有利于提高網(wǎng)頁制作效率和優(yōu)化網(wǎng)頁代碼。有利于網(wǎng)頁排錯 。有利于快速提高

51、自己的網(wǎng)頁制作水平適度掌握一些HTML語言的知識是非常有益的，其原因如下：8.1.2 HTML的基本結(jié)構(gòu)HTML語言的核心是標簽。我們在瀏覽網(wǎng)頁時看到的文字、圖像、動畫等在HTML文檔中都是用標簽來描述的。一個完整的HTML文檔由標簽開始并由標簽結(jié)束，所有的HTML代碼都應(yīng)寫在標簽與標簽之間。層疊樣式表HTML頭HTML體完整的文檔8.1.3 HTML標簽的類型與特點學(xué)習(xí)HTML語言的過程也就是學(xué)習(xí)各種標簽格式的過程。（1）單標簽?zāi)承撕灧Q為“單標簽”，因為它只需單獨使用就能完整地表達意思，這類標簽的語法如下：最常用的單標簽是，它表示換行。（2）雙標簽“雙標簽”由“始標簽”和“尾標簽”兩部分構(gòu)

52、成，必須成對使用，始標簽前加一個斜杠（/）即成為尾標簽。這類標簽的語法是： 內(nèi)容 其中，“內(nèi)容”部分就是要被這對標簽施加作用的部分。例如，你想突出顯示某段文字，就可以將此段文字放在一 標簽中：第一：（3）標簽屬性許多單標簽和雙標簽的始標簽內(nèi)可以包含一些屬性，其語法是：各屬性之間無先后次序，屬性也可省略（即取默認值）。例如，單標簽表示在文檔當(dāng)前位置畫一條水平線（horizontal line），一般是從窗口中當(dāng)前行的最左端一直畫到最右端。其屬性有：8.1.4 常用HTML標簽及其意義列表學(xué)習(xí)HTML語言，最關(guān)鍵的是掌握常用HTML標簽的用法及其意義。頭部標簽主體標簽8.1.5 CSS樣式的定義C

53、SS樣式定義由兩部分組成：選擇器和聲明，其中，選擇器是樣式的名稱（如TR或P），而聲明則用于定義樣式元素。聲明由兩部分組成：屬性和值。HTML標簽樣式自定義樣式（類樣式）CSS選擇器樣式選擇器聲明聲明聲明8.1.6 CSS樣式的存儲與創(chuàng)建CSS樣式以兩種方式存在于網(wǎng)頁中：外部CSS樣式表，專門用于存儲CSS樣式定義的.css 文件。利用“CSS樣式”面板或者在HTML代碼視圖中手工編寫head部分中的鏈接，該文件可被鏈接到站點中的一個或多個網(wǎng)頁上。鏈接外部樣式表文件內(nèi)部（或嵌入式）CSS樣式表是一系列包含在HTML文檔head部分的style標簽內(nèi)的CSS樣式。內(nèi)嵌CSS樣式表8.2.1 使用

54、編碼工具欄迅速插入代碼最近的代碼片斷8.2 編輯HTML代碼編碼工具欄是Dreamweaver 8的新增功能，它位于代碼視圖中文檔工具欄的左側(cè)，使用它可以快速而方便地插入代碼。打開文檔折疊整個標簽折疊所選擴展全部選擇父標簽平衡大括弧顯示行號高亮顯示無效代碼應(yīng)用注釋縮進代碼刪除注釋環(huán)繞標簽凸出代碼8.2.2 使用快速標簽編輯器快速標簽編輯器使我們無需退出“設(shè)計”視圖就能夠快速檢查并編輯HTML標簽和屬性。首先選中要編輯的標簽快速標簽編輯器以“編輯”模式打開沒有選擇特定元素，快速標簽編輯器以“插入”模式打開8.2.3 使用代碼提示功能下面以制作一個單邊顯示邊框的表格為例，介紹使用Dreamweav

55、er代碼提示功能的方法（具體操作見視頻83）。8.2.4 使用“代碼片斷”面板通過使用 “代碼片斷”面板，可以方便地在文檔中插入一些可重復(fù)使用的HTML代碼。目錄樹預(yù)覽窗口新建代碼片斷編輯代碼片斷新建代碼片斷文件夾8.3 創(chuàng)建和使用CSS樣式表8.3.1 熟悉“CSS樣式”面板在Dreamweaver 8中，可以借助“CSS樣式”面板來新建、刪除、編輯和應(yīng)用樣式，以及附加外部樣式表等。單擊可切換到所有“文檔”模式顯示類別視圖顯示列表視圖只顯示設(shè)置屬性刪除選定樣式編輯選定樣式新建樣式將外部樣式表文件鏈接到當(dāng)前文件或?qū)⑵渲械腃SS樣式導(dǎo)入到當(dāng)前文檔8.3.2 樣式類型與使用方法 1類樣式類樣式又稱

56、自定義樣式，它可應(yīng)用于文檔中任何文本。與當(dāng)前文檔關(guān)聯(lián)的所有類樣式都顯示在“CSS 樣式”面板中（樣式名稱前有一個句點“.”），以及文本屬性面板的“樣式”列表中。2標簽樣式用來重定義HTML標簽的格式。例如，創(chuàng)建table標簽樣式后，所有用table標簽設(shè)置了格式的文本都將立即更新。 3選擇器樣式選擇器樣式又稱高級樣式，它用來重定義特定標簽組合的格式。例如，每當(dāng)h2標題出現(xiàn)在表格單元格內(nèi)時都會生成td h2標簽組合。選擇器樣式還可重定義包含特定id屬性的所有標簽的格式。例如，#myStyle樣式將應(yīng)用于所有包含屬性id=myStyle的標簽。8.3.3 創(chuàng)建樣式的步驟在“樣式”面板中，可以直接創(chuàng)

57、建類樣式和其他兩種樣式。 選擇標簽“保存樣式表文件為”對話框“CSS 規(guī)則定義”對話框1類型屬性用來定義字體、大小、粗細、樣式、行高、大小寫、顏色等設(shè)置。該設(shè)置主要針對網(wǎng)頁中的文字有效。2背景屬性用來定義背景設(shè)置。它可以對網(wǎng)頁中的任何元素應(yīng)用背景屬性，還可以設(shè)置背景圖像的位置。確定是否以及如何重復(fù)背景圖像確定背景圖像是固定在它的原始位置還是隨內(nèi)容一起滾動指定背景圖像相對于元素的初始位置3區(qū)塊屬性用來定義文字的排列格式4方框?qū)傩杂脕砜刂圃卦陧撁嫔系姆胖梅绞皆O(shè)置元素的寬度和高度設(shè)置其他元素在哪個邊圍繞元素浮動定義層的清除邊指定元素內(nèi)容與元素邊框之間的間距指定一個元素的邊框與另一個元素之間的間距5

58、邊框?qū)傩杂脕矶x元素周圍邊框的設(shè)置，如邊框?qū)挾取㈩伾蜆邮健?列表屬性用來為列表標簽定義列表設(shè)置（如項目符號外觀，自定義圖像和位置）。7定位屬性定位屬性用于使用“層”首選參數(shù)中定義的層的默認標簽，將標簽或所選文本塊更改為新層。8.3.4 修改樣式和刪除樣式要修改樣式，應(yīng)首先打開“CSS樣式”面板，然后選擇要編輯的樣式，最后單擊“編輯樣式”按鈕 。也可以在“CSS樣式”面板中選擇要編輯的樣式，然后利用打開的“CSS屬性”面板來修改樣式。利用“CSS樣式”面板還可方便地刪除鏈接外部樣式表或內(nèi)部樣式。8.3.5 使用外部樣式表要附加外部樣式表，應(yīng)首先打開“CSS樣式”面板，然后單擊“附加樣式表”按鈕

59、，將彈出“鏈接外部樣式表”對話框。外部鏈接樣式“鏈接外部樣式表”對話框?qū)С鰳邮奖韮?nèi)部定義樣式8.4 上機實踐為網(wǎng)頁中的文字設(shè)置樣式下面我們試著用CSS控制“金企鵝”主頁上文字的樣式，讓大家領(lǐng)略一下CSS的獨特魅力(具體操作見視頻8-2)。第9章 使用模板與庫項目使用模板使用庫項目上機實踐應(yīng)用模板和庫項目制作網(wǎng)頁9.1 使用模板Dreamweaver模板是一種特殊類型的文檔，用于設(shè)計“固定”的頁面布局。設(shè)計模板時，可以指定在基于模板的文檔中用戶可以編輯文檔的哪些區(qū)域。模板最強大的功能之一是一次可以更新多個頁面。根據(jù)模板創(chuàng)建的文檔與模板保持鏈接關(guān)系（除非以后分離該文檔），可以通過修改模板立即更新所

60、有基于該模板的文檔。9.1.1 創(chuàng)建文檔模板可以從新建的空白文檔中創(chuàng)建模板，也可以將現(xiàn)有文檔保存為模板。新建空白模板將現(xiàn)有文檔保存為模板9.1.2 基于模板創(chuàng)建文檔創(chuàng)建了模板以后，就可以創(chuàng)建基于模板的文檔了。在”新建文檔”對話框中選擇”模板”選項卡9.1.3 模板的區(qū)域類型除了可以在模板中定義可編輯區(qū)域外，還可以通過選擇“插入”“模板對象”菜單定義其他幾種類型的區(qū)域。9.2 使用“庫”項目9.2.1 什么是庫項目庫項目是一種特殊的Dreamweaver文件，我們可以將當(dāng)前網(wǎng)頁中已使用的任意頁面元素定義為庫項目，如圖像、表格、文本、聲音和Flash影片等。創(chuàng)建庫項目的好處是可以在多個頁面中重復(fù)使