2022年使用VWD建立ASPNET网页.ppt

按一下以編輯母片標題樣式,按一下以編輯母片,第二層,第三層,第四層,第五層,ASP 網頁程式設計:第1章 ASP.NET與VWD 的的基礎,*,郭永隆,2009/2/16,2-2 Web Form表單的程式架構,2-3 設計檢視與程式碼編輯器的使用,2-4 網頁內容的基本編輯,2-5 水平線、項目符號與編號,2-6 新增圖片與超連結,2-7 表格的版面配置,內嵌於HTML標籤：ASP.NET網頁的架構是使用符號，將程式碼內嵌於HTML標籤中，這種架構屬於傳統ASP技術（Class ASP）的寫法，其主要目的是與舊版ASP技術相容，如下所示：,上述符號間就是VB 2008程式碼片斷。,內嵌程式碼分割,內嵌程式碼分割（Inline Code Separation）的程式架構主要分成兩大部分：伺服端控制項的Web Form表單和事件處理程序。VWD內建【Web Form】範本建立的ASP.NET網頁就屬於此架構。,雖然事件處理程序和伺服端控制項的標籤程式碼在同一個檔案，但是分割成不同區塊，事件處理程序是在標籤，控制項位在標籤的子標籤。,隱藏程式碼模型,在ASP.NET 2.0版時新增隱藏程式碼模型（Code Behind Model），可以將前述內嵌程式碼分割架構的控制項和事件處理程序都獨立成檔案，換句話說，完整的ASP.NET網頁是由兩個檔案所組成。filename.aspx和filename.aspx.vb兩個檔案，filename.aspx擁有控制項；filename.aspx.vb是事件處理程序的類別檔。,在VWD新增ASP.NET網站後，我們就可以建立兩種Web網頁，其說明如下所示：,Web Forms表單：這是包含HTML標籤和,伺服端控制項,的網頁，即，其副檔名為.aspx。,HTML網頁：內含HTML標籤的Web網頁，並不含任何ASP.NET控制項，其副檔名是.htm。,事件驅動程式設計,在VWD建立的ASP.NET網頁是使用事件驅動程式設計（Event-driven Programming），其執行順序需視使用者的操作而定，也就是依觸發的事件來執行適當的處理。,例如：當我們在網頁的表單輸入註冊資料後，按【送出】鈕，就會觸發Click事件，程式依此事件來執行對應的事件處理程序。,在VWD新增ASP.NET網站後，預設使用,隱藏程式碼模型,建立名為Default.aspx的ASP.NET網頁。所以我們先刪除此網頁，然後建立使用,內嵌程式碼分割,的ASP.NET網頁。,在加入新項目對話方塊視窗中，,取消勾選,【將程式碼置於個別檔案中】,，,即可新增,內嵌程式碼分割,在Web Form表單新增控制項,步驟二：在Web Form表單新增控制項,VWD編輯視窗的【設計】檢視是一種隨看即所得的視覺化編輯工具，我們只需在工具箱視窗選取控制項，就可以在Web Form表單上新增控制項的元件，如下圖所示：,設定控制項屬性,步驟三：設定控制項屬性,在Web Form表單新增控制項後，就可以在右下方屬性視窗設定控制項屬性,，,如下圖所示：,水平線在網頁內容中可以分隔標題文字、段落和圖片，最常使用在標題文字和內文段落之間，可以提供文件更佳的編排效果。,在VWD的表格功能表提供建立和編輯表格指令，只需輸入表格列和欄數，就可以建立網頁表格。,Language屬性（Attribute）定義ASP.,Text=複製 Width=78px/,新增其他控制項,步驟四：新增其他控制項,接著請重複步驟二和三新增TextBox和Button按鈕控制項，並且設定相關屬性。,在Button控制項新增事件處理程序,步驟五：在Button控制項新增事件處理程序,目前在Web Form表單共新增Label1、TextBox1和Button1三個控制項。接著，就可以新增按鈕控制項的事件處理程序，如下所示：,01:Protected Sub Button1_Click(ByVal sender _,As Object,ByVal e As System.EventArgs),02:,03:End Sub,在完成Web Form表單設計和輸入程式碼後，我們就可以預覽ASP.NET網頁內容，請執行檔案/在瀏覽器中檢視指令或右鍵快顯功能表的【在瀏覽器中檢視】指令，可以看到瀏覽程式顯示的執行結果。,2-2 Web Form表單的程式架構,Web Form表單可以建立跨平台和跨瀏覽程式Web應用程式的輸入介面，其使用的技術如同在VB、JBuilder等視覺化開發工具建立Windows應用程式的,GUI（Graphics User Interface）圖形使用介面,。,Web Form表單程式架構是一種,事件驅動程式設計模型（Event-driven Programming Model）,，它是使用,伺服端控制項,建立Web Form表單的使用介面。當產生事件時，建立對應的事件處理程序來處理事件。,Web Form表單的基本架構,Protected Sub Button1_Click(ByVal sender As Object,_,ByVal e As System.EventArgs),End Sub,未命名頁面,Web Form表單的基本架構(續),架構說明,Web Form程式架構，主要分成兩個部分：,標籤的事件處理程序或函數,：以此例是Button1_Click()事件處理程序，VWD建立的事件處理程序預設使用,Protected,存取修飾子。,XHTML文件的標籤,：我們是在子標籤建立Web Form表單，在標籤中新增,伺服端控制項,（Server Controls），以此例擁有Label、TextBox和Button控制項。,XHTML文件的基礎,在ASP.NET網頁中使用的並不是HTML標示語言，而是其下一代的,XHTML,，XHTML是用來取代HTML 4.0版，不過，它仍然使用HTML 4.0版的標籤語法。,XHTML文件架構和HTML文件相似，只是在文件開頭使DOCTYPE指定驗證的DTD（Document Type Declarations），如下所示：,XHTML文件,XHTML本身的指令則是由,標籤和屬性,所組成，如下所示：,標籤（Tags）：XHTML標籤是使用,符號括起的指令，分為開始和結尾標籤，例如：.標籤，在結尾標籤需要加上/符號，標籤內的文字內容就會套用預設樣式來進行編排，以此例標籤就是粗體字。,屬性（Attributes）：每一個標籤可以擁有一些屬性來定義細部編排。,XHTML文件架構,XHTML文件的架構主要是由三種標籤所組成，如下表所示：,Web Form表單的程式架構,Page編譯指引,。,Language屬性,（Attribute）定義ASP.NET程式使用的程式語言，以此例為VB，表示使用Visual Basic 2008語言。,程序與函數,，和Web Form表單控制項的事件處理程序。,Web Form表單的程式架構(續),標籤是HTML 4.0 x版的物件標籤，這是一個空白、沒有任何樣式的容器標籤，其,主要目的是用來群組HTML標籤或控制項,。,基於編排所需，VWD預設將,伺服端控制項,的標籤程式碼置於,HTML div,標籤中。換句話說，,標籤可以視為Web Form表單的,編輯區域,，換句話說，我們可以在此範圍內新增控制項。,Web Form表單是由,伺服端控制項（Server Controls）,組成，它是一種伺服端可程式化物件。在ASP.NET網頁可以使用HTML或Web控制項來建立使用介面。,2-3 設計檢視與程式碼編輯器的使用,在VWD編輯視窗的檢視主要分為兩種：一為設計檢視的,編輯視窗,；一為功能強大的,程式碼編輯視窗,。,2-3-1 設計檢視的控制項定位,2-3-3 程式碼編輯器的使用,2-3-1 設計檢視的控制項定位,因為ASP.NET網頁本身是一份文件，其內容排列方式類似記事本或Word編輯的文件，預設控制項的編排方式是從左至右排列，如何超過文件寬度就自動換行靠左對齊，然後從下一行繼續排列，如同在Word中輸入一個個文字，如下圖所示：,絕對定位方式,絕對定位方式可以任意調整控制項的位置，如同在畫布上的指定位置繪出控制項，如下圖所示：,相對定位方式,相對定位方式是指其位置是相對於前一個控制項，位置與前一個控制項相關連，換句話說，如果調整前一個控制項的位置，也會同時自動調整後一個控制項的位置，以維持兩個控制項相對的間距。,在ASP.NET網站開啟ASP.NET網頁時，預設使用,【原始檔】,檢視，我們可以指定ASP.NET網頁的頁面起始位置，改為一開啟就是,【設計】,檢視，請執行,工具/選項,指令，可以看到選項對話方塊。,點選,【一般】,頁面，在,【頁面起始位置】,處選擇,【設計檢視】,，按確定鈕指定ASP.NET網頁的頁面起始為設計檢視。,2-3-3 程式碼編輯器的使用,開啟兩頁ASP.NET網頁，並且選【原始檔】檢視，在上方選檔名標籤可以切換編輯的程式碼檔案，檔案名稱後如有,星號,，,表示有更改但尚未儲存,。原始程式碼的標籤是深紅色，屬性是紅色，Visual Basic關鍵字為藍色，註解為綠色，其他程式碼為黑色。,輸入HTML或伺服端控制項標籤,在VWD程式,碼編輯視窗,輸入HTML或伺服端控制項標籤，例如：表格的標籤，只需輸入的部分標籤，就會顯示可能標籤的清單，輸入標籤後按一下空白鍵，就會示此標籤的屬性清單，如下圖所示：,智慧Visual Basic程式碼輸入,在程式碼編輯視窗輸入Visual Basic程式碼時，VWD提供智慧提示，可以在輸入程式碼時，只需,輸入部分內容,，即可顯示程式語法可能的關鍵字清單、物件的屬性與方法語法等提示訊息。,2-4 網頁內容的基本編輯,2-4-2 調整文字內容的字型與尺寸,2-4-3 指定文字效果,2-4-4 文字內容的前景與背景色彩,2-4-5 標題或段落的文字編排,在VWD設計檢視的編輯區域輸入的文字內容，就是ASP.NET網頁顯示的文字內容。VWD是將Enter鍵視為換行分隔符號，如果文字內容需要換行，也就是插入HTML的標籤，我們只需輸入,Enter,鍵，即可替文字內容換行。,2-4-2 調整文字內容的字型與尺寸,HTML標籤文字尺寸分為17級，它是使用836點字來對應，級數愈大，字型尺寸愈大。如果覺得字型不夠漂亮，在VWD也可以將文字重設成電腦安裝的其他漂亮字型。,2-4-3 指定文字效果,在VWD的格式工具列提供按鈕來指定常用的文字效果，如下所示：,粗體：顯示粗體字效果的標籤，如果需要強調的文字內容，就可以使用粗體字來增加文字在段落中的明顯度。,斜體：顯示斜體字效果的標籤，不過此效果使用在英文字比中文字來的好。,底線：顯示底線字效果的標籤，對於中文來說，底線字強調的效果比斜體字好，不過可能與藍色底線字的超連結文字產生混淆。,2-4-4 文字內容的前景與背景色彩,在VWD可以指定文字的前景和背景色彩，我們只需選擇文字內容，再套用所需的色彩，就可以輕鬆更改文字顯示的色彩，和套用的背景色彩。,2-5 水平線、項目符號與編號,2-5-1 項目符號與編號,2-5-2 插入水平線,2-5-1 項目符號與編號,ASP.NET網頁的項目符號與編號就是一種清單項目，可以將文字內容以項目方式來一一的列出，讓文字內容更簡潔有力。清單項目主要分為兩種，如下所示：,項目符號：項目符號的每一個項目都是使用符號、或小圖示等開頭，屬於一種沒有順序的項目。,編號：如同項目符號，改為使用數字、英文和羅馬字母開頭的項目，在項目間擁有前後順序。,2-6 新增圖片與超連結,2-6-1 插入網頁圖片,2-6-2 建立超連結,2-6-1 插入網頁圖片,在ASP.NET網頁不只可以顯示文字內容，也可以新增圖片或超連結。,事先準備好圖片,2-6-2 建立超連結,網頁的超連結可以使用文字或圖片作為媒介，換句話說，超連結的連接點可以是文字內容或圖片。,在網頁中的文字超連結是最常使用的超連結媒介，預設是,藍色底線字,的文字內容，當滑鼠移到文字超連結上時，游標會成為,手形,。,2-7 表格的版面配置,2-7-1 建立表格,2-7-2 編輯表格,2-7-1 建立表格,表格（Tables）是一種資料排列方式，可以將資料分類和系統化處理，在ASP.NET網頁使用表格的主要目的是用來進行版面配置，對齊和編排多個控制項。,在VWD的表格功能表提供建立和編輯表格指令，只需輸入表格列和欄數，就可以建立網頁表格。,2-7-2 編輯表格,在建立網頁表格後，表格功能表提供進一步編輯表格內容的指令。例如：在表格插入或刪除列、欄或儲存格，或是合併、分割、平均分配列高或欄寬等。,作業,請仿照課本第二章第二節範例，當按下按鈕時，文字方塊出現Hello ASP.Net！我是 的字樣。並且將此作業上傳到,e-learning,平台。,The end,