企業(yè)網(wǎng)站畢業(yè)設(shè)計(jì)論文_第1頁
已閱讀1頁,還剩19頁未讀, 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

1、<p>  企業(yè)網(wǎng)站的設(shè)計(jì)與制作</p><p><b>  摘要:2</b></p><p><b>  關(guān)鍵字:2</b></p><p><b>  第一章 緒言3</b></p><p>  第二章 網(wǎng)站設(shè)計(jì)分析4</p><p&g

2、t;  2.1網(wǎng)站設(shè)計(jì)概述4</p><p>  2.2 開發(fā)工具的選用及介紹4</p><p>  2.2.1 Dreamweaver8.04</p><p>  2.2.2 Photoshop CS5</p><p>  2.2.3 ASP動態(tài)網(wǎng)站腳本語言6</p><p>  2.3 關(guān)系型數(shù)據(jù)庫的選擇

3、7</p><p>  2.3.1 Microsoft Office Access簡介7</p><p>  3.1 網(wǎng)站定位9</p><p>  3.2 系統(tǒng)構(gòu)思9</p><p>  3.3 網(wǎng)站欄目簡介10</p><p>  第四章 詳細(xì)設(shè)計(jì)11</p><p>  4.1

4、 網(wǎng)站制作過程11</p><p>  4.1.1 logo的制作過程11</p><p>  4.1.2 banner的制作過程12</p><p>  4.1.3 主頁制作過程(詳見圖4-3)13</p><p>  4.1.4留言板的設(shè)計(jì)14</p><p>  4.2 數(shù)據(jù)庫的設(shè)計(jì)16</p&

5、gt;<p>  4.3 系統(tǒng)實(shí)現(xiàn)代碼17</p><p>  4.3.1 滾動文字特效(這里主要指網(wǎng)站左側(cè)的“公司公告”)17</p><p>  4.3.2 圖片切換18</p><p>  4.3.3 首頁鼠標(biāo)特效代碼19</p><p><b>  結(jié)束語21</b></p>

6、<p><b>  參考文獻(xiàn)21</b></p><p><b>  致謝21</b></p><p><b>  摘要:</b></p><p>  本文就網(wǎng)站的主題內(nèi)容及網(wǎng)站的制作與設(shè)計(jì)這兩方面進(jìn)行描述與分析。</p><p>  本網(wǎng)站的主題知識產(chǎn)權(quán)服務(wù),

7、整個(gè)網(wǎng)站都是以法律性的內(nèi)容為主的,主要包括了首頁、公司簡介、法律服務(wù)、友情鏈接、法界動態(tài)、法律法規(guī)、在線留言、聯(lián)系我們、網(wǎng)站公告等欄目。在整個(gè)設(shè)計(jì)過程中主要是運(yùn)用Dreamweaver、ACCESS、ASP等編寫的。通過本網(wǎng)站系統(tǒng),給想了解知識產(chǎn)權(quán)的人群提供了一個(gè)良好的平臺,同時(shí)也為有意愿注冊公司、注冊商標(biāo)、申請專利,卻無從咨詢的人提供了一個(gè)可以互動解決問題的平臺。</p><p>  如今,在網(wǎng)絡(luò)技術(shù)的迅猛發(fā)展

8、下,互聯(lián)網(wǎng)的不斷普及,讓人們都感受到網(wǎng)絡(luò)的方便快捷,從而大家都喜歡選擇從互聯(lián)網(wǎng)上獲取信息,因此,互聯(lián)網(wǎng)逐漸成為一個(gè)寬廣的信息發(fā)布平臺和獲取信息的平臺。本網(wǎng)站也需要通過Internet來對外宣傳、普及,從而幫助到更多想了解知識產(chǎn)權(quán)的人們。</p><p>  本網(wǎng)站主要是以建立Dreamweaver、ACCESS、ASP等技術(shù)的動態(tài)網(wǎng)站管理系統(tǒng)的前臺表現(xiàn)模塊,使用了ASP技術(shù)的動態(tài)網(wǎng)頁技術(shù),加上ACCESS作為后臺

9、數(shù)據(jù)庫,制作了一個(gè)簡單的服務(wù)性企業(yè)網(wǎng)站系統(tǒng),實(shí)現(xiàn)了企業(yè)網(wǎng)站的基本功能,例如用戶注冊登錄,留言板的實(shí)現(xiàn)等。</p><p><b>  關(guān)鍵字:</b></p><p>  企業(yè)網(wǎng)站;ASP;知識產(chǎn)權(quán)</p><p><b>  緒言</b></p><p>  二十世紀(jì)進(jìn)入信息發(fā)展高速路,數(shù)碼化革命

10、給所有領(lǐng)域帶來新的改變。隨著電腦辦公自動化的普及,電子商務(wù)應(yīng)運(yùn)而生,一切都?xì)w功于internet的巨大貢獻(xiàn),互聯(lián)網(wǎng)的世界里蘊(yùn)藏?zé)o限生機(jī),這里只有想不到的、沒有做不到的。由于國際互聯(lián)網(wǎng)是一個(gè)不受時(shí)空限制的信息交換系統(tǒng),所以它是目前最直接、最豐富和最快捷的聯(lián)系方式,信息溝通的高效率為企業(yè)帶來了最大的方便。所以在現(xiàn)今社會對于一個(gè)企業(yè)來說,網(wǎng)站已經(jīng)是不可缺少的一部分了。</p><p>  現(xiàn)今,知識產(chǎn)權(quán)越來越被人們關(guān)注

11、,隨著就業(yè)壓力的加重,越來越多的年輕人選擇自己創(chuàng)業(yè)開公司,大學(xué)生也占了一定的比例,由于專業(yè)的限定,有些大學(xué)生在?;旧辖佑|不到知識產(chǎn)權(quán)的知識,當(dāng)然在社會上的人群也不一定都了解知識產(chǎn)權(quán)。同時(shí)隨著互聯(lián)網(wǎng)的快速發(fā)展和不斷普及,網(wǎng)站成了傳播信息最有效的平臺。所以我制作了一個(gè)專門針對知識產(chǎn)權(quán)行業(yè)的企業(yè)網(wǎng)站,給這些人群提供了一個(gè)了解和學(xué)習(xí)知識產(chǎn)權(quán)的平臺,當(dāng)然對于一個(gè)針對知識產(chǎn)權(quán)的服務(wù)性企業(yè)本身而言,這個(gè)網(wǎng)站將會對其自身帶來不可估量的效用。</

