html設(shè)置文本和圖像(web編程基礎(chǔ))_第1頁(yè)
html設(shè)置文本和圖像(web編程基礎(chǔ))_第2頁(yè)
html設(shè)置文本和圖像(web編程基礎(chǔ))_第3頁(yè)
html設(shè)置文本和圖像(web編程基礎(chǔ))_第4頁(yè)
html設(shè)置文本和圖像(web編程基礎(chǔ))_第5頁(yè)
已閱讀5頁(yè)，還剩45頁(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)介

信息工程學(xué)院

《web編程基礎(chǔ)》

用HTML設(shè)置文本、圖像、列表

教師：劉欣欣

年級(jí)：2014級(jí)

時(shí)間：2015-2016學(xué)年第一學(xué)期

聯(lián)系方式：621422/p>

辦公室：21號(hào)樓303

3知識(shí)回顧什么是HMTL？HTML（HypertextMarkupLanguage）是一種SGML(StandardforGeneralMarkupLanguage)定義下的一個(gè)描述性的語(yǔ)言，全稱是超文本標(biāo)記語(yǔ)言是一種國(guó)際化標(biāo)準(zhǔn)語(yǔ)言，它用于在Web上發(fā)布超文本信息，是一種基于SGML，公開(kāi)的資源描述格式不是程序語(yǔ)言，只是標(biāo)記語(yǔ)言，設(shè)計(jì)者只需要掌握各類標(biāo)記的使用方法即可。4(X)HTML什么是XHTML？XHTML是TheExtensibleHypertextMarkupLanguage可擴(kuò)展標(biāo)識(shí)語(yǔ)言的縮寫(xiě)。在HTML4.0的基礎(chǔ)上，用XML的規(guī)則對(duì)其進(jìn)行擴(kuò)展，得到了XHTML。它實(shí)現(xiàn)HTML向XML的過(guò)渡。什么是XML？XML(ExtensibleMarkupLanguage)的出現(xiàn)，結(jié)構(gòu)化文檔和數(shù)據(jù)有了一個(gè)通用的、科適應(yīng)的格式，不僅僅應(yīng)用在web上，也可以應(yīng)用在任何地方，標(biāo)準(zhǔn)成為可能，是Web未來(lái)的發(fā)展方向。

5(X)HTML為什么要使用XHMTL？HTML沒(méi)有足夠的可擴(kuò)展性。HTML文檔創(chuàng)建要素是有限的，如無(wú)法處理非常規(guī)的內(nèi)容：樂(lè)譜，數(shù)學(xué)表達(dá)式等。同時(shí)HTML不能很好地支持不斷更新的顯示媒體，如手機(jī)等。而XHMTL就可以很好地解決這一點(diǎn)。XHMTL的優(yōu)點(diǎn)有：HTML沒(méi)有非常良好的格式，所以當(dāng)添加新的元素時(shí)，需更改文檔類型定義。而XHMTL有良好的格式，極大簡(jiǎn)化了新元素的開(kāi)發(fā)和集成。HTML沒(méi)有非常良好的格式，所以在計(jì)算能力較差的瀏覽設(shè)備上不能正常顯示，而XHMTL有良好的格式，可在非臺(tái)式設(shè)備中正常顯示。新建的Web文檔使用XHTML，將會(huì)使文檔具有更大的擴(kuò)展性和兼容性6HTML文件的總體結(jié)構(gòu)

<html><head><title>文件標(biāo)題</title>:</head><body>::</body></html>表頭區(qū)主體區(qū)以<html>開(kāi)頭以</html>結(jié)尾HTML頁(yè)面結(jié)構(gòu)7

