制作靜態(tài)網(wǎng)頁(yè)的方法

1、 教你制作靜態(tài)網(wǎng)頁(yè)的方法一、網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)1、熟悉Dreamweaver 8的工作環(huán)境2、創(chuàng)建新站點(diǎn)創(chuàng)建本地站點(diǎn)：站點(diǎn)-管理站點(diǎn)-新建-站點(diǎn)（前三步也可直接從“新建站點(diǎn)”進(jìn)入下面的設(shè)置向?qū)?duì)話框）-跟隨向?qū)гO(shè)置直至完成3、網(wǎng)頁(yè)文件的基本操作a、創(chuàng)建、打開和保存網(wǎng)頁(yè)文件創(chuàng)建：文件-新建-創(chuàng)建打開：文件-打開-選擇欲打開的文件或者在右邊的文件浮動(dòng)面版中選擇打開保存：文件-保存或另存為b. 設(shè)置網(wǎng)頁(yè)的頁(yè)面屬性修改-頁(yè)面屬性-然后設(shè)置（標(biāo)題、背景、背景圖像、文本等）c. 設(shè)置網(wǎng)頁(yè)對(duì)象的顏色網(wǎng)頁(yè)對(duì)象，如頁(yè)面背景、文字、鏈接都經(jīng)常需要設(shè)置顏色?？稍诟髯詫?duì)應(yīng)的屬性面版中設(shè)置。d. 網(wǎng)頁(yè)文本的輸入和屬性設(shè)置文本

2、可鍵入、導(dǎo)入、粘帖文字可設(shè)置字體、大小、顏色、格式等。鍵入空格的方法：1、漢字輸入法設(shè)置為全角方式，按空格鍵即可輸入。2、屬性面版格式中：預(yù)先格式化的換行：ENTER、SHIFT+ENTER實(shí)例練習(xí)：1、輸入以下文字書簽夾在詩(shī)集里，落葉夾在深秋里。喜悅夾在生活里，追求夾在人生里。2、第一次設(shè)置格式為“無(wú)”，字體為“華文行楷”，字體顏色為“紅色”，字號(hào)為“5號(hào)”，添加項(xiàng)目符號(hào)。然后保存、預(yù)覽。3、第二次設(shè)置格式為“標(biāo)題一”，字體為“楷體”，字體顏色為“藍(lán)色”，字號(hào)為“5號(hào)”，添加項(xiàng)目符號(hào)，對(duì)齊方式為“居中”。然后保存、預(yù)覽。比較兩次設(shè)置的效果。e. 網(wǎng)頁(yè)圖片的插入和屬性設(shè)置插入圖片，在對(duì)話框中選

3、擇圖片。（最好在建立站點(diǎn)時(shí)將欲用的圖片素材復(fù)制到本地站點(diǎn)目錄中）插入圖像占位符，在圖片準(zhǔn)備好后再加入圖片。加入方法：1、雙擊圖像占位符；2、點(diǎn)“屬性面版”中的“指向文件”，拖到右邊文件中要插入的文件處。在圖像屬性面版中設(shè)置f. 插入層方法: 1、點(diǎn)擊插入面版中的“描繪層”；2、在網(wǎng)頁(yè)編輯器窗口中按住鼠標(biāo)左鍵拖畫出定位用的層；3、可以隨意移動(dòng)層的位置；4、可在層中插入圖像、文字等。g. *插入表格,用表格定位方法：1、 先用鼠標(biāo)點(diǎn)至欲插入表格的位置；2、 點(diǎn)插入面版中的“表格”“插入表格”；3、 確定行數(shù)、列數(shù)后確定即將表格插入到選定位置了；4、 可在表格中任何單元格里插入圖像、文字等。h. 建

4、立超鏈接方法: 1、選中要建立超鏈接的文字或圖像；2、點(diǎn)右鍵“創(chuàng)建鏈接”打開的窗口或在屬性的鏈接欄里，填入鏈接的目標(biāo)。（如： 本網(wǎng)站另一個(gè)網(wǎng)頁(yè)，或外部網(wǎng)頁(yè)如，或電子郵件如：）3、在頁(yè)面屬性里修改鏈接的屬性： 修改-頁(yè)面屬性（鏈接、活動(dòng)鏈接、訪問(wèn)過(guò)鏈接）二、制作實(shí)例1制作要求：（網(wǎng)頁(yè)效果）1、 頁(yè)面的背景圖片為bg0100.jpg;2、 在合適的位置插入圖片earth.gif;3、 在網(wǎng)頁(yè)中輸入橫排帶陰影的文字“歡迎訪問(wèn)網(wǎng)絡(luò)工程08級(jí)3、4班主頁(yè)”4、 將網(wǎng)頁(yè)用index.htm為名保存在本地站點(diǎn)My site中。操作步驟：1、按下面操作建立站點(diǎn)：先新建一個(gè)文件夾My site（下面舉例中是建立

