第一篇：網(wǎng)頁設(shè)計的布局與排版論文

摘要：計算機(jī)網(wǎng)頁設(shè)計是企業(yè)網(wǎng)站建設(shè)的重點，對于企業(yè)形象的展示和用戶對企業(yè)的第一印象有著非常重要的影響，應(yīng)當(dāng)對其進(jìn)行科學(xué)合理地設(shè)計與安排，提高網(wǎng)頁美觀度和利用率。網(wǎng)頁設(shè)計布局與排版應(yīng)當(dāng)遵循主次分明、圖文搭配、整體風(fēng)格統(tǒng)一以及疏密均勻等原則，計算機(jī)網(wǎng)頁設(shè)計布局與排版方法主要包括基礎(chǔ)風(fēng)格確定、字體設(shè)置以及圖形搭配等。常見的計算機(jī)網(wǎng)頁設(shè)計布局包括T字型、口字型、POP型和同字型等，應(yīng)當(dāng)根據(jù)實際需要進(jìn)行選擇。

關(guān)鍵詞：網(wǎng)頁設(shè)計；布局與排版；圖文搭配；主次分明

0、引言

網(wǎng)頁設(shè)計是指專業(yè)人員和部門以企業(yè)希望向網(wǎng)站瀏覽者提供的信息為依據(jù)，對網(wǎng)站進(jìn)行規(guī)劃設(shè)計，包括網(wǎng)站頁面的美化設(shè)計以及宣傳方式的改進(jìn)與完善。科學(xué)合理的網(wǎng)頁設(shè)計能夠?qū)D片、文字、顏色等網(wǎng)頁元素結(jié)合在一起，使用戶體驗更加完美的視覺效果，同時也為企業(yè)帶來更多的客戶[1]。布局與排版是計算機(jī)網(wǎng)頁設(shè)計中的主要內(nèi)容，也是影響整個網(wǎng)頁設(shè)計效果的關(guān)鍵，應(yīng)當(dāng)對其進(jìn)行詳細(xì)地分析，不斷提高網(wǎng)頁設(shè)計水平。

1、計算機(jī)網(wǎng)頁設(shè)計中的布局與排版原則

1.1整體風(fēng)格統(tǒng)一

首先，整體布局安排要科學(xué)合理，不同的元素之間要互相搭配，整體風(fēng)格一致，視覺上做到和諧統(tǒng)一，從而提升網(wǎng)頁美觀度。但是同時要注意，過于整齊劃一的布局也會使網(wǎng)頁風(fēng)格顯得死板，從而給人僵化的感覺，所以應(yīng)當(dāng)在保持整體風(fēng)格統(tǒng)一的基礎(chǔ)上，加入一些活潑輕松的色調(diào)與細(xì)節(jié)，從而提升網(wǎng)頁設(shè)計的美感。

1.2主次分明

其次，計算機(jī)網(wǎng)頁設(shè)計應(yīng)當(dāng)遵循主次突出和層次分明的原則，在對網(wǎng)頁內(nèi)容進(jìn)行布局與排版的時候，應(yīng)當(dāng)注意將關(guān)鍵內(nèi)容放在最顯眼的位置，從而使用戶在瀏覽網(wǎng)頁時，能夠首先看到關(guān)鍵信息，進(jìn)而激發(fā)用戶興趣。同時，這也能使網(wǎng)頁設(shè)計清晰明確、重點突出，提高網(wǎng)頁設(shè)計水平。在對主要內(nèi)容進(jìn)行合理安排與放置之后，還應(yīng)當(dāng)對其他內(nèi)容進(jìn)行科學(xué)地安排，做到主次分明、錯落有致、強(qiáng)調(diào)重點。在提高頁面使用效率的同時，增加頁面美觀度，從而加深用戶對企業(yè)的第一視覺印象。

1.3疏密均勻

此外，在計算機(jī)網(wǎng)頁設(shè)計中，還應(yīng)當(dāng)遵循錯落有致、疏密均勻的原則。應(yīng)當(dāng)對網(wǎng)頁的各個部位進(jìn)行科學(xué)合理地安排，避免出現(xiàn)有的部位過于擁擠，而有的部位過于疏松的情況。保證網(wǎng)頁設(shè)計的美觀度。同時，要注意對字間距與行間距進(jìn)行科學(xué)合理的設(shè)計和安排，保持整體風(fēng)格的清爽簡潔，擁擠的字段會得網(wǎng)頁顯得逼仄，而過于疏松的字段也會影響網(wǎng)頁美觀度。最后，應(yīng)當(dāng)對色彩搭配和圖形搭配進(jìn)行科學(xué)合理的安排，黑白搭配表示簡潔大方，圓形與方形進(jìn)行搭配，活潑又不失莊重，合理的搭配可以提升視覺效果。

1.4圖文搭配

在計算機(jī)網(wǎng)頁設(shè)計中應(yīng)當(dāng)注意圖形與文字的合理搭配，使整個頁面更加生動有趣。圖形與文字所占的大小與比重應(yīng)當(dāng)根據(jù)網(wǎng)頁內(nèi)容進(jìn)行合理安排。通常，圖形太多會使網(wǎng)頁過于花哨，不夠簡潔，而文字太多又會使得頁面過于沉悶、僵化，給人壓迫感。所以應(yīng)當(dāng)對圖形與文字進(jìn)行較為合理的安排，根據(jù)網(wǎng)頁要表達(dá)的內(nèi)容以及相關(guān)側(cè)重點，對文字版面與圖形進(jìn)行科學(xué)合理的安排，做到圖文并茂，搭配合理，這樣能有效提升網(wǎng)頁設(shè)計的美觀度，使網(wǎng)頁更加生動有趣。

2、計算機(jī)網(wǎng)頁設(shè)計中布局與排版的主要方法

2.1確定網(wǎng)頁整體風(fēng)格

網(wǎng)頁中所要展示的內(nèi)容代表了一定的企業(yè)文化和企業(yè)氛圍，包含了企業(yè)想要向用戶傳達(dá)的信息，所以網(wǎng)頁風(fēng)格應(yīng)當(dāng)與企業(yè)文化形成呼應(yīng)，要能很好地代表企業(yè)氛圍。所以在對網(wǎng)頁進(jìn)行設(shè)計之前，應(yīng)當(dāng)首先確定網(wǎng)頁的整體風(fēng)格，設(shè)計者應(yīng)當(dāng)對網(wǎng)站內(nèi)容進(jìn)行熟悉和了解，明確企業(yè)想要通過網(wǎng)頁傳達(dá)的信息，并且結(jié)合實際情況和設(shè)計需要來確定網(wǎng)頁風(fēng)格基調(diào)，再對網(wǎng)頁進(jìn)行設(shè)計和安排[2]。同時，要嚴(yán)格堅持簡潔明了的設(shè)計原則，使用戶能夠一目了然地瀏覽網(wǎng)頁信息，避免將網(wǎng)頁設(shè)計得繁復(fù)和復(fù)雜，提高頁面利用效率和美觀度，激發(fā)用戶的了解興趣，從而加深對企業(yè)的印象。

