ASP程序設(shè)計及應(yīng)用（第二版）課件第2章 Web頁面制作基礎(chǔ)_第1頁
ASP程序設(shè)計及應(yīng)用（第二版）課件第2章 Web頁面制作基礎(chǔ)_第2頁
ASP程序設(shè)計及應(yīng)用（第二版）課件第2章 Web頁面制作基礎(chǔ)_第3頁
ASP程序設(shè)計及應(yīng)用（第二版）課件第2章 Web頁面制作基礎(chǔ)_第4頁
ASP程序設(shè)計及應(yīng)用（第二版）課件第2章 Web頁面制作基礎(chǔ)_第5頁
已閱讀5頁，還剩40頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

第2章

Web頁面制作基礎(chǔ)

2.1HTML語言概述

2.2文檔的格式與風(fēng)格

2.3加入多媒體與超級鏈接

2.4制作表格

2.5制作表單

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

2.7CSS基礎(chǔ)

2.8XML基礎(chǔ)2.1HTML語言概述

WWW（WorldWideWeb，萬維網(wǎng)）拉進了人們彼此間的距離，使得人與人之間的信息交流變得更加簡便和快捷。WWW上的信息，大部分是通過HTML語言發(fā)布的。本章首頁2.1HTML語言概述

2.1.1HTML概述

HTML是（HyperTextMarkupLanguage，超文本標(biāo)記語言）的縮寫，最早源于SGML語言。HTML用來表示網(wǎng)上信息的符號標(biāo)記語言。在WWW上，發(fā)布信息通常使用HTML，它是Web頁面的基礎(chǔ)，任何一個Web頁面都離不開HTML，而且HTML也是Web應(yīng)用開發(fā)的基礎(chǔ)。

HTML語言是大多數(shù)瀏覽器都能識別的語言，使用HTML語法規(guī)則建立的文本可以運行在不同的操作系統(tǒng)平臺上，而且能被大多數(shù)用戶所接受。

2.1HTML語言概述

2.1.2文檔的結(jié)構(gòu)

<HTML><HEAD>

頭部信息

</HEAD><BODY>

正文部分

</BODY></HTML>

文件開頭和結(jié)尾由<HTML>和</HTML>來標(biāo)記。<HEAD>和</HEAD>標(biāo)記頭部，用來包含文件的基本信息；<BODY>和</BODY>標(biāo)記正文部分，是整個文件的主體部分。

2.1HTML語言概述

<HTML><HEAD><TITLE>這是標(biāo)題部分。</TITLE></HEAD><BODY><P>你好，這是正文部分！</P></BODY></HTML>2.1HTML語言概述

2.1.3HTML標(biāo)記

1．HTML文檔標(biāo)記格式：<HTML>…</HTML>

功能：標(biāo)志文檔開始和結(jié)尾的標(biāo)記。

2．HTML文件頭標(biāo)記格式：<HEAD>…</HEAD>

功能：用于包含文件的基本信息。

3．HTML文件主體標(biāo)記格式：<BODY>…</BODY>

功能：文件主體標(biāo)記。

2.1HTML語言概述

2.1.4常用HTML編輯工具任何一個文檔編輯器都是HTML編輯器。為了減少網(wǎng)頁設(shè)計師的工作，使設(shè)計網(wǎng)頁更加的方便，很多公司設(shè)計了專用的網(wǎng)頁編輯器，像Dreamweaver，F(xiàn)rontPage，CutePage，QuickSite等，是專門用來制作網(wǎng)頁的，利用它們可以很容易的編寫出精美的網(wǎng)頁，具有所見即所得的功能。所謂所見即所得，就是在編輯網(wǎng)頁時看到的效果，與使用瀏覽器時顯示的效果基本一致。

