《網(wǎng)頁(yè)設(shè)計(jì)與制作教程》課件（共十二章）_第1頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)與制作教程》課件（共十二章）_第2頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)與制作教程》課件（共十二章）_第3頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)與制作教程》課件（共十二章）_第4頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)與制作教程》課件（共十二章）_第5頁(yè)
已閱讀5頁(yè)，還剩211頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

網(wǎng)頁(yè)設(shè)計(jì)與制作教程（HTML+CSS+JavaScript）機(jī)械工業(yè)出版社同名教材配套電子教案1.1HTML簡(jiǎn)介1.2HTML編寫(xiě)規(guī)范1.3網(wǎng)頁(yè)文件的創(chuàng)建過(guò)程1.4搭建支持HTML5的瀏覽器環(huán)境1.5文字與段落排版1.6超鏈接1.7圖像1.8表格1.9列表第1章HTML基礎(chǔ)

HTML是HyperTextMarkupLanguage（超文本置標(biāo)語(yǔ)言）的縮寫(xiě)，是一種為普通文件中某些字句加上標(biāo)簽的語(yǔ)言，其目的在于運(yùn)用標(biāo)簽（tag）對(duì)文件達(dá)到預(yù)期的效果。1.1.1HTML發(fā)展歷史1.1HTML簡(jiǎn)介1.1.2HTML5的特性及元素(1)實(shí)現(xiàn)Web應(yīng)用程序

HTML5用于實(shí)現(xiàn)Web應(yīng)用程序的功能如下：繪畫(huà)的Canvas元素，該元素就像在瀏覽器中嵌入一塊畫(huà)布，程序可以在畫(huà)布上繪畫(huà)。更好的用戶交互操作，包括拖放、內(nèi)容可編輯等。擴(kuò)展的HTMLDOMAPI（ApplicationProgrammingInterface，應(yīng)用程序編程接口）。(2)更好地呈現(xiàn)內(nèi)容基于Web表現(xiàn)的需要，HTML5引入了更好地呈現(xiàn)內(nèi)容的元素用于視頻、音頻播放的video元素和audio元素。用于文檔結(jié)構(gòu)的article、footer、header、nav、section等元素。1.1HTML簡(jiǎn)介1.2.1HTML文檔結(jié)構(gòu)1．標(biāo)簽

HTML文檔由標(biāo)簽和被標(biāo)簽的內(nèi)容組成。標(biāo)簽?zāi)墚a(chǎn)生所需要的各種效果。其功能類(lèi)似于一個(gè)排版軟件，將網(wǎng)頁(yè)的內(nèi)容排成理想的效果。其格式為：<標(biāo)簽>受標(biāo)簽影響的內(nèi)容</標(biāo)簽>2．標(biāo)簽的屬性每個(gè)標(biāo)簽都有一系列的屬性。標(biāo)簽通過(guò)屬性來(lái)制作出各種效果，格式為：<標(biāo)簽屬性1="屬性值1"屬性2="屬性值2"…>受標(biāo)簽影響的內(nèi)容</標(biāo)簽>1.2HTML編寫(xiě)規(guī)范1.2.2HTML代碼規(guī)范1．標(biāo)簽和屬性的規(guī)范2．元素的嵌套3．不推薦使用的標(biāo)簽在HTML中，某些標(biāo)簽不推薦使用，例如，<b>、<strong>、<i>、<em>、<dfn>、<code>、<samp>、<kbd>、<var>、<cite>等標(biāo)簽。4．代碼的縮進(jìn)在編寫(xiě)HTML代碼時(shí)要注意使用代碼縮進(jìn)來(lái)提高程序的結(jié)構(gòu)性和層次性。1.2HTML編寫(xiě)規(guī)范1.2.3使用HTML語(yǔ)法編寫(xiě)HTML5文檔<!doctypehtml><html><head><metacharset="gb2312"><title>文檔標(biāo)題</title></head><body>網(wǎng)頁(yè)內(nèi)容</body></html>1.2HTML編寫(xiě)規(guī)范①打開(kāi)記事本。單擊Windows的“開(kāi)始”按鈕，在“程序”菜單的“附件”子菜單中單擊“記事本”命令。②創(chuàng)建新文件，并按HTML語(yǔ)言規(guī)則編輯。在“記事本”窗口中輸入HTML代碼，具體的內(nèi)容如圖1-2所示。③保存網(wǎng)頁(yè)。打開(kāi)“記事本”的“文件”菜單，選擇“保存”命令。此時(shí)將出現(xiàn)“另存為”對(duì)話框，在“保存在”下拉列表框中選擇文件要存放的路徑，在“文件名”文本框輸入以.html或.htm為后綴的文件名，如welcome.html，在“保存類(lèi)型”下拉列表框中選擇“文本文檔（*.txt）”項(xiàng)，最后單擊“保存”按鈕，將記事本中的內(nèi)容保存在磁盤(pán)中。④在“我的電腦”相應(yīng)的存盤(pán)文件夾中雙擊welcome.html文件啟動(dòng)瀏覽器，即可看到網(wǎng)頁(yè)的顯示結(jié)果。1.3網(wǎng)頁(yè)文件的創(chuàng)建過(guò)程

目前，Microsoft的IE系列（僅有IE9及其以上版本）瀏覽器，以及OperaSoftware的Opera與Google的Chrome瀏覽器。由于WindowsXP操作系統(tǒng)下不能安裝IE9，因此本書(shū)所有的應(yīng)用實(shí)例，主要執(zhí)行的瀏覽器為Opera，其對(duì)應(yīng)的版本號(hào)為11.62。如果讀者需要運(yùn)行本書(shū)中的實(shí)例，則要安裝該版本的Opera瀏覽器。【演練1-1】制作簡(jiǎn)單的HTML5文檔檢測(cè)瀏覽器是否支持HTML5。1.4搭建支持HTML5的瀏覽器環(huán)境1.5.1注釋標(biāo)簽<!--…-->

注釋標(biāo)簽的格式為：

<!--注釋內(nèi)容-->1.5.2強(qiáng)制換行標(biāo)簽<br/>強(qiáng)制換行標(biāo)簽的格式為：文字<br/>1.5.3段落標(biāo)簽<p>…</p>段落標(biāo)簽的格式為：<palign="left|center|right">文字</p>1.5文字與段落排版1.5.4定位標(biāo)簽<div>…</div>定位標(biāo)簽的格式為：<divalign="left|center|right">文本、圖像或表格</div>1.5.5水平線標(biāo)簽<hr/>水平線標(biāo)簽的格式為：<hralign="left|center|right"size="橫線粗細(xì)"width="橫線長(zhǎng)度"color="橫線色彩"noshade="noshade"/>其中，屬性size設(shè)定線條粗細(xì)，以像素為單位，默認(rèn)值為2。1.5文字與段落排版1.5.6標(biāo)題文字標(biāo)簽<h#>…</h#>標(biāo)題文字標(biāo)簽的格式為：<h#align="left|center|right">標(biāo)題文字</h#>“#”用來(lái)指定標(biāo)題文字的大小，#取1～6之間的值，取1時(shí)文字最大，取6時(shí)文字最小。1.5.7文字與段落排版綜合實(shí)例【演練1-2】制作一個(gè)購(gòu)物商城積分說(shuō)明的頁(yè)面1.5文字與段落排版1．錨點(diǎn)標(biāo)簽<a>…</a><a>標(biāo)簽的格式為：<ahref="URL"target="打開(kāi)窗口方式">熱點(diǎn)</a>2．指向其他頁(yè)面的鏈接①鏈接到同一目錄內(nèi)的網(wǎng)頁(yè)文件，格式為：<ahref="目標(biāo)文件名.htm">熱點(diǎn)文本</a>②鏈接到下一級(jí)目錄中的網(wǎng)頁(yè)文件，格式為：<ahref="子目錄名/目標(biāo)文件名.htm">熱點(diǎn)文本</a>③鏈接到上一級(jí)目錄中的網(wǎng)頁(yè)文件，格式為：<ahref="../目標(biāo)文件名.htm">熱點(diǎn)文本</a>④鏈接到同級(jí)目錄中的網(wǎng)頁(yè)文件，格式為：<ahref="../子目錄名/目標(biāo)文件名.htm">熱點(diǎn)文本</a>1.6超鏈接3．指向本頁(yè)中的鏈接超鏈接標(biāo)簽的格式為：<ahref="#記號(hào)名">熱點(diǎn)文本</a>書(shū)簽名在<a>標(biāo)簽的name屬性中定義，格式為：<aname="記號(hào)名">目標(biāo)文本附近的字符串</a>4．指向下載文件的鏈接指向下載文件的鏈接格式為：<ahref="下載文件名">熱點(diǎn)文本</a>5．指向電子郵件的鏈接指向電子郵件鏈接的格式為：<ahref="mailto:E-mail地址">熱點(diǎn)文本</a>1.6超鏈接1.7.1圖像標(biāo)簽<img>

