1 / 158

ASP.NET 網頁製作徹底研究

ASP.NET 網頁製作徹底研究. 參考資料：旗標出版 F8920 ASP.Net 網頁製作徹底研究 陳會安. 第1章 電子商務環境與 ASP.NET 的環境建立. 1-1 電子商務的基本認識 1-2 電子商務網站和網頁的基礎 1-3 如何在網路上建立電子商務 1-4 使用 ASP.NET 建立電子商務 1-5 建立 ASP.NET 的執行環境. 1-1 電子商務的基本認識. 1-1-1 電子商務的基礎 1-1-2 電子商務的種類. 1-1-1 電子商務的基礎. 電子商務的演進

dorothy-williamson
Download Presentation

ASP.NET 網頁製作徹底研究

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. ASP.NET網頁製作徹底研究 參考資料：旗標出版 F8920 ASP.Net網頁製作徹底研究 陳會安

  2. 第1章 電子商務環境與ASP.NET的環境建立 • 1-1 電子商務的基本認識 • 1-2 電子商務網站和網頁的基礎 • 1-3 如何在網路上建立電子商務 • 1-4 使用ASP.NET建立電子商務 • 1-5 建立ASP.NET的執行環境

  3. 1-1 電子商務的基本認識 • 1-1-1 電子商務的基礎 • 1-1-2 電子商務的種類

  4. 1-1-1 電子商務的基礎 • 電子商務的演進 • 「電子商務」（e-commerce）是利用Internet做生意，也就是使用電腦在網路上進行商業交易活動，交易是建構在資訊科技發展的Internet網路。 • 電子商務的特性 • 節省商業交易的成本。 • 商品資訊取得容易。 • 企業行銷將更加容易。 • 高效率上下游產業的供銷體系。 • 加快企業國際化的腳步。

  5. 1-1-2 電子商務的種類 • B to C型電子商務 • B to C的英文是Business to Consumer，也就是企業對個人交易模式的電子商務。 • B to B型電子商務 • B to B的英文是Business to Business，也就是企業對企業交易模式的電子商務。 • C to C型電子商務 • C to C的英文是Consumer to Consumer，也就是消費者對消費者交易模式的電子商務。 • C to B型電子商務 • C to B的英文是Consumer to Business，也就是消費者對廠商交易模式的電子商務。

  6. 1-2 電子商務網站和網頁的基礎 • 1-2-1 網站和網頁的基本觀念 • 1-2-2 電子商務網站和網頁的設計

  7. 1-2-1 網站和網頁的基本觀念 • 「網站」（Web Site）是一種網路的新興媒體，透過Internet全球性的網路系統，成為即時和多媒體資訊的傳播管道。 • 「網頁」（Web Page、Homepage、HTML文件等）是網站重要的組成元件，它是資訊提供的舞台，基本上網站都擁有多頁網頁，這些網頁各司所職，以便構成整個網站的內容。

  8. 1-2-2 電子商務網站和網頁的設計 • 電子商務網站是Web基礎的應用程式，網頁內容只是系統的操作介面，真正後端支援的資料庫系統和付款機制，才是網頁設計上挑戰。 • 網頁設計需要伺服端的ASP.NET技術，它正是一種建立電子商務網站的最佳選擇。

  9. 1-3 如何在網路上建立電子商務

  10. 1-4 使用ASP.NET建立電子商務 • 1-4-1 為什麼需要ASP.NET 建立電子商務 • 1-4-2 ASP.NET是一種完全 伺服端的技術

  11. 1-4-1 為什麼需要ASP.NET建立電子商務 • 電子商務網站的架構可以分為前端的網頁內容和後端資料庫系統，如下圖所示：

  12. 1-4-2 ASP.NET是一種完全伺服端的技術 • ASP.NET屬於一種全新的伺服端技術，使用「CLR」（Common Language Rumtime）架構的程式設計平台，能夠在伺服端建立功能強大的Web應用程式。

  13. 1-5 建立ASP.NET的執行環境 • 1-5-1 在Windows XP安裝IIS • 1-5-2 下載.NET Framework SDK • 1-5-3 安裝.NET Framework SDK

  14. 1-5 建立ASP.NET的執行環境 • ASP.NET的執行環境和舊版ASP 3.0相似，其作業系統的軟體需求如下所示： • IIS 5以上版本的Web伺器。 • Windows 2000 Professional或Server，建議安裝Service Pack 2。 • Windows XP Professional。 • Windows .NET Sever。

  15. 1-5-1 在Windows XP安裝IIS • ASP.NET的執行環境需要Web伺服器，以Windows 2000/XP來說就是「IIS」（Internet Information Services）。 • 在Windows XP電腦安裝IIS元件前，需要安裝TCP/IP通訊協定（預設安裝）。 • 在準備好Windows XP Professional系統光碟。請執行「開始/控制台」指令開啟「控制台」視窗，按兩下【新增或移除程式】開始安裝。

  16. 1-5-2 下載.NET Framework SDK • ASP.NET的執行環境需要安裝.NET Framework，分成兩種版本，可以免費下載，如下所示： • .NET Framework Redistributable： • 包含ASP.NET和.NET Framework，提供ASP.NET建立Web應用程式的執行環境，通常是安裝在已經開發完成的網站。 • .NET Framework Software Development Kit： • 除了Redistributable套件外，還加上相關的文件、範例和一些命令列的程式開發工具，如果準備開發ASP.NET的Web應用程式，建議在Web伺服器安裝.NET Framework SDK。

  17. 1-5-3 安裝.NET Framework SDK • 在自行下載或使用書附光碟提供的.NET Framework SDK和Sevice Pack後，就可以在Windows XP安裝.NET Framework SDK ： • 首先安裝.NET Framework SDK。 • 接著安裝.NET Framework SDK Service Pack 。

  18. 第2章 HTML、XML和CSS的基礎 • 2-1 HTML的基礎 • 2-2 HTML標籤 • 2-3 XML文件的基礎 • 2-4 Cascading Style Sheets • 2-5 局部套用的CSS • 2-6 內建網頁的CSS • 2-7 使用CSS進行絕對位置的編排

  19. 2-1 HTML的基礎 • 2-1-1 第一份HTML文件 • 2-1-2 HTML文件的基本架構 • 2-1-3 Meta標籤的使用

  20. 2-1-1 第一份HTML文件-1 • 「HTML」（HyperText Markup Language）標記語言屬於一種文件編排語言，其目的是編排文件的內容，以便顯示漂亮的文件內容。 • Tim Berners-Lee在1991年建立HTML，在1993年HTML1.0版由Berners-Lee和Connolly完成，HTML只是使用SGML的慣用語法，也就是標籤和屬性，如下所示： • 「標籤」（Tag）：HTML標籤是一個字串符號，主要是標示需要套用編排格式的文字內容，在標籤內的文字是使用預設格式編排。 • 「屬性」（Attribute）：每一個標籤可以擁有一些屬性來定義文字內容的細部編排。

  21. 2-1-1 第一份HTML文件-2 01: <html> 02: <head> 03: <title>Ch2-1-1.htm</title> 04: </head> 05: <body> 06: <b>From: </b>hueyan@ms2.hinet.net<br> 07: <b>To: </b>hueyan@tpts1.seed.net.tw<br> 08: <b>Subject: </b>測試郵件功能<br> 09: <p>這是第一封郵件</p> 10: </body> 11: </html>

  22. 2-1-2 HTML文件的基本架構 • HTML文件標籤的基本架構，如下所示： <html> 標示著一份HTML網頁 <head> HTML網頁的基本定義 </head> <body> HTML網頁的內容 </body> </html> • HTML文件是包含於<html>和</html>標籤間的內容和定義，其中<head>和</head>標籤包圍的區塊定義HTML網頁的本身，網頁內容是定義在<body>和</body>標籤間。

  23. 2-1-3 Meta標籤的使用 • <meta>標籤是位在<head>區塊，可以用來定義HTML標籤所沒有定義的相關資訊，常用的應用如下所示： • 設定使用的編輯工具 <meta name="GENERATOR" content="Microsoft FrontPage 5.0"> • 設定網頁使用的語系 <meta http-equiv="Content-Type" content="text/html; charset=big5"> • 自動更新網頁內容 <meta http-equiv="refresh" content="10,url=UsersList.aspx">

  24. 2-2 HTML標籤 • 2-2-1 HTML的標頭標籤 • 2-2-2 文字格式標籤 • 2-2-3 清單項目標籤 • 2-2-4 圖片和超連結標籤 • 2-2-5 網頁表格標籤 • 2-2-6 網頁表單標籤 • 2-2-7 框架頁標籤

  25. 2-2-1 HTML的標頭標籤

  26. 2-2-2 文字格式標籤-1

  27. 2-2-2 文字格式標籤-2

  28. 2-2-2 文字格式標籤-3

  29. 2-2-3 清單項目標籤

  30. 2-2-4 圖片和超連結標籤

  31. 2-2-5 網頁表格標籤

  32. 2-2-6 網頁表單標籤

  33. 2-2-7 框架頁標籤

  34. 2-3 XML文件的基礎 • 2-3-1 什麼是XML • 2-3-2 XML文件的組成

  35. 2-3-1 什麼是XML-1 • 「XML」（eXtensible Markup Language）可擴展標示語言屬於一種標籤語言，XML 1.0版規格在1998年2月正式推出，XML的寫法十分類似HTML，繼承SGML自定標籤的優點，並且刪除一些SGML複雜的部分，在功能上能夠補足HTML標籤的不足，而擁有更多的擴充性。 • XML並不是用來編排內容，而是用來描述資料，它並沒有如同HTML一般的預設標籤，使用者需要自己定義描述資料所需的各種標籤。

  36. 2-3-1 什麼是XML-2 01: <?xml version="1.0" encoding="Big5"?> 02: <!--網頁製作徹底研究系列--> 03: <booklist> 04: <book> 05: <code>F8915</code> 06: <title>ASP網頁製作徹底研究</title> 07: <authorlist> 08: <author>陳會安</author> 09: </authorlist> 10: <price>580</price> 11: </book> 12: <book> 13: <code>F8916</code> 14: <title>ASP與IIS 4/5網站架設徹底研究</title> 15: <authorlist> 16: <author>陳會安</author> 17: </authorlist> 18: <price>550</price> 19: </book> 20: </booklist>

  37. 2-3-2 XML文件的組成 • XML文件基本上是由標籤和內容組成，一共七種組成的元素可以出現在XML文件中。 • 元素（Element） • 屬性（Attribute） • 實體參考（Entity Reference） • 註解（Comment） • CDATA區塊（CDATA Section）與PCDATA • PI（Processing Instructions） • DTD（Document Type Declarations）

  38. 2-4 Cascading Style Sheets • 2-4-1 CSS的基礎 • 2-4-2 CSS的基本語法 • 2-4-3 常用的CSS樣式屬性

  39. 2-4-1 CSS的基礎-1 • 「Cascading Style Sheets」簡稱CSS，中文稱為層級式樣式表，CSS層級式樣式表是一種樣式語言，能夠定義HTML標籤的顯示效果。 • 瀏覽程式在解譯HTML標籤時是使用預設顯示樣式，例如：<p>標籤是段落、<ul>為清單項目，CSS能夠重新定義標籤的顯示樣式。

  40. 2-4-1 CSS的基礎-2 • 如果想在網頁上使用CSS編排網頁內容，一共有三種方式，如下所示： • 局部套用的CSS（In-Line Style Sheets）。 • 內建網頁的CSS（Embedded Style Sheet）。 • 外部連結的CSS（External Style Sheet）。

  41. 2-4-2 CSS的基本語法 • CSS能夠針對指定標籤定義全新的樣式，其基本語法如下所示： Selector {property1: value1; property2: value2 } • 選擇器Selector選擇樣式套用的標籤，大括號括起的樣式組，就是重新定義的標籤樣式，例如：前面的<p>標籤，如下所示： p { font-size: 10pt; 　 color: red; }

  42. 2-4-3 常用的CSS樣式屬性 • 在選擇好定義的標籤後，可以定義CSS，CSS常用的樣式屬性分類成幾大類。 • 字型的樣式屬性 • 文字內容顯示的字型效果屬性 • 色彩和背景樣式屬性 • 標籤內容的顯示和背景色彩屬性 • 文字樣式屬性 • 文字內容的顯示屬性包含對齊、字距的屬性 • 區塊樣式屬性 • 文字內容顯示的區塊，這也包含外框顯示的屬性 • 絕對位置的樣式屬性 • 絕對位置編排，也就是可以顯示在指定的位置

  43. 2-5 局部套用的CSS • 局部套用的CSS是直接在標籤使用style屬性定義樣式，常用的HTML標籤有<div>、<a>、<span>和<p>。 <div style="color: green; font-size: 24pt; margin-left: 5px"> <div style="position:absolute; top:40px; width:130px; height:130px">

  44. 2-6 內建網頁的CSS • 2-6-1 重設HTML標籤樣式 • 2-6-2 重新設定超連結標籤的樣式 • 2-6-3 自訂樣式名稱

  45. 2-6-1 重設HTML標籤樣式 • CSS能夠重新定義HTML標籤顯示的編排樣式，內建網頁的CSS是將樣式定義在<body>標籤前的<style>標籤，如下所示： <style type="text/css"> body { font-size: 9pt; font-family: 標楷體; line-height: 120%; } span {text-transform: uppercase} p { font-size: 12pt; color: yellow; background-color: blue; line-height: 20px; } </style>

  46. 2-6-2 重新設定超連結標籤的樣式 • 網頁超連結的顯示狀態分為多種情況，不同狀態的超連結樣式需要分別定義，如下所示： <style type="text/css"> a:link {font-size: 9pt; text-decoration: none} a:active {font-size: 9pt; text-decoration: none} a:visited {font-size: 9pt; text-decoration: none} a:hover {font-size: 15pt; text-decoration: underline} </style>

  47. 2-6-3 自訂樣式名稱 • CSS允許使用者在網頁定義個人風格的樣式名稱，樣式名稱是一個Class，以「.」句點開始的名稱定義在<style>標籤，如下所示： .littlered {color: red; font-size: 9pt} .littlegreen {color: green; font-size: 9pt} • HTML標籤使用class屬性指定樣式名稱，在標籤套用定義的樣式，如下所示： <font class="littlered">Style</font>

  48. 2-7 使用CSS進行絕對位置的編排 • CSS擁有絕對位置的定位能力，能夠讓您隨心所欲的編排網頁元素，如下所示： .titlered { position: absolute; top: 100pt; left: 50pt; visibility: visible; z-index: 1; background-color: blue; color: yellow; font-size: 19pt; } • 樣式使用絕對位置顯示元素，即absolute，其位置是離上方邊界100像素，左邊50像素的位置。

  49. 第3章 VB.NET語法的ASP.NET程式 • 3-1 VB.NET的基礎 • 3-2 ASP.NET程式的基本架構 • 3-3 VB.NET的變數與資料型態 • 3-4 VB.NET的運算子 • 3-5 VB.NET的條件敘述 • 3-6 VB.NET的流程控制 • 3-7 VB.NET的程序與函數 • 3-8 VB.NET的錯誤處理

  50. 3-1 VB.NET的基礎 • 3-1-1 物件的基本觀念 • 3-1-2 微軟的Basic家族

More Related