2.2文檔的格式與風(fēng)格在大多數(shù)網(wǎng)頁中，文檔是核心的內(nèi)容，只有設(shè)置適當(dāng)?shù)奈臋n格式，才能得到絢麗多彩的網(wǎng)頁。設(shè)置文檔的格式包括：設(shè)置標(biāo)題和文字的字體、字號、字型、顏色，段落格式、文本布局等。本章首頁2.2文檔的格式與風(fēng)格2.2.1設(shè)置<BODY>的屬性標(biāo)記屬性功能background=URL設(shè)置網(wǎng)頁的背景圖片bgcolor=colorvalue設(shè)置網(wǎng)頁的背景顏色text=colorvalue設(shè)置文本的顏色link=colorvalue設(shè)置尚未被訪問過的超文本鏈接的顏色，默認(rèn)為藍色vlink=colorvalue設(shè)置已被訪問過的超文本鏈接的顏色，默認(rèn)為紫色alink=colorvalue設(shè)置超文本鏈接在被單擊的瞬間的顏色，默認(rèn)為紅色bgproperties=fixed設(shè)置背景是否隨滾動條滾動leftmargin=size設(shè)置網(wǎng)頁左邊的空白topmargin=size設(shè)置網(wǎng)頁上方的空白margingwidth=size設(shè)置網(wǎng)頁空白的寬度marginheight=size設(shè)置網(wǎng)頁空白的高度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>

2.2文檔的格式與風(fēng)格4．分區(qū)顯示標(biāo)記格式：<DIV>…</DIV>功能：分區(qū)顯示標(biāo)記。5．換行標(biāo)記格式：<BR>功能：強制換行。6．水平線標(biāo)記格式：<HR>功能：插入水平線標(biāo)記。

7．注釋標(biāo)記格式：<!--注釋內(nèi)容-->功能：注釋標(biāo)記。

2.2文檔的格式與風(fēng)格<HTML><HEAD><TITLE>標(biāo)記的使用</TITLE></HEAD><BODY><！--注釋

本程序的功能是：

制作簡單網(wǎng)頁熟悉基本標(biāo)記的使用！

--><Palign=center>三種標(biāo)記的使用！</P><HR><DIValign=center>我在中間！<BR>中間</DIV><HR><DIValign=left>我在左邊！<BR>左邊</DIV><HR><DIValign=right>我在右邊！<BR>右邊</DIV><HR></BODY></HTML>

2.2文檔的格式與風(fēng)格2.2.3

建立列表1．有序列表格式：<OLtype="符號類型"><LItype="符號類型">…</LI><LItype="符號類型">…</LI>

…</OL>type屬性：數(shù)字（1，2，…）、大寫英文字母（A，B，…）、小寫英文字母（a，b，…）、大寫羅馬字母（I，II，…）和小寫羅馬字母（i，ii，…），默認(rèn)的序號是數(shù)字。

2.2文檔的格式與風(fēng)格2.2.3

建立列表2．無序列表格式：<ULtype="符號類型"><LItype="符號類型">…</LI><LItype="符號類型">…</LI>

…</UL>type屬性：可以為disc（實心圓點）、circle（空心圓點）、square（方塊）和自定義圖片，默認(rèn)為實心圓點。

2.2文檔的格式與風(fēng)格2.2.3

建立列表3．自定義列表格式：<DL><DT>…</DT><DD>…</DD><DT>…</DT><DD>…</DD>

…</DL>

<DL>定義列表；<DT>定義列表項，項目會自動換行并左對齊，但項目間沒有空行；<DD>用來定義語句。

2.2文檔的格式與風(fēng)格2.2.4字符的格式化1．字體設(shè)置標(biāo)記格式：<FONT>…</FONT>功能：設(shè)置字體格式標(biāo)記。

