畢業(yè)設(shè)計(jì)（論文）企業(yè)網(wǎng)站設(shè)計(jì)論文

1、企業(yè)網(wǎng)站設(shè)計(jì)論文所在系別：計(jì)算機(jī)信息技術(shù)系專業(yè)班機(jī)：07五年制系統(tǒng)維護(hù)學(xué)生姓名： 指導(dǎo)教師： 答辯時(shí)間： 2011年7月 目錄摘要.1第一章dreamweaver技術(shù)簡(jiǎn)介.2第二章網(wǎng)站流程圖簡(jiǎn)介11第三章程序詳細(xì)介紹.12第四章主要程序段.17參考文獻(xiàn)22致謝辭23摘要dreamweaver是美國(guó)macromedia公司開發(fā)的集網(wǎng)頁(yè)制作和管理網(wǎng)站于一身的所見即所得網(wǎng)頁(yè)編輯器，它是第一套針對(duì)專業(yè)網(wǎng)頁(yè)設(shè)計(jì)師特別發(fā)展的視覺化網(wǎng)頁(yè)開發(fā)工具，利用它可以輕而易舉地制作出跨越平臺(tái)限制和跨越瀏覽器限制的充滿動(dòng)感的網(wǎng)頁(yè)。隨著社會(huì)不斷發(fā)展，網(wǎng)絡(luò)不斷普及，一家大的公司都需要一個(gè)安全、詳細(xì)的網(wǎng)站。我做這個(gè)網(wǎng)站就是讓人

2、們?cè)诰W(wǎng)絡(luò)上通過我的網(wǎng)站更了解我們公司，網(wǎng)站中有公司的簡(jiǎn)介，我們產(chǎn)品的簡(jiǎn)介和購(gòu)買的地址，用這個(gè)網(wǎng)站增加我們公司的競(jìng)爭(zhēng)性。第一頁(yè)第一章dreamweaver技術(shù)簡(jiǎn)介1.1軟件簡(jiǎn)介dreamweaver是由macromedia公司開發(fā)的一款所見即所得的網(wǎng)頁(yè)編輯器。和二維動(dòng)畫設(shè)計(jì)軟件flash，專業(yè)網(wǎng)頁(yè)圖像設(shè)計(jì)軟件fireworks，并稱為“網(wǎng)頁(yè)三劍客”；2005年4月18日，全球最大的圖像編輯軟件供應(yīng)adobe宣布，以換股方式收購(gòu)軟件公司macromedia，macromedia是著名的網(wǎng)頁(yè)設(shè)計(jì)軟件dreamweaver及flash的供應(yīng)商。據(jù)悉，此項(xiàng)交易涉及金額高達(dá)34億美元。根據(jù)雙方達(dá)成的協(xié)議，

3、macromedia股東將以1：0.69的比例獲得adobe的普通股。自此開始，dreamweaver開始屬于adobe設(shè)計(jì)軟件系列。 dreamweaver、flash以及在dreamweaver之后推出的針 dreamweaver對(duì)專業(yè)網(wǎng)頁(yè)圖像設(shè)計(jì)的fireworks，三者被macromedia公司稱為dreamteam(夢(mèng)之隊(duì))，足見市場(chǎng)的反響和macromedia公司對(duì)它們的自信。說到dreamweaver我們應(yīng)該了解一下網(wǎng)頁(yè)編輯器的發(fā)展過程，隨著互聯(lián)網(wǎng)(internet)的家喻戶曉，html技術(shù)的不斷發(fā)展和完善，隨之而產(chǎn)生了眾多網(wǎng)頁(yè)編輯器，從網(wǎng)頁(yè)編輯器基本性質(zhì)可以分為所見即所得網(wǎng)頁(yè)編

4、輯器和非所見即所得網(wǎng)頁(yè)編輯器（則原始代碼編輯器），兩者各有千秋。所見則所得網(wǎng)頁(yè)編輯器的優(yōu)點(diǎn)就是直觀性，使用方便，容易上手，您在所見即所得網(wǎng)頁(yè)編輯器進(jìn)行網(wǎng)頁(yè)制作和在word中進(jìn)行文本編輯不會(huì)感到有什么區(qū)別，但它同時(shí)也存在著致命的弱點(diǎn)。第二頁(yè)1.1.1經(jīng)典版本macromedia dreamweaver 8.0 簡(jiǎn)體中文版 軟件大?。?60.24 m 開 發(fā) 商： adobe 軟件類別： 國(guó)外軟件 / 網(wǎng)頁(yè)制作 軟件語(yǔ)言： 簡(jiǎn)體中文 應(yīng)用平臺(tái)： win9x/winnt/win2000/winxp 軟件性質(zhì)： 共享(收費(fèi))軟件 界面面板初識(shí)界面安裝后，它會(huì)自動(dòng)在 windows 的菜單中創(chuàng)建程序組。

