2022年電商網(wǎng)站設(shè)計(jì)實(shí)驗(yàn)報(bào)告

1、實(shí)驗(yàn)報(bào)告 系 別 交通運(yùn)送管理學(xué)院 學(xué)生姓名 余東陽(yáng) 專 業(yè) 信息管理與信息系統(tǒng) 學(xué) 號(hào) 223771 實(shí)驗(yàn)課程 電子商務(wù)網(wǎng)站設(shè)計(jì) 指引教師 賀琳 填制日期：12 月25 日實(shí)驗(yàn)一 網(wǎng)站設(shè)計(jì)一、實(shí)驗(yàn)?zāi)康呐c規(guī)定設(shè)計(jì)并實(shí)行一種網(wǎng)站。網(wǎng)站主題自選，但風(fēng)格、色彩、布局等需要統(tǒng)一。規(guī)定網(wǎng)站至少由5個(gè)頁(yè)面構(gòu)成。頁(yè)面遵循HTML4.01 或XHTML 1.0 strict 原則。頁(yè)面的體現(xiàn)由CSS文獻(xiàn)描述。頁(yè)面的布局規(guī)定用CSS文獻(xiàn)描述。頁(yè)面的行為由Javascript文獻(xiàn)完畢。二、實(shí)驗(yàn)內(nèi)容與環(huán)節(jié)及成果展示2.1實(shí)驗(yàn)內(nèi)容2.1.1 主頁(yè)繪制出網(wǎng)頁(yè)的框架設(shè)計(jì)第一步就是頁(yè)面功能構(gòu)造分析，構(gòu)思好了，一般來(lái)說(shuō)還需要

2、用PhotoShop或FireWorks(如下簡(jiǎn)稱PS或FW)等圖片解決軟件將需要制作的界面布局簡(jiǎn)樸的構(gòu)畫出來(lái)，如下是構(gòu)思好的界面布局圖。本次實(shí)驗(yàn)的基本頁(yè)面設(shè)想圖(圖1)。圖 SEQ 圖表 * ARABIC 12 頁(yè)面構(gòu)造設(shè)計(jì)構(gòu)思頁(yè)面整體布局，設(shè)計(jì)出總體框架，寫出如圖2.3 寫入整體層構(gòu)造與CSS 接下來(lái)我們?cè)谧烂嫘陆ㄒ环N文獻(xiàn)夾，命名為“電子商務(wù)實(shí)驗(yàn)課”，在文獻(xiàn)夾下新建兩個(gè)空的文檔。homepage.htmhomepage.css用Dreamweaver打開(kāi)已經(jīng)建立好的站點(diǎn)endpage。打開(kāi)“home page.html”，在標(biāo)簽對(duì)中寫入： ，在標(biāo)簽對(duì)中寫入設(shè)計(jì)好的DIV的基本構(gòu)造(如圖二)

