第一篇：個(gè)人網(wǎng)站的前端設(shè)計(jì)論文

摘要：個(gè)人網(wǎng)站是指因特網(wǎng)上一塊固定的面向全世界發(fā)布消息的地方，個(gè)人網(wǎng)站由域名、程序和網(wǎng)站空間構(gòu)成，通常包括主頁和其他具有超鏈接文件的頁面。人們可以通過網(wǎng)站來發(fā)布自己想要公開的資訊，或者利用網(wǎng)站來提供相關(guān)的網(wǎng)絡(luò)服務(wù)。網(wǎng)站設(shè)計(jì)的好壞直接影響著網(wǎng)站的性能，本文針對(duì)個(gè)人博客網(wǎng)站設(shè)計(jì)談了自己的體會(huì)。

【關(guān)鍵詞】個(gè)人網(wǎng)站HTML5CSS3Javascript

隨著互聯(lián)網(wǎng)的發(fā)展，網(wǎng)絡(luò)上的網(wǎng)站數(shù)量越來越多。個(gè)人網(wǎng)站的數(shù)量也與日俱增。一個(gè)好的網(wǎng)站不僅要保證有著良好的性能，同時(shí)頁面的前端設(shè)計(jì)也得非常的優(yōu)秀。一個(gè)良好的前端設(shè)計(jì)往往包含了合理的配色，清晰的頁面結(jié)構(gòu)，流暢的動(dòng)畫。隨著個(gè)人網(wǎng)站的發(fā)展，也催生出來很多優(yōu)秀的博客程序，比如：《WordPress》、《Typecho》等等。那么應(yīng)如何設(shè)計(jì)個(gè)人網(wǎng)站的前端呢？

1設(shè)計(jì)語言

1.1HTML5

HTML5是HTML最新的修訂版本，2014年10月由萬維網(wǎng)聯(lián)盟完成標(biāo)準(zhǔn)制定。目標(biāo)是替換1999年所制定的HTML4.01和XHTML1.0標(biāo)準(zhǔn)，以及能在互聯(lián)網(wǎng)應(yīng)用迅速發(fā)展的時(shí)候，使網(wǎng)絡(luò)標(biāo)準(zhǔn)達(dá)到匹配當(dāng)代的網(wǎng)絡(luò)需求。廣義論及HTML5時(shí)，實(shí)際指的是包括HTML、CSS和JavaScript在內(nèi)的一套技術(shù)組合。它希望能夠減少網(wǎng)頁瀏覽器對(duì)于需要插件的豐富性網(wǎng)絡(luò)應(yīng)用服務(wù)，例如：AdobeFlash、MicrosoftSilverlight與OracleJavaFX的需求，并且提供更多能有效加強(qiáng)網(wǎng)絡(luò)應(yīng)用的標(biāo)準(zhǔn)集。

1.2CSS3

層疊樣式表（CSS），又稱串樣式列表、級(jí)聯(lián)樣式表、串接樣式表、層疊樣式表、階層式樣式表，一種用來為結(jié)構(gòu)化文檔添加樣式的計(jì)算機(jī)語言，由W3C定義和維護(hù)。CSS3現(xiàn)在已被大部分現(xiàn)代瀏覽器支持。

CSS3分成了不同類別，稱為“modules”。而每一個(gè)“modules”都有于CSS2中額外增加的功能，以及向后兼容。CSS3早于1999年已開始制訂。直到2011年6月7日，CSS3ColorModule終于發(fā)布為W3CRecommendation。CSS3里增加了不少功能，如：“border-radius”、“text-shadow”等。

1.3JavaScript

一種高級(jí)編程語言，通過解釋執(zhí)行，是一門動(dòng)態(tài)類型，面向?qū)ο蟮闹弊g語言。它已經(jīng)由ECMA通過ECMAScript實(shí)現(xiàn)語言的標(biāo)準(zhǔn)化。它被世界上的絕大多數(shù)網(wǎng)站所使用，也被世界主流瀏覽器支持。JavaScript是一門基于原型、函數(shù)先行的語言，是一門多范式的語言，它支持面向?qū)ο缶幊?，命令式編程，以及函?shù)式編程。它提供語法來操控文本，數(shù)組，日期以及正則表達(dá)式等，不支持I/O，比如網(wǎng)絡(luò)，存儲(chǔ)和圖形等，但這些都可以由它的宿主環(huán)境提供支持。隨著最新的HTML5和CSS3語言標(biāo)準(zhǔn)的推行它還可用于游戲、桌面和移動(dòng)應(yīng)用程序的開發(fā)和在服務(wù)器端網(wǎng)絡(luò)環(huán)境運(yùn)行。

2開發(fā)工具

SublimeText是一套跨平臺(tái)的文本編輯器，支持基于Python的插件。SublimeText是專有軟件，可通過包擴(kuò)充本身的功能。大多數(shù)的包使用自由軟件授權(quán)發(fā)布，并由社區(qū)建置維護(hù)。SublimeText支持眾多編程語言，并支持語法上色。

MozillaFirefox，中文俗稱火狐，是一個(gè)自由及開源的網(wǎng)頁瀏覽器，由Mozilla基金會(huì)及其子公司Mozilla公司開發(fā)。Firefox支持Windows、OSX及Linux，其移動(dòng)版支持Android及FirefoxOS，這些版本的Firefox使用Gecko來排版網(wǎng)頁，Gecko是一個(gè)運(yùn)行當(dāng)前與預(yù)期之網(wǎng)頁標(biāo)準(zhǔn)的排版引擎，而在2015年發(fā)布的FirefoxforiOS則非使用Gecko。

3網(wǎng)站前端設(shè)計(jì)

3.1站點(diǎn)架構(gòu)

首先確認(rèn)了整體頁面是由左右兩個(gè)DIV組成，并提供一個(gè)按鈕，可以按下后隱藏左邊的DIV以達(dá)到只顯示右邊的DIV的正文的目的。為left和right兩標(biāo)簽加上內(nèi)容，并美化其頁面。

3.2頁面設(shè)計(jì)

作品頁面主要用于存放一些作品的demo，所以設(shè)計(jì)成了幾個(gè)div以格子的形式排列，并在上面能夠顯示作品的預(yù)覽。整體的頁面框架依舊沿用首頁，以達(dá)到站點(diǎn)整體風(fēng)格的統(tǒng)一和css的最佳化利用，并減少開發(fā)過程。

3.3加入動(dòng)畫，添加特效

例如顯示懸浮到容器上的陰影漸變的效果如下：

給容器設(shè)置box-shadow屬性，值為2px2px20px#909090；再給這個(gè)容器設(shè)置hover版本的css，設(shè)置為box-shadow：2px2px70px#707070；給容器設(shè)置transition屬性，值為2s；

使用html默認(rèn)支持hover屬性來切換兩套寫好的css3陰影代碼來實(shí)現(xiàn)陰影效果的切換，再使用transition屬性設(shè)置動(dòng)畫的播放時(shí)間以達(dá)到更美觀的效果。

3.4其他效果

例如使用了highlight.js，用于給生成的代碼塊添加高亮和排版效果。

4總結(jié)

總之，要使整個(gè)網(wǎng)站有個(gè)性化的體驗(yàn)，不僅要頁面內(nèi)容豐富，動(dòng)畫流暢，還需要有相關(guān)特效，讓整體效果簡(jiǎn)潔大方美觀，讓人有耳目一新的感覺。

第二篇：個(gè)人網(wǎng)站設(shè)計(jì)論文

秦皇島職業(yè)技術(shù)學(xué)院信息工程系

分類號(hào)： TP319

秦皇島職業(yè)技術(shù)學(xué)院 課程設(shè)計(jì)（論文）

個(gè)人博客網(wǎng)頁設(shè)計(jì)論文

學(xué)生姓專班指導(dǎo)教指導(dǎo)教師職名 王飛飛 業(yè) 計(jì)算機(jī)應(yīng)用技術(shù) 級(jí) 1100103 師

稱

目錄

摘要 …………………………………………………………………………………2 前言 …………………………………………………………………………………3 第一章 關(guān)于網(wǎng)絡(luò)的知識(shí).............................................4

秦皇島職業(yè)技術(shù)學(xué)院信息工程系

1.1 INTERNET的簡(jiǎn)介.................................................4 1.2 WWW的簡(jiǎn)介....................................................4 1.3網(wǎng)頁基本構(gòu)成元素..............................................5 1.4 制作網(wǎng)頁前的準(zhǔn)備..............................................5 第二章 網(wǎng)站制作實(shí)戰(zhàn)...............................................6 2.1 站點(diǎn)..........................................................6 2.1.1 創(chuàng)建站點(diǎn)..................................................6 2.1.2 創(chuàng)建站點(diǎn)內(nèi)容..............................................6 2.2 首頁..........................................................7 2.2.1 設(shè)置首頁布局和頁面屬性....................................7 2.2.2 查看和編輯頭內(nèi)容..........................................9 2.2.3 插入圖像..................................................9 2.2.4 插入FLASH相冊(cè)...........................................10 2.2.5 插入文本.................................................10 2.3 創(chuàng)建其它網(wǎng)頁.................................................11 第三章 建立網(wǎng)頁鏈接..............................................12 3.1 文字鏈接.....................................................12 3.2 圖像鏈接.....................................................13 3.3在HTML語言中建立網(wǎng)頁鏈接....................................14 第四章 網(wǎng)站測(cè)試與維護(hù) …………………………………………………………17 結(jié)論………………………………………………………………………………18 參考文獻(xiàn) ……………………………………………………………………… 19 致謝………………………………………………………………………………20

摘 要

本論文主要是對(duì)個(gè)人網(wǎng)站的建立進(jìn)行研究和探討。作品的主要技術(shù)指標(biāo)包括：

1、制作出一個(gè)具有靜態(tài)技術(shù)的“個(gè)人網(wǎng)站”；

2、在制作的過程中，加強(qiáng)和 1

秦皇島職業(yè)技術(shù)學(xué)院信息工程系

深化以前所學(xué)的關(guān)于網(wǎng)頁設(shè)計(jì)的方法，同時(shí)更好的理解參考資料上的方法、理論和更好的利用Fireworks、Flash制作網(wǎng)站需要的一些圖片和影片。

本設(shè)計(jì)的主要內(nèi)容包括：