5、與 frontpagr 有很大的不同，它 macromedia dreamweaver把工具欄省去了，然后增加了幾個(gè)浮動(dòng)的工具欄。在 dreamwaver3.0 中，它的工具欄全是浮動(dòng)工具欄，可以將工具欄縮小，也可以關(guān)閉。在專業(yè)術(shù)語(yǔ)里面，他們叫“浮動(dòng)面板”，利用浮動(dòng)面板來控制對(duì)頁(yè)面的編寫，而不是利用煩瑣的對(duì)話框，這是 dreamwaver3.0 編輯網(wǎng)頁(yè)中最值得人贊賞的特性。通過在浮動(dòng)面板中進(jìn)行屬性設(shè)置，這樣就直接可以在文檔中看到結(jié)果，避免了中間過程，提高了工作效率。但對(duì)于熟悉了微軟的應(yīng)用程序的用戶來說，開始的時(shí)候可能很不習(xí)慣。先來介紹它的三個(gè)最重要的浮動(dòng)面板。 1.1.2啟動(dòng)面板啟動(dòng)面板主要

6、用來快速啟動(dòng)相應(yīng)的任務(wù)，或顯示/隱藏相應(yīng)的浮動(dòng)面板。如果啟動(dòng)面板是豎的，那么，可以點(diǎn)擊它右下角的一個(gè)小按鈕，它就可以變成橫向的了，這時(shí)，可能會(huì)發(fā)現(xiàn)，它的狀態(tài)欄上也有這個(gè)面板上的所有選項(xiàng)。這也就為網(wǎng)第三頁(yè)頁(yè)制作者提供了方便。可以直接從右下角點(diǎn)擊相應(yīng)的欄目進(jìn)入想要進(jìn)入的對(duì)話框。 1.1.3對(duì)象面板對(duì)象面板主要功能相當(dāng)于插入菜單，主要是向網(wǎng)頁(yè)中插入一些對(duì)象，如表格，框架，圖象，層，flash 動(dòng)畫等，它通過一個(gè)下拉菜單，把要插入的選項(xiàng)都包括在了其中，如圖5。 每一個(gè)選項(xiàng)中都有若干個(gè)圖標(biāo)，只要在圖表上單擊一下，就可以插入想要插入的對(duì)象了。 1.1.4屬性面板屬性面板會(huì)隨著編輯的內(nèi)容而變化，這個(gè)圖是文字

7、屬性面板，它里面包含了所要編輯的文字的所有內(nèi)容，包括字體，顏色，大小，連接，縮進(jìn)等，它的右下角還有一個(gè)向下的小三角箭頭，單擊它，會(huì)展開屬性面板，它把一些不常用的屬性也列出來。展開后，箭頭會(huì)變成向上，單擊它，又會(huì)使屬性面板復(fù)原。屬性面板很多，還有圖象屬性控制面板，層屬性控制面板等對(duì)象的屬性控制面板，用戶只要選擇要編輯的對(duì)象，它就會(huì)自動(dòng)變化，挺方便的。用戶對(duì)所有由啟動(dòng)面板彈出來的浮動(dòng)面板在被打開后，可以重新組合，可以將經(jīng)常用的面板單獨(dú)地拉出來，只需要將鼠標(biāo)放到想要拉的按鈕上面，然后按住左鍵拖動(dòng)就可以了，同理，把他們組合也是一樣，用鼠標(biāo)拖動(dòng)后，放到上面就可以。1.1.5發(fā)展概述dreamweaver

8、的開發(fā)者是美國(guó)的macromedia公司，macromedia公司總部設(shè)立在美國(guó)加州(加利福尼亞)三番市（舊金山），在全球50多個(gè)國(guó)家設(shè)有經(jīng)營(yíng)機(jī)構(gòu)。macromedia公司在全球擁有300萬(wàn)開發(fā)和設(shè)計(jì)用戶以及廣大的行業(yè)合作伙伴網(wǎng)絡(luò)，其豐富的客戶機(jī)軟件被98%的web應(yīng)用開發(fā)人員所廣泛使用，是企業(yè)、政府和教育市場(chǎng)客戶的戰(zhàn)略性it提供商。 2005年4月18日，adobe公司收購(gòu)macromedia公司,dreamweaver，authorware等軟件同歸adobe公司。adobe systems是一家總部位于美國(guó)加州圣何塞的電腦軟件公司。公司由喬恩沃諾克和查理斯格什克創(chuàng)建于1982年12月，他

