基于Dreamweaver的網(wǎng)頁設(shè)計(jì)(標(biāo)準(zhǔn)格式畢業(yè)論文)

第一篇：基于Dreamweaver的網(wǎng)頁設(shè)計(jì)(標(biāo)準(zhǔn)格式畢業(yè)論文)

石家莊科技信息職業(yè)學(xué)院頂崗實(shí)習(xí)崗位技術(shù)工作論文

基于Dreamweaver的網(wǎng)頁設(shè)計(jì)

學(xué) 號: 121404218 姓名: *** 專業(yè): 軟件技術(shù) 年級: 12級企業(yè)指導(dǎo)老師:

二〇一五年三月

題目基于Dreamweaver的網(wǎng)頁設(shè)計(jì)

企業(yè)指導(dǎo)教師

評語

指導(dǎo)教師(簽章)

年月日

摘要

人性化設(shè)計(jì)要求圍繞人為中心展開設(shè)計(jì)。網(wǎng)頁作為一種傳遞信息的媒體，又受到時(shí)間、空間和使用環(huán)境的限制。在網(wǎng)頁設(shè)計(jì)時(shí)，需要設(shè)計(jì)者充分考慮用戶的需要，通過各種設(shè)計(jì)手段，調(diào)動(dòng)各種設(shè)計(jì)元素，在方便用戶使用的前提下，體現(xiàn)良好的美感，同時(shí)在這個(gè)過程中，在網(wǎng)站和用戶之間建立起情感聯(lián)系。

關(guān)鍵詞：人性化；交互性網(wǎng)頁設(shè)計(jì)；

第一章前言????????????????????????? 1 1.1 課題來源?????????????????????????1 1.2 網(wǎng)站開發(fā)項(xiàng)目需求分析???????????????????1 第二章網(wǎng)頁制作概述??????????????????????2 2.1 網(wǎng)頁的類型????????????????????????2 2.2 網(wǎng)頁開發(fā)技術(shù)???????????????????????3 2.3 網(wǎng)頁布局?????????????????????????5 2.4 網(wǎng)頁配色?????????????????????????6 2.5 網(wǎng)頁設(shè)計(jì)流程???????????????????????6 第三章涉及軟件????????????????????????7 3.1 DreamWeaVer cs3介紹???????????????????7 3.2 DreamWeaVer cs3操作界面?????????????????7 第四章建立網(wǎng)頁鏈接????????????????????? 8 4.1 文字鏈接?????????????????????????8 4.2 圖像鏈接?????????????????????????9 4.3 在HTML語言中建立網(wǎng)頁鏈接?????????????????9 結(jié) 論?????????????????????????????11 致謝?????????????????????????????12 參考文獻(xiàn)????????????????????????????13

第一章前言

1.1課題來源

隨著二十一世紀(jì)新興科技的飛速發(fā)展，如今的信息產(chǎn)業(yè)正在經(jīng)受著一個(gè)巨大的挑戰(zhàn)，同時(shí)也面臨著一個(gè)重大的機(jī)遇。就目前的科技發(fā)展水平而言，信息產(chǎn)業(yè)的發(fā)展已經(jīng)不能夠滿足社會(huì)化大生產(chǎn)的要求，因此，各個(gè)國家集中人力、財(cái)力加大對信息技術(shù)產(chǎn)業(yè)的投入，以適應(yīng)目前需要?？上驳氖窃谶@幾十年的發(fā)展中我們有了互聯(lián)網(wǎng)。互聯(lián)網(wǎng)加大了我們了解世界的眼界，縮緊了人與人之間的距離，這就更容易的使我們走上信息化的道路?；ヂ?lián)網(wǎng)拉近了各個(gè)領(lǐng)域之間的距離，如今利用互聯(lián)網(wǎng)來宣傳已經(jīng)是必不可少的工具，城市發(fā)展也需要互聯(lián)網(wǎng)的宣傳來帶動(dòng)自身的發(fā)展。

1.2網(wǎng)站開發(fā)項(xiàng)目需求分析

一個(gè)網(wǎng)站項(xiàng)目的確立是建立在各種各樣的需求上面的，這種需求往往網(wǎng)站建設(shè)在Internet應(yīng)用上的地位顯的格外重要，它已成為政府、企事業(yè)單位信息化建設(shè)中的重要組成部分來自于客戶的實(shí)際需求或者是出于自身發(fā)展的需要。在Internet飛速發(fā)展的今天，互聯(lián)網(wǎng)已成為人們快速獲取、發(fā)布和傳遞信息的重要渠道，正以一種前所未有的沖擊力影響著人類的活動(dòng)。它在人們政治、經(jīng)濟(jì)、生活等各個(gè)方面發(fā)揮著重要的作用。因此網(wǎng)站建設(shè)在Internet應(yīng)用上的地位顯的格外重要，它已成為政府、企事業(yè)單位信息化建設(shè)中的重要組成部分。

第 1 頁

第二章網(wǎng)頁制作概述

2.1 網(wǎng)頁的類型

網(wǎng)頁有多種分類,我們籠統(tǒng)意義上的分類是動(dòng)態(tài)和靜態(tài)的頁面,原則上講靜態(tài)頁面多通過網(wǎng)站設(shè)計(jì)軟件來進(jìn)行重新設(shè)計(jì)和更改,相對的比較滯后，當(dāng)然現(xiàn)在有網(wǎng)站管理系統(tǒng)，也可以生成靜態(tài)頁面~我們稱這種靜態(tài)頁面為偽靜態(tài)。動(dòng)態(tài)頁面通過網(wǎng)頁腳本與語言自動(dòng)處理自動(dòng)更新的頁面。

2.1.1 靜態(tài)頁面

靜態(tài)頁面是網(wǎng)頁的代碼都在頁面中，不需要執(zhí)行asp,php,jsp,.net等程序生成客戶端網(wǎng)頁代碼的網(wǎng)頁。靜態(tài)頁面不能自主管理發(fā)布更新的頁面,如果想更新網(wǎng)頁內(nèi)容,要通過FTP軟件把文件DOWN下來用網(wǎng)頁制作軟件修改（通過fso等技術(shù)例外）。但是靜態(tài)頁面最大的好處是下載速度快，因?yàn)椴恍枰绦蜻\(yùn)算和數(shù)據(jù)庫連接。常見的靜態(tài)頁面以.html、.htm為擴(kuò)展名的。并非網(wǎng)站上沒有動(dòng)畫的就是靜態(tài)頁面。

2.1.2 動(dòng)態(tài)頁面

動(dòng)態(tài)頁面是通過執(zhí)行asp、php、jsp、.net等程序生成客戶端網(wǎng)頁代碼的網(wǎng)頁。動(dòng)態(tài)頁面通?？梢酝ㄟ^網(wǎng)站后臺管理系統(tǒng)對網(wǎng)站的內(nèi)容進(jìn)行更新管理。發(fā)布新聞，發(fā)布公司產(chǎn)品，交流互動(dòng)，博客，網(wǎng)上調(diào)查等，這都是動(dòng)態(tài)網(wǎng)站的一些功能，也是我們常見的。動(dòng)態(tài)網(wǎng)頁是需要語言環(huán)境支持的，動(dòng)態(tài)頁面常見的擴(kuò)展名有：.asp、.php、.jsp、.cgi 等。動(dòng)態(tài)頁面的“動(dòng)態(tài)”是網(wǎng)站與客戶端用戶互動(dòng)的意思，而非網(wǎng)頁上有動(dòng)畫的就是動(dòng)態(tài)頁面。

動(dòng)態(tài)網(wǎng)頁是最常用的網(wǎng)站建設(shè)的一種表達(dá)形式，其優(yōu)點(diǎn)在于可以根據(jù)先前所制定好的程序界面，根據(jù)用戶的不同請求返回相應(yīng)的數(shù)據(jù)?？梢哉f是一對多的關(guān)系。從而達(dá)到資源的最大利用和節(jié)省服務(wù)器上的物理資源。如果今后需要改變站點(diǎn)風(fēng)格，只需要重新制作前臺所訪問的數(shù)據(jù)即可。只要數(shù)據(jù)庫結(jié)構(gòu)不變，可以很快的進(jìn)行改版的。

