靜態(tài)頁面轉(zhuǎn)化為動態(tài)頁面實現(xiàn)過程范文

本站小編為你精心準(zhǔn)備了靜態(tài)頁面轉(zhuǎn)化為動態(tài)頁面實現(xiàn)過程參考范文，愿這些范文能點燃您思維的火花，激發(fā)您的寫作靈感。歡迎深入閱讀并收藏。

摘要：在靜態(tài)頁面和動態(tài)頁面得轉(zhuǎn)換過程中動態(tài)網(wǎng)站從功能上簡單可以分成前臺靜態(tài)模塊和后臺靜態(tài)模塊。前面制作的效果圖與編輯以及動畫制作簡單可以理解為靜態(tài)模塊，而后臺模塊主要采用類的解決方案有：下載免費的網(wǎng)站的管理平臺，然后與前臺整合，稱之為代碼融合或者所有功能完全自主開發(fā)，根據(jù)客戶的要求定制，逐一實現(xiàn)功能

關(guān)鍵詞：效果圖靜態(tài)頁面代碼融合動態(tài)頁面得生成

1前期策劃的過程

我們在進行的網(wǎng)站的制作之前，首先要認真瀏覽同類型的網(wǎng)站，吸取其精華好的部分，例如：其導(dǎo)航欄的圖片的選取，網(wǎng)站的整體布局等等，在瀏覽的過程中激發(fā)自己的創(chuàng)作靈感，雖然每個Web站點在內(nèi)容、規(guī)模、功能等方面都各有不同，但是有一個基本設(shè)計流程可以遵循。從國內(nèi)的大的門戶站點如搜狐、新浪到一個微不足道的個人主頁，都要以基本相同的步驟來完成。首先是網(wǎng)站前期策劃與內(nèi)容組織（需求分析、風(fēng)格定位、內(nèi)容組織），然后效果圖設(shè)計，網(wǎng)頁編輯，動畫設(shè)計，接下來是技術(shù)實現(xiàn)，最后是站點的與維護。這幾個階段完整地結(jié)合在一起，直到完成整個站點的工作。例如網(wǎng)站的制作流程。

在此制作過程中最重要在前三個步驟，在第一個步驟上要進行網(wǎng)站的整體設(shè)計，用戶分析是第一步。眾所周知，進行任務(wù)和用戶分析，以及相關(guān)調(diào)研的必要性和重要性。用戶是計算機資源、軟件界面信息的使用者，由于目前計算機系統(tǒng)以及相關(guān)的信息技術(shù)應(yīng)用范圍很廣，其用戶范圍也遍及各個領(lǐng)域。設(shè)計者必須了解各類用戶的習(xí)慣、技能、知識和經(jīng)驗，以便預(yù)測不同類別的用戶對網(wǎng)站界面有什么不同的需求與反映，為最終的設(shè)計提供依據(jù)和參考，使設(shè)計出的網(wǎng)站更適合于各類用戶的使用。由于用戶具有知識、視聽能力、智能、記憶能力、可學(xué)習(xí)性、動機、受訓(xùn)練程度不同，以及又有些用戶有易遺忘、易出錯等特性，使得對用戶的分類、分析和設(shè)計變得更加復(fù)雜化。另外，為了設(shè)計友好而又人性化的界面，也必須考慮各類不同類型用戶的人文因素。許多人不愿花費時間來完成這個階段，因為認為他們沒有必要，但是必須把初始計劃加入工作過程中，否則到最后當(dāng)進行到已經(jīng)無法再做計劃的時候，就要遇到巨大的麻煩。在一開始就進行合適的計劃和組織是建立一個有效的站點最重要的工作步驟。

2風(fēng)格定位

首先要了解網(wǎng)站的類型，確定一個大致的風(fēng)格走向，不同網(wǎng)站的風(fēng)格肯定是不盡相同的，營造出各種類型的氛圍，需要對各種行業(yè)有敏感的洞察力，如果設(shè)計者還不是很熟悉這個行業(yè)，不知什么樣的風(fēng)格是適合它的，大致該用什么樣的色調(diào)和筆觸，那么花一定時間先做一些調(diào)查和學(xué)習(xí)是必要的。這樣可以保證在設(shè)計者的腦海里有一個較為確定的概念，并不一定會馬上或明顯地顯露到工作中去，但是必然會對設(shè)計者的工作產(chǎn)生專業(yè)的影響。就業(yè)信息服務(wù)網(wǎng)網(wǎng)站是高校教育資訊類網(wǎng)站，他的主要用戶為青年學(xué)生，同時也是信息行業(yè)的網(wǎng)站，所以主色采用藍色為主色調(diào)，因為藍色具有清涼、自由的感覺，使人們?nèi)菀茁?lián)想到天空、海洋、科技，通過本站傳達個使用的用戶以輕松、愉快、舒適的感覺。

