快速制作網(wǎng)頁的方法

快速制作網(wǎng)頁的方法使用ACDSee快速建立HTML相冊(cè)

選擇要生成的圖片>創(chuàng)建HTML相冊(cè)>按向?qū)нM(jìn)行設(shè)置

注意：主頁的網(wǎng)址設(shè)定、縮略圖的大小與數(shù)量、生成的相冊(cè)路徑使用PowerPoint快速制作網(wǎng)頁

PPT文件另存為Web頁

注意：頁面應(yīng)盡可能存為htm或html格式通過上網(wǎng)下載，快速生成網(wǎng)頁

注意：下載的頁面不要太復(fù)雜，否則修改起來比較費(fèi)時(shí)網(wǎng)頁設(shè)計(jì)工具AdobeDreamweaverCS3本小節(jié)要點(diǎn)規(guī)劃網(wǎng)站獲取素材Dw創(chuàng)建站點(diǎn)管理Dw文字輸入Dw鏈接與錨點(diǎn)1、所見即所得

可以將編輯窗口中編輯的文本與圖片自動(dòng)轉(zhuǎn)化成HTML語言2、自定窗口環(huán)境

三種工作區(qū)（代碼、設(shè)計(jì)、代碼與設(shè)計(jì)）、多功能選項(xiàng)卡等3、動(dòng)態(tài)網(wǎng)頁效果的支持

結(jié)合了JavaScript、AJAX在行為面板中，設(shè)計(jì)者不需要編程就可以完成部分動(dòng)態(tài)網(wǎng)頁的制作4、網(wǎng)站的管理

豐富的站點(diǎn)管理功能Dreamweaver的特點(diǎn)DreamweaverCS3工作環(huán)境工作界面

選擇合適自己的工作模式文檔窗口

進(jìn)行文字、圖像等的編輯場所，可以同時(shí)打開多個(gè)文檔窗口進(jìn)行編輯浮動(dòng)面板

顯示與隱藏面板和菜單

調(diào)整面板形狀、大小

使用快捷方式

使用標(biāo)尺與網(wǎng)格

使用草稿建立Dreamweaver站點(diǎn)設(shè)置站點(diǎn)存儲(chǔ)位置設(shè)立Dreamweaver站點(diǎn)建立站點(diǎn)文件夾建立網(wǎng)頁新文件打開站點(diǎn)窗口版面設(shè)定與文字編輯頁面屬性的設(shè)定屬性面板文字編輯

空格的輸入方法

普通文本的輸入方法

插入特殊字符

文本屬性的設(shè)置（格式、顏色、字體、對(duì)齊等）

文本分段的方法

查找與替換在網(wǎng)頁中建立超鏈接Dreamweaver中文本與圖像的幾種鏈接內(nèi)部鏈接

在同一網(wǎng)站內(nèi)部文檔之間的連接?？梢允墙^對(duì)路徑，也可以是相對(duì)路徑外部鏈接

不同網(wǎng)站文檔之間的鏈接。使用絕對(duì)URL（http://）絕對(duì)路徑

/index.html

file:///D|/myweb/index.htm相對(duì)路徑

../photo1.htmimages/logo.gif*如果網(wǎng)頁的內(nèi)部鏈接的屬性是絕對(duì)路徑（file:///c|），在本地預(yù)覽是可行的，但在網(wǎng)頁上傳后，這樣鏈接的網(wǎng)頁或圖片都不能被顯示。所以在網(wǎng)頁制作時(shí)內(nèi)部鏈接一定要使用相對(duì)路徑。在網(wǎng)頁中建立超鏈接文本鏈接圖片鏈接電子郵件鏈接

mailto:@在頁面中創(chuàng)建鏈接錨記（錨點(diǎn)）

①在屬性面板中的鏈接框中輸入符號(hào)#和已創(chuàng)建錨記的名稱；

②在主文檔窗口中選中需要設(shè)置錨記的文本或圖像后，按住Shift鍵，然后拖動(dòng)鼠標(biāo)指向錨記；