9、們先前都曾任職于施樂公司的帕洛阿爾托研究中心，離開后組建了adobe系統(tǒng)公司，使得postscript頁(yè)描述語(yǔ)言得到商業(yè)化應(yīng)用。 第四頁(yè)adobe 解決方案現(xiàn)在已成為數(shù)碼成像領(lǐng)域的金科玉律。 與此同時(shí)，adobe creative suite 代表了下一代的設(shè)計(jì)和發(fā)布平臺(tái)。 adobe 智能文檔技術(shù)則推動(dòng)著整個(gè)企業(yè)級(jí)文檔服務(wù)領(lǐng)域的發(fā)展，幫助各種規(guī)模的企業(yè)優(yōu)化和加速文檔處理流程并進(jìn)一步提高效率。 1.2軟件版本介紹1.2.1dreamweaverdreamweaver是美國(guó)macromedia公司開發(fā)的集網(wǎng)頁(yè)制作和管理網(wǎng)站于一身的所見即所得網(wǎng)頁(yè)編輯器，它是第一套針對(duì)專業(yè)網(wǎng)頁(yè)設(shè)計(jì)師特別發(fā)展的視覺化

10、網(wǎng)頁(yè)開發(fā)工具，利用它可以輕而易舉地制作出跨越平臺(tái)限制和跨越瀏覽器限制的充滿動(dòng)感的網(wǎng)頁(yè)。 dreamweaver、flash以及在dreamweaver之后推出的針對(duì)專業(yè)網(wǎng)頁(yè)圖像設(shè)計(jì)的fireworks，三者被macromedia公司稱為dreamteam(夢(mèng)之隊(duì))，足見市場(chǎng)的反響和macromedia公司對(duì)它們的自信。說到dreamweaver我們應(yīng)該了解一下網(wǎng)頁(yè)編輯器的發(fā)展過程，隨著互聯(lián)網(wǎng)(internet) 的家喻戶曉，html技術(shù)的不斷發(fā)展和完善，隨之而產(chǎn)生了眾多網(wǎng)頁(yè)編輯器，從網(wǎng)頁(yè)編輯器基本性質(zhì)可以分為所見即所得網(wǎng)頁(yè)編輯器和非所見即所得網(wǎng)頁(yè)編輯器（則原始代碼編輯器），兩者各有千秋。所見則

11、所得網(wǎng)頁(yè)編輯器的優(yōu)點(diǎn)就是直觀性，使用方便，容易上手，您在所見即所得網(wǎng)頁(yè)編輯器進(jìn)行網(wǎng)頁(yè)制作和在word中進(jìn)行文本編輯不會(huì)感到有什么區(qū)別，但它同時(shí)也存在著致命的弱點(diǎn)： 一、 難以精確達(dá)到與瀏覽器完全一致的顯示效果。也就是說您在所見即所得網(wǎng)頁(yè)編輯器中制作的網(wǎng)頁(yè)放到瀏覽器中是很難完全達(dá)到您真正想要的效果，這一點(diǎn)在結(jié)構(gòu)復(fù)雜一些的網(wǎng)頁(yè)（如分幀結(jié)構(gòu)、動(dòng)態(tài)網(wǎng)頁(yè)結(jié)構(gòu)）中便可以體現(xiàn)出來； 二、 頁(yè)面原始代碼的難以控制性，比如您在所見即所得編輯器中制作一張表格也要幾分鐘，但您要它完全符合您要求可能需要幾十分鐘，甚至更多時(shí)間。而相比之下，非所見則所得的網(wǎng)頁(yè)編輯器，就不存在這個(gè)問題，因?yàn)樗械膆tml代碼 都在您的監(jiān)控

