在Internet飛速發(fā)展的今天，互聯(lián)網(wǎng)成為人們快速獲取、發(fā)布和傳遞信息的重要渠道，它在人們政治、經(jīng)濟(jì)、生活等各個(gè)方面發(fā)揮著重要的作用。面對(duì)日益加快的生活節(jié)奏和信息社會(huì)日新月異的變化，城市極需要一種快捷，便利的平臺(tái)來(lái)對(duì)外宣傳城市形象，介紹最新動(dòng)態(tài)和發(fā)展?fàn)顩r。如何運(yùn)用現(xiàn)代化信息技術(shù)完成這一目標(biāo)，建立“一座城市與投資商之間暢通無(wú)阻的大橋”已成為城市中應(yīng)該解決的重要課題之一，本網(wǎng)站正是為這一目標(biāo)設(shè)計(jì)制作的。制作的特產(chǎn)網(wǎng)站是為了更好的宣傳城市的特色與美好，網(wǎng)頁(yè)內(nèi)容的設(shè)計(jì)簡(jiǎn)潔明了，以瀏覽者為中心，整體顏色以淺藍(lán)色為主，主要通過運(yùn)用Dreamweaver、Photoshop、Flash來(lái)更好的提高網(wǎng)站的生命力。

【關(guān)鍵詞】：城市網(wǎng)站；網(wǎng)頁(yè)設(shè)計(jì)；Dreamweaver；Flash

引 言

DweamweaverCs3制作的旅游門戶網(wǎng)站。DweamweaverCs3美國(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è)，還可以通過制作本網(wǎng)頁(yè)能更深入的了解網(wǎng)站的具體要求及步驟，同時(shí)在以后的運(yùn)用中得心應(yīng)手。

一 網(wǎng)頁(yè)設(shè)計(jì)的原則：

1.1 制件網(wǎng)站的目標(biāo)

包括：1.永諦棗王產(chǎn)地的的介紹。2.網(wǎng)站欄目的描述。3.基本功能介紹。4.基本設(shè)計(jì)構(gòu)想。

1.2 總體設(shè)計(jì)方案主題鮮明

在目標(biāo)明確的基礎(chǔ)上，完成網(wǎng)站的構(gòu)思創(chuàng)意即總體設(shè)計(jì)方案。

1.3 網(wǎng)頁(yè)設(shè)計(jì)的要素

在一個(gè)網(wǎng)站中，最重要的頁(yè)面當(dāng)屬主頁(yè)，從版面設(shè)計(jì)來(lái)講，一個(gè)有特色的主頁(yè)，必須包含有四個(gè)要素：文字，圖片，排列方式和主色調(diào)，這四者相輔相成，缺一不可。

1.4 網(wǎng)頁(yè)設(shè)計(jì)技巧

一張完美主頁(yè)設(shè)計(jì)需要積累豐富的知識(shí)以及掌握大量的技巧。

1.5 網(wǎng)頁(yè)形式與內(nèi)容相統(tǒng)一

將豐富的意義和多們的形式組織成統(tǒng)一的頁(yè)面結(jié)構(gòu)，形式語(yǔ)言必須符合頁(yè)面的內(nèi)容，體現(xiàn)內(nèi)容的豐富含義。

1.6 內(nèi)容更新與溝通

企業(yè)Web站點(diǎn)建立后，要不斷更新內(nèi)容。站點(diǎn)信息的不斷更新，讓瀏覽都了解企業(yè)的必展和網(wǎng)上職務(wù)等，同時(shí)也會(huì)幫助企業(yè)建立良好形象。

1.7網(wǎng)頁(yè)設(shè)計(jì)經(jīng)驗(yàn)談

網(wǎng)頁(yè)設(shè)計(jì)涉及到對(duì)多種軟件、多種知識(shí)的學(xué)習(xí)和應(yīng)用，以及個(gè)人的審美觀等等。所以要想制件出漂亮的網(wǎng)頁(yè)，需要一個(gè)逐步學(xué)習(xí)和經(jīng)驗(yàn)積累的過程。網(wǎng)頁(yè)設(shè)計(jì)還有更多的技巧，有待于我們?nèi)ネ诰蚝脱芯俊?/p>

1.8網(wǎng)站界面

