今天給各位分享網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)驗(yàn)報(bào)告模板的知識(shí)，其中也會(huì)對(duì)個(gè)人網(wǎng)頁(yè)制作實(shí)驗(yàn)報(bào)告進(jìn)行解釋?zhuān)绻芘銮山鉀Q你現(xiàn)在面臨的問(wèn)題，別忘了關(guān)注本站，現(xiàn)在開(kāi)始吧！

本文目錄一覽：

• 1、要一份網(wǎng)頁(yè)實(shí)訓(xùn)報(bào)告
• 2、網(wǎng)頁(yè)設(shè)計(jì)實(shí)訓(xùn)總結(jié)心得6篇(2)
• 3、有關(guān)網(wǎng)頁(yè)設(shè)計(jì)與制作畢業(yè)論文范文
• 4、用ASP制作網(wǎng)頁(yè)的實(shí)訓(xùn)報(bào)告總結(jié)

要一份網(wǎng)頁(yè)實(shí)訓(xùn)報(bào)告

一、實(shí)習(xí)目的：

通過(guò)教學(xué)實(shí)習(xí)掌握站點(diǎn)制作、站點(diǎn)測(cè)試與發(fā)布技術(shù)。會(huì)綜合利用Fireworks

、Flash和Dreamweaver三個(gè)軟件進(jìn)行靜態(tài)網(wǎng)站的設(shè)計(jì)。

二、實(shí)習(xí)內(nèi)容：

1.用Fireworks處理圖片。對(duì)圖片裁剪、鈍化、高斯模糊。設(shè)置圖片的GIF動(dòng)畫(huà)格式，制作標(biāo)題動(dòng)畫(huà)。對(duì)文字應(yīng)用效果。利用Fireworks制作導(dǎo)航條并導(dǎo)出格式為html。

2.用Flash制作標(biāo)題動(dòng)畫(huà)。首頁(yè)中的動(dòng)畫(huà)不超過(guò)20M。制作按鈕來(lái)超級(jí)鏈接到其他頁(yè)面。

3.使用Dreamweaver布局視圖，設(shè)置本地站點(diǎn)。在標(biāo)準(zhǔn)視圖和布局視圖模式相互轉(zhuǎn)換。建議使用布局視圖，在標(biāo)準(zhǔn)模式中插入層對(duì)象制作層動(dòng)畫(huà)，利用行為面板添加鼠標(biāo)行為，制作翻轉(zhuǎn)動(dòng)畫(huà)，使用CSS樣式統(tǒng)一網(wǎng)頁(yè)中文字樣式，插入Fireworks中的GIF

文件及導(dǎo)入Flash中的SWF文檔，設(shè)置文檔間的超級(jí)鏈接。

三、具體要求：

1、利用Dreamweaver制作一個(gè)靜態(tài)網(wǎng)站，要求網(wǎng)站有特色，整個(gè)網(wǎng)站的內(nèi)容和形式要統(tǒng)一，應(yīng)能夠反映一個(gè)簡(jiǎn)單的主題?？梢赃x擇制作《個(gè)人網(wǎng)站設(shè)計(jì)》、《企業(yè)網(wǎng)站設(shè)計(jì)》、《文化網(wǎng)站的設(shè)計(jì)》、《娛樂(lè)網(wǎng)站設(shè)計(jì)》或者其他自己認(rèn)為適合的網(wǎng)站。

2、 作一個(gè)主頁(yè)面，至少5個(gè)次頁(yè)面。

3、必須用到框架、表格或?qū)优虐婕夹g(shù)、Flash技術(shù)和圖像處理技術(shù)，使網(wǎng)站具有合理的外觀和功能。

4、 主頁(yè)基本要求：

　頁(yè)頭Logo，準(zhǔn)確無(wú)誤地標(biāo)識(shí)站點(diǎn)和企業(yè)標(biāo)志；

　網(wǎng)頁(yè)標(biāo)題動(dòng)畫(huà)，可以制作成GIF動(dòng)畫(huà)或者Flash動(dòng)畫(huà)；

　導(dǎo)航條；

　E-mail地址，用來(lái)接受用戶(hù)垂詢(xún)；

　聯(lián)系信息，如普通郵件地址或電話(huà)；

　版權(quán)信息。

5、制作一個(gè)表單頁(yè)面。

6、某個(gè)頁(yè)面有滾動(dòng)字幕。

7、為一個(gè)頁(yè)面添加背景音樂(lè)。

8、至少添加一種行為效果。

9、整個(gè)網(wǎng)站各頁(yè)面之間保持風(fēng)格一致，頁(yè)面之間要有合理的超級(jí)鏈接。

10、進(jìn)行站點(diǎn)測(cè)試后申請(qǐng)免費(fèi)空間并發(fā)布到網(wǎng)絡(luò)。

四、網(wǎng)站設(shè)計(jì)思路：

本站應(yīng)該算是一個(gè)個(gè)人主頁(yè)的小型網(wǎng)站。關(guān)于本站站名的來(lái)源：微言微語(yǔ)個(gè)人主頁(yè)，因?yàn)?，我覺(jué)得這個(gè)網(wǎng)站里面的所有文字都是像一個(gè)人在自言自語(yǔ)，在低聲地向某人訴說(shuō)著什么，沒(méi)有主題，沒(méi)有目的。取這個(gè)站名，是做了網(wǎng)站的大概構(gòu)思后才取的，覺(jué)得，這個(gè)名字與網(wǎng)站的圖片、背景音樂(lè)還有文字都很相符。

個(gè)人主頁(yè)，一般都會(huì)包括首頁(yè)，相冊(cè)，鏈接，一些個(gè)人喜歡的文字加圖片，我的個(gè)人主頁(yè)也不例外，包括次首頁(yè)（個(gè)人喜歡的的文章加圖片），我的作品（里面包括自己做的三個(gè)FLASH動(dòng)畫(huà)），文章（一些自己喜歡的文章），相冊(cè)（Firworks處理過(guò)的相冊(cè)），關(guān)于（關(guān)于自己的文字，關(guān)于本站的一些說(shuō)明），鏈接（世界著名網(wǎng)站的有關(guān)鏈接），反饋表（瀏覽者信息反饋表）。

五、網(wǎng)站設(shè)計(jì)過(guò)程：

把所有的素材都整理好（圖片，文章，相片），開(kāi)始布局。此站大多數(shù)用的是“三”字型的，三字型是我給它取的名字，因?yàn)椋铋_(kāi)頭是一張帶有導(dǎo)航條的圖片，用Firworks處理過(guò)的HTML文件，中間一大片用于放正文，下面就是版權(quán)信息，E-mail地址用來(lái)接受用戶(hù)垂詢(xún)；聯(lián)系信息，如普通郵件地址或電話(huà)，像被分開(kāi)的三個(gè)部分，所以我叫它三字型。這種布局方式看起來(lái)比較的整齊，簡(jiǎn)潔美觀。

首頁(yè)本想做一個(gè)動(dòng)態(tài)網(wǎng)頁(yè)，由于時(shí)間有限所以還沒(méi)完全成功。只好用了一張與次頁(yè)面一樣的背景圖片做背景，加上從下向上的滾動(dòng)字幕，背景圖片是用Firworks處理過(guò)的圖片，大片的灰色墻壁加上顏色艷麗的鈕扣圖案，首頁(yè)加了狀態(tài)欄逐字出現(xiàn)的效果，加了“加入收藏”、“設(shè)為首頁(yè)”等代碼。

次頁(yè)面包括如下些內(nèi)容：首頁(yè)、作品、文章、相冊(cè)、關(guān)于、鏈接以及反饋表。這些頁(yè)面是用模板做的，上面的圖片，導(dǎo)航條以及下面的版權(quán)聯(lián)系方式是不用改變的，都保持著首頁(yè)的風(fēng)格，背景圖一樣，字體與樣式一樣，圖片風(fēng)格一樣。中間是兩個(gè)可編輯區(qū)域。

在所有的頁(yè)面導(dǎo)航條下面，插入層對(duì)象制作了一個(gè)層動(dòng)畫(huà)，來(lái)回移動(dòng)的層，里面存放日期，利用行為面板為此層添加了鼠標(biāo)行為，單擊此層，會(huì)出現(xiàn)對(duì)話(huà)框，“歡迎您訪(fǎng)問(wèn)我的個(gè)人主頁(yè)！”，做布局大多使用表格布局，使用了少量的css樣式，字體，字號(hào)，顏色都統(tǒng)一套用相應(yīng)的樣式。

首頁(yè)中添加背景音樂(lè)，小說(shuō)音樂(lè)《我在那一角落患過(guò)傷風(fēng)》，一邊看慢慢上移的文字，一邊聽(tīng)這輕柔的音樂(lè)，給人一種意境美。其實(shí)次頁(yè)面添加《蟲(chóng)兒飛》，輕快而活潑。首頁(yè)禁止右鍵復(fù)制功能，右鍵單擊沒(méi)有反應(yīng)。

次首頁(yè)，就是進(jìn)入次頁(yè)面的第一個(gè)頁(yè)面。主題算是與青春有關(guān)的三種感情，三張圖片，用Firworks處理，加上相應(yīng)的文字。要用到兩個(gè)表格，分別放在兩個(gè)可編輯區(qū)域里面，一個(gè)1*2的表格，一個(gè)2*2的表格，第一個(gè)表格放一張有關(guān)于親情的圖片加一小段文字，第二個(gè)表格放一張有關(guān)于友情的圖片加一小段文字,還有一張有關(guān)于愛(ài)情的圖片加一小段文字。作品頁(yè)面是三個(gè)FLASH動(dòng)畫(huà)，第一個(gè)是左右鍵控制的圖片移動(dòng)按鈕，可以單擊來(lái)鏈接到主頁(yè)面（代碼見(jiàn)附錄），四個(gè)圖片經(jīng)過(guò)裁剪、高斯模糊。第二個(gè)是光芒四射（代碼見(jiàn)附錄），要用到ActionScript語(yǔ)言，長(zhǎng)短不一的線(xiàn)條加上透明度的改變組成光芒四射。第三個(gè)是鼠標(biāo)跟隨特效（代碼見(jiàn)附錄）。文章頁(yè)面，就是簡(jiǎn)單的文字頁(yè)面，沒(méi)有什么特別的。相冊(cè)頁(yè)面，上面是一個(gè)用Firworks處理后的一組圖片，鼠標(biāo)移到小圖片上，下面做出現(xiàn)相應(yīng)的大相片，中間有少量文字，底部是用FLASH做的一組循環(huán)滾動(dòng)圖片（代碼見(jiàn)附錄），圖片跟著鼠標(biāo)的移動(dòng)而左右移動(dòng)。關(guān)于頁(yè)面，也是簡(jiǎn)單的文字頁(yè)面，沒(méi)什么特別的，“個(gè)人簡(jiǎn)歷”文字鏈接到WORD文檔“個(gè)人簡(jiǎn)歷”(代碼：a

href="my.doc")，下面有個(gè)信息反饋的鏈接，鏈接到有關(guān)的“瀏覽者信息反饋表”，此信息反饋表用表單做的，用到單行文本域，多行文本域，單選框，復(fù)選框，按鍵，此表單可以用郵件方式反饋信息（mailto:redcarrot2001@163.com）。鏈接頁(yè)面，前面是我的個(gè)人主頁(yè)LOGO，一張用Firworks做的LOGO，并建立有關(guān)鏈接，中間是一些文字，下面是世界著名網(wǎng)頁(yè)的有關(guān)網(wǎng)址以及相應(yīng)鏈接。

附錄：源代碼

(1) 狀態(tài)欄逐字出現(xiàn)的效果代碼：

script language="JavaScript"

var msg = "歡迎來(lái)到☆※◎~~~微言微語(yǔ)~~~☆※◎個(gè)人主頁(yè)，請(qǐng)多提意見(jiàn)。謝謝! "

;

var interval = 120

var spacelen = 120;

var space10=" ";

var seq=0;

function Helpor_net() {

len = msg.length;

window.status = msg.substring(0, seq+1);

seq++;

if ( seq = len ) {

seq = 0;

window.status = '';

window.setTimeout("Helpor_net();", interval );

}

else

window.setTimeout("Helpor_net();", interval );

}