1、個(gè)人網(wǎng)站的設(shè)計(jì)思想，整體規(guī)劃及相關(guān)基礎(chǔ)知識(shí)；

2、個(gè)人網(wǎng)站的首頁設(shè)計(jì)，包括簡(jiǎn)單的HTML語言及效果圖；

3、個(gè)人網(wǎng)站的調(diào)試。

網(wǎng)頁規(guī)劃包含的內(nèi)容很多，如網(wǎng)頁的結(jié)構(gòu)、欄目的設(shè)置、網(wǎng)頁的風(fēng)格、顏色搭配、版面布局、文字圖片的運(yùn)用等，也只有如此制作出來的網(wǎng)頁才能有個(gè)性、有特色，具有吸引力。

網(wǎng)站主題就是所要包含的主要內(nèi)容，一個(gè)網(wǎng)站必須要有一個(gè)明確的主題。特別是對(duì)于個(gè)人網(wǎng)站，不可能像單獨(dú)的網(wǎng)頁那樣做得內(nèi)容少而單一。所以必須要找準(zhǔn)一些自己最感興趣內(nèi)容，做深、做透，辦出自己的特色，這樣才能給人留下深刻的印象。

關(guān)鍵詞：技術(shù)指標(biāo)

基本設(shè)計(jì)內(nèi)容

網(wǎng)站規(guī)劃 網(wǎng)站主題

前言

隨著二十一世紀(jì)新興科技的飛速發(fā)展，如今的交流與交往不再是那么的單調(diào)，看如今不曾再有五百里加急文件的傳送，看如今已很少在出現(xiàn)寫信、寄信。人們正在運(yùn)用現(xiàn)世紀(jì)的高科技來增加自己的交際圈，來發(fā)展自己的人脈關(guān)系，秦皇島職業(yè)技術(shù)學(xué)院信息工程系

同時(shí)，其它人也是通過高科技，悄悄的就能很容易地去了解，關(guān)注一個(gè)人。

正是因?yàn)槿藗兊倪@些需求，所以出現(xiàn)了互聯(lián)網(wǎng)，正是因?yàn)槿藗兊男枨?，所以出現(xiàn)了如今的網(wǎng)絡(luò)時(shí)代，網(wǎng)絡(luò)通訊工具。來方便人們的交往，交際與溝通。也正是因?yàn)槿藗兊男枨?，所以出現(xiàn)了個(gè)人博客，通過一人簡(jiǎn)單的網(wǎng)頁來展現(xiàn)自己的獨(dú)特魅力，自己的與眾不同。真正的做到了“足不出戶，便知天下人”。

互聯(lián)網(wǎng)加大了我們了解世界的眼界，縮緊了人與人之間的距離，這就更容易的使我們走上了信息化的道路。

我覺得一個(gè)網(wǎng)站的開始，應(yīng)該有一個(gè)大體的規(guī)劃，網(wǎng)站的布局是最重要的，它起著一個(gè)網(wǎng)站成功與否的決定性作用，因?yàn)椴季值暮门c壞，帶來的是網(wǎng)站整體上的美觀效果及應(yīng)用。網(wǎng)站內(nèi)容上也能決定著網(wǎng)站成功與否，一個(gè)網(wǎng)站上的每個(gè)字眼都可能決定著這個(gè)網(wǎng)站，因?yàn)槟悴恢滥膫€(gè)字就是吸引別人的內(nèi)容，就是大家都追捧的話題，就是很潮的事物，所以內(nèi)容上一定要謹(jǐn)慎。再有，就是網(wǎng)站的圖片，一定要確準(zhǔn)好路徑，以免圖像的丟失而不能再網(wǎng)站中顯示，其次就是鏈接，在Dreamweaver中提供了很簡(jiǎn)單的鏈接命令，根據(jù)其提示操作即可。

我做了一個(gè)簡(jiǎn)單的個(gè)人博客的網(wǎng)站，通過這個(gè)網(wǎng)站能讓大家更深的了解我，同時(shí)更重要的是鍛煉自己的實(shí)踐能力，鞏固自己學(xué)習(xí)的知識(shí)，彌補(bǔ)自己學(xué)習(xí)的不足。

第一章 關(guān)于網(wǎng)絡(luò)的知識(shí)

1.1什么是Internet Internet是由眾多的計(jì)算機(jī)網(wǎng)絡(luò)互聯(lián)而成的互聯(lián)網(wǎng)，它覆蓋了全世界各地，3

秦皇島職業(yè)技術(shù)學(xué)院信息工程系

它是采用開放系統(tǒng)協(xié)議的計(jì)算機(jī)通訊網(wǎng)絡(luò)。然而，Internet不僅僅是計(jì)算機(jī)的互聯(lián)網(wǎng)，它還是全球最大的信息資源寶庫(kù)，它提供了包括科研、教育、文化娛樂、商業(yè)和信息交流等各種各樣的服務(wù)，使得世界范圍內(nèi)的人與人之間的交流在時(shí)間和空間上變的更小了。

Web頁瀏覽：這是目前利用最廣泛、最直接的互聯(lián)網(wǎng)服務(wù)，通過瀏覽WWW（萬維網(wǎng)）中的網(wǎng)頁，可以了解世界各地的新聞，查看最新的股市行情，最新的娛樂動(dòng)態(tài)、科技發(fā)明，找到眾多的就業(yè)信息??幾乎想找到什么樣的信息，就有什么信息。正是有了WWW、Internet才會(huì)變得如此豐富多彩，才能走進(jìn)千家萬戶。1.2 WWW的簡(jiǎn)介

WWW的全稱為World Wide Web，含義是“環(huán)球網(wǎng)”，又稱“萬維網(wǎng)”、3W、Web。WWW是一個(gè)基于超文本（Hypertext）方式的信息檢索服務(wù)工具。我們上網(wǎng)瀏覽到的網(wǎng)頁就是這樣的超文本，也就是HTML(Hypertext Mark-up Language,超文本標(biāo)記語言)文件，這些網(wǎng)頁檔被放置到WWW服務(wù)器上，并且都有一定的地址。當(dāng)我們想瀏覽某個(gè)網(wǎng)站時(shí)，首先要在計(jì)算機(jī)上安裝瀏覽器，如

Internet Explorer或Netscape，然后在瀏覽器中輸入網(wǎng)站的地址（網(wǎng)址），就可以進(jìn)入網(wǎng)站進(jìn)行瀏覽。在這些網(wǎng)頁中，都有超連接，當(dāng)將鼠標(biāo)指針移動(dòng)到某個(gè)地方（如文本或圖像）時(shí)，鼠標(biāo)指針就會(huì)變成一個(gè)小手形形狀，單擊它就可以連接到另個(gè)網(wǎng)頁中，從而使得瀏覽者能在不同的信息之間動(dòng)畫和聲音等信息。通跳轉(zhuǎn)，我們之所以能在Internet的海洋中穿梭自如，正是超連接的功勞。

秦皇島職業(yè)技術(shù)學(xué)院信息工程系

1.3網(wǎng)頁基本構(gòu)成元素

要學(xué)會(huì)制作網(wǎng)頁，首先需要了解網(wǎng)頁都是由什么元素構(gòu)成的。文字：文本是構(gòu)成網(wǎng)頁的基本元素。一個(gè)最簡(jiǎn)單的網(wǎng)頁可以只有幾行文本。圖片：正是有個(gè)各種美麗的圖片，網(wǎng)頁才變得多姿多彩。動(dòng)畫：如今，網(wǎng)頁上的動(dòng)畫越來越多，最常用的有GIF動(dòng)畫、Flash動(dòng)畫等。超連接：如上所述，超連接幾乎是必不可少的。一個(gè)沒有超連接的網(wǎng)頁，就如同汪洋大海中的一座孤島，失去了與外界的一切聯(lián)系。其它元素：還可以在網(wǎng)頁中添加聲音、視頻等元素。1.4 制作網(wǎng)頁前的準(zhǔn)備

計(jì)算機(jī)必備：計(jì)算機(jī)速度夠快，最好能夠上網(wǎng)。操作系統(tǒng)：Windows 98/NT/Me/2000/XP.其它軟件：看圖軟件ACDSee、圖像處理軟件Photoshop、上傳工具CuteFTP、Fireworks、動(dòng)畫軟件Flash等。

秦皇島職業(yè)技術(shù)學(xué)院信息工程系

第二章 網(wǎng)站制作實(shí)戰(zhàn)

2.1 站點(diǎn) 2.1.1 創(chuàng)建站點(diǎn)

要制作一個(gè)網(wǎng)站，第一步操作都是一樣的，就是要?jiǎng)?chuàng)造一個(gè)“站點(diǎn)”，從菜單中選擇“站點(diǎn)/管理站點(diǎn)”在彈出的對(duì)話框中選擇“新建”，之后再選擇其中的“站點(diǎn)”，再次彈出一個(gè)對(duì)話框，在文本框中輸入自己已經(jīng)企化好的網(wǎng)站名稱“my web”。填好后，單擊“下一步”，進(jìn)入下一個(gè)步驟。由于我要做的是一個(gè)靜態(tài)的網(wǎng)頁，所以選擇上面的一項(xiàng)“否，我不想使用服務(wù)器技術(shù)。單擊“下一步”，進(jìn)入下一個(gè)步驟。在此選項(xiàng)中有兩個(gè)選擇，選擇推薦的“編輯我的計(jì)算機(jī)上的本地副本，完成后再上傳到服務(wù)器”。底下的文本框允許在本地磁盤上指定一個(gè)文件夾，Dreamweaver將在其中儲(chǔ)存站點(diǎn)檔的本地副本。單擊該文本框后面的文件夾圖示，之后單擊“下一步“，進(jìn)入下一個(gè)步驟。這一步是如何設(shè)置連接到遠(yuǎn)程服務(wù)器，彈出式菜單中有6中選擇，這里選擇“無”。而后“下一步”再“完成”，即可。2.1.2 創(chuàng)建站點(diǎn)內(nèi)容

站點(diǎn)創(chuàng)建完成后，就可以創(chuàng)建Web頁來填充站點(diǎn)了。在“右側(cè)浮動(dòng)面板組”中選擇“檔/檔”面板，在彈出的菜單中選擇“新建文件”，新建一個(gè)檔后將其命名為“index.htm(或index.html),它就是未來的首頁。

秦皇島職業(yè)技術(shù)學(xué)院信息工程系

