窗體對象最主要的功能就是能夠直接訪問HTML文檔中的窗體，它封裝了相關的HTML代碼：

窗體對象的方法只有一個--submit()方法，該方法主要功用就是實現窗體信息的提交。如提交Mytest窗體，則使用下列格式：

document.mytest.submit()

第五章

色彩在網頁中的應用

6.1.3 窗體對象的屬性

窗體對象中的屬性主要包括以下：elements name action target encoding method。除Elements外，其它幾個均反映了窗體中標識中相應屬性的狀態，這通常是單個窗體標識；而elements常常是多個窗體元素值的數組，例：

elements[0].Mytable.elements[1] 6.1.4 訪問窗體對象

在JavaScript中訪問窗體對象可由兩種方法實現：（1）通過訪問窗體

在窗體對象的屬性中首先必須指定其窗體名，而后就可以通過下列標識訪問窗體如：document.Mytable()。

（2）通過數組來訪問窗體

除了使用窗體名來訪問窗體外，還可以使用窗體對象數組來訪問窗體對象。但需要注意一點，因窗體對象是由瀏覽器環境的提供的，而瀏覽器環境所提供的數組下標是由0到n。所以可通過下列格式實現窗體對象的訪問：

document.forms[0] document.forms[1] document.forms[2]...6.1.5 引用窗體的先決條件

在JavaScript中要對窗體引用的條件是：必須先在頁面中用標識創建窗體，并將定義窗體部分放在引用之前。

6.2 窗體中的基本元素

窗體中的基本元素由按鈕、單選按鈕、復選按鈕、提交按鈕、重置按鈕、文本框等組成。

在JavaScript中要訪問這些基本元素，必須通過對應特定的窗體元素的數組下標或窗體元素名來實現。每一個元素主要是通過該元素的屬性或方法來引用。其引用的基本格式見下：

formName.elements[].methadName(窗體名.元素名或數組.方法)formName.elemaent[].propertyName(窗體名.元素名或數組.屬性)下面分別介紹：

（1）Text單行單列輸入元素

功能：對Text標識中的元素實施有效的控制。基本屬性：

Name：設定提交信息時的信息名稱。對應于HTML文檔中的Name。Value：用以設定出現在窗口中對應HTML文檔中Value的信息。defaultvalue：包括Text元素的默認值 基本方法：

blur()：將當前焦點移到后臺。

第五章

色彩在網頁中的應用

select()：加亮文字。主要事件：

onFocus：當Text獲得焦點時，產生該事件。OnBlur：從元素失去焦點時，產生該事件。Onselect：當文字被加亮顯示后，產生該文件。onchange：當Text元素值改變時，產生該文件。例：

功能：實施對Textarea中的元素進行控制。基本屬性

name：設定提交信息時的信息名稱，對應HTML文檔Textarea的Name。Value：用以設定出現在窗口中對應HTML文檔中Value的信息。Default value：元素的默認值。方法：

blur()：將輸入焦點失去 select()：將文字加亮后 事件：

onBlur:當失去輸入焦點后產生該事件 onFocus:當輸入獲得焦點后，產生該文件 Onchange:當文字值改變時，產生該事件 Onselect:當文字加亮后，產生該文件（3）Select選擇元素

功能：實施對滾動選擇元素的控制。屬性：

name:設定提交信息時的信息名稱，對應文檔select中的name。Length:對應文檔select中的length options:組成多個選項的數組 selectIndex;該下標指明一個選項

select在中每一選項都含有以下屬性： Text:選項對應的文字

selected:指明當前選項是否被選中 Index:指明當前選項的位置 defaultselected:默認選項 事件：

第五章

色彩在網頁中的應用

OnBlur：當select選項失去焦點時，產生該文件。onFocas:當select獲得焦點時，產生該文件。Onchange:選項狀態改變后，產生該事件。（4）Button按鈕

功能：實施對Button按鈕的控制。屬性：

Name:設定提交信息時的信息名稱，對應文檔中button的Name。Value:用以設定出現在窗口中對應HTML文檔中Value的信息。方法：

click()該方法類似于一個按下的按鈕。事件：

onclick當單擊button按鈕時，產生該事件。例 ：

功能：實施對一個具有復選框中元素的控制。屬性：

name:設定提交信息時的信息名稱。

Value:用以設定出現在窗口中對應HTML文檔中Value的信息。Checked:該屬性指明框的狀態true/false.defauitchecked:默認狀態 方法：

click()該方法使得框的某一個項被選中。事件：

Onclick：當框的選被選中時，產生該事件。（6）radio無線按鈕

功能：實施對一個具單選功能的無線按鈕控制。屬性：

Name：設定提交信息時的信息名稱，對應HTML文檔中的radio的name相同 Value：用以設定出現在窗口中對應HTML文檔中Value的信息，對應HTML文檔中的radio的name。

