第二章 網際網路網頁的設計

Download Report

Transcript 第二章 網際網路網頁的設計 

第二章 網際網路網頁的設計
2.1 前言
•全球資訊網（World Wide Web，簡稱WWW）是由超
文字（HyperText）、超媒體（HyperMedia）、超
連結（HyperLink）的技術所發展出來的。
•所謂的超文字、超媒體的技術，其實就是使用”
連結”的觀念，讓文中某些特定的資料可以擴展，
指向其他的資訊媒體，而使用者只需透過全球資
訊網（WWW）中的瀏覽器，利用滑鼠輕選超連結，
就可以連結其所指向的另一個資訊媒體。
•藉由全球資訊網所達成的”超媒體連結”更是影
響了傳統的資訊傳播方法，無論是公家機關或私
人企業，也紛紛走向網路的『虛擬』世界。
•在全球資訊網中，WWW所扮演的角色為資訊整合
環境，而其中資訊傳遞的媒介就是利用網頁
（HomePage）來完成的。
•網頁也就是由HTML文件所構成，HTML（Hyper
Text Markup Language），即超文件標註語言。
2.2 HTML文件的基本結構
•HTML 文件的基本結構包含二大部分：
(1)標題區，或稱為控制碼，是利用一些『標籤』
（Tags）命令來設定網頁文件的外觀，主要存放
此文件的控制資訊
(2)主題區則存放此文件的內容
顏色的設定
•設定背景圖案格式：
<BODY BACKGROUND=”圖檔名稱”>…</BODY>
•設定背景顏色格式：
<BODY BGCOLOR=”#rrggbb”>…</BODY> 其中的
#rrggbb代表色彩三原色的組合。
•設定頁面文字顏色格式：
<BODY TEXT=”#rrggbb”>…</BODY>
•設定超連結文字顏色變換格式：
<BODY LINK=”#rrggbb” VLINK=”#rrggbb”
ALINK=”#rrggbb”>… </BODY>
LINK為設定尚未閱讀過的超連結文字顏色，VLINK
（Visited Link）設定已經閱讀過的超連結文字顏色，
ALINK(Active Link)設定動作中的超連結文字顏色。
註解
•在編輯HTML文件時，如果要在文件中寫
一些只給自己看，但不會顯示在瀏覽器
上的註解，就必需用到「註解」這個標
記。
•其格式為＜!--…--＞。
標籤命令格式
•大於(>)、小於(<)符號和置於其中的英文字，
就是所謂的『標籤』(Tags)。
•以<標籤名稱>為開始，</標籤名稱>作結束，
中央的文字則為內容，利用不同的標籤來控制
其中的內容，瀏覽器會依照不同的標籤註解，
產生許多不同的效果。
•語法
(1)<標籤名稱>文字</標籤名稱>
(2)<標籤名稱 屬性＝參數>文字</標籤名稱>
(3)<標籤名稱>文字
文件資料的編排
•字型格式類：主要控制字體的顯示樣式
(1)粗體字：<B>…</B> 此區段的文字將以『粗體字』
方式顯示。
(2)斜體字：<I>…</I> 此區段的文字將以『斜體字』
方式顯示。
(3)打字體：<TT>…</TT> 此區段的文字將以『打字體』
方式顯示。
(4)閃爍字：<BLINK>…</BLINK> 此區段的文字將會產
生閃爍的效果。
(5)置中體：<CENTER>…</CENTER> 此區段的文字將被
置於該行中央。
•字型大小類：主要控制字型的顯示大小
(1)大一級字：<BIG>…</BIG> 設定區段內文字
字體的大小，比預設值大一級。
(2)小一級字：<SMALL>…</SMALL> 設定區段內
文字字體的大小，比預設值小一級。
(3)標題字：<Hn> …</Hn> 其中n可由1至6，共
可提供六種不同層級的標題，其用途為強調文
件中的層級關係，其字型亦由大漸小。
•字型控制類：
HTML 提供一特別對字形控制的標籤
<FONT>…</FONT>，此標籤內可包含數個控制參
數，來控制字型的變化
•語法
<FONT SIZE=n COLOR=”#rrggbb” Face=”字型名
稱”> …….</FONT>
(1)SIZE=n : 控制字體的大小，n值由1至7，其預設值
為3。
(2)Color=”#rrggbb”：控制字體的顏色，#rrggbb代表
色彩三原色的組合
(3)Face=”字型名稱” ：控制字體的字型
HTML文件的分段方法
•水平分割線：<HR>
(1)格式：<HR>，未加任何參數，則為採用預設值
(2)格式：<HR SIZE=n>其中n由1至5
(3)格式：<HR WIDTH=n>可用百分比表示
(4)格式：<HR WIDTH=n ALIGN=Var>其中Var可以為
Var=Left
Var=Middle
Var=Right
向左對齊
向中對齊
向右對齊
(5)格式：<HR NOSHADE>顏色加深，變成厚實心線
•文件段落：<P>…</P>
在<P> 標籤內可加入一參數align，用來表示整段文章
的對齊方式，其可設定為 align=Right 向右對齊，
align=Left 向對齊，align=Center向中對齊。
•強迫換行：<BR>
在瀏覽器瀏覽文件時，遇到空白及換行符號通常會被
忽略掉，但是若是需要換行時，則可在要換行的文字
後方加入<BR>標籤，強迫換行。
•整段樣式：<PRE>…</PRE>
以瀏覽器瀏覽文件時，遇到空白及換行符號通常會被
忽略掉，但是若需要保留原來輸入時的樣式時，則可
在需要保持原來輸入樣式的段落前後加入
<PRE>…</PRE>。
條列式排列
•無編號條列式排列標籤：<UL>…</UL>
要加以列表的文字寫在此區間之中，並在每行之前加
上一標籤<LI>，在顯示時會再每行前以一個小圓點標
示其排列順序。
•有編號條列式排列標籤：<OL>…</OL>
使用方法和無編號列表一樣，不同的是列表中，會有
數字之編排。
•定義式條列式排列標籤：<DL>…</DL>
列表項目由使用者自行定義，定義式列表區段包含於
<DL>與</DL>之間，區段中每個項目以<DT>加以標註，
讓觀看者快速瞭解敘述列表內容，而項目的內容則以
<DD>標註，其內容微向右移，會使文件看來更有系統。
表格的編排
•藉由表格編排的標籤，HTML文件製作者可輕易
的處理混雜圖片及文字的文件，豐富了文件排版
的彈性。
•<TABLE>…</TABLE>為定義表格區段的標籤，表
格為一複雜的資料結構，其區段內尚包含有數個
表格結構內的標籤，以表現出整個表格的樣式。
•表格結構內的標籤有：
＜TR＞….</TR>表格列，表示表格內一行或一列資
料的開始與結束；
＜TH＞標題格，表示此格位內的內容為標題字；
＜TD＞資料格，此格位內的內容為一般資料。
•表格列之格式：
<TR ALIGN=Var VALIGN=Var >…</TR>
•資料格之格式：
<TD ALIGN=Var VALIGN=Var COLSPAN=n ROWSPAN=n
>…</TD>
•標題格之格式：
<TH ALIGN=Var COLSPAN=n ROWSPAN=n >…</TH>
•表格之格式：
<TABLE BORDER=n CELLPADDING=n CELLSPACING=n
>…</TABLE> 或
<CAPTION ALIGN=var>…</CAPTION>
(1)ALIGN為設定儲存格文字水平方向的排列方式。
(2)VALIGN為設定儲存格文字垂直方向的排列方式。
(3)COLSPAN為控制水平方向的格子大小，COLSPAN=n表示
此資料欄列跨n個基本表格欄。
(4)ROWSPAN為控制垂直方向的格子大小，ROWSPAN=n表示
此資料列跨n個基本表格列。
(5)BORDER為表示表格的外邊框線的粗細。
(6)CELLPADDING表示儲存格和其內容的間距有多少點，用
以控制格子的面積大小。
(7)CELLSPACING則用來控制格子的內邊框線的粗細。
ALIGN
ALIGN=left
ALIGN=right
ALIGN=middle
文字向左對齊
文字向右對齊
文字置中
VALIGN
VALIGN= top
VALIGN=middle
VALIGN=bottom
文字向上對齊
文字置中
文字向下對齊
多媒體資料的編排
•圖形的編排
•目前大部分的瀏覽器皆支援GIF和JPG的
圖形檔格式，因此只需傳送這兩種圖形
格式的資料，瀏覽器就可以直接將其和
文字資料一同顯示在頁面上。
•格式：
<IMG SRC=”檔名” ALT=”文字” ALIGN=Var
WIDTH=x HEIGHT=y HSPACE=x VSPACE=y
BORDER=n>
•SRC=”檔名”：此屬性的值用以表示此圖形所存
在的檔案名稱，
•ALT=”文字”：此屬性的功用為控制其文字與圖
形的替換。
•ALIGN=Var：此屬性的功用為控制圖形顯示的位
置。
•WIDTH=x HEIGHT=y：此屬性的功用為控制圖形的
寬度與高度。
•VSPACE=y HSPACE=x：此屬性的功用為控制圖形
外圍的空間。
•BORDER=n：此屬性的功用為控制圖形的邊框大小。
•聲音與影像
•<EMBED>…</EMBED>此標籤可將多媒體資訊內嵌
在文件中，直接撥放，增加整體文件編排的彈性。
•格式：<EMBED SRC=”檔名“ AUTOSTART=boolean
LOOP=Boolean WIDTH=x HEIGHT=y >
•SRC=”檔名“：此屬性的值用以表示此多媒體資料所
存在的檔案名稱。
•AUTOSTART=boolean：設定是否一載入網頁就自動開
始播放此多媒體資訊，boolean 的值為 TRUE 或
FALSE。
•LOOP=Boolean：此屬性提供多媒體資訊是否自動重複
播放的設定功能，boolean 的值為 TRUE 或 FALSE。
•WIDTH=x HEIGHT=y：此屬性的功用為控制嵌入物件的
寬度與高度。
網頁的連結標籤
•內部連結
當我們的文件過長時，為了讓讀者能夠更容易
的找到他所想閱讀的標題，會使用內部連結功
能，使用者只需點選某個標題，就會連結至同
篇文章中那段標題內容的位置上。
(1)告訴電腦，這行文字或這個圖形要連到那個
特定的位置，其格式為<A HREF= ”#label”>…
</A>，label的值可以是任何的文字，但不能
有空格，’#’表示此超連結將會連結至指定文
章中的某一特定部分。
(2)在要被連接的文章部分的前面註明一個標記
(label)
•外部連結之檔案連結
•依照檔案所在的目錄不同可分為三類：
(1)<A HREF=”檔名”>：同一層目錄
(2)<A HREF=”子目錄/檔名”>：下一層目錄
(3)<A HREF=”../檔名”>：上一層目錄
•連結至本地或遠端的文件中，此文件可能是任
何格式的檔案，因此，瀏覽器會依照所連結到
的檔案附檔名來決定該是使用何種輔助程式來
處理此文件。
開啟後，則可依照不同的多媒體檔案格式，
而使用不同的媒體播放程式來執行_
當瀏覽者點選超
連結時，會出現
檔案下載的畫面_
外部連結之URL連結
當要連結的文件存放在遠端電腦上時，則必
須以HREF指明該文件所在的主機，即其URL網
址，其格式為：
<A HREF = “URL”>文字敘述</A>
若要以影像作為HTML的超連結，則可先設定
超連結位址，在加入圖形來源，<A HREF =
“URL”><IMG SRC=”圖形”>文字敘述</A>，來
指定圖形超連結。
2.9 頁框的運用
•在首頁中就放入多個頁框，一個頁框介紹其網
站主要內容，一個頁框則列表顯示此網頁中有
哪些內容的目錄表，使用者就可經由目錄表控
制視窗畫面中所顯示的內容，並可隨時切換到
網頁中的任何一個位置。
•頁框的設定標籤為<FRAMESET>…</FRAMESET>，
一個FRAMESET內可有數個<FRAME>標籤來顯示
每一個頁框或包含其他的FRAMESET而成階層式
的排列。一個網頁上只可有一個主要的
FRAMESET。
•<FRAMESET>…</FRAMESET>標籤的使用方式：
(1)格式：<FRAMESET ROWS=”value, value,…”>：
設定頁框列的個數與大小比例，大小比例可以
使用絕對大小的純數字像素(Pixel)設定
（EX：”30,100,50”）或使用相對大小的
百分比(%)設定（EX：20%,50%,30%）或使用相
對比例(*)方式設定（EX：1*,2*,3*）
(2)格式：<FRAMESET COLS=”value, value,…”>：
設定頁框行的個數與大小比例，大小比例的設
定與列的設定相同
(3)格式：<FRAMESET BORDER=value>：設定頁框
的邊框大小，其value為像素值
•<FRAME>標籤的使用方式：
<FRAME SRC=”檔名及其位址”>：設定頁框內容
(1)格式：<FRAME SRC=”檔名“>：設定頁框內容，其他屬性
則為採用預設值。
(2)格式：<FRAME SRC=”檔名” NAME=”名稱”>：設定該頁框
的名稱。
(3)格式：<FRAME SRC=”檔名” MARGINWIDTH=”value”>：設
定該頁框內部邊界的保留寬度。
(4)格式：<FRAME SRC=”檔名” MARGINHEIGHT=”value”>：設
定該頁框內部邊界的保留高度。
(5)格式：<FRAME SRC=”檔名” SCROLLING=Var>：設定該頁
框的捲軸，Var=YES表強迫顯示捲軸，Var=NO表強迫隱藏捲
軸，Var=AUTO表自動決定是否需要捲軸
(6)格式：<FRAME SRC=”檔名” NORESIZE>：固定頁框的大小
2.10 HTML進階標籤
•特殊符號的運用
•在HTML中，<、>、&、“ 等符號均被用
來當成標記使用，當使用者想在內文中
輸入<HTML>這幾個字，可用以下之字元
&lt; (小於符號)、&gt; (大於符號)、
&amp; (顯示 &符號)、&nbsp; (顯示空
白)與&quot; (顯示雙引號)。
•<meta>標籤
•META標籤是網頁開發者的一個好工具，可用來
定義此網頁的主旨，提供搜尋引擎做關鍵字查
詢，並提供自動更新網頁的功能，讓設計者所
設計的網業自動的連結到另一個網頁或是他人
的網頁。
•屬性：
(1)<META HTTP-EQUIV=“name” CONTENT=“content”>
是在標題上使用的，用來控制瀏覽器的動作，現
在只提供於Netscape Navigator。
(2)<META NAME="name" CONTENT="content"> 則作
用於其他非標題的部分，例如提供搜尋引擎資訊、
顯示網頁的資訊等。
•<META HTTP-EQUIV=”name”>標籤的使用方式：
(1)<META HTTP-EQUIV=”Content-Type” content=”…”>：
提供瀏覽器，看此網頁之前必須先載入的字元集。
(2)<META HTTP-EQUIV=“Content-Script-Type”
CONTENT=“…”>：定義此網頁所使用的script語言。
(3)<META HTTP-EQUIV=“Content-Language”
CONTENT=“…”>：定義此網頁所使用的語言。
(4)<META HTTP-EQUIV=“Refresh” CONTENT=“3 ;
URL=http://…”>：自動更新網頁連結。
(5)<META HTTP-EQUIV="expires" CONTENT="日期 時間">：
當使用者在看此網頁時，瀏覽器會檢查所指定的時間是
否已經超過，若超過則會自動更新網頁，若時間訂為0時，
則表示每次瀏覽都需要更新。
•<META NAME=”name”>標籤的使用方式：
(1)<META name=”DESCRIPTION” content=”詳細註解”>：
用以提供搜尋引擎搜尋時，顯示此網頁的概略描述。
(2)<META name=”KEYWORDS” content=”關鍵字”>：
用以提供搜尋引擎搜尋時，可依照所提供的關鍵字做
查詢。
(3)<META NAME=“ROBOTS” CONTENT=“NOINDEX”>：
此功能在拒絕搜尋引擎將此網站列為搜尋對象。
(4)<META NAME=“AUTHOR” CONTENT=“…”>：
此功能在顯示作者姓名。
(5)<META NAME="GENERATOR" CONTENT="…">：
此功能在顯示製作此網頁的工具及版本。
網頁伺服器
•要能夠讓別人透過網路看到您的網頁，
則必須將自己的網頁放入網頁伺服器中，
網頁伺服器通常是架設在工作站或高階
電腦上，現在也有許多的網頁伺服器軟
體支援個人電腦。
•微軟的IIS（Internet Information
Server），可安裝於微軟的Windows NT
Server中，是免費提供的的網頁伺服器。
IIS
的
安
裝
步
驟
IIS的設定
(1)後開啟『開始』視窗，選擇”Microsoft Internet
伺服器”中的”Internet服務管理員
(2)在『預設的Web站台』中點選滑鼠右鍵會開啟一下
拉視窗，選取『properties』，在IP位址處輸入您
電腦的IP位址
(3)點選『主目錄』的頁框，在本機路徑中輸入您網頁
首頁的存放路徑
(4)點選『文件』的頁框，在啟用預設文件中輸入您首
頁的檔名
(5)輸入完成後按下確定，則您就已經完成了網頁伺服
器的設定了，接著您就可以試著使用瀏覽器連到您
的電腦，測試輸入是否正確。
網域名稱的申請
•當安裝好網頁伺服器後，企業需要給予
此伺服器一個網域名稱(Domain Name)，
以便讓此網頁伺服器能被廣泛的使用在
網際網路上。目前國內的網域名稱由財
團法人台灣網路資訊中心(TWNIC)負責
網域名稱的申請程序
網域名稱登錄及審件程序
連線至
http://rs.twnic.net.tw/
進入網域名稱
註冊系統
點選『申請網域名
稱』輸入（代）申請
人資料及欲申請之
Domain Name
15天內傳真或郵寄指
定之相關申請文件至
受理單位進行審核。
若15天內未收到文
件，將取消其申請。
請申請人務必留意申
請進度，可上網查詢
rs.twnic.net.tw 或洽詢
台灣網路資訊中心
通過審核後之繳費程序
申請人匯款並將『繳
費確認通知函』傳真
至台灣網路資訊中心
15天內未收到款項，
將自動取消所申請之
網域名稱。
台灣網路資訊中心在
收到款項後並確認資
料無誤後，將於三個
工作天內，啟用所申
請之網域名稱。
申請人連線至此網域
名稱註冊系統，進行
Host/IP的指定作業。
完成所有註冊程序，
網域名稱正式生效。
申請網域名稱之費用區分下列二種：
註冊費：新台幣500元整，於申請之時一次繳足。
年費：年費新台幣1000元整，每次繳付需一次繳足二年年費。
資料來源：台灣網路資訊中心
其他網頁編輯語言---VRML
• VRML(Virtual Reality Modeling Language)為虛擬實境描
述語言，很類似 HTML語言， HTML是使用一些控制標籤，描
述我們想要文件的樣子，而VRML則是在描述一個虛擬的空間。
• 在 VRML中，圖形、聲音文件和虛擬空間都可整合在一起，
讓使用者可以在虛擬空間裡遊走。透過VRML可以呈現一個平
面的首頁所無法提供的網際空間，網際網路對民眾生活的影
響也將更深入。
• 大部分的網頁瀏覽器均包含有VRML瀏覽程式，當使用者對
VRML瀏覽程式提出要求後，網頁伺服器就會收到VRML瀏覽程
式所送出的要求，並傳送出VRML的文件給VRML瀏覽程式。而
VRML瀏覽程式在收到VRML文件後，VRML瀏覽程式解讀VRML文
件，產生虛擬實境中的物件。
• 網路傳輸速率與用戶端3D繪圖速度過慢，進而影響了VRML的
推動。
其他網頁編輯語言---XML
• XML是新一代的可延伸性標示語言，它的英文全名是
eXtensible Markup Language，即「可延伸性標示語
言」。XML起初是在W3C的贊助之下形成的。
• XML是SGML簡單的版本，特別被塑造為支援網頁用，和
SGML一樣是一種Meta-language。
• XML是一種用來定義其它語言的語法系統。HTML語法是用
來指定文件在瀏覽器上的呈現方式，而XML則用來定義這
些標示語法，而這正是XML強大的特性之一。
• XML掌握了SGML的延展性、文件自我描述、及其強大的文
件結構化功能，摒除了SGML過於龐大複雜以及不易普及
化的缺點。由XML豐富的特性，加上其可補強HTML的缺點，
使得其被廣泛的認為，將成為未來網際網路上語言的標
準。
其他網頁編輯語言--- JAVA
• Java是一種由昇陽公司所發展出來適用於網際網路上應
用程式開發的程式語言。Java是一個簡單、物件導向、
跨平台、安全、高效能的程式語言，其大大的提高網頁
的互動性。
• Java的性質：簡單、物件導向、跨平台、安全、高效率
• 發展Java應用包含三個步驟
½s ¿è File.html
½s ¿è File.java
(1)編輯
Interpretation
Source code
(2)編譯（Compiling）
(3)直譯（Interpreting）
²£ ¥Í File.class
Bytecode
Âs Äý µ{ ¦¡
• 若要讓Java的應用程式可以在WWW網頁上執行，則必須
將此應用程式編成Java Applet。由於Applets必須從
瀏覽程式中執行，因此發展Java Applets的流程與
Applets的運作方向就與Java Application的情形有些
不同，使用者不僅要編輯Java 應用程式，還需編輯
HTML文件，來指名所要使用Java Applets。
• 編輯Applet的方式同Java應用程式的開發，而編輯
HTML 文件的方式：
(1)編輯HTML文件：由於Applet必須在瀏覽程式之中執行，
因此我們把所要執行的Applet之相關資訊，寫在HTML
文件中。這可以透過HTML擴充標籤＜Applet＞及＜
∕Applet＞來達成。
(2)執行Applet：當編輯好的HTML文件被載入瀏覽程式時，
瀏覽程式便會根據＜Applet＞內所指定的屬性下載正
確的Java Applet。一旦載入完成，Applet便會在瀏覽
程式的管理下開始執行。
其他網頁編輯語言--- Java Scrip
• JavaScript是個由網景公司(Netscape)所發展的新Web技
術，讓使用者能夠在HTML頁面中直接將Java程式敘述安
插於HTML文件當中，一起送至使用者的瀏覽器內。
• JavaScript提供強大的內建函式及命令，可顯示HTML文
件、執行數學運算、播放音效、開啟新的URL文件、及在
網頁載入的同時自動執行動作或指定在某事件發生時，
自動執行某程式等功能，來加強網頁的機動性，達到與
使用者互動的目的。
• JavaScript憑藉HTML作為媒介來進入Web應用架構中，提
供事件給標籤來增強HTML的功能，並允許事件驅動的程
式在裡頭執行。
• JavaScript本身是一個語言，而真正執行JavaScript程
式的是Web瀏覽器，若瀏覽器不支援JavaScript，所寫的
程式碼就會被忽略，或者被當成一般文字顯示。
其他網頁編輯語言--- VB Script
•VBScript為Microsoft® Visual Basic程式語言
的一部份，用於「全球資訊網」瀏覽器及其它使
用Microsoft ActiveX 控制項、Automation 伺
服器及Java applet的應用程式中之快速、可攜、
輕型解譯器。
•JavaScript 是架設在 Java 之上，就像
VBScript 是以Visual Basic 為基礎一樣。
•瀏覽器有支援開放式 Scripting標準時，我們就
可以在HTML裡混合使用VBScript或是JavaScript，
以現在來說一般的瀏覽器大都可以支援這兩種語
言。
網頁設計範例--企業資料通訊課程網站架構圖
企業資料通訊
bdc.htm
目 錄
bdcleft.htm
課程簡介
bdcintr.htm
課程內容
bdccour.htm
成績公布
bdcgrade.htm
意見交流
http://www.cca.ttu.edu.tw/
courses/ccabbs/default.HTM
備註
bdcmemo.htm
實驗二：
設計一電子商店的網頁
•實驗目的：使學員能實際的設計一網頁。
•實驗所需設備：
個人電腦一台內裝有MS-Window 作業系統一套、已連
接好的區域網路平台、及已架設好的微軟 Personnel
Web 伺服器。
•實驗結果驗證：
由同學互相使用別人的系統，以驗證系統是否作業正
常。
•實驗過程：
(1)分析規劃此網頁所需的功能：例如 商店簡介網頁、
產品畫面網頁、熱門商品網頁、商品採購流程網頁、
最新消息網頁、相關網路資源等。
(2)收集相關資料與多媒體資料，如圖片。
(3)收集相關資料與多媒體資料，如圖片。
(4)利用筆記本軟體編輯HTML 文件。
(5)將所編輯的文件存放置網頁伺服器的路徑下。