窗體對象最主要的功能就是能夠直接訪問HTML文檔中的窗體，它封裝了相關的HTML代碼：

窗體對象的方法只有一個--submit()方法，該方法主要功用就是實現(xiàn)窗體信息的提交。如提交Mytest窗體，則使用下列格式：

document.mytest.submit()

第五章

色彩在網(wǎng)頁中的應用

6.1.3 窗體對象的屬性

窗體對象中的屬性主要包括以下：elements name action target encoding method。除Elements外，其它幾個均反映了窗體中標識中相應屬性的狀態(tài)，這通常是單個窗體標識；而elements常常是多個窗體元素值的數(shù)組，例：

elements[0].Mytable.elements[1] 6.1.4 訪問窗體對象

在JavaScript中訪問窗體對象可由兩種方法實現(xiàn)：（1）通過訪問窗體

在窗體對象的屬性中首先必須指定其窗體名，而后就可以通過下列標識訪問窗體如：document.Mytable()。

（2）通過數(shù)組來訪問窗體

除了使用窗體名來訪問窗體外，還可以使用窗體對象數(shù)組來訪問窗體對象。但需要注意一點，因窗體對象是由瀏覽器環(huán)境的提供的，而瀏覽器環(huán)境所提供的數(shù)組下標是由0到n。所以可通過下列格式實現(xiàn)窗體對象的訪問：

document.forms[0] document.forms[1] document.forms[2]...6.1.5 引用窗體的先決條件

在JavaScript中要對窗體引用的條件是：必須先在頁面中用標識創(chuàng)建窗體，并將定義窗體部分放在引用之前。

6.2 窗體中的基本元素

窗體中的基本元素由按鈕、單選按鈕、復選按鈕、提交按鈕、重置按鈕、文本框等組成。

在JavaScript中要訪問這些基本元素，必須通過對應特定的窗體元素的數(shù)組下標或窗體元素名來實現(xiàn)。每一個元素主要是通過該元素的屬性或方法來引用。其引用的基本格式見下：

formName.elements[].methadName(窗體名.元素名或數(shù)組.方法)formName.elemaent[].propertyName(窗體名.元素名或數(shù)組.屬性)下面分別介紹：

（1）Text單行單列輸入元素

功能：對Text標識中的元素實施有效的控制。基本屬性：

Name：設定提交信息時的信息名稱。對應于HTML文檔中的Name。Value：用以設定出現(xiàn)在窗口中對應HTML文檔中Value的信息。defaultvalue：包括Text元素的默認值 基本方法：

blur()：將當前焦點移到后臺。

第五章

色彩在網(wǎng)頁中的應用

select()：加亮文字。主要事件：

onFocus：當Text獲得焦點時，產(chǎn)生該事件。OnBlur：從元素失去焦點時，產(chǎn)生該事件。Onselect：當文字被加亮顯示后，產(chǎn)生該文件。onchange：當Text元素值改變時，產(chǎn)生該文件。例：

功能：實施對Textarea中的元素進行控制?；緦傩?/p>

name：設定提交信息時的信息名稱，對應HTML文檔Textarea的Name。Value：用以設定出現(xiàn)在窗口中對應HTML文檔中Value的信息。Default value：元素的默認值。方法：

blur()：將輸入焦點失去 select()：將文字加亮后 事件：

onBlur:當失去輸入焦點后產(chǎn)生該事件 onFocus:當輸入獲得焦點后，產(chǎn)生該文件 Onchange:當文字值改變時，產(chǎn)生該事件 Onselect:當文字加亮后，產(chǎn)生該文件（3）Select選擇元素

功能：實施對滾動選擇元素的控制。屬性：

name:設定提交信息時的信息名稱，對應文檔select中的name。Length:對應文檔select中的length options:組成多個選項的數(shù)組 selectIndex;該下標指明一個選項

select在中每一選項都含有以下屬性： Text:選項對應的文字

selected:指明當前選項是否被選中 Index:指明當前選項的位置 defaultselected:默認選項 事件：

第五章

色彩在網(wǎng)頁中的應用

OnBlur：當select選項失去焦點時，產(chǎn)生該文件。onFocas:當select獲得焦點時，產(chǎn)生該文件。Onchange:選項狀態(tài)改變后，產(chǎn)生該事件。（4）Button按鈕

功能：實施對Button按鈕的控制。屬性：

Name:設定提交信息時的信息名稱，對應文檔中button的Name。Value:用以設定出現(xiàn)在窗口中對應HTML文檔中Value的信息。方法：

click()該方法類似于一個按下的按鈕。事件：

onclick當單擊button按鈕時，產(chǎn)生該事件。例 ：

功能：實施對一個具有復選框中元素的控制。屬性：

name:設定提交信息時的信息名稱。

Value:用以設定出現(xiàn)在窗口中對應HTML文檔中Value的信息。Checked:該屬性指明框的狀態(tài)true/false.defauitchecked:默認狀態(tài) 方法：

click()該方法使得框的某一個項被選中。事件：

Onclick：當框的選被選中時，產(chǎn)生該事件。（6）radio無線按鈕

功能：實施對一個具單選功能的無線按鈕控制。屬性：

Name：設定提交信息時的信息名稱，對應HTML文檔中的radio的name相同 Value：用以設定出現(xiàn)在窗口中對應HTML文檔中Value的信息，對應HTML文檔中的radio的name。

length：單選按鈕中的按鈕數(shù)目。defalechecked:默認按鈕。

checked:指明選中還是沒有選中。

第五章

色彩在網(wǎng)頁中的應用

index:選中的按鈕的位置。方法：

chick():選定一個按鈕。事件：

onclick:單擊按鈕時，產(chǎn)生該事件。（7）hidden:隱藏

功能：實施對一個具有不顯示文字并能輸入字符的區(qū)域元素的控制。屬性：

name:設定提交信息時的信息名稱，對應HTML文檔的hidden中的Name。

Value:用以設定出現(xiàn)在窗口中對應HTML文檔中Value的信息，對應HTML文檔hidden中的value。

defaleitvalue:默認值（8）Password口令

功能：實施對具有口令輸入的元素的控制。屬性：

