使用asp.net從零開始製做設計網站---轉載

時間 2019-11-16

標籤使用 asp.net asp 開始製做設計網站轉載欄目 ASP 简体版

原文原文鏈接

首先感謝提供此教程的朋友，能夠給你們學習的機會，頗有用，留着好好學。以下正文：javascript

1. 申請域名
　　2. 購買空間
　　3. 備案　　
　　4. 使用photoshop完成設計與切圖
　　5. 使用dreamweaver創建站點
　　6. 使用HTML完成滾動公告
　　7. 使用Javascript完成顯示當前日期和過渡動畫並填充首頁面內容
　　8. 使用SQL SERVER2005創建數據庫和表
　　9. 使用VS2005完成站點創建
　　9.1 首頁
　　（１）從index.html轉爲index.aspx
　　（２）使用DataList變成文章列表
　　（３）網上調查　　　　
　　9.2 二級頁面　　
　　（1）使用Reapeater完成詳細內容頁面
　　（2）二級頁面文章列表
　　（3）整站搜索
　　10. 總結
　　（1）總結css

若是你是從（１）開始堅持到（10），一個網站已經完成了，發現並不難！html

第一個任務：申請域名前端

網站所必須具有的三要素：第一：域名（網址）第二：網站空間（虛擬主機）第三：程序（網頁）從這裏能夠看出域名的重要性.
　　形象打個比方：你準備開一個公司，首先要有一個名字，這就是域名，而後咱們是否是要租間房子呢？這就是所說的網站空間。咱們開公司租房子幹什麼呢？是爲了咱們用來辦公，可以讓員工、客戶和辦公傢俱與電腦、打印機有容身之地。員工、客戶和辦公傢俱就相似於咱們網站的程序（內容）。java

一、域名是什麼？程序員

　　標準概念：域名是Internet網絡上的一個服務器或一個網絡系統的名字，在全世界，沒有重複的域名，域名具備惟一性。從技術上講，域名只是一個Internet中用於解決地址對應問題的一種方法。能夠說只是一個技術名詞。
　　（１）也許上面的概念反而讓你糊塗了，實際上你能看到這篇文章，你已經理解了域名了，由於你極可能是經過輸入網址：http://www.csdn.net，而後看到這篇文章，對嗎？csdn.net就是域名。固然網上也有很多人簡單地說，域名就是網址，雖然不許確，但對於你理解域名仍是很好的。還有咱們所熟知的百度網址：http：//www.baidu.com 其實百度的域名就是：baidu.com。

　　（２）域名用於解決地址對應，這是怎麼一回事呢？請你試着輸入：http://211.100.26.77，哈哈，是否也到了CSDN網站。211.100.26.77是什麼東西呢？IP地址，也就是說你輸入網址和IP地址都同樣可以訪問「CSDN」網站，可是你必定更容易記住網址！
　　這就是域名存在的必要性，就是爲了解決IP地址很差記而採起的技術手段，域名與IP地址對應的過程咱們稱之爲解析。

　　（３）如何知道一個域名的IP地址呢？
　　點「開始—運行」，而後輸入ping www.genwoxue.com，這是偶的小站。
　　
　　而後會有提示：
　　
　　Reply from後面的就是該域名對應的網址。web

二、如何申請域名呢？面試

　　做爲一級域名代理商，主要有萬網（www.net.cn）、新網（www.xinnet.com）、新網互聯（www.dns.com.cn），你能夠經過他們申請域名，固然你能夠找本地的二級域名代理商，但最好找一個可靠的公司，不是那種幹兩天就關門的。
　　（１）起一個好域名很重要，英文縮寫或者中文拼音都不錯，簡短好記，但如今想申請個好域名愈來愈不容易了！如何查你想申請的域名可以申請不能呢？咱們以萬網爲例：輸入http://www.net.cn，而後在首頁右部分，域名查詢處輸入你想申請的域名：譬如genwoxue
　　數據庫

　　點擊「查詢按鈕」，而後：
　　
　　看來genwoxue這個域名仍是很熱的，除了.mobi你還能夠註冊，其它的都被註冊過了。下一步就是你聯繫域名服務商購買域名了。這個過程我就不在此囉嗦了，服務商很熱情噢！編程

三、如何解析域名？
　　解析域名就是爲了讓別人訪問你的網站不用記IP地址而進行的操做。
　　（１）這個能夠由域名提供商代勞爲你服務，若是你的空間也是從這購買的，一切對你來講就很簡單了，基本上什麼都不用管，只是未來把程序傳到空間就能夠了。
　　（２）做爲搞技術的，更願意洞悉一切，而不肯由他人代勞，除非你已經很是明白了，已經成爲苦力活的時候則另當別論，不是嗎？請跟我來！
　　在萬網，在你購買域名時通常都會註冊成爲會員，那麼：
　　第一步：會員登陸，在萬網首頁右上角，點擊「請登陸」。
　　
　　而後，在彈出窗口輸入：會員ID和密碼、驗證碼登陸會員中心。
　　
　　第二步：在會員中心，點擊左側「域名管理—域名管理」。
　　
　　第三步：在域名列表中，點擊「管理」。
　　
　　第四步：在域名信息中點擊「域名解析」。
　　
　　第五步：把你的域名解析到空間服務商爲你提供的IP地址。　　
　　到此，你已經完成了很重要的第一步。

第二個任務：購買網站空間

一、空間是什麼？

　　通常俗稱的「網站空間」就是專業名詞「虛擬主機」的意思。就是把一臺運行在互聯網上的服務器劃分紅多個「虛擬」的服務器，每個虛擬主機都具備獨立的域名和完整的Internet服務器（支持WWW、FTP、E-mail等）功能。
　　簡單地講，就是存放網站內容的空間。
　　

二、如何選擇空間？

　　在選擇網站空間和網站空間服務商時，主要應考慮的因素包括：網站空間的大小、操做系統、對一些特殊功能如數據庫的支持，網站空間的穩定性和速度，網站空間服務商的專業水平等。推薦中國萬網（http://www.net.cn）、中國新網（http://www.xinnet.cn）等服務商，下面是一些一般須要考慮的內容：　　

　　（1）網站空間服務商的專業水平和服務質量。這是選擇網站空間的第一要素。若是你的網站是用來玩玩可能可有可無，若是是做爲你的事業來作的話，一旦出現問題則損失大矣。

　　（2）虛擬主機的網絡空間大小（網站空間主要是由你網頁製做大小而決定您要購買空間的多與少）、操做系統、對一些特殊功能如數據庫等是否支持。

