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

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

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

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

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

5、面上）。選擇“站點(diǎn)”一“新建站點(diǎn)”命令；在彈出的對話框中，在“站點(diǎn)名稱”文本框中輸入“應(yīng)用實(shí)例1"，并點(diǎn)下一步;按下圖選擇“否，我不想使用服務(wù)器技術(shù)”，然后點(diǎn)“下一步”度用實(shí)朝一的菖點(diǎn)是攵為xl基本隋婕I站點(diǎn)定義-I謎是再打官使用程駕建技術(shù)，如C力邪，*0樂塔fMPT-A£p-TST或FHF?存苦;.瑜舞頗順曲藏搭二M，r品.衽出帙用卷毋胃獨(dú)術(shù)，（1）上一步項(xiàng)|K一於如”取澗|幫助按下圖選擇“編輯我的計(jì)算機(jī)上的本地副本,”，并選擇文件存放的目錄路徑,然后點(diǎn)“下一步在“您如何連接到服務(wù)器？”選項(xiàng)里選擇“無”,然后點(diǎn)“下一步應(yīng)用女例一酌邊走定里力圜啊無援也遠(yuǎn)理系缶樨T上一步坦）

6、|汗一步坦J”取曲|幫助然后點(diǎn)“完成”。這樣就已經(jīng)建立好一個(gè)新的站點(diǎn)了，可以在Dreamweaver界面右邊的“文件”窗口里看到新建立的站點(diǎn)信息。5、2、在文彳夾Mysite下創(chuàng)建文件夾images,以后此站點(diǎn)中用到的圖像文件準(zhǔn)備全部存放在images文件夾里；為方便，這里先把此例中需要用到的圖片bg0100.jpg和earth.gif事先存放在此images文件夾里了。3、創(chuàng)建一個(gè)新網(wǎng)頁：網(wǎng)頁文件-新建一選“基本頁”-創(chuàng)建；然后在網(wǎng)頁編輯器窗口中，選擇“修改”-“頁面屬性”命令，在“頁面屬性”對話框中設(shè)置各項(xiàng)參數(shù)；在“標(biāo)題”文本框中輸入“實(shí)例1”;-|C：VDo4r<BBiCllt5文

7、件/編輻啜）專看茹AQJ修國電1文本中命令©站點(diǎn)表明1fcl國回回我因團(tuán)畫d代叫，拆分-1崗十標(biāo)題實(shí)例14、用index.htm為名保存文件到本地站點(diǎn)Mysite中，保存并按F12預(yù)覽網(wǎng)頁。5、選擇“插入”一“布局對象”一“層”命令，或單擊工具欄中“布局”選項(xiàng)卡中的“繪制層”按鈕，在工作區(qū)合適的位置上插入圖片定位用的層Layerl,并將光標(biāo)定位在層中。6、“插入”-“圖像”命令，或“常用”選項(xiàng)卡的“圖像”按鈕，在打開的對話框中選擇文件earth.gif插入層中（若跳出“圖像標(biāo)簽輔助功能屬性”對話框，里面“替換文本”可填寫“地球”或其他，或者不填），然后調(diào)整層及圖像的位置至合適處；保存