2.2 網(wǎng)頁開發(fā)技術(shù)

動(dòng)態(tài)網(wǎng)頁開發(fā)技術(shù)介紹——HTML、ASP、JSP、CGI、PHP。

HTML（HyperTextMark-upLanguage）即超文本標(biāo)記語言，是004km.cnmon Gateway Interface(公用第 2 頁

網(wǎng)關(guān)接口)。在早期，你可以使用不同的程序編寫合適的CGI程序，如Visual Basic,Delphi或C/C++等。雖然CGI技術(shù)成熟而且功能強(qiáng)大，但由于編程困難，效率低下，修改復(fù)雜等缺陷，所以有逐漸被新技術(shù)取代的趨勢。ASP全名Active Server Pages，是一個(gè)WEB服務(wù)器端的開發(fā)環(huán)境，利用它可以產(chǎn)生和運(yùn)行動(dòng)態(tài)的、交互的、高性能的WEB服務(wù)應(yīng)用程序。ASP采用腳本語言VB Script（Java script）作為自己的開發(fā)語言。ASP更精確的說是一個(gè)中間件，這個(gè)中間件將Web上的請求轉(zhuǎn)入到一個(gè)解釋器中，在這個(gè)解釋器中將所有的ASP的Script進(jìn)行分析，再進(jìn)行執(zhí)行，而這時(shí)可以在這個(gè)中間件中去創(chuàng)建一個(gè)*.html文件（靜態(tài)網(wǎng)頁）。

PHP是一種跨平臺的服務(wù)器端的嵌入式腳本語言.它大量地借用C,Java和Perl語言的語法, 并耦合PHP自己的特性,使WEB開發(fā)者能夠快速地寫出動(dòng)態(tài)生成頁面.它支持目前絕大多數(shù)數(shù)據(jù)庫。還有一點(diǎn)，PHP是完全免費(fèi)的。

JSP 是Sun公司推出的新一代站點(diǎn)開發(fā)語言，他完全解決了目前ASP,PHP的一個(gè)通?。_本級執(zhí)行（據(jù)說PHP4 也已經(jīng)在Zend 的支持下，實(shí)現(xiàn)編譯運(yùn)行）。Sun 公司借助自己在Java 上的不凡造詣，將Java 從Java 應(yīng)用程序和 Java Applet 之外，又有新的碩果，就是Jsp－－Java Server Page。Jsp 可以在Serverlet和JavaBean的支持下，完成功能強(qiáng)大的站點(diǎn)程序。

2.3 網(wǎng)頁布局

網(wǎng)站主頁就好象是宣傳欄或者店面——對訪問者產(chǎn)生第一印象，都希望盡量給人留下好的印象。

一般來說，好的網(wǎng)站應(yīng)該給人有這樣的感覺：干凈整潔；條理清楚；專業(yè)水準(zhǔn)；引人入勝。

網(wǎng)頁應(yīng)該力求抓住而不是淹沒瀏覽者的注意力，過多的閃爍、色彩、下拉菜單框、圖片等會(huì)讓訪問者無所適從——離開是最好的選擇，就象一些商店，播放震耳欲聾的發(fā)燒音樂，你要做的唯一決定就是離開那里，越快越好。

2.3.1 網(wǎng)頁布局的基本概念

最開始，網(wǎng)頁呈現(xiàn)在你面前的時(shí)侯，它就好像一張白紙，它需要你任意揮灑你的設(shè)計(jì)才思，可以創(chuàng)造出自己的設(shè)計(jì)方案。，雖然你能控制一切你所能控制的東西，但假如你知道什么是一種約定俗成的標(biāo)準(zhǔn)或者說大多數(shù)訪問者的瀏覽習(xí)慣，那么你可以在此基礎(chǔ)上加上自己的東西，這樣你創(chuàng)造出來的網(wǎng)頁才能更好的被別人接受。

（1）頁面尺寸由于頁面尺寸和顯示器大小及分辨率有關(guān)系，網(wǎng)頁的局限性就在于你無法突破顯示器的范圍，而且因?yàn)闉g覽器也將占去不少空間，留下給你的頁面第 3 頁

范圍變得越來越小。一般分辨率在800x600的情況下，頁面的顯示尺寸為：780x428個(gè)象素；分辨率在640x480的情況下，頁面的顯示尺寸為:620X311個(gè)象素；分辨率在1024X768的情況下，頁面的顯示尺寸為：1007x600。從以上數(shù)據(jù)可以看出，分辨率越高頁面尺寸越大。

瀏覽器的工具欄也是影響頁面尺寸的原因。一般目前的瀏覽器的工具欄都可以取消或者增加，那么當(dāng)你顯示全部的工具欄時(shí)，和關(guān)閉全部工具欄時(shí)，頁面的尺寸是不一樣的。在網(wǎng)頁設(shè)計(jì)過程中，向下拖動(dòng)頁面是惟一給網(wǎng)頁增加更多內(nèi)容(尺寸)的方法。除非你能肯定站點(diǎn)的內(nèi)容能吸引大家拖動(dòng)，否則不要讓訪問者拖動(dòng)頁面超過三屏。如果需要在同一頁面顯示超過三屏的內(nèi)容，那么你最好能在上面做上頁面內(nèi)部連接，方便訪問者瀏覽。

（2）整體造型造型就是創(chuàng)造出來的物體形象，這里是指頁面的整體形象。這種形象應(yīng)該是一個(gè)整體，圖形與文本的接合應(yīng)該是層疊有序。雖然，顯示器和瀏覽器都是矩形，但對于頁面的造型，你可以充分運(yùn)用自然界中的其它形狀以及它們的組合：矩形，圓形，三角形，菱形等。對于不同的形狀，它們所代表的意義是不同的。比如矩形代表著正式，規(guī)則。

首先，尺寸的選擇。目前一般800X600的分辨率為約定俗成的瀏覽模式。所以為了照顧大多數(shù)訪問者，你頁面的尺寸以800X600的分辨率為準(zhǔn)。其次，造型的選擇。先在白紙上畫出象征瀏覽器窗口的矩形，這個(gè)矩形就是你布局的范圍了。選擇一個(gè)形狀作為整個(gè)頁面的主題造型，我們選擇圓形，因?yàn)樗碚呷岷?，和時(shí)尚流行比較相稱，然后在矩形框架里隨意畫出來，你可以試者在增加一些圓形或者其它形狀。這樣畫下來，你會(huì)發(fā)現(xiàn)很亂。其實(shí)，如果你一開始就想設(shè)計(jì)出一個(gè)完美的布局來是比較困難的，而你要在這看似很亂的圖形中找出隱藏在其中的特別的造型出來。還要注意一點(diǎn)，你不要擔(dān)心你設(shè)計(jì)的布局是否能夠?qū)崿F(xiàn)。事實(shí)上，只要你能想到的布局都能靠現(xiàn)今的HTML技術(shù)實(shí)現(xiàn)?？紤]到左邊向左凹的弧線，為了取得平衡我們在頁面右邊增加了一個(gè)矩形，(也可以是一條線段)然后，增加頁頭。一般頁頭都是位于頁面頂部，所以我們增加了一個(gè)頁頭，為了和左邊的弧線和右邊的矩形取得平衡，我們增加了一個(gè)矩形頁頭并讓頁頭相交與左邊的弧線，然后，增加文本。頁面的空白部分加別加入文本和圖形。因?yàn)樵陧撁嬗疫呌芯匦巫鳛榕阋r，所以文本放置在空白部分不會(huì)因?yàn)樽筮叺幕【€而顯得不協(xié)調(diào)，最后，增加圖片。圖片是美化頁面和說明內(nèi)容必須的媒體。在這里把圖片加入到適當(dāng)?shù)牡胤?，?jīng)過以上的幾個(gè)步驟，一個(gè)時(shí)尚頁面的大概布局就出現(xiàn)了。當(dāng)然，它不是最后的結(jié)果，而是你以后制作時(shí)的重要參考依據(jù)。（2）軟件布局法除了紙上布局，還可以利用軟件來完成這些工作。如利用Photoshop。Photoshop所具有的對圖像的編輯功能用到設(shè)計(jì)網(wǎng)頁布局上更顯得心應(yīng)手。利用Photoshop可以方便的使用顏色，使用圖形，并且可以利用層的功能設(shè)計(jì)出用紙張無第 4 頁