界面就是網(wǎng)站給瀏覽者的第一印象，往往決定著網(wǎng)站的可看性，在確定網(wǎng)站的界面時(shí)要注意以下兩點(diǎn)。

1、欄目與板塊編排

構(gòu)建一個(gè)網(wǎng)站就好比寫一篇論文，首先要列出題綱，才能主題明確、層次清晰。

盡可能刪除那些與主題無(wú)關(guān)的欄目；

盡可能將網(wǎng)站內(nèi)最有價(jià)值的內(nèi)容列出欄目上；

盡可能從訪問者角度來(lái)編排欄目以方便訪問者的瀏覽和查詢輔助內(nèi)容，如站點(diǎn)簡(jiǎn)介、版權(quán)信息、個(gè)人信息等大可不必放在主欄目里，以免沖淡主題。

另外，板塊的編排設(shè)置也要合理安排與劃分。

2、設(shè)計(jì)網(wǎng)站色彩

網(wǎng)站給人的第一印象來(lái)自視覺沖擊，不同的色彩搭配產(chǎn)生不同的效果，并可能影響到訪問者的情緒。

1.9確定網(wǎng)站風(fēng)格

有風(fēng)格的網(wǎng)站與普通網(wǎng)站的區(qū)別在于：在普通網(wǎng)站上你看到的只是堆砌在一起的信息，你只能用理性的感受來(lái)描述，比如信息量多少，瀏覽速度快慢等；在有風(fēng)格的網(wǎng)站上你可以獲得除內(nèi)容之外的更感性的認(rèn)識(shí)，比如站點(diǎn)的品位，對(duì)瀏覽者的態(tài)度等。總之，風(fēng)格的形成不是一次定位的，你可以在實(shí)踐中不斷強(qiáng)化、調(diào)整、改進(jìn)。

二 網(wǎng)站制件的過程

2.1列出提綱：

列出自己網(wǎng)站建設(shè)方面的基本需求。

涉及內(nèi)容包括：

1、永諦棗王產(chǎn)地的簡(jiǎn)介2、欄目描述3、特產(chǎn)基本功能介紹4、 網(wǎng)站設(shè)計(jì)構(gòu)想

2.2在網(wǎng)上搜集制件網(wǎng)站所需的文字內(nèi)容還有圖片

（例如：棗原產(chǎn)于我國(guó)，主要分布在黃河流域、大棗最突出的特點(diǎn)是維生素含量高等等）

2.3開始制件

首先要確定網(wǎng)站的整體風(fēng)格及布局設(shè)計(jì)

永諦棗王產(chǎn)地網(wǎng)站制件中

導(dǎo)航有五個(gè)欄目，分別是【首頁(yè)】【永諦棗王產(chǎn)地簡(jiǎn)介】【紅棗和黃河的傳說】【特產(chǎn)展臺(tái)】【紅棗的藥用功效】

在紅棗分類欄目中，分別是【木棗】【灘棗】【蜜棗】【貢棗】【空心脆棗】

欄目設(shè)置完成后就要對(duì)和頁(yè)面填加具體內(nèi)容，根據(jù)各頁(yè)面特色填加不同內(nèi)容，再將各頁(yè)面之間做好鏈接，然后進(jìn)行整理，即可。

2.4測(cè)試

通過在不同電腦、操作系統(tǒng)、瀏覽器下運(yùn)行，檢驗(yàn)所制件網(wǎng)站的兼容性。

三 HTML 網(wǎng)頁(yè)的實(shí)現(xiàn)

3.1 建立站點(diǎn)

點(diǎn)擊啟動(dòng)Dreamwaver （從”開始菜單/程序“點(diǎn)擊啟動(dòng)程序）。

新建站點(diǎn)名稱為【web1】，然后打開下載的網(wǎng)站，把它改成模版

布局網(wǎng)站

在布局之前，我們先要對(duì)這個(gè)網(wǎng)頁(yè)的布局結(jié)構(gòu)有一個(gè)大概的了解。

網(wǎng)站的上方右側(cè)先是一個(gè)搜索，第二行是給網(wǎng)站設(shè)計(jì)的logo第三行是一個(gè)導(dǎo)航欄。第四行是對(duì)不同品種棗的分類。