使用圖像標(biāo)簽，可以把一幅圖像加入到網(wǎng)頁(yè)中。用圖像標(biāo)簽還可以設(shè)置圖像的替代文本、尺寸、布局等屬性。圖像標(biāo)簽的格式為：<imgsrc="圖像文件名"alt="簡(jiǎn)單說(shuō)明"width="圖像寬度"height="圖像高度"border="邊框?qū)挾?hspace="水平方向空白"vspace="垂直方向空白"align="環(huán)繞方式|對(duì)齊方式"/>1.7.2用圖像作為超鏈接熱點(diǎn)圖像也可作為起鏈接熱點(diǎn)，單擊圖像則跳轉(zhuǎn)到被鏈接的文本或其他文件。格式為：<ahref="URL"><imgsrc="圖像文件名"/></a>1.7圖像1.8.1簡(jiǎn)單表格

簡(jiǎn)單表格的格式為：<tableborder="n"width="x|x%"height="y|y%"cellspacing="i"cellpadding="j"><captionalign="left|right|top|bottomvalign=top|bottom>標(biāo)題</caption><tr><th>表頭1</th><th>表頭2</th><th>…</th><th>表頭n</th></tr><tr><td>表項(xiàng)1</td><td>表項(xiàng)2</td><td>…</td><td>表項(xiàng)n</td></tr>

<tr><td>表項(xiàng)1</td><td>表項(xiàng)2</td><td>…</td><td>表項(xiàng)n</td></tr></table>

1.8表格1.8.2表格內(nèi)文字的對(duì)齊方式在默認(rèn)情況下，表項(xiàng)居于單元格的左端?？捎昧?、行的屬性設(shè)置表項(xiàng)數(shù)據(jù)在單元格中的位置。1．水平對(duì)齊2．垂直對(duì)齊1.8.3表格在頁(yè)面中的對(duì)齊方式設(shè)置表格在頁(yè)面中的位置，格式為：<tablealign="left|center|right">

當(dāng)表格位于頁(yè)面的左側(cè)或右側(cè)時(shí)，文本填充在另一側(cè)；當(dāng)表格居中時(shí)，表格兩邊沒(méi)有文本；當(dāng)align屬性省略時(shí)，文本在表格的下面。1.8表格1.9.1無(wú)序列表標(biāo)簽<ul><li>…</ul>

無(wú)序列表中每一個(gè)表項(xiàng)的前面是項(xiàng)目符號(hào)（如●、■等符號(hào)）。建立無(wú)序列表可使用<ul>標(biāo)簽和<li>表項(xiàng)標(biāo)簽。格式為：<ultype="符號(hào)類(lèi)型"><litype="符號(hào)類(lèi)型1">第一個(gè)列表項(xiàng)<litype="符號(hào)類(lèi)型2">第二個(gè)列表項(xiàng)…</ul>1.9列表1.9.2有序列表標(biāo)簽<ol><li>…</ol>

通過(guò)帶序號(hào)的列表可以更清楚地表達(dá)信息的順序。使用<ol>標(biāo)簽可以建立有序列表，表項(xiàng)的標(biāo)簽仍為<li>。格式為：<oltype="符號(hào)類(lèi)型"><litype="符號(hào)類(lèi)型1">表項(xiàng)1<litype="符號(hào)類(lèi)型2">表項(xiàng)2…</ol>1.9列表

列表嵌套把主頁(yè)分為多個(gè)層次，給人以很強(qiáng)的層次感。有序列表和無(wú)序列表不僅可以自身嵌套，而且彼此可互相嵌套。制作無(wú)序列表中嵌套有序列表的頁(yè)面。1.10實(shí)訓(xùn)1．使用文字與段落標(biāo)簽制作如圖1-14所示的網(wǎng)頁(yè)。2．使用嵌套的列表制作如圖1-15所示的網(wǎng)頁(yè)。3．使用表格和圖像標(biāo)簽制作如圖1-16所示的網(wǎng)頁(yè)。習(xí)題12.1表單的工作原理2.2表單標(biāo)簽2.3表單元素2.4表單的高級(jí)用法第2章表單

表單的作用是從客戶端收集信息。當(dāng)訪問(wèn)者在表單中輸入信息，單擊提交按鈕后，這些信息將被發(fā)送到服務(wù)器，服務(wù)器端腳本或應(yīng)用程序?qū)?duì)這些信息進(jìn)行處理。服務(wù)器進(jìn)行響應(yīng)時(shí)，會(huì)將被請(qǐng)求信息發(fā)送回用戶（或客戶端），或者基于該表單內(nèi)容執(zhí)行一些操作，表單的工作原理如圖2-1所示。2.1表單的工作原理

網(wǎng)頁(yè)上具有可輸入表項(xiàng)及項(xiàng)目選擇等控制所組成的欄目稱為表單。<form>標(biāo)簽用于創(chuàng)建供用戶輸入的HTML表單。表單的基本語(yǔ)法及格式為：<formname="表單名"action="URL"method="get|post">…</form>2.2表單標(biāo)簽2.3.1<input>元素

<input>元素用來(lái)定義用戶輸入數(shù)據(jù)的輸入字段，根據(jù)不同的type屬性，輸入字段可以是文本字段、密碼字段、復(fù)選框、單選按鈕、按鈕、隱藏域、電子郵件、日期時(shí)間、數(shù)值、范圍、圖像、文件等。<input>元素的基本語(yǔ)法及格式為：<inputtype="表項(xiàng)類(lèi)型"name="表項(xiàng)名"value="默認(rèn)值"size="x"maxlength="y"/>2.3表單元素【演練2-1】制作商品圖片上傳的表單頁(yè)面，使用文件域上傳文件，用戶單擊“瀏覽”按鈕后，將彈出“打開(kāi)”對(duì)話框。選擇文件后，路徑將顯示在地址文本框中。2.3表單元素

2.3.2選擇欄<select>選擇欄可分為兩種：彈出式和字段式。<select>標(biāo)簽的格式為：<selectsize="x"name="控制操作名"multiple><option…>…</option><option…>…</option>…</select><option>標(biāo)簽的格式為：<optionselectedvalue="可選擇的內(nèi)容">…</option>2.3表單元素2.3.3多行文本域<textarea>…</textarea>

在意見(jiàn)反饋欄中往往需要瀏覽者發(fā)表意見(jiàn)和建議，且提供的輸入?yún)^(qū)域一般較大，可以輸入較多的文字。使用<textarea>標(biāo)簽可以設(shè)置允許成段文字的輸入，格式為：<textareaname="文本域名"rows="行數(shù)"cols="列數(shù)">

多行文本</textarea>

其中的行數(shù)和列數(shù)是指不拖動(dòng)滾動(dòng)條就可看到的部分。2.3表單元素在某些情況下，用戶需要對(duì)表單元素進(jìn)行限制，設(shè)置表單元素為只讀或禁用，常應(yīng)用于以下場(chǎng)景：只讀場(chǎng)景：網(wǎng)站服務(wù)器不希望用戶修改的數(shù)據(jù)，這些數(shù)據(jù)在表單元素中顯示。例如，注冊(cè)或交易協(xié)議、商品價(jià)格等。禁用場(chǎng)景：只有滿足某個(gè)條件后，才能選用某項(xiàng)功能。例如，只有用戶同意注冊(cè)協(xié)議后，才允許單擊“注冊(cè)”按鈕。只讀和禁用效果分別通過(guò)設(shè)置“readonly”和“disabled”屬性來(lái)實(shí)現(xiàn)?！狙菥?-2】制作商城服務(wù)協(xié)議頁(yè)面，頁(yè)面瀏覽后，商城服務(wù)協(xié)議只能閱讀而不能修改，并且只有用戶同意注冊(cè)協(xié)議后，才允許單擊“注冊(cè)”按鈕。2.4表單的高級(jí)用法

制作商城“會(huì)員注冊(cè)”表單頁(yè)面，使用表單技術(shù)制作會(huì)員注冊(cè)頁(yè)面，收集會(huì)員的個(gè)人資料。首先顯示未注冊(cè)前的初始頁(yè)面，如圖2-4（a）所示；用戶可以通過(guò)美觀便捷的日期選擇器設(shè)置會(huì)員的生日，如圖2-4（b）所示；接下來(lái)輸入完整的會(huì)員信息，其中輸入的電子郵件地址格式不正確，然后單擊“提交”按鈕，如圖2-4（c）所示；表單提交后，檢查出電子郵件地址無(wú)效，如圖2-4（d）所示。2.5實(shí)訓(xùn)

1．制作如圖2-5所示的會(huì)員注冊(cè)表單。2．制作如圖2-6所示的簡(jiǎn)易求職表表單。習(xí)題23.1使用結(jié)構(gòu)元素構(gòu)建網(wǎng)頁(yè)布局3.2音頻和視頻3.3canvas繪圖3.4HTML5的發(fā)展前景第3章HTML高級(jí)應(yīng)用