Helpor_net();

/script

(2) 首頁(yè)收藏代碼：

onClick="window.external.addFavorite('','微言微語(yǔ)個(gè)人主頁(yè)')"---收藏本站br

（3）設(shè)為首頁(yè)代碼：

onclick="var

strHref=window.location.href;this.style.behavior='url(#default#homepage)';this.setHomePage('');"---設(shè)為首頁(yè)/span/p

（4）滾動(dòng)字幕代碼：

marquee align=left direction=up

behavior=scroll height=400

width=550 hspcace=5 scrollmount=2 scrolldelay=200

vspce=5 loop=-1

pspan class="css"1、真的很喜歡那些記錄多于表達(dá)的人。

br /

…………

…………

183、希望每一個(gè)新的一天，醒來(lái)的那個(gè)你都神清氣爽。/span

/p

/div

/p

/marquee

（5）添加背景音樂(lè)代碼：

bgsound src="aa.mp3" loop=1

（6）禁止右鍵復(fù)制功能代碼：

script language="JavaScript"

!--

document.oncontextmenu=new

Function("event.returnValue=false;"); //禁止右鍵功能,單擊右鍵將無(wú)任何反應(yīng)

document.onselectstart=new

Function("event.returnValue=false;"); //禁止先擇,也就是無(wú)法復(fù)制//--

/script

style type="text/css"

（7）光芒四射代碼：

duplicateMovieClip("line","line"+i,i);

setProperty("line"+i,_rotation,random(360));

setProperty("line"+i,_alpha,random(100));

i++;）

if(i100){

gotoAndPlay(1);

}else{

i=1;

}

（8）鼠標(biāo)跟隨代碼：

movie._visible=0;

i=0;

i++;

if(i100){

i=1;

}

movie._x+=(_xmouse-movie._x)/30;

movie._y+=(_ymouse-movie._y)/30;

duplicateMovieClip(movie,"movie"+i,i);

this["movie"+i]._x=movie._x;

this["movie"+i]._y=movie._y;

gotoAndPlay(2);

（9）循環(huán)滾動(dòng)圖片：

onClipEvent (enterFrame) {

this._x-=(_root._xmouse-300)/15;

if(this._x1371.1){

this._x=this._x-1371.1;

}

if(this._x-1371.1){

this._x=this._x+1371.1;

}

}

（10）左右鍵控制的圖片移動(dòng)按鈕：

on(release)

{getURL("index.html","_blank");}

六、實(shí)訓(xùn)中遇到的難點(diǎn)及解決辦法：

在設(shè)計(jì)開(kāi)始的時(shí)候，想的太多，不知道怎么開(kāi)頭，定哪個(gè)主題，背景，色調(diào)，文字，布局都沒(méi)有頭緒，后來(lái)，開(kāi)始做，而且覺(jué)得越做越有頭緒了，所以我覺(jué)得，還是不要想的太多，太復(fù)雜了，不要追求完美，不要做的網(wǎng)頁(yè)太多，搞到最后，別人都不知道，你這個(gè)網(wǎng)站的主題是什么了。

還有就是布局的時(shí)候總是不能做到很美觀，后來(lái)，我把頁(yè)面屬性改了左過(guò)距為10，上邊距為10，剛好把背景圖片里面的那些亮麗的鈕扣圖案顯示出來(lái)，改變了表格背景圖的灰暗，使網(wǎng)頁(yè)的整體看起來(lái)更美觀了。

在做CSS樣式表的時(shí)候，做字的顏色的時(shí)候，老是不知道用哪種顏色才搭配的起這個(gè)背景，后來(lái)，看到那個(gè)背景的鈕扣顏色與灰色配起來(lái)很好看就用吸管取了鈕扣的顏色了。

七、實(shí)訓(xùn)心得：

在我看來(lái)，設(shè)計(jì)網(wǎng)頁(yè)，應(yīng)該先策劃，策劃很重要，加上創(chuàng)意，配色很重要，技術(shù)與鑒賞能力是最主要的。建立站點(diǎn)的時(shí)候，各個(gè)文件夾取名的時(shí)候，最好用相應(yīng)的英語(yǔ)，見(jiàn)名知意，如圖片文件夾用image，網(wǎng)頁(yè)文件夾用html。

在所有配色當(dāng)中，不同的顏色傳達(dá)著不同的意義也有不同的象征。如白色代表著：清潔、天真、潔凈、真理、和平、冷淡、貧乏；灰色讓人聯(lián)想到灰塵、石頭、水泥、白銀，象征著中庸、平凡、溫和、謙讓?zhuān)o人以中立和高雅的感覺(jué)。太多的顏色會(huì)給人帶來(lái)視覺(jué)上的疲勞。所以，在我下載準(zhǔn)備素材的時(shí)候，就選擇用灰色做背景顏色，灰色太貧乏，就加上亮色的鈕扣起到“中和”的作用。

通過(guò)此次實(shí)訓(xùn),我覺(jué)得平面設(shè)計(jì)的創(chuàng)意思維、版面設(shè)計(jì)、色彩配置、圖形創(chuàng)意等方面都有很重要，對(duì)于網(wǎng)頁(yè)制作來(lái)說(shuō)，我覺(jué)得是一個(gè)以多學(xué)科設(shè)計(jì)為基礎(chǔ)，受到包括視覺(jué)藝術(shù)、技術(shù)、內(nèi)容的多種影響。網(wǎng)頁(yè)設(shè)計(jì)的技術(shù)不算什么困難，真正困難的是網(wǎng)頁(yè)的設(shè)計(jì)創(chuàng)意，文字我覺(jué)得也很重要，有些人瀏覽你的網(wǎng)頁(yè)不是喜歡上你的艷麗漂亮的圖片，也許是喜歡上你的文字，那種感動(dòng)人心的，唯美的文字。文字與圖片要搭得上調(diào)，不可能用一張美女圖做背景，上面卻寫(xiě)有關(guān)于親情的文章。也就是整體的搭配問(wèn)題。

通過(guò)此次實(shí)訓(xùn)，使我對(duì)于網(wǎng)頁(yè)制作的三大軟件有了進(jìn)一步的了解，各功能都能夠?qū)崿F(xiàn)。提高了自己的鑒賞能力，綜合搭配能力，也對(duì)以前學(xué)過(guò)的內(nèi)容進(jìn)行了綜合的復(fù)習(xí)。

通過(guò)此次實(shí)訓(xùn)，我更了解到，生活中有許多色彩，搭配顏色的時(shí)候，聯(lián)想到生活中的東西會(huì)做的更漂亮，給人一種親切感，現(xiàn)在看到什么東西，我就會(huì)聯(lián)想到做網(wǎng)頁(yè)的時(shí)候，還有怎么布局。反正此次實(shí)訓(xùn)收獲很多。

最后，我想，如果此次實(shí)訓(xùn)老師是要我們分組來(lái)做的話(huà)，也許，我們可以做得更好，因?yàn)?，一個(gè)想的畢竟不全面，而且，一個(gè)人的申美有限，我們可以分工合作，一個(gè)人做一個(gè)方面的東西，也可以根據(jù)他所善長(zhǎng)的方面來(lái)分工，善長(zhǎng)動(dòng)畫(huà)制作的人做動(dòng)畫(huà)，善長(zhǎng)圖片處理的人做圖片，善長(zhǎng)文字與布局的就來(lái)布局。但是，也許那樣，有些同學(xué)會(huì)懶的動(dòng)手，推著給別人做。

網(wǎng)頁(yè)設(shè)計(jì)實(shí)訓(xùn)總結(jié)心得6篇(2)

網(wǎng)頁(yè)設(shè)計(jì)實(shí)訓(xùn)總結(jié)心得體會(huì)范文4

上周，也就是5月31日到6月4日的五天里，我們電商專(zhuān)業(yè)進(jìn)行了為期五天的網(wǎng)頁(yè)制作實(shí)訓(xùn)。

在機(jī)房里待了一個(gè)星期，雖然生理反應(yīng)不大，但是還是不好受。原本以為是實(shí)訓(xùn)比平時(shí)上課要舒服多了吧，但是這一個(gè)星期下來(lái)差點(diǎn)沒(méi)被累死，比平時(shí)上課還疼苦。但是在這實(shí)訓(xùn)的一星期里我的收獲還是很多的。

第一、從這次實(shí)訓(xùn)當(dāng)中我深刻的體會(huì)到理論知識(shí)的重要性，只有在自己熟練理論知識(shí)后再能在實(shí)踐中游刃有余，才不會(huì)出現(xiàn)“書(shū)到用時(shí)方恨少”的尷尬體會(huì)。

第二、實(shí)訓(xùn)中我印象最深的是對(duì)各種網(wǎng)頁(yè)制作工具的使用不熟練，甚至還有個(gè)別不會(huì)用的，只是自己想要做個(gè)圖片或圖標(biāo)等都做不好，其心情想而知。所以對(duì)這些網(wǎng)頁(yè)是做工具的使用都要練習(xí)。

第三、集體協(xié)作是我又一個(gè)體會(huì)。這次網(wǎng)頁(yè)制作由于某些原因我一個(gè)人一組，是我搞掘到壓力很大而且很累，而且我自己的思維能力很有限，網(wǎng)站設(shè)計(jì)和制作上也略顯粗糙和不足，正所謂：你有一個(gè)思想，我有一個(gè)思想，分享后我們就都有兩個(gè)思想。所以與同學(xué)合作是很有必要的。

總之，這5天里自己雖然很累，但是自己的收獲也是很不小的，所以我也是很開(kāi)心的。

網(wǎng)頁(yè)設(shè)計(jì)實(shí)訓(xùn)總結(jié)心得體會(huì)范文5

實(shí)訓(xùn)的五天中，我的心情就好像這五天的天氣變化，有晴有陰，只是差了點(diǎn)眼淚。但這并沒(méi)有使我放棄，我不想落后，也不想拖小組的后腿，我告訴自己只有努力做好一切才是我的選擇。一次次的失敗，一次次的嘗試，做好的那一刻，激動(dòng)、高興。我不是天才，有些知識(shí)不會(huì)。查書(shū)，問(wèn)同學(xué)，找代碼等等，時(shí)間飛速的流逝著，有些學(xué)會(huì)了，但仍然有不會(huì)的。

我們的小組從開(kāi)始就產(chǎn)生了分歧，網(wǎng)站主題不一致。直到制作網(wǎng)站的第三天，我們才達(dá)成共識(shí)，兩方各退一步。還好，大家做出來(lái)的效果差不多，接下來(lái)的幾天大家一起努力制作網(wǎng)頁(yè)。遇到問(wèn)題了，互相討論，找出解決的方法，解決不了的就找人問(wèn)。

在規(guī)劃網(wǎng)站結(jié)構(gòu)前，我們?cè)诨ヂ?lián)網(wǎng)上大量的尋找網(wǎng)站布局規(guī)劃，“不行”、“不行”、“與主題不搭”等一遍遍否定的話(huà)不斷說(shuō)出，終于確定了。我們做旅游的，以春夏秋冬四季分作，色調(diào)意思及顏色搭配。制作的過(guò)程中，我們改變了初衷，不知道是好，還是壞，決定做春夏冬三季及另外涉及天下旅游方面的主網(wǎng)頁(yè)。

選取素材，一個(gè)個(gè)的挑，看的越多也變得越難選，好多與自己想要的想差太遠(yuǎn)，找的眼都花了，還是得找。磨練又一次的來(lái)了，堅(jiān)持吧，努力吧，找完就好了。

制作網(wǎng)頁(yè)，一遍遍的改。不對(duì)、不對(duì)，顏色不搭，不能突出主題，瀏覽出來(lái)的結(jié)構(gòu)不搭，改吧。累啊，煩呢，還是得繼續(xù)做。做網(wǎng)站是即使出現(xiàn)再多的錯(cuò)誤，也要堅(jiān)持做，耐心點(diǎn)，做好做完就好了，就輕松了。

我們經(jīng)常在嘴邊掛著要有“團(tuán)隊(duì)合作理念”，但行動(dòng)起來(lái)時(shí)，有些人還是會(huì)忘記，也許是固執(zhí)，也許是其他原因。遇到這種情況時(shí)，要有人站出來(lái)調(diào)節(jié)，盡快解決矛盾，否者會(huì)影響整體的工作進(jìn)程，彼此不高興。制作網(wǎng)頁(yè)不協(xié)調(diào)，影響質(zhì)量。