標(biāo)記屬性功能size=size設(shè)置文字的大小face=fontstyle設(shè)置字體color=colorvalue設(shè)置文字的顏色2.2文檔的格式與風(fēng)格2.2.4字符的格式化2．其他標(biāo)記其他標(biāo)記格式功能<U>…</U>給字符加下劃線<S>…</S>給字符上加橫線，表示刪除<B>…</B>給字符加粗<I>…</I>將字符設(shè)置成斜體<BLINK>…</BLINK>標(biāo)記使得其中的文字產(chǎn)生閃爍的效果2.3加入多媒體與超級鏈接圖像的出現(xiàn)為本來單調(diào)乏味的網(wǎng)絡(luò)世界增添了一道亮麗的風(fēng)景線。圖像在網(wǎng)頁設(shè)計中是必不可少的，所以用戶應(yīng)該掌握在網(wǎng)頁中操作圖像的方法。本章首頁2.3加入多媒體與超級鏈接插入多媒體的一般形式：格式：<IMG>…</IMG>功能：在網(wǎng)頁中加入圖像、視頻、動畫等。

2.3加入多媒體與超級鏈接1．插入圖像標(biāo)記屬性功能src=URL通過URL給出圖像來源的位置，不可缺省width=size設(shè)置圖像寬度height=size設(shè)置圖像高度alt=txt設(shè)置在圖像未載入前圖片位置顯示的文字border=size設(shè)置圖像邊框，缺省為0align=alignstyle設(shè)置對齊方式。取值為：top，middle，bottom，left，righthspace=size設(shè)置圖片左右邊沿空白vspace=size設(shè)置圖片上下邊沿空白2.3加入多媒體與超級鏈接2．插入視頻標(biāo)記屬性功能dynsrc=URL設(shè)置多媒體來源位置loop=size設(shè)置視頻播放的次數(shù)loopdelay=time設(shè)置兩次播放的間隔時間start=value指定何時開始播放視頻文件2.3加入多媒體與超級鏈接2.3.2加入超級鏈接格式：<A>…</A>功能：在當(dāng)前頁和其他頁間建立超鏈接。標(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制作表格表格可以把文字和圖片等內(nèi)容按照行和列排列起來，可以用來建立主頁的框架，使得整個網(wǎng)頁更加清晰和條理化，有利于信息的表達。本章首頁2.4制作表格2.4.1建立表格格式：<TABLE>…</TABLE>標(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è)置對齊方式cols=size設(shè)置表格的列數(shù)2.4制作表格2.4.2定制表格格式：<TR>…</TR>。功能：定義表格的一行。格式：<TD>…</TD>。功能：定義單元格。

標(biāo)記屬性功能bgcolor=colorvalue設(shè)置行背景顏色align=alignstyle設(shè)置行對齊方式valign=valignstyle設(shè)置單元格垂直對齊方式2.4制作表格2.4.2定制表格格式：<CAPTION>…</CAPTION>功能：定義表格標(biāo)題，可以通過align屬性設(shè)置標(biāo)題的對齊方式。標(biāo)記屬性功能bgcolor=colorvalue設(shè)置單元格背景顏色rowspan=num設(shè)置單元格所占的行數(shù)colspan=num設(shè)置單元格所占的列數(shù)align=alignstyle設(shè)置對齊方式valign=valignstyle設(shè)置單元格垂直對齊方式width=size設(shè)置單元格寬度height=size設(shè)置單元格高度2.5制作表單表單是用戶和Web應(yīng)用程序、Web數(shù)據(jù)庫等進行交互的界面。在Web上，通過表單可以完成用戶和計算機或服務(wù)器之間進行的信息交換。

本章首頁2.5制作表單2.5.1表單的結(jié)構(gòu)格式：<FORMaction=URLmethod=postmethodonsubmit=scripttarget=frametargetaccept-charset=cdataenctype=contenttype>

…</FORM>功能：定義表單。2.5制作表單2.5.2FORM中常用的標(biāo)記1．輸入域（1）單行輸入域。格式：<INPUT>。標(biāo)記屬性功能type=inputtype設(shè)置輸入域的類型name=cdata設(shè)置表項的控制名，在表單處理時起作用（適用于除submit和reset外的其他類型）size=num設(shè)置表單域的長度maxlength=num設(shè)置允許輸入的最大字符數(shù)（適用于text和password類型）value=cdata設(shè)置輸入域的值（適用于radio和checkbox類型）checked設(shè)置是否被選中（適用于radio，button，checkbox類型）2.5制作表單1）text類型。2）password類型。3）radio類型。4）checkbox類型。5）submit類型。6）reset類型。7）hidden類型。2.5制作表單（2）多行輸入域。格式為：<TEXTAREA>…<TEXTAREA>功能：定義多行文本輸入域。標(biāo)記屬性功能name=cdata設(shè)置FORM提交的輸入信息的名稱rows=num設(shè)置文本域的行數(shù)cols=num設(shè)置文本域的列數(shù)tabindex=num設(shè)置tab鍵的次序2.5制作表單2．按鈕格式：<BUTTON>…</BOTTON>功能：定義按鈕。

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

<OPTION>選項二

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

標(biāo)記屬性功能name=cdata設(shè)置選擇欄的名字size=num設(shè)置在選擇欄中一次可見的選項個數(shù)multiple設(shè)置選項欄是否支持多選標(biāo)記屬性功能value=cdata設(shè)置選項的默認(rèn)值selected表示此選項為預(yù)置項<option>屬性：<select>屬性：2.6

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

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

…</HEAD><FRAMESET><FRAME>

…<FRAME>

…</FRAMESET></HTML>本章首頁注意：含有框架結(jié)構(gòu)的網(wǎng)頁其HTML的形式和一般的HTML文件相似，只是在文檔中，若使用了<FRAMESET>，就不應(yīng)該有<BODY>標(biāo)記。在老版本的瀏覽器可能不支持框架結(jié)構(gòu)。

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)記格式：<FRAME>功能：在網(wǎng)頁中定義框架。標(biāo)記屬性功能src=URL設(shè)置要鏈接到的HTML文件name=framename表示子窗口的名字marginwidth=size用來控制顯示內(nèi)容和窗口左右邊界的距離，默認(rèn)為1marginheight=size用來控制顯示內(nèi)容和窗口上下邊界的距離，默認(rèn)為1scrolling=scrollingstyle指定子窗口是否使用滾動條，有YES/NO/AUTO三個值，默認(rèn)為AUTO，即根據(jù)窗口內(nèi)容決定是否有滾動條noresize使用該屬性后，指定窗口不能調(diào)整窗口大小2.6