length：單選按鈕中的按鈕數目。defalechecked:默認按鈕。

checked:指明選中還是沒有選中。

第五章

色彩在網頁中的應用

index:選中的按鈕的位置。方法：

chick():選定一個按鈕。事件：

onclick:單擊按鈕時，產生該事件。（7）hidden:隱藏

功能：實施對一個具有不顯示文字并能輸入字符的區域元素的控制。屬性：

name:設定提交信息時的信息名稱，對應HTML文檔的hidden中的Name。

Value:用以設定出現在窗口中對應HTML文檔中Value的信息，對應HTML文檔hidden中的value。

defaleitvalue:默認值（8）Password口令

功能：實施對具有口令輸入的元素的控制。屬性：

Name:設定提交信息時的信息名稱，對應HTML文檔中password中的name。Value:用以設定出現在窗口中對應HTML文檔中Value的信息，對應HTML文檔中password中的Value。

defaultvalu:默認值 方法：

select():加亮輸入口令域。

blur():使這丟失passward輸入焦點。focus():獲得password輸入焦點。（9）submit提交元素

功能：實施對一個具有提交功能按鈕的控制。屬性：

name:設定提交信息時的信息名稱，對應HTML文檔中submit。

Value:用以設定出現在窗口中對應HTML文檔中Value的信息，對應HTML文檔中value。

方法

click()相當于按下submit按鈕。事件：

onclick()當按下該按鈕時，產生該事件。

6.3窗體對象實例

下面我們演示通過點擊一個按鈕（red）來改變窗口顏色，點擊“調用動態按鈕文檔”調用一個動態按鈕文檔。

test8_1.htm 調用動態按鈕文檔

第二篇：網頁制作論文

網頁制作論文

簡介

網頁制作是網站策劃師、網絡程序員、網頁設計師等崗位，應用各種網絡程序開發技術和網頁設計技術，為企事業單位、公司或個人在全球互聯網上建設站點，并包含域名注冊和主機托管等服務的總稱。其作用為展現公司形象，加強客戶服務，完善網絡業務。網頁制作是企業開展電子商務的基礎設施和信息平臺，是INTERNET上宣傳和反映企業形象和文化的重要窗口。新競爭力也認為注重網站的網絡營銷價值而不是外在表現。網頁制作是指使用標識語言，通過一系列設計、建模、和執行的過程將電子格式的信息通過互聯網傳輸，瀏覽。

網頁制作要能充分吸引訪問者的注意力，讓訪問者產生視覺上的愉悅感。因此在網頁創作的時候就必須將網站的整體設計與網頁設計的相關原理緊密結合起來。網站設計是將策劃案中的內容、網站的主題模式，以及結合自己的認識通過藝術的手法表現出來。

目錄

1.網頁制作的兩種設計模式 2.網頁制作常用工具 3.flash 3.1flash簡介 3.2flash動畫的特點 3.3flash動畫的前景 3.4flash在網頁中的應用 3.5flash制作流程 4.fireworks

4.1fireworks簡介

4.2fireworks在網頁中的應用

4.3fireworks的重要性

4.4fireworks制作流程 5.參考文獻

正文

1.網頁制作的兩種設計模式

從前一般網頁都使用表格進行排版設計，這樣作的優點在于設計制作速度快，尤其在可視化網頁編輯器，如Microsoft FrontPage中，這樣設計顯得直觀而方便，然而這讓越來越復雜的版面需要許多不斷嵌套的表格設計，致使網頁代碼變得冗長復雜，使文件體積增大，且不容易被搜索引擎查找。同時，這樣做也不利于大型網站的改版工作。

于是隨著主流網頁瀏覽器對CSS的支援度提高，近年來興起了一種新的網頁設計模式。被業界稱為“網頁重構”的革命，其核心在于分隔網頁的風格和內容，指標記語言(如HTML,XML)負責定義頁面的內容，但不可以定義任何涉及網站外觀(風格)的東西。而網站風格就由另外的CSS檔案負責。在排版方面，新的模式提倡使用由CSS定義的DIV進行頁面排版，而將表格還原為排列數據的最初功能。這種模式有很多好處，例如可以協助搜尋引擎查找網頁的情況，減小文件提及提高瀏覽速度，且由于一個CSS檔案可以控制多個頁面，這也給改版帶來了很大方便。

由于W3C是該模式極力的倡導者，于是業界鑒定網頁是否符合W3C標準，就可以在W3C網站自動檢測該網站的情況。

這種模式也有缺點，其中一個弱點就是，在不同瀏覽器出來的效果會有分別，但這種情況主要是由于微軟的Internet Explorer對CSS文檔的支持有眾多缺陷造成的。另一方面，開始設計CSS時，并不能清楚看到目標，因此顯得不直觀。