我們這次實(shí)訓(xùn)的目的及要求是：以小組為單位，合作完成從確定網(wǎng)站主題、規(guī)劃網(wǎng)站結(jié)構(gòu)、選取網(wǎng)頁(yè)素材、到制作網(wǎng)頁(yè)內(nèi)容等步驟，從而掌握網(wǎng)站建設(shè)的全流程。同時(shí)，培養(yǎng)團(tuán)隊(duì)協(xié)作精神，提高綜合運(yùn)用所學(xué)分析、解決實(shí)際問(wèn)題的能力，實(shí)現(xiàn)由理論知識(shí)向操作技能的轉(zhuǎn)化。

網(wǎng)頁(yè)設(shè)計(jì)實(shí)訓(xùn)總結(jié)心得體會(huì)范文6

從學(xué)校 畢業(yè) 后，我第一次步入了社會(huì)，從此開(kāi)始了面對(duì)社會(huì)、工作的生活。剛剛走入社會(huì)的我是一個(gè)性格有些內(nèi)向的人，面對(duì)陌生的人，我不善言辭，不會(huì)給自己的外表進(jìn)行很好的包裝，不適合做那些銷(xiāo)售、接待的工作，只有技術(shù)類(lèi)的工作，少說(shuō)多干的活適合我，這個(gè)我很清楚。現(xiàn)在，中國(guó)每年都有很多畢業(yè)的大學(xué)生找不到工作，我也不例外，所以，這第一次實(shí)習(xí)工作肯定不會(huì)太好找，但是相反，我的運(yùn)氣還不錯(cuò)。找到了一份網(wǎng)頁(yè)設(shè)計(jì)的工作。現(xiàn)將我在工作中的情況 報(bào)告 如下。

一、工作介紹

我工作的這家公司，從事網(wǎng)站開(kāi)發(fā)工作的，公司在技術(shù)團(tuán)隊(duì)這部分是比較正規(guī)的，一般是五到六人為一個(gè)小組，小組中有明確分工，有負(fù)責(zé)聯(lián)系客戶(hù)接恰生意的，有專(zhuān)門(mén)做技術(shù)的，而在技術(shù)這塊分為網(wǎng)站前臺(tái)、后臺(tái)開(kāi)發(fā)，我在學(xué)校主要做的是后臺(tái)開(kāi)發(fā)，當(dāng)然前臺(tái)設(shè)計(jì)工作也還算熟練，但不是很精通。我們這個(gè)小組一般接下的活都是一些小型網(wǎng)站的開(kāi)發(fā)工作，這樣的網(wǎng)站技術(shù)難度不大，而且工作周期短，有相當(dāng)一部分的，只需要通過(guò)cms軟件就可以進(jìn)行開(kāi)發(fā)。但是有個(gè)別的網(wǎng)站開(kāi)發(fā)時(shí)，我們還是需要進(jìn)行一些手寫(xiě)代碼工作的。

二、開(kāi)發(fā)技術(shù)

做為一個(gè)剛畢業(yè)的大學(xué)生，我的知識(shí)儲(chǔ)備肯定有不足的地方，畢竟學(xué)校教的東西肯定會(huì)有一部分和社會(huì)是脫節(jié)的，但好在我的領(lǐng)導(dǎo)對(duì)于我沒(méi)有太多的要求，他只是要求我盡快的適應(yīng)公司的工作和生活，在短時(shí)間內(nèi)熟練的掌握相關(guān)技術(shù)，干好本職工作。

在大學(xué)里對(duì)一個(gè)學(xué)生來(lái)說(shuō)什么是最重要的，那就是學(xué)習(xí)能力。要知道，這個(gè)世界上，知識(shí)在發(fā)展，人類(lèi)在進(jìn)步，每天都在進(jìn)行日新月異的變化，我們的知識(shí)儲(chǔ)備總會(huì)有不夠的地方，但是一定要有學(xué)習(xí)能力，將不會(huì)知識(shí)快速掌握，只有這樣才能占據(jù)主動(dòng)，減少被動(dòng)情況的尷尬發(fā)生，通過(guò)二個(gè)星期的時(shí)間，我成功的適應(yīng)了公司的工作和生活節(jié)奏，每天早九點(diǎn)上班，晚17:30下班，中午休息一個(gè)半小時(shí)，每周還有兩天假期。我利用業(yè)余時(shí)間，抓緊學(xué)習(xí)，將工作中所需要的技術(shù)進(jìn)行了強(qiáng)化學(xué)習(xí)，其實(shí)這些東西在學(xué)校的時(shí)候就接觸過(guò)，只是不精通。那個(gè)時(shí)候?qū)W的東西多，難免有個(gè)主次之分，這次工作了，才知道哪個(gè)應(yīng)該多學(xué)點(diǎn)，但好在我都有學(xué)過(guò)，所以有個(gè)好的基礎(chǔ)在這里，也就不怕了，比如說(shuō)：flash，公司要求技術(shù)人員會(huì)做flash，flash這東西以前我在宿舍的時(shí)候經(jīng)常玩的，可是后來(lái)在分析就業(yè)情況時(shí)，分析錯(cuò)了方向，以為這東西沒(méi)有什么用處，結(jié)果就給荒廢了。但好在還有印象，并且當(dāng)初記了很多的筆記，所以說(shuō)記筆記是很重要的事情。而其它像javascript、xml、數(shù)據(jù)庫(kù)這些東西我都學(xué)過(guò)，只是實(shí)踐能力稍差一點(diǎn)，但好在從前在學(xué)習(xí)方面用的功不是白費(fèi)的。通過(guò)這種實(shí)戰(zhàn)環(huán)境，和半個(gè)月的刻苦學(xué)習(xí)，我終于可以感上小組的工作進(jìn)度了，已經(jīng)可以很好的完成領(lǐng)導(dǎo)教給我的任務(wù)了。

像我這個(gè)組常用的是css+div排版，后臺(tái)使用php技術(shù)進(jìn)行開(kāi)發(fā)，服務(wù)器平臺(tái)采用，linux+apache+mysql+php,這種lamp組合，我很高興在學(xué)校學(xué)的東西能學(xué)有所用。以前我們是用表格(table)進(jìn)行排版，這種方式簡(jiǎn)單但是已經(jīng)有些過(guò)時(shí)了，現(xiàn)在大部分網(wǎng)站都開(kāi)始了重新構(gòu)架，所以都采用css+div進(jìn)行網(wǎng)頁(yè)排版，我目前正在學(xué)習(xí)，掌握的還算比較快。而在后臺(tái)開(kāi)發(fā)部分，我們使用php來(lái)進(jìn)行開(kāi)發(fā)，我的工作是手寫(xiě)一些小模塊?；蛘哂胘avascript寫(xiě)一些特效小代碼。

三、工作流程

小組分工時(shí)，我負(fù)責(zé)后臺(tái)里小模塊的開(kāi)發(fā)工作，如：留言板或論壇，還有一部分javascript代碼編寫(xiě)工作。前臺(tái)部分的工作是和組里的丁珊珊做一些排版的工作，使用css+div技術(shù)。編寫(xiě)代碼這種工作看起來(lái)有些枯燥，其實(shí)時(shí)間長(zhǎng)了以后，還真有點(diǎn)厭煩，但是后來(lái)我明白，只有將自己的本職工作做好，提高自己的技術(shù)，做出優(yōu)良的東西，這樣自己才會(huì)有價(jià)值感，才會(huì)對(duì)自己的工作保持新鮮感。所以我每天都在工作后，記錄下每天在技術(shù)上的不足之處，回家后，將強(qiáng)學(xué)習(xí)，這所謂：找出不會(huì)的地方，學(xué)會(huì)它，你就變的強(qiáng)大了。

php是現(xiàn)在比較流行的一種網(wǎng)站開(kāi)發(fā)技術(shù)，由于它是開(kāi)源的免費(fèi)代碼，并因良好的跨平臺(tái)性能受到了大重的喜歡，我個(gè)人認(rèn)為php很簡(jiǎn)單，適合初學(xué)者學(xué)習(xí)使用，但是在某些地方想要做好，就需要你認(rèn)真的學(xué)習(xí)了。目前，我負(fù)責(zé)的只是技術(shù)性較低和規(guī)模較小的模塊，不過(guò)，我覺(jué)得從簡(jiǎn)單處做起也挺好的，但是我在寫(xiě)代碼時(shí)，還是經(jīng)常犯些小錯(cuò)誤，導(dǎo)致代碼頁(yè)面經(jīng)常出錯(cuò)，而自己往往還找不到是哪錯(cuò)了，有幾次急的都不行，不管怎么弄，結(jié)果就是錯(cuò)誤，后來(lái)我才發(fā)現(xiàn)，原來(lái)只是一個(gè)小錯(cuò)誤，小的不仔細(xì)察看，我都找不到。于是我明白，做開(kāi)發(fā)工作，一定要細(xì)心，否則就會(huì)給自己和別人帶來(lái)麻煩。

四、安全檢查

安全檢查是很重要的一個(gè)環(huán)節(jié)，就像你給人家蓋房子，房子蓋好了，可是門(mén)和窗不結(jié)實(shí)，那這種就必然不會(huì)安全的了。頁(yè)站的制做也是同樣的道理，在安全方面，有一個(gè)地方是和開(kāi)發(fā)人員有很大的關(guān)系的。因?yàn)殚_(kāi)發(fā)人員技術(shù)的高低決定了網(wǎng)站的安全性，有些人員在一些環(huán)節(jié)上的疏漏，很有可能導(dǎo)致網(wǎng)站在實(shí)際使用時(shí)，遭到黑客攻擊，如果造成了經(jīng)濟(jì)損失就無(wú)法挽救了。

所以，我們每個(gè)人在將各自的工作完成以后，組長(zhǎng)和其它專(zhuān)門(mén)的技術(shù)人員會(huì)對(duì)網(wǎng)站的安全性進(jìn)行測(cè)試，找出存在的漏洞，然后加以修改。以使它的安全性達(dá)到最高最穩(wěn)定的狀態(tài)。

在公司進(jìn)行實(shí)習(xí)工作的這段時(shí)間，我在個(gè)人技術(shù)上收獲了很多，現(xiàn)在的我已經(jīng)能獨(dú)檔一面了，做一些難度比較大的工作，我通過(guò)優(yōu)異的表現(xiàn)，已經(jīng)轉(zhuǎn)為正式員工，我對(duì)自己的表現(xiàn)感到滿(mǎn)意，最重要的是我給自己的學(xué)校爭(zhēng)了光，但是在社交能力方面，溝通能力上還有不足的地方。我決定在今后的工作和學(xué)習(xí)，要加強(qiáng)和別人的溝通能力。使自己變的更好，為國(guó)家為社會(huì)做出更多的貢獻(xiàn)。

網(wǎng)頁(yè)設(shè)計(jì)實(shí)訓(xùn)總結(jié)心得6篇相關(guān) 文章 ：

★ 網(wǎng)頁(yè)設(shè)計(jì)實(shí)訓(xùn)總結(jié)心得6篇

★ 網(wǎng)頁(yè)設(shè)計(jì)實(shí)習(xí)心得體會(huì)3篇

★ 網(wǎng)頁(yè)設(shè)計(jì)實(shí)訓(xùn)報(bào)告心得

★ 網(wǎng)頁(yè)設(shè)計(jì)實(shí)訓(xùn)心得

★ 網(wǎng)頁(yè)設(shè)計(jì)實(shí)習(xí)心得體會(huì)總結(jié)

★ 網(wǎng)頁(yè)設(shè)計(jì)實(shí)訓(xùn)心得三篇

★ 網(wǎng)頁(yè)設(shè)計(jì)實(shí)習(xí)心得體會(huì)

★ 網(wǎng)頁(yè)設(shè)計(jì)實(shí)習(xí)心得體會(huì)感想

★ 學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)的總結(jié)

★ 有關(guān)網(wǎng)頁(yè)制作實(shí)訓(xùn)報(bào)告心得體會(huì)