2.2選取合適的色調(diào)

在確定基本的網(wǎng)頁風(fēng)格之后，應(yīng)當(dāng)對網(wǎng)頁色調(diào)進(jìn)行科學(xué)合理地選擇。網(wǎng)頁給人的第一印象往往由主色調(diào)決定，所以應(yīng)當(dāng)選擇合適的主色調(diào)，通常主色調(diào)不宜過多，一兩種即可，過多的主色調(diào)會給人眼花繚亂的感覺，不利于網(wǎng)頁設(shè)計水平的提升。在計算機(jī)網(wǎng)頁設(shè)計中，主色調(diào)一般不超過五種，且通常以一種主色調(diào)為主，選取其他能夠搭配的色調(diào)為輔，從而提升網(wǎng)頁的整體美觀程度。

2.3設(shè)置合適的字體

在確定了整體風(fēng)格，并且選取了合適的色調(diào)之后，應(yīng)當(dāng)對字體進(jìn)行合理地設(shè)置，網(wǎng)頁設(shè)計中的字體設(shè)置也應(yīng)當(dāng)堅持簡潔的原則。一般字體類型不超過三種，并且要與圖形和色彩進(jìn)行合理搭配，字體大小也應(yīng)當(dāng)與周圍版面搭配[3]。此外，文字不宜過多，以關(guān)鍵內(nèi)容為主，從而使用戶能夠更快速地得到自己想要的信息。同時，要嚴(yán)格避免閃爍類文字的出現(xiàn)，它不僅影響整體頁面的簡潔大方，而且會給用戶帶來厭煩之感，所以要對網(wǎng)頁字體進(jìn)行科學(xué)合理的設(shè)置。

3、計算機(jī)網(wǎng)頁設(shè)計中布局與排版的類型

3.1T字型結(jié)構(gòu)

T字型結(jié)構(gòu)是常用的網(wǎng)頁設(shè)計結(jié)構(gòu)，指標(biāo)題處于頁面上方并且居中，下方左側(cè)為小標(biāo)題，右側(cè)為對應(yīng)的內(nèi)容，大體上呈現(xiàn)T字型，所以稱之為T字型結(jié)構(gòu)[4]。T字型結(jié)構(gòu)是計算機(jī)頁面設(shè)計中最常見的布局，具有風(fēng)格簡潔、主次分明等優(yōu)點，而且頁面結(jié)構(gòu)十分清晰，用戶能夠很好地把握重點。但是也存在較為沉悶、不夠靈活等缺點。另外，它對色彩和圖形的搭配要求較高，如果細(xì)節(jié)不夠完善，則會有強(qiáng)烈的乏味感，影響用戶瀏覽體驗。

3.2口字型

口字型結(jié)構(gòu)，顧名思義，就是將最關(guān)鍵的內(nèi)容放置在頁面中間，使用戶能夠快速鎖定關(guān)鍵信息。頁面四周則是內(nèi)容導(dǎo)航、索引以及新聞動態(tài)等內(nèi)容，頁面下方通常為熱點時事、友情鏈接、通訊地址與聯(lián)系方式等?？谧中徒Y(jié)構(gòu)能夠?qū)Π婷孢M(jìn)行更加高效且充分地利用，能夠在頁面上安排更多的信息，提高頁面利用率，而且能夠有效突出重點。但是，口字型結(jié)構(gòu)也具有一定的缺陷，它包含的信息量過多，導(dǎo)致頁面顯得較為擁擠，不夠簡潔?？谧中晚撁娼Y(jié)構(gòu)在國外網(wǎng)站設(shè)計中比較普遍，在國內(nèi)網(wǎng)站中的使用率則比較低。它對色彩搭配、圖形選擇等都有著較高要求，如果搭配不合理，口字型網(wǎng)頁的美觀度會大大降低。

3.3POP布局

POP布局的重點就是將一張照片放在網(wǎng)頁中心，這張照片往往代表了企業(yè)文化和優(yōu)勢，可以是企業(yè)高層領(lǐng)導(dǎo)的合影，也可以是企業(yè)優(yōu)秀成果展示，或者是企業(yè)文化表現(xiàn)等，通常要具有美觀和代表性強(qiáng)等特點。并在照片下方設(shè)置合適的左右移動按鈕，動態(tài)展示不同的照片，而主菜單則會根據(jù)需要擺放在合適的位置。POP布局具有美觀、大方、動態(tài)展示等優(yōu)點，是高校站設(shè)計中常用的網(wǎng)頁布局與排版方式，但是動態(tài)展示會在一定程度上拖慢網(wǎng)站的運行速度。

3.4同字型

同字型布局是指在計算機(jī)網(wǎng)頁中，將標(biāo)題欄放置在網(wǎng)頁上方，內(nèi)容不限定，可以是網(wǎng)站主題，也可以是廣告，并且在標(biāo)題欄旁邊配備一些小標(biāo)題。在網(wǎng)頁中間，則是與標(biāo)題相呼應(yīng)的重要內(nèi)容。將重要內(nèi)容放置在網(wǎng)頁中間能夠有效地突出重點，便于用戶快速了解網(wǎng)站關(guān)鍵信息。在網(wǎng)頁的兩邊是網(wǎng)站的新聞與動態(tài)、管理人員及其聯(lián)系方式、廣告和公告通知等。同字型網(wǎng)頁設(shè)計的特點在于，它將關(guān)鍵內(nèi)容放置在頁面中心，并且從上到下根據(jù)內(nèi)容的重要性進(jìn)行合理安排與區(qū)分，通常網(wǎng)頁下面部分為空白，有時候會根據(jù)企業(yè)需要放置一些常規(guī)內(nèi)容，比如網(wǎng)站的基礎(chǔ)信息，網(wǎng)頁設(shè)計者信息等。同字型結(jié)構(gòu)的缺點在于，它對頁面布局的要求十分高，由于內(nèi)容量較大，如果安排不合理，則會顯得十分擁擠。

4、結(jié)論

隨著互聯(lián)網(wǎng)技術(shù)的進(jìn)步和網(wǎng)絡(luò)信息技術(shù)的普及，大部分企業(yè)和公共部門都會設(shè)置自己的網(wǎng)站作為展示最新信息以及與用戶溝通交流的途徑，它在企業(yè)宣傳推廣等方面起著重要作用。計算機(jī)網(wǎng)頁設(shè)計是網(wǎng)站建設(shè)中的關(guān)鍵內(nèi)容，對其進(jìn)行科學(xué)合理地布局與排版設(shè)計，能夠有效提升頁面美觀度，并且能夠更好地向用戶傳達(dá)重要信息。布局與排版方法包括基礎(chǔ)風(fēng)格的確定、字體的設(shè)置和色調(diào)的選取。常見的計算機(jī)網(wǎng)頁設(shè)計布局與排版類型包括口字型、同字型、POP型和T字型，不同的布局與排版方式具有不同的優(yōu)缺點，應(yīng)當(dāng)根據(jù)需要選擇合適的布局與排版方法。

