電子購物web設(shè)計基礎(chǔ)論

1、WEB開發(fā)技術(shù)課程答 辯 項 目 文 檔題 目 電子購物 學(xué) 院 專 業(yè) 學(xué)生姓名 學(xué) 號 班 級 指導(dǎo)教師 2015年1月 3 日目錄TOC o 1-3 h u HYPERLINK l _Toc19507 摘要 PAGEREF _Toc19507 3 HYPERLINK l _Toc17065 第一章 緒論 PAGEREF _Toc17065 4 HYPERLINK l _Toc101 1.1 網(wǎng)頁設(shè)計概述 PAGEREF _Toc101 4 HYPERLINK l _Toc20866 1.2 網(wǎng)頁設(shè)計的要素 PAGEREF _Toc20866 4 HYPERLINK l _Toc13865

2、 第二章 網(wǎng)頁設(shè)計語言概述 PAGEREF _Toc13865 6 HYPERLINK l _Toc23406 2.1 HTML語言介紹 PAGEREF _Toc23406 6 HYPERLINK l _Toc8291 2.1.1 HTML語言的特點(diǎn) PAGEREF _Toc8291 6 HYPERLINK l _Toc26598 2.1.2 HTML語言的編輯軟件 PAGEREF _Toc26598 6 HYPERLINK l _Toc28717 2.2 常用的HTML語言編輯軟件 PAGEREF _Toc28717 7 HYPERLINK l _Toc5396 2.2.1 Dreamwea

3、ver PAGEREF _Toc5396 7 HYPERLINK l _Toc7832 2.2.2 Myeclipse PAGEREF _Toc7832 7 HYPERLINK l _Toc17686 2.2.3 UltraEdit PAGEREF _Toc17686 8 HYPERLINK l _Toc17771 2.2.4 JavaScript PAGEREF _Toc17771 8 HYPERLINK l _Toc29228 2.3 本章小結(jié) PAGEREF _Toc29228 10 HYPERLINK l _Toc1821 第三章 網(wǎng)頁功能設(shè)計概述 PAGEREF _Toc1821 1

4、1 HYPERLINK l _Toc18781 3.1 需求分析 PAGEREF _Toc18781 11 HYPERLINK l _Toc18264 3.1.1 網(wǎng)站建設(shè)經(jīng)濟(jì)可行性分析 PAGEREF _Toc18264 11 HYPERLINK l _Toc26467 3.1.2 網(wǎng)站建設(shè)技術(shù)可行性分析 PAGEREF _Toc26467 11 HYPERLINK l _Toc16576 3.1.3 網(wǎng)站建設(shè)操作可行性分析 PAGEREF _Toc16576 12 HYPERLINK l _Toc12764 3.2 網(wǎng)站頁面的整體布局 PAGEREF _Toc12764 12 HYPERL

5、INK l _Toc10717 3.3.1 頁面功能調(diào)用關(guān)系 PAGEREF _Toc10717 13 HYPERLINK l _Toc22287 3.3.2 各頁面模塊功能詳介圖 PAGEREF _Toc22287 13 HYPERLINK l _Toc27213 第四章關(guān)鍵代碼技術(shù) PAGEREF _Toc27213 18 HYPERLINK l _Toc4292 4.1 各頁面模塊關(guān)鍵代碼 PAGEREF _Toc4292 18 HYPERLINK l _Toc10935 第四章 總結(jié) PAGEREF _Toc10935 23 HYPERLINK l _Toc27399 參考文獻(xiàn) PAG

