網(wǎng)站設(shè)計項目化教程HTML+CSS+JavaS課件

項目一網(wǎng)站規(guī)劃設(shè)計1項目一網(wǎng)站規(guī)劃設(shè)計1設(shè)計內(nèi)容網(wǎng)站開發(fā)基礎(chǔ)網(wǎng)站總體規(guī)劃2設(shè)計內(nèi)容網(wǎng)站開發(fā)基礎(chǔ)2網(wǎng)站開發(fā)基礎(chǔ)3明確課程學(xué)習(xí)目標(biāo)。掌握與網(wǎng)站相關(guān)的基本概念。掌握靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁的區(qū)別。網(wǎng)站開發(fā)基礎(chǔ)3明確課程學(xué)習(xí)目標(biāo)。網(wǎng)頁設(shè)計制作相關(guān)術(shù)語術(shù)語各專業(yè)、行業(yè)的專門用語。在網(wǎng)頁設(shè)計制作中，經(jīng)常要使用的術(shù)語可以包含兩部分：網(wǎng)絡(luò)相關(guān)術(shù)語網(wǎng)站相關(guān)術(shù)語4網(wǎng)頁設(shè)計制作相關(guān)術(shù)語術(shù)語4網(wǎng)絡(luò)相關(guān)術(shù)語InternetInternet是覆蓋全球的信息基礎(chǔ)設(shè)施之一，其將全球范圍內(nèi)不同國家、不同區(qū)域的眾多資源連接起來，為用戶提供一個龐大的遠(yuǎn)程計算機網(wǎng)絡(luò)。WWW全稱WorldWideWeb，簡稱Web，中文稱萬維網(wǎng)，是基于超文本的信息查詢和信息發(fā)布的系統(tǒng)。5網(wǎng)絡(luò)相關(guān)術(shù)語Internet5網(wǎng)絡(luò)相關(guān)術(shù)語IP地址如同每個人有唯一的身份證號一樣，每臺與Internet相連的計算機在唯一的網(wǎng)絡(luò)地址稱為IP地址。如：12域名用由字母和數(shù)字組成的符號來代替將IP地址，以方便用戶記憶站點的字符型地址，稱為域名。如：WWW.6網(wǎng)絡(luò)相關(guān)術(shù)語IP地址6網(wǎng)站相關(guān)術(shù)語URLURL的中文全稱為統(tǒng)一資源定位符，是一種在WWW中瀏覽超文本文檔時保證準(zhǔn)確定位的機制?？芍赶虮镜赜嬎銠C上的某個文件，也可指向Interne的一個網(wǎng)頁或其他資源的位置。URL一般格式：訪問協(xié)議：//主機域名或IP地址[:端口號]/路徑/文件名如：、/14/1018/12/A8RE4UDO00014AED.html7網(wǎng)站相關(guān)術(shù)語URL7網(wǎng)站相關(guān)術(shù)語靜態(tài)網(wǎng)頁純粹的HTML文件，每個頁面都有一個固定的URL，以.htm、.html、.shtml、.xml等為后綴的文檔。其可分為:純靜態(tài)網(wǎng)頁包含HTML標(biāo)記、文本、聲音、圖像、動畫、電影以及客戶端ActiveX控件的網(wǎng)頁，但不包含任何腳本，其內(nèi)容由開發(fā)人員編輯好后不會自行改動的網(wǎng)頁?？蛻舳藙討B(tài)網(wǎng)頁包含了可在客戶端瀏覽器中執(zhí)行的腳本程序，并且可以改變網(wǎng)頁中各種標(biāo)記內(nèi)容的靜態(tài)網(wǎng)頁。8網(wǎng)站相關(guān)術(shù)語靜態(tài)網(wǎng)頁8網(wǎng)站相關(guān)術(shù)語動態(tài)網(wǎng)頁在服務(wù)器端運行的程序、網(wǎng)頁和組件等。9網(wǎng)站相關(guān)術(shù)語動態(tài)網(wǎng)頁9網(wǎng)站開發(fā)語言和軟件網(wǎng)頁制作語言HTMLXMLASPASP.NETPHPJSP網(wǎng)頁制作軟件DreamweaverFrontPageFlashPhotoshop10網(wǎng)站開發(fā)語言和軟件網(wǎng)頁制作語言10設(shè)計內(nèi)容網(wǎng)站開發(fā)基礎(chǔ)網(wǎng)站總體規(guī)劃11設(shè)計內(nèi)容網(wǎng)站開發(fā)基礎(chǔ)11網(wǎng)站總體規(guī)劃12熟悉網(wǎng)站建設(shè)與網(wǎng)頁制作的規(guī)劃構(gòu)建部署過程。完成網(wǎng)站的總體功能規(guī)劃。網(wǎng)站總體規(guī)劃12熟悉網(wǎng)站建設(shè)與網(wǎng)頁制作的規(guī)劃構(gòu)建部署過程。網(wǎng)站開發(fā)流程前期的定位網(wǎng)站目標(biāo)定位網(wǎng)站風(fēng)格定位網(wǎng)站創(chuàng)新與創(chuàng)意網(wǎng)站內(nèi)容與目錄結(jié)構(gòu)規(guī)劃中期設(shè)計與制作效果圖制作軟件設(shè)計制作網(wǎng)頁測試網(wǎng)站的調(diào)試與維護13網(wǎng)站開發(fā)流程前期的定位13網(wǎng)站功能規(guī)劃需求分析網(wǎng)站定位內(nèi)容規(guī)劃14網(wǎng)站功能規(guī)劃需求分析14企業(yè)網(wǎng)站設(shè)計說明15企業(yè)網(wǎng)站設(shè)計說明15思考：你用過哪幾種瀏覽器？說說WWW技術(shù)原理。16思考：你用過哪幾種瀏覽器？16解答：瀏覽器瀏覽器是指可以顯示網(wǎng)頁服務(wù)器或者文件系統(tǒng)的HTML文件內(nèi)容，并讓用戶與這些文件交互的一種軟件。常用的瀏覽器有：IEFirefoxOperaMaxthon（IE內(nèi)核）谷歌瀏覽器17解答：瀏覽器17解答WWW技術(shù)WWW結(jié)構(gòu)——“客戶機/服務(wù)器”結(jié)構(gòu)。網(wǎng)頁存放在被稱為Web服務(wù)器(WebServer)的計算機上，等待用戶訪問。18解答WWW技術(shù)18項目二網(wǎng)站搭建與管理19項目二網(wǎng)站搭建與管理19設(shè)計內(nèi)容站點搭建站點和站點文件管理20設(shè)計內(nèi)容站點搭建20站點搭建21熟悉DreamweaverCS6的工作環(huán)境和各窗口的作用。掌握DreamweaverCS6設(shè)置首選參數(shù)的方法。掌握DreamweaverCS6搭建站點的方法。站點搭建21熟悉DreamweaverCS6的工作環(huán)境和各Dreamweaver在網(wǎng)站設(shè)計中的作用站點的搭建網(wǎng)頁的設(shè)計網(wǎng)站的模版站點的發(fā)布維護實現(xiàn)網(wǎng)站的頁面設(shè)計和站點的管理22Dreamweaver在網(wǎng)站設(shè)計中的作用站點的搭建22DWCS6的工作界面23DWCS6的工作界面23DWCS6的工作界面24主要為標(biāo)題與菜單欄、文檔工具欄、文檔窗口、狀態(tài)欄、屬性面板等，右側(cè)是浮動面板組DWCS6的工作界面24主要為標(biāo)題與菜單欄、文檔工具欄、文DWCS6的工作界面25文檔工具欄DWCS6的工作界面25文檔工具欄DWCS6的工作界面26文檔工具欄DWCS6的工作界面26文檔工具欄DWCS6的首選參數(shù)設(shè)置27常規(guī)首選參數(shù)設(shè)置DWCS6的首選參數(shù)設(shè)置27常規(guī)首選參數(shù)設(shè)置DWCS6的首選參數(shù)設(shè)置28新建文檔設(shè)置DWCS6的首選參數(shù)設(shè)置28新建文檔設(shè)置DWCS6的首選參數(shù)設(shè)置29字體參數(shù)設(shè)置DWCS6的首選參數(shù)設(shè)置29字體參數(shù)設(shè)置DWCS6中的站點搭建30本地站點搭建DWCS6中的站點搭建30本地站點搭建DWCS6中的站點搭建31遠(yuǎn)程站點搭建DWCS6中的站點搭建31遠(yuǎn)程站點搭建設(shè)計內(nèi)容站點搭建站點和站點文件管理32設(shè)計內(nèi)容站點搭建32掌握網(wǎng)頁設(shè)計過程中站點的創(chuàng)建與管理方法33掌握網(wǎng)頁設(shè)計過程中站點的創(chuàng)建與管理方法33站點基本操作打開站點添加站點刪除站點修改站點34站點基本操作打開站點34站內(nèi)文件管理新建文件和文件夾文件/文件夾的基本操作文件新建文件打開與關(guān)閉文件的預(yù)覽35站內(nèi)文件管理新建文件和文件夾35項目三網(wǎng)站頁面設(shè)計36項目三網(wǎng)站頁面設(shè)計36設(shè)計內(nèi)容幫助熱線頁面設(shè)計站內(nèi)地圖頁面設(shè)計產(chǎn)品展示頁面設(shè)計注冊頁面設(shè)計在線自助頁面設(shè)計37設(shè)計內(nèi)容幫助熱線頁面設(shè)計37掌握網(wǎng)頁文字的處理中的字體標(biāo)記、水平線標(biāo)記、段落標(biāo)記、換行標(biāo)記、分隔標(biāo)記等標(biāo)記及其屬性設(shè)置。