12、下產(chǎn)生，但是由于非所見則所得編輯器的先天條件就注定了它的工作低效率。如何實(shí)現(xiàn)兩者的完美結(jié)合，則既產(chǎn)生干凈、準(zhǔn)確的html代碼，又具備則見則所得的高效率、直觀性，一直是網(wǎng)頁(yè)設(shè)計(jì)師夢(mèng)想。在dreamweaver之前，frontpage98一直被人們認(rèn)為是最好的所見即所得網(wǎng)頁(yè)編輯器，但是它同樣繼承了所見即所得的種種劣性。但是我說過這是在第五頁(yè)dreamweaver之前，現(xiàn)在我無意說dreamweaver已經(jīng)實(shí)現(xiàn)網(wǎng)頁(yè)設(shè)計(jì)師的夢(mèng)想，但我覺得dreamweaver正在努力向這個(gè)夢(mèng)想一步步走去。 1.2.2adobe dreamweaver cs3dreamweaver cs3是adobe（奧多比）公司收購(gòu)

13、macromedia公司后最新推出的creative suite 3 設(shè)計(jì)套裝中用于網(wǎng)頁(yè)設(shè)計(jì)與制作的組件。作為全球最流行，最優(yōu)秀的所見即所得的網(wǎng)頁(yè)編輯器，dreamweaver可以輕而易舉地制作出跨操作系統(tǒng)平臺(tái)，跨瀏覽器的充滿動(dòng)感的網(wǎng)頁(yè)，是目前制作web頁(yè)站點(diǎn),web頁(yè)和web應(yīng)用程序開發(fā)的理想工具。 dreamweaver，fireworks，flash被稱為網(wǎng)頁(yè)制作的“三劍客”，這三款工具相輔相承，是制作網(wǎng)頁(yè)的最佳拍檔之一。 1.2.3adobe dreamweaver cs4dreamweaver cs4的界面幾乎是做了一次脫胎換骨的改進(jìn)，從中看到了更多的設(shè)計(jì)元素，讓dw也稍稍帶著點(diǎn)蘋果

14、的味道。如果說vista和office 2007創(chuàng)造了軟件界面設(shè)計(jì)的新紀(jì)元，那么adobe相當(dāng)于取代了蘋果的設(shè)計(jì)地位而緊隨ms之后。唯一的區(qū)別就是，ms老是抄人家蘋果的（汗一個(gè)，微軟的fans別砸我），而adobe卻是實(shí)實(shí)在在的自己創(chuàng)造，設(shè)計(jì)界的老大地位實(shí)至名歸 布局按鈕：這個(gè)按鈕似乎和下方的代碼、分割、設(shè)計(jì)按鈕功能重復(fù)，目前還不明白dw的意圖，唯一增加的新功能是垂直分割，讓代碼和設(shè)計(jì)界面以垂直對(duì)比的方式呈現(xiàn)。 精簡(jiǎn)設(shè)計(jì)：它提供了更多的可視區(qū)域，同時(shí)可以把右邊的菜單收縮到只剩下圖標(biāo)。對(duì)于習(xí)慣了adobe其他設(shè)計(jì)軟件的朋友來說，這的確是非常貼心的設(shè)計(jì)。 應(yīng)用程序開發(fā)增強(qiáng)：左上方是和數(shù)據(jù)相關(guān)的面板

15、，包括數(shù)據(jù)庫(kù)面板、數(shù)據(jù)綁定面板和行為面板；左下方則是文件與資源相關(guān)的面板，包括文件面板、相關(guān)資源面板、代碼收集器等；右邊則是設(shè)計(jì)相關(guān)面板，包括插入面板、css樣式表面板、ap元素面板（用來為浮動(dòng)層定位）。應(yīng)該說這是一個(gè)萬(wàn)金油布局，幾乎適用所有的開發(fā)者，同時(shí)，它也把大部分菜單展示在用戶面前，其他的七種布局可以說只是在這個(gè)基礎(chǔ)上進(jìn)行一些排列和隱藏。 在下方的文檔面板上，dw新增加了一個(gè)實(shí)時(shí)預(yù)覽功能live view。它的作用是在dw窗口中實(shí)時(shí)查看代碼的效果，包括javascript特效！ 第六頁(yè)1.2.4adobe dreamweaver cs52010年4月12日備受關(guān)注的adobe新一代產(chǎn)品c