5、在桌面上）。l 選擇“站點(diǎn)”-“新建站點(diǎn)”命令；l 在彈出的對(duì)話框中，在“站點(diǎn)名稱”文本框中輸入“應(yīng)用實(shí)例1”，并點(diǎn)下一步；l 按下圖選擇“否，我不想使用服務(wù)器技術(shù)”，然后點(diǎn)“下一步”；l 按下圖選擇“編輯我的計(jì)算機(jī)上的本地副本， ”，并選擇文件存放的目錄路徑，然后點(diǎn)“下一步”；l 在“您如何連接到服務(wù)器？”選項(xiàng)里選擇“無(wú)”，然后點(diǎn)“下一步”；l 然后點(diǎn)“完成”。這樣就已經(jīng)建立好一個(gè)新的站點(diǎn)了，可以在Dreamweaver界面右邊的“文件”窗口里看到新建立的站點(diǎn)信息。5、 2、在文件夾My site下創(chuàng)建文件夾images，以后此站點(diǎn)中用到的圖像文件準(zhǔn)備全部存放在images文件夾里；為方便，

6、這里先把此例中需要用到的圖片bg0100.jpg和earth.gif事先存放在此images文件夾里了。3、創(chuàng)建一個(gè)新網(wǎng)頁(yè)：網(wǎng)頁(yè)文件- 新建- 選“基本頁(yè)”-創(chuàng)建；然后在網(wǎng)頁(yè)編輯器窗口中，選擇“修改”-“頁(yè)面屬性”命令，在“頁(yè)面屬性”對(duì)話框中設(shè)置各項(xiàng)參數(shù)； 在“標(biāo)題”文本框中輸入“實(shí)例1”；4、用index.htm為名保存文件到本地站點(diǎn)My site中，保存并按F12預(yù)覽網(wǎng)頁(yè)。5、選擇“插入”“布局對(duì)象”“層”命令，或單擊工具欄中 “布局”選項(xiàng)卡中的“繪制層”按鈕，在工作區(qū)合適的位置上插入圖片定位用的層Layer1，并將光標(biāo)定位在層中。6、“插入”-“圖像”命令，或 “常用”選項(xiàng)卡的“圖像”按

7、鈕，在打開的對(duì)話框中選擇文件earth.gif插入層中（若跳出“圖像標(biāo)簽輔助功能屬性”對(duì)話框，里面“替換文本”可填寫“地球”或其他，或者不填），然后調(diào)整層及圖像的位置至合適處；保存并按F12預(yù)覽網(wǎng)頁(yè)，若圖像位置不合適，則調(diào)整到合適位置。7、在網(wǎng)頁(yè)合適位置插入第二個(gè)層Layer2，在層中輸入文字“歡迎訪問(wèn)網(wǎng)絡(luò)工程08級(jí)3、4班主頁(yè)”，并設(shè)置文字屬性中的字體、大小等，顏色為黑色；然后保存并按F12預(yù)覽，若文字屬性及位置不合適，則調(diào)整到合適為止。8、選中層中的文字，將其復(fù)制到剪貼板中；在網(wǎng)頁(yè)合適位置處插入第三個(gè)層Layer3, 并將文字粘貼到層Layer3中，將Layer3中的文字顏色改為白色，并適

8、當(dāng)調(diào)整層Layer3，使兩個(gè)層中的黑白重疊文字產(chǎn)生陰影效果。然后保存并按F12預(yù)覽，若效果不滿意，則調(diào)整到滿意為止。三、制作實(shí)例2要求：（網(wǎng)頁(yè)效果）1、網(wǎng)頁(yè)名為exa.htm，網(wǎng)頁(yè)的背景圖片為bg0040.gif，網(wǎng)頁(yè)保存在My site文件夾中；2、在網(wǎng)頁(yè)的頂部區(qū)域輸入標(biāo)題文字“人生的伴侶.知識(shí)的源泉”，用HTM樣式“標(biāo)題1”將其格式化，預(yù)覽頁(yè)面效果；3、在網(wǎng)頁(yè)的中部區(qū)域插入導(dǎo)航條，導(dǎo)航條的6個(gè)按鈕對(duì)應(yīng)的圖片是a1.gif, a2.gif, a3.gif, .f2.gif, f3.gif, f4.gif（共有24個(gè)），每個(gè)按鈕可以鏈接一個(gè)My site文件夾中的HTML文件。4、在網(wǎng)頁(yè)的合適