38掌握網(wǎng)頁文字的處理中的字體標(biāo)記、水平線標(biāo)記、段落標(biāo)記、換行標(biāo)HTML是HyperTextMarkupLanguage的縮寫，是超文本標(biāo)記語言，其通過標(biāo)記符描述網(wǎng)頁中需顯示的文本、圖片、聲音、多媒體等，也通過標(biāo)記符形成頁面和實現(xiàn)頁面之間的鏈接。文件結(jié)構(gòu)：HTML39HTML是HyperTextMarkupLanguage三種基本格式：①<標(biāo)記名>文本</標(biāo)記名>②<標(biāo)記名屬性名1=”值1”屬性名2=”值2”…>文本</標(biāo)記名>（前兩種為雙標(biāo)記）③<標(biāo)記名>（單標(biāo)記）HTML文檔的基本格式40三種基本格式：HTML文檔的基本格式40標(biāo)題是一篇文章或一段文本的題目，是以某種方式被加強、被突出的詞組或短語。在網(wǎng)頁設(shè)計中，使用<Hn>標(biāo)記設(shè)定標(biāo)題，格式為：

<Hn>標(biāo)題</Hn>n取1～6的整數(shù)值，取1時文字最大，取6時最小，默認(rèn)為<H6>。標(biāo)題標(biāo)記41標(biāo)題是一篇文章或一段文本的題目，是以某種方式被加強、被突出的…….<h2align="center">桃花庵</h2><h3align="center">桃花塢里桃花庵，</h3><h4align="center">桃花庵下桃花仙。</h4><h5align="center">[唐寅]</h5>……n從1－6，越小字越大42…….n從1－6，越小字越大42用于設(shè)置文字的字體，包含設(shè)置字體大小、顏色、字體等。格式為：

<fontsize=數(shù)字color=顏色face=字體>文本</font>size屬性設(shè)置文本字體大小，取值范圍為1～7，size取7時字最大，而<hn>中n取1時最大。

color屬性設(shè)定文本的文字顏色。<fontcolor=”#ffffff”>十六進制形式設(shè)置文字顏色，白色</font><fontcolor=”red”>文字顏色為紅色</font>注意：設(shè)置網(wǎng)頁所有文字顏色：body標(biāo)記中text=”顏色”設(shè)置。<font>標(biāo)記43用于設(shè)置文字的字體，包含設(shè)置字體大小、顏色、字體等。格式為：<fontsize=“+2”color=“red”face=“隸書”> ...</font>44<fontsize=“+2”color=“red”f用于設(shè)置在前、后兩個段落之間插入一條水平標(biāo)尺線width用于設(shè)置標(biāo)尺線的長度如:<hrwidth=50>線長為50像素寬

<hrwidth=50%>線長為屏幕寬度的50%size屬性用于設(shè)置標(biāo)尺線的的粗細(xì)color屬性用于設(shè)置標(biāo)尺線的顏色align屬性用于設(shè)置標(biāo)尺線的位置如：<hralign=”right”>右對齊

<hralign=”left”>左對齊

<hralign=”center”>居中（默認(rèn)）<HR>標(biāo)記45用于設(shè)置在前、后兩個段落之間插入一條水平標(biāo)尺線<HR>標(biāo)記 ...<h2>桃花庵</h2><hrsize="2"width="300"align="left"color="pink"/>桃花塢里桃花庵，<br/>桃花庵下桃花仙。<p>[唐寅]</p> ...46 ...46<h1>判斷正誤</h1><p>118>62 17>52<br/>0011&1001=0011<br/>1101&1010=1111<br/></p><address>版權(quán)所有©2013年</address><address>本站即時更新®技術(shù)維護</address>……特殊符號47特殊符號47<bodybgcolor="lightblue"><center><h2><fontcolor="orange">桃花庵</font></h2><hrsize="2"width="300"color="pink"/><p><fontcolor="blue">桃花<big>塢</big>里桃花庵，<br/>桃_花庵下桃^花仙。<br/></font></p><hrsize="2"width="300"color="pink"/><p>[唐寅]</p></center></body>其他標(biāo)記48<bodybgcolor="lightblue">其他標(biāo)設(shè)計內(nèi)容幫助熱線頁面設(shè)計站內(nèi)地圖頁面設(shè)計產(chǎn)品展示頁面設(shè)計注冊頁面設(shè)計在線自助頁面設(shè)計49設(shè)計內(nèi)容幫助熱線頁面設(shè)計49掌握列表標(biāo)記和超級鏈接標(biāo)記及其屬性設(shè)置50掌握列表標(biāo)記和超級鏈接標(biāo)記及其屬性設(shè)置50用于表現(xiàn)一些結(jié)構(gòu)明確、層次分明的內(nèi)容，將其進行順序排序。列表項為列表中并列的數(shù)據(jù)。分為：無序列表和有序列表。51列表用于表現(xiàn)一些結(jié)構(gòu)明確、層次分明的內(nèi)容，將其進行順序排序。51用于創(chuàng)建一個無編號的列表。使用標(biāo)記<ul></ul>列表項標(biāo)記<li>格式為:

<ul><li>列表項

<li>列表項

…</ul>52無序列表用于創(chuàng)建一個無編號的列表。使用標(biāo)記<ul></ul>52無序<h3><i>所學(xué)知識</i></h3><ultype="circle"><li>文字</li><litype="disc">列表<ul><litype="square">有序</li><li>無序</li></ul></li></ul>53無序列表的嵌套<h3><i>所學(xué)知識</i></h3>53無序列表的嵌套用于創(chuàng)建一個標(biāo)有編號的列表。使用標(biāo)記<ol></ol>可以通過type設(shè)定序號種類，方法:

type=”1,A,a,i,I”可以通過start設(shè)定從任意數(shù)字開始序號，方法:

start=”n”

其中，n為任意整數(shù)。

54有序列表用于創(chuàng)建一個標(biāo)有編號的列表。使用標(biāo)記<ol></ol>54有<ol><li>課前預(yù)習(xí)</li><li>上課</li><li>課后復(fù)習(xí)<oltype="i"><li>理論重點</li><li>任務(wù)實施代碼</li></ol></li><li>作業(yè)<oltype="A"><li>網(wǎng)頁設(shè)計3單元習(xí)題</li><li>網(wǎng)站局部設(shè)計</li></ol></li></ol>55有序列表的嵌套<ol>55有序列表的嵌套用于超級鏈接。在網(wǎng)頁中通過鼠標(biāo)單擊某些文字或圖像找到目標(biāo)塊，即要打開和找到的詳細(xì)內(nèi)容或文件、網(wǎng)頁、郵箱，稱為超級鏈接。格式:

<ahref=“url”target=“目標(biāo)窗口”>文本或圖像</a>56<a>標(biāo)記用于超級鏈接。在網(wǎng)頁中通過鼠標(biāo)單擊某些文字或圖像找到目標(biāo)塊，

<h1>超鏈接練習(xí)</h1>

<p><ahref="#C5">查看第5章</a><ahref="#C10">查看第10章</a></p><h2>第1章</h2><p>Thischapterexplainsbablabla</p>……………………<h2><aname="C5">第5章</a></h2><p>Thischapterexplainsbablabla</p><h2>第6章</h2><p>Thischapterexplainsbablabla</p>……57頁內(nèi)鏈接任務(wù)3-2的實現(xiàn)方法<h1>超鏈接練習(xí)</h1>57頁內(nèi)鏈接任務(wù)3-2的實現(xiàn)方

<h1>超鏈接練習(xí)</h1><hrsize="1“color="#336699">  <ahref="例3-11.html"target=”_blank”>上一題</a>  <ahref="例3-13.html"target=”_self”>下一題</a>58<h1>超鏈接練習(xí)</h1>58設(shè)計內(nèi)容幫助熱線頁面設(shè)計站內(nèi)地圖頁面設(shè)計產(chǎn)品展示頁面設(shè)計注冊頁面設(shè)計在線自助頁面設(shè)計59設(shè)計內(nèi)容幫助熱線頁面設(shè)計59掌握圖像標(biāo)記和滾動標(biāo)記及其屬性設(shè)置60掌握圖像標(biāo)記和滾動標(biāo)記及其屬性設(shè)置60用于實現(xiàn)將一張圖片加入到網(wǎng)頁中。

格式：

<imgsrc=”圖像文件名”alt=”圖像文本性說明”align=”位置參數(shù)”>如：

<imgsrc=”a.gif”width=”20%”height=”20”><IMG>標(biāo)記61用于實現(xiàn)將一張圖片加入到網(wǎng)頁中。<IMG>標(biāo)記61….<BODY><h2align="center">圖文混排</h2><hrsize="1"color="#336699"><imgsrc="imgs/img1.jpg"width="135"height="75"align="middle"alt=”可愛的圖片”/></BODY>……62例題3-13中，圖文混排….62例題3-13中，圖文混排圖像和文字同樣可以鏈接，即單擊圖像則轉(zhuǎn)移到被鏈接的文本或其他文件。格式：

<ahref=“被鏈接的文件名”><imgsrc=“圖像文件名”></a>如：<ahref=“index.html”><imgsrc=“book.gif”></a>

單擊圖像book.gif轉(zhuǎn)移到網(wǎng)頁index.html。63圖像鏈接圖像和文字同樣可以鏈接，即單擊圖像則轉(zhuǎn)移到被鏈接的文本或其他定義圖像熱點眏射中的熱點區(qū)域，即針對一張圖片中某個不同形狀的區(qū)域，而完成的圖像熱點映射。其與<map>標(biāo)記一起使用。

格式：<areashape=”形狀”coordes=”坐標(biāo)”href=”URL”target=”顯示窗口”>文本</area>shape：用于設(shè)置鏈接的熱點區(qū)域形狀。其值有三種：rect（矩形區(qū)域）、poly（多邊形區(qū)域）和circle（圓形區(qū)域）。coordes：用于設(shè)置熱點區(qū)域的坐標(biāo)值，坐標(biāo)原點位于圖像的左上角。64<area>標(biāo)記定義圖像熱點眏射中的熱點區(qū)域，即針對一張圖片中某個不同形狀的定義客戶端的圖像熱點眏射。

格式：

<mapname=”名字”>文本</map>name：用于指定唯一的映射名稱。其與img標(biāo)記中的usemap的值相同時，圖片才能實現(xiàn)熱點鏈接。65<map></map>標(biāo)記定義客戶端的圖像熱點眏射。65<map></map>標(biāo)記用于控制文字或圖像移動的標(biāo)記。格式：<marqueedirection="方向“behavior="方式"loop="次數(shù)"scrollamount="快慢"scrolldelay="延時">滾動內(nèi)容</marquee>direction:控制移動方向,可取“l(fā)eft”,“right”,“up”,“down”四個值，behavior:移動方式,可取“scroll”(循環(huán)移動),“slide”(只走一圈),“alternate”(來回移動)。

66<MARQUEE>標(biāo)記用于控制文字或圖像移動的標(biāo)記。66<MARQUEE>標(biāo)記<h2>滾動練習(xí)</h2><hrsize=1color="pink"><marqueebehavior="alternate"direction="left"width="90%"height="120px"scrolldelay="500"hspace=”20px”loop=”3”bgcolor="#336699"><imgsrc="imgs/tu1.jpg"width="58"height="58">…………</marquee>67<h2>滾動練習(xí)</h2>67設(shè)計內(nèi)容幫助熱線頁面設(shè)計站內(nèi)地圖頁面設(shè)計產(chǎn)品展示頁面設(shè)計注冊頁面設(shè)計在線自助頁面設(shè)計68設(shè)計內(nèi)容幫助熱線頁面設(shè)計68掌握表單各元素的加入及其屬性設(shè)置69掌握表單各元素的加入及其屬性設(shè)置69定義表單的開始和結(jié)束位置。表單元素實現(xiàn)收集并發(fā)送用戶信息，提交到服務(wù)器上的應(yīng)用程序中處理。所有的表單元素都嵌套在<form>和</form>之間。

格式：<form>

表單元素</form>70<FORM>標(biāo)記定義表單的開始和結(jié)束位置。70<FORM>標(biāo)記表單元素中用得最多的一種元素。格式：<inputtype=“元素類型”>

type:值為

“text”代表文本框，“password”代表密碼框，“hidden”代表隱藏條目，

“checkbox”代表復(fù)選框，“radio”代表單選按鈕，“submit”代表提交按鈕，“reset”代表重置按鈕，“button”代表自定義按鈕，“image”代表圖像按鈕，“file”代表文件域。71<input>標(biāo)記71<input>標(biāo)記<h2>用戶登錄</h2><hrsize=1color="pink"><formmethod="get"name="myform">姓名：<inputtype="text"name="text1"size="20"maxlength="25"><p>密碼：<inputtype=“password”name=“psw1”size=“20”maxlength=“25”></p></form>72<h2>用戶登錄</h2>72<form><b>請選擇您學(xué)習(xí)的方式</b><br><inputtype="radio"checkedname="r"value="在讀">在讀<inputtype="radio"name="r"value="走讀">走讀<inputtype="radio"name="r"value="函授">函授<p><b>請選擇您所要學(xué)習(xí)的課程</b><br><inputtype="checkbox"value="yes"name="HTML"checked>HTML<br><inputtype="checkbox"value="yes"name="CSS">CSS<br><inputtype="checkbox"value="yes"name="JavaScript">JavaScript</p><p><b>您的選擇是</b></p><inputname="textfield"type="text"id="textfield"value=""maxlength="25"/></form>73<form>73用于定義一個下拉菜單或者選項列表。內(nèi)嵌option標(biāo)記，創(chuàng)建列表項。格式：

