HTML概述

1.1基本概念

上網衝浪時（即瀏覽網頁），呈如今人們面前的漂亮頁面就是網頁，是網絡內容的視覺呈現。網頁是怎樣製做的呢？網頁的主體是一個HTML代碼建立的文本文件，使用HTML中的相應標籤，便可將文本、圖像、動畫及音樂等內容包含在網頁中，再經過瀏覽器的解析，多姿多彩的網頁內容就呈現出來了。

網頁中能夠包含不少的內容做爲網頁的元素，最基本的元素是文字、連接、表單。此外還包括靜態的圖形、動畫、聲音、視頻等其餘形式的多媒體文件。最終目的是向訪問者傳達有價值的信息，並留下深入的印象。

網頁不是由一個單獨的文件構成。

瀏覽器和服務器的概念

互聯網--世界各地的計算機相互鏈接而成一個網絡。

瀏覽網頁，其實是從遠程的計算機上讀取一些內容，而後在本地計算機上顯示出來。

瀏覽器發出請求，對應服務器將信息傳送至用戶的計算機上，瀏覽器再負責解析出網頁的內容，並展現出來。

互聯網--「萬維網」，WWW--「World Wide Web」簡稱Web。發源於歐洲量子物理實驗室。

其實是一個大型的相互鏈接的文件所組成的集合體。

1.2 HTML介紹

HTML(Hyper Text Markup Language)，中文一般稱爲「超文本標記語言」，是因特網上編寫網頁的主要語言。經過HTTP協議，使HTML文件能夠在互聯網上進行跨平臺的文件交換。

HTML文檔的主要特色：

一、容易建立。

二、文件佔用空間小，可以儘快地在網絡環境下傳輸和顯示。

三、平臺無關性。HTML獨立於操做系統平臺，能對多平臺兼容。

四、簡單易學，不須要很深的編程知識。

五、可擴展性好。

HTML的簡單發展歷史

1993.6 HTML1.0 互聯網工程工做小組（IETF）工做草案發布

1995.11 HTML2.0 發佈

1996.1 HTML3.2 W3C推薦標準

1997.12 HTML4.0 W3C推薦標準

1999.12 HTML4.01 W3C推薦標準

2008.8 HTML5.0 W3C工做草案

1.3網頁的設計與開發過程

1）明確網站定位

應清楚創建站點的目標定位，肯定它將提供什麼樣的服務，應該提供哪些內容。肯定站點目標定位，從三個方面考慮：

A、網站的總體定位，如大型商用網站、小型電子商務網站，門戶網站、我的主頁、科研網站、交流平臺、企業介紹性網站、服務性網站。對網站的總體進行一個客觀的評估。以發展的眼光看待問題。不然將帶來許多升級和更新方面的不便。

B、網站的主要內容。若是是綜合性網站，便會涉及新聞、郵件、電子商務、論壇等內容，就要求網頁結構緊湊、美觀大方；對於側重於某一方面的網站，如書籍網站、遊戲網站、音樂網站等，則每每對網頁的美工要求較高，使用模板較多，更新網頁和數據庫較快；若是是我的網站或介紹性網站，則更新速度較慢，瀏覽率低，連接較少，內容也不如其餘網站豐富，但對美工要求更高一些，可以使用較鮮豔、明亮的顏色，同時添加動畫等，使網頁更具動感、充滿活力，不然網站就沒有吸引力。

C、網站瀏覽者的教育程度。對於不一樣的瀏覽人羣，網站的吸引力是大相徑庭的，如針對少年兒童的網站，卡通和科普性的內容更符合其瀏覽品味，也能達到寓教於樂的目的；針對學生網站，每每對網站的動感程度和特效技術要求更高一些；對於商務瀏覽者，網站的安全性和易用性更爲重要。

2）收集信息和素材（前期策劃中最爲關鍵的一步）欄目的設置有規劃

建立目錄，放置網站文件，文件名最好用英文。

