1、文檔來源為 :從網絡收集整理 .word 版本可編輯 .歡迎下載支持 1. 需求分析 錯誤!未定義書簽。 2. 目的錯誤!未定義書簽。 3. 功能敘述錯誤!未定義書簽。 3.1搜索錯誤!未定義書簽。 3.2鏈接錯誤!未定義書簽。 3.3登陸注冊錯誤!未定義書簽。 3.4幫助中心 錯誤!未定義書簽。 3.4建議意見錯誤!未定義書簽。 4. 開發工具與開發環境錯誤!未定義書簽。 4.1開發工具-Dreamweaver軟件錯誤!未定義書簽。 4.2開發環境-Windows XP , java語言環境 錯誤!未定義書簽。 5. 網絡構建錯誤!未定義書簽。 5.1網站描述 錯誤!未定義書簽。 5.2目錄

2、結構 錯誤!未定義書簽。 5.3邏輯結構 錯誤!未定義書簽。 5.4設計流程錯誤!未定義書簽。 6網頁制作說明錯誤!未定義書簽。 6.1簡介錯誤!未定義書簽。 6.2表格排版 錯誤!未定義書簽。 6.3錨記錯誤!未定義書簽。 6.4超鏈接錯誤!未定義書簽。 6.5框架錯誤!未定義書簽。 6.6導航錯誤!未定義書簽。 6.7表單錯誤!未定義書簽。 6.8圖形，多媒體錯誤!未定義書簽。 6.9庫錯誤!未定義書簽。 6.10模板錯誤!未定義書簽。 6.10 flash制作錯誤!未定義書簽。 6.11層和時間軸 錯誤!未定義書簽。 6.12 CSS 錯誤!未定義書簽。 6.13行為錯誤!未定義書簽。

3、6.14圖像熱區：錯誤!未定義書簽。 6.15鼠標經過圖像 錯誤!未定義書簽。 6.16滾動字幕與圖片 錯誤!未定義書簽。 6.17添加到收藏夾 錯誤!未定義書簽。 6.18設為首頁錯誤!未定義書簽。 6.19電子郵件鏈接 錯誤!未定義書簽。 6.20頭部標記錯誤!未定義書簽。 7.問題與解決方法 錯誤!未定義書簽。 Web 501實訓總結報告 1. 需求分析 隨著電子信息技術的發展， 越來越多的人選擇網上購物這一購物方式， 這給電子 商務的發展帶來了一個良好的契機。 “宅客一族”更是理所當然的接受了這一方 式。面對如此龐大的消費群體，面對多種多樣的消費需求，建立一個屬于“我的 書城”的網上購

4、書網站已是時之所趨。根據網上調查， 75%的網名認為傳統的書 店模式已經無法滿足日益增長的消費需求。小小的書店時無法承載所有的書籍 的，與此相反的是網上書店不僅可以羅列所有的書本， 更能夠提供目錄章節以供 讀者閱覽。與此同時，在本網站中讀者還可以根據專題來選擇讀本，音像，這樣 的搜索方式更加快捷方便。 更為方便的是讀者可以不出門就購買到稱心如意的商 品，省去了找書，排隊付錢的時間，并且網上購物通常是根據網銀來結賬的，本 書店與支付寶有合作關系， 注冊為本書城的會員在享受會員價的基礎上， 還可以 享受 9.5 折的支付寶折扣。如此方便，快捷的購物方式又怎么會不引起消費者的 親睞呢？ 2. 目的

5、建立本網站（，首先是為了營造一大浩大的宣傳聲勢， 擴大本店在網上的影響力， 讓更多的人接受并了解本店； 其次是為了方便新老顧客在挑選物品時能夠在網上 “貨比三家”以得到真正的實惠； 再次，網上購物對于擁有支付寶的顧客可以享 受雙重優惠，在這個基礎上可以鞏固我們的固定顧客群；最后， 本網站提供一些 考證考試信息，讀者可以在瀏覽網頁是了解到考試動態以方便他們提前做好準備 購買相關資料復習，這一來又吸引了一批新顧客。 3. 功能敘述 3.1 搜索 本網站擁有良好的數據庫支持， 每個網頁頭部都有詳細的標簽以方便搜索引擎根 據標記快速識別，這一來網頁瀏覽的速度將大大提高；在網站內部， 本店分設了 很多專

6、欄以方便用戶在搜索商品或者相關信息的時候可以盡量的效率化 。 3.2 鏈接 不管是內部鏈接還是外部鏈接都擁有詳細的 URL 地址，用戶在每一頁都可以順 利的與首頁鏈接。對于友情鏈接， 則更為方便， 只需點擊圖標頁面即可跳轉到所 需的網站頁面。 3.3 登陸注冊 在登陸注冊面，用戶可以放心使用，所有的資料都是加密的是不會泄露出去的， 用戶一旦注冊則可以實時享受會員待遇，擁有絕對的實惠。 3.4 幫助中心 對于不熟悉本站操作的用戶， 本站提供幫助中心以指導用戶操作。 同時對于付款 的巨細也是一一報道。 用戶不用擔心出了什么問題， 我們會提供在線幫助以方便 用戶與管理員聯系。 3.4 建議意見 用戶