6、EREF _Toc27399 24摘要本論文將對個人網(wǎng)頁設(shè)計與制作的方法、工具等展開研究和探討。在介紹網(wǎng)頁設(shè)計與制作語言的基礎(chǔ)上，著重使用JavaScript作為工具語言進(jìn)行網(wǎng)頁設(shè)計與制作的實(shí)際操作，分別對基于對象的JavaScript語言、內(nèi)部對象系統(tǒng)的使用及WEB頁面信息交互窗口和框架進(jìn)行詳細(xì)描述，并利用具體的實(shí)例進(jìn)行驗證。 本論文主要章節(jié)如下，第一章：緒論，本章主要介紹網(wǎng)頁設(shè)計的相關(guān)知識。第二章：網(wǎng)頁設(shè)計語言概述，本章主要介紹網(wǎng)頁設(shè)計的語言HTML，以及用于編輯HTML語言的軟件，為后續(xù)工作奠定基礎(chǔ)。第三章：基于對象的JavaScript語言，本章介紹了基于對象的JavaScript中常

7、用內(nèi)部對象屬性、方法的使用。第四章：內(nèi)部對象系統(tǒng)的使用，本章主要介紹使用瀏覽器的內(nèi)部對象系統(tǒng)，可實(shí)現(xiàn)與HTML文檔進(jìn)行交互。第五章：WEB頁面信息的交互窗體與框架，本章主要介紹實(shí)現(xiàn)網(wǎng)頁的動態(tài)交互，必須掌握有關(guān)窗體對象（Form）和框架對象（Frames）更為復(fù)雜的知識。 關(guān)鍵詞： 網(wǎng)頁制作 網(wǎng)頁設(shè)計 HTML JavaScript第一章 緒論隨著21世紀(jì)的到來，人們更深切地感受到計算機(jī)在生活和工作中的作用越來越重要，越來越來的職業(yè)需要具有計算機(jī)的應(yīng)用技能。掌握計算機(jī)是職業(yè)的需要，更是事業(yè)發(fā)展的需要。網(wǎng)頁設(shè)計與制作是計算機(jī)能力的具體表現(xiàn)，本章主要介紹網(wǎng)頁設(shè)計的相關(guān)知識。 1.1 網(wǎng)頁設(shè)計概述網(wǎng)站

8、是企業(yè)向用戶和網(wǎng)民提供信息(包括產(chǎn)品和服務(wù))的一種方式,是企業(yè)開展電子商務(wù)的基礎(chǔ)設(shè)施和信息平臺，離開網(wǎng)站（或者只是利用第三方網(wǎng)站）去談電子商務(wù)是不可能的。企業(yè)的網(wǎng)址被稱為“網(wǎng)絡(luò)商標(biāo)”，也是企業(yè)無形資產(chǎn)的組成部分，而網(wǎng)站是INTERNET上宣傳和反映企業(yè)形象和文化的重要窗口。 1.2 網(wǎng)頁設(shè)計的要素 網(wǎng)頁設(shè)計的兩大要素是：整體風(fēng)格和色彩搭配。確定網(wǎng)站的整體風(fēng)格在這里，網(wǎng)上查閱一些參考經(jīng)驗：將標(biāo)志logo，盡可能的放在每個頁面上最突出的位置。突出標(biāo)準(zhǔn)色彩?？偨Y(jié)一句能反映貴站精髓的宣傳標(biāo)語相同類型的圖像采用相同效果，比如說標(biāo)題字都采用陰影效果，那么在網(wǎng)站中出現(xiàn)的所有標(biāo)題字的陰影效果的設(shè)置應(yīng)該是完全一

9、致的網(wǎng)頁色彩的搭配用一種色彩。這里是指先選定一種色彩，然后調(diào)整透明度或者飽和度，這樣的頁面看起來色彩統(tǒng)一，有層次感。用兩種色彩。先選定一種色彩，然后選擇它的對比色。用一個色系。簡單的說就是用一個感覺的色彩，例如淡藍(lán)，淡黃，淡綠；或者土黃，土灰，土藍(lán)。在網(wǎng)頁配色中，還要切記一些誤區(qū)：不要將所有顏色都用到，盡量控制在三至五種色彩以內(nèi)。背景和前文的對比盡量要大(絕對不要用花紋繁復(fù)的圖案作背景)，以便突出主要文字內(nèi)容。 第二章 網(wǎng)頁設(shè)計語言概述2.1 HTML語言介紹 HTML（HyperText Mark-up Language）即超文本標(biāo)記語言或超文本鏈接標(biāo)示語言，是目前網(wǎng)絡(luò)上應(yīng)用最為廣泛的語言，