9、位置上插入圖片t4_1.gif, t4-2.gif, t4-3.gif。5、在網(wǎng)頁(yè)的底部區(qū)域插入圖片wyfy.jpg，并為該圖片建立電子郵件鏈接；6、預(yù)覽頁(yè)面效果后，修改保存網(wǎng)頁(yè)文件。操作步驟：先將要用到的圖片素材復(fù)制到My site文件夾里的images文件夾。1、新建一個(gè)網(wǎng)頁(yè)，并將新網(wǎng)頁(yè)取名為exa.htm，保存在My site文件夾中；在網(wǎng)頁(yè)編輯器窗口中，選擇“修改”-“頁(yè)面屬性”命令，在“頁(yè)面屬性”對(duì)話框中設(shè)置標(biāo)題為”應(yīng)用實(shí)例2”, 背景圖片為bg0040.gif；2、在網(wǎng)頁(yè)的頂部區(qū)域合適的位置上輸入標(biāo)題文字“人生的伴侶.知識(shí)的源泉”，并選中這些文字。在屬性面板中，選擇格式中“標(biāo)題1”

10、；3、在網(wǎng)頁(yè)的中部區(qū)域合適的位置插入光標(biāo)，選擇菜單“插入”“圖像對(duì)象”“導(dǎo)航條”命令，此時(shí)的網(wǎng)頁(yè)編輯窗口中，會(huì)彈出“插入導(dǎo)航條”對(duì)話框。在“項(xiàng)目名稱”文本框中設(shè)置第1個(gè)按鈕的名稱為a；在下面按鈕4個(gè)狀態(tài)的文本框中分別輸入images文件夾中的a1.gif, a2.gif, a3.gif, a4.gif 4個(gè)文件的路徑和名稱；在“按下時(shí)，前往的URL”文本框中輸入該按鈕鏈接的對(duì)象名稱和路徑（因此實(shí)例站點(diǎn)中只有index.htm和exa2.htm兩個(gè)網(wǎng)頁(yè)文件，所以這里先填入index.htm來(lái)看看效果）。選中“預(yù)先載入圖象”和“使用表格”選項(xiàng)；選擇“插入”下拉列表框中的水平方向設(shè)置導(dǎo)航條；4、點(diǎn)“

11、插入導(dǎo)航條”對(duì)話框最上面的“+”后，重復(fù)步驟3，可設(shè)置其他5個(gè)按鈕（這里為簡(jiǎn)便，后五個(gè)按鈕只對(duì)“狀態(tài)圖像”進(jìn)行設(shè)置，其他三種圖像不再設(shè)置了），設(shè)置完成后，效果如下：5、在網(wǎng)頁(yè)合適的位置上插入3個(gè)用于圖片定位的層，并在不同的層中插入images文件夾中的圖片文件tu1.gif, tu2.gif, tu3.gif；6、在網(wǎng)頁(yè)的底部區(qū)域插入帶圖片wyfy.jpg的層，選中圖片，在圖片“屬性”面板的“鏈接”文本框中，輸入mailto:+EMAIL地址，建立電子郵件鏈接；7、保存并預(yù)覽網(wǎng)頁(yè)，調(diào)整各方面屬性及位置直至滿意。最終效果如下：在預(yù)覽中嘗試點(diǎn)擊“科學(xué)技術(shù)”按鈕和“我要發(fā)言”圖片。四、制作實(shí)例3:

12、用表格布局定位應(yīng)用實(shí)例要求：頁(yè)面效果 (1) 創(chuàng)建新網(wǎng)頁(yè)名稱為shu.htm, 網(wǎng)頁(yè)的背景圖片為本bg0040.gif, 網(wǎng)頁(yè)文件保存在My site 文件夾中. (2) 在網(wǎng)頁(yè)中插入7行6列的表格, 按照頁(yè)面效果對(duì)網(wǎng)頁(yè)中單元格進(jìn)行合并調(diào)整，在表格上方合適位置的單元格里插入Flash文件shu.swt，在表格左邊合適位置的單元格里分別插入圖片文件t5-1.gif, t5-3. gif, t5-4. gif, t5-6. gif. 每個(gè)圖片與My site 文件夾中的一個(gè)HTML文件或某一外部網(wǎng)站建立超鏈接,被鏈接的HTML文件在新窗口中打開，在表格右邊合適位置的單元格中,插入逐幀動(dòng)畫文件shu

