網(wǎng)站設(shè)計說明書樣本.doc

1、企業(yè)網(wǎng)站的設(shè)計與制作企業(yè)網(wǎng)站的設(shè)計與制作 專 業(yè)：電子商務(wù) 班 級： 061362 學(xué) 號： 061362097 學(xué)生姓名： 宋力 指導(dǎo)教師：邢翠芳 二零一零 年 五 月 1 目錄目錄 摘要： .2 關(guān)鍵字： .2 第一章 緒言 .3 第二章 網(wǎng)站設(shè)計分析 .4 2.1 網(wǎng)站設(shè)計概述 .4 2.2 開發(fā)工具的選用及介紹 .4 2.2.1 Dreamweaver8.0 .4 2.2.2 Photoshop CS .5 2.2.3 ASP 動態(tài)網(wǎng)站腳本語言.6 2.3 關(guān)系型數(shù)據(jù)庫的選擇 .7 2.3.1 Microsoft Office Access 簡介.7 3.1 網(wǎng)站定位 .9 3.2 系

2、統(tǒng)構(gòu)思 .9 3.3 網(wǎng)站欄目簡介 .10 第四章 詳細設(shè)計 .11 4.1 網(wǎng)站制作過程 .11 4.1.1 logo 的制作過程.11 4.1.2 banner 的制作過程.12 4.1.3 主頁制作過程(詳見圖 4-3).13 2 4.1.4 留言板的設(shè)計.14 4.2 數(shù)據(jù)庫的設(shè)計 .16 4.3 系統(tǒng)實現(xiàn)代碼 .17 4.3.1 滾動文字特效（這里主要指網(wǎng)站左側(cè)的“公司公告” ） .17 4.3.2 圖片切換 .18 4.3.3 首頁鼠標特效代碼 .19 結(jié)束語 .21 參考文獻 .21 致謝 .21 摘要摘要： 本文就網(wǎng)站的主題內(nèi)容及網(wǎng)站的制作與設(shè)計這兩方面進行描述與分析。 本網(wǎng)站

3、的主題知識產(chǎn)權(quán)服務(wù)，整個網(wǎng)站都是以法律性的內(nèi)容為主的，主要包括了 首頁、公司簡介、法律服務(wù)、友情鏈接、法界動態(tài)、法律法規(guī)、在線留言、聯(lián)系我們、 網(wǎng)站公告等欄目。在整個設(shè)計過程中主要是運用 Dreamweaver、ACCESS、ASP 等編寫的。 通過本網(wǎng)站系統(tǒng)，給想了解知識產(chǎn)權(quán)的人群提供了一個良好的平臺，同時也為有意愿 注冊公司、注冊商標、申請專利，卻無從咨詢的人提供了一個可以互動解決問題的平 臺。 如今，在網(wǎng)絡(luò)技術(shù)的迅猛發(fā)展下，互聯(lián)網(wǎng)的不斷普及，讓人們都感受到網(wǎng)絡(luò)的方 便快捷，從而大家都喜歡選擇從互聯(lián)網(wǎng)上獲取信息，因此，互聯(lián)網(wǎng)逐漸成為一個寬廣 的信息發(fā)布平臺和獲取信息的平臺。本網(wǎng)站也需要通過

4、 Internet 來對外宣傳、普及， 從而幫助到更多想了解知識產(chǎn)權(quán)的人們。 本網(wǎng)站主要是以建立 Dreamweaver、ACCESS、ASP 等技術(shù)的動態(tài)網(wǎng)站管理系統(tǒng)的前 臺表現(xiàn)模塊，使用了 ASP 技術(shù)的動態(tài)網(wǎng)頁技術(shù)，加上 ACCESS 作為后臺數(shù)據(jù)庫，制作了 一個簡單的服務(wù)性企業(yè)網(wǎng)站系統(tǒng)，實現(xiàn)了企業(yè)網(wǎng)站的基本功能，例如用戶注冊登錄， 留言板的實現(xiàn)等。 關(guān)鍵字：關(guān)鍵字： 企業(yè)網(wǎng)站；ASP；知識產(chǎn)權(quán) 3 第一章 緒言 二十世紀進入信息發(fā)展高速路，數(shù)碼化革命給所有領(lǐng)域帶來新的改變。隨著電腦 辦公自動化的普及，電子商務(wù)應(yīng)運而生，一切都歸功于 internet 的巨大貢獻，互聯(lián)網(wǎng)的 世界里蘊藏?zé)o限