3規(guī)劃草圖

草圖是原創(chuàng)的第一構(gòu)思，第一閃光；草圖是表達對設(shè)計項目的理念、立意、構(gòu)思。不管是寥寥數(shù)筆也好，重復(fù)勾勒也好，涂涂改改也好，但它足建筑師的思想、情緒的流露，是工作、責(zé)任的反映，是激情、感情的投入，也是苦思冥想的結(jié)晶。成功也罷，不成功也罷，它總是留住了一項項工程設(shè)計的痕跡。對于一般的網(wǎng)站來說，一個項目往往從一個簡單的界面開始，但要把所有的東西組織到一起并不是件容易的事情。首先，要先畫一個站點的草圖，勾畫出所有客戶想要看到的東西。然后，將它詳細的描述交給美工人員，讓他們知道在每一屏上都要顯示那些內(nèi)容。如圖1-3所示的是我院就業(yè)網(wǎng)站的草圖，再此草圖上，描繪了此網(wǎng)站所提供的若干的功能，即在此頁面上提供給學(xué)生的若干的信息，使學(xué)生能夠得到他們多需要的信息。對于一般的網(wǎng)站來說，一個項目往往從一個簡單的界面開始，但要把所有的東西組織到一起并不是件容易的事情。

4規(guī)劃站點結(jié)構(gòu)

站點結(jié)構(gòu)將決定如何去引導(dǎo)瀏覽者在站點中漫游。要結(jié)構(gòu)清晰、易于導(dǎo)航。網(wǎng)站結(jié)構(gòu)就像人的骨骼，構(gòu)筑起網(wǎng)站的整體框架，雖然表現(xiàn)形式各異，但讓人迷失終歸不好，尤其是內(nèi)容豐富的網(wǎng)站更應(yīng)注意，如何合理地組織自己要的信息內(nèi)容，以便瀏覽者能夠快速、準(zhǔn)確地檢索到要找的內(nèi)容，否則它就很難吸引瀏覽者。而且，這一步驟還將決定將要使用的命名規(guī)則。導(dǎo)航圖和命名規(guī)則都是建立項目的主干。以后所有的工作都要由此展開。網(wǎng)站的目錄是指建立網(wǎng)站時創(chuàng)建的目錄。目錄的結(jié)構(gòu)是一個容易忽略的問題，大多數(shù)設(shè)計者都是未經(jīng)規(guī)劃、隨意創(chuàng)建子目錄。目錄結(jié)構(gòu)的好壞對瀏覽者來說并沒有什么太大的感覺，但是對于站點本身的上傳維護、內(nèi)容未來的擴充和移植有著重要的影響。下面是建立目錄結(jié)構(gòu)的一些建議：

&nbs

p;4.1不要將所有文件都存放在根目錄下有人為了方便，將所有文件都放在根目錄下。這樣造成的不利影響在于：首先，文件管理混亂。常常搞不清哪些文件需要編輯和更新，哪些無用的文件可以刪除，哪些是相關(guān)聯(lián)的文件，最終影響工作效率。其次，上傳速度慢。服務(wù)器一般都會為根目錄建立一個文件索引。當(dāng)所有文件都放在根目錄下，那么即使只上傳更新一個文件，服務(wù)器也需要將所有文件再檢索一遍，建立新的索引文件。很明顯，文件量越大，等待的時間也將越長。

4.2按欄目內(nèi)容建立子目錄子目錄的建立，首先按主菜單欄目建立。例如：本站點可以根據(jù)模塊類別分別建立相應(yīng)的目錄，如Flash、CSS、Javascript等；企業(yè)站點可以按公司簡介、產(chǎn)品介紹、價格、在線定單、反饋聯(lián)系等建立相應(yīng)目錄。其他的次要欄目，類似導(dǎo)航，友情鏈接內(nèi)容較多，需要經(jīng)常更新的可以建立獨立的子目錄。而一些相關(guān)性強、不需要經(jīng)常更新的欄目，例如：關(guān)于本站、聯(lián)系我們、站點導(dǎo)航等可以合并放在一個統(tǒng)一目錄下。所有程序一般都存放在特定目錄中。為了便于維護管理，所有需要下載的內(nèi)容也最好放在一個目錄下。

