第一篇：9個優(yōu)秀的中文前端開發(fā)設(shè)計網(wǎng)站

在國內(nèi)，“前端開發(fā)

”這個名詞逐步被熟知，“前端開發(fā)

”這個職位越來越被企業(yè)重視，表明國內(nèi)的Web前端開發(fā)正在慢慢走向成熟，更好地學(xué)習(xí)提高自身的前端開發(fā)技術(shù)能力是必須的，整理9個國內(nèi)優(yōu)秀的前端開發(fā)設(shè)計網(wǎng)站給大家，也希望能看到你推薦的中文前端開發(fā)網(wǎng)站和社區(qū)。

1, OKAJAX

OKAJAX是以ajax技術(shù)為主，涉及網(wǎng)站建設(shè)、網(wǎng)絡(luò)編程、網(wǎng)頁設(shè)計、網(wǎng)頁特效、服務(wù)器技術(shù)、資源下載等的綜合性網(wǎng)站。

2, 藍色理想

誕生于1999年10月的藍色理想，以建設(shè)網(wǎng)站設(shè)計與開發(fā)人員之家為宗旨，以介紹網(wǎng)絡(luò)開發(fā)技術(shù)與網(wǎng)站創(chuàng)作設(shè)計交流為主要內(nèi)容，是國內(nèi)最大的設(shè)計類站點之一。

3, W3School

W3School是最完善的在線教程站，包括

XHTML教程、XML教程

JavaScript & AJAX、網(wǎng)站構(gòu)建等前端開發(fā)人員必備的系統(tǒng)性學(xué)習(xí)教材。

4, 前端觀察

前端觀察是一個純粹的前端技術(shù)分享網(wǎng)站，本站的目的是為前端技術(shù)人員提供所需的資訊及資源，挖掘國內(nèi)優(yōu)秀的原創(chuàng)設(shè)計及內(nèi)容，加以高度的整理。

5, CSS88

CSS88專注前端開發(fā)，關(guān)注用戶體驗，是一個資深的Web前端開發(fā)站，不僅傳播前端技術(shù)，更重要的是關(guān)注前端設(shè)計從業(yè)者的生存狀態(tài)，有多個開放的前端交流群。

6, CssRain

CssRain實用的前端技術(shù)信息，原創(chuàng)和搜集前端開發(fā)中細節(jié)的內(nèi)容，一本jQuery新書推薦<<鋒利的jQuery>>你值得擁有。

7, 我愛CSS

我愛CSS，致力于Web標(biāo)準(zhǔn)在中國的應(yīng)用和發(fā)展，提供CSS和XHTML學(xué)習(xí)教程。8, iJavaScript

iJavaScript致力于JavaScript信息的共享，提供JavaScript基礎(chǔ)教程、AJAX技術(shù)及JavaScript框架的學(xué)習(xí)和應(yīng)用。

9.菠菜博

菠菜博是一個分享優(yōu)質(zhì)網(wǎng)站設(shè)計素材資源、關(guān)注Web前端開發(fā)與應(yīng)用資源的博客。

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

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

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

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

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

畢業(yè)設(shè)計(論文)誠信聲明

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

聲明人(簽名)：

****年**月**日

摘 要

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

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

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

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

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

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 國內(nèi)外高校網(wǎng)站建設(shè)狀況..............................................................................................3 1.3 研究內(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 簡介.......................................................................................................8 2.3.2 Java script 基本特點................................................................................................8 2.3.3 CSS 簡介...............................................................................................................9 2.3.4 JQuery..................................................................................................................9 2.4 本章小結(jié)....................................................................................................................11

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

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

I

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

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

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

II

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

第1章 緒論

1.1 選題背景及意義

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

表1-1中國高校網(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é)

國外的高校網(wǎng)站部分國際知名大學(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è)情況來看，國內(nèi)關(guān)于校園網(wǎng)站建設(shè)較多，雖然起步較國外晚，但是發(fā)展的速度很快，我國高校網(wǎng)站的建設(shè)還有很多不盡如人意的地方，其主要在于網(wǎng)站互動性的缺失，內(nèi)容方面沒有國外院校網(wǎng)站那么多，是因為國內(nèi)采取的形式較國外的不同。在創(chuàng)新方面比較欠缺，交互性的形式少。問題主要體現(xiàn)在這幾個方面：

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

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

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

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

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

(6)缺乏檢索途徑。

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

1.3 研究內(nèi)容和擬解決的問題

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

(1)排版

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

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

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

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

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

(4)交互性

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

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

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

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

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

1.4 本章小結(jié)

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

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

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

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

2.2 前端開發(fā)工具

(1)MyEclipse簡介

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

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

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

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

(3)

Photoshop

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

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

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

2.3.1

Java script 簡介

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

Java script 基本特點

(1)基于對象的語言

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

(2)簡單性

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

(3)安全性

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

(4)動態(tài)性

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

CSS簡介

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

什么是CSS？

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

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

CSS的特點

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

JQuery

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

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

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

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

注意jQuery是腳本庫，而不是腳本框架?！皫臁辈坏扔凇翱蚣堋?，比如“System程序集”是類庫，而“ASP.NET MVC”是框架。jQuery并不能幫助我們解決腳本的引用管理和功能管理，這些都是腳本框架要做的事。

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

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

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

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

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

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

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

(4)糾正錯誤的腳本知識

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

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

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

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

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

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

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

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

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

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

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

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

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

圖 3-2 編寫代碼流程圖

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

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

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

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

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

3.2 前端UI設(shè)計

3.2.1 模塊分布

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

正確的層次布局 錯誤的布局

圖 3-5 布局對比圖

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

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

3.2.2 顏色配置

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

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

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

違紀(jì)一點禁止大面積使用白色文字，特別是較深的背景下，禁止大面積使用加粗文字如圖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將對象呈遞為內(nèi)聯(lián)對象，但是對象的內(nèi)容作為塊對象呈遞。旁邊的內(nèi)聯(lián)對象會被呈遞在同一行內(nèi)，允許空格。但對于這個屬性不是所有瀏覽器都識別。

圖 3-8 CSS浮動

CSS間距 [12]

相應(yīng)的設(shè)置大小，行高，首行縮進，間距（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;上右下左