2.2 首頁

2.2.1 設(shè)置首頁布局和頁面屬性

一、設(shè)置首頁布局

每個(gè)網(wǎng)站都會(huì)有一個(gè)首頁，就功能上而言，它代表著一個(gè)網(wǎng)站的風(fēng)格與特色，就網(wǎng)站架構(gòu)上而言，它代表了網(wǎng)站的第一層架構(gòu)，首頁是打開網(wǎng)站后在瀏覽器中顯示的第一個(gè)頁面。它是起什么名字通常要視Server端的設(shè)置，一般的有index.htm,default.htm或home.htm等，目前主要以index.htm的居多。當(dāng)然，后綴名為html也是正確的。具體設(shè)置方法是：右健單擊“檔”浮動(dòng)面板中的index.htm,在彈出的菜單中選擇“設(shè)成首頁”。操作步驟：

1、在“插入快捷欄”的“布局”分類中，單擊“布局表格”按紐。

2、將變成“+”形狀的鼠標(biāo)游標(biāo)放到編輯中網(wǎng)頁上，在要繪制的地方進(jìn)行拖動(dòng)就可以進(jìn)行創(chuàng)建了。（如果繪制的是第一個(gè)表格必須從網(wǎng)頁的最左上角開始繪制）。“index”表格布局如下圖：

秦皇島職業(yè)技術(shù)學(xué)院信息工程系

二、設(shè)置首頁的頁面屬性

首先雙擊“檔”浮動(dòng)面板中的index.htm,進(jìn)入頁面的編輯窗口。右健單擊空白區(qū)域，在菜單中選擇“頁面屬性”，之后彈出“頁面屬性”對(duì)話框，若選擇主菜單“修改/頁面屬性”項(xiàng)，也可以把打開該對(duì)話框。

在“頁面屬性”對(duì)話框中，左側(cè)窗口顯示“分類”，其中包括了“外觀”、“鏈接”、“標(biāo)題”、“標(biāo)題/編碼”、“跟蹤圖像”5項(xiàng)，右側(cè)區(qū)域則顯示各類中可以設(shè)置的項(xiàng)目

“index”首頁設(shè)置的屬性如下圖所示：

秦皇島職業(yè)技術(shù)學(xué)院信息工程系

2.2.2 查看和編輯頭內(nèi)容

一個(gè)網(wǎng)頁文件結(jié)構(gòu)上實(shí)際是由兩部分組成，頭（head）內(nèi)容和主體（body）內(nèi)容主體內(nèi)容（body）是文檔的主要部分，也是包含文本和圖像等的可見部分。頭內(nèi)容（head）是除文檔標(biāo)題外的不可見部分，包含有文文件類型、語言編碼、搜索引擎的關(guān)鍵的關(guān)鍵詞和內(nèi)容指示器以及樣式定義等重要信息，這些元器并不是每個(gè)頁面都需要的，例如，可以僅為主頁提供關(guān)鍵詞。2.2.3 插入圖像

圖像是網(wǎng)頁中不可或缺的組成成份，恰當(dāng)?shù)厥褂脠D像，可以使網(wǎng)站充滿生活生命力與說服力，吸引更多的瀏覽者，加深他們欣賞你網(wǎng)站的意愿。首先將游標(biāo)停留在要插入圖像的位置，然后單擊“菜單欄”下面“插入快健欄”的下拉表，選擇其中的“常用”類，則右側(cè)將會(huì)顯示該類中可以插入的對(duì)象快鍵按鈕。左起第5個(gè)即為“圖像：圖像”按鈕，單擊它右側(cè)的下拉列表，選擇第1項(xiàng)“圖像”。隨即彈出“選擇圖像源文件”對(duì)話框。從計(jì)算機(jī)磁盤中選擇想要插入的圖像文件，下面的“相對(duì)于”下拉表框中，可選擇文件URL地址的類型，插入logo圖像，如圖所示:

秦皇島職業(yè)技術(shù)學(xué)院信息工程系

最后單擊“確定”按鈕，即可完成插入圖像的操作。2.2.4 插入FLASH相冊(cè)

在Dreamweaver 8中，除了之前講到的可以插入“圖像”外，還可插入動(dòng)畫、聲音、視頻，F(xiàn)LASH相冊(cè)等媒體元素，并且還可以在Dreamweaver自身內(nèi)插入Macromedia Flash MX2004按鈕和文本對(duì)象，以及進(jìn)行相關(guān)的后期處理和添加設(shè)計(jì)備注等操作。在Dreamweaver 8文文件中，可以插入媒體文件包Flash 相冊(cè)、QuickTime、AVI java、applet Active X控件以及各種格式的音頻檔。要在瀏覽器中播放放Flash 相冊(cè)，必須在瀏覽器中集成“Flash 播放器（Flash Player）”。操場(chǎng)作步驟：

步驟1、將游標(biāo)停留在要插入Flash的位置，然后單擊菜單欄下面“插入”的下拉列表，選擇其中的“FLASH”分類，找到圖像查看器命令，單擊彈出保存對(duì)話框，選擇要保存的地方和名稱，點(diǎn)擊保存。

步驟

2、在Dreamweaver中將會(huì)產(chǎn)生一個(gè)flash相冊(cè)，在Dreamweaver中的最右邊將會(huì)有一個(gè)flash元素，一次將flash的屬性修改，既可完成一個(gè)flash相冊(cè)的制作。2.2.5 插入文本

文字是人類語言最基本的表達(dá)方式，在網(wǎng)頁中，文本內(nèi)容也可以說是重要的組成部分，它是最關(guān)鍵的因素。插入文本的兩種方式：一種是在網(wǎng)頁編輯窗口中直接用鍵盤敲入文本。另一種是復(fù)制文本的方式。直接使用Dreamweaver的文本復(fù)制功能，將大段的文本內(nèi)容拷貝到網(wǎng)頁的編輯窗口來進(jìn)行排版的工作，10

秦皇島職業(yè)技術(shù)學(xué)院信息工程系

具體步驟如下：打開文本編輯軟件（如Microsoft Word），選中要復(fù)制的文本，它們將反白顯示，執(zhí)行菜單“編輯/復(fù)制”命令或直接用快捷鍵Ctrl+C，之后切換回Dreamweaver,將游標(biāo)停留在插入文本的位置，執(zhí)行主菜單“編輯/粘貼”命令或直接使用快捷鍵Ctrl+v,即可將大段的文本快速粘貼到網(wǎng)頁中。這在我的“閑情逸致”中用到很多。2.3 創(chuàng)建其它網(wǎng)頁

還有其它的幾個(gè)網(wǎng)站與主頁的制作相同，一個(gè)網(wǎng)頁是圖像和文字的組合?！跋鄡?cè)”子頁中的FLASH相冊(cè)的插入和前面的介紹相同。

秦皇島職業(yè)技術(shù)學(xué)院信息工程系

第三章 建立網(wǎng)頁鏈接

網(wǎng)站實(shí)際上是由很多網(wǎng)頁組成的，那么網(wǎng)頁之間是如何聯(lián)系的呢？這就是本章要講的內(nèi)容----網(wǎng)頁的“鏈接”。“鏈接”，又稱“超鏈接"（Hyperlink）,它作為網(wǎng)頁的橋梁。網(wǎng)頁中的很多對(duì)象都可以加入“鏈接”屬性。在Dreamweaver 8中，如果以“鏈接”的媒介來劃分的話，則“鏈接”可以分為“文字鏈接”、“圖像鏈接”、“圖像地圖鏈接”、“內(nèi)部鏈接和外部鏈接”、“E-mail鏈接”、“命名錨記鏈接”、“文件下載鏈接”和“跳轉(zhuǎn)菜單”，共8種。3.1 文字鏈接

“文字鏈接”即以文字作為媒介的鏈接，它是網(wǎng)頁中最常被使用的鏈接方式，具有“文件小、制作簡(jiǎn)單和便于維護(hù)”的特點(diǎn)。接下來結(jié)合我的個(gè)人網(wǎng)站為實(shí)例，來講解如何為文字建立“鏈接”。操作步驟：

步驟1、準(zhǔn)備好已經(jīng)制作完成的首頁的各個(gè)欄目頁面

步驟

2、在Dreamweaver 中打開首頁，之后反白選取作為“鏈接”的文字。步驟

3、觀察“屬性面板”，其中包括一個(gè)“鏈接”文本框。步驟

4、接下來需要把鏈接的位址加入到文本框中。

步驟

5、在“鏈接”文本框下面還有一個(gè)“目標(biāo)”下拉列表，從中可以選擇鏈接網(wǎng)頁顯示的窗口方式，共有4種。如圖：

步驟

6、還可以設(shè)置一些“鏈接”的屬性，單擊“屬性面板”中的“頁面 12

秦皇島職業(yè)技術(shù)學(xué)院信息工程系

屬性”，選擇其中的“鏈接”分類，可以進(jìn)行的設(shè)置有“鏈接字體”、“大小”、“鏈接顏色”、“變換圖像鏈接”顏色、“已訪問鏈接”顏色、“活動(dòng)鏈接”顏色及“下劃線樣式”。

步驟

7、至此，第1個(gè)欄目的鏈接就制作完畢了，按下Ctrl+S保存網(wǎng)頁，再按下F12預(yù)覽，測(cè)試一下，當(dāng)鼠標(biāo)放在“放松心情”這4個(gè)文字上時(shí)將變成手形，并且瀏覽器窗口下面的狀態(tài)區(qū)中會(huì)顯示鏈接到的網(wǎng)頁的位址，單擊文字，頁面會(huì)立即跳轉(zhuǎn)到第1個(gè)欄目中，這表示鏈接已經(jīng)制作成功了。

步驟

8、同理，按照以上步驟，再為“閑情逸致”和“個(gè)人主頁”等其它欄制作指向?qū)?yīng)欄目的鏈接。

至此，整個(gè)“文字鏈接”的實(shí)例就全就全部完成了。3.2 圖像鏈接

“圖像”也是常被使用的鏈接媒體，它和“文字鏈接”非常相似。為圖像加入鏈接，首先應(yīng)該在網(wǎng)頁中插入“圖像”，有關(guān)插入“圖像”或“導(dǎo)航條”按鈕的內(nèi)容，接下來以我的網(wǎng)站“my web“為例，講解如何建立“圖像鏈接”。操作步驟：

