第一篇：淺談網(wǎng)頁(yè)設(shè)計(jì)教學(xué)中網(wǎng)站版面的編排與設(shè)計(jì)

淺談網(wǎng)頁(yè)設(shè)計(jì)教學(xué)中網(wǎng)站版面的編排與設(shè)計(jì)

摘 要：網(wǎng)頁(yè)設(shè)計(jì)可看做是平面設(shè)計(jì)的一個(gè)延伸，是將平面設(shè)計(jì)與信息化技術(shù)相結(jié)合的一門(mén)設(shè)計(jì)藝術(shù)。本文從網(wǎng)頁(yè)設(shè)計(jì)中的審美需求和視覺(jué)流程入手，著重探討網(wǎng)站版面的編排與設(shè)計(jì)，旨在為網(wǎng)頁(yè)設(shè)計(jì)教學(xué)者和未來(lái)的設(shè)計(jì)師們提供參考。

關(guān)鍵詞：網(wǎng)頁(yè)設(shè)計(jì)；設(shè)計(jì)藝術(shù)；審美需求

近年來(lái)，人們的生活已經(jīng)與互聯(lián)網(wǎng)密不可分，在工作、學(xué)習(xí)，娛樂(lè)等各個(gè)方面，互聯(lián)網(wǎng)帶給我們的便利無(wú)可取代。網(wǎng)頁(yè)可以說(shuō)是互聯(lián)網(wǎng)的臉，我們通過(guò)瀏覽網(wǎng)頁(yè)來(lái)獲取信息，進(jìn)行溝通與交流。因此，一張好看的臉對(duì)一個(gè)網(wǎng)頁(yè)、網(wǎng)站來(lái)說(shuō)可以更吸引人。然而網(wǎng)頁(yè)設(shè)計(jì)在我國(guó)仍處在一個(gè)較初級(jí)的階段，專(zhuān)業(yè)的網(wǎng)頁(yè)設(shè)計(jì)師數(shù)目很少，這就需要高質(zhì)量的網(wǎng)頁(yè)設(shè)計(jì)教學(xué)來(lái)培養(yǎng)更多的專(zhuān)業(yè)人才。如何綜合文字、圖片、色彩及用戶(hù)審美需求等各方因素，編排設(shè)計(jì)出一個(gè)視覺(jué)效果良好的版面，是網(wǎng)頁(yè)設(shè)計(jì)教學(xué)中的一個(gè)重點(diǎn)。用戶(hù)的審美需求

上世紀(jì)末互聯(lián)網(wǎng)剛登陸我國(guó)時(shí)，發(fā)展勢(shì)頭過(guò)于迅速。很多網(wǎng)站在創(chuàng)立之初只是想趕緊搶占一席之地，而沒(méi)有將太多的時(shí)間和精力投入到網(wǎng)頁(yè)的設(shè)計(jì)中，結(jié)果是雖然各個(gè)網(wǎng)站內(nèi)容各不相同，但一看之下，版面幾乎都是同一風(fēng)格，幾乎毫無(wú)新意，很快就導(dǎo)致了用戶(hù)的審美疲勞。隨著網(wǎng)絡(luò)不斷的發(fā)展，人們對(duì)網(wǎng)站的版面和整體風(fēng)格越發(fā)重視，網(wǎng)站管理者若沒(méi)有一張好看的“臉”，將很難留住用戶(hù)。這就要求設(shè)計(jì)者們從藝術(shù)的角度出發(fā)，從用戶(hù)的審美需求入手，結(jié)合平面設(shè)計(jì)中對(duì)美學(xué)的解釋運(yùn)用一些藝術(shù)的基本形式來(lái)改造網(wǎng)頁(yè)的版面，從而使其更具美感、更有個(gè)性。

1.1 版面的規(guī)范化

網(wǎng)頁(yè)版面的設(shè)計(jì)要遵循一定的規(guī)律，明確編排時(shí)的重點(diǎn)，分清主次內(nèi)容，按由主到次的順序逐步完成編排。尤其在使用符號(hào)、圖片、文字、動(dòng)畫(huà)等內(nèi)容時(shí)，要遵循平面設(shè)計(jì)中形式美的視覺(jué)規(guī)律，強(qiáng)調(diào)文字、圖片及色彩的搭配。同時(shí)，網(wǎng)頁(yè)的設(shè)計(jì)必須要與網(wǎng)頁(yè)內(nèi)容想關(guān)聯(lián)，不可脫離主題，僅為美學(xué)而設(shè)計(jì)。

1.2 版面的均衡性