法實(shí)現(xiàn)的布局意念。

2.3.2 網(wǎng)頁布局技術(shù)

（1）層疊樣式表的應(yīng)用在新的HTML4.0標(biāo)準(zhǔn)中，CSS(層疊樣式表)被提出來，它能完全精確的定位文本和圖片。CSS有點(diǎn)復(fù)雜，但它的確是一個(gè)好的布局方法。曾經(jīng)無法實(shí)現(xiàn)的想法利用CSS都能實(shí)現(xiàn)。目前在許多站點(diǎn)上，層疊樣式表的運(yùn)用是一個(gè)站點(diǎn)優(yōu)秀的體現(xiàn)。比如一些企業(yè)網(wǎng)站。

（2）表格布局表格布局被廣泛使用，已經(jīng)成為一個(gè)潛在的標(biāo)準(zhǔn)。隨便瀏覽一個(gè)站點(diǎn)，它們一定是用表格布局的。表格布局的優(yōu)勢在于它能對不同對象加以處理，而又不用擔(dān)心不同對象之間的影響。而且表格在定位圖片和文本上比起用CSS更加方便。表格布局唯一的缺點(diǎn)是，當(dāng)你用了過多表格時(shí)，頁面下載速度受到影響。對于表格布局，打開一個(gè)站點(diǎn)的首頁，然后保存為HTML文件，利用網(wǎng)頁編輯工具打開它(要所見即所得的軟件)，會(huì)可以看到這個(gè)頁面是如何利用表格的。

（3）框架布局由于它的兼容性，框架布局并沒有被所有人接受。但從布局上考慮，框架結(jié)構(gòu)不失為一個(gè)好的布局方法。它如同表格布局一樣，把不同對象放置到不同頁面加以處理，因?yàn)榭蚣芸梢匀∠吙?，所以一般來說不影響整體美觀。

2.4 網(wǎng)頁配色

網(wǎng)站充斥著枯燥的設(shè)計(jì)，惠普、IBM、戴爾、微軟，以及其他數(shù)不盡的網(wǎng)站（相似的布局，相似的配色）。這樣一種標(biāo)準(zhǔn)化的界面可以使瀏覽更方便，但同時(shí)帶給用戶一種很世俗的體驗(yàn)，并不能與訪客產(chǎn)生一種積極的聯(lián)系。面對這種單調(diào)的設(shè)計(jì)，有一種解決方法，就是使用顏色。可能沒有其他設(shè)計(jì)元素能像顏色一樣能影響人們對世界感受。顏色可以瞬間改變我們的情緒和意見。顏色會(huì)讓我們感覺到舒適、敬畏，或者激動(dòng)。

在界面設(shè)計(jì)中，顏色組合對設(shè)計(jì)非常有用?？梢詤^(qū)分設(shè)計(jì)讓用戶更加難忘、引導(dǎo)用戶使用戶專注于交互、吸引用戶使頁面布局更舒適，更有魅力。一旦有機(jī)會(huì)可以讓網(wǎng)站更獨(dú)特，就不能放棄。如果你的網(wǎng)站做的很醒目，那么用戶可能會(huì)花更多時(shí)間瀏覽并且想是從哪里訪問過來的，他們有可能記住這個(gè)網(wǎng)站并且下次再訪問?？赡軟]有比顏色更好的元素可以達(dá)到這樣的效果了。人們會(huì)馬上對顏色產(chǎn)生感覺：激動(dòng)、高興或者枯燥乏味。當(dāng)你試圖在一個(gè)充滿飽和色調(diào)的頁面上瀏覽信息時(shí)，你的眼睛會(huì)不斷地返回那些亮的顏色。最強(qiáng)的視覺元素是最重要的。我們趨向于忘記那些深藍(lán)、黃色和灰色，因?yàn)槊刻於伎吹?。在那些用戶需要長時(shí)間在線使用的 Web 應(yīng)用程序中，注意這一點(diǎn)尤為重要。不是很強(qiáng)烈的配色可以使用戶專注于工作和接收重要信息。當(dāng)然完美的 Web 體驗(yàn)不能僅僅依靠顏色，結(jié)構(gòu)、交互、布局等方面也必須協(xié)同工作，來創(chuàng)建可用、易用的網(wǎng)站和應(yīng)用程序。但是顏色是平衡中的重要部分，不能忽略。

2.5 網(wǎng)頁設(shè)計(jì)流程

第 5 頁

網(wǎng)頁設(shè)計(jì)是一個(gè)互動(dòng)的過程，不僅是設(shè)計(jì)師構(gòu)思設(shè)計(jì)就可以完成的。從客戶提出需求到最終發(fā)布，期間需要客戶與設(shè)計(jì)人員共同參與協(xié)商才可以，具體流程如下：首先，獲取客戶需求和資料。在設(shè)計(jì)網(wǎng)站頁面之前，設(shè)計(jì)師需要知道客戶的需求，從而確定客戶建立網(wǎng)站的目的?？蛻籼岢鼍W(wǎng)站需求是非常重要的一個(gè)環(huán)節(jié)。沒有詳細(xì)的需求，設(shè)計(jì)人員無法憑空進(jìn)行設(shè)計(jì)制作。在這個(gè)步驟中，雙方的溝通與交流是非常重要的。其次，確定網(wǎng)站內(nèi)容。設(shè)計(jì)人員選擇適合自己的圖像編輯軟件、動(dòng)畫制作軟件和網(wǎng)頁制作軟件進(jìn)行網(wǎng)頁的初步設(shè)計(jì)，這中間可能還需要和客戶進(jìn)行多次溝通才能達(dá)到客戶滿意的效果。在具體設(shè)計(jì)時(shí)，設(shè)計(jì)人員應(yīng)該為網(wǎng)站定位一個(gè)主題，從而保證所有網(wǎng)頁都圍繞這個(gè)主題進(jìn)行設(shè)計(jì)制作，保證風(fēng)格的和諧統(tǒng)一。

然后，申請域名和空間。使用該方法能夠有效同步管理文件。還可以通過FTP軟件連接到服務(wù)器空間上，然后上傳發(fā)布文件。最后，后期維護(hù)。一般靜態(tài)網(wǎng)站上傳后，如果客戶方?jīng)]有專業(yè)人員維護(hù)，這樣就需要設(shè)計(jì)人員從客戶方獲取新資料進(jìn)行定期或不定期的更新。如果是動(dòng)態(tài)網(wǎng)站，設(shè)計(jì)人員需要負(fù)責(zé)培訓(xùn)客戶方如何使用后臺管理，這樣客戶就可以自己通過后臺管理添加信息，設(shè)計(jì)人員只要及時(shí)更正動(dòng)態(tài)網(wǎng)站的錯(cuò)誤即可。

第 6 頁

第三章涉及軟件

3.1 DreamWeaVer 8介紹