有關(guān)網(wǎng)頁(yè)設(shè)計(jì)與制作畢業(yè)論文范文

為了增加網(wǎng)頁(yè)的吸引力和可理解性，以及互動(dòng)性，網(wǎng)頁(yè)設(shè)計(jì)所起的作用十分重要。下面是我為大家整理的網(wǎng)頁(yè)設(shè)計(jì) 畢業(yè) 論文，供大家參考。

網(wǎng)頁(yè)設(shè)計(jì)畢業(yè)論文篇一：《Flash軟件畫(huà)在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用》

網(wǎng)頁(yè)設(shè)計(jì)畢業(yè)論文摘要

摘要:Flash技術(shù)運(yùn)用范圍非常廣泛,不論是網(wǎng)站、 廣告 、動(dòng)畫(huà)、游戲,甚至程序設(shè)計(jì)與多媒體化展示方面都有一定程度的運(yùn)用。本文首先對(duì)Flash動(dòng)畫(huà)今后的發(fā)展趨勢(shì)進(jìn)行分析并具體化敘述了Flash的實(shí)際定義與特點(diǎn),并對(duì)Flash動(dòng)畫(huà)當(dāng)前在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用方式進(jìn)行分析,針對(duì)性闡述了Flash動(dòng)畫(huà)在整站式網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中交互式導(dǎo)航系統(tǒng)、Web圖像動(dòng)畫(huà)展示以及鼠標(biāo)動(dòng)畫(huà)的應(yīng)用。在此針對(duì)性研究Flash動(dòng)畫(huà)在網(wǎng)頁(yè)設(shè)計(jì)中的相關(guān)研究,望研究結(jié)果能夠?qū)窈蟮膶W(xué)者一定幫助。

網(wǎng)頁(yè)設(shè)計(jì)畢業(yè)論文內(nèi)容

關(guān)鍵詞:Flash動(dòng)畫(huà) 網(wǎng)頁(yè)設(shè)計(jì) 應(yīng)用研究

隨著社會(huì)邁入信息化時(shí)代,網(wǎng)絡(luò)及計(jì)算機(jī)技術(shù)的發(fā)展及普及程度呈現(xiàn)出優(yōu)質(zhì)化的發(fā)展形勢(shì),從而促進(jìn)網(wǎng)頁(yè)動(dòng)畫(huà)漸漸發(fā)展起來(lái),此外網(wǎng)頁(yè)動(dòng)畫(huà)設(shè)計(jì)在網(wǎng)頁(yè)設(shè)計(jì)中占據(jù)重要地位,促使人們?cè)陉P(guān)注動(dòng)畫(huà)整體發(fā)展趨勢(shì)的過(guò)程中將注意力放在網(wǎng)頁(yè)動(dòng)畫(huà)方面。在構(gòu)建及設(shè)計(jì)網(wǎng)頁(yè)時(shí),運(yùn)用Flash幫助網(wǎng)頁(yè)實(shí)現(xiàn)多媒體化的網(wǎng)頁(yè)成果展示,同時(shí)也漸漸成為網(wǎng)頁(yè)設(shè)計(jì)發(fā)展過(guò)程中不可或缺的重要部分。

1Flash的運(yùn)用及特點(diǎn)

MacromediaFlash作為一種交互式編輯矢量圖及多媒體創(chuàng)作軟件,因特網(wǎng)網(wǎng)頁(yè)設(shè)計(jì)矢量動(dòng)畫(huà)文件格式時(shí)常得以較多的運(yùn)用,此外,針對(duì)性分析Flash,可以了解到目前其主要具備以下六大特點(diǎn):第一,將矢量圖形作為主要運(yùn)行前提,致使其自身文件導(dǎo)出容量不大,在進(jìn)行圖片縮放時(shí)對(duì)其自身的清晰度影響不大,在網(wǎng)絡(luò)傳輸過(guò)程中存在一定的便捷性;第二,Flash具備非常優(yōu)質(zhì)化且強(qiáng)大的AS代碼,在設(shè)計(jì)動(dòng)畫(huà)時(shí)運(yùn)用Flash技術(shù),促使動(dòng)畫(huà)的交互性?xún)?yōu)良,便于讀者在閱讀過(guò)程的理解并實(shí)施相關(guān)互動(dòng);第三,針對(duì)實(shí)際運(yùn)用過(guò)程分析,Flash動(dòng)畫(huà)在運(yùn)作時(shí)主要采用插件,若用戶(hù)想要實(shí)現(xiàn)視頻觀看,僅僅需要安裝一次視頻插件就可以直接觀看,避免繁瑣性多次安裝的現(xiàn)象發(fā)生。此外,由于Flash構(gòu)建的動(dòng)畫(huà)自身極小,所以其具備較快的調(diào)用速率;第四,在設(shè)計(jì)Flash過(guò)程中,可以根據(jù)需要適當(dāng)增加頁(yè)面控制按鈕幫助頁(yè)面實(shí)現(xiàn)鏈接的跳動(dòng),還可以運(yùn)用鼠標(biāo)實(shí)現(xiàn)頁(yè)面動(dòng)畫(huà)中的運(yùn)動(dòng)及移動(dòng)。第五,Flash可以實(shí)現(xiàn)動(dòng)畫(huà)視聽(tīng)效果內(nèi)容的升華,譬如漸變聲、位圖等等,用戶(hù)在制作圖片的過(guò)程中可以直接構(gòu)建全Flash制作站點(diǎn);第六,Flash動(dòng)畫(huà)屬于一種“準(zhǔn)”流式文件內(nèi)容,無(wú)需全部下載完成就可以實(shí)現(xiàn)動(dòng)畫(huà)觀看。

2Flash動(dòng)畫(huà)在網(wǎng)絡(luò)設(shè)計(jì)中的應(yīng)用

在網(wǎng)頁(yè)設(shè)計(jì)中,Flash動(dòng)畫(huà)具備非常多關(guān)鍵性的作用,如流式播放動(dòng)畫(huà)、FlashMV及短片動(dòng)畫(huà)等,此外其所表現(xiàn)的形式中存在一定的交互性。但需要注意的是,在實(shí)施網(wǎng)頁(yè)設(shè)計(jì)時(shí),避免繁瑣、復(fù)雜的動(dòng)畫(huà)設(shè)計(jì)效果的存在,畢竟物極必反,只會(huì)降低網(wǎng)頁(yè)的品質(zhì);如圖1所示。2.1網(wǎng)頁(yè)動(dòng)畫(huà)信息交互的實(shí)現(xiàn)為了進(jìn)一步卻寶寶網(wǎng)頁(yè)動(dòng)畫(huà)信息交互整體的流暢性,其中的一個(gè)重要關(guān)鍵就是Flash動(dòng)畫(huà)導(dǎo)航的交互性設(shè)計(jì)。在對(duì)該部分內(nèi)容進(jìn)行設(shè)計(jì)時(shí),往往會(huì)使用針對(duì)性的Flash動(dòng)畫(huà)腳本——AxtionScript。實(shí)際設(shè)計(jì)過(guò)程中,通常由編程者的思想與Flash在事件中作用共同形成動(dòng)力,并依據(jù)動(dòng)畫(huà)中的相應(yīng)內(nèi)容實(shí)現(xiàn)AxtionScript的具體化定義。2.2網(wǎng)頁(yè)動(dòng)畫(huà)相關(guān)要素的設(shè)計(jì)第一,交互式導(dǎo)航系統(tǒng)。在網(wǎng)頁(yè)設(shè)計(jì)中,導(dǎo)航欄對(duì)用戶(hù)主要起到一種引導(dǎo)性作用。所以在設(shè)計(jì)時(shí)需要將其設(shè)計(jì)為多個(gè)導(dǎo)航級(jí)別,并構(gòu)建針對(duì)性的標(biāo)識(shí)來(lái)將其區(qū)分,以色彩為例,可以采用較為鮮艷、清爽式的搭配。第二,Web圖像動(dòng)畫(huà)形式展示。傳統(tǒng)網(wǎng)頁(yè)中,Web圖像主要呈現(xiàn)靜態(tài),不過(guò)經(jīng)由計(jì)算機(jī)技術(shù)的不斷發(fā)展,最近幾年在網(wǎng)頁(yè)設(shè)計(jì)中漸漸出現(xiàn)了一部分動(dòng)態(tài)化的Web圖像。同時(shí)在其色彩方面的運(yùn)用,主要采用RGB模板,并在網(wǎng)頁(yè)安全色方面運(yùn)用216色,其主要的色彩格式包括GIF、PNG以及JPE6。第三,鼠標(biāo)動(dòng)畫(huà)。為了實(shí)現(xiàn)優(yōu)質(zhì)化Flash動(dòng)畫(huà)效果,在制作動(dòng)畫(huà)效果時(shí)要特別注意鼠標(biāo)在移動(dòng)過(guò)程中其軌跡圖案及色彩搭配。首先,要確保鼠標(biāo)移動(dòng)過(guò)程中的色彩與網(wǎng)頁(yè)設(shè)計(jì)色彩是不同的,有助于用戶(hù)一眼就可以將鼠標(biāo)找到。最后就是,鼠標(biāo)在色彩區(qū)別網(wǎng)頁(yè)之后還要注意其透明性,避免遮蔽信息的現(xiàn)象出現(xiàn)。

3結(jié)語(yǔ)

綜合全文內(nèi)容,在網(wǎng)站設(shè)計(jì)過(guò)程中,Flash作為一個(gè)極具重要性的視覺(jué)性元素,其可以在幫助網(wǎng)站實(shí)現(xiàn)多媒體化效果展示的同時(shí),還能夠結(jié)合數(shù)據(jù)通信這一 措施 全面性豐富網(wǎng)站自身具備的素材及資源,最終達(dá)到一種動(dòng)態(tài)化的效果。截至今日,由于計(jì)算機(jī)技術(shù)發(fā)展速度不斷提升,結(jié)合Flash自身所具備的多種優(yōu)質(zhì)化特征,筆者相信在今后人們的日常生活中,Flash動(dòng)畫(huà)一定可以獲得更加廣泛的用途,更具普遍性,最終實(shí)現(xiàn)網(wǎng)頁(yè)設(shè)計(jì)的主體化運(yùn)用趨勢(shì)。

網(wǎng)頁(yè)設(shè)計(jì)畢業(yè)論文文獻(xiàn)

[1]喬慧.Flash動(dòng)畫(huà)在網(wǎng)頁(yè)制作中的應(yīng)用及發(fā)展[J].內(nèi)蒙古石油化工,2013(21):68.

[2]關(guān)曉軒.Flash動(dòng)畫(huà)在網(wǎng)頁(yè)制作中的應(yīng)用研究[J].北方文學(xué)(下旬),2012(11):91-93.

網(wǎng)頁(yè)設(shè)計(jì)畢業(yè)論文篇二：《響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)原型研究》

網(wǎng)頁(yè)設(shè)計(jì)畢業(yè)論文內(nèi)容

當(dāng)今，移動(dòng)互聯(lián)網(wǎng)迅猛發(fā)展，各種智能設(shè)備層出不窮。傳統(tǒng)網(wǎng)頁(yè)設(shè)計(jì)采用“固定頁(yè)面及元素寬度，任何終端統(tǒng)一頁(yè)面效果”的策略，無(wú)疑將造成網(wǎng)頁(yè)在一些新興移動(dòng)終端上顯示的文字極小、鏈接分布極密，用戶(hù)需要在屏幕上不停操作來(lái)自主尋求較好的體驗(yàn)。面對(duì)這一弊端，網(wǎng)頁(yè)設(shè)計(jì)師聚焦于“響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)”這一關(guān)鍵詞，試圖使用一套代碼為各類(lèi)終端設(shè)備提供不同的設(shè)計(jì)和體驗(yàn)。從先前“為固定設(shè)備設(shè)計(jì)網(wǎng)頁(yè)”跨越到“響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)”是一個(gè)較難的過(guò)程。一些新手可能已經(jīng)積攢了諸如媒體查詢(xún)、流式布局、彈性圖片等零散的設(shè)計(jì)開(kāi)發(fā)技巧，掌握了HTML5和CSS3的使用 方法 ，但他們依然無(wú)法駕馭響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)。造成這種情況的直接原因就在于缺乏一個(gè)能夠指導(dǎo)他們立即開(kāi)展響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)實(shí)踐的可操作流程，即原型。