16、reative suite 5（cs5）正式發(fā)布了。其中包括新的dreamweaver cs5。 此次dreamweaver cs5最突出的亮點(diǎn)有三處：1、對(duì)cms的支持功能；2、對(duì)css的校驗(yàn)；3、對(duì)php更好的支持。以至于國(guó)外一些同學(xué)對(duì)dreamweaver cs5的體驗(yàn)為more wordpressy, more firebuggy。 除此以外，cs5還內(nèi)置了webkit引擎，可以模仿safari、chrome瀏覽器預(yù)覽網(wǎng)頁(yè)效果。 php支持也在cs5版本中得到改善，不僅可以利用代碼提示在文檔中查找到自定義的函數(shù)，還可以利用此功能更好地設(shè)計(jì)cms模板，減輕了廣大模板設(shè)計(jì)者的痛苦。 除了以

17、上三個(gè)亮點(diǎn)外，dreamweaver cs5還有一些其它新特性，比如它整合了browserlab網(wǎng)絡(luò)服務(wù)，可以讓你在鏈接到網(wǎng)絡(luò)瀏覽器實(shí)驗(yàn)室，同 時(shí)使用不同瀏覽器檢查布局，左側(cè)是ie，右側(cè)是firefox。1.3軟件優(yōu)點(diǎn)dreamweaver可以用最快速的方式將fireworks，freehand，或photoshop等檔案移至網(wǎng)頁(yè)上。使用檢色吸管工具選擇熒幕上的顏色可設(shè)定最接近的網(wǎng)頁(yè)安全色。對(duì)于選單，快捷鍵與格式控制，都只要一個(gè)簡(jiǎn)單步驟便可完成。dreamweaver能與您喜愛的設(shè)計(jì)工具，如playback flash，shockwave和外掛模組等搭配，不需離開dreamweaver便可完成

18、，整體運(yùn)用流程自然順暢。除此之外，只要單擊便可使dreamweaver自動(dòng)開啟firework或photoshop來進(jìn)行編輯與設(shè)定圖檔的最佳化。 1.3.1網(wǎng)站管理使用網(wǎng)站地圖可以快速制作網(wǎng)站雛形、設(shè)計(jì)、更新和重組網(wǎng)頁(yè)。改變網(wǎng)頁(yè)位置或檔案名稱，dreamweaver 會(huì)自動(dòng)更新所有連結(jié)。使用支援文字、html碼、html屬性標(biāo)簽和一般語(yǔ)法的搜尋及置換功能使得復(fù)雜的網(wǎng)站更新變得迅速又簡(jiǎn)單。 1.3.2無可比擬的控制能力dreamweaver是唯一提供roundtrip html、視覺化編輯與原始碼編輯同步的設(shè)計(jì)工具。它包含homesite和bbedit等主流文字編輯器。幀(frames)第七頁(yè)和

19、表格的制作速度快的令您無法想像。進(jìn)階表格編輯功能使您簡(jiǎn)單的選擇單格、行、欄或作未連續(xù)之選取。甚至可以排序或格式化表格群組，dreamweaver 支援精準(zhǔn)定位，利用可輕易轉(zhuǎn)換成表格的圖層以拖拉置放的方式進(jìn)行版面配置。所見即所得 dreamweaver成功整合動(dòng)態(tài)式出版視覺編輯及電子商務(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í)，所見即所得的功能，讓您不需要透過瀏覽器就能預(yù)覽網(wǎng)頁(yè)。夢(mèng)幻樣版和xml dreamweav

20、er將內(nèi)容與設(shè)計(jì)分開，應(yīng)用于快速網(wǎng)頁(yè)更新和團(tuán)隊(duì)合作網(wǎng)頁(yè)編輯。建立網(wǎng)頁(yè)外觀的樣版，指定可編輯或不可編輯的部份，內(nèi)容提供者可直接編輯以樣式為主的內(nèi)容卻不會(huì)不小心改變既定之樣式。您也可以使用樣版正確地輸入或輸出xml內(nèi)容。 dreamweaver還集成了程序開發(fā)語(yǔ)言，對(duì)asp、.net、php、js的基本語(yǔ)言和連接操作數(shù)據(jù)庫(kù)，都是完全支持的。1.4工具簡(jiǎn)介第一個(gè)為插入圖象的按鈕，點(diǎn)擊后，會(huì)彈出對(duì)話框，標(biāo)準(zhǔn)對(duì)話框，選擇想要的圖象就行了。 第二個(gè)（橫向走）為插入輪替圖象，它彈出的對(duì)話框會(huì)讓選擇兩副圖，以及鼠標(biāo)點(diǎn)擊時(shí)的連接等。作好后，用鼠標(biāo)移動(dòng)到圖象上面，圖象就會(huì)變成另外的一副圖象，點(diǎn)擊它，就會(huì)連接到另外