框架結(jié)構(gòu)2.6.4TARGET屬性的使用1．用于A標(biāo)記2．用于BASE標(biāo)記3．用于FORM標(biāo)記本章首頁2.7CSS基礎(chǔ)2.7.1CSS樣式簡介CSS（CascadingStyleSheets，層疊樣式表），又稱格式頁，是近幾年才發(fā)展起來的新技術(shù)。它提供了很多的樣式定義方式來輔助HTML。

本章首頁2.7CSS基礎(chǔ)<HTML><HEAD><TITLE>CSS樣式</TITLE><STYLEtype="text/css"><!--H3{font-family:arial;font-size:12pt;font-style:normal;color:blue;}--></STYLE></HEAD><BODY><H3>CSS樣式文本！arial，12pt，normal，blue！</H3></BODY></HTML>

本章首頁2.7CSS基礎(chǔ)2.7.2CSS樣式表的定義1．通過HTML標(biāo)記定義定義任何一個HTML標(biāo)記，定義時在屬性和屬性值之間用“：”隔開，當(dāng)有多重屬性時，使用“；”進行分隔。2．用id屬性定義樣式表id以（#）開頭，把標(biāo)準(zhǔn)的屬性和屬性值寫入大括號內(nèi)。

溫馨提示

  • 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

提交評論