5、生機，這里只有想不到的、沒有做不到的。由于國際互聯(lián)網(wǎng)是一個不 受時空限制的信息交換系統(tǒng)，所以它是目前最直接、最豐富和最快捷的聯(lián)系方式，信 息溝通的高效率為企業(yè)帶來了最大的方便。所以在現(xiàn)今社會對于一個企業(yè)來說，網(wǎng)站 已經(jīng)是不可缺少的一部分了。 現(xiàn)今，知識產(chǎn)權(quán)越來越被人們關(guān)注，隨著就業(yè)壓力的加重，越來越多的年輕人選 擇自己創(chuàng)業(yè)開公司，大學(xué)生也占了一定的比例，由于專業(yè)的限定，有些大學(xué)生在?；?本上接觸不到知識產(chǎn)權(quán)的知識，當然在社會上的人群也不一定都了解知識產(chǎn)權(quán)。同時 隨著互聯(lián)網(wǎng)的快速發(fā)展和不斷普及，網(wǎng)站成了傳播信息最有效的平臺。所以我制作了 一個專門針對知識產(chǎn)權(quán)行業(yè)的企業(yè)網(wǎng)站，給這些人群提供了一個了

6、解和學(xué)習(xí)知識產(chǎn)權(quán) 的平臺，當然對于一個針對知識產(chǎn)權(quán)的服務(wù)性企業(yè)本身而言，這個網(wǎng)站將會對其自身 帶來不可估量的效用。 社會在發(fā)展，人們的思想觀念，生活方式也在發(fā)展，通過網(wǎng)站這種方式與企業(yè)或 者他人交流已經(jīng)趨向普及， 4 第二章 網(wǎng)站設(shè)計分析 網(wǎng)站的設(shè)計與制作需要用到網(wǎng)頁三劍客（Dreamweaver、fireworks、flash） ， IIS，photoshop 等工具。所以首先我們要了解這些工具的功能與用處，然后要能夠熟 練得掌握這些工具用法，只有你能熟練使用這些工具，你才能在設(shè)計過程中盡量避免 技術(shù)上的問題，提高效率，做到“事半功倍” 。 2.12.1 網(wǎng)站設(shè)計網(wǎng)站設(shè)計概述概述 網(wǎng)站首頁可

7、以說是網(wǎng)站的門面，大家瀏覽你的網(wǎng)站首先看到的就是網(wǎng)站首頁，所 以首頁不僅要做得美觀，引人瀏覽，還要有豐富的內(nèi)容。所以我們在首頁就首頁聚集 了大量的信息，除了最基本的法律法規(guī)、法界動態(tài)、法律服務(wù)這些欄目外，我還將公 司的公告用滾動文字的形式展現(xiàn)出來，這樣靜中有“動”的效果可以抓住人的眼球， 吸引人去點擊。每頁左下方都有我們的聯(lián)系方式，這樣就不用轉(zhuǎn)到聯(lián)系我們這張頁面 都能獲取到公司的聯(lián)系方式了，當然若想更深入的了解就可以轉(zhuǎn)到聯(lián)系我們頁面。子 頁面的框架基本上是符合整個網(wǎng)站的整體風(fēng)格的，banner，導(dǎo)航等都是和首頁一樣的， 不一樣的只是正文的內(nèi)容，這個可以通過模板來實現(xiàn)。出于排除對模板可編輯區(qū)域排

8、 版的復(fù)雜性起見，我這里沒有運用模板，而是用另存為的方式實現(xiàn)網(wǎng)頁風(fēng)格“統(tǒng)一化” 的。在網(wǎng)站的各頁面制作好后，我在 Dreamweaver 中與 Access 數(shù)據(jù)庫建立連接，通過 在 Dreamweaver 的一系列操作實現(xiàn)注冊登錄的功能，而留言板功能我是通過一張空白 的寫有后臺代碼的頁面轉(zhuǎn)接過去的，名為 handle.asp，用戶可以通過“在線留言”在 網(wǎng)站上發(fā)表自己的見解或疑問，達到互動的效果。 2.22.2 開發(fā)工具的選用及介紹開發(fā)工具的選用及介紹 2.2.1 Dreamweaver8.0 Dreamweaver 是創(chuàng)建和管理網(wǎng)頁的專業(yè)化可視編輯器，在網(wǎng)頁設(shè)計與制作領(lǐng)域中用 戶最多、應(yīng)用