③按住屬性面板上的“指向文件”按鈕，并拖動(dòng)鼠標(biāo)指向錨記。入手創(chuàng)建站點(diǎn)—為什么要先創(chuàng)建站點(diǎn)？為了方便管理網(wǎng)站內(nèi)的文件和文件夾站點(diǎn)就是硬盤上的一個(gè)目錄創(chuàng)建站點(diǎn)的步驟頁面標(biāo)題頁面的屬性輸入文字，設(shè)置文字屬性在網(wǎng)頁中插入圖像插入其他基本元素水平線日期特殊字符創(chuàng)建超級(jí)鏈接用Dreamweaver創(chuàng)建簡單網(wǎng)頁超級(jí)鏈接有以下幾種：內(nèi)部鏈接外部鏈接E-Mail鏈接錨記鏈接熱區(qū)鏈接下載鏈接網(wǎng)頁組成元素文本圖形圖像聲音動(dòng)畫視頻2-4圖像和多媒體一個(gè)網(wǎng)站的精彩程度有一半是取決于圖像的運(yùn)用，如果圖片處理合理，網(wǎng)站會(huì)顯的個(gè)性十足、精彩紛呈。下面將講解網(wǎng)頁中的形象元素——圖像和多媒體。2-4-1圖像的插入單擊【常用】工具欄中【插入圖像】按鈕，便可很輕松的插入圖像。2-4-2

圖像的編輯2-4-3插入鼠標(biāo)經(jīng)過圖像在頁面中插入一副圖片，輸入圖片的名稱。選擇圖片，將“寬”和“高”兩個(gè)輸入框中的數(shù)值刪除，然后“寬”輸入框中輸入數(shù)值“200”，此時(shí)圖片等比例的縮小。在【邊框】輸入框輸入相應(yīng)數(shù)值，可以設(shè)置圖片的邊框。在Dreamweaver中可以直接插入鼠標(biāo)經(jīng)過圖像，它實(shí)際上就是一個(gè)按鈕，這個(gè)按鈕包含一個(gè)鏈接，當(dāng)鼠標(biāo)移到圖像的時(shí)候會(huì)變?yōu)榱硗獾囊粡垐D片。網(wǎng)頁中的圖片格式簡介GIF圖片格式

1、特點(diǎn)：不失真、支持透明色、可支持動(dòng)畫效果，具有靈活性大、文件較小等特點(diǎn)。但最多只支持256種顏色。2、適用范圍：

多用于顯示色調(diào)不連續(xù)或單一顏色的圖像。如：標(biāo)志、文字、按鈕。JPEG圖片格式

1、特點(diǎn)：

色彩豐富（包含數(shù)百萬種顏色）、色調(diào)連續(xù)、壓縮率高2、適用范圍：

多用于攝影或連續(xù)色調(diào)的圖像。文件的品質(zhì)、大小與壓縮率關(guān)系較大。PNG圖片格式

它是一種無專利權(quán)限制的格式，包括對(duì)索引色、灰度、真彩色以及Alpha透明通道的支持。但由于文件較大及對(duì)不同瀏覽器的支持不一致，所以應(yīng)用比較少。2-4-4

插入透明Flash打開“index.htm”文件，將光標(biāo)置于單元格中，選擇【常用】工具欄中的【媒體】/【Flash】選項(xiàng)。將“cloud.swf”插入到單元格中，單擊【屬性】面板中的按鈕播放動(dòng)畫。停止播放動(dòng)畫，選擇插入的Flash，單擊按鈕打開代碼視窗，在<object>標(biāo)記中輸入<paramname=wmodevalue="transparent">。保存文件并預(yù)覽頁面，背景圖像顯露出來，如右圖所示。2-5創(chuàng)建表格及表格的屬性設(shè)置2-5-1插入表格單擊【常用】工具欄中的【插入表格】按鈕，可在頁面中插入表格。