Name:設定提交信息時的信息名稱，對應HTML文檔中password中的name。Value:用以設定出現(xiàn)在窗口中對應HTML文檔中Value的信息，對應HTML文檔中password中的Value。

defaultvalu:默認值 方法：

select():加亮輸入口令域。

blur():使這丟失passward輸入焦點。focus():獲得password輸入焦點。（9）submit提交元素

功能：實施對一個具有提交功能按鈕的控制。屬性：

name:設定提交信息時的信息名稱，對應HTML文檔中submit。

Value:用以設定出現(xiàn)在窗口中對應HTML文檔中Value的信息，對應HTML文檔中value。

方法

click()相當于按下submit按鈕。事件：

onclick()當按下該按鈕時，產(chǎn)生該事件。

6.3窗體對象實例

下面我們演示通過點擊一個按鈕（red）來改變窗口顏色，點擊“調用動態(tài)按鈕文檔”調用一個動態(tài)按鈕文檔。

test8_1.htm 調用動態(tài)按鈕文檔

第三篇：個人網(wǎng)站網(wǎng)頁制作論文

個人網(wǎng)站網(wǎng)頁

制 作 論 文

學院： 專業(yè)： 姓名： 學號：

摘要

本文就個人網(wǎng)站的規(guī)劃與建設，以軟件工程的方法對全過程進行了分析與研究。本文的主要工作集中在：

1.對Web頁進行概述，主要是對Internet的歷史和發(fā)展作了回顧，并對Web頁的定義和特性進行闡述。并對網(wǎng)站開發(fā)過程中使用的開發(fā)工具和技術作了簡要的介紹。

2.對網(wǎng)站建設中提及到的術語進行了解釋，并對個人網(wǎng)站的由來和發(fā)展進行了討論。

3.對自己的個人網(wǎng)站從規(guī)劃到建設進行了詳細的分析。

4.使用ASP＋IIS＋Access技術實現(xiàn)了我的網(wǎng)站的各種功能，其中和數(shù)據(jù)庫的連接使用到了ODBC技術。

5.就網(wǎng)站建設提出了自己的觀點與建議。

【關鍵詞】 網(wǎng)站 ASP SQL Server 風格 創(chuàng)意

一、引言

在已跨入21世紀的今天，人類使用和學習信息的方式以及信息的包裝方式正在進行著不可阻擋的革命，這次革命將比印刷術的出現(xiàn)所產(chǎn)生的影響以及對社會發(fā)展的推動遠為復雜而巨大。目前，我國上網(wǎng)的人口已近一個億，成立世界上網(wǎng)民最多的國家，許多人在需要查詢信息，首先想到的就是上網(wǎng)。網(wǎng)站的迷人之處在于綜合使用文本、圖象、聲音、動畫和視頻的信息和內(nèi)容，具有豐富的多媒體表現(xiàn)與互動特點，無可置疑，網(wǎng)站已成為最吸引人的也最有效的信息傳遞手段和方式。隨著網(wǎng)絡技術的發(fā)展，各類網(wǎng)站紛紛出現(xiàn)。個人網(wǎng)站也成為了一種時尚。越來越多的人希望擁有自己的網(wǎng)站，開辟網(wǎng)絡世界的一片天地，展示自己的才華和風格。

（一）Web頁概述

1、認識Web