頁(yè)面的編排中，可以將單個(gè)的文字看做是點(diǎn)，成行的文字看做是線(xiàn)，成段落的文字看成面。點(diǎn)、線(xiàn)、面的排列要強(qiáng)調(diào)均衡性。三種形式要因?qū)嶋H情況而采用。如單個(gè)文字，用起來(lái)會(huì)十分突兀，但可以讓用戶(hù)一眼就看到；成段文字可以排列十分美觀(guān)，但用戶(hù)可能因?yàn)樽謹(jǐn)?shù)過(guò)多而放棄閱讀。文字的排列方式一般有水平、垂直、傾斜，前兩種容易帶給人穩(wěn)定，安寧的感覺(jué)，而傾斜會(huì)讓人不由產(chǎn)生運(yùn)動(dòng)感。合理的結(jié)合三種排列方式，保證頁(yè)面整體平衡的情況下給局部安插一些斜體字，會(huì)顯得更動(dòng)感而富有生氣。設(shè)計(jì)中的視覺(jué)流程

一個(gè)網(wǎng)站要得到用戶(hù)的喜愛(ài)，其頁(yè)面內(nèi)容、整體布局都必須通過(guò)視覺(jué)感官使用戶(hù)感到愉悅或欣賞。而精心設(shè)計(jì)過(guò)得頁(yè)面相比隨意的版面編排無(wú)疑要更容易吸引用戶(hù)，從而增加網(wǎng)站的訪(fǎng)問(wèn)量。網(wǎng)站要通過(guò)網(wǎng)頁(yè)傳達(dá)信息，就必須要要慮到視覺(jué)元素的處理，只有擁有良好的視覺(jué)效果，才能稱(chēng)得上是新時(shí)代背景下真正意義上的新媒體。這就要求網(wǎng)頁(yè)設(shè)計(jì)師們從人們的日常生活出發(fā)，更多的考慮人們的閱讀習(xí)慣。對(duì)于網(wǎng)頁(yè)版面的編排，各個(gè)元素之間的排列及其各自的大小、位置，都要結(jié)合閱讀順序。使用戶(hù)保留自己的習(xí)慣，在閱讀網(wǎng)頁(yè)時(shí)感到輕松，自然。網(wǎng)頁(yè)中各構(gòu)成要素的分析

網(wǎng)頁(yè)的作用在于傳遞信息，而網(wǎng)頁(yè)設(shè)計(jì)就是服務(wù)于這個(gè)目的。通過(guò)優(yōu)化網(wǎng)頁(yè)中文字、圖片、色彩的造型、排列和放置，使網(wǎng)頁(yè)更美觀(guān)，更容易讓人獲取信息。如何處理文字、圖片和色彩，值得我們做更多的討論。

3.1 文字的處理

文字是傳遞信息的核心部分，網(wǎng)頁(yè)設(shè)計(jì)中一定會(huì)涉及文字的處理。且一般來(lái)說(shuō)文字占整個(gè)頁(yè)面篇幅較大，因此文字處理好壞直接影響到整個(gè)頁(yè)面設(shè)計(jì)的水平。設(shè)計(jì)師在進(jìn)行處理時(shí)需要考慮文字編輯的整體效果，應(yīng)盡量給人以簡(jiǎn)潔亮麗的視覺(jué)效果，要避免頁(yè)面中文字效果凌亂、復(fù)雜，過(guò)多刻意的修飾若使用不當(dāng)反而會(huì)適得其反，因此在必要時(shí)，可以不加修飾，僅保留文字本身。此外，設(shè)計(jì)時(shí)還應(yīng)注意文字的格式、大小及字體要配合文章內(nèi)容?？偠灾?，要合理運(yùn)用美學(xué)的觀(guān)念編輯文字。

3.2 圖片的處理

網(wǎng)絡(luò)訊息傳播的速度越來(lái)越快，造成了較普遍的“快餐式閱讀”現(xiàn)象。這種現(xiàn)象是指用戶(hù)在互聯(lián)網(wǎng)上閱讀時(shí)往往只關(guān)注標(biāo)題和核心段落，而僅僅會(huì)對(duì)極少部分感興趣的內(nèi)容完成全文的閱讀。網(wǎng)頁(yè)上好的圖片可以激發(fā)用戶(hù)的閱讀興趣，而且圖片的合理編排可以大大增加網(wǎng)頁(yè)的美觀(guān)，使得原本單純的文本閱讀變的更有趣味。因此，版面設(shè)計(jì)中必須重視圖片的處理。選擇圖片的內(nèi)容、數(shù)量、大小和方向等都可直接影響到網(wǎng)頁(yè)的整體布局，在對(duì)圖片進(jìn)行處理時(shí)，我們要遵循精簡(jiǎn)的原則，盡量少的選擇圖片，盡量選擇高質(zhì)量高度切合主題的圖片，力圖用圖片抓住讀者。