10、也是構(gòu)成網(wǎng)頁文檔的主要語言。 HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字、圖形、動畫、聲音、表格、鏈接等。HTML的結(jié)構(gòu)包括頭部（Head）、主體（Body）兩大部分，其中頭部描述瀏覽器所需的信息，而主體則包含所要說明的具體內(nèi)容。 2.1.1 HTML語言的特點(diǎn) HTML文檔制作不是很復(fù)雜，且功能強(qiáng)大，支持不同數(shù)據(jù)格式的文件鑲?cè)?，這也是WWW盛行的原因之一，HTML語言的特點(diǎn)如下： 1、簡易性，HTML版本升級采用超集方式，從而更加靈活方便。 2、可擴(kuò)展性，HTML語言的廣泛應(yīng)用帶來了加強(qiáng)功能，增加標(biāo)識符等要求，HTML采取子類元素的方式，為系統(tǒng)擴(kuò)展帶來保證。 3、

11、平臺無關(guān)性。雖然PC機(jī)大行其道，但使用MAC等其他機(jī)器的大有人在，HTML可以使用在廣泛的平臺上，這也是WWW盛行的另一個原因。2.1.2 HTML語言的編輯軟件 HTML的本質(zhì)是文本，需要瀏覽器的解釋，HTML的編輯器大體可以分為三種：1、基本編輯軟件，使用WINDOWS自帶的記事本或?qū)懽职娑伎梢跃帉?，?dāng)然，如果你用WPS來編寫，也可以。不過存盤時請使用.htm或.html作為擴(kuò)展名，這樣瀏覽器就可以解釋執(zhí)行了。 2、半所見即所得軟件，這種軟件能大大提高開發(fā)效率，它可以使你在很短的時間內(nèi)做出Homepage，且可以學(xué)習(xí)HTML，這種類型的軟件主要有HOTDOG，還有國產(chǎn)的軟件網(wǎng)頁作坊。 3、

12、所見即所得軟件，使用最廣泛的編輯器，完全可以一點(diǎn)不懂HTML的知識就可以做出網(wǎng)頁，這類軟件主要有Frontpage，DREAMWEAVER、Delphi、Eclipse、UltraEdit。 一個HTML文件由一個HTML元素組成，即文件以開始。以結(jié)束，文檔中其他元素及其屬性的聲明都是HTML的元素體。 HTML元素的元素體和元素體由兩大部分組成，即頭元素和體元素。頭元素和體元素的元素體又由其他元素、文本和注釋等組成。 2.2 常用的HTML語言編輯軟件2.2.1 Dreamweaver Dreamweaver是美國Adobe(原Macromedia，2005年被Adobe收購)公司開發(fā)的集網(wǎng)

13、頁制作和管理網(wǎng)站于一身的所見即所得網(wǎng)頁編輯器，它是第一套針對專業(yè)網(wǎng)頁設(shè)計師特別發(fā)展的視覺化網(wǎng)頁開發(fā)工具，利用它可以輕而易舉地制作出跨越平臺限制和跨越瀏覽器限制的充滿動感的網(wǎng)頁。它不僅是優(yōu)秀的WYSIWYG編輯器，更是優(yōu)秀的代碼編輯器，有代碼加亮，代碼提示等豐富功能，提供各種示例代碼，并支持Javascript,PHP,ASP,JSP等多種腳本語言。最新版本為CS4，發(fā)布于2008年9月。Dreamweaver是所見即所得的編輯器，可以直接在里面插入圖片、輸入文字，Dreamweaver會自動生成HTML代碼。對于初學(xué)者來說，Dreamweaver是比較好的入門工具，設(shè)計操作頁方便快捷。2.2.