網頁實際是一個文件，他存放在世界某個角落的的某一臺計算機中，而這臺計算機必須是與互聯網相連的。網頁經由網址（URL）來識別與存取，當我們在瀏覽器輸入網址后，經過一段復雜而又快速的程序，網頁文件會被傳送到你的計算機，然后再通過瀏覽器解釋網頁的內容，再展示到你的眼前。

2.網頁制作常用工具

1、dreamweaver,用與編輯HTML、ASP、JSP、PHP時的輔助工具。Dreamweaver是美國MACROMEDIA公司開發的集網頁制作和管理網站于一身的所見即所得網頁編輯器，它是第一套針對專業網頁設計師特別發展的視覺化網頁開發工具，利用它可以輕而易舉地制作出跨越平臺限制和跨越瀏覽器限制的充滿動感的網頁。

2、Frontpage 跟dreamweaver一樣，不過還是dreamweaver好。

3、FLASH 網頁需要畫面流動時的首選擇

4、PS圖象處理軟件，一般網頁都需要有圖片相搭配，PS是款很強大的工具。

5、FW跟PS一樣都是圖象處理軟件，但FW偏向與對網頁的處理。

6、Adobe公司推出的cs3系列，軟件之間兼容性較好。可以用此系列對網站的美工特效進行進一步的修飾美化和優化。

3.flash 3.1flash簡介

Flash最早出現并興起于網絡，是網絡多媒體動畫的重要制作形式，它是macromedia公司推出的交互式矢量圖和 Web 動畫的標準。網頁設計者使用 Flash 創作出既漂亮又可改變尺寸的導航界面以及其他奇特的效果。其運用范圍覆蓋諸多領域如電視廣告、網絡廣告、游戲、演示動畫、課件、網頁、手機動畫等新興媒體。現在由于網絡帶寬的不斷提高，Flash動態網頁以其具備的聲音、動態圖像等多媒體優勢，相信在不遠的將來能夠完全替代靜態（HTML）網頁。

3.2flash動畫的特點

（一）Flash動畫受網絡資源的制約一般比較短小，利用Flash制作的動畫是矢量的，無論把它放大多少倍都不會失真。

（二）Flash動畫具有交互性優勢，可以更好地滿足所有用戶的需要。它可以讓欣賞者的動作成為動畫的一部分。用戶可以通過點擊、選擇等動作，決定動畫的運行過程和結果，這一點是傳統動畫所無法比擬的。

（三）Flash動畫可以放在網上供人欣賞和下載，由于使用的是矢量圖技術，具有檔小、傳輸速度快、播放采用流式技術的特點，因此動畫是邊下載邊播放，如果速度控制得好，則根本感覺不到檔的下載過程。所以Flash動畫在網上被廣泛傳播。

（四）Flash動畫有嶄新的視覺效果，比傳統的動畫更加輕易與靈巧，更加“酷”。不可否認，它已經成為一種新時代的藝術表現形式。

（五）Flash動畫制作的成本非常低，使用Flash制作的動畫能夠大大地減少人力、物力資源的消耗。同時，在制作時間上也會大大減少。

（六）Flash動畫在制作完成后，可以把生成的檔設置成帶保護的格式，這樣維護了設計者的版權利益。

3.3flash動畫的前景

現在的Flash平臺包括:Flash Studio

8、Flash Player

8、Flash in Mobile flex 1.5、以及應用于通信行業的Breeze 5等；未來即將推出的產品包括Browser client Flash Player、Mobile client Flash Player、Apollo Flash+HTML的客戶端工具，以及Flex等企業端工具等。這些工具將滿足設計和開發人員跨越各種開放的和專有的平臺，包括從桌面到移動設備，提供更豐富的網絡內容和互聯網應用，企業也能夠通過Flash應用獲得更大的受益。

（一）網絡視頻鐘情Flash 面對全球超過100萬的Flash開發者的期望，Macromedia也不斷開發新的領域。而用戶對視頻應用的垂青，刺激著Macromedia推出新的工具。在上千開發者的注目下，Macromedia推出了Flash Media Server 2，以鞏固其Flash Platform作為網絡視頻最佳選擇的地位

（二）Flex 2產品線和Flash Player 8.5出手不凡

Macromedia Flex 2產品線和Macromedia Flash Player 8.5是本次發布會的重頭戲。新產品涵蓋RIA的全部應用場景，從電子商務產品配置，到需要與實時數據集成的可視交易應用。

Flash Player目前在全球6億多個桌面和移動設備上安裝,估計新版本在12個月內將被80%的聯網計算機下載。Flash Player 8.5在Flash Player 8的基礎上增加了適合行業使用的編程功能，并構建了先進的跨平臺運行時環境。它備有一個新的虛擬機，可以提供更高的運行性能、全面的運行錯誤報告、增強型調試功能以及支持ActionScript 3。ActionScript 3遵守最新的ECMA Script規范，能夠更易于查找及解決問題，從而提高開發人員的工作效率。