HTML5中的主要文檔結(jié)構(gòu)元素包括：<section>標(biāo)簽：代表文檔中的一段或者一節(jié)。<nav>標(biāo)簽：用于構(gòu)建導(dǎo)航。<header>標(biāo)簽：頁(yè)面的頁(yè)眉。<footer>標(biāo)簽：頁(yè)面的頁(yè)腳。<article>標(biāo)簽：表示文檔、頁(yè)面、應(yīng)用程序或網(wǎng)站中一體化的內(nèi)容。<aside>標(biāo)簽：代表與頁(yè)面內(nèi)容相關(guān)、有別于主要內(nèi)容的部分。<hgroup>標(biāo)簽：代表段或者節(jié)的標(biāo)題。<time>標(biāo)簽：表示日期和時(shí)間。<mark>標(biāo)簽：文檔中需要突出的文字。使用結(jié)構(gòu)元素構(gòu)建網(wǎng)頁(yè)布局的典型布局如圖3-1所示。3.1使用結(jié)構(gòu)元素構(gòu)建網(wǎng)頁(yè)布局

【演練3-1】使用<article>標(biāo)簽定義簡(jiǎn)介商品的文章，本例文件3-1.html在瀏覽器中的顯示效果如圖3-2所示。

【演練3-2】使用嵌套的<article>標(biāo)簽定義文章及評(píng)論，本例文件3-2.html在瀏覽器中的顯示效果如圖3-3所示。3.1使用結(jié)構(gòu)元素構(gòu)建網(wǎng)頁(yè)布局3.2.1音頻和視頻格式1．音頻格式（1）OggVorbis（2）MP3（3）WAV2．視頻格式（1）Ogg（2）H.264（MP4）（3）WebM3.2音頻和視頻3.2.2音頻標(biāo)簽<audio>目前，大多數(shù)音頻是通過(guò)插件（比如Flash）來(lái)播放的。然而，并非所有瀏覽器都擁有同樣的插件。HTML5規(guī)定了一種通過(guò)音頻標(biāo)簽<audio>來(lái)包含音頻的標(biāo)準(zhǔn)方法，<audio>標(biāo)簽?zāi)軌虿シ怕曇粑募蛘咭纛l流。<audiosrc="song.ogg"controls="controls"autoplay="autoplay">

【演練3-5】使用<audio>標(biāo)簽播放音頻。3.2音頻和視頻3.2.3視頻標(biāo)簽<video>對(duì)于視頻來(lái)說(shuō)，大多數(shù)視頻也是通過(guò)插件（比如Flash）來(lái)顯示的。然而，并非所有瀏覽器都擁有同樣的插件。HTML5規(guī)定了一種通過(guò)視頻標(biāo)簽<video>來(lái)包含視頻的標(biāo)準(zhǔn)方法。<video>標(biāo)簽?zāi)軌虿シ乓曨l文件或者視頻流。<videosrc="movie.ogg"width="320"height="240"controls="controls"autoplay="autoplay">【演練3-6】使用<video>標(biāo)簽播放視頻3.2音頻和視頻3.3.1創(chuàng)建<canvas>元素<canvas>元素的主要屬性是畫(huà)布寬度屬性width和高度屬性height，單位是像素。向頁(yè)面中添加<canvas>元素的語(yǔ)法格式為：<canvasid="畫(huà)布標(biāo)識(shí)"width="畫(huà)布寬度"height="畫(huà)布高度">…</canvas><canvas>看起來(lái)很像<img>，唯一不同就是它不含src和alt屬性。如果不指定width和height屬性值，默認(rèn)的畫(huà)布大小是寬300像素，高150像素。3.3canvas繪圖

3.3.2構(gòu)建繪圖環(huán)境大多數(shù)<canvas>繪圖API都沒(méi)有定義在<canvas>元素本身上，而是定義在通過(guò)畫(huà)布的getContext()方法獲得的一個(gè)“繪圖環(huán)境”對(duì)象上。getContext()方法返回一個(gè)用于在畫(huà)布上繪圖的環(huán)境，其語(yǔ)法如下：canvas.getContext(contextID)參數(shù)contextID指定了用戶想要在畫(huà)布上繪制的類(lèi)型?！?d”，即二維繪圖，這個(gè)方法返回一個(gè)上下文對(duì)象CanvasRenderingContext2D，該對(duì)象導(dǎo)出一個(gè)二維繪圖API。3.3canvas繪圖

3.3.3通過(guò)JavaScript繪制圖形<canvas>元素只是圖形容器，其本身是沒(méi)有繪圖能力的，所有的繪制工作必須在JavaScript內(nèi)部完成。在畫(huà)布上繪圖的核心是上下文對(duì)象CanvasRenderingContext2D，用戶可以在JavaScript代碼中使用getContext（）方法渲染上下文進(jìn)而在畫(huà)布上顯示形狀和文本。JavaScript使用getElementById方法通過(guò)canvas的id定位canvas元素，例如以下代碼：varmyCanvas=document.getElementById('myCanvas');3.3canvas繪圖

1．繪制矩形（1）繪制填充的矩形fillRect()方法用來(lái)繪制填充的矩形，語(yǔ)法格式為：fillRect(x,y,weight,height)其中的參數(shù)含義如下：x,y：矩形左上角的坐標(biāo)。weight,height：矩形的寬度和高度。說(shuō)明：fillRect()方法使用fillStyle屬性所指定的顏色、漸變和模式來(lái)填充指定的矩形。（2）繪制矩形輪廓strokeRect()方法用來(lái)繪制矩形的輪廓，語(yǔ)法格式為：strokeRect(x,y,weight,height)其中的參數(shù)含義如下：x,y：矩形左上角的坐標(biāo)。weight,height：矩形的寬度和高度。說(shuō)明：strokeRect()方法按照指定的位置和大小繪制一個(gè)矩形的邊框（但并不填充矩形的內(nèi)部），線條顏色和線條寬度由strokeStyle和lineWidth屬性指定。【演練3-7】繪制填充的矩形和矩形輪廓。

3.3canvas繪圖

2．繪制直線（1）lineTo()方法lineTo()方法用來(lái)繪制一條直線，語(yǔ)法格式為：lineTo(x,y)其中的參數(shù)含義如下：x,y：直線終點(diǎn)的坐標(biāo)。說(shuō)明：lineTo()方法為當(dāng)前子路徑添加一條直線。這條直線從當(dāng)前點(diǎn)開(kāi)始，到(x,y)結(jié)束。當(dāng)方法返回時(shí)，當(dāng)前點(diǎn)是(x,y)。（2）moveTo()方法在繪制直線時(shí)，通常配合moveTo()方法設(shè)置繪制直線的當(dāng)前位置并開(kāi)始一條新的子路徑，其語(yǔ)法格式為：moveTo(x,y)其中的參數(shù)含義如下：x,y：新的當(dāng)前點(diǎn)的坐標(biāo)。說(shuō)明：moveTo()方法將當(dāng)前位置設(shè)置為(x,y)并用它作為第一點(diǎn)創(chuàng)建一條新的子路徑。如果之前有一條子路徑并且它包含剛才的那一點(diǎn)，那么從路徑中刪除該子路徑。【演練3-8】繪制一條直線

3.3canvas繪圖

3．繪制圓弧或圓arc()方法使用一個(gè)中心點(diǎn)和半徑，為一個(gè)畫(huà)布的當(dāng)前子路徑添加一條弧，語(yǔ)法格式為：arc(x,y,radius,startAngle,endAngle,counterclockwise)其中的參數(shù)含義如下：x,y：描述弧的圓形的圓心坐標(biāo)。radius：描述弧的圓形的半徑。startAngle,endAngle：沿著圓指定弧的開(kāi)始點(diǎn)和結(jié)束點(diǎn)的一個(gè)角度。這個(gè)角度用弧度來(lái)衡量，沿著x軸正半軸的三點(diǎn)鐘方向的角度為0，角度沿著逆時(shí)針?lè)较蚨黾?。counterclockwise：弧沿著圓周的逆時(shí)針?lè)较颍═RUE）還是順時(shí)針?lè)较颍‵ALSE）遍歷。說(shuō)明：這個(gè)方法的前5個(gè)參數(shù)指定了圓周的一個(gè)起始點(diǎn)和結(jié)束點(diǎn)。調(diào)用這個(gè)方法會(huì)在當(dāng)前點(diǎn)和當(dāng)前子路徑的起始點(diǎn)之間添加一條直線。接下來(lái)，它沿著圓周在子路徑的起始點(diǎn)和結(jié)束點(diǎn)之間添加弧。最后一個(gè)counterclockwise參數(shù)指定了圓應(yīng)該沿著哪個(gè)方向遍歷來(lái)連接起始點(diǎn)和結(jié)束點(diǎn)?！狙菥?-10】繪制圓弧和圓

3.3canvas繪圖

4．繪制文字（1）繪制填充文字fillText()方法用于填充方式繪制字符串，語(yǔ)法格式為：fillText(text,x,y,[maxWidth])其中的參數(shù)含義如下：text：表示繪制文字的內(nèi)容。x,y：繪制文字的起點(diǎn)坐標(biāo)。maxWidth：可選參數(shù)，表示顯示文字的最大寬度，可以防止溢出。（2）繪制輪廓文字strokeText()方法用于輪廓方式繪制字符串，語(yǔ)法格式為：strokeText(text,x,y,[maxWidth])【演練3-11】繪制填充文字和輪廓文字

