導語：如何才能寫好一篇常見的網頁設計，這就需要搜集整理更多的資料和文獻，歡迎閱讀由公務員之家整理的十篇范文，供你借鑒。

篇1

摘 要：《網頁設計》作為中職計算機課程系列中的一門必修課，具有很強的綜合性和實踐性。本文對網頁設計指導教師在使用項目教學法進行教學時應該注意的問題進行探討，旨在提高學生學習這門課程的興趣與設計制作網頁的能力，提高《網頁設計》的教學質量，避免出現一些常見的教學問題。

關鍵詞：中職；網頁設計；項目教學法

中圖分類號：G712 文獻標識碼：A 文章編號：1005-1422（2014）03-0119-02

網頁設計作為計算機實訓項目之一，需要通過40-50學時的學習，學生才能完成一個完整網站的制作。在實施項目教學中，通常會出現這樣幾個問題：

一、分組過程中的問題

在分組中多數采用了按學生意愿自由組合，一般對全班同學進行分組，4～6人一組，采取組長負責制，由組長統(tǒng)籌安排其他組員的分工，這樣出現的問題是，有的小組學習能力很好，很容易就完成了教師布置的任務，而有的小組全組的學習能力都很差，根本無法完成教師布置的任務，甚至出現全組人都去做其他事情，根本不做教師布置的任務的情況。

解決方法：教師根據實際情況及時調整各小組之間的成員。達到每小組都有1～2名學習能力強的學生作為負責人，帶動其他學習能力差的學生。指導教師需要隨時觀察各小組，對出現問題的小組，及時與小組成員進行溝通與協調，解決小組內部出現的相互合作不適應的問題。

二、規(guī)劃網站的問題

在制作網站前，給學生重點介紹幾種流行的專題網站，也可讓學生上網找出自己感興趣的網站，要求學生在瀏覽網站的同時，把該網站的風格特點進行總結，并把自己的心得介紹給同學。課前讓學生進行網站需求的調查，在調查過程中尋找具有一定的應用價值的網站項目。課堂上讓學生結合各自調查情況，提出一個網站設計的項目，參考《網頁設計》教材制定好一份初步計劃書，確定網站主題。在這個過程中常常出現的問題是學生的選題過大，選擇的網站功能過多，制作技術過于復雜。這些問題往往導致學生在制作的過程中完成不了相應的計劃，網站設計的熱情、積極性逐步降低，最終導致計劃設計的網站無法實現。

解決方法：教師在學生瀏覽網站過程中加強引導學生進行合理的選題。指導小組負責人合理分析小組成員的能力，教師需要在每組學生制定規(guī)劃時引導學生發(fā)現問題，找到解決問題的方法。

三、細化任務，分工合作中的問題

本著發(fā)揮學生個人特長，讓每一位學生參與到網站設計中，結合《網頁設計》課程的教學內容，引導項目負責人對每個小組成員進行合理的分工，對各成員具體需要完成的模塊內容及需要的時間進行詳細的規(guī)劃。在這個過程中經常會出現的問題是：項目負責的學生與其他成員的溝通不足，對其他成員的能力了解不夠，容易出現分配不合理，個別成員無法完成分配的任務等問題；其次還會出現項目負責的同學對模塊分配過大，不夠細致，導致開發(fā)的小組成員容易出現無法入手，不知道從哪里開始的情況。

解決方法：引導項目負責的學生對網站模塊進行細化，把每個大模塊具化到每個無法再分的最終模塊；通過小組討論，調查，形成合理的開發(fā)時間表，讓小組成員能在規(guī)定的時間內做好計劃的內容。

四、實施項目中的問題

學生確定各自在小組內的分工及合作形式后，按照已確定的方案進入具體的網站制作。在這個過程中，學生必然會碰到許多新問題，常規(guī)的做法是教師把問題集中起來，要求各小組在解決問題時充分發(fā)表意見，同學之間相互幫助，然后教師根據學生的掌握情況進行及時補充，在學生應用上確實有困難的地方，教師提供給他們解決問題的方法。但在實際中往往會出現收集的問題不全面的情況，這是因為學生在做設計的時候沒有做相應的記錄，時間長了會忘記部分問題；所以教師在收集問題，集中講解后，仍然達不到預期的效果，還會有部分小組無法開展網站的制作。

解決方法：要求每個小組每次設計時，出現問題就記錄在開發(fā)日志中，同時有好的方法也記錄下來，方便以后遇到相同情況時使用。

五、驗收成果，小組成果展示出現的問題

網站制作結束前，需要經過指導教師的驗收，才可以宣布整個項目工作的結束。每個小組需要向教師及其他小組的同學展示自己的網站，并進行作品的答辯。以團隊的形式，分模塊展示，體現合作的同時還應有細致分工，這能促進學生的團隊意識。但是在展示過程中通常會遇到網站演示出錯的問題，這是因為學生做完網站后，自己小組進行一個簡單的測試就提交給指導教師；指導教師在驗收網站的時候，由于時間關系，基本不可能把學生的每個網站都很細致的進行測試，而是從專業(yè)角度，先入為主地查看估計會出錯的部分，這就忽律掉了其他部分。

解決方式：在小組成果展示之前，加入小組相互測試部分。這樣的好處是：第一，便于發(fā)現問題。俗話說得好，當局者迷、旁觀者清。自己開發(fā)的模塊太熟悉了，通常會去找熟悉的部分，很難找到問題所在，而相互測試可以克服掉這個問題。第二，節(jié)約時間。不但節(jié)約了教師驗收的時間，還節(jié)約了學生認識理解別人項目的時間，便于在網站演示時大家對它的理解。因為測試過，使用過，大家對演示網站就更容易理解了。

六、評估總結出現的問題

每個小組在完成網站設計后，指導教師會要求他們對自己的網站和其他小組的網站進行評價，最后教師再對各項目組的網站進行綜合評價。教師在評價學生網站時，有的教師只進行優(yōu)劣評價，直接給學生一個評價量規(guī)表就結束了，忽略了網站存在的問題，沒有給出具體的需要改進的地方和修改的建議等。

解決方式：在評價量規(guī)表后加入一個建議表，詳細列出網站在今后的設計中需要注意的問題以及進一步提高設計水平的方向。

篇2

1.1網頁設計的概念

網頁設計是伴隨計算機互聯網產生的視聽設計，結合文字、色彩、圖形圖像、版式等對于網頁版面的編排。網絡設計者通過自身的創(chuàng)造性思維，對網頁的結構進行藝術上的規(guī)劃與設計，使網頁給人留下深刻的印象，讓人過目不忘。

1.2網頁設計的視覺特點

傳統(tǒng)紙媒對現在的網頁設計有一定的影響，版式設計上符合人們的閱讀習慣，讀者往往習慣上下滾動頁面進行閱讀，所以排字以橫向排列為主，方便讀者閱讀，而且對于關鍵詞匯可以用其他色彩進行突出設計，使人們在閱讀的時候對文視覺元素在網頁設計中的功能阮翔國家新聞出版廣電總局831臺321100章重點內容有所把握。對于網頁設計一般采用網絡樣式，也可以進行自由樣式的設計，給人們新鮮感，不會使讀者產生審美疲勞，但多樣性的同時，要注意不能違背整體的設計風格，需要符合網頁設計中視覺效果的特點。

1.3網頁版式設計的視覺要素

網頁設計是在一個空間有限的頁面內，將文字、圖形、圖案、鏈接等元素進行規(guī)劃和排版，將這些視覺元素合理的安排，使它們可以相互協調，并且表達出指定的信息。網頁設計者可以通過不同的設計，突出不一樣的重點，根據不同的用意，使用不同的視覺元素，這些元素就形成了人們可見的視覺區(qū)域。

2視覺元素的呈現深受網頁布局的影響

2.1常見的網頁布局

現在的網頁布局雖然沒有明確的分類，但是網頁風格類型卻是多種多樣的。

（1）大多數的網站選用國字型布局，這是最常見的一種布局，明確的主次關系

（。2）拐角型布局，這種布局是將一些相關信息的鏈接或者文字信息，放在網頁的左邊或者右邊，意思相似的內容放在一起，可以使讀者一目了然

（。3）上下框架型布局，這種布局的特點是將網頁設計的內容和中心標題區(qū)分。

（4）封面型布局，這種布局的特點是在網站顯著的位置，設計引人注意的圖案或者是動畫特效，點擊鏈接可以簡單進入相應的界面。

2.2網頁布局的方法

網頁在設計之前是空白的，像是一張白紙，需要網頁設計者通過自身的想象力和創(chuàng)造能力，將一切元素組合到一起，然后具有自己的風格。首先，網頁設計者要有獨特的構思，要有一定的創(chuàng)意，創(chuàng)意的好壞直接影響設計的質量，優(yōu)秀的創(chuàng)意可以在激烈的市場環(huán)境下勝出，可以給瀏覽者留下深刻的印象，并且與其他網站區(qū)別開。然后要將網頁的整體框架勾畫出來，把標題和主要內容先設計到網頁中，使大概的輪廓呈現出來。最后進行細化，把具體內容和圖形、動畫等元素進行規(guī)劃和設計，布局規(guī)劃要符合人們的瀏覽習慣。