3.4flash在網頁中的應用

在網絡高速發展的今天,越來越多的人們已經不再滿意圖文并茂的靜態網頁格式,動態網頁應運而生,但是一般的動態圖片和網站的背景音樂應用并不合拍.什么時候可以把多媒體應用在網站上呢 Flash正是在這一網絡發展的大背景下應運而生的,前身是Future Splash.Flash1.0版本誕生于1996年,由于當時的網絡大背景,Flash在出道之時并沒有得到計算機行業應有的重視,Flash真正的火爆是從Flash3.0版本開始的,到了1999年6月發布的Flash4.0版本,其制作的動畫開始大量的在網上傳播,已經逐漸成為了網頁交互多媒體動畫設計軟件的標準.現在,Flash5.0以其特有的ActionScript腳本編程,正在以極快的速度追趕HTML網頁標準.它改變了以往靜態的,枯燥的,網頁形式,利用它短小精悍的文件體積和插件,利用它簡單易學的操作方式,利用它的“流”式播放形式豐富我們的網絡生活.試想,如果它真的超過HTML成為未來的網頁設計軟件的主流,那也將是網絡的一場革命,也是網絡生活的福音.3.5flash制作流程

（1）建立一個新的場景

依次選擇“文件”、“新建”、“Flash文檔”命令，建立空白文檔，大小為550*400像素，背景為白色。

（1）

（2）重新命名場景和涂層名稱

依次選擇“窗口”、“設計面板”、“場景”命令，在彈出的場景面板中雙擊默認場景名稱，改為“跳動的小球”。然后重新命名涂層名稱，雙擊默認涂層名稱，改為“地面”。然后用水平線表示地面，選擇筆觸顏色為黑色，單擊“線條工具”按鈕，在第一幀的舞臺下方，拖動鼠標畫一條直線表示地面。

（2）

（3）插入水平線結束幀

單擊水平線涂層第35幀的小方框，選中該幀；依次選擇“插入”、“時間軸”、“關鍵幀”命令，在地面層的1到35幀之間插入了相同的水平線。

（3）（4）插入跳動的小球涂層，畫小球的初始狀態

雙擊默認的涂層名，改為跳動的小球涂層，此圖層處于激活狀態。設置填充色為黑色，在第一幀的舞臺上方，畫一個小球，刪除輪廓線。

（4）

（5）插入下一幀

單擊跳動的小球層第二幀的小方框，選中該幀；依次選擇“插入”、“時間軸”、“關鍵幀”命令，在第二幀中復制第一幀的圖形；拖動小球向下移動一個距離，表示球在下落。

（5）

（6）制作下落動作的變化

重復上一步驟。

（6）

（7）小球變形

在下一幀的位置插入關鍵幀，利用任意變性工具把小球縱向壓縮。單擊“任意變形”按鈕,指針根據可實現的變形方式箭頭右下方的小圖形會有所變化；單擊小球，小球周圍出現8個黑色句柄框；把鼠標指針移動到4個中間句柄處，拖動鼠標，把圓球編程橢球形。

（7）

（8）多次重復上面步驟，在不同的幀中，制作小球被壓扁后又彈起的畫面。參照第9步，制作小球被壓扁后又彈起的畫面。重復上述步驟，直到小球靜止。4.fireworks 4.1fireworks簡介

Fireworks是Macromedia公司發布的一款專為網絡圖形設計的圖形編輯軟件，它大大簡化了網絡圖形設計的工作難度，無論是專業設計家還是業余愛好者，使用Fireworks都不僅可以輕松地制作出十分動感的GIF動畫，還可以輕易地完成大圖切割、動態按鈕、動態翻轉圖等，因此，對于輔助網頁編輯來說，Fireworks將是最大的功臣。借助于 Macromedia Fireworks 8，您可以在直觀、可定制的環境中創建和優化用于網頁的圖像并進行精確控制。Fireworks 業界領先的優化工具可幫助您在最佳圖像品質和最小壓縮大小之間達到平衡。它與 Macromedia Dreamweaver? 和 Macromedia Flash? 共同構成的集成工作流程可以讓您創建并優化圖像，同時又能避免由于進行 Roundtrip 編輯而丟失信息或浪費時間。利用可視化工具，無需學習代碼即可創建具有專業品質的網頁圖形和動畫，如變換圖像和彈出菜單等。

4.2fireworks在網頁中的應用

眾所周知，在網頁上的jpg圖片如果過大，會嚴重影響頁面的打開速度，Fireworks提供優化圖片的功能，即縮小圖片的KB，而且不影響畫面的質量（除非放大了與原圖對比）。由于很多人喜歡用photoshop制作jpg圖片，所以它的容量會很大（因為它是適合處理印刷品，要求比較清晰），最終還是要用Fireworks來處理一下。