3.3canvas繪圖

5．繪制漸變（1）繪制線性漸變createLinearGradient()方法用于創(chuàng)建一條線性顏色漸變，語(yǔ)法格式為：createLinearGradient(xStart,yStart,xEnd,yEnd)其中的參數(shù)含義如下：xStart,yStart：漸變的起始點(diǎn)的坐標(biāo)。xEnd,yEnd：漸變的結(jié)束點(diǎn)的坐標(biāo)。（2）繪制徑向漸變createRadialGradient()方法用于創(chuàng)建一條放射顏色漸變，語(yǔ)法格式為：createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd)其中的參數(shù)含義如下：xStart,yStart：開(kāi)始圓的圓心坐標(biāo)。radiusStart：開(kāi)始圓的半徑。xEnd,yEnd：結(jié)束圓的圓心坐標(biāo)。radiusEnd：結(jié)束圓的半徑。addColorStop()方法在漸變中的某一點(diǎn)添加一個(gè)顏色變化，語(yǔ)法格式為：addColorStop(offset,color)【演練3-12】繪制線性漸變和徑向漸變

3.3canvas繪圖

6．繪制圖像canvas相當(dāng)有趣的一項(xiàng)功能就是可以引入圖像，它可以用于圖片合成或者制作背景等。只要是Gecko排版引擎支持的圖像（如PNG、GIF、JPEG等）都可以引入到canvas中，并且其它的canvas元素也可以作為圖像的來(lái)源。用戶可以使用drawImage()方法在一個(gè)畫(huà)布上繪制圖像，也可以將源圖像的任意矩形區(qū)域縮放或繪制到畫(huà)布上，語(yǔ)法格式為：格式一：drawImage(image,x,y)格式二：drawImage(image,x,y,width,height)格式三：drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,destX,destY,destWidth,destHeight)3.3canvas繪圖

HTML5最強(qiáng)大的生命力體驗(yàn)在其破除了應(yīng)用在不同操作系統(tǒng)和機(jī)型之間的障礙，具有巨大的跨平臺(tái)優(yōu)勢(shì)。這就意味著，基于HTML5的開(kāi)發(fā)應(yīng)用，可以在搭載不同操作系統(tǒng)的終端上運(yùn)行，這對(duì)廣大開(kāi)發(fā)者來(lái)說(shuō)絕對(duì)是一個(gè)福音。再加上其應(yīng)用的廣泛性，可以便捷地完成目前所需的各種應(yīng)用，包括支持文字、圖片、視頻、游戲，且不需要任何插件的幫助。隨著Google、Apple等創(chuàng)新公司的發(fā)展，HTML5技術(shù)將同GoogleChrome、GoogleAndroid移動(dòng)操作系統(tǒng)、AppleiOS等日漸成為發(fā)展的趨勢(shì)?；ヂ?lián)網(wǎng)巨頭臉譜網(wǎng)傾向于HTML5+JavaScript+CSS，蘋(píng)果手握AppleiOS，Google強(qiáng)推Android，而這些都與HTML5密切相關(guān)?？梢灶A(yù)見(jiàn)，HTML5的出現(xiàn)，將迎來(lái)互聯(lián)網(wǎng)“大一統(tǒng)”的時(shí)代。3.4HTML5的發(fā)展前景

使用canvas畫(huà)布繪制圖像的功能把一幅圖像映射到畫(huà)布上。<canvasid="myCanvas"width="200"height="100"style="border:1pxsolid#c3c3c3;">

您的瀏覽器不支持canvas元素.</canvas><scripttype="text/javascript">varc=document.getElementById("myCanvas");//獲取畫(huà)布

varcxt=c.getContext("2d"); //獲取畫(huà)布上繪圖的環(huán)境

varimg=newImage();img.src="flower.png"; //設(shè)置圖像來(lái)源

cxt.drawImage(img,0,0); //將圖像映射到畫(huà)布上

</script>3.5實(shí)訓(xùn)

1．使用文檔結(jié)構(gòu)元素制作如圖3-15所示的網(wǎng)頁(yè)。2．使用文檔結(jié)構(gòu)元素制作如圖3-16所示的網(wǎng)頁(yè)。3．制作如圖3-17所示的播放音頻和視頻的網(wǎng)頁(yè)。4．使用canvas元素繪圖，如圖3-18所示，其中最右側(cè)的圖像是加載到畫(huà)布的一幅圖像。5．使用canvas元素繪圖，如圖3-19所示。習(xí)題34.1CSS概述4.2CSS與HTML文檔的結(jié)合方法4.3樣式表語(yǔ)法4.4多重樣式表的層疊4.5CSS的屬性單位第4章CSS基礎(chǔ)4.1.1CSS的基本概念

CSS（CascadingStyleSheets，層疊樣式表單）簡(jiǎn)稱為樣式表，是用于（增強(qiáng)）控制網(wǎng)頁(yè)樣式并允許將樣式信息與網(wǎng)頁(yè)內(nèi)容分離的一種標(biāo)記性語(yǔ)言。樣式就是格式，在網(wǎng)頁(yè)中，像文字的大小、顏色以及圖片位置等，都是設(shè)置顯示內(nèi)容的樣式。層疊是指當(dāng)在HTML文檔中引用多個(gè)定義樣式的樣式文件（CSS文件）時(shí)，若多個(gè)樣式文件間所定義的樣式發(fā)生沖突，將依據(jù)層次順序處理。建立一個(gè)定義樣式的CSS文件，并讓所有HTML都調(diào)用這個(gè)CSS文件所定義的樣式即可，如圖4-1所示。

4.1CSS概述4.1.2CSS的發(fā)展歷史

1996年12月W3C推出了CSS規(guī)范的第一個(gè)版本CSS1.0。這一規(guī)范立即引起了各方的積極響應(yīng)，隨即MicroSoft公司和Netscape公司紛紛表示自己的瀏覽器能夠支持CSS1.0，從此CSS技術(shù)的發(fā)展幾乎一馬平川。1998年W3C發(fā)布了CSS2.0/2.1版本。早在2001年5月，W3C就著手開(kāi)發(fā)CSS第三版規(guī)范，CSS3規(guī)范被分為若干個(gè)相互獨(dú)立的模塊。一方面分成若干較小的模塊較利于規(guī)范及時(shí)更新和發(fā)布，及時(shí)調(diào)整模塊的內(nèi)容；另外一方面，由于受支持設(shè)備和瀏覽器廠商的限制，設(shè)備或者廠商可以有選擇的支持一部分模塊，支持CSS3的一個(gè)子集，這樣將有利于CSS3的推廣。4.1CSS概述4.1.3CSS3的特點(diǎn)

Web開(kāi)發(fā)者可以借助CSS3設(shè)計(jì)圓角、多背景、用戶自定義字體、3D動(dòng)畫(huà)、漸變、盒陰影、文字陰影、透明度等來(lái)提高Web設(shè)計(jì)的質(zhì)量，開(kāi)發(fā)者將不必再依賴圖片或者Javascript去完成這些任務(wù)，極大地提高了網(wǎng)頁(yè)開(kāi)發(fā)效率。1．CSS3在選擇器上面的支持2．CSS3在樣式上的支持3．CSS3對(duì)于動(dòng)畫(huà)的支持4．瀏覽器對(duì)CSS3的兼容性類(lèi)似于HTML5，沒(méi)有一種瀏覽器是完全兼容CSS3的。因此，本章中的實(shí)例可能采用不同的瀏覽器進(jìn)行驗(yàn)證，如無(wú)特別聲明，仍采用Opera瀏覽器瀏覽CSS3網(wǎng)頁(yè)。4.1CSS概述4.1.4CSS的代碼規(guī)范1．目錄結(jié)構(gòu)命名規(guī)范存放CSS樣式文件的目錄一般命名為style或css。2．CSS樣式文件的命名規(guī)范在項(xiàng)目初期，會(huì)把不同的類(lèi)別的樣式放于不同的CSS文件，是為了CSS編寫(xiě)和調(diào)試的方便；在項(xiàng)目后期，為了網(wǎng)站性能上的考慮會(huì)整合不同的CSS文件到一個(gè)CSS文件，這個(gè)文件一般命名為style.css或css.css。3．CSS選擇符的命名規(guī)范所有CSS選擇符必須由小寫(xiě)英文字母或“_”下劃線組成，必須以字母開(kāi)頭，不能為純數(shù)字。設(shè)計(jì)者要用有意義的單詞或縮寫(xiě)組合來(lái)命名選擇符，做到“見(jiàn)其名知其意”。4.1CSS概述4.2.1定義內(nèi)部樣式表可以在HTML文檔的<html>和<body>標(biāo)簽之間插入一個(gè)<style>…</style>標(biāo)簽對(duì)，在其中定義樣式。內(nèi)部樣式表的格式為：<styletype="text/css"><!--

