論文摘要：網(wǎng)頁(yè)的內(nèi)容通常是由圖片和文字組成。由文字構(gòu)成網(wǎng)頁(yè)的主體，而圖片則能夠美化和增色你的網(wǎng)頁(yè)。那些包含了設(shè)計(jì)精美圖片的網(wǎng)站，往往能讓瀏覽者流連忘返。因此，有漂亮的圖片是你的網(wǎng)頁(yè)能吸引人的一個(gè)有力保證。

　　一、介紹

　　超鏈接是網(wǎng)頁(yè)中最活潑、最有吸引力的一種元素。表單用于特殊的信息，使用戶(hù)和網(wǎng)站進(jìn)行交互，使你找到用戶(hù)的詳細(xì)信息。表格在許多工作中有著廣泛的應(yīng)用。

　　框架網(wǎng)頁(yè)是一種特殊的HTML網(wǎng)頁(yè)，使用框架網(wǎng)頁(yè)可以同時(shí)瀏覽幾個(gè)不同的Web頁(yè)面，使用Web頁(yè)面顯示一致的用戶(hù)界面和靈活的頁(yè)面內(nèi)容。

　　網(wǎng)頁(yè)制作的高級(jí)技術(shù)包括：在網(wǎng)頁(yè)中插入FLASH動(dòng)畫(huà)利用Java或者JavaScript制作網(wǎng)頁(yè)的動(dòng)態(tài)效果。網(wǎng)頁(yè)中使用插件，視頻等Web組件以及創(chuàng)建、發(fā)布和管理站點(diǎn)等技術(shù)。                                                                         

　　Web頁(yè)面往往是具有各種各樣的頁(yè)面元素、豐富的內(nèi)容和復(fù)雜的布局。因此僅僅使用到一種或者兩種網(wǎng)頁(yè)制作技術(shù)，不可能創(chuàng)作出一個(gè)優(yōu)秀的Web頁(yè)面，一個(gè)美觀而實(shí)用的Web頁(yè)面往往需要綜合利用各種技術(shù)。

　　二、概述

　　1.  網(wǎng)站名稱(chēng)：“濟(jì)南中天環(huán)保設(shè)備有限公司”

　　2.  步驟： 

            (1) 確立主題

　　　　　　(2) 收集資料

            (3) 創(chuàng)建網(wǎng)站

            (4) 編輯網(wǎng)頁(yè)

　　　　　　(5) 美化網(wǎng)頁(yè)

　　三、目的

轉(zhuǎn)自：奈微建站網(wǎng)（www.nev.cn） 　　運(yùn)用已經(jīng)掌握的知識(shí)完成一個(gè)環(huán)境保護(hù)企業(yè)網(wǎng)站。通過(guò)此次設(shè)計(jì)可以達(dá)到全面理解、運(yùn)用網(wǎng)頁(yè)制作的知識(shí)，并使之得以融會(huì)貫通，在掌握運(yùn)用Dreamweaver制作網(wǎng)頁(yè)的基礎(chǔ)上再加以實(shí)踐，進(jìn)一步提高、加強(qiáng)自身的綜合能力。

　　四、要求

　　根據(jù)公司的要求，設(shè)計(jì)一個(gè)企業(yè)站點(diǎn)，以達(dá)到宣傳該公司及其產(chǎn)品的目的。有整體框架結(jié)構(gòu)，表格定位等，布局合理，色彩搭配協(xié)調(diào)統(tǒng)一，內(nèi)容豐富多彩，頁(yè)面風(fēng)格獨(dú)特。

　　五、設(shè)計(jì)工具

　　Dreamweaver、Flash、Photoshop等。

　　六、站點(diǎn)構(gòu)思

　　1.整體構(gòu)思：

　　本網(wǎng)站主題為：濟(jì)南中天環(huán)保設(shè)備有限公司。總共有網(wǎng)頁(yè)24個(gè)。主頁(yè)是一個(gè)總目錄的網(wǎng)頁(yè)，里面加有網(wǎng)頁(yè)動(dòng)畫(huà)效果“滾動(dòng)字幕”及Flash動(dòng)畫(huà)，本站幾個(gè)主要分網(wǎng)頁(yè)分別為：公司簡(jiǎn)介、資質(zhì)認(rèn)證、產(chǎn)品介紹、業(yè)務(wù)范圍、經(jīng)營(yíng)業(yè)績(jī)、聯(lián)系方式。還有許多子網(wǎng)頁(yè)。