未來(lái)的互聯(lián)網(wǎng)到底會(huì)發(fā)展到怎樣的一個(gè)程度，沒(méi)有人可以預(yù)測(cè)。網(wǎng)頁(yè)設(shè)計(jì)的出現(xiàn)雖然只有短短十幾年，卻必須要不斷跟隨互聯(lián)網(wǎng)飛速的發(fā)展而不斷變革和創(chuàng)新。又因?yàn)榫W(wǎng)頁(yè)設(shè)計(jì)本身綜合了傳統(tǒng)媒體的各種平面設(shè)計(jì)因素，又必須講設(shè)計(jì)師的美學(xué)理念通過(guò)計(jì)算機(jī)展現(xiàn)在網(wǎng)頁(yè)上。這就要求網(wǎng)頁(yè)設(shè)計(jì)師必須具備較高的設(shè)計(jì)文化素養(yǎng)，在設(shè)計(jì)中綜合考慮各方面因素，且必須具備創(chuàng)新意識(shí)，緊跟潮流，應(yīng)互聯(lián)網(wǎng)之發(fā)展不斷探索更高水準(zhǔn)的網(wǎng)頁(yè)設(shè)計(jì)。

[參考文獻(xiàn)]

[1]Paul M.larsst.視覺(jué)傳播――形象載動(dòng)信息[M].霍文利譯.北京廣播學(xué)院出版社，2003，2（8）：6-10.[2]西門(mén)柳上，馬國(guó)良，劉清華.正在爆發(fā)的互聯(lián)網(wǎng)革命[M].機(jī)械工業(yè)出版社，2009，2（5）：22-24.[3]王受之.世界平面設(shè)計(jì)史[M].中國(guó)青年出版社，2006.2（5）：68-74.

第二篇：網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站建設(shè)

《網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站建設(shè)》實(shí)驗(yàn)教學(xué)大綱

課程編號(hào)070105007

學(xué)時(shí)學(xué)分：總學(xué)時(shí)：64總學(xué)分：4實(shí)驗(yàn)學(xué)時(shí)：

32適用對(duì)象：計(jì)算機(jī)科學(xué)與技術(shù)及相關(guān)本科專(zhuān)業(yè)

課程屬性：專(zhuān)業(yè)方向課

實(shí)驗(yàn)屬性：非獨(dú)立設(shè)課

一、課程的性質(zhì)與任務(wù)

隨著Internet的普及，網(wǎng)頁(yè)已經(jīng)成為人們信息發(fā)布及獲取、思想交流和商務(wù)往來(lái)最重要的途徑，網(wǎng)頁(yè)制作已成為當(dāng)今社會(huì)上一種比較熱門(mén)的技術(shù)，本課程突出實(shí)用技術(shù)和應(yīng)用技能，是計(jì)算機(jī)專(zhuān)業(yè)學(xué)生的一門(mén)必選課，同時(shí)又可作為相關(guān)專(zhuān)業(yè)學(xué)生的選修課。

網(wǎng)頁(yè)設(shè)計(jì)課程是學(xué)生在學(xué)習(xí)了高級(jí)程序設(shè)計(jì)語(yǔ)言、數(shù)據(jù)庫(kù)原理及應(yīng)用等課程的基礎(chǔ)上開(kāi)設(shè)的一門(mén)實(shí)用性較強(qiáng)的課程，實(shí)驗(yàn)課的任務(wù)是通過(guò)實(shí)驗(yàn)加深對(duì)理論知識(shí)的理解，基本掌握WEB應(yīng)用的規(guī)劃、設(shè)計(jì)和動(dòng)態(tài)網(wǎng)頁(yè)制作中對(duì)于內(nèi)容的動(dòng)態(tài)顯示與更新技術(shù)，培養(yǎng)學(xué)生的動(dòng)手能力和設(shè)計(jì)能力。

二、實(shí)驗(yàn)的目的與基本要求

實(shí)驗(yàn)?zāi)康模和ㄟ^(guò)實(shí)驗(yàn)讓學(xué)生掌握網(wǎng)站的配置方式和網(wǎng)頁(yè)設(shè)計(jì)的基本方法。

基本要求：

（1）掌握頁(yè)面的設(shè)計(jì)與布局的基本方法；

（2）掌握J(rèn)S腳本語(yǔ)言的使用方法；

（3）掌握asp.net控件（包括HTML控件與服務(wù)器端控件）的使用方法。

三、實(shí)驗(yàn)考核方式及辦法

