第一篇：網站前端開發人員的必知新知識

網站前端開發人員的必知新知識

網站開發離不開開發工具，下面鄭州網站建設公司資深工程師為大家推薦幾款最新網站前端開發工具:

1.Dummy : 圖像和內容處理的 PHP 工具包

Dummy 可以讓你在任何高清圖像圖像上插入任何長度和格式的文本，包括段落、標題等等。Download

2.DBeaver : 免費的數據庫管理工具

DBeaver 是一個通用的數據庫管理工具和 SQL 客戶端，支持 MySQL, PostgreSQL, Oracle, DB2, MSSQL, Sybase, Mimer, HSQLDB, Derby, 以及其他兼容 JDBC 的數據庫。DBeaver 提供一個圖形界面用來查看數據庫結構、執行SQL查詢和腳本，瀏覽和導出數據，處理BLOB/CLOB 數據，修改數據庫結構等等。Download

3.Redactor : JavaScript WYSIWYG Editor

Redactor 是一個 jQuery 的插件，實現在線所見即所得的 HTML 編輯器。界面簡潔，加載速度快。不過不支持 IE6 瀏覽器，如果你不需要考慮 IE6 不妨試試。Download

4.The Golden Grid

Golden Grid 為 960 Grid System 增加了水平線。由行和列之間的交叉點形成的矩形的特點是和諧的尺寸和性質，更加均衡布局用來更快，更精確定位頁面上的元素。Download

5.Scrambls

Scrambls 允許對在線內容在提交之前進行加密。Download

6.QR Hacker

QR Hacker 是一個 Web 服務，為文本、URL、電話號碼和 VCard 創建彩色的二維條形碼。Download

7.Countly : 開源的移動分析應用

Countly 是一個實時的、開源的移動分析應用，通過收集來自手機的數據，并將這些數據通過可視化效果展示出來以分析移動應用的使用和最終用戶的行為。一旦你打開該程序的面板，你會發現數據的監控是那么的簡單。Download

8.gZip WTF Beta

gzipWTF 提供簡單的方法用來檢查符合率、內容壓縮以及 404 錯誤，你需要做的就是提供一個 URL 和一個驗證碼表單。Download

9.Smore

smore很容易讓任何人來創造美麗的，有效的網上傳單，這是高度設計有一個明確的目的，如推廣應用，促進事件或銷售產品，單頁網站。Download

10.Stylo

Stylo 是一個開源的 Web 設計工具，使用 CoffeeScript 和 Spine 設計，可以讓你管理不同的 HTML 元素，添加樣式和編輯文本，可繪制圖形、背景梯度，雙擊元素用來添加文本。

文章來源于30建站，轉載請注明出處！

第二篇：給前端開發人員的建議

前端這一行，入門并不困難，掌握XHTML+CSS之后，基本上就可以找到一份工作。其他的東西，我們可以入職后再慢慢學習。

1.那怎么才算掌握？掌握到什么程度？

檢驗自己水平的最好方式就是實戰！學代碼，就要邊學邊做。

這是最基本的東西，一定要把基礎打扎實。本人建議你能夠在記事本打代碼。

2.做什么內容？

我們既然是做前端的，為什么不用標準化的語言來寫自己的簡歷？同樣出去找工作，遞一份doc的簡歷好使，還是遞一個通過W3C驗證的頁面更有說服力？實在不知道拿什么東西練手，甚至可以去重構yahoo的網站，看看他們怎么寫的，再對比一下自己的代碼。琢磨琢磨他們為什么那么寫，有什么優點，有什么缺陷。

之后呢？

1.掌握JS

進了公司門，從第一天開始，就要學習JavaScript，玩到精。JS也是前端必備的技能之一。之所以把它列出去，是讓初學者有一個漸進的步驟。同時學太多東西，難以消化，這樣分開一步一步的玩精通，壓力會小一些。學完這個，基本上就可以稱為一個前端工程師了，對將來的工作非常有幫助。

2.選擇性掌握PS

Photoshop也是一定要學的，學到什么程度可以根據你自己的需求來定。如果將來想自己做單子，那PS就要玩的很地道。如果將來靠前端吃飯，去大公司是不需要前端開發做設計稿的，會分層切圖就可以了。當然，如果PS玩的很好，是不錯的事情。

最后談一下拓展技能

1.Ajax、jQuery

這些絢爛的名詞，等你工作1-2年，JavaScript玩的爛熟于心的時候，自然會接觸到。把他們列為拓展技能，是因為目前中小型企業的網站上應用這些還不是很多，甚至應用JS的都不是很多。做到前邊幾項基本上就可以找到一份工作，再掌握這些，自然是畫龍點睛之筆。但我的建議是，不妨先看一下下面幾個技能，我個人感覺，更有價值。