在優化面板里有“導出jpg較高品質”，導出默認的80品質（可以用“2幅”畫面對比之前之后的大小）。

4.3fireworks的重要性

為Macromedia家族的一員，三劍客之一的fireworks，她的主要任務和特色就是制作矢量圖為網頁服務,FW也是Flash的最佳伴侶,在三劍客的MX系列中,FW和Flash的聯系更為緊密,所以無論是網頁制作和Flash制作,Fw都是不可或缺的利器.在Fw3年的應用實踐過程中,我無時無刻不在感受她的卓越和便利。的確,網頁制作看重的是效果和速度,并不是你用的軟件專業與否,你用了多少個軟件作出的網頁,設計師作出的網頁是為了讓大家接受而不是顯示自己的本領,在這樣的前提下,Fw的確是最好的選擇,最好的矢量圖效果,最快的速度。

4.4fireworks制作流程

1.準備素材 如圖

2、因為這幅圖片是位圖，我們可以用魔術棒將電視機中間的畫面選取成選區

2.選擇菜單——將選取框轉換為路徑，得到電視畫面的輪廓路徑。當然，也可以用鋼筆工具勾勒

出

電

視

畫

面的路

徑

4.將選中區域填充成折疊漸變

顏色可以自己選擇：

5.用選取工具拖動漸變方向手柄，接近垂直或接近水平方向：

6.將調整手柄以初選中區域 并在幀屬性，選取重制幀命令：選擇三幀 或在多些

7.依次選擇其他幀，拖動漸變調整手柄將其改變位置：柄以初選中區域 并在幀屬性幀命令：

最后保存 導出gif圖片 即可完成。

1.在Fireworks中打開一個新的畫布，調整畫布大小，選擇工具欄中的文本工具，輸入第一個數字，并設置好文字的字體、像素大小等樣式

2.輸入文本 1 然后再打開幀屬性 選擇重置幀 9 因為數字0-9 一共是十個

3.然后選擇每一幀，并修改畫布中的相應數字。

4.幀面板中右手邊顯示的是默認的幀延時值7毫秒，即7/100秒的速度。如果速度過快 可以修改值 選擇頂部幀，按住Shift鍵，點擊底部的最后一幀，全選這些幀，在幀延時值處雙擊，在顯示的對話框中設置一個更高的值。更高值將減慢動畫的播放速度。5.最后一步，打開優化面板，設置導出文件格式為“Gif動畫”，如圖：

6.也可以在幀面板的底部設置Gif動畫循環，默認為“永久”選項

7.畫布顏色可以隨意更改 再按f12 預覽就可以了，最后導出文件

5.參考文獻

[1]劉宇.Flash短片輕松學中國大陸.電子工業出版社，2009-01.[2]章精設，胡登濤.Flash Action Script 3.0從入門到精通.清華大學出版設，2008-10.[3]陳冰.Flash第1步:ActionScript編程篇(珍藏版).清華大學出版社，2006-03

第三篇：網頁設計與制作課程學習論文

《網頁設計與制作》課程學習論文

作為一個二十一世紀的大學生，學習如何設計與制作網頁變為一個必不可少的過程。經過這幾個星期的學習，我開始對網頁設計與制作有了初步的認識，并且學習了一些網頁設計與制作的基礎。隨著時代的發展，網站建設越來越接近于一門藝術而不僅僅是一門技術。網站設計日有必要的益被重視，學習網頁設計與制作這門學科是非常。

作為網頁設計的初學者，我對網頁設計非常感興趣，一心想設計出一個美觀、實用、內容豐富的個人網頁。我通過自己動手、動腦，通過網絡資源，老師的指導，在不斷發現問題和解決問題的過程中學到了很多知識，也增強了我的創作能力和動手能力，在網頁設計過程中，從構思到設計、完善、維護，整個過程我都全身心投入，使我真正學到了網頁設計的知識。

互聯網成為人們快速獲取、發布和傳遞信息的重要渠道，它在人們政治、經濟、生活等各個方面發揮著重要的作用。網頁設計伴隨著網絡的快速發展而快速興起，作為上網的主要依托，由于人們使用網絡的頻繁而變得非常的重要。網頁講究的是排版布局，其功能主要就是提供一種形式給每個上網者，讓他們能夠了解網站提供的信息。

網頁設計與制作包含視聽元素于版式設計兩項內容，以主題鮮明、形式與內容統一、強調整體為設計原則，具有互交性與持續性、綜合性、版式的不可以控性、藝術與技術的結合的緊密型等特點。美和功能都是為了表達網站的主題。我認為在一個網站中，最重要的頁面當屬主頁，所以在此以主頁為例，說明在網頁制作中版面設計的問題。從版面設計來講,一個有特色的主頁,必須包含有四個要素：文字，圖片，排列方式和主色調，這四者相輔相成，缺一不可。圖片要素

