網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言基礎(chǔ)_第1頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言基礎(chǔ)_第2頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言基礎(chǔ)_第3頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言基礎(chǔ)_第4頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言基礎(chǔ)_第5頁(yè)
已閱讀5頁(yè)，還剩13頁(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ì)語(yǔ)言基礎(chǔ)注意：本章涉及的程序代碼比較多，但是HTML語(yǔ)言是網(wǎng)頁(yè)設(shè)計(jì)人員必須掌握的基本知識(shí)，也是網(wǎng)頁(yè)設(shè)計(jì)和制作的基礎(chǔ)，所以希望大家能夠熟練地掌握本章的知識(shí)點(diǎn)，至少要熟悉常用的HTML語(yǔ)言。網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言基礎(chǔ)全文共18頁(yè)，當(dāng)前為第1頁(yè)。2.1HTML語(yǔ)言簡(jiǎn)介HTML語(yǔ)言是一種在使用轉(zhuǎn)義碼文檔中應(yīng)用的格式化語(yǔ)法。其提供一些語(yǔ)法標(biāo)記，再由瀏覽器解釋生成相應(yīng)的頁(yè)面。下面是一個(gè)簡(jiǎn)單的HTML語(yǔ)言的例子。<html><head><title>第一個(gè)主頁(yè)</title></head><body><p>大家好！</p></body></html>運(yùn)行效果（點(diǎn)擊）網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言基礎(chǔ)全文共18頁(yè)，當(dāng)前為第2頁(yè)。2.2基本頁(yè)面布局頁(yè)面的布局也是編寫(xiě)HTML文檔的一個(gè)重要內(nèi)容，良好的布局能夠產(chǎn)生良好的視覺(jué)效果，這也是網(wǎng)頁(yè)設(shè)計(jì)人員所追求的一個(gè)設(shè)計(jì)目標(biāo)。網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言基礎(chǔ)全文共18頁(yè)，當(dāng)前為第3頁(yè)。2.2.1HTML文檔的基本結(jié)構(gòu)HTML文檔包括文件頭、表頭和主體三部分。<html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"><title>這兒是標(biāo)題部分</title></head><body><p>這里是主體部分</p></body></html>運(yùn)行效果網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言基礎(chǔ)全文共18頁(yè)，當(dāng)前為第4頁(yè)。2.2.2常用頁(yè)面標(biāo)記1.基本標(biāo)記：<html>和</html>，<head>和</head>，<body>和</body>，<title>和</title>2.<meta>特殊信息標(biāo)記3.<hn>網(wǎng)頁(yè)子標(biāo)題標(biāo)記例2-2運(yùn)行效果4.<p>段落標(biāo)記和<br>換行標(biāo)記例2-3運(yùn)行效果5.<hr>水平線標(biāo)記例2-4運(yùn)行效果6.<pre>原文顯示標(biāo)記例2-5運(yùn)行效果網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言基礎(chǔ)全文共18頁(yè)，當(dāng)前為第5頁(yè)。2.2.3頁(yè)面布局綜合實(shí)例下面將介紹設(shè)計(jì)一個(gè)基本頁(yè)面布局的綜合實(shí)例，在這個(gè)實(shí)例中綜合運(yùn)用了<hr>、<hn>、<br>、<p>、<pre>等標(biāo)記。注意這個(gè)實(shí)例中各種標(biāo)記的使用情況，并結(jié)合前面的介紹深入掌握它們的用法。例2-6運(yùn)行效果網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言基礎(chǔ)全文共18頁(yè)，當(dāng)前為第6頁(yè)。2.3文本修飾為了使網(wǎng)頁(yè)內(nèi)容更加豐富多彩，文本的修飾是一個(gè)重要的環(huán)節(jié)。通過(guò)文本修飾，可以突出文檔中的重點(diǎn)內(nèi)容，避免整個(gè)文檔外觀上的單一化，從而產(chǎn)生良好的視覺(jué)效果。網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言基礎(chǔ)全文共18頁(yè)，當(dāng)前為第7頁(yè)。2.3.1文本修飾的主要標(biāo)記最主要的幾種標(biāo)記包括<font>、<b>、<i>、<u>、<align>等標(biāo)記。<font>基本字體標(biāo)記例2-7運(yùn)行效果2.字體效果<b>、<i>、<u>例2-8運(yùn)行效果3.align對(duì)齊方式左對(duì)齊：align=left右對(duì)齊：align=right居中對(duì)齊：align=center網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言基礎(chǔ)全文共18頁(yè)，當(dāng)前為第8頁(yè)。2.3.2文本修飾的其他標(biāo)記<blockquote>換行引用標(biāo)記2.<code>程序代碼標(biāo)記3.<sup>上標(biāo)字和<sub>下標(biāo)字4.<marquee>活動(dòng)字幕標(biāo)記例2-9運(yùn)行效果5.特殊字符注意：HTML語(yǔ)言不區(qū)分大小寫(xiě)，所以在使用標(biāo)記和對(duì)應(yīng)的參數(shù)時(shí)，無(wú)論大小寫(xiě)，對(duì)應(yīng)的都是相同的內(nèi)容。網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言基礎(chǔ)全文共18頁(yè)，當(dāng)前為第9頁(yè)。8.3.3文本修飾的綜合實(shí)例在這個(gè)實(shí)例中，采用對(duì)主標(biāo)題變字體、變顏色的方式，對(duì)次標(biāo)題則采用加粗變斜體等方式，突出了文檔的主題。加水平線有助于分隔文檔，加活動(dòng)字幕則增加整個(gè)文檔的動(dòng)感。例2-10運(yùn)行效果網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言基礎(chǔ)全文共18頁(yè)，當(dāng)前為第10頁(yè)。2.4超鏈接前面學(xué)習(xí)了基本的頁(yè)面布局和文本修飾，雖然已經(jīng)能夠制作簡(jiǎn)單的獨(dú)立頁(yè)面，但是這種頁(yè)面嚴(yán)格來(lái)說(shuō)還不能稱之為HTML頁(yè)面，因?yàn)檫@種頁(yè)面缺少HTML中最有特色、功能最強(qiáng)大的元素：超鏈接。網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言基礎(chǔ)全文共18頁(yè)，當(dāng)前為第11頁(yè)。2.4.1超鏈接的基本概念超鏈接是由鏈接文字、圖像及目標(biāo)塊組成。超鏈接的類型主要有兩種，即文本超鏈接和圖像超鏈接。鏈接的目標(biāo)可以是圖像、文字、頁(yè)面及其他格式的文件。在定義一個(gè)超鏈接的地點(diǎn)時(shí)可以選用兩種方式，絕對(duì)路徑和相對(duì)路徑。網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言基礎(chǔ)全文共18頁(yè)，當(dāng)前為第12頁(yè)。2.4.2創(chuàng)建超鏈接的方法由<a>標(biāo)記的語(yǔ)法結(jié)構(gòu)可以看出，由于HTML語(yǔ)言的超鏈接性，在設(shè)定一個(gè)超鏈接時(shí)有很多參數(shù)可供選擇，并能實(shí)現(xiàn)不同的鏈接效果。下面介紹一下幾個(gè)參數(shù)的含義：（1）class和id屬性：該屬性用于設(shè)定鏈接點(diǎn)所屬的類型和分配的ID號(hào)，通常不加以設(shè)定。（2）href屬性：該屬性用于設(shè)定鏈接地址，但是鏈接地址必須為URL地址，如果沒(méi)有給出具體路徑，則默認(rèn)路徑和當(dāng)前頁(yè)的路徑相同。（3）target屬性：該屬性可以在一個(gè)新窗口里打開(kāi)鏈接文件。（4）title屬性：該可以讓鼠標(biāo)指針懸停在超鏈接上的時(shí)候，顯示該超鏈接的文字注釋。例2-11

