2020/5/26,網(wǎng)頁(yè)設(shè)計(jì)與制作基礎(chǔ),主講教師:馮波Email:gzfengbo,通過(guò)本課程的學(xué)習(xí)，使學(xué)生掌握網(wǎng)頁(yè)制作的基本知識(shí)，熟悉常用的網(wǎng)頁(yè)制作軟件Dreamweaver并且具備利用Dreamweaver來(lái)設(shè)計(jì)和制作網(wǎng)頁(yè)的能力。,教學(xué)目的與要求,教學(xué)進(jìn)度計(jì)劃,DWCS4下載地址,第一講網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ),1.1網(wǎng)頁(yè)設(shè)計(jì)相關(guān)概念網(wǎng)頁(yè)與網(wǎng)站W(wǎng)eb服務(wù)器和瀏覽器動(dòng)態(tài)網(wǎng)頁(yè)和靜態(tài)網(wǎng)頁(yè)URL,Internet,Internet是由遍布全世界的各種各樣的網(wǎng)絡(luò)通過(guò)TCP/IP協(xié)議連接成的一個(gè)松散結(jié)合的全球網(wǎng)，它使網(wǎng)絡(luò)上的各臺(tái)計(jì)算機(jī)（Internet上稱為主機(jī)，即host）可以互相交換信息。Internet為用戶提供了各種各樣的服務(wù)，如WWW，Email，F(xiàn)TP，即時(shí)通信等。,WWW,WWW（WorldWideWeb），簡(jiǎn)稱為Web或“萬(wàn)維網(wǎng)”。它是一個(gè)基于C/S體系結(jié)構(gòu)的分布式多平臺(tái)的超文本(hypertext)超媒體（hypermedia）信息服務(wù)系統(tǒng)。WWW將位于全世界Internet上不同網(wǎng)址的相關(guān)數(shù)據(jù)信息有機(jī)地編織在一起，通過(guò)瀏覽器（browser）提供一種友好的信息查詢界面。我們使用互聯(lián)網(wǎng)這個(gè)龐大的技術(shù)系統(tǒng)的主要方式是什么？,網(wǎng)頁(yè),網(wǎng)頁(yè)即是超文本文件，是按照網(wǎng)頁(yè)文檔規(guī)范編寫的一種純文本文件?？蛻敉ㄟ^(guò)瀏覽器看到的包含了如文字、圖像、聲音和動(dòng)畫等多媒體信息的每一個(gè)頁(yè)面，其本質(zhì)是一個(gè)純文本文件。瀏覽器對(duì)該純文本文件進(jìn)行了解釋，才生成了多姿多彩的網(wǎng)頁(yè)，除文本外，其它媒體素材（圖像、聲音、動(dòng)畫和影像等），都需要保存成單獨(dú)的文件，通過(guò)URL嵌入到網(wǎng)頁(yè)文件中?？梢钥闯?，WWW服務(wù)主要是通過(guò)一個(gè)個(gè)多媒體網(wǎng)頁(yè)提供給用戶各種信息的，因此，網(wǎng)頁(yè)是WWW的基礎(chǔ)文檔。,HTML超文本標(biāo)記語(yǔ)言,超文本標(biāo)記語(yǔ)言HTML作為一種語(yǔ)言，它具有語(yǔ)言的一般特征，即它是一種符號(hào)系統(tǒng)，具有自己的詞匯（符號(hào)）和語(yǔ)法（規(guī)則）。所謂標(biāo)記，就是作記號(hào)。如我們寫文章時(shí)通常用大體字標(biāo)記文章的標(biāo)題，用換行空兩格標(biāo)記一個(gè)段落所謂超文本，就是相比普通文本有超越的地方，如超文本可以通過(guò)超鏈接轉(zhuǎn)到指定的某一頁(yè)，而普通文本只能一頁(yè)頁(yè)翻，超文本還具有圖像，視頻，聲音等元素，并能和用戶交互，這些都是普通文本無(wú)法達(dá)到的,HTML的歷史,超文本標(biāo)記語(yǔ)言HTML是一種建立超文本/超媒體文檔的語(yǔ)言。作為一種語(yǔ)言，HTML具有語(yǔ)言的一般特征，即它是一種符號(hào)系統(tǒng)，具有自己的詞匯（符號(hào)）和語(yǔ)法（規(guī)則）。所謂標(biāo)記，就是作記號(hào)。如我們寫文章時(shí)通常用大體字標(biāo)記文章的標(biāo)題，用換行空兩格標(biāo)記一個(gè)段落。HTML用標(biāo)簽標(biāo)記文檔中的文本及圖像等各種元素，指示瀏覽器如何顯示這些元素。HTML的發(fā)展歷程如圖所示。,網(wǎng)站,網(wǎng)站是一組相關(guān)網(wǎng)頁(yè)以及有關(guān)的文件、腳本和數(shù)據(jù)庫(kù)等內(nèi)容的的有機(jī)集合，即若干個(gè)網(wǎng)頁(yè)文件經(jīng)過(guò)規(guī)劃組織后形成完整結(jié)構(gòu)的信息服務(wù)體系。一個(gè)網(wǎng)站對(duì)應(yīng)一個(gè)文件夾，網(wǎng)站的所有網(wǎng)頁(yè)和其他資源文件都會(huì)存放在該文件夾下或其子文件夾下，設(shè)計(jì)良好的網(wǎng)站通常是將網(wǎng)頁(yè)文檔及其它資源分門別類地保存在相應(yīng)的文件夾中以方便管理和維護(hù)。這些網(wǎng)頁(yè)通過(guò)鏈接組織在一起，其中有個(gè)網(wǎng)頁(yè)稱為首頁(yè)，常命名為index.htm，必須放在網(wǎng)站的根目錄下。網(wǎng)頁(yè)是網(wǎng)站的基本信息單元,Web服務(wù)器和瀏覽器,網(wǎng)頁(yè)被放置在Web服務(wù)器上用戶通過(guò)Url請(qǐng)求web服務(wù)器時(shí)，web服務(wù)器把相應(yīng)的網(wǎng)頁(yè)傳送到用戶瀏覽器端Web服務(wù)器的作用：對(duì)于靜態(tài)網(wǎng)頁(yè)，web服務(wù)器僅僅是定位到網(wǎng)站對(duì)應(yīng)的目錄，找到每次請(qǐng)求的網(wǎng)頁(yè)傳送給客戶端。對(duì)于動(dòng)態(tài)網(wǎng)頁(yè)，web服務(wù)器找到該網(wǎng)頁(yè)后要先對(duì)動(dòng)態(tài)網(wǎng)頁(yè)中的服務(wù)器端程序代碼進(jìn)行執(zhí)行，生成靜態(tài)網(wǎng)頁(yè)代碼再傳送給客戶端瀏覽器。,Web服務(wù)器,由于web服務(wù)器對(duì)靜態(tài)網(wǎng)頁(yè)起的只是一個(gè)查找和傳輸?shù)淖饔?，因此我們測(cè)試靜態(tài)網(wǎng)頁(yè)時(shí)可不安裝web服務(wù)器，直接找到該網(wǎng)站對(duì)應(yīng)的目錄雙擊網(wǎng)頁(yè)文件預(yù)覽測(cè)試，而測(cè)試或運(yùn)行動(dòng)態(tài)網(wǎng)頁(yè)則一定要在本機(jī)上安裝web服務(wù)器(如IIS)，因?yàn)閯?dòng)態(tài)網(wǎng)頁(yè)要經(jīng)過(guò)web服務(wù)器解釋執(zhí)行生成html文檔才能被瀏覽器解釋,瀏覽器,瀏覽器：用戶瀏覽網(wǎng)頁(yè)所用瀏覽器的本質(zhì)：解釋html代碼生成我們看到的網(wǎng)頁(yè)目前常見(jiàn)的瀏覽器有：IE6，F(xiàn)irefox3，Netscape，Opera,靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè),靜態(tài)網(wǎng)頁(yè)是不包含服務(wù)器端代碼的html文件，web服務(wù)器只是負(fù)責(zé)把靜態(tài)網(wǎng)頁(yè)發(fā)送給瀏覽器，由瀏覽器解釋執(zhí)行動(dòng)態(tài)網(wǎng)頁(yè)中含有服務(wù)器端代碼，需要先由web服務(wù)器對(duì)這些服務(wù)器端代碼進(jìn)行解釋執(zhí)行生成客戶端代碼后再發(fā)送給客戶端瀏覽器,動(dòng)態(tài)網(wǎng)頁(yè)的特征,同一個(gè)網(wǎng)頁(yè)根據(jù)每次請(qǐng)求的不同，可每次顯示不同的內(nèi)容因?yàn)橐@示不同的內(nèi)容，所以往往需要數(shù)據(jù)庫(kù)做支持從網(wǎng)頁(yè)的源代碼看，動(dòng)態(tài)網(wǎng)頁(yè)中含有服務(wù)器端代碼，后綴名不能是.htm。,URL,URL（UniversalResourceLocator）是統(tǒng)一資源定位器的英文縮寫，每個(gè)站點(diǎn)或站點(diǎn)上的每個(gè)文件（網(wǎng)頁(yè)及所有資源文件）都有一個(gè)唯一的地址，瀏覽器是通過(guò)URL來(lái)定位目標(biāo)信息的URL的一般格式為：協(xié)議名:/主機(jī)名:端口號(hào)/文件夾名/文件名常用協(xié)議名如：http（超文本傳輸協(xié)議，用于傳送網(wǎng)頁(yè)）；ftp（文件傳輸協(xié)議，用于傳送文件）例：,1.2網(wǎng)頁(yè)基本元素,網(wǎng)頁(yè)是網(wǎng)站提供信息服務(wù)的主要形式，一般包含文字、圖像和表格等內(nèi)容，以及實(shí)現(xiàn)信息塊之間跳轉(zhuǎn)的超鏈接。網(wǎng)頁(yè)通常以網(wǎng)頁(yè)文件及其附屬文件形式存在。常見(jiàn)的網(wǎng)頁(yè)元素包括文本、圖片、超鏈接、表格、導(dǎo)航欄、動(dòng)畫、音頻和視頻、交互表單等。,1.3網(wǎng)站的目錄結(jié)構(gòu),網(wǎng)站的目錄結(jié)構(gòu)是指網(wǎng)頁(yè)文件的存放結(jié)構(gòu)。不合理的目錄結(jié)構(gòu)會(huì)使得站點(diǎn)的維護(hù)、移植和擴(kuò)充變得異常的繁瑣和困難。不要將所有文件都存放在根目錄下。按欄目?jī)?nèi)容建立子目錄。在每個(gè)主目錄下都建立獨(dú)立的images目錄。目錄的層次不要太深。不要使用中文目錄。不要使用過(guò)長(zhǎng)的目錄。盡量使用意義明確的目錄。,一個(gè)網(wǎng)站的目錄結(jié)構(gòu)：root/|-images/|-message/|-quanzhou/|-member/|-|-01/|-|-.|-|-47/|-index.html,1.4網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言與工具,網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言靜態(tài)網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言網(wǎng)頁(yè)特效腳本語(yǔ)言動(dòng)態(tài)交互式網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言網(wǎng)頁(yè)設(shè)計(jì)工具網(wǎng)頁(yè)設(shè)計(jì)輔助軟件,Adobe的DreamweaverCSX,Microsoft的Frontpage和ExpressionWeb,1.5網(wǎng)站運(yùn)行環(huán)境的建立,域名注冊(cè)：符合規(guī)范、簡(jiǎn)潔、容易記憶、不容易與其他域名混淆、與公司名稱、商標(biāo)或核心業(yè)務(wù)相關(guān)建站方式的選擇：服務(wù)器空間虛擬主機(jī)主機(jī)(服務(wù)器)托管獨(dú)立服務(wù)器Web服務(wù)器的構(gòu)建選擇操作系統(tǒng)：須具有高性能的操作系統(tǒng)；必須支持多種通信協(xié)議；必須獨(dú)立于硬件；必須支持其他計(jì)算機(jī)的工作平臺(tái)；必須方便用戶訪問(wèn)網(wǎng)絡(luò)資源；必須有較好的應(yīng)用程序編程接口；必須支持遠(yuǎn)程過(guò)程調(diào)用（RemoteProcedureCall）；容錯(cuò)技術(shù)；有方便使用、功能強(qiáng)大的網(wǎng)絡(luò)管理工具Web服務(wù)器：安全，開(kāi)放，性價(jià)比，可擴(kuò)展性開(kāi)發(fā)工具數(shù)據(jù)庫(kù)：易用，分布，并發(fā)，可移植，安全，容錯(cuò),2.HTML與XHTML標(biāo)準(zhǔn),HTML文檔的基本結(jié)構(gòu)標(biāo)記(Tags)和元素(Elements)HTML標(biāo)記的分類行內(nèi)元素和塊級(jí)元素從HTML到XHTML的轉(zhuǎn)變html存在的問(wèn)題和web標(biāo)準(zhǔn)XHTML與HTML的區(qū)別,2.1(X)HTML文檔的基本結(jié)構(gòu),：告訴瀏覽器HTML文檔開(kāi)始和結(jié)束的位置，其中包括head部分和body部分。HTML文檔中所有的內(nèi)容都應(yīng)該在這兩個(gè)標(biāo)記之間，一個(gè)HTML文檔總是以開(kāi)始，以結(jié)束。,：HTML文件的頭部標(biāo)記，頭部主要提供文檔的描述信息，head部分的所有內(nèi)容都不會(huì)顯示在瀏覽器窗口中，在其中可以放置頁(yè)面的標(biāo)題以及頁(yè)面的類型、使用的字符集、鏈接的其它腳本或樣式文件等內(nèi)容,：用來(lái)指明文檔的主體區(qū)域，網(wǎng)頁(yè)所要顯示的內(nèi)容都放在這個(gè)標(biāo)記內(nèi)，其結(jié)束標(biāo)記指明主體區(qū)域的結(jié)束,編寫HTML網(wǎng)頁(yè)文檔的方法,HTML文檔是一個(gè)純文本文件，可以使用任何文本編輯器編寫保存使用記事本編輯一個(gè)html文件使用Dreamweaver新建一個(gè)html文件,2.2標(biāo)記(Tags)和元素（Elements）,標(biāo)記是HTML文檔中一些有特定意義的符號(hào)，這些符號(hào)指明內(nèi)容的含義或結(jié)構(gòu)。標(biāo)記總是放在三角括號(hào)中，大多數(shù)標(biāo)記都是成對(duì)出現(xiàn)的，表示開(kāi)始和結(jié)束。把HTML標(biāo)記如和標(biāo)記之間的內(nèi)容組合稱為元素。網(wǎng)頁(yè)中文字，圖像，鏈接等所有的內(nèi)容都是以元素的形式出現(xiàn)在html代碼里的。標(biāo)記相同而標(biāo)記中的內(nèi)容不同應(yīng)視為不同的元素，同一網(wǎng)頁(yè)中標(biāo)記和標(biāo)記中的內(nèi)容都相同的元素如果出現(xiàn)兩次也應(yīng)視為兩個(gè)不同的元素，因?yàn)槿我粋€(gè)元素在網(wǎng)頁(yè)中瀏覽器都會(huì)為它分配唯一的id，不存在兩個(gè)元素的id也完全相同的情況。,例1下面body內(nèi)元素的個(gè)數(shù)是多少,圖片的說(shuō)明內(nèi)容圖片的說(shuō)明內(nèi)容答案：5個(gè),通用標(biāo)記結(jié)構(gòu),內(nèi)容元素名即預(yù)定義的標(biāo)記（簽）屬性：用來(lái)指定標(biāo)記的行為確定元素內(nèi)容的顯示方式，如果標(biāo)記有屬性，則將跟在元素名后，屬性之間用一個(gè)或多個(gè)制表符、空格、回車符分開(kāi)，不區(qū)分出現(xiàn)的順序。：把標(biāo)記和標(biāo)記所描述的內(nèi)容區(qū)分開(kāi)，一般成對(duì)出現(xiàn)，結(jié)束標(biāo)記沒(méi)有屬性HTML的元素名、屬性不區(qū)分大小寫（xHTML區(qū)分且只能用小寫），但最好用小寫（有的操作系統(tǒng)大小敏感，如unix）HTML的源文件是純文本文件，可以用任何一種文本編輯器來(lái)編寫，但后綴應(yīng)用.htm或.html。,帶有屬性的HTML元素的結(jié)構(gòu),/,例2找出下面html代碼的錯(cuò)誤,下列HTML元素的寫法錯(cuò)在什么地方？Congratulations!linkedtextThisisanewparagraphThelistitem,HTML標(biāo)記的分類,頭部標(biāo)記：title,meta,link,style文本標(biāo)記：font,b,i,u,strong,段落標(biāo)記：p,hn,pre,marquee,br,hr列表標(biāo)記：ul,ol,li,dl,dt,dd5)超鏈接標(biāo)記：a,map,area6)圖像及媒體元素標(biāo)記：img,embed,object7)表格標(biāo)記：table,tr,td,th,tbody8)表單標(biāo)記：form,input,textarea,select,option,fieldset,legend,label9)框架標(biāo)記：frameset,frame,iframe10)容器標(biāo)記：div,span,HTML標(biāo)記的分類（2）,為便于記憶，可將標(biāo)記按出現(xiàn)的情況分為：?jiǎn)螛?biāo)記：，配對(duì)標(biāo)記：大部分標(biāo)記都是配對(duì)標(biāo)記成組標(biāo)記：table，form，ul,ol,dl,frameset，fieldset及其子標(biāo)記等，配對(duì)標(biāo)記中很多都是成組標(biāo)記,行內(nèi)元素和塊級(jí)元素,行內(nèi)元素(inline)是指元素與元素之間從左到右并排排列，只有當(dāng)瀏覽器窗口容納不下才會(huì)轉(zhuǎn)到下一行。塊級(jí)元素(block)是指每個(gè)元素占據(jù)瀏覽器一整行位置，塊級(jí)元素與塊級(jí)元素之間自動(dòng)換行，從上到下排列。塊級(jí)元素內(nèi)部可包含行內(nèi)元素或塊級(jí)元素，行內(nèi)元素內(nèi)部可包含行內(nèi)元素，但不得包含塊級(jí)元素，另外，塊級(jí)元素元素內(nèi)部也不能包含其他的塊級(jí)元素,行內(nèi)元素和塊級(jí)元素舉例,行內(nèi)元素：a，img，font，b，i，u，span，input塊級(jí)元素：p,div,hn,pre,hr,ul,ol,li,form快速記憶法即所有文本標(biāo)記、鏈接標(biāo)記和圖像標(biāo)記是行內(nèi)元素所有段落標(biāo)記、列表標(biāo)記是塊級(jí)元素,行內(nèi)元素和塊級(jí)元素示例,粗體文字圖片的標(biāo)題圖片的說(shuō)明內(nèi)容粗體文字粗體文字,2.3html存在的問(wèn)題和web標(biāo)準(zhǔn),HTML語(yǔ)言最開(kāi)始是用來(lái)描述文檔的結(jié)構(gòu)的，如標(biāo)題，段落等標(biāo)記，后來(lái)因?yàn)槿藗冞€想用它控制文檔的外觀，HTML又增加了一些控制字體，對(duì)齊等方面的標(biāo)記和屬性，這樣做的結(jié)果是HTML既可以用來(lái)描述文檔的結(jié)構(gòu)，又能表示文檔的外觀，但是兩方面都描述不好。于是人們提出了web標(biāo)準(zhǔn)，即結(jié)構(gòu)和表現(xiàn)分離，網(wǎng)頁(yè)由結(jié)構(gòu)，表現(xiàn)和行為組成，用HTML的新版本XHTML描述文檔的結(jié)構(gòu)，XHTML是一種為了適應(yīng)XML而重新改造的HTML。用CSS控制文檔的表現(xiàn)，因此XHTML和CSS就是內(nèi)容和形式的關(guān)系，由XHTML確定網(wǎng)頁(yè)的內(nèi)容，而通過(guò)CSS來(lái)決定頁(yè)面的表現(xiàn)形式。,Web標(biāo)準(zhǔn),網(wǎng)頁(yè)由什么構(gòu)成？1內(nèi)容：內(nèi)容就是頁(yè)面實(shí)際要傳達(dá)的真正信息，包含數(shù)據(jù)、文檔或者圖片等。注意這里強(qiáng)調(diào)的“真正”，是指純粹的數(shù)據(jù)信息本身。如：憶江南(1)唐.白居易江南好，風(fēng)景舊曾諳。(2)日出江花紅勝火，春來(lái)江水綠如藍(lán)，(3)能不憶江南。作者介紹772846，字樂(lè)天，太原人。唐德宗朝進(jìn)士2結(jié)構(gòu)：可以看到上面的文本信息本身已經(jīng)完整。但是混亂一團(tuán)，難以閱讀和理解，我們必須給它格式化一下。把它分成標(biāo)題、作者、章、節(jié)、段落和列表等。,Web標(biāo)準(zhǔn)結(jié)構(gòu),標(biāo)題憶江南(1)作者唐.白居易正文江南好，風(fēng)景舊曾諳。(2)日出江花紅勝火，春來(lái)江水綠如藍(lán)，(3)能不憶江南。節(jié)1作者介紹772846，字樂(lè)天，太原人。唐德宗朝進(jìn)士,Web標(biāo)準(zhǔn)表現(xiàn),表現(xiàn)（Presentation）：雖然定義了結(jié)構(gòu)，但是內(nèi)容還是原來(lái)的樣式?jīng)]有改變，例如標(biāo)題字體沒(méi)有變大，正文的顏色也沒(méi)有變化，沒(méi)有背景，沒(méi)有修飾。所有這些用來(lái)改變內(nèi)容外觀的東西，我們稱之為“表現(xiàn)”,行為,行為：就是對(duì)內(nèi)容的交互及操作效果。例如，使用JavaScript可以響應(yīng)鼠標(biāo)的點(diǎn)擊和移動(dòng)，可以判斷一些表單提交，使我們的操作能和網(wǎng)頁(yè)進(jìn)行交互。,回顧Web標(biāo)準(zhǔn),網(wǎng)頁(yè)是由四層信息構(gòu)成的一個(gè)共同體：,Web標(biāo)準(zhǔn)的實(shí)現(xiàn),結(jié)構(gòu)標(biāo)準(zhǔn)語(yǔ)言（1）XML（2）XHTML表現(xiàn)標(biāo)準(zhǔn)語(yǔ)言CSS（CascadingStyleSheets，層疊樣式表）行為標(biāo)準(zhǔn)語(yǔ)言DOM文檔對(duì)象模型ECMAScriptECMA制定的標(biāo)準(zhǔn)腳本語(yǔ)言,描述web標(biāo)準(zhǔn)的語(yǔ)言,在Web標(biāo)準(zhǔn)中，