(X)HTML頁(yè)面結(jié)構(gòu)XHMTL頁(yè)面結(jié)構(gòu)<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">//關(guān)于文檔類型的說(shuō)明<htmlxmlns="/1999/xhtml">//聲明名字空間<head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>頁(yè)面標(biāo)題</title></head><body>這里是頁(yè)面內(nèi)容部分，注意內(nèi)容與瀏覽器邊緣的距離</body></html>8XHTML文件基本結(jié)構(gòu)說(shuō)明說(shuō)明：1、HTML只是一個(gè)純文本文件，由“顯示內(nèi)容”及“控制語(yǔ)句”兩部分組成2、規(guī)范的標(biāo)記方法為：

<標(biāo)簽屬性1=屬性值屬性2=屬性值…>受影響內(nèi)容</標(biāo)簽>3、由英文”<”和”>”括起來(lái)的一個(gè)單詞，例如<html>4、在XHTML中大部分的標(biāo)簽是成對(duì)出現(xiàn)的，第一個(gè)成為“起始”標(biāo)簽，第二個(gè)叫做“結(jié)束標(biāo)簽”，結(jié)束標(biāo)簽比起始標(biāo)簽多一個(gè)”/”，例如</html>5、標(biāo)簽之間相互嵌套來(lái)定義網(wǎng)頁(yè)中文字圖片的板式，但是先后順序必須一致。6、兩個(gè)標(biāo)簽之間定義的就是排版的內(nèi)容。7、html標(biāo)簽區(qū)分大小寫(xiě)，xhtml標(biāo)簽與屬性必須小寫(xiě)。9Meta標(biāo)簽什么叫Meta標(biāo)簽？1、meta是html語(yǔ)言head區(qū)的一個(gè)輔助性標(biāo)簽。2、也許你認(rèn)為這些代碼可有可無(wú)。其實(shí)如果你能夠用好meta標(biāo)簽，會(huì)給你帶來(lái)意想不到的效果，例如加入關(guān)鍵字會(huì)自動(dòng)被大型搜索網(wǎng)站自動(dòng)搜集；可以設(shè)定頁(yè)面格式及刷新等等。3、meta標(biāo)簽的組成

meta標(biāo)簽共有兩個(gè)屬性，它們分別是http-equiv屬性和name屬性，不同的屬性又有不同的參數(shù)值，這些不同的參數(shù)值就實(shí)現(xiàn)了不同的網(wǎng)頁(yè)功能。10Meta標(biāo)簽1、name屬性

name屬性主要用于描述網(wǎng)頁(yè)，與之對(duì)應(yīng)的屬性值為content，content中的內(nèi)容主要是便于搜索引擎機(jī)器人查找信息和分類信息用的。

meta標(biāo)簽的name屬性語(yǔ)法格式是：＜metaname="參數(shù)"content="具體的參數(shù)值"＞。

其中name屬性主要有以下幾種參數(shù)：11Meta標(biāo)簽

A、Keywords(關(guān)鍵字)

說(shuō)明：keywords用來(lái)告訴搜索引擎你網(wǎng)頁(yè)的關(guān)鍵字是什么。

舉例：＜metaname=“keywords”content=“science,education,culture,politics,ecnomics，relationships,entertaiment,human”＞

B、description(網(wǎng)站內(nèi)容描述)

說(shuō)明：description用來(lái)告訴搜索引擎你的網(wǎng)站主要內(nèi)容。

舉例：＜metaname="description"content="Thispageisaboutthemeaningofscience,education,culture."＞

12Meta標(biāo)簽C、robots(機(jī)器人向?qū)?

說(shuō)明：robots用來(lái)告訴搜索機(jī)器人哪些頁(yè)面需要索引，哪些頁(yè)面不需要索引。

content的參數(shù)有all,none,index,noindex,follow,nofollow。默認(rèn)是all。

舉例：＜metaname=“robots”content=“none”＞D、author(作者)

說(shuō)明：標(biāo)注網(wǎng)頁(yè)的作者

舉例：＜metaname="author"content="root,root@21"＞13Meta標(biāo)簽2、http-equiv屬性

