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

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

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

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

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

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

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

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

8、表示元素到區(qū)域邊界的水平距離和垂直距離，值是正整數(shù)，單位是像素。 onmouseover=this.stop() onmouseout=this.start() 表示當(dāng)鼠標(biāo)移上區(qū)域的時(shí)候滾動(dòng)停止，當(dāng)鼠標(biāo)移開(kāi)的時(shí)候又繼續(xù)滾動(dòng)。 1. 水平線(xiàn)水平線(xiàn) 插入水平線(xiàn)有兩種方法：選擇插入工具欄的“常用”項(xiàng)，單擊常用插入欄的“水平線(xiàn)”按鈕選擇菜單“插入”|“HTML”|“水平線(xiàn)”。2. 日期日期 插入日期有兩種方法：?jiǎn)螕簟俺Ｓ谩辈迦霗诘摹叭掌凇卑粹o選擇菜單“插入”|“日期”?！纠?-1】 網(wǎng)頁(yè)文字編輯實(shí)例1、插入圖像、插入圖像 插入圖像的方法有四種：（1）菜單操作（2）使用“插入”工具欄（3）使用“資源”面

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

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

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

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

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