9、最廣、功能最強大的軟件，隨著 Dreamweaver 8 的發(fā)布，更堅定 Dreamweaver 在該領(lǐng)域的地位。它集網(wǎng)頁設(shè)計、網(wǎng)站開發(fā)和站點管理功能于一身，具有 可視化、支持多平臺和跨瀏覽器的特性，是目前網(wǎng)站設(shè)計、開發(fā)、制作的首選工具。 1、靈活的編寫方式 Dreamweaver 具有靈活編寫網(wǎng)頁的特點，不但將世界一流水平的“設(shè)計”和“代碼” 編輯器合二為一，而且在設(shè)計窗口中還精化了源代碼，能幫助用戶按工作需要定制自 己的用戶界面。 2、可視化編輯界面 Dreamweaver 是一種所見即所得的 HTML 編輯器，可實現(xiàn)頁面元素的插入和生成。 或視化編輯環(huán)境大量減少了代碼的編寫，同時亦保證了

10、其專業(yè)性和兼容性，并且可以 5 對內(nèi)部的 HTML 編輯器和任何第三方的 HTML 編輯器進行實時的訪問。無論用戶習(xí)慣手 工輸入 HTML 源代碼還是使用可視化的編輯界面，Dreamweaver 都能提供便捷的方式使 用戶設(shè)計網(wǎng)頁和管理網(wǎng)站變得更容易。 3、功能更多的 CSS 支持CSS 可視化設(shè)計、CSS 檢查工具 4、動態(tài)跨瀏覽器驗證 當保存時系統(tǒng)自動檢查當前文檔的跨瀏覽器有效性，可以指定何種瀏覽器為測試 用瀏覽器，同時系統(tǒng)自動檢驗以確定頁面有沒有目標瀏覽器不支持的 tags 或 CSS 結(jié)構(gòu)。 動態(tài)跨瀏覽器有效性檢查功能可以自動核對 tags 和 CSS 規(guī)則是否適應(yīng)目前的主瀏覽器。 5

11、、強大的 WEB 站點管理功能 6、內(nèi)建的圖形編輯引擎 7、Dreamweaver 的集成特性 Dreamweaver 8 繼承了 Fireworks、Flash 和 Shockwave 的集成特性，可以在這些 Web 創(chuàng)作工具之間自由地切換，輕松地創(chuàng)建美觀實用的網(wǎng)頁。 8、豐富的媒體支持能力 可以方便地加入 Java、Flash、Shockwave、ActiveX 以及其他媒體。Dreamweaver 具有強大的多媒體處理功能，在設(shè)計 DHTML 和 CSS 方面表現(xiàn)得極為出色，它利用 JavaScript 和 DHTML 語言代碼輕松地實現(xiàn)網(wǎng)頁元素的動作和交互操作。Dreamweaver

12、還提供行為和時間線兩種控件來產(chǎn)生交互式響應(yīng)和進行動畫處理。 9、超強的擴展能力 Dreamweaver 還支持第三方插件，任何人都可以根據(jù)自己的需要擴展 Dreamweaver 的功能，并且可以發(fā)布這些插件。 2.2.2 PhotoshopPhotoshop CS Photoshop CS 是一款圖形、圖像編輯軟件，在網(wǎng)頁設(shè)計領(lǐng)域被廣泛得應(yīng)用。以下 是其 10 大最新功能： 1、改進的文件瀏覽器 使用功能強大文件瀏覽器的可以快速預(yù)覽、標注和排序圖片；搜索或編輯圖像的 數(shù)據(jù)元或關(guān)鍵詞；并且可以自動批量共享文件。 2、匹配顏色命令 可以迅速從一張圖片的顏色校正另外一張圖像的顏色。 3、直方圖調(diào)色板

13、 隨時根據(jù)對圖像的調(diào)整更新直方圖調(diào)色板(Histogram Palette)。 4、陰影/加亮區(qū)修正 使用“陰影/加亮區(qū)修正(hadow/Highlight correction)”可以快速調(diào)整照片中曝 6 光過渡或欠缺的區(qū)域。 5、沿路徑放置文本 可以像在 Illustrator 中一樣把文本沿著路徑放置，并且你還可以在 Illustrator 直接編輯文本。 6、支持數(shù)碼相機的 raw 模式 支持多款數(shù)碼相機得 raw 模式，讓用戶可以得到更真實的圖像輸入。 7、全面支持 16 位圖像 可以在主要功能、層、比刷、文字、圖形等中精確的編輯、潤飾 16 位的圖像。 8、Layer Comps