步驟

1、首先仍然要準(zhǔn)備好已經(jīng)制作完成的首頁和各個(gè)欄目的頁面 步驟

2、在Dreamweaver中打開網(wǎng)站的首頁，之后選取要制作“鏈接”的圖像。

步驟

3、觀察“屬性面板”，在“鏈接”文本框中輸入鏈接的文字位址。步驟

4、如果有需要，可以在“目標(biāo)”下拉列表中選擇“鏈接”網(wǎng)頁顯示 13

秦皇島職業(yè)技術(shù)學(xué)院信息工程系 的窗口方式，分別為-blank、-parent、-self或-top。

步驟

5、至此，第1個(gè)欄目的圖像鏈接就制作完畢了，按下Ctrl+S保存網(wǎng)頁，再按下F12預(yù)覽，測(cè)試一下，將鼠標(biāo)放在“動(dòng)畫制作”4個(gè)文字上時(shí)將變成手形，同時(shí)瀏覽器窗口下面的狀態(tài)區(qū)中會(huì)顯示出鏈接到的網(wǎng)頁的地址，并且會(huì)顯示出“替代”文本“動(dòng)畫制作”，單擊文字，頁面會(huì)立即跳轉(zhuǎn)到第3個(gè)欄目中，這表示鏈接已經(jīng)制作成功了。

步驟

6、同理，按照以上步驟，再為其它幾幅圖像制作指向?qū)?yīng)欄目的鏈接。

步驟

7、在欄目頁面中制作“返回首頁”的鏈接，使得單擊后可以跳轉(zhuǎn)回首頁。

至此，整個(gè)“圖像鏈像”的實(shí)例就全部完成了。3.3在HTML語言中建立網(wǎng)頁鏈接

一、文字鏈接

在HTML語言中用超鏈接標(biāo)記指向一個(gè)目標(biāo)。其基本格式為：舉個(gè)簡(jiǎn)單的“文本鏈接”的實(shí)例，該實(shí)例相對(duì)應(yīng)的HTML代碼如下所示。

a href-“index2.html”target=”-blank”>平面設(shè)計(jì)（新開窗口，-blank)

相冊(cè)（原窗口，默認(rèn)為空）

留言

第三篇：網(wǎng)站前端設(shè)計(jì) 畢業(yè)論文

本科畢業(yè)設(shè)計(jì)（論文）

題 目: 學(xué) 院：專業(yè)班級(jí)：姓 名：指導(dǎo)教師：系 主 任：

數(shù)字媒體技術(shù)系網(wǎng)站前端設(shè)計(jì)與開發(fā) 學(xué) 號(hào)：

學(xué)院院長(zhǎng)： 二O一三年月日

畢業(yè)設(shè)計(jì)(論文)誠(chéng)信聲明

我謹(jǐn)在此保證：本人所寫的畢業(yè)設(shè)計(jì)(論文)，凡引用他人的研究成果均已在參考文獻(xiàn)或注釋中列出。設(shè)計(jì)(論文)主體均由本人獨(dú)立完成，沒有抄襲、剽竊他人已經(jīng)發(fā)表或未發(fā)表的研究成果行為。如出現(xiàn)以上違反知識(shí)產(chǎn)權(quán)的情況，本人愿意承擔(dān)相應(yīng)的責(zé)任。

聲明人(簽名)：

****年**月**日

摘 要

21世紀(jì)是信息高速發(fā)達(dá)的時(shí)代，網(wǎng)絡(luò)作為當(dāng)今最流行最方便快捷的媒介也越來越被人們接受，并且融入我們的生活。隨著高校信息化建設(shè)的不斷推進(jìn)，網(wǎng)站的作用超越了傳統(tǒng)的信息獲取，交流它更能體現(xiàn)組織機(jī)構(gòu)的風(fēng)采，性質(zhì)。所以高校院系建立本院系美觀，專業(yè)，易于維護(hù)管理的網(wǎng)站已經(jīng)勢(shì)在必行。

本論文主要圍繞數(shù)字媒體技術(shù)專業(yè)的門戶網(wǎng)站為開發(fā)主題，最基本也是最必須的三個(gè)技能。前端的開發(fā)中，在頁面的布局時(shí)，HTML將元素進(jìn)行定義，CSS對(duì)展示的元素進(jìn)行定位，再通過JavaScript實(shí)現(xiàn)相應(yīng)的效果和交互。雖然表面看起來這些很簡(jiǎn)單，但這里面需要掌握的東西絕對(duì)不會(huì)少。在進(jìn)行開發(fā)前，需要對(duì)這些概念弄清楚，弄明白，這樣在開發(fā)的過程中才會(huì)得心應(yīng)手。

分析并解決實(shí)現(xiàn)中的若干技術(shù)問題；介紹了個(gè)性化頁面的背景及jsp + javascript + mysql系統(tǒng)的一般原理；闡述整個(gè)個(gè)性化頁面生成系統(tǒng)的系統(tǒng)結(jié)構(gòu)及工作原理；分析了系統(tǒng)實(shí)現(xiàn)中的特殊性，難點(diǎn)和重點(diǎn)；設(shè)計(jì)實(shí)現(xiàn)用戶注冊(cè)，用戶登錄，用戶管理等jsp頁面。分析并解決實(shí)現(xiàn)中的若干技術(shù)問題；建立完整的校園網(wǎng)站，進(jìn)行測(cè)試并分析結(jié)果。

該網(wǎng)站有效地實(shí)現(xiàn)用戶通過JSP頁面訪問來進(jìn)行用戶注冊(cè)，登陸，并對(duì)網(wǎng)站內(nèi)容進(jìn)行有效的管理，提升了后期添加和刪除信息的有效性，具有一定的應(yīng)用價(jià)值

關(guān)鍵字：JSP；用戶登錄；javascript；網(wǎng)站美化；交互設(shè)計(jì)。

ABSTRACT

The twenty-first Century is the rapid development of information age, network as the world's most popular and most convenient media are increasingly accepted by people.Along with the information development, website functions beyond the traditional information acquisition, communication which can better reflect the organization style，properties.So universities establish the departments, professional appearance, easy maintenance and management of the site has been imperative.This thesis mainly focuses on digital media technology major portal for the development of the theme, the three most basic and necessary skills.Development of the front, in the layout of the page, HTML will define the elements, positioning CSS to display elements, and then through the JavaScript to achieve the corresponding effect and interaction.Although the surface looks like these are very simple, but it needs to grasp things never.In the development, the need for these concepts clear, understand, so in the development process will be handy.The main work done in this article is as follows:(1)Introduces the background and general principle of JSP + Javascript + MySQL system personalized pages;(2)Introduces the structure and working principle of the entire personalization page production system;analysis of the particularity, the difficulty and key system;(3)The design and implementation of user registration, user login, user management and other JSP page.(4)Analyze and solve some technical problems in implementation;(5)The establishment of a complete campus site, testing and analysis;

The site effectively achieve the user through the JSP page access to user registration, login, and carry on effective management to the website content, enhance the effectiveness of the late addition and deletion of information, has a certain application value.Keywords：JSP;User login;JavaScript;Website Landscaping;Interaction Design

目 錄

摘 要 ABSTRACT

第1章 緒論...........................................................1

1.1 選題背景及意義............................................................................................................1 1.2 國(guó)內(nèi)外高校網(wǎng)站建設(shè)狀況..............................................................................................3 1.3 研究?jī)?nèi)容和擬解決的問題..............................................................................................5 1.4 本章小結(jié)......................................................................................................................6

第2章 前端開發(fā)工具及相關(guān)技術(shù).........................................7

2.1 前端開發(fā)環(huán)境...............................................................................................................7 2.2 前端開發(fā)工具...............................................................................................................7 2.3 前端開發(fā)相關(guān)技術(shù)........................................................................................................8 2.3.1 Java script 簡(jiǎn)介.......................................................................................................8 2.3.2 Java script 基本特點(diǎn)................................................................................................8 2.3.3 CSS 簡(jiǎn)介...............................................................................................................9 2.3.4 JQuery..................................................................................................................9 2.4 本章小結(jié)....................................................................................................................11

第3章 前端布局分析與設(shè)計(jì)............................................12

3.1 前端總體開發(fā)流程及設(shè)計(jì)............................................................................................12 3.1.1 分層開發(fā)..............................................................................................................12 3.1.2 代碼編寫..............................................................................................................12 3.1.3 內(nèi)部測(cè)試與后續(xù)優(yōu)化............................................................................................13 3.2 前端UI設(shè)計(jì)...............................................................................................................14 3.2.1 模塊分布..............................................................................................................14 3.2.2 顏色配置..............................................................................................................15

I

3.2.3 CSS元素..............................................................................................................16 3.3 交互設(shè)計(jì)與UI............................................................................................................17 3.4 點(diǎn)，線，面的運(yùn)用......................................................................................................18 3.4.1 點(diǎn)的運(yùn)用..............................................................................................................18 3.4.2 線的運(yùn)用..............................................................................................................19 3.5 網(wǎng)站結(jié)構(gòu)布局及設(shè)計(jì)...................................................................................................19 3.5.1 網(wǎng)站首頁結(jié)構(gòu).......................................................................................................19 3.5.2 主題鮮明，富有特色............................................................................................20 3.5.3 版式編排布局合理性............................................................................................21 3.6 網(wǎng)站前臺(tái)頁面設(shè)計(jì)......................................................................................................22 3.6.1 首頁.....................................................................................................................22 3.6.2 系內(nèi)概況..............................................................................................................23 3.6.3 系內(nèi)新聞..............................................................................................................23 3.7 本章小結(jié)....................................................................................................................23

第4章 主要功能的實(shí)現(xiàn)................................................23

4.1 界面設(shè)計(jì)....................................................................................................................23 4.2 具體設(shè)計(jì)文檔.............................................................................................................24 4.3 前臺(tái)新聞文摘顯示......................................................................................................24 4.3.1 網(wǎng)站裝飾風(fēng)格.......................................................................................................24 4.3.2 網(wǎng)站的鏈接結(jié)構(gòu)...................................................................................................25 4.4 可視化設(shè)計(jì).................................................................................................................25 4.5 具體實(shí)現(xiàn)技術(shù).............................................................................................................25 4.5.1 CSS在“數(shù)字媒體技術(shù)系網(wǎng)站”中的應(yīng)用實(shí)例...........................................................25 4.5.2 應(yīng)用JavaScript設(shè)計(jì)網(wǎng)頁......................................................................................26 4.6 本章小結(jié)....................................................................................................................28

