第4章 網(wǎng)頁制作初步

1、網(wǎng)站設計的一般流程如下：（1）對要創(chuàng)建的站點進行規(guī)劃，明確建站的目的、規(guī)模、 面向的群體、服務器端的配置等。（2）建立一個完整的站點目錄結構。（3）確定版面布局，收集和制作素材。（4）制作網(wǎng)頁，可以用使用模板、庫項目等工具提高工作效率。（5）站點測試，發(fā)布及維護更新。4.1.1 規(guī)劃站點規(guī)劃站點 在網(wǎng)站規(guī)劃中一個很重要的問題就是確定站點結構。即確定站點子欄目,確定圖片、多媒體文件的存放位置和導航條等等?！袄ッ髦狻本W(wǎng)站結構規(guī)劃圖如圖4-1所示。昆明之光首頁云南映像昆明概況昆明旅游昆明特產(chǎn)昆明高校留言簿2. 網(wǎng)站文件夾規(guī)劃 建立網(wǎng)站時，當網(wǎng)站結構規(guī)劃完成之后，在定義站點之前，要對網(wǎng)站文件夾進行規(guī)

2、劃，要分類建立各個欄目文件夾、圖像文件夾和多媒體文件夾等。 對于昆明之光網(wǎng)站，建立站點根文件夾為kunming”，子文件夾分別為“album”、“files”、“image”、jiaoyu”、liuyan”、“Fireworks html”以及“others” 。 4.1.2 收集網(wǎng)頁素材收集網(wǎng)頁素材 確定好站點目標和結構之后，接下來要做的就是收集有關網(wǎng)站的資源，其中包括以下資源：1.文字資料：文字是網(wǎng)站的主題。2.圖片資料：網(wǎng)站的一個重要要求就是圖文并茂。3.動畫資料：在網(wǎng)頁上插入動畫可以增添頁面的動感效果。4.其它資料：應用軟件，音樂網(wǎng)站上的音樂文件、視頻等。4.2 創(chuàng)建和管理站點創(chuàng)建和管

3、理站點 設計任務:構建一個以“昆明之光”為主題的個人網(wǎng)站。（a）網(wǎng)站首頁 （b）昆明概況 （c）昆明旅游景點 （d）大觀樓公園Dreamweaver 中打開站點定義對話框的方法有三種：（1）單擊“起始頁”中“新建”下的“Dreamweaver站點”項。（2）單擊菜單“站點”|“管理站點”，在彈出的“管理站點”對話框中單擊“新建”按鈕，在彈出的下拉菜單中單擊“站點”項。（3）從“文件”面板左邊的下拉列表中選擇“管理站點”命令，打開“管理站點”對話框。1.編輯修改站點2.刪除站點3.復制站點4.導入和導出站點1打開文件2新建文件或文件夾3刪除文件或文件夾4重命名文件或文件夾5移動文件或文件夾6復制

4、文件或文件夾4.3.1 新建網(wǎng)頁4.3.2 打開網(wǎng)頁4.3.3 保存網(wǎng)頁4.4.1 插入文字插入文字 要向 Dreamweaver 文檔添加文本,幾種方法如下：1、直接在 Dreamweaver“文檔”窗口中鍵入文本，也可以剪切/復制并粘貼。2、選擇菜單“文件”|“導入”|“Word文檔”，從word 文檔導入文本。3、選擇菜單“文件”|“導入”|“表格式數(shù)據(jù)” 可以導入表格數(shù)據(jù)。4.4.2 設置文字屬性設置文字屬性1、格式、格式網(wǎng)頁的文本分為段落和標題兩種格式。 “標題 1”到“標題6”分別表示各級標題，應用于網(wǎng)頁的標題部分。標題1字體最大，標題6字體最小，同時文字全部加粗。另外，在屬性面板