要設計出漂亮的主頁，首先要成為計算機圖形高手，僅這一點就可以讓初學者花上一年半載的時間。排列方法要素，主頁的第二個要素是排列方法，即網頁布局。色彩在網頁所占比重很大。有了合理清新的色調，會彌補主頁上的其它不足。頁面的色彩搭配是與網站的主題分不開的，一個網站必須有一種或兩種主題色。不至于讓瀏覽者迷失方向，也不至于單調乏味。一般來說，頁面的主體文字應盡量使用黑色等較深的顏色，與背景對比明顯，按鈕、邊框等使用彩色。例如教育類網站使用藍色為主題色，再用紅色和黑色作為配色，就能表達出嚴肅、穩重的效果。網頁作為一種版面，既有文字，又有圖片；文字有大有小，還有標題和正文之分；圖片頁有大小而且有橫豎之別。圖片和文字都需要同時展示給觀眾，不能簡單地將其羅列在一個頁面上，否則會搞得雜亂無章。關于具體的網頁布局，常見的有“國”字型、拐角型、標題正文型、左右框架型、上下框架型、綜合框架型、封面型、Flash型、變化型等，關于它們，在網頁設計的相關書籍中或者在網絡上都可以看到詳細的敘述

網頁作為傳播信息的一種載體，同其他出版物如報紙、雜志等在設計上有許多共同之處，也要遵循一些設計的基本原則。但是，由于表現形式、運行方式和社會功能的不同，網頁設計又有其自身的特殊規律。網頁的藝術設計，是技術與藝術的結合，內容與形式的統一。一般的來說，絕大多數普通受眾圖形，插件，applets和其它有關的高級Web瀏覽器特性。對我們來說，頁面的實用可能比漂亮更重要，對于用戶來說，沒有什么比頁面能夠快速下載更重要了，簡而言之，精簡你的站點，這是一條最佳的捷徑。就站點設計而言，的確能夠通過成功的圖形設計招徠或者丟失訪問者。并非所有的訪問者可以完全看到圖片，某些人為了加快存取網絡的速度已經關閉了瀏覽器端的圖形。簡而言之，圖形并不能正確的在客戶端加載。然而，圖形經常被用來作為導航按鈕。使用可以把一個瀏覽器分成幾個不同的窗口，對于站點的結構的把握是一個不錯的方法。但是，你還是必須知道，還是有人在使用不支持幀的瀏覽器。在你開始打算設計一個幀的時候，你該仔細的考慮考慮你是否的確真的需要。經常，你這樣的需求可以通過表格來組織站點的結構。網頁設計涉及到對多種軟件、多種知識的學習和應用，以及個人的審美觀等等。所以要想制作出漂亮的網頁，需要一個逐步學習和經驗積累的過程。

隨著互聯網的不斷發展和中國網絡人口的日益增長，建立個人網站，不但可以很好的展示自己，而且可以提高自己在計算機應用方面的能力。個人在設計時考慮的多為個人的興趣喜好，而不注重商業的展示。內容以反映個人為中心，從而使個人網站真正的成為展示自己的網絡名片。一張完美的主頁設計需要積累豐富的知識以及掌握大量的技巧。

由于平時課程比較繁忙，學習時間比較少，對于網頁設計軟件的強大功能運用得還不夠。不知不覺網頁設計的課程將要結束了，這門課程所包含內容的豐富是讓我從沒有想到的。在整個的學習過程中，我學習了Flash、Fireworks、Html語言、IIS、網站建設的基本思想等重要內容。在網頁設計過程中，由于沒有網頁制作代碼的知識，所以在設計時也遇到了很多麻煩，有時插入一個特效腳本也是很麻煩。在網頁制作過程中，想提高設計水平，想有個理想的網頁，必須學會代碼的運用，我將在以后的學習過程中不斷加強這方面的學習，希望老師能簡單介紹一下代碼，讓我也對它有個初步的認識，以后再加強學習也才會有所提高。

總體來說，通過今次的對網頁設計的學習，有收獲也有遺憾、不足的地方，但我想，我已經邁入了網頁設計的大門，只要我再認真努力的去學習，去提高，憑借我對網頁設計的熱情和執著，我將來設計出的網頁會更加專業，更完善。也希望老師在今后的日子里多指導。網頁設計還有更多的技巧，有待于我們去挖掘和研究。

第四篇：網頁設計與制作報告書

電子商務2班201341440213孫巖

網頁設計與制作報告書

課程名稱:網頁設計與制作

專業班級：電子商務2班

學 號:201341440213 姓 名：孫巖

指導教師：王康哲

電子商務2班201341440213孫巖

目錄

一．概要……………………………………………………………

二．網站開發……………………………………………………

三．應用工具方案……………………………………………

四．欄目劃分……………………………………………………

五．代碼表……………………………………………………….六．截圖……………………………………………………………

七．結論…………………………………………………………… 2 6 7 13 14

