1 / 98

彰化縣政府補助辦理網頁設計資料庫應用班

彰化縣政府補助辦理網頁設計資料庫應用班. 建國技術學院資訊管理學系 饒瑞佶 rcjao@cc.ckit.edu.tw 2004/7/5. 環境介紹. 上課環境介紹 建國資管系一管 、 電腦教室一 助教介紹 每日記得簽到 (9:00 – 16:00) 需要協助請洽資管辦公室 其他 …. 歡迎大家. 上課方式. 上機實做 + 投影片講解 ( 廣播系統 ) 兩本課本 + 筆記本 + 水杯 … 檔案可存入 D 槽中 期末專題製作 歡迎隨時舉手發問 其他. 上課內容. 網際網路資料庫程式設計. HTML 網頁設計－ by 饒瑞佶.

kelly-cox
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. 彰化縣政府補助辦理網頁設計資料庫應用班 建國技術學院資訊管理學系 饒瑞佶 rcjao@cc.ckit.edu.tw 2004/7/5

  2. 環境介紹 • 上課環境介紹 建國資管系一管、電腦教室一 • 助教介紹 • 每日記得簽到(9:00 – 16:00) • 需要協助請洽資管辦公室 • 其他… 歡迎大家

  3. 上課方式 • 上機實做+投影片講解(廣播系統) 兩本課本+筆記本+水杯… • 檔案可存入D槽中 • 期末專題製作 • 歡迎隨時舉手發問 • 其他

  4. 上課內容 網際網路資料庫程式設計 • HTML網頁設計－by饒瑞佶 • ASP (Active Server Pages) – by 饒瑞佶 • 資料庫管理－by饒瑞佶 • JSP (Java Server Pages) － by 賴慧敏 http://www.okbuy.com.tw/rueychi/index.htm

  5. 如何學習網頁程式設計

  6. 學習網頁程式設計的態度 • 一定要有信心， “沒有錯誤是沒有原因的“，從錯誤中可以學得更多。 • 它沒有明確的範圍，學習態度不好的人可以學得很少很少，學習態度好的同學可以學到很多很多 (絕對不限於任何一本課本) 。 • 模仿是第一步，不要不好意思模仿而一味地自求創新，第二步是變通，一點一點地變，第三步才是創造。

  7. 學習網頁程式設計的態度 • 習題不要抄襲，抄襲是放棄學習的行為，如果你要放棄了，那又何必抄襲呢? • 一定要自己動手寫，而不是 用眼看。 • 多討論，多觀摩，不要單打獨鬥，也不要吝嗇與人分享。 • 如果你已經有基礎，不要把這門課當新的東西來學。好像開車，操作方式大同小異。

  8. 學習網頁程式設計的態度 • 不要有預設立場，coding不是生下來就會，若你覺得基礎不好，這次更要好好的下定決心努力。 • 想想畢業後要找的工作是什麼？若決定走coding的話現在好好規劃一下你的學習方向與模式。 • 多參考官方網站最新資訊，網路資料豐富，補足課堂或書本不足之處。

  9. 學習程式設計的態度 • 原理說明也許枯燥，但是確是必要的！了解以後，其他就教給課本就好了！ 祝大家都能夠快樂的學習

  10. HTML介紹

  11. 何謂HTML? Hyper Text Markup Language（HTML） • HTML本身並非程式設計，只不過是標示（Markup）、強調及組織一般性的文字。 • ＷＷＷ上製作ＨｏｍｅＰａｇｅ的語言，是一種標記語言。需透過瀏覽器翻譯標記後方可呈現 。 HTML 標準之原始資料 （HTML 4.0, 1997/11, W3C） 除標準HTML標記外，各瀏覽器廠商也自訂專屬的標記

  12. HTML長的如何? <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=big5"> <title>最新消息</title> </head> <BODY> <p align="center"><font size="4" color="#0080FF"> 最新消息</font>

  13. 何謂標記語言? Tag Language 製作ＨＴＭＬ文件的過程中必須加入所謂的標記【ＴＡＧ】，好讓瀏覽器知道該如何處理及呈現原始文件的內容。 在ＨＴＭＬ語法中，除了少數例外，大都是以：<XX>開始，以</XX>結束；其中XX就是ＨＴＭＬ的標記。

  14. 翻譯後呈現 何謂標記語言? HTML標籤 IE瀏覽器 這些標記是寫給瀏覽器看的

  15. HTML標記 • 有頭有尾(但有例外)，中間夾住所要顯示的文字或 圖形 • 有屬性 • 純文字檔（使用一般的文字編輯器就可以作業） • 無大小寫之分 • 檔名需要是.HTM或是.HTML <標籤名稱  屬性=“設定值”> ..要顯示之文件資料.. </標籤名稱> <Tag  Attributes ="Value"> ..Document Of Display.. </Tag>

  16. HTML標記類別 • 文件結構標籤(Document Structure Tags) • 區段格式標籤(Block Formatting Tags) • 字元格式標籤(Character Formatting Tags) • 清單標籤(List Tags) • 連結標籤(Anchor Tag) • 多媒體標籤(Multimedia Tag) • 表格標籤(Table Tags) • 表單標籤(From Tags)

  17. 常見HTML編寫工具 • OFFICE • 記事本 & FrontPage（我們選用這個） • Dreamweaver (賴老師) • Coreldraw • Macromedia系列 : Flash, Director, Authoware 產生html碼容易,不過你要看的懂才有辦法修改 與加入新的東西

  18. 一份基本的網頁應包含下列組成： <html> 宣告這份為 html 文件 <head> </head> <body> </body> </html> 宣告html文件結束 HTML的構成 html的構成是有結構的 html文件是由元件(element)所組成 元件是由標籤 (tag)所包覆而成 例如：<body> </body> ，即是一個網頁元件

  19. 常見的HTML的標籤 註：還有很多html的元件不在表中，此表只列出常用的。

  20. <html> <head> <meta> <title> </title> <base> </head> <body> <table> </table> <div> </div> <hr> <font> </font> <img> </img> <a> </a> <p> <br> </body> </html> 網頁各元件關係圖

  21. 練習 使用記事本 但是要如何執行它呢？ 可以透過伺服器或是用IE直接打開 htm01.htm

  22. 練習 htm01.htm <H1>初試 HTML 語法</H1> <HR> <H2>使用 HTML 的基本觀念</H2><P> <UL> <LI>標示的觀念</LI> <LI>區塊的觀念</LI> <LI>參數的觀念</LI> </UL> 有沒有發現省略了很多標籤？

  23. 練習 htm01.htm <H1>初試 HTML 語法</H1> <HR> <H2>使用 HTML 的基本觀念</H2><P> <UL> <LI>標示的觀念</LI> <LI>區塊的觀念</LI> <LI>參數的觀念</LI> </UL> 有沒有發現省略了很多標籤？

  24. HTML與ASP的執行方式 HTML： 不一定要透過伺服器，直接使用IE開啟檔案就可以 ASP： 一定要透過伺服器，不可以直接使用IE開啟檔案

  25. 基本標籤介紹 • HEAD元件(標頭資訊) head元件是由<head></head>標籤所包覆的區塊，用來表示這份網頁的資訊，例如標題、文件的編碼、文件的期限等等，裡面可包含下列的元件： • Meta元件 <meta content="text/html; charset=big5" http-equiv="content-type"> (這是一份中文BIG5編碼的文件) <meta HTTP-EQUIV=“refresh” CONTENT=“5;URL=http://www.mdu.com.tw”> (五秒後，請幫我轉到 http://www.mdu.com.tw 的網址) • Title元件 <title>這是我的第一張網頁</title> • Base元件 <base target=“left”> 這張網頁的預設連結，預設都連結到left的框架頁中(後面再詳述)。

  26. 基本標籤介紹 • BODY元件(文件主體) body元件是由<body></body>標籤所包覆的區塊，用來表示這份網頁的主體，裡面可包含很多的元件： Body的屬性： • Bgcolor屬性 背景顏色 <body bgcolor=“red”> • Background屬性 背景圖片 <bdoy Background=“http://www.mdu.edu.tw/123.jpg” > • Link、vlink、alink屬性 超連結的顏色 <body link=“red” vlink=“blue” alink=“green”> • Scroll 背景圖片要不要跟著scrollbar移動。 <body scroll=“no”>

  27. 常用標籤介紹 • 標題元件 標題元件是由<h1></h1>等標籤所包覆的區塊，用來表示一個標題，可用下列的元件來表示： • <h1></h1> <h1>這是標題一</h1> • <h2></h2> • <h3></h3> • <h4></h4> • <h5></h5> • <h6></h6> • <Aaddress> <pre> <blockquote> BLOCKQUO.HTM

  28. 常用標籤介紹 BLOCKQUO.HTM <H2>使用 HTML 的基本觀念</H2> <BLOCKQUOTE> 標示的觀念<BR> 區塊的觀念<BR> 其他觀念 <BLOCKQUOTE> 多個放在一起空白字元，只會被瀏覽器視為一個空白字元<BR> 跳行字元是沒有作用的字元<BR> 標示是不區分大小寫的 </BLOCKQUOTE> </BLOCKQUOTE>

  29. 常用標籤介紹 • FONT元件(文字) Font元件是由<font></font>等標籤所包覆的區塊，用來表示一段或是一個文字，可用下列的元件來表示： Font屬性 • color 屬性 • size 屬性 • face 屬性 <font color=“blue” size=“+3” face=“新細明體”>這是Font元件</font>

  30. 常用標籤介紹 • 文字標籤元件 可以讓文字以不同的方式呈現： 列舉常用的如下： • <B></B> 粗體 • <I></I> 斜體 • <U></U> 底線 • <S></S> 刪除線 <b>這是粗體</B> Text.htm & size.htm

  31. 常用標籤介紹 Text.htm <B>這是粗體字</B> <I>這是斜體字</I> <U>這是加底線字</U><P> 這是正常字<SUP>這是上標字</SUP><P> 這是正常字<SUB>這是下標字</SUB><P> <TT>這是Windows的等寬字</TT><P> <FONT SIZE=+1>字體放大一級</FONT>

  32. 常用標籤介紹 • 列舉清單元件 可以讓文字以不同的方式列舉： 列舉清單常用的如下： 無序列舉 • <ul></ul> • <li> htm01.htm 有序列舉 • <ol></ol> • <li> 預設用1,2,3,4… • 有序列舉 type 可為 1、A、a、I、i

  33. FrontPage介紹

  34. FrontPage介紹 一、Frontpage操作介面介紹 二、MS系統的慣例 【所見即所得】，就是這麼簡單！！ 三、熟悉操作介面 請同學實際操作練習。

  35. 下拉選單 工具列 工作區 管理項 編輯切換

  36. 表格

  37. 表格標籤介紹 • table元件(表格) table元件是由<table></table>標籤所包覆的區塊，用來表示一個表格，裡面可包含下列的元件： table的屬性及元件： • Bgcolor屬性  <table bgcolor=“red”> • Background屬性 <table Background=http://www.mdu.edu.tw/123.gif> • border屬性 設定表格的框的寬度<table border=“2”> • Width、 height屬性 設定表格寬跟高<table width=“100%” height=“500px”> • Cellspacing(欄跟欄之間的距離)、 cellpadding(欄裡面字跟欄框的距離)屬性 <table Cellspacing=“2” cellpadding=“4”> • Tr元件 (列) • Td元件 (欄)(也具有像table一樣的屬性，包括bgcolor、width、height 等等)

  38. <TABLE> <TR> </TR> <TD> 內容 </TD> <TD> 內容 </TD> <TD> 內容 </TD> <TR> </TR> <TD> 內容 </TD> </TABLE> 基本表格樣本 <CAPTION> 標題 </CAPTION> <TR>：代表列 <TD>：代表欄 這樣轉成HTML標籤長成什麼樣子？

  39. 基本表格樣本 <TABLE> <CAPTION>表格標題</CAPTION> <TR> <TD>第一列，內容一</TD><TD>第一列，內容二</TD> </TR> <TR> <TD>第二列，內容一</TD><TD>第二列，內容二</TD> </TR> </TABLE>

  40. ColSpan=3 RowSpan=2 ColSpan=2 畸形表格的產生 ColSpan 與RowSpan 屬性

  41. 範例練習 用FrontPage來製作表格 如何劃表格？ 如何調整大小 如何設定顏色？ 如何設定邊框？ 如何利用表格來排版？

  42. 畸形表格的產生 <table border="1"> <tr> <td colspan="3"></td> </tr> <tr> <td rowspan="2"></td> <td colspan="2"></td> </tr> <tr> <td></td> <td></td> </tr> </table>

  43. 圖片

  44. 常見的圖片格式 網路上常見的圖片格式有下列兩種：

  45. 如何插入圖片至HTML中？ <img src=“圖片位置” width=“100px” height=“200px”> 圖片的設定 利用FrontPage圖片工具設定圖片

  46. 相對路徑與絕對路徑 相對路徑： 相對於預設主目錄，如C:\Inetpub\wwwroot 把主目錄表示成/ 絕對路徑： 使用網址方式指定 如http://www.okbuy.com.tw/rueychi/index.htm

  47. 如何找到你設計的網頁？ 別人如何在網際網路這個茫茫大海中找到你所設計的網頁？ 當然你要告訴別人你的網頁在哪？ WWW SEVER位置 • 但是如何做呢？ • 當然你要有一台SERVER • 你要把檔案擺到正確的目錄下

  48. 要求服務 提供服務：WWW, FTP, BBS … 輸入http://www.kimo.com.tw Server & Client Client用戶端 瀏覽器 Server伺服端 網頁伺服器 伺服器與用戶端是相對的，不是絕對的！ 同一台機器既可以是伺服器，也可以是用戶端

  49. 步驟1：要求瀏覽網頁 A.htm 步驟2：下載A.htm 步驟3：瀏覽器翻譯後顯示 HTML如何運作? 用戶端 瀏覽器 伺服端 網頁伺服器 HTML碼不受保護 你可以試著複製一個網頁

  50. 步驟1：要求瀏覽網頁 A.asp 步驟3：下載A.htm 步驟2：伺服器執行ASP程式並轉換成純HTML碼 ASP如何運作 ? 用戶端 瀏覽器 伺服端 Apache網頁伺服器 ASP程式受到保護 要瀏覽ASP網頁，而不是開啟ASP網頁

More Related