第二篇：網(wǎng)頁設(shè)計論文

網(wǎng)頁設(shè)計基礎(chǔ)課程論文

摘要:隨著互聯(lián)網(wǎng)的不斷發(fā)展和中國網(wǎng)絡(luò)人口的日益增長，建立個人網(wǎng)站，不但可以更好的展示自己，而且可以提高自己在計算機(jī)應(yīng)用方面的能力,網(wǎng)站越發(fā)普及，網(wǎng)站建設(shè)也有新的要求,網(wǎng)站已發(fā)展為一種工具，一個企業(yè)對外信息展示的工具.以前網(wǎng)站上常見的大幅圖片，長達(dá)幾十鐘的flash動畫，已悄然而逝，瀏覽者再也不用為了查找一些信息而必須等待動畫的時間，可以簡單方便的找到自己想要的東西，是瀏覽者主要的目的，也是網(wǎng)站設(shè)計時應(yīng)該考慮的問題。以前只是一味的追求網(wǎng)站的外觀，其實網(wǎng)站是一個公司的對外信息窗口，因此在考慮美觀的同時也得考慮瀏覽者的感受，如有些色調(diào)是很亮麗，但是這些過于亮的色彩看的時間長了會讓你的眼睛不舒服，這樣瀏覽的人就不會長時間在網(wǎng)站上逗留，網(wǎng)站沒把公司的信息完全的傳達(dá)給客戶． 關(guān)鍵詞：網(wǎng)站網(wǎng)頁設(shè)計發(fā)展趨勢網(wǎng)站標(biāo)準(zhǔn) 正文：一:網(wǎng)頁設(shè)計發(fā)展趨勢: 1.更多的CSS3 + HTML5 這是期待已久的事情。在過去的幾年設(shè)計師已經(jīng)開始關(guān)注和使用CSS3+HTML5，但在以后CSS3+HTML5將會得到更廣泛的應(yīng)用。網(wǎng)頁設(shè)計師最終會拋棄Flash。Flash不再是昔日的王者，新技術(shù)（指CSS3+HTML5）將會取而代之 2簡單的配色方案

沒有比純色的背景更直觀更簡潔。純色可以有很多種表達(dá)方式。不要老是黑白灰神馬的，太不給力了。多點考慮綠、黃或者紅作為你的網(wǎng)頁主色調(diào)。當(dāng)然，顏色最好保持使用2到3種。調(diào)整顏色的透明度，或許會給你意想不到的效果 3.移動互聯(lián)網(wǎng)時代的到來

智能手機(jī)，ipad和上網(wǎng)本隨處可見，將來這個將會更加明顯。這意味著你的設(shè)計需要考慮更多的設(shè)備。4.Parallax Scrolling 先來解釋下Parallax Scrolling，Parallax scrolling 是讓多層背景以不同的速度移動，形成運動視差 3D 效果，雖然純屬視覺效果，但在內(nèi)容滾動時形成的視覺體驗仍然非常出色。2011年的網(wǎng)頁設(shè)計趨勢熱點就是要創(chuàng)造這樣的深度視覺效果。5.設(shè)計需考慮更多的觸屏設(shè)備

觸屏技術(shù)應(yīng)用越來越廣泛，觸屏設(shè)備隨處可見。這意味著，你的導(dǎo)航設(shè)計不再只是鼠標(biāo)導(dǎo)航，你必須要要考慮你的設(shè)計適合觸屏設(shè)備。6.深度判析

深度判析是關(guān)于在網(wǎng)頁設(shè)計使用維數(shù)，這樣可以使你的網(wǎng)頁變得更加真實。如果運用得恰當(dāng)，那將會是一個虛擬的3D效果，就像3D電影阿凡達(dá)那樣。盡管3D技術(shù)還沒有去到網(wǎng)站設(shè)計，你仍然嘗試使用維數(shù)進(jìn)行設(shè)計。7.大背景圖

大背景圖的網(wǎng)頁設(shè)計應(yīng)用在2011年將會更加明顯。這些背景圖像一般是高分辨率，覆蓋這個網(wǎng)站。高清照片是一個迅速抓住你的讀者的好方式，可以產(chǎn)生極具沖擊力的視覺效果-游客的視線會不自覺地落在寬大的背景上。8.不拘謹(jǐn)于頂級域名

嚴(yán)格意義上這一點與網(wǎng)頁設(shè)計無關(guān)，但這一點也是發(fā)展的趨勢，將出現(xiàn)更多創(chuàng)造性的域名。.com域名的吸引力越來越少，主要是你很難再找到一個比較短的.com域名。2011年人們開始將視線慢慢轉(zhuǎn)移到.me、.co和.cc等身上。想想域名的發(fā)展，搶先一步，不然你很可能再次錯失先機(jī)。9.QR: Quick Response 如果你注意現(xiàn)在越來越多的名片、雜志或者其他地方出現(xiàn)方形條形碼，證明你已經(jīng)看到2011年的這個趨勢熱門

10.縮略圖設(shè)計（Thumbnail Design）

Google已經(jīng)向瀏覽用戶推出它們的瀏覽預(yù)覽技術(shù)。過去我們只能通過點擊鏈接才能看到網(wǎng)頁的內(nèi)容，現(xiàn)在你只需點擊放大鏡然后將鼠標(biāo)懸停在鏈接上就可以預(yù)覽該鏈接的網(wǎng)頁內(nèi)容。11.持續(xù)聯(lián)系/ Life Stream Lifestreaming, 一種在線記錄個人日?；顒拥木W(wǎng)絡(luò)應(yīng)用，包括直接通過視頻feed或通過聚焦一個人的網(wǎng)絡(luò)在線內(nèi)容，比如博客日志，在社會性網(wǎng)絡(luò)上面的更新，在線相冊，聊天內(nèi)容甚至只是一些喜歡的網(wǎng)站的鏈接等等.二:網(wǎng)站標(biāo)準(zhǔn)是在W3C（W3C.org）的組織下，商業(yè)公司（Netscape、Microsoft等）也認(rèn)識到統(tǒng)一標(biāo)準(zhǔn)的好處。網(wǎng)站標(biāo)準(zhǔn)開始被建立（1998年2月10日發(fā)布XML1.0為標(biāo)志），并在網(wǎng)站標(biāo)準(zhǔn)組織（webstandards.org）的督促下推廣執(zhí)行。