實(shí)驗(yàn)成績(jī)根據(jù)學(xué)生的實(shí)驗(yàn)完成情況、實(shí)驗(yàn)紀(jì)律、實(shí)驗(yàn)報(bào)告進(jìn)行綜合評(píng)定，給出優(yōu)（90-100）、良（70-89）、及格（60-69）、不及格（60以下）。實(shí)驗(yàn)成績(jī)占本課程總成績(jī)的20%，對(duì)缺實(shí)驗(yàn)成績(jī)或不及格者，《網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站建設(shè)》課程不予通過(guò)。

四、實(shí)驗(yàn)項(xiàng)目一覽表

網(wǎng)頁(yè)制作實(shí)驗(yàn)項(xiàng)目一覽表

序 號(hào)2 3 4

5實(shí)驗(yàn)項(xiàng)目 名稱(chēng)

div布局 css層疊樣式單

JS腳本 asp.net控件 ado.net數(shù)據(jù)庫(kù)連接

實(shí)驗(yàn) 類(lèi)型

驗(yàn)證性 設(shè)計(jì)性 設(shè)計(jì)性 設(shè)計(jì)性 設(shè)計(jì)性

實(shí)驗(yàn) 要求

必做 必做 必做 必做 必做

適用 專(zhuān)業(yè)

理工類(lèi) 理工類(lèi) 理工類(lèi) 理工類(lèi) 理工類(lèi)

學(xué) 時(shí)6 6 6 8

五、實(shí)驗(yàn)項(xiàng)目的具體內(nèi)容：

實(shí)驗(yàn)一div布局

1．本次實(shí)驗(yàn)的目的和要求

掌握網(wǎng)頁(yè)設(shè)計(jì)的DIV布局方式，能夠使用DIV進(jìn)行層布局，認(rèn)真撰寫(xiě)實(shí)驗(yàn)報(bào)告，嚴(yán)格遵守實(shí)驗(yàn)室規(guī)章制度。

2．實(shí)驗(yàn)內(nèi)容或原理

掌握dream weaver軟件的基本功能，熟悉dream weaver的工具箱,使用DIV做層布局。

3．需用的儀器或試劑等

多媒體計(jì)算機(jī)，操作系統(tǒng)Windows 2000/XP以上，并安裝有dream weaver軟件，搭建好asp.net的開(kāi)發(fā)環(huán)境。

4．實(shí)驗(yàn)步驟

（1）打開(kāi)dream weaver軟件；（2）使用div布局設(shè)計(jì)網(wǎng)頁(yè)；（3）div的布局設(shè)計(jì)與修改。

5．教學(xué)方式

學(xué)生主要通過(guò)上機(jī)實(shí)驗(yàn)，在相應(yīng)的軟件環(huán)境下學(xué)習(xí)處理，教師實(shí)時(shí)指導(dǎo)。

6．考核要求

實(shí)驗(yàn)過(guò)程中能認(rèn)真獨(dú)立完成實(shí)驗(yàn)，實(shí)驗(yàn)完成后及時(shí)上交實(shí)驗(yàn)報(bào)告，實(shí)驗(yàn)過(guò)程的表現(xiàn)和實(shí)驗(yàn)報(bào)告成績(jī)記入平時(shí)成績(jī)。

7．實(shí)驗(yàn)報(bào)告要求

實(shí)驗(yàn)報(bào)告格式正確，書(shū)寫(xiě)工整，字跡清楚，步驟敘述清楚，實(shí)驗(yàn)結(jié)果符合邏輯。

實(shí)驗(yàn)二css層疊樣式單

1．本次實(shí)驗(yàn)的目的和要求

通過(guò)dream weaver軟件的使用，掌握使用css層疊樣式單做布局樣式控制的方法，要求認(rèn)真撰寫(xiě)實(shí)驗(yàn)報(bào)告，嚴(yán)格遵守實(shí)驗(yàn)室規(guī)章制度。2．實(shí)驗(yàn)內(nèi)容或原理

通過(guò)dream weaver軟件的使用，使用css層疊樣式單做布局樣式控制。3．需用的儀器或試劑等

多媒體計(jì)算機(jī)，操作系統(tǒng)Windows 2000/XP以上，并安裝有dream weaver軟件，建好asp.net的開(kāi)發(fā)環(huán)境。4．實(shí)驗(yàn)步驟

（1）打開(kāi)dream weave軟件。

（2）用css層層疊樣式單做布局樣式控制。（3）css層疊樣式單編寫(xiě)與調(diào)用。5．教學(xué)方式

學(xué)生主要通過(guò)上機(jī)實(shí)驗(yàn)，在相應(yīng)的軟件環(huán)境下學(xué)習(xí)處理，教師實(shí)時(shí)指導(dǎo)。6．考核要求

