《《网页制作》PPT课件.ppt》由会员分享,可在线阅读,更多相关《《网页制作》PPT课件.ppt(23页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、National Taiwan UniversityDepartment of Computer Science and Information Engineering網頁製作網頁製作計算機計算機概概論論,2008 Spring,2008 Spring2022/10/26National Taiwan UniversityDepartment of Computer Science and Information EngineeringWorld Wide Web(WWW)nIt is a system of interlinked,hypertext documents that runs
2、over the Internetn提供以文字、圖形、聲音、影像多媒體提供以文字、圖形、聲音、影像多媒體(Multimedia)等等動態的表達方式。等等動態的表達方式。n引用超連結引用超連結(Hyperlink)的觀念的觀念,使用者可以用滑鼠按使用者可以用滑鼠按鈕或鍵盤按鍵操作鈕或鍵盤按鍵操作,透過事先安排好的連結透過事先安排好的連結(Link),輕易取得進一步的資訊。輕易取得進一步的資訊。n提供輸入介面提供輸入介面,方便用來設計查詢表單、登記表格方便用來設計查詢表單、登記表格,或其它需要讀者輸入資料的文件。或其它需要讀者輸入資料的文件。n與世界連結的廣大資料庫與強大的搜尋能力。與世界連結的廣
3、大資料庫與強大的搜尋能力。2National Taiwan UniversityDepartment of Computer Science and Information EngineeringBased on Client-Server ModelWeb ServerClient(Internet User)溝通(透過通訊協定Protocol)HyperText Transfer Protocol(HTTP)透過Web Browser輸入網址http:/Uniform Resources Locator(URL)伺服器名稱檔案位置通訊協定3National Taiwan Universit
4、yDepartment of Computer Science and Information Engineering名詞解釋名詞解釋nWorld Wide Web(WWW)整合網際網路上的所有資源,並且透過瀏覽器提供存取資料的界面。nWeb server儲存各種資源(e.g.web pages)的伺服器,並提供http服務讓用戶能夠存取資源。每個 Server 擁有一個 URL 讓使用者存取伺服器中的資源。nWeb browser一種用來從Web server下載網頁,並且讓使用者觀看的軟體(e.g.IE,Firefox,Netscape,Mozilla,Opera).nUniform Re
5、sources Locator(URL)是網際網路的一個定址規則,可以通過它來定位任何遠端或本地的可用資源。4National Taiwan UniversityDepartment of Computer Science and Information Engineering名詞解釋名詞解釋nHyperText Transmission Protocol(HTTP)網際網路上核心的一種網路傳輸協議。設計網際網路上核心的一種網路傳輸協議。設計HTTP最初的目的是為了提供一種發佈和接收最初的目的是為了提供一種發佈和接收HTML頁面頁面的方法。的方法。nHyperText Markup Langu
6、age(HTML)一種用來設計網頁和其它可在瀏覽器中看到的訊息一種用來設計網頁和其它可在瀏覽器中看到的訊息的語言的語言nHTML Editor以以HTML為基礎,用來製作網頁的軟體。為基礎,用來製作網頁的軟體。(e.g.Frontpage,Dreamwaver)5National Taiwan UniversityDepartment of Computer Science and Information EngineeringIntroduction to HTMLnHTML is a kind of markup languageIt contains pairs of starting
7、tags and end tags.Each tag may contain several attributes.文件標題文件標題:HeaderBodyThe starting tagThe end tag6National Taiwan UniversityDepartment of Computer Science and Information EngineeringIntroduction to HTMLnHTML tag:宣告文件的開頭及結尾宣告文件的開頭及結尾nHEAD tag:文件的標頭文件的標頭(Header)部份部份nTITLE tag:宣告本頁面的標題,會被顯示在瀏覽器的
8、左上角宣告本頁面的標題,會被顯示在瀏覽器的左上角nBody tag:AttributesnBackground figure:BACKGROUND=”URL of the figure”nBackground color:BGCOLOR=”#RGB”,R、G、B=00FFnText Color:TEXT=”#RGB”,R、G、B=00FFnHyperLink Color:LINK=”#RGB”,R、G、B=00FF7National Taiwan UniversityDepartment of Computer Science and Information EngineeringIntrod
9、uction to HTMLnHREF TAG test page test page NTUCSIE NTUCSIE email to me email to me/body/body8National Taiwan UniversityDepartment of Computer Science and Information Engineering我是標題我是標題This is a test!to my homepage Introduction to HTML9National Taiwan UniversityDepartment of Computer Science and In
10、formation EngineeringIntroduction to HTML一號字一號字二號字二號字三號字三號字四號字四號字五號字五號字六號字六號字七號字七號字 10National Taiwan UniversityDepartment of Computer Science and Information EngineeringIntroduction to HTML表格練習表格練習標題一標題一標題二標題二第一格第一格第二格第二格第三格第三格第四格第四格11National Taiwan UniversityDepartment of Computer Science and Inf
11、ormation EngineeringIntroduction to HTML無序列表及有序列表無序列表及有序列表 無序列表無序列表1 1 無序列表無序列表2 2 無序列表無序列表3 3 有序列表有序列表1 1 有序列表有序列表2 2 有序列表有序列表3 3 12National Taiwan UniversityDepartment of Computer Science and Information EngineeringIntroduction to HTMLFrame example This is frame right This is frame left Column 大小2
12、:713National Taiwan UniversityDepartment of Computer Science and Information EngineeringOther FunctionsnOther HTML tagsMarquee,etc.nOther advanced techniquesCascading Style Sheet(CSS)JavaScriptnhttp:/=JavaScript&variant=zh-twJava AppletFlashPHP,ASP,JSP,etc.14National Taiwan UniversityDepartment of C
13、omputer Science and Information Engineering網頁設計原則網頁設計原則nThree clicks to information principlen重要的資訊要擺在顯眼的位置重要的資訊要擺在顯眼的位置n資料資料特效特效n任何一個任何一個Link都要有回去的路都要有回去的路(Back Link)15National Taiwan UniversityDepartment of Computer Science and Information EngineeringEmail in Webn許多公司利用特定的網路程式許多公司利用特定的網路程式(Web Spi
14、der)收集大收集大量的量的email address 來寄送垃圾信件來寄送垃圾信件(spam)n大部份的大部份的 Web spider 抓取網頁文字中特定的抓取網頁文字中特定的 email 格式來收集格式來收集 email addressn使用使用 email address 圖片代替文字圖片代替文字小畫家小畫家http:/email/16National Taiwan UniversityDepartment of Computer Science and Information EngineeringHomework 1 網頁製作網頁製作nStep 1:透過軟體撰寫你的網頁。透過軟體撰寫
15、你的網頁。如利用如利用Frontpage,Dreamwaver等。等。nStep 2:上傳你的網頁到網路上空間上傳你的網頁到網路上空間(如計中如計中)。利用利用FTP軟體,如軟體,如FileZilla,SmartFTP,。nStep 3:在在Deadline前前Email網址給助教。網址給助教。Email要符合格式。要符合格式。17National Taiwan UniversityDepartment of Computer Science and Information EngineeringStep1:網頁撰寫網頁撰寫n如沒有製作網頁的軟體如沒有製作網頁的軟體,可利用計中合法授權可利用計
16、中合法授權軟體軟體:(如如 FrontPage)18National Taiwan UniversityDepartment of Computer Science and Information EngineeringStep1:網頁撰寫網頁撰寫nWebsite Basic Requirements:至少五頁以上的頁面至少五頁以上的頁面 文字文字/圖片圖片/E-mail 信箱圖片信箱圖片(請勿放超連結請勿放超連結)五個以上的超連結五個以上的超連結(hyperlink)至少使用一種以下的語法至少使用一種以下的語法:n無序列表或有序列表無序列表或有序列表 n表格表格(Table)頁面規則頁面規則
17、:n有標題有標題n儘量是原創性內容儘量是原創性內容 n除了首頁外除了首頁外,任何頁面都要有任何頁面都要有 back link 19National Taiwan UniversityDepartment of Computer Science and Information EngineeringStep2:網頁上傳網頁上傳nYou can upload your web pages to the web servers of NTU computer center.For the details,please refer to The URL of your website will loo
18、k like http:/homepage.ntu.edu.tw/b96123456nYou can find the ftp software here:nThe TAs will check your URL after receiving your email.nThe grading will depend on how much effort you spend on it.20National Taiwan UniversityDepartment of Computer Science and Information EngineeringnPlease email to by
19、deadline,3/31(一一)23:59.Late homework will receive a few penalties.n信件抬頭信件抬頭 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網址:http:/homepage.ntu.edu.tw/b96123456影片:21National Taiwan UniversityDepartment of Computer Science and Information EngineeringReferencesnGoogle is your best teacher.http:/n網頁製作教學網頁製作教學nHTML教學目錄教學目錄http:/nFrontPage 教學教學http:/22National Taiwan UniversityDepartment of Computer Science and Information Engineering23
限制150内