12、p><p>  社會在發(fā)展,人們的思想觀念,生活方式也在發(fā)展,通過網(wǎng)站這種方式與企業(yè)或者他人交流已經(jīng)趨向普及第二章 網(wǎng)站設(shè)計(jì)分析</p><p>  網(wǎng)站的設(shè)計(jì)與制作需要用到網(wǎng)頁三劍客(Dreamweaver、fireworks、flash),IIS,photoshop等工具。所以首先我們要了解這些工具的功能與用處,然后要能夠熟練得掌握這些工具用法,只有你能熟練使用這些工具,你才能在設(shè)計(jì)過程中

13、盡量避免技術(shù)上的問題,提高效率,做到“事半功倍”。</p><p><b>  2.1網(wǎng)站設(shè)計(jì)概述</b></p><p>  網(wǎng)站首頁可以說是網(wǎng)站的門面,大家瀏覽你的網(wǎng)站首先看到的就是網(wǎng)站首頁,所以首頁不僅要做得美觀,引人瀏覽,還要有豐富的內(nèi)容。所以我們在首頁就首頁聚集了大量的信息,除了最基本的法律法規(guī)、法界動態(tài)、法律服務(wù)這些欄目外,我還將公司的公告用滾動文字的形式

14、展現(xiàn)出來,這樣靜中有“動”的效果可以抓住人的眼球,吸引人去點(diǎn)擊。每頁左下方都有我們的聯(lián)系方式,這樣就不用轉(zhuǎn)到聯(lián)系我們這張頁面都能獲取到公司的聯(lián)系方式了,當(dāng)然若想更深入的了解就可以轉(zhuǎn)到聯(lián)系我們頁面。子頁面的框架基本上是符合整個(gè)網(wǎng)站的整體風(fēng)格的,banner,導(dǎo)航等都是和首頁一樣的,不一樣的只是正文的內(nèi)容,這個(gè)可以通過模板來實(shí)現(xiàn)。出于排除對模板可編輯區(qū)域排版的復(fù)雜性起見,我這里沒有運(yùn)用模板,而是用另存為的方式實(shí)現(xiàn)網(wǎng)頁風(fēng)格“統(tǒng)一化”的。在網(wǎng)站

15、的各頁面制作好后,我在Dreamweaver中與Access數(shù)據(jù)庫建立連接,通過在Dreamweaver的一系列操作實(shí)現(xiàn)注冊登錄的功能,而留言板功能我是通過一張空白的寫有后臺代碼的頁面轉(zhuǎn)接過去的,名為handle.asp,用戶可以通過“在線留言”在網(wǎng)站上發(fā)表自己的見解或疑問,達(dá)到互動的效果。</p><p>  2.2 開發(fā)工具的選用及介紹</p><p>  2.2.1 Dreamwea

16、ver8.0</p><p>  Dreamweaver是創(chuàng)建和管理網(wǎng)頁的專業(yè)化可視編輯器,在網(wǎng)頁設(shè)計(jì)與制作領(lǐng)域中用戶最多、應(yīng)用最廣、功能最強(qiáng)大的軟件,隨著Dreamweaver 8的發(fā)布,更堅(jiān)定Dreamweaver在該領(lǐng)域的地位。它集網(wǎng)頁設(shè)計(jì)、網(wǎng)站開發(fā)和站點(diǎn)管理功能于一身,具有可視化、支持多平臺和跨瀏覽器的特性,是目前網(wǎng)站設(shè)計(jì)、開發(fā)、制作的首選工具。</p><p><b>

17、  1、靈活的編寫方式</b></p><p>  Dreamweaver具有靈活編寫網(wǎng)頁的特點(diǎn),不但將世界一流水平的“設(shè)計(jì)”和“代碼”編輯器合二為一,而且在設(shè)計(jì)窗口中還精化了源代碼,能幫助用戶按工作需要定制自己的用戶界面。</p><p><b>  2、可視化編輯界面</b></p><p>  Dreamweaver是一種所見

18、即所得的HTML編輯器,可實(shí)現(xiàn)頁面元素的插入和生成?;蛞暬庉嫮h(huán)境大量減少了代碼的編寫,同時(shí)亦保證了其專業(yè)性和兼容性,并且可以對內(nèi)部的HTML編輯器和任何第三方的HTML編輯器進(jìn)行實(shí)時(shí)的訪問。無論用戶習(xí)慣手工輸入HTML源代碼還是使用可視化的編輯界面,Dreamweaver都能提供便捷的方式使用戶設(shè)計(jì)網(wǎng)頁和管理網(wǎng)站變得更容易。</p><p>  3、功能更多的CSS支持——CSS可視化設(shè)計(jì)、CSS檢查工具<

19、;/p><p>  4、動態(tài)跨瀏覽器驗(yàn)證</p><p>  當(dāng)保存時(shí)系統(tǒng)自動檢查當(dāng)前文檔的跨瀏覽器有效性,可以指定何種瀏覽器為測試用瀏覽器,同時(shí)系統(tǒng)自動檢驗(yàn)以確定頁面有沒有目標(biāo)瀏覽器不支持的tags或CSS結(jié)構(gòu)。動態(tài)跨瀏覽器有效性檢查功能可以自動核對tags和CSS規(guī)則是否適應(yīng)目前的主瀏覽器。</p><p>  5、強(qiáng)大的WEB站點(diǎn)管理功能</p>&

20、lt;p>  6、內(nèi)建的圖形編輯引擎</p><p>  7、Dreamweaver的集成特性</p><p>  Dreamweaver 8繼承了Fireworks、Flash和Shockwave的集成特性,可以在這些Web創(chuàng)作工具之間自由地切換,輕松地創(chuàng)建美觀實(shí)用的網(wǎng)頁。</p><p>  8、豐富的媒體支持能力</p><p>