選擇符1{屬性:屬性值;屬性:屬性值…}/*注釋內(nèi)容*/

選擇符2{屬性:屬性值;屬性:屬性值…}…

選擇符n{屬性:屬性值;屬性:屬性值…}--></style>4.2CSS與HTML文檔的結(jié)合方法4.2.2定義行內(nèi)樣式表行內(nèi)樣式表也稱內(nèi)嵌樣式表，是指在HTML標(biāo)簽中插入style屬性，再定義要顯示的樣式表，而style屬性的內(nèi)容就是CSS的屬性和值。用這種方法，可以很簡(jiǎn)單地對(duì)某個(gè)標(biāo)簽單獨(dú)定義樣式表。這種樣式表只對(duì)所定義的標(biāo)簽起作用，并不對(duì)整個(gè)頁(yè)面起作用。有時(shí)候這種方式卻非常有效。其格式為：<標(biāo)簽style="屬性:屬性值;屬性:屬性值…">4.2CSS與HTML文檔的結(jié)合方法4.2.3鏈入外部樣式表鏈入外部樣式表就是當(dāng)瀏覽器讀取到HTML文檔的樣式表鏈接標(biāo)簽時(shí)，將向所鏈接的外部樣式表文件索取樣式。先將樣式表保存為一個(gè)樣式表文件（.css），然后在網(wǎng)頁(yè)中用<link>標(biāo)簽鏈接這個(gè)樣式表文件。<link>標(biāo)簽必須放到頁(yè)面的<head>…</head>標(biāo)簽對(duì)內(nèi)。其格式為：<head>…<linkrel="stylesheet"href="外部樣式表文件名.css"type="text/css">…</head>4.2CSS與HTML文檔的結(jié)合方法4.2.4導(dǎo)入外部樣式表導(dǎo)入外部樣式表就是當(dāng)瀏覽器讀取HTML文件時(shí)，復(fù)制一份樣式表到這個(gè)HTML文件中，即在內(nèi)部樣式表的<style>標(biāo)簽對(duì)中導(dǎo)入一個(gè)外部樣式表文件。其格式為：<styletype="text/css"><!--@importurl("外部樣式表的文件名1.css");@importurl("外部樣式表的文件名2.css");

其他樣式表的聲明--></style>4.2CSS與HTML文檔的結(jié)合方法4.3.1CSS的定義組成

CSS的定義是由3個(gè)部分構(gòu)成：選擇符（selector）、屬性（attribute）和屬性的取值（value）。其語(yǔ)法為：selector{attribute:value} /*（選擇符{屬性：屬性值}）*/CSS選擇符可以分為很多類(lèi)，包括：類(lèi)型選擇符，class類(lèi)選擇符，id選擇符，通用選擇符，分組選擇符，包含選擇符，元素指定選擇符，子對(duì)象選擇符，屬性選擇符。下面講解幾種常用的選擇符。4.3樣式表語(yǔ)法4.3.2常用的選擇符1．類(lèi)型選擇符類(lèi)型選擇符是指以文檔對(duì)象模型（DOM）作為選擇符，即選擇某個(gè)HTML標(biāo)簽為對(duì)象，設(shè)置其樣式規(guī)則。類(lèi)型選擇符就是網(wǎng)頁(yè)元素本身，定義時(shí)直接使用元素名稱。其格式為：E{/*CSS代碼*/}4.3樣式表語(yǔ)法4.3.2常用的選擇符2．class類(lèi)選擇符在應(yīng)用時(shí)只要在標(biāo)簽中指定它屬于哪一個(gè)類(lèi)，就可以使用該類(lèi)的樣式了。其格式為：<styletype="text/css"><!--

標(biāo)簽1.類(lèi)名稱1{屬性:屬性值;屬性:屬性值…}

標(biāo)簽2.類(lèi)名稱2{屬性:屬性值;屬性:屬性值…}…

標(biāo)簽3.類(lèi)名稱n{屬性:屬性值;屬性:屬性值…}--></style>4.3樣式表語(yǔ)法4.3.2常用的選擇符3．id選擇符id選擇符用來(lái)對(duì)某個(gè)單一元素定義單獨(dú)的樣式。定義id選擇符時(shí)要在id名稱前加上一個(gè)“#”號(hào)。格式為：<styletype="text/css"><!--#id名1{屬性:屬性值;屬性:屬性值…}#id名2{屬性:屬性值;屬性:屬性值…}…#id名n{屬性:屬性值;屬性:屬性值…}--></style>4.3樣式表語(yǔ)法4.3.2常用的選擇符4．span選擇符<span>標(biāo)簽也可以用來(lái)定義區(qū)域，但一般用于網(wǎng)頁(yè)中某一個(gè)小問(wèn)題段落。其格式為：<spanid="樣式名">…</span>或<spanclass="樣式名">…</span>5．div選擇符div（division，部分的簡(jiǎn)寫(xiě)）在功能上與span相似，最主要的差別在于，div是一個(gè)塊級(jí)標(biāo)簽。其格式為：<divid="樣式名">…</div>或<divclass="樣式名">…</div>4.3樣式表語(yǔ)法4.3.2常用的選擇符6．通用選擇符通用選擇符指選定文檔對(duì)象模型（DOM）中的所有類(lèi)型的單個(gè)對(duì)象，是一種特殊的選擇符，它用*表示。其格式為：*｛CSS代碼｝7．通用兄弟元素選擇符E~F通用兄弟元素選擇符E~F用來(lái)指定位于同一個(gè)父元素之中的某個(gè)元素的之后的所有其他某個(gè)種類(lèi)的兄弟元素所使用的樣式。其格式為：E~F：{att}4.3樣式表語(yǔ)法4.3.2常用的選擇符8．包含選擇符包含選擇符能夠簡(jiǎn)化代碼，大范圍的樣式控制。其格式為：E1E2｛/*對(duì)子層控制規(guī)則*/｝9．分組選擇符分組選擇符指的是對(duì)多個(gè)標(biāo)簽設(shè)置同一樣的樣式。格式為：E1,E2,E3{/*CSS代碼*/}4.3樣式表語(yǔ)法4.3.2常用的選擇符10．屬性選擇符屬性選擇符存在7種具體形式：（1）E[att]屬性名選擇符（2）E[att=val]屬性值選擇符（3）E[att~=val]屬性值選擇符（4）E[att|=val]屬性值選擇符（5）E[att^=val]屬性值子串選擇符（6）E[att$=val]屬性值子串選擇符（7）E[att*=val]屬性值子串選擇符4.3樣式表語(yǔ)法4.3.2常用的選擇符11．偽類(lèi)選擇符（1）E:root結(jié)構(gòu)性偽類(lèi)選擇符（2）E:nth-child(n)結(jié)構(gòu)性偽類(lèi)選擇符（3）E:nth-last-child(n)結(jié)構(gòu)性偽類(lèi)選擇符（4）E:first-child與E:last-child結(jié)構(gòu)性偽類(lèi)選擇符（5）E:only-child結(jié)構(gòu)性偽類(lèi)選擇符（6）E:empty結(jié)構(gòu)性偽類(lèi)選擇符（7）E:not(s)否定偽類(lèi)選擇符（8）E:target目標(biāo)偽類(lèi)選擇符（9）UI元素狀態(tài)偽類(lèi)選擇符4.3樣式表語(yǔ)法