4.3在每個主目錄下都建立獨立的images目錄默認的一個站點根目錄下都有一個images目錄。這是最方便管理的。而根目錄下的images目錄只是用來放首頁和一些次要欄目的圖片。

4.4目錄的層次不要太深目錄的層次建議不要超過3層。原因很簡單，維護管理方便。

5代碼融合部分

5.1站管理平臺與靜態(tài)頁面的整合下載后的系統(tǒng)是一個壓縮包，不能夠直接使用，所以必須進行解壓，同時部分圖片也需要修改。具體步驟如下：

5.1.1首先創(chuàng)建文件夾，然后將前面做好的靜態(tài)頁面index.html和flash、images、style文件夾拷貝到相關(guān)文件夾中，將下載的訊時網(wǎng)站管理系統(tǒng)“3.5News3.5.rar”也拷貝至所做的項目文件夾中。

5.1.2將“院招生就業(yè)處網(wǎng)站”文件夾中的訊時網(wǎng)站管理系統(tǒng)“News3.5.rar”壓縮包進行解壓縮至“所做文件夾中”，同時刪除“News3.5.rar.”文件。

5.2程序調(diào)試現(xiàn)在開始調(diào)試程序，具體步驟如下：

5.2.1打開IIS，鼠標(biāo)選中剛剛創(chuàng)建的虛擬目錄“zsxx”，所示，然后鼠標(biāo)打開圖1-47中右側(cè)的“admin”文件夾，選中“l(fā)ogin.asp”文件，然后右鍵執(zhí)行“瀏覽”命令

5.2.2再添加的欄目中的“模板管理”有“模板不正確”的說明，所以在此點擊“公告通知”的“操作”欄中的“模板”修改模板，之后會進入模板修改頁面，點擊“請選擇模板”下拉框，選擇“一般簡單模板”即可完成了“公告通知”模塊的模板修改，采用同樣的方法其它等模塊的模板。

5.2.3現(xiàn)在新聞內(nèi)容已經(jīng)能夠添加了，現(xiàn)在大家開始調(diào)用新聞信息，鼠標(biāo)點擊“代碼調(diào)用”，鼠標(biāo)點擊“請選擇欄目”下拉框，選擇“政策規(guī)定模板”選項，然后顯示代碼調(diào)用“政策規(guī)定模板”欄目的文本信息，包字說明，以調(diào)用“公告通知”的方法。

本調(diào)用分為三種方式：

框架：

<iframename=xuasnews73src=/zsnew/newscode.asp?lm2=73&hot=0&tj=0&t=0&week=0&font=9&

line=12&lmame=0&n=30&list=10&more=1&hit=0&open=1&icon=1&new=0&bg=ffffffmarginwidth=1marginheight=1width=270height="184"scrolling="no"border="0"frameborder="0"></iframe>

JS調(diào)用：

<scriptTYPE="text/javascript"language="javascript"src="/zsnew/newscodejs.asp?

lm2=73&list=10&ion=1&tj=0&font=9&hot=0&new=1&line=2&lmame=0&open=1&n=20&more=1&t=0&week=0&zzly=0&hit=0&pls=0"charset=''''gb2312''''></script>

頭條新聞?wù){(diào)用

<scriptTYPE="text/javascript"language="javascript"src="/zsnew/admin/newscode-news.asp

?id=0&font=9&nr=0&nrtop=150&nrcolor=999999&titleface=黑體&titlesize=16&titlen=30&

titlebold=700&titlecolor=FF0000"charset=''''gb2312''''></script>

titlesize頭條調(diào)用新聞有效，標(biāo)題的字型大小，titlesize=16，即16pt。

titlen頭條調(diào)用新聞有效，標(biāo)題顯示字?jǐn)?shù)。

titlebold頭條調(diào)用新聞有效，標(biāo)題是否加粗，titlebold=700加粗，titlebold=100不加粗。

titlecolor頭條調(diào)用新聞有效，標(biāo)題的顏色。

以上三種方式根據(jù)情況不同調(diào)用不同的代碼即可。

參考文獻：

[1]陳光軍，潘明輝.網(wǎng)站建設(shè)與管理[M].北京：北京郵電大學(xué)出版社.2006.

[2]楊明.網(wǎng)頁編程[M].北京：科學(xué)技術(shù)出版社.2005.

[3]文偉俊.網(wǎng)站創(chuàng)意思維與flash完美結(jié)合[M].北京：電子工業(yè)出版社