1兩個(gè)關(guān)鍵概念：響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)與原型

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)(RWD，Responsive網(wǎng)頁(yè)Design)是一種網(wǎng)頁(yè)前端開(kāi)發(fā)技術(shù)，它可以描述為，“兼顧多種不同設(shè)備屏幕尺寸、分辨率、系統(tǒng)平臺(tái)和行為做出相應(yīng)的調(diào)整和布局的顯示機(jī)制”。原型(Prototype)，也叫“原樣”，是“模擬科學(xué)”中的一個(gè)術(shù)語(yǔ)。在心理科學(xué)中，由于很難對(duì)動(dòng)作或心智活動(dòng)認(rèn)識(shí)清楚，所以一般沿用J?R?安德森的觀點(diǎn)，把原型(Prototype)視為關(guān)于范疇的最典型的樣例設(shè)想，即把“原型”視為外化的實(shí)踐模式，或“物質(zhì)化”了的心智活動(dòng)方式或操作活動(dòng)程序。綜合上述，響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)原型可描述為：符合“響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)項(xiàng)目分析、各類(lèi)終端具有適合自身用戶(hù)體驗(yàn)的不同頁(yè)面效果、一套代碼完成所有不同終端的網(wǎng)頁(yè)制作、各類(lèi)終端與主流瀏覽器良好兼容”等一系列規(guī)則的，外化的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)活動(dòng)實(shí)踐模式。

2建構(gòu)響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的原型

建構(gòu)原型一般采用心理模擬法，它包含三個(gè)步驟：

(1)響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)活動(dòng)的功能分析;

(2)響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)活動(dòng)的結(jié)構(gòu)分析;

(3)功能分析與結(jié)構(gòu)分析的有機(jī)結(jié)合。其中，功能分析的重點(diǎn)是作用的對(duì)象，條件與結(jié)果;結(jié)構(gòu)分析的重點(diǎn)在于組成要素及要素之間的關(guān)系。響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的目標(biāo)是能夠高效的編寫(xiě)一套代碼為各類(lèi)終端設(shè)備提供良好的設(shè)計(jì)效果和使用體驗(yàn)，這需要具備HTML5、CSS3、Javascript和jquery的基本技能。響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)之父——伊桑.馬科特認(rèn)為，響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)應(yīng)該首先針對(duì)小屏幕進(jìn)行設(shè)計(jì)，然后逐步增強(qiáng)針對(duì)大屏幕設(shè)計(jì)。這種思路顛覆了傳統(tǒng)固定寬度的網(wǎng)頁(yè)設(shè)計(jì)方法，對(duì)于那些已經(jīng)積攢了零散的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)開(kāi)發(fā)技巧、HTML5及CSS3等技術(shù)，能夠較熟練的完成固定寬度桌面端網(wǎng)頁(yè)的新手而言，恐怕很難理解從小屏幕開(kāi)始設(shè)計(jì)然后漸進(jìn)增強(qiáng)的思路?？紤]到新手已經(jīng)習(xí)慣設(shè)計(jì)制作固定寬度的桌面版網(wǎng)頁(yè)，響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)如果從固定寬度的大屏幕網(wǎng)頁(yè)制作開(kāi)始，然后改造這套代碼將僅適用于桌面的網(wǎng)頁(yè)依次兼容平板端和手機(jī)端也是一個(gè)不錯(cuò)的思路。響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)活動(dòng)包含了“項(xiàng)目分析”、“網(wǎng)頁(yè)平面設(shè)計(jì)”、“桌面版網(wǎng)頁(yè)制作”、“平面版的改造”、“手機(jī)版的改造”及“兼容問(wèn)題的調(diào)試”這6個(gè)典型的子活動(dòng)。這些典型要素的關(guān)系可以描述為，“要想高效的完成某響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)項(xiàng)目，首先需要項(xiàng)目分析，其階段性結(jié)果是響應(yīng)式網(wǎng)頁(yè)的總體方案，即在用戶(hù)群體需求分析及主題解讀的基礎(chǔ)上，進(jìn)行色彩分析及定位，確定UI版面布局，分析設(shè)計(jì)網(wǎng)頁(yè)功能模塊，確定網(wǎng)頁(yè)風(fēng)格等，最終形成包含“前言”、“需求分析”、“系統(tǒng)分析”、“風(fēng)格設(shè)計(jì)”、“各類(lèi)終端UI版面初步布局”、“色彩定位”、“網(wǎng)頁(yè)建設(shè)日程規(guī)劃”等部分的網(wǎng)頁(yè)總體方案文檔;然后，根據(jù)前期方案中“色彩”、“風(fēng)格”及“各類(lèi)終端UI版面布局”等的分析，依據(jù)頁(yè)面設(shè)計(jì)原則，利用photoshop繪制適用于各類(lèi)終端顯示的平面效果圖;隨后，利用“HTML5+Css3”技術(shù)采用div+css布局完成固定寬度桌面版網(wǎng)頁(yè)的制作并生成網(wǎng)頁(yè)文件和樣式表文件;接著，在這套代碼的基礎(chǔ)上，利用媒體查詢(xún)技術(shù)、流式布局、彈性圖片技術(shù)，結(jié)合平板終端的頁(yè)面效果圖將代碼改造成兼容桌面及平板的網(wǎng)頁(yè);之后，在上述修改的基礎(chǔ)上，繼續(xù)利用媒體查詢(xún)技術(shù)和彈性圖片技術(shù)，結(jié)合手機(jī)終端的頁(yè)面效果圖將代碼改造成兼容桌面、平板、手機(jī)的網(wǎng)頁(yè);最后，利用火狐和IETester軟件查看初步完成的響應(yīng)式網(wǎng)頁(yè)，解決跨瀏覽器的兼容問(wèn)題，形成完整網(wǎng)站。該過(guò)程中任何環(huán)節(jié)如果出現(xiàn)不妥當(dāng)都應(yīng)該返回上個(gè)步驟進(jìn)行重新修改。結(jié)合上述對(duì)網(wǎng)頁(yè)設(shè)計(jì)活動(dòng)的功能與結(jié)構(gòu)分析，不難發(fā)現(xiàn)，響應(yīng)式Web設(shè)計(jì)活動(dòng)原型中的6個(gè)典型子活動(dòng)復(fù)雜程度不同。其中“桌面版網(wǎng)頁(yè)制作”、“平面版的改造”、“手機(jī)版的改造”及“兼容問(wèn)題的調(diào)試”這4個(gè)典型子活動(dòng)是比較復(fù)雜的，包含了很多熟手的關(guān)鍵技術(shù)，需要進(jìn)一步闡述。

3熟手的關(guān)鍵技術(shù)

從上述適用于新手的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)活動(dòng)基本原型發(fā)現(xiàn)，制作一個(gè)能夠兼容主流瀏覽器的固定寬度桌面版網(wǎng)頁(yè)是響應(yīng)式網(wǎng)頁(yè)制作的開(kāi)端。那么，首先在“桌面版網(wǎng)頁(yè)制作”這個(gè)環(huán)節(jié)中提取一些熟手關(guān)鍵技術(shù)，作為給予新手的技巧提示。

3.1兼容主流瀏覽器的桌面版網(wǎng)頁(yè)制作技術(shù)

為了防止不同瀏覽器給予相同HTML5標(biāo)簽的初始樣式存在差異，熟手利用HTML5+CSS3制作桌面版網(wǎng)頁(yè)制作時(shí)，一般會(huì)在樣式文件(擴(kuò)展名.css)中給出如下初始化代碼：*{margin：0px;padding:0px;}body{margin:0px;padding:0px;text-align:center;font-family:"宋體";font-size:16px;color:#cccccc;}ul,li,a{margin:0px;padding:0px;list-style:none;}div{overflow:hidden;float:left;}#wrapper{width:1007px;height:auto;margin-left:auto;margin-right:auto;overflow:hidden;clear:both;}這部分代碼塊可以實(shí)現(xiàn)頁(yè)面在IE內(nèi)核和Firefox內(nèi)核的所有版本瀏覽器中居中對(duì)齊，外層布局盒子與瀏覽器頭部無(wú)縫緊貼;div及css3完成固定寬度布局時(shí)，默認(rèn)所有內(nèi)部布局div向左浮動(dòng)，溢出屬性為隱藏;所有構(gòu)成頁(yè)面的HTML5元素的默認(rèn)邊距和填充屬性為0px;HTML5的列表標(biāo)簽?zāi)J(rèn)項(xiàng)目符號(hào)為空，邊距和填充為0px。此外，確定頁(yè)面尺寸,目前大多數(shù) 顯示器 為1024像素*768像素，那么以此為默認(rèn)顯示器時(shí)，頁(yè)面的寬度尺寸一般設(shè)置為“1007像素”。初始化CSS代碼后，接下來(lái)就是利用div+CSS完成布局，這里提示新手：完成布局后，務(wù)必在IETESTER和Firefox中檢查網(wǎng)頁(yè)布局是否能夠兼容主流瀏覽器。然后，根據(jù)桌面版網(wǎng)頁(yè)平面設(shè)計(jì)效果圖完成頁(yè)面的制作。此外，熟手的 經(jīng)驗(yàn) 是制作過(guò)程中頻繁檢測(cè)桌面版網(wǎng)頁(yè)是否能夠完美兼容各種瀏覽器。

3.2利用流式布局、彈性圖片、媒體查詢(xún)技術(shù)修改桌面版網(wǎng)頁(yè)

(1)相對(duì)視口尺寸，將最外層的布局div(例如：#wrapper{width:1007px;...})的寬度設(shè)置為96%(這個(gè)值取決于當(dāng)前頁(yè)面的視覺(jué)效果，也可以給其他數(shù)值);然后，將最外層的布局div內(nèi)部的頁(yè)頭布局div、導(dǎo)航布局div、內(nèi)容布局div、側(cè)邊欄布局div、頁(yè)腳布局div對(duì)應(yīng)的CSS樣式中的width屬性值利用公式——目標(biāo)元素寬度÷上下文元素寬度=百分比寬度把網(wǎng)頁(yè)的固定布局修改成百分比布局，也就是將固定像素寬度轉(zhuǎn)換成對(duì)應(yīng)的百分比寬度。

(2)將頁(yè)面中所有HTML5標(biāo)簽元素對(duì)應(yīng)的CSS樣式表中的margin-right、margin-left、padding-right、padding-left的屬性值也用公式——目標(biāo)元素寬度÷上下文元素寬度=百分比寬度來(lái)修改。

(3)將CSS樣式表中的font-size屬性值的單位用em來(lái)代替px。這里依然使用公式——目標(biāo)元素寬度÷上下文元素寬度=百分比寬度。這里需要提示新手的是：在body標(biāo)簽的初始化代碼中，如果有font-size:16px;語(yǔ)句，那么在給其他元素的font-size屬性上修改值時(shí)，公式中的“上下文元素寬度”就等于16px，例如，#logo{font-size:48px;}現(xiàn)在要修改為#logo{font-size:3em;}。

(4)為了實(shí)現(xiàn)彈性圖片，讓圖片隨視口縮放，圖形圖像、動(dòng)畫(huà)和視頻的彈性設(shè)置使用“img,object,video,embed{width:100%;max-width:100%;}”。其中，max-width屬性是用于確?？s放時(shí)不會(huì)超出圖片最大尺寸。同時(shí)，熟手還會(huì)使用AdaptiveImages解決方案來(lái)實(shí)現(xiàn)自適應(yīng)圖片。

(5)媒體查詢(xún)可以通過(guò)判斷不同設(shè)備終端，提供不同的樣式使其實(shí)現(xiàn)在不同終端都能獲得最佳的用戶(hù)體驗(yàn)。例如，某個(gè)響應(yīng)式頁(yè)面用電腦瀏覽頁(yè)面時(shí)，頁(yè)面信息會(huì)以平鋪的形式分布在頁(yè)面合適的位置;用手機(jī)瀏覽頁(yè)面時(shí)，導(dǎo)航按鈕會(huì)相繼隱藏起來(lái)，部分信息變成左右滑動(dòng)的方式呈現(xiàn)，頁(yè)面會(huì)重新布局，圖片相應(yīng)縮小。媒介查詢(xún)的語(yǔ)法格式是，例如：設(shè)定寬度不超過(guò)400像素的屏幕尺寸，代碼是：linkhref="css/phone.css"rel="stylesheet"type="text/css"media="onlyscreenand(max-width:400px)"。雖然，HTML5+CSS3提供了良好的媒體查詢(xún)功能，但當(dāng)前仍有一些瀏覽器不支持，你可能需要添加如下基本樣式：!--[ifltIE9!IEMobile]linkhref="iestyles.css"rel="stylesheet"type="text/css"![endif]--3.3不同種類(lèi)、不同版本瀏覽器的兼容問(wèn)題解決跨越瀏覽器的問(wèn)題一直是響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的難題。熟手面對(duì)這一問(wèn)題時(shí)，一般采用“漸進(jìn)增強(qiáng)與降級(jí)”、“利用javascript修復(fù)老版本IE”、“使用Modernizr輔助修正樣式，按需加載資源”、“給IE6，7，8追加媒體查詢(xún)功能”等方法。

4結(jié)束語(yǔ)

對(duì)響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)而言，當(dāng)前的設(shè)計(jì)理念和技術(shù)方法還不是終點(diǎn),網(wǎng)站前端設(shè)計(jì)師需要繼續(xù)努力找出更好的解決方案。而對(duì)新手學(xué)習(xí)者而言，響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)開(kāi)發(fā)技能的形成不是一蹴而就的，還需要學(xué)習(xí)者在多個(gè)項(xiàng)目中，利用原型進(jìn)行多次定向、操作及內(nèi)化才能真正掌握。