14、2 MyeclipseMyEclipse企業(yè)級工作平臺（MyEclipse Enterprise Workbench ，簡稱MyEclipse）是對Eclipse IDE的擴(kuò)展，利用它我們可以在數(shù)據(jù)庫和J2EE的開發(fā)、發(fā)布，以及應(yīng)用程序服務(wù)器的整合方面極大的提高工作效率。它是功能豐富的J2EE集成開發(fā)環(huán)境，包括了完備的編碼、調(diào)試、測試和發(fā)布功能，完整支持HTML, Struts, JSF, CSS, Javascript, SQL, Hibernate。在結(jié)構(gòu)上，MyEclipse的特征可以被分為7類： 1.J2EE模型 2.WEB開發(fā)工具 3.EJB開發(fā)工具 4.應(yīng)用程序服務(wù)器的連接器 5.

15、J2EE項目部署服務(wù) 6.數(shù)據(jù)庫服務(wù) 7.MyEclipse整合幫助對于以上每一種功能上的類別，在Eclipse中都有相應(yīng)的功能部件，并通過一系列的插件來實(shí)現(xiàn)它們。MyEclipse結(jié)構(gòu)上的這種模塊化，可以讓我們在不影響其他模塊的情況下，對任一模塊進(jìn)行單獨(dú)的擴(kuò)展和升級。簡單而言，MyEclipse是Eclipse的插件，也是一款功能強(qiáng)大的J2EE集成開發(fā)環(huán)境，支持代碼編寫、配置、測試以及除錯。2.2.3 UltraEdit UltraEdit 是一套功能強(qiáng)大的文本編輯器，可以編輯文本、十六進(jìn)制、ASCII 碼，完全可以取代記事本（如果電腦配置足夠強(qiáng)大），內(nèi)建英文單字檢查、C+ 及 VB 指令突

16、顯，可同時編輯多個文件，而且即使開啟很大的文件速度也不會慢。UltraEdit 是 Windows 旗下一款流行的老牌文本/HEX 編輯器（非開源）UltraEdit 正被移植到 Linux 平臺。該移植名為 UEX，意即 UltraEdit forLinux。UEX具有原生的 Linux 外觀，其界面、配置、熱鍵等與 Windows 版并無二致。UltraEdit是一個49.95美元的共享軟件，提供了友好界面的編程編輯器，支持語法高亮，代碼折疊和宏，以及一大堆其他的功能，內(nèi)置了對于HTML、PHP和JavaScript等語法的支持。在熟悉HTML代碼之后，使用UltraEdit是比較好的工具

17、，因其可以給源代碼著色，會將HTML標(biāo)簽使用不同的顏色顯示出來，若輸入錯誤，則不會著色，在很大程序上減少輸入的錯誤。此外，UltraEdit打開文件的速度快，且在一個UltraEdit窗口中可以編輯多個文件、多次返回。但用UltraEdit需熟悉并掌握網(wǎng)頁編輯的知識。對初學(xué)者而言使用Dreamweaver更加方便合理。2.2.4 JavaScript 一、JavaScript概述 JavaScript是一種基于對象(Object)和事件驅(qū)動(Event Driven)并具有安全性能的腳本語言。使用它的目的是與HTML超文本標(biāo)記語言、Java 腳本語言（Java小程序）一起實(shí)現(xiàn)在一個Web頁面中

18、鏈接多個對象，與Web客戶交互作用。從而可以開發(fā)客戶端的應(yīng)用程序等。它是通過嵌入或調(diào)入在標(biāo)準(zhǔn)的HTML語言中實(shí)現(xiàn)的。它的出現(xiàn)彌補(bǔ)了HTML語言的缺陷，它是Java與HTML折衷的選擇，具有以下幾個基本特點(diǎn)：1、是一種腳本編寫語言 JavaScript是一種腳本語言，它采用小程序段的方式實(shí)現(xiàn)編程。像其它腳本語言一樣,JavaScript同樣已是一種解釋性語言,它提供了一個易的開發(fā)過程。 它的基本結(jié)構(gòu)形式與C、C+、VB、Delphi十分類似。但它不像這些語言一樣，需要先編譯，而是在程序運(yùn)行過程中被逐行地解釋。它與HTML標(biāo)識結(jié)合在一起，從而方便用戶的使用操作。 2、基于對象的語言。 JavaSc