II

第5章 總結(jié).........................................................29 參考文獻(xiàn)..............................................................30 致謝..................................................................32

第1章 緒論

1.1 選題背景及意義

如今的互聯(lián)網(wǎng)已經(jīng)滲透到我們生活的每一個(gè)層面，網(wǎng)站的內(nèi)容越來越豐富全面，以此來滿足了各種不同需求的瀏覽者。網(wǎng)站的作用眾所周知人們通過網(wǎng)站快速獲取，發(fā)布和傳遞信息。

目前很多高校建立起了自己的網(wǎng)站這些網(wǎng)站的建立使得學(xué)?？梢酝黄苽鹘y(tǒng)的媒體的限制在網(wǎng)絡(luò)上開辟的屬于自己的新天地。網(wǎng)絡(luò)具有超時(shí)空性。網(wǎng)絡(luò)超時(shí)空性是一種“一人對(duì)一人，一人對(duì)多人，多人對(duì)一人，多人對(duì)多人”的傳播方式[1]。超時(shí)空性的形成正式由于在網(wǎng)絡(luò)在時(shí)間層面，空間層面上的開放性帶來的。網(wǎng)絡(luò)的超時(shí)空性使得高校網(wǎng)站對(duì)學(xué)校本身和外界社會(huì)表現(xiàn)特定的功能，表現(xiàn)在網(wǎng)站有助于改變教育資源的分散性和分布不均衡性，有效的將教育資源進(jìn)行整合，從而使得教育資源使用意義上的無限增長(zhǎng)。網(wǎng)絡(luò)具有的海量存儲(chǔ)特性，網(wǎng)絡(luò)能形成一個(gè)巨大無比的數(shù)據(jù)庫(kù)，世界上任何時(shí)間任何地點(diǎn)的任何一件事都能成為網(wǎng)絡(luò)的信息被廣泛傳播。

高校網(wǎng)站的海量存儲(chǔ)特性可以從橫向和縱向兩方面分析：橫向看高校網(wǎng)站往往設(shè)置多個(gè)板塊，分別放置相關(guān)內(nèi)容。不同板塊的信息相互獨(dú)立，共同構(gòu)成網(wǎng)站的內(nèi)容?？v向看，同一個(gè)板塊的內(nèi)部，內(nèi)容并不是固定不變的，而是不斷添加連續(xù)更新的。大量的信息使得高校網(wǎng)站成為一個(gè)巨大的數(shù)據(jù)庫(kù)。

交互性體現(xiàn)在高校網(wǎng)站通過設(shè)置留言板，論壇，發(fā)揮網(wǎng)絡(luò)交互的功能，在老師和學(xué)生之間建立起了交流渠道。

高校網(wǎng)站正是以這些特點(diǎn)為基礎(chǔ)，發(fā)揮了自己本身的資源整合，信息傳播，多方交流互動(dòng)等方面的獨(dú)特功能，成為一座溝通橋梁。

很多高校網(wǎng)站內(nèi)容多姿多彩，板塊，內(nèi)容爭(zhēng)妍斗艷。但不外乎以一下幾部分：學(xué)校介紹，新聞發(fā)布，招生信息，就業(yè)信息，師資力量，科研成果，機(jī)構(gòu)設(shè)置，教學(xué)素材等。高校網(wǎng)站的建立和維護(hù)需要大量的物力和人力，為何要投入去建網(wǎng)站上？是因?yàn)槿缟纤龅母咝＞W(wǎng)站有的獨(dú)特特性使得建設(shè)高校網(wǎng)站勢(shì)在必行。

這些都促進(jìn)了各個(gè)機(jī)構(gòu)組織的信息化建設(shè)，隨著高校信息化建設(shè)的不斷推進(jìn)，網(wǎng)站的作用超越了傳統(tǒng)的信息獲取，交流它更能體現(xiàn)組織機(jī)構(gòu)的風(fēng)采，性質(zhì)。所以高校院系建立本院系美觀，專業(yè)，易于維護(hù)管理的網(wǎng)站。

我們要?jiǎng)?chuàng)建我們本專業(yè)的網(wǎng)站數(shù)字媒體技術(shù)系的專業(yè)網(wǎng)站，網(wǎng)站前端設(shè)計(jì)最基本的三個(gè)技能：HTML，CSS，JavaScript，PS 矢量圖像編輯技術(shù)。這個(gè)是前端開發(fā)中最基本也是最 必須的三個(gè)技能。前端的開發(fā)中，在頁面的布局時(shí)，HTML將元素進(jìn)行定義，CSS對(duì)展示的元素進(jìn)行定位，再通過JavaScript實(shí)現(xiàn)相應(yīng)的效果和交互。雖然表面看起來這些很簡(jiǎn)單，但這里面需要掌握的東西絕對(duì)不會(huì)少。在進(jìn)行開發(fā)前，需要對(duì)這些概念弄清楚，弄明白，這樣在開發(fā)的過程中才會(huì)得心應(yīng)手。

建立本系網(wǎng)站發(fā)揮的作用如下：

(1)數(shù)字媒體技術(shù)系網(wǎng)站是數(shù)字媒體專業(yè)的“商標(biāo)”。在這個(gè)高度信息化的社會(huì)里，建立數(shù)字媒體技術(shù)系自己的網(wǎng)站是最直接的宣傳手端。網(wǎng)站的超時(shí)空特性，不僅能讓本地區(qū)的人們了解學(xué)院，更可讓世界了解本專業(yè)。

(2)數(shù)字媒體技術(shù)系網(wǎng)站巨大的教育資源，網(wǎng)站是實(shí)現(xiàn)教育資源分配的橋梁，它使每一位教師和學(xué)生都能均等的得到培訓(xùn)和受教育的機(jī)會(huì)，能極大的提高教學(xué)效率。

(3)數(shù)字媒體技術(shù)系網(wǎng)站能提供教學(xué)互動(dòng)的全新方式，網(wǎng)站使得教師與教師，教師與學(xué)生，學(xué)生與學(xué)生之間的交流有了全新的方式，它不再受到傳統(tǒng)課堂的制約。它可以使不同的學(xué)院同處一室，共同討論，共同提高。地理上的界限在這里模糊和消失了，數(shù)字媒體技術(shù)系網(wǎng)站是真正沒有圍墻的系網(wǎng)站。

(4)數(shù)字媒體技術(shù)系網(wǎng)站能夠提供個(gè)性化的學(xué)習(xí)的平臺(tái)，不同的學(xué)生理解世界的方式各不相同，認(rèn)知世界有諸多方式。網(wǎng)絡(luò)提供的豐富資源可以使學(xué)生尋覓不同的教育方式，各取所需。數(shù)字媒體技術(shù)系網(wǎng)站允許不同的學(xué)生沿著自己的途徑，按自己的速度接受教育與學(xué)習(xí)，學(xué)生將有機(jī)會(huì)享受最佳的教育機(jī)會(huì)，充分發(fā)掘自己的內(nèi)在潛力，培植獨(dú)特的個(gè)性和人格。

(5)數(shù)字媒體技術(shù)系網(wǎng)站是最佳的教學(xué)研究室，數(shù)字媒體技術(shù)系網(wǎng)站與教育類專門網(wǎng)站的有效鏈接，給本系教學(xué)研究帶來了一片新天地，各種優(yōu)秀教案，專家論壇，網(wǎng)絡(luò)觀摩課，各科素材，多媒體課件制作等內(nèi)容為教師教研提供了極佳的平臺(tái)。有效地降低教研成本，提高效率。

1.2 國(guó)內(nèi)外高校網(wǎng)站建設(shè)狀況

國(guó)外的專題院校網(wǎng)站的學(xué)習(xí)資源比較豐富，交互性和學(xué)習(xí)支持服務(wù)做得都比較好，但是活動(dòng)組織形式比較單一。

英國(guó)的學(xué)習(xí)網(wǎng)站建設(shè)得比較完備，無論從資源建設(shè)方面，還是從學(xué)習(xí)支持服務(wù)等方面都做得較好，商業(yè)性比較強(qiáng)。

加拿大學(xué)習(xí)網(wǎng)站的網(wǎng)絡(luò)學(xué)習(xí)導(dǎo)航做得比較形象，趣味性較強(qiáng)，分類明確，專題資源集中。

高校門戶網(wǎng)站的訪問量，一定程度上反映了各高校的信息化程度和水平。關(guān)于高校門戶網(wǎng)站訪問排名，有不少網(wǎng)站提供相關(guān)的服務(wù)。總體來說，國(guó)內(nèi)的各排名口碑評(píng)價(jià)不一，而“訪問流量監(jiān)控”類的排名也會(huì)受到諸多因素干擾，不容易作為客觀評(píng)價(jià)網(wǎng)站的依據(jù)。具體如下表1-1所示[2]：

表1-1中國(guó)高校網(wǎng)站綜合排名表

排 名 中文名稱 世界排名 網(wǎng)站信息量世界信息影響力世 數(shù)字資料檔案數(shù)

排名

界排名

量世界排名

學(xué)術(shù)文章發(fā)表情況世界排名 2 清華大學(xué) 上海交通大學(xué) 77 101

439 41

282

162 238

3 北京大學(xué) 122 385 105 591 76 4 5 6 7 8 9 浙大 復(fù)旦大學(xué) 山東大學(xué) 哈工大 武漢大學(xué) 中科大 182 256 264 292 350 357 363

202 868 253 706 272 873 455

287 234 328 102 203 581 706

649 608 656 1797 1915 605 437

187 312 239 335 184 309 10 吉林大學(xué)

國(guó)外的高校網(wǎng)站部分國(guó)際知名大學(xué)如哈佛大學(xué)（http://www。harvard。edu/）排名第一，PRESENCE 網(wǎng)站信息量世界排名第6，IMPACT 網(wǎng)站信息影響力世界排名第1，OPENNESS 數(shù)字資料檔案數(shù)量世界排名第34，EXCELLENCE 學(xué)術(shù)文章發(fā)表

情況世界排名第1；