為什么要建立網(wǎng)站標(biāo)準(zhǔn): 我們大部分人都有深刻體驗，每當(dāng)主流瀏覽器版本的升級，我們剛建立的網(wǎng)站就可能變得過時，我們就需要升級或者重新建造一遍網(wǎng)站。例如1996-1999年典型的“瀏覽器大戰(zhàn)”，為了兼容Netscape和IE，網(wǎng)站不得不為這兩種瀏覽器寫不同的代碼。同樣的，每當(dāng)新的網(wǎng)絡(luò)技術(shù)和交互設(shè)備的出現(xiàn)，我們也需要制作一個新版本來支持這種新技術(shù)或新設(shè)備，例如支持手機(jī)上網(wǎng)的WAP技術(shù)。類似的問題舉不勝舉：網(wǎng)站代碼臃腫、繁雜浪費了我們大量的帶寬；針對某種瀏覽器的DHTML特效，屏蔽了部分潛在的客戶；不易用的代碼，殘障人士無法瀏覽網(wǎng)站等等。這是一種惡性循環(huán)，是一種巨大的浪費。如何解決這些問題呢？有識之士早已開始思考，需要建立一種普遍認(rèn)同的標(biāo)準(zhǔn)來結(jié)束這種無序和混亂。商業(yè)公司（Netscape、Microsoft等）也終于認(rèn)識到統(tǒng)一標(biāo)準(zhǔn)的好處，因此在W3C（W3C.org）的組織下，網(wǎng)站標(biāo)準(zhǔn)開始被建立（1998年2月10日發(fā)布XML1.0為標(biāo)志），并在網(wǎng)站標(biāo)準(zhǔn)組織（webstandards.org）的督促下推廣執(zhí)行。

采用網(wǎng)站標(biāo)準(zhǔn)的好處:

對網(wǎng)站瀏覽者的好處：

1、文件下載與頁面顯示速度更快

2、內(nèi)容能被更多的用戶所訪問（包括失明、視弱、色盲等殘障人士）；

3、內(nèi)容能被更廣泛的設(shè)備所訪問（包括屏幕閱讀機(jī)、手持設(shè)備、搜索機(jī)器人、打印機(jī)、電冰箱等）；

4、用戶能夠通過樣式選擇定制自己的表現(xiàn)界面；

5、所有頁面都能提供適于打印的版本。對網(wǎng)站所有者的好處:

1、更少的代碼和組件，容易維護(hù)；

2、帶寬要求降低（代碼更簡潔），成本降低。舉個例子：當(dāng)ESPN.com使用CSS改版后，每天節(jié)約超過兩兆字節(jié)（terabytes）的帶寬；

3、更容易被搜尋引擎搜索到；

4、改版方便，不需要變動頁面內(nèi)容；

5、提供打印版本而不需要復(fù)制內(nèi)容；

6、提高網(wǎng)站易用性。在美國，有嚴(yán)格的法律條款（Section 508）來約束政府網(wǎng)站必須達(dá)到一定的易用性，其他國家也有類似的要求。

參考文獻(xiàn)： 一：溫謙.HTML+CSS網(wǎng)頁設(shè)計與布局從入門到精通[M].北京:人民郵電出版社,2010.3 二：http://004km.cn

三：http://btgyjlbjx.nease.net(北極星網(wǎng)站域名）

課程論文

系院:土木工程學(xué)院

專業(yè):建筑工程 姓名:王奎

學(xué)號:105140340043 網(wǎng)頁設(shè)計基礎(chǔ)

第三篇：教學(xué)設(shè)計(利用表格布局網(wǎng)頁)[推薦]

利用表格布局網(wǎng)頁

教學(xué)設(shè)計

授課教師：劉春霞

授課班級：計算機(jī)應(yīng)用1202班

一、課題名稱：利用表格布局網(wǎng)頁

二、授課課時：1個課時

三、教學(xué)內(nèi)容分析

本節(jié)課以利用表格制作一個簡單主頁為例，要求學(xué)生掌握并靈活運用表格及單元格的一些基本屬性設(shè)置，從而設(shè)計出一個“匡”字型的主頁。本次課要求學(xué)生具有創(chuàng)建站點的知識，以及Dreamweaver CS3的一些基本操作。

四、學(xué)生特征分析

授課對象是職高高二學(xué)生，學(xué)生已具有熟練操作一些常用軟件的能力，已掌握Dreamweaver CS3的一些基本操作。

五、教學(xué)目標(biāo)（知識與技能、過程與方法、情感態(tài)度與價值觀）

1、知識與技能目標(biāo)

掌握插入表格、表格基本屬性的理解與設(shè)置、單元格或行的基本屬性的理解與設(shè)置，掌握利用表格布局網(wǎng)頁的方法。

2、過程與方法目標(biāo)

引導(dǎo)學(xué)生分析項目，自主獨立思考及操作，指導(dǎo)與修正，掌握插入表格、表格基本屬性的理解與設(shè)置、單元格或行的基本屬性的理解與設(shè)置，掌握利用表格布局網(wǎng)頁的方法。

3、情感態(tài)度與價值觀目標(biāo)

提高學(xué)生的觀察能力及分析能力，調(diào)動學(xué)生自主能動性，培養(yǎng)學(xué)生較濃的學(xué)習(xí)興趣，使學(xué)生建立正確的人生觀與價值觀。

六、教學(xué)重點難點

掌握插入表格的方法 掌握表格屬性設(shè)置的基本方法 掌握單元格或行屬性設(shè)置的基本方法 掌握使用表格進(jìn)行頁面布局的基本方法

七、教學(xué)方法

1、講授法

2、演示法

3、任務(wù)驅(qū)動法

八、教學(xué)環(huán)境與資源

教師機(jī)，教學(xué)廣播軟件，學(xué)生機(jī)（60臺）

九、教學(xué)過程

1、創(chuàng)設(shè)情境，導(dǎo)入新課

欣賞網(wǎng)頁，分析網(wǎng)頁結(jié)構(gòu)，引入本次課學(xué)習(xí)的項目：利用表格制作一個簡單的“匡”字型網(wǎng)頁。

2、講解知識，演示操作 講解插入表格的方法，表格屬性設(shè)置的基本方法及單元格屬性設(shè)置的基本方法，（1）插入表格的方法

將光標(biāo)置于頁面中，然后在主菜單中選擇【插入記錄】／【表格】命令或在【插入】／【常用】面板中單擊（表格）按鈕打開【表格】對話框進(jìn)行參數(shù)設(shè)置，最后單擊【確定】按鈕插入表格。（2）表格屬性設(shè)置

首先選中表格，然后通過表格【屬性】面板設(shè)置表格的行數(shù)、列數(shù)、寬度、高度、填充、間距、邊框、對齊方式、背景顏色、背景圖像、邊框顏色等屬性。

▲寬度中的百分比單位一般在制作表格嵌套的時候用。（3）設(shè)置單元格或行【屬性】的方法

首先選擇單元格或行，然后通過單元格或行【屬性】面板可以設(shè)置單元格的寬度和高度、水平和垂直對齊方式、背景顏色和背景圖像以及邊框顏色等。

（4）展示網(wǎng)頁的最終結(jié)果并引導(dǎo)學(xué)生分析其結(jié)構(gòu)，提示并演示操作的關(guān)鍵步驟，讓學(xué)生獨立思考完成，培養(yǎng)學(xué)生知識的遷移能力，效果圖如下：

