Download presentation
Presentation is loading. Please wait.
1
第二章 網際網路網頁的設計
2
2.1 前言 全球資訊網（World Wide Web，簡稱WWW）是由超文字（HyperText）、超媒體（HyperMedia）、超連結（HyperLink）的技術所發展出來的。 所謂的超文字、超媒體的技術，其實就是使用”連結”的觀念，讓文中某些特定的資料可以擴展，指向其他的資訊媒體，而使用者只需透過全球資訊網（WWW）中的瀏覽器，利用滑鼠輕選超連結，就可以連結其所指向的另一個資訊媒體。 藉由全球資訊網所達成的”超媒體連結”更是影響了傳統的資訊傳播方法，無論是公家機關或私人企業，也紛紛走向網路的『虛擬』世界。
3
在全球資訊網中，WWW所扮演的角色為資訊整合環境，而其中資訊傳遞的媒介就是利用網頁（HomePage）來完成的。
網頁也就是由HTML文件所構成，HTML（Hyper Text Markup Language），即超文件標註語言。
5
2.2 HTML文件的基本結構 HTML 文件的基本結構包含二大部分：
(1)標題區，或稱為控制碼，是利用一些『標籤』（Tags）命令來設定網頁文件的外觀，主要存放此文件的控制資訊 (2)主題區則存放此文件的內容
7
顏色的設定 設定背景圖案格式： <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)設定動作中的超連結文字顏色。
9
註解 在編輯HTML文件時，如果要在文件中寫一些只給自己看，但不會顯示在瀏覽器上的註解，就必需用到「註解」這個標記。
其格式為＜!--…--＞。
10
標籤命令格式 大於(>)、小於(<)符號和置於其中的英文字，就是所謂的『標籤』(Tags)。
以<標籤名稱>為開始，</標籤名稱>作結束，中央的文字則為內容，利用不同的標籤來控制其中的內容，瀏覽器會依照不同的標籤註解，產生許多不同的效果。 語法 (1)<標籤名稱>文字</標籤名稱> (2)<標籤名稱 屬性＝參數>文字</標籤名稱> (3)<標籤名稱>文字
11
文件資料的編排 字型格式類：主要控制字體的顯示樣式
(1)粗體字：<B>…</B> 此區段的文字將以『粗體字』方式顯示。 (2)斜體字：<I>…</I> 此區段的文字將以『斜體字』方式顯示。 (3)打字體：<TT>…</TT> 此區段的文字將以『打字體』方式顯示。 (4)閃爍字：<BLINK>…</BLINK> 此區段的文字將會產生閃爍的效果。 (5)置中體：<CENTER>…</CENTER> 此區段的文字將被置於該行中央。
12
字型大小類：主要控制字型的顯示大小 (1)大一級字：<BIG>…</BIG> 設定區段內文字字體的大小，比預設值大一級。 (2)小一級字：<SMALL>…</SMALL> 設定區段內文字字體的大小，比預設值小一級。 (3)標題字：<Hn> …</Hn> 其中n可由1至6，共可提供六種不同層級的標題，其用途為強調文件中的層級關係，其字型亦由大漸小。
13
HTML 提供一特別對字形控制的標籤 <FONT>…</FONT>，此標籤內可包含數個控制參數，來控制字型的變化
字型控制類： HTML 提供一特別對字形控制的標籤 <FONT>…</FONT>，此標籤內可包含數個控制參數，來控制字型的變化 語法 <FONT SIZE=n COLOR=”#rrggbb” Face=”字型名稱”> …….</FONT> (1)SIZE=n : 控制字體的大小，n值由1至7，其預設值為3。 (2)Color=”#rrggbb”：控制字體的顏色，#rrggbb代表色彩三原色的組合 (3)Face=”字型名稱” ：控制字體的字型
15
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>顏色加深，變成厚實心線
17
文件段落：<P>…</P>
在<P> 標籤內可加入一參數align，用來表示整段文章的對齊方式，其可設定為 align=Right 向右對齊，align=Left 向對齊，align=Center向中對齊。 強迫換行：<BR> 在瀏覽器瀏覽文件時，遇到空白及換行符號通常會被忽略掉，但是若是需要換行時，則可在要換行的文字後方加入<BR>標籤，強迫換行。 整段樣式：<PRE>…</PRE> 以瀏覽器瀏覽文件時，遇到空白及換行符號通常會被忽略掉，但是若需要保留原來輸入時的樣式時，則可在需要保持原來輸入樣式的段落前後加入<PRE>…</PRE>。
18
條列式排列 要加以列表的文字寫在此區間之中，並在每行之前加上一標籤<LI>，在顯示時會再每行前以一個小圓點標示其排列順序。
無編號條列式排列標籤：<UL>…</UL> 要加以列表的文字寫在此區間之中，並在每行之前加上一標籤<LI>，在顯示時會再每行前以一個小圓點標示其排列順序。 有編號條列式排列標籤：<OL>…</OL> 使用方法和無編號列表一樣，不同的是列表中，會有數字之編排。 定義式條列式排列標籤：<DL>…</DL> 列表項目由使用者自行定義，定義式列表區段包含於<DL>與</DL>之間，區段中每個項目以<DT>加以標註，讓觀看者快速瞭解敘述列表內容，而項目的內容則以<DD>標註，其內容微向右移，會使文件看來更有系統。
20
表格的編排 藉由表格編排的標籤，HTML文件製作者可輕易的處理混雜圖片及文字的文件，豐富了文件排版的彈性。
<TABLE>…</TABLE>為定義表格區段的標籤，表格為一複雜的資料結構，其區段內尚包含有數個表格結構內的標籤，以表現出整個表格的樣式。 表格結構內的標籤有： ＜TR＞….</TR>表格列，表示表格內一行或一列資料的開始與結束； ＜TH＞標題格，表示此格位內的內容為標題字； ＜TD＞資料格，此格位內的內容為一般資料。
21
<TR ALIGN=Var VALIGN=Var >…</TR> 資料格之格式：
表格列之格式： <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>
22
(1)ALIGN為設定儲存格文字水平方向的排列方式。
(2)VALIGN為設定儲存格文字垂直方向的排列方式。 (3)COLSPAN為控制水平方向的格子大小，COLSPAN=n表示此資料欄列跨n個基本表格欄。 (4)ROWSPAN為控制垂直方向的格子大小，ROWSPAN=n表示此資料列跨n個基本表格列。 (5)BORDER為表示表格的外邊框線的粗細。 (6)CELLPADDING表示儲存格和其內容的間距有多少點，用以控制格子的面積大小。 (7)CELLSPACING則用來控制格子的內邊框線的粗細。
24
多媒體資料的編排 圖形的編排 目前大部分的瀏覽器皆支援GIF和JPG的圖形檔格式，因此只需傳送這兩種圖形格式的資料，瀏覽器就可以直接將其和文字資料一同顯示在頁面上。 格式： <IMG SRC=”檔名” ALT=”文字” ALIGN=Var WIDTH=x HEIGHT=y HSPACE=x VSPACE=y BORDER=n>
25
SRC=”檔名”：此屬性的值用以表示此圖形所存在的檔案名稱，
ALT=”文字”：此屬性的功用為控制其文字與圖形的替換。 ALIGN=Var：此屬性的功用為控制圖形顯示的位置。 WIDTH=x HEIGHT=y：此屬性的功用為控制圖形的寬度與高度。 VSPACE=y HSPACE=x：此屬性的功用為控制圖形外圍的空間。 BORDER=n：此屬性的功用為控制圖形的邊框大小。
27
<EMBED>…</EMBED>此標籤可將多媒體資訊內嵌在文件中，直接撥放，增加整體文件編排的彈性。
聲音與影像 <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：此屬性的功用為控制嵌入物件的寬度與高度。
29
網頁的連結標籤 內部連結 當我們的文件過長時，為了讓讀者能夠更容易的找到他所想閱讀的標題，會使用內部連結功能，使用者只需點選某個標題，就會連結至同篇文章中那段標題內容的位置上。 (1)告訴電腦，這行文字或這個圖形要連到那個特定的位置，其格式為<A HREF= ”#label”>… </A>，label的值可以是任何的文字，但不能有空格，’#’表示此超連結將會連結至指定文章中的某一特定部分。 (2)在要被連接的文章部分的前面註明一個標記(label)
31
外部連結之檔案連結 依照檔案所在的目錄不同可分為三類： (1)<A HREF=”檔名”>：同一層目錄
連結至本地或遠端的文件中，此文件可能是任何格式的檔案，因此，瀏覽器會依照所連結到的檔案附檔名來決定該是使用何種輔助程式來處理此文件。
32
當瀏覽者點選超 連結時，會出現 檔案下載的畫面_ 開啟後，則可依照不同的多媒體檔案格式， 而使用不同的媒體播放程式來執行_
33
當要連結的文件存放在遠端電腦上時，則必須以HREF指明該文件所在的主機，即其URL網址，其格式為：
<A HREF = “URL”>文字敘述</A> 若要以影像作為HTML的超連結，則可先設定超連結位址，在加入圖形來源，<A HREF = “URL”><IMG SRC=”圖形”>文字敘述</A>，來指定圖形超連結。
35
2.9 頁框的運用 在首頁中就放入多個頁框，一個頁框介紹其網站主要內容，一個頁框則列表顯示此網頁中有哪些內容的目錄表，使用者就可經由目錄表控制視窗畫面中所顯示的內容，並可隨時切換到網頁中的任何一個位置。 頁框的設定標籤為<FRAMESET>…</FRAMESET>，一個FRAMESET內可有數個<FRAME>標籤來顯示每一個頁框或包含其他的FRAMESET而成階層式的排列。一個網頁上只可有一個主要的FRAMESET。
36
<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為像素值
37
<FRAME>標籤的使用方式： <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>：固定頁框的大小
38
2.10 HTML進階標籤 特殊符號的運用 在HTML中，<、>、&、“ 等符號均被用來當成標記使用，當使用者想在內文中輸入<HTML>這幾個字，可用以下之字元 < (小於符號)、> (大於符號)、& (顯示 &符號)、 (顯示空白)與" (顯示雙引號)。
39
<meta>標籤 META標籤是網頁開發者的一個好工具，可用來定義此網頁的主旨，提供搜尋引擎做關鍵字查詢，並提供自動更新網頁的功能，讓設計者所設計的網業自動的連結到另一個網頁或是他人的網頁。 屬性： (1)<META HTTP-EQUIV=“name” CONTENT=“content”>是在標題上使用的，用來控制瀏覽器的動作，現在只提供於Netscape Navigator。 (2)<META NAME="name" CONTENT="content"> 則作用於其他非標題的部分，例如提供搜尋引擎資訊、顯示網頁的資訊等。
40
<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= (5)<META HTTP-EQUIV="expires" CONTENT="日期 時間">：當使用者在看此網頁時，瀏覽器會檢查所指定的時間是否已經超過，若超過則會自動更新網頁，若時間訂為0時，則表示每次瀏覽都需要更新。
41
<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="…">： 此功能在顯示製作此網頁的工具及版本。
42
網頁伺服器 要能夠讓別人透過網路看到您的網頁，則必須將自己的網頁放入網頁伺服器中，網頁伺服器通常是架設在工作站或高階電腦上，現在也有許多的網頁伺服器軟體支援個人電腦。 微軟的IIS（Internet Information Server），可安裝於微軟的Windows NT Server中，是免費提供的的網頁伺服器。
43
IIS的安裝步驟
44
IIS的設定 (1)後開啟『開始』視窗，選擇”Microsoft Internet 伺服器”中的”Internet服務管理員
(2)在『預設的Web站台』中點選滑鼠右鍵會開啟一下拉視窗，選取『properties』，在IP位址處輸入您電腦的IP位址 (3)點選『主目錄』的頁框，在本機路徑中輸入您網頁首頁的存放路徑 (4)點選『文件』的頁框，在啟用預設文件中輸入您首頁的檔名 (5)輸入完成後按下確定，則您就已經完成了網頁伺服器的設定了，接著您就可以試著使用瀏覽器連到您的電腦，測試輸入是否正確。
45
網域名稱的申請 當安裝好網頁伺服器後，企業需要給予此伺服器一個網域名稱(Domain Name)，以便讓此網頁伺服器能被廣泛的使用在網際網路上。目前國內的網域名稱由財團法人台灣網路資訊中心(TWNIC)負責
46
網域名稱的申請程序
47
其他網頁編輯語言---VRML VRML(Virtual Reality Modeling Language)為虛擬實境描述語言，很類似 HTML語言， HTML是使用一些控制標籤，描述我們想要文件的樣子，而VRML則是在描述一個虛擬的空間。 在 VRML中，圖形、聲音文件和虛擬空間都可整合在一起，讓使用者可以在虛擬空間裡遊走。透過VRML可以呈現一個平面的首頁所無法提供的網際空間，網際網路對民眾生活的影響也將更深入。 大部分的網頁瀏覽器均包含有VRML瀏覽程式，當使用者對VRML瀏覽程式提出要求後，網頁伺服器就會收到VRML瀏覽程式所送出的要求，並傳送出VRML的文件給VRML瀏覽程式。而VRML瀏覽程式在收到VRML文件後，VRML瀏覽程式解讀VRML文件，產生虛擬實境中的物件。 網路傳輸速率與用戶端3D繪圖速度過慢，進而影響了VRML的推動。
48
其他網頁編輯語言---XML XML是新一代的可延伸性標示語言，它的英文全名是eXtensible Markup Language，即「可延伸性標示語言」。XML起初是在W3C的贊助之下形成的。 XML是SGML簡單的版本，特別被塑造為支援網頁用，和SGML一樣是一種Meta-language。 XML是一種用來定義其它語言的語法系統。HTML語法是用來指定文件在瀏覽器上的呈現方式，而XML則用來定義這些標示語法，而這正是XML強大的特性之一。 XML掌握了SGML的延展性、文件自我描述、及其強大的文件結構化功能，摒除了SGML過於龐大複雜以及不易普及化的缺點。由XML豐富的特性，加上其可補強HTML的缺點，使得其被廣泛的認為，將成為未來網際網路上語言的標準。
49
其他網頁編輯語言--- JAVA Java是一種由昇陽公司所發展出來適用於網際網路上應用程式開發的程式語言。Java是一個簡單、物件導向、跨平台、安全、高效能的程式語言，其大大的提高網頁的互動性。 Java的性質：簡單、物件導向、跨平台、安全、高效率 發展Java應用包含三個步驟 (1)編輯 (2)編譯（Compiling） (3)直譯（Interpreting）
50
若要讓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便會在瀏覽程式的管理下開始執行。
51
其他網頁編輯語言--- Java Scrip
JavaScript是個由網景公司(Netscape)所發展的新Web技術，讓使用者能夠在HTML頁面中直接將Java程式敘述安插於HTML文件當中，一起送至使用者的瀏覽器內。 JavaScript提供強大的內建函式及命令，可顯示HTML文件、執行數學運算、播放音效、開啟新的URL文件、及在網頁載入的同時自動執行動作或指定在某事件發生時，自動執行某程式等功能，來加強網頁的機動性，達到與使用者互動的目的。 JavaScript憑藉HTML作為媒介來進入Web應用架構中，提供事件給標籤來增強HTML的功能，並允許事件驅動的程式在裡頭執行。 JavaScript本身是一個語言，而真正執行JavaScript程式的是Web瀏覽器，若瀏覽器不支援JavaScript，所寫的程式碼就會被忽略，或者被當成一般文字顯示。
52
其他網頁編輯語言--- VB Script VBScript為Microsoft® Visual Basic程式語言的一部份，用於「全球資訊網」瀏覽器及其它使用Microsoft ActiveX 控制項、Automation 伺服器及Java applet的應用程式中之快速、可攜、輕型解譯器。 JavaScript 是架設在 Java 之上，就像VBScript 是以Visual Basic 為基礎一樣。 瀏覽器有支援開放式 Scripting標準時，我們就可以在HTML裡混合使用VBScript或是JavaScript，以現在來說一般的瀏覽器大都可以支援這兩種語言。
53
網頁設計範例--- 企業資料通訊課程網站架構圖
55
實驗二： 設計一電子商店的網頁 實驗目的：使學員能實際的設計一網頁。 實驗所需設備： 實驗結果驗證：
實驗二： 設計一電子商店的網頁 實驗目的：使學員能實際的設計一網頁。 實驗所需設備： 個人電腦一台內裝有MS-Window 作業系統一套、已連接好的區域網路平台、及已架設好的微軟 Personnel Web 伺服器。 實驗結果驗證： 由同學互相使用別人的系統，以驗證系統是否作業正常。
56
實驗過程： (1)分析規劃此網頁所需的功能：例如 商店簡介網頁、產品畫面網頁、熱門商品網頁、商品採購流程網頁、最新消息網頁、相關網路資源等。
(2)收集相關資料與多媒體資料，如圖片。 (3)收集相關資料與多媒體資料，如圖片。 (4)利用筆記本軟體編輯HTML 文件。 (5)將所編輯的文件存放置網頁伺服器的路徑下。
Similar presentations