19、ript是一種基于對象的語言，同時以可以看作一種面向?qū)ο蟮摹＿@意味著它能運(yùn)用自己已經(jīng)創(chuàng)建的對象。因此，許多功能可以來自于腳本環(huán)境中對象的方法與腳本的相互作用。 3、簡單性 JavaScript的簡單性主要體現(xiàn)在：首先它是一種基于Java基本語句和控制流之上的簡單而緊湊的設(shè)計, 從而對于學(xué)習(xí)Java是一種非常好的過渡。其次它的變量類型是采用弱類型，并未使用嚴(yán)格的數(shù)據(jù)類型。4、安全性 JavaScript是一種安全性語言，它不允許訪問本地的硬盤，并不能將數(shù)據(jù)存入到服務(wù)器上，不允許對網(wǎng)絡(luò)文檔進(jìn)行修改和刪除，只能通過瀏覽器實(shí)現(xiàn)信息瀏覽或動態(tài)交互。從而有效地防止數(shù)據(jù)的丟失。 5、動態(tài)性的 JavaScr

20、ipt是動態(tài)的，它可以直接對用戶或客戶輸入做出響應(yīng)，無須經(jīng)過Web服務(wù)程序。它對用戶的反映響應(yīng)，是采用以事件驅(qū)動的方式進(jìn)行的。所謂事件驅(qū)動，就是指在主頁(Home Page)中執(zhí)行了某種操作所產(chǎn)生的動作，就稱為“事件”(Event)。比如按下鼠標(biāo)、移動窗口、選擇菜單等都可以視為事件。當(dāng)事件發(fā)生后，可能會引起相應(yīng)的事件響應(yīng)。 6、跨平臺性 JavaScript是依賴于瀏覽器本身，與操作環(huán)境無關(guān)，只要能運(yùn)行瀏覽器的計算機(jī)，并支持JavaScript的瀏覽器就可正確執(zhí)行。從而實(shí)現(xiàn)了“編寫一次,走遍天下”的夢想。實(shí)際上JavaScript最杰出之處在于可以用很小的程序做大量的事。無須有高性能的電腦，軟

21、件僅需一個字處理軟件及一瀏覽器，無須WEB服務(wù)器通道，通過自己的電腦即可完成所有的事情。 總之，JavaScript 是一種新的描述語言，它可以被箝入到 HTML 的文件之中。 JavaScript語言可以做到回應(yīng)使用者的需求事件 (如：form的輸入) ，而不用任何的網(wǎng)路來回傳輸資料，所以當(dāng)一位使用者輸入一項資料時，它不用經(jīng)過傳給伺服端 (server)處理，再傳回來的過程，而直接可以被客戶端 (client) 的應(yīng)用程式所處理。 JavaScript 和 Java 很類似，但到底并不一樣！ Java 是一種比 JavaScript 更復(fù)雜許多的程式語言，而 JavaScript 則是相當(dāng)容

22、易了解的語言。JavaScript 創(chuàng)作者可以不那麼注重程式技巧，所以許多 Java 的特性在 Java Script 中并不支援。二、JavaScript和Java的區(qū)別 雖然JavaScript與Java有緊密的聯(lián)系，但卻是兩個公司開發(fā)的不同的兩個產(chǎn)品。Java是SUN公司推出的新一代面向?qū)ο蟮某绦蛟O(shè)計語言，特別適合于Internet應(yīng)用程序開發(fā)；而JavaScript是Netscape公司的產(chǎn)品，其目的是為了擴(kuò)展Netscape Navigator功能,而開發(fā)的一種可以嵌入Web頁面中的基于對象和事件驅(qū)動的解釋性語言, 它的前身是Live Script；而Java的前身是Oak語言。下面