在了解對(duì)網(wǎng)頁(yè)的布局結(jié)構(gòu)有一定了解以后，我們開始制作這么一個(gè)網(wǎng)頁(yè)：

（1）我們把Dreamweaver打開，然后新建一個(gè)html網(wǎng)頁(yè)到C：＼web1下。（2）然后我們?cè)诰W(wǎng)站內(nèi)的文檔欄內(nèi)修改網(wǎng)頁(yè)的標(biāo)題為“永諦棗王產(chǎn)地”（3）下面開始布局第一個(gè)網(wǎng)頁(yè)：除了模版本身的內(nèi)容外，首頁(yè)：在正文部分有表格布局的層，第一個(gè)是制作這個(gè)網(wǎng)站的首選棗王產(chǎn)地介紹，點(diǎn)擊插入圖片，調(diào)整大小—寫入有關(guān)的內(nèi)容—鏈接。第二是紅棗和黃河的傳說，點(diǎn)擊插入圖片，調(diào)整大小—寫入有關(guān)的內(nèi)容—鏈接。然后其它都同樣的道理。

永諦棗王產(chǎn)地簡(jiǎn)介：這個(gè)版塊，我用了層跟表格來(lái)布局，在可編輯域的左上方點(diǎn)擊層，進(jìn)行布局然后插入圖片，在下方簡(jiǎn)單的介紹該產(chǎn)品在空白域插入表格，鍵入關(guān)于我們縣紅棗的有關(guān)內(nèi)容跟我們本地的一些相關(guān)事物。

紅棗和黃河的傳說：這個(gè)版塊我用的表格，然后鍵入內(nèi)容，鏈接，調(diào)整大小力求美觀 ，大方。在下面插入圖片，可以更加清楚的知道我們縣的地理環(huán)境。

特產(chǎn)展臺(tái)：這個(gè)版塊用的層，然后鍵入內(nèi)容，鏈接，調(diào)整大小，最下方插入flash.。

紅棗的藥用功效：這個(gè)版塊用的表格，然后鍵入內(nèi)容，鏈接，調(diào)整大小。

交通通訊：這個(gè)版塊用的層，然后鍵入內(nèi)容，鏈接，調(diào)整大小。

在不同品種棗的分類中，用二行三列的區(qū)域塊劃分。

木棗：這個(gè)版塊用占用一小塊單元格，我先插入的是木棗的圖片，接著對(duì)木棗做簡(jiǎn)單的介紹，為了讓更多人對(duì)木棗的詳解，對(duì)木棗進(jìn)行鏈接。

灘棗：這個(gè)版塊用占用一小塊單元格，我先插入的是灘棗的圖片，接著對(duì)灘棗做簡(jiǎn)單的介紹，為了讓更多人對(duì)灘棗的詳解，對(duì)灘棗進(jìn)行鏈接。

蜜棗：這個(gè)版塊用占用一小塊單元格，我先插入的是蜜棗的圖片，接著對(duì)蜜棗做簡(jiǎn)單的介紹，為了讓更多人對(duì)蜜棗的詳解，對(duì)蜜棗進(jìn)行鏈接。其實(shí)兩個(gè)也是也是一樣的道理。

網(wǎng)站也可以在這得到更直接、快捷的反饋意見，更好，更快的改善。

3.2 模版

建立多個(gè)二級(jí)頁(yè)面

在站點(diǎn)文件夾下新建十個(gè)空白頁(yè)面，在dreamweaver中打開，然后打開站點(diǎn)文件夾下templates文件夾下的moban文件，在右側(cè)文件面板中打開“資源”面板，選擇“模板”然后使各個(gè)頁(yè)面都應(yīng)用于這一模板。然后全部保存。

參考文獻(xiàn)：

[1] 徐珂、苗彤、趙暉 《網(wǎng)頁(yè)視覺與設(shè)計(jì)》人民郵電出版社2001出版

[2] 任學(xué)文、范嚴(yán) 《網(wǎng)頁(yè)設(shè)計(jì)與制作》中國(guó)科學(xué)技術(shù)出版社2006出版

[3] 陳希 《網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)》科學(xué)出版社 2009年出版

[4] 吳濤 《網(wǎng)站全程設(shè)計(jì)技術(shù)》清華大學(xué)出版社2006年出版