Dreamweaver 8是Adobe(奧多比)公司收購Macromedia公司后最新推出的Creative Suite 3 設(shè)計(jì)套裝中用于網(wǎng)頁設(shè)計(jì)與制作的組件。作為全球最流行，最優(yōu)秀的所見即所得的網(wǎng)頁編輯器，Dreamweaver可以輕而易舉地制作出跨操作系統(tǒng)平臺，跨瀏覽器的充滿動(dòng)感的網(wǎng)頁，是目前制作Web頁站點(diǎn),Web頁和Web應(yīng)用程序開發(fā)的理想工具。Dreamweaver，F(xiàn)ireworks，F(xiàn)lash被稱為網(wǎng)頁制作的“三劍客”，這三款工具相輔相承，是制作網(wǎng)頁的最佳拍檔

3.2 DreamWeaVer 8操作界面

DreamWeaVer 8界面設(shè)計(jì)友好，空間廣闊，操作精微細(xì)致,是一種所見即所得的網(wǎng)頁編輯器，既有效的減少了代碼編寫的工作量，也確保所設(shè)計(jì)文檔的專業(yè)性和兼容性。，如圖3.1所示。

圖3.1 DreamWeaVer 8 操作界面

第四章建立網(wǎng)頁鏈接

網(wǎng)站實(shí)際上是由很多網(wǎng)頁組成的，那么網(wǎng)頁之間是如何聯(lián)系的呢？這就是本章要講的內(nèi)容----網(wǎng)頁的“鏈接”?！版溄印保址Q“超鏈接"（Hyperlink）,它作為網(wǎng)頁的橋梁。網(wǎng)頁中的很多對象都可以加入“鏈接”屬性。在Dreamweaver 8中，如果以“鏈接”的媒介來劃分的話，則“鏈接”可以分為“文字鏈接”、“圖像鏈接”、“圖像地圖鏈接”、“內(nèi)部鏈接和外部鏈接”、“E-mail鏈接”、“命名錨記鏈接”、“文件下載鏈接”和“跳轉(zhuǎn)菜單”，共8種。

第 7 頁

4.1 文字鏈接

“文字鏈接”即以文字作為媒介的鏈接，它是網(wǎng)頁中最常被使用的鏈接方式，具有“文件小、制作簡單和便于維護(hù)”的特點(diǎn)。接下來結(jié)合我的個(gè)人網(wǎng)站為實(shí)例，來講解如何為文字建立“鏈接”。操作步驟：

步驟1、準(zhǔn)備好已經(jīng)制作完成的首頁的各個(gè)欄目頁面

步驟

2、在Dreamweaver 中打開首頁，之后反白選取作為“鏈接”的文字。步驟

3、觀察“屬性面板”，其中包括一個(gè)“鏈接”文本框。步驟

4、接下來需要把鏈接的位址加入到文本框中。

步驟

5、在“鏈接”文本框下面還有一個(gè)“目標(biāo)”下拉列表，從中可以選擇鏈接網(wǎng)頁顯示的窗口方式，共有4種。如圖：

步驟

6、還可以設(shè)置一些“鏈接”的屬性，單擊“屬性面板”中的“頁面屬性”，選擇其中的“鏈接”分類，可以進(jìn)行的設(shè)置有“鏈接字體”、“大小”、“鏈接顏色”、“變換圖像鏈接”顏色、“已訪問鏈接”顏色、“活動(dòng)鏈接”顏色及“下劃線樣式”。

步驟

7、至此，第1個(gè)欄目的鏈接就制作完畢了，按下Ctrl+S保存網(wǎng)頁，再按下F12預(yù)覽，測試一下，當(dāng)鼠標(biāo)放在“放松心情”這4個(gè)文字上時(shí)將變成手形，并且瀏覽器窗口下面的狀態(tài)區(qū)中會(huì)顯示鏈接到的網(wǎng)頁的位址，單擊文字，頁面會(huì)立即跳轉(zhuǎn)到第1個(gè)欄目中，這表示鏈接已經(jīng)制作成功了。步驟

8、同理，按照以上步驟，再為“閑情逸致”和“個(gè)人主頁”等其它欄制作指向?qū)?yīng)欄目的鏈接。

至此，整個(gè)“文字鏈接”的實(shí)例就全就全部完成了。

4.2 圖像鏈接

“圖像”也是常被使用的鏈接媒體，它和“文字鏈接”非常相似。為圖像加入鏈接，首先應(yīng)該在網(wǎng)頁中插入“圖像”，有關(guān)插入“圖像”或“導(dǎo)航條”按鈕的內(nèi)容，接下來以我的網(wǎng)站“my web“為例，講解如何建立“圖像鏈接”。操作步驟：

步驟

1、首先仍然要準(zhǔn)備好已經(jīng)制作完成的首頁和各個(gè)欄目的頁面

步驟

2、在Dreamweaver中打開網(wǎng)站的首頁，之后選取要制作“鏈接”的圖像。步驟

3、觀察“屬性面板”，在“鏈接”文本框中輸入鏈接的文字位址。步驟

4、如果有需要，可以在“目標(biāo)”下拉列表中選擇“鏈接”網(wǎng)頁顯示的窗口方式，分別為-blank、-parent、-self或 top。

步驟

5、至此，第1個(gè)欄目的圖像鏈接就制作完畢了，按下Ctrl+S保存網(wǎng)頁，再按下F12預(yù)覽，測試一下，將鼠標(biāo)放在“動(dòng)畫制作”4個(gè)文字上時(shí)將變成手形，同時(shí)瀏覽器窗口下面的狀態(tài)區(qū)中會(huì)顯示出鏈接到的網(wǎng)頁的地址，并且會(huì)顯示出“替代” 第 8 頁

文本“動(dòng)畫制作”，單擊文字，頁面會(huì)立即跳轉(zhuǎn)到第3個(gè)欄目中，這表示鏈接已經(jīng)制作成功了。

步驟

6、同理，按照以上步驟，再為其它幾幅圖像制作指向?qū)?yīng)欄目的鏈接。步驟

7、在欄目頁面中制作“返回首頁”的鏈接，使得單擊后可以跳轉(zhuǎn)回首頁。至此，整個(gè)“圖像鏈像”的實(shí)例就全部完成了。

4.3 在HTML語言中建立網(wǎng)頁鏈接

一、文字鏈接在HTML語言中用超鏈接標(biāo)記指向一個(gè)目標(biāo)。其基本格式為：舉個(gè)簡單的“文本鏈接”的實(shí)例，該實(shí)例相對應(yīng)的HTML代碼如下所示。文字鏈接

a href-“index2.html”target=”-blank”>平面設(shè)計(jì)（新開窗口，-blank)

相冊（原窗口，默認(rèn)為空）

留言

第二篇：2016屆職業(yè)高中Dreamweaver網(wǎng)頁設(shè)計(jì)畢業(yè)論文

中等職業(yè)技術(shù)學(xué)校

畢

業(yè)

論

文

題目：關(guān)于Dreamweaver的網(wǎng)頁設(shè)計(jì)

———————————————

學(xué)生（姓名）：

———————————

論文指導(dǎo)教師姓名：

所在系及專業(yè)名稱：___電腦游戲__________________ 班級：___1005__

論文提交日期：

年月

日論文答辯日期：

****年**月**日

答辯委員會(huì)主席：_____________

評閱人老師

年月日

摘要

在Internet飛速發(fā)展的今天，互聯(lián)網(wǎng)已成為人們快速獲取、發(fā)布和傳遞信息的重要渠道，正以一種前所未有的沖擊力影響著人類的活動(dòng)。它在人們政治、經(jīng)濟(jì)、生活等各個(gè)方面發(fā)揮著重要的作用。因此網(wǎng)站建設(shè)在Internet應(yīng)用上的地位顯的格外重要，它已成為政府、企事業(yè)單位信息化建設(shè)中的重要組成部分。