Web(World Wide Web，簡稱，其意思就是采用http超文本傳輸協(xié)議訪問新浪網(wǎng)的首頁，由于網(wǎng)頁均是通過http超文本傳輸協(xié)議進行訪問，默認下，“http://”可以省略不輸。

5、IP地址

為了使互聯(lián)網(wǎng)上的電腦主機在通信時能夠相互識別，每臺主機都分配一個能表示其位置的IP（Internet Protocol）地址，這如同公用電話網(wǎng)中電話的號碼一樣。IP地址是由專門的互聯(lián)網(wǎng)機構來分配。IP地址具有惟一性，是由32位二進制數(shù)組成，分為四組，每組8位，每組之間用小數(shù)點分隔，在實際之中常轉換成十進制數(shù)表示。

（二）個人網(wǎng)站的由來和發(fā)展

互聯(lián)網(wǎng)在中國的出現(xiàn)只有短短七年時間，1994年中國科學院高能物理研究所設立了國內(nèi)第一個Web服務器，推出一個叫做“中國之窗”的網(wǎng)頁，這可能是國內(nèi)Internet上出現(xiàn)的第一個Web網(wǎng)頁，1995年開始，中國教育科研網(wǎng)，中國科技網(wǎng)，中國公用計算機互聯(lián)網(wǎng)以及中國金橋網(wǎng)這構成中國數(shù)字神經(jīng)系統(tǒng)的四大互聯(lián)網(wǎng)絡相繼建成，使互聯(lián)網(wǎng)在中國開始真正進入社會生活之中。

這時期，個人網(wǎng)站出現(xiàn)的條件還很不成熟，國內(nèi)上網(wǎng)的人數(shù)很少，也缺乏支持個人建站的環(huán)境，用戶很難找到理想的個人主頁存放地。

個人網(wǎng)站發(fā)展的第二階段是從1997年初到1998年，這段時間，中國網(wǎng)民數(shù)量飛速增長，個人網(wǎng)站日漸繁榮，個人主頁的數(shù)量急劇增加。同時，越來越多的商業(yè)網(wǎng)站開始免費提供個人主頁空間，這些良好的外部極大地促進了個人網(wǎng)站的發(fā)展，涌現(xiàn)了一批很著名的個人網(wǎng)頁，從1998年下半年開始，隨著互聯(lián)網(wǎng)應用的深入的普及，隨著眾多主頁制作工具的出現(xiàn)，使得建站成為一件非常容易的事，創(chuàng)建一個能充分體現(xiàn)自我風格和特色的個人網(wǎng)站已經(jīng)成為互聯(lián)網(wǎng)用戶的新追求。

（三）我的個人網(wǎng)站的設計與規(guī)劃

1、明確架設網(wǎng)站的目的及客戶要求

通常情況下，架設個人網(wǎng)站主要是為了通過互聯(lián)網(wǎng)表達個人在商業(yè)、科技、交際、生活等方面的信息需求或者進行信息的交流，具有較強的目的性，我的個人網(wǎng)站一般體現(xiàn)在：為了展示自己的風采，讓大家和我一起分享我的心得與經(jīng)驗，讓和我有共同愛好的朋友有一個傾訴的地方。

2、我的個人網(wǎng)站概貌

因為是個人網(wǎng)站，所以只是選擇了自己擅長和喜愛的內(nèi)容，在突出自己的風格和特點的同時，還應用了現(xiàn)在流行的網(wǎng)站設計技術和數(shù)據(jù)庫技術。因此將網(wǎng)站設計分為前臺頁面展示平臺和后臺在線管理平臺。

3、功能劃分

網(wǎng)站設計有新聞更新，瀏覽者可以在首頁瀏覽自己喜歡的新聞，并且可以在留言板和大家交流，在后臺管理頁面中，通過身份認證，管理員——我，可以對網(wǎng)站信息進行管理。站內(nèi)的其它頁面均是我自己的精心收藏，與大家一起分享。

4、功能描述(1)新聞

嵌入百度新聞每日更新代碼，使用在本站首頁顯示今日國內(nèi)國際新聞和體育新聞，供瀏覽者瀏覽。

(2)留言板

是一個我與大家談心交流的地方，在留言板中，我們可以暢所欲言，和大家進行交流。就我們感興趣的話題展開討論。和大家進行溝通。

(3)后臺管理頁面 是我管理和添加到新內(nèi)容的地方，為了方便實現(xiàn)信息的經(jīng)常更新，我設計了這個管理頁面，經(jīng)過身份認證后我可以進入網(wǎng)站對其中的信息進行管理。

(4)日記

在其中展示我喜愛的東西，包括我的日記、精品文章、社會文化和一些雜七雜八的文章。奇文共欣賞，疑義相與析。我只想起到拋磚引玉的作用，讓大家從中認識我和了解我，讓一些美好的東西我們大家共同來欣賞。

(5)相冊

在其中展示漂亮的圖片，包括我的照片、我的同學、風景照片、妹眉帥哥欄目。讓大家一起來欣賞人物、風景風采。

(6)音樂

在其中展示個人喜歡的歌曲，朋友們可以在里面點播自己喜歡的歌。(7)頁面組織和數(shù)據(jù)庫設計

在明確了我的個人網(wǎng)站的風格和定位后，就是網(wǎng)站的材料組織以及網(wǎng)站的頁面設計和數(shù)據(jù)庫設計。

建立一個網(wǎng)站好比寫一篇文章，首先要擬好提綱，文章才能主題明確，層次清晰。如果網(wǎng)站結構不清晰，目錄龐雜，內(nèi)容東一塊西一塊。結果不但瀏覽者看得糊涂，自己擴充和維護網(wǎng)站也相當困難。網(wǎng)站的題材確定后，并且收集和組織了許多相關的資料內(nèi)容，但如何組織內(nèi)容才能吸引網(wǎng)友們來瀏覽網(wǎng)站呢？欄目的實質是一個網(wǎng)站的大綱索引，索引應該將網(wǎng)站的主體明確顯示出來。因此我將自己的個人網(wǎng)站分為五個欄目，分別是關于我、相冊、日記、音樂、留言。

三、詳細設計

1、界面設計（1）相冊

是一個個人相片和精彩圖片展示的地方，在相冊中，我們可以了解到站長的個人風采和自己喜歡的圖片。a、功能

利用ASP對象語句顯示圖片，讓大家可以看見所有圖片的縮略圖，同時每個圖片都有快照功能，可以瀏覽圖片的全圖。

b、組成構造

相冊結果顯示頁面 photo.asp：用來顯示所有圖片，同時還具備圖片的分類功能和圖片單個瀏覽功能。

站長基本信息顯示頁面 include.asp： 數(shù)據(jù)庫連接頁面 conn.asp(2)日記

是一個記錄個人日記和精品收藏文章的地方，供給大家一起分享。a、功能

利用ASP對象語句分類顯示日記或文章記錄，讓大家瀏覽到最新的日記或文章

b、組成結構

日記或文章顯示頁面 diary.asp：顯示所有日記或文章，同時還具備顯示不同子類日記或文章

站長基本信息顯示頁面 include.asp 數(shù)據(jù)庫連接頁面 conn.asp c、日記頁面瀏覽效果圖，如圖12。(3)、音樂

是一個音樂收藏和音樂欣賞的地方。a、功能

利用ASP對象語句來顯示歌曲曲目、演唱人和在線播放功能。b、組成結構

歌曲顯示播放頁面 media.asp：完成曲目的顯示和播放功能的頁面。站長基本信息顯示頁面 include.asp 數(shù)據(jù)庫連接頁面 conn.asp(4)、留言本

是一個我與大家談心交流的地方，在留言板中，我們可以暢所欲言，和大家進行交流。就我們感興趣的話題展開討論。和大家進行溝通。

a、功能

利用SQL語法過濾特定的用戶留言意見，讓站長可以針對某位特定用戶所發(fā)表的意見作出獨立的回答，同時，用戶在發(fā)表個人意見時，若認為意見內(nèi)容涉及敏感的話題或是意見內(nèi)容涉及私人隱私，都可用“悄悄話”的方式發(fā)言，這些“悄悄話”將不會被顯示出來讓大家看到，當然，站長擁有管理的能力，只要以密碼登錄管理模式，就可以進行各個用戶的單獨意見回復，而且還能看到用戶所留下的“悄悄話

b、組成構造

意見留言結果網(wǎng)頁gbook.asp：用來顯示用戶發(fā)言與站長回復內(nèi)容，同時還具備查看留言和發(fā)表留言兩個功能。

站長基本信息顯示頁面 include.asp 數(shù)據(jù)庫連接頁面 conn.asp

(三)、關鍵代碼設計

1、分頁功能模塊代碼

<% if not rs.eof then rs.MoveFirst '注意放到前面來,否則到任何頁總是在第一個記錄上

end if rs.pagesize=MaxPerPage '設置每頁最多顯示多少條記錄

If trim(Request(“Page”))<>“" then '如果請求的頁次不為空

CurrentPage= CLng(request(”Page“))'clng是轉換成長整型數(shù)據(jù)類型,并賦值到當前頁次上

If CurrentPage> rs.PageCount then '如果當前頁次大于總頁數(shù),則將最大頁次賦值到當前頁次上

CurrentPage = rs.PageCount

End If Else

CurrentPage= 1 '一切條件不成立,將當前頁設為第一頁 End If totalPut=rs.recordcount '將總記錄賦值于TOTALPUT

if CurrentPage<>1 then '如果當前頁數(shù)不等于第一頁

if(currentPage-1)*MaxPerPage

rs.move(currentPage-1)*MaxPerPage '相對當前記錄數(shù)向后移動

dim bookmark '定義書簽變量

bookmark=rs.bookmark '將當前記錄的標簽賦于變量BOOKMARK上

end if

end if

dim n,k

if(totalPut mod MaxPerPage)=0 then '總記錄數(shù)與每頁最大記錄數(shù)求余的結果為零時,則N返回整數(shù)頁次,否則再加一.n= totalPut MaxPerPage

else

n= totalPut MaxPerPage + 1

end if %>

2、圖片顯示功能模塊代碼

<% cid=request(”id“)if cid=”“ then sql=”select * from HN_pro order by id desc“ else sql=”select * from HN_pro where cstr(class)='“&cid&”' order by id desc“ end if

else

rsnews.AbsolutePage=ToPage

intCurPage=ToPage

end if

else

rsnews.AbsolutePage=1

intCurPage=1

end if intCurPage=CInt(intCurPage)k=1 do while Not rsnews.eof and k<6 %>

<%for n=1 to 6%>

<% rsnews.MoveNext if rsnews.eof then exit for if rsnews.eof then exit do next %>

“ rel=”lightbox[plants]“> “ width=”49“ height=”49“ border=”0“>

3、發(fā)表留言提交內(nèi)容判斷模塊代碼 <% if request(”action“)=”“ then response.redirect”gbook.asp?action=show“ if request(”action“)=”post“ then dim bookname dim bookwhere dim bookpic bookname=request(”name“)bookwhere=request(”where“)bookpic=request(”pic“)bookface=request(”face“)bookip=request.ServerVariables(”REMOTE_ADDR“)if bookname=”“ then Response.Write ”“

Response.End %>

（四）、網(wǎng)站管理系統(tǒng)

1、完成站長對網(wǎng)站信息管理及更新的系統(tǒng)，包括以下幾部分：（1）管理登陸頁面Index.asp（2）相冊管理頁面Admin_pro.asp（3）日記管理頁面Admin_new.asp（4）音樂管理頁面Admin_down.asp（5）留言管理頁面GuestBook.asp

2、管理登陸

管理系統(tǒng)的登陸頁面，主要用于管理登陸和判斷用戶是否已注冊。（1）其中判斷是否是非法登陸的代碼為： <% admin_pass=md5(admin_pass)set rs=server.createobject(”adodb.recordset“)sql=”select * from admin where admin_name='“&admin_name&”' and admin_pass='“&admin_pass&”'“

rs.open sql,conn,1,3

if rs.eof then response.write”“

else

session(”admin_name“)=request(”admin_name“)

session(”loc“)=1

response.redirect ”admin.asp“ end if rs.close %>（2）其中驗證碼驗證代碼：

<% dim verifycode,verifycode2 if verifycode<>verifycode2 then response.write”“ founderr=true else session(”verifycode“)=”“ %>

3、主要功能程序段（1）打開數(shù)據(jù)庫 <% set conn = Server.CreateObject(”ADODB.Connection“)conn.open ”YourDSNName“,”username“,”password“ %>（2）數(shù)據(jù)庫查詢操作 大類查訊

setrs=server.CreateObject(adodb.recordset)小類查詢 dimrs2 setrs2=server.CreateObject(adodb.recordset)rs2.openselectnclass,nclassidfromnclasswhereanclassid=&rs(anclassid)&orderbynclassidorder,conn,1,1 dowhilenotrs2.eof response.writeAhref=class.aspaid=&rs(anclassid)&&nid=&rs2(nclassid)&&trim(rs2(nclass))&A rs2.movenext loop（3）添加記錄操作

setrs=server.CreateObject(adodb.recordset)可寫方式

rs.openselectbookid,username,zhuangtai,zongerfromactions,conn,1,3 rs.addnew 添加一條新記錄 rs(bookid)=bookid 添加相應的記錄 rs(username)=username ???? rs(zhuangtai)=6 rs(zonger)=0 rs.update 更新數(shù)據(jù)庫（4）刪除記錄操作

從表actions中刪除actionid匹配的記錄 conn.executedeletefromactionswhereactionid= &request.QueryString(actionid)

四、編碼、測試與維護

（一）測試與維護

1、IIS(Internet 信息服務)安裝配置

可以在”添加或刪除程序 >>添加/刪除Windows組件“對話框中把”Internet 信息服務(IIS)“前的勾選中，點”下一步“進行安裝就行了(注：在這之前應把系統(tǒng)安裝盤放到光驅)。IIS 裝好之后再作一下簡單的配置。定位到”開始>>管理工具>>Internet 信息服務(IIS)管理器“，打開IIS管理器。在”本地計算機>>網(wǎng)站>>默認網(wǎng)站“上右鍵單擊，在快捷菜單里選”屬性“(或者直接在操作菜單下選”屬性“)，彈出如下對話框圖16: 圖16 切換到”主目錄“標簽(圖2)，重新選擇網(wǎng)站根目錄(我選擇的是E盤下的my web目錄)，默認是”系統(tǒng)盤:Inetpubwwwroot“,因為系統(tǒng)盤不宜放太多的非系統(tǒng)文件，所以在這里重設默認網(wǎng)站要目錄，如果嫌麻煩可以跳過這步。再切換到”文檔“標簽，通過”添加“、”刪除“、”上移“、”下移 “，把站點的默認文檔設置如圖17：

圖17 可能有些朋友會疑惑，設置默認內(nèi)容文檔有什么作用？細心的朋友應該會發(fā)現(xiàn)，在瀏覽一些大網(wǎng)站的首頁時用它的一級域名就行了，并不需要指定請求頁的文件名，這就是設置了默認內(nèi)容文檔的緣故，它的作用就是在瀏覽器請求沒有指定文檔的名稱時，將默認文檔提供給瀏覽器。要得到更詳盡的解釋說明，可以點擊圖3中的“幫助”。之所以有這步，是因為網(wǎng)站的默認內(nèi)容頁中沒有index.asp，不大符合國人習慣。

2、Dream weaver測試站點和用IIS測試本地站點

Dream weaver MX提供了全面檢測站點的功能，它比檢測鏈接更全面。全面地檢測內(nèi)部、外部鏈接、去除錯標簽、空標簽、多余的標簽等，它的使用相當簡單，使用全面檢測站點功能如下：

（1）、選擇菜單中【站點】的【報告】命令，打開一個窗口。

（2）、選擇檢測范圍，在【報告】選項中有四個內(nèi)容供選擇：Current Document、Entire Local Site、Select Files in site、Folder。

（3）、對工作流方面的信息進行檢測。

（4）、對HTML文件的信息做出檢查。

把編好的網(wǎng)站文件復制到D:/my web文件夾中，可以打開瀏覽器，在地址欄中輸入http://localhost/my web/index.asp ,就會看見網(wǎng)站了。

3、維護

網(wǎng)站建成后并不意味著網(wǎng)站建設的結束，網(wǎng)站內(nèi)容需要不斷更新，這樣才會不斷的吸引更多的瀏覽者訪問，才能成為一個優(yōu)秀的網(wǎng)站。通過FTP軟件將更新過的網(wǎng)頁上傳到服務器或通過Dream weaver MX來遠程管理站點，同時還要認真回復瀏覽者的電子郵件和留言，做到有問比答。平時多收集資料，多聽聽別人建議，定期更新版面，還有推廣站點。

（二）設計技巧和解決方法

用服務器端包含技術實現(xiàn)對文件的引用

系統(tǒng)中有許多頁面都會引用相同的代碼文件，所以使用include語句將已完成代碼的文件包含進來，就可以簡化代碼的縮寫。如首頁面indes.asp中第二行和第三行代碼。

結束語

經(jīng)過老師耐心細致的指導，及同學之間的相互交流，同時翻閱了大量的資料(包括網(wǎng)上資料，書本及學校的一些相關資料)經(jīng)過近一段時間的努力，個人網(wǎng)站的設計制作告一段落?？偨Y這次“文武屋-個人網(wǎng)站”開發(fā)制作過程，我們綜合使用了目前因特網(wǎng)上比較流行的各種靜態(tài)制作方法及交互式動態(tài)網(wǎng)站的制作設計手段，并對初步利用后臺程序完成了網(wǎng)站的動態(tài)響應與生成網(wǎng)頁的技術。同時也從中學習了對靜態(tài)頁面的處理風格，色彩搭配，頁面導航方面有了一定經(jīng)驗。對用Javascript語言制作動態(tài)效果也有了更進一步的認識。在交互式網(wǎng)頁設計學會了如何使用Access建立數(shù)據(jù)庫，以及對數(shù)據(jù)庫瀏覽，修改，添加，查詢。如何用ASP編寫程序來方便用戶在網(wǎng)上查看網(wǎng)站各方面的信息和交流。本次設計由于設計時間較緊，且相關模塊比較多，加之設計經(jīng)驗的不足，在網(wǎng)站的整體設計及各模塊功能可能設計的不完全，有待于進一步的完善和改進。

參考文獻

[1]吳濤主編，網(wǎng)站全程設計技術（修訂本），北京：清華大學出版社；北京交通大學出版社，2006.7 [2]龍馬工作室編，ASP+SQL Server組建動態(tài)網(wǎng)站實例精講，北京：人民郵電出版社，2004.8 [3] 趙增敏編，ASP動態(tài)網(wǎng)頁設計，電子工業(yè)出版社，2003.8 [4] 任學文、范嚴編, 網(wǎng)頁設計與制作，中國科學技術出版社，2006.8 [5] 武創(chuàng)、王惠,網(wǎng)頁設計探索之旅 ,電子工業(yè)出版社，2006.9 [6] 杜巧玲等編, 網(wǎng)頁設計超級夢幻組合,清華大學出版社, 2003.3 [7] 吳黎兵、羅云芳編，網(wǎng)頁設計教程，武漢大學出版社，2006.2 [8] 莊王健編，網(wǎng)頁設計三劍客白金教程，電子工業(yè)出版社，2006.01

第四篇：網(wǎng)頁制作期末論文

關于網(wǎng)頁制作的相關基本問題

摘要：隨著網(wǎng)絡的發(fā)展，網(wǎng)頁的制作越來越重要。網(wǎng)頁制作要能充分吸引訪問者的注意力，讓訪問者產(chǎn)生視覺上的愉悅感，就必須要把網(wǎng)頁設計和網(wǎng)頁制作結合起來。要想制作出理想的網(wǎng)頁，除了要有一定的網(wǎng)頁制作基礎外，還要正確選擇開發(fā)工具。在本文中，簡單介紹了網(wǎng)頁制作的相關技術、網(wǎng)頁制作的一般方法過程及應該注意的問題。初學網(wǎng)頁制作，要注意網(wǎng)頁布局、網(wǎng)頁色彩搭配及線條、文字、目錄等細節(jié)的處理，并不斷修改、完善。

關鍵詞：網(wǎng)頁制作；一般方法過程；網(wǎng)頁布局；色彩搭配。

一、網(wǎng)頁制作的相關技術

（一）常用制作工具：

1.Dreamweaver：Dreamweaver是美國Macromedia公司開發(fā)的一款集網(wǎng)頁制作和管理網(wǎng)站于一身的可視化網(wǎng)頁編輯器，它是第一套針對專業(yè)網(wǎng)頁設計師特別發(fā)展的視覺化的網(wǎng)頁開發(fā)工具，是最受專業(yè)設計者歡迎的網(wǎng)頁制作工具之一，利用它可以輕而易舉地制作出跨越平臺限制和跨越瀏覽器限制的充滿動感的網(wǎng)頁。其中重點介紹CS5的新功能：

①CSS檢查新增功能，以可視方式顯示詳細的CSS 框模型，輕松切換 CSS 屬性并且無需讀取代碼或使用其他實用程序。

②與 Adobe BrowserLab 集成新增功能，使用多個查看、診斷和比較工具預覽動態(tài)，網(wǎng)頁和本地內(nèi)容。

③PHP 自定義類代碼提示新增功能，為自定義 PHP 函數(shù)顯示適當?shù)恼Z法，幫助您更準確地編寫代碼。

