Web頁(yè)面制作基礎(chǔ)課件_第1頁(yè)
Web頁(yè)面制作基礎(chǔ)課件_第2頁(yè)
Web頁(yè)面制作基礎(chǔ)課件_第3頁(yè)
Web頁(yè)面制作基礎(chǔ)課件_第4頁(yè)
Web頁(yè)面制作基礎(chǔ)課件_第5頁(yè)
已閱讀5頁(yè)，還剩29頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

Web頁(yè)面制作基礎(chǔ)2.1HTML語(yǔ)言概述

2.1.1HTML概述

HTML是（HyperTextMarkupLanguage，超文本標(biāo)記語(yǔ)言）的縮寫(xiě)，用來(lái)表示網(wǎng)上信息的符號(hào)標(biāo)記語(yǔ)言。

HTML最早源于SGML語(yǔ)言.HTML語(yǔ)言?xún)?nèi)容豐富，從功能上大體可分為：文本結(jié)構(gòu)設(shè)置、列表建立、文本屬性制定、超鏈接、圖片和多媒體插入、對(duì)象、表格以及窗體的操作。

2.1HTML語(yǔ)言概述2.1.2HTML文檔的結(jié)構(gòu)包括HEAD、TITLE、BODY三部分，下面是基本結(jié)構(gòu)：

<HTML><HEAD>

標(biāo)題部分

</HEAD><BODY>

正文部分

</BODY></HTML>

2.1HTML語(yǔ)言概述2.1.3HTML標(biāo)記

1．HTML文檔標(biāo)記格式：<HTML>…</HTML>標(biāo)志文件開(kāi)始和結(jié)尾的標(biāo)記。

2．HTML文件頭標(biāo)記格式：<HEAD>…</HEAD>用于包含文件的基本信息。

3．HTML文件主體標(biāo)記格式：<BODY>…</BODY>文件主體標(biāo)記。注意：<HEAD>與<BODY>為獨(dú)立的兩個(gè)部分，不能互相嵌套。2.1HTML語(yǔ)言概述2.1.4常用HTML編輯工具任何一個(gè)文檔編輯器都是HTML編輯器。為了減少網(wǎng)頁(yè)設(shè)計(jì)師的工作設(shè)計(jì)了專(zhuān)用的網(wǎng)頁(yè)編輯器，像Dreamweaver、FrontPage、CutePage、QuickSite等，是專(zhuān)門(mén)用來(lái)制作網(wǎng)頁(yè)的，具有所見(jiàn)即所得的功能。所見(jiàn)即所得的概念。本書(shū)例題均在FrontPage2000編輯環(huán)境中調(diào)試并通過(guò)。2.2文本的格式與風(fēng)格

2.2.1設(shè)置<BODY>的屬性1．<BODY>屬性概述

background屬性bgcolor屬性bgproperties屬性link，vlink，alink屬性L(fǎng)eftmargin，topmargin屬性Margingwidth，marginheight屬性2．FrontPage2000中的實(shí)現(xiàn)2.2文本的格式與風(fēng)格2.2.2段落格式化1．標(biāo)題標(biāo)記格式：<H1>…</H1>，<H2>…</H2>…<H6>…</H6>設(shè)置各種大小不同標(biāo)題的標(biāo)記。2．段落標(biāo)記格式：<P>…</P>設(shè)置段落標(biāo)記。3．預(yù)定格式標(biāo)記格式：<PRE>…</PRE>在瀏覽器中瀏覽時(shí)，按照文檔中預(yù)先排好的形式顯示內(nèi)容。2.2文本的格式與風(fēng)格4．分區(qū)顯示標(biāo)記格式：<DIV>…</DIV>分區(qū)顯示標(biāo)記。5．詞標(biāo)記這種標(biāo)記有兩種：<BR>和<HR>格式：<BR>強(qiáng)制進(jìn)行換行標(biāo)記。格式：<HR>插入水平線(xiàn)標(biāo)記。6．注釋標(biāo)記格式：<!--注釋內(nèi)容-->注釋標(biāo)記。

2.2文本的格式與風(fēng)格2.2.4建立列表1．有序列表格式：<OLtype="符號(hào)類(lèi)型"><LItype=”符號(hào)類(lèi)型”>…</LI><LItype=”符號(hào)類(lèi)型”>…</LI>

…</OL>功能：建立有序列表。

