第一篇：個人網站的前端設計論文

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

【關鍵詞】個人網站HTML5CSS3Javascript

隨著互聯網的發展，網絡上的網站數量越來越多。個人網站的數量也與日俱增。一個好的網站不僅要保證有著良好的性能，同時頁面的前端設計也得非常的優秀。一個良好的前端設計往往包含了合理的配色，清晰的頁面結構，流暢的動畫。隨著個人網站的發展，也催生出來很多優秀的博客程序，比如：《WordPress》、《Typecho》等等。那么應如何設計個人網站的前端呢？

1設計語言

1.1HTML5

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

1.2CSS3

層疊樣式表（CSS），又稱串樣式列表、級聯樣式表、串接樣式表、層疊樣式表、階層式樣式表，一種用來為結構化文檔添加樣式的計算機語言，由W3C定義和維護。CSS3現在已被大部分現代瀏覽器支持。

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

1.3JavaScript

一種高級編程語言，通過解釋執行，是一門動態類型，面向對象的直譯語言。它已經由ECMA通過ECMAScript實現語言的標準化。它被世界上的絕大多數網站所使用，也被世界主流瀏覽器支持。JavaScript是一門基于原型、函數先行的語言，是一門多范式的語言，它支持面向對象編程，命令式編程，以及函數式編程。它提供語法來操控文本，數組，日期以及正則表達式等，不支持I/O，比如網絡，存儲和圖形等，但這些都可以由它的宿主環境提供支持。隨著最新的HTML5和CSS3語言標準的推行它還可用于游戲、桌面和移動應用程序的開發和在服務器端網絡環境運行。

2開發工具

SublimeText是一套跨平臺的文本編輯器，支持基于Python的插件。SublimeText是專有軟件，可通過包擴充本身的功能。大多數的包使用自由軟件授權發布，并由社區建置維護。SublimeText支持眾多編程語言，并支持語法上色。

MozillaFirefox，中文俗稱火狐，是一個自由及開源的網頁瀏覽器，由Mozilla基金會及其子公司Mozilla公司開發。Firefox支持Windows、OSX及Linux，其移動版支持Android及FirefoxOS，這些版本的Firefox使用Gecko來排版網頁，Gecko是一個運行當前與預期之網頁標準的排版引擎，而在2015年發布的FirefoxforiOS則非使用Gecko。

3網站前端設計

3.1站點架構

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

3.2頁面設計

作品頁面主要用于存放一些作品的demo，所以設計成了幾個div以格子的形式排列，并在上面能夠顯示作品的預覽。整體的頁面框架依舊沿用首頁，以達到站點整體風格的統一和css的最佳化利用，并減少開發過程。

3.3加入動畫，添加特效

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

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

使用html默認支持hover屬性來切換兩套寫好的css3陰影代碼來實現陰影效果的切換，再使用transition屬性設置動畫的播放時間以達到更美觀的效果。

3.4其他效果

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

4總結

總之，要使整個網站有個性化的體驗，不僅要頁面內容豐富，動畫流暢，還需要有相關特效，讓整體效果簡潔大方美觀，讓人有耳目一新的感覺。

第二篇：個人網站設計論文

秦皇島職業技術學院信息工程系

分類號： TP319

秦皇島職業技術學院 課程設計（論文）

個人博客網頁設計論文

學生姓專班指導教指導教師職名 王飛飛 業 計算機應用技術 級 1100103 師

稱

目錄

摘要 …………………………………………………………………………………2 前言 …………………………………………………………………………………3 第一章 關于網絡的知識.............................................4

秦皇島職業技術學院信息工程系

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

摘 要

本論文主要是對個人網站的建立進行研究和探討。作品的主要技術指標包括：

1、制作出一個具有靜態技術的“個人網站”；

2、在制作的過程中，加強和 1

秦皇島職業技術學院信息工程系

深化以前所學的關于網頁設計的方法，同時更好的理解參考資料上的方法、理論和更好的利用Fireworks、Flash制作網站需要的一些圖片和影片。

本設計的主要內容包括：

1、個人網站的設計思想，整體規劃及相關基礎知識；

2、個人網站的首頁設計，包括簡單的HTML語言及效果圖；

3、個人網站的調試。

網頁規劃包含的內容很多，如網頁的結構、欄目的設置、網頁的風格、顏色搭配、版面布局、文字圖片的運用等，也只有如此制作出來的網頁才能有個性、有特色，具有吸引力。

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

關鍵詞：技術指標

基本設計內容

網站規劃 網站主題