8、并按F12預(yù)覽網(wǎng)頁，若圖像位置不合適，則調(diào)整到合適位置。文件舊漏招至看。修改通）文車命寺。站點(diǎn)曲囹口的幫助kndeKhtmL隼=則代螞|W闞a世|扁1；演例1“W心二照M、日易|國圖為圈珀07、在網(wǎng)頁合適位置插入第二個(gè)層Layer2,在層中輸入文字“歡迎訪問網(wǎng)絡(luò)工程08級3、4班主頁”，并設(shè)置文字屬性中的字體、大小等，顏色為黑色；然后保存并按F12預(yù)覽，若文字屬性及位置不合適，則調(diào)整到合適為止。I|BBJ樣式£公金三三I匚軍1旦“僮111««廠三1七-亍停|半文行4t二J吉小區(qū)三扃=五.(<eiI三住|巧閨目餐|三,心3t4g.21：:小正,前8、選中層中的

9、文字，將其復(fù)制到剪貼板中；在網(wǎng)頁合適位置處插入第三個(gè)層Layer3,并將文字粘貼到層Layer3中，將Layer3中的文字顏色改為白色，并適當(dāng)調(diào)整層Layer3,使兩個(gè)層中的黑白重疊文字產(chǎn)生陰影效果。然后保存并按F12預(yù)覽，若效果不滿意，則調(diào)整到滿意為止。三、制作實(shí)例2要求：（網(wǎng)頁效果）1、網(wǎng)頁名為exa.htm,網(wǎng)頁的背景圖片為bg0040.gif,網(wǎng)頁保存在Mysite文件夾中；2、在網(wǎng)頁的頂部區(qū)域輸入標(biāo)題文字“人生的伴侶.知識的源泉”，用HTM樣式“標(biāo)題1”將其格式化，預(yù)覽頁面效果；3、在網(wǎng)頁的中部區(qū)域插入導(dǎo)航條，導(dǎo)航條的6個(gè)按鈕對應(yīng)的圖片是a1.gif,a2.gif,a3.gif,.f

10、2.gif,f3.gif,f4.gif（共有24個(gè)），每個(gè)按鈕可以鏈接一個(gè)Mysite文件夾中的HTML文件。4、在網(wǎng)頁的合適位置上插入圖片t4_1.gif,t4-2.gif,t4-3.gif。5、在網(wǎng)頁的底部區(qū)域插入圖片wyfy.jpg,并為該圖片建立電子郵件鏈接；6、預(yù)覽頁面效果后，修改保存網(wǎng)頁文件。操作步驟：先將要用到的圖片素材復(fù)制到Mysite文件夾里的images文件夾。1、新建一個(gè)網(wǎng)頁，并將新網(wǎng)頁取名為exa.htm,保存在Mysite文件夾中；在網(wǎng)頁編輯器窗口中，選擇“修改”-“頁面屬性”命令，在“頁面屬性”對話框中設(shè)置標(biāo)題為"應(yīng)用實(shí)例2”,背景圖片為bg0040.gi

11、f；2、在網(wǎng)頁的頂部區(qū)域合適的位置上輸入標(biāo)題文字“人生的伴侶.知識的源泉”，并選中這些文字。在屬性面板中，選擇格式中“標(biāo)題1”；3、在網(wǎng)頁的中部區(qū)域合適的位置插入光標(biāo)，選擇菜單“插入”一“圖像對象”一“導(dǎo)航條”命令，此時(shí)的網(wǎng)頁編輯窗口中，會彈出“插入導(dǎo)航條”對話框。在“項(xiàng)目名稱”文本框中設(shè)置第1個(gè)按鈕的名稱為a；在下面按鈕4個(gè)狀態(tài)的文本框中分別輸入images文件夾中的a1.gif,a2.gif,a3.gif,a4.gif4個(gè)文件的路徑和名稱；在“按下時(shí)，前往的URL”文本框中輸入該按鈕鏈接的對象名稱和路徑（因此實(shí)例站點(diǎn)中只有index.htm和exa2.htm兩個(gè)網(wǎng)頁文件，所以這里先填入in

12、dex.htm來看看效果）。選中“預(yù)先載入圖象”和“使用表格”選項(xiàng)；選擇“插入”下拉列表框中的水平方向設(shè)置導(dǎo)航條；間代螞國拆劃且到標(biāo)撬.無株題文檔777陰山山l?F?l,l,l,i,.,l.,1,11I-,l.,11.11,；,?4、點(diǎn)“插入導(dǎo)航條”對話框最上面的“+”后，重復(fù)步驟3,可設(shè)置其他5個(gè)按鈕（這里為簡便，后五個(gè)按鈕只對“狀態(tài)圖像”進(jìn)行設(shè)置，其他三種圖像不再設(shè)置了），設(shè)置完成后，效果如下：回代馬|圖拆分|囹圖十標(biāo)題：|無棕期文檔；、/眇。盹3。胤四人生的伴侶.知識的源泉I*源.激卷代才，他I*a±3一I”!5、在網(wǎng)頁合適的位置上插入3個(gè)用于圖片定位的層，并在不同的層中插入i

13、mages文件夾中的圖片文件tu1.gif,tu2.gif,tu3.gif;6、在網(wǎng)頁的底部區(qū)域插入帶圖片wyfy.jpg的層，選中圖片，在圖片“屬性”面板的“鏈接”文本框中，輸入mailto:+EMAIL地址，建立電子郵件鏈接；7、保存并預(yù)覽網(wǎng)頁，調(diào)整各方面屬性及位置直至滿意。最終效果如下：在預(yù)覽中嘗試點(diǎn)擊“科學(xué)技術(shù)”按鈕和“我要發(fā)言”圖片。QQf2D0(lt>Ofl0四、制作實(shí)例3:用表格布局定位應(yīng)用實(shí)例要求:頁面效果(1)創(chuàng)建新網(wǎng)頁名稱為shu.htm,網(wǎng)頁的背景圖片為本bg0040.gif,網(wǎng)頁文件保存在Mysite文件夾中.(2)在網(wǎng)頁中插入7行6列的表格，按照頁面效果對網(wǎng)頁中

14、單元格進(jìn)行合并調(diào)整，在表格上方合適位置的單元格里插入Flash文件shu.swt,在表格左邊合適位置的單元格里分別插入圖片文件t5-1.gif,t5-3.gif,t5-4.gif,t5-6.gif.每個(gè)圖片與Mysite文件夾中的一個(gè)HTML文件或某一外部網(wǎng)站建立超鏈接，被鏈接的HTML文件在新窗口中打開，在表格右邊合適位置的單元格中，插入逐幀動(dòng)畫文件shu-1.gif.(3)預(yù)覽頁面效果后，保存網(wǎng)頁文件.操作步驟:(1)新建一個(gè)頁面，選擇修改“頁面屬性命令，在頁面屬性對話框中設(shè)置背景圖片為bg0040.gif,并將網(wǎng)頁取名為shu.htm保存在Mysite文件夾中.(2)“插入”一“表格”，

15、在彈出的“表格”對話框中設(shè)置7行6歹U,表格寬度設(shè)為800像素，然后確定，則網(wǎng)頁中插入了一個(gè)7行6列的表格。人生的伴侶.知識的源泉幫辱就未4泳苗術(shù)瓶代X聾女也敬才交魯*他考黑條時(shí)表格zl表格大小行數(shù)：ff列教：!6像素用田表格寬度：像素邊框粗細(xì)二口單元格邊距：r單元格間距：廠頁眉兩者輔助功能標(biāo)題對齊標(biāo)題摘要幫助確定要消(3)選定第一行，然后點(diǎn)右鍵，在菜單中選“表格”一“合并單元格”；選定第五列的三、四、五行，然后點(diǎn)右鍵，在菜單中選“表格”一“合并單元格”；(4)在表格中的第一行單元格中插入光標(biāo)，選擇菜單中“插入”一“媒體”一"Flash”,此時(shí)可在表格頂部的單元格中，插入Flash文

16、件shu.swfoM代碼|為拆分.刃役計(jì)岳建：無標(biāo)教檔1野山皿上叱mJ球,n因由J密I®BCD"mF""J73J，F(xiàn)3'.'二二："!：".'二：”：“：”.WJ.'：".'，：；.'：8,'.'"：.','/之：/打：E：L'J，HGOO'SdS：-若希望動(dòng)畫是透明的，則在屬性中將“參數(shù)”設(shè)置入下圖:(5)在表格的第三行第二列、第四行第三列、第五行第二列、第六行第三列和第三行第五列的單元格中中分別插入光標(biāo),插入圖像文件

17、shu1.gif,shu3.gif,shu5.gif,shu6.gif,shu-1.gifo將圖像shu1.gif鏈接到exa.html頁面（在下面圖像shu1.gif的屬性面板中"鏈接"項(xiàng)填入“exa.html”），將圖像shu5.gif鏈接到一個(gè)外部的網(wǎng)站（比如鏈接到百度，在屬性“鏈接“項(xiàng)中填入）。按F12鍵預(yù)覽頁面后，保存文件。下面是預(yù)覽效果圖：五、制作實(shí)例4:框架集的使用要求:頁面效果操作步驟：1、新建站點(diǎn)名為“框架集應(yīng)用”的站點(diǎn)；2、 “文件”-“新建”-選“框架集”-選“左側(cè)固定”-“創(chuàng)建”，然后在彈出的“框架標(biāo)簽輔助功能屬性”對話框中按“確定”新建文省ZJ富視

18、I模極I類別：框架集:基本貢動(dòng)意頁模板頁其他css樣式表框架集頁面設(shè)計(jì)OCSS）入門頁面頁面設(shè)計(jì)（有輔助功能的）上方固定上方固定，下方固定上方固定.右側(cè)嵌套上萬固定,左側(cè)嵌套下方固定下方固定，右側(cè)嵌套下方固定左側(cè)嵌套方fW固定右側(cè)固定，上方嵌套右側(cè)固定下方嵌套垂直拆分通覽：左冽固定左惻固定,上方嵌套左側(cè)固定，下方嵌套水平拆分描述：用大小固定的左制棚架垂直拆分的椎架頁a文檔類型CDTD）；XKIML1.0Transitional獲取更多內(nèi)容一.，3、 “文件”-“保存全部”：將框架集頁面保存為index.htm,左側(cè)框架頁面保存為leftFrame.htm,右側(cè)框架頁面保存為rightFrame

19、.htm。4、在下面屬性窗口中按如下進(jìn)彳T設(shè)置，然后保存并按F12預(yù)覽;廊展3邊檐顏色口岸而一邊框?qū)挾?5*4值單位_列眸像索三J霆范圍5、這里補(bǔ)充一點(diǎn)：建立了框架集頁面之后，任何時(shí)候，在菜單“窗口”中選中“框架”在右下側(cè)會出現(xiàn)“框架”窗口，點(diǎn)擊里面不同部分則可激活相應(yīng)的框架頁面；aiT4ltMCWT!1:）站點(diǎn)窗口理）然助俎）3C3r插入d)Ctrl+F2d屬性(t)Ctrl+F31111!FC£S樣式也1Shift+Fll層F2。行為更)Shifts1“數(shù)據(jù)庫色)Ctrl+ShifHFlO綁定QS)Ctrl+FlO服務(wù)器行為)CU1+F9組件)Ctrim。文件電）FB資源如FU代

