《Web前端開發(fā)項目教程》認識網站和網頁-網站設計與開發(fā)起步

項目01認識網站和網頁任務01-1網站設計與開發(fā)起步任務01-1：網站設計與開發(fā)起步

知識點了解網站開發(fā)設計的基本概念理解web標準

技能點學會搭建網站的目錄結構學會在Chrome瀏覽器下查看網站結構一、基本概念-網頁網頁是構成網站的基本元素，是承載各種網站應用的平臺，它可以存放在世界上任何一臺計算機中，是萬維網（WorldWideWeb，全球廣域網，簡稱web）中的一個頁面。網頁要通過網頁瀏覽器來閱讀。常用的PC端瀏覽器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等，還有微軟改進IE新出的內置瀏覽器Edge3基本概念-網頁網頁實際上只是一個純文本文件，它通過各種標記對頁面上的文本、圖像、表格、聲音、視頻等元素進行描述，由瀏覽器對這些標記進行解釋并生成頁面，于是就得到了我們看到的網頁。網站開發(fā)者按照Web標準來編寫網頁文件,網頁的擴展名表示了網頁文件的類型，例如.htm或.html是用HTML/CSS/JavaScript編寫的靜態(tài)網頁，.asp、.jsp或.php則分別是用ASP、JSP或PHP編寫的動態(tài)網頁。思考：靜態(tài)網頁和動態(tài)頁面功能上有何不同？基本概念-網站網站是域名、空間服務器、域名解析、網站程序、數據庫等的集合，涉及到一系列軟硬件技術，但是近年來隨著云計算技術的迅猛發(fā)展，租用云服務器搭建虛擬主機使得網站建設更加普及和大眾化。本課程的關注點是網站內容的設計與開發(fā)。網站內容的本質就是一個文件夾，在該文件夾中保存了相關聯的所有網頁文件及所有資源文件，設計網站就是逐個設計網頁，并將它們分類保存在網站文件夾的各個子文件夾中?；靖拍?網站index.html是網站中的首頁文件名稱，在網站中不可或缺，通常文件名是index，也可以根據實際需要更換，可以是一個靜態(tài)頁面，也可以是一個動態(tài)頁面。網站開發(fā)之初一定要建立清晰的網站結構，一般按欄目內容分別建立文件夾，把資源按類存放在不同的文件夾中，文件夾層次不要太深，建議一般中小型網站盡量不要超過三層。因為很多Internet服務器使用的是英文操作系統(tǒng)，不能對中文文件名和文件夾名提供很好的支持，可能導致瀏覽錯誤或訪問失敗，所以要避免用中文命名文件或文件夾?；靖拍?網站網站的文件結構網站主要頁面的結構二、Web標準如何使我們設計的網頁在不同的瀏覽器下兼容？

不同的瀏覽器、不同的終端可定制的界面風格

易于修改和維護全球的網頁設計人員和瀏覽器制造商之間有一個共同的web標準，遵守這個標準的網頁，在所有遵守W3C（萬維網聯盟）

標準的瀏覽器上都可以獲得一致的表現可以完全不必擔心瀏覽器兼容問題。Web標準下的網頁設計（結構、表現、行為的分離）Web標準WEB標準不是某一個標準，而是一系列標準的集合。結構表現行為結構化標準語言主要包括HTML、XHTML和XML等

表現標準語言主要包括CSS行為標準主要包括對象模型（如W3CDOM、ECMAScript）等。Web標準Web標準——結構標準結構用于對網頁元素進行整理和分類，結構化標準語言主要包括XML、HTML、XHTML。（1）XMLXML是TheExtensibleMarkupLanguage的縮寫，中文譯為“可擴展標識語言”，是一種能定義其他語言的語言，是web發(fā)展的趨勢。XML的最初設計目標是彌補HTML的不足，以強大的擴展性滿足網絡信息發(fā)布的需求。現在XML主要作為一種數據格式，用于網絡數據交換和書寫配置文件。（2）HTMLHTML是HyperTextMarkupLanguage的縮寫，中文譯為“超文本標識語言”，而XHTML1.0是在HTML4.0基礎上，用XML的規(guī)則對其進行擴展。發(fā)布XHTML的最初目的就是實現HTML向XML的過渡。在一般語境中，人們習慣使用HTML代替HTML和XHTML。如果網頁只用結構化標準語言描述，將會得到文本、圖像等內容從上到下的羅列，是不帶任何修飾樣式的。Web標準——表現標準表現用于設置網頁元素的版式、顏色、大小等外觀樣式，主要指的是CSS。CSS（CascadingStyleSheet）是層疊樣式表。CSS標準建立的目的是以CSS為基礎進行網頁布局，控制網頁表現。CSS布局與HTML結構語言相結合，可以實現結構和表現的分離，使網站的維護和改版更加方便。CSS3.0是目前最新的CSS標準。Web標準——行為標準行為標準主要包括對象模型（如W3CDOM）、ECMAScript等。（1）DOMDOM（DocumentObjectModel）是文檔對象模型。它是一種與平臺和語言無關的應用程序接口（API），可以動態(tài)地訪問程序和腳本，更新其內容、結構和樣式。（2）ECMAECMA（EuropeanComputerManufacturersAssociation）是以JavaScript為基礎制定的標準腳本語言。JavaScript是一種基于對象和事件驅動的客戶端腳本語言，廣泛用于web開發(fā)，常用于在頁面中增加各種特效設計，例如圖片的輪換效果、漂浮的廣告效果等。實訓任務在Chrome瀏覽