21、一個(gè)頁(yè)面上去。 第三個(gè)為表格，點(diǎn)擊后，在彈出的對(duì)話框中，添入想要的行數(shù)和列數(shù)以及表格邊距顏色等。 第四個(gè)為插入表格式數(shù)據(jù)，可以將以前作成的表格形狀的數(shù)據(jù)表，直接插入到網(wǎng)頁(yè)中來，而不用做任何的修改。 第五個(gè)按鈕為插入水平線按鈕，插入后，在屬性浮動(dòng)面板上改改它的大小等。 第六個(gè)為導(dǎo)航條，和第二個(gè)差不多，也可以換圖象，不過，比起第二個(gè)要復(fù)雜的多，但絕對(duì)簡(jiǎn)單。 第七個(gè)為插入層，這好象是 dreamweaver 特有的特性，其他的網(wǎng)頁(yè)編輯軟件中都沒有這項(xiàng)功能。插入的層可以位于頁(yè)面的任何位置。拖動(dòng)就行。 第八個(gè)為插入換行符，有時(shí)網(wǎng)頁(yè)中的文字想讓它換行，按回車又太大，用換行符就是一種不錯(cuò)的選擇。 第八頁(yè)第九

22、個(gè)為插入 email，將聯(lián)系用的 email 插入網(wǎng)頁(yè)中，只要填上 email 地址就行。 第十個(gè)為插入日期，很簡(jiǎn)單，沒有什么好說的。 第十一個(gè)為插入 flash按鈕，flash 是現(xiàn)在網(wǎng)頁(yè)中新興的一種多媒體，有動(dòng)畫，有聲音，但文件很小，極適合在網(wǎng)上傳播。 第十二個(gè)為插入 shockwave 按鈕，做好了的 shockwave 直接就可以插到這兒來。 第十三個(gè)為插入制作人，親自制作的東西不想留名嗎？點(diǎn)它就行。 第十四為插入 firework 按鈕，firework 是 macromedia 公司的又一個(gè)產(chǎn)品，具有制作動(dòng)畫圖象等動(dòng)態(tài)功能。也是專門為網(wǎng)頁(yè)制作設(shè)計(jì)的。 第十五為插入 java語(yǔ)言編寫

23、的 applet 小程序按鈕。 第十六為插入 active x控件用的按鈕。 第十七為插入插件用的按鈕，這兒可以插入別的插件，上面未包括的。 第十八為插入服務(wù)器端接口聯(lián)系的按鈕。 1.4.1插入框架第一個(gè)按鈕為插入框架按鈕，為插入下面的那些按鈕作準(zhǔn)備。這下面的按鈕選項(xiàng)包括：文本框，按鈕，多選按鈕，單選按鈕，列表，文件域，圖象域，隱含域，跳轉(zhuǎn)菜單等交互式網(wǎng)頁(yè)要用到的組件，假如要制作一個(gè)交互式的網(wǎng)頁(yè)像留言薄什么的，用它做，非常的方便快捷。 1.4.2其他按鈕它還有幾個(gè)選項(xiàng)組，但都不是那么常用了，一個(gè)就是它 character 組它是常用符號(hào)組面板，里面為收集了最長(zhǎng)用的符號(hào)，這些，通過手工直接寫，是

24、非常麻煩的事，因?yàn)樗鼈兪窃创a了，而這兒，可以給直接的轉(zhuǎn)換成為源碼，插入就成。而 frames 組，則是對(duì)頁(yè)面的分頁(yè)，也就是分窗口，將一個(gè)瀏覽器窗口分成幾個(gè)窗口，在每個(gè)窗口里加入不同網(wǎng)頁(yè)，來達(dá)到不同的效果。它可以分的總類也如下，可以從圖上直接看出來，非常的方便與快捷。而 head 組則是在網(wǎng)頁(yè)“head”和“/head”之間加入必要的語(yǔ)句，可以是連接，可以是關(guān)鍵字，也可以是描述性的語(yǔ)句，還可以規(guī)定網(wǎng)頁(yè)的刷新頻率等。invisible 組則是插入網(wǎng)頁(yè)中看不見的元素了，比如說：換行符，回車符等不可見的符號(hào)。主要由這個(gè)控制面板來插入。 1.5使用方法1.5.1網(wǎng)頁(yè)制作新建方法，就不用多說，一般軟件中的

