計算機概論

計算機概論 第11章　HTML網頁設計

大綱 • 11-1　建置網站的流程 • 11-2　從事網頁設計所需的軟、硬體 • 11-3　從事網頁設計相關的程式語言 • 11-4認識HTML語法 • 11-5　編輯HTML網頁 • 11-6HTML網頁的整體架構 • 11-7事件處理程式 • 11-8資料編輯與格式化 • 11-9　超連結 • 11-10圖片 • 11-11表格

11-1　建置網站的流程 一、蒐集資料與規劃網站架構二、網頁製作與測試三、將網站上傳至Web伺服器並加以推廣四、網站的更新與維護

11-2　從事網頁設計所需的軟、硬體 • 硬體 • 網頁編輯軟體 • 影像動畫軟體 • 瀏覽器 • 網頁空間

11-3　從事網頁設計相關的程式語言 • HTML是一種用來撰寫網頁的程式語言，由W3C所制定。網頁的HTML原始檔網頁的實際瀏覽結果

11-3　從事網頁設計相關的程式語言 • XML是由W3C贊助的組織XML Working Group所制定，1998年2月正式推出1.0版，主要的用途是在Internet傳送或處理資料。 • CSS是由W3C所制定，主要的用途是定義網頁資料的編排、顯示、格式化及特殊效果。

11-3　從事網頁設計相關的程式語言 • DHTML技術能夠在網頁下載完畢後插入、刪除或取代網頁的某些HTML原始碼，而瀏覽器會自動根據更新過的HTML原始碼顯示新的網頁內容，而不必從伺服器重新下載整個網頁。 • XHTML 是由W3C所制定，主要的用途和HTML一樣是撰寫網頁，語法比HTML嚴謹。 • Java Applets是使用Java程式語言所撰寫的小程式，可以用來製造動態效果。

11-3　從事網頁設計相關的程式語言 • VRML主要的用途是描述物體的三度空間資訊，讓網頁的瀏覽者可以看到3D的物體。使用VRML製作虛擬旅遊網頁

11-3　從事網頁設計相關的程式語言 • ActiveX Control：這是Microsoft為了迎戰Java Applet所推出，功能強大。 Windows Media Player控制項月曆控制項

11-3　從事網頁設計相關的程式語言 • 瀏覽器端Script是一段散佈在HTML原始碼內的小程式，由瀏覽器負責執行，有Netscape公司的JavaScript和Microsoft公司的VBScript。 • 雖然瀏覽器端Scripts已經可以完成許多工作，但有些工作還是得在伺服器端執行Scripts才可以完成，常見的伺服器端Scripts有下列幾種： • CGI (Common Gateway Interface) • JSP (JavaServer Pages) • PHP (PHP:Hypertext Preprocessor) • ASP (Active Server Pages)

起始標籤 空白字元屬性值空白字元屬性值內容結束標籤 11-4認識HTML語法 • 標籤 (tag)：HTML標籤可以分成兩種，第一種用來識別網頁上的元件或描述元件的樣式，第二種用來指向其它資源。 • 屬性 (attribute)：除了HTML標籤本身所能描述的特性之外，大部分標籤還會搭配屬性，以提供更多資訊。 <H1 COLOR="#FF0000" ALIGN="CENTER">快樂頌</H1>

11-4認識HTML語法 • 值 (value)：通常屬性會有一個值，而且這個值必須從預先定義好的範圍內選取。 • 巢狀標籤 <H1>Happy<I>Birthday</I></H1> <H1>Happy<I>Birthday</H1></I> • 空白字元：HTML瀏覽器會忽略標籤之間多餘的空白字元或Enter鍵。 • 特殊字元：HTML文件中有一些特殊字元，例如小於 (<)、大於 (>)、雙引號 (“)、& 和空白字元，必須要分別輸入 <、&gt；、"、&、。順序正確順序不正確

11-5　編輯HTML網頁 • 使用記事本編輯HTML網頁，但必須將副檔名改為 .htm。 • HTML網頁編輯完畢後，可以使用Internet Explorer進行瀏覽，也就是在網址列輸入HTML網頁的路徑，然後按 [Enter] 鍵。