麻省理工學(xué)院（http://www.mit.edu/）排名第2，PRESENCE 網(wǎng)站信息量世界排名第8，IMPACT 網(wǎng)站信息影響力世界排名第1，OPENNESS 數(shù)字資料檔案數(shù)量世界排名第14，EXCELLENCE 學(xué)術(shù)文章發(fā)表情況世界排名第10；

耶魯大學(xué)（http://www.yale.edu/）排名第16，PRESENCE 網(wǎng)站信息量世界排名第27，IMPACT 網(wǎng)站信息影響力世界排名第16，OPENNESS 數(shù)字資料檔案數(shù)量世界排名第246，EXCELLENCE 學(xué)術(shù)文章發(fā)表情況世界排名第22；

劍橋大學(xué)（http://www.cam.ac.uk/）排名第20，PRESENCE 網(wǎng)站信息量世界排名第43，IMPACT 網(wǎng)站信息影響力世界排名第35，OPENNESS 數(shù)字資料檔案數(shù)量世界排名第94，EXCELLENCE 學(xué)術(shù)文章發(fā)表情況世界排名第12；

牛津大學(xué)（http://www.ox.ac.uk/）排名第25，PRESENCE 網(wǎng)站信息量世界排名第109，IMPACT 網(wǎng)站信息影響力世界排名第37，OPENNESS 數(shù)字資料檔案數(shù)量世界排名第64，EXCELLENCE 學(xué)術(shù)文章發(fā)表情況世界排名第13；

東京大學(xué)（http://www.u-tokyo.ac.jp/）排名第42，PRESENCE 網(wǎng)站信息量世界排名第96，IMPACT 網(wǎng)站信息影響力世界排名第103，OPENNESS 數(shù)字資料檔案數(shù)量世界排名第52，EXCELLENCE 學(xué)術(shù)文章發(fā)表情況世界排名第20；

從網(wǎng)站建設(shè)情況來看，國(guó)內(nèi)關(guān)于校園網(wǎng)站建設(shè)較多，雖然起步較國(guó)外晚，但是發(fā)展的速度很快，我國(guó)高校網(wǎng)站的建設(shè)還有很多不盡如人意的地方，其主要在于網(wǎng)站互動(dòng)性的缺失，內(nèi)容方面沒有國(guó)外院校網(wǎng)站那么多，是因?yàn)閲?guó)內(nèi)采取的形式較國(guó)外的不同。在創(chuàng)新方面比較欠缺，交互性的形式少。問題主要體現(xiàn)在這幾個(gè)方面：

(1)缺乏組織協(xié)調(diào)，各部門各自為政。由于網(wǎng)絡(luò)內(nèi)容建設(shè)工作幾乎全部下放到各部門，長(zhǎng)期以來基本上一直處于一種各自為政的狀態(tài)。各部門的網(wǎng)頁風(fēng)格迥異，都有各自不同的做法，不能做到統(tǒng)一。這樣做出來的網(wǎng)頁形形色色，拼湊成一個(gè)個(gè)學(xué)院，處室網(wǎng)站，顯得很不協(xié)調(diào)。有必要加強(qiáng)組織協(xié)調(diào)工作，詳細(xì)規(guī)劃，明確分工，制定出相應(yīng)的標(biāo)準(zhǔn)，徹底摒棄網(wǎng)站建設(shè)中的隨意性。

(2)內(nèi)容單薄，更新滯后。內(nèi)容單薄可以說是很大的硬傷。各部門名義上都有了自己的網(wǎng)站，但大多數(shù)部門網(wǎng)站能夠提供瀏覽的內(nèi)容非常有限，特別是深層次的內(nèi)容嚴(yán)重缺乏。另外，網(wǎng)上內(nèi)容嚴(yán)重滯后，更新速度慢。有些部門的網(wǎng)站，時(shí)隔一年半載，其網(wǎng)頁界面和內(nèi)容仍是老樣子。

(3)重點(diǎn)失衡:重行政管理，輕教學(xué)科研。校園網(wǎng)最主要的功能應(yīng)該是要為教學(xué)，科研服務(wù)。但有些校園網(wǎng)上的內(nèi)容有關(guān)行政管理的偏多，而有關(guān)教學(xué)和科研的內(nèi)容則相對(duì)較少。作為一個(gè)高校網(wǎng)站，這不能不說是重點(diǎn)失衡，本末倒置。

(4)整個(gè)網(wǎng)站結(jié)構(gòu)，層次不夠清晰，使用不便。目前某些校園網(wǎng)首頁的欄目設(shè)計(jì)太過粗略，有些內(nèi)容欠缺，部分欄目名稱及內(nèi)容歸類不夠準(zhǔn)確，整個(gè)結(jié)構(gòu)顯得有些混亂，結(jié)構(gòu)層次偏深，用戶需經(jīng)過多次點(diǎn)擊才能看到想要的內(nèi)容。

(5)部分網(wǎng)頁制作粗糙，缺乏美感。高校網(wǎng)站，其頁面應(yīng)簡(jiǎn)潔明了，一方面不要過于呆板，另一方面也要避免過于花哨，做到實(shí)用與美觀的有機(jī)結(jié)合。

(6)缺乏檢索途徑。

傳播學(xué)領(lǐng)域“互動(dòng)性”研究的理論，為檢視當(dāng)前我國(guó)高校網(wǎng)站之發(fā)展提供了一個(gè)可操作化的設(shè)計(jì)架構(gòu)?！盎?dòng)性”的內(nèi)涵做進(jìn)一步分析，對(duì)我國(guó)高校網(wǎng)站的建設(shè)做一淺探，以增強(qiáng)人們關(guān)于互聯(lián)網(wǎng)傳播機(jī)制的認(rèn)知和理解，并推進(jìn)我國(guó)高校網(wǎng)站的在“交互性”方面的建設(shè)。

1.3 研究?jī)?nèi)容和擬解決的問題

有多種方法會(huì)讓一個(gè)網(wǎng)站的外觀令人驚嘆的。在創(chuàng)建時(shí)也有不同的設(shè)計(jì)趨勢(shì)。由于網(wǎng)站是由他們的業(yè)務(wù)與其他很多人用來獲取信息的途徑，所以很重要的設(shè)計(jì)是很有吸引力的。長(zhǎng)期面對(duì)一個(gè)設(shè)計(jì)不當(dāng)?shù)木W(wǎng)站是一件比較痛苦的事情。一旦我們擁有了一個(gè)網(wǎng)站之后，我們會(huì)一定會(huì)看到它擁有專業(yè)的設(shè)計(jì)，它可以實(shí)現(xiàn)我們的目的。

(1)排版

創(chuàng)造性使用排版已被廣泛的應(yīng)用于網(wǎng)頁設(shè)計(jì)排版中。這些好的設(shè)計(jì)不只是使用的標(biāo)準(zhǔn)字體，而加上其使用自定義的字體。它使網(wǎng)站更具有可讀性和吸引力。創(chuàng)造性地使用這種類型的方式確實(shí)可以有效的使用戶可以立即得到該網(wǎng)站的新消息，特別是使用的字體是獨(dú)一無二的，顏色是比較突出的。

(2)圖片的切換效果研究

大圖的使用也是一種趨勢(shì)。這些圖像是網(wǎng)站增加吸引力的網(wǎng)。雖然，已被使用過，但是現(xiàn)今它仍然在使用，使用它更具有現(xiàn)代感。使用這種設(shè)計(jì)的，設(shè)計(jì)出的網(wǎng)站也是比較搶眼的，特別是如果你有一個(gè)好的圖片選擇，不只是圖像的形式，它應(yīng)該與其網(wǎng)站更好的搭配。

(3)單頁布局的設(shè)計(jì)

可避免不必要的網(wǎng)頁，通過一個(gè)比較單一的頁面布局，這是更有效的一個(gè)網(wǎng)站，因?yàn)闉g覽者可以更專注于其內(nèi)容。

(4)交互性

做一個(gè)完整的網(wǎng)站有幾樣任務(wù)要完成比如復(fù)雜的交互功能，網(wǎng)頁動(dòng)畫特效，網(wǎng)頁UI設(shè)計(jì)，后期維護(hù)，可擴(kuò)展性等。

網(wǎng)站交互設(shè)計(jì)的用戶的目的是增加網(wǎng)站的友好度，可用性和易用性，從而使用戶能夠簡(jiǎn)單，快速和有效地完成網(wǎng)站賦予或用戶自身需要的服務(wù)，功能和目標(biāo)。

交互設(shè)計(jì)包含的內(nèi)容：

界面設(shè)計(jì)，界面不僅設(shè)計(jì)美術(shù)方面，還涉及提供給用戶某些事的能力。導(dǎo)航設(shè)計(jì)，導(dǎo)航設(shè)計(jì)是提供給用戶去某個(gè)地方的能力，是用戶能看到的網(wǎng)站結(jié)構(gòu)。

信息設(shè)計(jì)，信息設(shè)計(jì)就是通過網(wǎng)站傳達(dá)給用戶某些信息，用戶可通過這些信息了解自己正在進(jìn)行的某些事和應(yīng)該如何進(jìn)行某些事。

1.4 本章小結(jié)

本章闡述了開發(fā)數(shù)字媒體技術(shù)系網(wǎng)站的研究背景和意義。介紹了國(guó)外高校網(wǎng)站的發(fā)展現(xiàn)狀對(duì)比了目前國(guó)內(nèi)高校網(wǎng)站的現(xiàn)況了說明了建設(shè)數(shù)字媒體技術(shù)系網(wǎng)站建設(shè)的總體規(guī)劃思想。最后對(duì)于本文課題的研究?jī)?nèi)容和擬定解決的幾個(gè)關(guān)鍵問題進(jìn)行了探討。

第2章 前端開發(fā)工具及相關(guān)技術(shù)

2.1 前端開發(fā)環(huán)境

網(wǎng)站前端開發(fā)，即網(wǎng)頁架構(gòu)設(shè)計(jì)。主要是由與交互設(shè)計(jì)，視覺設(shè)計(jì)的配合，根據(jù)效果圖來規(guī)劃頁面布局，合理部署頁面代碼層次，挖掘用戶體驗(yàn)效果。用Dreamweare，CSS，JS等布局網(wǎng)頁內(nèi)容，制作靜態(tài)頁面，這些頁面要兼容各主流瀏覽器，并配合程序完成靜態(tài)頁面與后臺(tái)程序的整合工作。另外，要對(duì)網(wǎng)站做一些相應(yīng)的更新，維護(hù)及優(yōu)化。整個(gè)網(wǎng)站開發(fā)的流程在后面有具體介紹。前端開發(fā)在整個(gè)過程中占據(jù)著不可替代的地位，其它幾個(gè)環(huán)節(jié)主要給予相關(guān)的配合[3]。

