HTML5+CSS3+Bootstrap響應(yīng)式Web前端設(shè)計(jì)（慕課版）（第2版） 課件 第1章 網(wǎng)站初識

第1章網(wǎng)站初識《HTML5+CSS3+Bootstrap響應(yīng)式Web前端設(shè)計(jì)（第2版）》學(xué)習(xí)目標(biāo)/Target了解網(wǎng)頁基本概念，能夠說出網(wǎng)頁的構(gòu)成以及網(wǎng)頁相關(guān)名詞的含義。熟悉Web工作原理，了解網(wǎng)頁是如何從服務(wù)端傳送到客戶端的。了解瀏覽器，能夠說出各主流瀏覽器的特點(diǎn)。了解HTML5技術(shù)，能夠知道HTML5發(fā)展歷程、優(yōu)勢以及瀏覽器對HTML5的支持情況。目錄/Contents1.1網(wǎng)頁構(gòu)成1.2理論基礎(chǔ)1.3開發(fā)框架1.4網(wǎng)頁開發(fā)工具1.5網(wǎng)站發(fā)布1.1網(wǎng)頁構(gòu)成網(wǎng)頁主要由文字、圖像和超鏈接等元素構(gòu)成。當(dāng)然，除了這些元素，網(wǎng)頁中還可以包含音頻、視頻以及Flash等。網(wǎng)頁組成為了快速了解網(wǎng)頁的構(gòu)成，接下來，我們查看一下網(wǎng)頁的源代碼。打開谷歌瀏覽器，單擊“F12”快捷鍵，谷歌瀏覽器中便會彈出當(dāng)前網(wǎng)頁的源代碼。網(wǎng)頁組成1.1網(wǎng)頁構(gòu)成1.1網(wǎng)頁構(gòu)成文字網(wǎng)頁中的文字應(yīng)統(tǒng)籌規(guī)劃，大小搭配適當(dāng)。太大會使得一個(gè)網(wǎng)頁信息量變小，太小又使人們?yōu)g覽時(shí)感到費(fèi)勁。網(wǎng)頁標(biāo)題表明本網(wǎng)頁的主要內(nèi)容。醒目的標(biāo)題能夠吸引瀏覽者能否注意力。1、有些美麗的字型在制作網(wǎng)頁的計(jì)算機(jī)上有，但將來別人瀏覽你的網(wǎng)頁時(shí)，瀏覽者的計(jì)算機(jī)上未必裝有這種字體。2、美麗的標(biāo)題字體可以制作成圖形方式。3、當(dāng)文本內(nèi)容較多時(shí)。可以利用表格形式來實(shí)現(xiàn)。標(biāo)題字號字型微軟雅黑字體瀏覽器默認(rèn)字體正常字體字體偏大客戶端無雅黑字體1.1網(wǎng)頁構(gòu)成文字1.1網(wǎng)頁構(gòu)成圖形加強(qiáng)視覺效果。背景圖華麗，使人感到界面友好。但需要占據(jù)較大的空間，致使網(wǎng)頁的顯示速度明顯變慢。網(wǎng)頁上的菜單按鈕有一些是由圖形制作。橫排豎排鏈接的標(biāo)志有文字和圖形兩種。制作一些精美的圖形作為鏈接按鈕，使它和整個(gè)網(wǎng)頁融為一體。菜單按鈕背景圖形鏈接標(biāo)志繪制圖形、圖像、動畫網(wǎng)頁支持格式：JPEG、GIF、PNG將特殊文字設(shè)計(jì)為圖片用圖片作為按鈕用圖片作為鏈接標(biāo)志1.1網(wǎng)頁構(gòu)成圖形1024分辨率1.1網(wǎng)頁構(gòu)成圖形1920分辨率分辨率2*2大小43字節(jié)的圖片1.1網(wǎng)頁構(gòu)成圖形200*200大小1.58KB1.2.1基本概念1.2理論基礎(chǔ)網(wǎng)站網(wǎng)站即Website，也稱作站點(diǎn)，是指在互聯(lián)網(wǎng)上，根據(jù)一定的規(guī)則，使用HTML語言編寫的用于展示內(nèi)容的網(wǎng)頁的集合。在本地計(jì)算機(jī)上，網(wǎng)站體現(xiàn)為一組文件夾。網(wǎng)站由域名、網(wǎng)站空間、網(wǎng)頁3部分組成。WWWURLDNSHTTP和HTTPSWebW3CWgzx網(wǎng)站目錄index.htm首頁Images存放圖片style.css樣式表about.html網(wǎng)頁h1.htm網(wǎng)頁h2.htm網(wǎng)頁h3.htm網(wǎng)頁首頁文件的直接上級目錄，是網(wǎng)站目錄首頁文件的間接上級目錄，不是網(wǎng)站根目錄1.2.1基本概念1.2理論基礎(chǔ)網(wǎng)站W(wǎng)WW（WorldWideWeb，萬維網(wǎng)）是Internet提供的一種服務(wù)——網(wǎng)頁瀏覽服務(wù)。我們上網(wǎng)時(shí)通過瀏覽器閱讀網(wǎng)頁信息就是在使用WWW服務(wù)。WWW是Internet上最主要的服務(wù)，許多網(wǎng)絡(luò)功能，如網(wǎng)上聊天、網(wǎng)上購物等，都基于WWW服務(wù)。WWWURLDNSHTTP和HTTPSWebW3C1.2.1基本概念1.2理論基礎(chǔ)網(wǎng)站W(wǎng)WWURLDNSHTTP和HTTPSWebW3C圖書館圖書某一頁WWW網(wǎng)站網(wǎng)頁網(wǎng)頁是網(wǎng)站的基本信息單位，是WWW的基本文檔。它由文字、圖片、動畫、聲音等多種媒體信息以及鏈接組成，是用HTML編寫的，通過鏈接實(shí)現(xiàn)與其他網(wǎng)頁或網(wǎng)站的關(guān)聯(lián)和跳轉(zhuǎn)。主頁(HomePage)是某個(gè)Web節(jié)點(diǎn)的起始點(diǎn)，主頁是鏈接到一個(gè)Web服務(wù)器上時(shí)顯示的第一個(gè)網(wǎng)頁，擁有一個(gè)被稱為“統(tǒng)一資源定位地址”URL的唯一地址。一組相關(guān)網(wǎng)頁以及有關(guān)文件、腳本和數(shù)據(jù)庫等內(nèi)容的有機(jī)集合；若干個(gè)網(wǎng)頁文件經(jīng)過規(guī)劃組織后彼此相連而形成完整結(jié)構(gòu)的信息服務(wù)系統(tǒng)。萬維網(wǎng)是一個(gè)通過互聯(lián)網(wǎng)訪問的，由許多互相鏈接的超文本組成的全球性系統(tǒng)，且是互聯(lián)網(wǎng)所能提供的服務(wù)之一。1.2.1基本概念1.2理論基礎(chǔ)網(wǎng)站URL（UniformResourceLocator，統(tǒng)一資源定位符）其實(shí)就是Web地址，也稱“網(wǎng)址”。在萬維網(wǎng)上的所有文件（HTML、CSS、圖片、音樂、視頻等）都有唯一的URL，用戶只要知道文件的URL，就能夠?qū)υ撐募M(jìn)行訪問。URL可以是本地磁盤位置，也可以是局域網(wǎng)上的某一臺計(jì)算機(jī)，還可以是internet上的站點(diǎn)。WWWURLDNSHTTP和HTTPSWebW3C/1.2.1基本概念1.2理論基礎(chǔ)網(wǎng)站DNS（DomainNameSystem，域名系統(tǒng)）是互聯(lián)網(wǎng)的一項(xiàng)服務(wù)。在Internet上域名與IP地址（可以理解為Internet上計(jì)算機(jī)的一個(gè)編號）之間是一一對應(yīng)的，域名（如：淘寶網(wǎng)域名）雖然便于用戶記憶，但計(jì)算機(jī)只能識別IP地址（如：）。計(jì)算機(jī)將便于記憶的域名轉(zhuǎn)換成IP的過程被稱為域名解析。DNS就是進(jìn)行域名解析的系統(tǒng)。WWWURLDNSHTTP和HTTPSWebW3C1.2.1基本概念1.2理論基礎(chǔ)網(wǎng)站HTTP（Hypertexttransferprotocol，超文本傳輸協(xié)議）是一種詳細(xì)規(guī)定了瀏覽器和互聯(lián)網(wǎng)服務(wù)器之間互相通信的規(guī)則。HTTP是非常可靠的協(xié)議，具有強(qiáng)大的自檢能力，所有用戶請求的文件到達(dá)客戶端時(shí)，都是準(zhǔn)確無誤的。WWWURLDNSHTTP和HTTPSWebW3C由于HTTP傳輸?shù)臄?shù)據(jù)都是未加密的，因此用戶使用HTTP傳輸隱私信息不太安全。為了保證這些隱私數(shù)據(jù)能夠安全傳輸，網(wǎng)景公司設(shè)計(jì)了SSL（SecureSocketsLayer，安全套接字協(xié)議），該協(xié)議用于對HTTP傳輸?shù)臄?shù)據(jù)進(jìn)行加密，從而就誕生了HTTPS。HTTPS是由SSL+HTTP構(gòu)建的，可進(jìn)行加密傳輸、身份認(rèn)證的網(wǎng)絡(luò)協(xié)議。因此HTTPS要比HTTP更安全。http://通訊協(xié)議域名1.2.1基本概念1.2理論基礎(chǔ)網(wǎng)站W(wǎng)eb翻譯為中文是“網(wǎng)絡(luò)”的意思。對于普通網(wǎng)絡(luò)用戶來說，Web僅僅只是一種環(huán)境——互聯(lián)網(wǎng)的使用環(huán)境。而對于網(wǎng)頁制作者來說，Web是一系列技術(shù)的復(fù)合總稱，包括網(wǎng)站的前臺布局、后臺程序、界面架構(gòu)、數(shù)據(jù)庫開發(fā)等。WWWURLDNSHTTP和HTTPSWebW3CWeb前端系統(tǒng)1.2.1基本概念1.2理論基礎(chǔ)網(wǎng)站W(wǎng)3C（WorldWideWebConsortium，萬維網(wǎng)聯(lián)盟）是國際最著名的標(biāo)準(zhǔn)化組織。W3C最重要的工作是制定和推廣Web規(guī)范。自1994年成立以來，W3C已經(jīng)發(fā)布了200多項(xiàng)影響深遠(yuǎn)的Web技術(shù)標(biāo)準(zhǔn)及實(shí)施指南。例如，超文本標(biāo)簽語言（HTML）、可擴(kuò)展標(biāo)簽語言（XML）等。這些規(guī)范有效地促進(jìn)了Web技術(shù)的發(fā)展。WWWURLDNSHTTP和HTTPSWebW3C1.2.2Web工作原理1.2理論基礎(chǔ)1.2理論基礎(chǔ)1.2.2（1）靜態(tài)頁面工作原理靜態(tài)網(wǎng)頁在網(wǎng)站設(shè)計(jì)中，純粹HTML格式的網(wǎng)頁通常被稱為“靜態(tài)網(wǎng)頁”，靜態(tài)網(wǎng)頁的網(wǎng)址形式通常為：/eg/eg.htm，

