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

DreamweaverCS4網頁設計與制作第三章網頁基本元素實現(xiàn)文本操作在網頁插入圖像設置超級鏈接頁面的整體控制主要內容掌握網頁基本元素的使用掌握頁面的整體控制方法本章目標在網頁創(chuàng)作中，網頁上的信息大多是通過文字來表達的，文字是最基本的元素之一，它具有準確快捷地傳遞信息、存儲空間小、易復制、易保存、易打印等優(yōu)點，其優(yōu)勢很難被其他元素所取代。增加文字的易讀性，讓瀏覽者在短時間內閱讀更多、理解更多信息，并達到視覺藝術及傳達的功能是網頁創(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ù)的空格”復選框，單擊“確定”按鈕。輸入文本空格圖3-4常規(guī)選項窗口實現(xiàn)文本換行圖3-5文本空格與文本換行當輸入多行文本時，就需要換行，可以通過Enter或Shift+Enter組合鍵來實現(xiàn)。大家來觀察一下有什么區(qū)別？插入相關文本要素圖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網頁圖像的基礎知識

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

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

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

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

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

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

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

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

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

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

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

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

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

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

腳本鏈接執(zhí)行

JavaScript代碼或調用

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

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

超級鏈接也可以直接指向地址而不是一個文件，那么單擊鏈接直接跳轉到相應的地址。3.3.6創(chuàng)建下載文件超鏈接3.3.7鏈接檢查圖3-36“鏈接檢查器”選項卡典型的導航欄有：橫向導航欄縱向導航欄浮動導航欄下拉菜單式導航欄

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

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

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

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

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

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

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

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

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

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