樣式表的優(yōu)先級(jí)別從高到低為：行內(nèi)樣式表、內(nèi)部樣式表、鏈接樣式表、導(dǎo)入樣式表和默認(rèn)瀏覽器樣式表。瀏覽器將按照上述順序執(zhí)行樣式表的規(guī)則。樣式表的層疊性就是繼承性，樣式表的繼承規(guī)則是：外部的元素樣式會(huì)保留下來(lái)，由這個(gè)元素所包含的其他元素繼承；所有在元素中嵌套的元素都會(huì)繼承外層元素指定的屬性值，有時(shí)會(huì)把多層嵌套的樣式疊加在一起，除非進(jìn)行更改；遇到?jīng)_突的地方，以最后定義的為準(zhǔn)?！狙菥?-5】首先鏈入一個(gè)外部樣式表，其中定義了h3選擇符的color、text-align和font-size屬性（標(biāo)題3的文字色彩為紅色，向左對(duì)齊，尺寸為8號(hào)字）【演練4-6】在div標(biāo)簽中嵌套p標(biāo)簽4.4多重樣式表的層疊4.5.1長(zhǎng)度、百分比單位1．長(zhǎng)度單位長(zhǎng)度單位有相對(duì)長(zhǎng)度單位和絕對(duì)長(zhǎng)度單位兩種類(lèi)型。相對(duì)長(zhǎng)度單位是指，以該屬性前一個(gè)屬性的單位值為基礎(chǔ)來(lái)完成目前的設(shè)置。絕對(duì)長(zhǎng)度單位將不會(huì)隨著顯示設(shè)備的不同而改變。換句話說(shuō)，屬性值使用絕對(duì)長(zhǎng)度單位時(shí)，不論在哪種設(shè)備上，顯示效果都是一樣的，如屏幕上的1cm與打印機(jī)上的1cm是一樣長(zhǎng)的。由于相對(duì)長(zhǎng)度單位確定的是一個(gè)相對(duì)于另一個(gè)長(zhǎng)度屬性的長(zhǎng)度，因而它能更好地適應(yīng)不同的媒體，所以它是首選的。4.5CSS的屬性單位4.5.1長(zhǎng)度、百分比單位2．百分比單位百分比單位也是一種常用的相對(duì)類(lèi)型。百分比值總是相對(duì)于另一個(gè)值來(lái)說(shuō)的，該值可以是長(zhǎng)度單位或其他單位。每一個(gè)可以使用百分比值單位指定的屬性，同時(shí)也自定義了這個(gè)百分比值的參照值。在大多數(shù)情況下，這個(gè)參照值是該元素本身的字體尺寸。并非所有屬性都支持百分比單位。一個(gè)百分比值由可選的正號(hào)“+”或負(fù)號(hào)“-”，接著一個(gè)數(shù)字，后跟百分號(hào)“%”組成。如果百分比值是正的，正號(hào)可以不寫(xiě)。正負(fù)號(hào)、數(shù)字與百分號(hào)之間不能有空格。4.5CSS的屬性單位4.5.2色彩單位在HTML網(wǎng)頁(yè)或者CSS樣式的色彩定義里，設(shè)置色彩的方式是RGB方式。在RGB方式中，所有色彩均由紅色（Red）、綠色（Green）、藍(lán)色（B1ue）三種色彩混合而成。在HTML標(biāo)記中只提供了兩種設(shè)置色彩的方法：十六進(jìn)制數(shù)和色彩英文名稱。CSS則提供了3種定義色彩的方法：十六進(jìn)制數(shù)、色彩英文名稱、rgb函數(shù)和rgba函數(shù)。4.5CSS的屬性單位

使用UI元素狀態(tài)偽類(lèi)選擇符控制表單輸入框不同狀態(tài)下的樣式，當(dāng)瀏覽者在表單輸入框中執(zhí)行不同的操作時(shí)，可以看到輸入框顯示出不同的樣式，本例文件4-7.html在瀏覽器中的顯示效果如圖4-16所示。4.6實(shí)訓(xùn)

1．使用偽類(lèi)相關(guān)的知識(shí)制作鼠標(biāo)懸停效果。當(dāng)鼠標(biāo)未懸停在鏈接上時(shí)，顯示如圖4-17（a）所示，當(dāng)鼠標(biāo)懸停在鏈接上時(shí)，顯示如圖4-17（b）所示。2．使用rgba色彩實(shí)現(xiàn)透明效果，背景圖像是透明的，而上方顯示的文字是不透明的。如圖4-18所示。3．使用CSS創(chuàng)建如圖4-19所示的頁(yè)面。

習(xí)題45.1Div布局理念5.2CSS盒模型5.3CSS的定位5.4浮動(dòng)與清除浮動(dòng)5.5CSS常用布局樣式5.6Div+CSS布局綜合案例第5章Div+CSS布局方法5.1.1Div布局頁(yè)面的優(yōu)點(diǎn)采用Div+CSS布局方式的優(yōu)點(diǎn)如下：

縮減了頁(yè)面代碼，提高了頁(yè)面的瀏覽速度。

縮短了網(wǎng)站的改版時(shí)間，設(shè)計(jì)者只要簡(jiǎn)單地修改CSS文件就可以輕松地改版網(wǎng)站。

強(qiáng)大的字體控制和排版能力，使設(shè)計(jì)者能夠更好的控制頁(yè)面布局。

表現(xiàn)和內(nèi)容相分離，設(shè)計(jì)者將設(shè)計(jì)部分剝離出來(lái)放在一個(gè)獨(dú)立樣式文件中，減少了網(wǎng)頁(yè)無(wú)效的可能。

方便搜索引擎的搜索，使用只包含結(jié)構(gòu)化內(nèi)容的HTML代替嵌套的標(biāo)簽，搜索引擎將更有效地搜索到用戶的內(nèi)容。

用戶可以將許多網(wǎng)頁(yè)的風(fēng)格格式同時(shí)更新。

5.1Div布局理念5.1.2Div標(biāo)簽1．Div標(biāo)簽簡(jiǎn)介2．Div的嵌套

Div標(biāo)簽是可以被嵌套的，這種嵌套的Div主要用于實(shí)現(xiàn)更為復(fù)雜的頁(yè)面排版。下面以兩個(gè)示例說(shuō)明嵌套的Div之間的關(guān)系?！狙菥?-1】未嵌套的Div容器.【演練5-2】嵌套的Div容器。5.1Div布局理念3．Div標(biāo)簽與Span標(biāo)簽的區(qū)別

div與span的區(qū)別在于，div是一個(gè)塊級(jí)元素，它包圍的元素會(huì)自動(dòng)換行，而span僅僅是個(gè)內(nèi)聯(lián)元素，不會(huì)換行。另外，span本身沒(méi)有任何屬性，沒(méi)有結(jié)構(gòu)上的意義，當(dāng)其他元素都不合適的時(shí)候可以換上它，同時(shí)div可以包含span，反之則不行。【演練5-3】演示Div標(biāo)簽與Span標(biāo)簽的區(qū)別。5.1Div布局理念5.2.1盒模型的概念盒模型將頁(yè)面中的每個(gè)元素看做一個(gè)矩形框，這個(gè)框由元素的內(nèi)容、內(nèi)邊距（padding）、邊框（border）和外邊距（margin）組成，如圖5-4所示。對(duì)象的尺寸與邊框等樣式表屬性的關(guān)系，如圖5-5所示。5.2CSS盒模型5.2.2盒模型的屬性1．外邊距外邊距也稱為外補(bǔ)丁。外邊距設(shè)置屬性有：margin-top、margin-right、margin-bottom、margin-left，可分別設(shè)置，也可以用margin屬性，一次設(shè)置所有邊距。2．邊框常用的邊框?qū)傩杂?項(xiàng)：border-top、border-right、border-bottom、border-left、border-width、border-color、border-style。其中border-width可以一次性設(shè)置所有的邊框?qū)挾?，border-color同時(shí)設(shè)置四面邊框的顏色時(shí)，可以連續(xù)寫(xiě)上4種顏色，并用空格分隔。上述連續(xù)設(shè)置的邊框都是按border-top、border-right、border-bottom、border-left的順序（順時(shí)針）。5.2CSS盒模型5.2.2盒模型的屬性3．內(nèi)邊距內(nèi)邊距也稱內(nèi)補(bǔ)丁，位于對(duì)象邊框和對(duì)象之間，包括了4項(xiàng)屬性：padding-top（上內(nèi)邊距）、padding-right（右內(nèi)邊距）、padding-bottom（下內(nèi)邊距）、padding-left（左內(nèi)邊距），內(nèi)邊距屬性不允許負(fù)值。與外邊距類(lèi)似，內(nèi)邊距也可以用padding一次性設(shè)置所有的對(duì)象間隙，格式也和margin相似，這里不再一一列舉。5.2CSS盒模型5.2.3盒模型的寬度與高度盒模型的寬度與高度是元素內(nèi)容、內(nèi)邊距、邊框和外邊距這4部分的屬性值之和。1．盒模型的寬度

盒模型的寬度=左外邊距（margin-left）+左邊框（border-left）+左內(nèi)邊距（padding-left）+內(nèi)容寬度（width）+右內(nèi)邊距（padding-right）+右邊框（border-right）+右外邊距（margin-right）2．盒模型的高度