實(shí)驗(yàn)過(guò)程中能認(rèn)真獨(dú)立完成實(shí)驗(yàn)，實(shí)驗(yàn)完成后及時(shí)上交實(shí)驗(yàn)報(bào)告，實(shí)驗(yàn)過(guò)程的表現(xiàn)和實(shí)驗(yàn)報(bào)告成績(jī)記入平時(shí)成績(jī)。7．實(shí)驗(yàn)報(bào)告要求

實(shí)驗(yàn)報(bào)告格式正確，書(shū)寫(xiě)工整，字跡清楚，步驟敘述清楚，實(shí)驗(yàn)結(jié)果符合邏輯。

實(shí)驗(yàn)三JS腳本

1．本次實(shí)驗(yàn)的目的和要求

掌握J(rèn)S腳本的基本用法、變量、函數(shù)、DOM文檔對(duì)象的操作。要求認(rèn)真撰寫(xiě)實(shí)驗(yàn)報(bào)告，嚴(yán)格遵守實(shí)驗(yàn)室規(guī)章制度。2．實(shí)驗(yàn)內(nèi)容或原理

JS腳本的基本用法、變量、函數(shù)、DOM文檔對(duì)象的操作。3．需用的儀器或試劑等

多媒體計(jì)算機(jī)，操作系統(tǒng)Windows 2000/XP以上，并安裝有dream weave軟件。4．實(shí)驗(yàn)步驟

（1）打開(kāi)dream weave軟件。

（2）新建JS文件，編寫(xiě)腳本程序?qū)崿F(xiàn)對(duì)JS腳本的變量、函數(shù)、DOM文檔對(duì)象的操作。

（3）外部調(diào)用JS文件。5．教學(xué)方式

學(xué)生主要通過(guò)上機(jī)實(shí)驗(yàn)，在相應(yīng)的軟件環(huán)境下學(xué)習(xí)處理，教師實(shí)時(shí)指導(dǎo)。6．考核要求

實(shí)驗(yàn)過(guò)程中能認(rèn)真獨(dú)立完成實(shí)驗(yàn)，實(shí)驗(yàn)完成后及時(shí)上交實(shí)驗(yàn)報(bào)告，實(shí)驗(yàn)過(guò)程的表現(xiàn)和實(shí)驗(yàn)報(bào)告成績(jī)記入平時(shí)成績(jī)。7．實(shí)驗(yàn)報(bào)告要求

實(shí)驗(yàn)報(bào)告格式正確，書(shū)寫(xiě)工整，字跡清楚，步驟敘述清楚，實(shí)驗(yàn)結(jié)果符合邏輯。

實(shí)驗(yàn)四 asp.net控件

1．本次實(shí)驗(yàn)的目的和要求

掌握asp.net控件（包括HTML控件與服務(wù)器端控件）的使用方法。實(shí)驗(yàn)后要求認(rèn)真撰寫(xiě)實(shí)驗(yàn)報(bào)告，實(shí)驗(yàn)過(guò)程中嚴(yán)格遵守實(shí)驗(yàn)室規(guī)章制度。2．實(shí)驗(yàn)內(nèi)容或原理

運(yùn)用所學(xué)知識(shí)，用HTML控件與服務(wù)器端控件進(jìn)行編程，實(shí)現(xiàn)簡(jiǎn)單功能。3．需用的儀器或試劑等

多媒體計(jì)算機(jī)，操作系統(tǒng)Windows 2000/XP以上，并安裝有asp.net開(kāi)發(fā)平臺(tái)。4．實(shí)驗(yàn)步驟

（1）打開(kāi)asp.net開(kāi)發(fā)平臺(tái)。（2）新建空白頁(yè)面或者空站點(diǎn)。

（3）用HTML控件與服務(wù)器端控件進(jìn)行編程并調(diào)試。5．教學(xué)方式

學(xué)生主要通過(guò)上機(jī)實(shí)驗(yàn)，在相應(yīng)的軟件環(huán)境下學(xué)習(xí)處理，教師實(shí)時(shí)指導(dǎo)。6．考核要求

實(shí)驗(yàn)過(guò)程中能認(rèn)真獨(dú)立完成實(shí)驗(yàn)，實(shí)驗(yàn)完成后及時(shí)上交實(shí)驗(yàn)報(bào)告，實(shí)驗(yàn)過(guò)程的表現(xiàn)和實(shí)驗(yàn)報(bào)告成績(jī)記入平時(shí)成績(jī)。7．實(shí)驗(yàn)報(bào)告要求

實(shí)驗(yàn)報(bào)告格式正確，書(shū)寫(xiě)工整，字跡清楚，步驟敘述清楚，實(shí)驗(yàn)結(jié)果符合邏輯。

實(shí)驗(yàn)五ado.net數(shù)據(jù)庫(kù)連接