http-equiv顧名思義，相當(dāng)于http的文件頭作用，它可以向?yàn)g覽器傳回一些有用的信息，以幫助正確和精確地顯示網(wǎng)頁(yè)內(nèi)容，與之對(duì)應(yīng)的屬性值為content，content中的內(nèi)容其實(shí)就是各個(gè)參數(shù)的變量值。

meat標(biāo)簽的http-equiv屬性語(yǔ)法格式是：＜metahttp-equiv="參數(shù)"content="參數(shù)變量值"＞；其中http-equiv屬性主要有以下幾種參數(shù)：14Meta標(biāo)簽A、Expires(期限)

說(shuō)明：可以用于設(shè)定網(wǎng)頁(yè)的到期時(shí)間。一旦網(wǎng)頁(yè)過(guò)期，必須到服務(wù)器上重新傳輸。

用法：＜metahttp-equiv="expires"content="Fri,12Jan200118:18:18GMT"＞

注意：必須使用GMT的時(shí)間格式。

B、Pragma(cache模式)

說(shuō)明：禁止瀏覽器從本地計(jì)算機(jī)的緩存中訪問(wèn)頁(yè)面內(nèi)容。

用法：＜metahttp-equiv="Pragma"content="no-cache"＞

注意：這樣設(shè)定，訪問(wèn)者將無(wú)法脫機(jī)瀏覽。15Meta標(biāo)簽

C、Refresh(刷新)

說(shuō)明：自動(dòng)刷新并指向新頁(yè)面。

用法：＜metahttp-equiv="Refresh"content="2；URL="＞

注意：其中的2是指停留2秒鐘后自動(dòng)刷新到URL網(wǎng)址。

D、Set-Cookie(cookie設(shè)定)

說(shuō)明：如果網(wǎng)頁(yè)過(guò)期，那么存盤(pán)的cookie將被刪除。

用法：＜metahttp-equiv="Set-Cookie"content="cookievalue=xxx;

expires=Friday,12-Jan-200118:18:18GMT；path=/"＞

注意：必須使用GMT的時(shí)間格式。16Meta標(biāo)簽E、Window-target(顯示窗口的設(shè)定)

說(shuō)明：強(qiáng)制頁(yè)面在當(dāng)前窗口以獨(dú)立頁(yè)面顯示。

用法：＜metahttp-equiv="Window-target"content="_top"＞

注意：用來(lái)防止別人在框架里調(diào)用自己的頁(yè)面。

F、content-Type(顯示字符集的設(shè)定)

說(shuō)明：設(shè)定頁(yè)面使用的字符集。

用法：＜metahttp-equiv="content-Type"content="text/html;charset=gb2312"＞17Meta標(biāo)簽功能

１、幫助主頁(yè)被各大搜索引擎登錄２、定義頁(yè)面的使用語(yǔ)言３、自動(dòng)刷新并指向新的頁(yè)面４、實(shí)現(xiàn)網(wǎng)頁(yè)轉(zhuǎn)換時(shí)的動(dòng)畫(huà)效果５、網(wǎng)頁(yè)定級(jí)評(píng)價(jià)６、控制頁(yè)面緩沖７、控制網(wǎng)頁(yè)顯示的窗口18XHTML與HTML的重要區(qū)別XHTML與HTML的重要區(qū)別（代碼規(guī)范）1.在XHTML中標(biāo)記名稱必須小寫(xiě)2.在XHTML中屬性名稱必須小寫(xiě)3.在XHTML中標(biāo)記必須嚴(yán)格嚴(yán)格嵌套4.在XHTML中標(biāo)記必須封閉5.在XHTML中，即使是空元素的標(biāo)記也必須封閉6.在XHTML中屬性值用雙引號(hào)括起來(lái)7.在XHTML中屬性值必須使用完整形式8.在XHTML中，應(yīng)該區(qū)分“內(nèi)容標(biāo)記”與“形式標(biāo)記”9.在XHTML1.0中,別用name用id:)name屬性是不贊成使用的,在以后的XHTML版本中將被刪除.19XHTML語(yǔ)法注意事項(xiàng)1、為圖片添加alt屬性