例2-12網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言基礎(chǔ)全文共18頁(yè)，當(dāng)前為第13頁(yè)。2.5.1圖像的基本知識(shí)圖像的種類：GIF格式和JPG格式GIF格式：支持256色模式，采用無(wú)損壓縮格式，圖像與原來(lái)的效果完全相同，但不支持真彩色圖像。JPG格式：支持16位真彩模式，采用有損壓縮模式，圖像質(zhì)量比原來(lái)稍差一些，但壓縮比最大。2.內(nèi)部圖像和外部圖像網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言基礎(chǔ)全文共18頁(yè)，當(dāng)前為第14頁(yè)。2.5.2HTML中的圖像標(biāo)記<img>基本圖像標(biāo)記例2-14運(yùn)行效果例2-15運(yùn)行效果2.<area>地圖作用區(qū)域標(biāo)記3.<map>設(shè)定地圖標(biāo)記運(yùn)行效果網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言基礎(chǔ)全文共18頁(yè)，當(dāng)前為第15頁(yè)。2.6表格表格是HTML頁(yè)面中十分重要的組成部分。首先，表格能夠把有關(guān)數(shù)字或信息集中起來(lái)，直觀地反映給用戶；其次，通過(guò)表格的使用，可以更好地組織頁(yè)面，使圖像、文字的混合排列變得更加容易，效果也好得多網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言基礎(chǔ)全文共18頁(yè)，當(dāng)前為第16頁(yè)。2.6.1表格的基本概念一個(gè)基本的網(wǎng)頁(yè)表格通常由表格的標(biāo)題、表欄、數(shù)據(jù)項(xiàng)、數(shù)據(jù)等元素組成。標(biāo)題表示了這個(gè)表格的主要內(nèi)容；表欄是指表格中一個(gè)個(gè)小的矩形區(qū)域，它用來(lái)存放數(shù)據(jù)等；數(shù)據(jù)項(xiàng)，又稱表頭，表示數(shù)據(jù)項(xiàng)所對(duì)應(yīng)的名稱；數(shù)據(jù)是指存放在表欄中的文字、

溫馨提示

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