A、文本內容素材的收集文本素材內容既要豐富，又要便於組織。

B、藝術內容素材的收集只有文本內容的網站，是枯燥乏味、缺少生機的。多種媒體內容，會使網頁充滿動感與生機。

3）策劃欄目結構（肯定重點）欄目歸類根據主題、功能或內容分類

合理組織站點結構，可以加快對站點的設計，提升工做效率，節省工做時間。

4）設計頁面圖像方案美術設計師（美工）拿出幾個不一樣風格的方案，考慮公司總體形象  Logo、標準色彩、導航條、首頁佈局等。

5）製做頁面版面佈局

版面，是指在瀏覽器中看到的完整的一個頁面的大小。因顯示器分辨率不一樣，同一個頁面的大小可能出現不一樣的尺寸。640*480 800*600 1024*768  實際設計時，限制在778之內

佈局，是指以最適合的方式將圖片和文字排放在頁面的不一樣位置。這是一個創意的過程，須要必定的經驗與靈感。

頁面製做複雜而細緻的過程，按先大後小、先簡單後複雜的順序。靈活運用模板與庫，提升製做效率。

靜態頁面的構建，注意頁面之間的邏輯關係靜態與動態部分的區分

6）實現後臺功能編程實現

留言板、搜索功能、新聞發佈、購物網站、聊天室

7）整合、測試與發佈

將網站內容上傳至服務器以前，應先在本地站點進行完整測試，以保證頁面外觀和效果、連接和頁面下載時間等與設計相同。

站點測試主要包括檢測站點在各類瀏覽器中的兼容性、檢測站點中是否有失效的連接。發現包含在網頁中的錯誤。

發佈。用軟件工具，上傳至服務器。

1.4 網頁設計的基本原則

明確主題頁面都圍繞這個內容來製做

首頁很重要反應整個網站給人的總體感受，可否吸引訪問者，全在於首頁的設計效果。條理清楚，類別選項人性化，能讓人快速找到目標。

分類如按主題分類、按性質分類、按組織結構分類、按人的思考方式分類等。

互動性好的網站必須與訪問者有良好的互動關係，包括總體呈現、界面引導等。

圖像應用技巧具有醒目、吸引人和傳達信息的功能。用得好會給網頁增色，用很差拔苗助長。

避免濫用技術技術是讓人着迷的東西。好的技術運用會使頁面栩栩如生，給人全新的感受，不恰當的使用會起相反的效果，讓人失去興趣。

及時更新和維護訪問者但願看到新鮮的東西，沒人對過期的信息感興趣。

1.5 網頁設計的成功要素

總體佈局網頁設計做爲一種視覺語言，講究編排和佈局。就乾淨整潔、條理清楚。過多的閃爍、色彩、圖片只能會讓訪問者無所適從。

信息提供有價值的內容

下載速度是吸引訪問者的關鍵因素，若是20－30秒還不能打開，通常人會沒有耐心。圖像大小應控制在6－8k爲宜。

圖像和版面設計關係到第一印象，圖像應集中反映主頁所傳達的主要信息內容。

文字的可讀性主要是選擇字體，通用字體最易閱讀，特殊字體用於標題效果較好。顏色也很重要。

多媒體功能的運用可吸引訪問者的注意力，但要考慮傳輸速度。

導向清晰使訪問者能在網站上自由地前進或後退。人們習慣於從上到下，從左到右閱讀，主要導航條應放置在左邊，長頁面底面設置簡單導航。

1.6 設計網頁的三要素

結構Structure、表現Presentation、行爲Behavior。

是什麼什麼樣子作什麼

HTML           CSS               JavaScript

三者分離，是一個重要的思想。

1.7 與設計相關的技術因素

1）屏幕分辨率  pixel   1024*786   1280*1024   1280*800  1440*900

2）瀏覽器類型  IE  firefox  Opera  Mozilla   Safari  Chrome