網(wǎng)頁(yè)基本元素實(shí)現(xiàn)

DreamweaverCS4網(wǎng)頁(yè)設(shè)計(jì)與制作第三章網(wǎng)頁(yè)基本元素實(shí)現(xiàn)文本操作在網(wǎng)頁(yè)插入圖像設(shè)置超級(jí)鏈接頁(yè)面的整體控制主要內(nèi)容掌握網(wǎng)頁(yè)基本元素的使用掌握頁(yè)面的整體控制方法本章目標(biāo)在網(wǎng)頁(yè)創(chuàng)作中，網(wǎng)頁(yè)上的信息大多是通過(guò)文字來(lái)表達(dá)的，文字是最基本的元素之一，它具有準(zhǔn)確快捷地傳遞信息、存儲(chǔ)空間小、易復(fù)制、易保存、易打印等優(yōu)點(diǎn)，其優(yōu)勢(shì)很難被其他元素所取代。增加文字的易讀性，讓瀏覽者在短時(shí)間內(nèi)閱讀更多、理解更多信息，并達(dá)到視覺(jué)藝術(shù)及傳達(dá)的功能是網(wǎng)頁(yè)創(chuàng)作者追求的目標(biāo)。3.1文本操作3.1.1輸入文本圖3-1建立“實(shí)例1.html”圖3-2編輯區(qū)域的光標(biāo)圖3-3在頁(yè)面輸入一行文字通過(guò)按鍵盤(pán)上的空格鍵（SpaceBar）實(shí)現(xiàn)輸入文本空格，這與很多文字處理軟件是一樣的。但是在DreamweaverCS4中輸入空格的數(shù)量在字符輸入的半角和全角狀態(tài)是不一樣的。

輸入法切換到半角狀態(tài)時(shí)，按空格鍵只能輸入一個(gè)空格，而無(wú)法連續(xù)輸入多個(gè)空格，即第一次按空格鍵會(huì)輸入一個(gè)空格，第二次按空格鍵則不會(huì)在輸入空格。如果需要輸入連續(xù)的空格，可以通過(guò)下面兩種方法實(shí)現(xiàn)。輸入文本空格(1)直接按Ctrl+Shift+SpaceBar組合鍵。(2)點(diǎn)擊菜單“編輯”-》“首選參數(shù)”，選擇“常規(guī)”選項(xiàng)，選中“允許多個(gè)連續(xù)的空格”復(fù)選框，單擊“確定”按鈕。輸入文本空格圖3-4常規(guī)選項(xiàng)窗口實(shí)現(xiàn)文本換行圖3-5文本空格與文本換行當(dāng)輸入多行文本時(shí)，就需要換行，可以通過(guò)Enter或Shift+Enter組合鍵來(lái)實(shí)現(xiàn)。大家來(lái)觀(guān)察一下有什么區(qū)別？插入相關(guān)文本要素圖3-6“文本”插入工具欄圖3-7“插入其他字符”對(duì)話(huà)框“插入”->”文本”,單擊”字符”按鈕文本換行圖3-8文本換行效果插入列表圖

3-9項(xiàng)目列表圖3-10“列表屬性”對(duì)話(huà)框圖3-11正方形的項(xiàng)目符號(hào)插入水平線(xiàn)圖3-12“插入”工具欄的水平線(xiàn)按鈕圖3-13水平線(xiàn)“屬性”面板插入日期圖3-14“插入”工具欄的日期按鈕圖3-15“插入日期”對(duì)話(huà)框插入注釋圖3-16“插入”工具欄的注釋按鈕文本的格式化圖3-17“文本”插入工具欄圖3-18“格式”菜單3.2.1網(wǎng)頁(yè)圖像的基礎(chǔ)知識(shí)

圖像在網(wǎng)頁(yè)中通常起到畫(huà)龍點(diǎn)睛的作用，它能裝飾網(wǎng)頁(yè)，表達(dá)個(gè)人的情趣和風(fēng)格。但在網(wǎng)頁(yè)上加入的圖片過(guò)多，就會(huì)影響瀏覽的速度，導(dǎo)致用戶(hù)失去耐心而離開(kāi)頁(yè)面。網(wǎng)頁(yè)常用的圖像格式有JPEG（JointPhotographicExpertsGroup）、GIF（GraphicsInterchangeFormat）和PNG（PortableNetworkGraphic）三種。其中，JPEG和GIF兩種格式的圖片文件由于文件比較小，適合于網(wǎng)絡(luò)上的傳輸，而且能夠被大多數(shù)瀏覽器完全支持，所以是網(wǎng)頁(yè)制作中最為常用的圖像格式。