前言

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

同時，其它人也是通過高科技，悄悄的就能很容易地去了解，關注一個人。

正是因為人們的這些需求，所以出現了互聯網，正是因為人們的需求，所以出現了如今的網絡時代，網絡通訊工具。來方便人們的交往，交際與溝通。也正是因為人們的需求，所以出現了個人博客，通過一人簡單的網頁來展現自己的獨特魅力，自己的與眾不同。真正的做到了“足不出戶，便知天下人”。

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

我覺得一個網站的開始，應該有一個大體的規劃，網站的布局是最重要的，它起著一個網站成功與否的決定性作用，因為布局的好與壞，帶來的是網站整體上的美觀效果及應用。網站內容上也能決定著網站成功與否，一個網站上的每個字眼都可能決定著這個網站，因為你不知道哪個字就是吸引別人的內容，就是大家都追捧的話題，就是很潮的事物，所以內容上一定要謹慎。再有，就是網站的圖片，一定要確準好路徑，以免圖像的丟失而不能再網站中顯示，其次就是鏈接，在Dreamweaver中提供了很簡單的鏈接命令，根據其提示操作即可。

我做了一個簡單的個人博客的網站，通過這個網站能讓大家更深的了解我，同時更重要的是鍛煉自己的實踐能力，鞏固自己學習的知識，彌補自己學習的不足。

第一章 關于網絡的知識

1.1什么是Internet Internet是由眾多的計算機網絡互聯而成的互聯網，它覆蓋了全世界各地，3

秦皇島職業技術學院信息工程系

它是采用開放系統協議的計算機通訊網絡。然而，Internet不僅僅是計算機的互聯網，它還是全球最大的信息資源寶庫，它提供了包括科研、教育、文化娛樂、商業和信息交流等各種各樣的服務，使得世界范圍內的人與人之間的交流在時間和空間上變的更小了。

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

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

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

秦皇島職業技術學院信息工程系

1.3網頁基本構成元素

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

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

秦皇島職業技術學院信息工程系

第二章 網站制作實戰

2.1 站點 2.1.1 創建站點

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

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

秦皇島職業技術學院信息工程系

2.2 首頁

2.2.1 設置首頁布局和頁面屬性

一、設置首頁布局

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

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

2、將變成“+”形狀的鼠標游標放到編輯中網頁上，在要繪制的地方進行拖動就可以進行創建了。（如果繪制的是第一個表格必須從網頁的最左上角開始繪制）?！癷ndex”表格布局如下圖：

秦皇島職業技術學院信息工程系

二、設置首頁的頁面屬性

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

在“頁面屬性”對話框中，左側窗口顯示“分類”，其中包括了“外觀”、“鏈接”、“標題”、“標題/編碼”、“跟蹤圖像”5項，右側區域則顯示各類中可以設置的項目

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

秦皇島職業技術學院信息工程系

2.2.2 查看和編輯頭內容

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

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

秦皇島職業技術學院信息工程系

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

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

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

步驟

2、在Dreamweaver中將會產生一個flash相冊，在Dreamweaver中的最右邊將會有一個flash元素，一次將flash的屬性修改，既可完成一個flash相冊的制作。2.2.5 插入文本

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

秦皇島職業技術學院信息工程系

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

還有其它的幾個網站與主頁的制作相同，一個網頁是圖像和文字的組合。“相冊”子頁中的FLASH相冊的插入和前面的介紹相同。

秦皇島職業技術學院信息工程系

第三章 建立網頁鏈接

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

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

步驟1、準備好已經制作完成的首頁的各個欄目頁面

步驟

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

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

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

步驟

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

步驟

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

秦皇島職業技術學院信息工程系

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

步驟

7、至此，第1個欄目的鏈接就制作完畢了，按下Ctrl+S保存網頁，再按下F12預覽，測試一下，當鼠標放在“放松心情”這4個文字上時將變成手形，并且瀏覽器窗口下面的狀態區中會顯示鏈接到的網頁的位址，單擊文字，頁面會立即跳轉到第1個欄目中，這表示鏈接已經制作成功了。

步驟

8、同理，按照以上步驟，再為“閑情逸致”和“個人主頁”等其它欄制作指向對應欄目的鏈接。

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

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

步驟

1、首先仍然要準備好已經制作完成的首頁和各個欄目的頁面 步驟

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

步驟

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

4、如果有需要，可以在“目標”下拉列表中選擇“鏈接”網頁顯示 13