<selectname=”名稱”size=”選項數(shù)”multiple=”滾動方式”disabled=”不可控”><option>選項</option>……</select><form><h2>請選擇你喜歡的季節(jié)：</h2><selectname="myseason"onChange="myselect1()"><option>春<option>夏<option>秋<option>冬</select><br/><br/><h2>請選擇你喜歡的水果：</h2>74<select>標(biāo)記用于定義一個下拉菜單或者選項列表。內(nèi)嵌option標(biāo)記，創(chuàng)建<selectname="myfruit"multiple><optionvalue="蘋果">蘋果</option><optionvalue="香蕉">香蕉</option><optionvalue="西瓜">西瓜</option><optionvalue="桔子">桔子</option><optionvalue="桃子">桃子</option></select><br/><h2>你喜歡的是：</h2><textareaname="comment"rows=4cols=50></textarea><br><inputtype="button"name="ok"value="提交"onclick=”f()”><inputtype="reset"name="re-input"value="重選">75<selectname="myfruit"multip用于定義一個可以多行輸入文本的文本區(qū)。<form>建議:<textareaname="propose"cols="20"rows="5"wrap="virtual">在此填寫對網(wǎng)站的建議。</textarea></form>76<textarea>標(biāo)記用于定義一個可以多行輸入文本的文本區(qū)。<form>76<te用于定義一個標(biāo)簽或標(biāo)注。for：用于設(shè)置快捷鍵作用于表單字段元素，即將標(biāo)簽綁定到指定的ID表單控件上。<form><labelfor="red">red</label><inputtype="radio"name="likecolor"id="red"/><labelfor="yellow">yellow</label><inputtype="radio"name="likecolor"id="yellow"/><labelfor="blue">blue</label><inputtype="radio"name="likecolor"id="blue"/><labelfor="green">yellow</label><inputtype="radio"name="likecolor"id="green"/></form>77<LABLE>標(biāo)記用于定義一個標(biāo)簽或標(biāo)注。<form>77<LABLE>標(biāo)記設(shè)計內(nèi)容幫助熱線頁面設(shè)計站內(nèi)地圖頁面設(shè)計產(chǎn)品展示頁面設(shè)計注冊頁面設(shè)計在線自助頁面設(shè)計78設(shè)計內(nèi)容幫助熱線頁面設(shè)計78掌握FLASH元素引用79掌握FLASH元素引用79用于調(diào)用稱為插件的內(nèi)置程序來播放MP3、MID、WAV、AVI、WMV、MPEG、SWF等多種類型的音頻或視頻多媒體文件。HTML4.01并不支持此標(biāo)記，但大多數(shù)瀏覽器通常是調(diào)用插件的內(nèi)置程序播放多媒體文件。<embedwidth=“920"height=“320"src="swf/ad.swf"/>80<embed>標(biāo)記用于調(diào)用稱為插件的內(nèi)置程序來播放MP3、MID、WAV、AV用于定義一個嵌入頁面的多媒體或Apple對象。格式：<object首選嵌入對象標(biāo)記><param為嵌入對象提供參數(shù)/><object第一備用嵌入對象標(biāo)記></object><embed其他備用轉(zhuǎn)換標(biāo)記></embed></object>classid：用于指定瀏覽器引用播放器的URL，通常是Java類的ID。clsid=D27CDB6E-AE6D-11cf-96B8-444553540000，使用flash播放器播放多媒體文件。clsid=22D6F312-B0F6-11D0-94AB-0080C74C7E95，使用RealPlayer播放器播放多媒體文件。clsid=6BF52A2-394A-11D3-B153-00C04F79FAA6，使用MediaPlayer播放器播放多媒體文件。81<object>標(biāo)記用于定義一個嵌入頁面的多媒體或Apple對象。81<obje為嵌入對象提供參數(shù)的標(biāo)記。須在標(biāo)記內(nèi)使用才能提供一個參數(shù)。<embedsrc="imgs/1.avi"width="400"high="300"align="center"autostart="true”loop="true"></embed><objectclassid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"codebase="/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"width="76"height="93"><paramname="movie"value="imgs/top.swf"><paramname="quality"value="high"><embedsrc="imgs/top.swf"quality="high"pluginspage="/go/getflashplayer"type="application/x-shockwave-flash"width="76"height="93"></embed></object>82<param>標(biāo)記為嵌入對象提供參數(shù)的標(biāo)記。須在標(biāo)記內(nèi)使用才能提供一個參數(shù)。<項目四網(wǎng)站的測試與發(fā)布83項目四網(wǎng)站的測試與發(fā)布83設(shè)計內(nèi)容站點測試網(wǎng)站發(fā)布網(wǎng)站維護網(wǎng)站推廣84設(shè)計內(nèi)容站點測試84站點測試85明確測試內(nèi)容。掌握測試方法。站點測試85明確測試內(nèi)容。測試內(nèi)容和方法兼容性測試查出文檔中是否含有瀏覽器不支持的標(biāo)記或?qū)傩??！拔臋n工具欄”的“檢查頁面”中的下拉菜單“設(shè)置”選項，選擇檢測瀏覽器檢測。站點范圍內(nèi)的鏈接測試

為了避免URL地址可以對每個頁面進行檢查選擇菜單欄中的“文件”｜“檢查頁”｜“鏈接”菜單，“鏈接檢查器”面板中查看結(jié)果。網(wǎng)頁驗證測試驗證當(dāng)前文檔或選定的標(biāo)記、替代文本、無標(biāo)題文檔、代碼中存在標(biāo)記錯誤或語法錯誤。網(wǎng)頁的下載速度測試根據(jù)頁面中的所有鏈接對象來檢測下載速度。86測試內(nèi)容和方法兼容性測試86設(shè)計內(nèi)容站點測試網(wǎng)站發(fā)布網(wǎng)站維護網(wǎng)站推廣87設(shè)計內(nèi)容站點測試87網(wǎng)站發(fā)布88明確發(fā)布方法。掌握發(fā)布步驟。網(wǎng)站發(fā)布88明確發(fā)布方法。發(fā)布方法與步驟域名與空間申請免費域名空間收費域名空間通過提供域名和虛擬主機服務(wù)的公司三級審核、完成備案、登記到域名。遠(yuǎn)程站點信息設(shè)置做友情鏈接和營銷策劃的合作伙伴來推廣。文件上傳網(wǎng)站發(fā)布形式站點管理器上傳文件89發(fā)布方法與步驟域名與空間申請89設(shè)計內(nèi)容站點測試網(wǎng)站發(fā)布網(wǎng)站維護網(wǎng)站推廣90設(shè)計內(nèi)容站點測試90網(wǎng)站維護91掌握維護內(nèi)容與方法。網(wǎng)站維護91掌握維護內(nèi)容與方法。維護內(nèi)容和方法上傳和下載從遠(yuǎn)程服務(wù)器中下載文件，只需單擊“文件”面板中的“獲取文件”按鈕