7、可以根據自己在瀏覽網頁時所碰到的問題以及時的對我們進行反饋， 本站也 隨時歡迎用戶對我們的不足之處加以指正。 4. 開發工具與開發環境 4.1 開發工具 -Dreamweaver 軟件 Dreamweaver 是美國 MACROMEDIA 公司開發的集網頁制作和管理網站于一身 的所見即所得網頁編輯器， 它是第一套針對專業網頁設計師特別發展的視覺化網 頁開發工具，利用它可以輕而易舉地制作出跨越平臺限制和跨越瀏覽器限制的充 滿動感的網頁。 它具有以下特點： 1最佳的制作效率 Dreamweaver可以用最快速的方式將 Fireworks, FreeHand 或 Photoshop等檔 案移至網頁上

8、。使用檢色吸管工具選擇熒幕上的顏色可設定最接近的網頁安全 色。對于選單， 快捷鍵與格式控制， 都只要一個簡單步驟便可完成。 Dremweaver 能與您喜愛的設計工具，如 Playback Flash， Shockwave 和外掛模組等搭配，不 需離開Dreamweaver便可完成，整體運用流程自然順暢。除此之外，只要單擊便 可使Dreamweaver自動開啟Firework或Photoshop來進行編輯與設定圖檔的最佳 化。 2網站管理 使用網站地圖可以快速制作網站雛形、設計、 更新和重組網頁。 改變網頁位置或 檔案名稱，Dreamweaver會自動更新所有連結。使用支援文字、HTML碼、H

9、TML 屬性標簽和一般語法的搜尋及置換功能使得復雜的網站更新變得迅速又簡單。 3無可比擬的控制能力 Dreamweaver是唯一提供Roundtrip HTML、視覺化編輯與原始碼編輯同步的設 計工具。它包含HomeSite和BBEdit等主流文字編輯器。幀（frames）和表格的制 文檔來源為 :從網絡收集整理 .word 版本可編輯 .歡迎下載支持 作速度快的令您無法想像。進階表格編輯功能使您簡單的選擇單格、行、欄或作 未連續之選取。甚至可以排序或格式化表格群組，Dreamweaver支援精準定位， 利用可輕易轉換成表格的圖層以拖拉置放的方式進行版面配置。所見即所得 Dreamweaver

10、成功整合動態式出版視覺編輯及電子商務功能，提供超強的支援能 力給 Third-party 廠商，包含 ASP, Apache, BroadVision， Cold Fusion, iCAT, Tango與自行發展的應用軟體。當您正使用 Dreamweaver在設計動態網頁時，所 見即所得的功能，讓您不需要透過瀏覽器就能預覽網頁。夢幻樣版和XML Dreamweaver將內容與設計分開，應用于快速網頁更新和團隊合作網頁編輯。建 立網頁外觀的樣版，指定可編輯或不可編輯的部份，內容提供者可直接編輯以樣 式為主的內容卻不會不小心改變既定之樣式。您也可以使用樣版正確地輸入或輸 出XML內容。Dreamw

11、eaver還集成了程序開發語言，對ASP、.NET、PHP、 JS的基本語言和連接操作數據庫，都是完全支持的。 4.2開發環境-Windows XP，java語言環境 5. 網絡構建 5.1網站描述 本網站是一個電子商務網站，主要以銷售圖書，影像為主要內容，兼提供其他功 能，例如網頁間的鏈接，圖書的簡要閱覽，會員的登錄注冊，幫助中心等等。網 站分設三種模式，分別是 B2B,B2C,B2G三種模式，以方便不同身份的用戶選擇 適合自己的模式。 5.2目錄結構 如圖1所示: 本站的目錄結構是在站點的前提下，除了有 _no tes,CSS,flash,image,library,Templates,w

12、ebpag這些文件夾，還另放一個主頁。 在 image 文件夾下分設了關于圖書圖片的文件夾，頁面設計圖片的文件夾以及 VCD 圖片的文件夾以方便設計中應用不同的圖片。 同時 所有的命名都是由英文 命名便于識別。 5.3 邏輯結構 圖2 如圖 2 所示： 每一頁都是與主頁相連接的，可以很方便的從任意一個頁面跳轉到主頁。 5.4 設計流程 本網站在設計階段首先我們找尋了很多的圖片，Flash,多媒體，以及相關的文 本信息。在制作完主頁后，把比較好的導航欄和頁尾還有一些特別的圖片做入庫， 以方便制作其他頁面的時候套用。 在制作圖書介紹頁面時我們用了模版以方便所 有的圖書介紹頁面用同一種模式以保持頁面

13、的一致性。 最后我們制作了一個框架 以方便用戶跳轉不同的頁面。 6 網頁制作說明 6.1 簡介 在制作所有網頁我們都應用了表格和 div 標簽來進行排版， 在幫助正文頁的本頁 跳轉中我們應用了錨標記， 不同網頁間應用了超鏈接， 在幫助中心框架中應用了 框架技術，主頁中我們在導航條中應用了 marquee標簽以實現字體滾動，所有的 大標題都是應用 flash 文本制作而成， 主頁還插入了 flash 媒體。 主頁中間應用了 鼠標經過圖像，層和時間軸的應用是十分普遍的， 特殊的圖片中我們還做了熱區， 在按鈕中我們應用了一些行為方式，尤其是感謝瀏覽頁面做了很多行為方式 - 層的顯示與隱藏， 圖的交換