表格是由行、列以及單元格組成的，在單元格中可以放置文字和圖像。下面介紹在Dreamweaver中創(chuàng)建表格的方法以及如何調(diào)整表格的大小、位置等屬性。表格寬度有兩種設(shè)置方法：設(shè)置為“像素”，這種設(shè)置方法是將表格設(shè)置為固定的尺寸；設(shè)置為“百分比”，這種設(shè)置方法是相對(duì)的尺寸，也就是相對(duì)于網(wǎng)頁的寬度而決定的。調(diào)整表格的大小：向外側(cè)拖動(dòng)左下邊角的調(diào)節(jié)點(diǎn)可放大表格。向內(nèi)側(cè)拖動(dòng)邊角的調(diào)節(jié)點(diǎn)可縮小表格放大表格縮小表格2-5-2設(shè)置表格屬性選擇表格設(shè)置表格屬性2-5-3設(shè)置單元格屬性表格中的一個(gè)個(gè)小方塊即為單元格。下面來學(xué)習(xí)如何設(shè)置單元格的屬性。將鼠標(biāo)移至表格的邊框線上，鼠標(biāo)將變?yōu)樗交蛘叽怪钡碾p向向外的箭頭時(shí)，單擊鼠標(biāo)左鍵就可以將表格選中。

選擇單元格：按住<Ctrl>鍵同時(shí)，單擊單元格，可以選中單元格。

選擇多個(gè)單元格：按住<Ctrl>鍵，然后逐個(gè)單擊欲選擇的單元格。

選擇表格的行或列：將鼠標(biāo)移至表格外邊框處，當(dāng)鼠標(biāo)變?yōu)樗交蛘叽怪狈较虻募^時(shí)，單擊鼠標(biāo)左鍵可以選中一行或者一列表格。

合并單元格：將要合并的單元格選擇，單擊【屬性】面板中的【合并單元格】按鈕，便可將單元格合并。

拆分單元格：選擇單元格，單擊【屬性】面板中的【拆分單元格】按鈕，便可將單元格拆分。拆分單元格

設(shè)置單元格的其它屬性：將光標(biāo)置于單元格中，在【屬性】面板中就可以設(shè)置此單元格的屬性。設(shè)置單元格屬性2-6表格在HTML代碼中的顯示2-6-1添加表格通過HTML代碼的方式插入表格，可以使讀者更加清晰的了解表格的結(jié)構(gòu)。2-6-2

在單元格中添加內(nèi)容在代碼中將光標(biāo)置于代碼“<td></td>”之間，輸入文字姓名”。復(fù)制代碼“<td>姓名</td>”，往下繼續(xù)粘貼代碼，再生成二個(gè)單元格。最后將后面兩個(gè)單元格中的文字分別改為“年齡”和”性別”。在表格中輸入內(nèi)容生成兩個(gè)單元格更改后兩個(gè)單元格中的文字2-6-3

添加一行將要添加的代碼全部選中并進(jìn)行復(fù)制，這代表了表格中的一行。將光標(biāo)置于</tr>的后面輸入回車，將代碼粘貼到下面。選中一行的代碼添加一行后的表格2-6-4

