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

Last modified: Wednesday, 18 December 2013, 04:49 PM