收藏
下载资源下载资源 加入VIP,免费下载

认识网页的基本概念.docx

上传人：b****5 文档编号：6280230 上传时间：2023-01-05 格式：DOCX 页数：10 大小：20.45KB
下载 相关 举报
认识网页的基本概念.docx_第1页
第1页 / 共10页
认识网页的基本概念.docx_第2页
第2页 / 共10页
认识网页的基本概念.docx_第3页
第3页 / 共10页
认识网页的基本概念.docx_第4页
第4页 / 共10页
认识网页的基本概念.docx_第5页
第5页 / 共10页
点击查看更多>>
下载资源
资源描述

认识网页的基本概念.docx

《认识网页的基本概念.docx》由会员分享，可在线阅读，更多相关《认识网页的基本概念.docx（10页珍藏版）》请在冰豆网上搜索。

认识网页的基本概念.docx

认识网页的基本概念

Ch.0認識網頁的基本概念

●網頁的組成元素：

1.文字

2.圖片

3.超連結（hyperlink）

4.網址（首頁/Homepage之位址）

◆IPaddressv.s.DomainName

Ex:

www.tku.edu.tw163.13.1.205

●何謂網站？

⏹通常擁有一個以上的網頁

⏹一定會有首頁（Homepage）

⏹網頁透過超連結相互結合成一個網站

●製作網頁的編輯器之種類

⏹純文字之編輯器

◆Ex:

記事本orWordPad

⏹所見即所得之編輯器

◆Frontpage（一般性）

◆Dreamweaver（功能較強，較專業）

●網頁伺服器（webserver）

⏹免費網頁空間

◆Yahoo,TACO………

Ch.1認識HTML語言

●HTML語法有有兩類標籤（tag）

⏹對稱型

⏹單一型

●HTML文件的基本結構：

…….

…………………..

●設定格式的標籤

⏹

⏹

⏹

