HTML5+CSS3+JavaScript+Bootstrap網(wǎng)站開發(fā)技術（第3版）課件第1章 課程概述

第0章課程概述關于課程HTML5、CSS3、JavaScript、BootstrapHTML5+CSS3+Javascript+Bootstrap網(wǎng)站開發(fā)實用技術，人民郵電出版社，張大為等著網(wǎng)頁設計，html,css,js,Bootstrap相關參考書各類在線視頻課講練結(jié)合，多實踐，多思考，多交流

html5->標記->網(wǎng)頁內(nèi)容CSS3->屬性->網(wǎng)頁樣式美觀的網(wǎng)頁+=教學目標了解www相關要素的概念、關系、原理掌握網(wǎng)站建設的一般過程，頁面設計的原理與方法學習H5、CSS3、JavaScript、Bootstrap，能夠熟練完成Web前端開發(fā)。參考書籍資源（1）唐四薪.基于Web標準的網(wǎng)頁設計與制作.北京：清華大學出版社，2014.（2）黑馬程序員.響應式Web開發(fā)項目教程（HMTL5+CSS3+Bootstrap）.北京：人民郵電出版社，2019.（3）陸凌牛.HTML5與CSS3權(quán)威指南.3版.北京：機械工業(yè)出版社，2015.愛因斯坦教育理念在學校，傳授專業(yè)的知識其實不是最重要的，學培養(yǎng)獨立工作和獨立思考的人，最重要的教育方法總是鼓勵學生去實際行動。