主要操作步驟：

a、新建一個站點，站點根目錄為自己的文件夾（含有素材），在站點里新建一個文件index,html。

b、在頁面屬性里設(shè)置字體為“12像素”，頁邊距為“0”

c、制作頁眉部分，插入一個1行1列的表格，寬度為770像素，其它屬性參考效果圖設(shè)置，然后插入Logo圖片，d、制作主體部分，I、插入一個1行2列，寬度為770像素的表格，左側(cè)單元格為200像素，設(shè)置間距為2，其它屬性參考效果圖設(shè)置。II、III、在左側(cè)單元格中插入一個5行1列，寬度為70%的表格，設(shè)置間距為5，其它屬性參考效果圖設(shè)置。（表格嵌套）

在右側(cè)單元格中插入一個4行2列，寬度為96%的表格，設(shè)置間距為5，表格標(biāo)題為“參考咨詢”，第一列單元格寬度為160像素，其它屬性參考效果圖設(shè)置。（表格嵌套）

e、制作頁腳部分，插入一個1行1列，寬度為770像素的表格，插入圖像“foot,.jpg”。

3、學(xué)生練習(xí)，巡堂指導(dǎo)

（1）、學(xué)生參考最終效果圖，根據(jù)教師提示的主要步驟，獨立思考分析，完成主頁。（2）、教師巡堂指導(dǎo)，留意學(xué)生在操作時出現(xiàn)的細(xì)節(jié)問題，做好作業(yè)點評。

4、上交作業(yè)，點評作業(yè)

（1）、要求學(xué)生把主頁及素材（自己的文件夾）一起交到教師機(jī)“1202班”文件夾中。（2）、抽出兩個學(xué)生的作業(yè)點評，修正錯誤，完善主頁。

5、課堂小結(jié)，宣布下課

本次課主要學(xué)習(xí)插入表格、表格基本屬性的設(shè)置、單元格或行的基本屬性的設(shè)置，利用表格布局網(wǎng)頁的方法。

十、教學(xué)反思（歡迎名位聽課老師提出您寶貴的教學(xué)建議）

第四篇：商業(yè)網(wǎng)頁設(shè)計論文

摘要:商業(yè)網(wǎng)頁設(shè)計中具體的字體、圖形、圖象、標(biāo)志等等，常常表現(xiàn)為點線面、色彩、動靜、主次等視覺因素，這些因素的不同使用都會影響讀者的視覺習(xí)慣和心理變化。本文將分析商業(yè)網(wǎng)頁設(shè)計視覺因素的心理規(guī)律，揭示網(wǎng)頁設(shè)計如何通過視覺因素更有效、更合理的表現(xiàn)與傳達(dá)信息。

關(guān)鍵詞: 網(wǎng)頁設(shè)計 視覺心理因素 構(gòu)成要素 視覺流程

商業(yè)網(wǎng)站是企業(yè)向用戶和網(wǎng)民提供產(chǎn)品和服務(wù)的一種方式,是企業(yè)開展電子商務(wù)的基礎(chǔ)設(shè)施和信息平臺，其網(wǎng)頁頁面由具體的文字（標(biāo)題、廣告語、單位名稱、Email地址等）、企業(yè)標(biāo)志、商標(biāo)、產(chǎn)品圖形、和信息菜單等內(nèi)容組成，這些內(nèi)容又常常表現(xiàn)為點線面、色彩、動靜、主次等視覺因素，這些因素的不同使用都會影響讀者的視覺習(xí)慣和心理變化。

本文將試析商業(yè)網(wǎng)頁設(shè)計視覺因素的心理規(guī)律，揭示商業(yè)網(wǎng)頁設(shè)計如何通過視覺心理因素更有效、更合理的表現(xiàn)與傳達(dá)信息。展現(xiàn)企業(yè)形象、介紹產(chǎn)品和服務(wù)、體現(xiàn)企業(yè)發(fā)展戰(zhàn)略。

一、商業(yè)網(wǎng)頁設(shè)計中點、線、面視覺心理因素的運用

點、線、面是商業(yè)網(wǎng)頁設(shè)計基本的視覺元素，是表現(xiàn)視覺形象的基本設(shè)計語言。從視覺角度看網(wǎng)頁設(shè)計主要是如何經(jīng)營好三者的關(guān)系，因為不管是任何視覺形象或者版式構(gòu)成，歸結(jié)到底，都可以歸納為點、線和面。

1.網(wǎng)頁設(shè)計造型要素中的點

商業(yè)網(wǎng)頁設(shè)計中的點是構(gòu)成網(wǎng)頁的最基本單位，是指頁面中具備點的視覺特點、體積較小的物象。相對于整體背景而言一個單獨的點是相比較而言的；是有大小、形狀和體積的。點的大小、形態(tài)、位置不同，所產(chǎn)生的視覺效果、心理作用也不同。一個網(wǎng)頁往往需要有數(shù)量不等，形狀各異的點來構(gòu)成，可以是具體產(chǎn)品、商品標(biāo)志等，也可以是感覺上的點。例如，天空中的飛鳥、沙灘上的腳印、花瓣上的蜜蜂等，在其周圍背景襯托下，都給人以“點”的視覺心理感受。

點在設(shè)計中即可以起一種穩(wěn)定造型的作用，亦可起到活潑生動、吸引視覺中心的作用，使用得當(dāng)，甚至可以畫龍點睛；點的形狀、方向、大小、位置、聚集與發(fā)散，還能夠給人帶來不同的心理感受。

(1)單點的應(yīng)用：點在人們的視覺中具有很強(qiáng)的吸引作用，如：點（商品）設(shè)計在網(wǎng)頁的上方或左右位置，則給人不穩(wěn)定感和相對的動感。

(2)多點的應(yīng)用：兩點（二商品）之間會產(chǎn)生心理連線的感覺，多點時則會出現(xiàn)不同排列，順序的虛擬的面或形體。

2.網(wǎng)頁設(shè)計造型要素中的線

點的延伸形成線。線在頁面中的作用在于表示方向、位置、長短、寬度、形狀、質(zhì)量和情緒。線是分割頁面的主要元素之一，是決定頁面現(xiàn)象的基本要素。商業(yè)網(wǎng)頁設(shè)計視覺因素中的線主要指文字的行線，商品圖形、圖象的輪廊線，各種裝飾線。線的形態(tài)主要有直線和曲線兩大類：

(1)直線給人一種緊張、銳利、簡潔、剛直感，從心理或生理感覺來看具有男性特點。直線又有：細(xì)直線，給人纖細(xì)、敏銳的心理感覺；粗直線，給人豪爽、拙樸、厚重的感覺；垂直線，給人一種挺拔、莊嚴(yán)感；水平直線則給人方向感和強(qiáng)烈的動感。