3網頁設計中視覺元素的功能與審美性

3.1視覺元素的功能和審美性

網頁設計是指利用互聯網，可以將信息快速、準確、簡潔地傳達給用戶。審美是指通過視覺，欣賞、領會事物或藝術品的美。隨著網絡的普及，對網頁的要求越來越高，網頁設計的審美性也隨之產生。對于網頁的審美是指用戶對網頁設計中的各個視覺元素的感受。網頁設計的文字、色彩和圖案等元素都應遵照視覺美的規(guī)律，各元素之間要相互協調，突出內容的主題，對于網頁設計中的視覺元素要有統(tǒng)一的風格，并滿足人們的審美。

3.2網頁設計中視覺元素的功能和審美性的具體表現

人們對互聯網的應用越來越頻繁，網絡已經融入了生活中的方方面面，無論是工作還是學習都離不開網絡。通過網絡，可以實現資源共享、網絡檢索、網絡購物，下載自己所需的資料等很多功能。在網頁設計上需要重點突出視覺性，方便用戶瀏覽到需要的內容。而且，在網頁瀏覽內容過程中，用戶可以發(fā)表自己的評論和觀點，對信息進行反饋，使信息傳播變成雙向性。

3.3視覺元素在不同網站上的功能和審美性存在的差異

隨著電子商務的普及，在網絡上購物已經變成十分普遍，各種各樣的購物網站相繼出現，但是大部分網頁結構過于單調，顏色單一，對于重點并不突出。公共服務網站，存在較多的信息，統(tǒng)一的風格，清晰的結構，沒有過多的修飾，比較正式可信。個人網站顏色明亮，個性特點鮮明，富有活力。視覺元素應用在不同類型的網站，給人們帶來的視覺體驗是完全不相同的。

4結語

篇3

>> CSS技術的網頁設計應用研究 CSS濾鏡在網頁設計中的應用 網頁設計中CSS樣式的應用分析 CSS樣式在網頁設計中的應用 網頁設計中的DIV+CSS技術應用研究 淺談網頁設計中DIV+CSS技術應用的優(yōu)勢及缺陷 網頁設計中DlV+CSS布局技術的應用實踐探討 淺析網頁布局中DIV+CSS技術的應用 DIV_CSS技術在網頁布局中的應用 DIV+CSS技術在網頁布局中的應用 解析CSS在網頁中的應用 “網頁設計”課程中DIV+CSS布局技術的教學 網頁設計中的DIV+CSS布局技術運用研究 基于DIV+CSS的網頁設計技術 基于DIV+CSS技術的網頁設計優(yōu)化方法 DIV+CSS布局在網頁設計教學中的應用研究 CSS3在響應式網頁設計中的應用 基于CSS+DIV的float技術在網頁制作中的應用 基于DIV+CSS的網頁布局技術應用 網頁設計中CSS的鏈接樣式研究 常見問題解答 當前所在位置：L的功能也隨著網絡的發(fā)展而日趨完善。然而，網頁內容跟控制樣式夾雜混合一直是網頁設計語言的一大缺陷。為了能夠使網頁具有更好的兼容性，萬維網聯盟制定出統(tǒng)一的CSS規(guī)范，把需要利用樣式來控制的內容徹底地從網頁中分離出來。

二、什么是CSS

CSS的全稱是Cascading Style Sheets，中文又稱為“層疊樣式表”，是一種用于控制網頁頁面布局的便捷技術，可以較輕松地控制頁面的布局，使頁面的元素變得合一；與此同時，它不再需要一頁一頁地修改單個頁面（假設每個頁面都是修改相同的部分），而可以將多個網頁的風格同時進行更新；并且由于CSS具有非常好的兼容性，幾乎能在所有瀏覽器上使用。因此CSS技術在現代網頁設計中得到了非常廣泛的應用。

三、CSS的產生背景

CSS是萬維網聯盟組織為了克服HTML語言在設計網頁樣式時的不足而制定出的擴展樣式標準。CSS在各個方面不僅原本繼承了HTML各種標記的屬性設定（即樣式） ，同時還擴充了HTML中沒有實現的功能區(qū)，比如它能夠通過VBScript程序等設計語言來控制網頁，這樣便能實現有效地對網頁的外觀和布局進行更精確的控制，繼而使網頁的展示、網頁的布局更加靈活。CSS可以將網頁內容與控制網頁內容的樣式分開設定，也就是說將網頁的外觀設定信息從網頁內容中獨立出來，并集中管理。如果進一步將重用的CSS樣式信息存儲為單個獨立的文件我們就能讓多個不同的網頁搭配同一個樣式，從而實現統(tǒng)一的風格，這樣的話在修改網頁模板時可單獨修改被保存的獨立CSS文件，節(jié)省出修改每一個網頁文件的時間。

CSS的每一條定義都有如下的形式：

selector{property： value； property： value；……}

其中，selector可以是HTML的tag，ID或class，如P，BODY，A；property就是那些將要被修改的性質（屬性），如color；value是給property賦的值（參數），如color的值為red。

四、CSS與網頁的相關性

CSS樣式跟HTML網頁的完美結合，實現了網頁的展現效果控制代碼跟網頁實際內容的分離。使得新的網頁設計經常利用CSS技術來控制網頁的樣式，這其中通常包括控制頁面的整體布局、文字、圖片、背景等等相關信息，而HTML則干脆只用來羅列網頁中的幾大元素。一個完備的CSS樣式表可以以多種方式應用到HTML頁面當中，但外部連接通常是最常用也是最好的方式之一。這種方式采取將CSS樣式代碼單獨放入一個外部文件中，再由HTML中的link標記來進行調用。這樣做的好處是可以使多個網頁調用同一個樣式表文件，最大限度的實現了代碼重用及網站文件的最優(yōu)化配置。

CSS樣式在HTML中以STYLE標識出現，其格式為：

< style >

a{text-decoration：none； color：yellow}

a：hover{text-decoration：underline； color：purple}

p{font-size：20； background：red； color：blue}

< /style >

將如上代碼插入任一HTML文檔后，刷新顯示，則所有錨點變?yōu)槠胀ㄗ煮w，顏色為黃，但當鼠標移至其上時，則錨點的提示字符變?yōu)閹聞澗€的紫色字體；整個文檔中被置標P包圍的文字將以紅底藍字、字體大小為20個象素的形式出現。如果其中某段文字需另加修飾，可以單獨的的形式出現，例如

< p style=”font-size：30； font-weight ：bolder； background：white；color：blue” >

................

< /p >

則此段文字白底藍字，30個象素大小，且字體加粗。

五、CSS缺陷

（一）DIV+CSS盡管不是高不可攀，但是在網站建設中至少要比表格定位復雜的多，即使是對于網站建設的高手也是容易出現問題，更不要說是初學者了。（二）CSS網站建設的設計元素通常會放在一個外部文件中，或幾個文件，有可能相當的復雜，甚至比較龐大，如果在網站建設中CSS文件調用出現異常，那么整個網站將變得慘不忍睹。（三）雖然說DIV+CSS解決了大部分瀏覽器兼容的問題，但是也有在部分瀏覽器中使用出現異常。（四）DIV+CSS在網站建設中對搜索引擎優(yōu)化與否，取決于網頁設計的專業(yè)水平，而不是DIV+CSS本身，在網站建設中使用DIV+CSS樣式的方法其實并不能保證網頁對搜索引擎的優(yōu)化，甚至不能保證一定比用HTML進行網站建設更加的簡潔。

六、CSS局部優(yōu)化方法

編寫網頁時盡量減少占用網頁字節(jié)，同時簡化CSS代碼，讓自己寫的CSS代碼更加專業(yè)，多采用同屬性提取共用CSS選擇器，分離網頁顏色和背景設置樣式等技術。

總的來說，雖然CSS技術給網頁布局模式注入了新的生命力，能夠使得相同的HTML代碼呈現出數以百計風格迥異的網站。但是要想比較熟練的掌握這種布局方式還需要更多的學習，積累實踐經驗，最終目標是要能夠靈活掌握CSS語言并能設計制作出符合Web標準的網頁。

參考文獻：

[1]《基于Web技術的CSS網頁布局應用》 吳芳費，計算機光盤軟件與應用，2011.

[2]《CSS層疊樣式表在DHTML中的應用》玲，鞍山師范學院學報，2006

[3]《CSS技術在網頁設計中的應用與優(yōu)化》杜濤，長治學院學報，2007

[4]《CSS技術在網頁設計中的應用探析》張志潔，電腦知識與技術，2007

篇4

關鍵詞：網頁設計；CSS；鏈接樣式

中圖分類號：TP393.092

對于CSS網頁設計而言，它可以使網頁更具備鮮活的生命力，可以更好的吸引瀏覽者的眼球。但對于CSS的設計，在教學過程中大部分學生難以正確的利用CSS對網頁的設計，尤其對CSS的理解不夠深刻，導致在應用上出現種種問題。所以，本文針對網頁設計中CSS的鏈接樣式進行分析，從而讓人們能夠更好地駕馭CSS進行網頁設計。