學習思路：聽：首先傳達了知識，用形象的例子作比喻，要讓學生聽懂；想：然后給學生時間思考和嘗試很重要。做：最后留出時間或者任務給學生實踐，主動學習勝于一切。學習建議重視頁面的源代碼善于觀察比較，發(fā)現(xiàn)細微的不同注重細節(jié)，追求完美抓住重點，勤于實踐第1章網(wǎng)站開發(fā)基礎知識互聯(lián)網(wǎng)的訪問過程1互聯(lián)網(wǎng)的工作機制2網(wǎng)站設計中的一些基本概念3制作網(wǎng)站的標準和常用技術4常用的開發(fā)工具5網(wǎng)站建設的流程6建立站點7小結(jié)1.1互聯(lián)網(wǎng)的訪問過程瀏覽網(wǎng)站涉及一些非?；镜母拍?，包括瀏覽器與服務器、WWW與萬維網(wǎng)，還有IP地址與域名等.1.1互聯(lián)網(wǎng)的訪問過程瀏覽器與服務器瀏覽網(wǎng)站是從遠程計算機中獲取內(nèi)容。提供內(nèi)容信息的計算機就稱為服務器，訪問者使用瀏覽網(wǎng)頁的軟件被稱為瀏覽器。實例WWW與萬維網(wǎng)萬維網(wǎng)，WWW,“WorldWideWeb”，也稱作Web。WWW、萬維網(wǎng)和Web是同義詞，是一個大型的相互鏈接的文件所組成的集合體，包括了整個網(wǎng)絡世界。1.1互聯(lián)網(wǎng)的訪問過程IP地址和域名服務器在網(wǎng)絡中的地址，是通過IP地址來實現(xiàn)的。為了實現(xiàn)IP地址的易理解、易識別，又引入了域名的概念。IP地址是識別互聯(lián)網(wǎng)上計算機和網(wǎng)絡設備的標識。域名是IP地址的一種符號化表示域名通過域名解析系統(tǒng)(DomainNameSystem，DNS)保證每臺主機的域名與IP地址一一對應。1.1互聯(lián)網(wǎng)的訪問過程URL和HTTP協(xié)議WWW上的地址通過URL來指明，HTTP協(xié)議是用于瀏覽網(wǎng)站的基本約束或規(guī)則。URL是UniformResourceLocation的縮寫，含義是統(tǒng)一資源定位器，用來指明文件在互聯(lián)網(wǎng)中的位置。HTTP是超文本傳輸協(xié)議例如，/是一個URL，其中http是協(xié)議，是服務器地址（域名）1.2互聯(lián)網(wǎng)的工作機制1.2互聯(lián)網(wǎng)的工作機制（1）瀏覽器中輸入將要訪問頁面的URL地址。由DNS進行域名地址解析，找到服務器IP地址，向該地址所指向的Web服務器發(fā)出請求。（2）Web服務器根據(jù)瀏覽器送來的請求，把URL地址轉(zhuǎn)換成頁面所在服務器上的文件全名，查找相應的文件。（3）如果URL指向靜態(tài)HTML文檔，Web服務器使用HTTP協(xié)議把該文檔直接送給瀏覽器。如果HTML文檔中嵌入了ASP、PHP或JSP程序，則由Web服務器運行這些程序，把結(jié)果送到瀏覽器。如果Web服務器運行的程序包含對數(shù)據(jù)庫的訪問，則服務器將查詢指令發(fā)送給數(shù)據(jù)庫服務器，對數(shù)據(jù)庫執(zhí)行查詢操作。（4）查詢結(jié)果由數(shù)據(jù)庫返回Web服務器，再Web服務器將結(jié)果數(shù)據(jù)嵌入頁面，并以HTML格式發(fā)送給瀏覽器。（5）瀏覽器解釋HTML文檔，在客戶端屏幕上展示結(jié)果。1.3網(wǎng)站設計中的一些基本概念1．網(wǎng)站，Website，站點。是指在互聯(lián)網(wǎng)上，根據(jù)一定的規(guī)則，用HTML語言編寫的用于展示內(nèi)容的網(wǎng)頁的集合。在本地計算機上，網(wǎng)站體現(xiàn)為一組文件夾。網(wǎng)站由域名、網(wǎng)站空間、網(wǎng)頁3部分組成。2.網(wǎng)頁實際上是用HTML語言編寫的文本文件。在瀏覽網(wǎng)頁時，瀏覽器將HTML語言翻譯成用戶看到的網(wǎng)頁。命令[查看]/[源文件]，可在瀏覽器中查看這個網(wǎng)頁的HTML語言描述。1.3網(wǎng)站設計中的一些基本概念靜態(tài)網(wǎng)頁在瀏覽器中運行，不需要到后臺數(shù)據(jù)庫檢索數(shù)據(jù)、不含有程序的純HTML格式的網(wǎng)頁文件，其文件后綴一般為.html、.htm、.shtml等。動態(tài)網(wǎng)頁網(wǎng)頁文件中包含需要在服務器上執(zhí)行的程序代碼。動態(tài)網(wǎng)頁需要后臺數(shù)據(jù)庫與Web服務器交互，利用數(shù)據(jù)庫實現(xiàn)數(shù)據(jù)更新和查詢服務。動態(tài)網(wǎng)頁擴展名一般是.asp、.jsp、.php等。1.4制作網(wǎng)站的標準和常用技術Web開發(fā)應用遵循的標準就是Web標準。Web標準W3C和其他標準化組織共同制定的，該標準用來創(chuàng)建和解釋基于Web的內(nèi)容，Web標準可以使得在網(wǎng)上發(fā)布的文檔向后兼容，使其能夠被大多數(shù)人所訪問。Web標準包括系列標準網(wǎng)頁部分的標準通過三部分來描述：結(jié)構(gòu)（Structure）、表現(xiàn)（Presentation）和行為（Behavior）。1.4制作網(wǎng)站的標準和常用技術結(jié)構(gòu)、表現(xiàn)和行為對應于3種常用的技術，即HTML，CSS和JavaScript。HTML用來決定網(wǎng)頁的結(jié)構(gòu)和內(nèi)容，CSS用來設計網(wǎng)頁的表現(xiàn)形式，JavaScript用來控制網(wǎng)頁的行為。Bootstrap是在HTML、CSS和JavaScript之上的開發(fā)框架。1.4制作網(wǎng)站的標準和常用技術HTMLHyperTextMarkupLanguage，是一種用來制作超文本文檔的簡單標記語言。XHTML可擴展超文本標記語言，是過渡語言。CSS(CascadingStyleSheets，層疊樣式表)是標準的布局語言，用來排版和顯示HTML元素。HTML+CSS的布局，使內(nèi)容表現(xiàn)與結(jié)構(gòu)相分離，使網(wǎng)頁可維護性更好。1.4制作網(wǎng)站的標準和常用技術JavaScript一種解釋性的，基于對象的腳本語言。JavaScript與Java兩者之間沒有聯(lián)系兩種完全不同的語言，JavaScript是“腳本”(Script)，它直接把代碼寫到HTML文檔中，瀏覽器讀取它們的時候才進行編譯、執(zhí)行。1.5常用的開發(fā)工具文檔編輯工具Notepad++可視化網(wǎng)頁開發(fā)軟件DreamweaverCS6集成開發(fā)環(huán)境Webstorm1.6網(wǎng)站建設的流程1.6網(wǎng)站建設的流程1.6.1明確網(wǎng)站的定位行業(yè)定位風格定位設計定位