④CSS Starter頁增強功能，借助更新和簡化的 CSS Starter 布局，快速啟動基于標準的網(wǎng)站設計。

2.Frontpage是微軟公司出品的一款網(wǎng)頁制作入門級軟件，可以在可視化的方式下簡單直觀的實現(xiàn)HTML幾乎所有的功能，例如：新建和修改一個網(wǎng)頁、新建一個Web站點，在網(wǎng)頁中插入圖片、多媒體等眾多功能。FrontPage使用方便簡單，會用Word就能做網(wǎng)頁，該軟件結合了設計、程式碼、預覽三種模式。也可一起顯示程式碼和設計檢視與Microsoft Office各軟件無縫連接，良好的表格控制能力，繼承了Microsoft Office產(chǎn)品系列的良好的易用性。但 Frontpage 也有其不足之處：

①瀏覽器兼容性不好，做出來的網(wǎng)頁，用 Netscape 往往不能正常顯示； ②生成的垃圾代碼多，也會自動修改代碼，導致在某些情況下極為不便； ③對DHTML的支持不好。微軟在2006年年底前停止提供FrontPage軟件。3.Flash：Flash是由Macromedia公司開發(fā)的一款優(yōu)秀的網(wǎng)頁動畫開發(fā)軟件，從簡單的動畫到交互式Web應用程序，它使用戶可以創(chuàng)建任何作品。網(wǎng)頁設計者使用 Flash 創(chuàng)作出既漂亮又可改變尺寸的導航界面以及其它奇特的效果。2012年8月15日，F(xiàn)lash退出Android平臺，正式告別移動端。

