1、網頁製作與網站設計報告書
網站項目管理規范
一.概念
網站項目管理就是根據特定的規范、在預算范圍內、按時完成的網站開發任務。
二.需求分析
1.項目立項
我們接到客戶的業務咨詢，經過雙方不斷的接洽和了解，並通過基本的可行性討論夠，初步達成製作協議，這時就需要將項目立項。較好的做法是成立一個專門的項目小組，小組成員包括：項目經理，網頁設計，程序員，測試員，編輯/文檔等必須人員。項目實行項目經理制。
2.客戶的需求說明書
第一步是需要客戶提供一個完整的需求說明。很多客戶對自己的需求並不是很清楚，需要您不斷引導和幫助分析。曾經有一次，我問客戶：「您做網站的目的是什麼？」他回答：「沒有目的，只是因為別人都有，我沒有！」。這樣的客戶就需要耐心說明，仔細分析，挖掘出他潛在的，真正的需求。 配合客戶寫一份詳細的，完整的需求說明會花很多時間，但這樣做是值得的，而且一定要讓客戶滿意，簽字認可。把好這一關，可以杜絕很多因為需求不明或理解偏差造成的失誤和項目失敗。糟糕的需求說明不可能有高質量的網站。那麼需求說明書要達到怎樣的標准呢？簡單說，包含下面幾點：
1.正確性：每個功能必須清楚描寫交付的功能；
2.可行性：確保在當前的開發能力和系統環境下可以實現每個需求；
3.必要性：功能是否必須交付，是否可以推遲實現，是否可以在削減開支情況發生時"砍"掉；
4.簡明性：不要使用專業的網路術語；
5.檢測性：如果開發完畢，客戶可以根據需求檢測。
三.系統分析
1.網站總體設計
在拿到客戶的需求說明後，並不是直接開始製作，而是需要對項目進行總體設計，詳細設計，出一份網站建設方案給客戶。總體設計是非常關鍵的一步。它主要確定：
1.網站需要實現哪些功能；
2.網站開發使用什麼軟體，在什麼樣的硬體環境；
3.需要多少人，多少時間；
4.需要遵循的規則和標准有哪些。
同時需要寫一份總體規劃說明書，包括：
1.網站的欄目和版塊；
2.網站的功能和相應的程序；
3.網站的鏈接結構；
4.如果有資料庫，進行資料庫的概念設計；
5.網站的交互性和用戶友好設計。
2.網站建設方案
在總體設計出來後，一般需要給客戶一個網站建設方案。很多網頁製作公司在接洽業務時就被客戶要求提供方案。那時的方案一般比較籠統，而且在客戶需求不是十分明確的情況下提交方案，往往和實際製作後的結果會有很大差異。所以應該盡量取得客戶的理解，在明確需求並總體設計後提交方案，這樣對雙方都有益處。網站建設方案的包括以下幾個部分：
1.客戶情況分析；
2.網站需要實現的目的和目標；
3.網站形象說明；
4.網站的欄目版塊和結構；
5.網站內容的安排，相互鏈接關系；
6.使用軟體，硬體和技術分析說明；
7.開發時間進度表；
8.宣傳推廣方案；
9.維護方案；
10.製作費用；
11.本公司簡介：成功作品，技術，人才說明等。
當您的方案通過客戶的認可，您可以開始動手製作網站了。但還不是真正意義上的製作，你需要進行詳細設計：
3.網站詳細設計
總體設計階段以比較抽象概括的方式提出了解決問題的辦法。詳細設計階段的任務就是把解法具體化。詳細設計主要是針對程序開發部分來說的。但這個階段的不是真正編寫程序，而是設計出程序的詳細規格說明。這種規格說明的作用很類似於其他工程領域中工程師經常使用的工程藍圖，它們應該 包含必要的細節，例如：程序界面，表單，需要的數據等。程序員可以根據它們寫出實際的程序代碼。
四. 項目實施
1.整體形象設計
在程序員進行詳細設計的同時，網頁設計師開始設計網站的整體形象和首頁。
整體形象設計包括標准字，Logo，標准色彩，廣告語等。 首頁設計包括版面，色彩，圖像，動態效果，圖標等風格設計，也包括banner，菜單，標題，版權等模塊設計。首頁一般設計1-3個不同風格，完成後，供客戶選擇。
記住：在客戶確定首頁風格之後，請客戶簽字認可。以後不得再對版面風格有大的變動，否則視為第二次設計。
開發製作
2.開發製作
到這里，程序員和網頁設計師同時進入全力開發階段，需要提醒的是，測試人員需要隨時測試網頁與程序，發現Bug立刻記錄並反饋修改。不要等到完全製作完畢再測試，這樣會浪費大量的時間和精力。項目經理需要經常了解項目進度，協調和溝通程序員與網頁設計師的工作。
調試完善
3.調試完成
在網站初步完成後，上傳到伺服器，對網站進行全范圍的測試。包括速度，兼容性，交互性，鏈接正確性，程序健壯性，超流量測試等，發現問題及時解決並記錄下來。
為什麼要記錄文檔呢？其實本軟體工程本身就是一個文檔，是一個不斷充實和完善的標准。通過不斷的發現問題，解決問題，修改，補充文檔，使這個標准越來越規范，越來越工業化。進而使得網站開發趨向規范，趨向合理。
4.宣傳推廣
宣傳推廣的基本方法有：
1.網頁里設置適當的META標簽；
2.各搜索引擎登錄；
3.准備新聞稿件在各新聞公告板發表；
4.合理使用Email郵件列表；
5.廣告條交換；
6.付費廣告。
至此，網站項目建設完畢，將有關網址，使用操作說明文檔等提交客戶驗收。如果需要維護，另行簽定維護項目。
五.維護
網站成功推出後，長期的維護工作才剛剛開始，需要做到的是:
1.及時響應客戶反饋；例如可以採取Email自動回復功能，然後在1-3個工作日里解決問題，再次回復；
2.網站流量統計分析和相應對策；
3.盡量推廣和使用您的網址；
4.網站內容的及時更新和維護。
六.遵循的規范
1.網站建設目錄規范
2.網站文件命名規范
3.網站建設尺寸規范
4.網站首頁head區代碼規范
5.網站連接結構規范
網站開發規范
任何一個項目或者系統開發之前都需要定製一個開發約定和規則，這樣有利於項目的整體風格統一、代碼維護和擴展。由於Web項目開發的分散性、獨立性、整合的交互性等，所以定製一套完整的約定和規則顯得尤為重要。定製一系列約定和規則，包括組件團隊、文件夾命名規則、文件名命名規則、程序代碼編程風格、資料庫設計約定。這些規則和約定需要與開發人員、設計人員和維護人員共同討論定製，將來開發都將嚴格按規則或約定開發。每個團隊開發都應有自己的一套規范，一個優良可行的規范可以使我們工作得心應手事半功倍，這些規范都不是唯一的標准不存在對與錯，也許有些地方與你當前使用的習慣相駁，很多地方都有爭議。。
非常明顯在Web項目開發中有前後台開發之分，前台開發主要是指非程序編程部分，主要職責是網站AI設計、界面設計、動畫設計等。而後台開發主要是編程和網站運行平台搭建，其主要職責是設計網站資料庫和網站功能模板的實現。下面的這些規范主要是從這2個方面來定製的，這些規范是工作中總結的一點經驗，本文檔比較適合中小型網站或者Web項目的開發規范。
一．組建開發團隊
在接手項目後的第一件事是組建團隊。根據項目的大小團隊可以有幾十人，也有可以是只有幾個人的小團隊，在團隊劃分中應該含有6個角色，這6個角色是必須的，分別是項目經理，策劃，美工，程序員，代碼整合員，測試員。也許你的團隊還沒有6個人，沒有關系一個人可以有多個角色，比如項目經理還可以有策劃這個角色，如程序員還可以含有代碼整合和測試這2個角色，如果你的項目夠大人數夠多那就分為6個組，每個組分工再來細分。下面簡單介紹一下這6個角色的具體職責。
項目經理，項目總體設計，開發進度的定製和監控，定製相應的開發規范，負責各個環節的評審工作，協調各個成員(小組)之間開發。策劃，提供詳細的策劃方案和需求分析。還包括後期網站推廣方面的策劃。美工，根據策劃和需求設計網站AI，界面，Logo等。程序員，根據項目總體設計來設計資料庫和功能模塊的實現。代碼整合員，負責將程序員的代碼和界面融合到一起，代碼整合員可以製作網站的相關頁面，測試員，負責測試程序。
二．開發工具
Web開發工具主要分為3部分，第一部分是網站前台開發工具，第二部分是網站後台開發環境，第三部分是項目管理和輔助軟體。下面分別簡單介紹這三部分需要使用的軟體。
網站前台開發主要是指Web界面設計。包括網站整體框架建立、常用圖片、Flash動畫設計等等，主要使用的相關軟體是：Adobe Illustrator 、Adodb Photoshop、Dreamweaver MX、Flash MX等。
網站後台開發主要指網站動態程序開發、資料庫建模，主要使用的相關軟體是： PowerDesigner（資料庫建模），PowerDesigner在資料庫設計方面應用非常強大，用它可以快速創建資料庫概念和物理模型，我最喜歡的還是它生成資料庫Report的功能太方便了，設計資料庫強烈推薦用它。Rational Rose（程序建模），如果你的項目功能模塊不是特別復雜那就剩了它吧，這樣會節省一些時間和開發的復雜度，不過我個人認為不管是大項目還是小項目都應該畫畫Rose圖。
網站項目管理主要指對開發進度和代碼版本的控制。開發進度用Microsoft Project來制定，代碼版本控制採用Visual SourceSafe，當然還有其他的選擇比如CVS和Rational ClearCase。網站測試採用VS.net的附帶工具Microsoft Application Center Test，它可以進行並行、負載測試等。程序文檔編寫採用Word，用WPS也可以。
三.網站開發流程
在項目開始實施之前應該有一個工作步驟也就是工作流程，在項目開發中最需要時間的是總體設計和系統測試，而程序編寫代碼所佔的時間並不多，但有的團隊就急於開發寫代碼，先把程序寫出來再說，沒有注重評審和測試這2個環節，結果造成返工，我在一家比較大的公司中都遇到多次這種情況。所以項目來了不要急於開工寫代碼，應該一步一步慢慢來，只有走的慢才能走得穩走得遠。圖1的開發流程比較好地體現開發的整個環節。
圖 1
從圖1可以看到2條主線，這2條主線分別是前台開發和後台開發。前後台開發在項目開發早期互相沒有交叉，當然不是絕對沒有，Web策劃和需求分析都是互相有關系的，一個是網站表現形式和風格的策劃另一個是網站功能的策劃，它們是衣服和軀乾的關系。到了開發後期就需要把界面和功能模塊結合起來形成一個統一，也就即將發布的網站。
四．資料庫開發規范
數據文件命名採用系統名+_+文件類型，比如系統名為kupage,則資料庫文件命名為kupage_database.mdf，有的資料庫文件有多個，比如SQL Server就有2個，一個是資料庫文件，另一個是日誌文件，那麼他們的文件命名分別為kupage_database.mdf，kupage_log.log。文件名全部採用小寫。
資料庫表命名規范，表名長度不能超過30個字元，表名中含有單詞全部採用單數形式，單詞首寫字母要大寫，多個單詞間不用任何連接符號。若庫中有多個系統，表名採用系統名稱+單詞或多個單詞，系統名是開發系統的縮寫，系統名稱全部採用小寫英文字元,如bbsTitle,bbsForumType。若庫中只含有一個系統，那麼表名僅用一個單詞或多個單詞。單詞選擇能夠概括表內容的一個或多個英文單詞，如UserInfo,UserType。關連表命名規則為Re_表A_表B,Re是Relative的縮寫，如：Re_User_ArticleType, Re_User_FormType。
資料庫欄位命名規范，資料庫欄位名全部採用小寫英文單詞，單詞之間用」_」隔開，命名規則是表別名+單詞，如：user_name,user_pwd。表別名規則，如果表名是一個單詞，別名就取單詞的前4 個字母；如果表名是兩個單詞，就各取兩個單詞的前兩個字母組成4 個字母長的別名；如果表的名字由3 個單片語成，你不妨從頭兩個單詞中各取一個然後從最後一個單詞中再取出兩個字母，結果還是組成4 字母長的別名。
視圖名採用規則View_表A_表B_表C,View表示視圖。這個視圖由幾個表產生就用」_」連接幾個表的名，如果表過多可以將表名適當簡化，但一定要列出所有表名。
存儲過程命名規則P_表名_存取過程名(縮寫)，比如P_User_Del，P_ArticleType_AddData。
SQL語句編寫規則，關鍵字必須大寫，其他書寫按上述命名規則，比如：
SELECT user_id, user_name FROM User WHERE user_id = 『tom』
五．文件夾文件名命名規范
文件夾命名一般採用英文，長度一般不超過20個字元，命名採用小寫字母。除特殊情況才使用中文拼音，一些常見的文件夾命名如：images(存放圖形文件)，flash（存放Flash文件），style(存放CSS文件)，scripts（存放Javascript腳本），inc(存放include文件)，link（存放友情鏈接）,media(存放多媒體文件)等。
文件名稱統一用小寫的英文字母、數字和下劃線的組合。命名原則的指導思想一是使得你自己和工作組的每一個成員能夠方便的理解每一個文件的意義，二是當我們在文件夾中使用「按名稱排例」的命令時，同一種大類的文件能夠排列在一起，以便我們查找、修改、替換、計算負載量等等操作 。
1、圖片的命名原則名稱分為頭尾兩部分，用下劃線隔開，頭部分表示此圖片的大類性質例如廣告、標志、菜單、按鈕等等。
放置在頁面頂部的廣告、裝飾圖案等長方形的圖片取名： banner
標志性的圖片取名為： logo
在頁面上位置不固定並且帶有鏈接的小圖片我們取名為 button
在頁面上某一個位置連續出現，性質相同的鏈接欄目的圖片我們取名： menu
裝飾用的照片我們取名： pic
不帶鏈接表示標題的圖片我們取名： title
下面是幾個範例： banner_sohu.gif 、banner_sina.gif、 menu_aboutus.gif 、menu_job.gif、 title_news.gif、 logo_police.gif、 logo_national.gif 、pic_people.jpg 。
2、動態語言文件命名規則性質_描述，描述可以有多個單詞，用」_」隔開，性質一般是該頁面得概要。
範例：register_form.asp，register_post.asp,topic_lock.asp
六．程序代碼編程規范
一個良好的程序編碼風格有利於系統的維護，代碼也易於閱讀查錯。在此只討論ASP的編程風格和約定。在ASP中所有變數是弱變數，無需定義就可以直接使用，而且代碼不區分大小寫。但其他語言一般這些都要定義的，為了養成良好的編程習慣，編寫代碼務必按照一下規則。
1、每個變數名必須定義，在ASP文件的最開始添加語句，強制定製每個變數。
2、出於易讀和一致性的目的，在代碼中使用以下變數命名約定：
子類型 前綴 示例
Boolean bln blnFound
Byte byt bytRasterData
Date (Time) dtm dtmStart
Double dbl dblTolerance
Error err errOrderNum
Integer int intQuantity
Long lng lngDistance
Object obj objCurrent
Single sng sngAverage
String str strFirstName
3、程序代碼需要有縮進，縮進採用鍵盤Tab鍵，不採用空格鍵。並且」＝」或者鏈接字元串時需要左右空一格，如下：
4、函數過程編寫的約定。函數或者過程命名採用動作+名詞，每個函數需要給出相應的注釋，函數功能，傳入變數，以及作者和修改相關信息。如下面函數:
<%
'[功能] 返回一個參數的值
'[參數] strParameterName 參數名稱
'[作者] icefire 2002/8/20 am
Function GetParameterValue(strParameterName)
Dim objRS, strSQL, strParameterValue
strSQL = "SELECT ParameterValue FROM damsParameters WHERE ParameterName = '" & strParameterName & "'"
.
.
.
GetParameterValue = strParameterValue
Set objRS = Nothing
End Function
5、ASP內置對象區分大小寫。如下代碼片斷
strUserName = Request.Form(「UserName」)
Set conn = Server.CreateObject("ADODB.Connection")
6、資料庫連接一個庫只能有一個資料庫連接文件，創建資料庫對象得原則是盡可能晚地打開資料庫，盡可能早地關閉資料庫。創建資料庫對象調用統一地創建函數。如下：
Sub OpenConn(ByRef conn)
Dim strDBPath, strDBConnection
strDBPath = Server.MapPath("database/tax.mdb")
strDBConnnection = "Driver={Microsoft Access Driver (*.mdb)}; DBQ=" & strDBPath
Set conn = Server.CreateObject("ADODB.Connection")
conn.Open strDBConnnection
End Sub
7、當一個對象不在使用時要釋放對象資源，比如objFSO,objRS對象等。採用統一函數調用。函數如下：
Sub CloseObj(ByRef obj)
If IsObject(obj) Then
obj.Close
Set obj = nothing
End If
End Sub
8、時間全部以字元串的形式保存到資料庫中，這樣做能夠是日期在不同的資料庫中都能良好地保存，也方便資料庫地遷移。時間用14位字元串保存，日期用8位字元串保存。
七．網站首頁head區代碼規范
head區是指首頁HTML代碼的<head>和</head>之間的內容。 必須加入的標簽
1.公司版權注釋
<!--- The site is designed by Maketown,Inc 06/2004 --->
2.網頁顯示字元集
簡體中文：<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
繁體中文：<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=BIG5">
英 語：<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
3.網頁製作者信息
<META name="author" content="[email protected]">
4.網站簡介
<META NAME="DESCRIPTION" CONTENT="本站是一個醫療站點…">
5.搜索關鍵字
<META NAME="keywords" CONTENT="xxxx,xxxx,xxx,xxxxx,xxxx,">
6.網頁的css規范
<LINK href="style/style.css" rel="stylesheet" type="text/css">
(參見目錄及命名規范)
7.網頁標題
<title>xxxxxxxxxxxxxxxxxx</title>
8.可以選擇加入的標簽
1.設定網頁的到期時間。一旦網頁過期，必須到伺服器上重新調閱。
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
2.禁止瀏覽器從本地機的緩存中調閱頁面內容。
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
3.用來防止別人在框架里調用你的頁面。
<META HTTP-EQUIV="Window-target" CONTENT="_top">
4.自動跳轉。
<META HTTP-EQUIV="Refresh" CONTENT="5;URL=http://www.yahoo.com"> 5指時間停留5秒。
5.網頁搜索機器人向導.用來告訴搜索機器人哪些頁面需要索引，哪些頁面不需要索引。
<META NAME="robots" CONTENT="none">
CONTENT的參數有all,none,index,noindex,follow,nofollow。默認是all。
6.收藏夾圖標
<link rel = "Shortcut Icon" href="favicon.ico">
所有的javascript的調用盡量採取外部調用.
<SCRIPT LANGUAGE="javascript" SRC="script/xxxxx.js"></SCRIPT>
附<body>標簽：
<body>標簽不屬於head區，這里強調一下，為了保證瀏覽器的兼容性，必須設置頁面背景<body bgcolor="#FFFFFF">
八．網站建設尺寸規范
1. 頁面標准按800*600解析度製作，實際尺寸為778*434px
2. 頁面長度原則上不超過3屏，寬度不超過1屏
3. 每個標准頁面為A4幅面大小，即8.5X11英寸
4. 全尺寸banner為468*60px，半尺寸banner為234*60px，小banner為88*31px
5. 另外120*90，120*60也是小圖標的標准尺寸
6. 每個非首頁靜態頁面含圖片位元組不超過60K，全尺寸banner不超過14K
2、求大俠幫我寫實驗報告，網頁網站設計的題目。。。做好了 追加分。。。
Q我吧
3、網站設計實訓總結
首先我要做的就是要選擇好題目和網站的風格，之後我就分步驟准備在製作網站前所要做好的准備工作。我瀏覽了中國美食網的一些特點，借監這些網站的優秀之處，不好的地方在自己的網站上加以改良，從而使自己的網站更加美觀。
回顧這次課程設計，至今我仍感慨頗多。的卻。從選題到開始製作，從理論到實踐，在實訓機房日子裡，可以說得是苦多於甜，但是可以學到很多很多的的東西，同時不僅可以鞏固了以前所學過的知識，而且學到了很多在書本上所沒有學到過的知識。
在選擇好題目和網站的風格之後，我就開始了實訓項目的進程，按照實訓方案的規定，先是將網站的總體策劃以書面的形式展現出來，通過老師審核之後，在相應的時間段找相關的素材，搜集與主題相關的文字、圖像等。再是設計網站的內容結構、目錄結構和鏈接結構，設計首頁及其頁面的版式結構。然後創建本地網站，建立網站的目錄結構。製作首頁、二級子頁、內容頁，創建超級鏈接。最後就是測試與瀏覽網頁，如果還有什麼不理想的地方再改進再預覽，如此反復，最後達到最好效果！
在此次網站的設計與製作過程中，難免會遇到過各種各樣的問題，這畢竟是第一次獨自設計網站、製作網站。但值得高興的是：在設計的過程中發現了自己的不足之處，對以前所學過的知識理解得不夠深刻，掌握得不夠牢固，沒有能完全達到自己預期的效果，還好通過老師的細心指導才能達到最終效果……
一周網頁設計與製作的實訓課程結束了，回顧這次課程設計實訓，至今我仍感慨頗多。的確，從選材到開始製作，從理論到實踐，在兩周的實訓日子裡，可以說得是苦多於甜，但是可以學到很多很多的的東西，同時不僅可以鞏固了以前所學過的知識，而且學到了很多在書本上所沒有學到過的知識。更懂得並親身體會到了理論與實際相結合的重要性，只有理論知識是遠遠不夠的，把所學的理論知識與實踐相結合起來，從理論中得出結論，才能真正為掌握技術，從而提高自己的實際動手能力和獨立思考的能力。
4、網頁設計實驗報告
2
5、網頁製作div+css實驗報告
DIV+CSS是網站標准（或稱「WEB標准」）中常用術語之一，通常為了說明與HTML網頁設計語言中的表格（table）定位方式的區別，因為XHTML網站設計標准中，不再使用表格定位技術，而是採用DIV+CSS的方式實現各種定位。SEO是指搜索引擎優化，主要就是通過對網站的結構、標簽、排版,關鍵字等各方面的優化，使搜索引擎更容易抓取網站的內容，並且讓網站的各個網頁在等搜索引擎中獲得較高的評分，從而獲得較好的排名。DIV+CSS網頁布局對SEO有很重要的影響。具體來看到底有什麼好處呢?
DIV+CSS的網頁布局對SEO的好處一、不存在表格的嵌套問題
很多「網站如何推廣」的文章中稱，搜索引擎一般不抓取三層以上的表格嵌套，這一點一直沒有得到搜索引擎相關的官方證實。我的幾項實驗結果沒有完全出來，但根據目前掌握的情況來看，Spider爬行Table布局的頁面，遇到多層表格嵌套時，會跳過嵌套的內容或直接放棄整個頁面。
使用Table布局，為了達到一定的視覺效果，不得不套用多個表格。如果嵌套的表格中是核心內容，蜘蛛(Spider)爬行時跳過了這一段沒有抓取到頁面的核心，這個頁面就成了相似頁面。網站中過多的相似頁面會影響排名及域名信任度。
DIV+CSS的網頁布局對SEO的好處二、精簡的代碼
使用DIVCSS布局，頁面代碼精簡，這一點相信對XHTML有所了解的都知道。觀看更多的HTML教程內容。
代碼精簡所帶來的直接好處有兩點：一是提高蜘蛛(Spider)爬行效率，能在最短的時間內爬完整個頁面，這樣對收錄質量有一定好處;二是由於能高效的爬行，就會受到蜘蛛(Spider)歡迎，這樣對收錄數量有很大好處。
而DIV+CSS布局基本上不會存在這樣的問題，從技術角度來說，XHTML在控制樣式時也不需要過多的嵌套。
這雖然沒有得到確認，但還是建議使用Table布局的朋友們，在設計時盡可能的不要使用多層表格嵌套，SEOer(seo工作者們)們在文章中說明了這一點，相信他們也不是沒有依據。
DIV+CSS的網頁布局對SEO的好處三、對搜索引擎的排名
基於XTHML標準的DIV+CSS布局，一般在設計完成後會盡可能的完善到能通過W3C驗證。截止目前沒有搜索引擎表示排名規則會傾向於符合W3C標準的網站或頁面，但事實證明使用XTHML架構的網站排名狀況一般都不錯。
DIV+CSS的網頁布局對SEO的好處四、提高網頁的訪問速度
DIV+CSS布局較Table布局減少了頁面代碼，載入速度得到很大的提高，這在蜘蛛(Spider)爬行時是非常有利的。過多的頁面代碼可能造成爬行超時，蜘蛛(Spider)就會認為這個頁面無法訪問，影響收錄及權重。
真正的SEOer(seo工作者們)不只是為了追求收錄、排名，快速的響應速度是提高用戶體驗度的基礎，這對整個搜索引擎優化及營銷都是非常有利的。
換一個角度拋開DIV+CSS對SEO的有利影響.單獨來講這種div+css布局也是很有益的,可以說是實下是最流行的網頁布局方式.可是加快我們網站的速度,便於管理與修改.當然div+css布局也有不完善的方面,比如說,他的css樣式表與各種瀏覽器之間的不兼容問題.當然如果你是div+css高手的話相信這個不難吧!
6、高分求網頁製作實驗報告!!!
http://www.4oa.com/bggw/sort02902/sort02954/184825.html
網頁製作實驗報告
實驗一：站點設置
一、實驗目的及要求
本實例是通過「站點定義為」對話框中的「高級」選項卡創建一個新站點。
二、儀器用具
1、生均一台多媒體電腦，組建內部區域網，並且接入國際互聯網。
2、安裝Windows XP操作系統；建立IIS伺服器環境，支持ASP。
3、安裝網頁三劍客（Dreamweaver MX；Flash MX；Fireworks MX）等網頁設計軟體；
三、實驗原理
通過「站點定義為」對話框中的「高級」選項卡創建一個新站點。
四、實驗方法與步驟
1）執行「站點＼管理站點」命令，在彈出的「管理站點」對話框中單擊「新建」按鈕，在彈出的快捷菜單中選擇「站點」命令。
2）在彈出的「站點定義為」對話框中單擊「高級」選項卡。
3）在「站點名稱」文本框中輸入站點名稱，在「默認文件夾」文本框中選擇所創建的站點文件夾。在「默認圖象文件夾」文本框中選擇存放圖象的文件夾，完成後單擊「確定」按鈕，返回「管理站點」對話框。
4）在「管理站點」對話框中單擊「完成」按鈕，站點創建完畢。
五、實驗結果
六、討論與結論
實驗開始之前要先建立一個根文件夾，在實驗的過程中把站點存在自己建的文件夾里，這樣才能使實驗條理化，不至於在實驗後找不到自己的站點。在實驗過程中會出現一些選項，計算機一般會有默認的選擇，最後不要去更改，如果要更改要先充分了解清楚該選項的含義，以及它會造成的效果，否則會使實驗的結果失真。實驗前先熟悉好操作軟體是做好該實驗的關鍵。
實驗二：頁面圖像設置
一、實驗目的及要求：
本實例的目的是設置頁面的背景圖像,並創建滑鼠經過圖像。
二、儀器用具
1、生均一台多媒體電腦，組建內部區域網，並且接入國際互聯網。
2、安裝Windows XP操作系統；建立IIS伺服器環境，支持ASP。
3、安裝網頁三劍客（Dreamweaver MX；Flash MX；Fireworks MX）等網頁設計軟體；
4、安裝Acdsee、Photoshop等圖形處理與製作軟體；
5、其他一些動畫與圖形處理或製作軟體。
三、實驗原理
設置頁面的背景圖像,並創建滑鼠經過圖像。
四、實驗方法與步驟
1) 在「頁面屬性」對話框中設置頁面的背景圖像。
2) 在頁面文檔中單擊「」插入滑鼠經過圖像。
五、實驗結果
六、討論與結論
實驗結束後我們可以看到頁面的背景變成了我們插入的圖像，並且要滑鼠經過的時候會變成另一個圖像，這就是滑鼠經過圖像的效果。當然這種實驗效果很難在實驗結果的截圖里表現出來。這個實驗的關鍵在於背景圖像的選擇，如果背景圖像太大不僅會影響網頁的打開速度，甚至圖像在插入會也會有失真的感覺，因此在插入前對圖像進行必要的處理能使實驗的效果更好。
實驗三：表格製作
一、實驗目的及要求：
本實例是要創建邊框為1像素的表格。
二、儀器用具
1、生均一台多媒體電腦，組建內部區域網，並且接入國際互聯網。
2、安裝Windows XP操作系統；建立IIS伺服器環境，支持ASP。
3、安裝網頁三劍客（Dreamweaver MX；Flash MX；Fireworks MX）等網頁設計軟體；
4、安裝Acdsee、Photoshop等圖形處理與製作軟體；
5、其他一些動畫與圖形處理或製作軟體。
三、實驗原理
創建邊框為1像素的表格。
四、實驗方法與步驟
1) 在文檔中，單擊表格「」按鈕，在對話框中將「單元格間距」設置為「1」。
2) 選中插入的表格，將「背景顏色」設置為「黑色」（#0000000）。
3) 在表格中選中所有的單元格，在「屬性」面版中將「背景顏色」設置為「白色」（#FFFFFF）。
4) 設置完畢，保存頁面，按下「F12」鍵預覽。
五、實驗結果
六、討論與結論
本實驗主要通過整個表格和單元格顏色的差異來襯托出實驗效果，間距的作用主要在於表現這種顏色差異。表格的背景顏色和單元格的背景顏色容易混淆，在實驗中要認真判斷，一旦操作錯誤則得不到實驗的效果。「表格寬度」文本框右側的表格的寬度單位，包括「像素」和「百分比」兩種，容易混淆，要充分地理解這兩種單位表示的意義才能正確地進行選擇，否則就不能達到自己想要的效果，設置錯誤就會嚴重影響實驗效果。
實驗四：創建錨點鏈接
一、實驗目的及要求：
本實例的目的是創建錨點鏈接。
二、儀器用具
1、生均一台多媒體電腦，組建內部區域網，並且接入國際互聯網。
2、安裝Windows XP操作系統；建立IIS伺服器環境，支持ASP。
3、安裝網頁三劍客（Dreamweaver MX；Flash MX；Fireworks MX）等網頁設計軟體；
4、安裝Acdsee、Photoshop等圖形處理與製作軟體；
5、其他一些動畫與圖形處理或製作軟體。
三、實驗原理
創建錨點鏈接。
四、實驗方法與步驟
1) 在頁面中插入1行4列的表格，並在各單元格中輸入導航文字。
2) 分別選中各單元格的文字，單擊「」按鈕，在彈出的「超級鏈接」對話框上的「鏈接」文本框分別輸入「#01」「#02」「#03」「#04」。
3) 在文檔中輸入文字並設置錨記名稱「01」，按下「 Enter」鍵換行，輸入一篇文章。
4) 在文章的結尾處換行，輸入文字並設置錨記名稱「02」，按下「 Enter」鍵換行，輸入一篇文章。
5) 同樣的方法在頁面下文分別輸入文字和命名錨記為「03」和「04」，並輸入文章。
6) 保存頁面，按下「F12」鍵預覽。
五、實驗結果
六、討論與結論
添加瞄記的作用是可以幫讀者快速找到自己想要的文章，同時也可以使頁面更加精簡。本實驗的關鍵難點在於鏈接文本框輸入的名稱和瞄記的名稱要相一致才能達到實驗的效果，同時要記得是在上一篇文章的結尾處輸入文字並設置瞄記名稱，並記得輸入對應的文章，否則瞄記可能不能用。熟練程度低在實驗中不能很好地使用各種工具，無法一次准確地尋找到適當的位置。實驗中忘記選擇「不可見元素」，幾次實驗都失敗，最後才得出正確的結論。因此在實驗前要先做好預習，否則實驗過程會比較吃力。
實驗五：設置CSS樣式
一、實驗目的及要求：
本實例的目的是通過設置CSS樣式創建表格的虛線邊框。
二、儀器用具
1、生均一台多媒體電腦，組建內部區域網，並且接入國際互聯網。
2、安裝Windows XP操作系統；建立IIS伺服器環境，支持ASP。
3、安裝網頁三劍客（Dreamweaver MX；Flash MX；Fireworks MX）等網頁設計軟體；
4、安裝Acdsee、Photoshop等圖形處理與製作軟體；
5、其他一些動畫與圖形處理或製作軟體。
三、實驗原理
通過設置CSS樣式創建表格的虛線邊框。
四、實驗方法與步驟
1) 在網頁中創建一個表格。
2) 在「CSS樣式」面板中單擊「」按鈕，在彈出的對話框中進行設置，完成後單擊「確定」按鈕。
3) 在彈出的對話框中進行設置，完成後單擊「確定」
後面的看我發的那個網站！
7、跪求：網頁設計實訓個人總結
《網站設計與製作》實訓報告
X學院 XX班 XX X號
一．實訓時間：
2010年6月7日到2010年6月13日二．實訓地點：
科實南213
三．實訓組員：
XXX、XXX
四．實訓目標：
以金華農特產為主題，製作網站，通過綜合實訓進一步鞏固、深化和擴展學生的理論知識與專業技能。
五．實訓策劃：
這一周，我們要進行《網站設計與製作》實訓，我們認為做網站前最主要的是確定主題、框架和標題欄的設計。因此我們相互討論之後，確定製作以「健康」為主題的「林安健康網」，但在之後的資料收集和網頁的框架的建設中，我們發現出了問題，在確認無法做出效果後，我們決定放棄這個主題，重新建立以「水果」為主題，以我們的名字連體命名的「林安水果網」。以下是我們的策劃內容：
1.確定主題。製作網頁,首先是確定主題，金華有許多特色水果，水果產品豐富，,經過考慮,確定以金華水果品種為主題的網站 ,建立一個簡單的介紹金華水果的網站,專業介紹一些金華地區優秀的水果市場和銷售渠道等。我們本次間的網站基本以綠色為基點，綠色是生命的顏色，綠色代表著生機勃勃，所以本站以綠色為風格，讓整個網站充滿綠的生機。
2.設計主頁。主頁的設計是整個網站的靈魂，構思導航欄的分類，然後是整體規劃，每一版塊都有其個性的色彩，清晰明了，便於閱讀瀏覽，我們構思大致分幾部分，首頁，特價專區，優質水果，果樹栽培，婺城商場，金東商場，客戶中心，聯系我們，意見反饋等板塊，再加入個別網站等，每一部分又分幾小部分，內容比較充分，多樣。確定導航欄的各個分類標題之後對於建立二級子網尤為重要，我們運用Photoshop CS3技術來設計出導航欄，再用Fireworks CS3或Photoshop CS3技術製作切片，建立導航欄，將整體的主頁效果建立起來。
3.資料的搜集。主頁的導航欄設計好後，接下來就是對主頁導航欄的各個內容進行資料的收集，我們採用大量的資料收集再對資料進行塞選，得到最適合導航欄內容的資料。素材的選擇，要符合網站的主題，圖片的大小要符合模板的輪廓，我們將不符合模板的用Photoshop處理編輯，然後放入站點底下，進行圖文的鏈接和排版。
4. 建立模板和庫。此次網站建設中我們決定大量運用模板和庫，運用模板和庫對於建立網站提供便利同時也為我們減少大量的工序。本次水果網的建設主要採用兩個模板，各具風格，樣式標准。
5.各個子網頁的建立。我們設計好模板後只要在可編輯區依次編輯所需資料就可，運用模板建立子網頁少了很多工序，為我們節省大量的時間。盡管我們建立了模板，但我們在建立子網時很小心，因為一張圖片的大小插入就有可能破壞整個模板的結構尤其在使用表格時，因此我們對所插入的圖片和表格都得進行測量，做到不影響網站整體的美觀。
6.實現網頁間的鏈接。做好個格子網和首頁後，接下來就是通過模板的鏈接，將整個網站中的網頁鏈接起來，過程其實很簡單，主要是把要鏈接的文字和圖標選擇在選擇工具欄的鏈接按鈕最後選擇自己要鏈接的網頁單擊確定便可以了。通過模板建的幾張網頁其實超鏈接都不怎麼用鏈接，只需要修改模板上的鏈接就可以了，這也是通過模板新建網頁的好處，省去一張一張超級鏈接的時間了。做好這一步後，網站基本算是建好了。
7.向靜太網頁插入動態效果。在基本建好網頁中的插入層和時間軸，製作其動態效果，讓整個網頁充滿生機。我們在網上進行flash素材的收集，通過Flash CS3設計出主題下的風格動態效果。然後插入到靜態網頁中，使網頁更加生動形象。
六．實訓心得：
通過這半年的學習實踐中 和老師的指導下以大量明晰的操作步驟和典型的應用實例，教會我們。使更豐富全面的軟體技術和應用技巧，使我們真正對所學的軟體融會貫通。所以我結合所學專業的內容製作了企業水果網站，作為實習的成果。其內容是多樣化的。製作網頁用的軟體是Deamweaver CS3軟體。它提供了網頁和表單的動態生成到企業級的解決方案。主圖是一個網頁的門面，它能體現出這個網頁的整體風格。
製作網頁,首先是確定主題,經過再三考慮,就做了個關於金華水果的網站 ,要對這些有些了解,於是確定主題,做一些類似的網站,但考慮到,現在網路上好多類似的網站,但有些內容不適合我們大學生閱讀,對於我們來說有點不實際,根據這種情況,最後決定建立一個簡單的介紹金華水果的網站,專門介紹一些金華地區優秀的水果市場和銷售渠道等。於是網站主題確立。
然後是整體規劃，每一版塊都有其個性的色彩，清晰明了，便於閱讀瀏覽，大致分幾部分，首頁，特價專區，優質水果，果樹栽培，婺城商場，金東商場，客戶中心，聯系我們，意見反饋等板塊，再加入個別網站等，每一部分又分幾小部分，內容比較充分，多樣。
再後是收集資料與素材，大量瀏覽相關網站，收集關於金華水果的圖片，進行Photoshop CS3圖片處理和排版，插入好的文章和圖片等，還有參考一些好的網站的布局，特色，顏色搭配，背景圖等。
再後是設計網頁圖片，用flash製作網友調查表，用Photoshop製作靜態圖片。再後是建立站點，和製作網頁了，使用dreamweaver製作。
首頁內容精彩豐富，首頁主要是導航作用。首頁製作時，時刻考慮著網頁的基本原則：統一，連貫，分割，對比及和諧的原則，內容統一，都是為了主題服務，一個網站強調的就是一個整體，只有圍繞一個統一的目標所做的設計才是成功的；連貫，頁面之間關系連貫，統成一體；每版內容都自成一體，顏色各異，便於瀏覽；整個網頁有動有靜，顏色不同，形成對比，不呆板，富有生氣；顏色各異，但又不同之中又相同，渾然一體。
簡潔實用: 這是非常重要的，網路特殊環境下，盡量以最高效率的方式將用戶所要想得到的信息傳送給他就是最好的，所以要去掉所有的冗餘的東西。使用方便:同第一個是相一致的，滿足使用者的要求，網頁做得越適合使用，就越顯示出其功能美；頁面用色協調，布局符合形式美的要求: 布局有條理，充分利用美的形式，是網頁富有可欣賞性，提高檔次。當然雅俗共賞是人人都追求的。
利用我們所學的模板設計，製作更完美的頁面。將動態網頁與靜態網頁結合起來
再後，調試過程，好多次本來在Deamweaver CS3里好好的，把字調的好好的，位置很對，可在瀏覽器里御覽就出毛病了，不是靠上了，就是靠下了，很不老實，經過再三調試，整理，加了好多表格，終於滿意了。
通過溫本周的實訓，發現自己還有很多的不足。就框架的應用很難把握，切片也很難合理切割，當插入圖片的時候把原有的模板給撐破了，精確定位很重要。因為學藝不精，所以不會網頁的代碼設計，只能通過網路三劍客綜合使用。不過也實踐中也學到了很多知識，比如原本不知道網頁設計還需要切片，表格的嵌套是非常重要的，模板的應用時非常便捷的。還有一些行為中的效果也是蠻不錯的。所以這次實訓還是很有意義的。