《網(wǎng)站建設(shè)與web 設(shè)計》實驗指導書實驗一 網(wǎng)站建設(shè)規(guī)劃和網(wǎng)站建設(shè)初步實驗目的1.2.3.4.5.6.7.8. 對網(wǎng)站進行目標定位 觀察適合在網(wǎng)上銷售的商品類別 提出創(chuàng)建網(wǎng)站的商品目錄結(jié)構(gòu) 規(guī)劃網(wǎng)站

《網(wǎng)站建設(shè)與web 設(shè)計》實驗指導書

實驗一 網(wǎng)站建設(shè)規(guī)劃和網(wǎng)站建設(shè)初步

實驗目的

1.

2.

3.

4.

5.

6.

7.

8. 對網(wǎng)站進行目標定位 觀察適合在網(wǎng)上銷售的商品類別 提出創(chuàng)建網(wǎng)站的商品目錄結(jié)構(gòu) 規(guī)劃網(wǎng)站的框架結(jié)構(gòu) 分析建站的步驟與方法 熟悉申請域名的流程和管理機構(gòu)。 掌握IIS 的使用技巧。 練習在IIS 中建立站點和對站點進行管理。

實驗目標

1. 提出網(wǎng)站建設(shè)過程中系統(tǒng)規(guī)劃的總體思想和原則。

2. 確定企業(yè)網(wǎng)站銷售商品的分類方法，方便用戶快速瀏覽，找到自己所需要的商品或服務。

3. 確定網(wǎng)站提供服務的大框架，使瀏覽者能夠在首頁上通過網(wǎng)站的提示迅速進入自己需要的頁面。

4. 為網(wǎng)站選擇適當?shù)姆桨?，滿足企業(yè)業(yè)務量的需要，具有服務穩(wěn)定、價格適中、溝通便利、易于擴展的特點。

5. 能正確安裝IIS 6.0

6. 在IIS 中建立和管理站點。

實驗內(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ī)劃、域名注冊、服務器配置、網(wǎng)頁設(shè)計、網(wǎng)站測試與發(fā)布、網(wǎng)站管理與維護、網(wǎng)站推廣等步驟就可以實現(xiàn)。

建站時可以是企業(yè)獨立建站，可以是托付給相應的公司建站，也可以采取雙方合作的方式建站。在分析企業(yè)需求時側(cè)重點有所不同，要予以考慮。

3. 申請域名（可選做）

一個好的域名應該與企業(yè)的性質(zhì)、企業(yè)的名稱、企業(yè)的商標及平時的企業(yè)宣傳一致。選擇與本公司密切相關(guān)的域名，但注意不能超過20個字符。

訪問中國互聯(lián)網(wǎng)絡信息中心www.cnnic.com.cn ，查詢域名認證注冊服務機構(gòu)，選擇一家

機構(gòu)申請注冊自己的域名。

4. DNS 設(shè)置（可選做）

5. 設(shè)置Internet 信息服務管理器（IIS ）

6. Web 站點的建立和管理

7. 以小組的方式，規(guī)劃一個電子商務網(wǎng)站（如網(wǎng)上書店、鮮花禮品商務網(wǎng)站、在線電腦銷

售網(wǎng)站等）。要求規(guī)劃網(wǎng)站的欄目、形象設(shè)計、導航設(shè)計、網(wǎng)頁布局設(shè)計，畫出草圖。、

實驗二 創(chuàng)建一個靜態(tài)頁面——網(wǎng)站首頁

實驗目的

1．熟練掌握靜態(tài)網(wǎng)頁的制作

2．掌握簡單的表單制作方法

實驗要求

環(huán)境準備 :

計算機中裝有IIS 、網(wǎng)頁制作工具（如Dreamweaver 或Frontpage 等）軟件、網(wǎng)頁制作相關(guān)的素材和資料。

知識準備：熟練掌握網(wǎng)頁制作工具的使用方法。

實驗目標

創(chuàng)建如圖2-1所示的“靜雅書苑的網(wǎng)上書店”網(wǎng)站首頁。

圖2-1

問題分析

網(wǎng)頁設(shè)計容易出現(xiàn)下列問題: ● 亂：網(wǎng)頁內(nèi)容太龐雜。

● 無吸引力：太簡單，顯得單調(diào)。

● 打開速度太慢：網(wǎng)頁中使用了過多的多媒體元素。

● 重要信息不容易找到：原因是缺乏規(guī)劃，沒有對瀏覽者需 求進行深入分析。 解決方法

● 亂：網(wǎng)站首頁布局要合理，分類清晰。

● 無吸引力：網(wǎng)站首頁要提供足夠的信息。

● 打開速度太慢：首頁上圖片的大小和使用數(shù)量要適當。

● 重要信息不容易找到：從網(wǎng)站瀏覽者的角度分析進行分析，確定內(nèi)容安排。 實驗步驟

（1）

（2）

（3）

（4） 啟動網(wǎng)頁制作工具Dreamweaver 軟件。 建立本地站點。設(shè)置本地根文件夾為D:jingya。 新建一個靜態(tài)網(wǎng)頁文件，保存該文件名為index.htm 。 設(shè)置頁面屬性，在標題處輸入“靜雅書苑”，“左邊距”和“上邊距”都設(shè)置為

0。

（5） 插入一個表格，表格參數(shù)設(shè)置如圖2-2所示。

圖2-2

（6） 選中整個表格，在屬性面板中設(shè)置表格對齊方式為“居中對齊”，如圖2-3所示。

該表格將控制網(wǎng)站首頁的整體布局，使網(wǎng)頁在不同分辨率的顯示器上都能正常顯示。

圖2-3

（7） 在表格中插入一個1行3列的表格，在屬性面板中的“表格ID ”框中命名該表

格為B1，設(shè)置該表格屬性為高60，寬度為100，單元格對齊方式為垂直方向“頂端對齊”。設(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列中插入一個3行1列的表格，命名該表格為B11。表B11寬100，，

并在B11表格中填入如圖2-6所示的內(nèi)容，并設(shè)置B1的背景圖片。

圖2-6

（10） 在大表格中插入一個如圖2-7所示的1行5列的表格，在屬性面板中命名為B2。

該表格用來制作網(wǎng)頁的導航欄。

圖2-7

（11） 插入一個如圖2-8所示的2行7列的表格，命名為B3。

圖2-8

（12） 在B2表格中插入準備好的導航欄圖片和填入如圖2-9所示的其他項目。

圖2-9

（13） 在B3表格中填入如圖2-10所示的相關(guān)內(nèi)容。

圖2-10

（14） 為分類導航欄設(shè)置鏈接（在沒有準備好其他頁面的情況下，可以先用#設(shè)置無址

鏈接），如圖2-11所示。

圖2-11

（15） 在分類導航欄下面插入一個如圖2-12所示的1行3列的表格，命名該表格為

B4。

圖2-12

（16） 在表格B4的第1列中制作一個會員登錄表單，如圖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所示。