網站制作報告探究論文

時間：2022-11-26 10:00:00

導語：網站制作報告探究論文一文來源于網友上傳，不代表本站觀點，若需要原創文章可咨詢客服老師，歡迎參考。

網站制作報告探究論文

論文關鍵詞：Dreamweaver、Adobephotoshop、FlashMX

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

一、介紹

超鏈接是網頁中最活潑、最有吸引力的一種元素。表單用于特殊的信息，使用戶和網站進行交互，使你找到用戶的詳細信息。表格在許多工作中有著廣泛的應用。

框架網頁是一種特殊的HTML網頁，使用框架網頁可以同時瀏覽幾個不同的Web頁面，使用Web頁面顯示一致的用戶界面和靈活的頁面內容。

網頁制作的高級技術包括：在網頁中插入FLASH動畫利用Java或者javascript制作網頁的動態效果。網頁中使用插件，視頻等Web組件以及創建、和管理站點等技術。

Web頁面往往是具有各種各樣的頁面元素、豐富的內容和復雜的布局。因此僅僅使用到一種或者兩種網頁制作技術，不可能創作出一個優秀的Web頁面，一個美觀而實用的Web頁面往往需要綜合利用各種技術。

二、概述

1.網站名稱：“濟南中天環保設備有限公司”

2.步驟：

(1)確立主題

(2)收集資料

(3)創建網站

(4)編輯網頁

(5)美化網頁

三、目的

運用已經掌握的知識完成一個環境保護企業網站。通過此次設計可以達到全面理解、運用網頁制作的知識，并使之得以融會貫通，在掌握運用Dreamweaver制作網頁的基礎上再加以實踐，進一步提高、加強自身的綜合能力。

四、要求

根據公司的要求，設計一個企業站點，以達到宣傳該公司及其產品的目的。有整體框架結構，表格定位等，布局合理，色彩搭配協調統一，內容豐富多彩，頁面風格獨特。

五、設計工具

Dreamweaver、Flash、Photoshop等。

六、站點構思

1.整體構思：

本網站主題為：濟南中天環保設備有限公司。總共有網頁24個。主頁是一個總目錄的網頁，里面加有網頁動畫效果“滾動字幕”及Flash動畫，本站幾個主要分網頁分別為：公司簡介、資質認證、產品介紹、業務范圍、經營業績、聯系方式。還有許多子網頁。

2.頁面構思：

下面介紹一下網站中的幾個網頁的制作。

業務范圍中的二氧化氯發生器產品公司服務承諾頁面，背景色采用跟主頁一樣的藍色，淡藍色的背景給人以干凈大方的感覺，與環保網站的主旨相一致。上方為Flash動畫與鏈接頁，左下方是用Photoshop

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

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

經營業績頁面，背景色與Flash動畫，鏈接頁與主頁保持一致。這一頁的主要內容是用表格形式來固定的，邊框設置為1，顏色為淡灰色。表格寬度與Flash寬度一致。整個頁面清晰有致，比較大方，瀏覽者可以清楚的看到公司近年來的經營業績。

聯系方式頁面，左下方的圖片與右邊的標題都是用Photoshop制作的，在聯系方式中還添加了一個outlookexpress電子郵件，方便用戶與公司的聯系，用戶可以直接點擊給公司發送郵件。outlookexpress作為全球范圍內的聯機通訊軟件，已經被越來越多的人所接受，無論是與同事和朋友交換電子郵件，還是加入新聞組進行思想與信息的交流，OutlookExpress都已成為不可或缺的助手。聯系方式中除了電子郵件，還列出了公司地址，電話，傳真，郵編。

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

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

所有頁面整齊劃一，設計風格保持一致，加上淡藍色的背景，給人簡潔、明了、大方的感覺。

七所用各技術的特點

1.Dreamweaver:Dreamweaver是美國MACROMEDIA公司開發的集網頁制作和管理網站于一身的網頁編輯器，它是第一套針對專業網頁設計師特別發展的視覺化網頁開發工具，利用它可以輕而易舉地制作出跨越平臺限制和跨越瀏覽器限制的充滿動感的網頁。Dreamweaver是當前主流的站點和網頁編輯器，其代碼簡潔、兼容性和整體功能都很強。Dreamweaver的介入，使得網頁一些部分的實現變得更加直觀簡便。

Dreamweaver的主要特點：

最佳的制作效率