21、  可以方便地加入Java、Flash、Shockwave、ActiveX以及其他媒體。Dreamweaver具有強(qiáng)大的多媒體處理功能,在設(shè)計(jì)DHTML和CSS方面表現(xiàn)得極為出色,它利用JavaScript和DHTML語言代碼輕松地實(shí)現(xiàn)網(wǎng)頁元素的動作和交互操作。Dreamweaver還提供行為和時(shí)間線兩種控件來產(chǎn)生交互式響應(yīng)和進(jìn)行動畫處理。</p><p><b>  9、超強(qiáng)的擴(kuò)展能力</b&g

22、t;</p><p>  Dreamweaver還支持第三方插件,任何人都可以根據(jù)自己的需要擴(kuò)展Dreamweaver的功能,并且可以發(fā)布這些插件。</p><p>  2.2.2 Photoshop CS</p><p>  Photoshop CS是一款圖形、圖像編輯軟件,在網(wǎng)頁設(shè)計(jì)領(lǐng)域被廣泛得應(yīng)用。以下是其10大最新功能:</p><p&g

23、t;  1、改進(jìn)的文件瀏覽器</p><p>  使用功能強(qiáng)大文件瀏覽器的可以快速預(yù)覽、標(biāo)注和排序圖片;搜索或編輯圖像的數(shù)據(jù)元或關(guān)鍵詞;并且可以自動批量共享文件。</p><p><b>  2、匹配顏色命令</b></p><p>  可以迅速從一張圖片的顏色校正另外一張圖像的顏色。</p><p><b>

24、  3、直方圖調(diào)色板</b></p><p>  隨時(shí)根據(jù)對圖像的調(diào)整更新直方圖調(diào)色板(Histogram Palette)。</p><p>  4、陰影/加亮區(qū)修正</p><p>  使用“陰影/加亮區(qū)修正(hadow/Highlight correction)”可以快速調(diào)整照片中曝光過渡或欠缺的區(qū)域。</p><p>&l

25、t;b>  5、沿路徑放置文本</b></p><p>  可以像在Illustrator中一樣把文本沿著路徑放置,并且你還可以在Illustrator直接編輯文本。</p><p>  6、支持?jǐn)?shù)碼相機(jī)的raw模式</p><p>  支持多款數(shù)碼相機(jī)得raw模式,讓用戶可以得到更真實(shí)的圖像輸入。</p><p>  7、

26、全面支持16位圖像</p><p>  可以在主要功能、層、比刷、文字、圖形等中精確的編輯、潤飾16位的圖像。</p><p>  8、Layer Comps</p><p>  可以在一個(gè)文件中保存不同層的合并效果,以便對各種效果進(jìn)行快速察看。</p><p>  9、輸入Flash文件</p><p>  使用Im

27、ageReady可以創(chuàng)建flash矢量文件。</p><p><b>  10、自定義快捷鍵</b></p><p>  用戶可以按照自己的習(xí)慣定義Photoshop的快捷鍵。</p><p>  2.2.3 ASP動態(tài)網(wǎng)站腳本語言</p><p>  ASP是Active Server Page的縮寫,意為“動態(tài)服務(wù)器

28、頁面”。ASP是微軟公司開發(fā)的代替CGI腳本程序的一種應(yīng)用,它可以與數(shù)據(jù)庫和其它程序進(jìn)行交互,是一種簡單、方便的編程工具。ASP的網(wǎng)頁文件的格式是.asp,現(xiàn)在常用于各種動態(tài)網(wǎng)站中。ASP采用腳本語言VBScript(Java script)作為自己的開發(fā)語言。</p><p>  ASP是一種服務(wù)器端腳本編寫環(huán)境,可以用來創(chuàng)建和運(yùn)行動態(tài)網(wǎng)頁或Web應(yīng)用程序。使用 ASP 可以組合 HTML頁、VBScript腳

29、本命令和JavaScript腳本命令等,以創(chuàng)建交互的 Web 頁和基于 Web 的功能強(qiáng)大的應(yīng)用程序。ASP網(wǎng)頁可以包含HTML標(biāo)記、普通文本、腳本命令以及COM組件等。利用ASP可以向網(wǎng)頁中添加交互式內(nèi)容(如在線表單),也可以創(chuàng)建使用HTML網(wǎng)頁作為用戶界面的web應(yīng)用程序。</p><p>  ASP的文件后綴名為.asp,以區(qū)別于同樣可以包含Script的HTML 文件。一個(gè).asp文件是一個(gè)文本文件,可以

30、包括下列元素的任意組合: 文本(text)、HTML標(biāo)志(tags)、Script命令</p><p>  由于腳本程序是在服務(wù)器上而不是在客戶端運(yùn)行,傳送到瀏覽器上的 Web 頁是在 Web 服務(wù)器上生成的。所以不必?fù)?dān)心瀏覽器能否處理腳本:Web 服務(wù)器已經(jīng)完成了所有腳本的處理,并將標(biāo)準(zhǔn)的 HTML 頁面?zhèn)鬏數(shù)綖g覽器。由于只有腳本的結(jié)果返回到瀏覽器,所以服務(wù)器端腳本不易被別人復(fù)制。用戶看不到創(chuàng)建他們正在瀏覽的頁

31、的腳本命令。</p><p>  2.3 關(guān)系型數(shù)據(jù)庫的選擇</p><p>  2.3.1 Microsoft Office Access簡介</p><p>  Microsoft Office Access是由微軟發(fā)布的關(guān)聯(lián)式數(shù)據(jù)庫管理系統(tǒng),是集成在microsoft公司開發(fā)的產(chǎn)品更新?lián)Q代office系統(tǒng)中的集成軟件。它之所以被集成到Office中而不是Vis