25、新建方法在這兒同樣使用，點(diǎn)擊菜單 file 中的 new 就行了，或者按 ctrl+n 也行。 在這兒就可以插入文字，圖象，層等，反正都隨，是不是也是所見既第九頁(yè)所得。假如想看一下它的源文件，可以點(diǎn)擊右下角的“”標(biāo)記，也可以點(diǎn)擊啟動(dòng)面板中的最后一個(gè)選項(xiàng)。就會(huì)彈出來一個(gè)小窗口如圖：也可以打開外部編輯器來編輯它的源代碼，比如說記事本。 只要點(diǎn)一下“external editor”按鈕，wrap選項(xiàng)為換行，當(dāng)不想橫向拉動(dòng)滾動(dòng)條，把它選上，文字就自動(dòng)會(huì)換行了，另外一個(gè)選項(xiàng)為行號(hào)選項(xiàng)，當(dāng)選上它是，左邊將會(huì)出項(xiàng)行號(hào)，這樣特別便于查找，去掉后，就與普通的記事本沒有什么區(qū)別了。編輯好后，關(guān)了它就可以了。 1.

26、5.2管理站點(diǎn)設(shè)計(jì)好的網(wǎng)頁(yè)，在放到網(wǎng)上去以前，都需要把它組建好，以便于上傳，在本地機(jī)上就要組織好，而 dreamweaver 也把這想到了，點(diǎn)擊啟動(dòng)面板上的 site 選項(xiàng)，就會(huì)彈出站點(diǎn)管理窗口，和文件瀏覽器差不多，在這兒，可以增加文件夾，刪減文件，文件改名等等，只要是文件瀏覽器能干的事，它都能干。并且可以清楚地看到，哪個(gè)文件連接到了哪個(gè)文件，哪些文件是并列的關(guān)系，那些文件是父子關(guān)系。所做的第一步是先建立一個(gè)本地站點(diǎn)根目錄。然后選擇“new site”打開對(duì)話框，在“l(fā)ocal root folder”中，輸入本地站點(diǎn)根目錄的位置。然后輸入 http address，如果還沒有該地址，隨便輸入

27、一個(gè)也行，只要好記。最后，按“ok”鍵就可以了。以后從本地站點(diǎn)中刪除文件，拷貝文件時(shí)，站點(diǎn)會(huì)自動(dòng)刷新站點(diǎn)文件列表。其余的管理操作，與文件瀏覽器一樣，也就不多說了。第十頁(yè)第二章網(wǎng)站流程圖簡(jiǎn)介index.html主要界面外部的銷售網(wǎng)站產(chǎn)品展示生產(chǎn)加工銷售網(wǎng)絡(luò)聯(lián)系我們企業(yè)文化質(zhì)量監(jiān)控企業(yè)概述花生與人體健康南瓜粉的營(yíng)養(yǎng)成分小小松子功效大南瓜造就健康生活杏仁油與健康滾動(dòng)圖片連接的新聞第十一頁(yè)第三章.程序詳情介紹3.1使用dreamweaver創(chuàng)建站點(diǎn)：3.1.1主頁(yè)命名成:index因 為 我 做 的 是 一 個(gè) 關(guān) 于 健 康 食 品 的 網(wǎng) 站 所 以 我 選 擇 一 張 綠 色 生 態(tài) 的 圖 片

28、 作 為 我 的 背 景 ， 并 且 用 p s 做 了 一 個(gè) 廣 告 標(biāo) 語(yǔ) 來 宣 傳 我 的 東 西 是 綠 色 食 品 健 康 食 品。 然 后 做 了 兩 個(gè) 按 鈕 一 個(gè) 用 于 進(jìn) 入 我 的 網(wǎng) 頁(yè) 另 一 個(gè) 用 于 進(jìn) 入 一 個(gè) 外 部 的 銷 售 網(wǎng) 點(diǎn) 這 樣 做 的 目 的 是 讓 一 些 已 經(jīng) 了 解 我 產(chǎn) 品 的 人 快 速 購(gòu) 買 ， 不 了 解 我 產(chǎn) 品 的 人 可 以 進(jìn) 入 我 的 下 一 個(gè) 網(wǎng) 頁(yè) 來 了 解 我 的 產(chǎn) 品。第十二頁(yè)3.1.2第二個(gè)界面命名為：zhuye這 個(gè) 頁(yè) 面 上 面 的 部 分 也 是 向 日 葵 的 圖 片 和