為所有圖片添加alt屬性。alt屬性指定了當(dāng)圖片不能顯示的時(shí)候就顯示供替換文本，這樣做對(duì)正常用戶可有可無(wú)，但對(duì)純文本瀏覽器和使用屏幕閱讀機(jī)的用戶來(lái)說(shuō)是至關(guān)重要的。只有添加了alt屬性，代碼才會(huì)被W3C正確性校驗(yàn)通過(guò)。注意的是我們要添加有意義的alt屬性，像下面這樣的寫(xiě)法毫無(wú)意義：<imgsrc=“l(fā)ogo.gif”alt=“l(fā)ogo.gif”>

正確的寫(xiě)法：

<imgsrc=“l(fā)ogo.gif”alt=“互動(dòng)力工作室標(biāo)志，點(diǎn)擊返回首頁(yè)”>

20XHTML語(yǔ)法注意事項(xiàng)2、給所有屬性值加引號(hào)

在HTML中，你可以不需要給屬性值加引號(hào)，但是在XHTML中，它們必須被加引號(hào)。還必須用空格分開(kāi)屬性。

例：<hrwidth="75%“size="7"/>這也是不正確的

3、關(guān)閉所有的標(biāo)簽

在XHTML中，每一個(gè)打開(kāi)的標(biāo)簽都必須關(guān)閉?？諛?biāo)簽也要關(guān)閉，在標(biāo)簽尾部使用一個(gè)正斜杠“/”來(lái)關(guān)閉它們自己。例如：<br/>

4、使用頁(yè)面注釋

XHTML中使用<!—和-->作為頁(yè)面注釋，其示例代碼如下：<!--這是一個(gè)注釋-->

說(shuō)明：在頁(yè)面相應(yīng)的位置使用注釋，可以使文檔結(jié)構(gòu)更加清晰。21XHTML開(kāi)發(fā)環(huán)境XHTML編寫(xiě)環(huán)境和測(cè)試方法1、記事本

（1）打開(kāi)記事本文件，編寫(xiě)HTML文件，保存為后綴為html的文件

（2）雙擊打開(kāi)該文件，即可在瀏覽器中查看2、Dreamweaver

（1）啟動(dòng)Dreamweaver軟件，新建HTML文件，在代碼視圖下編寫(xiě)HTML文件，保存；

（2）F12或是選擇菜單預(yù)覽，即可在瀏覽器中查看22(X)HTML標(biāo)簽（一）1、規(guī)范的標(biāo)記方法為：

<標(biāo)簽屬性1=“屬性值”屬性2=“屬性值”…>受影響內(nèi)容</標(biāo)簽>2、html3、head4、title5、body主要屬性：bgcolor:背景顏色background：背景圖片text：文字顏色link：設(shè)置鏈接文字顏色margin:邊距23（一）段落段落標(biāo)簽<p>是處理文字時(shí)常用到的標(biāo)簽，成對(duì)出現(xiàn)的標(biāo)簽<p>…</p>。見(jiàn)ch02\2.1\02.html文檔（二）換行單標(biāo)簽<br/>例：見(jiàn)ch02\2.1\03.html文檔使用段落標(biāo)記后的效果在段落內(nèi)部強(qiáng)制換行2.1文本排版2/5/2023（三）標(biāo)題標(biāo)題標(biāo)簽由6個(gè)級(jí)別從<h1>到<h6>,<h1>為最大標(biāo)題，<h6>為最小標(biāo)題，成對(duì)出現(xiàn)的標(biāo)簽，<h1>…</h1>。例：見(jiàn)ch02\2.1\04.html文檔屬性：align；值：right，center，left。段落與標(biāo)題的效果2.1.2設(shè)置標(biāo)題25（四）居中對(duì)齊<center></center>