14、可以在一個文件中保存不同層的合并效果，以便對各種效果進行快速察看。 9、輸入 Flash 文件 使用 ImageReady 可以創(chuàng)建 flash 矢量文件。 10、自定義快捷鍵 用戶可以按照自己的習(xí)慣定義 Photoshop 的快捷鍵。 2.2.3 ASP 動態(tài)網(wǎng)站腳本語言動態(tài)網(wǎng)站腳本語言 ASP 是 Active Server Page 的縮寫，意為“動態(tài)服務(wù)器頁面” 。ASP 是微軟公司開 發(fā)的代替 CGI 腳本程序的一種應(yīng)用,它可以與數(shù)據(jù)庫和其它程序進行交互，是一種簡單、 方便的編程工具。ASP 的網(wǎng)頁文件的格式是.asp，現(xiàn)在常用于各種動態(tài)網(wǎng)站中。ASP 采 用腳本語言 VBScrip

15、t（Java script）作為自己的開發(fā)語言。 ASP 是一種服務(wù)器端腳本編寫環(huán)境，可以用來創(chuàng)建和運行動態(tài)網(wǎng)頁或Web 應(yīng) 用程序。使用 ASP 可以組合 HTML 頁、VBScript 腳本命令和 JavaScript 腳本命令等， 以創(chuàng)建交互的 Web 頁和基于 Web 的功能強大的應(yīng)用程序。ASP 網(wǎng)頁可以包含 HTML 標記、普通文本、腳本命令以及 COM 組件等。利用 ASP 可以向網(wǎng)頁中添加交互式 內(nèi)容（如在線表單），也可以創(chuàng)建使用 HTML 網(wǎng)頁作為用戶界面的 web 應(yīng)用程序。 ASP 的文件后綴名為.asp，以區(qū)別于同樣可以包含 Script 的 HTML 文件。一個. a

16、sp 文件是一個文本文件，可以包括下列元素的任意組合： 文本（text） 、HTML 標志 （tags） 、Script 命令 由于腳本程序是在服務(wù)器上而不是在客戶端運行，傳送到瀏覽器上的 Web 頁是在 Web 服務(wù)器上生成的。所以不必擔(dān)心瀏覽器能否處理腳本：Web 服務(wù)器已經(jīng)完成了所 有腳本的處理，并將標準的 HTML 頁面?zhèn)鬏數(shù)綖g覽器。由于只有腳本的結(jié)果返回到瀏 覽器，所以服務(wù)器端腳本不易被別人復(fù)制。用戶看不到創(chuàng)建他們正在瀏覽的頁的腳本 命令。 7 2.32.3 關(guān)系型關(guān)系型數(shù)據(jù)庫數(shù)據(jù)庫的選擇的選擇 2.3.1 MicrosoftMicrosoft Office Access 簡介簡介

17、Microsoft Office Access 是由微軟發(fā)布的關(guān)聯(lián)式數(shù)據(jù)庫管理系統(tǒng),是集成在 microsoft 公司開發(fā)的產(chǎn)品更新?lián)Q代 office 系統(tǒng)中的集成軟件。它之所以被集成到 Office 中而不是 Visual Studio 中，是因為它與其它的數(shù)據(jù)庫管理系統(tǒng)（如 Visual FoxPro）相比更加簡單易學(xué)，一個普通的計算機用戶即可掌握并使用它。而且最重要 的一點是 Access 的功能足夠強大，足以應(yīng)付一般的數(shù)據(jù)管理及處理需要。 Assess 能夠存取 Access/Jet、Microsoft SQL Server、Oracle，或者任何 ODBC 兼容數(shù)據(jù)庫內(nèi)的資料。 OD

18、BC（Open Database Connectivity 開放式數(shù)據(jù)庫互聯(lián)） 是微軟推出的一種工業(yè)標準，一種開放的獨立于廠商的 API 應(yīng)用程序接口，可以跨平 臺訪問各種個人計算機、小型機以及主機系統(tǒng)。ODBC 作為一個工業(yè)標準，絕大多數(shù)數(shù) 據(jù)庫廠商、大多數(shù)應(yīng)用軟件和工具軟件廠商都為自己的產(chǎn)品提供了 ODBC 接口或提供了 ODBC 支持，這其中就包括常用的 SQL SERVER、ORACAL、INFORMIX 等，當然也包括了 Access。 在 ASP 中可以通過三種方式訪問數(shù)據(jù)庫：1、IDC（Internet Database Connector）方式；2、ADO（ActiveX Da

19、ta Objects）方式；3、RDS（Remote Data Service）方式。這三種訪問方式對數(shù)據(jù)庫的訪問都是由 Internet Information Server 完成的。通過 Web 瀏覽器用 HTTP 協(xié)議向 IIS（Internet 信息服務(wù)器）發(fā)送請求， IIS 執(zhí)行對數(shù)據(jù)庫的訪問，并返回一個 HTML 格式的文檔響應(yīng)。以下是 Access 的優(yōu)點： 1存儲方式單一 Access 管理的對象有表、查詢、窗體、報表、頁、宏和模塊，以上對象都存放在 后綴為（.mdb）的數(shù)據(jù)庫文件種，便于用戶的操作和管理。 2面向?qū)ο?Access 是一個面向?qū)ο蟮拈_發(fā)工具，利用面向?qū)ο蟮姆绞?/p>