　　2.頁(yè)面構(gòu)思：

　　下面介紹一下網(wǎng)站中的幾個(gè)網(wǎng)頁(yè)的制作。

　　業(yè)務(wù)范圍中的二氧化氯發(fā)生器產(chǎn)品公司服務(wù)承諾頁(yè)面，背景色采用跟主頁(yè)一樣的藍(lán)色，淡藍(lán)色的背景給人以干凈大方的感覺(jué)，與環(huán)保網(wǎng)站的主旨相一致。上方為Flash動(dòng)畫(huà)與鏈接頁(yè)，左下方是用Photoshop

　　處理過(guò)的圖片，與主頁(yè)是一致的。右邊的標(biāo)題是用Photoshop制作的圖片，小標(biāo)題采用斜體加黑，這樣制作豐富了頁(yè)面內(nèi)容，使整個(gè)頁(yè)面條理清晰。服務(wù)承諾分條目標(biāo)示，一目了然。最后的“空氣凈化服務(wù)范圍”標(biāo)題，即可以鏈接到空氣凈化服務(wù)范圍頁(yè)面。

　　標(biāo)題“服務(wù)范圍和承諾”是用Photoshop制作的，先用油漆桶工具把背景色填充為與頁(yè)面相同的淡藍(lán)色，調(diào)整文字的大小與位置，兩邊分別加上符號(hào)“【”、“】”和“≡”，使圖片看起來(lái)更加美觀。

　　經(jīng)營(yíng)業(yè)績(jī)頁(yè)面，背景色與Flash動(dòng)畫(huà)，鏈接頁(yè)與主頁(yè)保持一致。這一頁(yè)的主要內(nèi)容是用表格形式來(lái)固定的，邊框設(shè)置為1，顏色為淡灰色。表格寬度與Flash寬度一致。整個(gè)頁(yè)面清晰有致，比較大方，瀏覽者可以清楚的看到公司近年來(lái)的經(jīng)營(yíng)業(yè)績(jī)。

　　聯(lián)系方式頁(yè)面，左下方的圖片與右邊的標(biāo)題都是用Photoshop制作的，在聯(lián)系方式中還添加了一個(gè)outlook express電子郵件，方便用戶(hù)與公司的聯(lián)系，用戶(hù)可以直接點(diǎn)擊給公司發(fā)送郵件。outlook express作為全球范圍內(nèi)的聯(lián)機(jī)通訊軟件，已經(jīng)被越來(lái)越多的人所接受，無(wú)論是與同事和朋友交換電子郵件，還是加入新聞組進(jìn)行思想與信息的交流，Outlook Express都已成為不可或缺的助手。聯(lián)系方式中除了電子郵件，還列出了公司地址，電話(huà)，傳真，郵編。

　　左邊的圖片是在Photoshop中，先用橢圓選框工具選中所要的部分，放置新建的畫(huà)布中，再用油漆桶工具把空白處填充為與頁(yè)面背景相同的藍(lán)色并對(duì)畫(huà)面進(jìn)行淡化處理。右邊的標(biāo)題是在Photoshop中，用油漆桶工具填充背景色，然后寫(xiě)上“聯(lián)系方式”，調(diào)整其大小與位置，“方式”二字較“聯(lián)系”稍小一些，左右分別加上符號(hào)“≡”，“「”，“」”，“≡”，使圖片放置頁(yè)面中顯得美觀，更突出了主題內(nèi)容。

　　FLS－系列風(fēng)淋室，凈化空調(diào)廠房，中效送風(fēng)機(jī)組，各種醫(yī)療器械設(shè)備及實(shí)驗(yàn)室設(shè)備等頁(yè)面由頁(yè)面“產(chǎn)品介紹”鏈接的，并且均以淡藍(lán)色為背景底色。頁(yè)面大部分有圖片和文字兩部分組成。文字部分由表格固定，表格邊框設(shè)為零，圖片是用Photoshop制作成的。

