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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

javascript:;（javascript一詞后依次接一個冒號和一個分號）。

腳本鏈接執(zhí)行

JavaScript代碼或調(diào)用

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

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

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

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

3-44“頁面屬性”對話框的“外觀

(CSS)”類別設(shè)置“外觀(HTML)”圖

3-45“頁面屬性”對話框的“外觀

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

3-46“頁面屬性”對話框的“鏈接（CSS）”類別設(shè)置“標題（CSS）”圖

3-47“頁面屬性”對話框的“標題（CSS）”類別設(shè)置“標題/編碼”圖

3-48“頁面屬性”對話框的“標題/編碼”類別設(shè)置“跟蹤圖像”圖

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

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