推廣定位1.6網(wǎng)站建設的流程1.6.2確定網(wǎng)站的主題理解站點功能形成鮮明的主題特色要突出1.6網(wǎng)站建設的流程1.6.3網(wǎng)站的整體規(guī)劃首先羅列網(wǎng)站的內(nèi)容根據(jù)內(nèi)容列出一個結(jié)構(gòu)化的藍圖根據(jù)情況設計各個頁面之間的鏈接規(guī)劃網(wǎng)站的內(nèi)容應包括欄目的設置、目錄結(jié)構(gòu)、網(wǎng)站的風格1.6網(wǎng)站建設的流程目錄結(jié)構(gòu)設計按欄目內(nèi)容建立子目錄每個目錄下分別為圖像文件創(chuàng)建一個子目錄images目錄的層次不要太深盡量使用意義明確的非中文目錄1.6網(wǎng)站建設的流程主題欄的設置版面布局網(wǎng)站標志Logo顏色和圖像的運用1.6網(wǎng)站建設的流程1.6.4收集資料與素材在明確建站目的和網(wǎng)站定位以后，要結(jié)合各方面的實際情況，圍繞主題全面收集相關的材料。1.6.5設計制作網(wǎng)頁頁面網(wǎng)頁的設計要講究頁面構(gòu)圖、色彩搭配、平面布局、版式設計、空間表現(xiàn)等方面的內(nèi)容。頁面內(nèi)容：標題、網(wǎng)站標志、主體內(nèi)容、頁眉頁腳、導航欄、廣告欄等。1.6網(wǎng)站建設的流程1.6.6測試和發(fā)布測試評估與網(wǎng)站發(fā)布是不可分割的兩部分制作完畢的網(wǎng)頁必須進行測試。測試評估主要包括上傳前的兼容性測試、鏈接測試和上傳后的實地測試。網(wǎng)站上傳后，繼續(xù)通過瀏覽器進行實地測試，發(fā)現(xiàn)問題后及時修改，然后再上傳測試。1.7建立站點站點是某個網(wǎng)站的本地或遠程存儲位置，是存放網(wǎng)站所有的網(wǎng)頁及各種素材的文件夾。建立網(wǎng)站之前，一般先建立站點。使用Dreamweaver建立站點。1.7建立站點1.7.1DreamweaverCS6編輯窗口1.7建立站點1.7.1DreamweaverCS6文檔窗口工具欄屬性面板插入面板行為面板、文件面板、歷史面板等。設計視圖、代碼視圖、拆分視圖1.7建立站點1.7.2站點組成使用Dreamweaver開發(fā)網(wǎng)站時，最好先建立站點，然后再具體制作網(wǎng)頁。Dreamweaver站點組成本地根文件夾遠程文件夾測試服務器文件夾1.7建立站點1.7.3創(chuàng)建站點（1）在本地計算機上創(chuàng)建要用于存儲站點文件的本地文件夾d:\tourism，文件夾結(jié)構(gòu)根據(jù)網(wǎng)站需要設計，將d:\tourism作為本地根文件夾。（2）在Dreamweaver窗口中，執(zhí)行[站點]/[新建站點]命令。輸入用于存儲站點文件的本地文件夾的地址即可。1.7建立站點1.7.4管理站點執(zhí)行[站點]/[管理站點]命令，在”管理站點”對話框中可以完成創(chuàng)建站點、編輯站點、復制站點、刪除站點或者導入/導出站點工作。1.8應用案例小結(jié)介紹了互聯(lián)網(wǎng)的訪問過程和工作機制。瀏覽器與服務器、WWW與萬維網(wǎng)，還有IP地址與域名是最基本的概念。網(wǎng)站、網(wǎng)頁、靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁等概念。Web標準由一系列標準構(gòu)成，其網(wǎng)頁部分的標準通過三部分來描述：結(jié)構(gòu)（Structure）、表現(xiàn)（Presentation）和行為（Behavior）。HTML用來決定網(wǎng)頁的結(jié)構(gòu)和內(nèi)容，CSS用來設計網(wǎng)頁的表現(xiàn)形式，JavaScript用來控制網(wǎng)頁的行為。小結(jié)DreamweaverCS6。創(chuàng)建站點的方法。網(wǎng)站建設的流程可以劃分為前期策劃、中期制作和后期維護等三個階段。作業(yè)1.簡答題（1）簡要說明HTML的基本工作原理。（2）說明網(wǎng)站、網(wǎng)頁、靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁的含義。（3）組成網(wǎng)頁的最基本