32、ual Studio中,是因?yàn)樗c其它的數(shù)據(jù)庫管理系統(tǒng)(如Visual FoxPro)相比更加簡單易學(xué),一個(gè)普通的計(jì)算機(jī)用戶即可掌握并使用它。而且最重要的一點(diǎn)是Access的功能足夠強(qiáng)大,足以應(yīng)付一般的數(shù)據(jù)管理及處理需要。</p><p>  Assess能夠存取 Access/Jet、Microsoft SQL Server、Oracle,或者任何 ODBC兼容數(shù)據(jù)庫內(nèi)的資料。ODBC(Open Databas

33、e Connectivity開放式數(shù)據(jù)庫互聯(lián))是微軟推出的一種工業(yè)標(biāo)準(zhǔn),一種開放的獨(dú)立于廠商的API應(yīng)用程序接口,可以跨平臺訪問各種個(gè)人計(jì)算機(jī)、小型機(jī)以及主機(jī)系統(tǒng)。ODBC作為一個(gè)工業(yè)標(biāo)準(zhǔn),絕大多數(shù)數(shù)據(jù)庫廠商、大多數(shù)應(yīng)用軟件和工具軟件廠商都為自己的產(chǎn)品提供了ODBC接口或提供了ODBC支持,這其中就包括常用的SQL SERVER、ORACAL、INFORMIX等,當(dāng)然也包括了Access。</p><p>  在

34、ASP中可以通過三種方式訪問數(shù)據(jù)庫:1、IDC(Internet Database Connector)方式;2、ADO(ActiveX Data Objects)方式;3、RDS(Remote Data Service)方式。這三種訪問方式對數(shù)據(jù)庫的訪問都是由Internet Information Server完成的。通過Web瀏覽器用HTTP協(xié)議向IIS(Internet信息服務(wù)器)發(fā)送請求,IIS執(zhí)行對數(shù)據(jù)庫的訪問,并返回一個(gè)H

35、TML格式的文檔響應(yīng)。以下是Access的優(yōu)點(diǎn):</p><p><b>  1.存儲方式單一</b></p><p>  Access管理的對象有表、查詢、窗體、報(bào)表、頁、宏和模塊,以上對象都存放在后綴為(.mdb)的數(shù)據(jù)庫文件種,便于用戶的操作和管理。</p><p><b>  2.面向?qū)ο?lt;/b></p>

36、;<p>  Access是一個(gè)面向?qū)ο蟮拈_發(fā)工具,利用面向?qū)ο蟮姆绞綄?shù)據(jù)庫系統(tǒng)中的各種功能對象化,將數(shù)據(jù)庫管理的各種功能封裝在各類對象中。它將一個(gè)應(yīng)用系統(tǒng)當(dāng)作是由一系列對象組成的,對每個(gè)對象它都定義一組方法和屬性,以定義該對象的行為和外國,用戶還可以按需要給對象擴(kuò)展方法和屬性。通過對象的方法、屬性完成數(shù)據(jù)庫的操作和管理,極大地簡化了用戶的開發(fā)工作。同時(shí),這種基于面向?qū)ο蟮拈_發(fā)方式,使得開發(fā)應(yīng)用程序更為簡便。</p

37、><p>  3.界面友好、易操作</p><p>  Access是一個(gè)可視化工具,是風(fēng)格與Windows完全一樣,用戶想要生成對象并應(yīng)用,只要使用鼠標(biāo)進(jìn)行拖放即可,非常直觀方便。系統(tǒng)還提供了表生成器、查詢生成器、報(bào)表設(shè)計(jì)器以及數(shù)據(jù)庫向?qū)?、表向?qū)?、查詢向?qū)?、窗體向?qū)?、?bào)表向?qū)У裙ぞ?,使得操作簡便,容易使用和掌握?lt;/p><p>  4.集成環(huán)境、處理多種數(shù)據(jù)信息&l

38、t;/p><p>  Access基于Windows操作系統(tǒng)下的集成開發(fā)環(huán)境,該環(huán)境集成了各種向?qū)Ш蜕善鞴ぞ?,極大地提高了開發(fā)人員的工作效率,使得建立數(shù)據(jù)庫、創(chuàng)建表、設(shè)計(jì)用戶界面、設(shè)計(jì)數(shù)據(jù)查詢、報(bào)表打印等可以方便有序地進(jìn)行。</p><p>  5.Access支持ODBC(開發(fā)數(shù)據(jù)庫互連,Open Data Base Connectivity)。利用Access強(qiáng)大的DDE(動態(tài)數(shù)據(jù)交換)

39、和OLE(對象的聯(lián)接和嵌入)特性,可以在一個(gè)數(shù)據(jù)表中嵌入位圖、聲音、Excel表格、Word文檔,還可以建立動態(tài)的數(shù)據(jù)庫報(bào)表和窗體等。Access還可以將程序應(yīng)用于網(wǎng)絡(luò),并與網(wǎng)絡(luò)上的動態(tài)數(shù)據(jù)相聯(lián)接。利用數(shù)據(jù)庫訪問頁對象生成HTML文件,輕松構(gòu)建Internet/Intranet的應(yīng)用。第三章 方案初選</p><p><b>  3.1 網(wǎng)站定位</b></p><p&g

40、t;<b>  1.網(wǎng)站主題</b></p><p>  本網(wǎng)站的主題是知識產(chǎn)權(quán)(包括公司注冊、商標(biāo)注冊、專利申請等等的法律知識),給想成立公司、注冊公司、申請專利、注冊商標(biāo)等的相關(guān)人群予幫助。</p><p><b>  2.網(wǎng)站名稱</b></p><p>  該網(wǎng)站名為“君輝知識產(chǎn)權(quán)代理有限公司”,由此可見,這個(gè)企業(yè)

41、網(wǎng)站以知識產(chǎn)權(quán)的相關(guān)知識為主,“代理有限公司”也突出了該企業(yè)的性質(zhì)即法律服務(wù)行業(yè)。一個(gè)網(wǎng)站的名字應(yīng)該要能反映出你想表達(dá)的意思,達(dá)到一望而知的效果。</p><p>  3.網(wǎng)站的Logo與Banner</p><p>  網(wǎng)站的logo用藍(lán)色水晶球內(nèi)嵌著“junhui”標(biāo)志,既顯目又明確得表達(dá)了主題。Banner則形象得表達(dá)出我制作設(shè)計(jì)這個(gè)網(wǎng)站的用意,“君輝知識產(chǎn)權(quán)代理有限公司”幾個(gè)字居中