　　（3）網站空間的穩定性和速度等。這些因素都影響網站的正常運做，須要有必定的瞭解，若是可能，在正式購買以前，先了解一下同一臺服務器上其餘網站的運行狀況。　　

　　（4）網站空間的價格。如今提供網站空間服務的服務商不少，質量和服務也千差萬別，價格一樣有很大差別，通常來講，著名的大型服務商的虛擬主機產品價格要貴一些，而一些小型公司可能價格比較便宜，可根據網站的重要程度來決定選擇哪一種層次的虛擬主機提供商。選有《中華人民共和國增值電信業務經營許可證》的服務商更放心。

　　（5）網站空間出現問題後主機託管服務商的相應速度和處理速度，若是這個網站空間商有全國的800免費電話，空間質量就增長几分信任。　　

三、如何購買空間？

　　一個電話搞定！空間服務商關心是你的錢到賬，他會立刻爲你開通！
　　在哪裏最終成交那是你的問題，這個過程相對簡單，不管你經過銀行轉賬仍是支付寶、財付通等手段，只要服務商收到錢，最終空間服務商會給你一個FTP上傳的IP地址、用戶名和密碼。
　　數據庫若是採用Access，那麼不用考慮其它。若是是使用了SQL SERVER則須要另外付費。同時空間服務商也會給你另一套管理數據庫的IP地址、用戶名和密碼。

四、如何上傳？

　　如何上傳呢？下載一個FTP工具，好比著名的Cuteftp也是不錯的。
　　若是你尚未空間，又想學學如何使用cuteFTP工具，請按照如下操做，把你的網頁(起名爲index.htm)上傳到服務器吧，很快你的做品就會傳遍整個世界。
　　注意：使用cuteFTP按下圖一和圖二設置。
　　
　　（圖一）
　　
　　（圖二）：把PVSV模式（V)前面複選框中的（√）去掉。

　　若是你沒有cuteFTP，請下載：
　　cuteftp.exe
　　　
　　服務器地址：www.genwoxue.com
　　用戶名：genwoxue
　　密碼：123456
　　在Cuteftp遠程端（右部分）首先創建文件夾yourname0371（用你的名字全拼+地區區號），而後把你的網頁傳至本身文件夾內，而後你用http://www.genwoxue.com/mytask/yourname0371（注意是你本身的文件夾），看到了什麼？
　　你能夠試着訪問一下個人：http://www.genwoxue.com/mytask/jianghuiquan0371
　　若是你是花了銀子，則能夠直接用www.yourdomanname.com訪問了。
　　若是你想試驗，歡迎，拜託，請不要傳大文件或者病毒上來噢！
　　就這麼簡單！

　　你火燒眉毛地傳上去了，怎麼打不開網站呢？彆着急，趕快去工信部備案吧，不備案國內沒有哪一個服務商敢爲你開通網站的，那樣意味着他不想在國內混了。

　　怎麼備案呢？

第三個任務：如何備案

一、爲何要備案？

　　網站備案的目的就是爲了防止在網上從事非法的網站經營活動，打擊不良互聯網信息的傳播，若是網站不備案的話，頗有可能被查處之後關停。非經營性網站自主備案是不收任何手續費。
　　根據中華人民共和國信息產業部第十二次部務會議審議經過的《非經營性互聯網信息服務備案管理辦法》精神，在中華人民共和國境內提供非經營性互聯網信息服務，應當辦理備案！未經備案，不得在中華人民共和國境內從事非經營性互聯網信息服務。而對於沒有備案的網站將予以罰款或關閉。

二、備案方式？

　　網站備案主要有兩種：
　　第一種方式：自主備案。你本身能夠自主經過工信部官方備案網站（http://www.miibeian.gov.cn）在線備案；
　　第二種方式：經過你的空間服務商。（有些服務商可能會收費）
　　固然你若是打算選擇第二種，不用往下看了，你想學學那請看完下面的備案步驟。

三、備案詳細步驟

　　（１）準備相關信息
　　企業（行政事業單位）須要準備如下內容：

　　企業信息
　　企業名稱：
　　單位性質：
　　單位有效證件類型：
　　單位有效證件號碼：
　　單位通訊地址：
　　投資者或上上級主管單位名稱：
　　主辦單位所在省、市、縣：

　　主體負責人基本狀況
　　姓名：
　　有效證件類型：
　　有效證件號碼：
　　辦公電話：
　　手機號碼：
　　電子郵箱：

　　網站信息
　　網站名稱：
　　網站首頁網址：
　　網站域名：
　　網站IP地址：
　　網站接入服務提供商名稱：

　　（２）進入工信部官方備案網站
　　工信部備案官方網址：http://www.miibeian.gov.cn

　　（３）註冊用戶

　　
　　點右下角「註冊」，「使用聲明」和「備案流程圖」頁面點接受便可，而後出現：用戶註冊頁面，注意填寫完用戶名，檢查一下是否重名，若是重名，再使用別的。
　　
　　註冊完畢後，會出現一個提示窗口。
　　

　　（４）登陸
　　

　　報備類別：咱們通常選擇「網站主辦者」。
　　
　　而後輸入你剛纔註冊的用戶和密碼、驗證碼便可。

　　（５）詳細填寫信息

　　第一步：選擇菜單「信息錄入」，填入主辦單位信息。
　　
　　第二步：點擊「下一步」，錄入「網站信息」，內容以下：
　　
　　第三步：點擊「添加接入」，錄入「接入信息」，內容以下：接入服務提供者名稱你要諮詢購買空間的公司。
　　
　　第四步：點擊「完成」，出現下面提示窗口。
　　

　　注：我的備案與企業類似，在主辦單位名稱填入我的姓名就能夠了，主辦單位類型選擇「我的」，上級主管單位也填我的姓名。
　　對於很多企業或者我的，到此爲止，只是等待工信部官方審批開通網站就Ok了。第一步是本省通訊局審覈，若是沒有問題而後由工信部備案部門審批，通常會在15個天然天經過，官方說的能夠是20個工做日，也就一個月。

第四個任務：使用photoshop完成設計與切圖

嚴格來說這個任務主要是網站美工的任務，你能夠選擇跳過，固然也能夠了解一下並很少。

一、使用photoshop完成設計

　　一個網站可否被客戶看中，每每第一感受並非功能，而是界面！
　　不少朋友每每誤解爲使用Dreamweaver開始設計網頁，而第一步其實是用photoshop或者Fireworks來完成的。這但是下面是小問號在劉燕部門的指導下，用了三天的功夫才搞定的主界面！若是你也打算試試，請繼續。

二、使用photoshop進行切圖