例：見(jiàn)ch02\2.1\05.html文檔

居中顯示2.1.3使文字水平居中2/5/20232.1.4設(shè)置文字段落的縮進(jìn)（五）向右縮進(jìn)五個(gè)字符<blockquote></blockquote>

例：見(jiàn)ch02\2.1\06.html文檔縮進(jìn)顯示27（六）預(yù)排版

<pre>把預(yù)先排版好的格式保留下來(lái)，成對(duì)標(biāo)簽,<pre></pre>.

（七）水平線<hr/>在頁(yè)面中插入一條水平標(biāo)尺線，使文字分隔開(kāi)，單標(biāo)簽。主要屬性：Width:寬度Color:顏色Align:對(duì)齊方式Noshade:去掉水平線的陰影；

XHTML常用標(biāo)簽：文本排版2/5/2023（八）文字標(biāo)簽

<font>，成對(duì)標(biāo)簽，用于設(shè)置文字的大小、字體、字型、顏色、字號(hào)等，常用屬性如下：size:設(shè)置文字大小，取值范圍：1-7,-6~6face:設(shè)置字體，如：黑體、宋體、TimesNewRomancolor:設(shè)置文字顏色，如#000000,black文字列表的主要作用是有序地編排一些信息資源，使其結(jié)構(gòu)化和條理化，并以列表的樣式顯示出來(lái)，以便瀏覽者能更加快捷地獲得相應(yīng)信息。HTML中，文字列表主要分為無(wú)序列表、有序列表、定義列表三種，第一種每個(gè)列表項(xiàng)的前面有一個(gè)圓點(diǎn)符號(hào)，第二種則對(duì)每個(gè)列表項(xiàng)依次編號(hào)，第三種用于關(guān)鍵詞的解釋說(shuō)明。2.2文字列表項(xiàng)目列表使用的一對(duì)標(biāo)記是<ul></ul>，其中每一個(gè)列表項(xiàng)使用<li></li>，其結(jié)構(gòu)如下所示。<ul><li>第1項(xiàng)</li><li>第2項(xiàng)</li><li>第3項(xiàng)</li></ul>2.2.1建立無(wú)序列表無(wú)序列表有序列表和無(wú)序列表的使用方法基本相同，它使用標(biāo)記<ol></ol>，每一個(gè)列表項(xiàng)前使用<li>。每個(gè)項(xiàng)目都有前后順序之分，多數(shù)用數(shù)字表示，其結(jié)構(gòu)如下所示。<ol><li>第1項(xiàng)</li><li>第2項(xiàng)</li><li>第3項(xiàng)</li></ol>2.2.2建立有序列表有序列表2.2.3建立定義列表定義列表是一列事物以及其相關(guān)的解釋，定義義列表的開(kāi)始標(biāo)簽是<dl>，每個(gè)被解釋的事物的開(kāi)始標(biāo)簽為<dt>,每個(gè)解釋的內(nèi)容的開(kāi)始標(biāo)簽是<dd>。（1）<dl>…</dl>該元素用于定義一個(gè)釋義列表的開(kāi)始與結(jié)束（2）<dt>…</dt>該元素用來(lái)在釋義列表中創(chuàng)建一個(gè)上層項(xiàng)目（3）<dd>…</dd>該元素用來(lái)在釋義列表中創(chuàng)建一個(gè)上層項(xiàng)目2/5/2023通過(guò)上面幾個(gè)實(shí)例的應(yīng)用，用戶對(duì)文字的排版已有了一個(gè)基本認(rèn)識(shí)。到目前為止，都是通過(guò)HTML標(biāo)記對(duì)文字進(jìn)行編排，但版面編輯并不僅是如此，還可以利用一些HTML屬性更加靈活地編排網(wǎng)頁(yè)中的文字。在大多數(shù)HTML標(biāo)記中都可以加入屬性控制，屬性的作用是幫助HTML標(biāo)記進(jìn)一步控制HTML文件的內(nèi)容，如內(nèi)容的對(duì)齊方式，文字的大小、字體、顏色，網(wǎng)頁(yè)的背景樣式，圖片的插入等。2.3