20、將數(shù)據(jù)庫系統(tǒng)中的各種 功能對象化，將數(shù)據(jù)庫管理的各種功能封裝在各類對象中。它將一個應(yīng)用系統(tǒng)當作是 由一系列對象組成的，對每個對象它都定義一組方法和屬性，以定義該對象的行為和 外國，用戶還可以按需要給對象擴展方法和屬性。通過對象的方法、屬性完成數(shù)據(jù)庫 的操作和管理，極大地簡化了用戶的開發(fā)工作。同時，這種基于面向?qū)ο蟮拈_發(fā)方式， 使得開發(fā)應(yīng)用程序更為簡便。 3界面友好、易操作 Access 是一個可視化工具，是風(fēng)格與 Windows 完全一樣，用戶想要生成對象并應(yīng) 用，只要使用鼠標進行拖放即可，非常直觀方便。系統(tǒng)還提供了表生成器、查詢生成 器、報表設(shè)計器以及數(shù)據(jù)庫向?qū)?、表向?qū)А⒉樵兿驅(qū)А⒋绑w向?qū)А?/p>

21、報表向?qū)У裙ぞ撸?使得操作簡便，容易使用和掌握。 8 4集成環(huán)境、處理多種數(shù)據(jù)信息 Access 基于 Windows 操作系統(tǒng)下的集成開發(fā)環(huán)境，該環(huán)境集成了各種向?qū)Ш蜕?器工具，極大地提高了開發(fā)人員的工作效率，使得建立數(shù)據(jù)庫、創(chuàng)建表、設(shè)計用戶界 面、設(shè)計數(shù)據(jù)查詢、報表打印等可以方便有序地進行。 5Access 支持 ODBC（開發(fā)數(shù)據(jù)庫互連，Open Data Base Connectivity） 。利用 Access 強大的 DDE（動態(tài)數(shù)據(jù)交換）和 OLE（對象的聯(lián)接和嵌入）特性，可以在一個數(shù)據(jù)表中嵌 入位圖、聲音、Excel 表格、Word 文檔，還可以建立動態(tài)的數(shù)據(jù)庫報表和窗體等。

22、Access 還可以將 程序應(yīng)用于網(wǎng)絡(luò)，并與網(wǎng)絡(luò)上的動態(tài)數(shù)據(jù)相聯(lián)接。利用數(shù)據(jù)庫訪問頁對象生成 HTML 文件，輕松 構(gòu)建 Internet/Intranet 的應(yīng)用。 9 第三章第三章 方案初選方案初選 3.13.1 網(wǎng)站網(wǎng)站定位定位 1網(wǎng)站主題 本網(wǎng)站的主題是知識產(chǎn)權(quán)（包括公司注冊、商標注冊、專利申請等等的法律知識） ，給想成立公司、注冊公司、申請專利、注冊商標等的相關(guān)人群予幫助。 2網(wǎng)站名稱 該網(wǎng)站名為“君輝知識產(chǎn)權(quán)代理有限公司”，由此可見，這個企業(yè)網(wǎng)站以知識產(chǎn) 權(quán)的相關(guān)知識為主，“代理有限公司”也突出了該企業(yè)的性質(zhì)即法律服務(wù)行業(yè)。一個 網(wǎng)站的名字應(yīng)該要能反映出你想表達的意思，達到一望而知

23、的效果。 3網(wǎng)站的 Logo 與 Banner 網(wǎng)站的 logo 用藍色水晶球內(nèi)嵌著“junhui”標志，既顯目又明確得表達了主題。 Banner 則形象得表達出我制作設(shè)計這個網(wǎng)站的用意，“君輝知識產(chǎn)權(quán)代理有限公司” 幾個字居中，用大字體強調(diào)顯示，讓人更醒目，右邊小字體“知識產(chǎn)權(quán) 財富之源”是 與主題相呼應(yīng)的，寓意為知識產(chǎn)權(quán)可以創(chuàng)造財富，而我們公司是代理知識產(chǎn)權(quán)的，所 以要找到財富的源頭，就來“君輝知識產(chǎn)權(quán)代理有限公司” 網(wǎng)，讓我?guī)湍弥R產(chǎn)權(quán) 創(chuàng)造財富。最后以透明 flash 覆蓋在 banner 上面，即實現(xiàn)了由“靜”到“動”的效果， 也使原本略顯單調(diào)的 banner 變得豐富一些。 4標