網(wǎng)頁(yè)設(shè)計(jì)畢業(yè)論文篇三：《網(wǎng)頁(yè)設(shè)計(jì)中的版式設(shè)計(jì)》

摘 要：版式設(shè)計(jì)可以說(shuō)是界面設(shè)計(jì)的基礎(chǔ)部分，網(wǎng)頁(yè)界面中的版式設(shè)計(jì)只是其發(fā)展應(yīng)用中的一個(gè)方向。如何設(shè)計(jì)完美有魅力的網(wǎng)頁(yè)界面，版式設(shè)計(jì)扮演十分重要的角色，優(yōu)秀的版式設(shè)計(jì)可以給瀏覽者留下深刻的印象，提高頁(yè)面的訪(fǎng)問(wèn)量。因此，本文將向諸位讀者介紹在CDIO工程 教育 模式下，網(wǎng)頁(yè)設(shè)計(jì)課程中采用項(xiàng)目為指導(dǎo)的教學(xué)實(shí)踐過(guò)程中注意的事項(xiàng)。

關(guān)鍵詞：網(wǎng)頁(yè)設(shè)計(jì);版式設(shè)計(jì) CDIO教育模式;項(xiàng)目教學(xué)

近年來(lái)隨著經(jīng)濟(jì)的高速發(fā)展，科技的日新月異，教育領(lǐng)域同樣面臨革新。引進(jìn)新的教育理念和教學(xué)模式成為教育工作者的關(guān)注重心，此時(shí)，歐美成熟的工程教育理念慢慢地進(jìn)入我們的視野之中，CDIO的教學(xué)模式(Conceive構(gòu)思、Design設(shè)計(jì)、Implement實(shí)施、Operate運(yùn)行)，符合工程人才的培養(yǎng)，提高學(xué)生的實(shí)踐能力、組織能力、創(chuàng)新能力。這一模式更適應(yīng)當(dāng)下的教育環(huán)境需求。

網(wǎng)頁(yè)設(shè)計(jì)這門(mén)課程屬于交叉學(xué)科范疇，兼顧藝術(shù)設(shè)計(jì)、計(jì)算機(jī)技術(shù)及交互設(shè)計(jì)等多門(mén)學(xué)科。另外，這門(mén)課程作為藝術(shù)與技術(shù)的結(jié)合體，要求學(xué)生具備較強(qiáng)實(shí)踐動(dòng)手能力與綜合運(yùn)用能力，因而在教學(xué)過(guò)程中我們依據(jù)CDIO的工程教育理念開(kāi)展教學(xué)。

本文重點(diǎn)談到的是網(wǎng)頁(yè)設(shè)計(jì)中的版式設(shè)計(jì)過(guò)程，網(wǎng)頁(yè)中的版式設(shè)計(jì)起到信息統(tǒng)一、分割區(qū)域和交互導(dǎo)引的作用，是在有限的空間界面內(nèi)將文字、圖形、背景色彩或圖案及交互功能集成在方圓之間，根據(jù)設(shè)計(jì)的形式法則，利用藝術(shù)美學(xué)與科學(xué)技術(shù)相結(jié)合的方式來(lái)實(shí)現(xiàn)效果展示。下面以教學(xué)過(guò)程中的“xx藝術(shù)系網(wǎng)站”項(xiàng)目為例，以網(wǎng)頁(yè)設(shè)計(jì)中的版式設(shè)計(jì)為內(nèi)容，展示教學(xué)過(guò)程中的各個(gè)設(shè)計(jì)階段。

1 構(gòu)思階段

(1)確立目標(biāo)。

網(wǎng)頁(yè)設(shè)計(jì)不是盲目的行為，不是簡(jiǎn)單使用軟件的行為，它是構(gòu)思由確立到實(shí)現(xiàn)的過(guò)程，是一種展示到體會(huì)的過(guò)程。因此，在設(shè)計(jì)之初，教師需要引導(dǎo)學(xué)生了解當(dāng)前的課題，明確網(wǎng)站要做什么，網(wǎng)站的外觀布局是什么樣子，網(wǎng)站需要營(yíng)造何種氛圍。我們常見(jiàn)的網(wǎng)站根據(jù)用途分類(lèi)為企業(yè)網(wǎng)站、電子商務(wù)網(wǎng)站、電子政務(wù)網(wǎng)站、文體娛樂(lè)網(wǎng)站、教育科學(xué)網(wǎng)站等，每種類(lèi)型的網(wǎng)站都有自己需要傳播的信息，根據(jù)所需文字與圖片選擇適合的排版方式，進(jìn)而營(yíng)造恰當(dāng)?shù)姆諊Ｔ凇皒x藝術(shù)系網(wǎng)站”項(xiàng)目中，學(xué)生會(huì)根據(jù)實(shí)際項(xiàng)目類(lèi)型，理解項(xiàng)目設(shè)計(jì)目標(biāo)為，該學(xué)院所屬系部信息服務(wù)類(lèi)網(wǎng)站，界面版式方面要求簡(jiǎn)潔大方，色彩明快，塑造清新、愉悅的氛圍，學(xué)生可以根據(jù)以上內(nèi)容展開(kāi)進(jìn)一步的設(shè)計(jì)工作。

(2)信息整理。

項(xiàng)目開(kāi)展前期根據(jù)對(duì)項(xiàng)目的簡(jiǎn)單分析，要求學(xué)生對(duì)客戶(hù)或相關(guān)人士展開(kāi)訪(fǎng)談，對(duì)行業(yè)同類(lèi)網(wǎng)站的資訊開(kāi)展收集與調(diào)研。這一階段學(xué)生會(huì)接觸網(wǎng)頁(yè)設(shè)計(jì)的需求方，在本項(xiàng)目中可以設(shè)定為系內(nèi)行政人員、教師及系內(nèi)學(xué)生，根據(jù)訪(fǎng)談或調(diào)研可以得到網(wǎng)站相關(guān)設(shè)計(jì)信息，如對(duì)整體風(fēng)格的需求，導(dǎo)航的設(shè)計(jì)需求，網(wǎng)站類(lèi)型為靜態(tài)網(wǎng)站或動(dòng)態(tài)網(wǎng)站，根據(jù)需求結(jié)果，要求學(xué)生設(shè)計(jì)多樣的版式效果，以供客戶(hù)參考。

(3)交互設(shè)計(jì)。

我們將網(wǎng)頁(yè)中的交互分為視覺(jué)上的交互和行為功能上的交互設(shè)計(jì)。在這里我們更側(cè)重說(shuō)明交互在視覺(jué)上的應(yīng)用。網(wǎng)頁(yè)中我們常見(jiàn)的交互形態(tài)有按鈕、導(dǎo)航條、搜索欄和表單等。這些交互形態(tài)都會(huì)出現(xiàn)在版式的突出及顯著位置，這樣更引發(fā)人們的視覺(jué)關(guān)注中心，因而，在進(jìn)行版式設(shè)計(jì)時(shí)，需要考慮這些交互元素的設(shè)置，友好的版式也是一種界面與人的情感交互。在我們的項(xiàng)目中學(xué)生應(yīng)該考慮交互按鈕的外觀設(shè)計(jì)，排放位置等因素;導(dǎo)航條的設(shè)置應(yīng)在醒目位置，清晰明確發(fā)揮導(dǎo)引作用;搜索欄幫助瀏覽者快捷搜索，放置在易發(fā)現(xiàn)的位置，搜索一般出現(xiàn)在網(wǎng)頁(yè)右上角;表單設(shè)計(jì)是學(xué)生所忽略的環(huán)節(jié)，因?yàn)榭梢允褂貌寮砑樱瑢?dǎo)致學(xué)生認(rèn)為無(wú)須設(shè)計(jì)，在此建議信息表單設(shè)計(jì)時(shí)可考慮細(xì)節(jié)設(shè)計(jì)，提高友好度與舒適度等交互設(shè)計(jì)。

2 設(shè)計(jì)階段

版式設(shè)計(jì)是網(wǎng)頁(yè)設(shè)計(jì)中重要的設(shè)計(jì)引導(dǎo)規(guī)劃環(huán)節(jié)，在這個(gè)過(guò)程中學(xué)生可以根據(jù)自己的項(xiàng)目主題展開(kāi)藝術(shù)美感的設(shè)計(jì)。一般進(jìn)行頁(yè)面版式設(shè)計(jì)我們從以下幾個(gè)方面入手。

(1)版式結(jié)構(gòu)設(shè)計(jì)。

網(wǎng)頁(yè)設(shè)計(jì)中的版式設(shè)計(jì)與傳統(tǒng)媒介中的版式設(shè)計(jì)略有不同，前提是他們都遵循版式設(shè)計(jì)五原則，[1]內(nèi)容與形式，簡(jiǎn)潔與簡(jiǎn)約，設(shè)計(jì)與藝術(shù)，趣味與獨(dú)特，局部與整體。為了設(shè)計(jì)富有形式法則和藝術(shù)美感的網(wǎng)頁(yè)作品，版式設(shè)計(jì)方面通常會(huì)采用黃金比例和三分法排列原則。黃金比例法是初學(xué)者易于掌控的方法，將視窗可用區(qū)域分成兩個(gè)部分，也可以根據(jù)設(shè)計(jì)比例需求，將數(shù)字錄入到相關(guān)計(jì)算網(wǎng)站，得出合適的黃金比例分配方案。三分法構(gòu)圖排版方式，是將排版界面分成三份，根據(jù)內(nèi)容的不同，選擇不同的三分法排列位置。

網(wǎng)頁(yè)設(shè)計(jì)中由于要考慮顯示器視窗顯示水平不同，我們的總體版式設(shè)計(jì)會(huì)采用固定格式或非固定格式兩種形式。固定格式的版面是固定的界面版式，而非固定格式的版面設(shè)計(jì)是變化的，這種變化的版式很難把握的，變化的視窗將改變既定的字體形式和圖形排列位置，這個(gè)課題也是我們今后要深入探討的方向。

(2)字體、圖像、色彩設(shè)計(jì)。