　　所有頁(yè)面整齊劃一，設(shè)計(jì)風(fēng)格保持一致，加上淡藍(lán)色的背景，給人簡(jiǎn)潔、明了、大方的感覺(jué)。

　　七  所用各技術(shù)的特點(diǎn)

　　1.Dreamweaver : Dreamweaver是美國(guó)MACROMEDIA公司開(kāi)發(fā)的集網(wǎng)頁(yè)制作和管理網(wǎng)站于一身的網(wǎng)頁(yè)編輯器，它是第一套針對(duì)專(zhuān)業(yè)網(wǎng)頁(yè)設(shè)計(jì)師特別發(fā)展的視覺(jué)化網(wǎng)頁(yè)開(kāi)發(fā)工具，利用它可以輕而易舉地制作出跨越平臺(tái)限制和跨越瀏覽器限制的充滿(mǎn)動(dòng)感的網(wǎng)頁(yè)。Dreamweaver是當(dāng)前主流的站點(diǎn)和網(wǎng)頁(yè)編輯器，其代碼簡(jiǎn)潔、兼容性和整體功能都很強(qiáng)。Dreamweaver的介入，使得網(wǎng)頁(yè)一些部分的實(shí)現(xiàn)變得更加直觀簡(jiǎn)便。

　　Dreamweaver的主要特點(diǎn)：

　　最佳的制作效率

　　Dreamweaver可以用最快速的方式將Fireworks，F(xiàn)reeHand，或Photoshop等檔案移至網(wǎng)頁(yè)上。使用檢色吸管工具選擇熒幕上的顏色可設(shè)定最接近的網(wǎng)頁(yè)安全色。對(duì)于選單，快捷鍵與格式控制，都只要一個(gè)簡(jiǎn)單步驟便可完成。Dremweaver能與您喜愛(ài)的設(shè)計(jì)工具，如Playback Flash，Shockwave和外掛模組等搭配，不需離開(kāi)Dremweaver便可完成，整體運(yùn)用流程自然順暢。除此之外，只要單擊便可使Dreamweaver自動(dòng)開(kāi)啟Firework或Photoshop來(lái)進(jìn)行編輯與設(shè)定圖檔的最佳化。

　　網(wǎng)站管理

　　使用網(wǎng)站地圖可以快速制作網(wǎng)站雛形，設(shè)計(jì)，更新和重組網(wǎng)頁(yè)。改變網(wǎng)頁(yè)位置或檔案名稱(chēng)，Dreamweaver會(huì)自動(dòng)更新所有鏈接。使用支援文字，HTML碼，HTML屬性標(biāo)簽和一般語(yǔ)法的搜尋及置換功能使得復(fù)雜的網(wǎng)站更新變得迅速又簡(jiǎn)單。

　　無(wú)可比擬的控制能力

　　Dreamweaver是唯一提供Roundtrip HTML、視覺(jué)化編輯與原始碼編輯同步的設(shè)計(jì)工具。它包含HomeSite和BBEdit等主流文字編輯器。幀(frames)和表格的制作速度快的令您無(wú)法想像。進(jìn)階表格編輯功能使您簡(jiǎn)單的選擇單格、行、欄或作未連續(xù)之選取。甚至可以排序或格式化表格群組，Dreamweaver支援精準(zhǔn)定位，利用可輕易轉(zhuǎn)換成表格的圖層以拖拉置放的方式進(jìn)行版面配置。

　　所供即所得

　　Dreamweaver成功整合動(dòng)態(tài)式出版視覺(jué)編輯及電子商務(wù)功能，提供超強(qiáng)的支援能力給Third-party廠商，包含ASP， Apache，BroadVision， Cold Fusion，iCAT， Tango與自行發(fā)展的應(yīng)用軟體。當(dāng)您正使用Dreamweaver在設(shè)計(jì)動(dòng)態(tài)網(wǎng)頁(yè)時(shí)，所供即所得的功能，讓您不需要透過(guò)瀏覽器就能預(yù)覽網(wǎng)頁(yè)。

　　夢(mèng)幻樣版和XML