24、準顏色 本網(wǎng)站以藍白色漸變色為底，以藍色為主色調(diào)，藍白的相互點綴，給人一種傾心 的感覺，藍色還是天空和海洋的象征，“廣闊無垠”的藍色也同樣象征著我們“知識 產(chǎn)權(quán)”給人們帶來的財富也“浩瀚無垠” 。 5標準字體 正文字體主要用的是標準的宋體。 3.23.2 系統(tǒng)系統(tǒng)構(gòu)思構(gòu)思 本網(wǎng)站前臺包括首頁、公司簡介、法律服務(wù)、友情鏈接、法界動態(tài)、法律法規(guī)、 在線留言、聯(lián)系我們、網(wǎng)站公告等欄目。以下是系統(tǒng)構(gòu)思的圖解（如圖 3-1） 10 首頁 后 臺 管 理 公 司 簡 介 法 界 動 態(tài) 法 律 法 規(guī) 網(wǎng) 站 公 告 在 線 留 言 法 律 服 務(wù) 友 情 鏈 接 聯(lián) 系 我 們 圖 3-1 網(wǎng)站垂直系統(tǒng)

25、圖 3.33.3 網(wǎng)站網(wǎng)站欄目欄目簡介簡介 本網(wǎng)站的欄目有首頁、公司簡介、法律服務(wù)、友情鏈接、法界動態(tài)、法律法規(guī)、 在線留言、聯(lián)系我們、網(wǎng)站公告等欄目，下面是對各欄目的簡介： 1. 首頁： 我們的 banner 所要表現(xiàn)的就是希望大家能到我們大學(xué)生創(chuàng)業(yè)園來一起學(xué)習(xí) 創(chuàng)業(yè)知識，交流創(chuàng)業(yè)經(jīng)驗。因為這個作品是特別為大學(xué)生設(shè)計的，所以我們的整個 頁面都是顯示出一種大學(xué)生活潑、朝氣以及創(chuàng)業(yè)的激情。同時首頁包含了本站所涉 及的主要內(nèi)容、組成元素、主要話題和網(wǎng)站精髓。 2. 公司簡介： 主要介紹公司的歷史文化及服務(wù)內(nèi)容。 3. 法律服務(wù)： 簡單羅列了公司受理的業(yè)務(wù)，如公司注冊、商標注冊、專利申請、電 子口岸

26、、版權(quán)代理等等。 4. 友情鏈接： 這個欄目主要是為了方便用戶了解有關(guān)商標、專利等知識產(chǎn)權(quán)方面的 知識而與相關(guān)政府部門網(wǎng)站建立的友情鏈接。 5. 法界動態(tài)： 我們特別收集了國家知識產(chǎn)權(quán)網(wǎng)上的最新信息，讓大家能及時了解到 我國知識產(chǎn)權(quán)的最新動態(tài)。 6. 法律法規(guī)： 這個欄目主要列舉了有關(guān)知識產(chǎn)權(quán)方面的相關(guān)法律及法規(guī)，如“中華 人民共和國專利法”等，使用戶對專利法等相關(guān)法律知識有一定的了解。 7. 在線留言： 此欄目設(shè)立的主要目的是為了提供給想了解知識產(chǎn)權(quán)的用戶一個互動 的平臺，用以解決知識產(chǎn)權(quán)的相關(guān)問題。（如圖 3-2） 8. 聯(lián)系我們： 通過這個欄目，可以讓用戶獲得我們的各種聯(lián)系方式，這樣可以

27、更深 一步的與其探討知識產(chǎn)權(quán)的問題。 9. 網(wǎng)站公告： 除了單獨設(shè)立這個欄目外，我還特意在每張頁面的左側(cè)做了一個由下 而上的滾動公告欄來吸引大家的眼球，鼠標滑過滾動文字停留，鼠標點擊后超鏈接 至“網(wǎng)站公告”這個欄目，內(nèi)容主要為公司的最新的動態(tài)。（如圖 3-2） 11 圖 3-2 第四章第四章 詳細設(shè)計詳細設(shè)計 4.14.1 網(wǎng)站網(wǎng)站制作制作過程過程 .1 logologo 的制作過程的制作過程 本網(wǎng)站的 Logo 是把從網(wǎng)絡(luò)上找到的一些素材圖片，通過用 Photoshop 進行編 輯、修改、組合而完成的。為了突出該企業(yè)名稱“君輝”，特意把“junhui”標志 用藍色水晶球包圍，