1 CSS的認識

1.1 CSS的定義

CSS是一種用來對網頁樣式的控制同時將樣式信息和網頁內容分離的一種語言。采用CSS樣式表可以彌補HTML語言的缺陷，可以完成HTML存在的一些缺陷，比如更好地調節(jié)字間距和行間距，取消下劃線和背景圖像等運用CSS能夠達到更好的效果。也可以更好地控制網頁的外觀，大到整個網頁的布局，小到網頁字體的樣式，運用CSS都能夠靈活的進行設計。

1.2 CSS樣式表

CSS樣式表是由一系列的樣式選擇器和CSS屬性所組成的，它能夠針對網頁字體的屬性、顏色和背景屬性、邊框屬性、文本屬性、列表屬性以及網頁元素屬性等進行精確的定位，大大提高了網頁設計中的格式化功能。CSS網絡表針對網頁設計還有另一個優(yōu)點，可以利用同一個樣式表對整個站所具有相同性質的網頁元素進行格式修飾，當需要更改樣式設置時，只要在樣式表中進行修飾即可，不用針對每一個網頁進行修飾，簡化了對網頁格式化的工作，提高了工作效率。

1.3 CSS樣式應用

CSS樣式在網頁設計中應用廣泛，并且對網頁設計起著良好的效果。CSS樣式的作用包括以下幾種：（1）CSS可以從最基本的建設到全面替代web的方法，通過CSS技術將替代HTML表格和font標簽、frames以及更多的元素。（2）采用CSS方法對網頁進行設計，還可以提高網頁的瀏覽速度，比傳統(tǒng)的web設計方法占用的內存小得多。（3）縮短了改版時間。CSS能夠統(tǒng)一管理多個頁面，只要對CSS文件進行簡單的修改，就可以同時改變多個網頁。（4）字體控制和排版能力強。CSS對字體的控制能力要比font的標簽控制強，采用CSS技術后不需要對font標簽機GIF圖片進行逐一控制了，可以輕松解決。（5）編寫簡單。編寫CSS非常輕松，和寫html代碼一樣容易。（6）可以只設計一次，隨意，通過CSS設計完網頁以后，不僅存于瀏覽器中，還可以將你的設計方案發(fā)動其他設備上，比如到PowerPoint中。

2 CSS的鏈接

2.1 CSS的鏈接簡介

在CSS鏈接中，通常會對某些特定效果進行指定特殊鏈接，常見的四種定義鏈接樣式如下：

：link

：visited

：hover

：active

通過以上的樣式進行定義鏈接，超鏈接中錨標簽是定義鏈接中必不可少的，把錨標簽和定義鏈接樣式的特定鏈接進行組合，分別為：

a：link—正常鏈接樣式；

a：visited—已瀏覽過鏈接樣式；

a：hover—鼠標指在連接上的樣式；

a：active—點擊鏈接時的樣式。

CSS鏈接的指定同時還有順序的要求，任何事都是有規(guī)律進行的，鏈接的定義也要有固定的形式，如果在程序書寫時鏈接順序錯了，也會導致鏈接失效等現象。所以在定義好鏈接后，一定要嚴格按照鏈接樣式的定義順序進行書寫，遵循link-visited-hover-active順序進行書寫。

2.2 建立CSS鏈接樣式

單機“CSS樣式”面板中的“新建規(guī)則”，選擇器類型為“高級”，“選擇器”下拉列表中選中a：link以及其他幾種鏈接樣式，進行分別定義。

2.3 調用CSS樣式文件

如果想要把剛剛建立的CSS樣式文件調用到別的網頁中，操作方法是：首先同樣單機“CSS樣式”面板，進入“附加樣式表”，對彈出的“連接外部樣式表”進行設置，在“文件/URL”文本框中輸入建立的CSS文件路徑和文件名稱，添加為鏈接選項，進行建立。

3 CSS的工作方式

通過以下三種方式，對網頁進行CSS樣式表設計

3.1 外部CSS樣式表的鍵入。首先建立外部CSS樣式表，使用HTML的link對象，表示方式如下：

文檔標題

3.2 內部CSS樣式表的鍵入。首先將…模塊插入到HTML中的和之間。表現形式如下：

=“text/css“>

#Top{background：#00FF00；font：10pt“Arial“}

Body，td，input{font：15pt“Arial“；font-weight：bold；color：maroon}

Style1{font：13pt“Arial“；font-weight：bold；color：blue}

Style2{font：10pt“Arial“；color：black}

- ->

3.3 內嵌式工作方式。針對表計對象中使用對象style定義適合的表格屬性。例如：=”font：10pt”Aral”；color：biack”>文字

。

4 CSS語法

通常CSS的語法有三部分組成：標識符、屬性以及屬性值。“標識符”可以表計HTML，例如：p、bady等?！皩傩浴敝傅氖且恍薷牡脑?，例如：color?！皩傩灾怠敝傅氖琴x予屬性的具體值。例如：上面的屬性color，賦予它的值可以為red，#FFFFFF。

5 CSS在應用中常見的問題與解答

了解CSS的功能，可以給網頁設計帶來巨大的好處，但是在具體的設計中，往往會遇到一些問題，下面對這些經常出現的問題進行歸納總結，并進行解析。

5.1 在網頁制作中有三種方式，在什么時候采取哪種方法比較合適？

對于這個問題常常會導致設計者在網頁設計中不敢采用或者錯用等情況，當采用同一個CSS設計方案設計多個網頁的時候，通常采用外部CSS樣式文件，降低了網頁的代碼，修改起來也比較方便；當采用CSS設計單個網頁的時候，通常采用內部樣式，；只有在網頁的某一點使用CSS設計時，一般采用內嵌式進行直接插入。

5.2 CSS在網頁制作中的三種方式可以搭配使用嗎？

CSS具有獨立性，在網頁中可以自由搭配，而不會造成網頁混亂。CSS在執(zhí)行時遵循著優(yōu)先級的順序，從高到低執(zhí)行，先從內嵌式開始運行，然后是內部樣式，最后運行外部樣式。在顯示頁面的處理方式是：優(yōu)先檢測是否有CSS插入，并優(yōu)先執(zhí)行，在通過內部樣式的CSS，并進行直接；都運行完以后或者都檢測沒有，最后檢測外部樣式的CSS，檢測到最后執(zhí)行。因此CSS的執(zhí)行也具有很好的條理性。

5.3 利用a：link a：visited a：hover a：active 設置了鏈接方式，如何將它僅應用在需要的地方，而不是應用在整個網頁的設計中？

可以把鏈接樣式進行分類。例如：