1．本次實(shí)驗(yàn)的目的和要求

掌握ado.net數(shù)據(jù)庫(kù)連接的基本概念、ADO.NET對(duì)象模型、SqlConnection對(duì)象。

2．實(shí)驗(yàn)內(nèi)容或原理

建立ado.net數(shù)據(jù)庫(kù)連接，ADO.NET對(duì)象模型、SqlConnection對(duì)象。3．需用的儀器或試劑等

多媒體計(jì)算機(jī)，操作系統(tǒng)Windows 2000/XP以上，并安裝有asp.net開(kāi)發(fā)平臺(tái)。4．實(shí)驗(yàn)步驟

（1）打開(kāi)asp.net開(kāi)發(fā)平臺(tái)。（2）建立ado.net數(shù)據(jù)庫(kù)連接。

（3）通過(guò)SqlCommand對(duì)象提供的方法傳遞對(duì)數(shù)據(jù)庫(kù)操作的命令，并返回命令執(zhí)行的結(jié)果。5．教學(xué)方式

學(xué)生主要通過(guò)上機(jī)實(shí)驗(yàn)，在相應(yīng)的軟件環(huán)境下學(xué)習(xí)處理，教師實(shí)時(shí)指導(dǎo)。6．考核要求

實(shí)驗(yàn)過(guò)程中能認(rèn)真獨(dú)立完成實(shí)驗(yàn)，實(shí)驗(yàn)完成后及時(shí)上交實(shí)驗(yàn)報(bào)告，實(shí)驗(yàn)過(guò)程的表現(xiàn)和實(shí)驗(yàn)報(bào)告成績(jī)記入平時(shí)成績(jī)。7．實(shí)驗(yàn)報(bào)告要求

實(shí)驗(yàn)報(bào)告格式正確，書(shū)寫(xiě)工整，字跡清楚，步驟敘述清楚，實(shí)驗(yàn)結(jié)果符合邏輯。

六、實(shí)驗(yàn)教材及主要參考資料

翁健紅編著，基于C#的ASP.NET程序設(shè)計(jì)(第2版)，機(jī)械工業(yè)出版社

七、教改說(shuō)明及其他

在實(shí)驗(yàn)教學(xué)過(guò)程中可以結(jié)合優(yōu)秀網(wǎng)站分析、優(yōu)秀作業(yè)點(diǎn)評(píng)、作業(yè)中普遍存在的主要問(wèn)題及改正方法的分析等方法相互穿插結(jié)合進(jìn)行教學(xué)。

第三篇：《網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站建設(shè)》教學(xué)總結(jié)

《網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站建設(shè)》教學(xué)總結(jié)

本學(xué)期11網(wǎng)絡(luò)1班的網(wǎng)絡(luò)程序設(shè)計(jì)基礎(chǔ)課程采用的是人民郵電出版社的《動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)與制作——CSS+JavaScript》吳以欣 陳小寧主編。這本教材總體還是比較適合于高職學(xué)生。在實(shí)際教學(xué)中我廣泛選擇利用其他較適宜的教學(xué)資源，注重入門(mén)練習(xí)。作為教學(xué)的補(bǔ)充，我將一些資源和教師多年教學(xué)積累整理成課件發(fā)給學(xué)生?，F(xiàn)將一個(gè)學(xué)期的教學(xué)情況總結(jié)如下：

一、老師給與學(xué)生合理的引導(dǎo)，更要加強(qiáng)自身的素質(zhì)修養(yǎng)，提高自己的知識(shí)水準(zhǔn)。

在整個(gè)教學(xué)過(guò)程中，在教學(xué)過(guò)程中自己還缺少更高的藝術(shù)修養(yǎng)和藝術(shù)創(chuàng)造能力，所以還要不斷的學(xué)習(xí)；另外就是技術(shù)上還需要完善，也需要和有經(jīng)驗(yàn)的老師多交流，多溝通。相信只有站在一定的高度去看整個(gè)項(xiàng)目的實(shí)現(xiàn)，會(huì)更通俗易懂也更有說(shuō)服力，所以也不能說(shuō)都是學(xué)生的原因，歸結(jié)起來(lái)還是要提高自己的知識(shí)水平和業(yè)務(wù)素質(zhì)！

二、了解學(xué)生，加強(qiáng)考核。