為表格添加邊框并為表格設(shè)定寬度和背景色為表格添加邊框：將光標(biāo)置于<table的后面，輸入空格，此時(shí)會(huì)出現(xiàn)Dreamweaver的代碼提示，在代碼提示中可以找到“border”。如右圖所示。出現(xiàn)代碼提示框找到“border”雙擊這個(gè)代碼提示，它就出現(xiàn)在了代碼中，設(shè)置一個(gè)數(shù)值“1”，此時(shí)的表格如右圖所示。表格框在代碼中的顯示返回到代碼中，在如左圖所示的位置處輸入空格，在出現(xiàn)的Dreamweaver的代碼提示中找到“width”，雙擊插入并設(shè)置表格的寬度為“200”。設(shè)定光標(biāo)的位置設(shè)定表格的寬度設(shè)置表格的背景：在如右圖所示的位置處輸入空格，在出現(xiàn)的Dreamweaver的代碼提示中找到“bgcolor”，雙擊插入并設(shè)置顏色值為“#FFFFCC”，效果如右圖所示。設(shè)定光標(biāo)的位置設(shè)定表格的背景色2-6-5設(shè)置行的顏色上面的實(shí)例我們?cè)O(shè)置了整個(gè)表格的顏色，下面通過代碼改變行的顏色：返回到代碼中，將光標(biāo)置于tr的后面并輸入空格。在出現(xiàn)的Dreamweaver的代碼提示中找到“bgcolor”，雙擊插入并設(shè)置顏色值為“#33CCFF”即可改變行的顏色。2-7HTML代碼上節(jié)中講到了通過HTML代碼制作表格并改變表格的屬性的方法，這一節(jié)中我們重點(diǎn)地再將HTML語法講解一下，讀者通過這些HTML知識(shí)會(huì)對(duì)表格的各個(gè)屬性有更加深刻的了解。表格HTML的基本語法表格標(biāo)記的常用屬性表格Frame屬性的值表格Rules屬性的值NJtimesNextMonday上機(jī)開始熟悉工具環(huán)境熟悉本節(jié)課html基本標(biāo)簽（不需要全部，常用的一定要熟悉）2-8層用表格定位網(wǎng)頁中的元素，不能相互疊加在一起。但是使用層功能，無論將其放置到網(wǎng)頁文檔的任何一個(gè)位置，都可以隨意移動(dòng)，并且頁面元素放入圖層之中時(shí)，還可以控制哪個(gè)顯示在前面、哪個(gè)顯示在后面、哪個(gè)顯示、哪個(gè)隱藏，可見，層的優(yōu)點(diǎn)是很明顯的。之所以在網(wǎng)頁文檔中使用層，是為了自由地安排圖像等網(wǎng)頁構(gòu)成元素表現(xiàn)特殊效果。大家可以將層理解為文檔窗口內(nèi)的又一個(gè)文檔窗口。像在普通文檔窗口中進(jìn)行操作一樣，在層中可以輸入文字，也可以插入圖像、動(dòng)畫、表格、多媒體等，對(duì)其進(jìn)行編輯。插入圖像插入表格插入Flash動(dòng)畫插入插件2-8-1

創(chuàng)建層并插入圖像創(chuàng)建一個(gè)新文件，在【布局】工具欄中單擊【繪制層】按鈕，然后在文檔窗口中拖動(dòng)鼠標(biāo)，在適當(dāng)位置釋放鼠標(biāo)，便可創(chuàng)建層。圖層繪制好后就可以在層內(nèi)插入內(nèi)容了。在層內(nèi)定位光標(biāo)，單擊【插入圖像】按鈕，出現(xiàn)對(duì)話框之后，選擇一張圖片插入即可。下面介紹的是在網(wǎng)頁文檔中創(chuàng)建層之后，再插入圖像的方法。2-8-2調(diào)整層的大小和位置選擇層，當(dāng)光標(biāo)指向上、下（左、右）邊框的控制點(diǎn)時(shí)，光標(biāo)變?yōu)樯?、下（左、右）雙向箭頭，按下左鍵拖拽鼠標(biāo)，可修改圖層的高度（寬度）；當(dāng)光標(biāo)指向四個(gè)角端的控制點(diǎn)時(shí)，光標(biāo)變?yōu)樾毕螂p向箭頭，按下左鍵拖拽鼠標(biāo)，可修改整個(gè)圖層的大小。調(diào)整層的大小調(diào)整層的大小為了移動(dòng)層，在單擊層控制手柄的狀態(tài)下，將其移動(dòng)到指定位置，釋放鼠標(biāo)，層便移動(dòng)到指定位置向右拖動(dòng)層的控制手柄2-8-3

選擇層單擊層上方的四邊形控制手柄或?qū)拥目蚣?，就可以選擇相應(yīng)層。執(zhí)行菜單欄中的【窗口】/【層】命令