.al a：link，.al a：visited{color：#000000；}

.al a：hover，.al a：actice{color：#00FFFF；}

6 總結

通過對CSS技術的分析，了解其應用，更明確了CSS在網頁設計中的應用。在網頁設計中采用CSS，能夠有效地提高設計質量，簡化設計程序，提高了網頁制作中對多個網頁的統(tǒng)一制作，更好的實現文本顏色和文本圖片的設計，同時也提高了網頁的瀏覽量，使網頁更具鮮活的生命力，使網頁設計不在古板，具有更好的靈活性，能夠充分發(fā)揮設計者的創(chuàng)造力，在網頁設計上充分體現出CSS技術的高超，對當今的科技發(fā)展具有重大的意義。

參考文獻：

[1]艾靈仙.用ASP技術自建英語考試網站實現智能組卷、評分[J].長沙通信職業(yè)技術學院學報，2005（03）.

[2]張俊蘭，劉翼，鐵宏軍.基于CSS技術的網頁設計應用研究[J].延安大學學報（自然科學版），2010（03）.

[3]朱珊虹，石慶民.基于DIV+CSS的個人博客網頁設計應用研究[J].計算機與信息技術，2011（04）.

[4]吳凡，鐘寶江.基于CSS圖拱擬合描述算法的形狀檢索技術[C].第十五屆全國圖象圖形學學術會議論文集，2010.

篇5

關鍵詞：網頁設計；計算機圖像處理技術；處理技巧

中圖分類號：F49文獻標識碼：A文章編號：16723198（2013）22018101

網頁設計是在計算機技術和網絡技術不斷發(fā)展的背景下出現的，網頁設計的最終目的是借助于文字、圖像以及多種媒體形式，將所要表達的內容展現給瀏覽者。隨著社會市場競爭的不斷加劇，商業(yè)性網頁的數量不斷增加，對于網頁設計的質量、形式要求也逐漸提升。網頁設計伴隨著市場需求的不斷增長，也面臨著嚴峻的挑戰(zhàn)，必須要在網頁設計的藝術感和感染力方面做出一定的改革。圖像在網頁設計中具有獨特的作用，能夠很好的實現對客觀事物的展現與描述，設計師的設計理念、設計思路也會體現其中。綜合來說，網頁設計中加入計算機圖像處理技術，是網頁設計提高自身效果、促進技術發(fā)展的需要，也是社會市場需求的必然選擇。

1圖像在網頁設計中的功能

圖像在網頁設計中功能巨大，是吸引瀏覽者注意力的主要因素，也是整個網頁設計風格和設計模式的重要組成部分。圖像在網頁設計中的功能主要可以分為視覺吸引、信息引導兩個方面。

1.1視覺吸引功能

在網頁設計中圖像比其他的文字形式更容易吸引讀者的注意力，能夠幫助網站增加人流量。網頁中圖像的內容、大小、位置、樣式、色彩等因素都會對網頁的整體設計產生一定的影響，直接決定著圖像的視覺吸引效果。據調查顯示，大部分瀏覽者在選擇同類型網站是由于圖像因素吸引的瀏覽量占到總量的60%，也就是說在一些內容相似、功能相近的網站中，大部分人會選擇圖像具有吸引力的網站。

1.2信息引導功能

圖像在網頁設計中有很好的導讀作用，能夠簡單明確的概括出網頁以及網站的主要內容，設計者的設計理念也可以在其中得到體現。圖像與文字相結合能夠使得其信息引導作用更加明確，能夠幫助瀏覽者準確、快速的找到需要的內容，節(jié)省因尋找相關信息而花費的時間。圖像的信息引導功能還表現在，將大段的文字用圖像或者流程圖的形式展現出來，不僅美化了網頁頁面，也為瀏覽者尋找信息提供了便利。

2計算機圖像處理技術

計算機圖像處理技術興起于20世紀末，是在計算機技術不斷進步的推動下出現的一種專業(yè)型的操作技術。簡單來說，計算機圖像處理技術就是利用計算機系統(tǒng)以及內部的軟件，借助于數字化、多媒體、虛擬化的技術，對已有的圖像進行運算、加工、處理，提高圖像的清晰程度，或者可以放大圖像的關鍵部位等，進而實現特定的目的。計算機圖形處理技術最早被應用于航天事業(yè)，將航天器材所拍攝到的圖像轉化為數字化圖像，在模擬的虛擬環(huán)境中分析、理解圖像。隨著計算機技術的發(fā)展，計算機圖像處理技術的應用領域也被逐漸擴展到網頁設計之中。

具體來說，計算機圖像處理技術將攝像設備拍攝的圖像、視頻等資料進行數字化轉換，使之成為計算機能夠識別的代碼，在此基礎上實現對圖像的操作。相對來說，計算機的處理速度迅速，而且存儲空間大，能夠為圖像的存儲與處理提供良好的環(huán)境，也正是這些計算機處理與存儲的特點，使得計算機圖像處理技術被廣泛的應用到各個領域。計算機圖像處理技術的工作核心是將數字化的圖像轉換成為只有紅、綠、藍三種原始色彩來表示的數字圖形，通過對這些數字圖像進行分析、處理，實現對圖像的多樣化操作。近年來，計算機圖像處理技術在實踐中取得了巨大的進步，處理之后的圖像的清晰度大幅度提升，向著高傳輸率、高分辨率、多維成像的方向發(fā)展。

3網頁設計中計算機圖像處理技術的應用實踐

3.1在網頁設計中綜合運用多種圖像形式

圖像形式多種多樣，常見的有攝影、截圖、連接圖片、簡單的圖形樣式，在網頁設計中綜合運用多樣化的圖像形式，能夠極大的豐富網頁設計的畫面感和藝術感染力。具體來說，攝影圖片具有強烈的寫實性和直觀性，能夠將瀏覽者帶入特定的情境之中，一般來說讀者很容易接受這一類型的圖像。將攝影圖片通過計算機處理技術加工之后，將文字與圖片結合在一起，帶給瀏覽者不一樣的視覺盛宴，能夠極大的滿足讀者的審美需要，這也是目前多數主流媒體最主要的網頁設計方案。但是，單一的攝影圖形很容易讓網頁頁面顯得繁瑣，甚至喧賓奪主，影響了網頁中心思想的展示，這就需要設計者綜合運用多樣化的圖形形式，既能夠豐富頁面內容，也可以保障網頁中心觀點的明確。介紹另外

一種在網頁設計中常用的圖形形式-插圖，插圖經常被用在網頁中文字敘述的附近區(qū)域，能夠極大的拓展文字所要傳達的信息。插畫的內容可以是具體的寫實照片，也可以是抽象的藝術照片，這需要根據網頁的實際內容而確定。除此之外，在網頁設計中還可以使用圖形符號等其他的圖形形式，以豐富網頁設計的藝術感，增強視覺沖擊力和藝術感染力。

3.2合理分配圖像在網頁中擔當的角色及其職責

圖像在網頁中擔任的角色不同，自然其位置、大小以及具體的職責也各不相同，也就造成了網頁風格的不同。具體來說，圖像可以在網頁中作為標志、背景、導航、鏈接圖片，或者是直接作為一個網頁的主要展示內容，這些都是在實際的網頁設計實踐活動中經常見到的。舉例來說，圖像在網頁中作為背景出現，這時候就不能單純的將圖片作為主要的展示內容，需要借助于文字或者其他形式資料來豐富網頁。另外，在網頁中可以運用一些小的插圖或者線條圖形來修飾整個背景，將連接標志換成與網頁風格相符的標志，讓整個網頁設計動靜結合，增加趣味感和觀賞性。很多網站將自己的具有一定辨識度的企業(yè)標志放在主頁上展示，一般都是在頁面的開頭部分或者是其他明顯的位置。這樣既可以增加整個網頁頁面的美感，也可以加深瀏覽者對于企業(yè)的印象，無形中創(chuàng)造了巨大的廣告效益。

3.3網頁設計中圖像處理的具體技巧

設計師要想讓自己設計的網頁即美觀協調又簡單實用，就必須要靈活的運用多種計算機圖像處理技術，掌握一定的圖像處理技巧。網頁設計中計算機圖像處理技巧主要涉及到圖像大小、外形、版式、位置等一系列問題。具體來說，圖像的大小需要以實際的頁面布局狀況來確定，簡單而且富有個性的圖像能夠在網頁布局中起到襯托的作用。圖像的外形多種多樣，一般來說，不規(guī)則圖形帶給人動感，方形標志給人穩(wěn)重的感覺，個性化的圖形能夠有效的凸顯網頁頁面的主體，綜合運用這些富有內涵的圖像，能夠更加生動的展現網頁內容。

綜合來說，網頁設計是一項涉及領域相對較廣、操作過程復雜程度較高的工作，需要設計師具有一定的專業(yè)技能與處理各種圖像的綜合性素質。圖像處理技術在實踐過程中展現出了巨大的優(yōu)勢，其應用領域逐漸擴大到網頁設計之中，并且極大的提升了網頁設計的最終效果與質量。在計算技術不斷更新的推動下，圖像處理技術一定會取得更長遠的發(fā)展，網頁設計也會因此更加高效、更加完善。

參考文獻

[1]仇樂.網頁設計中計算機圖像處理技術應用解析[J].煤炭技術，2013，32（3）.

篇6

摘要：在網絡時代的今天，網頁設計的地位更顯重

>> 淺探項目教學法在《網頁設計基礎與應用》課中的應用 淺談“網頁制作”之網頁版面的教學設計 淺談網頁設計之美 多文本閱讀之教學設計淺探 淺談中職網頁設計教學 網頁設計的教學實踐 構成設計教學探議 動漫設計教學淺探 數學“大問題”設計之我探 網頁設計之視覺信息傳達分析 淺述網頁之藝術設計 《背影》教學視野之探 中職計算機任務教學之任務設計探議 淺探當前初中美術教學之創(chuàng)意活動設計 中職網頁設計課程的教學探討 中職網頁制作課程教學設計探討 《網頁框架》教學設計與反思 網頁設計課程教學改革探析 高職《網頁設計》課程的教學探討 “網頁設計與制作”課程教學探索 常見問題解答 當前所在位置：或.html)。

模塊二：編輯網頁元素。網頁元素包括文本、圖像、多媒體、超級鏈接、Logo、導航欄等。要求學生能夠熟練地編輯各種網頁元素。其中，Logo是網站的標志，一般在網頁的左上角，內容一般是網站有代表性的人物、動物、花草或者英文名稱等?？梢怨膭顚W生利用生成器或者Photoshop等設計好自己的網站Logo。超級鏈接是實現網頁跳轉的重要途徑。教師可以通過案例使學生掌握文本鏈接、圖像鏈接、Email鏈接、錨點鏈接、空鏈接、腳本鏈接等各種鏈接形式。

模塊三：設計網頁布局。網頁布局設計到網頁在瀏覽器中所顯示的外觀，決定著網頁設計的成敗。通過表格布局、布局模式布局、框架布局三種手段來定位網頁元素。其中，首頁的布局尤為重要。可以運用各種形狀，如矩形、圓形、菱形等，“同”字形、“匡”字形、“三”字形、“川”字形等，或者是運用曲線組成的柔美的或不規(guī)則的圖形。然后將頁面元素放入其中，確定它們的位置，同時要考慮整個頁面的平衡、疏密等因素，編排出令人舒適的效果。最后確定頁面尺寸和頁面元素的尺寸。

模塊四：優(yōu)化網頁樣式。主要是通過Html標簽對和CSS規(guī)則來優(yōu)化整個頁面的樣式，使整個網站的風格較統(tǒng)一，并且有特色。其中，CSS層疊樣式表類似于Word中的樣式，它將網頁的排版從網頁文檔的制作中獨立出來。利用它可以批量地修改成百上千個網頁的外觀樣式，大大提高了工作效率。

模塊五：制作網頁特效。利用層來實現對頁面元素的精確定位；利用行為來動態(tài)響應用戶的操作或者觸發(fā)任務；利用JavaScript語言實現動態(tài)的、實時的、交互的動態(tài)效果。其中，行為一方面是指Dreamweaver8.0提供的預定義行為。實現鼠標經過圖像、彈出信息、拖動層、顯示彈出式菜單等動態(tài)效果。另一方面是指結合時間軸，創(chuàng)建自定義的動態(tài)效果。教師可以適當增加案例的數量，租金學生的學習興趣。關于JavaScript未做重點講解，只給學生提供―些特效代碼、插件、代碼下載網站，并演示如何使用現成的特效代碼。

模塊六：管理網站資源。通過資源面板批量的修改重復的網頁元素，從而高效的管理網頁中的各種資源。通過庫管理和更新多次重復使用的網頁元素。利用模板保存較好的文檔格式，作為中間件，需要時可以套用。

模塊七：其他相關知識的補充。主要是ASP語言、數據庫知識和Flash。要求能夠制作簡單的動態(tài)網頁。另外，Flash是一種簡單直觀、功能強大的動畫設計工具。在教學過程中，教師可以鼓勵學生通過案例的學習，自己動手制作網站片頭、主題文字的動態(tài)效果、背景、網頁切換等效果，增強網站的吸引力。

以上的七個模塊，就是對“網頁設計”課程全部教學內容的一個整合。然而，在每個模塊的教學過程中，針對課堂上沒有解決的問題，可以通過網絡教學法，在課后進行有益的交流和補充。并且，每個模塊學習結束后，都給學生時間將所掌握的技術應用在各自的項目方案中。

總之，“網頁設計”課程是一門實踐性操作性很強的課程，無論怎樣安排教學內容，無論使用怎樣的教學方法，都是要以學生為中心，提高學生的網頁設計能力。

2.3評價階段

當完成教學階段的全部工作后，在學期末最后一周，由教師對學生的學習效果進行考查。每一位學生都上講臺介紹自己的網站主題、內容、所用技術等，然后，由老師當場從創(chuàng)意、審美、內容、技術、工作量五個角度進行點評。最終依據學生平時的上機以及作業(yè)情況(30%)加上最終提交的網頁設計作品(70%)給出學生本學期的考核成績。成績分為優(yōu)秀、良好、中等、及格和不及格五個檔次。推薦優(yōu)秀作品的設計者參加網頁設計大賽、假期到公司實習或者考認證。

這種評價方式是以能力為中心的全程化、開放式、全面的考核方式，能夠綜合考查學生平時參與課程的情況、每階段學習的狀況和最重的網頁設計效果，使學生的素質和綜合能力得到提高。

3結束語

筆者根據多年來在“網頁設計”課程中的教學經驗，本著以學生為中心的原則，對傳統(tǒng)的教學模式進行改革，提出了創(chuàng)新的教學思路和實踐總結。筆者在“網頁設計”課程的教學過程中精心設計了科學的教學方案；采用了適合的多樣的教學方法；較合理地整合了網頁設計的教學內容；采用了全程化的評價方式。實踐證明取得了較好的教學效果。但是仍需要加強教學環(huán)節(jié)的組織，更加充分的利用網上的教學資源，豐富課堂教學內容，將“網頁設計”之教學推向更高的層次。

參考文獻

[1] 胡亞卓. 淺談網頁設計[J]. 科教文匯,2008,(02):180.

[2] 林菡,張軍. 優(yōu)良的網頁設計應該注意的幾個要素[J]. 北京教育學院學報(自然科學版),2007,(8):12-15.

[3] 顏謙和,顏珍平. “網頁設計與制作”課程運用案例教學法初探[J]. 計算機教育,2007,(9):65-66.

[4] 吳建梅,周瑩. “任務驅動”教學法在高職“網頁設計”課程中的應用[J]. 科技廣場,2007,(08):210-211.

[5] 余平. 項目驅動在網頁設計實踐教學中的應用[J]. 實驗室科學,2007,(5):94-95.

[6] 李若蘭. “網頁設計”課程之分層教學實踐[J]. 大眾科技,2007,(7):33.

[7] 韓慧. 關于“網頁設計”課教學改革的思考[J]. 山西財政稅務?？茖W校學報,2007,(10):79-80.

Teaching Exploration of Web Design

JIANG Hai-yan, DU Lin, LI Shu-jin, ZHAO Ke

(Department of Computer, Shandong Education Institute, Shandong Jinan 250013 , China)

篇7

關鍵詞：網頁設計；心智技能；活動原型構建

中圖分類號：TP393 文獻標識碼：A 文章編號：16727800（2013）009014303

作者簡介：秦書榮（1987-），女，碩士，廣東農工商職業(yè)技術學院藝術系實驗員，研究方向為網站建設、二維及三維動畫設計、影音編輯；李冬睿（1983-），男，碩士，廣東農工商職業(yè)技術學院計算機系講師，研究方向為圖形圖像處理、模式識別、嵌入式控制；梁仲佳（1992-），男，廣東農工商職業(yè)技術學院藝術系學生，研究方向為圖形圖像處理、網頁設計與制作、影視編輯。

0引言

《網頁設計》是高職高專院校計算機科學技術應用類專業(yè)普遍開設的一門基礎技能課程。該課程的核心目標在于培養(yǎng)學生的靜態(tài)網頁設計技能。然而，教學實踐中，不少教育者發(fā)現該課程的教學效果并不理想，很多學生通過學習仍不能按照客戶要求的功能效果和視覺效果獨立進行網站規(guī)劃和頁面設計。究其原因，在于學生軟件操作不嫻熟，但更重要的是學生尚未掌握真正適用于工作實踐的網頁設計心智技能。為此，以職業(yè)實踐所需要的心智技能為核心，探索培養(yǎng)學生網頁設計心智技能的有效依據顯得尤為必要。而構建活動原型作為心智技能培養(yǎng)的首要步驟，也必將引起高度重視。

1網頁設計心智技能與原型

1.1網頁設計心智技能

網頁設計心智技能是設計領域的專有名詞，暫未從查閱的資料中尋找到對它的直接解釋。所以“網頁設計心智技能”這一概念可以依據“網頁設計”及“心智技能”的定義進行理解。

網頁設計是對文字、圖形、圖像、表單、動畫、音頻、視頻、超鏈接等網頁元素進行色彩、版式等表現效果方面的設計，整合形成具備客戶功能要求的頁面與網站，以達到在互聯網上進行人性化的、高效的信息傳達。它的過程可描述為運用網頁構思和設計知識進行網站總體效果的創(chuàng)意構思，對圖像、文字、超鏈接等組成元素的表現形式進行設計繼而完成主要頁面的整體設計，然后借助“Photoshop”及“網頁三劍客”等軟件，根據前期的效果設計選擇和應用相關工具制作網頁各部分，并將其整合成完整而有實用價值的網站。認知心理學領域是技能培養(yǎng)的主要領域，本文借鑒該領域國內普遍認同的“心智技能”定義，即將其視為一種調節(jié)和控制心智活動的經驗，是通過學習而形成的合乎法則的心智活動方式[1]。

綜合上述有關定義，網頁設計心智技能可理解為：在網頁設計活動中通過有目的、有計劃的學習或練習而形成的，普遍用以調節(jié)和控制網頁構思、設計、制作等一系列符合網頁設計規(guī)則的心智活動方式。

1.2原型

網頁設計操作技能定向的對象是“Photoshop”及“網頁三劍客”四款軟件中各工具和命令固有的操作序列或步驟。這些操作序列或步驟是固有的，不需要重新創(chuàng)建。而網頁設計心智技能定向的對象是網頁設計活動的原型?！霸停≒rototype）”，也叫“原樣”，沿用J·R·安德森的觀點，把“原型”視為外化的實踐模式，或“物質化”了的操作活動程序[2]?！熬W頁設計活動的原型”理解為，符合網站任務主題的解讀與分析、網站的構思設計、元素的設計制作及整合等一系列規(guī)則的外化的網站設計活動的完整實踐流程。

2網頁設計活動原型創(chuàng)建

構建網頁設計活動原型一般采用心理模擬法，它包含3個步驟：①網頁設計活動的功能分析；②網頁設計活動的結構分析；③功能分析與結構分析的有機結合。其中，功能分析的重點是作用的對象、條件與結果；結構分析的重點在于組成要素及要素之間的關系[3]。

網頁設計活動的目標是能夠高效地完成符合客戶需求的靜態(tài)網站，這需要具備網頁設計的基礎知識及基本操作技能。網頁設計活動包含了“網站方案的設計”、“主要頁面效果的設計與制作”、“html+CSS技術完成網頁的基本制作”、“網頁動畫效果的設計與制作”4個典型的子活動。這些典型要素之間的關系可以描述為：要想高效地完成某項網站建設任務，首先需要設計網站總體方案，即在用戶群體需求分析及網站主題解讀的基礎上，進行色彩分析及定位，確定UI版面布局，分析設計網站功能模塊，確定網站風格等，最終形成包含“前言”、“需求分析”、“系統(tǒng)分析”、“風格設計”、“UI版面初步布局”、“色彩定位”、“網站建設日程規(guī)劃”等部分的網站總體方案文檔；然后，根據前期方案中對“色彩”、“風格”及“UI版面布局”等的分析，依據頁面設計原則，利用Photoshop繪制網站主要頁面的整體造型，利用Firework制作切片；接著，借助Dreamwear軟件，利用“Html+Css”技術完成包括“頁頭”、“導航”、“內容”、“頁腳”等部分的頁面制作，生成網頁文件和樣式表文件；最后，根據方案，利用Flash軟件設計制作網頁動畫并添加到網頁中，形成完整網站，如圖1所示。該過程中任何環(huán)節(jié)如果出現問題都應該返回上一個步驟進行重新修改。

3網頁設計典型子活動解析

結合上述對網頁設計活動的功能與結構分析，發(fā)現網頁設計活動原型中的4個典型子活動中又分別包含很多復雜程度不一的子步驟，需要進一步解析。

3.1網站方案設計

網站方案的設計對象是完整網站作品在人腦中的主觀印象，它主要包含以下4個操作步驟。通過這4個步驟，可以完成網站方案中“前言”、“需求分析”、“系統(tǒng)分析”、“風格設計”、“UI版面初步布局”、“色彩定位”、“網站建設日程規(guī)劃”等部分的撰寫。

（1）色彩定位。網站設計人員接到任務后，要對市場前景、用戶人群，網站主題進行分析，確定色彩組合。這個過程中往往需要考慮以下幾個問題：①哪些色彩能夠表達用戶人群的特征？②哪些色彩能夠反映網站主題？③網站是否具有季節(jié)性？④公司或機構是否有官方色彩？Logo的顏色是什么？⑤客戶提供的圖片色彩如何？網站設計者往往結合上述5個問題的答案，確定網站的主色，再依據色彩搭配的原則展開頭腦風暴式的色彩組合，確定和諧的三色組、分裂互補三色組、互補色、類似色、暗色及亮色，最終完成網站的色彩定位。

（2）UI版面布局設計。網頁常見的布局結構有“國”字形布局、“匡”字形布局、“三”字形布局、“川”字形布局、標題文本型布局及框架型布局等[4]。這些布局各具特色，適用于不同主題內容的網站。網站設計者要根據網頁信息量，結合不同布局的特點，選擇最符合客戶需求的布局方式，并利用Photoshop軟件完成網站的布局創(chuàng)意。

（3）網站功能模塊分析與設計。結合客戶的要求及公司或機構的性質，網站設計者需要對網站的功能模塊進行規(guī)劃設計，繪制出網站層次結構圖，描述各功能模塊及作用。該過程既需要設計者具有良好的系統(tǒng)性，又需要其能夠合理地將網站要傳達的信息進行分類。

（4）風格設計。網站設計者常常利用“重復—替換—調整—統(tǒng)一”的原則統(tǒng)一首頁與其它子頁的風格，即當主頁設計完成后，設計者選擇主頁中易引起人興趣的“圖像”、“圖標”、“字體”、“顏色”、“版式”等元素，在子頁面中將這些元素進行“位置”、“大小”、“色彩”等方面的變化，再添加一些新的元素形成子頁的完整設計?？傊?，子頁的設計要力求與主頁保持某種明朗的聯系。

3.2主要頁面效果設計與制作

主要頁面效果設計與制作可以理解為網站方案的物化，該環(huán)節(jié)需要進行諸如想象、比較、判斷與選擇的心理步驟，同時還要求設計者具備扎實的美術基礎、色彩設計基礎及版式設計基礎等。

（1）確定頁面尺寸。一般來講，目前大多數顯示器為1 024px*768px，那么以此為默認顯示器時，頁面的尺寸一般設置為“1 007px*600px”。

（2）頁面整體布局。在前期“UI版面布局”、“色彩與風格定位”的基礎上，對主要頁面進行整體造型，即頁面中圖形與文本層疊有序的結合。設計者們首先應該能夠合理運用以下7項普遍認同的網頁設計原則，即：①利用空白將彼此相關的項目歸為一組，避免出現多個孤立視覺元素；②頁面上任何一個元素應當與另一些元素存在某種對齊關系；③如果不同就讓其截然不同，用對比來吸引瀏覽者；④選取頁面中能引起人興趣的“顏色”、“字體”、“圖片”、“符號”等作為重復的要素，使頁面內部及頁面之間風格統(tǒng)一；⑤頁面避免不必要的滾動；⑥避免使用閃爍文字；⑦時刻站在瀏覽者的角度展開頁面設計。在上述原則的指引下，分別對頁面整體及局部（包括頁頭、文本、頁腳）進行“借鑒—創(chuàng)新”設計，具體過程可描述為在明確了頁面色彩、風格、布局的基礎上，搜索、觀察和體驗色彩、主題、布局上相似或相同的已有“優(yōu)秀網頁設計”，利用“通感”去反思這些優(yōu)秀設計，直到領悟原有優(yōu)秀設計的思想精華而非表象，借鑒原有設計的表現手法，使用新的手法在Photoshop 中創(chuàng)造出嶄新的獨特頁面。

（3）利用Firework制作網頁切片。網頁設計者秉承“先橫著切，后縱著切，保證后期預使用的切片完整無缺”的原則，在Firework中進行切片和優(yōu)化。該過程比較簡單，此處不做贅述。

3.3基于html+CSS技術的網頁基本制作

頁面制作是設計者利用制作技能，將前期構思和設計的頁面在Dreamwear中轉化成真實的效果。筆者強調運用Html+CSS技術完成網頁的制作，是由于該技術具備以下優(yōu)勢：①表現和內容相分離；②頁面瀏覽速度快；③易于維護和改版，符合Web2.0標準[5]。這一環(huán)節(jié)，設計者一方面需要以html+CSS的操作技能為基礎，另一方面需要技巧、經驗等心智技能成分的支持。它是根據頁面制作的實際需要將單一的操作技能進行有機整合和應用的過程。該過程可描述為：①創(chuàng)建站點，設置參數；②運用“DIV+CSS”技術在Dreamwear中對已經設計好的頁面進行重建，在相應的位置借助CSS將所需切片以“背景”的形式插入當頁面中；③利用“Html元素+CSS”，依照設計的頁面，完成“導航”、“鏈接”、“段落”、“列表”等方面的制作。

3.4網頁動畫效果設計與制作

為了吸引客戶眼球，防止瀏覽者視覺疲勞，根據方案，網頁設計者往往會在網頁中添加動畫效果，來修飾網頁使網站整體更加美觀。這個過程需要借助Flash軟件，制作出需要的動畫，然后利用“Html+CSS”技術將動畫插入到需要的位置。網站中要添加的小動畫不宜太多或太復雜，避免喧賓奪主。

4結語

網頁設計心智技能的培養(yǎng)不是一蹴而就的，它的形成需要經過原型定向—原型操作—原型內化三個階段[6]。不難發(fā)現，心智技能培養(yǎng)的關鍵在于“原型”，也即網頁設計活動原型的創(chuàng)建是網頁設計心智技能培養(yǎng)的焦點，在教學實踐中有著舉足輕重的作用。教育實踐者應當依據網頁設計活動原型展開教學和指導。雖然，創(chuàng)建原型僅是網頁設計心智技能培養(yǎng)的初級階段，但筆者相信，網頁設計活動原型的創(chuàng)建勢必會引起該領域教育研究者的關注，而探索如何將原型引入教學實踐則是后續(xù)研究的重點。

參考文獻：

[1]皮連生.教育心理學[M].上海：上海教育出版社，2004.

[2]JR安德森.認知心理學[M].長春：吉林教育出版社，1980.

[3]馮忠良.結構化與定向化教學心理學原理[M].北京：北京師范大學出版社，1998.

[4]吳豐，丁欣.Dreamweaver CS5網頁設計與制作[M].北京：清華大學出版社，2012.

篇8

在進行網頁設計時，一定要挑選適合的字體，這樣才能準確傳遞網頁所的信息內容，字體不同，它所具有的內涵和風格也不同，所以挑選適合的字體，是網頁設計成功與否邁出的第一步，那么何為適合的字體，是指大小適宜，并且能準確傳遞網頁設計風格和讓人看了具有親和力的字體。但是，單單選擇適合的字體，就可以設計出好的網頁是遠遠不夠的，文字的版式編排也是網頁設計中的重要部分。網頁設計中正文的部分，文字很多，都是由單個字體編排組成的，需要設計者精心來進行設計編排，文字在編排上應與網頁設計的整體風格保持一致。設計編排中會形成點、線、面的構成關系，使得頁面層次豐富，產生視覺美感，再運用形式美法則，會讓畫面更加生動活潑。

文字在頁面中的編排可以應用以下四種基本形式，第一種兩端對齊，是指文字排列時長度要均齊，最終形成一個方方正正的面，看起來端莊、大方、整齊。第二種是居中排列，是將文字集中排列在頁面中心軸線上，還要注意的的是字間距應該相等，這樣的編排使內容突出，具有自己的個性，也產生了兩端對稱的形式美感。第三種是以左對齊或者是以右對齊，由于人們的閱讀習慣，以左對齊居多，以右對齊很少應用，偶爾也會應用一下，會產生比較有創(chuàng)新的感覺。左對齊是指句首或句尾自然而然地形成一條垂直線，這樣的編排與圖片結合很恰當，行間距之間可以有松有緊，虛實相間，可以讓人有種節(jié)奏美感。第四種是圍繞圖片排列，是指把文字與圖片相結合，圍繞著圖片的邊緣排列，這種排列讓人覺得融洽、舒適，也會讓畫面呈現和諧統(tǒng)一。

在這四種編排中，最常用的是以左對齊和兩端對齊，這和我們日?？吹降膱罂s志排版相同，很符合人們的閱讀習慣，讓人們看著舒服并且親切。而居中排列、以右對齊和圍繞圖片排列不常用，它有悖于人們的閱讀習慣，人們的閱讀習慣是從左到右，而這三種排列方式是每行的第一個字不在一條垂直線上，看著看著容易讓人眼花，看錯行，無意中增加了人們的閱讀難度。但是也不是完全不能采用，可以運用到那些具有超前意識，時尚的網頁設計中去，讓頁面看起來新穎，有創(chuàng)意。

二、網頁設計中文字的強調

加強對文字的強調，這種用法可以突出重點，也可以讓文字所形成的畫面有種強烈的視覺沖擊力。很快抓住瀏覽者的眼球，增強可讀性。那么怎樣使畫面更具有強烈的視覺沖擊力呢？這里介紹三種方式，第一個方式是對句首的強調，將正文句子的第一個字符放大，所形成的樣式。第二種方式是對引文加以強調，何為引文，也稱之為眉頭，它是除文章標題以外最能提綱挈領的文字，在進行網頁文字設計上，應加以特殊處理來強調，將引文的字號作了相異的處理，具有很強的視覺沖擊力。第三種方式是對個別需要突出的文字加以強調，可以對需要突出的文字進行加粗、加下劃線、加黑色底框、加一些帶有指示性作用的符號、把字體傾斜等處理方法，讓文字充滿強烈的視覺沖擊力，突出其在畫面中的截然不同。

對網頁設計中的文字加以用色，可以讓畫面看起來更加豐富，引起瀏覽者的注目性。但也不能任意用色，應該適量適中，否則會破壞網頁或網站的整體性。還有，在一個網頁頁面上運用顏色過多，會使得畫面顯得零亂，也會影響瀏覽者接受信息的視線，同一頁面中文字的色彩最好不要多于兩種，除非有特殊的設計目的。在文字色彩上把握兩點：一點是要讓瀏覽者有可讀性，還有一點是便于情感的傳達。文字是網頁承載信息的主要載體，所以在顏色的選擇上一定要把握好，必須易于瀏覽者識別和閱讀，不能是為了設計而設計，那樣就失去了顏色的意義。每一種顏色都有著自己的情感，當然不同顏色的字體也會具有不同的情感象征內涵，色彩是網頁文字設計的一個重要環(huán)節(jié)，它可以抓住瀏覽者的眼球，并且讓文字顯得更加突出、醒目。尤其針對那些有特別功能、特別作用的文字，無論對它的識別或者視覺效果，都能有所提升，是烘托網頁氛圍、營造優(yōu)美環(huán)境、提高網頁點擊率的最佳途徑。標題性文字、鏈接作用的文字、按鈕上的文字在色彩上可以用不同的色彩來加以強調，讓其功能性更加突出。對于具有功能性質的網站，頁面的背景色彩和內容文字色彩在明度對比上不要過于強烈，根據視覺心理在色彩上的研究，瀏覽者如果長時間瀏覽對比比較強烈的網頁頁面，視覺疲勞感很快就產生，從而產生郁悶、煩躁的情緒，最終受影響的還是網站本身，會使得人們減少對該網站的瀏覽。文字的色彩應該與網站本身的功能和所發(fā)表內容相結合來考慮。

三、網頁中的文字設計

網頁設計中所顯示的文字都是應用于計算機系統(tǒng)里的字體，這樣就有了局限性，在設計網頁時對文字設計不能不加思索地隨心所欲地應用自己電腦字庫里的文字進行設計，應該考慮當網頁上傳到服務器，所顯示在客戶端電腦瀏覽器中有哪些常見字體，應該應用這些常見字體，否則，你所設計的字體效果瀏覽者也是無法看到了。要想讓用戶看到自己所設計的字體，有三種可行方案，第一種是直接利用計算機中系統(tǒng)文字；第二種是為用戶提供字體下載；第三種是將文字進行圖形化設計。三種方案都存在著局限性，第一種讓整個網頁設計被限制住了；第二種占用網站上的內存，還需要花費瀏覽者不少的時間來進行下載，這種情況，大多數瀏覽者會選擇跳過此頁；第三種圖形化文字，前面已經提到過，只講了優(yōu)點，但是缺點也不能忽視，瀏覽者是檢索不到的，這樣使得信息流通不便利，圖形化的文字也會占用大量的加載時間，甚至導致網速變慢，最后還是無法看到此圖片。

四、結束語

篇9

關鍵詞：網頁設計；視覺信息；傳達；淺析

在現實生活中，信息以及信息的傳播在人們的生活中發(fā)揮越來越重要的作用。特別是到了最近幾年，網絡已經逐步成為人們獲取各項重要信息的平臺。當然，人們對網頁中的視覺審美要求也在越來越高，所以，在新的形勢下對網頁設計中的視覺信息傳達研究具有重要意義。

1 網頁設計的審美需求

網頁設計作為將設計和網絡相結合的新型學科，隨著信息技術的發(fā)展，逐漸得到了更多人的重視。在起初網頁設計是將網絡作為載體，將各種信息以最快的速度傳給觀眾，在這種前提下，逐步衍生出了對網頁設計的審美需求。在網頁設計中，不只是單純的將各種東西放在一起，只要能湊合看就可以了，這完全不能滿足用戶的審美要求，所以設計網頁應該將如何讓觀眾更好的接受網頁的信息作為重點。要做好這方面，就需要相關工作者站在審美的角度上，讓網頁的具有整體性和清晰感。網頁設計的審美需求主要表現在以下幾個方面：一是網頁設計的內容和表現的形式應該是有序和統(tǒng)一的，形式表現要根據網頁的內容要求，網頁上的各種元素之間存在一定的視覺流程，能夠自然有序的表達出重點信息。當設計者將大量的信息添加到網頁上的時候，應該慎重的考慮該以何種方式進行排布，讓整個網頁看起來具有整體性的同時又不是一層不變，將網頁的脈絡清楚的展現出來；二是在網頁設計中要突出主體要素，必須在組成網頁的各種因素中突出主體的位置，讓它盡可能成為人們在閱讀時視線流動的起點，如果脫離這個主體要素，觀眾則無法找到瀏覽的落腳點，所以說在網頁設計中的各個構成要素在組合的時候，應該注意這些元素的分量、虛實等對比因素，加強觀眾的視覺力度，產生對網頁的興趣。

2 網頁設計中的構成要素

2.1 文字的編排

在網頁設計中，其中文字的編排作為必不可少的基本構成元素，對這些文字的要求是易讀性和可讀性。其中易讀性顧名思義就是文字的清晰表達，可讀性則是指的是網頁整體上的可視性，在文字的設計、詞語的間距、行距等方面的處理。易讀性和可讀性在網頁設計中對于文字的編排的作用是非常重要的。另外，和利用紙張閱讀的方式相比，網頁設計中的文字的易讀性相對較差，再加上一般的用戶在普通的頁面上花的時間比較短，所以對于網頁設計中的文字編排應該滿足以下幾個要求：一是，因為在不同的電腦、操作系統(tǒng)中安裝的文字的字體都是相同的，所以應該在文字編排的過程中選擇一些經常使用，用戶經常見到的字體，不然的話他們的系統(tǒng)就可能默認一種字體，就會導致網頁看起來不能達到設計者的期望。二是，鑒于屏幕的顯示會對字體造成一定的影響，在生活中人們大多都是采用的黑體和宋體，站在視角的角度上說，宋體的閱讀方式最便捷，更富有現代氣息，但是對于字體的形狀應該注意。三是，因為不同的字體以及不同的字體屬性可以幫助人們識別標題和信息。但是應該注意的是一個頁面中字體風格是有限制的，如果使用太多面，就失去了強調的作用。

2.2 圖片的編排

在網頁設計中，圖片可以算得上是最早被使用的元素。這是因為網絡可以利用圖片傳達自己的信息，讓用戶更直接的了解，加大了網絡提供的信息量，再加上圖片的使用在很大的程度上也使頁面更美化。因此，在網頁設計中，要想單純文字表達的信息變得有趣，最簡單的方法就是使用圖片。經調查顯示：對于一條信息來講，圖片對觀眾造成的吸引往往要高于文字產生的影響。在網頁中使用圖片時，應該注意以下規(guī)則：一是網頁的統(tǒng)一性；二是圖片要吸引用戶；三是要注意突出圖片的重點，特別是在處理和相關文字編排的時候。

3 網頁設計與現在網絡新技術的結合

3.1 網頁設計和多媒體技術的結合

多媒體的使用能讓人機交互技術趨向接近人的自然方向發(fā)展，能夠讓網頁用自然的方式跟人交往。多媒體的產生實現了信息的多樣化，讓人與網頁在交互的過程中，具有更寬闊和自由的發(fā)展空間。對于多媒體技術的信息多維化不僅指信息的輸入，還包括信息的輸出。從目前的形式來看，多維化包括人的視覺和聽覺這兩個方面，因為多媒體的使用，讓頁面設計表達的信息更具有人性化。為了增強網頁的視覺效果，在網頁設計中通過豐富的表現形式，能夠讓觀眾產生視覺效果，從而產生了繼續(xù)觀看的念頭。在網頁設計中，網頁包含的內容是各個方面的。幾乎容納了所有的媒體的優(yōu)點，現在已經成為了一種炙手可熱的傳播手段。

3.2 網頁設計和多媒體相結合主要是增強了網頁的交互性

一個優(yōu)秀或者是成功的網站都應該和用戶之間形成良好的互動關系，互動關系主要包括在整個頁面的設計過程中以及使用界面上的指導體現出來，并且都應該堅持互動的原則，讓用戶在使用的過程中的每一個不走都能夠得到相應的會用。在現在，交互性不僅是一種利用網絡傳播發(fā)揮信息的最大優(yōu)勢，而且是傳達信息的人和用戶進行交流的一種方式，在網頁設計中，有效的互動性能夠提高用戶使用接受信息的主動性以及參與信息反饋的積極性，與此同時，還有助于傳達信息的人了解信息傳達取得的實際效果以及和預期之間存在的偏差，以便在下一步的網頁設計中進行適當的改正，實現消息的升格傳達。隨著我國的動態(tài)設計技術，例如ASP以及PHP等的不斷發(fā)展和普及，交互式設計的重要性也逐漸顯現出來，采用交互式設計的目的不是為了控制用戶采用怎樣的行動，而是給他們的各種行動創(chuàng)造實現的基礎。在多媒體以及網頁技術中，設計人員采用的絕大部分的交互方式都是人們熟悉的模擬系統(tǒng)，例如，人們熟悉的撥號盤、按鈕、開關以及滾動條等。所以設計師在創(chuàng)建人機交互方式時，瀏覽者所接觸到的交互式界面，通常都采用這些方式，例如聊天室的界面，完全可以設計成房屋的場景，以給用戶營造一種親切的感覺。適當的對網頁中的各種設計元素，例如flash、js等動態(tài)效果，就會增強網頁的視覺審美，更具藝術欣賞性和互動性，對瀏覽者具有充分調動的作用，產生的效果也比傳統(tǒng)的媒體要好。

4 總結

在我國不斷發(fā)展的進程中，網頁可以說是一種全新的視覺表現形式，不僅包含了平面設計的各種理念，還具有跟其他文化不同的優(yōu)點。如果要做好網頁設計，絕對不是一件容易的事情，這是因為網頁設計涉及了視覺設計美學、人類心理學、人機工程等多個領域。一個好的網頁設計不僅需要設計者精心組織內容，更需要其對整體視覺的傳達進行科學的規(guī)劃。在信息技術飛速發(fā)展的今天，網頁設計的價值不應該只局限于提高信息的傳達效率，還應該重視給用戶帶來視覺的審美享受。

參考文獻：

[1] 謝依君.電子報的新聞介面分析[D].臺北：臺灣國立政治大學新聞學系，1999.

[2] 徐珂，苗彤，趙暉.網頁視覺與設計[M].北京：人民郵電出版社，2001.

篇10

《網頁設計》是面向計算機及其相關專業(yè)開設的一門課程，是一門計算機軟件應用類課程?！毒W頁設計》課程要實現的教學目標包括：①網站的基本知識，例如網站的發(fā)展和分類知識、網站開發(fā)所需的技術、HTML語言和CSS的結構和語法等；②掌握網站的開發(fā)流程，例如建站規(guī)劃、效果圖制作、建立站點等相關知識；③掌握各種網頁元素在Dreamweaver中的使用，例如表格、文本、圖像、超級鏈接和表單等；④熟悉一些網頁設計輔助軟件的功能和使用方法，例如Photoshop；⑤能夠解決一些網頁設計中的常見問題。本課程旨在培養(yǎng)學生的計算機應用能力，使學生掌握網頁設計方法、網頁設計語言及相關設計工具和美化工具的使用，從而滿足和適應信息化社會對物流管理專業(yè)學生綜合素質的要求。

二、教學內容與教學條件

1.理論教學內容

（1）課程內容設計課程內容設計在教學大綱的指導下完成，在教學過程中適時引入新的教學案例和教學方法，這些教學內容能夠豐富學生的網絡知識，提高學生的網頁設計能力和計算機應用能力，為將來使用和開發(fā)與專業(yè)相關的軟件奠定基礎。

（2）教學內容安排課程授課采用講練結合的方式進行。在教學過程中，不再把書本上的現成知識傳授給學生作為教學目標。通過理論講授、案例演示和分析，讓學生在真實的情境中學到相關知識，這樣學生就知道如何把相關知識點應用于實際。課程采用的教學案例和學生練習的內容都出自實際應用，從而大大增強教學效果。鼓勵學生將課內學到的內容應用到課外實際應用中，并將學生課外創(chuàng)作的自選作品作為成績考核的重要依據。

2.實踐教學內容

（1）實踐教學內容實踐教學內容與理論教學內容保持高度一致，講授什么知識點，學生就上機練習什么知識點，分析什么教學案例，學生就制作什么教學案例，通過實際項目的分解讓學生更好地掌握《網頁設計》的應用，大大提高學生的綜合素質。同時，不斷豐富實踐教學內容，采用最新教學案例，取得較好的教學效果。

（2）實踐教學條件計算機實驗室能夠保證學生《網頁設計》課程上機時，1人1機，全部上機在Windows7網絡環(huán)境實現，利用電子教室軟件實現課程電子資料實時發(fā)送，課堂電子作業(yè)實時提交，實現整個實驗教學過程的無紙化。

三、教學方法與教學手段

1.教學方法

教學方法采用講授法與案例教學法。對于《網頁設計》相關的概念及基礎知識，采用傳統(tǒng)的課堂講授的教學方法完成，讓學生理解并接受。對于《網頁設計》課程中的一些應用性和實踐性比較強的知識點，采用案例教學法，通過案例演示和分析，學生知道完成教學案例的途徑和相關知識點。通過布置任務，讓學生查找并應用知識點，以學生為主、教師為輔，激發(fā)學生學習興趣，提高學生應用能力。

2.教學手段

《網頁設計》課程教學采用“電化教學”手段，引入“電子教室軟件”輔助教學。教師通過教學課件和教學案例演示教學內容，教師微機屏幕上的內容能夠實時發(fā)送到每個學生的微機屏幕上，這樣學生就可以通過自己的屏幕實時看到教師的教學內容。通過“電子教室軟件”，教師機的教學資料可以很快發(fā)送到學生機上，學生完成的電子作業(yè)和自創(chuàng)作品可以快速提交給教師。通過“電子教室軟件”，教師能夠很好地和學生完成提問和回答等教學互動，監(jiān)控學生的操作屏幕，及時了解學生的狀態(tài)并相應給出教學指導?！半娮咏淌臆浖本哂须娮狱c名功能，只需要幾秒鐘就可以完成整個班級的學生點名工作。

四、課程考核與試卷分析

1．課程考核

改革“一張卷子”評定成績的課程評價模式，應用以單元測試、評價作品和上機實操考試為基礎的綜合考核方式，更注重學生平時的電子作業(yè)、教學實例和自選創(chuàng)新作品的完成情況，通過綜合評價，變考書本為考能力，邊學習邊考核，加重平時成績在總成績中的比例，這樣能夠全面評價學生的網頁設計能力。

2．試卷分析

考試命題完成是在課程教學大綱的框架下完成的，全體學生《網頁設計》考試采用理論+實操的形式，試題覆蓋教學的全部內容。從考試結果分析，試卷注重基礎知識的考查，難度偏易，區(qū)分度較好。從學生考試時間分析，90分鐘內學生全部能完成考試，以下是試卷分析結果。

五、結語