2.2文本的格式與風(fēng)格2．無(wú)序列表格式：<ULtype=”符號(hào)類(lèi)型”><LItype=”符號(hào)類(lèi)型”>…</LI><LItype=”符號(hào)類(lèi)型”>…</LI>

…</UL>功能：建立無(wú)序列表。2.2文本的格式與風(fēng)格3．自定義列表格式：<DL><DT>…</DT><DD>…</DD><DT>…</DT><DD>…</DD>

…</DL>注意：根據(jù)文檔的具體要求，列表可以嵌套使用。在FrontPage2000中實(shí)現(xiàn)。2.2文本的格式與風(fēng)格2.2.5字符的格式化1．字體設(shè)置標(biāo)記格式：<FONT>…</FONT>功能：設(shè)置字體格式標(biāo)記。<FONT>標(biāo)記提供了幾種屬性：size：設(shè)置文字的大小。face：設(shè)置字體。color：設(shè)置文字的顏色。2.2文本的格式與風(fēng)格其他標(biāo)記格式功能<U>…</U>給字符加下劃線(xiàn)<S>…</S>給字符上加橫線(xiàn)，表示刪除<B>…</B>給字符加粗<I>…</I>將字符設(shè)置成斜體<BLINK>…</BLINK>標(biāo)記使得其中的文字產(chǎn)生閃爍的效果2.3加入多媒體與超級(jí)鏈接2.3.1加入圖像、視頻、動(dòng)畫(huà)圖像在網(wǎng)頁(yè)設(shè)計(jì)中是必不可少的，所以用戶(hù)應(yīng)掌握在網(wǎng)頁(yè)中操作圖像的方法。格式：<IMG>…</IMG>

功能：在網(wǎng)頁(yè)中加入圖像、視頻、動(dòng)畫(huà)等。

2.3加入多媒體與超級(jí)鏈接標(biāo)記屬性功能src=URL通過(guò)URL給出圖像來(lái)源的位置，不可缺省width=size設(shè)置圖像寬度height=size設(shè)置圖像高度alt=txt設(shè)置在圖像未載入前圖片位置顯示的文字border=size設(shè)置圖像邊框，缺省為0align=alignstyle設(shè)置對(duì)齊方式。取值為：top，middle，bottom，aleft，righthspace=size設(shè)置圖片左右邊沿空白vspace=size設(shè)置圖片上下邊沿空白1．插入圖像

2.3加入多媒體與超級(jí)鏈接2．插入視頻

標(biāo)記屬性功能dynsrc=URL設(shè)置多媒體來(lái)源位置loop=size設(shè)置視頻播放的次數(shù)loopdelay=time設(shè)置兩次播放的間隔時(shí)間start=value指定何時(shí)開(kāi)始播放視頻文件使用FrontPage2000在網(wǎng)頁(yè)中插入多媒體

2.3加入多媒體與超級(jí)鏈接2.3.2加入超級(jí)鏈接格式：<A>…</A>

標(biāo)記屬性功能href=URL給定鏈接目標(biāo)的位置target=frametarget設(shè)置顯示鏈接目標(biāo)的框架accesskey=character設(shè)置快捷鍵tabindex=num設(shè)置Tab鍵的順序rel=linktype設(shè)置到鏈接的關(guān)系2.4制作表格

2.4.1建立表格創(chuàng)建表格是規(guī)劃頁(yè)面最常用的方法。格式：<TABLE>…</TABLE>功能：創(chuàng)建表格進(jìn)行頁(yè)面設(shè)計(jì)。

在瀏覽器中顯示時(shí)，表格的整體外觀(guān)由<TABLE>標(biāo)記的屬性決定。2.4制作表格標(biāo)記屬性功能border=size設(shè)置表格邊框大小width=size設(shè)置表格的寬度height=size設(shè)置表格的高度cellspacing=size設(shè)置單元格間距cellpadding=size設(shè)置單元格的填充距background=URL設(shè)置表格背景圖片bgcolor=colorvalue設(shè)置表格背景色align=alignstyle設(shè)置對(duì)齊方式cols=size設(shè)置表格的列數(shù)2.4制作表格2.4.2定制表格使用<TABLE>只是定義空表格，還需要定義行和單元格。格式：<TR>…</TR>功能：定義表格的一行。對(duì)于每一行，可以定義行屬性