　　小問號在劉燕的親自指導下，通過3、四個小時的努力，終於完成了！小問號在給「中原市國土資源管理局」演示的時候還受到了表揚，小問號自語道：我也不笨啊，關鍵在於引導和用心啊！

　

　　第一步：啓動Photoshop並打開首頁效果圖。
　　

第二步：使用「切刀」工具根據需求開始切割首頁效果圖。
　　先打開Photoshop的工具箱，而後咱們選擇「切刀」工具

　　而後咱們先分析一下頁面佈局再開始切割圖片，在此咱們要先清楚切割圖片的幾項重要原則：

　　一、切得細緻：咱們切割圖片時要儘可能切得細緻一些，不要爲了本身省事就粗略的切割幾下了事，咱們要時刻清楚一件事情，就是咱們把圖片切得越精細，網頁運行時加載的速度越快越不失真，若是切得塊太大或者切得時候多一像素少一像素的，那麼網頁顯示的時候速度會慢不少並且很是毛糙，形成網頁和設計圖差異很大，失去設計圖原有的美觀。相信大部分瀏覽者都是喜歡看網頁打開速度快、設計精美的網站，因此若是你不想被瀏覽者罵和圖片設計者指責，那麼請你用心去切，越精細越好。

　　二、切得合理：這一點咱們主要是爲程序編寫者考慮。圖片切得越合理編寫程序越省事，反之可能會給程序編寫者或圖片設計者增長不少工做量。如下咱們以小問號的兩位同窗的作法進行舉例比較，如今讓他們二人開始「PK」：

　　舉例比較1：
　　同窗A的切法
　　同窗B的切法
　　咱們分析一下這兩位同窗的切割方法，同窗A是把整個網站菜單的背景圖只切割了一刀，同窗B切割了三刀。同窗A的作法是把整個菜單部分的背景圖切割成一張圖片放在網頁中，編程者在上面設置菜單時所有按照背景圖片中菜單的個數和菜單的間距來設置。同窗B的作法是把菜單的背景圖分紅三部分，切刀03做爲整個菜單的背景色，切刀04做爲鼠標通過的背景圖片，切刀05做爲鼠標離開時的背景圖片。這樣編程者放置菜單時能夠根據菜單的個數和顯示要求自由放置。
　　優缺點：網站開發前客戶要求網站上面有8個菜單，而製做的過程當中客戶忽然提出要求增長兩個菜單或減小兩個菜單，那麼根據同窗A的作法，咱們只能從新設計網頁效果圖並更改網站程序了，由於同窗A把整個菜單背景圖作成了一張，想改都改不了。而根據同窗B的作法咱們只須要單獨增長兩個或刪除兩個菜單的背景小圖就好了。由於同窗B是單獨切割的，菜單的多少不受背景圖片的約束，因此「來去自由」嘍。
　　本次PK,同窗B勝。

　　舉例比較2：
　　同窗A的切法
　　同窗B的切法
　　咱們分析一下這兩位同窗的切割方法，同窗A是把新聞版塊的背景圖只切割了一刀，同窗B切割了三刀。同窗A的作法是把整個新聞版塊的背景圖切割成一張圖片放在網頁中，編程者在上面設置文章列表時所有按照背景圖片的高度來設置文章顯示的條數和行間距。同窗B的作法是把新聞版塊的背景圖分紅三部分，切刀03做爲新聞版塊標題的背景，切刀04做爲新聞版塊的中間背景能夠自動無限延伸或縮小，切刀05做爲新聞版塊尾部結束的背景圖片。這樣在上面設置文章列表時能夠根據需求自由設置文章顯示的條數和間距。
　　優缺點：網站開發前客戶要求網站首頁中的新聞版塊每塊顯示6條新聞，行間距爲20px，而網站快要製做好了客戶忽然提出要求每塊顯示8條新聞，間距還要20px，那麼根據同窗A的作法，咱們只能從新設計網頁效果圖並更改網站程序了，由於同窗A把整個新聞版塊背景圖作成了一張，而當初設計者是根據顯示6條文章的高度來設計的，如今顯示8條的話要超出邊界了，要想更改只能從新設計圖片並讓編程者從新更改程序了。而根據同窗B的作法咱們只須要讓編程者設置一下顯示8條就好了。由於同窗B把背景圖的中間部分單獨切割出來能夠根據內容顯示的高度自動調整高度，文章顯示條數的多少不受背景圖片的限制，因此「來去自由」嘍。
　　本次PK,同窗B勝。

　　三、重複利用
　　在網站首頁中有不少地方是徹底相同或者十分類似的，好比咱們要作的這個網站首頁中部的文章版塊就是徹底相同的，那麼咱們在切割圖片時相同的地方只切割一次就好了，與其餘的板塊公用。這樣會減小編程者不少工做量。
　　舉例比較1：
　　

　　同窗A的切法
　　

　　同窗B的切法
　　咱們分析一下這兩位同窗的切割方法，同窗A在相同的新聞版塊中選擇了一處進行切割，同窗B把全部的新聞版塊都進行了切割。同窗A的切法考慮到了重複利用，編程者只須要製做一塊新聞版塊，其餘相同的地方複製一份就能夠了，調用的圖片都同樣。同窗B的作法是把全部的新聞版塊都進行切割，編程者須要屢次重複製作相同的新聞版塊，每一塊都用本身區域的圖片。
　　優缺點：
　　最初設計時版塊的大小樣式顏色都是如今這樣的，製做完後客戶忽然嫌很差看，須要改變版塊的大小和背景顏色。按照同窗A的作法，編程者只須要從新切割一個地方的圖片，其餘相同版塊的背景圖片會所有更換（由於它們調用的是同一張圖片）。而按照同窗B的作法，編程者須要把全部的新聞版塊從新切割。

　　本次PK,同窗A勝。

　　清楚了切割原則後，咱們如今就知道該怎樣切了。好，如今開始切割……

　第三步：完成切割並導出網頁所需圖片

　　如今咱們已經切割好了首頁，估計如今不少同窗已經把咱們的首頁效果圖切割的「面目全非」了，不要緊，由於此次咱們是學習，但願你們之後在工做中要多珍惜網站美工的心血成果。下面是咱們一位專業美工的切割方法，供你們參考學習：

　　首頁切割好後，咱們接下來的工做就是導出咱們作網頁時須要的圖片，好，請開始跟我作。
　　首先點擊Photoshop菜單欄中的「文件」---->再點擊「存儲爲Web所用格式(w)」，如圖：

此時會出現導出界面：