20、碼片斷如Shifts4標(biāo)簽檢查器建）P9結(jié)果P7參考圖）ShiftfFl歷史記錄Shift+FlO/推架幽）Shifts代碼檢查器也）F106、接下來，在左側(cè)框架頁面中用表格定位的方法插入三個(gè)豎排的圖片作為導(dǎo)航按鈕，效果如下：le£+.?rim.tutmlWM代碼|圖抵分|屆設(shè)計(jì)標(biāo)提TTPT3-Tm-；Ek-；：IIilililJIIIII1LkliEEKIId-><>.>>_aS.ddd>k,1.ddd>linl.dddLI1*IL30*17、新建一個(gè)基本頁面，在頁面里輸入“科學(xué)技術(shù)”，保存頁面為kxjs.htm;C：VDocumentsa

21、ndhtml提示：在以后需要修改框架各部分頁面尺寸時(shí)，如果找不到框架邊框，可通過“菜單”一“查看”-“可視化助理”-選中“框架邊框”，即可使框架邊框顯示。8、在mainFrame.htm頁面中，鼠標(biāo)點(diǎn)中“科學(xué)技術(shù)”圖片，在下面的圖片屬性中設(shè)置其鏈接屬性如下：標(biāo)題：|無標(biāo)題文檔9、保存并預(yù)覽，在預(yù)覽頁面中，點(diǎn)擊左側(cè)的“科學(xué)技術(shù)”圖片，可見到右側(cè)的框架頁中顯示（如下圖效果）。G部,。回囹心戶搜索收儂ekxjs.htm頁面會在5代螞|*拆分a設(shè)過_."顯性,圖鼠器寬而源文伴小口川.排金二）替叫二j類。醫(yī)三闔30微維gji.btiA巴屈您|仙西|紐篁.地用看直睡目標(biāo)固宓k£|磔帽:

