Web 前端開發(fā)技術(shù)（HTML5+CSS3+JavaScript+jQuery） 課件 項(xiàng)目一 Web 前端開發(fā)技術(shù)綜述

Web前端開發(fā)技術(shù)綜述Web前端開發(fā)技術(shù)篇1：HTML技術(shù)

本項(xiàng)目介紹Web前端開發(fā)設(shè)計(jì)的核心概念和設(shè)計(jì)基礎(chǔ),同時深入剖析系統(tǒng)開發(fā)流程。通過這一過程,學(xué)生能夠清晰地理解前端開發(fā)崗位的主要工作內(nèi)容,從而增強(qiáng)對這門課程的學(xué)習(xí)興趣和信心,并提升對課程價值的深刻認(rèn)同。此外,本項(xiàng)目還強(qiáng)調(diào)學(xué)習(xí)過程中的踏實(shí)態(tài)度與循序漸進(jìn)的重要性,旨在幫助學(xué)生樹立正確的職業(yè)道德觀念,了解Web前端開發(fā)行業(yè)的最新發(fā)展趨勢,培養(yǎng)終身學(xué)習(xí)的理念。通過這樣的學(xué)習(xí)體驗(yàn),學(xué)生將能夠更好地規(guī)劃自己未來的職業(yè)發(fā)展方向,緊跟時代的步伐,實(shí)現(xiàn)個人的持續(xù)成長與發(fā)展。序言目錄CONTENTSWeb概述Web前端設(shè)計(jì)基礎(chǔ)Web系統(tǒng)開發(fā)流程01020301Web概述Learningisaveryhappyopportunity,anopportunitythatmustbethoroughlyutilizedinordertoacquireknowledgeandbroadenone'shorizon.Web的特點(diǎn)1.易導(dǎo)航和圖形化的界面Web具有能夠?qū)D形、音頻、視頻等信息集于一體的特性。同時,Web導(dǎo)航非常方便,只需要從一個鏈接跳轉(zhuǎn)到另一個鏈接,即可在各個頁面、各個站點(diǎn)之間進(jìn)行瀏覽。2.與平臺無關(guān)性無論用戶使用的是Windows、UNIX、MacOS,還是其他任何操作系統(tǒng),都能通過Internet訪問Web上的豐富資源。Web瀏覽器,如Chrome、Firefox等,為各種平臺提供了統(tǒng)一的界面,使用戶能夠輕松瀏覽網(wǎng)頁、觀看視頻、下載文件等。3.分布式結(jié)構(gòu)大量的圖形、音頻和視頻信息會占用相當(dāng)大的磁盤空間,而用戶事先很難預(yù)知信息的多少。對于Web來說,信息可以放在不同的站點(diǎn)上,沒有必要集中在一起,瀏覽時只需要在瀏覽器中指明這個站點(diǎn)就可以了。這樣就使在物理上不Web概述Web的特點(diǎn)一定在同一個站點(diǎn)的信息在邏輯上一體化,從用戶的角度來看這些信息也是一體的。4.動態(tài)性由于各Web站點(diǎn)的信息包含站點(diǎn)本身的信息,信息的提供者可以經(jīng)常對站點(diǎn)上的信息進(jìn)行更新與維護(hù)。一般來說,各信息站點(diǎn)都盡量保證信息的時效性,所以Web站點(diǎn)上的信息需要動態(tài)更新,這一點(diǎn)可以通過信息的提供者實(shí)時維護(hù)來實(shí)現(xiàn)。5.交互性Web的交互性首先表現(xiàn)在它的超鏈接上,用戶的瀏覽順序和訪問的站點(diǎn)完全由用戶自己決定。另外,客戶端瀏覽器可以通過表單(Form)的形式從服務(wù)器獲得動態(tài)的信息,用戶填寫Form向服務(wù)器提交請求,服務(wù)器根據(jù)用戶的請求返回響應(yīng)的信息。Web概述Web工作原理用戶在通過客戶端瀏覽器訪問Internet上的網(wǎng)站或其他網(wǎng)絡(luò)資源時,通常需要在客戶端瀏覽器的地址欄中輸入需要訪問網(wǎng)站的統(tǒng)一資源定位符(UniformResourceLocator,URL),或者通過超鏈接的方式訪問相關(guān)網(wǎng)頁或網(wǎng)絡(luò)資源;然后通過域名服務(wù)器進(jìn)行全球域名解析,并根據(jù)解析結(jié)果決定訪問IP地址(InternetProtocolAddress,互聯(lián)網(wǎng)協(xié)議地址)指定的網(wǎng)站或網(wǎng)頁。獲取網(wǎng)站的IP地址后,客戶端的瀏覽器向指定IP地址上的Web服務(wù)器發(fā)送一個HTTP(HyperTextTransferProtocol,超文本傳輸協(xié)議)請求;通常情況下,Web服務(wù)器會很快響應(yīng)客戶端的請求,將用戶所需要的HTML文本、圖像和構(gòu)成該網(wǎng)頁的其他文件發(fā)送給用戶。如果需要訪問數(shù)據(jù)庫系統(tǒng)中的數(shù)據(jù),Web服務(wù)器就會將控制權(quán)轉(zhuǎn)給應(yīng)用服務(wù)器,應(yīng)用服務(wù)器根據(jù)Web服務(wù)器的數(shù)據(jù)查詢請求讀寫數(shù)據(jù)庫,并進(jìn)行相關(guān)數(shù)據(jù)庫的訪問操作,應(yīng)用服務(wù)器將數(shù)據(jù)查詢響應(yīng)發(fā)送給Web服務(wù)器,Web服務(wù)器再將查詢結(jié)果轉(zhuǎn)發(fā)給客戶端的瀏覽器;瀏覽器將客戶端請求的頁面內(nèi)容組成一個網(wǎng)頁顯示給用戶。Web概述Web相關(guān)概念1.URLURL可以理解為網(wǎng)頁地址或網(wǎng)站地址,它如同網(wǎng)絡(luò)上的門牌號碼,是Internet上標(biāo)準(zhǔn)資源的地址(Address)?，F(xiàn)在它已經(jīng)被萬維網(wǎng)聯(lián)盟編制為互聯(lián)網(wǎng)標(biāo)準(zhǔn)RFC1738。URL由協(xié)議、主機(jī)域名、路徑和文件名3個部分組成,其構(gòu)成如下。協(xié)議://服務(wù)器地址(端口號)/路徑/文件名第一部分是協(xié)議(或稱為服務(wù)類型),URL中的協(xié)議服務(wù)類型包括http、https、ftp、mailto、ldap、news、file、gopher。第二部分是服務(wù)器地址,即資源主機(jī)的域名或IP地址(包括端口號),HTTP默認(rèn)的端口號是80。Web概述Web相關(guān)概念第三部分是主機(jī)資源的具體地址,如路徑(目錄)和文件名等。第一部分和第二部分之間用“://”隔開,第二部分和第三部分用“/”隔開。第一部分和第二部分是不可缺少的,第三部分有時可以省略。2.Web服務(wù)器Web服務(wù)器(也稱為網(wǎng)站),是指在Internet上提供Web訪問服務(wù)的站點(diǎn),它是由計(jì)算機(jī)軟件和硬件組成的有機(jī)整體。網(wǎng)站一般由若干個網(wǎng)頁有序地組織在一起,第一個網(wǎng)頁也稱為主頁,所以主頁的設(shè)計(jì)非常重要。通常需要為Web服務(wù)器配置IP地址和域名,才能對外提供Web服務(wù)。計(jì)算機(jī)服務(wù)器與客戶端的體系架構(gòu)主要類型有兩種,即B/S(Browser/Server)類型和C/SWeb概述Web相關(guān)概念(Client/Server)類型,其中B/S是指瀏覽器和服務(wù)器;C/S是指客戶端(或終端)和服務(wù)器(或主機(jī))?，F(xiàn)在的互聯(lián)網(wǎng)體系大多采用B/S類型。3.超鏈接Web頁面一般是由若干個超鏈接構(gòu)成的。超鏈接(HyperLink)是指從一個網(wǎng)頁指向另一個目標(biāo)的連接關(guān)系,這個目標(biāo)可以是另一個網(wǎng)頁,也可以是相同網(wǎng)頁上的不同位置,還可以是一個圖像、一個電子郵件地址、一個文件,甚至是一個應(yīng)用程序。文本超鏈接在瀏覽器中表現(xiàn)為帶有下畫線的文字,將光標(biāo)移動到文字上,光標(biāo)就會轉(zhuǎn)變?yōu)椤笆帧钡男螤睢eb概述02Web前端設(shè)計(jì)基礎(chǔ)Learningisaveryhappyopportunity,anopportunitythatmustbethoroughlyutilizedinordertoacquireknowledgeandbroadenone'shorizon.件采購匯總表Web前端設(shè)計(jì)基礎(chǔ)Web前端設(shè)計(jì)工具1.純文本編輯軟件任何一款純文本編輯軟件均可進(jìn)行Web靜態(tài)網(wǎng)頁設(shè)計(jì)與開發(fā),因此本書不對設(shè)計(jì)工具做限定。Windows自帶的“記事本”軟件不需要安裝,可以查看和編輯網(wǎng)頁源代碼,用于創(chuàng)建簡單的網(wǎng)頁。2.可視化網(wǎng)頁編輯軟件一些專門的網(wǎng)頁設(shè)計(jì)工具提供了友好的操作界面、高效的編輯提示等,可以提高設(shè)計(jì)效率。HBuilderX和VSCode軟件均可以實(shí)現(xiàn)網(wǎng)頁開發(fā)與網(wǎng)站管理的功能,它們提供了可視化設(shè)計(jì)和代碼編輯操作,使用較為廣泛。Web網(wǎng)頁運(yùn)行環(huán)境網(wǎng)頁設(shè)計(jì)完成后,需要運(yùn)行以查看效果。遠(yuǎn)程客戶端瀏覽器向服務(wù)器發(fā)出請求,服務(wù)器將網(wǎng)頁結(jié)果傳送到客戶端瀏覽器上顯示。靜態(tài)網(wǎng)頁由于不需要服務(wù)器運(yùn)行而直接傳送到客戶端瀏覽器上顯示,所以進(jìn)行Web前端網(wǎng)頁設(shè)計(jì)時可以不配置服務(wù)器環(huán)境,直接在本地計(jì)算機(jī)的瀏覽器中運(yùn)行網(wǎng)頁文檔即可看到網(wǎng)頁效果。如果網(wǎng)頁中使用了AJAX(AsynchronousJavaScriptandXML,異步JavaScrint和XML)技術(shù)和服務(wù)器進(jìn)行數(shù)據(jù)交互,則還需要配置服務(wù)器環(huán)境,這樣才能更好地實(shí)現(xiàn)客戶端與服務(wù)器的數(shù)據(jù)接收和發(fā)送。HTML5和CSS3中新增了一些標(biāo)記和屬性。有的屬性在不同瀏覽器或同一瀏覽器的不同版本中顯示效果不一樣,甚至有的瀏覽器不支持某種特殊的屬性;有的屬性在不同內(nèi)核的瀏覽器中名稱也不同。Web前端設(shè)計(jì)基礎(chǔ)03Web系統(tǒng)開發(fā)流程Learningisaveryhappyopportunity,anopportunitythatmustbethoroughlyutilizedinordertoacquireknowledgeandbroadenone'shorizon.確定系統(tǒng)的主題首先,要確定Web系統(tǒng)的主題,找準(zhǔn)系統(tǒng)的定位。Web系統(tǒng)類型包括搜索引擎類、社交服務(wù)類、新聞資訊類、企業(yè)服務(wù)類、個人信息類等。其次,要考慮Web系統(tǒng)的用途、目標(biāo)、訪問用戶的需求等,以此確定Web系統(tǒng)提供的內(nèi)容和風(fēng)格。例如,新聞資訊類網(wǎng)站主要向訪問者提供大量的政治、經(jīng)濟(jì)、人文、生活等各方面的信息,需要考慮系統(tǒng)提供信息的全面性、受眾的廣泛性和信息更新的及時性;企業(yè)服務(wù)類網(wǎng)站主要用于企業(yè)發(fā)布特定的產(chǎn)品或服務(wù)內(nèi)容,是企業(yè)的宣傳窗口,除需要提供全面準(zhǔn)確的產(chǎn)品與服務(wù)信息以外,還需要在設(shè)計(jì)風(fēng)格上突出企業(yè)文化特色。Web系統(tǒng)開發(fā)流程系統(tǒng)結(jié)構(gòu)設(shè)計(jì)系統(tǒng)結(jié)構(gòu)設(shè)計(jì)是指將系統(tǒng)內(nèi)容劃分為清晰合理的層次結(jié)構(gòu),確定系統(tǒng)中各頁面的內(nèi)容,并建立頁面間的關(guān)聯(lián)。系統(tǒng)結(jié)構(gòu)設(shè)計(jì)包括欄目設(shè)置和目錄結(jié)構(gòu)規(guī)劃。欄目設(shè)置的任務(wù)是對信息進(jìn)行合理劃分,使訪問者可以方便、快捷地定位到要訪問信息的位置。欄目設(shè)置要結(jié)構(gòu)清晰、重點(diǎn)突出、層次級數(shù)合理;欄目設(shè)置一般不要超過三級,各頁面的鏈接也要清晰、準(zhǔn)確;欄目設(shè)置要以用戶為中心,具有訪問容易、直觀、可預(yù)期的特點(diǎn)。目錄結(jié)構(gòu)規(guī)劃是指對Web服務(wù)器上信息資源的存儲結(jié)構(gòu)進(jìn)行規(guī)劃。目錄結(jié)構(gòu)對系統(tǒng)的維護(hù)、更新、移植、搜索引擎訪問等有重要影響。在目錄結(jié)構(gòu)中,信息要按劃分的子目錄進(jìn)行存儲;目錄層次不要太多,主要的、經(jīng)常訪問的欄目應(yīng)能從首頁直接到達(dá);目錄和子目錄不要使用中文命名,名稱盡量意義明確,便于理解。Web系統(tǒng)開發(fā)流程頁面布局設(shè)計(jì)網(wǎng)頁布局是網(wǎng)頁界面設(shè)計(jì)的核心部分,它決定了網(wǎng)頁內(nèi)容的組織和呈現(xiàn)方式,同時與其他設(shè)計(jì)元素(如視覺層次、內(nèi)容質(zhì)量、交互設(shè)計(jì)等)共同體現(xiàn)網(wǎng)頁中各模塊的不同重要程度。網(wǎng)頁模塊一般包括標(biāo)題區(qū)、導(dǎo)航區(qū)、信息區(qū)、版權(quán)區(qū)。標(biāo)題區(qū)一般包含網(wǎng)站的名稱及其logo圖片或動畫,代表了網(wǎng)站的形象;導(dǎo)航區(qū)實(shí)現(xiàn)網(wǎng)頁欄目的列舉引導(dǎo),形式可以是橫條導(dǎo)航或豎條導(dǎo)航,位置一般在logo下方,也可以在網(wǎng)頁底部;信息區(qū)的內(nèi)容較多,采用多行多列的布局方式;版權(quán)區(qū)一般在網(wǎng)頁底部,通常用于放置版權(quán)信息、聯(lián)系方式等。網(wǎng)頁布局的類型有“國”字型、“匡”字型、標(biāo)題正文型、封面型和變化型等。Web系統(tǒng)開發(fā)流程頁面布局設(shè)計(jì)1.“國”字型網(wǎng)頁布局“國”字型網(wǎng)頁最上面是標(biāo)題區(qū)及導(dǎo)航區(qū),中間是信息區(qū),最下面是版權(quán)區(qū)。主要信息區(qū)在網(wǎng)頁中間突出顯示,其左右分別為次要信息區(qū)。2.“匡”字型網(wǎng)頁布局“匡”字型網(wǎng)頁布局和“國”字型網(wǎng)頁布局類似。信息區(qū)一般包括一個主要信息區(qū)和一個次要信息區(qū)(在左側(cè)或在右側(cè)),主要信息區(qū)的空間更多、更突出。3.標(biāo)題正文型網(wǎng)頁布局標(biāo)題正文型網(wǎng)頁的信息區(qū)只有主要信息區(qū),其中包括信息的標(biāo)題和正文。Web系統(tǒng)開發(fā)流程頁面布局設(shè)計(jì)4.封面型網(wǎng)頁布局封面型網(wǎng)頁布局一般出現(xiàn)在某些網(wǎng)站的首頁,背景大多采用一張精美的圖片或動畫,并提供進(jìn)入網(wǎng)站的簡單鏈接或按鈕。5.變化型網(wǎng)頁布局變化型網(wǎng)頁布局靈活多變,沒有明確的格式或功能劃分。例如,響應(yīng)式網(wǎng)頁會根據(jù)瀏覽設(shè)備的尺寸進(jìn)行動態(tài)調(diào)整。無論采用哪種布局方式,都一定要注意布局與內(nèi)容的結(jié)合,使網(wǎng)站信息能夠被用戶準(zhǔn)確定位,充分發(fā)揮信息共享的作用。Web系統(tǒng)開發(fā)流程圍繞網(wǎng)頁主題全面收集相關(guān)素材,如文本、圖像、音頻、視頻、動畫、圖標(biāo)等。有些材料需要自己制作,如logo等。收集的材料盡量放在同一個目錄下,并按照目錄結(jié)構(gòu)進(jìn)行分類整理。材料名稱要有明確意義,便于查找和訪問。素材要注意質(zhì)量和大小,在保證質(zhì)量的前提下盡量縮小素材的大小,以免影響網(wǎng)絡(luò)訪問的速度。