2.PHP+Mysql或者ASP或者JSP或者….職業的特殊性決定了我們需要跟后端工作者頻繁的溝通，掌握這方面的一些知識有利于更有效的交流問題。提升前端在整個團隊中的形象，進而提升自己的待遇。另外，學好這部分東西，有企業找你做網站的時候，你可以拿的更穩妥。至于學PHP還是學JSP，根據自己的愛好來定，我個人比較喜歡PHP，wordpress是很好玩的東西。

3.SEO+UE（用戶體驗）

用戶體驗是王道，而SEO是吸引用戶的王道。我投入了很大的精力在這一領域，所閱讀的書籍甚至比前端的書籍還要多。當然，我也一直認為UE

就是前端開發不可缺失的一部分。玩好這一點，往上，可以晉升到產品經理、部門經理的位置；往下，可以博得自己客戶的滿意。況且這東西并不難學，多留神觀察生活就是了。何樂而不為？

做好一個前端開發工程師，并不是我們最終的目的，前端是一個一專多長的職業，為什么不放大一下自己所學的知識，去做更有意義的工作？掌握了這些方方面面的技能之后，就已經具備了獨立運營網站的技術實力。希望大家能更靈活的運用自己所擁有的能力，做更絢麗的作品。

大家可以來我的網站http:// design學習網一起學習更多知識

第三篇：做一個有信仰的前端開發人員

做一個有信仰的前端開發人員--4/19演講稿