Dreamweaver可以用最快速的方式將Fireworks，FreeHand，或Photoshop等檔案移至網頁上。使用檢色吸管工具選擇熒幕上的顏色可設定最接近的網頁安全色。對于選單，快捷鍵與格式控制，都只要一個簡單步驟便可完成。Dremweaver能與您喜愛的設計工具，如PlaybackFlash，Shockwave和外掛模組等搭配，不需離開Dremweaver便可完成，整體運用流程自然順暢。除此之外，只要單擊便可使Dreamweaver自動開啟Firework或Photoshop來進行編輯與設定圖檔的最佳化。

網站管理

使用網站地圖可以快速制作網站雛形，設計，更新和重組網頁。改變網頁位置或檔案名稱，Dreamweaver會自動更新所有鏈接。使用支援文字，HTML碼，HTML屬性標簽和一般語法的搜尋及置換功能使得復雜的網站更新變得迅速又簡單。

無可比擬的控制能力

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

所供即所得

Dreamweaver成功整合動態式出版視覺編輯及電子商務功能，提供超強的支援能力給Third-party廠商，包含ASP，Apache，BroadVision，ColdFusion，iCAT，Tango與自行發展的應用軟體。當您正使用Dreamweaver在設計動態網頁時，所供即所得的功能，讓您不需要透過瀏覽器就能預覽網頁。

夢幻樣版和XML

Dreamweaver將內容與設計分開，應用于快速網頁更新和團隊合作網頁編輯。建立網頁外觀的樣版，指定可編輯或不可編輯的部分，內容提供者可直接編輯以樣式為主的內容，卻不會不小心改變既定之樣式。您也可以使用樣版正確地匯入或輸出XML內容。

全方位的呈現

利用Dreamweaver設計的網頁，可以全方位的呈現在任何平臺的熱門瀏覽器上。對于cascadingstylesheets的動態HTML支援和鼠標換圖效果，聲音和動畫的DHTML效果資料庫可在Netscape和Microsoft瀏覽器上執行。使用不同瀏覽器檢示功能，Dreamweaver可以告知您在不同瀏覽器上執行的成效如何。當有新的瀏覽器上市時，只要從Dreamweaver的網站下載它的描述檔，便可得知詳盡的成效報告。

2.Photoshop:Adobephotoshop在繪圖、色彩調整等諸多方面有著出色的功能，集成度高、適應面廣和操作簡便。他不僅提供強大的繪圖工具，可以直接繪制藝術圖形，還能直接從掃描儀，數碼相機等設備中采集圖像，并對他們進行編輯、修復、以及調整效果，同時可以改變圖像的顏色模式，并能在圖像中制作藝術文字等。Photoshop中的高級繪圖工具，可自動生成背景紋理、圖層效果，多種特殊效果濾鏡，可創建多種藝術效果和絢麗的web圖形并可直接在photoshop中定義和編輯切片的工具透明控制，包括用于混合到任意背景中的邊緣的仿色透明度。強大的彩色校正工具——修復畫筆，可在消除瑕疵的同時保留色調和紋理圖層。Photoshop的強大工具可以使操作者不管制作任何圖像都游刃有余。對于設計網頁，photoshop是不可或缺的工具，是強大的圖片處理工具。

3.FlashMX:Macromedia公司出品的Flash是制作網頁動畫的利器。嚴格來說，F1ash是網絡多媒體制作工具而不是網頁編輯工具。F1ash是制作動感網頁的權威。對于使用者來說，只需很短時間的學習，就可以用它制作出美觀的網頁動畫。可以讓制作者隨心所欲地實現各種創意，并且可以和javascript一起創作出具有強大交互性的網頁動畫。

Flash是一種繪制矢量圖形和創作互動多媒體動畫的軟件。它可以用少量的矢量數據就可以描述相當復雜的對象，所以生成的文件尺寸小，便于在網上傳輸。Flash創建的動畫集可以插入到html文檔中，也可以單獨制作網頁。使網頁的效果更加完美。

八網頁制作的優缺點

比較明確，風格統一。并運用了一些其它的設計軟件加以輔助設計。使網頁更加具有動感，形式豐富。就內容而言，比較豐富。大量運用了圖片，并進行了文字說明，做到了圖文并茂。但是由于我們剛接觸網頁制作，做出的效果還是有些稚嫩的，需要以后不斷的實踐。

九代碼

1．滾動字幕

<tdheight="167"><MARQUEEid=newsonmouseover=this.stop()

style="FONT-WEIGHT:normal;LEFT:0px;MARGIN-LEFT:1px;TOP:1px;TEXT-ALIGN:center"