素材收集和設(shè)計(jì)網(wǎng)頁的頁面設(shè)計(jì)要注重頁面元素的布局和呈現(xiàn)效果。頁面的整體效果要有藝術(shù)性和美感,對訪問者要有吸引力。文本的字體、字號、字間距、行距等要適合文本內(nèi)容表現(xiàn)的信息。多媒體元素在頁面中的寬度、高度要適當(dāng),既要保證頁面訪問的速度,又要保證方便、易用。各種元素的色彩對網(wǎng)頁的呈現(xiàn)效果非常重要,要根據(jù)網(wǎng)站主題、訪問者的文化審美和素材的風(fēng)格統(tǒng)一考慮。Web系統(tǒng)中各頁面的設(shè)計(jì)風(fēng)格要統(tǒng)一,最好采用統(tǒng)一的配色方案和頁面布局方式?？梢韵仍O(shè)計(jì)模板,再基于模板設(shè)計(jì)各頁面。頁面內(nèi)容設(shè)計(jì)Web系統(tǒng)開發(fā)流程制作完畢的Web系統(tǒng)要先進(jìn)行測試。測試包括本地測試和實(shí)地測試。本地測試是在開發(fā)環(huán)境下進(jìn)行的測試;實(shí)地測試是將Web系統(tǒng)上傳到服務(wù)器后,通過網(wǎng)絡(luò)遠(yuǎn)程訪問進(jìn)行的測試。做實(shí)地測試前,需要申請購買服務(wù)器空間和Web系統(tǒng)的域名,這樣才能把Web系統(tǒng)上傳到服務(wù)器。當(dāng)然,也可以借用其他在用的網(wǎng)站完成具體的測試工作。測試內(nèi)容一般包括服務(wù)器穩(wěn)定性和安全性測試、系統(tǒng)程序和數(shù)據(jù)庫測試、網(wǎng)頁兼容性測試。不僅要選擇不同的瀏