　　Dreamweaver將內(nèi)容與設(shè)計(jì)分開(kāi)，應(yīng)用于快速網(wǎng)頁(yè)更新和團(tuán)隊(duì)合作網(wǎng)頁(yè)編輯。建立網(wǎng)頁(yè)外觀的樣版，指定可編輯或不可編輯的部分，內(nèi)容提供者可直接編輯以樣式為主的內(nèi)容，卻不會(huì)不小心改變既定之樣式。您也可以使用樣版正確地匯入或輸出XML內(nèi)容。

　　全方位的呈現(xiàn)

　　利用Dreamweaver設(shè)計(jì)的網(wǎng)頁(yè)，可以全方位的呈現(xiàn)在任何平臺(tái)的熱門(mén)瀏覽器上。對(duì)于cascading style sheets的動(dòng)態(tài)HTML支援和鼠標(biāo)換圖效果，聲音和動(dòng)畫(huà)的DHTML效果資料庫(kù)可在Netscape和Microsoft瀏覽器上執(zhí)行。使用不同瀏覽器檢示功能，Dreamweaver可以告知您在不同瀏覽器上執(zhí)行的成效如何。當(dāng)有新的瀏覽器上市時(shí)，只要從Dreamweaver的網(wǎng)站下載它的描述檔，便可得知詳盡的成效報(bào)告。

　　2.Photoshop:Adobe photoshop 在繪圖、色彩調(diào)整等諸多方面有著出色的功能，集成度高、適應(yīng)面廣和操作簡(jiǎn)便。他不僅提供強(qiáng)大的繪圖工具，可以直接繪制藝術(shù)圖形，還能直接從掃描儀，數(shù)碼相機(jī)等設(shè)備中采集圖像，并對(duì)他們進(jìn)行編輯、修復(fù)、以及調(diào)整效果，同時(shí)可以改變圖像的顏色模式，并能在圖像中制作藝術(shù)文字等。Photoshop中的高級(jí)繪圖工具，可自動(dòng)生成背景紋理、圖層效果，多種特殊效果濾鏡，可創(chuàng)建多種藝術(shù)效果和絢麗的web圖形并可直接在photoshop中定義和編輯切片的工具透明控制，包括用于混合到任意背景中的邊緣的仿色透明度。強(qiáng)大的彩色校正工具——修復(fù)畫(huà)筆，可在消除瑕疵的同時(shí)保留色調(diào)和紋理圖層。Photoshop的強(qiáng)大工具可以使操作者不管制作任何圖像都游刃有余。對(duì)于設(shè)計(jì)網(wǎng)頁(yè)，photoshop是不可或缺的工具，是強(qiáng)大的圖片處理工具。
3.FlashMX: Macromedia公司出品的Flash是制作網(wǎng)頁(yè)動(dòng)畫(huà)的利器。嚴(yán)格來(lái)說(shuō)， F1ash是網(wǎng)絡(luò)多媒體制作工具而不是網(wǎng)頁(yè)編輯工具。F1ash是制作動(dòng)感網(wǎng)頁(yè)的權(quán)威。對(duì)于使用者來(lái)說(shuō)，只需很短時(shí)間的學(xué)習(xí)，就可以用它制作出美觀的網(wǎng)頁(yè)動(dòng)畫(huà)。可以讓制作者隨心所欲地實(shí)現(xiàn)各種創(chuàng)意，并且可以和JavaScript一起創(chuàng)作出具有強(qiáng)大交互性的網(wǎng)頁(yè)動(dòng)畫(huà)。     
　　Flash是一種繪制矢量圖形和創(chuàng)作互動(dòng)多媒體動(dòng)畫(huà)的軟件。它可以用少量的矢量數(shù)據(jù)就可以描述相當(dāng)復(fù)雜的對(duì)象，所以生成的文件尺寸小，便于在網(wǎng)上傳輸。Flash創(chuàng)建的動(dòng)畫(huà)集可以插入到html文檔中，也可以單獨(dú)制作網(wǎng)頁(yè)。使網(wǎng)頁(yè)的效果更加完美。

　　八  網(wǎng)頁(yè)制作的優(yōu)缺點(diǎn)