如今咱們使用「切片選擇工具」來選擇咱們要導出的切片，選中的切片邊框會變成黃色，若是須要多選，那麼只須要按下「Shift」鍵再選擇便可。使用「縮放工具」能夠放大/縮小切片，使用「抓手工具」能夠拖動切片。

　　選擇好所需的切片後，點擊窗口右上方的「存儲」按鈕，此時會出現存儲頁面，

咱們首先選擇切片所存儲的路徑，而後選擇保存類型爲「僅限圖像」如圖，接下來在「切片」選項中選擇「選中的切片」如圖：(若是此處選擇「選中的切片」那麼只導出咱們選中的切片，若是選擇「全部用戶切片」那麼會把咱們以前手工畫的全部切片所有導出,這一點你們根據狀況本身選擇)，最後點擊「保存」按鈕便可導出選擇的切片。須要說明的是在切片的存儲位置PhotoShop會自動建立一個名字爲"images"的文件，咱們剛纔導出的圖片就存在這個文件夾中，若是存儲位置中已經有名爲「images」的文件夾，那麼圖片會自動存在已有的「images」文件夾中。

　　到此咱們的Photoshop切圖工做所有完成了，給本身慶賀一下吧。

一、使用dreamweaver創建站點

　　（1）、在你電腦的工做區中創建一個文件夾，命名爲GovWeb,這個文件夾就是用來存放咱們要作的「中原市國土資源局網站」內容的，名字你也能夠隨意起，可是必定要用英文或拼音，表達意思要明確。文件夾創建好後把以前你用Photoshop導出的圖片文件夾images拷貝進去，好，到此咱們已經建立好了網站存放的位置。
　　（1）、啓動dreamweaver，如圖：

　　而後依次點擊菜單欄中的「站點」-->「新建站點」，如圖： ,
這時會打開站點建立窗口，如圖：

咱們在「站點名稱」框中輸入站點的名字，這裏咱們叫作「中原市國土資源局門戶網站」，而後在「本地根文件夾」中選擇剛纔建立好的「GovWeb」文件夾，在「默認圖像文件夾」中選擇「GovWeb」文件夾中的「images」文件夾，如圖：

最後點擊「肯定」按鈕就建立好了站點，站點建立好後dreamweaver右側的文件窗口的界面爲：

（因爲版本的不一樣及我的設置不一樣，文件窗口有可能出如今左側）

*觀看製做視頻*

二、使用dreamweaver製做靜態首頁面

　　在dreamweaver右側的「文件欄」中右鍵「站點」，在彈出的菜單中選擇「新建文件」，如圖1，而後將這個文件命名爲「index.html」，如圖2，這個頁面文件就是咱們網站的主頁了。

　　如今咱們就開始製做主頁了，首先在「標題」欄中輸入「中原市國土資源局門戶網站」，這就是咱們網站首頁的標題，而後在dreamweaver下方的屬性欄中點擊「頁面屬性」按鈕，彈出頁面屬性對話框，咱們設置頁面文字的大小爲12px，頁面左邊距、右邊距、上邊距下、邊距均爲0，如圖3：

這時按下Ctrl+S保存一下吧，之後作東西的時候你們要養成及時保存的好習慣，以避免忽然斷電或機器死機等帶給咱們的不便。到此空的首頁已經建立好了。

三、佈局首頁面

如今要開始插入表格來佈局首頁面了，依次點擊菜單欄中的「插入」-->「表格」，這時會彈出「表格對話框」，咱們依次設置表格屬性:行數:1 ,列數:3 ,表格寬度:1003 ,邊框粗細:0 ,單元格邊距:0 ,單元格間距:0 ,如圖4：

設置好參數後，點擊「肯定」按鈕,表格就插入到了頁面中，而後咱們選中這個表格，設置表格對齊方式爲「居中對齊」如圖：，設置第一列的寬度爲11px，第二列的水平對齊爲「居中對齊」，垂直對齊爲「頂端」，第三列的寬度爲12px，這時主表格大體設計好了。
　　如今咱們開始往表格裏插入圖片和背景圖像了，須要說明的是，這裏面咱們用的圖片是上一章節中提供下載的「切割好的圖片」，你能夠直接下載並使用，也可使用你本身動手切割的圖片，可是每一個圖片的名字請與咱們保持一致。
　　好，如今開始作。
　　設置第一列的背景圖像爲「images/index_blank_01.gif」，第三列背景圖像爲「images/index_blank_03.gif」，將表格的總高度設置爲500px(這個高度你能夠隨意定義，只是爲了咱們能看清楚效果，未來表格會根據裏面的內容自動增高)，好了，到這裏咱們的頁面已經有點小效果了，如圖5：

我要看效果　　我要下載

　　老規矩，先保存...
　　怎麼樣？是否是有點感受了？那就繼續吧。
　　好,如今作中間的部分，咱們先分析一下首頁的佈局，大體可分爲頭部、中間主體、尾部三個部分，如圖6：

　　好，根據頁面的佈局，咱們如今插入一個三行一列的表格用來存放頭部、中部和尾部內容。表格設置爲3行1列，寬度爲980px，邊框、邊距、間距均爲0，將這三行的水平對齊都設成「居中對齊」，垂直對齊都設成「頂端」。
　　（1）、製做第一行內容（頭部）：
　　如今分析一下第一行要放的內容，如圖7：

　　好，根據分析咱們須要在第一行中再插入一個4行1列的表格，用於放頭部內容。
　　插入一個4行1列表格，寬度爲980px，邊框、邊距、間距均爲0，將這四行的水平對齊都設成「居中對齊」，垂直對齊都設成「頂端」。
　　·在第一行的高度設爲120px，插入一張圖片「images/index_top.gif」。
　　·將第二行的高度設爲32px，背景設爲「images/index_title_bg.gif」，這一行是用做放網站菜單的，咱們如今就製做菜單，在第二行中插入一個1行10列的表格，表格寬度爲750px,每一列的寬度所有設成75px，水平對齊設爲「居中對齊」,第一列的背景圖片設爲「images/index_title_btn2.gif」，其餘9列的背景圖片設爲「images/index_title_btn1.gif」，而後在這10個格子中分別輸入「首頁、機構概況、通知通告、工做動態、政務公開、政策法規、辦事大廳、交易大廳、**舉報、網上辦公」，接下來選中這10個格子，在屬性欄中設置字體大小爲14px，顏色爲#FFFFFF。
　　·將第三行的高度設爲25px，背景圖片設置爲「images/index_blank_10.gif」。
　　·將第四行的高度設爲100px，插入一張圖片「images/index_blank_12.gif」。
　　OK，到此網站頭部已製做完畢瞭如圖8，小慶祝一下吧，可是別忘了保存呦。。。
　　