29、 廣 告 標(biāo) 語(yǔ) ， 左 側(cè) 是 一 片 葉 子 的 圖 片 ， 用 綠 色 來 突 出 我 公 司 的 觀 念 “ 綠 色 食 品 能 帶 來 健 康 ” ， 右 側(cè) 是 一 張 伸 出 大 拇 指 的 圖 片 ， 我 想 用 這 張 圖 片 體 現(xiàn) 我 公 司 信 譽(yù) 至 上 的 理 念 ， 用 我 們 的 信 譽(yù) 、 真 誠(chéng) ， 讓 企 業(yè) 發(fā) 展 的 更 好 ， 更 值 得 人 們 信 任 。 在 上 部 圖 片 下 有 一 排 導(dǎo) 航 似 的 按 鈕 ， 它 們 分 別 連 接 到 別 的 分 頁(yè) 上 。 中 間 左 上 側(cè) 是 一 組 滾 動(dòng) 的 圖 片 ， 每 張 圖 片 都 連

30、 接 到 分 頁(yè) 上 ， 中 間 右 上 側(cè) 是 一 些 食 品 的 簡(jiǎn) 介 ， 它 們 也 都 連 接 在 別 的 分 頁(yè) 上 。中 間 下 側(cè) 是 一 個(gè) avi 文 件 ， 我 用 a e 做 的 一 個(gè) 宣 傳 似 的 小 視 頻 ， 主 要 用 于 觀 看 網(wǎng) 站 的 人 更 好 的 了 解 我 們 公司。 第十三頁(yè)3.1.3下面這些分頁(yè)就是用文字或圖片介紹公司： 第十四頁(yè)3.1.4這個(gè)頁(yè)面是：chanpinjieshao我 設(shè) 計(jì) 這 個(gè) 頁(yè) 面 的 時(shí) 候 沒 有 簡(jiǎn) 單 的 就 把 圖 片 放 在 里 面 做 些 連 接 ， 而 是 讓 圖 片 兩 張 成 一 組 ， 在 網(wǎng)

31、站 中 間 從 下 向 上 滾 動(dòng) 播 放 ， 而 且 鼠 標(biāo) 放 在 上 面 圖 片 停 止 滾 動(dòng) 每 一 張 圖 片 也 都 有 對(duì) 應(yīng) 的 連 接 ， 但 這 些 連 接 都 是 直 接 連 接 到 銷 售 的 網(wǎng) 站 上 ， 我 這 樣 做 就 是 讓 看 網(wǎng) 站 的 人 看 到 我 們 公 司 的 產(chǎn) 品 ，讓 一 些 看 到 我 們 公 司 產(chǎn) 品 有 想 購(gòu) 買 的 能 快 速 購(gòu) 買 ， 這 樣 做 的 好 處 就 是 避 免 了 一 些 消 費(fèi) 者 因 沒 找 到 購(gòu) 買 地 址 而 對(duì) 產(chǎn) 品 失 去 購(gòu) 買 的 欲 望 。第十五頁(yè)3.1.5這個(gè)頁(yè)面是：shengchan

32、jiagong 這 個(gè) 頁(yè) 面 就 是 讓 幾 幅 圖 片 按 順 序 從 右 至 左 滾 動(dòng) 出 來，這 個(gè) 分 頁(yè) 主 要 就 是 介 紹 了 我 們 公 司 的 廠 房 和 設(shè) 備 ， 當(dāng) 然 干 凈 和 技 術(shù) 高 的 廠 房 設(shè) 備 能 更 好 的 吸 引 那 些 為 了 吃 到 干 凈 健 康 食 品 的 消 費(fèi) 者 前 來 購(gòu) 買。第十六頁(yè)第四章.主要功能程序段這 個(gè) 是 用 dreamweaver中 的 程 序 實(shí) 現(xiàn) 了 多 張 圖 片 在 一 起 自 動(dòng) 播 放 而 且 連 接 到 指 定 分 頁(yè) 上。程序：imgborder:0px;.style1height: 23px

33、; 第十七頁(yè)body margin-top:0px;var imgurl=new array();var imglink=new array();var imgtext=new array();var picnum=0;imgurl1=11.jpg;imglink1=tu.html;imgurl2=22.jpg;imglink2=tu.html;imgurl3=33.jpg;imglink3=tu.html;imgurl4=44.jpg;imglink4=tu.html;imgurl5=55.jpg;imglink5=tu.html;function nextpic() if(picnum5) picnum+ ; else picnum=1