11-6HTML網頁的整體架構 HTML文件的整體架構可以分成三個部分－HTML版本宣告、標題宣告、文件主體，下面是一個例子： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html40/strict.dtd"> <HTML> <HEAD> <TITLE>我的第一個網頁</TITLE> </HEAD> <BODY> Hello World! </BODY> </HTML> 版本宣告標題宣告文件主體

11-6HTML網頁的整體架構 <BODY>...</BODY> 標籤的重要屬性： • ALINK = "#RRGGBB" 或 "...“ • BACKGROUND = "URL“ • BGCOLOR = "#RRGGBB"或 "...“ • LINK = "#RRGGBB" 或 "...“ • SCROLL = "{YES,NO}“ • TEXT = "#RRGGBB"或"...“ • TITLE = "...“ • VLINK = "#RRGGBB" 或 "..."

11-7事件處理程式 事件處理程序 (event handler) 指的是將瀏覽者的動作 (例如按下滑鼠或按鍵) 和Script程式連結，例如： • onLoad = "...“ • onUnload = "...“ • onClick = "...“ • onDblClick = "...“ • onMouseDown = "...“ • onMouseUp = "...“ • onMouseOver = "...“ • onMouseMove = "...“ • onMouseOut = "..."

11-7事件處理程式 • onFocus = "...“ • onBlur = "...“ • onKeyPress = "...“ • onKeyDown = "...“ • onkeyUp = "...“ • onSubmit = "...“ • onReset = "...“ • onSelect = "...“ • onChange = "..."

11-8資料編輯與格式化 11-8-1設定標題格式 <HTML> <HEAD> <TITLE>示範標題格式網頁</TITLE> </HEAD> <BODY> <H1 ALIGN="LEFT">這是向左對齊的標題 1</H1> <H2 ALIGN="CENTER">這是置中的標題 2</H2> <H3 ALIGN="RIGHT">這是向右對齊的標題 3</H3> <H4>這是標題 4 (Heading 4)</H4> <H5>這是標題 5 (Heading 5)</H5> <H6>這是標題 6 (Heading 6)</H6> </BODY> </HTML>

11-8-2設定段落格式 11-8資料編輯與格式化 <HTML> <HEAD> <TITLE>使用段落標籤的網頁</TITLE> </HEAD> <BODY> <P>天命之謂性，率性之謂道，修道之謂教。</P> <P>道也者，不可須臾離也；可離，非道也。</P> <P>是故，君子戒慎乎其所不賭，恐懼乎其所不聞。</P> <P>莫見乎隱，莫顯乎微，故君子慎其獨也。</P> </BODY> </HTML>

11-8-3預先格式化段落 11-8資料編輯與格式化 <HTML> <HEAD><TITLE>示範預先格式化網頁</TITLE></HEAD> <BODY> <PRE> #include <studio.h> void main() { printf("Hello World!\n") } </PRE> </BODY> </HTML>

11-8-4註解 11-8資料編輯與格式化 <HTML> <BODY>  </BODY> </HTML>

11-8-5常見的文字格式 11-8資料編輯與格式化 HTML提供的文字格式標籤 • <B>粗體文字 • <I>斜體文字 • <U>加底線文字 • <BIG>大字型 • <SUB>下標文字 • <SUP>上標文字 • <SMALL>小字型 • <EM>強調斜體文字 • <STRONG>強調粗體文字 • <DFN>定義文字 • <CODE>程式碼文字

11-8-5常見的文字格式 11-8資料編輯與格式化 • <SAMP>範例文字 • <KBD>鍵盤文字 • <VAR>變數文字 • <CITE>引用文字 • <ABBR>縮寫文字 • <ACRONYM>頭字語 • <STRIKE>刪除字 • <S>刪除字 • <TT>打字機字體 • <Q>引用語

11-8-6水平線 11-8資料編輯與格式化 <HR> 標籤的重要屬性有： • ALIGN = "{LEFT, CENTER, RIGHT}" (水平線向左對齊、置中或向右對齊) • COLOR = "#RRGGBB" 或 "..." (水平線顏色) • SIZE = "n" (水平線高度) • WIDTH = "n" (水平線寬度) • 範例 <HR COLOR="Green" ALIGN="LEFT" WIDTH="50%" SIZE="5">