秦皇島職業技術學院信息工程系 的窗口方式，分別為-blank、-parent、-self或-top。

步驟

5、至此，第1個欄目的圖像鏈接就制作完畢了，按下Ctrl+S保存網頁，再按下F12預覽，測試一下，將鼠標放在“動畫制作”4個文字上時將變成手形，同時瀏覽器窗口下面的狀態區中會顯示出鏈接到的網頁的地址，并且會顯示出“替代”文本“動畫制作”，單擊文字，頁面會立即跳轉到第3個欄目中，這表示鏈接已經制作成功了。

步驟

6、同理，按照以上步驟，再為其它幾幅圖像制作指向對應欄目的鏈接。

步驟

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

至此，整個“圖像鏈像”的實例就全部完成了。3.3在HTML語言中建立網頁鏈接

一、文字鏈接

在HTML語言中用超鏈接標記指向一個目標。其基本格式為：舉個簡單的“文本鏈接”的實例，該實例相對應的HTML代碼如下所示。

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

相冊（原窗口，默認為空）

留言

第三篇：網站前端設計 畢業論文

本科畢業設計（論文）

題 目: 學 院：專業班級：姓 名：指導教師：系 主 任：

數字媒體技術系網站前端設計與開發 學 號：

學院院長： 二O一三年月日

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

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

聲明人(簽名)：

****年**月**日

摘 要

21世紀是信息高速發達的時代，網絡作為當今最流行最方便快捷的媒介也越來越被人們接受，并且融入我們的生活。隨著高校信息化建設的不斷推進，網站的作用超越了傳統的信息獲取，交流它更能體現組織機構的風采，性質。所以高校院系建立本院系美觀，專業，易于維護管理的網站已經勢在必行。

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

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

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

關鍵字：JSP；用戶登錄；javascript；網站美化；交互設計。

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 國內外高校網站建設狀況..............................................................................................3 1.3 研究內容和擬解決的問題..............................................................................................5 1.4 本章小結......................................................................................................................6

第2章 前端開發工具及相關技術.........................................7

2.1 前端開發環境...............................................................................................................7 2.2 前端開發工具...............................................................................................................7 2.3 前端開發相關技術........................................................................................................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 本章小結....................................................................................................................11

第3章 前端布局分析與設計............................................12

3.1 前端總體開發流程及設計............................................................................................12 3.1.1 分層開發..............................................................................................................12 3.1.2 代碼編寫..............................................................................................................12 3.1.3 內部測試與后續優化............................................................................................13 3.2 前端UI設計...............................................................................................................14 3.2.1 模塊分布..............................................................................................................14 3.2.2 顏色配置..............................................................................................................15

I

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

第4章 主要功能的實現................................................23

4.1 界面設計....................................................................................................................23 4.2 具體設計文檔.............................................................................................................24 4.3 前臺新聞文摘顯示......................................................................................................24 4.3.1 網站裝飾風格.......................................................................................................24 4.3.2 網站的鏈接結構...................................................................................................25 4.4 可視化設計.................................................................................................................25 4.5 具體實現技術.............................................................................................................25 4.5.1 CSS在“數字媒體技術系網站”中的應用實例...........................................................25 4.5.2 應用JavaScript設計網頁......................................................................................26 4.6 本章小結....................................................................................................................28

II

第5章 總結.........................................................29 參考文獻..............................................................30 致謝..................................................................32

第1章 緒論

1.1 選題背景及意義

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

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

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

交互性體現在高校網站通過設置留言板，論壇，發揮網絡交互的功能，在老師和學生之間建立起了交流渠道。

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

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

這些都促進了各個機構組織的信息化建設，隨著高校信息化建設的不斷推進，網站的作用超越了傳統的信息獲取，交流它更能體現組織機構的風采，性質。所以高校院系建立本院系美觀，專業，易于維護管理的網站。

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

建立本系網站發揮的作用如下：

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

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

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

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

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

1.2 國內外高校網站建設狀況

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

英國的學習網站建設得比較完備，無論從資源建設方面，還是從學習支持服務等方面都做得較好，商業性比較強。

加拿大學習網站的網絡學習導航做得比較形象，趣味性較強，分類明確，專題資源集中。

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

表1-1中國高校網站綜合排名表

排 名 中文名稱 世界排名 網站信息量世界信息影響力世 數字資料檔案數

排名

界排名

量世界排名

學術文章發表情況世界排名 2 清華大學 上海交通大學 77 101

439 41

282

162 238