(2)曲線表現(xiàn)出一種動態(tài)，活潑，輕快的意味，顯示了女性美的特征，商業(yè)網(wǎng)頁設(shè)計中運用文字行、圖象輪廊線或裝飾線的造型，創(chuàng)造一種女性化的審美感。自由曲線是最好的情感抒發(fā)手段。打破了水平線組成的莊嚴(yán)和單調(diào)，給商業(yè)網(wǎng)頁增加了豐富、流暢、活潑的氣氛。水平線和自由曲線的組合運用，形成新穎的形式和不同情感的對比。

3.網(wǎng)頁設(shè)計造型要素中的面

線的推移形成面。面是無數(shù)點和線的組合。面具有一定的面積和質(zhì)量，占據(jù)空間的位置更多，因而相比點和線來說視覺沖擊力更大更強(qiáng)烈。面在網(wǎng)頁設(shè)計中通常指各種圖形、色塊的形狀設(shè)計，不同形狀的面具有自己鮮明的個性和情感特征，能給人不同的心理感受，如方形的面具有沉著，穩(wěn)重，厚實，堅強(qiáng)的男性特征；三角形、梯形面常給人一種穩(wěn)定、端正之感；但如果將它們倒過來設(shè)計，則給人一種輕、不穩(wěn)定的感覺。圓形充實、圓滿、活潑的感覺，比較適合表現(xiàn)兒童產(chǎn)品或者女性用品。菱形或不規(guī)則形體則給人一種活潑、輕快之感。

在商業(yè)網(wǎng)頁的視覺構(gòu)成中，點、線、面既是最基本的造型元素，又是最重要的表現(xiàn)手段。在確定商業(yè)網(wǎng)頁主體形象的位置、動態(tài)時，點線面將是需要最先考慮的因素。必須熟練掌握設(shè)計語言。要善于根據(jù)商業(yè)特性采用不同的組合去體現(xiàn)不同的情感訴求，達(dá)到推銷、銷售商品和服務(wù)的作用。只有合理的安排好點線面的互相關(guān)系，才能設(shè)計出具有最佳視覺效果的頁面，充分的表達(dá)出商業(yè)網(wǎng)頁最終的訴求！

二、商業(yè)網(wǎng)頁設(shè)計中色彩視覺心理因素的運用

商業(yè)網(wǎng)頁設(shè)計中色彩是確立網(wǎng)站風(fēng)格的靈魂。色彩能產(chǎn)生強(qiáng)烈的視覺效果，使頁面更加生動。色彩設(shè)計的好壞直接影響閱讀者的觀賞興趣與心理變化。因此，地位十分重要。商業(yè)網(wǎng)頁的色彩設(shè)計應(yīng)從以下幾個方面把握和利用其心理特征：

首先，整個頁面要確定一個主色調(diào)，其有利于體現(xiàn)網(wǎng)站主題。每一種色彩都具有它自身的性格，如：彩度高，明度高的色彩常給人一種華麗感，相反彩度低，低明度的色彩則給人一種樸實感。暖色系、高明度的色彩能給人一種面積大的前進(jìn)感。冷色系、低明度的色彩則能給人一種面積小的后退感。每個人群對色彩的喜好也有所不同，如男性較喜歡冷色，女性則偏好暖色或高明度、高彩度的色彩，兒童喜好純色，討厭濁色，老人則偏好濁色，中年人或文化層次較高的人偏好冷灰色等。因此在設(shè)計中要考慮主要讀者群的背景和構(gòu)成以及如何與商品的屬性相呼應(yīng)。

其次，在主色調(diào)下的色調(diào)搭配。若頁面空間整體、色彩和諧統(tǒng)一，則給人一種幽雅、寧靜感；若以對比手法處理，圖形文字色彩明快突出于背景色，則頁面空間氛圍會顯得活躍而有生氣。但是，要注意不能有強(qiáng)烈的色彩對比，因為過于豐富的背景色彩會影響前景商品圖片和文字的取色，使文字溶于背景中，不易辨識。所以背景一般應(yīng)以單純?yōu)橐恕?/p>

最后，作為設(shè)計師在考慮網(wǎng)頁設(shè)計時，還應(yīng)考慮到時代流行性色和企業(yè)標(biāo)準(zhǔn)色的問題。所謂流行色，是指在一定范圍內(nèi)和時間內(nèi)，非常盛行并易為人們接受的某些式樣或顏色。而標(biāo)準(zhǔn)色的運用在網(wǎng)上擴(kuò)大了品牌效應(yīng)，也是對公司整體形象的統(tǒng)一應(yīng)用，從而構(gòu)成了企業(yè)識別系統(tǒng)（CIS）的重要部分。

三、商業(yè)網(wǎng)頁設(shè)計中動、靜的視覺心理因素的運用

商業(yè)網(wǎng)頁設(shè)計構(gòu)成要素可分為兩種狀態(tài)：靜態(tài)與動態(tài)。靜態(tài)要素設(shè)計具體指靜止的商品圖形、文字、按紐等；動態(tài)要素，具體指動態(tài)按紐、按紐連接、網(wǎng)頁動畫和視頻等，它們是豐富、生動網(wǎng)頁、張顯個性、突出主題重要手段。

動靜以及不同的動靜組合都可以反映不同的心理與性格，如，動大體上給人活潑、生動的印象，但極慢的動常給人憂慮感；迅速或突然的動常給人焦慮、驚慌感。另外，靜也常給人寧靜、沉悶兩種感覺。

商業(yè)網(wǎng)頁設(shè)計中要注意處理好動靜的關(guān)系，要整體和諧統(tǒng)一，給人生動而不躁動或厭惡感。同時還要遵循動態(tài)性原則與交互性原則。

1.動態(tài)性原則，即要有四維空間或五維空間的運作觀念。一件網(wǎng)頁商品、圖片不僅是二維的平面或三維的視覺，也要有時間與空間的變換，情感與思維認(rèn)識的演變等多維因素。

2.交互性原則，即界面設(shè)計強(qiáng)調(diào)交互過程。一方面是物的信息傳達(dá)，另一方面是人的接受與反饋，對任何物的信息都能動地認(rèn)識與把握。

四、商業(yè)網(wǎng)頁設(shè)計中視覺流程心理因素的運用

商業(yè)網(wǎng)頁設(shè)計是通過視覺元素引起人注目而實現(xiàn)商品信息內(nèi)容的傳達(dá)，為了使網(wǎng)頁獲得最大的視覺傳達(dá)功能，使網(wǎng)頁真正成為可讀強(qiáng)性而且新穎的媒體，必須適應(yīng)人們視覺流程的心理和生理的特點。

