網(wǎng)頁設(shè)計與制作課件 第4章 創(chuàng)建HTML5網(wǎng)頁中的文本與圖像_第1頁
網(wǎng)頁設(shè)計與制作課件 第4章 創(chuàng)建HTML5網(wǎng)頁中的文本與圖像_第2頁
網(wǎng)頁設(shè)計與制作課件 第4章 創(chuàng)建HTML5網(wǎng)頁中的文本與圖像_第3頁
網(wǎng)頁設(shè)計與制作課件 第4章 創(chuàng)建HTML5網(wǎng)頁中的文本與圖像_第4頁
網(wǎng)頁設(shè)計與制作課件 第4章 創(chuàng)建HTML5網(wǎng)頁中的文本與圖像_第5頁
已閱讀5頁，還剩29頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

創(chuàng)建HTML5網(wǎng)頁中的文本與圖像PowerPointdesign01網(wǎng)頁中的文本CONTENTS目錄網(wǎng)頁中的水平線02網(wǎng)頁中的圖像0301網(wǎng)頁中的文本Part01（1）新建一個記事本文檔，在文檔中輸入以下代碼<html><head><title>無標(biāo)題文檔</title></head><body><center><fontcolor=Black>泊船瓜洲</font><br><fontcolor=Red>京口瓜洲一水間，</font><br><fontcolor=#00FFFF>鐘山只隔數(shù)重山。</font><br><fontcolor=#Green>春風(fēng)又綠江南岸，</font><br><fontcolor=#800000>明月何時照我還？</font><br></center></body></html>課堂案例——輸入文本并設(shè)置顏色（2）將代碼另存為網(wǎng)頁文件，使用瀏覽器打開網(wǎng)頁。課堂案例——輸入文本并設(shè)置顏色0102<font>…</font>標(biāo)簽主要用來設(shè)置文字的屬性，比如字號、字體、文字顏色等。<font>標(biāo)簽有一個屬性size，通過指定size屬性就能設(shè)置字號大小，而size屬性的有效值范圍為1~7，其中默認(rèn)值為3。還可以在size屬性值之前加上＋、－字符，來指定相對于字號初始值的增量或減量。將代碼保存為HTML文件，然后使用瀏覽器瀏覽。設(shè)置文字字號0102<font>標(biāo)簽有一個屬性face，用face屬性可以設(shè)置文字的字體，其屬性值可以是任一字體類型，但只有對方的電腦中裝有相同的字體才可以在他的瀏覽器中出現(xiàn)預(yù)先設(shè)計的字體風(fēng)格。把代碼保存為HTML文件，然后使用瀏覽器瀏覽。為了讓文字富有變化，或者為了強調(diào)某一部分，HTML提供了一些標(biāo)簽產(chǎn)生這些效果。把代碼保存為HTML文件，然后使用瀏覽器瀏覽。設(shè)置文字的字體與樣式01<font>標(biāo)簽有一個屬性color，通過color屬性可以調(diào)整文字的顏色，將代碼保存為HTML文件，然后使用瀏覽器瀏覽。設(shè)置字體的顏色01在HTML5語言中，<sup>/<sup>標(biāo)簽可定義上標(biāo)文本，例如：2O2-，在HTML代碼中則需要寫成：2O<sup>2-</sup>。<sub></sub>標(biāo)簽可定義下標(biāo)文本，例如：H2O，在html代碼中則需要寫成：H<sub>2</sub>0。代碼保存為HTML文件，然后使用瀏覽器瀏覽。文體的上標(biāo)和下標(biāo)01在HTML中，插入特殊字符通常需要使用HTML實體（HTMLEntities）。HTML實體是特殊的字符串，用于表示預(yù)留的字符（如小于號<，大于號>）或無法在HTML鍵盤上直接鍵入的字符（如版權(quán)符號?。代碼保存為HTML文件，然后使用瀏覽器瀏覽。插入特殊字符0102在HTML中，可以使用兩種主要的列表類型：無序列表（UnorderedList）和有序列表（OrderedList）。下面講解它們的添加方法。有序列表

有序列表和無序號列表的使用方法基本相同，它使用標(biāo)簽<OL>…</OL>，每一個列表項前使用<LI>。每個項目都有前后順序之分，多數(shù)用數(shù)字表示。把代碼保存為HTML文件，然后使用瀏覽器瀏覽。列表無序列表無序號列表使用的一對標(biāo)簽是<ul>…</ul>，每一個列表項前使用<LI>，其基本語法如下。把代碼保存為HTML文件，然后使用瀏覽器瀏覽。03列表列表項中的嵌套列表HTML還可以在列表項中嵌套另一個列表，這通常用于表示層次結(jié)構(gòu)或分類。把代碼保存為HTML文件，然后使用瀏覽器瀏覽。網(wǎng)頁中的水平線Part02（1）新建一個記事本文檔，在文檔中輸入代碼。（2）在“記事本”文件中執(zhí)行“文件>另存為”命令，打開“另存為”對話框，在“保存類型”下拉列表中選擇“所有文件”，然后在“文件名”文本框中輸入文件名以及擴展名“在網(wǎng)頁中插入水平線.html”。（3）使用瀏覽器打開網(wǎng)頁，效果如圖4-12所示。課堂案例——在網(wǎng)頁中插入水平線水平線標(biāo)簽<hr>水平線標(biāo)簽<hr>可以在屏幕上顯示一條水平線，用以分割頁面中的不同部分，<hr>也是單標(biāo)簽。<hr>有4個屬性，分別是size、width、align和noshade，具體含義如下。