操作完成。存回和取出在選擇FTP選項，選中“啟用存回和取出”復(fù)選框激活“存在和取出”功能。同步更新單擊“文件”面板上方的同步按鈕

，在“同步文件”對話框中的“同步”下拉列表中選擇希望同步的對象并選擇同步的方向。92維護內(nèi)容和方法上傳和下載92設(shè)計內(nèi)容站點測試網(wǎng)站發(fā)布網(wǎng)站維護網(wǎng)站推廣93設(shè)計內(nèi)容站點測試93網(wǎng)站推廣94熟悉推廣方式。網(wǎng)站推廣94熟悉推廣方式。推廣方法搜索引擎擬定好網(wǎng)站的關(guān)鍵字，成為大眾化關(guān)鍵字引擎。網(wǎng)站合作推廣做友情鏈接和營銷策劃的合作伙伴來推廣。BBS論壇推廣

尋找訪問量大的論壇和博客，發(fā)有質(zhì)量的帖子。網(wǎng)絡(luò)廣告推廣常用的廣告類型有按鍵廣告、彈出式廣告、旗幟廣告、浮動廣告等。95推廣方法搜索引擎95項目五網(wǎng)站的版式設(shè)計96項目五網(wǎng)站的版式設(shè)計96主要內(nèi)容首頁的基本結(jié)構(gòu)網(wǎng)站的配色方案97主要內(nèi)容首頁的基本結(jié)構(gòu)97網(wǎng)頁的布局網(wǎng)頁的組成元素98網(wǎng)頁的布局網(wǎng)頁的組成元素98國字型匡字型左右框架型上下框架型封面型首頁的布局99國字型首頁的布局99頁面設(shè)計原則導(dǎo)航欄設(shè)計網(wǎng)頁的布局網(wǎng)頁的布局100頁面設(shè)計原則網(wǎng)頁的布局100設(shè)計注意網(wǎng)站的風(fēng)格門戶類網(wǎng)站為上網(wǎng)用戶提供信息搜索、網(wǎng)站注冊、索引、網(wǎng)上導(dǎo)航、網(wǎng)上社區(qū)和個人郵件等信息，并進行分類、整合服務(wù)的站點。企業(yè)類網(wǎng)站提供商務(wù)資訊，展示企業(yè)形象。娛樂類網(wǎng)站此類網(wǎng)站主要是指吃、穿、住、行等時尚休閑生活類網(wǎng)站。101設(shè)計注意網(wǎng)站的風(fēng)格門戶類網(wǎng)站101休閑類網(wǎng)站吃、穿、住、行等時尚休閑生活類網(wǎng)站。文化類網(wǎng)站主要包括文化團體、出版發(fā)行、網(wǎng)上教育和院校介紹等網(wǎng)站。功能類網(wǎng)站主要包含搜索引擎，使用特有的程序把因特網(wǎng)上的所有信息歸類102休閑類網(wǎng)站102主要內(nèi)容首頁的基本結(jié)構(gòu)網(wǎng)站的配色方案103主要內(nèi)容首頁的基本結(jié)構(gòu)103色彩基礎(chǔ)色彩的HSB模式將顏色分為色相、飽和度、明度三個要素。色相

也稱色調(diào)，指顏色的種類和名稱、相貌。三原色三間色基本色飽和度：色彩的鮮艷度明度：色彩的亮度104色彩基礎(chǔ)色彩的HSB模式104不同的顏色具備不同的象征性，會給瀏覽者不同的心理感受。黃色具有愉快，希望，智慧和輕快的個性，它的明度最高。橙色具有輕快，歡欣，熱烈，溫馨，時尚的效果，是快樂、喜悅、能量的色彩。

紅色是一種激奮的色彩，能使人產(chǎn)生沖動，憤怒，熱情，活力的感覺。綠色介于冷暖兩中色彩的中間，是一種柔順、恬靜、滿足、優(yōu)美的顏色。

105色彩基礎(chǔ)不同的顏色具備不同的象征性，會給瀏覽者不同的心理感受。10藍色是最具涼爽，清新，專業(yè)的顏色，提供一個深遠(yuǎn)、廣埔、平靜的空間?；疑哂兄杏?，平凡，溫和，謙讓，中立和高雅的感覺。黑色具有深沉，神秘，寂靜，悲哀，壓抑的感受。白色具有潔白，明快，純真，清潔的感受。106藍色是最具涼爽，清新，專業(yè)的顏色，提供一個深遠(yuǎn)、廣埔、主色調(diào)頁面色彩的主要色調(diào)、總趨勢，其他配色不能超過該主要色調(diào)的視覺面積。輔色調(diào)僅次與主色調(diào)的視覺面積的輔助色，是烘托主色調(diào)、支持主色調(diào)、起到融合主色調(diào)效果的輔助色調(diào)。點睛色在小范圍內(nèi)點上強烈的顏色來突出主題效果，使頁面更加鮮明生動。背景色襯托環(huán)抱整體的色調(diào)，協(xié)調(diào)、支配整體的作用。107網(wǎng)頁色調(diào)主色調(diào)107網(wǎng)頁色調(diào)近似色對比色分離補色108常見的配色方案近似色108常見的配色方案用一種顏色調(diào)整透明度或者飽和度用兩種色彩選擇對比色用同一色系用一個感覺的色彩調(diào)和109色彩搭配技巧用一種顏色109色彩搭配技巧首頁效果圖設(shè)計110首頁效果圖設(shè)計110項目六服務(wù)中心欄目設(shè)計111項目六服務(wù)中心欄目設(shè)計111設(shè)計內(nèi)容用戶問卷調(diào)查頁面設(shè)計服務(wù)中心欄目頁面設(shè)計112設(shè)計內(nèi)容用戶問卷調(diào)查頁面設(shè)計112掌握表格、行、列的標(biāo)記與屬性的使用方法113掌握表格、行、列的標(biāo)記與屬性的使用方法113用于創(chuàng)建一個表格。格式：<table>文本</table>表格內(nèi)有行標(biāo)記，用于定義表格的一行。格式：<tr>…</tr>行標(biāo)記中有列標(biāo)記，用于定義表格某行中的一個單元格。格式：<td>單元格內(nèi)容</td>114<TABLE>標(biāo)記用于創(chuàng)建一個表格。114<TABLE>標(biāo)記<tableborder="1"><tr><td>

單元格內(nèi)容