視覺流程的形成是由人類的視覺特性所決定的。心理學(xué)家葛斯達(dá)認(rèn)為：人們閱讀時，版面的上部比下部的注目價值高，左側(cè)比右側(cè)的注目價值高。因此，版面的左上側(cè)位置最為引人注目，因此，在網(wǎng)頁設(shè)計中一些突出的商品信息，如主標(biāo)題、每天更新的內(nèi)容等通常都放在這個位置。以便于一開始就吸引受眾的視線，誘導(dǎo)其由上到下，由左到右地移動。此位置也被稱作視覺的最佳視域。也就是最優(yōu)選的地方。當(dāng)然視覺流程是一種感覺而非確切的數(shù)學(xué)公式，只要符合人們認(rèn)識過程的心理順序和思維發(fā)展的邏輯順序，就可以更為靈活地運用。設(shè)計者可以利用視線移動規(guī)律，誘導(dǎo)讀者的視線作左右流動、上下流動以及斜線的不穩(wěn)定流動，通過編排設(shè)計，人為地產(chǎn)生最佳視域，突出主要商品，以達(dá)到一定的視覺效果，傳遞商品信息。

商業(yè)網(wǎng)頁作為一種新的企業(yè)開展電子商務(wù)的基礎(chǔ)設(shè)施和信息平臺，它的發(fā)展雖然沒有多長時間，卻兼容了傳統(tǒng)平面設(shè)計的特征，又具備其所沒有的優(yōu)勢，成為今后商品信息交流的一個非常有影響的途徑。其設(shè)計是一種綜合性的設(shè)計，它所涉及的范圍非常的廣泛，包括消費者心理學(xué)、視覺設(shè)計美學(xué)、人機(jī)工程、哲學(xué)等諸多方面，而本文中只從視覺心理因素的角度進(jìn)行了一些闡述與分析，僅作拋磚引玉之用。

參考文獻(xiàn):

[1]李彬彬:設(shè)計效果心理評價[M].北京:中國輕工出版社,2005.1

[2]趙殿澤:構(gòu)成藝術(shù)[M].沈陽:遼寧美術(shù)出版社，1994

[3]趙國志:色彩構(gòu)成[M].沈陽:遼寧美術(shù)出版社，1994

[4]張國良:傳播學(xué)原理[M].上海:復(fù)旦大學(xué)出版社，2000.1

第五篇：個人網(wǎng)頁設(shè)計(論文)

炎黃職業(yè)技術(shù)學(xué)院信息工程系

畢業(yè)設(shè)計（論文）

個人網(wǎng)頁設(shè)計

年 級: _ 2009級___ _ 學(xué) 號: _ 0******17 _ 姓 名: __ _****_____ 專 業(yè): 網(wǎng)絡(luò)數(shù)字媒體 _ 指導(dǎo)老師: __ ****__ __

二零一一年十二月 炎黃職業(yè)技術(shù)學(xué)院 信息工程系畢業(yè)設(shè)計（論文）

摘 要

本論文將對個人網(wǎng)頁設(shè)計與制作的方法、工具等展開研究和探討。在介紹網(wǎng)頁設(shè)計與制作語言的基礎(chǔ)上，著重使用CSS樣式表作為工具語言進(jìn)行網(wǎng)頁設(shè)計與制作的實際操作，分別對基于對象的JavaScript語言、用于編輯HTML語言的軟件進(jìn)行了詳細(xì)的介紹。

本論文主要章節(jié)如下，炎黃職業(yè)技術(shù)學(xué)院 信息工程系畢業(yè)設(shè)計（論文）

炎黃職業(yè)技術(shù)學(xué)院 信息工程系畢業(yè)設(shè)計（論文）

炎黃職業(yè)技術(shù)學(xué)院 信息工程系畢業(yè)設(shè)計（論文）

1、是一種腳本編寫語言

JavaScript是一種腳本語言，它采用小程序段的方式實現(xiàn)編程。像其它腳本語言一樣,JavaScript同樣已是一種解釋性語言,它提供了一個易的開發(fā)過程。

它的基本結(jié)構(gòu)形式與C、C++、VB、Delphi十分類似。但它不像這些語言一樣，需要先編譯，而是在程序運行過程中被逐行地解釋。它與HTML標(biāo)識結(jié)合在一起，從而方便用戶的使用操作。

2、基于對象的語言。

JavaScript是一種基于對象的語言，同時以可以看作一種面向?qū)ο蟮?。這意味著它能運用自己已經(jīng)創(chuàng)建的對象。因此，許多功能可以來自于腳本環(huán)境中對象的方法與腳本的相互作用。

3、簡單性

JavaScript的簡單性主要體現(xiàn)在：首先它是一種基于Java基本語句和控制流之上的簡單而緊湊的設(shè)計, 從而對于學(xué)習(xí)Java是一種非常好的過渡。其次它的變量類型是采用弱類型，并未使用嚴(yán)格的數(shù)據(jù)類型。

4、安全性

JavaScript是一種安全性語言，它不允許訪問本地的硬盤，并不能將數(shù)據(jù)存入到服務(wù)器上，不允許對網(wǎng)絡(luò)文檔進(jìn)行修改和刪除，只能通過瀏覽器實現(xiàn)信息瀏覽或動態(tài)交互。從而有效地防止數(shù)據(jù)的丟失。

5、動態(tài)性的

JavaScript是動態(tài)的，它可以直接對用戶或客戶輸入做出響應(yīng)，無須經(jīng)過Web服務(wù)程序。它對用戶的反映響應(yīng)，是采用以事件驅(qū)動的方式進(jìn)行的。所謂事件驅(qū)動，就是指在主頁(Home Page)中執(zhí)行了某種操作所產(chǎn)生的動作，就稱為“事件”(Event)。比如按下鼠標(biāo)、移動窗口、選擇菜單等都可以視為事件。當(dāng)事件發(fā)生后，可能會引起相應(yīng)的事件響應(yīng)。

6、跨平臺性

JavaScript是依賴于瀏覽器本身，與操作環(huán)境無關(guān)，只要能運行瀏覽器的計算機(jī)，并支持JavaScript的瀏覽器就可正確執(zhí)行。從而實現(xiàn)了“編寫一次,走遍天下”的夢想。

實際上JavaScript最杰出之處在于可以用很小的程序做大量的事。無須有高性能的電腦，軟件僅需一個字處理軟件及一瀏覽器，無須WEB服務(wù)器通道，通過自己的電腦即可完成所有的事情。

總之，JavaScript 是一種新的描述語言，它可以被箝入到 HTML 的文件之中。JavaScript語言可以做到回應(yīng)使用者的需求事件(如：form的輸入)，而不用任何的網(wǎng)路來回傳輸資料，所以當(dāng)一位使用者輸入一項資料時，它不用經(jīng)過傳給伺服端(server)處理，再傳回來的過程，而直接可以被客戶端(client)的應(yīng)用程式所處理。

炎黃職業(yè)技術(shù)學(xué)院 信息工程系畢業(yè)設(shè)計（論文）

JavaScript 和 Java 很類似，但到底并不一樣！Java 是一種比 JavaScript 更復(fù)雜許多的程式語言，而 JavaScript 則是相當(dāng)容易了解的語言。JavaScript 創(chuàng)作者可以不那麼注重程式技巧，所以許多 Java 的特性在 Java Script 中并不支援。

2.3 CSS樣式表