針對(duì)全體學(xué)生來(lái)說(shuō)，聰明程度相當(dāng)，但學(xué)習(xí)興趣層次不同，大部分學(xué)生只愿意聽(tīng)后選擇性的接受，而沒(méi)有知識(shí)的創(chuàng)新利用，或者是沒(méi)有下去自學(xué)，鞏固知識(shí)，單一的只是聽(tīng)和做。有的同學(xué)，上完課后根本就直接把書(shū)丟在一邊置之不理。綜合學(xué)生的學(xué)習(xí)態(tài)度問(wèn)題，個(gè)人認(rèn)為還需要加強(qiáng)考核制度，從嚴(yán)制學(xué)，寬進(jìn)嚴(yán)出，嚴(yán)肅考風(fēng)！

三、教學(xué)內(nèi)容心得

1.網(wǎng)頁(yè)制作要簡(jiǎn)潔大方。網(wǎng)站在設(shè)計(jì)過(guò)程中以簡(jiǎn)潔大方為主，配合合理的顏色搭配和主題內(nèi)容的詮釋?zhuān)o訪(fǎng)問(wèn)者賞心悅目的感覺(jué)；而避免過(guò)多的動(dòng)畫(huà)和幀的過(guò)多運(yùn)用，以及不明確的導(dǎo)航，雜亂的顏色，沒(méi)有主題的胡編亂造。

2.網(wǎng)站風(fēng)格要統(tǒng)一。所有的圖像、文字，包括像背景顏色、區(qū)分線(xiàn)、字體、標(biāo)題、注腳什么的，要統(tǒng)一風(fēng)格，貫穿全站。這樣子讀者看起來(lái)舒服、順暢，也會(huì)對(duì)你的網(wǎng)站留下一個(gè)“很專(zhuān)業(yè)”的印象。知識(shí)運(yùn)用中要大量配合合理的模板、CSS樣式的運(yùn)用而避免在網(wǎng)頁(yè)中反復(fù)的字體樣式重定義、顏色的胡亂運(yùn)用，參差不齊給人雜亂的感覺(jué)。

3.網(wǎng)站布局合理。避免一些“拿來(lái)主義”，一些學(xué)生為了設(shè)計(jì)方便，拿網(wǎng)上流行的模版做網(wǎng)頁(yè)，做出的網(wǎng)頁(yè)幾乎是千篇一律，沒(méi)有特色，雖然完成了網(wǎng)頁(yè)的制

作，畢竟不是出自個(gè)人之手，知識(shí)缺乏進(jìn)一步鞏固，且讓瀏覽者產(chǎn)生厭倦。另外導(dǎo)航清晰化，能引領(lǐng)瀏覽者閱讀網(wǎng)頁(yè)，思路一定要清晰，避免交叉鏈接。

4.網(wǎng)站容量要小。雖然網(wǎng)頁(yè)更加美觀(guān)可以吸引瀏覽者，但是圖片，動(dòng)畫(huà)容量大會(huì)影響瀏覽速度，所以一定要注意網(wǎng)絡(luò)容量問(wèn)題。圖片盡量壓縮，多采用單一色，或者簡(jiǎn)單的顏色；動(dòng)畫(huà)要盡量簡(jiǎn)潔實(shí)用，用最少的幀做出最漂亮實(shí)用的動(dòng)畫(huà)，給網(wǎng)頁(yè)增色。

但是總體來(lái)說(shuō)，通過(guò)整個(gè)學(xué)期網(wǎng)頁(yè)制作的學(xué)習(xí)，學(xué)生已經(jīng)了解了網(wǎng)頁(yè)制作所需要的基本技術(shù)，也掌握了網(wǎng)頁(yè)制作的基本技能。但由于時(shí)間緊迫，知識(shí)點(diǎn)多，一些重點(diǎn)難點(diǎn)問(wèn)題還需要勤加練習(xí)，比如：靜態(tài)網(wǎng)頁(yè)中的布局和CSS 的定義；動(dòng)態(tài)網(wǎng)頁(yè)中對(duì)象的綜合運(yùn)用等等。當(dāng)然也存在著遺憾，不少學(xué)生反映，學(xué)習(xí)愛(ài)好更多的是動(dòng)畫(huà)的制作即 Flash的學(xué)習(xí)，而我們只是籠統(tǒng)的講解，不能完全滿(mǎn)足學(xué)生的求知欲！當(dāng)然針對(duì)網(wǎng)頁(yè)制作來(lái)說(shuō)，還需要加強(qiáng)學(xué)生的配色觀(guān)念以及審美觀(guān)的培養(yǎng)，以及動(dòng)態(tài)網(wǎng)頁(yè)的實(shí)現(xiàn)技術(shù)的把握，在很多方面還需要老師和學(xué)生們進(jìn)一步配合，共同學(xué)習(xí)和實(shí)戰(zhàn)，以達(dá)到知識(shí)運(yùn)用的一定高度！

第四篇：《網(wǎng)站建設(shè)與網(wǎng)頁(yè)設(shè)計(jì)》教案

