第一篇：關(guān)于圖片優(yōu)勢效應(yīng)在網(wǎng)頁設(shè)計(jì)中的研究與應(yīng)用探討論文
前言
網(wǎng)頁的展示效果會直接受到網(wǎng)頁設(shè)計(jì)好壞的影響，網(wǎng)頁在具備足夠媒體能力的同時還充分具備有效的可用性以及時尚性。一個網(wǎng)頁設(shè)計(jì)質(zhì)量的高低會對網(wǎng)站用戶人數(shù)的多少產(chǎn)生直接的影響，同時網(wǎng)站以及公司的效益則會受到用戶的流量的直接影響。文字是最早進(jìn)入網(wǎng)絡(luò)多媒體的對象，圖片也隨著進(jìn)入成為網(wǎng)絡(luò)多媒體的重要對象之一，設(shè)置圖片有效，就可以將豐富的、美化的網(wǎng)頁界面充分的展示出來。隨著的社會的發(fā)展，多媒體實(shí)現(xiàn)進(jìn)一步發(fā)展，寬帶跟用戶屏幕的尺寸實(shí)現(xiàn)了進(jìn)一步擴(kuò)大，目前來說，大部分網(wǎng)站在頁面中均開始使用大量圖片，越來越多的人們開始傾向于有圖片網(wǎng)站的瀏覽。根據(jù)相關(guān)研究報道，通常來說，人們看過一張圖片之后，其記憶會持續(xù)很長一段時間，如果瀏覽一段文字，那么就會在很短的時間內(nèi)忘記，一般不會出現(xiàn)例外情況。上述這種情景被我們稱為“圖片優(yōu)勢效應(yīng)”。網(wǎng)頁中的圖片優(yōu)勢效應(yīng)分析
人們可以通過語言的方法或者是通過形象的方法來完成圖片記憶，相比文字記憶而言，上述記憶方法則多出了一個形象記憶的階段，所以，在進(jìn)行記憶的過程中，通過圖片的使用能夠促使記憶效率逐漸提升。通常情況下，是通過很多不一致的認(rèn)知系統(tǒng)來完成信息處理工作的。使用較深語義層的基礎(chǔ)上，人們可以更好的記憶信息。例如：感知層記憶。圖片是參與深層語義過程的信息，人們通過清晰視覺回憶，在完成上述任務(wù)的過程中，文字跟圖片所帶給人們的信息記憶是不一致的，其中記憶圖片信息可以更加深刻地印在人們的腦海中。上述現(xiàn)象，被我們稱為圖片優(yōu)勢效應(yīng)。但是并不是全部的圖片均具備上述提到的“圖片優(yōu)勢效應(yīng)”，唯有圖片非常的清晰，容易被人理解，在外顯記憶任務(wù)中進(jìn)行的圖片才能被稱為“圖片優(yōu)勢效應(yīng)”。所以，在目前大部分網(wǎng)頁圖片中，70%以上的圖片屬于外顯記憶。我們需要進(jìn)一步明確網(wǎng)頁設(shè)計(jì)過程中的圖片優(yōu)勢效應(yīng)，為后期的網(wǎng)頁設(shè)計(jì)提供相應(yīng)的基礎(chǔ)以及依據(jù)。
1.1 圖片優(yōu)勢效應(yīng)中的視覺優(yōu)勢
在日常生活中，人們所需的信息，需要通過視覺獲取的就有60%。網(wǎng)頁之所以被用戶關(guān)注，主要是因?yàn)橐肓擞行У囊曈X元素，并且在上述的基礎(chǔ)上有效的完成了信息傳達(dá)工作。上述分析得到，我們需要對網(wǎng)頁的設(shè)計(jì)提出一定的標(biāo)準(zhǔn)，例如促使網(wǎng)頁的設(shè)計(jì)最大程度地滿足受眾視覺心理上以及生理上的需求等。網(wǎng)頁的整體視覺表達(dá)一般會由以下幾個部分直接的影響：第一個部分是圖片的位置;第二個部分是圖片的尺寸大小以及數(shù)量;第三個部分是圖片的排列形式;第四個部分是圖片的色調(diào)等。完成合適的圖片選取，就可以將事物內(nèi)部存在的本質(zhì)直接地、具體地表達(dá)處理，促使原本平淡的事物轉(zhuǎn)化為強(qiáng)有力的訴求性畫面類型。在版面的構(gòu)成要素中，圖片的正確使用可以促使網(wǎng)頁更具獨(dú)特的風(fēng)格以及優(yōu)勢，最大程度的吸引廣大用戶，對于網(wǎng)頁設(shè)計(jì)來說，圖片具有非常強(qiáng)的設(shè)計(jì)彈性，圖片可以有效地配合網(wǎng)頁中其他視覺元素一起，促使網(wǎng)頁設(shè)計(jì)能夠有效地滿足設(shè)計(jì)目標(biāo)規(guī)劃，實(shí)現(xiàn)有效的統(tǒng)一、連貫、分割、對比以及和諧。
1.2 圖片優(yōu)勢效應(yīng)中的認(rèn)知優(yōu)勢
圖片的使用可以促使來自不同國家的人有效地理解相同圖片表達(dá)的意思，所以，可以有效的減少存在閱讀文字過程中出現(xiàn)的障礙，同時減少瀏覽網(wǎng)頁的過程中存在的障礙。如果用戶不識字，那么也可以通過相應(yīng)的方法來完成圖片中意思的解讀?；蛘呤且徊糠掷夏耆?，因?yàn)槟挲g的增長，導(dǎo)致其視覺功能逐漸衰退，那么在進(jìn)行信息瀏覽的過程中，對于文字的閱讀就會存在一定的困難。如果使用大幅的圖片，那么老人就可以直觀的理解圖片表達(dá)的實(shí)際意思。如果是攝影類的網(wǎng)站，那么就需要圖片更加的優(yōu)質(zhì)，通過圖片的使用可以有效地表達(dá)攝影師按下快門一瞬間存在的真實(shí)想法。人們通過圖片的展示可以有效的對圖片背后故事進(jìn)行準(zhǔn)確的閱讀。我們可以使用一句話來表達(dá)圖片的重要性，同時表現(xiàn)圖片的認(rèn)知優(yōu)勢，那就是“一圖勝千言”。
1.3 圖片優(yōu)勢效應(yīng)中的商業(yè)優(yōu)勢
圖片是網(wǎng)站競爭的重要途徑之一，還是大部分企業(yè)最主要的營銷核心。社會化媒體實(shí)現(xiàn)進(jìn)一步深化變革，目前就跟圖片兩者之間存在非常密切的聯(lián)系，目前來說，主要元素為圖片的網(wǎng)站逐漸走向蓬勃發(fā)展的道路。例如：美國圖片視覺社交網(wǎng)站pinterest，在網(wǎng)頁的底端會完成自動加載，不需要設(shè)置翻頁功能，促使用戶可以在很短的時間內(nèi)迅速的發(fā)現(xiàn)新圖片。就目前來說，我國國內(nèi)目前已經(jīng)存在三十多家相似的網(wǎng)站，例如：美麗說網(wǎng)站、蘑菇街網(wǎng)站以及堆糖網(wǎng)站等。在設(shè)置上述類別網(wǎng)頁的設(shè)置過程中，網(wǎng)站的商業(yè)優(yōu)勢一般是由圖片的性質(zhì)決定的。
人們通過圖片的使用可以有效地展示自我的個性，促使自我個性彰顯出來。其中女性群體是具有很強(qiáng)潛力的用戶。我們使用高質(zhì)量的圖片就可以很好吸引女性群體，促使她們關(guān)注動態(tài)。圖片的使用可以促使企業(yè)發(fā)展。根據(jù)相關(guān)的搜索調(diào)查得到，消費(fèi)者中有60%消費(fèi)者對那些有顯示圖片的商戶表現(xiàn)出很強(qiáng)的關(guān)注度，非常愿意對其進(jìn)行消費(fèi)。據(jù)統(tǒng)計(jì)得到，圖片存在的新聞報道訪問量明顯高于圖片不存在的新聞報道訪問量。結(jié)束語
通過分析各個類型的網(wǎng)頁，我們能夠有效地發(fā)現(xiàn)圖片在網(wǎng)頁中會占據(jù)非常大的比例，對于圖片量大的網(wǎng)站，用戶也比較傾向。他們通過讀圖的形式來完成信息的快速獲取。網(wǎng)頁設(shè)計(jì)師在進(jìn)行網(wǎng)頁設(shè)計(jì)時，如果有效地使用圖片優(yōu)勢效應(yīng)，同時還能將圖片基于客觀事實(shí)的主觀設(shè)計(jì)全過程，就可以為企業(yè)的產(chǎn)品賦予一定的現(xiàn)實(shí)意義。產(chǎn)品意義的實(shí)現(xiàn)需要正確的指導(dǎo)后續(xù)產(chǎn)品的功能形成以及造型塑造等設(shè)計(jì)階段。在進(jìn)行具體設(shè)計(jì)的過程中，想要更大程度的將產(chǎn)品的意義展現(xiàn)出來就需要得到進(jìn)一步深入，期望為我國企業(yè)產(chǎn)品創(chuàng)新創(chuàng)造可借鑒的依據(jù)，促使我國企業(yè)實(shí)現(xiàn)最大程度的創(chuàng)新。
第二篇：在網(wǎng)頁中插入圖片教學(xué)設(shè)計(jì)
《在網(wǎng)頁中插入圖片》教學(xué)設(shè)計(jì)
執(zhí)教：熊
恒
教學(xué)目標(biāo)： 知識與技能：
會打開上次的網(wǎng)頁；了解圖片在網(wǎng)頁中的作用；學(xué)會在網(wǎng)頁中插入圖片的方法。
過程與方法：
通過獨(dú)立探究和小組探究的方法基本掌握在網(wǎng)頁中插入圖片。
情感態(tài)度與價值觀：
培養(yǎng)學(xué)生的審美能力，形成與同學(xué)和諧相處、共同進(jìn)步的精神。明白幫助他人的目的就是美化我們的心靈。
教學(xué)重難點(diǎn)：
重
點(diǎn)：了解圖片在網(wǎng)頁中的作用 難
點(diǎn)：能在網(wǎng)頁中插入圖片
教學(xué)時間：一課時
教學(xué)過程：
一、導(dǎo)入新課：
同學(xué)們，上節(jié)課我們學(xué)會了制作只有文字的網(wǎng)頁?？墒恰斑溥涠咕W(wǎng)屋”的主頁還有可愛的胖胖熊圖片呢！它是怎么進(jìn)來的？對于這個問題，我們來進(jìn)行具體的研究。
揭示課題：在網(wǎng)頁中插入圖片
二、探究新知 任務(wù)一：了解圖片在網(wǎng)頁中的作用。
（1）、教師出示只有文字和帶有圖片的兩個網(wǎng)頁，提問：這兩個網(wǎng)頁哪一個好看呢？
（2）、引導(dǎo)學(xué)生觀察，并說出為什么？指定學(xué)生回答（有圖片的那一個）
（3）、小結(jié)：網(wǎng)頁中的圖片可以使網(wǎng)頁更加美觀漂亮。任務(wù)二：打開主頁文件咪咪豆網(wǎng)屋index.htm（1）、師生復(fù)習(xí)啟動frontpage 軟件。（它是微軟公司推出的一款優(yōu)秀的網(wǎng)頁制作軟件）
（2）、學(xué)生試著打開主頁文件咪咪豆網(wǎng)屋index.htm，老師巡視并校正。
操作步驟：網(wǎng)頁制作軟件——單擊文件——打開文件——我的文檔，找到主頁文件咪咪豆網(wǎng)屋index.htm——再打開。
（3）、學(xué)生操作。
任務(wù)三：把“胖胖熊”請進(jìn)來
（1）師生復(fù)習(xí)在word 中插入圖片的方法，指名學(xué)生回答。教師小結(jié)：方法一：①、復(fù)制——粘貼；②、方法二：菜單——插入——圖片——來自文件——選擇圖片單擊插入。
（2）學(xué)生練習(xí)圖片的插入，（3）學(xué)生探究把胖胖熊請進(jìn)“咪咪豆網(wǎng)屋”主頁中的的方法。
教師提問：能否把在word中插入圖片的方法運(yùn)用在frontpage 軟件中呢？（指名學(xué)生回答：可以）學(xué)生動手操作：教師巡視，對不正確的地方進(jìn)行校正。教師小結(jié)：
我們可以這樣把胖胖熊請進(jìn)“咪咪豆網(wǎng)屋”主頁。操作步驟：
① 把光標(biāo)移到第二行“咪咪豆網(wǎng)屋”的左邊；
② 單擊“插入”菜單；
③ 選圖片來自文件→選C：“網(wǎng)頁制作”文件夾→找到“胖胖熊1.gif” 文件并單擊→單擊“確定”。
（3）、學(xué)生操作，教師巡視指導(dǎo)
（4）、要求學(xué)生用同樣的方法把胖胖熊放到“咪咪豆網(wǎng)屋”的右邊。
任務(wù)四：保存網(wǎng)頁
同學(xué)們，我們成功把胖胖熊請進(jìn)“咪咪豆網(wǎng)屋”主頁中，現(xiàn)在，我們要做的就把今天的作品保存起來！
學(xué)生試著保存：單擊文件菜單——保存文件。
四、教師小結(jié)：今天同學(xué)們通過努力，基本掌握了在網(wǎng)頁中插入和美化圖片的方法，我們插入網(wǎng)頁的目的是美化網(wǎng)頁，幫助他人的目的是美化我們的心靈。
第三篇：網(wǎng)頁設(shè)計(jì)與應(yīng)用
網(wǎng)頁設(shè)計(jì)與應(yīng)用
專
業(yè)： 班
級： 學(xué)
號： 姓
名： 指導(dǎo)教師：
計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)
20***031 蔡依婷 楊艷慈
邯鄲職業(yè)技術(shù)學(xué)院 2017年11月21日
摘要
網(wǎng)頁設(shè)計(jì)與應(yīng)用
摘 要
本論文將對個人網(wǎng)頁設(shè)計(jì)與制作的方法、工具等展開研究和探討。在介紹網(wǎng)頁設(shè)計(jì)與制作語言的基礎(chǔ)上，著重使用JavaScript作為工具語言進(jìn)行網(wǎng)頁設(shè)計(jì)與制作的實(shí)際操作，分別對基于對象的JavaScript語言、內(nèi)部對象系統(tǒng)的使用及WEB頁面信息交互——窗口和框架進(jìn)行詳細(xì)描述，并利用具體的實(shí)例進(jìn)行驗(yàn)證。
本論文主要章節(jié)如下，第一章：緒論，本章主要介紹網(wǎng)頁設(shè)計(jì)的相關(guān)知識。第二章：網(wǎng)頁設(shè)計(jì)語言概述，本章主要介紹網(wǎng)頁設(shè)計(jì)的語言——HTML，以及用于編輯HTML語言的軟件，為后續(xù)工作奠定基礎(chǔ)。第三章：基于對象的JavaScript語言，本章介紹了基于對象的JavaScript中常用內(nèi)部對象屬性、方法的使用。第四章：內(nèi)部對象系統(tǒng)的使用，本章主要介紹使用瀏覽器的內(nèi)部對象系統(tǒng)，可實(shí)現(xiàn)與HTML文檔進(jìn)行交互。第五章：WEB頁面信息的交互——窗體與框架，本章主要介紹實(shí)現(xiàn)網(wǎng)頁的動態(tài)交互，必須掌握有關(guān)窗體對象（Form）和框架對象（Frames）更為復(fù)雜的知識。
關(guān)鍵詞： 網(wǎng)頁制作；網(wǎng)頁設(shè)計(jì)；HTML；ASP
目 錄
1.1 網(wǎng)頁設(shè)計(jì)概述............................................................................................................................................4 1.2 網(wǎng)頁設(shè)計(jì)的要素........................................................................................................................................4 1.3 大作業(yè)目的和意義.....................................................................................................................................4
第二章 HTML網(wǎng)頁設(shè)計(jì)技術(shù)的應(yīng)用...........................................6 2.1 HTML語言介紹........................................................................................................................................6 2.1.1 HTML語言的特點(diǎn)...............................................................................................................................6 2.1.2 HTML語言的編輯軟件.......................................................................................................................6
第三章 色彩在網(wǎng)頁中的應(yīng)用..............................................7 3.1色彩在網(wǎng)頁中的應(yīng)用...............................................................................................................................7 3.2主頁色彩的處理........................................................................................................................................7 3.3常用的配色方案........................................................................................................................................7
第四章 WEB頁面信息的交互——窗體與框架..................................8 4.1窗體基礎(chǔ)知識..............................................................................................................................................8 4.1.1窗體對象.................................................................................................................................................8 4.1.2 窗體對象的方法....................................................................................................................................9 4.2 窗體中的基本元素.....................................................................................................................................9 4.3窗體對象實(shí)例...........................................................................................................................................11 4.4 框架..........................................................................................................................................................13 4.5 框架的訪問...............................................................................................................................................14 4.6本章小結(jié)...................................................................................................................................................17 第五章 結(jié) 論...........................................................18 致 謝................................................................19 參考文獻(xiàn)................................................................20
緒論
第一章 緒論
隨著21世紀(jì)的到來，人們更深切地感受到計(jì)算機(jī)在生活和工作中的作用越來越重要，越來越來的職業(yè)需要具有計(jì)算機(jī)的應(yīng)用技能。掌握計(jì)算機(jī)是職業(yè)的需要，更是事業(yè)發(fā)展的需要。網(wǎng)頁設(shè)計(jì)與制作是計(jì)算機(jī)能力的具體表現(xiàn)，本章主要介紹網(wǎng)頁設(shè)計(jì)的相關(guān)知識。
1.1 網(wǎng)頁設(shè)計(jì)概述
網(wǎng)站是企業(yè)向用戶和網(wǎng)民提供信息(包括產(chǎn)品和服務(wù))的一種方式,是企業(yè)開展電子商務(wù)的基礎(chǔ)設(shè)施和信息平臺，離開網(wǎng)站（或者只是利用第三方網(wǎng)站）去談電子商務(wù)是不可能的。企業(yè)的網(wǎng)址被稱為“網(wǎng)絡(luò)商標(biāo)”，也是企業(yè)無形資產(chǎn)的組成部分，而網(wǎng)站是INTERNET上宣傳和反映企業(yè)形象和文化的重要窗口。
1.2 網(wǎng)頁設(shè)計(jì)的要素
網(wǎng)頁設(shè)計(jì)的兩大要素是：整體風(fēng)格和色彩搭配。
一、確定網(wǎng)站的整體風(fēng)格
在這里，我提供給大家一些參考經(jīng)驗(yàn)：
1．將你的標(biāo)志logo，盡可能的放在每個頁面上最突出的位置。2．突出你的標(biāo)準(zhǔn)色彩。
3．總結(jié)一句能反映貴站精髓的宣傳標(biāo)語！
4．相同類型的圖像采用相同效果，比如說標(biāo)題字都采用陰影效果，那么在網(wǎng)站中出現(xiàn)的所有標(biāo)題字的陰影效果的設(shè)置應(yīng)該是完全一致的！
二、網(wǎng)頁色彩的搭配
1．用一種色彩。這里是指先選定一種色彩，然后調(diào)整透明度或者飽和度，這樣的頁面看起來色彩統(tǒng)一，有層次感。
2．用兩種色彩。先選定一種色彩，然后選擇它的對比色。
3．用一個色系。簡單的說就是用一個感覺的色彩，例如淡藍(lán)，淡黃，淡綠；或者土黃，土灰，土藍(lán)。
1.3 大作業(yè)目的和意義
本大作業(yè)主要是對網(wǎng)頁設(shè)計(jì)與制作的語言基礎(chǔ)上進(jìn)行探討，主要內(nèi)容如下：通過已經(jīng)做好的網(wǎng)頁，分析html網(wǎng)頁設(shè)計(jì)技術(shù)、XML技術(shù)、Java Applet技術(shù)和Javascript技術(shù)在網(wǎng)頁設(shè)計(jì)中的應(yīng)用。
緒論 5
第二章
第二章 HTML網(wǎng)頁設(shè)計(jì)技術(shù)的應(yīng)用
2.1 HTML語言介紹
HTML（HyperText Mark-up Language）即超文本標(biāo)記語言或超文本鏈接標(biāo)示語言，是目前網(wǎng)絡(luò)上應(yīng)用最為廣泛的語言，也是構(gòu)成網(wǎng)頁文檔的主要語言。
HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字、圖形、動畫、聲音、表格、鏈接等。HTML的結(jié)構(gòu)包括頭部（Head）、主體（Body）兩大部分，其中頭部描述瀏覽器所需的信息，而主體則包含所要說明的具體內(nèi)容。
2.1.1 HTML語言的特點(diǎn)
HTML文檔制作不是很復(fù)雜，且功能強(qiáng)大，支持不同數(shù)據(jù)格式的文件鑲?cè)?，這也是WWW盛行的原因之一，HTML語言的特點(diǎn)如下：
1、簡易性，HTML版本升級采用超集方式，從而更加靈活方便。
2、可擴(kuò)展性，HTML語言的廣泛應(yīng)用帶來了加強(qiáng)功能，增加標(biāo)識符等要求，HTML采取子類元素的方式，為系統(tǒng)擴(kuò)展帶來保證。
3、平臺無關(guān)性。雖然PC機(jī)大行其道，但使用MAC等其他機(jī)器的大有人在，HTML可以使用在廣泛的平臺上，這也是WWW盛行的另一個原因。
2.1.2 HTML語言的編輯軟件
HTML的本質(zhì)是文本，需要瀏覽器的解釋，HTML的編輯器大體可以分為三種：
1、基本編輯軟件，使用WINDOWS自帶的記事本或?qū)懽职娑伎梢跃帉懀?dāng)然，如果你用WPS來編寫，也可以。不過存盤時請使用.htm或.html作為擴(kuò)展名，這樣瀏覽器就可以解釋執(zhí)行了。
2、半所見即所得軟件，這種軟件能大大提高開發(fā)效率，它可以使你在很短的時間內(nèi)做出Homepage，且可以學(xué)習(xí)HTML，這種類型的軟件主要有HOTDOG，還有國產(chǎn)的軟件網(wǎng)頁作坊。
3、所見即所得軟件，使用最廣泛的編輯器，完全可以一點(diǎn)不懂HTML的知識就可以做出網(wǎng)頁，這類軟件主要有Frontpage，DREAMWEAVER、Delphi、Eclipse、UltraEdit。
第三章 7 第三章 色彩在網(wǎng)頁中的應(yīng)用
3.1色彩在網(wǎng)頁中的應(yīng)用
色彩是藝術(shù)表現(xiàn)的要素之一。在網(wǎng)頁設(shè)計(jì)中，我們的設(shè)計(jì)師根據(jù)和諧、均衡和重點(diǎn)突出的原則，將不同的色彩進(jìn)行組合．搭配來構(gòu)成美麗的頁面。根據(jù)色彩對人們心理的影響，合理地加以運(yùn)用。
先選定一種色彩，然后調(diào)整透明度或者飽和度，這樣的頁面看起來色彩統(tǒng)一，有層次感。簡單的說就是用一個感覺的色彩，例如淡藍(lán)，淡黃，淡綠；或者土黃，土灰，土藍(lán)。
在網(wǎng)頁配色中不要將所有顏色都用到，盡量控制在三至五種色彩以內(nèi)。背景和前文的對比盡量要大以便突出主要文字內(nèi)容。
3.2主頁色彩的處理
色彩是人的視覺最敏感的東西。主頁的色彩處理得好，可以錦上添花，達(dá)到事半功倍的效果。色彩總的應(yīng)用原則應(yīng)該是“總體協(xié)調(diào)，局部對比”，也就是：主頁的整體色彩效果應(yīng)該是和諧的，只有局部的、小范圍的地方可以有一些強(qiáng)烈色彩的對比。在色彩的運(yùn)用上，可以根據(jù)主頁內(nèi)容的需要，分別采用不同的主色調(diào)。因?yàn)樯示哂邢笳餍裕纾耗劬G色、翠綠色、金黃色、灰褐色就可以分別象征著春、夏、秋、冬。其次還有職業(yè)的標(biāo)志色，例如：軍警的橄欖綠，醫(yī)療衛(wèi)生的白色等。色彩還具有明顯的心理感覺，例如冷、暖的感覺，進(jìn)、退的效果等。另外，色彩還有民族性，各個民族由于環(huán)境、文化、傳統(tǒng)等因素的影響，對于色彩的喜好也存在著較大的差異。充分運(yùn)用色彩的這些特性，可以使我們的主頁具有深刻的藝術(shù)內(nèi)涵，從而提升主頁的文化品位。
3.3常用的配色方案
1.暖色調(diào)。即紅色、橙色、黃色、赭色等色彩的搭配。這種色調(diào)的運(yùn)用，可使主頁呈現(xiàn)溫馨、和煦、熱情的氛圍。
2.冷色調(diào)。即青色、綠色、紫色等色彩的搭配。這種色調(diào)的運(yùn)用，可使主頁呈現(xiàn)寧靜、清涼、高雅的氛圍。
3.對比色調(diào)。即把色性完全相反的色彩搭配在同一個空間里。例如：紅與綠、黃與紫、橙與藍(lán)等。這種色彩的搭配，可以產(chǎn)生強(qiáng)烈的視覺效果，給人亮麗、鮮艷、喜慶的感覺。
第四章
最后，還要考慮主頁底色（背景色）的深、淺，這里借用攝影中的一個術(shù)語，就是“高調(diào)”和“低調(diào)”。底色淺的稱為高調(diào)；底色深的稱為低調(diào)。底色深，文字的顏色就要淺，以深色的背景襯托淺色的內(nèi)容（文字或圖片）；反之，底色淡的，文字的顏色就要深些，以淺色的背景襯托深色的內(nèi)容（文字或圖片）。這種深淺的變化在色彩學(xué)中稱為“明度變化”。當(dāng)然，色彩的明度也不能變化太大，否則屏幕上的亮度反差太強(qiáng)，同樣也會使讀者的眼睛受不了。
第四章 WEB頁面信息的交互——窗體與框架
要實(shí)現(xiàn)網(wǎng)頁的動態(tài)交互，必須掌握有關(guān)窗體對象（Form）和框架對象（Frames）更為復(fù)雜的知識。
4.1窗體基礎(chǔ)知識
窗體對象可以使設(shè)計(jì)人員能用窗體中不同的元素與客戶機(jī)用戶相交互，而用不著在之前首先進(jìn)行數(shù)據(jù)輸入，就可以實(shí)現(xiàn)動態(tài)改變Web文檔的行為。
4.1.1窗體對象
窗體（Form）：它構(gòu)成了Web頁面的基本元素。通常一個Web頁面有一個窗體或幾個窗體，使用Forms[]數(shù)組來實(shí)現(xiàn)不同窗體的訪問。
在Forms[0]中共有三個基本元素，而Forms[1]中只有兩個元素。窗體對象最主要的功能就是能夠直接訪問HTML文檔中的窗體，它封裝了相關(guān)的HTML代碼：
4.1.2 窗體對象的方法窗體對象的方法只有一個--submit()方法，該方法主要功用就是實(shí)現(xiàn)窗體信息的提交。如提交Mytest窗體，則使用下列格式：
document.mytest.submit()4.2 窗體中的基本元素
窗體中的基本元素由按鈕、單選按鈕、復(fù)選按鈕、提交按鈕、重置按鈕、文本框等組成。
在JavaScript中要訪問這些基本元素，必須通過對應(yīng)特定的窗體元素的數(shù)組下標(biāo)或窗體元素名來實(shí)現(xiàn)。每一個元素主要是通過該元素的屬性或方法來引用。其引用的基本格式見下：
formName.elements[].methadName(窗體名.元素名或數(shù)組.方法)formName.elemaent[].propertyName(窗體名.元素名或數(shù)組.屬性)下面分別介紹：
（1）Text單行單列輸入元素
功能：對Text標(biāo)識中的元素實(shí)施有效的控制?；緦傩裕?/p>
Name：設(shè)定提交信息時的信息名稱。對應(yīng)于HTML文檔中的Name。Value：用以設(shè)定出現(xiàn)在窗口中對應(yīng)HTML文檔中Value的信息。defaultvalue：包括Text元素的默認(rèn)值 基本方法：
blur()：將當(dāng)前焦點(diǎn)移到后臺。select()：加亮文字。主要事件：
onFocus：當(dāng)Text獲得焦點(diǎn)時，產(chǎn)生該事件。OnBlur：從元素失去焦點(diǎn)時，產(chǎn)生該事件。Onselect：當(dāng)文字被加亮顯示后，產(chǎn)生該文件。onchange：當(dāng)Text元素值改變時，產(chǎn)生該文件。例：
...第四章
（2）textarea多行多列輸入元素
功能：實(shí)施對Textarea中的元素進(jìn)行控制?；緦傩?/p>
name：設(shè)定提交信息時的信息名稱，對應(yīng)HTML文檔Textarea的Name。Value：用以設(shè)定出現(xiàn)在窗口中對應(yīng)HTML文檔中Value的信息。Default value：元素的默認(rèn)值。方法：
blur()：將輸入焦點(diǎn)失去 select()：將文字加亮后 事件：
onBlur:當(dāng)失去輸入焦點(diǎn)后產(chǎn)生該事件 onFocus:當(dāng)輸入獲得焦點(diǎn)后，產(chǎn)生該文件 Onchange:當(dāng)文字值改變時，產(chǎn)生該事件 Onselect:當(dāng)文字加亮后，產(chǎn)生該文件（3）Select選擇元素
功能：實(shí)施對滾動選擇元素的控制。屬性：
name:設(shè)定提交信息時的信息名稱，對應(yīng)文檔select中的name。Length:對應(yīng)文檔select中的length options:組成多個選項(xiàng)的數(shù)組 selectIndex;該下標(biāo)指明一個選項(xiàng)
select在中每一選項(xiàng)都含有以下屬性： Text:選項(xiàng)對應(yīng)的文字
selected:指明當(dāng)前選項(xiàng)是否被選中 Index:指明當(dāng)前選項(xiàng)的位置 defaultselected:默認(rèn)選項(xiàng) 事件：
OnBlur：當(dāng)select選項(xiàng)失去焦點(diǎn)時，產(chǎn)生該文件。onFocas:當(dāng)select獲得焦點(diǎn)時，產(chǎn)生該文件。Onchange:選項(xiàng)狀態(tài)改變后，產(chǎn)生該事件。（4）Button按鈕
功能：實(shí)施對Button按鈕的控制。屬性：
Name:設(shè)定提交信息時的信息名稱，對應(yīng)文檔中button的Name。Value:用以設(shè)定出現(xiàn)在窗口中對應(yīng)HTML文檔中Value的信息。方法：
click()該方法類似于一個按下的按鈕。事件：
onclick當(dāng)單擊button按鈕時，產(chǎn)生該事件。例 ：
10第四章 11........4.3窗體對象實(shí)例
下面我們演示通過點(diǎn)擊一個按鈕（red）來改變窗口顏色，點(diǎn)擊“調(diào)用動態(tài)按鈕文檔”調(diào)用一個動態(tài)按鈕文檔。
test8_1.htm
調(diào)用動態(tài)按鈕文檔第四篇：分層教學(xué)在《網(wǎng)頁設(shè)計(jì)》中的應(yīng)用
分層教學(xué)在《網(wǎng)頁設(shè)計(jì)》中的應(yīng)用
乳源中等職業(yè)技術(shù)學(xué)校 李新華
摘要: 《網(wǎng)頁設(shè)計(jì)》在中等職業(yè)技術(shù)學(xué)校課程中是一個操作性較強(qiáng)的模塊，學(xué)生通過對《網(wǎng)頁設(shè)計(jì)》這一模塊的學(xué)習(xí)，能夠熟悉網(wǎng)站、網(wǎng)頁的基礎(chǔ)知識，掌握建立網(wǎng)站和制作網(wǎng)頁的基本知識和技巧；能夠設(shè)計(jì)出精美的網(wǎng)頁，還可以培養(yǎng)一種能夠陶冶情操的特長愛好。
關(guān)鍵詞：分層 差異 分層教學(xué)
在實(shí)際教學(xué)中，我發(fā)現(xiàn)學(xué)生對《網(wǎng)頁設(shè)計(jì)》課程的學(xué)習(xí)興趣和學(xué)習(xí)能力反映不一樣。其中某些學(xué)生的學(xué)習(xí)能力較強(qiáng)，表現(xiàn)出對網(wǎng)頁設(shè)計(jì)有很強(qiáng)的學(xué)習(xí)興趣，同時學(xué)習(xí)效果也不錯，經(jīng)常向老師表示希望能學(xué)到更多的關(guān)于網(wǎng)頁設(shè)計(jì)方面的知識；還有部分學(xué)生對網(wǎng)頁設(shè)計(jì)課程也表現(xiàn)出一定的興趣，但學(xué)習(xí)能力不是很好，學(xué)習(xí)效果一般；還有一部分學(xué)生對網(wǎng)頁設(shè)計(jì)課程的學(xué)習(xí)幾乎沒有什么熱情，也不用心學(xué)習(xí)或者學(xué)習(xí)能力差，基本喪失了學(xué)習(xí)興趣和信心。如何讓所有的學(xué)生都能學(xué)會并且學(xué)好《網(wǎng)頁設(shè)計(jì)》這個操作性那么強(qiáng)的模塊呢？本人在教學(xué)中發(fā)現(xiàn)“根據(jù)不同學(xué)生的具體情況和知識結(jié)構(gòu)進(jìn)行教學(xué)設(shè)計(jì)”的分層教學(xué)理論正符合目前學(xué)生的情況，因此決定在教學(xué)中采用“學(xué)生分層——教學(xué)目標(biāo)分層——教學(xué)評價分層”的教學(xué)模式。
由于網(wǎng)頁設(shè)計(jì)是一門實(shí)踐性較強(qiáng)的課程，學(xué)生的網(wǎng)頁設(shè)計(jì)水平會隨著學(xué)習(xí)態(tài)度的變化和實(shí)踐操作的熟練程度的變化而發(fā)生相應(yīng)的變化。所以在進(jìn)行實(shí)際教學(xué)中根據(jù)具體情況適時采用分層教學(xué)。
在講授到超級鏈接時, 我采用了分層教學(xué)模式進(jìn)行教學(xué)。
一、學(xué)生分層
分層教學(xué)理論的一個基本的要求和目的就是根據(jù)不同學(xué)生的具體情況和知識結(jié)構(gòu)進(jìn)行教學(xué)設(shè)計(jì)。根據(jù)學(xué)生對網(wǎng)頁設(shè)計(jì)的掌握程度,我將學(xué)生分為A、B、C三個層次。具體分層如下：
A層：學(xué)生對網(wǎng)頁設(shè)計(jì)課程的學(xué)習(xí)表現(xiàn)出較強(qiáng)的興趣，同時也熟練應(yīng)用網(wǎng)頁設(shè)計(jì)相關(guān)軟件（如Dreamweaver、Flash、PhotoShop）的同學(xué)，并能較快地接受老師在多媒體課堂上講授的教學(xué)內(nèi)容和在計(jì)算機(jī)機(jī)房中能較好完成老師所布置的實(shí)驗(yàn)內(nèi)容。
B層：學(xué)生對網(wǎng)頁設(shè)計(jì)課程的學(xué)習(xí)興趣表現(xiàn)一般，同時對網(wǎng)頁設(shè)計(jì)相關(guān)軟件有一定了解的同學(xué)，能理解老師在多媒體課堂上講授的教學(xué)內(nèi)容，但在計(jì)算機(jī)機(jī)房實(shí)踐時需要老師或其他同學(xué)的幫助才能順利地完成實(shí)驗(yàn)內(nèi)容。C層：學(xué)生對網(wǎng)頁設(shè)計(jì)基本沒有學(xué)習(xí)興趣，同時學(xué)習(xí)能力較差或?qū)W習(xí)不夠認(rèn)真的同學(xué)，在課堂上表現(xiàn)很差（經(jīng)常違反課堂紀(jì)律，或者做些與課堂無關(guān)的事情）。
二、教學(xué)目標(biāo)分層
教學(xué)目標(biāo)的分層就在于給不同的學(xué)生設(shè)置不同的階段學(xué)習(xí)目標(biāo)，以使不同的學(xué)生能根據(jù)各自不同的情況進(jìn)行有針對性的學(xué)習(xí)。既能保持各層次學(xué)生學(xué)習(xí)網(wǎng)頁設(shè)計(jì)的積極性,又能在各自的基礎(chǔ)上發(fā)揮特長,使基礎(chǔ)的鞏固與個性的發(fā)展達(dá)到和諧統(tǒng)一。
根據(jù)以上原則,關(guān)于超級鏈接的學(xué)習(xí)目標(biāo)也分三個層次。
C層：能理解超級鏈接的概念和掌握創(chuàng)建超級鏈接的基本方法；在上機(jī)實(shí)踐操作時能夠模仿范例創(chuàng)建幾種常用的超級鏈接：不同對象的鏈接（文字鏈接和圖像鏈接）、不同路徑的鏈接（絕對路徑鏈接和相對路徑鏈接）、不同形式的鏈接（電子郵件鏈接和虛擬鏈接）。
B層：除了能夠理解超級鏈接的概念和掌握創(chuàng)建超級鏈接的基本方法外，還要熟練創(chuàng)建超級鏈接的技巧；除了在上機(jī)實(shí)踐操作時能夠模仿范例創(chuàng)建幾種常用的超級鏈接外，還要在C層目標(biāo)的基礎(chǔ)上增加難度較大的超級鏈接，如圖像熱點(diǎn)鏈接和錨記鏈接；同時還要懂得在制作網(wǎng)頁時在不同的情況下使用不同類型的鏈接。
A層：在掌握B層目標(biāo)的基礎(chǔ)上還要求學(xué)生掌握超級鏈接的HTML語法，還要求利用CSS樣式來修飾鏈接文字以實(shí)現(xiàn)更佳鏈接效果，并且還能夠制作出實(shí)現(xiàn)超級鏈接的Flash動畫效果；同時還鼓勵學(xué)生自己設(shè)計(jì)和制作更有創(chuàng)意的超級鏈接效果，使網(wǎng)頁更生動和精美。
三、教學(xué)評價分層
在教學(xué)中，根據(jù)學(xué)生分層傳授知識，對學(xué)生進(jìn)行不同的評價。對學(xué)生進(jìn)行分層評價，以其在原有知識水平上的進(jìn)步和提高作為評價學(xué)生是否完成教學(xué)目標(biāo)的一個基準(zhǔn)，這是進(jìn)行分層教學(xué)的一個重要的方面，也是衡量分層教學(xué)法是否有效的一個重要手段。
在進(jìn)行超級鏈接的學(xué)習(xí)后，根據(jù)學(xué)生的多媒體課堂聽課情況和上機(jī)實(shí)踐操作情況，以及布置作業(yè)的完成情況和課后學(xué)生自行練習(xí)情況進(jìn)行總考核，得出綜合評價。
A層：大部分學(xué)生都能夠自覺地完成老師布置的任務(wù)，能夠創(chuàng)建出效果較好的超級鏈接； B層：部分學(xué)生也基本掌握了很多的創(chuàng)建超級鏈接的方法和技巧，但還有個別學(xué)生因努力程度不夠而沒有達(dá)到預(yù)期的教學(xué)目標(biāo)；
C層：某些學(xué)生基本掌握了超級鏈接的概念和創(chuàng)建常用超級鏈接的方法，甚至有部分學(xué)生在老師的指導(dǎo)和同學(xué)的幫助下能夠創(chuàng)建出難度更大的超級鏈接。
在進(jìn)行超級鏈接教學(xué)中采用分層教學(xué)實(shí)踐取得初步效果后，接著講授表格、層、行為和CSS樣式等內(nèi)容時繼續(xù)采用分層教學(xué)法。實(shí)踐證明，教學(xué)效果當(dāng)不錯?！毒W(wǎng)頁設(shè)計(jì)》這一模塊課程結(jié)束時，大部分A層學(xué)生在這一模塊的綜合成績達(dá)到80分以上，B層學(xué)生的綜合成績達(dá)到70分以上，而C層學(xué)生的綜合成績也基本上在及格以上。甚至個別B層和C層學(xué)生的成績達(dá)到80分以上。
綜上所述，在《網(wǎng)頁設(shè)計(jì)》模塊教學(xué)中采用分層教學(xué)方法，將有效的克服教學(xué)內(nèi)容與學(xué)生興趣愛好之間的矛盾，克服學(xué)生掌握知識水平兩極分化的矛盾。真正做到了以學(xué)生為出發(fā)點(diǎn)，充分發(fā)揮學(xué)生的積極性和主動性，適應(yīng)學(xué)生對不同內(nèi)容的學(xué)習(xí)需要，有效地解決了班級授課制的固有缺陷和因材施教之間的矛盾，《網(wǎng)頁設(shè)計(jì)》模塊教學(xué)注入了新的活力。但是，分層教學(xué)的設(shè)計(jì)、分組、教學(xué)內(nèi)容的分層、教學(xué)方法的分層等方面仍存在著不少的問題還有不少值得深入探索的地方。我將在以后的教學(xué)中不斷努力，使分層教學(xué)活動的方法得以不斷的改進(jìn)和完善。
參考文獻(xiàn)：
1、鐘和軍 《基于信息技術(shù)環(huán)境下分層導(dǎo)學(xué)模式的構(gòu)建與實(shí)踐》
2、付裕東 《落實(shí)因材施教原則的最佳途徑——分層次教學(xué)》
3、王濤斌 《分層教學(xué)理論在信息技術(shù)教學(xué)中的運(yùn)用》
4、張春興 《教育心理學(xué)》
5、羅耀軍，戴小波，張培軍 《計(jì)算機(jī)網(wǎng)頁制作教程》
第五篇：網(wǎng)頁設(shè)計(jì)與應(yīng)用畢業(yè)論文
目 錄
第一章 前言??????????????????????????????2 1.1 課題來源 ???????????????????????????? 2 1.2 網(wǎng)站開發(fā)項(xiàng)目需求分析??????????????????????? 2 1.3 軟件??????????????????????????????? 3 1.4 軟件運(yùn)行環(huán)境第二章 網(wǎng)站制作????????????????????3 第二章網(wǎng)絡(luò)制作????????????????????????????3 2.1做網(wǎng)頁的步驟 ??????????????????????????? 3 2.2 做網(wǎng)頁的要素????????????????????????????4 2.2.1網(wǎng)頁的整體布局設(shè)計(jì)????????????????????????4 2.2.2 網(wǎng)頁設(shè)計(jì)中色彩的運(yùn)用???????????????????????4 2.2.3 網(wǎng)頁形式與內(nèi)容相統(tǒng)一 ?????????????????????? 4 2.3 系統(tǒng)各模塊功能實(shí)現(xiàn)?????????????????????????4 2.3.1 系統(tǒng)登錄模塊 ??????????????????????????4 2.3.2 車輛展示模塊 ?????????????????????????? 5 2.3.3 賬號管理模塊???????????????????????????5 第三章 網(wǎng)站的設(shè)計(jì)??????????????????????????? 5 3.1 主頁的要求?????????????????????????????5 3.2 子頁的要求?????????????????????????????5 3.3 網(wǎng)頁設(shè)計(jì)技巧????????????????????????????5 3.3.1 框架的使用????????????????????????????5 3.3.2 CSS 樣式的使用??????????????????????????6 第四章 網(wǎng)站的應(yīng)用??????????????????????????? 6 4.1 網(wǎng)頁分為靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁?????????????????????6 4.2 我的認(rèn)識??????????????????????????????6 結(jié)束語 ???????????????????????????????? 7 參考文獻(xiàn)????????????????????????????????7
—1—
網(wǎng)頁設(shè)計(jì)與應(yīng)用
摘 要 ：汽車網(wǎng)站是一個結(jié)合了汽車銷售等多功能瀏覽的汽車網(wǎng)站，我所使用的軟件是
Macromedia 公 司 推 出 的 一 款 用 于 網(wǎng) 頁 設(shè) 計(jì) 的 軟 件 — —
dreamweaver8。在網(wǎng)頁的制作與鏈接中，我學(xué)到了很多，然后補(bǔ)充一些比較熱門的技巧。網(wǎng)站具有快捷。無距離更新的特性，同時提供進(jìn)入日常業(yè)務(wù)處理平臺的“入口”，具有較強(qiáng)的實(shí)用價值。這樣的網(wǎng)站被廣大消費(fèi)者普遍使用，隨著現(xiàn)在網(wǎng)絡(luò)的普及和高效性的不斷提高，它的展示作用和實(shí)用性已經(jīng)使它的應(yīng)用地位越來越高，越來越廣泛。本文對網(wǎng)站設(shè)計(jì)作了介紹，進(jìn)行了需求分析、模塊劃分、框架和 CSS 的介紹。由于制作經(jīng)驗(yàn)不足，作品和論文中存在問題之處，請老師指導(dǎo)完善。
關(guān)鍵詞： 超鏈接，外觀，性能，框架，CSS 目 錄
第一章 前言 1、1 課題來源
隨著二十一世紀(jì)新興科技的飛速發(fā)展，如今的電子信息產(chǎn)業(yè)正在經(jīng)受著一個巨大的挑戰(zhàn)，同時也面臨著一個重大的機(jī)遇。就目前的科技發(fā)展水平而言，電子信息產(chǎn)業(yè)的發(fā)展已經(jīng)不能夠滿足社會化大生產(chǎn)的要求，因此，各個國家集中人力、財(cái)力加大對信息技術(shù)產(chǎn)業(yè)的投入，以適應(yīng)目前需要?？上驳氖窃谶@幾十年的發(fā)展中我們有了互聯(lián)網(wǎng)?；ヂ?lián)網(wǎng)加大了我們了解世界的眼界，縮緊了人與人之間的距離，這就更容易的使我們走上信息化的道路。以往，人們出行都以自行車居多，后來公交事業(yè)發(fā)展壯大，人們便乘坐公交汽車，現(xiàn)如今，隨著人們生活水平的提高，越來越多的家庭已經(jīng)擁有或者想擁有自己的私家車。正是因?yàn)槿藗兊倪@些需求，越來越多的汽車網(wǎng)站出現(xiàn)在網(wǎng)絡(luò)上，使人們可以隨時了解自己想知道的汽車方面的新聞，真正的做到足不出戶，便知天下事。把汽車銷售與網(wǎng)絡(luò)連接起來，是今后汽車銷售發(fā)展的必然方向之一。
1．2 網(wǎng)站開發(fā)項(xiàng)目需求分析
一個網(wǎng)站項(xiàng)目的確立是建立在各種各樣的需求上面的，這種需求往往來自于客戶的實(shí)際需求或者是出于公司自身發(fā)展的需要，其中客戶的實(shí)際需求也就是說這種交易性質(zhì)的需求占了絕大部分。面對對網(wǎng)站開發(fā)擁有不同知識層面的客戶，項(xiàng)目的負(fù)責(zé)人對用戶需求的理解程度，在很大程度上決定了此類網(wǎng)站開發(fā)項(xiàng)目的成敗。因此如何更好地的了解、分析、明確用戶需求，并且能夠準(zhǔn)確、清晰以文檔的形式表達(dá)給參與項(xiàng)目開發(fā)的每個成員，保證開發(fā)過程按照滿足用戶需求為目的正確項(xiàng)目開發(fā)方向進(jìn)行，是每個網(wǎng)站開發(fā)項(xiàng)目管理者需要面對的問題。據(jù)專家預(yù)計(jì)，2009 年我國汽車需求量將超過 850 萬輛。所以，做好汽車 —2—
網(wǎng)站就是為了使廣大的消費(fèi)者提供及時和有效的信息，為其選擇適合自己的產(chǎn)品提供良好的參考。
1．3 使用軟件
dreamwraver 軟 件 由 美 國 著 名 的 網(wǎng) 站 應(yīng) 用 開 發(fā) 工 具 生 產(chǎn) 廠 商 AdobeMacromedia 于 2005 年 6 月推出并正式投入市場以來，已經(jīng)發(fā)展得相當(dāng)成熟⑴。關(guān)于dreamwraver 的技術(shù)介紹的相關(guān)書籍與網(wǎng)絡(luò)信息相當(dāng)豐富。通過大學(xué)中軟件開發(fā)環(huán)境課程的學(xué)習(xí)，對 dreamwraver 有了比較深刻的認(rèn)識，并比較輕松的掌握了dreamwraver 的操作。因此，軟件技術(shù)可以完成任務(wù)的要求。
1．4 軟件運(yùn)行環(huán)境
Dreamweaver 是一款簡體中文軟件，可以在 Win2003/WinXP 中安全運(yùn)行⑵
第二章 網(wǎng)站制作
2．1 制做網(wǎng)頁的步驟
在做網(wǎng)頁之前，我確定了做網(wǎng)頁的五個步驟。
一、確定網(wǎng)站主題 ：網(wǎng)站主題就是要建立的網(wǎng)站所要包含的主要內(nèi)容，一個網(wǎng)站必須要有一個明確的主題。
二、搜集材料 ：明確了網(wǎng)站的主題以后，你就要圍繞主題開始搜集材料了。材料既可以從圖書、報紙、光盤、多媒體上得來，也可以從互聯(lián)網(wǎng)上搜集，然后把搜集的材料去粗取精，去偽存真，作為自己制作網(wǎng)頁的素材。
三、規(guī)劃網(wǎng)站 ：一個網(wǎng)站設(shè)計(jì)得成功與否，很大程度上決定于設(shè)計(jì)者的規(guī)劃水平，規(guī)劃網(wǎng)站就像設(shè)計(jì)師設(shè)計(jì)大樓一樣，圖紙?jiān)O(shè)計(jì)好了，才能建成一座漂亮的樓房。網(wǎng)站規(guī)劃包含的內(nèi)容很多，如網(wǎng)站的結(jié)構(gòu)、欄目的設(shè)置、網(wǎng)站的風(fēng)格、顏色搭配、版面布局、文字圖片的運(yùn)用等，你只有在制作網(wǎng)頁之前把這些方面都考慮到了，才能在制作時駕輕就熟，胸有成竹。也只有如此制作出來的網(wǎng)頁才能有個性、有特色，具有吸引力。
四、選擇合適的制作工具 ：盡管選擇什么樣的工具并不會影響你設(shè)計(jì)網(wǎng)頁的好壞，但是一款功能強(qiáng)大、使用簡單的軟件往往可以起到事半功倍的效果。
五、制作網(wǎng)頁 ：材料有了，工具也選好了，下面就需要按照規(guī)劃一步步地把自己的想法變成現(xiàn)實(shí)了，這是一個復(fù)雜而細(xì)致的過程，一定要按照先大后小、先簡單后復(fù)雜來進(jìn)行制作。所謂先大后小，就是說在制作網(wǎng)頁時，先把大的結(jié)構(gòu)設(shè)計(jì)好，然后再逐步完善小的結(jié)構(gòu)設(shè)計(jì)。所謂先簡單后復(fù)雜，就是先設(shè)計(jì)出簡單的內(nèi)容，然后再設(shè)計(jì)復(fù)雜的內(nèi)容，以便出
①知新文化.HTML 完全手冊與速查辭典[M].北京：科學(xué)出版社，第49頁，2007.② 楊選輝，網(wǎng)頁設(shè)計(jì)與制作教程[M].北京：清華大學(xué)出版社，第321頁，2009.—3—
現(xiàn)問題時好修改。在制作網(wǎng)頁時要多靈活運(yùn)用模板，這樣可以大大提高制作效率。此外，整體設(shè)計(jì)完成后我們還要將網(wǎng)頁上傳測試，使其和其他版本瀏覽器能夠兼容，再者對網(wǎng)站推廣宣傳，及時的維護(hù)更新。
2.2 制作網(wǎng)頁的要素
2.2.1 網(wǎng)頁的整體布局設(shè)計(jì)
網(wǎng)頁設(shè)計(jì)作為一種視覺語言，要講究編排和布局，雖然主頁的設(shè)計(jì)不等同于平面設(shè)計(jì)，但它們有許多相近之處，應(yīng)充分加以利用和借鑒。⑴版式設(shè)計(jì)通過文字圖形的空間組合，表達(dá)出和諧與美。一個優(yōu)秀的網(wǎng)頁設(shè)計(jì)者也應(yīng)該知道哪一段文字圖形該落于何處，才能使整個網(wǎng)頁生輝。多頁面站點(diǎn)頁面的編排設(shè)計(jì)要求把頁面之間的有機(jī)聯(lián)系反映出來，特別要處理好頁面之間和頁面內(nèi)的秩序與內(nèi)容的關(guān)系。尤其是我們在利用網(wǎng)頁效果體現(xiàn)在線營銷的意圖時，更要注意為了達(dá)到最佳的視覺表現(xiàn)效果，而講究整體布局的合理性，比如一家生產(chǎn)型的企業(yè)，它所提供產(chǎn)品的名稱、類別、型號、價格、功能介紹應(yīng)怎樣編排才能使瀏覽者有一個流暢的視覺體驗(yàn)，從而方便他對產(chǎn)品的了解，促成最后的購買。
2.2.2 網(wǎng)頁設(shè)計(jì)中色彩的運(yùn)用
色彩是藝術(shù)表現(xiàn)的要素之一，在網(wǎng)頁設(shè)計(jì)中，根據(jù)和諧、均衡和重點(diǎn)突出的原則，將不同的色彩進(jìn)行組合、搭配來構(gòu)成美麗的頁面。⑵根據(jù)色彩對人們心理的影響，合理地加以運(yùn)用，按照色彩的記憶性原則，一般暖色較冷色的記憶性更強(qiáng)一些。色彩還具有聯(lián)想與象征的特質(zhì)，如紅色象征血、太陽；藍(lán)色象征大海、天空和水面等。所以如果我們在對一家出售冷食的商店進(jìn)行虛擬店面的頁面設(shè)計(jì)時，應(yīng)使用淡雅而沉靜的顏色，使人心理上感覺涼爽一些，增強(qiáng)人們的購買心理，使得在線營銷得到很好的實(shí)踐效果。另要注意的是網(wǎng)頁的顏色應(yīng)用雖沒有限制，但不能毫無節(jié)制地運(yùn)用多種顏色，一般情況下，先根據(jù)總體風(fēng)格的要求定出一至二種主色調(diào)，在已經(jīng)有了完備的 CIS（企業(yè)形象識別系統(tǒng)）的企業(yè)進(jìn)行網(wǎng)頁設(shè)計(jì)時，更應(yīng)該按照其中的 VI 進(jìn)行色彩運(yùn)用。在色彩的運(yùn)用過程中，還應(yīng)注意的一個問題是：由于國家和種族、宗教和信仰的不同，以及生活的地理位置、文化修養(yǎng)的差異等，不同的人群對色彩的喜惡程度有著很大的差異。如：兒童喜歡對比強(qiáng)烈、個性鮮明的純顏色；生活在草原上的人喜歡紅色；生活在鬧市中的人喜歡淡雅的顏色；生活在“沙漠”中的人喜歡綠色。⑶在設(shè)計(jì)中要考慮眾多因素。
2.2.3 網(wǎng)頁形式與內(nèi)容相統(tǒng)一
要將豐富的意義和多樣的形式組織成統(tǒng)一的頁面結(jié)構(gòu)，形式語言必須符合頁面的內(nèi)容，體現(xiàn)內(nèi)容的豐富含義。⑷運(yùn)用對比與調(diào)和、對稱與平衡、節(jié)奏與韻律以及留白等手段，通過空間、文字、圖形之間的相互關(guān)系建立整體的均衡狀態(tài)，產(chǎn)生和諧的美感。如對稱原則在
①王誠君，劉振華，郭竑暉，《高中山.Dreamweaver 8 網(wǎng)頁設(shè)計(jì)應(yīng)用教程[M]》.北京：清華大學(xué)出版社，第332頁，2007.②李光明，曹蕾，余輝.《中文Dreamweaver 8 網(wǎng)頁設(shè)計(jì)與實(shí)訓(xùn)教程[M]》.北京：冶金工業(yè)出版社，第13頁，2006.③周德華，許銘霖.《新編網(wǎng)頁設(shè)計(jì)教程[M]》.北京：冶金工業(yè)出版社，第159頁，2006.—4—
頁面設(shè)計(jì)中，它的均衡有時會使頁面顯得呆板，但如果加入一些富有動感的文字、圖案，或采用夸張的手法來表現(xiàn)內(nèi)容往往會達(dá)到比較好的效果。點(diǎn)、線、面作為視覺語言中的基本元素，要使用點(diǎn)、線、面的互相穿插、互相襯托、互相補(bǔ)充構(gòu)成最佳的頁面效果。網(wǎng)頁設(shè)計(jì)中點(diǎn)、線、面的運(yùn)用并不是孤立的，很多時候都需要將它們結(jié)合起來，表達(dá)完美的設(shè)計(jì)意境。
2．3 系統(tǒng)各模塊功能實(shí)現(xiàn)
2.3.1 系統(tǒng)登錄模塊
1、該功能模塊可以記錄客戶的郵箱地址，交易時還可以向客戶發(fā)送交易信息，到帳確認(rèn)等等。
2、登陸后系統(tǒng)會調(diào)出客戶的記錄，按照交易量的不同客戶享受的折扣也不同，系統(tǒng)主界面
2.3.2 車輛展示模塊⑴
1、該功能模塊主要實(shí)現(xiàn)對車輛的展示。
2、該功能模塊圖片、文字介紹，360 度 flash 對各種車輛的展示。
2.3.3 賬號管理模塊⑵
1、掛失業(yè)務(wù)在正常工作中肯定會遇到掛失的業(yè)務(wù)，確定掛失后，數(shù)據(jù)庫會將該賬號掛起，等待客戶做進(jìn)一步操作。
2、凍結(jié)業(yè)務(wù)，客戶對賬號有凍結(jié)的權(quán)利，在客戶沒有輸入解凍密碼之前，任何人都無法動用帳上的資金。
3、流水查詢客戶可以查詢曾經(jīng)交易過的記錄。
4、客戶可以自行對其賬號密碼進(jìn)行修改，網(wǎng)站管理人員也可以添加或刪除賬號。
第三章 網(wǎng)站的設(shè)計(jì)
3.1 主頁的要求
對于銷售業(yè)務(wù)系統(tǒng)要求運(yùn)行的工作環(huán)境穩(wěn)定，易于操作，界面美觀大方，對 于前臺展示界面要求系統(tǒng)便于維護(hù)，安全可靠，對于廣大客戶所要執(zhí)行的操作 簡單易懂，遠(yuǎn)程訪問速度較快，界面友好美觀，有基本的錯誤提醒功能，遠(yuǎn)程 操作數(shù)據(jù)庫正確，要求和客戶有一定的互動性，在主頁上直觀的就可以查看瀏 覽者所想要了解的東西。
3.2 子頁的要求
后面的工作就是子頁的選擇與鏈接，子頁應(yīng)該豐富多彩，內(nèi)容充實(shí)，瀏覽 性強(qiáng)，比如說，想要銷售一輛汽車，應(yīng)該有它的全部資料，包括外觀、內(nèi)飾、性能指標(biāo)、出產(chǎn)地、價
① 趙銘建，趙慧，喬孟麗，康梅娟.《網(wǎng)頁設(shè)計(jì)與制作[M].》東營：中國石油大學(xué)出版社，第66頁，2007.②趙祖蔭，王云翔，胡耀芳.《網(wǎng)頁設(shè)計(jì)與制作教程[M]》.北京：清華大學(xué)出版社，第187頁，2008.—5—
格等諸多方面，鑒于以上方面，我開始了子頁的選擇 與鏈接。3.3 網(wǎng)頁設(shè)計(jì)技巧
一張完美的主頁設(shè)計(jì)需要積累豐富的知識以及掌握大量的技巧。在這里從框架 和 CSS 樣式的運(yùn)用兩方面來介紹網(wǎng)頁設(shè)計(jì)的技巧。⑴
3.3.1 框架的使用
FRAME（框架）是 Web 上經(jīng)常會看到的頁面結(jié)構(gòu)。框架的最常見用途就是導(dǎo)航⑵。一組框架通常包括一個含有導(dǎo)航條的框架和另一個要顯示主要內(nèi)容頁面的框 架。使用框架具有以下優(yōu)點(diǎn)：訪問者的瀏覽器不需要為每個頁面重新加載與導(dǎo)航相 關(guān)的圖形；每個框架都具有自己的滾動條如果內(nèi)容太大，在窗口中顯示不下，因此訪問者可以獨(dú)立滾動這些框架。例如，當(dāng)框架中的內(nèi)容頁面較長時，如果 導(dǎo)航條位于不同的框架中，那么向下滾動到頁面底部的訪問者就不需要再滾動 回頂部來使用導(dǎo)航條。使用框架具有以下缺點(diǎn)：可能難以實(shí)現(xiàn)不同框架中各元素的精確圖形對齊；對 導(dǎo)航進(jìn)行測試可能很耗時間。許多專業(yè) Web 設(shè)計(jì)人員不喜歡使用框架，并且許多瀏覽 Web 的人也不喜歡框 架。在大多數(shù)情況下，這種反感是因?yàn)橛龅搅四切┦褂每蚣苄Ч患鸦虿槐匾?地使用框架的站點(diǎn)例如，每當(dāng)訪問者單擊導(dǎo)航按鈕時就重新加載導(dǎo)航框架內(nèi) 容的框架集。如果框架使用得法例如，在允許其他框架的內(nèi)容發(fā)生更改的同 時，使一個框架中的導(dǎo)航控件保持靜態(tài)，則這些框架對于某些站點(diǎn)可能非常 有用。
3.3.2 CSS 樣式的使用
CSS 層疊 樣 式 表 是 一 種 制 作 網(wǎng) 頁 的 新 技 術(shù) 它 的 全 稱 是 級 聯(lián) 樣 式 表 即Cascading StyleSheets 的縮寫，又稱之為風(fēng)格樣式表單。⑶CSS 是在網(wǎng)頁制作過程中普遍用到的技術(shù)。采用了 CSS 技術(shù)控制的網(wǎng)頁，設(shè)計(jì)者會更輕松、有效地對頁面的整體布局、顏色、字體、鏈接、背景以及同一頁面的不同部分、不同頁面的外觀和格式等效果實(shí)現(xiàn)更加精確地控制。
第四章 網(wǎng)頁的應(yīng)用
4.1 網(wǎng)頁分為靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁。
4.1.1 優(yōu)點(diǎn)：
靜態(tài)網(wǎng)頁：1.靜態(tài)網(wǎng)頁的內(nèi)容相對穩(wěn)定，因此容易被搜索引擎檢索； 動態(tài)網(wǎng)頁：
1.動態(tài)網(wǎng)頁以數(shù)據(jù)庫技術(shù)為基礎(chǔ)，可以大大減少降低網(wǎng)站維護(hù)的工作量；
2.采用動態(tài)網(wǎng)頁技術(shù)的網(wǎng)站可以實(shí)現(xiàn)更多的功能，如用戶注冊、用戶登錄、在線調(diào)查、用戶管理、頂訂單管理等等
①]陳季.《 Flash 基礎(chǔ)與實(shí)例教程[M]》.北京：北京希望電子出版社，第88頁，2005.②丁海祥.《計(jì)算機(jī)平面設(shè)計(jì)實(shí)訓(xùn)[M].》 北京：高等教育出版社，第54頁，2005.③曹雁青，楊聰.《 Photoshop 經(jīng)典作品賞析[M].》北京：北京海洋智慧圖書有限公司，第35頁，2002.—6—
4.1.2 缺點(diǎn)： 靜態(tài)網(wǎng)頁：
1.靜態(tài)網(wǎng)頁沒有數(shù)據(jù)庫的支持，在網(wǎng)站能制作和維護(hù)方面工作量較大，因此 當(dāng)網(wǎng)站信息量很大時完全依靠靜態(tài)網(wǎng)頁制作方式比較困難； 2.靜態(tài)網(wǎng)頁的交互性交叉，在功能方面有較大的限制。動態(tài)網(wǎng)頁：1.動態(tài)網(wǎng)頁中的“？”對搜索引擎檢索存在一定的問題，搜索引擎一般不可 能從一個網(wǎng)站的數(shù)據(jù)庫中訪問全部網(wǎng)頁，或者處于技術(shù)方面的考慮，搜索 蜘蛛不去抓取網(wǎng)址中“？”后面的內(nèi)容，因此采用動態(tài)網(wǎng)頁的網(wǎng)站在進(jìn)行 搜索引擎推廣時需要做一定的技術(shù)處理才能適應(yīng)搜索引擎的要求。
4.2 我的認(rèn)識
網(wǎng)頁應(yīng)用很廣泛，當(dāng)我們打開 IE 瀏覽器的時候，出現(xiàn)在屏幕上的就是一個網(wǎng)頁，隨著社會的進(jìn)步，生活節(jié)奏地加快，各行各業(yè)都開始使用互聯(lián)網(wǎng)來宣傳自己的產(chǎn)品，或者進(jìn)行其他的活動。網(wǎng)站設(shè)計(jì)離不開網(wǎng)頁，網(wǎng)頁像書中的章頁，由這些頁面構(gòu)成了整個網(wǎng)站。不管是大企業(yè)還是小公司，都有自己的網(wǎng)站，當(dāng)然網(wǎng)站是離不開網(wǎng)頁的。網(wǎng)頁中的信息可以給我們帶來很多幫助，可以用來學(xué)習(xí)或者做一些活動的參考。通過對這門課程的學(xué)習(xí)會收獲很多。
結(jié)束語
在系統(tǒng)的需求分析過程中，由于不熟悉，產(chǎn)生了很大的困難，通過與指導(dǎo)老師的探討與溝通，我漸漸地對系統(tǒng)有了一個大體的認(rèn)識。雖然說在系統(tǒng)需求分析過程中花費(fèi)了很多時間，但是我認(rèn)為這是必要的也是必須的。這次畢業(yè)設(shè)計(jì)中我了解到了很多的知識，這對我今后的學(xué)習(xí)和生活都將會有很大的幫助。我明白了對于一個完整性的軟件設(shè)計(jì)流程的主要性，在整個網(wǎng)站設(shè)計(jì)過程中前期需求分析，可行性分析是非常重要的環(huán)節(jié)，可以說是軟件設(shè)計(jì)的核心，在過去我一直認(rèn)為詳細(xì)設(shè)計(jì)編碼才是最重要的，因?yàn)樵俸玫男枨?，編碼不成功，軟件就無法正常運(yùn)行。鍛煉了自己發(fā)現(xiàn)問題，解決問題的能力。開發(fā)過程中遇到一些需求的變化，通過修改設(shè)計(jì)思路，避免在后期產(chǎn)生更大的錯誤。再詳細(xì)設(shè)計(jì)的每一步都有可能出錯，所以會進(jìn)行非常多的調(diào)試工作，只要發(fā)現(xiàn)問題就調(diào)試解決，這樣不僅增強(qiáng)了信心，也很好的鍛煉了自己遇到問題不急不躁，耐心解決的能力。
參 考 文 獻(xiàn)
〈1〉《信息技術(shù)》江蘇科學(xué)技術(shù)出版社.〈2〉《網(wǎng)頁制作》人民郵電出版社.〈3〉 《dreamweaver8 參考手冊》2008 年版.，〈4〉柯林森、劉志忠，CSS 基礎(chǔ)教程，人民郵電出版社，2007.9.〈5〉蘇昱，樣式表中文手冊，幫助文檔。〈6〉韓國鋒、ASP 柯華坤，網(wǎng)站開發(fā)典型模塊與實(shí)例精講，電子工業(yè)出版社，2006.8.—7—
點(diǎn)擊咨詢 