級聯(lián)樣式表（Cascading Style Sheet）簡稱“CSS”，通常又稱為“風(fēng)格樣式表（Style Sheet）”，它是用來進(jìn)行網(wǎng)頁風(fēng)格設(shè)計的。比如，如果想讓鏈接字未點擊時是藍(lán)色的，當(dāng)鼠標(biāo)移上去后字變成紅色的且有下劃線，這就是一種風(fēng)格。通過設(shè)立樣式表，可以統(tǒng)一地控制HMTL中各標(biāo)志的顯示屬性。級聯(lián)樣式表可以使人更能有效地控制網(wǎng)頁外觀。使用級聯(lián)樣式表，可以擴(kuò)充精確指定網(wǎng)頁元素位置，外觀以及創(chuàng)建特殊效果的能力。

CSS目前最新版本為CSS2,能夠真正做到網(wǎng)頁表現(xiàn)與內(nèi)容分離的一種樣式設(shè)計語言。相對于傳統(tǒng)HTML的表現(xiàn)而言，CSS能夠?qū)W(wǎng)頁中的對象的位置排版進(jìn)行像素級的精確控制，支持幾乎所有的字體字號樣式，擁有對網(wǎng)頁對象盒模型的能力，并能夠進(jìn)行初步交互設(shè)計，是目前基于文本展示的最優(yōu)秀的表現(xiàn)設(shè)計語言。

在網(wǎng)頁上使用樣式表有三種方法可以在站點網(wǎng)頁上使用樣式表：

將網(wǎng)頁鏈接到外部樣式表。

在網(wǎng)頁上創(chuàng)建嵌入的樣式表。

應(yīng)用內(nèi)嵌樣式到各個網(wǎng)頁元素。

當(dāng)要在站點上所有或部份的網(wǎng)頁上一致地應(yīng)用相同樣式時，可使用外部樣式表。在一個或多個外部樣式表中定義樣式，并將它們鏈接到所有網(wǎng)頁，便能確保所有網(wǎng)頁外觀的一致性。如果人們決定更改樣式，只需在外部樣式表 — 中作一次更改 — 而該更改會反映到所有與該樣式表相鏈接的網(wǎng)頁上。通常外部樣式表以.css 做為文件擴(kuò)展名，例如 Mystyles.css。

當(dāng)人們只是要定義當(dāng)前網(wǎng)頁的樣式，可使用嵌入的樣式表。嵌入的樣式表是一種級聯(lián)樣式表，“嵌”在網(wǎng)頁的 標(biāo)記符內(nèi)。嵌入的樣式表中的樣式只能在同一網(wǎng)頁上使用。

使用內(nèi)嵌樣式以應(yīng)用級聯(lián)樣式表屬性到網(wǎng)頁元素上。

如果網(wǎng)頁鏈接到外部樣式表，為網(wǎng)頁所創(chuàng)建的內(nèi)嵌的或嵌入式樣式將擴(kuò)充或覆蓋外部樣式表中的指定屬性。

炎黃職業(yè)技術(shù)學(xué)院 信息工程系畢業(yè)設(shè)計（論文）

炎黃職業(yè)技術(shù)學(xué)院 信息工程系畢業(yè)設(shè)計（論文）

圖2-2 隨筆

相冊效果圖2-3如下：

圖2-3 相冊

音樂效果圖2-4如下：

圖2-4 音樂

關(guān)于我效果圖2-5如下：

炎黃職業(yè)技術(shù)學(xué)院 信息工程系畢業(yè)設(shè)計（論文）

圖2-5 關(guān)于我

3.2 網(wǎng)站主題

本網(wǎng)站是一個簡單的個人網(wǎng)站設(shè)計，以動漫為主題，主要包括了本人的自我介紹、比較喜愛的動漫作品以及平時的娛樂等。

3.3 網(wǎng)站風(fēng)格

1.本網(wǎng)站主要體現(xiàn)了清新自然的風(fēng)格，以簡潔為主。2.網(wǎng)站的主色調(diào)為綠和白，充分襯托清新自然的風(fēng)格。

炎黃職業(yè)技術(shù)學(xué)院 信息工程系畢業(yè)設(shè)計（論文）

炎黃職業(yè)技術(shù)學(xué)院 信息工程系畢業(yè)設(shè)計（論文）

(1)執(zhí)行“插入”—“新建元件”命令，創(chuàng)建一個名稱為“拉伸的葉片”的影片剪輯元件。

(2)選擇矩形工具，設(shè)置填充顏色，在舞臺上繪制一個無描邊舉行，在屬性面板中設(shè)置寬和高。

(3)選擇矩形，將其轉(zhuǎn)換成“名稱”為“葉片”的圖形元件。(4)選擇

onmouseout=“makevisible(this,1)”

onmouseout=“makevisible(this,1)” 炎黃職業(yè)技術(shù)學(xué)院 信息工程系畢業(yè)設(shè)計（論文）

2.輸入文字，制作超鏈接。

4.6 xiangce4.html頁面的制作

1.制作圖庫頁面。

(1)新建一個網(wǎng)頁文檔，建立圖庫頁面的基本布局。

(2)將光標(biāo)定位在頁面左側(cè)的 炎黃職業(yè)技術(shù)學(xué)院 信息工程系畢業(yè)設(shè)計（論文）“1”，單擊[確定]按鈕回到行為面板，將此行為事件改為“onclick”。

(2)用同樣的方法，給另外3張圖像添加同樣的行為，將 炎黃職業(yè)技術(shù)學(xué)院 信息工程系畢業(yè)設(shè)計（論文）

致

謝

本論文歷時兩個多月，我系統(tǒng)綜合地將我所學(xué)的知識運用于畢業(yè)設(shè)計的全過程。在完成畢業(yè)設(shè)計中，首先我要感謝我的指導(dǎo)教師****老師。*老師耐心細(xì)致地指導(dǎo)我畢業(yè)設(shè)計，提出了很多精辟而富有建設(shè)性的建議。*老師認(rèn)真負(fù)責(zé)的工作態(tài)度，嚴(yán)謹(jǐn)?shù)闹螌W(xué)態(tài)度都給我留下了深刻的印象，在學(xué)習(xí)上給予了我極大的關(guān)心和幫助，在此表示衷心感謝！

同時，感謝炎黃職業(yè)技術(shù)學(xué)院為我提供了一個良好的學(xué)習(xí)環(huán)境，感謝學(xué)院的領(lǐng)導(dǎo)和老師們！他們無微不至的關(guān)懷、精心的培養(yǎng)使我到了很多的知識，終生受益！

炎黃職業(yè)技術(shù)學(xué)院 信息工程系畢業(yè)設(shè)計（論文）

參考文獻(xiàn)

[1] 繆亮.Dreamweaver CS3 基礎(chǔ)與實訓(xùn)教程.電子工業(yè)出版社，2008年.[2] 李冬蕓.Flash動畫實例教程.電子工業(yè)出版社，2010年.[3] 繆亮，郭剛.Photoshop平面設(shè)計實用教程.清華大學(xué)出版者，2008年.