版式設(shè)計(jì)是界面設(shè)計(jì)的骨架，字體設(shè)計(jì)是界面設(shè)計(jì)的血肉，富媒體技術(shù)的全面發(fā)展，網(wǎng)站這一綜合載體也得到了極大的發(fā)展，版式與字體的結(jié)合構(gòu)成了網(wǎng)頁(yè)的不同風(fēng)貌。在網(wǎng)頁(yè)中常見(jiàn)字體分為中英文兩類(lèi)和圖形化的藝術(shù)字體，字號(hào)一般選用12pt。在中文網(wǎng)頁(yè)常常出現(xiàn)的字體為宋體或黑體，字號(hào)為12pt/14pt的文字展示，另外也會(huì)有些超大字體以圖像的形態(tài)出現(xiàn)，并通過(guò)視覺(jué)效果的調(diào)整，創(chuàng)建三維空間的視覺(jué)展示效果。圖形化的藝術(shù)字體，在諸多網(wǎng)站中得到應(yīng)用。在設(shè)計(jì)中我們題材保有傳統(tǒng)的 文化 性，中國(guó)元素的運(yùn)用，如書(shū)法、圖騰、建筑等富有中國(guó)色彩的藝術(shù)形態(tài)都應(yīng)得到我們的思考與關(guān)注，中西文化的比較與融合也是我們要探索的方向。圖形與色彩部分在排版中應(yīng)適合主題，響應(yīng)設(shè)計(jì)氛圍，為整體版式服務(wù)。

(3)視頻展示設(shè)計(jì)。

網(wǎng)頁(yè)界面排版中還需考慮一種新興的展示手段，視頻信息展示，頁(yè)面中利用大量的視頻信息排版，減少文字、圖片信息的輸入，信息傳達(dá)方式由靜態(tài)轉(zhuǎn)換為動(dòng)態(tài)，提供有趣而新穎的排版展示方式。

3 技術(shù)實(shí)施

(1)界面版式視覺(jué)設(shè)計(jì)。

網(wǎng)頁(yè)設(shè)計(jì)中對(duì)靜態(tài)界面的布局，我們通常會(huì)使用Photoshop和Illustrator圖像處理軟件開(kāi)展設(shè)計(jì)，首先我們會(huì)根據(jù) 思維導(dǎo)圖 繪制基礎(chǔ)模板，然后根據(jù)設(shè)計(jì)需求在模板中添加設(shè)計(jì)好的文字、圖形、視頻、聲音等設(shè)計(jì)元素。

(2)交互功能視覺(jué)設(shè)計(jì)。

在網(wǎng)頁(yè)設(shè)計(jì)中我們會(huì)考慮將靜態(tài)樣稿轉(zhuǎn)換為簡(jiǎn)單的靜態(tài)網(wǎng)頁(yè)，這種轉(zhuǎn)換我們會(huì)使用Dreamweaver軟件進(jìn)行操作，由于網(wǎng)頁(yè)展示設(shè)備的不同我們也會(huì)考慮采用一些相關(guān)的模型制作軟件來(lái)處理交互設(shè)計(jì)部分。

4 運(yùn)行階段

將確定好的靜態(tài)草稿通過(guò)切圖生成為靜態(tài)網(wǎng)站，測(cè)試效果及功能，當(dāng)運(yùn)行時(shí)根據(jù)需要和視覺(jué)效果進(jìn)行調(diào)整直到理想狀態(tài)。

5 小結(jié)

網(wǎng)頁(yè)設(shè)計(jì)課程將實(shí)際項(xiàng)目導(dǎo)入課堂，根據(jù)CDIO工程教育模式教學(xué)，打造有效、有趣、實(shí)用的教學(xué)方式，使學(xué)生在學(xué)習(xí)操作中鍛煉宏觀思考的能力，獲得團(tuán)隊(duì)合作的能力，養(yǎng)成終身學(xué)習(xí)的能力。學(xué)生對(duì)設(shè)計(jì)流程的掌握就是對(duì)知識(shí)體系的掌握和運(yùn)用，達(dá)到理論與實(shí)踐相結(jié)合，通過(guò)對(duì)版面的全面掌控，更好地為靜態(tài)網(wǎng)頁(yè)設(shè)計(jì)打下堅(jiān)實(shí)的基礎(chǔ)。

參考文獻(xiàn)：

[1] 沈卓婭，王汀.字體與版式設(shè)計(jì)實(shí)訓(xùn)[M].中國(guó)出版集團(tuán)東方出版中心，2011：74.

猜你喜歡：

1. 網(wǎng)站設(shè)計(jì)畢業(yè)論文范文

2. 網(wǎng)站類(lèi)畢業(yè)設(shè)計(jì)論文

3. 淺談廣告設(shè)計(jì)畢業(yè)論文范文

4. 關(guān)于網(wǎng)絡(luò)工程畢業(yè)論文范文

5. 關(guān)于計(jì)算機(jī)畢業(yè)論文范文大全

6. 計(jì)算機(jī)畢業(yè)論文范文大全

用ASP制作網(wǎng)頁(yè)的實(shí)訓(xùn)報(bào)告總結(jié)

1. 實(shí)習(xí)內(nèi)容及知識(shí)應(yīng)用

1.1實(shí)訓(xùn)內(nèi)容以及進(jìn)程安排

實(shí)訓(xùn)內(nèi)容：動(dòng)態(tài)網(wǎng)站制作的學(xué)習(xí)及動(dòng)態(tài)網(wǎng)站的制作

這次在3名指導(dǎo)老師的帶領(lǐng)下，我們主要學(xué)習(xí)了用2種現(xiàn)在比較流行的動(dòng)態(tài)網(wǎng)站開(kāi)發(fā)平臺(tái)來(lái)開(kāi)發(fā)網(wǎng)站：JSP平臺(tái)與ASP.NET平臺(tái)；JSP平臺(tái)方面主要通過(guò)XX老師示范制作myblog個(gè)人博客網(wǎng)站而學(xué)習(xí)JSP平臺(tái)的搭建、數(shù)據(jù)庫(kù)的連接、網(wǎng)站測(cè)試等內(nèi)容；而ASP.NET平臺(tái)主要通過(guò)XX老師和XX2位老師的指導(dǎo)，學(xué)習(xí)并搭建了ASP.NET平臺(tái)，掌握了網(wǎng)頁(yè)三劍客制作動(dòng)態(tài)網(wǎng)站的基本常識(shí)與方法，以及數(shù)據(jù)庫(kù)的連接、網(wǎng)站測(cè)試及Photoshop處理圖片等內(nèi)容

：

進(jìn)程安排

日期

日程安排

08年7月28日 確定小組組員，小組成員為：XX（組長(zhǎng)），XX（組員）

08年7月29日 確定小組動(dòng)態(tài)網(wǎng)頁(yè)開(kāi)發(fā)平臺(tái)為ASP.NET

08年7月30日 確定網(wǎng)站要實(shí)現(xiàn)的功能①

08年7月31日-8月5日 制作BBS網(wǎng)站

08年8月6日 測(cè)試BBS網(wǎng)站

08年8月7日-08年8月15日 制作電子商務(wù)網(wǎng)站

08年8月16日-8月17日 測(cè)試電子商務(wù)網(wǎng)站

08年8月18日-8月20日 提交網(wǎng)站給指導(dǎo)老師，聽(tīng)取指導(dǎo)老師意見(jiàn)，完善網(wǎng)站

08年8月21日-8月22日 網(wǎng)站制作與小學(xué)期總結(jié)，寫(xiě)小學(xué)期文檔

08年8月23日 提交小學(xué)期文檔，小學(xué)期實(shí)訓(xùn)結(jié)束

說(shuō)明：①經(jīng)過(guò)討論，我們組決定建設(shè)2個(gè)網(wǎng)站來(lái)實(shí)現(xiàn)以下功能

網(wǎng)站1-BBS網(wǎng)站：在這個(gè)網(wǎng)站中，我們主要實(shí)現(xiàn)了站點(diǎn)日歷與站點(diǎn)搜索引擎2大功能。

網(wǎng)站2-電子商務(wù)網(wǎng)站：在這個(gè)網(wǎng)站中，我們主要實(shí)現(xiàn)了用戶(hù)注冊(cè)與登陸、購(gòu)物車(chē)的實(shí)現(xiàn)、訂單的顯示等頁(yè)面。

1.2知識(shí)（點(diǎn)）應(yīng)用以及經(jīng)驗(yàn)總結(jié)

這次制作2個(gè)網(wǎng)站主要應(yīng)用的知識(shí)有以下：

⒈ 數(shù)據(jù)庫(kù)的創(chuàng)建

① Access數(shù)據(jù)庫(kù)的創(chuàng)建

Acess提供2種數(shù)據(jù)庫(kù)創(chuàng)建方式：一種是創(chuàng)建一個(gè)空數(shù)據(jù)庫(kù)，然后編輯數(shù)據(jù)表的內(nèi)容；另一種使用數(shù)據(jù)庫(kù)自帶的模板創(chuàng)建；在動(dòng)態(tài)網(wǎng)頁(yè)面中，一般應(yīng)用第一種方式

② Access數(shù)據(jù)庫(kù)的打開(kāi)方式

包括打開(kāi)、只讀方式打開(kāi)、獨(dú)占方式打開(kāi)、只讀獨(dú)占方式打開(kāi)

③ 利用設(shè)計(jì)器設(shè)計(jì)Access數(shù)據(jù)庫(kù)

利用Access數(shù)據(jù)庫(kù)里的設(shè)計(jì)器設(shè)計(jì)Access數(shù)據(jù)庫(kù)

④ 使用向?qū)гO(shè)計(jì)Access數(shù)據(jù)庫(kù)

通過(guò)Access的向?qū)В?jīng)過(guò)一系列對(duì)話(huà)來(lái)設(shè)置Access數(shù)據(jù)庫(kù)

⑤ 通過(guò)輸入數(shù)據(jù)連接Access數(shù)據(jù)庫(kù)。

先輸入數(shù)據(jù)再確定字段

⒉ 數(shù)據(jù)庫(kù)的連接

① ODBC連接數(shù)據(jù)庫(kù)

打開(kāi)ODBC數(shù)據(jù)源管理器面板。 在windows XP中打開(kāi)控制面板，再打開(kāi)管理工具，找到數(shù)據(jù)源（ODBC），雙擊圖標(biāo)打開(kāi)管理器，選擇系統(tǒng)DSN。添加數(shù)據(jù)源，點(diǎn)擊添加按鈕，開(kāi)始創(chuàng)建數(shù)據(jù)源，在接下來(lái)的對(duì)話(huà)框中選擇數(shù)據(jù)源的驅(qū)動(dòng)程序，因我們使用的是Microsoft Access創(chuàng)建的數(shù)據(jù)庫(kù)，所以選擇Microsoft Access Driver(*.mdb)作為數(shù)據(jù)庫(kù)驅(qū)動(dòng)程序。點(diǎn)擊完成按鈕，填寫(xiě)數(shù)據(jù)源名，以簡(jiǎn)單易記為原則，這里我們以u(píng)serinfo（表名）來(lái)命名，注意不要沖突。說(shuō)明填不填都無(wú)所謂，是描述這個(gè)數(shù)據(jù)庫(kù)的用途而已。點(diǎn)擊選擇按鈕，選擇你的數(shù)據(jù)庫(kù)文件。找到自己想添加的數(shù)據(jù)庫(kù)，選中即可。

② OLEDB連接數(shù)據(jù)庫(kù)

在Dreamweaver 中,可以通過(guò)在連接字符串中包含 Provider 參數(shù)來(lái)創(chuàng)建 OLE DB 連接。打開(kāi)Dreameaver，在站點(diǎn)里面先新建個(gè)ASP頁(yè)面（index.asp）。 在“應(yīng)用程序”面板中選中“數(shù)據(jù)庫(kù)”標(biāo)簽。只要我們?cè)谇懊娼⒘苏军c(diǎn)，選擇了文檔類(lèi)型（即我們選的ASP Javascript的），并且還測(cè)試了服務(wù)器（）；則當(dāng)前我們看到就剩下第四步?jīng)]有打勾了。 那現(xiàn)在就點(diǎn)擊“+”號(hào)，選擇“自定義連接字符串”。在彈出來(lái)的“自定義連接字符串”對(duì)話(huà)框中，"連接名稱(chēng)"隨便寫(xiě)一個(gè)。“連接字符串”就要好好填寫(xiě)了。當(dāng)"使用此計(jì)算機(jī)上的驅(qū)動(dòng)程序"時(shí)應(yīng)用絕對(duì)路徑：DRIVER={Microsoft Access Driver (*.mdb)};DBQ=d: ewgndatabasecnbruce.mdb 否則“使用測(cè)試服務(wù)器上的驅(qū)動(dòng)程序”采用Mappath轉(zhuǎn)換路徑"Driver={Microsoft Access Driver (*.mdb)};DBQ=" server.mappath("/newgn/database/cnbruce.mdb"),點(diǎn)擊“測(cè)試”，出現(xiàn)成功對(duì)話(huà)框，成功連接數(shù)據(jù)庫(kù)后，在DW里其實(shí)是自動(dòng)生成了一個(gè)連接文件。位置在自動(dòng)生成的Connections文件夾中，名稱(chēng)是你剛才在“自定義連接字符串”隨便敲的為命名asp文件。還可以注意到DW數(shù)據(jù)庫(kù)標(biāo)簽內(nèi)看到mdb文件內(nèi)的各個(gè)字段。