</td> ……</tr>……</table>基本語法115<tableborder="1">基本語法115列標(biāo)題標(biāo)記。用于表的第一行或第一列加表頭，字為醒目的粗體且居中。格式：<th></th>116<TH>標(biāo)記列標(biāo)題標(biāo)記。116<TH>標(biāo)記表題標(biāo)記。用于表格的內(nèi)容聲明。格式：<captionalign=”位置”>表題</caption>117<CAPTION>標(biāo)記表題標(biāo)記。117<CAPTION>標(biāo)記<tablewidth="470px"border="1"height="100px"align="center"><captionalign="top"><fontcolor="#336699">我最喜歡的相片</font></caption><tr><tdwidth="235px"><formid="form1"name="form1"><inputtype="file"name="fileField"id="fileField"/></form></td><tdwidth="235px"align="center"><imgsrc="imgs/1.jpg"width="100px"height="76px"/></td></tr></table>118例題6-1中，創(chuàng)建一個有圖像和瀏覽提示的表如何使用表格屬性<tablewidth="470px"border="1<tablewidth="270"border="1"align="center"bordercolor="#6699cc"frame="above"rules="cols"><captionalign="top">成績單</caption><tr><tdheight="30">語文</td><tdheight="30">數(shù)學(xué)</td><tdheight="30">英文</td></tr><tr><tdheight="30">80</td><tdheight="30">88</td><tdheight="30">85</td></tr></table>119例題6-3中，創(chuàng)建一個邊框異形的表如何使用表格屬性<tablewidth="270"border="1"<tr><thheight=“28”colspan=“2”> </th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th></tr><tr><throwspan="2">上午</th><thheight=“27”>第一二節(jié)</th><td>數(shù)學(xué)</td><td>英語</td><td>數(shù)學(xué)</td><td>英語</td><td>哲學(xué)</td></tr><tr><thheight="28">第三四節(jié)</th><td>英語</td><td>計算機</td><td>計算機</td><td> </td><td>計算機</td></tr>120如何使用表格屬性例題6-5中，創(chuàng)建一個行列有合并的表<tr>120如何使用表格屬性例題6-5中，創(chuàng)建一個行列有合表格的嵌套處理如果要做復(fù)雜一點的表格或是用表格來進行布局頁面，需要用上表格的嵌套。嵌套的基本原則：嵌套的子表格一定是放在<td></td>這對標(biāo)記里。121表格的嵌套處理如果要做復(fù)雜一點的表格或是用表格來進行布局頁面<tableborder=”1”width=”500px”><option>嵌套的表格</option><tr><tdwidth=”100px”>表項1</td><tdwidth=”200px”><tableborder=”1”width=”100%”><tr><td>子表項1</td><td>子表項2</td></tr><tr><td>子表項3</td><td>子表項4</td></tr></table></td>…<td>表項n</td></tr></table>122<tableborder=”1”width=”500p設(shè)計內(nèi)容用戶問卷調(diào)查頁面設(shè)計服務(wù)中心欄目頁面設(shè)計123設(shè)計內(nèi)容用戶問卷調(diào)查頁面設(shè)計123掌握分析和處理網(wǎng)頁布局的方法與表格的嵌套124掌握分析和處理網(wǎng)頁布局的方法與表格的嵌套124在網(wǎng)頁中，為了讓網(wǎng)頁更加生動、美觀，需做了很多的分區(qū)處理外觀。從結(jié)構(gòu)的角度來考慮一個Web頁面，可看成為一個大表格，將整個頁面劃分為若干個區(qū)，成為表中的每個單元格或多個單元格；然后再在各個區(qū)域中填充具體的頁面內(nèi)容，當(dāng)內(nèi)容較負(fù)責(zé)時可嵌套表，這樣就可以來完成一個頁面的規(guī)劃和實現(xiàn)了。125頁面布局方法在網(wǎng)頁中，為了讓網(wǎng)頁更加生動、美觀，需做了很多的分區(qū)處理外觀網(wǎng)頁布局的實現(xiàn)126網(wǎng)頁布局的實現(xiàn)126實現(xiàn)方法一127實現(xiàn)方法一127實現(xiàn)方法二128實現(xiàn)方法二128模板是一種特殊類型的文檔，用于設(shè)計鎖定的頁面布局，形成統(tǒng)一結(jié)構(gòu)與外觀的網(wǎng)站。模板可以批量制作網(wǎng)頁。129模版模板是一種特殊類型的文檔，用于設(shè)計鎖定的頁面布局，形成統(tǒng)一結(jié)模板的基本處理新建編輯保存應(yīng)用管理模板的編輯處理可編輯區(qū)可選區(qū)可重復(fù)區(qū)130模版的基本操作模板的基本處理130模版的基本操作項目七新聞中心欄目設(shè)計131項目七新聞中心欄目設(shè)計131設(shè)計內(nèi)容新聞中心欄目布局設(shè)計新聞中心導(dǎo)航132設(shè)計內(nèi)容新聞中心欄目布局設(shè)計132掌握用框架布局頁面的方法，理解框架與框架集133掌握用框架布局頁面的方法，理解框架與框架集133在一個文檔內(nèi)定義一組框架結(jié)構(gòu)的HTML網(wǎng)頁，實現(xiàn)在一個瀏覽器窗口顯示多個HTML頁面，在一個框架中可顯示多個HTML頁面。框架技術(shù)是框架的組合，即框架集。框架布局網(wǎng)頁的基本原理134在一個文檔內(nèi)定義一組框架結(jié)構(gòu)的HTML網(wǎng)頁，實現(xiàn)在一個瀏覽器<html>

<head></head>

<frameset

cols=“水平分割參數(shù)”|rows=“垂直分割參數(shù)”>

<framesrc=“url地址1”name=“子窗口名稱”/>

<framesrc=“url地址2”name=“子窗口名稱”/>

</frameset>

</html>語法135<html>

<head></head>

<frrows屬性垂直方向分割瀏覽器窗口，分隔的框架數(shù)目以逗號的個數(shù)加1來確定。參數(shù)可以是數(shù)字(單位為像素)，或百分比或剩余值(*)，各值間用逗號分開。如：<framesetcols=“50,80,60”>分成上中下三個窗口，分別為50像素，80像素,60像素

<framesetcols=“20%,*，20%”>分成三個窗口，左窗20%，右窗20%，剩余的中間窗<framesetcols=“*,2*,3*”>分成三個窗口，左窗1/6，右窗2/6，剩余的3/6cols屬性

水平方向分割瀏覽器窗口<FRAMESET>的屬性136rows屬性<FRAMESET>的屬性136<framesetcols="300px,*"><framesrc="left.html"/><framesrc="right.html"/></frameset>137如何水平拆分網(wǎng)頁<framesetcols="300px,*">137如左右分割窗口上下分割窗口嵌套分割窗口（既有左右分割又有上下分割）框架集的分割138左右分割窗口框架集的分割138<framesetrows="20%,*"><framesrc="top.html"/><framesetcols="30%,*"><framesrc="downleft.html"/><framesrc="downright.html"/></frameset> </frameset>如何實現(xiàn)窗口嵌套139<framesetrows="20%,*">如何實現(xiàn)窗口嵌要在一個框架中使用鏈接以打開網(wǎng)頁顯示在另一個框架中，必須設(shè)置鏈接目標(biāo)，設(shè)為目標(biāo)框架的名稱即name屬性的值。設(shè)置target屬性可以使鏈接頁面在指定打開的框架中顯示。帶鏈接的框架設(shè)置140要在一個框架中使用鏈接以打開網(wǎng)頁顯示在另一個框架中，必須設(shè)置

<framesetrows="57,*"framespacing="0"frameborder="no"border="0"bordercolor="#FF9966"><framesrc="a.html"name="topFrame"id="topFrame"title="topFrame"></frame><framesrc="1.html"name="mainFrame"id="mainFrame"title="mainFrame"></frame>如何使用NAME屬性141a.html的鏈接target為mainFrame例題7-1中，上框架中的文字鏈接選中顯示的頁面顯示在下框架中<framesetrows="57,*"frames設(shè)計內(nèi)容新聞中心欄目布局設(shè)計新聞中心導(dǎo)航142設(shè)計內(nèi)容新聞中心欄目布局設(shè)計142掌握浮動框架的使用方法143掌握浮動框架的使用方法143浮動框架標(biāo)記。在瀏覽器窗口中嵌入一個窗口以顯示另一個頁面。格式：