onmouseout=this.start()scrollAmount=1scrollDelay=50

direction=upbehavior=loopwidth=250height=150background="">

<Pstyle="MARGIN-TOP:5px;MARGIN-BOTTOM:5px"><A

target=_blank>二氧化氯的發展史</A></P>

<Pstyle="MARGIN-TOP:5px;MARGIN-BOTTOM:5px"><A

target=_blank>二氧化氯對健康的影響</A></P>

<Pstyle="MARGIN-TOP:5px;MARGIN-BOTTOM:5px"><A

target=_blank>二氧化氯作為水體消毒劑的特性</A></P>

<Pstyle="MARGIN-TOP:5px;MARGIN-BOTTOM:5px"><A

target=_blank>二氧化氯的主要應用領域：用于造紙、用于飲用水處理、用于環境廢物處理、用于油田......</A></P>

</MARQUEE>&nbsp;</td>

2．鏈接站點

<selectclass=ourfont

style="MARGIN:0px;COLOR:#000000;BACKGROUND-COLOR:#ffffff"

onChange=javascript:window.open(this.options[this.selectedIndex].value)

size=1name=select>

<optionselected>→友情鏈接站點←</option>

<option

value=>新浪網</option>

<option

value=>網易</option>

<option

value=>搜狐網</option>

<option

value=>新視聽</option>

<option

value=>中華網</option>

<option

value=>雅虎</option>

<option

value=>263首都在線</option>

<option

value=>索易</option>

</select>

</p>

<palign="center"><fontcolor="#333333"size="2">

<select

class=ourfont

style="MARGIN:0px;COLOR:#000000;BACKGROUND-COLOR:#ffffff"

onChange=javascript:window.open(this.options[this.selectedIndex].value)

size=1name=number1>

<optionselected>→環境保護站點←</option>

<option

value=/>國家環境保護總局

<option

value=/>北京市環境保護局

<option

value=/>山東環境

<option

value=/default.aspx>濟南市環境保護局

<option

value=www.hisun-/>青島海晟環保技術

</select>

3．下拉列表

<selectclass=ourfont

style="MARGIN:0px;COLOR:#000000;BACKGROUND-COLOR:#ffffff"

onChange=javascript:window.open(this.options[this.selectedIndex].value)

size=1name=select>

<optionselected>→→產品介紹←←</option>

<option

value="Untitled-6.htm"target="_blank">二氧化氯發生器-WPR型</option>

<option

value="Untitled-7.htm"target="_blank">二氧化氯發生器-WPRⅠ型</option>

<option

value="Untitled-8.htm"target="_blank">二氧化氯發生器-WPRⅡ型</option>

<option

value="Untitled-18.htm"target="_blank">二氧化氯發生器型號說明</option>

<option

value="Untitled-9.htm"target="_blank">破氰、除鉻一體化設備</option>

<option

value="Untitled-10.htm"target="_blank">ZT系列空氣凈化工作臺</option>

<option

value="Untitled-11.htm"target="_blank">ZT系列百級層流罩</option>

<option

value="Untitled-12.htm"target="_blank">ZT系列高效自凈器</option>

<option

value="Untitled-13.htm"target="_blank">ZT系列高效空氣過濾器</option>

<option

value="Untitled-14.htm"target="_blank">FLS-系列風淋室</option>

<option

value="Untitled-15.htm"target="_blank">凈化空調廠房</option>

<option

value="Untitled-16.htm"target="_blank">中效送風機組</option>

<option

value="Untitled-17.htm"target="_blank">各種醫療器械設備及實驗室</option>

</select>

參考文獻

1.魏洪斌《DreamweaverMX網頁設計》清華大學出版社

2.馬波《DreamweaverMX完美網頁設計與制作》中國青年出版社

3.黃夢《DreamweaverMX完全征服手冊》中國青年出版社

4.周明濤《DreamweaverMX網頁設計指南》機械工程出版社

5.陳青、劉時燕、macromedia《FlashMX標準案例教材》人民郵電出版社

6.劉淼《FlashMX入門與提高》人民郵電出版社

7.李偉《FlashMX動畫制作實例教程》清華大學出版社

8.劉睿、陳志宇《Photoshop6.0實用教程》山東科學技術出版社

9.飛思教育產品研發中心《Photoshop6.0基礎及應用教程》北京電子工業出版社

10.（美）BarryHaynes、WendyGrumpter、陳玉明、李玉龍《老照片，新照片：Photoshop繪畫與創意》電子工業出版社