現(xiàn)今的社會(huì)，人們已經(jīng)離不開了網(wǎng)絡(luò)，網(wǎng)絡(luò)已經(jīng)成為人與人之間交流的一種形式，它能夠把事情的復(fù)雜化轉(zhuǎn)為簡單化，擺脫了時(shí)間和空間的限制。網(wǎng)站為很多人提供了一個(gè)網(wǎng)絡(luò)生活空間，通過其網(wǎng)頁展示了企業(yè)介紹、城市文化、校園文化介紹、招商信息、加盟程序、留言等一系列內(nèi)容的介紹。為了更好的宣傳和服務(wù)于經(jīng)濟(jì)發(fā)展，我通過制作一個(gè)網(wǎng)站來介紹宣傳一下我的家鄉(xiāng)。本文比較系統(tǒng)的闡述了有關(guān)網(wǎng)站建設(shè)方面的相關(guān)理論知識及該網(wǎng)站開發(fā)設(shè)計(jì)，充分體現(xiàn)了計(jì)算機(jī)技術(shù)服務(wù)于經(jīng)濟(jì)建設(shè)的重要思想。

關(guān)鍵詞: 網(wǎng)站建設(shè)，Internet，城市發(fā)展

Abstract

In the Internet rapid development today, the Internet has become a people quickly get, release and transmit information, is an important channel in an unprecedented wallop affect human activities.It in people politics, economy, life aspects played an important role.Therefore website construction in the Internet application status of especially important to show, and it has become the government, enterprises, an important part of informatization construction.Today's society, people have without the Internet, network has become between a form of communication, it can make things complicated to simplicity, get rid of the time and space restrictions.Web site for many people provides a network life space, through its web demonstrate the enterprise introduces, urban culture and campus culture introduction, investment promotion information, join procedure, introduced a series of content of the message.In order to better propaganda and in the service of the economic development, and I made a web site to introduce by propagandize the my hometown.In this paper expatiates relevant website construction related theory knowledge and the website development and design, fully embodies the computer technology to serve economic construction important thoughts.Keywords: “website construction”“Internet”“urban development”

第一章前言.............................................................5 1．1課題來源.......................................................5 1．2 網(wǎng)站開發(fā)項(xiàng)目需求分析.........................................5 第二章網(wǎng)頁制作概述.....................................................6 2.1 網(wǎng)頁的類型......................................................6 2.1.1 靜態(tài)頁面..................................................6 2.1.2 動(dòng)態(tài)頁面..................................................6 2.2 網(wǎng)頁開發(fā)技術(shù)....................................................7 2.3 網(wǎng)頁布局........................................................7 2.3.1 網(wǎng)頁布局的基本概念........................................8 2.3.2網(wǎng)頁布局方法...............................................9 2.3.2 網(wǎng)頁布局技術(shù).............................................10 2.4網(wǎng)頁配色.......................................................11 2.5 網(wǎng)頁設(shè)計(jì)流程...................................................11 第三章涉及軟件........................................................13 3.1 DreamWeaVer cs3介紹...........................................13 3.2 DreamWeaVer cs3操作界面.......................................13 第四章建立網(wǎng)頁鏈接....................................錯(cuò)誤！未定義書簽。

4.1 文字鏈接.......................................................14 4.2 圖像鏈接.......................................................15 4.3在HTML語言中建立網(wǎng)頁鏈接......................................15 第五章結(jié)論............................................................18 致謝..................................................................19

第一章前言

1．1課題來源

隨著二十一世紀(jì)新興科技的飛速發(fā)展，如今的信息產(chǎn)業(yè)正在經(jīng)受著一個(gè)巨大的挑戰(zhàn)，同時(shí)也面臨著一個(gè)重大的機(jī)遇。就目前的科技發(fā)展水平而言，信息產(chǎn)業(yè)的發(fā)展已經(jīng)不能夠滿足社會(huì)化大生產(chǎn)的要求，因此，各個(gè)國家集中人力、財(cái)力加大對信息技術(shù)產(chǎn)業(yè)的投入，以適應(yīng)目前需要。可喜的是在這幾十年的發(fā)展中我們有了互聯(lián)網(wǎng)。互聯(lián)網(wǎng)加大了我們了解世界的眼界，縮緊了人與人之間的距離，這就更容易的使我們走上信息化的道路。

互聯(lián)網(wǎng)拉近了各個(gè)領(lǐng)域之間的距離，如今利用互聯(lián)網(wǎng)來宣傳已經(jīng)是必不可少的工具，城市發(fā)展也需要互聯(lián)網(wǎng)的宣傳來帶動(dòng)自身的發(fā)展。

1.2網(wǎng)站開發(fā)項(xiàng)目需求分析

第二章網(wǎng)頁制作概述

2.1 網(wǎng)頁的類型

2.1.1 靜態(tài)頁面

2.1.2 動(dòng)態(tài)頁面

動(dòng)態(tài)頁面是通過執(zhí)行asp、php、jsp、.net等程序生成客戶端網(wǎng)頁代碼的網(wǎng)頁。動(dòng)態(tài)頁面通常可以通過網(wǎng)站后臺管理系統(tǒng)對網(wǎng)站的內(nèi)容進(jìn)行更新管理。發(fā)布新聞，發(fā)布公司產(chǎn)品，交流互動(dòng)，博客，網(wǎng)上調(diào)查等，這都是動(dòng)態(tài)網(wǎng)站的一些功能，也是我們常見的。動(dòng)態(tài)網(wǎng)頁是需要語言環(huán)境支持的，動(dòng)態(tài)頁面常見的擴(kuò)展名有：.asp、.php、.jsp、.cgi 等。動(dòng)態(tài)頁面的“動(dòng)態(tài)”是網(wǎng)站與客戶端用戶互動(dòng)的意思，而非網(wǎng)頁上有動(dòng)畫的就是動(dòng)態(tài)頁面[4]。

動(dòng)態(tài)網(wǎng)頁開發(fā)技術(shù)介紹——HTML、ASP、JSP、CGI、PHP。

HTML（HyperTextMark-upLanguage）即超文本標(biāo)記語言，是004km.cnmon Gateway Interface(公用網(wǎng)關(guān)接口)。在早期，你可以使用不同的程序編寫合適的CGI程序，如Visual Basic,Delphi或C/C++等。雖然CGI技術(shù)成熟而且功能強(qiáng)大，但由于編程困難，效率低下，修改復(fù)雜等缺陷，所以有逐漸被新技術(shù)取代的趨勢。

ASP全名Active Server Pages，是一個(gè)WEB服務(wù)器端的開發(fā)環(huán)境，利用它可以產(chǎn)生和運(yùn)行動(dòng)態(tài)的、交互的、高性能的WEB服務(wù)應(yīng)用程序。ASP采用腳本語言VB Script（Java script）作為自己的開發(fā)語言。ASP更精確的說是一個(gè)中間件，這個(gè)中間件將Web上的請求轉(zhuǎn)入到一個(gè)解釋器中，在這個(gè)解釋器中將所有的ASP的Script進(jìn)行分析，再進(jìn)行執(zhí)行，而這時(shí)可以在這個(gè)中間件中去創(chuàng)建一個(gè)*.html文件（靜態(tài)網(wǎng)頁）。PHP是一種跨平臺的服務(wù)器端的嵌入式腳本語言.它大量地借用C,Java和Perl語言的語法, 并耦合PHP自己的特性,使WEB開發(fā)者能夠快速地寫出動(dòng)態(tài)生成頁面.它支持目前絕大多數(shù)數(shù)據(jù)庫。還有一點(diǎn)，PHP是完全免費(fèi)的[6]。

2.3 網(wǎng)頁布局

網(wǎng)站主頁就好象是宣傳欄或者店面——對訪問者產(chǎn)生第一印象，都希望盡量給人留下好的印象。一般來說，好的網(wǎng)站應(yīng)該給人有這樣的感覺：

干凈整潔；

條理清楚；

專業(yè)水準(zhǔn)；

引人入勝。

2.3.1 網(wǎng)頁布局的基本概念

（1）頁面尺寸