<iframesrc=”URL”width=”數(shù)值”height=”數(shù)值”frameborder=”數(shù)值”scrolling=”auto/no”>144<IFRAME>標(biāo)記浮動框架標(biāo)記。144<IFRAME>標(biāo)記<iframesrc="1.html"name="aa"width="500"height="300"></iframe><p><ahref="1.html"target="aa">產(chǎn)品1</a>    <ahref="2.html"target="aa">產(chǎn)品2</a>    <ahref="3.html"target="aa">產(chǎn)品3</a>    <ahref="4.html"target="aa">產(chǎn)品4</a>    <ahref="5.html"target="aa">產(chǎn)品5</a></p>145例題7-1中，通過文字鏈接在指定位置顯示對應(yīng)網(wǎng)頁內(nèi)容如何使用浮動框架<iframesrc="1.html"name="aa"項目八企業(yè)關(guān)注欄目設(shè)計146項目八企業(yè)關(guān)注欄目設(shè)計146設(shè)計內(nèi)容企業(yè)介紹頁面樣式引用企業(yè)榮譽頁面設(shè)計147設(shè)計內(nèi)容企業(yè)介紹頁面樣式引用147掌握各樣式的引用148掌握各樣式的引用148網(wǎng)頁主要由三部分組成：結(jié)構(gòu)（Structure）、表現(xiàn)（Presentation）和行為（Behavior）。結(jié)構(gòu)化標(biāo)準(zhǔn)（主要包括HTML和XML，用于在網(wǎng)頁中加入各類元素）、表現(xiàn)標(biāo)準(zhǔn)（主要包括CSS，用于效果優(yōu)化和布局網(wǎng)頁元素）、行為標(biāo)準(zhǔn)（主要包括對象模型、ECMAScript等，用于實時對用戶操作進行響應(yīng)和完成網(wǎng)頁特效）。WEB標(biāo)準(zhǔn)149網(wǎng)頁主要由三部分組成：結(jié)構(gòu)（Structure）、表現(xiàn)（Pr網(wǎng)頁CascadingStyleSheets的縮寫，中文譯為“層疊樣式表”。特點：簡化網(wǎng)頁的格式代碼。調(diào)整CSS樣式表文件就可以改變整個站點的風(fēng)格特色CSS150網(wǎng)頁CascadingStyleSheets的縮寫，中文基本語法結(jié)構(gòu)151CSS樣式定義由兩部分組成：選擇器和聲明。格式：選擇符（selector）{屬性（property）:屬性值（value）}選擇器是樣式的名稱（如TR或P），而聲明則用于定義樣式元素。聲明由兩部分組成：屬性和值?；菊Z法結(jié)構(gòu)151CSS樣式定義由兩部分組成：選擇器和聲明。全體選擇符

全體選擇符用一個“*”來表示，表示所選定范圍內(nèi)的所有元素。格式：

*{屬性:屬性值;}如：*{font-size:12px}HTML標(biāo)簽選擇器

針對HTML標(biāo)記的樣式設(shè)置。格式：標(biāo)簽名{屬性:屬性值;}如：p{color:red;}CSS選擇符152全體選擇符CSS選擇符152類選擇符需要有相同樣式規(guī)則的不同元素進行類樣式設(shè)定，在使用時需要用class=”類名”來進行引用。格式：.類名{屬性:屬性值;}id選擇器用來對單一元素進行單獨的樣式定義，在使用時需要用id=”id名”來進行引用。格式：#id名{屬性:屬性值;}CSS選擇符153類選擇符CSS選擇符153偽類選擇符對相同一個HTML元素的各種狀態(tài)和其包含的部分內(nèi)容進行定義的一種方法。格式：HTML元素：偽元素｛屬性:值｝錨的偽類四類：a:link（未訪問的狀態(tài)）、a:visited（已訪問的狀態(tài)）、a:hover（鼠標(biāo)停留的狀態(tài)）、a:active（成為焦點的狀態(tài)）。CSS選擇符154偽類選擇符CSS選擇符154選擇符組將相同屬性和值的幾個選擇符組合起來，用“，”符號分隔。如：ph1{color:#ff0000;}包含選擇符對某對象中的子對象進行樣式指定。其間用空格隔開。如：ulli{font-weight:bolder;}CSS選擇符155選擇符組CSS選擇符155CSS的應(yīng)用外部樣式表將樣式表保存到一個樣式表文件，在網(wǎng)頁中用<link>標(biāo)記鏈接的方式，樣式表擴展名為.css。格式： <head> <linkhref=”*.css“rel=“stylesheet"type="text/css"/> </head>156CSS的應(yīng)用外部樣式表156CSS的應(yīng)用內(nèi)部樣式表在對單個網(wǎng)頁文檔進行樣式處理時，頭部使用<style>標(biāo)記對。格式： <head> <styletype="text/css"> hr{color:#abefc6;} </style> </head>157CSS的應(yīng)用內(nèi)部樣式表157CSS的應(yīng)用內(nèi)聯(lián)樣式僅需要在一個因素上應(yīng)用一次時可使用內(nèi)聯(lián)樣式。格式：<標(biāo)記名style=“屬性：屬性值”>

4、輸入樣式表指將一個外部樣式表文件（CSS文件）輸入到另外一個CSS文件，用@import導(dǎo)入。格式：<styletype="text/css"><!--@import“CSS文件名”