42、,用大字體強(qiáng)調(diào)顯示,讓人更醒目,右邊小字體“知識產(chǎn)權(quán) 財(cái)富之源”是與主題相呼應(yīng)的,寓意為知識產(chǎn)權(quán)可以創(chuàng)造財(cái)富,而我們公司是代理知識產(chǎn)權(quán)的,所以要找到財(cái)富的源頭,就來“君輝知識產(chǎn)權(quán)代理有限公司” 網(wǎng),讓我?guī)湍弥R產(chǎn)權(quán)創(chuàng)造財(cái)富。最后以透明flash覆蓋在banner上面,即實(shí)現(xiàn)了由“靜”到“動”的效果,也使原本略顯單調(diào)的banner變得豐富一些。</p><p><b>  4.標(biāo)準(zhǔn)顏色</b>

43、;</p><p>  本網(wǎng)站以藍(lán)白色漸變色為底,以藍(lán)色為主色調(diào),藍(lán)白的相互點(diǎn)綴,給人一種傾心的感覺,藍(lán)色還是天空和海洋的象征,“廣闊無垠”的藍(lán)色也同樣象征著我們“知識產(chǎn)權(quán)”給人們帶來的財(cái)富也“浩瀚無垠”。</p><p><b>  5.標(biāo)準(zhǔn)字體</b></p><p>  正文字體主要用的是標(biāo)準(zhǔn)的宋體。</p><p&g

44、t;<b>  3.2 系統(tǒng)構(gòu)思</b></p><p>  本網(wǎng)站前臺包括首頁、公司簡介、法律服務(wù)、友情鏈接、法界動態(tài)、法律法規(guī)、在線留言、聯(lián)系我們、網(wǎng)站公告等欄目。以下是系統(tǒng)構(gòu)思的圖解(如圖3-1)</p><p>  圖3-1網(wǎng)站垂直系統(tǒng)圖</p><p>  3.3 網(wǎng)站欄目簡介 </p><p>  本網(wǎng)站

45、的欄目有首頁、公司簡介、法律服務(wù)、友情鏈接、法界動態(tài)、法律法規(guī)、在線留言、聯(lián)系我們、網(wǎng)站公告等欄目,下面是對各欄目的簡介:</p><p>  首頁: 我們的banner所要表現(xiàn)的就是希望大家能到我們大學(xué)生創(chuàng)業(yè)園來一起學(xué)習(xí)創(chuàng)業(yè)知識,交流創(chuàng)業(yè)經(jīng)驗(yàn)。因?yàn)檫@個(gè)作品是特別為大學(xué)生設(shè)計(jì)的,所以我們的整個(gè)頁面都是顯示出一種大學(xué)生活潑、朝氣以及創(chuàng)業(yè)的激情。同時(shí)首頁包含了本站所涉及的主要內(nèi)容、組成元素、主要話題和網(wǎng)站精髓。<

46、;/p><p>  公司簡介: 主要介紹公司的歷史文化及服務(wù)內(nèi)容。</p><p>  法律服務(wù): 簡單羅列了公司受理的業(yè)務(wù),如公司注冊、商標(biāo)注冊、專利申請、電子口岸、版權(quán)代理等等。</p><p>  友情鏈接: 這個(gè)欄目主要是為了方便用戶了解有關(guān)商標(biāo)、專利等知識產(chǎn)權(quán)方面的知識而與相關(guān)政府部門網(wǎng)站建立的友情鏈接。</p><p>  法界動態(tài):

47、 我們特別收集了國家知識產(chǎn)權(quán)網(wǎng)上的最新信息,讓大家能及時(shí)了解到我國知識產(chǎn)權(quán)的最新動態(tài)。</p><p>  法律法規(guī): 這個(gè)欄目主要列舉了有關(guān)知識產(chǎn)權(quán)方面的相關(guān)法律及法規(guī),如“中華人民共和國專利法”等,使用戶對專利法等相關(guān)法律知識有一定的了解。</p><p>  在線留言: 此欄目設(shè)立的主要目的是為了提供給想了解知識產(chǎn)權(quán)的用戶一個(gè)互動的平臺,用以解決知識產(chǎn)權(quán)的相關(guān)問題。(如圖3-2)&l

48、t;/p><p>  聯(lián)系我們: 通過這個(gè)欄目,可以讓用戶獲得我們的各種聯(lián)系方式,這樣可以更深一步的與其探討知識產(chǎn)權(quán)的問題。</p><p>  網(wǎng)站公告: 除了單獨(dú)設(shè)立這個(gè)欄目外,我還特意在每張頁面的左側(cè)做了一個(gè)由下而上的滾動公告欄來吸引大家的眼球,鼠標(biāo)滑過滾動文字停留,鼠標(biāo)點(diǎn)擊后超鏈接至“網(wǎng)站公告”這個(gè)欄目,內(nèi)容主要為公司的最新的動態(tài)。(如圖3-2)</p><p>

49、;<b>  圖3-2 </b></p><p><b>  第四章 詳細(xì)設(shè)計(jì)</b></p><p>  4.1 網(wǎng)站制作過程</p><p>  4.1.1 logo的制作過程</p><p>  本網(wǎng)站的Logo是把從網(wǎng)絡(luò)上找到的一些素材圖片,通過用Photoshop進(jìn)行編輯、修改、組合而完成

50、的。為了突出該企業(yè)名稱“君輝”,特意把“junhui”標(biāo)志用藍(lán)色水晶球包圍,并且“junhui”中“J”這個(gè)字母用一個(gè)龍頭的形狀代替,自古以來龍?jiān)谌藗兊牡匚欢际侵粮邿o上的,同時(shí)也襯托出“知識產(chǎn)權(quán)”在當(dāng)今社會的重要地位。在整個(gè)以藍(lán)色為主色調(diào)的網(wǎng)頁中,調(diào)劑整體頁面的色調(diào),使頁面看起來更鮮活,很是醒目,讓人一眼就看到這個(gè)logo,了解主題。(如圖4-1)</p><p>  圖4-1 網(wǎng)站logo</p>

