網(wǎng)站建設(shè)與web設(shè)計(jì)實(shí)驗(yàn)指導(dǎo)書
《網(wǎng)站建設(shè)與web 設(shè)計(jì)》實(shí)驗(yàn)指導(dǎo)書實(shí)驗(yàn)一 網(wǎng)站建設(shè)規(guī)劃和網(wǎng)站建設(shè)初步實(shí)驗(yàn)?zāi)康?.2.3.4.5.6.7.8. 對(duì)網(wǎng)站進(jìn)行目標(biāo)定位 觀察適合在網(wǎng)上銷售的商品類別 提出創(chuàng)建網(wǎng)站的商品目錄結(jié)構(gòu) 規(guī)劃網(wǎng)站
《網(wǎng)站建設(shè)與web 設(shè)計(jì)》實(shí)驗(yàn)指導(dǎo)書
實(shí)驗(yàn)一 網(wǎng)站建設(shè)規(guī)劃和網(wǎng)站建設(shè)初步
實(shí)驗(yàn)?zāi)康?/p>
1.
2.
3.
4.
5.
6.
7.
8. 對(duì)網(wǎng)站進(jìn)行目標(biāo)定位 觀察適合在網(wǎng)上銷售的商品類別 提出創(chuàng)建網(wǎng)站的商品目錄結(jié)構(gòu) 規(guī)劃網(wǎng)站的框架結(jié)構(gòu) 分析建站的步驟與方法 熟悉申請(qǐng)域名的流程和管理機(jī)構(gòu)。 掌握IIS 的使用技巧。 練習(xí)在IIS 中建立站點(diǎn)和對(duì)站點(diǎn)進(jìn)行管理。
實(shí)驗(yàn)?zāi)繕?biāo)
1. 提出網(wǎng)站建設(shè)過程中系統(tǒng)規(guī)劃的總體思想和原則。
2. 確定企業(yè)網(wǎng)站銷售商品的分類方法,方便用戶快速瀏覽,找到自己所需要的商品或服務(wù)。
3. 確定網(wǎng)站提供服務(wù)的大框架,使瀏覽者能夠在首頁上通過網(wǎng)站的提示迅速進(jìn)入自己需要的頁面。
4. 為網(wǎng)站選擇適當(dāng)?shù)姆桨?,滿足企業(yè)業(yè)務(wù)量的需要,具有服務(wù)穩(wěn)定、價(jià)格適中、溝通便利、易于擴(kuò)展的特點(diǎn)。
5. 能正確安裝IIS 6.0
6. 在IIS 中建立和管理站點(diǎn)。
實(shí)驗(yàn)內(nèi)容
1. 瀏覽大量成熟網(wǎng)站,參考網(wǎng)站的商品分類方法。(亞馬遜www.amazon.com 、戴爾www.dell.com 、首都電子商城www.beijing.com.cn 、阿里巴巴)
2. 參考網(wǎng)站建站的方案,明確建設(shè)網(wǎng)站的步驟—般經(jīng)過網(wǎng)站規(guī)劃、域名注冊(cè)、服務(wù)器配置、網(wǎng)頁設(shè)計(jì)、網(wǎng)站測(cè)試與發(fā)布、網(wǎng)站管理與維護(hù)、網(wǎng)站推廣等步驟就可以實(shí)現(xiàn)。
建站時(shí)可以是企業(yè)獨(dú)立建站,可以是托付給相應(yīng)的公司建站,也可以采取雙方合作的方式建站。在分析企業(yè)需求時(shí)側(cè)重點(diǎn)有所不同,要予以考慮。
3. 申請(qǐng)域名(可選做)
一個(gè)好的域名應(yīng)該與企業(yè)的性質(zhì)、企業(yè)的名稱、企業(yè)的商標(biāo)及平時(shí)的企業(yè)宣傳一致。選擇與本公司密切相關(guān)的域名,但注意不能超過20個(gè)字符。
訪問中國互聯(lián)網(wǎng)絡(luò)信息中心www.cnnic.com.cn ,查詢域名認(rèn)證注冊(cè)服務(wù)機(jī)構(gòu),選擇一家
,機(jī)構(gòu)申請(qǐng)注冊(cè)自己的域名。
4. DNS 設(shè)置(可選做)
5. 設(shè)置Internet 信息服務(wù)管理器(IIS )
6. Web 站點(diǎn)的建立和管理
7. 以小組的方式,規(guī)劃一個(gè)電子商務(wù)網(wǎng)站(如網(wǎng)上書店、鮮花禮品商務(wù)網(wǎng)站、在線電腦銷
售網(wǎng)站等)。要求規(guī)劃網(wǎng)站的欄目、形象設(shè)計(jì)、導(dǎo)航設(shè)計(jì)、網(wǎng)頁布局設(shè)計(jì),畫出草圖。、
實(shí)驗(yàn)二 創(chuàng)建一個(gè)靜態(tài)頁面——網(wǎng)站首頁
實(shí)驗(yàn)?zāi)康?/p>
1.熟練掌握靜態(tài)網(wǎng)頁的制作
2.掌握簡(jiǎn)單的表單制作方法
實(shí)驗(yàn)要求
環(huán)境準(zhǔn)備 :
計(jì)算機(jī)中裝有IIS 、網(wǎng)頁制作工具(如Dreamweaver 或Frontpage 等)軟件、網(wǎng)頁制作相關(guān)的素材和資料。
知識(shí)準(zhǔn)備:熟練掌握網(wǎng)頁制作工具的使用方法。
實(shí)驗(yàn)?zāi)繕?biāo)
創(chuàng)建如圖2-1所示的“靜雅書苑的網(wǎng)上書店”網(wǎng)站首頁。
,圖2-1
問題分析
網(wǎng)頁設(shè)計(jì)容易出現(xiàn)下列問題: ● 亂:網(wǎng)頁內(nèi)容太龐雜。
● 無吸引力:太簡(jiǎn)單,顯得單調(diào)。
,● 打開速度太慢:網(wǎng)頁中使用了過多的多媒體元素。
● 重要信息不容易找到:原因是缺乏規(guī)劃,沒有對(duì)瀏覽者需 求進(jìn)行深入分析。 解決方法
● 亂:網(wǎng)站首頁布局要合理,分類清晰。
● 無吸引力:網(wǎng)站首頁要提供足夠的信息。
● 打開速度太慢:首頁上圖片的大小和使用數(shù)量要適當(dāng)。
● 重要信息不容易找到:從網(wǎng)站瀏覽者的角度分析進(jìn)行分析,確定內(nèi)容安排。 實(shí)驗(yàn)步驟
(1)
(2)
(3)
(4) 啟動(dòng)網(wǎng)頁制作工具Dreamweaver 軟件。 建立本地站點(diǎn)。設(shè)置本地根文件夾為D:jingya。 新建一個(gè)靜態(tài)網(wǎng)頁文件,保存該文件名為index.htm 。 設(shè)置頁面屬性,在標(biāo)題處輸入“靜雅書苑”,“左邊距”和“上邊距”都設(shè)置為
0。
(5) 插入一個(gè)表格,表格參數(shù)設(shè)置如圖2-2所示。
圖2-2
(6) 選中整個(gè)表格,在屬性面板中設(shè)置表格對(duì)齊方式為“居中對(duì)齊”,如圖2-3所示。
該表格將控制網(wǎng)站首頁的整體布局,使網(wǎng)頁在不同分辨率的顯示器上都能正常顯示。
圖2-3
(7) 在表格中插入一個(gè)1行3列的表格,在屬性面板中的“表格ID ”框中命名該表
格為B1,設(shè)置該表格屬性為高60,寬度為100,單元格對(duì)齊方式為垂直方向“頂端對(duì)齊”。設(shè)置該表格第1、3列列寬為25,第2列列寬為50,效果如圖2-4所示。
,圖2-4
(8) 在表格B1的第1和第2單元格中分別插入網(wǎng)站的logo 和Banner 圖片(事先用
photoshop 或Fireworks 軟件制作好),如圖2-5所示。
圖2-5
(9) 在B1的第3列中插入一個(gè)3行1列的表格,命名該表格為B11。表B11寬100,,
并在B11表格中填入如圖2-6所示的內(nèi)容,并設(shè)置B1的背景圖片。
圖2-6
(10) 在大表格中插入一個(gè)如圖2-7所示的1行5列的表格,在屬性面板中命名為B2。
該表格用來制作網(wǎng)頁的導(dǎo)航欄。
,圖2-7
(11) 插入一個(gè)如圖2-8所示的2行7列的表格,命名為B3。
圖2-8
(12) 在B2表格中插入準(zhǔn)備好的導(dǎo)航欄圖片和填入如圖2-9所示的其他項(xiàng)目。
圖2-9
(13) 在B3表格中填入如圖2-10所示的相關(guān)內(nèi)容。
,圖2-10
(14) 為分類導(dǎo)航欄設(shè)置鏈接(在沒有準(zhǔn)備好其他頁面的情況下,可以先用#設(shè)置無址
鏈接),如圖2-11所示。
圖2-11
(15) 在分類導(dǎo)航欄下面插入一個(gè)如圖2-12所示的1行3列的表格,命名該表格為
B4。
,圖2-12
(16) 在表格B4的第1列中制作一個(gè)會(huì)員登錄表單,如圖2-13. 所示。
圖2-13
(17) 制作如圖2-14所示的“圖書商城”、“影視商城”和“音樂商城”分類索引表格。
,圖2-14
(18) 為“圖書商城”、“影視商城”和“音樂商城”分類索引表格設(shè)置背景顏色,如
#CCCCCC。在B4表格的第2單元格中制作“持續(xù)熱銷”圖書信息,如圖2-15所示。
,圖2-15
(19) 在B4表格的第3單元格中制作“最近新書”欄目的內(nèi)容,如圖2-16所示。
圖2-16
(20) 制作“本月銷售排行”欄目,如圖2-17所示。