3 北京大學 122 385 105 591 76 4 5 6 7 8 9 浙大 復旦大學 山東大學 哈工大 武漢大學 中科大 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 吉林大學

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

情況世界排名第1；

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

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

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

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

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

從網站建設情況來看，國內關于校園網站建設較多，雖然起步較國外晚，但是發展的速度很快，我國高校網站的建設還有很多不盡如人意的地方，其主要在于網站互動性的缺失，內容方面沒有國外院校網站那么多，是因為國內采取的形式較國外的不同。在創新方面比較欠缺，交互性的形式少。問題主要體現在這幾個方面：

(1)缺乏組織協調，各部門各自為政。由于網絡內容建設工作幾乎全部下放到各部門，長期以來基本上一直處于一種各自為政的狀態。各部門的網頁風格迥異，都有各自不同的做法，不能做到統一。這樣做出來的網頁形形色色，拼湊成一個個學院，處室網站，顯得很不協調。有必要加強組織協調工作，詳細規劃，明確分工，制定出相應的標準，徹底摒棄網站建設中的隨意性。

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

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

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

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

(6)缺乏檢索途徑。

傳播學領域“互動性”研究的理論，為檢視當前我國高校網站之發展提供了一個可操作化的設計架構。“互動性”的內涵做進一步分析，對我國高校網站的建設做一淺探，以增強人們關于互聯網傳播機制的認知和理解，并推進我國高校網站的在“交互性”方面的建設。

1.3 研究內容和擬解決的問題

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

(1)排版

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

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

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

(3)單頁布局的設計

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

(4)交互性

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

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

交互設計包含的內容：

界面設計，界面不僅設計美術方面，還涉及提供給用戶某些事的能力。導航設計，導航設計是提供給用戶去某個地方的能力，是用戶能看到的網站結構。

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

1.4 本章小結

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

第2章 前端開發工具及相關技術

2.1 前端開發環境

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

2.2 前端開發工具

(1)MyEclipse簡介

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

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

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

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

(3)

Photoshop

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

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

2.3 前端開發相關技術

2.3.1

Java script 簡介

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

Java script 基本特點

(1)基于對象的語言

java script是一種基于對象的語言，同時也可以看作一種面向對象的。這意味著它能運用自己已經創建的對象。因此，許多功能可以來自于腳本環境中對象的方法與腳本的相互作用[7]。

(2)簡單性

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

(3)安全性

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

(4)動態性

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

CSS簡介

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

什么是CSS？

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

(1)(2)(3)內聯式樣式表； 嵌入式樣式表； 外部式樣式表；

CSS的特點

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

JQuery

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

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

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

jQuery是一套Javascrip腳本庫?！癑avascript輕量級腳本庫”系列文章。Javascript腳本庫類似于。NET的類庫，這些工具方法或對象方法封裝在類庫中，方便用戶使用。

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

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

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

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

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

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

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

完成此類應用。

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

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

本章介紹了開發數字媒體技術系網站前端所需要的開發工具和他們的運行環境，同時講述了相關的前端開發技術比如：Java script，CSS，jqurey等。以便以后的開發過程中能夠對這些開發工具盒技術有深刻的理解。

第3章 前端布局分析與設計

3.1 前端總體開發流程及設計

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

在數字媒體技術系網站概要確定后就需要進行分層開發的劃分，根據項目內容的不同，劃分工作。大致分為，總體結構搭建，模塊制作，頁面制作，底層JS搭建，JS交互效果，內部測試，代碼優化。如圖3-1所示：

圖3-1分層開發圖

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

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

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

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

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

在代碼的編寫過程中，最重要的是標準和規范的執行遵守，在編寫HTML時候充分發揮想象盡可能的滿足后期樣式表現的需要。如圖3-2所示：

圖 3-2 編寫代碼流程圖

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

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

圖 3-3 內部測試流程圖

圖 3-4 前端開發流程圖

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

3.2 前端UI設計

3.2.1 模塊分布

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

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

圖 3-5 布局對比圖

在數字媒體技術系網站中UI層次感的體現

圖 3-6 數字媒體技術系頁面布局圖

3.2.2 顏色配置

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

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

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

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

圖 3-7 字體顏色變換

3.2.3

CSS元素

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

Display: inline-block將對象呈遞為內聯對象，但是對象的內容作為塊對象呈遞。旁邊的內聯對象會被呈遞在同一行內，允許空格。但對于這個屬性不是所有瀏覽器都識別。

圖 3-8 CSS浮動

CSS間距 [12]

相應的設置大小，行高，首行縮進，間距（padding，margin）

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