盒模型的高度=上外邊距（margin-top）+上邊框（border-top）+上內(nèi)邊距（padding-top）+內(nèi)容高度（height）+下內(nèi)邊距（padding-bottom）+下邊框（border-bottom）+下外邊距（margin-bottom）5.2CSS盒模型5.2.4外邊距的疊加用戶在進(jìn)行CSS網(wǎng)頁(yè)布局時(shí)經(jīng)常會(huì)遇見(jiàn)外邊距的疊加問(wèn)題，如果不理解其內(nèi)涵就容易造成許多麻煩。當(dāng)兩個(gè)元素的垂直外邊距相遇時(shí)，這兩個(gè)元素的外邊距就會(huì)進(jìn)行疊加，合并為一個(gè)外邊距。1．兩個(gè)元素垂直相遇時(shí)疊加2．兩個(gè)元素包含時(shí)疊加5.2CSS盒模型5.2.4外邊距的疊加用戶在進(jìn)行CSS網(wǎng)頁(yè)布局時(shí)經(jīng)常會(huì)遇見(jiàn)外邊距的疊加問(wèn)題，如果不理解其內(nèi)涵就容易造成許多麻煩。當(dāng)兩個(gè)元素的垂直外邊距相遇時(shí)，這兩個(gè)元素的外邊距就會(huì)進(jìn)行疊加，合并為一個(gè)外邊距。1．兩個(gè)元素垂直相遇時(shí)疊加當(dāng)兩個(gè)元素垂直相遇時(shí)，第一個(gè)元素的下外邊距與第二個(gè)元素的上外邊距會(huì)發(fā)生疊加合并，合并后的外邊距的高度等于這兩個(gè)元素的外邊距值的較大者。2．兩個(gè)元素包含時(shí)疊加假設(shè)兩個(gè)元素沒(méi)有內(nèi)邊距和邊框，且一個(gè)元素包含另一個(gè)元素，它們的上外邊距或下外邊距也會(huì)發(fā)生疊加合并。5.2CSS盒模型5.2.5盒模型綜合案例【演練5-4】修飾商城社區(qū)管理員登錄表單的輸入框?yàn)橹伙@示下邊框線的虛細(xì)線框，本例文件5-4.html在瀏覽器中顯示的效果如圖5-10所示。5.2CSS盒模型5.2.5盒模型綜合案例【演練5-5】設(shè)置商城logo圖片的布局，本例文件5-5.html的顯示效果如圖5-11所示。5.2CSS盒模型定位（position）屬性可以選擇4中不同類(lèi)型的定位模式，語(yǔ)法如下：position:static|relative|absolute|fixed參數(shù)：static靜態(tài)定位為默認(rèn)值，為無(wú)特殊定位，對(duì)象遵循HTML定位規(guī)則。relative生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。absolute生成絕對(duì)定位的元素。元素的位置通過(guò)left、top、right和bottom屬性進(jìn)行規(guī)定。fixed生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。元素的位置通過(guò)left、top、right以及bottom屬性進(jìn)行規(guī)定。5.3CSS的定位5.3.1靜態(tài)定位靜態(tài)定位是position屬性的默認(rèn)值，即該元素出現(xiàn)在文檔的常規(guī)位置，不會(huì)重新定位。通常此屬性可以不設(shè)置，除非是要覆蓋以前的定義。【演練5-6】靜態(tài)定位。假設(shè)有這樣一個(gè)頁(yè)面布局，頁(yè)面中分別定義了id="top"、id="box"和id="footer"這3個(gè)Div容器，彼此是并列關(guān)系。id="box"的容器又包含id="box-1"、id="box-2"和id="box-3"這3個(gè)子Div容器，彼此也是并列關(guān)系。編寫(xiě)相應(yīng)的CSS樣式，生成的文件5-6.html在瀏覽器中顯示的效果如圖5-12所示。5.3CSS的定位5.3.2相對(duì)定位相對(duì)定位（position:relative;）指的是通過(guò)設(shè)置水平或垂直位置的值，讓這個(gè)元素“相對(duì)于”它原始的起點(diǎn)進(jìn)行移動(dòng)?！狙菥?-7】相對(duì)定位。使用上面的示例深入討論，將id="box"的塊級(jí)元素向下移動(dòng)50px，向右移動(dòng)50px。編寫(xiě)相應(yīng)的CSS樣式，生成的文件5-7.html的顯示效果如圖5-13所示5.3CSS的定位5.3.3絕對(duì)定位用“position:absolute;”表示絕對(duì)定位，使用絕對(duì)定位的對(duì)象可以被放置在文檔中任何位置，位置將依據(jù)瀏覽器左上角的0點(diǎn)開(kāi)始計(jì)算。【演練5-8】絕對(duì)定位。繼續(xù)使用上面的示例深入討論，將id="box-1"的塊級(jí)元素進(jìn)行絕對(duì)定位，向下移動(dòng)50px，向右移動(dòng)200px。編寫(xiě)相應(yīng)的CSS樣式，生成的文件5-8.html在瀏覽器中顯示的效果如圖5-14所示。5.3CSS的定位5.3.4相對(duì)定位與絕對(duì)定位的混合使用【演練5-9】相對(duì)定位與絕對(duì)定位的混合使用。首先對(duì)id="box"的塊級(jí)元素進(jìn)行相對(duì)定位，則id="box"中的所有元素都將相當(dāng)于id="box"的塊級(jí)元素。然后將id="box-1"的塊級(jí)元素進(jìn)行絕對(duì)定位，便可以實(shí)現(xiàn)子元素相當(dāng)于父元素進(jìn)行定位。編寫(xiě)相應(yīng)的CSS樣式，生成的文件5-9.html在瀏覽器中顯示的效果如圖5-15所示。5.3CSS的定位5.3.5固定定位固定定位（position:fixed;）其實(shí)是絕對(duì)定位的子類(lèi)別?！狙菥?-10】固定定位。為了對(duì)固定定位演示得更加清楚，將id="box1"的塊級(jí)元素進(jìn)行固定定位，將id="box2"的塊級(jí)元素的高度設(shè)置得盡量大，以便能看到固定定位的效果。編寫(xiě)相應(yīng)的CSS樣式，生成的文件5-10.html在瀏覽器中顯示的效果如圖5-16所示。5.3CSS的定位

5.4.1浮動(dòng)利用CSS樣式布局頁(yè)面結(jié)構(gòu)時(shí)，浮動(dòng)（float）是使用率較高的一種定位方式。當(dāng)某個(gè)元素被賦予浮動(dòng)屬性后，該元素便脫離文檔流向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂ＵZ(yǔ)法：float:none|left|right【演練5-11】向右浮動(dòng)的元素。本例頁(yè)面布局的初始狀態(tài)如圖5-17（a）所示，元素box-1向右浮動(dòng)后的結(jié)果如圖5-17（b）所示。

5.4浮動(dòng)與清除浮動(dòng)

5.4.1浮動(dòng)

【演練5-12】向左浮動(dòng)的元素。使用上面的示例繼續(xù)討論，只將id="box-1"的元素向左浮動(dòng)的頁(yè)面布局如圖5-18（a）所示，所有元素向左浮動(dòng)后的結(jié)果如圖5-18（b）所示。5.4浮動(dòng)與清除浮動(dòng)

5.4.1浮動(dòng)

【演練5-13】空間不夠時(shí)的元素浮動(dòng)。使用上面的示例繼續(xù)討論，如果id="box"的塊級(jí)元素寬度不夠，無(wú)法容納3個(gè)浮動(dòng)元素box-1、box-2和box-3并排放置，那么部分浮動(dòng)元素將會(huì)向下移動(dòng)，直到有足夠的空間放置它們，如圖5-19（a）所示。如果浮動(dòng)元素的高度彼此不同，那么當(dāng)它們向下移動(dòng)時(shí)可能會(huì)被其他浮動(dòng)元素“擋住”，如圖5-19（b）所示。

5.4浮動(dòng)與清除浮動(dòng)

（a）塊級(jí)元素寬度不夠時(shí)的狀態(tài)（b）塊級(jí)元素寬度不夠且不同高度的浮動(dòng)元素5.4.2清除浮動(dòng)在CSS樣式中，浮動(dòng)與清除浮動(dòng)（clear）是相互對(duì)立的，使用清除浮動(dòng)不僅能夠解決頁(yè)面錯(cuò)位的現(xiàn)象，。語(yǔ)法：clear:none|left|right|both【演練5-14】清除浮動(dòng)。使用上面的示例5-12繼續(xù)討論，頁(yè)面所有元素均已向左浮動(dòng)，在box-3后面再增加一個(gè)沒(méi)有設(shè)置浮動(dòng)的塊級(jí)元素box-4，未清除浮動(dòng)時(shí)的狀態(tài)如圖5-20（a）所示，清除浮動(dòng)后的狀態(tài)如圖5-20（b）所示。5.4浮動(dòng)與清除浮動(dòng)

5.5.1兩列布局樣式許多網(wǎng)站都有一些共同的特點(diǎn)，即頂部放置一個(gè)大的導(dǎo)航或廣告條，右側(cè)是鏈接或圖片，左側(cè)放置主要內(nèi)容，頁(yè)面底部放置版權(quán)信息等，如圖5-23所示的布局就是經(jīng)典的兩列布局。5.5CSS常用布局樣式

5.5.2三列布局樣式三列布局在網(wǎng)頁(yè)設(shè)計(jì)時(shí)更為常用，如圖5-28所示。對(duì)于這種類(lèi)型的布局，瀏覽者的注意力最容易集中在中欄的信息區(qū)域，其次才是左右兩側(cè)的信息。5.5CSS常用布局樣式

5.6.1頁(yè)面布局規(guī)劃頁(yè)面布局的首要任務(wù)是弄清網(wǎng)頁(yè)的布局方式，分析版式結(jié)構(gòu)，待整體頁(yè)面搭建有明確規(guī)劃后，再根據(jù)成熟的規(guī)劃切圖。通過(guò)成熟的構(gòu)思與設(shè)計(jì)，電腦學(xué)堂欄目的主頁(yè)效果如圖5-34所示，頁(yè)面布局示意圖如圖5-35所示。5.6Div+CSS布局綜合案例