我要看效果　　我要下載

二、製做第三行內容（底部）：
　　如今咱們開始製做首頁的底部，你也許會問，首頁中間還空着呢怎麼先作底部了？告訴你，不要緊的，先作好頭部和底部，整個頁面的框架就成型了，再填充中間部分就駕輕就熟了。
　　將第三行的高度設置爲74px，背景圖片設置爲「images/index_bottom.gif」，這時底部的樣子已經出來了，咱們只須要在裏面輸入一些版權信息的文字就完成底部的建立了。
　　咱們依次輸入:「
中原市國土資源局版權全部技術支持：跟我學編程
-->Shift+回車鍵（或直接在代碼中輸入<br>）
-->Copyright2008-2010 中原市國土資源局 zhongyuanshi.gov.cn All Rights Reserved
-->Shift+回車鍵（或直接在代碼中輸入<br>）
-->master@zhongyuanshi.gov.cn 豫ICP20100101號　地址：中原市東方紅路108號　郵編：456250
」，將這部分文字選中設置顏色爲#FFFFFF,大小爲12px,行間距設置爲20px。好，到此咱們的首頁底部就作好了，底部效果如圖11，怎麼樣？依然很簡單吧?再次給本身慶賀一下吧！（提示：你別忘記按下Ctrl+S）

我要看效果　　我要下載

　　（3）、製做第二行內容（中部）：
　　如今咱們開始製做首頁的中部，這裏是此次課的重點，可是你們不要怕，難度並不大，相信你本身的能力，必定要動手作出來哦！
　　老方法，先分析中部內容的佈局，請看圖12。

很清晰就能夠看出，中部內容大體分爲左右兩部分，因此咱們須要創建一個一行兩列的表格，來放置中部內容。
　　在第二行中插入一個1行2列的表格，寬度爲980px，邊框、邊距、間距均爲0，將這兩列的垂直對齊都設成「頂端」，將第一列的寬度設置爲750px，水平對齊設置爲「左對齊」，將第二列的水平對齊方式設置爲「右對齊」。
　　A、製做第一列內容：
　　咱們如今分析一下第一列內容的佈局，如圖13：

　　那麼咱們如今該怎麼作呢？

恭喜你說對了，咱們如今插入一個5行1列的表格，寬度爲747px，邊框、邊距、間距均爲0，將這五行的水平對齊都設成「居中對齊」，垂直對齊都設成「頂端」。
　　<1>第一行內容：第一行中包括輪換圖片新聞和工做動態兩部份內容，因此咱們再插入一個一行兩列的表格，寬度爲747px，邊框、邊距、間距均爲0，將這五行的水平對齊都設成「居中對齊」，垂直對齊都設成「頂端」。
　　·將第一列的寬度設爲343px，高度設爲311px，插入圖片「images/index_blank_13.gif」。
　　·在第二列中插入一個3行一列的表格，寬度爲404px，高度爲311px，邊框、邊距、間距均爲0，將這三行的水平對齊都設成「居中對齊」，垂直對齊都設成「頂端」。將第一行的高度設爲37px，設置背景圖像爲「images/index_blank_14.gif」，將第二行的高度設爲263px，背景圖像設爲「images/index_blank_19.gif」，將第三行的高度設爲11px，並插入圖片「images/index_blank_25.gif」。
　　好了，到此第一行的內容作好了，你們運行一下看看效果，是否是像那麼回事了？如圖14：

　　<1>第二行內容：第二行中包括滾動圖片，將高度設爲88px，插入圖片「images/index_blank_26.gif」。
　　<3>第三行內容：第三行用於放置三塊黃色背景的專題版塊。插入一個一行三列的表格，寬度爲747px，邊框、邊距、間距均爲0，將三列的寬度所有設爲249px，垂直對齊設爲「頂端」，將第一列的水平對齊設爲「左對齊」，第二列的水平對齊設爲「居中對齊」，第三列的水平對齊設爲「右對齊」。
　　·第一列：第一列中再插入一個3行1列的表格，寬度設爲240px,高度設爲184px，邊框、邊距、間距均爲0，將這3行的水平對齊都設成「居中對齊」，垂直對齊都設成「頂端」。將第一行的高度設爲32px，背景圖片設爲「images/index_blank_32.gif」，將第二行高度設爲150px，背景設爲「images/index_blank_34.gif」，將第三行中插入圖片「images/index_blank_38.gif」，高度設爲2px。好了，到此第一列的板塊就作好了。
　　·第二列：將剛剛在第一列中作那個三行一列的表格複製進來。
　　·第二列：將剛剛在第一列中作那個三行一列的表格複製進來。
好了，到此第三行的內容作好了，你們運行一下看看效果，是否是更像那麼回事了？如圖15：

　　<4>第四行內容：第四行中放置了一條紅色的分割線，很好實現。只須要將第四行高度設置爲10px，而後切換到代碼視圖，在第四行<td></td>中間寫入「<hr color="#FF0000" width="100%" size="1" />」這一句代碼便可。
　　<5>第五行內容：第五行中放置了六塊文章版塊，很顯然須要插入一個三行兩列的表格，每一行放兩個版塊。如今插入一個3行2列的表格，寬度設爲747，邊框、邊距、間距均爲0，將這六塊的垂直對齊方式設爲「頂端」，高度所有設爲204px。將左邊三塊的水平對齊方式設爲「左對齊」，寬度設爲273px。將右邊三塊水平對齊方式設爲「右對齊」，寬度設爲274px。在第一塊中插入一個3行1列的表格，寬度設爲369px，高度設爲204px，邊框、邊距、間距均爲0。將這3行的水平對齊都設成「居中對齊」，垂直對齊都設成「頂端」。將第一行的高度設爲39px，背景圖片設爲「images/index_blank_40.gif」，將第二行高度設爲162px，背景設爲「images/index_blank_43.gif」，將第三行中插入圖片「images/index_blank_45.gif」，高度設爲3px。好了，到此第一個板塊就作好了。接下來將作好的這個版塊分別粘貼到其餘五塊中就OK了。
　　好了，到此咱們左邊部分的內容就所有作完了，效果如圖16：

我要看效果　　我要下載

　　怎麼樣？是否是特有成就感呢？那咱們就接着完成右半部分的內容吧

（2）、製做第二列內容：
　　仍是老規矩，先分析下第二列內容的佈局，如圖17：