JPEG是特別為照片圖像設(shè)計(jì)的文件格式。JPEG支持?jǐn)?shù)百萬(wàn)種色彩。JPEG是質(zhì)量有損的格式，其壓縮技術(shù)十分先進(jìn)，使用有損壓縮的方式去除冗余的圖像和彩色數(shù)據(jù)，在獲取極高壓縮率的同時(shí)能展現(xiàn)十分豐富生動(dòng)的圖像。圖像數(shù)據(jù)被拋棄得很少，不會(huì)在質(zhì)量上有非常明顯的不同。特別適合在網(wǎng)上發(fā)布照片。3.2在網(wǎng)頁(yè)插入圖像下面是一些圖像的素材網(wǎng)站：中國(guó)素材網(wǎng)/sucaishow/allpic.asp?id=167&id2=2，提供各種網(wǎng)頁(yè)素材。高品質(zhì)經(jīng)典素材/html/mgif/243/，提供矢量、FLASH、GIF、LOGO等素材。映象中國(guó)：/，提供各種時(shí)事，創(chuàng)意圖片素材精品屋：，提供設(shè)計(jì)素材、動(dòng)畫(huà)、矢量圖片、特色圖標(biāo)。百萬(wàn)圖庫(kù)：/photo/photo.htm，提供FLASH動(dòng)漫、各類(lèi)型圖片。中華貼圖網(wǎng)：/，提供各種精美圖片。LOGO：http://www.logotypes.ru/，提供各種logo。多媒體的搜索引擎：

/，主要提供網(wǎng)上圖像的搜索，已收集了超過(guò)200萬(wàn)個(gè)圖像，并且大多經(jīng)過(guò)人工的篩選，因而搜索結(jié)果質(zhì)量較高。圖片下載：/en/，提供1000萬(wàn)圖片下載。閃盟矢量圖庫(kù)：/home/read.php?qid=vector，提供各種矢量圖。好的國(guó)外頭像網(wǎng)站：/cgi-bin/gall...ect=GIF_Artistsgif動(dòng)畫(huà)庫(kù)：/demo/index.htm3.2.2網(wǎng)頁(yè)圖像素材的搜集插入圖像3.2.3圖像操作圖3-20“選擇圖像源文件”對(duì)話(huà)框圖3-21“圖像標(biāo)簽輔助功能屬性”對(duì)話(huà)框3.2.3圖像操作圖3-22插入圖像的頁(yè)面設(shè)置圖像屬性圖3-23圖像“屬性”面板1．插入“鼠標(biāo)經(jīng)過(guò)圖像”3.2.4插入相關(guān)圖像元素圖3-25參數(shù)設(shè)置完成后的“插入鼠標(biāo)經(jīng)過(guò)圖像”對(duì)話(huà)框2．插入導(dǎo)航條圖3-27“插入導(dǎo)航條”對(duì)話(huà)框3．插入圖像占位符

圖3-29“圖像占位符”對(duì)話(huà)框超級(jí)鏈接（Hyperlink）是指頁(yè)面對(duì)象之間的鏈接關(guān)系，它網(wǎng)頁(yè)的靈魂，能合理、協(xié)調(diào)地把網(wǎng)站中的各個(gè)元素、頁(yè)面通過(guò)超級(jí)鏈接構(gòu)成了一個(gè)有機(jī)整體，使瀏覽者能快速地訪(fǎng)問(wèn)到想要訪(fǎng)問(wèn)的頁(yè)面。超級(jí)鏈接就是從一個(gè)網(wǎng)頁(yè)指向一個(gè)目標(biāo)的連接關(guān)系，目標(biāo)可以是另外一個(gè)網(wǎng)頁(yè)，也可以是相同的網(wǎng)頁(yè)中的不同的位置，還可以是一幅圖片、一個(gè)文件或是一個(gè)應(yīng)用程序。一個(gè)網(wǎng)站中通常包含有許多內(nèi)容，這些內(nèi)容不可能全部顯示在一個(gè)網(wǎng)頁(yè)上，這時(shí)就可以制作超級(jí)鏈接，通過(guò)超級(jí)鏈接可以方便的訪(fǎng)問(wèn)其他的網(wǎng)頁(yè)。通常情況下，超級(jí)鏈接可以是文字、圖像，通過(guò)這些文字或者圖像即可鏈接到相關(guān)的內(nèi)容上。在一個(gè)網(wǎng)站中，鏈接路徑通常有三種路徑方法：絕對(duì)路徑、文檔目錄相對(duì)路徑、根目錄相對(duì)路徑3.3設(shè)置超級(jí)鏈接絕對(duì)路徑:是被鏈接文檔的完整URL,包括使用的傳輸協(xié)議,例如。絕對(duì)路徑包含的是精確地址,因此不用考慮源文件的位置.相對(duì)路徑:是指以當(dāng)前文檔所在位置為起始點(diǎn)到被鏈接文檔經(jīng)由的路徑,這種方式適合于創(chuàng)建本地鏈接.根目錄相對(duì)路徑:是指從站點(diǎn)的根文夾到文檔的路徑.一般用在大型WEB站點(diǎn),或在使用承載多個(gè)站點(diǎn)的服務(wù)器,則可能使用這些路徑.3.3設(shè)置超級(jí)鏈接3.3.2創(chuàng)建文本超級(jí)鏈接圖3-30繪制APDiv和設(shè)置鏈接屬性超鏈接的打開(kāi)方式鏈接網(wǎng)頁(yè)的打開(kāi)的窗口或位置_blank在一個(gè)新的未命名的瀏覽器中打開(kāi)鏈接的網(wǎng)頁(yè)_parent如果是嵌套的框架，則在父框架或窗口中打開(kāi)；如果不是嵌套的框架，則等同于_top，鏈接的網(wǎng)頁(yè)在瀏覽器中打開(kāi)_self在當(dāng)前網(wǎng)頁(yè)所在的窗口或框架中鏈接的網(wǎng)頁(yè)，該選項(xiàng)是瀏覽器的默認(rèn)值_top在瀏覽器窗口打開(kāi)鏈接的網(wǎng)頁(yè)創(chuàng)建圖片超鏈接的步驟如下：