28、并且“junhui”中“J”這個字母用一個龍頭的形狀代替，自 古以來龍在人們的地位都是至高無上的，同時也襯托出“知識產(chǎn)權(quán)”在當今社會的 重要地位。在整個以藍色為主色調(diào)的網(wǎng)頁中，調(diào)劑整體頁面的色調(diào)，使頁面看起來 更鮮活，很是醒目，讓人一眼就看到這個 logo，了解主題。（如圖 4-1） 12 圖 4-1 網(wǎng)站 logo .2 bannerbanner 的制作過程的制作過程 1. 首先需要上網(wǎng)收集一些符合你的作品主題、創(chuàng)作思維以及整體風(fēng)格的網(wǎng)頁 相關(guān)素材，對其進行修改已獲得自己所需素材，或可在 Photoshop 中繪制出自己 所需的圖片素材。 2. 接著打開 Photoshop，

29、在 Photoshop 里面新建一個文件，調(diào)整底圖大小， 根據(jù)網(wǎng)頁的總長度，調(diào)節(jié) banner 的長度和寬度（一般 banner 不能太寬，不然會 顯得頭重腳輕，當然也不能太窄，都沒法讓人感覺到有 banner 存在，所以一定要 調(diào)整至占整個網(wǎng)頁的適合比例。） 3. 設(shè)計 banner 的背景：選用一張藍色的微帶波橫的圖片為 banner 背景，將 處理好的素材依次放入具體位子，像左邊的鏡頭光暈，右邊的發(fā)光矩形框等等， 按具體需求做具體的改動和修改，這樣整個 banner 的背景就設(shè)計好了。 4. 具體內(nèi)容設(shè)計：先在 banner 左邊放入 logo（這里為了美觀起見，我將 logo 放大放在

30、了 banner 最左邊，若放在左上角一塊窄小的地方，反而凸顯不出 “junhui”這個標志），按具體情況驚醒調(diào)整修改至適當部分，處理好每一處細 節(jié)，這樣整個靜態(tài)的 banner 部分就設(shè)計好了。 5. 添加動態(tài)的 flash 效果：動態(tài)的 flash 效果要等到整個網(wǎng)頁的基本布局都 設(shè)計好之后，就可以在 Photoshop 中按 Shift+Ctrl+Alt+S 存儲切片后所有圖片， 將頁面轉(zhuǎn)換成.html 格式，然后使用 Dreamweaver 打開編輯，在 banner 的區(qū)域加 入 Flash，將 Flash 轉(zhuǎn)換為透明 flash 形式，這樣整個 banner 部分就完成了。 （如圖

31、 4-2） 圖 4-2 網(wǎng)站 banner 13 .3 主頁制作過程主頁制作過程( (詳見圖詳見圖 4-3)4-3) 1. 首先根據(jù)頁面要展示內(nèi)容的多少，在 photoshop 中新建一個適合的網(wǎng)頁寬度和 長度的文件（我設(shè)計的時候在寬屏的機子上，所以建的文檔較大，約為 1280*1405）。 2. 在畫布上按自己的想法結(jié)合實際內(nèi)容，用各圖形工具在畫布上畫上整個網(wǎng)頁基 本的布局。 3. 基本布局的設(shè)計定下之后再對各部分進行具體設(shè)計，細化每個部分，特別是靜 態(tài)的部分。 4. 在 Photoshop 里完成整個頁面的設(shè)計后，進行切片，將要動態(tài)顯示的地方切出 來，還有就是大的圖片要切一

32、下，能提高網(wǎng)頁讀取速度。按 Shift+Ctrl+Alt+S 存儲為. html 格式后，用 Dreamweaver 編輯，將需要作為背景的單元格中的圖片設(shè)為該單元格 的背景，另存為 index.asp。用相同的方法制作網(wǎng)站分頁。 5. 將所有頁面，拷到所屬文件夾，然后與后臺數(shù)據(jù)庫連接起來，即可通過對后臺 數(shù)據(jù)庫內(nèi)容的添加、刪除、修改來對網(wǎng)頁的相關(guān)內(nèi)容進行操作，例如在數(shù)據(jù)庫注冊登 錄表中刪除一個用戶信息，那么這個用戶再次用原先的登錄信息登錄時就無法登錄成 功了。 6. 在 Dreamweaver 中網(wǎng)頁的左側(cè)類似“書卷”的區(qū)域插入一張表格，并在代碼相 應(yīng)位置插入滾動文字特效的代碼，實現(xiàn)文字至下