《網(wǎng)站建設(shè)與網(wǎng)頁(yè)設(shè)計(jì)》

教案

學(xué)期：2014-2015-1 班級(jí)：2012軟件工程

2012計(jì)算機(jī)科學(xué)與技術(shù)

課時(shí)：44學(xué)時(shí) 教師：李念

第1講 HTML基礎(chǔ)

1.1 教學(xué)目的和要求

1.了解HTML的發(fā)展歷史和HTML5的特性；

2.掌握HTML的文檔結(jié)構(gòu)、代碼規(guī)范和網(wǎng)頁(yè)文件的創(chuàng)建過(guò)程； 3.掌握搭建支持HTML5瀏覽器環(huán)境的方法。

1.2 教學(xué)重點(diǎn)和難點(diǎn)

1.HTML5的新特點(diǎn)； 2.HTML5的新元素；

1.3 教學(xué)方法及手段

實(shí)例教學(xué)，講授與演示結(jié)合。

1.4 教學(xué)內(nèi)容

1.4.1 HTML簡(jiǎn)介

HTML是HyperText Markup Language（超文本置標(biāo)語(yǔ)言）的縮寫(xiě)，是一種為普通文件中某些字句加上標(biāo)簽的語(yǔ)言，其目的在于運(yùn)用標(biāo)簽（tag）對(duì)文件達(dá)到預(yù)期的效果。

HTML5的特性及元素：

(1)實(shí)現(xiàn)Web應(yīng)用程序：繪畫(huà)的Canvas元素，該元素就像在瀏覽器中嵌入一塊畫(huà)布，程序可以在畫(huà)布上繪畫(huà)；更好的用戶(hù)交互操作，包括拖放、內(nèi)容可編輯等；擴(kuò)展的HTMLDOM API（Application Programming Interface，應(yīng)用程序編程接口）。

(2)更好地呈現(xiàn)內(nèi)容：基于Web表現(xiàn)的需要，HTML5引入了更好地呈現(xiàn)內(nèi)容的元素；用于視頻、音頻播放的video元素和audio元素；用于文檔結(jié)構(gòu)的article、footer、header、nav、section等元素。

1.4.2 HTML編寫(xiě)規(guī)范

HTML文檔由標(biāo)簽和被標(biāo)簽的內(nèi)容組成。標(biāo)簽?zāi)墚a(chǎn)生所需要的各種效果。其功能類(lèi)似于一

個(gè)排版軟件，將網(wǎng)頁(yè)的內(nèi)容排成理想的效果。其格式為：

<標(biāo)簽> 受標(biāo)簽影響的內(nèi)容 每個(gè)標(biāo)簽都有一系列的屬性。標(biāo)簽通過(guò)屬性來(lái)制作出各種效果，格式為： <標(biāo)簽

屬性1=“屬性值1” 屬性2=“屬性值2” ?> 受標(biāo)簽影響的內(nèi)容 。不推薦使用的標(biāo)簽：在HTML中，某些標(biāo)簽不推薦使用，例如，、、、、、、、、、等標(biāo)簽。

代碼的縮進(jìn)：在編寫(xiě)HTML代碼時(shí)要注意使用代碼縮進(jìn)來(lái)提高程序的結(jié)構(gòu)性和層次性。

1.4.3 網(wǎng)頁(yè)文件的創(chuàng)建過(guò)程

用記事本創(chuàng)建網(wǎng)頁(yè) 用DW軟件創(chuàng)建網(wǎng)頁(yè)

1.4.4 搭建支持HTML5的瀏覽器環(huán)境

目前，Microsoft的IE系列（僅有IE9及其以上版本）瀏覽器，以及Opera Software的Opera與Google的Chrome瀏覽器。

1.4.5 小結(jié)

本次課主要講述了網(wǎng)頁(yè)設(shè)計(jì)的步驟和要點(diǎn)以及HTML5的新特征。

第2講 HTML標(biāo)簽

2.1 教學(xué)目的和要求

1.掌握基本的文字與段落標(biāo)簽的使用；

2.掌握超鏈接、圖像、表格和列表標(biāo)簽的使用方法和基本屬性； 3.能夠進(jìn)行基本的網(wǎng)頁(yè)排版。

2.2 教學(xué)重點(diǎn)和難點(diǎn)

1.各類(lèi)標(biāo)簽的使用方法和屬性設(shè)置； 2.嵌套列表的使用。

2.3 教學(xué)方法及手段

實(shí)例教學(xué)，講授與演示結(jié)合。

2.4 教學(xué)內(nèi)容

2.4.1 文字與段落排版

注釋標(biāo)簽 強(qiáng)制換行標(biāo)簽
段落標(biāo)簽

?