（二）材料的選取

1.先大后小

先把大的結構設計好，然后再逐步完善小的結構設計。2.先簡單后復雜

先設計出簡單的內(nèi)容，然后再設計復雜的內(nèi)容，以便出現(xiàn)問題時好修改。3.多靈活運用模板，提高制作效率

二、網(wǎng)頁制作的一般方法過程

（一）網(wǎng)站的結構

1.網(wǎng)頁頁面的創(chuàng)建

①在Dreamveaver“文件－新建－常規(guī)－基本頁－HTML”，這樣就建好了一個頁面，英文版的默認的文件名為untitled.htm，htm表示這個網(wǎng)頁文件是一個靜態(tài)的HTML文件。給它改名為index.htm。

注：網(wǎng)站第一頁的名字通常是index.htm或index.html。其它頁面的名字可以自己取。這也就是主頁，上傳后打開網(wǎng)頁默認連接到此頁。

②在標題空格里輸入網(wǎng)頁名稱，點擊修改－頁面屬性，打開“頁面屬性”窗口。在這里可以設置網(wǎng)站的標題、背景顏色或背景圖像，超級鏈接的顏色（一般默認即可）。③此時光標位于左上角，可輸入一句話，如“歡迎來到我的主頁”。選取文字，用菜單“窗口/屬性”打開屬性面板，選取文字大小為6，再使文字居中，然后在文字前用幾個回車使其位于頁面中間等。