51、<p>  4.1.2 banner的制作過程</p><p>  首先需要上網(wǎng)收集一些符合你的作品主題、創(chuàng)作思維以及整體風(fēng)格的網(wǎng)頁相關(guān)素材,對其進(jìn)行修改已獲得自己所需素材,或可在Photoshop中繪制出自己所需的圖片素材。</p><p>  接著打開Photoshop,在Photoshop里面新建一個(gè)文件,調(diào)整底圖大小,根據(jù)網(wǎng)頁的總長度,調(diào)節(jié)banner的長度和寬度(一般

52、banner不能太寬,不然會顯得頭重腳輕,當(dāng)然也不能太窄,都沒法讓人感覺到有banner存在,所以一定要調(diào)整至占整個(gè)網(wǎng)頁的適合比例。)</p><p>  設(shè)計(jì)banner的背景:選用一張藍(lán)色的微帶波橫的圖片為banner背景,將處理好的素材依次放入具體位子,像左邊的鏡頭光暈,右邊的發(fā)光矩形框等等,按具體需求做具體的改動和修改,這樣整個(gè)banner的背景就設(shè)計(jì)好了。</p><p>  具

53、體內(nèi)容設(shè)計(jì):先在banner左邊放入logo(這里為了美觀起見,我將logo放大放在了banner最左邊,若放在左上角一塊窄小的地方,反而凸顯不出“junhui”這個(gè)標(biāo)志),按具體情況驚醒調(diào)整修改至適當(dāng)部分,處理好每一處細(xì)節(jié),這樣整個(gè)靜態(tài)的banner部分就設(shè)計(jì)好了。</p><p>  添加動態(tài)的flash效果:動態(tài)的flash效果要等到整個(gè)網(wǎng)頁的基本布局都設(shè)計(jì)好之后,就可以在Photoshop中按Shift+

54、Ctrl+Alt+S存儲切片后所有圖片,將頁面轉(zhuǎn)換成.html格式,然后使用Dreamweaver打開編輯,在banner的區(qū)域加入Flash,將Flash轉(zhuǎn)換為透明flash形式,這樣整個(gè)banner部分就完成了。(如圖4-2)</p><p>  圖4-2 網(wǎng)站banner</p><p>  4.1.3 主頁制作過程(詳見圖4-3)</p><p>  首先根

55、據(jù)頁面要展示內(nèi)容的多少,在photoshop中新建一個(gè)適合的網(wǎng)頁寬度和長度的文件(我設(shè)計(jì)的時(shí)候在寬屏的機(jī)子上,所以建的文檔較大,約為1280*1405)。</p><p>  在畫布上按自己的想法結(jié)合實(shí)際內(nèi)容,用各圖形工具在畫布上畫上整個(gè)網(wǎng)頁基本的布局。</p><p>  基本布局的設(shè)計(jì)定下之后再對各部分進(jìn)行具體設(shè)計(jì),細(xì)化每個(gè)部分,特別是靜態(tài)的部分。</p><p&g

56、t;  在Photoshop里完成整個(gè)頁面的設(shè)計(jì)后,進(jìn)行切片,將要動態(tài)顯示的地方切出來,還有就是大的圖片要切一下,能提高網(wǎng)頁讀取速度。按Shift+Ctrl+Alt+S存儲為.html格式后,用Dreamweaver編輯,將需要作為背景的單元格中的圖片設(shè)為該單元格的背景,另存為index.asp。用相同的方法制作網(wǎng)站分頁。</p><p>  將所有頁面,拷到所屬文件夾,然后與后臺數(shù)據(jù)庫連接起來,即可通過對后臺數(shù)

57、據(jù)庫內(nèi)容的添加、刪除、修改來對網(wǎng)頁的相關(guān)內(nèi)容進(jìn)行操作,例如在數(shù)據(jù)庫注冊登錄表中刪除一個(gè)用戶信息,那么這個(gè)用戶再次用原先的登錄信息登錄時(shí)就無法登錄成功了。</p><p>  在Dreamweaver中網(wǎng)頁的左側(cè)類似“書卷”的區(qū)域插入一張表格,并在代碼相應(yīng)位置插入滾動文字特效的代碼,實(shí)現(xiàn)文字至下而上滾動,鼠標(biāo)移過文字時(shí)滾動停留的功能,鼠標(biāo)按下即跳轉(zhuǎn)到“網(wǎng)站公告”頁面;在網(wǎng)站首頁頂端插入滾動的歡迎字幕,方法同上。&l

58、t;/p><p>  在Dreamweaver8.0里打開主頁面,在頁面中相對應(yīng)除插入圖片切換的代碼,實(shí)現(xiàn)新聞圖片的自動切換的效果。</p><p>  8. 在Dreamweaver8.0里打開主頁面,切換到設(shè)計(jì)視圖,將雪花鼠標(biāo)特效代碼復(fù)制在<body></body>之間,保存并預(yù)覽,完成首頁鼠標(biāo)特效。</p><p><b>  圖

59、4-3 網(wǎng)站首頁</b></p><p>  4.1.4留言板的設(shè)計(jì)</p><p>  為了能讓大家有一個(gè)相互探討、分享知識產(chǎn)權(quán)方面的心得與經(jīng)驗(yàn)的平臺,為了能讓廣大人群更好、更深刻的了解知識產(chǎn)權(quán),為此,我們特別設(shè)立了“在線留言”這一欄目,如果你有什么和知識產(chǎn)權(quán)有關(guān)的問題或者想法,可以在這里留言,我們將會有專門的指導(dǎo)老師或者有識之士會及時(shí)給予回復(fù)與解答,與此同時(shí)你也可以解答或回

60、復(fù)他人遇到的問題。這樣就實(shí)現(xiàn)了多人的互動。</p><p>  總體來說,留言板功能是這個(gè)網(wǎng)站的主要功能之一,也是這個(gè)網(wǎng)站的亮點(diǎn)之一,它讓整個(gè)網(wǎng)站的功能得到提升,使其不單單只是一個(gè)簡單的單純的信息發(fā)布的網(wǎng)站,增加了互動環(huán)節(jié)。(如圖4-4)</p><p><b>  (留言頁面)</b></p><p> ?。ú榭戳粞詢?nèi)容及回復(fù)頁面)</