23、對兩種語言間的異同作如下比較： 1、基于對象和面向?qū)ο?Java是一種真正的面向?qū)ο蟮恼Z言，即使是開發(fā)簡單的程序，必須設(shè)計對象。 JavaScript是種腳本語言，它可以用來制作與網(wǎng)絡(luò)無關(guān)的，與用戶交互作用的復(fù)雜軟件。它是一種基于對象（Object Based）和事件驅(qū)動（Event Driver）的編程語言。因而它本身提供了非常豐富的內(nèi)部對象供設(shè)計人員使用。 2、解釋和編譯 兩種語言在其瀏覽器中所執(zhí)行的方式不一樣。Java的源代碼在傳遞到客戶端執(zhí)行之前，必須經(jīng)過編譯，因而客戶端上必須具有相應(yīng)平臺上的仿真器或解釋器，它可以通過編譯器或解釋器實(shí)現(xiàn)獨(dú)立于某個特定的平臺編譯代碼的束縛。 JavaSc

24、ript是一種解釋性編程語言，其源代碼在發(fā)往客戶端執(zhí)行之前不需經(jīng)過編譯，而是將文本格式的字符代碼發(fā)送給客戶編由瀏覽器解釋執(zhí)行。2.3 本章小結(jié)本章介紹了網(wǎng)頁設(shè)計語言HTML和JavaScript。并對開發(fā)軟件進(jìn)行介紹.第三章 網(wǎng)頁功能設(shè)計概述3.1 需求分析3.1.1 網(wǎng)站建設(shè)經(jīng)濟(jì)可行性分析傳統(tǒng)的銷售方式商品放在店鋪里供顧客挑選的銷售方式，商店的客流量受店鋪的規(guī)模、位置等客觀因素影響，且商品的存放與銷售需要人力進(jìn)行管理，雇員的工資、店面的租金等又增加了成本，顧客也不能迅速找到所需要的商品，而網(wǎng)上商店只需要一個可以存放商品的倉庫，相比傳統(tǒng)銷售方式在店面規(guī)模、位置、人力資源登多方面限制少，可帶來可

25、觀的經(jīng)濟(jì)利益，對客戶而言買到所需要的商品更為方便、快捷。3.1.2 網(wǎng)站建設(shè)技術(shù)可行性分析 1，網(wǎng)絡(luò)應(yīng)用基礎(chǔ)設(shè)施完善，由于信息技術(shù)的發(fā)展，我國的計算機(jī)網(wǎng)絡(luò)飛速發(fā)展，先后建成了中國公眾多媒體通信網(wǎng)、China Net、中國教育與科研計算機(jī)網(wǎng)絡(luò)等組成了中國Internet主體，網(wǎng)絡(luò)應(yīng)用進(jìn)入了企業(yè)與普通家庭，這為發(fā)展電子商務(wù)提供了基礎(chǔ)設(shè)施。 2，網(wǎng)絡(luò)安全技術(shù)應(yīng)用，包括加密算法、CA數(shù)字認(rèn)證、數(shù)字簽名等，為電子商務(wù)應(yīng)用提供安全保證，它實(shí)現(xiàn)了網(wǎng)絡(luò)傳輸數(shù)據(jù)的安全性、完整性以及交易雙方的不可抵賴性，身份認(rèn)證等。 3，電子支付技術(shù)應(yīng)用，通過電子支付網(wǎng)關(guān)實(shí)現(xiàn)交易雙方電子貨幣結(jié)算，解決電子商務(wù)的支付問題，可加速交

26、易過程的實(shí)現(xiàn)。 4，法律保障，交易活動如果沒有得到法律保障就等于它的合法性得不到承認(rèn)，其生存空間就會受到擠壓，隨著我國電子商務(wù)法律法規(guī)的頒發(fā)，將解決電子商務(wù)活動的法律技術(shù)問題，網(wǎng)上商店經(jīng)營活動將得到法律的保護(hù)。 5，最后，就是網(wǎng)絡(luò)技術(shù)的普及與掌握，如網(wǎng)絡(luò)互聯(lián)、網(wǎng)絡(luò)安全技術(shù)、Web技術(shù)（如Html,XML,CGI等）、各種安全協(xié)議（Https,SET,SSL等）、網(wǎng)絡(luò)數(shù)據(jù)庫技術(shù)等，使我們有能力開發(fā)實(shí)現(xiàn)適合自己的電子商務(wù)系統(tǒng)。成為我們構(gòu)建網(wǎng)站的直接技術(shù)支持。因此，公司構(gòu)建網(wǎng)上購物電子商務(wù)網(wǎng)站系統(tǒng)的技術(shù)瓶頸問題（網(wǎng)絡(luò)應(yīng)用基礎(chǔ)設(shè)施、安全、支付、法律保障、網(wǎng)站開發(fā)技術(shù)）得到了有效解決，公司構(gòu)建網(wǎng)上購物電