11-8-7文字字型、色彩與大小 11-8資料編輯與格式化 <HTML> <BODY> <P>聽風在唱</P> <P><FONT SIZE="1" COLOR="Green" FACE="華康細圓體">聽風在唱</FONT></P> <P><FONT SIZE="2" COLOR="Purple" FACE="華康行書體">聽風在唱</FONT></P> <P><FONT SIZE="3" COLOR="Red" FACE="華康流線體">聽風在唱</FONT></P> <P><FONT SIZE="4" COLOR="Navy" FACE="華康娃娃體">聽風在唱</FONT></P> <P><FONT SIZE="5" COLOR="Teal" FACE="華康彩帶體">聽風在唱</FONT></P> <P><FONT SIZE="6" COLOR="Blue" FACE="華康布丁體">聽風在唱</FONT></P> <P><FONT SIZE="7" COLOR="Olive" FACE="華康古印體">聽風在唱</FONT></P> </BODY> </HTML>

11-8-8項目符號與編號清單 11-8資料編輯與格式化 <HTML> <BODY> <UL TYPE="CIRCLE"> <LI><FONT COLOR="#800000" FACE="華康行書體">射雕英雄傳</FONT></LI> <LI><FONT COLOR="#800000" FACE="華康行書體">神雕俠侶</FONT></LI> <LI><FONT COLOR="#800000" FACE="華康行書體">倚天屠龍記</FONT></LI> <LI><FONT COLOR="#800000" FACE="華康行書體">碧血劍</FONT></LI> </UL> </HTML> </BODY>

11-8-8項目符號與編號清單 11-8資料編輯與格式化 <HTML> <HEAD> <TITLE>示範編號清單的網頁</TITLE> </HEAD> <BODY> <OL TYPE="A"> <LI><FONT COLOR="#0066FF" SIZE="5" FACE="華康雅宋體">玩具總動員</FONT></LI> <LI><FONT COLOR="#0066FF" SIZE="5" FACE="華康雅宋體">蟲蟲危機</FONT></LI> <LI><FONT COLOR="#0066FF" SIZE="5" FACE="華康雅宋體">花木蘭</FONT></LI> <LI><FONT COLOR="#0066FF" SIZE="5" FACE="華康雅宋體">泰山</FONT></LI> <LI><FONT COLOR="#0066FF" SIZE="5" FACE="華康雅宋體">小美人魚</FONT></LI> <LI><FONT COLOR="#0066FF" SIZE="5" FACE="華康雅宋體">鐘樓怪人</FONT></LI> </OL> </BODY> </HTML>

My Web Support about.htm question.htm staff.htm 11-9　超連結 11-9-1　建立超連結 • 連結位於相同資料夾的文件例如 <A HREF="question.htm">常見問題集</A> • 連結位於不同資料夾的文件例如 <A HREF="Support\staff.htm">員工</A> • 連結Web上的文件例如 <A HREF="http://tw.yahoo.com/">雅虎奇摩</A>

11-9-2設定連結至E-mail地址的超連結 11-9　超連結 • 當您設定連結至E-mail地址的超連結時，除了要使用 <A>…</A> 標籤的HREF屬性設定收件人的電子郵件地址，還要在電子郵件地址前面加上mailto: 通訊協定，例如： <A HREF="mailto:jeanchen@mail.ht.net.tw">歡迎寫信給我們</A>

11-10圖片11-10-1　插入圖片 我們可以使用 <IMG> 標籤在網頁上插入圖片，其屬性如下： • ALIGN = "{LEFT, RIGHT, TOP, MIDDLE, BOTTOM}" • ALT = "..." • BORDER = "n"。 • CONTROLS： • DYNSRC = "URL“ • HEIGHT = "n" • HSPACE = "n" • ISMAP • LONGDESC = "..." • LOWSRC = "URL"

11-10圖片11-10-1　插入圖片 • LOOP = "{n, INFINITE}" • NAME = "..." • SRC = "URL"。 • START = "{FILEOPEN, MOUSEOVER}" • USEMAP = "URL" • VRML = "..." • VSPACE = "n" • WIDTH = "n" • 這個標籤亦接受CLASS、ID、STYLE、TITLE、LANG、DIR、onClick、onDblClick、onMouseDown、onMouseUp、onMouseOver、onMouseMove、onMouseOut、onKeyUp、onKeyPress等屬性。