14、。 為了提高制作效率我們還應用了模板與庫以保持所 有頁面的統一性。在首頁還額外添加了加入收藏夾與設為首頁的 javascript 語言。 在首頁末端我們加了電子郵件鏈接。 在登錄頁面所有的交互動作都是通過表單來 實現的。 6.2 表格排版 我們在一個 本站在網頁排版中主要是根據表格進行排版的為了讓版式更加好看， 表格里嵌套了多個表格幾乎每個區塊都有獨立的一個表格。 操作很簡單： 6.3錨記 要實現一個頁面中文本間的跳轉則只需在所需跳轉的地方設置錨記。在本站中我 們一共在兩個頁面上做了錨記-幫助導航頁，幫助正文頁。 如圖4可視： 6.4超鏈接 在每個頁面上都擁有一定的超鏈接以實現信息的共享，本站

15、不僅有站內鏈接還有 外部鏈接。使得每個頁面跳轉自如。 操作如下： 6.5框架 為了在一個頁面實現多個頁內的鏈接使得 mainframe里可以顯示不同的網頁信息 只需制作框架即可。 如圖可視： 框架 6.6導航 為了方便用戶在一個指導性的東西進行操作, 本站特地在主要網頁中制作了導航欄。使得用 戶更好的瀏覽網頁。 6.7表單 為了實現用戶與我們的交互所有的登錄界面， 注冊頁面，評價頁面都是用表單做 的，里面有常用的一些操作。 表單 6.8圖形，多媒體 為了讓網頁看起來更好看我們都用了一些圖片，多媒體來進行頁面的填充。 如圖所示： 文檔來源為：從網絡收集整理.word版本可編輯.歡迎下載支持 應-

16、 圖片 Flash多媒體 6.9庫 在網頁設計中常常有很多有用的信息是可以在不同的網頁同時顯現的，為了提高 網頁的設計我們在網頁中制作了很多的庫 如圖： 6.10模板 與庫的作用相同，一個頁面中如果只有少數的地方與其他地方不同則只需要用模 板這個技術。本站對于圖書介紹頁面打算用同樣的版式故需要用上模板。 如圖： 6.10 flash 制作 在本站中比較顯眼的標題都是套用flash中的flash文本。還特意制作了文本的 變色。 操作如下: 6.11層和時間軸 本站在首頁和其他分頁制作了很多圖片變換的技術，這是根據層與時間軸制作出 來的。 操作如下： 6.12 CSS 本站運用了很多的層疊樣式，幾

17、乎所有的字體都是用了層疊樣式。 尤其是頁尾我 們運用了文檔中的bottom.css和gateway.css兩種層疊樣式，沒有運用的話排版會 顯得很難看。在一個層疊樣式的文檔中如果要有多個版式只需在每段用 #*命名 即可。 如圖所示： 6.13行為 在本站中我們用了很多的行為方式，尤其是在感謝瀏覽頁面，我們不僅加了隱藏 圖片，交換圖片的行為方式 還用了顯示-隱藏層的行為。此外我們在登錄界面中 目前是用行為（打開另一個瀏覽頁）來替代了后臺的交互。 如圖所示： 6.14圖像熱區: 在書本圖片中我們做了一些圖像熱區使得能夠更好的鏈接到其他頁面 如圖世界杯： 6.15鼠標經過圖像 在首頁，我們制做了鼠標

18、經過圖像以顯現多個不同的專題。 如圖： 文檔來源為 :從網絡收集整理 .word 版本可編輯 .歡迎下載支持 6.16 滾動字幕與圖片 為了讓用戶能夠馬上找到我們的聯系方式，本站特別把聯系方式這一字段用了 marqueen標記，使得字幕能夠滾動起來。 如圖： 字幕： 代碼： 個人購書、書店批發、單位團購三位一體的綜合電子商務平臺 總部網購、話購服 務熱線： 8(全國范圍市話撥打) 圖片：(代碼雷同) 6.17 添加到收藏夾 這個技術主要是運用到行為方式， 在首頁我們首先制做了這幾個字段， 再在字段 中添加了 addfavorite 這個方法名。 代碼如下： 加為收藏 如圖： 6.18設為首頁 這個技術也是運用到行為方式，在 onclick 事件中用了如下代碼： 設為首頁 效果如圖： 6.19 電子郵件鏈接 在首頁頁尾處是用了電子郵件鏈接方便用戶與我們聯系。 代碼如下： 聯系我們 如圖： 6.20頭部標記 方便搜索引擎查找。 7.問題與解決方法 在網頁制作中我們遇到了很多問題， 首先是排版問題， 一開始我們是直接在一個 大表格里排版，結果導致格子間不對齊， 弄到后面顯得很亂。還有就是屏幕分辨 率的設計，由于不