由于頁面尺寸和顯示器大小及分辨率有關(guān)系，網(wǎng)頁的局限性就在于你無法突破顯示器的范圍，而且因?yàn)闉g覽器也將占去不少空間，留下給你的頁面范圍變得越來越小。一般分辨率在800x600的情況下，頁面的顯示尺寸為：780x428個(gè)象素；分辨率在640x480的情況下，頁面的顯示尺寸為:620X311個(gè)象素；分辨率在1024X768的情況下，頁面的顯示尺寸為：1007x600。從以上數(shù)據(jù)可以看出，分辨率越高頁面尺寸越大。

瀏覽器的工具欄也是影響頁面尺寸的原因。一般目前的瀏覽器的工具欄都可以取消或者增加，那么當(dāng)你顯示全部的工具欄時(shí)，和關(guān)閉全部工具欄時(shí)，頁面的尺寸是不一樣的。

在網(wǎng)頁設(shè)計(jì)過程中，向下拖動(dòng)頁面是惟一給網(wǎng)頁增加更多內(nèi)容(尺寸)的方法。除非你能肯定站點(diǎn)的內(nèi)容能吸引大家拖動(dòng)，否則不要讓訪問者拖動(dòng)頁面超過三屏。如果需要在同一頁面顯示超過三屏的內(nèi)容，那么你最好能在上面做上頁面內(nèi)部連接，方便訪問者瀏覽。

（2）整體造型

造型就是創(chuàng)造出來的物體形象，這里是指頁面的整體形象。這種形象應(yīng)該是一個(gè)整體，圖形與文本的接合應(yīng)該是層疊有序。雖然，顯示器和瀏覽器都是矩形，但對于頁面的造型，你可以充分運(yùn)用自然界中的其它形狀以及它們的組合：矩形，圓形，三角形，菱形等。

對于不同的形狀，它們所代表的意義是不同的。比如矩形代表著正式，規(guī)則，你注意到很多ICP和政府網(wǎng)頁都是以矩形為整體造型；圓形帶表著柔和，團(tuán)結(jié)，溫暖，安全等，許多時(shí)尚站點(diǎn)喜歡以圓形為頁面整體造型；三角形代表著力量，權(quán)威，牢固，侵略等，許多大型的商業(yè)站點(diǎn)為顯示它的權(quán)威性常以三角形為頁面整體造型；菱形代表著平衡，協(xié)調(diào)，公平，一些交友站點(diǎn)常運(yùn)用菱形作為頁面整體造型。雖然不同形狀帶表著不同意義，但目前的網(wǎng)頁制作多數(shù)是接合多個(gè)圖形加以設(shè)計(jì)，在這其中某種圖形的構(gòu)圖比例可能占的多一些。

（3）頁頭

頁頭又可稱之為頁眉，頁眉的作用是定義頁面的主題。比如一個(gè)站點(diǎn)的名字多數(shù)都顯示在頁眉里。這樣，訪問者能很快知道這個(gè)站點(diǎn)是什么內(nèi)容。頁頭是整個(gè)頁面設(shè)計(jì)的關(guān)鍵，它將牽涉到下面的更多設(shè)計(jì)和整個(gè)頁面的協(xié)調(diào)性。頁頭常放置站點(diǎn)名字的圖片和公司標(biāo)志以及旗幟廣告。

（4）文本

文本在頁面中出現(xiàn)都數(shù)以行或者塊(段落)出現(xiàn)，它們的擺放位置決定者整個(gè)頁面布局的可視性。在過去因?yàn)轫撁嬷谱骷夹g(shù)的局限，文本放置的位置的靈活性非常小，而隨著DHTML的興起，文本已經(jīng)可以按照自己的要求放置到頁面的任何位置。

（5）頁腳

頁腳和頁頭相呼應(yīng)。頁頭是放置站點(diǎn)主題的地方，而頁腳是放置制作者或者公司信息的地方。你能看到，許多制作信息都是放置在頁腳的。

（6）圖片

圖片和文本是網(wǎng)頁的兩大構(gòu)成元素，卻一不可。如何處理好圖片和文本的位置成了整個(gè)頁面布局的關(guān)鍵。而你的布局思維也將體現(xiàn)在這里。

（7）多媒體

除了文本和圖片，還有聲音，動(dòng)畫，視頻等等其它媒體。雖然它們不是經(jīng)常能被利用到，但隨著動(dòng)態(tài)網(wǎng)頁的興起，它們在網(wǎng)頁布局上也將變得更重要。

2.3.2網(wǎng)頁布局方法

網(wǎng)頁布局的方法有兩種，第一種為紙上布局；第二種為軟件布局。下面分別加以介紹。

（1）紙上布局法

許多網(wǎng)頁制作者不喜歡先畫出頁面布局的草圖，而是直接在網(wǎng)頁設(shè)計(jì)器里邊設(shè)計(jì)布局邊加內(nèi)容。這種不打草稿的方法不能讓你設(shè)計(jì)出優(yōu)秀的網(wǎng)頁來。所以在開始制作網(wǎng)頁時(shí)，要先在紙上畫出你頁面的布局草圖來。首先，尺寸的選擇。目前一般800X600的分辨率為約定俗成的瀏覽模式。所以為了照顧大多數(shù)訪問者，你頁面的尺寸以800X600的分辨率為準(zhǔn)。

其次，造型的選擇。先在白紙上畫出象征瀏覽器窗口的矩形，這個(gè)矩形就是你布局的范圍了。選擇一個(gè)形狀作為整個(gè)頁面的主題造型，我們選擇圓形，因?yàn)樗碚呷岷?，和時(shí)尚流行比較相稱，然后在矩形框架里隨意畫出來，你可以試者在增加一些圓形或者其它形狀。這樣畫下來，你會(huì)發(fā)現(xiàn)很亂。其實(shí)，如果你一開始就想設(shè)計(jì)出一個(gè)完美的布局來是比較困難的，而你要在這看似很亂的圖形中找出隱藏在其中的特別的造型出來。還要注意一點(diǎn)，你不要擔(dān)心你設(shè)計(jì)的布局是否能夠?qū)崿F(xiàn)。事實(shí)上，只要你能想到的布局都能靠現(xiàn)今的HTML技術(shù)實(shí)現(xiàn)。

考慮到左邊向左凹的弧線，為了取得平衡我們在頁面右邊增加了一個(gè)矩形，(也可以是一條線段)然后，增加頁頭。一般頁頭都是位于頁面頂部，所以我們增加了一個(gè)頁頭，為了和左邊的弧線和右邊的矩形取得平衡，我們增加了一個(gè)矩形頁頭并讓頁頭相交與左邊的弧線，然后，增加文本。頁面的空白部分加別加入文本和圖形。因?yàn)樵陧撁嬗疫呌芯匦巫鳛榕阋r，所以文本放置在空白部分不會(huì)因?yàn)樽筮叺幕【€而顯得不協(xié)調(diào)，最后，增加圖片。圖片是美化頁面和說明內(nèi)容必須的媒體。在這里把圖片加入到適當(dāng)?shù)牡胤?，?jīng)過以上的幾個(gè)步驟，一個(gè)時(shí)尚頁面的大概布局就出現(xiàn)了。當(dāng)然，它不是最后的結(jié)果，而是你以后制作時(shí)的重要參考依據(jù)。

（2）軟件布局法

除了紙上布局，還可以利用軟件來完成這些工作。如利用Photoshop。Photoshop所具有的對圖像的編輯功能用到設(shè)計(jì)網(wǎng)頁布局上更顯得心應(yīng)手。利用Photoshop可以方便的使用顏色，使用圖形，并且可以利用層的功能設(shè)計(jì)出用紙張無法實(shí)現(xiàn)的布局意念。

2.3.2 網(wǎng)頁布局技術(shù)

（1）層疊樣式表的應(yīng)用

在新的HTML4.0標(biāo)準(zhǔn)中，CSS(層疊樣式表)被提出來，它能完全精確的定位文本和圖片。CSS有點(diǎn)復(fù)雜，但它的確是一個(gè)好的布局方法。曾經(jīng)無法實(shí)現(xiàn)的想法利用CSS都能實(shí)現(xiàn)。目前在許多站點(diǎn)上，層疊樣式表的運(yùn)用是一個(gè)站點(diǎn)優(yōu)秀的體現(xiàn)。比如一些企業(yè)網(wǎng)站。