　　根據分析如今咱們在第二列中插入一個8行1列的表格，表格寬度設爲230px,邊框、邊距、間距均爲0,將這8格的水平對齊方式均設爲「居中對齊」，將第一、三、四、五、六、七、8格的垂直對齊方式設爲「頂端」，將第2格的垂直對齊設爲「底部」，下面詳細介紹這8個格的設置：
　　<1>第一格內容：在第一格中插入一個3行1列的表格，將表格寬度設爲230px，高度設爲203px，將這三行的水平對齊設爲「居中對齊」，垂直對齊設爲「頂端」。設置第一行的高度爲37px，背景圖像爲「images/index_blank_16.gif」，設置第二行的高度爲163px，背景圖像設置爲「images/index_blank_18.gif」，將第三行的高度設置爲3px，插入圖片「images/index_blank_22.gif」。
　　<2>第二格內容：設置第二格的高度爲125px，並插入圖片「images/index_blank_24.gif」。
　　<3>第三格內容：在第三格中插入一個3行1列的表格，將表格寬度設爲230px，高度設爲150px，將這三行的水平對齊設爲「居中對齊」，垂直對齊設爲「頂端」。設置第一行的高度爲28px，背景圖像爲「images/index_blank_28.gif」，設置第二行的高度爲118px，背景圖像設置爲「images/index_blank_30.gif」，將第三行的高度設置爲4px，插入圖片「images/index_blank_36.gif」，第三格中的內容到之後作程序時再設置。
　　<4>第四格內容：將第四格的高度爲40px，背景顏色設爲#f5fff4。
　　<5>第五格內容：徹底複製第二格內容。
　　<6>第六格內容：徹底複製第二格內容。
　　<7>第七格內容：徹底複製第二格內容。，第七格中的內容到之後作程序時再設置。
　　<8>第八格內容：徹底複製第二格內容。

　　好了，到此整個首頁咱們已經制做完了，開始慶賀吧，可是請不要使勁摔鼠標哦。（注：目前主頁中間部分的左右兩邊高度可能不太同樣，這不要緊，之後作程序的時候根據狀況來調整每一個版塊顯示的條數就可使左右對齊了）

第六部分：使用HTML完成公告

本節學習如何使用HTML完成滾動的公告，昨天你們學得是否是頗有趣呢？那麼今天學得東西會讓你更加激動，由於今天學的東西「會動」。
　　好，下面就介紹如何使用HTML語言讓文字動起來。
　　（1）、先用Dreamweaver打開昨天作好的index.html頁面，切換的「設計」窗口，在右上角放置公告的地方插入一個4行1列的表格，將表格寬度設爲230px，將這四行的高度所有設置爲30px，水平對齊設爲「居中對齊」。在第一行中輸入「國務院公佈2009年整年放假通知」，第二行中輸入「通知通告」，第三行中輸入「任免通知」，第四行中輸入「土地使用權掛牌出讓公告」，輸入完後將這四行文字大小設置爲12px。如圖1：

　　(2)、選中剛纔插入的表格進入到「代碼」視圖，在表格代碼（<table..）的前端輸入「<marquee scrollamount="2" direction="up">」代碼，在表格(</table>)的後端輸入「</marquee>」,如圖2：

（注：其中scrollamount爲單位時間內移動2像素，up爲向上滾動）

　　OK,滾動通告就這樣就作好了，你運行一下試試吧。

我要看效果　　我要下載

　　怎麼樣？今天講的東西是否是「既經濟又實惠」？用的時間最短寫的代碼最少，可是獲得的效果確是最好！

第七個任務：使用Javascript完成當前日期和廣告滾動窗口並填充首頁面內容

一、使用Javascript完成當前日期顯示

　　從如今開始，咱們就開始作「動態」的東西了！先作一個動態的日期顯示。
　　用Dreamweaver打開index.html頁面，找到放置日期的這一行，設置這一行水平對齊爲「左對齊」，垂直對齊爲「居中」，而後切換到代碼視圖，在這一行的<td></td>中間插入下面的代碼：
<div id="Layer1">
< script type="text/javascript">setInterval("Layer1.innerHTML='[ '+new Date().toLocaleString()+'  星期'+'日一二三四五六'.charAt(new Date().getDay())+' ]'",500)
< /script>
< /div>
　　以下圖：

　　好的，完成了！
　　對，就這麼簡單！

我要看效果　　我要下載

二、使用Javascript完成自動切換圖片

　　若是上一個功能你形容爲驚人的話，那麼這個功能你能夠形容爲神奇！這項功能只有大型門戶網站中才會擁有，而你如今就要學到。
　　在開始作以前咱們有一項準備工做，這項功能須要用到圖片和一個「高手」寫好的js文件，須要把這兩項拷貝到你網站中的images文件夾中，先點擊這裏下載：下載圖片和js文件。下載後先解壓，將裏面的三張圖片和lunhuan.js文件拷貝到網站的images文件夾中。
　　好，下面開始製做這項驚人的功能，咱們先找到存放輪換動畫的區域，將「index_blank_13.gif」這張圖片刪除掉，而後切換到代碼視圖，在<td></td>中間輸入以下代碼：
<form id="frmIndex">
< DIV id=flashmov align=center>
< SCRIPT>
var imgWidth=332; //圖片寬度
var imgHeight=280; //圖片高度
var textFromHeight=22; var textStyle="texttitle";var textLinkStyle="texttitle";
var buttonLineOn="#f60"; var buttonLineOff="#000";var textbgcolor="#f5f5f5";
var TimeOut=3000;
var imgUrl=new Array(); var imgLink=new Array();var imgtext=new Array();var imgAlt=new Array();
var adNum=0;
document.write('<style type="text/css">');
document.write('#focuseFrom{width:'+(imgWidth+2)+';margin: 0px; padding:0px;height:'+(imgHeight+textFromHeight)+'px; overflow:hidden;}');
document.write('#txtFrom{height:'+textFromHeight+'px;line-height:'+textFromHeight+'px;width:'+imgWidth+'px;overflow:hidden; background-color:' + textbgcolor + ';}');
document.write('#imgTitle{width:'+imgWidth+';top:-'+(textFromHeight+14)+'px;height:18px}');
document.write('</style>');
document.write('<div id="focuseFrom">');
imgUrl[1]='images/1.JPG';
imgtext[1]='中原市嚴把第二次土地調查外業質量關';
imgLink[1]='#';//本張圖片的連接
imgtext[1]='中原市嚴把第二次土地調查外業質量關';
imgUrl[2]='images/2.jpg';
imgtext[2]='二次調查鬧正月';
imgLink[2]='#';
imgtext[2]='二次調查鬧正月';
imgUrl[3]='images/3.jpg';
imgtext[3]='中原市召開全市耕地佔補平衡工做現場會';
imgLink[3]='#';
imgtext[3]='中原市召開全市耕地佔補平衡工做現場會';
< /SCRIPT>
< script src="images/lunxian.js" ></script>
< /DIV>
< /form>