size：水平線的寬度。

width：水平線的長，用占屏幕寬度的百分比或象素值來表示。

align：水平線的對齊方式，有l(wèi)eft、right、center這3種模式。

noshade：線段無陰影屬性，為實心線段。課堂案例——在網(wǎng)頁中插入水平線標(biāo)簽<hr>線段粗細的設(shè)定HTML代碼如下。<html><head><title>標(biāo)簽<hr>線段粗細的設(shè)定</title></head><body><p>這是第一條線段，無size設(shè)定，取默認(rèn)值size=1來顯示<br><hr><p>這是第二條線段，size=6<br><hrsize=6><p>這是第三條線段，size=12<br><hrsize=12></body></html>把以上代碼保存為HTML文件，然后使用瀏覽器瀏覽。課堂案例——在網(wǎng)頁中插入水平線標(biāo)簽<hr>線段長度的設(shè)定HTML代碼如下。<html><head><title>標(biāo)簽<hr>線段長度的設(shè)定</title></head><body><p>這是第一條線段，無width設(shè)定，取width默認(rèn)值100%來顯示<br><hrsize=3><p>這是第二條線段，width=60（點數(shù)方式）<br><hrwidth=60size=5><p>這是第三條線段，width=50%（百分比方式）<br><hrwidth=50%size=8></body></html>把以上代碼保存為HTML文件，然后使用瀏覽器瀏覽。課堂案例——在網(wǎng)頁中插入水平線標(biāo)簽<hr>線段排列的設(shè)定HTML代碼如下。<html><head><title>標(biāo)簽<hr>線段排列的設(shè)定</title></head><body><p>這是第一條線段，無align設(shè)定，取默認(rèn)值center（居中）顯示<br><hrwidth=50%size=1><p>這是第二條線段，向左對齊<br><hrwidth=60%size=8align=left><p>這是第三條線段，向右對齊<br><hrwidth=80%size=3align=right></body></html>把以上代碼保存為HTML文件，然后使用瀏覽器瀏覽。課堂案例——在網(wǎng)頁中插入水平線網(wǎng)頁中的圖像Part03（1）新建一個記事本文檔，在文檔中輸入以下代碼。<html><head><title>在網(wǎng)頁中插入圖像</title></head><body></body></html>（2）在<body>與</body>標(biāo)簽之間輸入代碼。<imgsrc="images/tu.jpg">提示<imgsrc="">標(biāo)簽之間的""中就是要插入圖像的地址和名稱，本例中就表示插入的是images文件夾中的名為tu的jpg圖像。（3）將以上代碼保存為HTML文件，打開網(wǎng)頁。課堂案例——在網(wǎng)頁中插入圖像圖片帶給我們豐富的色彩與強烈的沖擊力，正是圖片給了網(wǎng)頁修飾與點綴。合理的利用圖片，會給人們帶來美的享受。如果網(wǎng)頁中沒有了圖片，光是純文字頁面該是多么的單調(diào)。圖片有多種格式，如：JPG、BMP、TIF、GIF、PNG等?；ヂ?lián)網(wǎng)上大部分使用JPG和GIF兩種格式，因為它們具有壓縮比例高的優(yōu)點，而且各個操作系統(tǒng)都可使用。下面簡單介紹一下常用的圖像文件存儲格式。1．GIFGIF格式使圖形文件的體積大大縮小，并基本保持了圖片的原貌。為方便傳輸，在制作主頁時一般都采用GIF格式的圖片。此種格式的圖像文件最多可以顯示256種顏色，在網(wǎng)頁制作中，適用于顯示一些不間斷色調(diào)或大部分為同一色調(diào)的圖像。還可以將其作為透明的背景圖像，作為預(yù)顯示圖像或在網(wǎng)頁頁面上移動的圖像。2．JPGJPG圖片格式是在Internet上被廣泛支持的圖像格式，JPG是一種以損失質(zhì)量為代價的壓縮方式，壓縮比越高，圖像質(zhì)量損失越大，適用于一些色彩比較豐富的照片以及24位圖像。這種格式的圖像文件能夠保存數(shù)百萬種顏色，適用于保存一些具有連續(xù)色調(diào)的圖像。3．PNGPNG是PortableNetworkGraphic的縮寫。這種格式的圖像文件可以完全替換GIF文件，而且無專利限制。非常適合Adobe公司的Fireworks圖像處理軟件，能夠保存圖像中最初的圖層、顏色等信息。目前，各種瀏覽器對JPG和GIF圖像格式的支持情況最好。由于PNG文件較小，并且具有較大的靈活性，所以它非常適合用作網(wǎng)頁圖像。但是，某些瀏覽器版本不支持PNG圖像，因此，它在網(wǎng)頁中的使用受到一定程度的限制。除非特別必要，在網(wǎng)頁中一般都使用JPG或GIF格式的圖像。圖像的基本格式插入圖像的標(biāo)簽是<img>，其基本語法如下。<imgsrc="圖形文件地址">src屬性指明了所要鏈接的圖像文件地址，這個圖形文件可以是本地計算機上的圖形，也可以是位于遠端服務(wù)器上的圖形。地址的表示方法同超級鏈接中URL地址表示方法相同，例如<imgsrc="images/123.jpg">。img還有兩個屬性是height和width，分別表示圖形的高和寬。通過這兩個屬性，可以改變圖形的大小。如果沒有設(shè)置圖像大小，則圖像按照原始大小顯示，具體示例如下。<html><head><title>設(shè)置圖像</title></head><body><imgsrc="xiaochuan.jpg"></body></html>將以上代碼保存為HTML文件，使用瀏覽器瀏覽。設(shè)置圖像屬性設(shè)置height和width屬性，請看以下示例代碼。<html><head><title>設(shè)置圖像</title></head><body><imgsrc="xiaochuan.jpg"width="500"height="400"></body></html>將以上代碼保存為HTML文件，使用瀏覽器瀏覽。設(shè)置圖像屬性由img中的align屬性來設(shè)置圖文的對齊方式，有以下幾種對齊方式。align=top：文本的頂部對齊。align=middle：文本的中央對齊。align=bottom：文本的底部對齊。align=texttop：圖像的頂線對齊。align=baseline：圖像的基線對齊。align=left：圖像的靠左對齊。align=right：圖像的靠右對齊。下面將分別舉例說明圖像與文本的各種對齊方式。1．圖像與文本的頂部對齊圖像與網(wǎng)頁文字的對齊方式2．圖像與文本的中央對齊請看以下示例代碼。<html><head><title>圖像與文本的中央對齊</title></head><body><imgsrc="images/kf.jpg"align=middle>清晨的咖啡</body></html>將以上代碼保存為HTML文件，使用瀏覽器瀏覽。圖像與網(wǎng)頁文字的對齊方式3．圖像與文本的底部對齊請看以下示例代碼。<html><head><title>圖像與文本的底部對齊</title></head><body><imgsrc="images/kf.jpg"align=bottom>清晨的咖啡</body></html>將以上代碼保存為HTML文件，使用瀏覽器瀏覽。圖像與網(wǎng)頁文字的對齊方式4．圖像的頂線對齊請看以下示例代碼。<html><head><title>圖像頂線對齊</title></head><body><imgsrc="images/kf.jpg"align=texttop>清晨的咖啡</body></html>將以上代碼保存為HTML文件，使用瀏覽器瀏覽。圖像與網(wǎng)頁文字的對齊方式5．圖像的基線對齊請看以下示例代碼。<html><head><title>圖像的基線對齊</title></head><body><imgsrc="images/kf.jpg"align=baseline>清晨的咖啡</body></html>將以上代碼保存為HTML文件，使用瀏覽器瀏覽。圖像與網(wǎng)頁文字的對齊方式6．圖像的靠左對齊請看以下示例代碼。<html><head><title>圖像的靠左對齊</title></head><body><imgsrc="images/kf.jpg"align=left>清晨的咖啡，提神醒腦，讓人充滿干勁。</body></html>將以上代碼保存為HTML文件，使用瀏覽器瀏覽。圖像與網(wǎng)頁文字的對齊方式7．圖像的靠右對齊請看以下示例代碼。<html><head><title>圖像的靠右對齊</title></head><body><imgsrc="images/kf.jpg"align=right>清晨的咖啡，提神醒腦，讓人充滿干勁。</body></html>將以上代碼保存為HTML文件，使用瀏覽器瀏覽。圖像與網(wǎng)頁文字的對齊方式在HTML5文件里，圖像水平位置的距離配置是通過設(shè)置hspace屬性來完成，圖像垂直位置的距離配置是通過設(shè)置vspace來實現(xiàn)的。關(guān)于hspace屬性的設(shè)置，請看以下示例代碼。<html><head><title>圖像的水平距離設(shè)置</title></head><body><imgsrc="images/kf.jpg"hspace=80>清晨的咖啡</body></html>將以上代碼保存為HTML文件，使用瀏覽器瀏覽。圖像與文字之間的距離圖形按鈕就是用戶通過單擊圖像，從而鏈接到某個地址上去。這與超級鏈接相同，基本語法如下。<ahref="資源地址"><im

溫馨提示

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

最新文檔

評論

0/150

提交評論