（1）選中所需建立超鏈接的圖片，此時(shí)屬性面板為圖片的屬性面板；

（2）在圖片屬性面板中，為圖片“鏈接”添加鏈接，具體方法可參考為文本添加超鏈接的操作；

（3）按“F12”預(yù)覽網(wǎng)頁(yè)。圖像連接不像文本鏈接那樣，會(huì)發(fā)生許多提示，圖像本身不會(huì)發(fā)生改變，只是在預(yù)覽網(wǎng)頁(yè)時(shí)，當(dāng)鼠標(biāo)指針經(jīng)過(guò)帶鏈接的圖像時(shí)，指針的形狀變?yōu)椤笆帧钡男螤?。點(diǎn)擊圖像就會(huì)打開(kāi)所鏈接的文檔。3.3.3創(chuàng)建圖片超級(jí)鏈接圖片上的超級(jí)鏈接也可以實(shí)現(xiàn)一張圖片上實(shí)現(xiàn)多個(gè)局部區(qū)域指向不同的網(wǎng)頁(yè)鏈接。比如一張中國(guó)地圖的圖片，單擊了不同的省跳轉(zhuǎn)到不同的網(wǎng)頁(yè)?？牲c(diǎn)的區(qū)域就是熱點(diǎn)。操作步驟：（1）首先選中圖片，在“屬性”面板上的繪圖工具在畫(huà)面上繪制熱點(diǎn)。在“地圖”文本框下的有三種熱點(diǎn)工具

：矩形、圓形、多邊形，根據(jù)熱區(qū)選擇合適的熱點(diǎn)工具，進(jìn)入熱點(diǎn)繪制狀態(tài)。（2）繪制熱點(diǎn)。當(dāng)鼠標(biāo)指針變成“＋”字形狀時(shí)，在需要設(shè)置熱點(diǎn)的位置拖動(dòng)形成一個(gè)熱點(diǎn)。（3）在繪制好熱點(diǎn)后，設(shè)置熱點(diǎn)的“屬性”面板中的“鏈接”屬性，3.3.3創(chuàng)建圖片超級(jí)鏈接1．建立文本電子郵件超鏈接

（1）在“文檔”窗口的“設(shè)計(jì)”視圖中，將插入點(diǎn)放在希望出現(xiàn)電子郵件鏈接的位置，或者選擇要作為電子郵件鏈接出現(xiàn)的文本或圖像。

（2）執(zhí)行下列操作之一，插入該鏈接：?選擇“插入”→“電子郵件鏈接”?在“插入”面板的“常用”類(lèi)別中，單擊“電子郵件鏈接”按鈕。

（3）在“文本”框中，鍵入或編輯電子郵件的正文。

（4）在“E-mail”框中，鍵入電子郵件地址，然后單擊“確定”。3.3.4創(chuàng)建電子郵件超鏈接2建立圖片文本電子郵件超鏈接在圖片的“鏈接”屬性中，輸入：“mailto：郵件地址3.3.4創(chuàng)建電子郵件超鏈接圖3-35設(shè)置圖片“6.jpeg”的鏈接屬性創(chuàng)建空鏈接如下：