13、-1.gif.(3) 預(yù)覽頁(yè)面效果后,保存網(wǎng)頁(yè)文件.操作步驟：.(1) 新建一個(gè)頁(yè)面,選擇修改|頁(yè)面屬性命令,在頁(yè)面屬性對(duì)話框中設(shè)置背景圖片為bg0040.gif, 并將網(wǎng)頁(yè)取名為shu.htm保存在My site 文件夾中.(2) “插入”-“表格”, 在彈出的“表格”對(duì)話框中設(shè)置7行6列，表格寬度設(shè)為800像素，然后確定，則網(wǎng)頁(yè)中插入了一個(gè)7行6列的表格。(3) 選定第一行，然后點(diǎn)右鍵，在菜單中選“表格”“合并單元格”；選定第五列的三、四、五行，然后點(diǎn)右鍵，在菜單中選“表格”“合并單元格”；(4) 在表格中的第一行單元格中插入光標(biāo)，選擇菜單中“插入”“媒體”“Flash”，此時(shí)可在表格頂部

14、的單元格中,插入Flash文件shu.swf。若希望動(dòng)畫是透明的，則在屬性中將“參數(shù)”設(shè)置入下圖：(5) 在表格的第三行第二列、第四行第三列、第五行第二列、第六行第三列和第三行第五列的單元格中中分別插入光標(biāo)，插入圖像文件 shu1.gif, shu3.gif, shu5.gif, shu6.gif, shu-1.gif。將圖像shu1.gif鏈接到exa.html頁(yè)面（在下面圖像shu1.gif的屬性面板中“鏈接”項(xiàng)填入“exa.html”），將圖像shu5.gif鏈接到一個(gè)外部的網(wǎng)站（比如鏈接到百度，在屬性“鏈接”項(xiàng)中填入）。按F12鍵預(yù)覽頁(yè)面后，保存文件。下面是預(yù)覽效果圖：五、制作實(shí)例4:

15、 框架集的使用要求：頁(yè)面效果操作步驟：1、 新建站點(diǎn)名為 “框架集應(yīng)用”的站點(diǎn)；2、 “文件”- “新建”- 選“框架集”- 選“左側(cè)固定”- “創(chuàng)建”，然后在彈出的“框架標(biāo)簽輔助功能屬性”對(duì)話框中按“確定”。3、 “文件”- “保存全部”：將框架集頁(yè)面保存為index.htm，左側(cè)框架頁(yè)面保存為leftFrame.htm，右側(cè)框架頁(yè)面保存為rightFrame.htm。4、 在下面屬性窗口中按如下進(jìn)行設(shè)置，然后保存并按F12預(yù)覽；5、 這里補(bǔ)充一點(diǎn)：建立了框架集頁(yè)面之后，任何時(shí)候，在菜單“窗口”中選中“框架”，在右下側(cè)會(huì)出現(xiàn)“框架”窗口，點(diǎn)擊里面不同部分則可激活相應(yīng)的框架頁(yè)面；6、 接下來(lái)，在左側(cè)框架頁(yè)面中用表格定位的方法插入三個(gè)豎排的圖片作為導(dǎo)航按鈕，效果如下：7、 新建一個(gè)基本頁(yè)面，在頁(yè)面里輸入“科學(xué)技術(shù)”，保存頁(yè)面為kxjs.htm；8、 在mainFrame.htm頁(yè)面中，鼠標(biāo)點(diǎn)中“科學(xué)技術(shù)”圖片，在下面的圖片屬性中設(shè)置其鏈接屬性如下：9、 保存并預(yù)覽，在預(yù)覽頁(yè)面中，點(diǎn)擊左側(cè)的“科學(xué)技術(shù)”圖片，可見到kxjs.htm頁(yè)面會(huì)在右側(cè)的框架頁(yè)中顯示（如下圖效果）。提示：在以后需要修改框架各部分頁(yè)面尺寸時(shí)，如果找不到框架邊框，可通過(guò)“菜單”“查看”-“可視化助理”- 選中“框架邊框”，即可使框架邊框顯示。六、其他一些應(yīng)用1、插入聲音：例如插入M