電子商務2班201341440213孫巖

摘要：

在Internet飛速發展的今天，互聯網成為人們快速獲取、發布和傳遞信息的重要渠道，它在人們政治、經濟、生活等各個方面發揮著重要的作用。因此網站建設在Internet應用上的地位顯而易見，它已成為政府、企事業單位信息化建設中的重要組成部分，從而倍受人們的重視。

一、網頁制作開發背景

Dreamweaver以其功能強大、容易上手、界面親切而著稱。它采用所見即所得的方式編輯網頁，利用它可以輕松的組織、編輯網頁并將其發布到指定的站點上，而且在發布之后還能對更新情況進行監控以更新站點的內容。現在流行的網頁制作軟件有很多，如Macromedia公司的Dreamweaver、微軟公司的Dreamweaver、還有Adobe Pagemill 3.0--制作多框架，表單和Image map 圖像的網頁工具、Netscape等等。其中Dreamweaver更以其功能強大、容易上手、界面親切而著稱。它采用所見即所得的方式編輯網頁，利用它可以輕松的組織、編輯網頁并將其發布到指定的站點上，而且在發布之后還能對更新情況進行監控以更新站點的內容。工具準備好了，可根據你的個人喜好來選擇一些素材，如圖片、喜歡的文章等。

二、網頁制作設計技巧

首先，我們來看一下創建一個只包含一個網頁的站點。選擇“文件”菜單的“新建”選項，單擊“站點”命令，這時新建站點對話框就彈出來了，在“指定新站點位置”文本框中輸入新站點的位置，單擊“只有一個網頁的站點” 圖標，單擊“確定”按鈕。這就建立好站點了，我們現在來看一下新的站點里有什么，單擊“視圖”工具條的“文件夾”按鈕。在文件夾列表里有一個網頁文件，名字叫做“index.htm”。我們知道，每一個站點都要有一個主頁，這個主頁也是一個網頁文件。瀏覽者訪問站點時首先進入的就是站點的主頁。主頁的名字在一般情況下就叫做“index.htm”。就是說我們新建只包含一個網頁的站點時，DREAMWEAVER就自動為我們創建了站點的主頁了。這個新建的站點主頁時空的，我們可以向里面添加內容。

在文件列表里除了主頁之外，還有文件夾。新建站點時，DREAMWEAVER都會在站點所在位置下新建兩個文件夾，一個是“images”另一個是“_private”。我們在編輯站點時可以在“image”文件夾里放置站點用到的圖片。“private”

電子商務2班201341440213孫巖

文件夾比較特殊，其中的文件對瀏覽者來說是隱含的，我們可以把一些不想讓瀏覽者看到的網頁文件放在這個文件夾里，比如：我們可以在這個文件夾里存放注冊用戶的個人信息。

盡管每一個站點都要有一個主頁，不過創建站點時我們仍然可以從一個空站點開始：選擇“文件”菜單的“新建”命令，單擊“站點”選項，在“新建站點”對話框里，我們可以選擇“空站點”圖標來創建一個空站點。“新建站點”對話框中還有許多其他圖標，這是DREAMWEAVER提供的用來創建站點模板或向導。我們創建只有一個網頁的站點或者創建空站點，都是從頭開始來創建一個站點，這就好像蓋房子一樣，首先畫圖紙。然而，有許多的房子都具有相似的結構和用途，所以我們可以用一張圖紙蓋很多相似的房子，這樣就節省了許多工作。

基于表格的設計：表格布局使網頁設計師制作網站時有了更多選擇。在 HTML 中表格標簽的本意是為了顯示表格化的數據，但是設計師很快意識到可以利用表格來構造他們設計的網頁，這樣就可以制作較以往作品更加復雜的，多欄目的網頁。表格布局就這樣流行了起來，融合了背景圖片切片技術，常給人以看起來較實際布局簡潔得多的結構。

結構設計：這個時期的網頁設計還不太關注語義化和可用性方面的問題，主要還在追求良好的結構美學。同一時期也是大量應用 GIF 占位圖片控制留白的時期。一些主流的公司甚至訓練設計師如何使用 GIF 占位;如微軟的“關于 HTML 表格中的 GIF 占位”。第一批主要應用表格布局的“所見即所得”網頁設計軟件的發展助長了表格的應用。另外，某些軟件自動生成的表格如此復雜以至于許多設計師不可能從頭手寫代碼(例如每行只有 1px 高卻包含了幾百列的表格)。即使是稍微復雜一點兒的網頁(比如多欄目頁面)，設計師們都要依賴于表格來創建。

三、網站結構

網站結構是指網站中頁面間的層次關系;按性質可分為邏輯結構及物理結構。網站結構對網站的搜索引擎友好性及用戶體驗有著非常重要的影響。