2.欄目的設置

網(wǎng)站的題材確定后，收集和組織相關的資料內(nèi)容。為了吸引網(wǎng)友們來瀏覽網(wǎng)站，需將吸引人的內(nèi)容放在最突出的位置，讓好東西在版面分布上占絕對優(yōu)勢。

欄目的實質是一個網(wǎng)站的大綱索引，索引應該將網(wǎng)站的主體明確顯示出來。在制定欄目的時候，要仔細考慮，合理安排。一般的網(wǎng)站欄目安排要注意：

①緊扣主題，主題欄目個數(shù)在總欄目中要占絕對優(yōu)勢，這樣主題突出，容易給人留下深刻印象。

②設一個最近更新欄目或網(wǎng)站指南欄目，可以照顧到常來的訪客，并幫助初訪者快速找到他們想要的內(nèi)容，讓主頁更人性化。

③設定類似論壇、留言本可以雙向交流的欄目，可以讓瀏覽者留下他們的信息?；蛘吡粢粋€“Email me”的站點，更具親和力。

（二）網(wǎng)站的風格

網(wǎng)站風格是網(wǎng)站頁面設計上的視覺元素組合在一起的整體形象，展現(xiàn)給人的直觀感受，包括網(wǎng)站的配色、字體、布局、內(nèi)容等因素。

1.協(xié)調運用顏色

不同的色彩影響著人們對網(wǎng)站的第一感覺，一般旅游和園林類型的網(wǎng)站使用綠色系比較多，藍色則被譽為是企業(yè)色確實很多企業(yè)和政府機關都偏愛使用沉穩(wěn)而大方的藍色。

一個網(wǎng)站必須有一種或兩種主題色，既不至于讓客戶迷失方向，也不至于單調、乏味。通常情況下，一個頁面內(nèi)盡量不要使用超過4種色彩，太多的色彩容易讓人感覺沒有方向、沒有側重。當主題色確定好以后，考慮配色時，一定要考慮其他配色與主題色的關系，要體現(xiàn)什么樣的效果。

2.適當選擇線條和形狀

文字、標題、圖片等的組合，會在頁面上形成各種各樣的線條和形狀。這些線條與形狀的組合，構成了主頁的總體藝術效果。必須注意搭配好這些線條和形狀，才能增強頁面的藝術魅力。直線條的藝術效果是流暢、整齊的，直線和矩形在頁面上的重復組合可以呈現(xiàn)井井有條的視覺效果。一般應用于比較莊重嚴肅的主頁題材。曲線的效果是活躍的，具有動感，曲線和弧形在頁面上的重復組合可以呈現(xiàn)輕快、富有活力的視覺效果。一般應用于青春、活潑的主頁題材。把以上兩種線條和形狀結合起來運用，可以大大豐富主頁的表現(xiàn)力，使頁面呈現(xiàn)更加豐富多彩的藝術效果，但處理不好會產(chǎn)生凌亂的效果。

