Dreamweaver靜態(tài)網(wǎng)制作過程_第1頁(yè)
Dreamweaver靜態(tài)網(wǎng)制作過程_第2頁(yè)
Dreamweaver靜態(tài)網(wǎng)制作過程_第3頁(yè)
Dreamweaver靜態(tài)網(wǎng)制作過程_第4頁(yè)
Dreamweaver靜態(tài)網(wǎng)制作過程_第5頁(yè)
已閱讀5頁(yè)，還剩35頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

Dreamweaver靜態(tài)網(wǎng)頁(yè)制作一、FTP的使用（文件傳輸）1、直接通過瀏覽器的方法來實(shí)現(xiàn)輸入賬號(hào)、密碼登錄到FTP服務(wù)器上，然后即可用復(fù)制的方法將文件復(fù)制到FTP服務(wù)器上。2、使用相應(yīng)的應(yīng)用軟件來實(shí)現(xiàn)如：CuteFTPLeapFTP來實(shí)現(xiàn)二、檢驗(yàn)網(wǎng)頁(yè)的方法方法一：2、輸入賬號(hào)、密碼以及其它的相關(guān)信息3、申請(qǐng)完成之后，可以用IP、賬號(hào)、密碼來登錄到服務(wù)器，將本Dreamweaver靜態(tài)網(wǎng)頁(yè)制作(續(xù))Dreamweaver靜態(tài)網(wǎng)頁(yè)制作(續(xù))三、基本操作1、編緝文本1）添加文本的方法是一種是直接在文檔窗口中鍵入文本內(nèi)容，另一種是在文檔窗口中，將插入點(diǎn)設(shè)置到要放置文本的地方，打開Edit下拉菜單，將文本導(dǎo)入。2）編緝文本（大小、顏色、字體、樣式）可以直接通過屬性面板來實(shí)現(xiàn)或通過選擇“文本字體”來設(shè)置2、超鏈接創(chuàng)建超鏈接最常見的做法是將超鏈接信息設(shè)置在文本及圖像上。使其鏈接至其它的網(wǎng)頁(yè)或網(wǎng)站上。源端點(diǎn)和目標(biāo)端點(diǎn)目標(biāo)端點(diǎn)有：圖片、電子郵件地址、多媒體文件、程序（如：javascript:window.close()關(guān)閉當(dāng)前窗口javascript:windows.print()打印文檔1）鏈接的類型Dreamweaver靜態(tài)網(wǎng)頁(yè)制作(續(xù))內(nèi)部鏈接：在同一網(wǎng)站文檔之間的鏈接外部鏈接：在不同網(wǎng)站文檔之間的鏈接錨點(diǎn)鏈接：同一網(wǎng)頁(yè)或不同網(wǎng)頁(yè)的指定位置的鏈接；E-mail鏈接：打開填寫電子郵件表格的鏈接；2）文檔的路徑（URL）相對(duì)路徑：絕對(duì)路徑：完整的URL（基于目錄的路徑）：從根目錄出發(fā)3）鏈接的方法在屬性面板中可以直接使用可以選擇被鏈接文檔的載入位置_blank：新的未命名的瀏覽器窗口中；_parent：父框架集或包含該鏈接的框架窗口中；_self：相同的窗口中（是無需指定的）_top：整個(gè)瀏覽器窗口并刪除所有框架；可以借助于樣式表來實(shí)現(xiàn)Dreamweaver靜態(tài)網(wǎng)頁(yè)制作(續(xù))3、文檔頁(yè)面的整體設(shè)置a)Title（標(biāo)題）在該文本框中，可以輸入文檔的頁(yè)面標(biāo)題，它實(shí)際上是輸入位于HTML頭部的<title>和</title>標(biāo)記之間的內(nèi)容，在瀏覽頁(yè)面時(shí)，會(huì)顯示在瀏覽器的標(biāo)題欄上。b)BackgroundImage（背景圖像）在該文本框中，可以輸入希望用作HTML文檔的背景圖像的路徑和文件名稱，單擊“Browse”（瀏覽）按鈕，可以從磁盤上選擇圖像文件。這里不僅可以輸入本地圖像文件的路徑和文件名稱，也可以用URL的形式輸入其他位置的圖像名稱。實(shí)際上，這里設(shè)置的是<body>標(biāo)記的background屬性。c)Background（背景）在這里可以為文檔頁(yè)面指定背景顏色。實(shí)際上設(shè)置的是<body>標(biāo)記的bgcolor屬性。d)Text（文本）這里可以設(shè)置文檔頁(yè)面中文字的前景顏色，實(shí)際上設(shè)置的是<body>標(biāo)記的text屬性。e)Links（鏈接）這里可以設(shè)置文檔頁(yè)面中尚未訪問過的超級(jí)鏈接的文字顏色，實(shí)際上設(shè)置的是<body>標(biāo)記的link屬性。f)VisitedLinks（訪問過的鏈接）這里可以設(shè)置文檔頁(yè)面中已經(jīng)訪問過的超級(jí)鏈接的文字顏色，實(shí)際上設(shè)置的是<body>標(biāo)記的vlink屬性。Dreamweaver靜態(tài)網(wǎng)頁(yè)制作(續(xù))g)ActiveLinks（正在訪問的鏈接）這里可以設(shè)置文檔頁(yè)面中正在訪問的超級(jí)鏈接的文字顏色，實(shí)際上設(shè)置的是<body>標(biāo)記的alink屬性。h)LeftMargin（左邊距）、TopMargin（上邊距）、MarginWidth（頁(yè)邊寬度）和MarginHeight（頁(yè)邊高度）在這些文本框中，可以設(shè)置頁(yè)面文字同頁(yè)面邊緣的間距。實(shí)際上分別設(shè)置的是<body>標(biāo)記的leftmargin、topmargin、marginwidth和marginheight屬性。但要注意，Netscape可以識(shí)別這些屬性，但是InternetExplorer不識(shí)別它們，因此不建議使用它們。i)DocumentEncoding（文檔解碼方式）在該列表框中，可以選擇當(dāng)前文檔頁(yè)面的文字解碼方式，對(duì)于大陸使用的中文網(wǎng)頁(yè)，應(yīng)該選擇“SimplifiedChinese（GB2312）”。如果這里沒有需要的解碼方式，可以從列表中選擇“Other”，這種情況下，頁(yè)面會(huì)使用瀏覽器運(yùn)行環(huán)境的解碼方式。j)TracingImage（草稿圖）在該文本框中，可以指定一幅圖像作為網(wǎng)頁(yè)創(chuàng)作時(shí)的草稿圖，它顯示在文檔的背景上，便于在網(wǎng)頁(yè)創(chuàng)作時(shí)進(jìn)行定位和安放對(duì)象。在實(shí)際生成網(wǎng)頁(yè)時(shí)，它并不顯示在網(wǎng)頁(yè)中，我們會(huì)在后面介紹其使用方法。k)Image（圖像）拖動(dòng)該滑塊，可以改變草稿圖的透明程度，使用適當(dāng)?shù)耐该鞒潭瓤梢员苊飧蓴_網(wǎng)頁(yè)的編輯。Dreamweaver靜態(tài)網(wǎng)頁(yè)制作(續(xù))4、圖像處理圖像和文本是網(wǎng)頁(yè)中最重要的兩種基本元素。主要有：jpeg、gif、png格式的圖像Jpg:是存儲(chǔ)照片或連續(xù)色調(diào)圖像的較好格式；Gif：存儲(chǔ)非連續(xù)色調(diào)圖象或顏色比較單一的圖象。最多支持256種色，可以以動(dòng)、靜態(tài)兩種方式出現(xiàn)。Png：擁有GIF的全部特性（如透明圖、GIF動(dòng)畫等），是一種很好的網(wǎng)上圖像文件格式。它避開了GIF的壓縮程序?qū)＠?，而且可以得到比GIF更好的壓縮比，可以用來代替GIF，是一種無損壓縮圖像，以后Internet的主要圖片格式（基于B/S模式）。所涉及到的圖像操作的主要有：a)在網(wǎng)頁(yè)中插入圖片（可利用菜單或?qū)ο竺姘鍋韺?shí)現(xiàn)）b)在網(wǎng)頁(yè)中插入一圖片，并作為背景（注意其中背景圖片的應(yīng)用技巧）；c)在網(wǎng)頁(yè)中某個(gè)位置插入一個(gè)交互圖像（舉例說明）Dreamweaver靜態(tài)網(wǎng)頁(yè)制作(續(xù))對(duì)象面板標(biāo)準(zhǔn)頁(yè)插入鼠標(biāo)經(jīng)過時(shí)的圖像即可d)插入導(dǎo)航欄：“插入”“交互式圖像”導(dǎo)航欄5、表格處理是頁(yè)面布局極為有用的工具。往往用表格來定位頁(yè)面元素。a)添加表格b)表格屬性的設(shè)置c)對(duì)表格進(jìn)行編緝包括插入行/列，刪除行/列，在表格中插入表格d)單元格屬性的設(shè)置e)對(duì)單元格進(jìn)行編緝注：在Dreamweaver中，對(duì)于表格的設(shè)置，可以通過屬性面板來控制和設(shè)置Dreamweaver靜態(tài)網(wǎng)頁(yè)制作(續(xù))Dreamweaver靜態(tài)網(wǎng)頁(yè)制作(續(xù))注：是版式中分隔式三、層(layer)可以放置在頁(yè)面的任意位置。把頁(yè)面元素放入層中可以控制哪些元素顯示，哪些隱藏，哪些顯示在前面，哪些顯示在后面。層可以包含文本、圖像、表單、、插件、甚至層內(nèi)還可以包含其它層。甚至我們還可以將一個(gè)網(wǎng)頁(yè)放入一個(gè)層內(nèi)（需要一個(gè)附加的插件）1、層的新建a)插入層b)拖放層c)繪畫層d)畫多層2、層的屬性的設(shè)置通過屬性面板可以設(shè)置Dreamweaver靜態(tài)態(tài)網(wǎng)頁(yè)制作作(續(xù))包括：layerID、左左邊和頂邊邊距、寬度度和高度、、Z-索引引（編號(hào)較較大的層出出現(xiàn)在編號(hào)較小的的層的上面面）、可見見性、背景景圖像、背背景顏色、、溢出、剪剪切、src（顯示另一一個(gè)HTML文檔））3、層面板板在“窗口””“層面板板”,即可可打開和關(guān)關(guān)閉層面板板在層面板中中，層以堆堆疊的名稱稱列表的形形式顯示，，先建立的的層位于列列表的底部部，最后建立的的層位于列列表的上部部?？梢酝ㄟ^層層面板改變變層的可見見性以及層層的堆疊順順序Dreamweaver靜態(tài)態(tài)網(wǎng)頁(yè)制作作(續(xù))四、行為是一種事件件（Events)和動(dòng)作(Actions)的組合體體。動(dòng)作通通常由一段段落Javascript代碼所所組成，利利用這段代代碼可以完完成相應(yīng)的的任務(wù)，如如：打開瀏瀏覽器，播放聲音等等。（面象象對(duì)象程序序設(shè)計(jì)中的的，事件、、動(dòng)作、行行為等概念念）1、事件：：通常由瀏瀏覽器所定定義，它可可以被附加加到各種頁(yè)頁(yè)面元素上上。也可以以被附加到HTML標(biāo)記記中。如：鼠標(biāo)事事件一般有有以下幾種種Onmouseover:當(dāng)移動(dòng)到到鏈接點(diǎn)上上時(shí)的事件件；Onmouseout:當(dāng)當(dāng)移動(dòng)到鏈鏈接點(diǎn)之外外時(shí)發(fā)生的的鏈接的事事件；Onclick:指單擊擊鏈接點(diǎn)時(shí)發(fā)發(fā)生的鏈接事事件。2、行為：則則是事件和動(dòng)動(dòng)作的組合體。如：onclick行行為同一段javascript代代碼相關(guān)聯(lián)，，通常我們將將這個(gè)過程稱稱為觸發(fā)。3、添加行為為在“windows菜單單“下選擇””行為“項(xiàng)即即可。然后可以先選選擇動(dòng)作，再再選擇相應(yīng)的的事件。Dreamweaver靜態(tài)網(wǎng)頁(yè)制制作(續(xù))如果行為選不不中（灰色）），則從“顯顯示事件”中中選擇較高版版本的瀏覽器器，一般為IE5.0即即可。內(nèi)置的行為有有十多種，但但有時(shí)遠(yuǎn)不夠夠用，可以通通過增加插件件的方式來擴(kuò)擴(kuò)展功能如：1、在層內(nèi)顯顯示一個(gè)HTML文檔2、流文件格格式的播放；；3、自動(dòng)滾屏屏；4、自動(dòng)關(guān)閉閉窗口；5、彈出一個(gè)個(gè)窗口；6、實(shí)現(xiàn)自動(dòng)動(dòng)跟隨當(dāng)前屏屏幕；:::Dreamweaver靜態(tài)網(wǎng)頁(yè)制制作(續(xù))舉例：1、系統(tǒng)內(nèi)部部自帶的行為為。a.彈出信息息b.播放背景景音樂c.打開瀏覽覽器窗口2、利用Dreamweaver的的插件實(shí)現(xiàn)擴(kuò)擴(kuò)展功能。先安裝相應(yīng)的的插件a.在網(wǎng)頁(yè)中中插流媒體文文件b.自動(dòng)滾屏c.自動(dòng)關(guān)閉閉窗口d.實(shí)現(xiàn)自動(dòng)動(dòng)跟隨當(dāng)前屏屏幕Dreamweaver靜態(tài)網(wǎng)頁(yè)制制作(續(xù))設(shè)計(jì)一個(gè)Web站點(diǎn)的基基本步驟：1、對(duì)WEB站點(diǎn)進(jìn)行規(guī)規(guī)劃1）確定網(wǎng)站站的主題和內(nèi)內(nèi)容；網(wǎng)站的主題就就是你建立的的網(wǎng)站所要包包含的主要內(nèi)內(nèi)容，一個(gè)網(wǎng)網(wǎng)站必須要有有一個(gè)明確的主題，特特別是個(gè)人網(wǎng)網(wǎng)站，因?yàn)椴徊豢赡芟窬C合合網(wǎng)站那樣做做得內(nèi)容大而而全，所以必須找準(zhǔn)一一個(gè)自己最感感興趣的內(nèi)容容，做深、做做透、辦出自自己的特色，，這樣才能給用戶留下下深刻的印象象，主題要明明確，在主題題范圍內(nèi)做到到大而全、精精而深。網(wǎng)站內(nèi)容的組組織（1）選擇力力求專業(yè)化；；（主要是面面向誰(shuí)的問題題）（2）網(wǎng)頁(yè)內(nèi)內(nèi)容的變化性性；（3）網(wǎng)站內(nèi)內(nèi)容設(shè)計(jì)者的的愛好；（4））網(wǎng)站站欄目目的安安排Dreamweaver靜態(tài)態(tài)網(wǎng)頁(yè)頁(yè)制作作(續(xù)續(xù))a.要要緊扣扣主題題；b.設(shè)設(shè)立最最近更更新或或網(wǎng)站站指南南欄目目；c.設(shè)設(shè)立可可以雙雙向交交流的的欄目目，如如論壇壇、BBS、郵郵件列列表等等d.設(shè)設(shè)立要要下載載或常常見問問題的的欄目目。（（從而而做到到信息息資源源的共共享））名稱要要正、、名稱稱要易易記、、名稱稱要有有特色色。注：部部分人人把此此部分分以下下的幾幾點(diǎn)歸歸納為為規(guī)劃劃網(wǎng)站站，主主要包包括網(wǎng)網(wǎng)站的結(jié)結(jié)構(gòu)、、欄目目的設(shè)設(shè)置、、網(wǎng)站站的風(fēng)風(fēng)格、、顏色色搭配配、版版面布布局、、文字圖片片的運(yùn)運(yùn)用等等。Dreamweaver靜靜態(tài)態(tài)網(wǎng)網(wǎng)頁(yè)頁(yè)制制作作(續(xù)續(xù))2））確確定定網(wǎng)網(wǎng)站站的的結(jié)結(jié)構(gòu)構(gòu)；；（（主主要要有有線線性性結(jié)結(jié)構(gòu)構(gòu)、、層層次次結(jié)結(jié)構(gòu)構(gòu)和和復(fù)復(fù)合合性性結(jié)結(jié)構(gòu)構(gòu)（（樹樹型型結(jié)結(jié)構(gòu)構(gòu)為為主主））3））確確定定網(wǎng)網(wǎng)站站的的風(fēng)風(fēng)格格；；（（版版面面和和色色彩彩））可以以采采用用幾幾各各種種配配色色方方案案，，然然后后再再根根據(jù)據(jù)配配色色方方案案進(jìn)進(jìn)行行選選擇擇。。第一一分分頁(yè)頁(yè)第一分分頁(yè)第一分分頁(yè)主頁(yè)Dreamweaver靜態(tài)態(tài)網(wǎng)頁(yè)頁(yè)制作作(續(xù)續(xù))4）確確定網(wǎng)網(wǎng)站頁(yè)頁(yè)面的的版式式；整版式式（全全文字字型、、圖文文混排排型、、純圖圖形式式）、、部分分留空空式、、分隔式、、原則：：（1））協(xié)調(diào)調(diào)（2））對(duì)比比（對(duì)對(duì)照））；（3））對(duì)稱稱；（4））平衡衡；（5））比例例；（6））節(jié)奏奏（顏顏色的的躍進(jìn)進(jìn)方式式等））2、準(zhǔn)準(zhǔn)備素素材（（力求求全，，但必必須要要與主主題相相符））基礎(chǔ)元元素：：文本本、圖圖片、、按鈕鈕、動(dòng)動(dòng)畫、、表格格、聲聲音的的組合合1）存存儲(chǔ)介介質(zhì)（（如光光盤、、圖書書、報(bào)報(bào)紙、、多媒媒體上上等））2）網(wǎng)上資源源（從Internet下載相應(yīng)的的資源）Dreamweaver靜態(tài)網(wǎng)頁(yè)制制作(續(xù))3）自已動(dòng)手手設(shè)計(jì)（最主主要的一種形形式，其特點(diǎn)點(diǎn)是比較靈活活，不受網(wǎng)站站其它因素的的制約）在收集材料后后進(jìn)行去偽取取精、去偽存存真，然后有有步驟的對(duì)素素材進(jìn)行整理理，作為自己制作網(wǎng)頁(yè)頁(yè)的素材。網(wǎng)頁(yè)素材參考考網(wǎng)站:1林林小筑：2網(wǎng)頁(yè)素材精品品屋；3中華圖王：4動(dòng)畫制作：Dreamweaver靜態(tài)網(wǎng)頁(yè)制制作(續(xù))3、創(chuàng)建站點(diǎn)點(diǎn)和網(wǎng)頁(yè)包括選擇合適適的制作工具具站點(diǎn)就是由很多鏈鏈接在一起的的網(wǎng)頁(yè)組合在在一起的整體體。在材料和工具具有了之后，，就需要一步步步把自己的的想法變成現(xiàn)現(xiàn)實(shí)，一定要要按照先大后小、先先簡(jiǎn)單后復(fù)雜雜進(jìn)行制作。。所謂先大后后小，就是說說在制作網(wǎng)頁(yè)頁(yè)時(shí)，先把大的結(jié)構(gòu)設(shè)設(shè)計(jì)好，然后后再逐步完善善小的結(jié)構(gòu)設(shè)設(shè)計(jì)。所謂先先簡(jiǎn)單后復(fù)雜雜，就是先設(shè)設(shè)計(jì)計(jì)出出簡(jiǎn)簡(jiǎn)單單的的內(nèi)內(nèi)容容，，然然后后再再設(shè)設(shè)計(jì)計(jì)復(fù)復(fù)雜雜的的內(nèi)內(nèi)容容，，以以便便出出現(xiàn)現(xiàn)問問題題時(shí)時(shí)好好修修改改。。/4、、測(cè)測(cè)試試1））文文字字、、圖圖片片的的測(cè)測(cè)試試；；2））版版面面布布局局的的調(diào)調(diào)整整；；3））超超鏈鏈接接的的測(cè)測(cè)試試；；4））是是否否與與預(yù)預(yù)期期限限效效果果一一致致；；Dreamweaver靜靜態(tài)態(tài)網(wǎng)網(wǎng)頁(yè)頁(yè)制制作作(續(xù)續(xù))5、、網(wǎng)網(wǎng)站站的的發(fā)發(fā)布布和和宣宣傳傳文件件的的上上傳傳可可以以用用CuteFTP（（Leapftp））文文件件傳傳工工具具來來實(shí)實(shí)現(xiàn)現(xiàn)；；推廣廣的的方方法法有有：：到到搜搜索索引引擎擎上上注注冊(cè)冊(cè)、、與與別別的的網(wǎng)網(wǎng)站站交交換換鏈鏈接接、、加加入入廣廣告告鏈鏈等等。。6、、網(wǎng)網(wǎng)站站的的維維護(hù)護(hù)與與更更新新網(wǎng)站站要要注注意意經(jīng)經(jīng)常常維維護(hù)護(hù)更更新新內(nèi)內(nèi)容容，，保保持持內(nèi)內(nèi)容容的的新新鮮鮮，，不不要要一一做做好好就就放放在在那那兒兒不不變變了，只有有不斷地地給它補(bǔ)補(bǔ)充新的的內(nèi)容，，才能夠夠吸引住住瀏覽者者。Dreamweaver靜態(tài)態(tài)網(wǎng)頁(yè)制制作(續(xù)續(xù))Dreamweaver靜態(tài)態(tài)網(wǎng)頁(yè)制制作(續(xù)續(xù))步驟：1）下載載原始文文件（圖圖片、動(dòng)動(dòng)畫、樣樣式表等等）2）規(guī)劃劃網(wǎng)站（（分析））a.主題題：以廣廣東教育育學(xué)院的的教學(xué)、、科研和和管理為為中心，，以各部部門、各各系的部部門網(wǎng)頁(yè)為核核心而展展開；b.內(nèi)容容：包括括有教學(xué)學(xué)、科研研、管理理、宣傳傳等互動(dòng)動(dòng)信息；；c.網(wǎng)站站的結(jié)構(gòu)構(gòu)：樹狀狀結(jié)構(gòu)；；d.網(wǎng)頁(yè)頁(yè)的版式式：是采采用分隔隔式（主主體是三三大塊）），也是是上（標(biāo)標(biāo)題）、、左（導(dǎo)導(dǎo)航）、、右（主主體）三三大部分分，本網(wǎng)網(wǎng)頁(yè)采用用層的技技術(shù)來實(shí)實(shí)現(xiàn)全部部網(wǎng)頁(yè)。。注意：在在本網(wǎng)頁(yè)頁(yè)中，采采用了層層的相關(guān)關(guān)技術(shù)，，如，層層的按順順序疊加加技術(shù)。。3）創(chuàng)創(chuàng)建站站點(diǎn)和和網(wǎng)頁(yè)頁(yè)Dreamweaver靜態(tài)態(tài)網(wǎng)頁(yè)頁(yè)制作作(續(xù)續(xù))a.通通過““站點(diǎn)點(diǎn)”“創(chuàng)創(chuàng)建站站點(diǎn)””來創(chuàng)創(chuàng)建一一個(gè)站站點(diǎn)；；b.新新建一一個(gè)網(wǎng)網(wǎng)頁(yè)文文件，，先設(shè)設(shè)置網(wǎng)網(wǎng)頁(yè)背背景顏顏色為為#73A9CA，通通過““頁(yè)面面屬性性”來來設(shè)置；；c.在在頁(yè)面面中添添加一一個(gè)新新的層層，可可以通通過對(duì)對(duì)象面面板來來實(shí)現(xiàn)現(xiàn)，也也可以以通過過插入入菜單單的“層層”來來實(shí)現(xiàn)現(xiàn)，設(shè)設(shè)置層層的左左、上上邊距距為0;然然后在在層中中插入入1-1.gif的的圖片片文件件；d.再再新建建一層層，設(shè)設(shè)置左左上邊邊距分分別為為：20、、7；；然后后在層層中插插入圖圖xf.gif的文文件；；再新建建一層層，設(shè)設(shè)置左左上邊邊距分分別為為：500、7;然然后在在當(dāng)前前層中中插入入圖1-2.gif的文件；；e.新新建一一層，，左上上邊距距為：：690、、72;插插入圖圖back1.giff.新新建一一層，，左上上邊距距為：：621、、75,寬寬高為為：137、219像素素；分分別在在層內(nèi)內(nèi)添加加相應(yīng)的的文本本內(nèi)容容，并并對(duì)文文本的的格式式進(jìn)行行相關(guān)關(guān)的設(shè)設(shè)置；；Dreamweaver靜態(tài)態(tài)網(wǎng)頁(yè)頁(yè)制作作(續(xù)續(xù))g.新新建一一層，，左上上邊距距為：：2、、420;并在在層內(nèi)內(nèi)添加加相應(yīng)應(yīng)的文文本內(nèi)內(nèi)容；；h.新建建一層，，左上邊邊距為：：10、、118；設(shè)置置層的名名稱為news;寬高高為：465、、236；；i.新建建層，左左上邊距距為：0、70;寬高高為：77、30像素素，在層層內(nèi)添加加鼠標(biāo)交交互圖片，原始始圖片為為：title-1.gif，鼠標(biāo)標(biāo)經(jīng)過圖圖片為：：title-2.gifj.新建建層，左左上邊距距為：79、70;寬寬高為：：77、、30像像素，在在層內(nèi)添添加鼠標(biāo)標(biāo)交互圖片，原原始圖片片為：title-3.gif，鼠鼠標(biāo)經(jīng)過過圖片為為：title-4.gifk.選中中第一層層，打開開行為面面板，占占擊“+”事情情按鈕，，從中選選擇“顯顯示-隱隱藏層””菜單項(xiàng)（注注：若不不能選中中，則打打開“顯顯示事件件項(xiàng)”，，從中選選擇“IE5.0”，，即可）），然后分別別設(shè)置各各層的顯顯示以及及隱藏的的屬性即即可。l.然后后設(shè)置鼠鼠標(biāo)事件件，設(shè)置置為OnMouseOver.m.打開開行為面面板，從從中選擇擇MFX-MFXURLintoLayer,即即可對(duì)當(dāng)當(dāng)前的層層中設(shè)置置一個(gè)嵌入入式的HTML文件的的顯示；；Dreamweaver靜態(tài)態(tài)網(wǎng)頁(yè)制制作(續(xù)續(xù))n.若要要在瀏覽覽器打開開的同時(shí)時(shí)，即觸觸發(fā)OnLoad事件件的時(shí)候候，需要要打開另另一個(gè)窗窗口，則可可以設(shè)置置另一個(gè)個(gè)打?yàn)g覽覽器窗口口事件。。o.在網(wǎng)網(wǎng)頁(yè)做好好后，將將之保存存為index.htm，若若是動(dòng)態(tài)態(tài)網(wǎng)頁(yè)，，則根據(jù)據(jù)不同的的前臺(tái)環(huán)境保存存不同的的文件名名，如index.aspindex.phpindex.php3index.jsp等；；4)測(cè)試試網(wǎng)頁(yè)對(duì)網(wǎng)頁(yè)的的制作過過程中的的步驟及及文字和和圖片內(nèi)內(nèi)容，以以及鏈接接的目標(biāo)標(biāo)地址作作相應(yīng)的檢查，，是否有有錯(cuò)誤或或需要改改進(jìn)的地地方。5）上傳傳和發(fā)布布利用相應(yīng)應(yīng)的文件件傳輸工工具來實(shí)實(shí)現(xiàn)網(wǎng)頁(yè)頁(yè)的傳輸輸，將之之上傳至至相應(yīng)的的WEB服務(wù)器器上。6）網(wǎng)頁(yè)頁(yè)的維護(hù)護(hù)和更新新網(wǎng)站需要要不斷的的進(jìn)行更更新。每每一次的的更新均均需上傳傳至WEB服務(wù)務(wù)器上。。Dreamweaver靜態(tài)態(tài)網(wǎng)頁(yè)制制作(續(xù)續(xù))HTML代碼的的基本格格式如下下：<html><head><title>無標(biāo)題題文檔</title><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"></head><body>…</body></html>Dreamweaver靜態(tài)態(tài)網(wǎng)頁(yè)制制作(續(xù)續(xù))五、樣式式表（CSS））層疊式模模式表（（CascadingStyleSheet),可可以對(duì)網(wǎng)網(wǎng)頁(yè)中的的文本內(nèi)內(nèi)容，按按照用戶戶期望的的形式進(jìn)行行精確的的控制。。不僅可以以控制單單個(gè)網(wǎng)頁(yè)頁(yè)中的文文本格式式，還可可以采用用外部樣樣式表的的方式控控制多個(gè)個(gè)網(wǎng)頁(yè)中中的文本格格式。樣式是控控制網(wǎng)頁(yè)頁(yè)文本外外觀的一一組格式式屬性，，其英文文為style.如：<styletype="text/css"media="screen">body{scrollbar-face-color:#CCCCCC;scrollbar-shadow-color:#000000;scrollbar-highlight-color:#000000;scrollbar-3dlight-color:#6699CC;scrollbar-darkshadow-color:#6699CC;scrollbar-track-color:#CCCCCC;scrollbar-arrow-color:#6699CC;}A:link{FONT-SIZE:9pt;TEXT-DECORATION:none}A:visited{FONT-SIZE:9pt;TEXT-DECORATION:none}A:active{FONT-SIZE:9pt;TEXT-DECORATION:none}A:hover{FONT-SIZE:9pt;TEXT-DECORATION:none;position:relative;left:1px;top:1px;clip:rect()}Dreamweaver靜態(tài)態(tài)網(wǎng)頁(yè)制制作(續(xù)續(xù))</style>以上為一一內(nèi)部樣樣式表，，一般放放在</head>之之前，中中間用<style>…</style>來進(jìn)行標(biāo)標(biāo)記注：標(biāo)記記選擇器器的正確確使用以上是內(nèi)內(nèi)部樣式式表，如如果將以以上代碼碼放入一一個(gè)文件件，并保保存為*.css文件件，即可作為外外部樣式式表文件件使用。。如：Model.css在文檔窗窗口點(diǎn)擊擊右鍵，，然后選選擇CSS樣式式附加樣樣式表即即可添加加外部樣樣式表文件。Dreamweaver靜態(tài)態(tài)網(wǎng)頁(yè)制制作(續(xù)續(xù))實(shí)例2利用網(wǎng)頁(yè)頁(yè)模板來來做網(wǎng)頁(yè)頁(yè)下載相應(yīng)應(yīng)的模板板在此模板板中,可可以選擇擇適合自自己的模模板,然然后修改改相應(yīng)的的內(nèi)容,即可.自己也可可以動(dòng)手手制作模模板,可可以在以以后去適適當(dāng)?shù)难醒芯磕０?是是一種用用來產(chǎn)生生固定特特征和共共同格式式的文檔檔基礎(chǔ),是用戶戶進(jìn)行批批量生產(chǎn)產(chǎn)文檔的起點(diǎn)點(diǎn).Dreamweaver靜靜態(tài)態(tài)網(wǎng)網(wǎng)頁(yè)頁(yè)制制作作(續(xù)續(xù))2、、《《東東方方文文學(xué)學(xué)》》網(wǎng)網(wǎng)絡(luò)絡(luò)課課件件的的制制作作的的步步驟驟：：1)……2)……3)創(chuàng)創(chuàng)建建站站點(diǎn)點(diǎn)和和網(wǎng)網(wǎng)頁(yè)頁(yè)a.通通過過對(duì)對(duì)象象面面板板創(chuàng)創(chuàng)建建一一個(gè)個(gè)框框架架，，框框架架的的結(jié)結(jié)構(gòu)構(gòu)為為上上、、左左、、右右三三部部分分組組成成；；b.設(shè)設(shè)置置上上框框架架的的屬屬性性：：行行值值為為：：115，，（（通通過過““框框架架””面面板板來來設(shè)設(shè)置置））c.設(shè)設(shè)置置left的的大大小小為為157像像素素；；d.新新建建一一表表格格，，在在top頁(yè)頁(yè)中中插插入入一一個(gè)個(gè)表表格格，，設(shè)設(shè)置置為為3行行1列列，，寬寬度度為為98%百百分分比比，，設(shè)置置第第一一行行的的高高度度為為78像像素素，，第第二二行行拆拆分分為為3列列（（““右右鍵鍵””-““表表格格””-““拆拆分分單單元元格格””），，第第三三行行的的高高度度不不設(shè)設(shè)置置；；e.在各各單元格格中插入入相應(yīng)的的圖片和和文字及及相應(yīng)的的效果，，第一行行中，image/heaD_r1_c1.gif………h(huán)ead_r1_c9.gif;f.第二二行中，，設(shè)置背背景顏色色為:#993399;分別別在各列列中輸入入文字，，時(shí)間及及文字；；g.第三三行中，，插入圖圖片：image/line1.gifDreamweaver靜態(tài)態(tài)網(wǎng)頁(yè)制制作(續(xù)續(xù))h.在left頁(yè)中，，插入一一二個(gè)表表格，其其中一個(gè)個(gè)為151*81大小小，另一一個(gè)為150*79大大小，第一一個(gè)表格格，三行行一行，，第一行行高度，，26象象素，插插入圖片片文件，，doaxue3.gif,第第二行中中，利用用在word中中插入特特殊符號(hào)號(hào)的方法法，來設(shè)設(shè)置顏色色第三行中中：其中中一個(gè)是是plus1.gif另一一個(gè)是blank2.gif，然后后在其中中輸入文文字內(nèi)容，其中中背景顏顏色為:#DFC8E1;i.第二二個(gè)表格格，插入入圖片：：title.gif,再插插入一個(gè)個(gè)下拉菜菜單，選選擇對(duì)象象面板中中的表單，然然后選擇擇“跳轉(zhuǎn)轉(zhuǎn)菜單””，即可可設(shè)置相相應(yīng)的URL；；然后再插插入相應(yīng)應(yīng)的文字字內(nèi)容以以及水平平線即可可；j.對(duì)于于主窗口口中，首首先，插插入一個(gè)個(gè)表格，，寬為79%,高為301像像素，設(shè)設(shè)置邊框框顏色為:#993399;k.在主主窗口中中插入表表格，8行，3列，其其中的第第8行拆拆分為5列，寬：99%高：378像素素邊框粗細(xì)細(xì)為：0，邊距距、間距距為：0；Dreamweaver靜態(tài)態(tài)網(wǎng)頁(yè)制制作(續(xù)續(xù))第一行：：21第二行：：21第三行：：28第四行：：16第五行：：19第六行：：226；第七行：：25第八行：：25第一列：：2%第二列：：95%第三列：：3%bk.插入入文字和和圖片第二行：：dingyi.gif第三行：：文字Dreamweaver靜態(tài)態(tài)網(wǎng)頁(yè)制制作(續(xù)續(xù))第五行：：line2.gif第六行：：文字、、對(duì)齊方方式、居居中；第八行：：pic027.gif，作作為背景景圖片；；對(duì)于左邊邊的導(dǎo)航航欄，制制作的方方法有：：利用一個(gè)個(gè)擴(kuò)展插插件來實(shí)實(shí)現(xiàn)，即即資源管管理器的的插件Dreamweaver靜態(tài)態(tài)網(wǎng)頁(yè)制制作(續(xù)續(xù))實(shí)例三、、計(jì)算機(jī)機(jī)系主頁(yè)頁(yè)1、規(guī)劃劃網(wǎng)頁(yè)精確地進(jìn)進(jìn)行規(guī)劃劃（版面面、顏色色、大小小等）2、制作作表格1）四個(gè)個(gè)大表格格1*11*21*41*12）分別別設(shè)置表表格的大

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論