也就是以.htm、.html、.shtml、.xml等為后綴的。1.2理論基礎(chǔ)1.2.2（1）靜態(tài)頁面工作原理接受請求找到靜態(tài)網(wǎng)頁發(fā)送網(wǎng)頁服務(wù)器端1.2理論基礎(chǔ)靜態(tài)網(wǎng)頁的特點(diǎn)

（1）靜態(tài)網(wǎng)頁每個(gè)網(wǎng)頁都有一個(gè)固定的URL，且網(wǎng)頁URL以.htm、.html、.shtml等常見形式為后綴，而不含有“？”；（2）網(wǎng)頁內(nèi)容一經(jīng)發(fā)布到網(wǎng)站服務(wù)器上，無論是否有用戶訪問，每個(gè)靜態(tài)網(wǎng)頁的內(nèi)容都是保存在網(wǎng)站服務(wù)器上的，也就是說，靜態(tài)網(wǎng)頁是實(shí)實(shí)在在保存在服務(wù)器上的文件，每個(gè)網(wǎng)頁都是一個(gè)獨(dú)立的文件；（3）靜態(tài)網(wǎng)頁的內(nèi)容相對穩(wěn)定，因此容易被搜索引擎檢索；（4）靜態(tài)網(wǎng)頁沒有數(shù)據(jù)庫的支持，在網(wǎng)站制作和維護(hù)方面工作量較大，因此當(dāng)網(wǎng)站信息量很大時(shí)完全依靠靜態(tài)網(wǎng)頁制作方式比較困難；（5）靜態(tài)網(wǎng)頁的交互性較差，在功能方面有較大的限制。1.2.2（1）靜態(tài)頁面工作原理動態(tài)網(wǎng)頁動態(tài)網(wǎng)頁：動態(tài)網(wǎng)頁是與靜態(tài)網(wǎng)頁相對應(yīng)的，也就是說，網(wǎng)頁URL的后綴不是.htm、.html、.shtml、.xml等靜態(tài)網(wǎng)頁的常見形式，而是以.asp、.aspx、.jsp、.php、.perl、.cgi等形式為后綴，并在動態(tài)網(wǎng)頁網(wǎng)址中有一個(gè)標(biāo)志性的符號—？”。BBS論壇留言板聊天室1.2理論基礎(chǔ)1.2.2（2）動態(tài)頁面工作原理1.2.2（2）動態(tài)頁面工作原理1.2理論基礎(chǔ)（1）瀏覽器中輸入將要訪問頁面的URL地址。由DNS進(jìn)行域名地址解析，找到服務(wù)器IP地址，向該地址所指向的Web服務(wù)器發(fā)出請求。（2）Web服務(wù)器根據(jù)瀏覽器送來的請求，把URL地址轉(zhuǎn)換成頁面所在服務(wù)器上的文件全名，查找相應(yīng)的文件。（3）如果URL指向靜態(tài)HTML文檔，Web服務(wù)器使用HTTP協(xié)議把該文檔直接送給瀏覽器。如果HTML文檔中嵌入了ASP、PHP或JSP程序，則由Web服務(wù)器運(yùn)行這些程序，把結(jié)果送到瀏覽器。如果Web服務(wù)器運(yùn)行的程序包含對數(shù)據(jù)庫的訪問，則服務(wù)器將查詢指令發(fā)送給數(shù)據(jù)庫服務(wù)器，對數(shù)據(jù)庫執(zhí)行查詢操作。（4）查詢結(jié)果由數(shù)據(jù)庫返回Web服務(wù)器，再Web服務(wù)器將結(jié)果數(shù)據(jù)嵌入頁面，并以HTML格式發(fā)送給瀏覽器。（5）瀏覽器解釋HTML文檔，在客戶端屏幕上展示結(jié)果。1.2理論基礎(chǔ)1.2.2（2）動態(tài)頁面工作原理接受請求找到動態(tài)網(wǎng)頁發(fā)送網(wǎng)頁服務(wù)器端執(zhí)行程序代碼，生成靜態(tài)網(wǎng)頁1.2.2（2）動態(tài)頁面工作原理1.2理論基礎(chǔ)客戶端瀏覽器顯示代碼服務(wù)器端源代碼1.2.2（2）動態(tài)頁面工作原理1.2理論基礎(chǔ)Web開發(fā)應(yīng)用遵循的標(biāo)準(zhǔn)就是Web標(biāo)準(zhǔn)。Web標(biāo)準(zhǔn)是由W3C和其他標(biāo)準(zhǔn)化組織共同制定的，該標(biāo)準(zhǔn)用來創(chuàng)建和解釋基于Web的內(nèi)容，Web標(biāo)準(zhǔn)可以使得在網(wǎng)上發(fā)布的文檔向后兼容，使其能夠被大多數(shù)人所訪問。1.2.3網(wǎng)站開發(fā)標(biāo)準(zhǔn)1.2理論基礎(chǔ)Web標(biāo)準(zhǔn)包括一系列標(biāo)準(zhǔn)。網(wǎng)頁部分的標(biāo)準(zhǔn)通過三部分來描述：結(jié)構(gòu)（Structure）、表現(xiàn)（Presentation）和行為（Behavior）。HTML（結(jié)構(gòu)），CSS（表現(xiàn)）和JavaScript（行為）HTML用來決定網(wǎng)頁的結(jié)構(gòu)和內(nèi)容;CSS用來設(shè)計(jì)網(wǎng)頁的表現(xiàn)形式;JavaScript用來控制網(wǎng)頁的行為。1.2.3網(wǎng)站開發(fā)標(biāo)準(zhǔn)1.2理論基礎(chǔ)HTML是HyperTextMarkupLanguage的縮寫，是一種用來制作超文本文檔的簡單標(biāo)記語言，是網(wǎng)頁制作的基本語言。CSS(CascadingStyleSheets，層疊樣式表)是標(biāo)準(zhǔn)的布局語言，用來排版和顯示HTML元素，純CSS的布局與XHTML相結(jié)合，可使內(nèi)容表現(xiàn)與結(jié)構(gòu)相分離，并使網(wǎng)頁更容易維護(hù)，易用性更好。JavaScript語言是一種解釋性的，基于對象的腳本語言。JavaScript語言與Java語言兩者之間沒有聯(lián)系，是兩種完全不同的語言，JavaScript是一種“腳本”(Script)，它直接把代碼寫到HTML文檔中，瀏覽器讀取它們的時(shí)候才進(jìn)行編譯、執(zhí)行。1.2.3網(wǎng)站開發(fā)標(biāo)準(zhǔn)1.2理論基礎(chǔ)1.3開發(fā)框架1.4常用開發(fā)工具HTML文檔編輯工具Notepad++、EditPlus、VScode可視化網(wǎng)頁開發(fā)軟件Dreamweaver最新的版本是AdobeDreamweaverCS5動畫制作軟件Flash最新版本是AdobeFlashCS5圖像處理工具Photoshop目前，Photoshop最新的版本是AdobePhotoshopCS51.5網(wǎng)站發(fā)布本章首先介紹了互聯(lián)網(wǎng)的訪問過程和工作機(jī)制。在互聯(lián)網(wǎng)訪問的相關(guān)概念：瀏覽器與服務(wù)器、WWW與萬維網(wǎng)，IP地址與域名Web標(biāo)準(zhǔn)由一系