22、丁隹置置W二|0|里|水平迦e除慚度源爐廠爭口對齊闞屈5六、其他一些應(yīng)用1、插入聲音：例如插入MP3(1)在右邊“標(biāo)簽”窗口中點(diǎn)“行為”-“+”-"播放聲音CSS建出借題恢復(fù)交換圖像打開瀏覽器窗口推動(dòng)層片制Shockwave或Flash改變腐性時(shí)間軸(2)打開對話框中選擇要插入的MP3文件后確定:(3)打開“代碼”編輯窗口，將HTML代碼中的自動(dòng)播放控制由“false”改為“true”:標(biāo)題無標(biāo)題文檔.,5>34567890123-456789012345678901211111111112222222222333<head><>etahttp-equi

23、Cont©ntTyp®coutenttext/html;char竄3t=g:b23l2"/><titS沃標(biāo)文檔</title><scripttype="text/JavaScript1V>function0_conrtrolSoundx,varifmethod=sndObjif(sndObj!=null)(navigat-sr.appName_sndObjjsndFile)=evalCsndObj);1Netscap8n)method="play"if(window+m_VMP=null)window.O_WP=falserfor(iinsndObj)if(i=,ActiveMavie")windowiMM_OP=true；breat.1if(window*MM_WMF)method="play&quo