5、中可以定義文字的字號、顏色、加粗、加斜、水平對齊等內(nèi)容。2、設置字體、設置字體3、文字的其它設置 在“屬性”面板中包含“粗體”按鈕、“斜體”按鈕、“左對齊”按鈕、“居中對齊”按鈕、“右對齊”按鈕、“兩端對齊”按鈕，可以對文字的加粗、傾斜、對齊方式等進行設置。 文本分段：按Enter 鍵。 換行不分段：按EnterShift 鍵。 要輸入多個空格，有3種方法： 選擇菜單“編輯”|“首選參數(shù)”，在“常規(guī)”選項中，選中“允許多個連續(xù)的空格”項。 打開一種中文輸入法，切換成“全角”狀態(tài)，再按空格鍵可以輸入多個空格。 按Ctrl+Shift+空格。4特殊字符特殊字符 要向網(wǎng)頁中插入特殊字符，有兩種方法：

6、從“插入”工具欄選擇“文本”，單擊”字符”按鈕 。選擇“插入”|“HTML”|“特殊字符”5插入列表插入列表列表是基于段落的。列表分為兩種：有序列表和無序列表。通過文本縮進和文本凸出可形成多級列表 。可以修改列表的類型和樣式 。6滾動字幕滾動字幕 使用標記符可以在網(wǎng)頁上創(chuàng)建一個滾動的文本字幕，將滾動的內(nèi)容放在之間即可。的參數(shù)有： direction 表示滾動的方向，值可以是left，right，up，down，默認為left。 behavior 表示滾動的方式，值可以是scroll（連續(xù)滾動）slide（滑動一次）alternate（來回滾動）。 loop 表示循環(huán)的次數(shù)，值是正整數(shù)，默認為無

7、限循環(huán)。 scrollamount 表示運動速度，值是正整數(shù)，默認為6。 scrolldelay 表示停頓時間，值是正整數(shù)，默認為0，單位是毫秒。 valign 表示元素的垂直對齊方式，值可以是top，middle，bottom，默認為middle。 align 表示元素的水平對齊方式，值可以是left，center，right，默認為left bgcolor 表示運動區(qū)域的背景色，值是16進制的RGB顏色，默認為白色。 height、width 表示運動區(qū)域的高度和寬度，值是正整數(shù)（單位是像素）或百分數(shù)，默認width=100% height為標簽內(nèi)元素的高度。 hspace、vspace

8、表示元素到區(qū)域邊界的水平距離和垂直距離，值是正整數(shù)，單位是像素。 onmouseover=this.stop() onmouseout=this.start() 表示當鼠標移上區(qū)域的時候滾動停止，當鼠標移開的時候又繼續(xù)滾動。 1. 水平線水平線 插入水平線有兩種方法：選擇插入工具欄的“常用”項，單擊常用插入欄的“水平線”按鈕選擇菜單“插入”|“HTML”|“水平線”。2. 日期日期 插入日期有兩種方法：單擊“常用”插入欄的“日期”按鈕選擇菜單“插入”|“日期”?！纠?-1】 網(wǎng)頁文字編輯實例1、插入圖像、插入圖像 插入圖像的方法有四種：（1）菜單操作（2）使用“插入”工具欄（3）使用“資源”面

9、板操作 注意注意：該方法適用于將站點中已存在的圖像文件插入到網(wǎng)頁中。 （4）使用Ctrl+Alt+I快捷鍵操作。注意注意： 如果在插入圖片的時候，沒有事先將圖片保存在站點根目錄下，會彈出圖4-15所示的對話框，提醒我們要把圖片復制進站點根文件夾，這時單擊“是”按鈕，然后選擇本地站點的路徑將圖片保存，圖像也可以被插入到網(wǎng)頁中。2、設置圖像屬性、設置圖像屬性4.5.3 插入圖像占位符插入圖像占位符插入圖像占位符有兩種方法： 單擊常用工具欄上“圖像”下拉列表中的“圖像占位符”，打開“圖像占位符”對話框。 選擇菜單“插入”|“圖像對象”|“圖像占位符”，打開“圖像占位符”對話框。4.5.4 插入鼠標經(jīng)