61、p><p><b>  圖4-4 留言板</b></p><p>  4.2 數(shù)據(jù)庫的設(shè)計(jì)</p><p>  使用Access 2003實(shí)現(xiàn)關(guān)系型數(shù)據(jù)庫,以下是數(shù)據(jù)庫中幾個(gè)主要的表的設(shè)計(jì):</p><p><b>  登錄注冊管理</b></p><p>  存儲了注冊登錄用戶

62、的基本信息,如用戶名、密碼、地址、郵箱等。(如圖4-5)</p><p><b>  圖4-5</b></p><p><b>  圖4-6</b></p><p><b>  留言板</b></p><p>  存儲了留言的檔案,其中id是關(guān)鍵字,主要實(shí)現(xiàn)用戶信息管理、留言及

63、回復(fù)等。(如圖4-7)</p><p><b> ?。粞孕畔⒋鎯Ρ恚?lt;/b></p><p><b>  (回復(fù)信息儲存表)</b></p><p><b>  圖4-7</b></p><p>  創(chuàng)建好數(shù)據(jù)庫之后,我們來用ASP把程序和數(shù)據(jù)庫連接起來,以后就可以連接到數(shù)據(jù)

64、庫、在ASP中顯示數(shù)據(jù)庫中的數(shù)據(jù)。</p><p>  4.3 系統(tǒng)實(shí)現(xiàn)代碼</p><p>  4.3.1 滾動文字特效(這里主要指網(wǎng)站左側(cè)的“公司公告”)</p><p>  <table width="70%" border="0" align="center" cellpadding=&qu

65、ot;0" cellspacing="0"></p><p><b>  <tr></b></p><p><b>  <td></b></p><p>  <div align="center"></p><p

66、>  <table border="0" align="center" cellpadding="5" cellspacing="0" bordercolor="#000000" ></p><p><b>  <tr></b></p><p&