（一）網站結構整體先用DIV和CSS來進行構造，對整個網站進行布局，(二)網站結構是衡量網站用戶體驗好壞的重要指標之一。清晰的網站結

電子商務2班201341440213孫巖

構可以幫助用戶快速獲取所需信息;相反，如果一個網站的結構極其糟糕的話，用戶在訪問時就猶如走進了一座迷宮，最后只會選擇放棄瀏覽。

（三）網站結構還直接影響搜索引擎對頁面的收錄，一個合理的網站結構可以引導搜索引擎從中抓取更多有價值的頁面。

網站結構對網站及網站中頁面的影響。搜索引擎對重要頁面的抓取

由于互聯網中信息量極其龐大，為了向用戶展示更多有價值的信息，搜索引擎會優先抓取每個網站中相對重要的頁面(即權重較高的頁面),然而，搜索引擎是怎樣發現這些重要頁面的呢?根據重要頁面的鏈接指向的頁面可能是重要頁面的思路;搜索引擎首先會從權重相對較高的頁面(即源頁面)出發跟蹤其中的鏈接，從而抓取其他相對重要的頁面(即目標頁面)。

網頁設計的要素

四、應用工具方案

DreamWeaver自制動態HTML動畫的網頁。

DreamWeaver是一個很酷的網頁設計軟件，它包括可視化編輯、HTML代碼編輯的軟件包，并支持ActiveX、JavaScript、Java、Flash、ShockWave等特性，而且它還能通過拖拽從頭到尾制作動態的HTML動畫，支持動態HTML(Dynamic HTML)的設計，使得頁面沒有plug-in也能夠在Netscape和IE 4.0瀏覽器中正確地顯示頁面的動畫。同時它還提供了自動更新頁面信息的功能。

DreamWeaver還采用了Roundtrip HTML技術。這項技術使得網頁在DreamWeaver和HTML代碼編輯器之間進行自由轉換，HTML句法及結構不變。這樣，專業設計者可以在不改變原有編輯習慣的同時，充分享受到可視化編輯帶來的益處。DreamWeaver最具挑戰性和生命力的是它的開放式設計，這項設計使任何人都可以輕易擴展它的功能。

版面布局：在你開始設計之前，你必須仔細地為站點挑選色彩組合。千萬不要出現紫色的背景加上黑藍色的文字的組合。要使整個站點保持同一種色彩組合，因為不同顏色組合的背景或字體可能會是非常令人討厭的。你也可以選用一個背

電子商務2班201341440213孫巖

景圖，而不是僅用一種顏色。背景圖案可以自己繪制，也可以從因特網上下載。通過模糊背景圖案，就可以使文字更容易被閱讀。要記住的是，圖片不會被瀏覽器重畫的，而背景色彩則是要被重新畫的，因此，在上傳你的圖片之前，必須檢查不同的瀏覽器是如何顯示這些網頁的。當增加文字時，盡量設置容易被閱讀的字體和大小。如果你使用背景圖片，那么，當網頁被瀏覽時，背景色和字體將會先于背景圖片被下載，因此，如果背景色和文本的顏色沒有鮮明的對照的話，那么瀏覽者會有幾秒鐘的時間看到一個充滿了不可閱讀的文本的網頁。解決這個問題的簡單的方法就是，使背景色與背景圖的顏色相類似。

瀏覽導航：站點的瀏覽導航必須被設計成非常容易。如果需要，把站點分割為幾個部分。最容易的方法，就是在整個網站的所有的網頁的左邊放置一個菜單條。當然，除此以外，還有許多可選的方法。對于具有大量信息的站點，使用一個可擴展的菜單條會是一個不錯的選擇。無論你使用何種導航模式，在每一頁都放置一個主頁鏈接，那會是一種不錯的設計思想；瀏覽者必須知道，無論何時，當他們迷失在你的站點瀏覽中時，都可以通過簡單的一次點擊就能準確地知道目前所處的位置。

Frame(幀,框架)的問題：Frame—— 你也許會喜歡它，也許不喜歡。如果你在你的網站上使用幀，你很可能使一個幀用于導航目的，另一個幀用于放置內容。你可以看見在同一頁上有兩個被分割的瀏覽窗口，你點擊左邊的幀，只會改變右邊的內容。用幀來組織網站的內容，顯然是非常容易的。

檢驗你的HTML代碼 ：不要在你的網站上放置瀏覽計數器。計數器會讓你的網站看起來不夠專業化，如果瀏覽量不夠的話，還會起到相反的宣傳作用。最后，內容是金，如果能給的瀏覽者一些有價值的東西，如，信息，建議，或軟件，那么就能吸引瀏覽者經常光顧你的網站。為你的站點增加消息板和聊天室，從而提高網站的交互性，使你和你的訪問者交流，讓訪問者彼此交流。

五、頻道欄目劃分

圖1

電子商務2班201341440213孫巖

六、代碼段

content=“text/html;charset=gb2312” />