《网页制作》PPT课件.ppt

1、2020/9/6,網頁製作,計算機概論, 2008 Spring,2,World Wide Web (WWW),It is a system of interlinked, hypertext documents that runs over the Internet 提供以文字、圖形、聲音、影像多媒體 (Multimedia) 等等動態的表達方式。 引用超連結 (Hyperlink) 的觀念，使用者可以用滑鼠按鈕或鍵盤按鍵操作，透過事先安排好的連結 (Link)，輕易取得進一步的資訊。 提供輸入介面，方便用來設計查詢表單、登記表格，或其它需要讀者輸入資料的文件。 與世界連結的廣大資料庫與強大

2、的搜尋能力。,3,Based on Client-Server Model,Web Server,Client (Internet User),溝通(透過通訊協定Protocol),HyperText Transfer Protocol (HTTP),透過Web Browser輸入網址.tw/chinese/main.html,Uniform Resources Locator (URL),伺服器名稱,檔案位置,通訊協定,4,名詞解釋,World Wide Web (WWW) 整合網際網路上的所有資源，並且透過瀏覽器提供存取資料的界面。 Web server

3、儲存各種資源(e.g. web pages)的伺服器，並提供http服務讓用戶能夠存取資源。 每個 Server 擁有一個 URL 讓使用者存取伺服器中的資源。 Web browser 一種用來從Web server下載網頁，並且讓使用者觀看的軟體(e.g. IE, Firefox, Netscape, Mozilla, Opera). Uniform Resources Locator (URL) 是網際網路的一個定址規則，可以通過它來定位任何遠端或本地的可用資源 。,5,名詞解釋,HyperText Transmission Protocol (HTTP) 網際網路上核心的一種網路傳輸協議

4、。設計HTTP最初的目的是為了提供一種發佈和接收HTML頁面的方法。 HyperText Markup Language (HTML) 一種用來設計網頁和其它可在瀏覽器中看到的訊息的語言 HTML Editor 以HTML為基礎，用來製作網頁的軟體。(e.g. Frontpage, Dreamwaver),6,Introduction to HTML,HTML is a kind of markup language It contains pairs of starting tags and end tags. Each tag may contain several attributes.

5、, 文件標題 : : ,Header,Body,The starting tag,The end tag,7,Introduction to HTML,HTML tag： 宣告文件的開頭及結尾 HEAD tag： 文件的標頭(Header)部份 TITLE tag： 宣告本頁面的標題，會被顯示在瀏覽器的左上角 Body tag： Attributes Background figure：BACKGROUND=” URL of the figure” Background color：BGCOLOR=”#RGB”，R、G、B=00FF Text Color：TEXT=”#RGB”，R、G、B=0

6、0FF HyperLink Color：LINK=”#RGB”，R、G、B=00FF,8,Introduction to HTML,HREF TAG, test page NTUCSIE email to me ,9, 我是標題 This is a test! to my homepage ,Introduction to HTML,10,Introduction to HTML, 一號字 二號字 三號字 四號字 五號字 六號字 七號字 ,11,Introduction to HTML, 表格練習 標題一標題二第一格第二格第三格第四格 ,12,Introduction to HTML, 無序列

7、表及有序列表 無序列表1 無序列表2 無序列表3 有序列表1 有序列表2 有序列表3 ,13,Introduction to HTML, Frame example , This is frame right , This is frame left ,Column 大小2:7,14,Other Functions,Other HTML tags Marquee, etc. Other advanced techniques Cascading Style Sheet (CSS) JavaScript /w/index.php?title=JavaS

8、cript&variant=zh-tw Java Applet Flash PHP, ASP, JSP, etc.,15,網頁設計原則,Three clicks to information principle 重要的資訊要擺在顯眼的位置 資料特效 任何一個Link都要有回去的路(Back Link),16,Email in Web,許多公司利用特定的網路程式(Web Spider)收集大量的email address 來寄送垃圾信件(spam) 大部份的 Web spider 抓取網頁文字中特定的 email 格式來收集 email address 使用 email address 圖片代替

9、文字 小畫家 ,17,Homework 1 網頁製作,Step 1: 透過軟體撰寫你的網頁。 如利用Frontpage，Dreamwaver等。 Step 2: 上傳你的網頁到網路上空間(如計中)。 利用FTP軟體，如FileZilla, SmartFTP, 。 Step 3: 在Deadline前Email網址給助教。 Email要符合格式。,18,Step1: 網頁撰寫,如沒有製作網頁的軟體，可利用計中合法授權軟體: (如 FrontPage) .tw/download/,19,Step1: 網頁撰寫,Website Basic Requireme

10、nts: 至少五頁以上的頁面 文字/圖片/E-mail 信箱圖片(請勿放超連結) 五個以上的超連結(hyperlink) 至少使用一種以下的語法: 無序列表或有序列表 表格(Table ) 頁面規則: 有標題 儘量是原創性內容 除了首頁外, 任何頁面都要有 back link,20,Step2: 網頁上傳,You can upload your web pages to the web servers of NTU computer center. For the details, please refer to .tw/docs/stude

11、nt_homepage.html The URL of your website will look like .tw/b96123456 You can find the ftp software here: .tw/cpatch/ftp/filezilla/source/filezilla_2_2_29_setup.exe The TAs will check your URL after receiving your email. The grading will depend on how much effor

12、t you spend on it.,21,Please email to by deadline, 3/31(一) 23:59. Late homework will receive a few penalties. 信件抬頭 ICS08_HW1 StudentID e.g., my student ID is b96123456, the email subject should be “ICS08_HW1b96123456” The email content should be in the following format.,Step3: 完成作業繳交,姓名: 黃小明 系級: 數學系一 學號: b96123456 網址: .tw/b96123456 影片: .tw/b96123456/b96123456.wmv