2.2 前端開發(fā)工具

(1)MyEclipse簡(jiǎn)介

MyEclipse企業(yè)級(jí)工作平臺(tái)（MyEclipse Enterprise Workbench，簡(jiǎn)稱MyEclipse）是對(duì)EclipseIDE的擴(kuò)展，利用它我們可以在數(shù)據(jù)庫(kù)和JavaEE的開發(fā)，發(fā)布以及應(yīng)用程序服務(wù)器的整合方面極大的提高工作效率。它是功能豐富的JavaEE集成開發(fā)環(huán)境，包括了完備的編碼，調(diào)試，測(cè)試和發(fā)布功能，完整支持HTML，Struts，JSP，CSS，JavaScript，Spring，SQL，Hibernate。MyEclipse[4]結(jié)構(gòu)上的這種模塊化，可以讓我們?cè)诓挥绊懫渌K的情況下，對(duì)任一模塊進(jìn)行單獨(dú)的擴(kuò)展和升級(jí)。

簡(jiǎn)單而言，MyEclipse是Eclipse的插件，也是一款功能強(qiáng)大的JavaEE集成開發(fā)環(huán)境，支持代碼編寫，配置，測(cè)試以及除錯(cuò)，MyEclipse6。0以前版本需先安裝Eclipse。MyEclipse6。0以后版本安裝時(shí)不需安裝Eclipse。

(2)Dreamweare Dreamweare是美國(guó)MACROMEDIA公司開發(fā)的集網(wǎng)頁制作和管理網(wǎng)站于一身的所見即所得網(wǎng)頁編輯器，它是第一套針對(duì)專業(yè)網(wǎng)頁設(shè)計(jì)師特別發(fā)展的視覺化網(wǎng)頁開發(fā)工具，利用它可以輕而易舉地制作出跨越平臺(tái)限制和跨越瀏覽器限制的充滿動(dòng)感的網(wǎng)頁[5]。

使用網(wǎng)站地圖可以快速制作網(wǎng)站雛形，設(shè)計(jì)，更新和重組網(wǎng)頁。改變網(wǎng)頁位置或檔案名稱，Dreamweare 會(huì)自動(dòng)更新所有鏈接。使用支援文字，HTML碼，HTML屬性標(biāo)簽和一般語法的搜尋及置換功能使得復(fù)雜的網(wǎng)站更新變得迅速又簡(jiǎn)單。

(3)

Photoshop

Adobe Photoshop，簡(jiǎn)稱“PS”，是一個(gè)由Adobe Systems開發(fā)和發(fā)行的圖像處理軟件。Photoshop主要處理以像素所構(gòu)成的數(shù)字圖像。使用其眾多的編修與繪圖工具，可以更有效的進(jìn)行圖片編輯工作。

在網(wǎng)站前端開發(fā)過程中需要把圖片用Photoshop處理成加載到網(wǎng)站頁面的圖片，用Photoshop 制作矢量圖形用作網(wǎng)站頁面的修飾按鈕。

2.3 前端開發(fā)相關(guān)技術(shù)

2.3.1

Java script 簡(jiǎn)介

Java script[6]的出現(xiàn)，它可以使得信息和用戶之間不僅只是一種顯示和瀏覽的關(guān)系，而是實(shí)現(xiàn)了一種實(shí)時(shí)的，動(dòng)態(tài)的，可交互式的表達(dá)能力。從而基于CGI靜態(tài)的HTML頁面將被可提供動(dòng)態(tài)實(shí)時(shí)信息，并對(duì)客戶操作進(jìn)行反應(yīng)的Web頁面的取代。Java script腳本正是滿足這種需求而產(chǎn)生的語言。它深受廣泛用戶的喜愛和歡迎。它是眾多腳本語言中較為優(yōu)秀的一種，它與WWW的結(jié)合有效地實(shí)現(xiàn)了網(wǎng)絡(luò)計(jì)算和網(wǎng)絡(luò)計(jì)算機(jī)的藍(lán)圖。無疑Java家族將占領(lǐng)Internet網(wǎng)絡(luò)的主導(dǎo)地位。因此，盡快掌握java script腳本語言編程方法是我國(guó)廣大用戶日益關(guān)心的問題。2.3.2

Java script 基本特點(diǎn)

(1)基于對(duì)象的語言

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

(2)簡(jiǎn)單性

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

(3)安全性

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

(4)動(dòng)態(tài)性

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

CSS簡(jiǎn)介

CSS[8](層疊樣式表)是用來進(jìn)行網(wǎng)頁風(fēng)格設(shè)計(jì)的，它簡(jiǎn)化并擴(kuò)展了HTML中的各種標(biāo)記，使得各個(gè)標(biāo)記的屬性更具有一般性和通用性，大大提高了HTML開發(fā)的效率。在制作網(wǎng)頁時(shí)采用CSS技術(shù)，可以有效地對(duì)頁面的布局，字體，顏色，背景和其他效果實(shí)現(xiàn)更加精確的控制，只要對(duì)相應(yīng)的代碼作一些簡(jiǎn)單的修改，就可以改變同一頁面的不同部分，或者頁數(shù)不同的網(wǎng)頁的外觀和格式。

什么是CSS？

CSS中，Cascading是“層疊”的意思，也就是說在同一個(gè)Web文檔中可以有多個(gè)樣式表存在，這些樣式表根據(jù)所在的位置，擁有不同的優(yōu)先級(jí)，優(yōu)先級(jí)越高，就會(huì)在最后顯示時(shí)被采用。從樣式表插入的形式看可以分為3種。

(1)(2)(3)內(nèi)聯(lián)式樣式表； 嵌入式樣式表； 外部式樣式表；

CSS的特點(diǎn)

CSS是用來擴(kuò)展HTML的，而不是用來替換HTML的，也就是說CSS不能脫離HTML，它只是一項(xiàng)輔助工具。除了可擴(kuò)展HTML的樣式設(shè)定外，CSS使得網(wǎng)頁的設(shè)計(jì)與維護(hù)更加高效，這主要表現(xiàn)在以下幾個(gè)方面：減少圖形文件的使用，集中管理樣式信息，設(shè)定共享樣式，將樣式分類使用。2.3.4

JQuery

JQuery[9]是繼prototype之后又一個(gè)優(yōu)秀的Javascript框架。其宗旨是——WRITE LESS，DO MORE，寫更少的代碼，做更多的事情。它是輕量級(jí)的js庫(kù)(壓縮后只

有21k)，這是其它的js庫(kù)所不及的，它兼容CSS3，還兼容各種瀏覽器（IE 6。0+，F(xiàn)F 1。5+，Safari 2。0+，Opera 9。0+）。JQuery是一個(gè)快速的，簡(jiǎn)潔的JavaScript庫(kù)，使用戶能更方便地處理HTML documents，events，實(shí)現(xiàn)動(dòng)畫效果。

jQuery其模塊化的使用方式使開發(fā)者可以很輕松的開發(fā)出功能強(qiáng)大的網(wǎng)頁特效。本文主要論述了如何在Web開發(fā)中使用jQuery技術(shù)，豐富網(wǎng)站的交互性和用戶體驗(yàn)性[10]。

jQuery是一套Javascrip腳本庫(kù)?！癑avascript輕量級(jí)腳本庫(kù)”系列文章。Javascript腳本庫(kù)類似于。NET的類庫(kù)，這些工具方法或?qū)ο蠓椒ǚ庋b在類庫(kù)中，方便用戶使用。

注意jQuery是腳本庫(kù)，而不是腳本框架。“庫(kù)”不等于“框架”，比如“System程序集”是類庫(kù)，而“ASP.NET MVC”是框架。jQuery并不能幫助我們解決腳本的引用管理和功能管理，這些都是腳本框架要做的事。

腳本庫(kù)能夠幫助完成編碼邏輯，實(shí)現(xiàn)業(yè)務(wù)功能。使用jQuery將極大的提高編寫javascript代碼的效率，讓寫出來的代碼更加優(yōu)雅，更加健壯。jQuery有如下特點(diǎn)：

(1)提供了強(qiáng)大的功能函數(shù)

使用這些功能函數(shù)，能夠幫助我們快速完成各種功能，而且會(huì)讓我們的代碼異常簡(jiǎn)潔。

(2)解決瀏覽器兼容性問題

javascript腳本在不同瀏覽器的兼容性一直是Web開發(fā)人員的噩夢(mèng)，常常一個(gè)頁面在IE9，F(xiàn)irefox下運(yùn)行正常，在IE6下就出現(xiàn)莫名其妙的問題。針對(duì)不同的瀏覽器編寫不同的腳本是一件痛苦的事情。有了jQuery我們將從這個(gè)噩夢(mèng)中醒來，比如在jQuery中的Event事件對(duì)象已經(jīng)被格式化成所有瀏覽器通用的，從前要根據(jù)event獲取事件觸發(fā)者，在IE下是event.srcElements 而ff等標(biāo)準(zhǔn)瀏覽器下下是event。target。jQuery則通過統(tǒng)一event對(duì)象，讓我們可以在所有瀏覽器中使用event。target獲取事件對(duì)象。

(3)實(shí)現(xiàn)豐富的UI jQuery可以實(shí)現(xiàn)比如漸變彈出，圖層移動(dòng)等動(dòng)畫效果，讓我們獲得更好的用戶體驗(yàn)。單以漸變效果為例，從前我自己寫了一個(gè)可以兼容IE和ff的漸變動(dòng)畫，使用大量javascript代碼實(shí)現(xiàn)，費(fèi)心費(fèi)力不說，寫完后沒有太多幫助過一端時(shí)間就忘記了。再開發(fā)類似的功能還要再次費(fèi)心費(fèi)力。如今使用jQuery就可以幫助我們快速

完成此類應(yīng)用。

(4)糾正錯(cuò)誤的腳本知識(shí)