（2）表格布局

表格布局被廣泛使用，已經(jīng)成為一個(gè)潛在的標(biāo)準(zhǔn)。隨便瀏覽一個(gè)站點(diǎn)，它們一定是用表格布局的。表格布局的優(yōu)勢在于它能對不同對象加以處理，而又不用擔(dān)心不同對象之間的影響。而且表格在定位圖片和文本上比起用CSS更加方便。表格布局唯一的缺點(diǎn)是，當(dāng)你用了過多表格時(shí)，頁面下載速度受到影響[8]。對于

[7]表格布局，打開一個(gè)站點(diǎn)的首頁，然后保存為HTML文件，利用網(wǎng)頁編輯工具打開它(要所見即所得的軟件)，會(huì)可以看到這個(gè)頁面是如何利用表格的。

（3）框架布局

由于它的兼容性，框架布局并沒有被所有人接受。但從布局上考慮，框架結(jié)構(gòu)不失為一個(gè)好的布局方法。它如同表格布局一樣，把不同對象放置到不同頁面加以處理，因?yàn)榭蚣芸梢匀∠吙?，所以一般來說不影響整體美觀。

2.4網(wǎng)頁配色

面對這種單調(diào)的設(shè)計(jì)，有一種解決方法，就是使用顏色?？赡軟]有其他設(shè)計(jì)元素能像顏色一樣能影響人們對世界感受。顏色可以瞬間改變我們的情緒和意見。顏色會(huì)讓我們感覺到舒適、敬畏，或者激動(dòng)[9]。在界面設(shè)計(jì)中，顏色組合對設(shè)計(jì)非常有用?？梢詤^(qū)分設(shè)計(jì)讓用戶更加難忘、引導(dǎo)用戶使用戶專注于交互、吸引用戶使頁面布局更舒適，更有魅力。

一旦有機(jī)會(huì)可以讓網(wǎng)站更獨(dú)特，就不能放棄。如果你的網(wǎng)站做的很醒目，那么用戶可能會(huì)花更多時(shí)間瀏覽并且想是從哪里訪問過來的，他們有可能記住這個(gè)網(wǎng)站并且下次再訪問?？赡軟]有比顏色更好的元素可以達(dá)到這樣的效果了。人們會(huì)馬上對顏色產(chǎn)生感覺：激動(dòng)、高興或者枯燥乏味。

當(dāng)你試圖在一個(gè)充滿飽和色調(diào)的頁面上瀏覽信息時(shí)，你的眼睛會(huì)不斷地返回那些亮的顏色。最強(qiáng)的視覺元素是最重要的。我們趨向于忘記那些深藍(lán)、黃色和灰色，因?yàn)槊刻於伎吹健Ｔ谀切┯脩粜枰L時(shí)間在線使用的 Web 應(yīng)用程序中，注意這一點(diǎn)尤為重要。不是很強(qiáng)烈的配色可以使用戶專注于工作和接收重要信息。當(dāng)然完美的 Web 體驗(yàn)不能僅僅依靠顏色，結(jié)構(gòu)、交互、布局等方面也必須協(xié)同工作，來創(chuàng)建可用、易用的網(wǎng)站和應(yīng)用程序。但是顏色是平衡中的重要部分，不能忽略。

2.5 網(wǎng)頁設(shè)計(jì)流程

網(wǎng)頁設(shè)計(jì)是一個(gè)互動(dòng)的過程，不僅是設(shè)計(jì)師構(gòu)思設(shè)計(jì)就可以完成的。從客戶提出需求到最終發(fā)布，期間需要客戶與設(shè)計(jì)人員共同參與協(xié)商才可以，具體流程如下：

首先，獲取客戶需求和資料。在設(shè)計(jì)網(wǎng)站頁面之前，設(shè)計(jì)師需要知道客戶的需求，從而確定客戶建立網(wǎng)站的目的?？蛻籼岢鼍W(wǎng)站需求是非常重要的一個(gè)環(huán)節(jié)。沒有詳細(xì)的需求，設(shè)計(jì)人員無法憑空進(jìn)行設(shè)計(jì)制作。在這個(gè)步驟中，雙方的溝通與交流是非常重要的。

其次，確定網(wǎng)站內(nèi)容。設(shè)計(jì)人員選擇適合自己的圖像編輯軟件、動(dòng)畫制作軟件和網(wǎng)頁制作軟件進(jìn)行網(wǎng)頁的初步設(shè)計(jì)，這中間可能還需要和客戶進(jìn)行多次溝通才能達(dá)到客戶滿意的效果。在具體設(shè)計(jì)時(shí)，設(shè)計(jì)人員應(yīng)該為網(wǎng)站定位一個(gè)主題，從而保證所有網(wǎng)頁都圍繞這個(gè)主題進(jìn)行設(shè)計(jì)制作，保證風(fēng)格的和諧統(tǒng)一。

然后，申請域名和空間。使用該方法能夠有效同步管理文件。還可以通過FTP軟件連接到服務(wù)器空間上，然后上傳發(fā)布文件。

最后，后期維護(hù)。一般靜態(tài)網(wǎng)站上傳后，如果客戶方?jīng)]有專業(yè)人員維護(hù)，這樣就需要設(shè)計(jì)人員從客戶方獲取新資料進(jìn)行定期或不定期的更新。如果是動(dòng)態(tài)網(wǎng)站，設(shè)計(jì)人員需要負(fù)責(zé)培訓(xùn)客戶方如何使用后臺管理，這樣客戶就可以自己通過后臺管理添加信息，設(shè)計(jì)人員只要及時(shí)更正動(dòng)態(tài)網(wǎng)站的錯(cuò)誤即可。

第三章涉及軟件

3.1 DreamWeaVer 8介紹

3.2 DreamWeaVer 8操作界面

圖3.1 DreamWeaVer 8 操作界面

第四章建立網(wǎng)頁鏈接

4.1 文字鏈接

步驟1、準(zhǔn)備好已經(jīng)制作完成的首頁的各個(gè)欄目頁面

步驟

2、在Dreamweaver 中打開首頁，之后反白選取作為“鏈接”的文字。步驟

3、觀察“屬性面板”，其中包括一個(gè)“鏈接”文本框。步驟

4、接下來需要把鏈接的位址加入到文本框中。

步驟

5、在“鏈接”文本框下面還有一個(gè)“目標(biāo)”下拉列表，從中可以選擇鏈接網(wǎng)頁顯示的窗口方式，共有4種。如圖：

步驟

7、至此，第1個(gè)欄目的鏈接就制作完畢了，按下Ctrl+S保存網(wǎng)頁，再按下F12預(yù)覽，測試一下，當(dāng)鼠標(biāo)放在“放松心情”這4個(gè)文字上時(shí)將變成手

形，并且瀏覽器窗口下面的狀態(tài)區(qū)中會(huì)顯示鏈接到的網(wǎng)頁的位址，單擊文字，頁面會(huì)立即跳轉(zhuǎn)到第1個(gè)欄目中，這表示鏈接已經(jīng)制作成功了。

步驟

8、同理，按照以上步驟，再為“閑情逸致”和“個(gè)人主頁”等其它欄制作指向?qū)?yīng)欄目的鏈接。

至此，整個(gè)“文字鏈接”的實(shí)例就全就全部完成了。

4.2圖像鏈接

步驟

1、首先仍然要準(zhǔn)備好已經(jīng)制作完成的首頁和各個(gè)欄目的頁面步驟

2、在Dreamweaver中打開網(wǎng)站的首頁，之后選取要制作“鏈接”的圖像。

步驟

3、觀察“屬性面板”，在“鏈接”文本框中輸入鏈接的文字位址。步驟