27、子商務(wù)網(wǎng)站技術(shù)上可行。 3.1.3 網(wǎng)站建設(shè)操作可行性分析 網(wǎng)站的操作基于B/S瀏覽器的頁面操作，用戶無需學(xué)習(xí)，操作簡單明了。管理員無需具備專業(yè)知識，只需要對一些日常數(shù)據(jù)信息輸入并管理。3.2 網(wǎng)站頁面的整體布局1，網(wǎng)站共有7項功能頁面，各頁面簡介如下 （1）frame.html :整體框架 (2) banner.html :網(wǎng)頁標(biāo)題欄 （3）product.html:產(chǎn)品頁面，功能有，可查看大圖、點(diǎn)擊查看產(chǎn)品詳細(xì)信息、點(diǎn)擊購買及相關(guān)的所購商品信息。 （4）main.html :訂單頁面，顯示所購商品信息及所需物流信息。 （5）screen.htm :商品顯示器的詳細(xì)信息 （6）laptop.

28、htm :商品筆記本電腦的詳細(xì)信息 （7）cpu.htm :商品臺式電腦的詳細(xì)信息 2，網(wǎng)站相關(guān)的信息顯示在瀏覽器的同一頁面中，其布局如下3.3 各頁面功能簡介3.3.1 頁面功能調(diào)用關(guān)系各頁面功能上述已簡介，這里不再贅述，各頁面功能調(diào)用關(guān)系如下所示傳入數(shù)據(jù) (注：frame.html,banner.html頁面無實(shí)用功能，故不在此圖中)3.3.2 各頁面模塊功能詳介圖1，產(chǎn)品欄（product.html）（1）點(diǎn)擊后，提示框提示輸入選購產(chǎn)品數(shù)量信息:（2）若選購數(shù)量信息輸入為非數(shù)字或未輸入則提示框提示錯誤輸入非數(shù)字：未輸入數(shù)據(jù)：2，臺式電腦產(chǎn)品信息（cpu.html）介紹產(chǎn)品詳細(xì)信息產(chǎn)品售服

29、、參數(shù)介紹，點(diǎn)擊“在線購物”框可轉(zhuǎn)入訂單頁面:視頻介紹：3，筆記本電腦產(chǎn)品信息（laptop.html）介紹產(chǎn)品詳細(xì)信息 產(chǎn)品售服、參數(shù)介紹，點(diǎn)擊“在線購物”框可轉(zhuǎn)入訂單頁面:視頻介紹：4，顯示器產(chǎn)品信息（screen.html）（1）介紹產(chǎn)品詳細(xì)信息 產(chǎn)品售服、參數(shù)介紹，點(diǎn)擊“在線購物”框可轉(zhuǎn)入訂單頁面:視頻介紹：5，訂單（main.html）顯示所購產(chǎn)品信息若顧客輸入信息錯誤則提示 (注：frame.html,banner.html頁面無實(shí)用功能，故不詳述)第四章關(guān)鍵代碼技術(shù)本章為在網(wǎng)站編寫過程中各頁面功能所用到的關(guān)鍵技術(shù)在本章詳細(xì)介紹，說明所遇到的技術(shù)問題以及解決方法。4.1 各頁面模塊