以下圖：

　　接下來保存一下，如今你運行一下頁面試試看吧！
　　哈哈，是否是感受特別驚人？對，就這麼簡單就作好了！
　　提示：若是你須要更換顯示的圖片、文本、連接只須要在「imgUrl[1]='images/1.JPG'; imgtext[1]='中原市嚴把第二次土地調查外業質量關'; imgLink[1]='#';」處更換就好了。
　　好了，到此輪換動畫就作好了，是否是很是有成就感呢？

我要看效果　　我要下載

三、填充主頁面全部內容
　　OK，到如今咱們的主頁面全部的準備工做都已完成了，接下來咱們將首頁面中的內容手工加入，最終造成一個帶「真實」內容的靜態首頁，以便咱們稍後根據頁面內容的佈局來加入程序。這一步在這裏就不詳細介紹了，由你們參照咱們的例子本身完成。在填充內容時有幾項須要交代的，以下：

　　一、下載3張必要圖片（箭頭和細線）：

下載圖片

這三張圖片是作首頁內容時用到的箭頭和細線，下載後先解壓，而後將裏面的三張圖片拷貝到網站根目錄的images文件夾中便可。
　　二、首頁中間「中原美景」不間斷滾動圖片的製做：將images/index_blank_26.gif圖片刪除掉，切換到代碼視圖插入以下代碼便可：
<DIV id=demo style="OVERFLOW: hidden; WIDTH: 745px">
< TABLE cellPadding=0 align=left border=0 cellspace="0">
< TBODY>
< TR>
< TD id=demo1 vAlign=top>
< img src="images/index_blank_26.gif" /></TD>
< TD id=demo2 vAlign=top></TD></TR></TBODY></TABLE></DIV>
< SCRIPT>
var speed=30
demo2.innerHTML=demo1.innerHTML
demo.scrollLeft=demo.scrollWidth
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo2.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
< /SCRIPT>
　　三、「網址導航」、「網站調查」這兩部分先用dreamweaver作成靜態的就好了，能夠直接拷貝例子，方便稍後填充代碼。
　　到此首頁面內容已經填充完畢了，你們能夠徹底按照例子來作也能夠根據實際狀況自由設置內容的文字大小、樣式、行高等。

第八個任務：使用SQL Server2005建立數據庫

一、作這個網站你應該具有的SQL Server2005基礎

　　SQL語句：CREATE DATABASE、CREATE TABLE、CREATE VIEW、INSERT、UPDATE、SELECT、DELETE語句。
　　固然SQL Server2005不只僅如此，更高級的知識請到咱們的VIP會員專區提高，但這已經具有了作這個網站的基礎。

二、使用SQL Server2005

　　使用SQLSERVER2005對象資源管理器完成建庫建表沒有任何問題，但做爲程序員，強烈建議你最好使用查詢編輯器（SQLSERVER2000叫查詢分析器）來完成這些操做，好處毫不是向別人賣弄代碼，而是團隊合做時溝通或者造成文檔以及移置到譬如Oracle都是前者不可比擬的！
　　庫名、表名、列名的命名要規範，建議你最好使用匈牙利命名法，你不再用考慮哪些變量是關鍵字或者是不合法的。若是你不瞭解匈牙利命名法，請參考：什麼是匈牙利命名法？有什麼好處？
　　請看一個表名Yybrdab（拼音首字母），你再看一個表名Yiyuanbinrendanganbiao（拼音全拼），再看錶名PatientFiles（英文縮寫），你有什麼見解呢？Yybrdab很難猜，Yiyuanbinrendanganbiao全拼太長了，英文命名PatientFiles是否是更容易理解一些?
　　小問號的庫、表結構以下：
　　CREATE DATABASE Zhongyuan-------------------數據庫名爲"zhongyuan"
　　USE Zhongyuan
　　GO
　　CREATE TABLE UserInfo-----------------------管理員/用戶信息表
　　CREATE TABLE BigKind------------------------大類別表
　　CREATE TABLE SmallKind----------------------小類別表
　　CREATE TABLE News---------------------------新聞/文章表
　　CREATE TABLE Vote---------------------------調查/投票信息表
　　CREATE TABLE MotionPhoto--------------------滾動圖片表
　　CREATE TABLE AppealInfo---------------------**舉報信息表
　　下面爲具體的表結構，供你們參考：
　　一、UserInfo表結構(管理員/用戶信息表)

　　 nID----------------------------自動編號，主鍵
　　 cUserName----------------------用戶名
　　 cUserPassword------------------用戶密碼
　　 cPersonName--------------------人員姓名
　　 cStation-----------------------角色/位置

若是你到如今還不會建庫建表那麼請觀看視頻，這裏教你們怎樣建立數據庫和創建第一個UserName表，其餘的表你們參考視頻中的方法本身創建。
二、BigKind表結構(大類別表)

　　 nID----------------------------自動編號，主鍵
　　 cKindName----------------------大類名稱

三、SmallKind表結構(小類別表)

　　 nID----------------------------自動編號，主鍵
　　 cKindName----------------------小類名稱
　　 nBigID-------------------------所屬大類編號

　　四、News表結構(新聞/文章表)

　　 nID----------------------------自動編號，主鍵
　　 nKindID------------------------所屬類別編號
　　 cTitle-------------------------新聞標題
　　 cImage-------------------------新聞圖片（用於首頁輪換動畫中）
　　 cFrom--------------------------來源
　　 cAuthor------------------------做者
　　 cContent-----------------------詳細內容
　　 dInTime------------------------發佈時間

　　五、Vote表結構(調查/投票信息表)

　　 nID----------------------------自動編號，主鍵
　　 cTitle-------------------------投票標題
　　 cOption1-----------------------選項1
　　 cOption2-----------------------選項2
　　 cOption3-----------------------選項3
　　 cOption4-----------------------選項4
　　 nValue1------------------------選項1票數
　　 nValue2------------------------選項2票數
　　 nValue3------------------------選項3票數
　　 nValue4------------------------選項4票數

　　六、MotionPhoto表結構(滾動圖片表)

　　 nID----------------------------自動編號，主鍵
　　 cPhoto-------------------------圖片路徑
　　 cTitle-------------------------文章標題
　　 cContent-----------------------詳細內容
　　 dInTime------------------------發佈時間

　　七、AppealInfo表結構(**舉報信息表)