3.均衡的分割版式：

在網(wǎng)頁設計中，頁面因為內(nèi)容元素的需要被分割成很多區(qū)塊，區(qū)塊之間的均衡就是版式設計上需要著重考慮的問題。一幅好的、均衡的網(wǎng)頁版面設計，是布局、重心、對比等多種形式原理創(chuàng)造性全面應用的結果。傳統(tǒng)網(wǎng)頁設計的版式控制都是在不超越大眾顯示器分辨率寬度的前提下，依照內(nèi)容多少縱向延展設計。而如今流行的產(chǎn)品型網(wǎng)站，更傾向于在一屏內(nèi)表達最主要的東西，尤其是首頁，盡量不出現(xiàn)滾動條。

4．顏色搭配

在網(wǎng)頁設計中，如何配色并不固定，只是與人的視覺有關。比如冷色基調，就大都以冷色，如要用暖色就要多加注意，可能會影響視覺，使游覽者眼睛不適。亮色的使用更吸引人的眼球，但極難搭配。比如在過節(jié)時，各大網(wǎng)站為了加強溫馨度就多用紅黃橙來渲染。

（三）版面布局：

版面指的是瀏覽器看到的完整的一個頁面。因為每個人的顯示器分辨率不同，所以同一個頁面的大小可能出現(xiàn)不同尺寸。布局，是以最適合瀏覽的方式將圖片和文字排放在頁面的不同位置。經(jīng)常用到的版面布局形式有: 1.“T”結構布局。即頁面頂部為橫條網(wǎng)站標志+廣告條，下方左面為主菜單，右面顯示內(nèi)容的布局。這是網(wǎng)頁設計中用的最廣泛的一種布局方式。這種布局的優(yōu)點是頁面結構清晰，主次分明，缺點是規(guī)矩呆板，如果細節(jié)色彩上不注意，很容易讓人感覺乏味。

2.“口”型布局。即頁面一般上下各有一個廣告條，左面是主菜單，右面放友情連接等，中間是主要內(nèi)容。這種布局的優(yōu)點是充分利用版面，信息量大，缺點是頁面擁擠，不夠靈活。

3.對稱對比布局。即采取左右或者上下對稱的布局，一半深色，一半淺色，一般用于設計型站點。優(yōu)點是視覺沖擊力強，缺點是將兩部分有機的結合比較困難。

（四）文字圖片的運用：

1.字體與字號

在同一頁面中，字體種類少，版面雅致，有穩(wěn)定感；字體種類多，則版面活躍，豐富多彩。關鍵是如何根據(jù)頁面內(nèi)容來掌握這個比例關系。從加強平臺無關性的角度來考慮，正文內(nèi)容最好采用缺省字體。因為瀏覽器是用本地機器上的字庫顯示頁面內(nèi)容的?？紤]到大多數(shù)瀏覽者的機器里只裝有三種字體類型及一些相應的特定字體，而你指定的字體在瀏覽者的機器里并不一定能夠找到。

大小可以用不同的方式來計算，例如磅或像素，建議采用磅為單位。最適合于網(wǎng)頁正文顯示的字體大小為12磅左右。較大的字體可用于標題或其他需要強調的地方，小一些的字體可以用于頁腳和輔助信息。小字號容易產(chǎn)生整體感和精致感，但可讀性較差。

2.行距

行距的變化也會對文本的可讀性產(chǎn)生很大影響。一般情況下，接近字體尺寸的行距設置比較適合正文。適當?shù)男芯鄷纬梢粭l明顯的水平空白帶，以引導瀏覽者的目光，而行距過寬會使一行文字失去較好的延續(xù)性。除了對于可讀性的影響，行距本身也是具有很強表現(xiàn)力的設計語言，為了加強版式的裝飾效果，可以有意識地加寬或縮窄行距，加寬行距可以體現(xiàn)輕松、舒展的情緒，應用于娛樂性、抒情性的內(nèi)容。

3.文字的整體編排

頁面里的正文部分是由許多單個文字經(jīng)過編排組成的群體，要充分發(fā)揮這個群體形狀在版面整體布局中的作用。在網(wǎng)頁設計中，字體的處理與顏色、版式、圖形等其他設計元素的處理一樣非常關鍵。文字編排有四種基本形式：

①兩端均齊：文字從左端到右端的長度均齊，顯得端正、嚴謹、美觀。②居中排列：在字距相等的情況下，以頁面中心為軸線排列，產(chǎn)生對稱的形式美感。

③左對齊或右對齊：使行首或行尾自然形成一條清晰的垂直線，易與圖形配合。這種編排方式有松有緊，有虛有實，能產(chǎn)生一種節(jié)奏與韻律的形式美感。④繞圖排列：將文字繞圖形邊緣排列，令人感到融洽、自然。

三、網(wǎng)頁制作過程中應該注意的問題

（一）文件管理

為了管理方便，我們把圖片放在“images”文件夾內(nèi)。如果圖片少，也可以放在站點根目錄下。注意文件名要用英文或用拼音文字命名而且使用小寫，不能用中文，否則會出現(xiàn)一些麻煩。

（二）欄目建立

在每個主目錄下都建立獨立的Images目錄。一般來說，一個站點根目錄下都有一個默認的Images目錄。將所有圖片都存放在這個目錄里不方便，所以為每個主欄目建立一個獨立的Images目錄是為了方便維修和管理。

（三）目錄

①目錄的層次不要太深，不要超過3層； ②不要使用中文目錄；

③不要使用過長的目錄，不便于記憶； ④盡量使用意義明確的目錄，便于記憶和管理。

（四）字體的輸入

如要選取字體，選擇字體中的最后一項：編輯字體列表。然后在對話框中選+號，接著在“可用字體”欄中選擇需要加入到字體列表中的一種字體，點擊中間的按鈕就可以加入了。注意：

①在網(wǎng)頁上最常用的是宋體字。不要將特殊的字體加到列表中使用，因為別人電腦上未裝就看不到；

②在網(wǎng)頁上打入空格的辦法是：把輸入法調為全角； ③在網(wǎng)頁上換行的辦法是：shift+Enter。只按Enter則為換段。

第五篇：教學論文-網(wǎng)頁制作技術

《網(wǎng)頁制作技術》教學方法初探