4、如果有需要，可以在“目標(biāo)”下拉列表中選擇“鏈接”網(wǎng)頁顯示的窗口方式，分別為-blank、-parent、-self或 top。

步驟

6、同理，按照以上步驟，再為其它幾幅圖像制作指向?qū)?yīng)欄目的鏈接。步驟

7、在欄目頁面中制作“返回首頁”的鏈接，使得單擊后可以跳轉(zhuǎn)回首頁。

至此，整個(gè)“圖像鏈像”的實(shí)例就全部完成了。

4.3在HTML語言中建立網(wǎng)頁鏈接

一、文字鏈接

在HTML語言中用超鏈接標(biāo)記指向一個(gè)目標(biāo)。其基本格式為：舉個(gè)簡單的“文本鏈接”的實(shí)例，該實(shí)例相對應(yīng)的HTML代碼如下所示。

文字鏈接

a href-“index2.html”target=”-blank”>平面設(shè)計(jì)（新開窗口，-blank)

相冊（原窗口，默認(rèn)為空）

留言

第三篇：Dreamweaver制作網(wǎng)頁經(jīng)典問題

Dreamweaver制作網(wǎng)頁經(jīng)典問題大整理(1)1> 在DW中，如何輸入一個(gè)空格呢？

輸入空格的問題，在DW似乎已成了一個(gè)老生常談的問題，我們可能在許多介紹DW使用方面的書籍或文章中看到過N次。

DW中對空格輸入的限制是針對“半角”文字狀態(tài)而言的，因此通過將輸入法調(diào)整到全角模式就可以避免了，方法是：打開中文輸入法（以人工智能ABC為例），按Shift+Space切換到全角狀態(tài)，現(xiàn)在應(yīng)該沒問題了。此外，你還可以通過許多“變通”的方法達(dá)到錄入空格的目的，比如常用的是：

直接在源代碼中加入代表空格的HTML代碼“ ”；輸入一定長度的文字對象后，然后調(diào)整文字的顏色與當(dāng)前的背景顏色相同等等，不過注意的是后者在一些瀏覽器中可能顯示上有點(diǎn)問題。

2> 如何在瀏覽器地址欄前添加自定義的小圖標(biāo)？

你是不是記得有時(shí)在瀏覽網(wǎng)易網(wǎng)站的首頁時(shí)，在地址004km.cn前會(huì)顯示一個(gè)“易”字樣的小圖標(biāo)。而默認(rèn)情況下，這個(gè)圖標(biāo)是一個(gè)IE瀏覽器的指定圖片。

其實(shí)這也不是什么高深技術(shù)，只不過在網(wǎng)站目錄下添加了一個(gè)特定文件而已。

這時(shí)，我們需要預(yù)先制作一個(gè)圖標(biāo)文件，大小為16*16像素。文件擴(kuò)展名為ico，然后上傳到相應(yīng)目錄中。在HTML源文件“”之間添加如下代碼：

其中的“SHORTCUT ICON”即為該圖標(biāo)的名稱。當(dāng)然如果用戶使用IE5或以上版本瀏覽時(shí)，就更簡單了，只需將圖片上傳到網(wǎng)站根目錄下，即可自動(dòng)識別！

3> 為什么，我本來設(shè)計(jì)很好的網(wǎng)頁，在瀏覽器窗口最小化時(shí)會(huì)變的丑陋難堪？

這應(yīng)該是個(gè)很值得大家注意的問題，也就是說，在全屏狀態(tài)下瀏覽網(wǎng)頁內(nèi)容時(shí)，一點(diǎn)問題也沒有。當(dāng)我們使用窗口的最小化命令或手動(dòng)的調(diào)整窗口的大小時(shí)，問題就慢慢出現(xiàn)了。網(wǎng)頁內(nèi)容會(huì)把當(dāng)前窗口作為顯示范圍，依次下挫。舉個(gè)例子，和在記事本中有“自動(dòng)換行”和“沒換行”的差別是完全一樣的。解決這個(gè)問題，我們必須從網(wǎng)頁的布局說起，一般情況下，網(wǎng)頁內(nèi)容的定位大多是通過表格來實(shí)現(xiàn)的。因此問題的“毛病”也就出在表格上。你可能已經(jīng)注意到了，在表格的高寬設(shè)定選擇上提供了兩種不同的類型，百分比和像素。其中百分比的使用將會(huì)產(chǎn)生前面說到的那個(gè)毛病，將其全部更正為Pixels單位的實(shí)際大小就可以了。

4> 如何改變網(wǎng)頁顯示時(shí)，最頂部的提示信息？

瀏覽網(wǎng)頁時(shí)，頂部的提示信息往往代表了網(wǎng)頁內(nèi)容的關(guān)鍵所在，有助于訪問者提前了解網(wǎng)頁內(nèi)容。在DW4前，沒有在功能上直接提供該操作，我們往往通過在源代碼中應(yīng)用“title”屬性來完成。進(jìn)入DW4就簡單多了。

直接在編輯窗口最上方的“title”輸入框內(nèi)鍵入所需要的文字信息即可。

·Dreamweaver制作網(wǎng)頁經(jīng)典問題大整理(2)5> 怎么樣，才能為圖片添加指定顏色的邊框？

對于沒有邊框的圖片而言，直接插入到網(wǎng)頁中，在顯示效果上是相當(dāng)差的。記得在微軟的FP中要給圖片添加滿意的邊框還是相當(dāng)麻煩的。不過在DW中就顯得容易多了，因?yàn)檫@里有一個(gè)“Border”屬性，可以讓你直接設(shè)置邊框的寬度。

寬度設(shè)好了，你一定會(huì)問，顏色呢？面板上并沒有提供顏色的選擇呀！呵呵，其實(shí)這里有一個(gè)技巧問題，用鼠標(biāo)選擇圖片對象，注意不是點(diǎn)擊選中，而是拖動(dòng)選擇。象設(shè)定文字顏色一樣進(jìn)行就可以了。

6> 如何添加圖片及鏈接文字的提示信息？

在我們?yōu)g覽網(wǎng)頁時(shí)，當(dāng)鼠標(biāo)停留在圖片對象或鏈接上時(shí)，在鼠標(biāo)的右下有時(shí)會(huì)出現(xiàn)一個(gè)提示信息框。對目標(biāo)進(jìn)行一定的注釋說明。在一些場合，它的作用是很重要的。

下面先看看圖片提示信息的添加，選中圖片對象，在屬性面板里你會(huì)發(fā)現(xiàn)有個(gè)“Alt”輸入框。默認(rèn)情況下，該輸入框是空白的。在這里錄入需要的提示內(nèi)容就可以了。

那么鏈接提示的制作就沒這么簡單了。因?yàn)镈W中沒有直接提供該功能，因此我們需要通過添加HTML代碼來實(shí)現(xiàn)。

在中添加“title”屬性。title=提示內(nèi)容即可。

7> 如何把自己的ZIP或其他類型的文件供別人下載?

在不少初級網(wǎng)頁制作者看來,好象通過鼠標(biāo)單擊完成下載是件很“神秘”的事,實(shí)際上遠(yuǎn)非如此.在DW中凡是不被瀏覽器識別的格式文件(HTM,HTML,ASP,PHP.PERL,SHTML等以外的)作為鏈接目標(biāo)時(shí),默認(rèn)的操作都是下載.這時(shí)你只需要,把要瀏覽者下載的文件名寫好,然后制作一個(gè)到目標(biāo)文件的鏈接.注意目錄一定不要搞錯(cuò).8> 怎樣才能夠保證網(wǎng)頁中文字不跟隨瀏覽器字體大小設(shè)置而變動(dòng)?

大家都知道,在IE瀏覽器的功能設(shè)置中，有一個(gè)可以自由設(shè)置窗口內(nèi)容字體大小的功能，這樣由于不同訪問者的習(xí)慣問題，呈現(xiàn)在他們面前的網(wǎng)頁有時(shí)也會(huì)不同。