⒊ 動(dòng)態(tài)網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)

① 記錄集的定義

分為簡(jiǎn)單記錄集定義與高級(jí)記錄集定義，簡(jiǎn)單記錄集的定義使用戶(hù)不必用SQL語(yǔ)句查詢(xún)而快速定義記錄集。高級(jí)記錄集定義則通過(guò)SQL語(yǔ)來(lái)定義記錄集。

② 記錄集的綁定

記錄集(查詢(xún))的綁定。在網(wǎng)頁(yè)中插入一個(gè)表單，并輸入需要插入到數(shù)據(jù)庫(kù)的相關(guān)內(nèi)容，然后通過(guò)記錄集（查詢(xún)）功能來(lái)實(shí)現(xiàn)表單和數(shù)據(jù)庫(kù)的相互協(xié)調(diào)使用，并實(shí)現(xiàn)“動(dòng)態(tài)”功能

③ 重復(fù)區(qū)域服務(wù)器行為

服務(wù)器行為其實(shí)一段VB代碼，為了方便用戶(hù)對(duì)記錄集的操作，DW中將常用代碼進(jìn)行封裝，命名為服務(wù)器行為。而重復(fù)區(qū)域服務(wù)器行為相當(dāng)于一個(gè)FOR循環(huán)函數(shù)

④ 設(shè)置記錄集導(dǎo)航條

添加記錄集導(dǎo)航條以分頁(yè)的方式用來(lái)顯示重復(fù)區(qū)域服務(wù)器行為顯示有限的記錄

⒋XML動(dòng)態(tài)網(wǎng)頁(yè)制作

① XSLT

XSLT 是一種用于將 XML 文檔轉(zhuǎn)換為 XHTML 文檔或其他 XML 文檔的語(yǔ)言，XSLT 用于將一種 XML 文檔轉(zhuǎn)換為另外一種 XML 文檔，或者可被瀏覽器識(shí)別的其他類(lèi)型的文檔，比如 HTML 和 XHTML。通常，XSLT 是通過(guò)把每個(gè) XML 元素轉(zhuǎn)換為 (X)HTML 元素來(lái)完成這項(xiàng)工作的。

⒌服務(wù)器的配置

① 站點(diǎn)存放點(diǎn)的創(chuàng)建

打開(kāi)電腦，在D盤(pán)下建立一文件夾newgn（這個(gè)夾子就是你的站點(diǎn)存放點(diǎn)了），并且在里面建幾個(gè)子文件夾（就好似你網(wǎng)站的子目錄）。

② 建立虛擬目錄

回到newgn的根目錄，右鍵選擇“共享和安全”（其實(shí)是快速地建立虛擬目錄）

③ 設(shè)置IIS的虛擬目錄

出現(xiàn)屬性對(duì)話(huà)框后，選擇“Web共享”標(biāo)簽，點(diǎn)選“共享文件夾”，出現(xiàn)共享別名對(duì)話(huà)框，選擇默然設(shè)置，確定即可

⒍利用Dreamweaver創(chuàng)建站點(diǎn)

選擇“編輯站點(diǎn)”，在彈出的屬性框中選“高級(jí)”標(biāo)簽，從“分類(lèi)”中先選“本地信息”，右窗口中設(shè)置站點(diǎn)名稱(chēng)，本地根文件夾，然后設(shè)置遠(yuǎn)程信息，訪(fǎng)問(wèn)選擇“本地/網(wǎng)絡(luò)”，遠(yuǎn)端文件夾仍選擇站點(diǎn)文件夾d: ewgn，再接著“測(cè)試服務(wù)器”，“服務(wù)器模型”暫為ASP vbscript，“訪(fǎng)問(wèn)”本地/網(wǎng)絡(luò)，“測(cè)試服務(wù)器文件夾”仍是站點(diǎn)文件夾d: ewgn，“URL前綴”在后面添加“newgn/”，添加的東西就是設(shè)置的虛擬目錄，這時(shí)，站點(diǎn)定義基本結(jié)束，點(diǎn)擊確定。出現(xiàn)“編輯站點(diǎn)”對(duì)話(huà)框，“完成”即可。

⒎利用FIREWORKS處理圖片

利用FIREWORKS處理一些圖片和制作一些GIF動(dòng)畫(huà)圖片

經(jīng)驗(yàn)總結(jié)：

利用Dreamweaver做ASP動(dòng)態(tài)網(wǎng)站主要為以下幾步：

①網(wǎng)站服務(wù)器配置

②數(shù)據(jù)庫(kù)設(shè)置

③數(shù)據(jù)庫(kù)顯示

④建立注冊(cè)系統(tǒng)

⑤建立登陸系統(tǒng)

⑥美化網(wǎng)站

2. 實(shí)習(xí)心得

{要求500字以上}

l 過(guò)程、功能需求、菜單設(shè)計(jì)、界面設(shè)計(jì)、數(shù)據(jù)庫(kù)設(shè)計(jì)、知識(shí)的應(yīng)用技巧、團(tuán)隊(duì)合作感受等(指導(dǎo)教師可按實(shí)習(xí)內(nèi)容進(jìn)行要求并自行增加內(nèi)容)

本次小學(xué)期期實(shí)訓(xùn)，我們小組主要制作了2個(gè)動(dòng)態(tài)網(wǎng)站,而制作這2個(gè)動(dòng)態(tài)網(wǎng)站的主要過(guò)程是：

⒈個(gè)人博客網(wǎng)站

①站點(diǎn)的定義

②數(shù)據(jù)庫(kù)的連接

③制作站點(diǎn)搜索引擎及搜索結(jié)果頁(yè)面

④制作日志列表

⑤制作BLOG首頁(yè)面，基本頁(yè)面設(shè)計(jì)

⑥定義并綁定記錄集

⑦界面的美化

⑧設(shè)置重復(fù)區(qū)域

⑨指定日期的日志內(nèi)容頁(yè)面

⑩日志具體內(nèi)容頁(yè)面-日志內(nèi)容和回復(fù)及日志回復(fù)功能

⒉電子商務(wù)網(wǎng)站

①站點(diǎn)的建立和連接字符串

②用戶(hù)登陸及用戶(hù)登陸信息顯示頁(yè)面

③錯(cuò)誤信息頁(yè)面設(shè)計(jì)

④創(chuàng)建模板

⑤添加登陸頁(yè)面的嵌入框架

⑥用戶(hù)注冊(cè)頁(yè)面的實(shí)現(xiàn)

⑦添加“密碼”比較驗(yàn)證的代碼

⑧制作最新產(chǎn)品導(dǎo)航條與滾動(dòng)產(chǎn)品導(dǎo)航條

⑨產(chǎn)品展示的實(shí)現(xiàn)

⑩用戶(hù)購(gòu)物車(chē)：限制用戶(hù)登陸、添加購(gòu)物車(chē)程序、購(gòu)物車(chē)鏈接、刪除購(gòu)物車(chē)

而這2個(gè)網(wǎng)站實(shí)現(xiàn)的功能大不相同，前者為一個(gè)博客網(wǎng)站，主要實(shí)現(xiàn)了站點(diǎn)搜索引擎、日志列表、站點(diǎn)日期等內(nèi)容；后者為一個(gè)電子商務(wù)網(wǎng)站，主要實(shí)現(xiàn)了用戶(hù)登陸、用戶(hù)注冊(cè)、密碼驗(yàn)證、產(chǎn)品展示以及用戶(hù)在線(xiàn)購(gòu)物等內(nèi)容；剛確定制作網(wǎng)站的時(shí)候，本設(shè)想將2個(gè)網(wǎng)站整合在一起，但由于技術(shù)和其他原因，這個(gè)目的沒(méi)能實(shí)現(xiàn)。

制作動(dòng)態(tài)網(wǎng)站，數(shù)據(jù)庫(kù)最重要，在我們小組這次制作網(wǎng)站的過(guò)程中，花時(shí)間最多的地方就是數(shù)據(jù)庫(kù)-數(shù)據(jù)庫(kù)的建立、數(shù)據(jù)庫(kù)與網(wǎng)站的連接、記錄集的綁定、數(shù)據(jù)庫(kù)安全等等，由于時(shí)間的關(guān)系，我們小組這次采用的是Acess數(shù)據(jù)庫(kù)，它與其他數(shù)據(jù)庫(kù)相比較相對(duì)來(lái)說(shuō)操作比較簡(jiǎn)單。在數(shù)據(jù)庫(kù)的制作中，這次我們小組遇到的難題主要是采用OLEDB連接數(shù)據(jù)庫(kù)的方法，這個(gè)難題的關(guān)鍵之處是在于如何利用 Provider 參數(shù)來(lái)創(chuàng)建 OLEDB 連接，我們?cè)诰W(wǎng)上搜索了大量資料并在XX老師的幫助下終于學(xué)會(huì)了如何使用OLEDB連接數(shù)據(jù)庫(kù)。

總結(jié)這次小學(xué)期實(shí)訓(xùn)，這次2個(gè)網(wǎng)站能這么順利的完成，離不開(kāi)老師的幫助和小組成員的努力，雖然這次小學(xué)期實(shí)訓(xùn)我們小組只有2人，但是我們是一個(gè)有效率、有組織、有團(tuán)隊(duì)精神的小組，有效率在于小組制作網(wǎng)站中分工明確、討論有目的；有組織在于小組成員能按時(shí)、有質(zhì)量的完成自己的分工任務(wù)，值得一提的是這次小學(xué)期網(wǎng)站開(kāi)發(fā)的大部分時(shí)間在小學(xué)期實(shí)訓(xùn)教室而我們小組成員還從未擅自曠課、上課遲到、早退等違紀(jì)行為；有團(tuán)隊(duì)精神在于我們小組實(shí)訓(xùn)過(guò)程中的共進(jìn)退，從不因?yàn)樽约悍止と蝿?wù)提前完成而拉下其他組員，我們意識(shí)到小組是一個(gè)有組織、有記錄、有共同目的的集體而不是一個(gè)由分散的個(gè)人組成的團(tuán)體，在這次小學(xué)期實(shí)訓(xùn)中之所以提出小組分工這是鍛煉小組組員的個(gè)人能力培養(yǎng)，而幫助有困難的組員這充分培養(yǎng)了組員之間的默契和團(tuán)隊(duì)協(xié)作能力。

這次是畢業(yè)前最后的一次小學(xué)期實(shí)訓(xùn)，也是自己做投入、最用心的一次實(shí)訓(xùn)，與以前的小學(xué)期相比，以前的小學(xué)期都是以掌握某種實(shí)訓(xùn)技能為主，而這次小學(xué)期則不僅掌握了動(dòng)態(tài)網(wǎng)站的制作技術(shù)而且還制作出了自己的成果，自己非常高興。經(jīng)過(guò)這次小學(xué)期，我領(lǐng)悟到任何東西都要“學(xué)以至用”，學(xué)習(xí)了還不行還要看自己掌握了沒(méi)，掌握了還不行還要看自己熟練了沒(méi)，熟練了還不行還要做出一定成果。即將畢業(yè)，能接受這么一次有意義的小學(xué)期實(shí)訓(xùn)感覺(jué)很充實(shí)。

網(wǎng)址:

關(guān)于網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)驗(yàn)報(bào)告模板和個(gè)人網(wǎng)頁(yè)制作實(shí)驗(yàn)報(bào)告的介紹到此就結(jié)束了，不知道你從中找到你需要的信息了嗎 ？如果你還想了解更多這方面的信息，記得收藏關(guān)注本站。