33、而上滾動，鼠標移過文字時滾動停留 的功能，鼠標按下即跳轉(zhuǎn)到“網(wǎng)站公告”頁面；在網(wǎng)站首頁頂端插入滾動的歡迎字幕， 方法同上。 7. 在 Dreamweaver8.0 里打開主頁面，在頁面中相對應(yīng)除插入圖片切換的代碼， 實現(xiàn)新聞圖片的自動切換的效果。 8. 在 Dreamweaver8.0 里打開主頁面，切換到設(shè)計視圖，將雪花鼠標特效代碼復(fù) 制在之間，保存并預(yù)覽，完成首頁鼠標特效。 14 圖 4-3 網(wǎng)站首頁 4.1.4 留言板的設(shè)計留言板的設(shè)計 為了能讓大家有一個相互探討、分享知識產(chǎn)權(quán)方面的心得與經(jīng)驗的平臺，為了能 讓廣大人群更好、更深刻的了解知識產(chǎn)權(quán)，為此，我們特別設(shè)立了“在線留言”這一 欄目

34、，如果你有什么和知識產(chǎn)權(quán)有關(guān)的問題或者想法，可以在這里留言，我們將會有 專門的指導(dǎo)老師或者有識之士會及時給予回復(fù)與解答，與此同時你也可以解答或回復(fù) 15 他人遇到的問題。這樣就實現(xiàn)了多人的互動。 總體來說，留言板功能是這個網(wǎng)站的主要功能之一，也是這個網(wǎng)站的亮點之一， 它讓整個網(wǎng)站的功能得到提升，使其不單單只是一個簡單的單純的信息發(fā)布的網(wǎng)站， 增加了互動環(huán)節(jié)。 （如圖 4-4） （留言頁面） （查看留言內(nèi)容及回復(fù)頁面） 16 圖 4-4 留言板 4.24.2 數(shù)據(jù)庫的設(shè)計數(shù)據(jù)庫的設(shè)計 使用 Access 2003 實現(xiàn)關(guān)系型數(shù)據(jù)庫，以下是數(shù)據(jù)庫中幾個主要的表的設(shè)計： 1、登錄注冊管理 存儲了注冊

35、登錄用戶的基本信息，如用戶名、密碼、地址、郵箱等。 （如圖 4-5） 圖 4-5 圖 4-6 2、留言板 17 存儲了留言的檔案，其中 id 是關(guān)鍵字，主要實現(xiàn)用戶信息管理、留言及回復(fù)等。 （如圖 4-7） （留言信息存儲表） （回復(fù)信息儲存表） 圖 4-7 創(chuàng)建好數(shù)據(jù)庫之后，我們來用 ASP 把程序和數(shù)據(jù)庫連接起來，以后就可以連接到 數(shù)據(jù)庫、在 ASP 中顯示數(shù)據(jù)庫中的數(shù)據(jù)。 4.34.3 系統(tǒng)實現(xiàn)代碼系統(tǒng)實現(xiàn)代碼 4.3.1 滾動文字特效滾動文字特效（這里主要指網(wǎng)站左側(cè)的“公司公告” ） document.write () 18 document.write (公司公告) document

36、.write () document.write (1. 商標轉(zhuǎn)讓君輝知識 ) document.write (2. 法律服務(wù)簡介 2010 ) document.write (3. 我們的法律服務(wù)(最新）) document.write (4. 招聘專利代理人 ) document.write (5. 本所代理中國馳名商標 ) document.write (6. 賀本司商標專利部喜遷 ) document.write () document.write ( ) 4.3.2 圖片切換圖片切換 4.3.3 首頁鼠標特效代碼首頁鼠標特效代碼 BODYoverflow:scroll;overflo

37、w-x:hidden;.s1position : absolute; font-size : 12pt; color : blue; visibility: hidden;.s2 position : absolute; font-size : 20pt; color : green; visibility : hidden; .s3 position : absolute; font-size : 16pt; color : gold; visibility : hidden;.s4 position : absolute; font-size : 14pt; color : lime; v

38、isibility : hidden; * * * * var nav = (document.layers); var tmr = null; var spd = 50; 19 var x = 0; var x_offset = 5; var y = 0; var y_offset = 15; if(nav) document.captureEvents(Event.MOUSEMOVE); document.onmousemove = get_mouse; function get_mouse(e) x = (nav) ? e.pageX : event.clientX+document.b

39、ody.scrollLeft; y = (nav) ? e.pageY : event.clientY+document.body.scrollTop; x += x_offset; y += y_offset; beam(1); function beam(n) if(n0) if(nav)eval(document.div+n+.visibility=hidden); 20 else eval(div+n+.style.visibility=hidden); n-; tmr=setTimeout(fade(+n+),spd); else clearTimeout(tmr); 結(jié)束語 經(jīng)過一段時間的學(xué)習(xí)與