11-10-2設定圖片的高度、寬度與框線 11-10圖片 <HTML> <HEAD> <TITLE>設定圖片的高度、寬度及框線</TITLE> </HEAD> <BODY> <IMG SRC="mulan4.gif"> <IMG SRC="mulan4.gif" HEIGHT="136" WIDTH="120"> <IMG SRC="mulan4.gif" BORDER="3"> </BODY> </HTML>

11-10-3　設定圖片的對齊方式 11-10圖片 <BODY> <P><IMG SRC="mulan1.jpg"> <FONT COLOR="Maroon" FACE="華康古印體" SIZE="5">迪士尼最新動畫鉅獻 <IMG SRC="mulan2.jpg"></FONT></P> <P><FONT FACE="華康行書體" SIZE="5" COLOR="Maroon">Mulan－花木蘭</FONT></P> <P><FONT FACE="華康楷書體W3">唧唧復唧唧，木蘭當戶織，不聞機杼聲，唯聞女嘆息。問女何所思？問女何所憶？女亦無所思，女亦無所憶......”這首耳熟能響的木蘭詩，相信您我都背頌過，而今迪士尼將這個中國民間故事搬上動畫的舞台，就讓我們一起來回味一下吧！</FONT></P> </BODY>

11-10-3　設定圖片的對齊方式 11-10圖片 • 在插入第一張圖片的敘述中加上ALIGN = “LEFT” 屬性 • 在插入第一張圖片的敘述中加上ALIGN = "RIGHT" 屬性

11-10-3　設定圖片的對齊方式 11-10圖片 • 在插入第一張圖片的敘述中加上ALIGN = “TOP” 屬性 • 在插入第一張圖片的敘述中加上ALIGN = "MIDDLE" 屬性

11-10-3　設定圖片的對齊方式 11-10圖片 • 在插入第一張圖片的敘述中加上ALIGN = "BOTTOM" 屬性

11-11表格 11-11-1　插入表格 • <TABLE>...</TABLE> 標籤：在HTML文件中標示一個表格 • <TR>...</TR> 標籤：在表格中標示一列 (Row) • <TD>...</TD> 標籤：在一列中標示一儲存格 • <TH>...</TH> 標籤：在一列中標示一標題儲存格

11-11-2設定表格的對齊方式 11-11表格 <TABLE> 標籤的ALIGN屬性提供了LEFT (靠左)、CENTER (置中)、RIGHT (靠右) 三種對齊方式。

11-11-3　設定表格的背景色彩與背景圖片 11-11表格 • 我們可以使用 <TABLE> 標籤的BGCOLOR、BACKGROUND屬性設定表格的背景色彩與背景圖片，例如 <TABLE BORDER=“1” BGCOLOR=“#FFEED2”> 是將表格的背景色彩設定為 #FFEED2，<TABLE BORDER=“1” BACKGROUND=“bg.gif”> 是將表格的背景圖片設定為bg.gif。

11-11-4　設定儲存格的對齊方式 11-11表格 <TABLE BORDER="1" WIDTH="100%"> <TR> <TD><IMG SRC="03.gif"></TD> <TD ALIGN="LEFT">向左對齊</TD> <TD ALIGN="CENTER">水平置中</TD> <TD ALIGN="RIGHT">向右對齊</TD> </TR> <TR> <TD><IMG SRC="04.gif"></TD> <TD VALIGN="TOP">靠上對齊</TD> <TD VALIGN="MIDDLE">垂直置中</TD> <TD VALIGN="BOTTOM">靠下對齊</TD> </TR> <TR> <TD><IMG SRC="05.gif"></TD> <TD ALIGN="RIGHT" VALIGN="TOP">靠右上對齊</TD> <TD ALIGN="CENTER" VALIGN="MIDDLE">水平垂直置中</TD> <TD ALIGN="RIGHT" VALIGN="BOTTOM">靠右下對齊</TD> </TR> </TABLE>

11-11-5　設定儲存格的背景圖片與背景色彩 11-11表格 • 如果要設定某一列儲存格、某一個儲存格或標題儲存格的背景圖片與背景色彩，可以分別使用 <TR>、<TD>、<TH> 標籤的BACKGROUND和BGCOLOR屬性，例如：

計算機概論

計算機概論

Presentation Transcript