2.4制作表格標(biāo)記屬性功能bgcolor=colorvalue設(shè)置行背景顏色。align=alignstyle設(shè)置行對(duì)齊方式。valign=valignstyle設(shè)置單元格垂直對(duì)齊方式。行屬性：2.4制作表格單元格屬性：標(biāo)記屬性功能bgcolor=colorvalue設(shè)置單元格背景顏色rowspan=num設(shè)置單元格所占的行數(shù)colspan=num設(shè)置單元格所占的列數(shù)align=alignstyle設(shè)置對(duì)齊方式valign=valignstyle設(shè)置單元格垂直對(duì)齊方式width=size設(shè)置單元格寬度height=size設(shè)置單元格高度格式：<CAPTION>…</CAPTION>定義表格說(shuō)明，通過(guò)屬性align設(shè)置標(biāo)題的對(duì)齊方式。

2.5制作表單

2.5.1表單的結(jié)構(gòu)

格式：<FORM>…</FORM>定義表單。

標(biāo)記屬性功能action=URL設(shè)置處理表單的程序method=postmethod設(shè)置發(fā)送表單的HTTP方法enctype=contenttype設(shè)置發(fā)送表單的內(nèi)容屬性onsubmit=script設(shè)置被發(fā)送事件target=frametarget設(shè)置顯示表單內(nèi)容的窗口accept-charset=cdata設(shè)置可支持的字符列表2.5制作表單2.5.2FORM中常用的標(biāo)記

1．輸入域（1）單行輸入域<INPUT>1）text類(lèi)型

2）password類(lèi)型

3）radio類(lèi)型

4）checkbox類(lèi)型5）submit類(lèi)型

6）reset類(lèi)型

7）hidden類(lèi)型

2.5制作表單（2）多行輸入域標(biāo)記<TEXTAREA>標(biāo)記屬性功能name=cdata設(shè)置FORM提交的輸入信息的名稱(chēng)rows=num設(shè)置文本域的行數(shù)cols=num設(shè)置文本域的列數(shù)tabindex=num設(shè)置tab鍵的次序2.5制作表單2．按鈕

<BUTTON>

標(biāo)記屬性功能name=cdata設(shè)置已發(fā)送表單的關(guān)鍵字。value=cdata設(shè)置已發(fā)送表單的值。type=buttontype設(shè)置按鈕的類(lèi)型。tabindex=num設(shè)置tab鍵的次序。2.5制作表單3．選擇域格式：

<SELECT><OPTION>選項(xiàng)一

<OPTION>選項(xiàng)二

…</SELECT>功能：定義選擇欄。

2.5制作表單2.5.3表單的處理處理信息時(shí)，經(jīng)常配合表格標(biāo)記，使用循環(huán)輸出的方法。

2.6框架結(jié)構(gòu)

2.6.1框架結(jié)構(gòu)的文件格式<HTML><HEAD>

…</HEAD>

注意：在老版本的瀏覽器<FRAMESET>

可能不支持框架結(jié)構(gòu)。

<FRAME>

…<FRAME>

…</FRAMESET></HTML>

2.6框架結(jié)構(gòu)2.6.2框架結(jié)構(gòu)標(biāo)記的使用格式：<FRAMESET>…</FRAMESET>標(biāo)記屬性功能rows=size設(shè)置多重框架的高度cols=size設(shè)置多重框架的寬度onload=script設(shè)置框架被載入的事件onunload=script設(shè)置框架被卸載的事件2.6框架結(jié)構(gòu)2.6.3FRAME標(biāo)記

標(biāo)記屬性功能src=URL設(shè)置要鏈接到的HTML文件name=framename表示子窗口的名字marginwidth=size用來(lái)控制顯示內(nèi)容和窗口左右邊界的距離，默認(rèn)為1marginheight=size用來(lái)控制顯示內(nèi)容和窗口上下邊界的距離，默認(rèn)為1scrolling=scrollingstyle

指定子窗口是否使用滾動(dòng)條，有YES/NO/AUTO三個(gè)值，默認(rèn)AUTO，即根據(jù)窗口內(nèi)容決定是否有滾動(dòng)條noresize使用該屬性后，指定窗口不能調(diào)整窗口大小2.6框架結(jié)構(gòu)2.6.4TARGET屬性的使用三種常見(jiàn)的用法：1．用于A(yíng)標(biāo)記2．用于BASE標(biāo)記3．用于FORM標(biāo)記

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶(hù)所有。
  • 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ì)用戶(hù)上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶(hù)上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶(hù)因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論