大部分開發(fā)人員對(duì)于javascript存在錯(cuò)誤的認(rèn)識(shí)。比如在頁面中編寫加載時(shí)即執(zhí)行的操作DOM的語句，在HTML元素或者document對(duì)象上直接添加“onclick”屬性，不知道onclick其實(shí)是一個(gè)匿名函數(shù)等等。擁有這些錯(cuò)誤腳本知識(shí)的技術(shù)人員也能完成所有的開發(fā)工作，但是這樣的程序是不健壯的。比如“在頁面中編寫加載時(shí)即執(zhí)行的操作DOM的語句”，當(dāng)頁面代碼很小用戶加載很快時(shí)沒有問題，當(dāng)頁面加載稍慢時(shí)就會(huì)出現(xiàn)瀏覽器“終止操作”的錯(cuò)誤。jQuery提供了很多簡(jiǎn)便的方法幫助我們解決這些問題，一旦使用jQuery你就將糾正這些錯(cuò)誤的知識(shí)--因?yàn)槲覀兌际怯脴?biāo)準(zhǔn)的正確的jQuery腳本編寫方法!2.4 本章小結(jié)

本章介紹了開發(fā)數(shù)字媒體技術(shù)系網(wǎng)站前端所需要的開發(fā)工具和他們的運(yùn)行環(huán)境，同時(shí)講述了相關(guān)的前端開發(fā)技術(shù)比如：Java script，CSS，jqurey等。以便以后的開發(fā)過程中能夠?qū)@些開發(fā)工具盒技術(shù)有深刻的理解。

第3章 前端布局分析與設(shè)計(jì)

3.1 前端總體開發(fā)流程及設(shè)計(jì)

前端設(shè)計(jì)Web前端開發(fā)技術(shù)是一個(gè)先易后難的過程，主要包括三個(gè)要素：HTML，CSS和JavaScript，這就要求前端開發(fā)工程師不僅要掌握基本的Web前端開發(fā)技術(shù)，網(wǎng)站性能優(yōu)化，SEO和服務(wù)器端的基礎(chǔ)知識(shí)，而且要學(xué)會(huì)運(yùn)用各種工具進(jìn)行輔助開發(fā)以及理論層面的知識(shí)，包括代碼的可維護(hù)性，組件的易用性，分層語義模板和瀏覽器分級(jí)支持等。3.1.1 分層開發(fā)

在數(shù)字媒體技術(shù)系網(wǎng)站概要確定后就需要進(jìn)行分層開發(fā)的劃分，根據(jù)項(xiàng)目?jī)?nèi)容的不同，劃分工作。大致分為，總體結(jié)構(gòu)搭建，模塊制作，頁面制作，底層JS搭建，JS交互效果，內(nèi)部測(cè)試，代碼優(yōu)化。如圖3-1所示：

圖3-1分層開發(fā)圖

這樣做的好處是能根據(jù)項(xiàng)目的不同，劃分出不同的功能模塊，合理的安排時(shí)間，在有限的時(shí)間內(nèi)做出很多模塊和功能。降低開發(fā)成本，提高開發(fā)效率。3.1.2 代碼編寫

前期工作準(zhǔn)備好后，就開始進(jìn)入代碼編寫階端，我們采用LSM方式進(jìn)行，大致流程為總規(guī)劃和設(shè)計(jì)草稿完成后，就進(jìn)行前期的前端開發(fā)（搭建大致的HTML結(jié)構(gòu)），然后設(shè)計(jì)出完設(shè)計(jì)稿后再進(jìn)行頁面樣式的完善，最后完成正式的頁面后交給開發(fā)，嵌套程序。這樣做的好處不僅能有效的提高開發(fā)效率，實(shí)現(xiàn)逐層開發(fā)，讓前

端提前介入，減少整體消耗的時(shí)間，確保產(chǎn)品有更多的時(shí)間修改和完善。

確定了流程后還需要對(duì)產(chǎn)品原型進(jìn)行分析，拆分，把復(fù)用性高的部分找出來制作成代碼模塊，方便以后的套用。確認(rèn)二，三級(jí)頁面的風(fēng)格搭建統(tǒng)一框架。

前端設(shè)計(jì)樣式確定以后，就進(jìn)行通用模塊樣式的設(shè)計(jì)（包括按鈕，分頁，默認(rèn)字體顏色，連接顏色等），完成后并提交給前端，統(tǒng)一的搭建。

在代碼的編寫過程中，最重要的是標(biāo)準(zhǔn)和規(guī)范的執(zhí)行遵守，在編寫HTML時(shí)候充分發(fā)揮想象盡可能的滿足后期樣式表現(xiàn)的需要。如圖3-2所示：

圖 3-2 編寫代碼流程圖

代碼編寫過程中讓前端提前進(jìn)入開發(fā)流程中來，在樣式屬性后就進(jìn)行HTML結(jié)構(gòu)的編寫，頁面設(shè)計(jì)完成后，在進(jìn)行樣式表的開發(fā)，這樣不僅能節(jié)省很多的開發(fā)時(shí)間，提高開發(fā)效率，能在前端對(duì)全局頁面的把控。在此同時(shí)也強(qiáng)調(diào)規(guī)范和模塊化的重要性，正所謂無規(guī)矩不成方圓，這樣能便于后期維護(hù)，減少維護(hù)成本。而模塊化，是敏捷開發(fā)所必需的，重要性在這里也不做過多的描述。3.1.3 內(nèi)部測(cè)試與后續(xù)優(yōu)化

前端的內(nèi)部測(cè)試，指出頁面與設(shè)計(jì)稿不匹配的地方，優(yōu)化部分細(xì)節(jié)頁面樣式。測(cè)試不僅能提高內(nèi)測(cè)的質(zhì)量，還能更早的發(fā)現(xiàn)問題并及時(shí)的修改，否則當(dāng)頁面提交開發(fā)以后再做修改是一件很麻煩的事情。當(dāng)所有細(xì)節(jié)修改完畢后，就需要進(jìn)行制作文件的優(yōu)化以確保代碼的最優(yōu)化，盡可能地壓縮圖片和減少外部HTTP請(qǐng)求如圖3-3所示：

圖 3-3 內(nèi)部測(cè)試流程圖

圖 3-4 前端開發(fā)流程圖

這套流程制定出來就一直要求所有前端設(shè)計(jì)必須嚴(yán)格按照流程執(zhí)行，也經(jīng)過了很長(zhǎng)時(shí)間的磨合跟改進(jìn)。雖然不是很完美，但是很適合我們現(xiàn)在開發(fā)的需要，好處也是顯而易見的，遵循并使用它對(duì)我們的發(fā)開有很大的幫助，能更好的應(yīng)對(duì)高強(qiáng)度，高質(zhì)量的開發(fā)需要。代碼更可控，開發(fā)效率更高。

3.2 前端UI設(shè)計(jì)

3.2.1 模塊分布

UI設(shè)計(jì)這是設(shè)計(jì)中最重要的一點(diǎn)，也可以發(fā)揮出更多創(chuàng)意的設(shè)計(jì)想法；其中體現(xiàn)出層次感設(shè)計(jì)的就是從屬關(guān)系，點(diǎn)構(gòu)成線，線構(gòu)成面，主次清晰明了。下面是以任由設(shè)計(jì)師發(fā)揮，不是這樣死板，要運(yùn)用層次感的原理去設(shè)計(jì)如圖3-5,3-6所示：

正確的層次布局 錯(cuò)誤的布局

圖 3-5 布局對(duì)比圖

在數(shù)字媒體技術(shù)系網(wǎng)站中UI層次感的體現(xiàn)

圖 3-6 數(shù)字媒體技術(shù)系頁面布局圖

3.2.2 顏色配置

產(chǎn)生豐富色彩的三原色是紅，綠，藍(lán)，也就是RGB，十六進(jìn)制是00 00 00，例如經(jīng)常寫的red，color:#FF0000； 縮寫color:#F00；color:gray(#808080)；是比較深的灰色。所謂鄰近色，就是在色帶上相鄰近的顏色，例如綠色和藍(lán)色，紅色和黃色就互為鄰近色。采用鄰近色設(shè)計(jì)網(wǎng)頁可以使網(wǎng)頁避免色彩雜亂，易于達(dá)到頁面的和諧統(tǒng)一。我們網(wǎng)站上用的色彩系是屬于灰白色系這個(gè)選擇符合網(wǎng)站的整體風(fēng)格，不可能把網(wǎng)站設(shè)計(jì)成五顏六色，因?yàn)槭菍W(xué)院網(wǎng)站所以要體現(xiàn)一種淡雅，自然的色彩風(fēng)格。背景色一般采用素淡清雅的色彩，避免采用花紋復(fù)雜的圖片和純度很高的色

彩作為背景色，同時(shí)背景色要與文字的色彩對(duì)比強(qiáng)烈一些。首頁的頂端使用灰色標(biāo)題圖片下面用全景圖這兩個(gè)部分過度的很自然。

在文字部分用黑色文字當(dāng)鼠標(biāo)移動(dòng)到相關(guān)文字上面時(shí)文字顏色變成紅色。不同的文字顏色會(huì)產(chǎn)生不同的效果，這能給瀏覽者一種層次感，方便與閱讀。

違紀(jì)一點(diǎn)禁止大面積使用白色文字，特別是較深的背景下，禁止大面積使用加粗文字如圖3-7所示：

圖 3-7 字體顏色變換

3.2.3

CSS元素

CSS塊元素(block)總是另起一行開始；高度，行高以及頂，底邊距都可控制 常用的有：div p table h1 ul dl 等等。CSS內(nèi)聯(lián)元素(inline)和其它元素都在一行上；高度，行高以及頂，底邊距不可改變；常用的有：a strong font img input span small label等等 [11]如圖3-8所示：

Display: inline-block將對(duì)象呈遞為內(nèi)聯(lián)對(duì)象，但是對(duì)象的內(nèi)容作為塊對(duì)象呈遞。旁邊的內(nèi)聯(lián)對(duì)象會(huì)被呈遞在同一行內(nèi)，允許空格。但對(duì)于這個(gè)屬性不是所有瀏覽器都識(shí)別。

圖 3-8 CSS浮動(dòng)

CSS間距 [12]

相應(yīng)的設(shè)置大小，行高，首行縮進(jìn)，間距（padding，margin）

內(nèi)邊距padding：元素的內(nèi)邊距在邊框和內(nèi)容區(qū)之間。padding:10px 5px 15px 20px;上 10px右 5px下 15px左 20pxpadding:10px 5px 15px;上右左下padding:10px 15px;上右下左