……--></style>158CSS的應(yīng)用內(nèi)聯(lián)樣式158設(shè)計內(nèi)容企業(yè)介紹頁面樣式引用企業(yè)榮譽頁面設(shè)計159設(shè)計內(nèi)容企業(yè)介紹頁面樣式引用159掌握各樣式的設(shè)置160掌握各樣式的設(shè)置160字體屬性（見表8-1）文本屬性（見表8-2）背景屬性（見表8-3）邊框?qū)傩裕ㄒ姳?-4）邊距屬性（見表8-6）布局屬性（見表8-7）列表屬性（見表8-9）161常用的CSS屬性字體屬性（見表8-1）161常用的CSS屬性<styletype="text/css">h1{height:100px;width:500px;background-image:url(imgs/1.jpg);}p{font-size:22px;background-color:#9ef362;}162例題8-2中，設(shè)置背景和文字等屬性如何使用CSS屬性<h1>設(shè)置標(biāo)記區(qū)域和背景</h1><p>設(shè)置標(biāo)記區(qū)域和背景</p><styletype="text/css">162例題8-樣式表的繼承原則樣式表的就近原則樣式表的優(yōu)先原則從高到低：行內(nèi)樣式、內(nèi)部樣式、鏈入外部樣式、導(dǎo)入外部樣式和默認(rèn)瀏覽器樣式163樣式規(guī)則樣式表的繼承原則163樣式規(guī)則項目九產(chǎn)品中心欄目設(shè)計164項目九產(chǎn)品中心欄目設(shè)計164設(shè)計內(nèi)容產(chǎn)品選項卡銷售產(chǎn)品頁面布局165設(shè)計內(nèi)容產(chǎn)品選項卡165掌握盒子模型的定位屬性166掌握盒子模型的定位屬性166網(wǎng)頁中的所有元素對象都被放在一個盒子中。所有元素都可以擁有像盒子一樣的外形和平面空間，包含有邊界、邊框、填充、內(nèi)容區(qū)域等。盒子模型是CSS布局的基礎(chǔ)，其規(guī)定了網(wǎng)頁元素如何顯示以及元素間的相互關(guān)系。盒子模型167網(wǎng)頁中的所有元素對象都被放在一個盒子中。所有元素都可以擁有像盒子在網(wǎng)頁中所占空間的如何計算？一個網(wǎng)頁元素實際寬度為：margin-left+border+padding-left+width+padding-right+border-right+margin-right盒子模型的計算168盒子在網(wǎng)頁中所占空間的如何計算？盒子模型的計算168盒子的基本定位169網(wǎng)頁中的元素分為：行內(nèi)元素

如：span、a、label塊級元素（獨立成行）

如：div、li、hn盒子的基本定位169網(wǎng)頁中的元素分為：盒子的浮動170通過對float屬性的設(shè)置，可對塊級元素進行浮動，使元素脫離標(biāo)準(zhǔn)位置，且其后序元素會自動向前流動。設(shè)置方法：float:left|right第一塊DIV浮動前后的區(qū)別見右圖若前面的盒子已浮動，而本盒子需要單獨成行則使用clear屬性清除浮動屬性。盒子的浮動170通過對float屬性的設(shè)置，可對塊級元素進行盒子定位的方法有四種。定位屬性POSITION格式：position:static|absolute|fixed|relativestatic：默認(rèn)屬性值，指盒子按照標(biāo)準(zhǔn)流（包括浮動方式）進行布局。relative：相對定位，盒子相對于其在標(biāo)準(zhǔn)流中的位置偏移，absolute：絕對定位。盒子位置以其最近的父容器為基準(zhǔn)進行偏移。fixed：固定定位，盒子其以瀏覽器窗口為基準(zhǔn)進行定位。盒子的定位設(shè)置171盒子定位的方法有四種。盒子的定位設(shè)置171設(shè)計內(nèi)容產(chǎn)品選項卡銷售產(chǎn)品頁面布局172設(shè)計內(nèi)容產(chǎn)品選項卡172掌握DIV布局方法173掌握DIV布局方法173掌握DIV布局方法174掌握DIV布局方法174DIV+CSS布局網(wǎng)頁網(wǎng)站中常用的網(wǎng)頁布局采用DIV+CSS，先用DIV將頁面內(nèi)容從整體上進行結(jié)構(gòu)劃分，再用CSS將各結(jié)構(gòu)分塊在網(wǎng)頁中進行定位和進行樣式設(shè)置。一行多列布局一行一列布局、一行兩列布局、一行三列布局設(shè)置方法

布局可以分成固定寬度和自適應(yīng)寬度兩種模式固定寬度是指塊寬度的屬性值是固定像素自適應(yīng)是指寬度隨瀏覽器的變化而發(fā)生變化175DIV+CSS布局網(wǎng)頁網(wǎng)站中常用的網(wǎng)頁布局采用DIV+CSS一列布局在HTML文檔的<head>標(biāo)記對之間的相應(yīng)位置，輸入CSS樣式代碼固定布局，同時在HTML文檔中加入對應(yīng)CSS中的同選擇符名的DIV。固定寬度#div1{background-color:#CCCCCC;border:3pxsolid#ff3399;width:300px;height:200px;}<divid="div1">1列固定寬度，要設(shè)置像素值。</div>176一列布局在HTML文檔的<head>標(biāo)記對之間的相應(yīng)位置，輸一列布局一列自適應(yīng)寬度#div1{background-color:#CCCCCC;border:3pxsolid#ff3399;width:60%;height:70%;}177一列布局一列自適應(yīng)寬度#div1{177178兩列布局178兩列布局179兩列布局179兩列布局兩列布局180兩列布局180三列布局181三列布局181182三列布局182三列布局三行三列布局183三行三列布局183184三行三列布局184三行三列布局項目十廣告服務(wù)實現(xiàn)185項目十廣告服務(wù)實現(xiàn)185設(shè)計內(nèi)容彈出式廣告服務(wù)廣告詳情186設(shè)計內(nèi)容彈出式廣告服務(wù)186掌握javascript概述及基本語法和window對象制作首頁打開后的彈出式廣告功能187掌握javascript概述及基本語法和window對象制作什么是JavaScript

JavaScript是網(wǎng)景(Netscape)公司開發(fā)的一種基于客戶端瀏覽器、面向?qū)ο蟆⑹录?qū)動式的網(wǎng)頁腳本語言，編寫嵌入在網(wǎng)頁文檔中的程序。JavaScript能實現(xiàn)網(wǎng)頁中的對象對一張圖片、一個DIV等的即時刷新，動態(tài)操作DOM。188什么是JavaScriptJavaScript是網(wǎng)景(Ne什么是JavaScriptJavaScript實現(xiàn)由用戶端對網(wǎng)頁的操作，以多種方式更改頁面或引發(fā)某些任務(wù)的是事件處理機制，稱為事件驅(qū)動。事件驅(qū)動實現(xiàn)與Web客戶實現(xiàn)交互，完成某些特殊功能。189什么是JavaScriptJavaScript實現(xiàn)由用戶端對JavaScript的基本語法<html><head><title>腳本的基本結(jié)構(gòu)</title><scriptlanguage="javascript"> varx=8; alert("<h2>x</h2>");</script></head><body>body部分的內(nèi)容</body></html>190JavaScript的基本語法<html>190

JavaScript保留字

在JavaScript中定義了40多個關(guān)鍵字，不能作為變量名、函數(shù)名、方法名和對象名。常用保留字如表所示。內(nèi)部的函數(shù)名和對象名也是保留字。變量的定義191

JavaScript保留字變量的定義191JavaScript的使用直接嵌入在HTML的<script></script>標(biāo)記中。<scriptlanguage=”javascript”>varx=8;alert(x);</script>獨立編寫JavaScript文件。如：<html><scriptsrc=”xa.js”language=”javascript”></script></html>作為屬性值。如：<inputtype=”button”value=”firsttext”onclick=”alert()”>

192JavaScript的使用直接嵌入在HTML的<script變量的聲明和賦值定義變量varcount;//var用于聲明變量的關(guān)鍵字賦值count=5;同時聲明和賦值變量varcount=10;193變量的聲明和賦值定義變量賦值同時聲明和賦值變量193運算符運算符對一個或多個變量或值（操作數(shù)）進行運算，并返回一個新值根據(jù)所執(zhí)行的運算，運算符可分為以下類別：算術(shù)運算符

+、-、*、/、%、++、--、-(求反)比較運算符

==、!=、>、>=、<、<=邏輯運算符

&&、||、！194運算符運算符對一個或多個變量或值（操作數(shù)）進行運算，并返回一程序結(jié)構(gòu)if條件語句switch多分支語句for、while循環(huán)語句if(條件){//JavaScript代碼;}else{//JavaScript代碼;}switch(表達式){case常量1: JavaScript語句1; break; case常量2: JavaScript語句2; break; ... default:JavaScript語句3;}for(初始化;條件;增量){

語句集;

}while(條件){

語句集;}195程序結(jié)構(gòu)if條件語句if(條件)switch(表達式)fo函數(shù)

將一個大的程序分解成小程序塊獨立起來，這些獨立后的小程序塊完成各自的特定功能，即是函數(shù)。196函數(shù)將一個大的程序分解成小程序塊獨立起來，這些獨立后的小程格式：

function函數(shù)名（形式參數(shù)表）｛語句塊；｝說明：function為關(guān)鍵字，表示定義一個函數(shù)，其后跟著的是定義的函數(shù)的函數(shù)名，也是調(diào)用時的名字，其后跟著的小括號中形參列表需要以“,”隔開。函數(shù)定義直接給出函數(shù)名，并加上參數(shù)即可。如：

number=square(10);函數(shù)調(diào)用197格式：函數(shù)定義直接給出函數(shù)名，并加上參數(shù)即可。如：函數(shù)調(diào)基本的用戶提示向用戶發(fā)出警告確認(rèn)用戶的選擇提示用戶輸入Alert(“提示”);

confirm(“提示”);prompt(“提示輸入”);198基本的用戶提示向用戶發(fā)出警告Alert(“提示”)例題10-4中，實現(xiàn)問卷調(diào)查199如何使用無參函數(shù)<body><script>question();</script></body><head><script>functionquestion(){varm=prompt("能參與問卷調(diào)查嗎？您是老顧客嗎？請選填1/0",0);if(m==1)alert("歡迎您的再次