10、過圖像插入鼠標經(jīng)過圖像鼠標經(jīng)過圖像是一種在瀏覽器中查看并使用鼠標指針移過它時發(fā)生變化的圖像。鼠標經(jīng)過圖像實際上由兩個圖像組成，主圖像（當首次載入頁時顯示的圖像）和次圖像（當鼠標指針移過主圖像時顯示的圖像） 【例4-2】網(wǎng)頁插入圖像實例在“昆明概況”網(wǎng)頁gaikuang.html中插入圖像?！纠?-3】網(wǎng)頁制作實例創(chuàng)建網(wǎng)頁jindian.html，并添加文字及圖片。 網(wǎng)頁中插入Fireworks HTML文件方法有兩種： 單擊常用工具欄上“圖像”下拉列表中的“Fireworks HTML文件”，打開“Fireworks HTML文件”對話框。 選擇菜單“插入”|“圖像對象”|“Fireworks

11、 HTML文件”，打開“Fireworks HTML文件”對話框。 【例4-4】 網(wǎng)站首頁實例制作 所謂的超鏈接是指從一個網(wǎng)頁指向一個目標的連接關系，4.6.1 超鏈接的類型超鏈接的類型 在一個文檔中可以創(chuàng)建幾種類型的鏈接：外部鏈接內(nèi)部鏈接命名錨記鏈接電子郵件鏈接空鏈接和腳本鏈接4.6.2 文檔位置和路徑文檔位置和路徑絕對路徑 絕對路徑提供所鏈接文檔的完整 URL，而且包括協(xié)議。http:/ 利用文件夾層次結構，指定從當前文檔到所鏈接的文檔的路徑。 例如 dreamweaver/contents.html4.6 超鏈接超鏈接站點根目錄相對路徑 站點根目錄相對路徑提供從站點的根文件夾到文檔的路徑

12、。站點根目錄相對路徑以一個正斜杠開始，該正斜杠表示站點根文件夾。 例如 /support/dreamweaver/contents.html4.6.3 創(chuàng)建頁面鏈接創(chuàng)建頁面鏈接 創(chuàng)建頁面鏈接的方法有以下3種：1使用“插入”菜單或“插入”工具欄創(chuàng)建超鏈接2使用“屬性”面板創(chuàng)建或修改超鏈接3使用“指向文件”圖標直接指向要鏈接的文件 4.6.4 創(chuàng)建錨記鏈接創(chuàng)建錨記鏈接 創(chuàng)建到命名錨記的鏈接的過程分為兩步。首先，創(chuàng)建命名錨記，然后創(chuàng)建到該命名錨記的鏈接。注意：注意：若看不到錨記標記，可選擇“查看”|“可視化助理”|“不可見元素”。錨記名稱區(qū)分大小寫。 4.6.5 創(chuàng)建電子郵件鏈接創(chuàng)建電子郵件鏈接1.

13、 使用“插入”工具欄或“插入”菜單創(chuàng)建電子郵件鏈接。2. 使用使用“屬性屬性”面板創(chuàng)建電子郵件鏈接面板創(chuàng)建電子郵件鏈接注意：注意：在冒號和電子郵件地址之間不能鍵入任何空格。例如：mailto:。4.6.6 創(chuàng)建圖像熱點鏈接創(chuàng)建圖像熱點鏈接 圖像地圖指已被分為多個區(qū)域（或稱“熱點”）的圖像。1. 創(chuàng)建圖像熱區(qū)鏈接2. 修改圖像地圖4.6.7 創(chuàng)建空鏈接和腳本鏈接創(chuàng)建空鏈接和腳本鏈接空鏈接：是未指派的鏈接?？真溄佑糜谙蝽撁嫔系膶ο蠡蛭谋靖郊有袨椤?chuàng)建空鏈接后，可向空鏈接附加行為，以便當鼠標指針滑過該鏈接時，交換圖像或顯示層。 javascript:; 腳本鏈接：執(zhí)行 JavaScript 代碼或調(diào)用 JavaScript 函數(shù)。還可用于在訪問者單擊特定項時，執(zhí)行計算、表單驗證和其它處理任務。 javascript:alert(This link leads to the index) 網(wǎng)頁中除了可以插入文字和圖像外,還可以在 網(wǎng)頁中插入 Flash SWF 文件、QuickTime 或 Shockwave 影片、Java applet、Activ