●用16進位法改變字體的顏色
⏹Ex:
test
◆以3個bytes分別代表Red,Green,Blue之色碼，
在上例中，AA-->forRed,BB-->forGreen,CC-->forBlue
Ch.2美化網頁
●設定文字編排方式的tag
⏹
可以針對任何物件將其置中
⏹
⏹
●設定背景顏色的tag
⏹
Ch.3網頁間的橋樑—超連結標籤
●相對連結（檔名或路徑）
⏹Ex:
index.htm
⏹Ex:
gif\sample.jpg
●絕對連結（網址）
⏹Ex:
http:
//www2.tku.edu.tw/~tmbx
●設定連結的標籤
⏹………
◆Ex:
企管系首頁
◆Ex:
企二A全家福
⏹………..
◆Ex:
//www2.tku.edu.tw/~tmbx>淡大企管系
●設定超連結顏色的標籤
⏹定義未開啟的連結為某種顏色
⏹定義已經開啟過的連結為某種顏色
◆上述兩種tag，關於顏色可以下列兩種方式表示
●1.各種顏色之英文字
⏹諸如：
green,blue,red,pink,yellow,…….
●2.顏色代碼（3個bytes,分別代表RGB三原色）
●Ex:
Ch.4網頁中的圖片應用
●匯入圖檔的tag
⏹
⏹定義圖片顯示之寬度
⏹定義圖片顯示之高度
◆ex:
//www.tku.edu.tw/images/logo3.jpg”>
◆ex:
//www.tku.edu.tw/images/logo1.jpg”width=400height=300>
●設定圖片靠左或靠右的tag
⏹設定圖片靠左
⏹設定圖片靠左
●設定圖片與文字間隔的tag
⏹設定圖片與文字的間隔
●替圖片設定連結屬性
⏹
讓圖片能被click而開啟另一超連結文件
●設定圖片邊框的tag
⏹
◆
●將圖片設為網頁背景的tag
⏹
Ch.5CSS—讓網頁中之文字與版面更有創意
●CSS：
CascadingStyleSheets，用來改善HTML在文字樣式與版面編排方面的限制，
使原本單調的文字能變化多端，讓網頁中即使沒有圖片，也有炫麗的效果，
而且所需要的網頁空間遠比加入圖片的網頁還來得少。
CSS能夠讓文字活起來的主要原因是，其可以將文字以圖層的方式做出重疊
的效果，而且可擺在任何妳（你）想擺的位置。
●宣告CSS開始的標籤
⏹
●CSS的基本語法有有兩種：
⏹.定義名稱{屬性名稱：
屬性設定}
⏹定義名稱{屬性名稱：
屬性設定}
●宣告套用CSS定義的開始及結束之標籤：
⏹內容
●CSS的用法
⏹font-family:
定義文字字型
⏹font-weight:
定義字體寬度
⏹font-size:
定義文字大小
⏹color:
定義文字顏色
⏹position:
absolute定義物件出現在指定位置
⏹top:
npx表示物件要在距離網頁上方起第n個像素的位置開始出現
⏹left:
npx表示物件要在距離網頁左方起第n個像素的位置開始出現
⏹z-index:
n表示將該物件設為第n層
⏹body{background:
顏色代碼}定義背景顏色
⏹A:
Link表示要建立對超連結的定義
實例：
ThisisaCSStestpage
body{background:
#6B8E23}
.title{font-family:
verdana,arial,Helvetica;
font-weight:
bold;
font-size:
48pt;
color:
#FFFFFF;
position:
absolute;
top:
30px;
left:
120px;
z-index=1}
.titlefore{font-family:
verdana,arial,Helvetica;
font-size=14pt;
color=black;
position=absolute;
top=80px;
left=190px;
z-index=2
}
A:
Link{font-family:
arial,Helvetica;
text-decoration:
none;
font-size=14pt;
color=#B0B0B0}
WanttoHaveAHomepage
IDo
//www.tku.edu.tw">TamkangUniversity
Ch.6讓網頁內容更整理俐落
●製作「條列式」選項的標籤
⏹
-->標示出全部「條列式」選項的範圍
⏹
  • ….
    • -->標示每一選項的的範圍
    ⏹
      …
    -->標示出要自動編號的範圍
    ⏹…-->定義出條列式選項的標題
    ex:
    義大利麵的種類：
    蝴蝶麵
    寬麵
    千層麵
    通心粉
    長條形義大利麵
    ●製作表格的標籤
    ⏹
    ….
    -->宣報表格的開始與結束
    ⏹-->表示要畫出一表格列
    ⏹-->表示要在表格列中畫出儲存格
    ●定義表格的外貌（在table標籤為之）
    ⏹定義表格格線的粗細
    ◆border=x
    ⏹定義表格寬度
    ◆width=xxx
    ⏹定義表格高度
    ◆height=xxx
    ⏹定義Cell與Cll之間的寬度
    ◆cellspacing=xxx
    ⏹定義內容距離Cell邊界之間隔
    ◆cellpadding=xxx
    ⏹Ex1:
    Ex2:
    週一
    週二
    週三
    週四
    週五
    週六
    第11節
    管科
    資處
    品管
    第12節
    管科
    資處
    資管
    品管
    人管
    第13節
    管科
    資管
    品管
    體育
    人管
    第14節
    資管
    體育
    Ch.8分割視窗的技巧
    ●分割（framing）視窗是由一個主頁面與若干個副頁面所組成
    ⏹主頁面：
    負責規劃空間
    ⏹副頁面：
    負責提供內容
    ●設定框架（frame）的標籤：
    ⏹：
    宣告框架（frame）開始及結束
    ⏹：
    宣告框架（frame）結束
    ⏹定義框架
    相關可設定之框架屬性如下
    ◆frameborder=no：
    將框架設定為無框線
    ●若yes，則設定為有框線
    ⏹此時，可以用border=n來控制框線的寬度，n>1
    ◆framespacing=0：
    表示框架間的距離為0
    ◆cols=n：
    表示要將視窗作直向分隔，可為絕對數值或視窗比例
    ◆rows=n：
    表示要將視窗作橫向分隔，可為絕對數值或視窗比例
    ◆name=任何英文名：
    表示要替框架命名
    ◆scrolling=yesorno：
    設定框架是否需要捲軸
    ◆scrolling=auto：
    由browser自行判斷是否加入捲軸
    ⏹設定連結目標的方法
    ◆target=任何網頁名稱設定這個連結所指向的網頁內容要放在那個框架中
    ●ex:
    Google
    ◆ex:
    http:
    //www.ibm.tku.edu.tw/indexup.htm
    Ch.9申請免費的網頁空間
    ●.tw/free.htm
    ●
    Ch.10讓網站更豐富的小東西
    ●自動換頁
    ●申請免費「訪客計數器」（counter）
    ●教學網站之網上參考資料有相關連結
    ●亦可用搜尋引擎找尋提供免費計數器之網站
    ●推薦中山大學所提供之計數器（簡明好用）
    ⏹
    //counter.nsysu.edu.tw/Count.cgi?
    dd=12">
    ⏹詳細可瀏覽http:
    //counter.nsysu.edu.tw
    ●申請免費「留言版/討論區」
    ●http:
    //www.don-.tw/
    《表單幕後的推手》
    ●CGI（CommonGatewayInterface）
    Ø表單在Client與Server互動過程中，負責扮演收集使用者輸入的資料的角色
    ⏹ex:
    計算稅額、心理測驗、留言版、討論區、搜尋表單、顧客意見回覆…..
    Ø而真正在背後作接收、傳遞、處理、回應工作的，就是一種叫做CGI（CommonGateInterface）的通訊協定。
    Ø一般情況，如果想要在網頁中加入表單，就必須自己撰寫或使用現成的CGI程式
    Ø要撰寫CGI程式大都使用C、C++、Perl……等程式語言限制一
    Ø一般而言，伺服器的管理者並不見得會允許user將一些CGI程式放上去限制二
    ⏹因為CGI程式是在server端執行，但是一些設計不良的CGI程式，在執行時，可能會造成整個WWW伺服器主機的運作發生問題，甚至當機
    ØCGI程式對不同的WebServer並不相容限制三
    ●ASP（ActiveServerPages）PHP（）
    ØASP技術的運作和CGI類似，當user透過browser將表單資料送到伺服器，伺服器就會開始處理該ASP網頁中對應的Script程式，然後將處理結果轉成HTML格式再傳回user端的瀏覽器。
    ⏹ASP網頁可以在一般的文書編輯軟體中使用
    ⏹由於ASP程式是在Server端執行Script程式，再將結果以標準的HTML格式送到user端的browser，因此，比較不用擔心瀏覽器的相容問題。
    ⏹但是，ASP程式的執行仍會加重server的負擔，因此，有些伺服器的管理者可能會限制ASP程式的使用。
    ●FrontPageserverextension
    Ø使用FrontPage來設計網頁，只要server端有安裝FrontPageserverextension，即使不會撰寫CGI或ASP程式，也能設計出功能完整的表單，以及：
    ⏹計數器
    ⏹便利的上傳功能
    ⏹直接編輯網站上的網頁
    ●JavaScript
    ØNetscape為要補HTML的不足，使網頁能有動態的效果，因此開發JavaScript這種ScriptingLanguage（描述語言）
    Ø其結構不像正統的程式語言那麼嚴謹，因此一般大眾，很容易上手
    Ø不過它還是有限制的，例如不能作寫入檔案、開啟新檔（cookie除外）等動作
    ⏹所以user可以不用擔心電腦病毒會經由JavaScript進到電腦中
    ●Java
    ØJava是製作「動態網頁」的另一項選擇
    Ø使用Java可產生所謂的Applet程式
    ØApplet可以加到網頁中以製作特殊效果
    ØApplet也可以用來連接資料庫，提供原來HTML標籤所無法辦到的功能
    
		
           
    展开阅读全文
    
        
              
      
     
    
           
    
    
        
    相关资源
    
        
    
    
        
    
    
        
    猜你喜欢
    
        
    
    
      
         
    
             相关搜索
     
    
       
        
    
      
        
      
        
    
            当前位置：首页  > 
            工程科技 > 机械仪表
        
    
        
     
        
      
    
    
    
    
        
    
     
    
        
        
    
    
    
    
    
           
        
     
          
    copyright@ 2008-2022 冰豆网网站版权所有
    经营许可证编号:鄂ICP备2022015515号-1