67、gt;  <td bordercolor="#88C7E9"></p><p>  <script language=javascript></p><p>  document.write ("<marquee scrollamount='1' scrolldelay='30' direction

68、= 'UP' width='150' id='helpor_net' height='150' onmouseover='helpor_net.stop()' onmouseout='helpor_net.start()' Author:redriver; For more,visit:www.helpor.net>")<

69、;/p><p>  document.write ("<h2><p align='center'><font color='#000000' face='黑體'>公司公告</font></h2>")</p><p>  document.write ("&l

70、t;p><font color='#000000' size=2>")</p><p>  document.write ("<br><a href='WZGG.asp'>1. 商標(biāo)轉(zhuǎn)讓——君輝知識</a> ")</p><p>  document.write (&quo

71、t;<br><a href='WZGG.asp'>2. 法律服務(wù)簡介2010</a> ")</p><p>  document.write ("<br><a href='WZGG.asp'>3. 我們的法律服務(wù)↘(最新)</a>")</p><p>  

72、document.write ("<br><a href='WZGG.asp'>4. 招聘專利代理人 </a> ")</p><p>  document.write ("<br><a href='WZGG.asp'>5. 本所代理中國馳名商標(biāo) </a> ")</p

73、><p>  document.write ("<br><a href='WZGG.asp'>6. 賀本司商標(biāo)專利部喜遷</a> ")</p><p>  document.write ("</font>")</p><p>  document.write (&q

74、uot;</marquee> ")</p><p>  </script></td></p><p><b>  </tr></b></p><p><b>  </table></b></p><p>  </div>

75、;</td></p><p><b>  </tr></b></p><p><b>  </table></b></p><p>  4.3.2 圖片切換</p><p>  <img src="images/CJok_18.gif"

76、alt="商標(biāo)欣賞" width="763" height="127" id="Image1" onMouseOver="MM_swapImage('Image1','','images/SBXS2.jpg','Image2','','images/CJok_1

77、8.gif',1)" onMouseOut="MM_swapImgRestore()"></p><p>  4.3.3 首頁鼠標(biāo)特效代碼</p><p>  <STYLE TYPE="text/css"></p><p>  BODY{overflow:scroll;overflow-x:

78、hidden;}.s1{position : absolute; font-size : 12pt; color : blue; visibility: hidden;}.s2{ position : absolute; font-size : 20pt; color : green; visibility : hidden;}</p><p>  .s3{ pos

79、ition : absolute; font-size : 16pt; color : gold; visibility : hidden;}.s4{ position : absolute; font-size : 14pt; color : lime; visibility : hidden;}</p><p><b>  </STYLE

80、></b></p><p>  <DIV ID="div1" CLASS="s1">*</DIV></p><p>  <DIV ID="div2" CLASS="s2">*</DIV></p><p>  <DIV

81、 ID="div3" CLASS="s3">*</DIV></p><p>  <DIV ID="div4" CLASS="s4">*</DIV></p><p>  <script language="javascript" type=&qu

82、ot;text/javascript" class="s5"></p><p>  var nav = (document.layers);</p><p>  var tmr = null;</p><p>  var spd = 50;</p><p>  var x = 0;</p>&

83、lt;p>  var x_offset = 5;</p><p>  var y = 0;</p><p>  var y_offset = 15;</p><p>  if(nav) document.captureEvents(Event.MOUSEMOVE);</p><p>  document.onmousemove = ge

84、t_mouse;</p><p>  function get_mouse(e)</p><p><b>  {</b></p><p>  x = (nav) ? e.pageX : event.clientX+document.body.scrollLeft;</p><p>  y = (nav) ? e.page

85、Y : event.clientY+document.body.scrollTop;</p><p>  x += x_offset;</p><p>  y += y_offset;</p><p><b>  beam(1);</b></p><p><b>  }</b></p>

86、<p>  function beam(n)</p><p><b>  {</b></p><p><b>  if(n<5)</b></p><p><b>  {</b></p><p><b>  if(nav)</b></

87、p><p><b>  {</b></p><p>  eval("document.div"+n+".top="+y);</p><p>  eval("document.div"+n+".left="+x);</p><p>  eval(&

88、quot;document.div"+n+".visibility='visible'");</p><p><b>  }</b></p><p><b>  else</b></p><p><b>  {</b></p><p&g

89、t;  eval("div"+n+".style.top="+y);</p><p>  eval("div"+n+".style.left="+x);</p><p>  eval("div"+n+".style.visibility='visible'"

90、;);</p><p><b>  }</b></p><p><b>  n++;</b></p><p>  tmr=setTimeout("beam("+n+")",spd);</p><p><b>  }</b></p&g

91、t;<p><b>  else</b></p><p><b>  {</b></p><p>  clearTimeout(tmr);</p><p><b>  fade(4);</b></p><p><b>  }</b></

92、p><p><b>  }</b></p><p>  function fade(n)</p><p><b>  {</b></p><p><b>  if(n>0)</b></p><p><b>  {</b></

93、p><p>  if(nav)eval("document.div"+n+".visibility='hidden'");</p><p>  else eval("div"+n+".style.visibility='hidden'");</p><p>&

94、lt;b>  n--;</b></p><p>  tmr=setTimeout("fade("+n+")",spd);</p><p><b>  }</b></p><p>  else clearTimeout(tmr);</p><p><b>

95、  }</b></p><p><b>  </script></b></p><p><b>  結(jié)束語</b></p><p>  經(jīng)過一段時(shí)間的學(xué)習(xí)與制作,企業(yè)網(wǎng)站的設(shè)計(jì)制作基本上已經(jīng)告一段落??偨Y(jié)這次制作畢業(yè)設(shè)計(jì)的過程,對我來說是一個(gè)將所學(xué)知識從書本運(yùn)用到實(shí)際操作的初次體驗(yàn)。通過這次的制作與

96、設(shè)計(jì)讓我了解了一個(gè)網(wǎng)站形成的基本過程和基本綱領(lǐng)構(gòu)架,加深了我對現(xiàn)在計(jì)算機(jī)技術(shù)、通訊技術(shù)、英特網(wǎng)技術(shù)等的認(rèn)識,還有對制作網(wǎng)站上用到的dreamweaver等設(shè)計(jì)與制作網(wǎng)站的工具有了更多的了解,得到了深入的理解同時(shí)更熟練地使用這些工具。相信這些知識都將對我的工作帶來很大的幫助。在這次的畢業(yè)設(shè)計(jì)中使我得學(xué)習(xí)了比以前更多的知識,如何提高自己的學(xué)習(xí)和操作能力。</p><p>  這次設(shè)計(jì)由于時(shí)間、條件和個(gè)人能力的限制,加

97、之設(shè)計(jì)經(jīng)驗(yàn)的不足,在網(wǎng)站的整體設(shè)計(jì)及各模塊功能可能設(shè)計(jì)的不完全,有待于進(jìn)一步的完善和改進(jìn)。這些情況希望能在今后的不斷學(xué)習(xí)與應(yīng)用中把它擴(kuò)充得更加豐富,以適應(yīng)不同層次使用者的需求。同時(shí)現(xiàn)在網(wǎng)站的設(shè)計(jì)技術(shù)與要求在不斷地更新,不斷地提高,我想以后還要有很長的一段學(xué)習(xí)與實(shí)踐的時(shí)間,才能在設(shè)計(jì)與制作網(wǎng)站方面有所完善。</p><p>  現(xiàn)請各位知道老師對我這段時(shí)間努力學(xué)習(xí),努力設(shè)計(jì)制作所得的作品進(jìn)行檢測,并加以指正。<

98、;/p><p><b>  參考文獻(xiàn)</b></p><p>  [1] 林少景編著.ASP動態(tài)網(wǎng)站編程[M]. 北京清華大學(xué)出版</p><p>  [2] 楊曉鐘.網(wǎng)站設(shè)計(jì)與開發(fā)[M]. 北京:機(jī)械工業(yè)出版社,2005-06</p><p>  [3] 姜再興,李萬強(qiáng),王曉風(fēng).Dreamweaver MX 2004+AS

99、P網(wǎng)站開發(fā)基礎(chǔ)與實(shí)例教程[M].北京:電子工業(yè)出版社,2006.1~2</p><p>  [4] 孫剛,徐兵,董小剛.基于ASP.NET技術(shù)的電子商務(wù)系統(tǒng)的開發(fā)[J]. 長春工業(yè)大學(xué)學(xué)報(bào),2004,25(3):145-153</p><p>  [5] (韓)鄭詩蘭 金冬美著.photoshop 影像藝術(shù)與網(wǎng)頁設(shè)計(jì)(附1CD)中國青年,2002年6月</p><p&

100、gt;<b>  致謝</b></p><p>  經(jīng)過數(shù)個(gè)星期的努力,我的畢業(yè)設(shè)計(jì)和畢業(yè)設(shè)計(jì)說明書終于完成了。在這次的畢業(yè)設(shè)計(jì)中我學(xué)會了很多課外的專業(yè)知識,雖然還沒有琢磨地很透徹,但相比以前,已經(jīng)有了很大的改進(jìn)。之前我只會做最簡單的靜態(tài)網(wǎng)頁,除了基本的超鏈接外什么功能都不會,頁面上的登錄注冊和留言板功能都只是擺設(shè)(沒法實(shí)現(xiàn)),可是通過這次畢業(yè)設(shè)計(jì),我已經(jīng)能獨(dú)立完成簡單的網(wǎng)站功能了,如我能能

101、運(yùn)用access數(shù)據(jù)庫的鏈接等技術(shù)將這些功能實(shí)現(xiàn)了。此外,對和網(wǎng)頁設(shè)計(jì)相關(guān)的各軟件的操作我也熟練了一些,像PhotoShop,網(wǎng)頁三劍客等等。當(dāng)然在完成這些的過程中我也遇到了很多問題,但是有了老師和同學(xué)的鼓勵與幫助,我遇到的難題都一一解決了,此外也少不了對網(wǎng)上工具的合理利用,如對“百度”這個(gè)搜索引擎的使用,在我作品中很多特效都是通過百度上學(xué)到的,能夠“學(xué)以致用”都要靠辛勤的老師,記得在校的時(shí)候,老師總是在我們耳邊提起要多利用身邊現(xiàn)有的工

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 眾賞文庫僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論