5.6.2頁(yè)面的制作過(guò)程1．前期準(zhǔn)備（1）欄目目錄結(jié)構(gòu)在欄目文件夾下創(chuàng)建文件夾images和style，分別用來(lái)存放圖像素材和外部樣式表文件。（2）頁(yè)面素材將本頁(yè)面需要使用的圖像素材存放在文件夾images下。（3）外部樣式表在文件夾style下新建一個(gè)名為style.css的樣式表文件。5.6Div+CSS布局綜合案例

5.6.2頁(yè)面的制作過(guò)程2．制作頁(yè)面（1）頁(yè)面整體的制作（2）頁(yè)面頂部的制作（3）頁(yè)面導(dǎo)航的制作（4）頁(yè)面中部的制作（5）頁(yè)面底部的制作（6）頁(yè)面結(jié)構(gòu)代碼5.6Div+CSS布局綜合案例

制作電腦學(xué)堂欄目的子頁(yè)面。欄目子頁(yè)面網(wǎng)購(gòu)學(xué)堂（study.html）的布局與主頁(yè)面（index.html）有一定相似之處，頁(yè)面效果如圖5-42所示，布局示意圖如圖5-43所示。5.7實(shí)訓(xùn)

1．制作如圖5-44所示的兩列固定寬度型布局。2．制作如圖5-45所示的三列固定寬度居中型布局.3．使用相對(duì)定位的方法制作如圖5-46所示的頁(yè)面布局。4．綜合使用Div+CSS布局技術(shù)創(chuàng)建如圖5-47所示的電腦博客頁(yè)面。

習(xí)題56.1設(shè)置文字的樣式6.2設(shè)置段落的樣式6.3設(shè)置圖片樣式6.4設(shè)置背景6.5圖文混排6.6用CSS設(shè)置文本和圖像綜合案例第6章用CSS設(shè)置文本和圖像6.1.1設(shè)置文字的字體在HTML中，設(shè)置文字的字體需要通過(guò)<font>標(biāo)記的face屬性。而在CSS中，則使用font-family屬性。語(yǔ)法：font-family:字體名稱【演練6-1】字體設(shè)置，本例頁(yè)面6-1.html的顯示效果如圖6-1所示。

6.1設(shè)置文字的樣式6.1.2設(shè)置字體的大小在設(shè)計(jì)頁(yè)面時(shí)，通常使用不同大小的字體來(lái)突出要表現(xiàn)的主題，在CSS樣式中使用font-size屬性設(shè)置字體的大小。語(yǔ)法：font-size:絕對(duì)尺寸|相對(duì)尺寸|百分?jǐn)?shù)【演練6-2】字體大小設(shè)置，本例頁(yè)面6-2.html的顯示效果如圖6-2所示。6.1設(shè)置文字的樣式6.1.3設(shè)置字體的粗細(xì)

CSS樣式中使用font-weight屬性設(shè)置字體的粗細(xì)。語(yǔ)法：font-weight:bold|number|normal【演練6-3】字體粗細(xì)設(shè)置，本例頁(yè)面6-3.html的顯示效果如圖6-3所示。

6.1設(shè)置文字的樣式6.1.4設(shè)置字體的傾斜

CSS中的font-style屬性用來(lái)設(shè)置字體的傾斜。語(yǔ)法：font-style:normal||italic||oblique【演練6-4】字體傾斜設(shè)置，本例頁(yè)面6-4.html的顯示效果如圖6-4所示。

6.1設(shè)置文字的樣式6.1.5設(shè)置字體的修飾

使用CSS樣式可以對(duì)文本進(jìn)行簡(jiǎn)單的修飾，例如給文字添加下劃線、頂劃線和刪除線，它是通過(guò)text-decoration屬性來(lái)實(shí)現(xiàn)這些效果的。語(yǔ)法：text-decoration:underline||blink||overline||line-through|none【演練6-5】字體修飾設(shè)置，本例頁(yè)面6-5.html的顯示效果如圖6-5所示。6.1設(shè)置文字的樣式6.1.6設(shè)置字體的陰影在CSS3中新增了設(shè)置字體陰影的功能，它是通過(guò)text-shadow屬性來(lái)實(shí)現(xiàn)這個(gè)效果的。語(yǔ)法：text-shadow:color||length||length||opacity6.1設(shè)置文字的樣式6.2.1設(shè)置文字的對(duì)齊方式使用CSS樣式可以設(shè)置文字的對(duì)齊方式，它是通過(guò)text-align屬性來(lái)實(shí)現(xiàn)這些效果的。語(yǔ)法：text-align:left|right|center|justify

6.2設(shè)置段落的樣式6.2.2設(shè)置首行縮進(jìn)在CSS樣式中text-indent屬性可以方便地實(shí)現(xiàn)文本縮進(jìn)。語(yǔ)法：text-indent:length【演練6-6】設(shè)置首行縮進(jìn)，本例頁(yè)面6-6.html的顯示效果如圖6-8所示。

6.2設(shè)置段落的樣式6.2.3設(shè)置首字下沉在CSS樣式中偽對(duì)象:first-letter可以實(shí)現(xiàn)對(duì)象內(nèi)第一個(gè)字符的樣式控制?！狙菥?-7】設(shè)置首字下沉，本例頁(yè)面6-7.html的顯示效果如圖6-9所示。6.2設(shè)置段落的樣式6.2.4設(shè)置行高在CSS樣式中，使用line-height屬性控制行與行之間的垂直間距。語(yǔ)法：line-height:length|normal【演練6-8】設(shè)置行高，本例頁(yè)面6-8.html的顯示效果如圖6-10所示。6.2設(shè)置段落的樣式6.2.5設(shè)置文本換行在CSS3中新增了設(shè)置文本換行的功能，它是通過(guò)word-wrap屬性來(lái)實(shí)現(xiàn)這個(gè)效果的。語(yǔ)法：word-wrap：normal|break-word6.2設(shè)置段落的樣式6.3.1圖片的邊框如果希望更換邊框的顏色，或者換成虛線邊框，僅僅依靠HTML都是無(wú)法實(shí)現(xiàn)的。下面的實(shí)例講解了如何用CSS樣式美化圖片的邊框?！狙菥?-9】設(shè)置圖片邊框，本例頁(yè)面6-9.html的顯示效果如圖6-12所示。6.3設(shè)置圖片樣式6.3.2圖片的縮放使用CSS樣式控制圖片的大小，可以通過(guò)width和height兩個(gè)屬性來(lái)實(shí)現(xiàn)?！狙菥?-10】設(shè)置圖片縮放，本例頁(yè)面6-10.html的顯示效果如圖6-13所示。6.3設(shè)置圖片樣式6.4.1設(shè)置背景顏色在CSS中，網(wǎng)頁(yè)元素的背景顏色使用background-color屬性來(lái)設(shè)置，屬性值為某種顏色。語(yǔ)法：background-color:color|transparent【演練6-11】設(shè)置背景顏色，本例頁(yè)面6-11.html的顯示效果如圖6-16所示。

6.4設(shè)置背景6.4.2設(shè)置背景圖像在CSS樣式中，使用background-image屬性設(shè)置背景圖像來(lái)美化網(wǎng)頁(yè)。語(yǔ)法：background-image:url(url)|none【演練6-12】設(shè)置背景圖像，本例頁(yè)面6-12.html的顯示效果如圖6-17所示。6.4設(shè)置背景6.4.3設(shè)置背景重復(fù)在默認(rèn)情況下，圖像會(huì)自動(dòng)向水平和豎直兩個(gè)方向平鋪?？梢允褂胋ackground-repeat屬性來(lái)控制。語(yǔ)法：background-repeat:repeat|no-repeat|repeat-x|repeat-y【演練6-13】設(shè)置背景重復(fù)，本例頁(yè)面6-13.html的效果如圖6-18所示。6.4設(shè)置背景

6.4.4設(shè)置背景定位在CSS樣式中，可以使用background-position屬性改變背景圖片在元素中的位置。語(yǔ)法：background-position:length||lengthbackground-position:position||position【演練6-14】使用關(guān)鍵字進(jìn)行背景定位，顯示效果如圖6-19所示。

6.4設(shè)置背景6.4.5設(shè)置背景大小

background-size是CSS3提供的一個(gè)新特性，它可以讓用戶隨心所欲的控制背景圖的尺寸大小。語(yǔ)法：background-size：[length|percentage|auto]{1,2}|cover|contain6.4設(shè)置背景圖文混排一般出現(xiàn)在介紹性的內(nèi)容或新聞內(nèi)頁(yè)中，其關(guān)鍵在于處理圖片與文字之間的關(guān)系。請(qǐng)看下面的示例講解。【演練6-17】圖文混排，本例頁(yè)面6-17.html的顯示效果如圖6-23所示。6.5圖文混排6.6.1頁(yè)面布局規(guī)劃通過(guò)成熟的構(gòu)思與設(shè)計(jì)，電腦學(xué)堂作品展示頁(yè)面的效果如圖6-24所示，頁(yè)面布局示意圖如圖6-25所示。6.6用CSS設(shè)置文本和圖像綜合案例

6.6.2頁(yè)面的制作過(guò)程1．前期準(zhǔn)備（1）欄目目錄結(jié)構(gòu)在欄目文

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論