版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
1、Ch. 0 認識網頁的基本概念l 網頁的組成元素：1. 文字2. 圖片3. 超連結 (hyperlink)4. 網址 （首頁/Homepage之位址）u IP address v.s. Domain NameEx: .tw à 05l 何謂網站？n 通常擁有一個以上的網頁n 一定會有首頁(Homepage)n 網頁透過超連結相互結合成一個網站l 製作網頁的編輯器之種類n 純文字之編輯器u Ex: 記事本 or WordPadn 所見即所得之編輯器u Frontpage (一般性)u Dreamweaver （功能較強，較專業）l 網頁伺服器
2、(web server)n 免費網頁空間u Yahoo, TACOCh. 1 認識HTML語言l HTML語法有有兩類標籤 (tag)n 對稱型n 單一型l HTML文件的基本結構：<htm><head><title> . </title></head><body>.</body></html>l 設定格式的標籤 n <P>n <br>n <pre> </pre>l 用16進位法改變字體的顏色n Ex: <font color=”#AABBCC”
3、>test</font>u 以3個bytes分別代表Red, Green, Blue之色碼，在上例中，AA -> for Red, BB -> for Green, CC-> for BlueCh. 2 美化網頁l 設定文字編排方式的tagn <center></center> 可以針對任何物件將其置中n <p align=center> </p>n <p align=right> </p>l 設定背景顏色的tagn <body bgcolor=某個顏色之名稱>Ch. 3 網
4、頁間的橋樑超連結標籤l 相對連結 （檔名或路徑）n Ex: index.htmn Ex: gifsample.jpgl 絕對連結 （網址）n Ex: .tw/tmbxl 設定連結的標籤n <a href=”欲連結網頁的檔名或路徑”> </a>u Ex: <a href=”index.htm”> 企管系首頁 </a>u Ex: <a href=”gifsample.jpg> 企二A全家福</a>n <a href=”網址”>.</a>u Ex: <a href
5、=.tw/tmbx> 淡大企管系</a>l 設定超連結顏色的標籤n <body link=某種顏色> 定義未開啟的連結為某種顏色n <body vlink=某種顏色> 定義已經開啟過的連結為某種顏色u 上述兩種tag，關於顏色可以下列兩種方式表示l 1. 各種顏色之英文字n 諸如：green, blue, red, pink, yellow,.l 2. 顏色代碼（3個bytes, 分別代表RGB三原色）l Ex: <body link=green vlink=red>Ch. 4 網頁中的圖片應用l 匯入圖
6、檔的tagn <img src=”圖片路徑或網址” alt=”說明文字”>n <img src=”圖片路徑或網址” width=xx> 定義圖片顯示之寬度n <img src=”圖片路徑或網址” height=xx> 定義圖片顯示之高度u ex: <img src=”.tw/images/logo3.jpg”>u ex: <img src=”.tw/images/logo1.jpg” width=400 height=300>l 設定圖片靠左或靠右的tagn <
7、img src=”圖片路徑或網址” align=left> 設定圖片靠左n <img src=”圖片路徑或網址” align=left> 設定圖片靠左l 設定圖片與文字間隔的tagn <img src=”圖片路徑或網址” hspace=xx> 設定圖片與文字的間隔l 替圖片設定連結屬性n <a href=”相對連結或絕對連結之網址”><img src=”圖片路徑或網址”></a>讓圖片能被click而開啟另一超連結文件l 設定圖片邊框的tagn <img src=”圖片路徑或網址” border=xx>u <i
8、mg src=”sample.jpg” border=0>l 將圖片設為網頁背景的tagn <body background=”圖片路徑或網址”> Ch. 5 CSS 讓網頁中之文字與版面更有創意l CSS：Cascading Style Sheets，用來改善HTML在文字樣式與版面編排方面的限制， 使原本單調的文字能變化多端，讓網頁中即使沒有圖片，也有炫麗的效果，而且所需要的網頁空間遠比加入圖片的網頁還來得少。CSS能夠讓文字活起來的主要原因是，其可以將文字以圖層的方式做出重疊的效果，而且可擺在任何妳(你)想擺的位置。l 宣告CSS開始的標籤n <style typ
9、e=”text/css”>l CSS的基本語法有有兩種：n .定義名稱屬性名稱：屬性設定n 定義名稱屬性名稱：屬性設定l 宣告套用CSS定義的開始及結束之標籤：n <div class=”欲套用的CSS定義”>內容</div>l CSS的用法n font-family: 定義文字字型n font-weight: 定義字體寬度n font-size: 定義文字大小n color: 定義文字顏色n position: absolute 定義物件出現在指定位置n top:npx 表示物件要在距離網頁上方起第n個像素的位置開始出現n left:npx表示物件要在距離網頁左
10、方起第n個像素的位置開始出現n z-index:n 表示將該物件設為第n層n body background:顏色代碼 定義背景顏色n A: Link 表示要建立對超連結的定義實例：<html><head><title>This is a CSS test page</title><style type=”text/css”>bodybackground:#6B8E23.titlefont-family:verdana, arial, Helvetica; font-weight:bold; font-size:48pt; color
11、:#FFFFFF; position:absolute; top:30px; left:120px; z-index=1.titleforefont-family:verdana, arial, Helvetica; font-size=14pt; color=black; position=absolute; top=80px; left=190px; z-index=2 A:Linkfont-family:arial, Helvetica; text-decoration:none; font-size=14pt; color=#B0B0B0</style></head&
12、gt;<body><div class="titlefore">Want to Have A Homepage</div><div class="title">I Do</div><a href=".tw">Tamkang University</a></body></html>Ch. 6 讓網頁內容更整理俐落l 製作條列式選項的標籤n <ul> . </ul> ->
13、;標示出全部條列式選項的範圍n <li> . </li> ->標示每一選項的的範圍n <ol> </ol> ->標示出要自動編號的範圍n <lh> </lh> ->定義出條列式選項的標題ex: 義大利麵的種類： 蝴蝶麵 寬麵 千層麵 通心粉 長條形義大利麵l 製作表格的標籤n <table> . </table> ->宣報表格的開始與結束n <tr> ->表示要畫出一表格列n <td> ->表示要在表格列中畫出儲存格l 定義表格的外貌 （在
14、table標籤為之）n 定義表格格線的粗細u border=xn 定義表格寬度u width=xxxn 定義表格高度u height=xxxn 定義Cell 與Cll之間的寬度u cellspacing=xxxn 定義內容距離Cell邊界之間隔u cellpadding=xxxn Ex 1:<table border=1 width=400 height=300> Ex2:週一週二週三週四週五週六第11節管科資處品管第12節管科資處資管品管人管第13節管科資管品管體育人管第14節資管體育Ch. 8 分割視窗的技巧l 分割(framing)視窗是由一個主頁面與若干個副頁面所組成n 主
15、頁面：負責規劃空間n 副頁面：負責提供內容l 設定框架(frame)的標籤：n <frameset>：宣告框架(frame)開始及結束n </frameset>：宣告框架(frame)結束n 定義框架 相關可設定之框架屬性如下 èu frameborder=no：將框架設定為無框線l 若yes，則設定為有框線n 此時，可以用 border=n 來控制框線的寬度，n > 1u framespacing=0：表示框架間的距離為0u cols=n：表示要將視窗作直向分隔，可為絕對數值或視窗比例u rows=n：表示要將視窗作橫向分隔，可為絕對數值或視窗比例u
16、name=任何英文名 ：表示要替框架命名u scrolling=yes or no ：設定框架是否需要捲軸u scrolling=auto：由browser自行判斷是否加入捲軸n 設定連結目標的方法u target=任何網頁名稱è設定這個連結所指向的網頁內容要放在那個框架中l ex: <a href= target=frame_name>Google</a>u ex: .tw/indexup.htm Ch. 9 申請免費的網頁空間 .tw/free.htm Ch. 10 讓網站更豐富的小東西 自動換頁<meta
17、http-equiv="refresh" content="20; url=main.php"> 申請免費訪客計數器 (counter)l 教學網站之網上參考資料有相關連結l 亦可用搜尋引擎找尋提供免費計數器之網站l 推薦中山大學所提供之計數器（簡明好用）n <img src=".tw/Count.cgi?dd=12">n 詳細可瀏覽 .tw 申請免費留言版/討論區l http:/www.don-.tw/ 表單幕後的推手 CG
18、I （Common Gateway Interface）Ø 表單在Client與Server互動過程中，負責扮演收集使用者輸入的資料的角色n ex: 計算稅額、心理測驗、留言版、討論區、搜尋表單、顧客意見回覆.Ø 而真正在背後作接收、傳遞、處理、回應工作的，就是一種叫做CGI (Common Gate Interface)的通訊協定。Ø 一般情況，如果想要在網頁中加入表單，就必須自己撰寫或使用現成的CGI程式Ø 要撰寫CGI程式大都使用C、C+、Perl等程式語言 ç限制一Ø 一般而言，伺服器的管理者並不見得會允許user將一些CGI程式放上去 ç限制二n 因為CGI程式是在server端執行，但是一些設計不良的CGI程式，在執行時，可能會造成整個WWW伺服器主機的運作發生問題，甚至當機Ø CGI程式對不同的Web Server並不相容 ç限制三 ASP (Active Server Pages) ß PHP ( )Ø ASP技術的運作和CGI類似，當user透過browser將表單資料送到伺服器，伺服器就會開始處理該ASP網頁中對應的Script程式，然後將處理結果轉成HTML格式再傳回user端的瀏覽器。n
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
评论
0/150
提交评论