　　 nID----------------------------自動編號，主鍵
　　 cPersonType--------------------發送人類型
　　 cPersonName--------------------發送人姓名
　　 cPersonPhone-------------------發送人電話
　　 cPersonAddress-----------------發送人地址
　　 cAppealType--------------------投訴類型
　　 cAddressee---------------------收信人
　　 cTitle-------------------------信件標題
　　 cContent-----------------------信件內容
　　 cSecrecyYN---------------------是否保密
　　 dSendTime----------------------發送時間

　　好了，到此這個網站中須要用到的數據庫和表已經創建完畢了，你們能夠按照上面的例子建表，若是你認爲本身創建的表結構或字段名稱更合理的話也能夠根據本身的想法創建。

第九個任務：使用VS2005完成本網站站點的創建

一、VS2005是一個C#集成的開發環境，Dreamweaver作界面彷佛有獨到之處？

　　小問號很快遭遇了第一個伏擊戰，看看本身用Photoshop設計出來還算滿意的界面，用Dreamweaver設計出來還算漂亮的首面，但兩者如何結合起來了？犯了愁。
　　本節課講的內容很簡單，主要是講解如何使用VS2005創建站點，以前咱們所作的都是一些準備工做，到如今咱們纔算真正接觸VS2005工具，之後咱們就主要利用VS2005工具來開發網站。若是在這以前的準備工做你沒有作好，那麼請不要着急作下面的內容，請必定要先完成以前全部的準備工做。
　　下面爲VS2005創建站點的視頻錄像供你們參考。
觀看視頻

第十個任務：從index.html轉爲index.aspx
　　　　以前咱們已用Dreamweaver工具作好了靜態的首頁面Index.html，這節課教你們怎樣將index.html轉變爲ASP.NET頁面:index.aspx。

　一、添加一個新ASP.NET頁面
　　在「解決方案資源管理器」中鼠標右鍵站點名稱，在彈出的菜單中選擇「添加新項」，在彈出的窗口中選擇「模板類型」爲「Web窗體」，名稱改成「index.aspx」,語言選擇爲「C#」（之後咱們建立的全部ASP.NET頁面不作特殊說明的所有爲C#語言），以下圖：

好了，到此空的index.aspx頁面已經創建好了，下面咱們將以前作好的index.htm頁面中的內容複製到index.aspx中。
　　二、將index.html頁面中的內容複製到index.aspx中
　　（1）、打開index.aspx頁面，進入到代碼（源）視圖，將<title></title>中的「無標題頁」改成「中原市國土資源局門戶網站」。
　　（2）、打開index.html頁面，進入到代碼（源）視圖，將<head></head>中從<style...>到</style>的全部代碼拷貝到index.aspx的<head></head>中（<title></title>下面）。
　　（3）、將index.html頁面中的全部<form..>和</form>標記都去掉（防止與Index.aspx頁面中的form標記衝突），把index.aspx頁面中的<form id="form1" runat="server">改成<form id="frmIndex" runat="server">
　　（4）、將index.html頁面中"網址導航"欄目中的下拉框所有刪除掉，由於如今這些下拉框是html控件不被咱們的VS2005工具所識別，再有就是這裏的下拉框只是做爲頁面佈局使用，徹底能夠刪除，最後咱們要作成服務器端下拉框控件。
　　（5）、將index.html頁面中<body>至</body>中的全部內容拷貝到index.aspx頁面中<body></body>中的<div></div>內。
具體拷貝位置以下圖所示：

備註：若是出現index.aspx在VS2005中沒法切換到「設計」視圖，請將「網址導航」欄目中的下拉框所有刪除，或者檢查頁面中是否有標籤衝突或編寫錯誤。
以上的操做都作完後，所有保存一下，而後能夠將index.html刪除掉了。到此index.aspx頁面基本框架已經構建好了。

若是你想觀看視頻教程請點擊這裏觀看視頻

第十一個任務：後臺新聞信息及新聞類別的添加與管理一
　　到目前爲止,咱們網站的靜態首頁面已經作好了,下面咱們就要開始製做網站的後臺及數據庫部分
,而後咱們將首頁面中須要更新內容的地方作成動態的(可讀取數據庫信息)就能夠了。

這節課咱們提到了動態網站這個名詞，如今我相信還有至關一部分同窗對動態網頁、動態網站還不是十分理解，或則說理解的不夠準確，在此我給你們簡單介紹一下動態網站的含義，你們可以理解便可．所謂動態網頁並非網頁中有個動畫有個滾動新聞看起來網頁裏面"會動"就是動態網頁了，這種理解方式大錯特錯．
　　動態網站裏面最大一個特色就是＂交互＂，所謂的動態網頁是指瀏覽者與咱們網站之間可以造成一個交互關係，瀏覽者經過發出指令（用鼠標點擊網頁中連接或按鈕，按下鍵盤的某一個鍵等等）可以使網頁執行某項操做，好比留言板中咱們輸入完留言內容後點擊＂保存＂按鈕便可完成留言，想查詢咱們的手機餘額和話費清單時，咱們只須要輸入你的手機號點擊＂查詢＂按鈕便可調出咱們的手機信息等等．像咱們平時看到的留言板、博客、論壇、各類查詢系統及管理系統等都是屬於動態網站範疇.

　　本節教程內容比較多，主要分爲如下幾項：
　　一、動態類別的製做
　　　　（1）、製做大類的添加頁面
　　　　（2）、製做小類的添加頁面
　　二、新聞/文章板塊的後臺添加與前臺顯示
　　　　（1）、製做新聞/文章的添加頁面
　　　　（2）、製做新聞/文章前臺首頁中的顯示

　　這節課所需時間較長，但願你們可以耐心仔細的去作。到此，咱們纔算是真正開始製做動態網頁（網頁前臺和服務器端數據庫進行交互），作完這節課咱們能夠理解「動態網站」的真正含義，咱們可以知道如何在一個網頁中「弄」個文本框輸入些文字點擊按鈕便可存到數據庫中，咱們可以學會網站後臺中類別的製做方法、咱們可以掌握新聞信息的添加和前臺頁面的讀取，咱們還可以…………

　　下面進入正題：
一、製做大類的添加頁面
咱們網站中的信息分爲好多類別,因此咱們在後臺發佈信息的時候就要先選擇"所屬類別"再發布信息,而咱們要作的網站屬於中大型門戶網站,其中的類別會常常增減或修更名稱,那麼網站中的類別就須要管理員能夠在後臺中輕鬆管理,因此在製做後臺發佈信息功能以前要先作好類別的管理功能.
類別的具體制做方法請觀看視頻.