此文有博看文思(http://)學員提供

做一個有信仰的前端開發人員

1．提問，闡述瀏覽器用戶開發人員的關系（提問—闡述中舉例VCD—具體闡述關系）

瀏覽器為什么有現在這么大？處理速度是現在這樣的？

瀏覽器—開發人員—用戶

瀏覽器需要用戶，所以瀏覽器其實是根據用戶的需要去做，即使是去做的遵循標準，最初目的也是為了用戶。為什么瀏覽器有糾錯性，為什么曾經的一個標準要錯誤的標簽必須報錯，不能正常顯示頁面。瀏覽器是為了用戶好，用戶好自己才能活下去；標準也是為了用戶好，讓用戶知道自己技術是對用戶有利的。但是為什么瀏覽器和標準卻有如此大的不同。因為這中間插了一層人，就是我們開發人員。因為我們開發人員的不同行為方式，從而導致了瀏覽器和標準一些截然不同的行為。

舉個簡單的例子。用戶通過電視連VCD看光盤內容。但是光盤往往有錯的時候，許多放這些碟子的VCD機器讀到錯誤就卡死到那里了。剛開始的時候，用戶會抱怨碟子不好，慢慢的用戶就會放棄VCD機器，因為碟子普遍不好，還要VCD做什么。然后VCD廠家不能坐視不管吧。所以他們就研究出了糾錯技術，讀到錯誤的部分，跳過去，不影響大部分的瀏覽。用戶感到爽了，自然就不會放棄VCD機器，至少暫時不會有此想法。但是發明VCD碟子的人們呢，他們希望VCD碟子不會被損害，而不是簡簡單單跳過去。所以他們可能會考慮改進碟子被損害的幾率，因為如果他們不改進技術，那么VCD廠家將放棄這個技術市場，從而投向另外的技術市場，從此VCD的技術就會消失。然后可能出現的情況就是VCD技術升級了，可能成為WCD、XCD等等。但是這時候新的問題就要出現了。你這個技術升級了，我的機器也得跟著升級，但是升級代價多大，用戶會不會接受你這個新技術，等等問題。當你這個升級的技術的升級代價很大，或者用戶覺得無法適應的時候，廠家就會放棄這項技術。是的，這個技術又要面臨完蛋的危險。因此升級的時候，如果升級帶來的代價太大，就不得不考慮放慢步伐，讓用戶和廠家接受以后一部分之后再進行下一步。如此看來技術想要存活下去真的是夾縫中求生存啊。

瀏覽器就像VCD機，我們寫的代碼就是光盤。現在我們就不難理解我們的web標準它多么想一步到位但是卻不能夠，看看XHTML2.0的下場。是的，完全語義化很好，img和a的移除很棒，省多少代碼哪。但是假如我們是廠商，我們不得不面臨的一個問題是什么？問大家。換位思考。我們不得不面臨的一個問題就是：現有解析引擎的全面崩盤，要做一個全新的解析引擎。所有瀏覽器廠家基本回到了原點……那么我們會接受這個標準么？問大家。如果有的人說會，那么問他，你是做標準的還是做市場的，如果都照你這么做公司就要破產了。一個公司首要的是要存活，然后才考慮信仰（良知不在此范圍）。那好，用戶看到的頁面也是沒什么變化的（表面上），現在一個正常的瀏覽器廠商老板都不會接受這個標準。除了GOOGLE可能會歡迎，因為它們首先是做搜索引擎其次是做瀏覽器的，標準有利于搜索引擎。然后新的問題就出來了，廠商不接受這個標準，怎么

辦。沒有人市場的標準就是一紙空文，沒有意義。所以。XHTML2.0完蛋了。盡管它讓代碼更簡潔，讓搜索引擎更喜歡。

2．解決文初提到的問題。引申出開發人員的不堅定是整個問題的產生因素。告知大家保持信仰。

我想說的并不是瀏覽器用戶開發人員三者的關系，我想說這三者的關系，只是想告訴大家，瀏覽器是根據市場來決定web標準的存活的，而用戶就是市場的根本。大家想想，老師說過我們這行業里有多少混子，大家大部分也都加前端群里和那些工作前線的人交流過了，他們是什么水平想必大家心里都很清楚。他們寫出來的代碼能是什么樣子的，前陣子鄭晗給我看過一個table布局下的問題，全部table加img，背景色都截圖到img里。大家想想是不是，這些代碼如果按照標準來會怎么樣。如果我們是廠商，再次換位思考，這樣的代碼泛濫帶來是什么結果。問大家。帶來的結果就是用戶無論用什么瀏覽器看到的都是不對的頁面。那么我們有沒有辦法整治那些混蛋開發人員呢？沒有辦法，他們也不是你的員工，別的辦法也不能立即奏效，我們只能保住眼前利益，對吧。此處可以提問大家，遇到這種問題怎么辦。那么我們就只能夠增強瀏覽器的糾錯性。那么好吧，瀏覽器就變大了，處理速度變慢了。

假如我一開始就告訴你們，一切都是因為我們這些代碼開發人員，可能你們接受不了。但是我這樣帶著大家換位思考下來，相信你們都能理解了。為什么瀏覽器廠商會這么做。因為它也是為了活下去。很簡單的一個例子，搜狗里有糾錯功能，輸入錯誤的拼音能得到正確的詞組。這也是搜狗成功的一個重要因素。

那么這樣帶來的結果是什么，就是瀏覽器不斷變大，用戶體驗越來越不好，什么鳥瀏覽器，或者什么鳥網站，太TM慢了。更有小白會說，擦，升級了瀏覽器網速就變得這么慢。這是一個惡性循環。怎么解決？作為瀏覽器廠商，我們想解決這個惡性循環，我們會希望什么發生呢？想想，就是一個新的技術出來，不用過大的更改解析引擎，不用太大的代價。根源上的解決才能解決問題。但是實際上呢，他們不知道做標準的多么為難，他們有個解決的辦法，但是升級代價太大，所以他們不得不忍耐的一步一步的慢慢實現升級。

哦了，講這么多，想告訴大家，我們就是改變這個惡性循環的重要環節，如果我們每個代碼開發人員都有良知，寫好的代碼，那么這個升級的過程就會快的很多很多。就像如果世界上每個勞動者都有良知，珍惜時間，在路上發生車禍的時候不停下來看熱鬧，在旁邊發生口角的時候不停下來看熱鬧，那么整個世界的勞動力的浪費率將會提高多少？勞動成果將會提高多少呢？在經濟學家眼里，這些小事，就是阻礙世界經濟發展的重要因素，這些勞動力的浪費將給世界帶來巨大的損失，同樣這些勞動力自己也沒有得到最大的回報。

所以我想說，為了所有人，做一個有信仰的前端開發人員。

2010年4月18日星期日

23:58

很久沒演講了。好激動。但是最近真的很忙很忙。今天晚上十一點趕工了一個小時才寫完，準備的不是很充分。每次演講都希望對大家有幫助，其次才是鍛煉自己的思維，總結知識。本來還準備有個話題準備講最近的實習經驗，但是剛寫了個部門實施方案，所以暫時不想談那個話題了。下次有機會吧。希望大家都一起快速成長。

第四篇：2012前端項目組開發人員的工作總結

光陰似箭，日月如梭，輝煌的2012年即將結束，將迎來充滿希望的2013。回望即將過去的2012，展現在我們面前的是一年中深淺不一的腳印，在這幅巨大的畫面上，留下的是優美的、還是些許凌亂的印記呢?不管怎樣，我們都要驕傲地說，我們已經走過來了。在過去的一年里，我們經歷了許多，也成長了許多，我們要不斷提升自己的實力，迎接新的更大的挑戰，現將2012年的工作總結如下：

1.項目方面

在過去一年里，主要擔負交通銀行前端項目組的開發工作，如開發臺北存取款系統、開發離岸存取款系統、開發動態下拉框任務、維護澳門存取款系統、維護澳門太平洋卡系統等工作。因工作需要，現調至浦發項目組，擔負對公回單自助打印系統的開發工作。在做這些項目的工作中，不僅學習到了業務知識、技術知識，還學會了很多做人的道理。不管做什么事情，解決問題的唯一辦法是——溝通。只要有溝通能力，一切困難都能夠迎刃而解。跟業務加強溝通、交流，認真、細心的分析需求，面對問題及時解決處理，這樣才能把項目很好的向前推進。

2.團隊協作

從上面的主要工作內容來看，所有項目不是一個人所能完成的，正所謂一切事務離不開團隊，個人是無法逞英雄的。在公司領導的英明領導下，團隊建設有了很大的進步，跟同事在一起工作感覺非常的開心，沒有什么其他的雜念，跟大家在一起工作，能夠相互尊重、相互關心、相互幫助，這就像是一個家庭，一個大家庭，平時大家開開玩笑、說說笑笑，能夠緩解一下緊繃的精神狀態，而工作中又能嚴于律己，認真對待工作，這就是我們需要的團隊。同時，公司領導也經常跟大家一起談心論事，放下領導的架子，融入到同事當中，拉近了與同事之間的距離，這樣更能夠體現出領導對同事們的關心，更能夠體現出領導的親切感，也更能夠讓同事們接受。

在每個項目開始之前，同事們都能好好的交流，加強理解，對問題的共識、解決問題的方法能夠很好的統一起來，在解決問題的過程中，雖然都不是風平浪靜，但事后都能夠客觀的分析，從不參雜個人的感情，每個人都能很好的融入到這個團隊，共同做好每一個項目。這正所謂——團結就是力量。

3.工作態度

不管個人能力有多強，面對工作，就兩個字“態度”。關于這一點，給我最大的感觸就是一定要好好的去聆聽、去分析。每個人對待問題都有自己不同的看法，不管他的看法對還是不對，合理與否，考慮的角度是否正確，都要好好地聆聽，至少要等他說完，可能你不愿意或者不屑聽完，但是靜下心來或許會發現他看問題的某些角度你沒有考慮過。所以我們要靜心、聆聽!

對于領導安排的工作，有些難度比較大，困難總是要去克服的，遇到問題首先自己先解決，解決不了的，相互問同事，同事之間相互討論，共同解決問題，在工作中經常會有這樣的事情，把每一次遇到的問題和技術難點都記錄下來，把問題、技術與大家共同分享，這樣才能共同提高。

在工作中、生活中，態度決定一切，態度100分，生活、工作100分。

4.未來工作展望

回首昨天，我們要問心無愧，盡管太多的苦澀融進了昨日的犁鏵，盡管太多的憂傷充斥著我們的心靈，盡管太多的無奈寫在我們的臉上，盡管太多的精力揮灑在昨日的流程上;立足今日，我們擦亮雙眼，走過昨日逝去的歲月，點燃新的希望，放飛新的夢想。

一個開發人員，技術上的提高是必須的，但這是不夠的，還得加強管理方面的學習，自己將朝著這一目標邁進。學歷代表過去、能力代表現在、學習代表未來。雖然我現在需要學習的東西還很多，但是我仍然會不斷加油學習，讓知識充實自己的腦袋，讓情感融入自己的精神。不管怎么樣，我們要懷揣一顆感恩的心，感謝曾經幫助過我們的人，感謝公司、感謝朋友、感謝同事，真心的謝謝您們!

新的一年將會有更多更大的機遇和挑戰，作為公司的一員，我將以更好的狀態去迎接它們，和大家共同打造屬于贊同的輝煌。

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

本科畢業設計（論文）

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

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

學院院長： 二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 選題背景及意義

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

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

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

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

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

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

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

我們要創建我們本專業的網站數字媒體技術系的專業網站，網站前端設計最基本的三個技能：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腳本庫。“Javascript輕量級腳本庫”系列文章。Javascript腳本庫類似于。NET的類庫，這些工具方法或對象方法封裝在類庫中，方便用戶使用。

注意jQuery是腳本庫，而不是腳本框架?！皫臁辈坏扔凇翱蚣堋保热纭癝ystem程序集”是類庫，而“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;上右下左