網(wǎng)頁制作技術課程在目前的職業(yè)學校中幾乎成為必開課程，但由于網(wǎng)絡技術更新日新月異，教學方法很難于最新技術達到一致，因此在連續(xù)4年的教學當中，我考慮是否應當在教學方法上進行更新。課程的傳統(tǒng)教學方式是先由教師在多媒體機房授課，然后安排學生在上機驗證教師所講內(nèi)容。這種方式忽略了學生的積極性、主動性，學生學到的知識比較零碎，很難開發(fā)實際項目。而且我們軟件課程的特點就是易學也易忘，因此為了將零散的知識點，一點一滴的灌輸?shù)綄W生的知識庫中是每個計算機專業(yè)教師必須思考的問題。

隨著課程內(nèi)容的深入，很多學生逐漸失去了學習興趣，喪失了主動參與的意識，以致課程結束時，幾乎沒有學生能夠設計出具有一定水平的網(wǎng)站。為打破傳統(tǒng)的教學模式，突出學生的主體地位，讓學生成為教學的中心。我分析了該課程的特點，并結合任課教師為企業(yè)開發(fā)網(wǎng)站的經(jīng)驗，讓教師將所承擔的網(wǎng)站建設項目引入課堂教學，引導學生共同開發(fā)項目。

此類課程要想取得好的效果，項目教學法便是首選。2003年7月德國聯(lián)邦職教所制定以行動為導向的項目教學法，它把整個學習過程分解為一個個具體的工程或事件，設計出一個個項目教學方案。按行動回路設計教學思路，不僅傳授給學生理論知識和操作技能，更重要的是培養(yǎng)他們的職業(yè)能力，這里的能力已不僅是知識或是專業(yè)能力，而是涵蓋了如何解決問題的能力：方法能力、接納新知識的學習能力以及與人協(xié)作和進行項目動作的社會能力等幾個方面。

項目教學法的核心追求是：不再把教師掌握的現(xiàn)成知識技能傳授給學生，而是在教師的指導下，學生去尋找得到這個結果的途徑，最終得到這個結果，并進行展示和自我評價。學習的重點在學習過程而非學習結果，他們在這個過程中鍛煉各種能力。教師已經(jīng)不是教學中的主導地位，成為學生學習過程中的引導者、指導者和監(jiān)督者，學生具有較高的積極性。

網(wǎng)頁制作是職業(yè)學校計算機類專業(yè)所特有的實訓項目之一，即通過30到60學時，學生必須完成一個完整網(wǎng)站的制作。主要嘗試從以下幾個步驟實施項目教學：分組

在先學生自愿組合、后教師調配安排下，對全班同學進行分組，3—4人一組，采取組長負責制，由組長統(tǒng)籌安排其組員的分工。2 規(guī)劃網(wǎng)站

在制作網(wǎng)站前，給學生介紹不同類型的專題網(wǎng)站，讓學生上網(wǎng)找出自己感興趣的網(wǎng)站，要求學生在網(wǎng)站瀏覽的同時，總結此網(wǎng)站的風格特點，并把自己的心得介紹給老師與同學，這樣不但能提高學生的學習興趣，而且為引入項目教學法做好了鋪墊。課前讓學生進行網(wǎng)站需求的調查，在調查過程中尋找具有一定的應用價值的網(wǎng)站項目。課堂上讓學生結合各自調查情況，提出一個網(wǎng)站設計的項目，參考《網(wǎng)頁設計與制作》教材制定好一份初步計劃書，確定網(wǎng)站主題。3 細化任務。分工合作

本著發(fā)揮學生個人特長，讓每一位學生溶入網(wǎng)站設計的全過程，結合《網(wǎng)頁設計與制作》課程的教學內(nèi)容，在學生制定好具有一定應用價值網(wǎng)站設計計劃書的基礎上，通過課堂討論，列出將要實施的幾個網(wǎng)站方案，成立項目小組，設立項目經(jīng)理來負責每個小組完成一個網(wǎng)站。實施項目

學生確定各自在小組內(nèi)的分工及小組成員問合作形式后，按照已確定的方案進入具體的網(wǎng)站制作。在這個過程中，學生必然會碰到許多新問題，此時教師就可以把問題集中起來，要求各小組在回答問題時充分發(fā)表意見，同學問可相互提示幫助，教師根據(jù)學生的掌握情況進行及時補充，對學生在應用上有困難的地方，教師提供給他們解決問題的方法。讓班上絕大多數(shù)學生能完成基本的教學內(nèi)容。5 小組成果展示

網(wǎng)站制作結束前，經(jīng)過教師核準驗收后，可以宣布整個項目工作結束。作者要向教師及同學展示自己的網(wǎng)站，并進行作品答辯。以團隊形式完成作品的，分模塊展示，體現(xiàn)合作的同時還應有細致分工，這會更加促進學生的團隊意識。評估總結

學生在完成網(wǎng)站設計后，教師要求他們進行網(wǎng)站的自評、互評。這個過程可以與成果展示同時進行。學生對各自網(wǎng)站自評，不僅有利于學生的自主學習，且可以改進課程或教學的設計；學生互評，讓學生對學習成果進行共享，從學生的角度發(fā)現(xiàn)問題以及提出改進意見。最后教師對各項目組的網(wǎng)站進行綜合評價，這一工作是最主要的。教

師在評價學生網(wǎng)站時，不能只進行優(yōu)劣評價，而應該指出問題所在，給出具體改進及修改建議等，讓學生去完善網(wǎng)站。小結

網(wǎng)頁制作課程作為職業(yè)學校計算機基礎教育的重要組成部分，如何采取合適的教學方法，提高教學質量，是每一個計算機專業(yè)教師很重視的問題。除了進行教學方法改革外，只有各部門、教師和學生協(xié)作和支持，才可能真正提高網(wǎng)頁制作課程的教學質量。項目教學對提高職業(yè)學校學生的專業(yè)技能有了很大的幫助，這也同時給老師提出了更高的要求。身為一位職業(yè)學校的專業(yè)教師，一個計算機專業(yè)的授業(yè)者，必須身體力行，加強學習，提高自身素質，用最先進的教育理論引領自己做好職業(yè)教育。