3、 用瀏覽器打開(kāi)，這時(shí)我們已經(jīng)可以看到基本構(gòu)造了，這個(gè)就是頁(yè)面的框架了。 4、填充基本構(gòu)造汽車世界!-function newImage(arg) if (document.images) rslt = new Image();rslt.src = arg;return rslt;function changeImages() if (document.images & (preloadFlag = true) for (var i=0; i2.1.2其她頁(yè)面其她頁(yè)面的設(shè)計(jì)措施，基本和主頁(yè)相似只是形式與顏色尚有部分布局的細(xì)節(jié)不同，在這里就不在贅述設(shè)計(jì)過(guò)程。資料頁(yè)面（以表單為主）圖像頁(yè)面，（以浮動(dòng)

4、的DIV為主）文檔頁(yè)面（用frame構(gòu)造完畢）文字簡(jiǎn)介頁(yè)面（以固定檔案為主）2.1.3超鏈接所有頁(yè)面設(shè)計(jì)完畢后均有導(dǎo)航部分（位置與形式不同），用標(biāo)簽進(jìn)行互相連接2.2實(shí)驗(yàn)內(nèi)容【具體內(nèi)容見(jiàn)頁(yè)面的源代碼】1.汽車世界!-function newImage(arg) if (document.images) rslt = new Image();rslt.src = arg;return rslt;function changeImages() if (document.images & (preloadFlag = true) for (var i=0; i 歡迎。 1766年英國(guó)發(fā)明家瓦特(17

5、36-1819)改進(jìn)蒸汽機(jī)，拉開(kāi)第一次工業(yè)革命的序幕。read more 汽車常識(shí) 汽車常識(shí) 版權(quán)所有 北科技大學(xué)天津?qū)W院 李朝,2. 歷史!-function newImage(arg) if (document.images) rslt = new Image();rslt.src = arg;return rslt;function changeImages() if (document.images & (preloadFlag = true) for (var i=0; i 1766年英國(guó)發(fā)明家瓦特(1736-1819)改進(jìn)蒸汽機(jī)，拉開(kāi)第一次工業(yè)革命的序幕。1769年法國(guó)陸軍工程師古

6、諾(1725-1804)制造出第一輛蒸汽機(jī)驅(qū)動(dòng)的汽車。由試車時(shí)轉(zhuǎn)向系統(tǒng)失靈，撞到般圣奴兵工廠的墻壁上粉身碎骨，這是世界上第一起機(jī)動(dòng)車故。1771年古諾改進(jìn)蒸汽汽車，時(shí)速可達(dá)9.5千米，牽引45噸的貨物。1794年英國(guó)斯垂特首次提出把燃料和空氣混合制成混合氣體供燃燒的構(gòu)想。1796年意大利科學(xué)家沃爾茲發(fā)明世界上第一臺(tái)蓄電池，這項(xiàng)發(fā)明汽車的誕生和發(fā)展帶來(lái)歷史性的轉(zhuǎn)折。 1766年英國(guó)發(fā)明家瓦特(1736-1819)改進(jìn)蒸汽機(jī)，拉開(kāi)第一次工業(yè)革命的序幕。read more。read more版權(quán)所有 北科技大學(xué)天津?qū)W院 李朝 ,3. 圖片!-function newImage(arg) if (do

7、cument.images) rslt = new Image();rslt.src = arg;return rslt;function changeImages() if (document.images & (preloadFlag = true) for (var i=0; i 1766年英國(guó)發(fā)明家瓦特(1736-1819)改進(jìn)蒸汽機(jī)，拉開(kāi)第一次工業(yè)革命的序幕。read more 汽車常識(shí)版權(quán)所有 北科技大學(xué)天津?qū)W院 李朝 ,4. 法拉利!-function newImage(arg) if (document.images) rslt = new Image();rslt.src =

8、 arg;return rslt;function changeImages() if (document.images & (preloadFlag = true) for (var i=0; i 法拉利是一家意大利汽車生商。1229年由恩佐-法拉利創(chuàng)辦。要制造一級(jí)方程式賽車及高檔泡成。法拉利生的汽車大部分采用手工制造。1766年英國(guó)發(fā)明家瓦特(1736-1819)改進(jìn)蒸汽機(jī)，拉開(kāi)第一次工業(yè)革命的序幕。read more 版權(quán)所有 北科技大學(xué)天津?qū)W院 李朝 ,5. 寶馬!-function newImage(arg) if (document.images) rslt = new Image

9、();rslt.src = arg;return rslt;function changeImages() if (document.images & (preloadFlag = true) for (var i=0; i 寶馬我愛(ài)死寶馬寶馬是德國(guó)一家知名的高檔汽車及摩托車制造商。1766年英國(guó)發(fā)明家瓦特(1736-1819)改進(jìn)蒸汽機(jī)，拉開(kāi)第一次工業(yè)革命的序幕。read more 版權(quán)所有北科技大學(xué)天津?qū)W院李朝 ,6. 奔馳!-function newImage(arg) if (document.images) rslt = new Image();rslt.src = arg;return rslt;function changeImages() if (document.images & (preloadFlag = true) for (var i=0; i 1766年英國(guó)發(fā)明家瓦特(1736-1819)改進(jìn)蒸汽機(jī)，拉開(kāi)第一次工業(yè)革命的序幕。read more 版權(quán)所有 北科技大學(xué)天津?qū)W院 李朝,三、實(shí)驗(yàn)總結(jié)通過(guò)對(duì)電子商務(wù)網(wǎng)站設(shè)計(jì)的學(xué)習(xí)，以及通過(guò)對(duì)Div+CSS 的應(yīng)用，我覺(jué)得電子商務(wù)網(wǎng)站在電子商務(wù)交易中起著至關(guān)重要的作