30、關(guān)鍵代碼1，產(chǎn)品欄（product.html）關(guān)鍵代碼共兩處：選購產(chǎn)品代碼，三個產(chǎn)品此部分代碼類似，這里以產(chǎn)品臺式電腦的代碼為例，這個函數(shù)功能為判斷輸入的所購商品信息是否正確（調(diào)用isnumber()函數(shù)判斷是否為數(shù)字）及向訂單(main.html)傳送所購產(chǎn)品信息并計量產(chǎn)品價格與郵遞費(fèi)用：function computer()if(menu.cpu.checked=true)var input=prompt(請輸入選購數(shù)量);if(input=|input=undefined|input=null)menu.cpu.checked=false;alert(請輸入數(shù)據(jù));return fals

31、e; else if(isnumber(input)=true)postage+=eval(2000*eval(input)*0.01;goods+=eval(2000*eval(input);parent.main.document.order.S1.value+=n 臺式電腦：+input+n;parent.main.document.order.fei.value=postage;parent.main.document.order.trade.value=goods;parent.main.document.order.total.value=eval(parent.main.docu

32、ment.order.trade.value)+eval(parent.main.document.order.fei.value);return true;所遇困難及解決辦法：此部分難點(diǎn)在于如何向訂單(main.html)傳送所購產(chǎn)品信息并計量產(chǎn)品價格與郵遞費(fèi)用，開始覺得很是麻煩，在網(wǎng)上查閱多次試驗也未成功，最后在從圖書館所借閱的資料中找到相似案例，終于解決此問題。產(chǎn)品圖片放大與回原功能代碼，兩部分代碼類似，這里以放大功能代碼為例。此函數(shù)功能為鼠標(biāo)進(jìn)入圖片區(qū)域時圖片放大通過獲得id屬性修改css文件實(shí)現(xiàn)。function bigger()/鼠標(biāo)在圖像上時圖像變大var cpu= docume

33、nt.getElementById(cpu);/判斷鼠標(biāo)是否在控件var lap= document.getElementById(lap);var sc= document.getElementById(sc);if(cpu.contains(window.event.srcElement)cpu.style.width = 252px; cpu.style.height = 200px;if(lap.contains(window.event.srcElement)lap.style.width = 252px; lap.style.height = 200px;if(sc.contain

34、s(window.event.srcElement)sc.style.width = 252px; sc.style.height = 200px;所遇困難及解決辦法：這部分代碼通過網(wǎng)上查閱而得，最初計劃每個產(chǎn)品的放大與回原功能各寫一個函數(shù)，但此種方法使代碼出現(xiàn)過多冗余，故放棄最初計劃，再次網(wǎng)上查閱找到定義var數(shù)據(jù)類型，獲得每個產(chǎn)品id，使相同功能在同一函數(shù)中實(shí)現(xiàn)。在隨后（4.1 2（1）處）產(chǎn)品信息頁面中的鼠標(biāo)進(jìn)入圖片區(qū)域時其他圖片發(fā)生響應(yīng)的功能所需代碼與此類似，但用這種方法就不行了，只能各寫一個函數(shù)。2，臺式電腦(cpu.html),筆記本電腦（laptop.html），顯示器（scre

35、en.html）三種頁面功能多為相似，故一并處理，以臺式電腦(cpu.html)為例關(guān)鍵代碼為一處：鼠標(biāo)進(jìn)入圖片時其他圖片發(fā)生響應(yīng)的代碼，共三處響應(yīng)事件，功能類似，只以一處為例：function overParameter() document.getElementById(parameter).src=laptopzcg.jpg;document.getElementById(parts).src=laptopb.jpg;document.getElementById(service).src=laptops.jpg;document.getElementById(info).src=cpuzc.jpg; 所遇困難及解決辦法：這里最大的問題是繁瑣的圖片截圖以及圖片順序處理，最初網(wǎng)站頁面設(shè)計過于簡單，因此瀏覽其他相似網(wǎng)站，模仿其功能，而后是繁瑣的截圖與處理，耗時耗力。3，訂單（main.html）關(guān)鍵代碼為一處：對物流所需信息的驗證，多用正則表達(dá)式：function getCheck()var nam