空鏈接是未指派的鏈接.用于向頁(yè)面對(duì)上的對(duì)象或文本附加行為。在“文檔”窗口的“設(shè)計(jì)”視圖中選擇文本、圖像或?qū)ο?。在屬性面板中，在“鏈接”框中鍵入

javascript:;（javascript一詞后依次接一個(gè)冒號(hào)和一個(gè)分號(hào)）。

腳本鏈接執(zhí)行

JavaScript代碼或調(diào)用

JavaScript函數(shù)。它非常有用，能夠在不離開(kāi)當(dāng)前

Web頁(yè)面的情況下為訪(fǎng)問(wèn)者提供有關(guān)某項(xiàng)的附加信息。腳本鏈接還可用于在訪(fǎng)問(wèn)者單擊特定項(xiàng)時(shí)，執(zhí)行計(jì)算、驗(yàn)證表單和完成其它處理任務(wù)3.3.5創(chuàng)建空鏈接和腳本鏈接如果想讓網(wǎng)站提供文件下載的功能，就必須建立下載文件超鏈接。如果超級(jí)鏈接指向的不是一個(gè)網(wǎng)頁(yè)文件，而是其他文件例如zip、exe文件等等，單擊鏈接的時(shí)候就會(huì)下載文件。實(shí)現(xiàn)文件下載的功能很簡(jiǎn)單，只需在屬性面板的“鏈接”框中加入下載的文件就可以了。

超級(jí)鏈接也可以直接指向地址而不是一個(gè)文件，那么單擊鏈接直接跳轉(zhuǎn)到相應(yīng)的地址。3.3.6創(chuàng)建下載文件超鏈接3.3.7鏈接檢查圖3-36“鏈接檢查器”選項(xiàng)卡典型的導(dǎo)航欄有：橫向?qū)Ш綑诳v向?qū)Ш綑诟?dòng)導(dǎo)航欄下拉菜單式導(dǎo)航欄

下拉菜單導(dǎo)航欄和浮動(dòng)導(dǎo)航欄都是比較新穎的導(dǎo)航方式，可以使用行為、JavaScript腳本、Spry等技術(shù)實(shí)現(xiàn)，后面的章節(jié)將介紹。下拉菜單也可以使用Flash設(shè)計(jì)3.3.7導(dǎo)航欄簡(jiǎn)介3.4.1參數(shù)設(shè)置3.4頁(yè)面的整體控制圖3-40“首選參數(shù)”對(duì)話(huà)框“編輯”菜單-》“首選參數(shù)”圖3-41設(shè)置“新建文檔”的參數(shù)3.4.1參數(shù)設(shè)置3.4.2設(shè)置頁(yè)面屬性圖3-43“頁(yè)面屬性”對(duì)話(huà)框“修改”菜單-》“頁(yè)面屬性”設(shè)置“外觀(guān)(CSS)”圖

3-44“頁(yè)面屬性”對(duì)話(huà)框的“外觀(guān)

(CSS)”類(lèi)別設(shè)置“外觀(guān)(HTML)”圖

3-45“頁(yè)面屬性”對(duì)話(huà)框的“外觀(guān)

(HTML)”類(lèi)別設(shè)置“鏈接（CSS）”圖

3-46“頁(yè)面屬性”對(duì)話(huà)框的“鏈接（CSS）”類(lèi)別設(shè)置“標(biāo)題（CSS）”圖

3-47“頁(yè)面屬性”對(duì)話(huà)框的“標(biāo)題（CSS）”類(lèi)別設(shè)置“標(biāo)題/編碼”圖

3-48“頁(yè)面屬性”對(duì)話(huà)框的“標(biāo)題/編碼”類(lèi)別設(shè)置“跟蹤圖像”圖

3-49“頁(yè)面屬性”對(duì)話(huà)框的“跟蹤圖像”類(lèi)別1顯示“文件頭內(nèi)容”菜單3.4.3設(shè)置文件頭內(nèi)容圖3-50“文件頭內(nèi)容”菜單“插入”菜單-》“HTML”-》“文件頭內(nèi)容”菜單2設(shè)置Meta屬性圖3-52“META”對(duì)話(huà)框Meta標(biāo)簽是記錄當(dāng)前頁(yè)面的相關(guān)信息（如作者、版權(quán)信息或關(guān)鍵字）的head元素3設(shè)置關(guān)鍵字圖3-53“關(guān)鍵字”對(duì)話(huà)框

4設(shè)置鏈接圖3-55“鏈接”對(duì)話(huà)框1.配置窗口的大小3.4.4輔