HTML標(biāo)記與HTML屬性上一節(jié)中介紹過(guò)使用<center>標(biāo)記可以使文本水平居中，若希望右對(duì)齊，可以使用HTML的align屬性。2.3.1控制段落的水平位置段落對(duì)齊方式HTML中，不同的標(biāo)記會(huì)有各自不同的屬性，例如在前面曾介紹過(guò)的<body>標(biāo)記，使用它的屬性就可以控制網(wǎng)頁(yè)的背景以及文字字體的顏色。例如在上面的代碼中，將<body>一行改為：<bodytext="red"bgcolor="#000000">2.3.2設(shè)置背景顏色通過(guò)<body>標(biāo)記的屬性使用HTML標(biāo)記和屬性還可以設(shè)置文字的樣式。2.3.3文字的特殊樣式設(shè)置字體樣式標(biāo)記顯示效果<b></b>文字以粗體方式顯示<i></i>文字以斜體方式顯示<u></u>文字以加下劃線方式顯示<s></s>文字以加刪除線方式顯示<big></big>文字以放大方式顯示<small></small>文字以縮小方式顯示<strong></strong>文字以加強(qiáng)強(qiáng)調(diào)方式顯示<em></em>文字以強(qiáng)調(diào)方式顯示<address></address>用來(lái)顯示電子郵件地址或網(wǎng)址<code></code>用來(lái)說(shuō)明代碼與指令除了可以設(shè)置文字的樣式外，還可以使用<font>標(biāo)記設(shè)置字體相關(guān)的屬性。<font>標(biāo)記有3個(gè)主要屬性，分別用于設(shè)置文字的字體、大小和顏色。2.3.4文字的字體大小和顏色使用<font>標(biāo)記設(shè)置字體、大小和顏色前面介紹了HTML的標(biāo)記和屬性，但HTML樣式標(biāo)記和屬性是有很大局限性的。前面介紹了很多HTML標(biāo)記和HTML屬性，目的是使讀者更深入地理解HTML的原理，而實(shí)際上有一些標(biāo)記現(xiàn)在已經(jīng)過(guò)時(shí)了，并不鼓勵(lì)用戶使用，因?yàn)橛懈玫?、更科學(xué)的方法已經(jīng)出現(xiàn)了。這種更好、更科學(xué)的方法就是使用CSS來(lái)控制網(wǎng)頁(yè)的樣式。在互聯(lián)網(wǎng)發(fā)展的初期，各種規(guī)范還遠(yuǎn)沒(méi)有像今天這樣完善和普及，因此當(dāng)時(shí)為了更容易被大家和軟件廠商所接受，網(wǎng)頁(yè)主要是由HTML來(lái)完成的，這樣寫(xiě)起來(lái)更簡(jiǎn)單。一個(gè)網(wǎng)頁(yè)的兩個(gè)方面—“結(jié)構(gòu)”和“表現(xiàn)”都由HTML來(lái)承擔(dān)，因此HTML標(biāo)記就由兩類構(gòu)成——負(fù)責(zé)定義網(wǎng)頁(yè)結(jié)構(gòu)的標(biāo)記和負(fù)責(zé)定義網(wǎng)頁(yè)表現(xiàn)形式的標(biāo)記。例如，<p>標(biāo)記用來(lái)定義段落，這就是結(jié)構(gòu)標(biāo)記；而<font>標(biāo)記用于定義網(wǎng)頁(yè)元素的字體，這就是形式標(biāo)記。2.4

