1 / 33

計算機概論

計算機概論. 第 10 章 網頁設計 主講人 : 沈 宗 南. 10-1 　建置網站的流程. 一、蒐集資料與規劃網站架構 二、網頁製作與測試 三、將網站上傳至 Web 伺服器並加以推廣 四、網站的更新與維護。. 10-2 　網頁上面有什麼？. 文字 圖片 超連結 特殊元件 ( 例如 Java Applets 、 Flash 動畫、跑馬燈、計數器、背景音樂、 ActiveX 控制項等 ). 10-3 　網頁多媒體. 圖片 GIF JPEG PNG 動畫 Flash 動畫 Java Applets

robert-pickett
Download Presentation

計算機概論

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 計算機概論 第10章 網頁設計 主講人: 沈 宗 南

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

  3. 10-2　網頁上面有什麼？ • 文字 • 圖片 • 超連結 • 特殊元件 (例如Java Applets、Flash動畫、跑馬燈、計數器、背景音樂、ActiveX控制項等)

  4. 10-3　網頁多媒體 • 圖片 • GIF • JPEG • PNG • 動畫 • Flash動畫 • Java Applets • 音效 (MIDI, WAVE, Real Audio, MP3) • 影像 (AVI, QuickTime, Real Video) 探照燈效果的Java Applets

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

  6. 10-5　從事網頁設計相關的程式語言 • HTML是一種用來撰寫網頁的程式語言，由W3C協會所制定 • XML是由W3C協會贊助的組織XML Working Group所制定，1998年2月正式推出1.0版，主要的用途是在Internet傳送或處理資料 • VRML主要的用途是描述物體的三度空間資訊，讓網頁的瀏覽者可以看到3D的物體 • CSS是由W3C協會所制定，主要的用途是定義網頁資料的編排、顯示、格式化及特殊效果

  7. 瀏覽器端Script是一段散佈在HTML原始碼內的小程式，由瀏覽器負責執行，有Netscape公司的JavaScript和Microsoft公司的VBScript瀏覽器端Script是一段散佈在HTML原始碼內的小程式，由瀏覽器負責執行，有Netscape公司的JavaScript和Microsoft公司的VBScript • Java Applets是使用Java程式語言所撰寫的小程式，可以用來製造水中漣漪、水中倒影、計數器、跑馬燈、探照燈、變色按鈕、漸層時鐘等動態效果 • DHTML技術能夠在網頁下載完畢後插入、刪除或取代網頁的某些HTML原始碼，而瀏覽器會自動根據更新過的HTML原始碼顯示新的網頁內容，而不必從伺服器重新下載整個網頁。 • 目前常見的伺服器端Script有ASP程式和CGI程式兩種

  8. 起始標籤 空白字元 屬性 值 空白字元 屬性 值 內容 結束標籤 10-6　使用HTML製作網頁 10-6-1HTML語法簡介 HTML語法是由標籤(tags) 和屬性(attributes) 所組成，瀏覽器只要看到HTML文件的標籤和屬性，就可以將它解譯成網頁 <H1 COLOR="#FF0000" ALIGN="CENTER">快樂頌</H1>

  9. 巢狀標籤 (原則上，第一個結束標籤必須對應最後一個起始標籤，第二個結束標籤必須對應倒數第二個標籤，依此類推 ) • 空白字元 (HTML瀏覽器會忽略標籤之間多餘的空白字元或Enter鍵 ) • 特殊字元 (HTML文件中有一些特殊字元，例如小於 (<)、大於 (>)、雙引號 (")、& 和空白字元，如果想在文件中顯示這幾個字元，那麼不能直接使用鍵盤輸入，而是要分別輸入 &lt;、&gt；、&quot;、&amp;、&nbsp; )

  10. 10-6-2HTML文件的整體架構 HTML文件的整體架構可以分成三個部分－HTML版本宣告、標題宣告、文件主體 (body)，下面是一個例子： <!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. <BODY>...</BODY> 標籤的重要屬性 ： • ALINK = "#RRGGBB" 或 "...“ • BACKGROUND = "URL“ • BGCOLOR = "#RRGGBB"或 "...“ • LINK = "#RRGGBB" 或 "...“ • SCROLL = "{YES,NO}“ • TEXT = "#RRGGBB"或"...“ • TITLE = "...“ • VLINK = "#RRGGBB" 或 "..."

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

  13. onFocus = "...“ • onBlur = "...“ • onKeyPress = "...“ • onKeyDown = "...“ • onkeyUp = "...“ • onSubmit = "...“ • onReset = "...“ • onSelect = "...“ • onChange = "..."

  14. 10-6-4　網頁資料編輯與格式化 • 設定標題格式 <H1>...</H1>、<H2>...</H2>、<H3>...</H3>、<H4>...</H4>、<H5>...</H5>、<H6>...</H6> <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>

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

  16. 預先格式化段落－<PRE>...</PRE> 標籤 <HTML> <HEAD><TITLE>示範預先格式化網頁</TITLE></HEAD> <BODY> <PRE> #include <studio.h> void main() { printf("Hello World!\n") } </PRE> </BODY> </HTML>

  17. 註解－<!-- --> 標籤 <HTML> <BODY> <!--這是註解不會顯示在瀏覽器畫面上--> </BODY> </HTML>

  18. HTML提供的文字格式標籤 • <B>粗體文字 • <I>斜體文字 • <U>加底線文字 • <BIG>大字型 • <SUB>下標文字 • <SUP>上標文字 • <SMALL>小字型 • <EM>強調斜體文字 • <STRONG>強調粗體文字 • <DFN>定義文字 • <CODE>程式碼文字

  19. <SAMP>範例文字 • <KBD>鍵盤文字 • <VAR>變數文字 • <CITE>引用文字 • <ABBR>縮寫文字 • <ACRONYM>頭字語 • <STRIKE>刪除字 • <S>刪除字 • <TT>打字機字體 • <Q>引用語

  20. 水平線－<HR> 標籤 ，重要屬性有： • ALIGN = "{LEFT, CENTER, RIGHT}" (水平線向左對齊、置中或向右對齊) • COLOR = "#RRGGBB" 或 "..." (水平線顏色) • SIZE = "n" (水平線高度) • WIDTH = "n" (水平線寬度) • 範例 <HR COLOR="Green" ALIGN="LEFT" WIDTH="50%" SIZE="5">

  21. <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> • 文字字型、色彩與大小－<FONT>...</FONT> 標籤

  22. <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> • 項目符號與編號清單－<UL>、<OL>、<LI> 標籤

  23. 10-6-5　建立超連結－<A>...</A> 標籤 • 連結位於相同資料夾的文件(例如 <A HREF="question.htm">常見問題集</A> ) • 連結位於不同資料夾的文件(例如 <A HREF="Support\staff.htm">員工</A> ) • 連結Web上的文件(例如 <A HREF="http://tw.yahoo.com/">雅虎奇摩</A> ) • 連結E-mail地址 (例如 <A HREF="mailto:jeanchen@mail.ht.net.tw"> 歡迎寫信給我們</A> )

  24. <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> • 設定圖片的高度、寬度與框線

  25. <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> • 設定圖片的對齊方式

  26. 如果於插入第一張圖片的敘述中加上ALIGN = “Left” 屬性，使第一張圖片採取靠左對齊，其它敘述維持不變，旋即得到如右圖的結果 • 如果於插入第一張圖片的敘述中加上ALIGN = "Right" 屬性，使第一張圖片採取靠右對齊，其它敘述維持不變，旋即得到如右圖的結果

  27. 10-6-7　表格的製作與應用 • <TABLE>...</TABLE> 標籤：在HTML文件中標示一個表格 • <TR>...</TR> 標籤：在表格中標示一列 (Row) • <TD>...</TD> 標籤：在一列中標示一儲存格 • <TH>...</TH> 標籤：在一列中標示一標題儲存格

  28. 10-6-8　框架網頁的建立與應用 建立框架網頁的步驟： • 決定網頁的框架數目、大小及位置 • 製作框架的內容 • 設定框架的格式 • 針對不支援框架的瀏覽器設計網頁內容 使用的標籤： • <FRAMESET>...</FRAMESET> 標籤 (包含框架網頁的定義及各個框架的間距、維數、屬性等) • <FRAME> 標籤 (用來定義框架網頁內某個框架的來源網頁和屬性 ) • <NOFRAMES>...</NOFRAMES> 標籤 (若瀏覽器不支援框架，則顯示此 標籤之間的網頁內容 )

  29. 10-7Microsoft FrontPage簡介 一、快速建置專業而超水準的網站 • 實用的網站精靈 • 多元化的網頁範本 • 數十組佈景主題 • 共用邊框 • 共用樣式表 • 巢狀子Web • 版本控制 • 工作指派與管理 • 良好的網站控制及管理 • SharePoint Team Services

  30. 二、編輯文字、圖片、表格及超連結 • 設定文字格式、段落格式 (對齊方式、段落間距、縮排...)、格式複製、搜尋、拼字檢查、背景圖片、背景音樂、表格、邊界、語系、多框架、框線與網底、編號與項目清單、繁體中文與簡體中文互相轉換等 • 插入本機磁碟、多媒體藝廊、相片藝廊或網路上的圖片 • 圖片工具列 • 繪圖工具列 • 文字藝術師工具列 • 在網頁上設定超連結、書籤及影像地圖 • 提供HTML模式以檢視並編輯網頁的HTML原始碼

  31. 三、多樣化的FrontPage元件 FrontPage提供了許多元件幫助使用者營造出效果超ㄅㄧㄤˋ的網頁，例如跑馬燈、註解、導覽列、網頁換場、橫幅廣告、時間日期戳記、動態顯示按鈕、排程圖片、排程網頁、共用網頁、動態HTML效果、替代元件、Office試算表、圖表、樞紐分析表、目錄網頁、確認欄位、計數器、儲存結果、搜尋表單、十大排行榜等，其中十大排行榜可以根據瀏覽過的網頁、URL、參考網域、作業系統、瀏覽器、使用者來進行網頁排行

  32. 四、支援業界標準的動態元件 FrontPage支援業界標準的動態元件，例如Java Applets、Plug-Ins、Flash動畫、影像視訊檔、Script、ActiveX控制項、CGI、WINCGI和ISAPI程式碼 五、提供各式表單元件 FrontPage提供了文字方塊、文字區域、選項按鈕、核取方塊、按鈕、標籤、下拉式清單方塊、群組方塊和檔案上載等表單元件

  33. 六、資料庫存取功能 FrontPage提供以ASP為基礎的「資料庫結果精靈」，引導使用者存取Microsoft Accrss、Visual FoxPro、SQL Server等ODBC相容資料庫，而無須撰寫ASP程式碼。 七、內建Web上傳功能 FrontPage內建發送Web功能可以將使用者製作的網站上傳到Internet，而且還允許使用者將某些網頁標示為「不要發送」，或刪除已經發送到遠端主機的網頁、資料夾

More Related