您正使用訪客身分瀏覽 (登入)
頁面路徑

Introduction：程式開發環境 Visual Web Developer 2008

　

WWW與HTML基礎

　

1.WWW簡介

(1).WWW讓使用者可以透過瀏覽器程式(IE)，存取Web伺服器上的檔案。

(2).瀏覽器程式顯示的網頁內容，就是一份超媒體文件，只要透過超連結(Hyperlinks)就可以連上這個文件。

(3).為了安全和管理的原因，本課程的Web伺服器就是目前您使用的電腦，但是我們會在課後將您設計的程式上傳到時時開機、有固定網址，並安裝有伺服器程式的電腦(對微軟而言就是IIS)，這樣就算在家中，也可以連到您設計的程式了。約定的網址為http://gis.nhlue.edu.tw/class/youretname。

　

2.HTML語言

　

(1).HTML 文件基本整體架構:(左為標記起始符號，右為結束符號，標記無大小寫之差別)
<TITLE> </TITLE> 標題元件, 會出現在瀏覽器中之標題欄中, 讓觀看者明確地了解 文件的內容.
<HEAD> </HEAD> 用來提供文件整體資訊.
<FORM> </FORM> 網頁雙向服務(問卷調查、資料庫檢索、線上購物)的開端
<BODY> </BODY> 文件本文及文件格式. HTML最重要之部份.
　

(2).簡單的範例
<!-註解，可以放在程式的任何位置->
<html>代表文件的開始
<title>My Homepage</title>代表文件的標題
<hr>加一條分隔線
<br>強迫換行(不會空一行)，可以單獨使用，無須配對
<p>段落標記，會換行並自動空一行
<p>將圖放在網頁上 <IMG SRC="http://gis.nhlue.edu.tw/images/picture1.jpg" >
<h1>Welcome to My Homepage</h1>代表文件段落名稱，<h1>字體最大 <h6>字體最小
<p><body>文件內容部分，請自己打</body>
<p><a href="mailto:shine@mail.ndhu.edu.tw">E-mail</a>
</html>代表文件結束
　

(3)Client客戶端網頁程式與Server端網頁程式

在網頁執行的程式有Client客戶端和Server伺器端兩種：

Client客戶端程式的瀏覽器必須要安裝外掛的直譯程式才能執行，例如在IE6以上執行Java程式，就必須自己安裝Java Virtural Machine；執行Flash就必須安裝Flash Player等，常見的Client網頁技術有Java, JavaScript, Flash, Ajax等。

Server伺器端是在遠端執行完畢後才傳給使用者，所以瀏覽器不需安裝外掛程式，例如屬於微軟.Net Framework技術一環的ASP.Net的Web應用程式，能即時的編譯網頁的C#或Visual Basic語言，常見的Server端網頁技術有CGI, ASP.NET, PHP等。


(4).HTML文件中出現的亂碼
1.使用Word等CSS的文字編輯器
2.使用到特殊保留符號
由於在HTML中，<、>、&、" 等符號均被用來當成標記使用，因此，當瀏覽器讀到這些符號時，會自動把它們當成標記，也就是說，您在螢幕上 就會看不到這些符號。
這樣有什麼問題？最容易遇到的問題就是，如果您想在內文中輸入<TABLE>這幾字，HTML會以為您要用TABLE這個功能，而不是要打這些字。
所以，若您要在瀏覽器中顯示這些符號，可用&lt; (小於符號)、&gt; (大於符號)、&amp; (顯示&符號)、&quot;(顯示雙引號)。以上面輸入<TABLE>這幾字為例， 您就應該輸入 &lt;TABLE&gt;，螢幕上才會出現這些字。

(5).DOCTYPE是document type的簡寫。主要用來說明你用的XHTML或者HTML是什麼版本。瀏覽器根據你DOCTYPE定義的DTD(文檔類型定義)來翻釋頁面代碼。
例如：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
就是您文件的型態宣告，後頭的網站是負責管理namespace標準的地方
接著還需要聲明你的編碼語言為繁體中文，如果簡體就是GB2312
<meta http-equiv="Content-Type" content="text/html; charset=BIG5" />
這裡聲明的編碼語言是簡體中文GB2312。
這些聲明瀏覽器編輯程式已經事先幫您準備好了。

　

程式開發環境 Visual Web Developer 2008

免費中文版下載 http://www.microsoft.com/express/vwd/

　

1.開始-->程式集-->Microsoft Visual Web Developer 2008 Express Edition

　

0-1.jpg

　

將網頁利用檔案系統的方式，儲存在個人工作目錄

本實驗室D磁碟機為自由存取空間，請在D磁碟機中建立個人目錄，並將資料存放在個人目錄中

下課後記得備份到隨身碟中，或壓縮後email回個人郵件信箱中

避免下次上課，個人檔案被系統還原或刪除。

　

0-2.jpg

　

Asp.net程式原始碼和網頁設計的的撰寫環境

　

0-3.jpg

　

請建立個人網頁基本資料

並使用瀏覽器瀏覽在網頁展示時的畫面

編輯後存檔

照片可以利用網路連結環境存取，也可以放在前述個人工作目錄中

　

0-4.jpg

　

如下圖，個人網頁資料均存放在Work工作目錄中

Default.aspx為預設開啟畫面

Default.aspx.vb為以Visual Basic開發的程式碼 (.cs 為以C#開發的原始檔)

web.config 為網路環境參數控制

/App_Data 為系統內建通常存放Access資料庫

　

0-5.jpg

　

　

將Google Gadgets 小玩意兒加入個人設計的網站中

Gadgets can be added to your personalized homepage or embedded in a webpage via a script tag.
Gadgets are small, customizable pieces of HTML (RSS viewers, games, slideshows, etc.)

http://www.google.com/ig/directory?num=48&synd=open

　

0-9.jpg

0-7.jpg

0-8.jpg

下次再執行Visual Web Developer 2008就可以直接開啟個人工作檔案了

　

0-6.jpg

最後修改: 2013年 12月 18日(三.) 16:49