HTML標(biāo)記和屬性的局限性現(xiàn)在，網(wǎng)頁(yè)的功能已不再單純地傳播一些信息，它還包括傳播大量的專業(yè)技術(shù)知識(shí)，如數(shù)學(xué)、物理和化學(xué)知識(shí)等。HTML中有許多特殊符號(hào)，可以用來(lái)實(shí)現(xiàn)在網(wǎng)頁(yè)上顯示數(shù)學(xué)公式、化學(xué)方程式等特殊字符。2.5特殊文字符號(hào)在網(wǎng)頁(yè)中使用特殊符號(hào)運(yùn)算式圖片是網(wǎng)頁(yè)中不可缺少的元素，巧妙地在網(wǎng)頁(yè)中使用圖片可以為網(wǎng)頁(yè)增色不少。這里首先介紹在網(wǎng)頁(yè)中常用的3種圖片格式，然后再介紹如何在網(wǎng)頁(yè)中插入圖片，以及設(shè)置圖片的樣式和插入的位置。通過(guò)對(duì)本章的學(xué)習(xí)，讀者可以制作簡(jiǎn)單的圖文網(wǎng)頁(yè)，并根據(jù)自己的喜好制作出不同的圖片效果。在本章中，我們將事先準(zhǔn)備好的圖像插入網(wǎng)頁(yè)中，并使它按照我們需要的格式顯示。而在實(shí)際的工作中，需要的圖像可能并不存在，或者并不適合直接放入網(wǎng)頁(yè)，因此網(wǎng)頁(yè)設(shè)計(jì)師必須要掌握一定的圖片處理和實(shí)踐的能力。在本書(shū)后續(xù)章節(jié)將對(duì)網(wǎng)頁(yè)設(shè)計(jì)師所需的美術(shù)方面的技能進(jìn)行簡(jiǎn)要介紹，從而讓用戶掌握一定的圖像和動(dòng)畫(huà)的設(shè)計(jì)、加工、處理能力，以更好地掌握網(wǎng)頁(yè)設(shè)計(jì)的綜合能力。2.6使用圖像Web頁(yè)中通常使用的圖像文件有JPEG、GIF、PNG共3種格式，但大多數(shù)瀏覽器只支持JPEG、GIF兩種圖像格式。因?yàn)橐ＷC瀏覽者下載網(wǎng)頁(yè)的速度，所以網(wǎng)站設(shè)計(jì)者也常使用JPEG和GIF這兩種壓縮格式的圖像。1．GIF文件2．JPEG文件3．PNG文件2.6.1網(wǎng)頁(yè)中的圖像格式在網(wǎng)頁(yè)上使用圖片，對(duì)于視覺(jué)效果而言，能使網(wǎng)頁(yè)充滿生機(jī)，并且直觀且巧妙地表達(dá)出網(wǎng)頁(yè)的主題，這是僅靠文字很難達(dá)到的效果。一個(gè)精美的圖片網(wǎng)頁(yè)不但能引起瀏覽者對(duì)網(wǎng)頁(yè)瀏覽的興趣，而且在很多時(shí)候要通過(guò)圖片以及相關(guān)顏色的配合來(lái)做出本網(wǎng)站的網(wǎng)頁(yè)風(fēng)格。2.6.2簡(jiǎn)單案例在網(wǎng)頁(yè)中使用圖片對(duì)于路徑信息的說(shuō)明，通常分為以下兩種情況。（1）一種稱為相對(duì)路徑，也就是從自己的位置出發(fā)，依次說(shuō)明到達(dá)目標(biāo)文件的路徑。這就好像如果班主任要找本班的一名學(xué)生，只需直接說(shuō)名字即可，而校長(zhǎng)要找到一名學(xué)生，就還要說(shuō)明年級(jí)和班級(jí)。（2）另一種稱為絕對(duì)路徑，也就是先指明最高級(jí)的層次，然后依次向下說(shuō)明。例如要找外校的一名學(xué)生，就無(wú)法從本校為起點(diǎn)找到他，因此就可以說(shuō)“八一中學(xué)3年4班的張偉”，這就是絕對(duì)路徑的概念。2.6.3文件路徑文件系統(tǒng)結(jié)構(gòu)示意圖每一個(gè)圖像都有一定的尺寸，在Windows中可以方便地查看一個(gè)圖像文件的尺寸。在“我的電腦”中找到圖像文件，然后把鼠標(biāo)指針移動(dòng)到圖像文件上，停留幾秒鐘后，就會(huì)出現(xiàn)一個(gè)提示框，說(shuō)明圖像文件的尺寸?！俺叽纾?50×250”就表示該圖像的寬度和高度都是250像素。在HTML中，可以設(shè)定圖像的顯示大小，通常情況下都按照原本的大小顯示，當(dāng)然也可以任意設(shè)置不同于原本尺寸的顯示大小。2.7設(shè)置圖片的尺寸在Windows中查看圖像的尺寸文件系統(tǒng)結(jié)構(gòu)示意圖由于一些原因，圖像可能無(wú)法正常顯示，比如網(wǎng)絡(luò)速度太慢、瀏覽器版本過(guò)低等，因此應(yīng)該為圖像設(shè)置一個(gè)替換文本，用于圖像無(wú)法顯示的時(shí)候告訴瀏覽者該圖片的內(nèi)容。2.8設(shè)置圖像的替換文本顯示替換文本上一節(jié)中介紹了如何使用Dreamweaver可視化的方法制作網(wǎng)頁(yè)，實(shí)際上Dreamweaver也提供了方便的代碼編寫(xiě)功能。前面曾經(jīng)談到，頁(yè)面在瀏覽器中的最終顯示效果完全是由HTML代碼決定的，Dreamweaver只是幫助用戶方便地插入或者生成必要的代碼。在實(shí)際工作中，還是經(jīng)常會(huì)遇到通過(guò)可視化的方式生成的代碼并不能獲得最佳效果的情況，這時(shí)就需要設(shè)計(jì)師對(duì)代碼進(jìn)行手工調(diào)整，這個(gè)工作可以在Dreamweaver文檔窗口的“代碼”視圖中完成。在“代碼”視圖中，Dreamweaver也提供了很多方便的功能，可以幫助用戶更高效地完成代碼的輸入和編輯操作。2.10利用Dreamweaver代碼視圖提高效率在HTML以及本書(shū)后面要介紹的CSS中，都有很多種標(biāo)記、屬性和屬性值，都是英文單詞，因此設(shè)計(jì)師要把繁多的標(biāo)記、屬性和屬性值記清楚是很不容易的，而一旦拼寫(xiě)錯(cuò)誤，就無(wú)法得到正確的效果了。為此，Dreamweaver提供了很方便的代碼提示功能，可以大大減少設(shè)計(jì)者的記憶量，也可以盡可能避免拼寫(xiě)錯(cuò)誤。2.10.1代碼提示代碼提示功能代碼折疊是另一項(xiàng)Dreamweaver提供的輔助手段。當(dāng)頁(yè)面非常復(fù)雜的時(shí)候，代碼量就會(huì)很大，這時(shí)如果分析代碼就會(huì)感到很混亂，代碼折疊的功能就是可以暫時(shí)把某些部分的代碼收縮隱藏起來(lái)，便于設(shè)計(jì)師分析和編輯代碼。2.10.2代碼折疊選中一些代碼將代碼折疊起來(lái)文檔窗口中有3種視圖，其中“拆分”視圖就是把整個(gè)窗口分為左右兩半，左面顯示代碼，右面顯示設(shè)計(jì)視圖。2.10.3拆分視圖與代碼快速定位使用“拆分”視圖對(duì)代碼進(jìn)行快速定位在制作頁(yè)面是表格起到布局定位的作用，當(dāng)然也可以用來(lái)制作數(shù)據(jù)表。4.1使用表格建立一

溫馨提示

  • 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)論