平面廣告項(xiàng)目設(shè)計(jì)與制作綜合實(shí)訓(xùn)

第一篇：平面廣告項(xiàng)目設(shè)計(jì)與制作綜合實(shí)訓(xùn)

平面廣告項(xiàng)目設(shè)計(jì)與制作綜合實(shí)訓(xùn) 項(xiàng)目1 標(biāo)志設(shè)計(jì)

1.1 標(biāo)志設(shè)計(jì)簡介

1.2 教學(xué)活動(dòng) 旅行社標(biāo)志設(shè)計(jì)

1.3 體驗(yàn)活動(dòng) 企業(yè)標(biāo)志設(shè)計(jì) 項(xiàng)目2 UI設(shè)計(jì)

2.1 UI設(shè)計(jì)簡介

2.2 教學(xué)活動(dòng) 手機(jī)操作界面設(shè)計(jì)

2.3 體驗(yàn)活動(dòng) 手機(jī)音樂界面設(shè)計(jì) 項(xiàng)目3 卡片設(shè)計(jì)

3.1 卡片設(shè)計(jì)簡介

3.2 教學(xué)活動(dòng) 普通會(huì)員卡設(shè)計(jì)

3.3 體驗(yàn)活動(dòng) VIP會(huì)員卡設(shè)計(jì) 項(xiàng)目4 名片設(shè)計(jì)

4.1 名片設(shè)計(jì)簡介

4.2 教學(xué)活動(dòng) 企業(yè)名片設(shè)計(jì)

4.3 體驗(yàn)活動(dòng) 個(gè)人名片設(shè)計(jì) 項(xiàng)目5 信封設(shè)計(jì)

5.1 信封設(shè)計(jì)簡介

5.2 教學(xué)活動(dòng) 企業(yè)信封/信紙?jiān)O(shè)計(jì)

5.3 體驗(yàn)活動(dòng) 商業(yè)信封的設(shè)計(jì) 項(xiàng)目6 盤面設(shè)計(jì) 6.1 盤面設(shè)計(jì)簡介

6.2 教學(xué)活動(dòng) 演出光盤及封套設(shè)計(jì)

6.3 體驗(yàn)活動(dòng) 房地產(chǎn)企業(yè)宣傳光盤盤面設(shè)計(jì) 項(xiàng)目7 DM廣告設(shè)計(jì)

7.1 DM設(shè)計(jì)簡介

7.2 教學(xué)活動(dòng) 產(chǎn)品宣傳DM設(shè)計(jì)

7.3 體驗(yàn)活動(dòng) 護(hù)膚品宣傳DM設(shè)計(jì) 項(xiàng)目8 海報(bào)設(shè)計(jì)

8.1 海報(bào)簡介

8.2 教學(xué)活動(dòng) 促銷海報(bào)設(shè)計(jì)

8.3 體驗(yàn)活動(dòng) 高爾夫球場宣傳海報(bào)設(shè)計(jì) 項(xiàng)目9 包裝設(shè)計(jì)

9.1 包裝設(shè)計(jì)簡介

9.2 教學(xué)活動(dòng) 食品包裝設(shè)計(jì)

9.3 體驗(yàn)活動(dòng) 茶品包裝設(shè)計(jì) 項(xiàng)目10 書籍裝幀設(shè)計(jì)

10.1 書籍裝幀設(shè)計(jì)簡介

10.2 教學(xué)活動(dòng) 書籍封面設(shè)計(jì)

10.3 體驗(yàn)活動(dòng) 雜志封面設(shè)計(jì) 項(xiàng)目11 字體設(shè)計(jì)

11.1 字體設(shè)計(jì)簡介

11.2 教學(xué)活動(dòng) 火焰文字設(shè)計(jì) 11.3 體驗(yàn)活動(dòng) 制作變形文字項(xiàng)目12 宣傳畫冊設(shè)計(jì)

12.1 宣傳畫冊設(shè)計(jì)簡介

12.2 教學(xué)活動(dòng) 產(chǎn)品宣傳畫冊設(shè)計(jì)

12.3 體驗(yàn)活動(dòng) 旅游畫冊設(shè)計(jì) 項(xiàng)目13 展板設(shè)計(jì)

13.1 展板設(shè)計(jì)簡介

13.2 教學(xué)活動(dòng) 醫(yī)療展板設(shè)計(jì)

13.3 體驗(yàn)活動(dòng) 人物宣傳展板設(shè)計(jì) 項(xiàng)目14 數(shù)碼照片處理

14.1 數(shù)碼照片處理簡介

14.2 教學(xué)活動(dòng) 將照片處理為個(gè)性電影海報(bào)

14.3 體驗(yàn)活動(dòng) 調(diào)整照片夢幻紫色調(diào) 項(xiàng)目15 易拉寶設(shè)計(jì)

15.1 易拉寶設(shè)計(jì)簡介

15.2 教學(xué)活動(dòng) 易拉寶的設(shè)計(jì)

15.3 體驗(yàn)活動(dòng) 打印機(jī)宣傳展架設(shè)計(jì) 項(xiàng)目16 折頁設(shè)計(jì)

16.1 折頁設(shè)計(jì)簡介

16.2 教學(xué)活動(dòng) 產(chǎn)品宣傳三折頁設(shè)計(jì)

16.3 體驗(yàn)活動(dòng) 活動(dòng)三折頁設(shè)計(jì) 項(xiàng)目17 招貼廣告設(shè)計(jì) 17.1 招貼廣告設(shè)計(jì)簡介

17.2 教學(xué)活動(dòng) 戒指招貼廣告設(shè)計(jì)

17.3 體驗(yàn)活動(dòng) 皮鞋招貼廣告設(shè)計(jì)

第二篇：《網(wǎng)頁設(shè)計(jì)與制作》綜合實(shí)訓(xùn)

《網(wǎng)頁制作》期末大作業(yè)

一、概述：

要求設(shè)計(jì)并制作一個(gè)表達(dá)某個(gè)主題的網(wǎng)站，通過網(wǎng)站的制作，綜合運(yùn)用本課程各單元所學(xué)的知識。網(wǎng)站的內(nèi)容不能是一些素材如圖片、音樂等的堆積，必須有鮮明的主題?？梢詮木W(wǎng)上下載部分資料，但不能超過整個(gè)內(nèi)容的30%，更不要指望從網(wǎng)上下一個(gè)完整的網(wǎng)站應(yīng)付老師。總的頁數(shù)應(yīng)超過10頁（一個(gè)包含主題內(nèi)容的htm文件算一頁）。請同學(xué)們注意不要下載相同的資料，如果出現(xiàn)網(wǎng)頁內(nèi)容雷同，雙方都要扣分，嚴(yán)重的必須重做。

二、網(wǎng)站內(nèi)容：

自行選擇如下內(nèi)容：科普、科幻知識；公益形象宣傳；大、中、小學(xué)教學(xué)用動(dòng)畫形象；奧林匹克體育；環(huán)境保護(hù)；戰(zhàn)爭與和平；求職；校園生活；誠信、傳統(tǒng)美德；交通安全；衛(wèi)生與健康；愛心；教育；新青年；管理；實(shí)用工具等。自己確定一個(gè)主題，整個(gè)網(wǎng)站要突出主題，信息分類合理，導(dǎo)航清晰。要求必須有自己創(chuàng)作的內(nèi)容，這些原創(chuàng)內(nèi)容可以是文字、圖片、動(dòng)畫等。

三、版面及格式：

l、要求圖文并茂，顏色搭配合理，但是圖片及聲音文件不要太大。如果能加入自己創(chuàng)作的動(dòng)態(tài)元素(如Flash，Gif動(dòng)畫等)將獲得加分。希望充分發(fā)揮自己的創(chuàng)作能力。

2、要求每個(gè)網(wǎng)頁都使用表格布局。

3、要求網(wǎng)頁中插入有Web組件，包括懸停按鈕、滾動(dòng)字幕、橫幅廣告管理器等。

4、導(dǎo)航設(shè)計(jì)簡潔明了，不能有“死鏈接”，要保證能夠在網(wǎng)絡(luò)上瀏覽。

5、自創(chuàng)內(nèi)容越多越好，得分越高。

四、遞交方式：

1、每個(gè)同學(xué)以自己的學(xué)號姓名建一個(gè)文件夾，上交時(shí)間為18周2、所做網(wǎng)頁的首頁文件名必須為index.htm3、所有文件名和目錄名全部使用英文字母和數(shù)字，不得使用漢字或全角符號，否則，網(wǎng)絡(luò)將出現(xiàn)死鏈接。

4、遞交時(shí)必須把網(wǎng)頁中所有用到的圖片、聲音、動(dòng)畫等都一起上傳到服務(wù)器。網(wǎng)頁的總?cè)萘恳话悴灰笥?MB5、建議將網(wǎng)頁中的素材分類，建立不同的子目錄存放。

五、網(wǎng)頁評分標(biāo)準(zhǔn):

整個(gè)網(wǎng)頁的評分強(qiáng)調(diào)“自己的創(chuàng)意”，不管主題是什么，也不論是哪一個(gè)欄目的內(nèi)容，如果創(chuàng)意獨(dú)特，有自己鮮明的個(gè)性、觀點(diǎn)，得分較高。

1、主題鮮明，有關(guān)主題的內(nèi)容豐富（30分）

2、原創(chuàng)內(nèi)容豐富，能體現(xiàn)自己的想法，文字流利通順（30分）

3、版面布局合理，整理效果美觀（20分）

4、其他內(nèi)容如友情鏈接、相關(guān)資料等（5分）

5、插入的圖片等素材恰當(dāng)、美觀（5分）

6、技術(shù)含量（使用了各種效果、技術(shù)等）（10分）

六、網(wǎng)頁制作特別注意事項(xiàng)：

1、網(wǎng)頁文件名最好全部用英文字母或數(shù)字（不能包含漢字）；

2、整理圖片和其他素材；

3、在與網(wǎng)頁主文件（index.htm)同級的目錄中建立子目錄image(圖片）、wave(聲音）、?等，將取得的素材按類保存好，在制作網(wǎng)頁（即編輯HTM文件）時(shí)，必須從這些目錄中插入素材，以保證顯示正確，不能從其他目錄插入，提示另外保存圖片時(shí)，不要改變保存目錄，直接按[確定]即可。同學(xué)們要改變那種在編輯網(wǎng)頁時(shí)到處找圖片，找到了就往HTML文件中插的壞習(xí)慣(也不管這個(gè)文件在哪里）；

4、作好筆記將對后期調(diào)試非常有利，從開始規(guī)劃起就記錄目錄名、文件名的分配，以便調(diào)試時(shí)節(jié)省時(shí)間。

第三篇：《網(wǎng)頁設(shè)計(jì)與制作綜合實(shí)訓(xùn)》實(shí)訓(xùn)指導(dǎo)書

武漢商貿(mào)職業(yè)學(xué)院信息工程學(xué)院

《網(wǎng)頁設(shè)計(jì)與制作綜合實(shí)訓(xùn)》實(shí)訓(xùn)指導(dǎo)書

軟件教研室 2013年9月《網(wǎng)頁設(shè)計(jì)與制作綜合實(shí)訓(xùn)》實(shí)訓(xùn)指導(dǎo)書

實(shí)訓(xùn)目的...........................................................................................................................................1 實(shí)訓(xùn)內(nèi)容及要求...............................................................................................................................1 實(shí)訓(xùn)性質(zhì)、實(shí)訓(xùn)地點(diǎn)、實(shí)習(xí)時(shí)間安排，適用專業(yè)班級...............................................................2 實(shí)訓(xùn)一站點(diǎn)的規(guī)劃設(shè)計(jì)..................................................................................................................3 實(shí)訓(xùn)二設(shè)計(jì)案例網(wǎng)站LOGO.........................................................................................................4 實(shí)訓(xùn)三設(shè)計(jì)案例網(wǎng)站BANNER...................................................................................................5 實(shí)訓(xùn)四設(shè)計(jì)案例網(wǎng)站導(dǎo)航條.........................................................................................................6 實(shí)訓(xùn)五設(shè)計(jì)案例網(wǎng)站網(wǎng)頁內(nèi)容和網(wǎng)頁版權(quán)聲明.........................................................................7 實(shí)訓(xùn)六對案例網(wǎng)站版面切圖.........................................................................................................8 實(shí)訓(xùn)七制作完成案例網(wǎng)站首頁.....................................................................................................9 實(shí)訓(xùn)八案例網(wǎng)站模板的制作.......................................................................................................10 實(shí)訓(xùn)九案例網(wǎng)頁超級鏈接的添加...............................................................................................11 實(shí)訓(xùn)十案例網(wǎng)站加入動(dòng)態(tài)元素...................................................................................................12

第2頁《網(wǎng)頁設(shè)計(jì)與制作綜合實(shí)訓(xùn)》實(shí)訓(xùn)指導(dǎo)書

實(shí)訓(xùn)目的

在前一階段，學(xué)生完成了《網(wǎng)頁設(shè)計(jì)與制作》、《圖形圖像處理》、《CSS設(shè)計(jì)》、等專業(yè)課程的學(xué)習(xí)，為了讓學(xué)生將前期的專業(yè)課程學(xué)以致用，融會(huì)貫通，特開設(shè)本系統(tǒng)化實(shí)訓(xùn)。

本次綜合實(shí)訓(xùn)基于學(xué)生的興趣，選取專業(yè)建設(shè)網(wǎng)站開發(fā)為主題，基于網(wǎng)頁開發(fā)的流程，把實(shí)訓(xùn)周期當(dāng)做是一個(gè)項(xiàng)目的開發(fā)周期，嚴(yán)格把握項(xiàng)目進(jìn)度，最終要求學(xué)生完成網(wǎng)站的前臺設(shè)計(jì)。

通過本次實(shí)訓(xùn)希望達(dá)到以下目的：

1.熟悉和掌握Dreamweaver軟件的使用方法； 2.熟悉和掌握PS軟件的使用方法； 3.熟悉FLASH軟件應(yīng)用的方法； 4.學(xué)會(huì)使用CSS+DIV做網(wǎng)頁布局； 5.熟練掌握站點(diǎn)的規(guī)劃與設(shè)計(jì)

實(shí)訓(xùn)內(nèi)容及要求

本實(shí)訓(xùn)的內(nèi)容簡述： 1.網(wǎng)站首頁（1）專業(yè)概況（2）專業(yè)建設(shè)規(guī)劃

（3）展示最新動(dòng)態(tài)文章標(biāo)題（8條）（4）專業(yè)建設(shè)成效的文章標(biāo)題（8項(xiàng)）（5）專業(yè)建設(shè)特色文章標(biāo)題（8項(xiàng)）2.專業(yè)概況

點(diǎn)擊項(xiàng)目概況，顯示相關(guān)文本 3.專業(yè)建設(shè)規(guī)劃

點(diǎn)擊項(xiàng)目申報(bào)書菜單，顯示flashpaper格式的申報(bào)書內(nèi)容 4.專業(yè)建設(shè)特色

顯示專業(yè)建設(shè)特色的文章標(biāo)題列表，點(diǎn)擊標(biāo)題進(jìn)入內(nèi)容 5.專業(yè)建設(shè)動(dòng)態(tài)

顯示專業(yè)建設(shè)動(dòng)態(tài)的標(biāo)題列表，點(diǎn)擊標(biāo)題進(jìn)入成果詳細(xì)展示 6.專業(yè)建設(shè)成效

顯示專業(yè)建設(shè)成效的標(biāo)題列表，點(diǎn)擊標(biāo)題進(jìn)入成果詳細(xì)展示。本實(shí)訓(xùn)的要求：

1.應(yīng)用css和html（div+css）技術(shù)完成至少4個(gè)頁面，其中必須包括網(wǎng)站主頁面設(shè)計(jì)、欄目頁設(shè)計(jì)、管理員管理登陸頁面、管理員登錄以后的頁面。2.顯示環(huán)境：網(wǎng)頁視覺效果應(yīng)采用Internet Explorer 6.0以上版本瀏覽器，顯示分辨率以1024×768狀態(tài)為準(zhǔn)。

第1頁《網(wǎng)頁設(shè)計(jì)與制作綜合實(shí)訓(xùn)》實(shí)訓(xùn)指導(dǎo)書

3.網(wǎng)頁規(guī)模：網(wǎng)頁總量原則上不應(yīng)超過10M，且必須要是不連接互聯(lián)網(wǎng)就可以進(jìn)行展示的作品。

4.網(wǎng)站結(jié)構(gòu)：要求結(jié)構(gòu)清晰，文件有清晰的分類，比如圖片都放在images文件夾下等。

5.要求頁面美觀大方、顏色搭配協(xié)調(diào)；

6.作品留存，下學(xué)期或下一階段繼續(xù)完善、開發(fā)。

實(shí)訓(xùn)性質(zhì)、實(shí)訓(xùn)地點(diǎn)、實(shí)習(xí)時(shí)間安排，適用專業(yè)班級

該實(shí)訓(xùn)為校內(nèi)模擬實(shí)訓(xùn)。根據(jù)高等教育教學(xué)大綱規(guī)定和學(xué)院教學(xué)計(jì)劃安排及培養(yǎng)學(xué)生職業(yè)技能的要求，軟微班的學(xué)生于第一學(xué)期進(jìn)行為期4周的校內(nèi)實(shí)訓(xùn)，項(xiàng)目名稱為《網(wǎng)頁設(shè)計(jì)與制作綜合實(shí)訓(xùn)》。

實(shí)訓(xùn)時(shí)間：2013-2014學(xué)年第一學(xué)期第15-18周實(shí)訓(xùn)班級：軟件1301班、軟件1302班實(shí)訓(xùn)地點(diǎn)：學(xué)校機(jī)房

第2頁《網(wǎng)頁設(shè)計(jì)與制作綜合實(shí)訓(xùn)》實(shí)訓(xùn)指導(dǎo)書

實(shí)訓(xùn)一站點(diǎn)的規(guī)劃設(shè)計(jì)

1、學(xué)時(shí)分配：6學(xué)時(shí)

2、實(shí)訓(xùn)目的

（1）熟悉Dreamweaver軟件的界面布局和工作環(huán)境。（2）熟練掌握本地站點(diǎn)創(chuàng)建和管理的方法。

3、實(shí)訓(xùn)任務(wù)

（1）創(chuàng)建一個(gè)靜態(tài)網(wǎng)站站點(diǎn)。（2）從網(wǎng)絡(luò)上收集網(wǎng)頁素材。

（3）根據(jù)提供的網(wǎng)站策劃方案范本，結(jié)合自己要制作完成的網(wǎng)站，開始著手書寫網(wǎng)站策劃方案。

4、實(shí)訓(xùn)內(nèi)容

（1）打開Dreamweaver 軟件，熟悉軟件的界面布局和工作面板的擺放，能夠熟練使用Dreamweaver 軟件。

（2）在本機(jī)D盤上創(chuàng)建文件夾“home”，在“home”文件夾下根據(jù)網(wǎng)站的規(guī)劃設(shè)計(jì)，創(chuàng)建相關(guān)的文件夾，用來放置不同的文件。

（3）在Dreamweaver 軟件中，將D盤 “home” 文件夾定義成靜態(tài)網(wǎng)站站點(diǎn)，站點(diǎn)名稱任意。

5、實(shí)訓(xùn)要求

（1）由指導(dǎo)教師講清實(shí)訓(xùn)的基本原理，要求，實(shí)訓(xùn)目的。

（2）實(shí)訓(xùn)不分小組，要求每位同學(xué)均能獨(dú)立地完全相關(guān)實(shí)訓(xùn)的設(shè)計(jì)與制作。（3）教學(xué)實(shí)訓(xùn)除了驗(yàn)證課程理論外，還要求學(xué)生掌握網(wǎng)絡(luò)資源的搜索與應(yīng)用。（4）除了教師的指導(dǎo)外，還要著重培養(yǎng)學(xué)生自學(xué)的能力。

第3頁《網(wǎng)頁設(shè)計(jì)與制作綜合實(shí)訓(xùn)》實(shí)訓(xùn)指導(dǎo)書

實(shí)訓(xùn)二設(shè)計(jì)案例網(wǎng)站LOGO

1、學(xué)時(shí)分配：6學(xué)時(shí)

2、實(shí)訓(xùn)目的

（1）熟悉Photoshop軟件的界面布局和工作環(huán)境。（2）熟練掌握網(wǎng)站LOGO的設(shè)計(jì)方法。（3）創(chuàng)建項(xiàng)目案例網(wǎng)站的LOGO。

3、實(shí)訓(xùn)任務(wù)

（1）掌握Photoshop軟件文字工具工具的使用方法。（2）查看網(wǎng)絡(luò)上相關(guān)網(wǎng)站LOGO。

（3）根據(jù)小組討論結(jié)果，實(shí)際動(dòng)手完成網(wǎng)站的LOGO。

4、實(shí)訓(xùn)內(nèi)容

（1）打開Photoshop軟件，熟悉軟件的界面布局和工作面板的擺放，能夠熟練使用Photoshop軟件。

（2）新建Photoshop文件，大小為980*600像素，分辨率為72像素/英寸，顏色模式為RGB顏色8位，背景顏色為白色或者透明都可以。（3）使用文字工具，輸入MZD三個(gè)字母，設(shè)置文字屬性。

（4）柵格化文字圖層，將柵格化后的圖層上的3個(gè)字母分別移動(dòng)到不同的3個(gè)圖層上。

（5）分別對3個(gè)字母進(jìn)行藝術(shù)化處理。（6）輸入其他的文字。

（7）為輸入的文字圖層設(shè)置“混合選項(xiàng)”。（8）保存文件。

5、實(shí)訓(xùn)要求

（1）由指導(dǎo)教師講清實(shí)訓(xùn)的基本原理，要求，實(shí)訓(xùn)目的。

第4頁《網(wǎng)頁設(shè)計(jì)與制作綜合實(shí)訓(xùn)》實(shí)訓(xùn)指導(dǎo)書

實(shí)訓(xùn)三設(shè)計(jì)案例網(wǎng)站BANNER

1、學(xué)時(shí)分配：6學(xué)時(shí)

2、實(shí)訓(xùn)目的

（1）熟悉Photoshop軟件的使用方法。（2）熟練掌握網(wǎng)站BANNER的設(shè)計(jì)方法。（3）創(chuàng)建項(xiàng)目案例網(wǎng)站的BANNER。

3、實(shí)訓(xùn)任務(wù)

（1）掌握Photoshop軟件漸變工具的使用方法。（2）查看網(wǎng)絡(luò)上相關(guān)網(wǎng)站BANNER。

（3）根據(jù)小組討論結(jié)果，實(shí)際動(dòng)手完成網(wǎng)站的BANNER。

4、實(shí)訓(xùn)內(nèi)容

（1）打開Photoshop軟件，熟悉軟件的界面布局和工作面板的擺放，熟練使用Photoshop軟件。

（2）打開上次保存好的Photoshop源文件，在上次完成的LOGO基礎(chǔ)上，準(zhǔn)備開始制作本次的BANNER。

（3）根據(jù)網(wǎng)站策劃方案里的主色調(diào)和主題的要求，開始設(shè)計(jì)網(wǎng)站的BANNER，首先去選擇一張適合的圖片。

（4）使用矩形選框工具選擇要使用的圖片部分，圖片的其他部分刪除。（5）根據(jù)設(shè)計(jì)要求，在BANNER上添加其他元素，比如文字或者其他能夠表達(dá)網(wǎng)站主題的圖片。

（6）使用魔術(shù)棒工具將要放置到BANNER上的圖片的某一部分扣出來，然后設(shè)置適合的大小，旋轉(zhuǎn)好方向后放好。

（7）設(shè)置圖層的樣式，以及文字的混合選項(xiàng)等。（8）保存文件。

5、實(shí)訓(xùn)要求

（1）由指導(dǎo)教師講清實(shí)訓(xùn)的基本原理，要求，實(shí)訓(xùn)目的。

第5頁《網(wǎng)頁設(shè)計(jì)與制作綜合實(shí)訓(xùn)》實(shí)訓(xùn)指導(dǎo)書

實(shí)訓(xùn)四設(shè)計(jì)案例網(wǎng)站導(dǎo)航條

1、學(xué)時(shí)分配：6學(xué)時(shí)

2、實(shí)訓(xùn)目的

（1）熟悉Photoshop軟件的使用方法。（2）熟練掌握網(wǎng)站導(dǎo)航條的設(shè)計(jì)方法。（3）創(chuàng)建項(xiàng)目案例網(wǎng)站的導(dǎo)航條。

3、實(shí)訓(xùn)任務(wù)

（1）掌握Photoshop軟件圓角矩形工具的使用方法。（2）查看網(wǎng)絡(luò)上相關(guān)網(wǎng)站導(dǎo)航條。

（3）根據(jù)小組討論結(jié)果，實(shí)際動(dòng)手完成網(wǎng)站的導(dǎo)航條。

4、實(shí)訓(xùn)內(nèi)容

（1）打開Photoshop軟件，熟悉軟件的界面布局和工作面板的擺放，熟練使用Photoshop軟件。

（2）查看網(wǎng)上其它網(wǎng)站的導(dǎo)航條，了解導(dǎo)航條的基本情況。

（3）打開上次保存好的Photoshop源文件，在上次完成的基礎(chǔ)上，準(zhǔn)備開始制作本次的導(dǎo)航條。

（4）根據(jù)網(wǎng)站策劃方案里的主色調(diào)和主題的要求，開始設(shè)計(jì)網(wǎng)站的導(dǎo)航條，首先去選擇一張適合的圖片。

（5）使用圓角矩形工具繪制一個(gè)圓角矩形，顏色與大小要與整個(gè)網(wǎng)站的風(fēng)格與主題相一致。

（6）選中繪制好的圓角矩形，使用漸變工具，繪制立體感導(dǎo)航條背景。（7）輸入導(dǎo)航條文字，輸入導(dǎo)航條文字間的豎線間隔。（8）設(shè)置文字和豎線的混合選項(xiàng)，增加立體感。（9）保存文件。

5、實(shí)訓(xùn)要求

（1）由指導(dǎo)教師講清實(shí)訓(xùn)的基本原理，要求，實(shí)訓(xùn)目的。

第6頁《網(wǎng)頁設(shè)計(jì)與制作綜合實(shí)訓(xùn)》實(shí)訓(xùn)指導(dǎo)書

實(shí)訓(xùn)五設(shè)計(jì)案例網(wǎng)站網(wǎng)頁內(nèi)容和網(wǎng)頁版權(quán)聲明

1、學(xué)時(shí)分配：6學(xué)時(shí)

2、實(shí)訓(xùn)目的

（1）熟悉Photoshop軟件的使用方法。

（2）熟練掌握網(wǎng)站網(wǎng)頁內(nèi)容和網(wǎng)頁版權(quán)聲明的設(shè)計(jì)方法。（3）創(chuàng)建項(xiàng)目案例網(wǎng)站的網(wǎng)頁內(nèi)容和網(wǎng)頁版權(quán)聲明。

3、實(shí)訓(xùn)任務(wù)

（1）掌握Photoshop軟件多種工具結(jié)合的使用方法。（2）查看網(wǎng)絡(luò)上相關(guān)網(wǎng)站網(wǎng)頁。

（3）根據(jù)小組討論結(jié)果，實(shí)際動(dòng)手完成網(wǎng)站的網(wǎng)頁內(nèi)容和網(wǎng)頁版權(quán)聲明。

4、實(shí)訓(xùn)內(nèi)容

（1）打開Photoshop軟件，熟悉軟件的界面布局和工作面板的擺放，熟練使用Photoshop軟件。

（2）查看網(wǎng)上其它網(wǎng)站的網(wǎng)頁，了解網(wǎng)頁對象分布的基本情況。

（3）打開上次保存好的Photoshop源文件，在上次完成的基礎(chǔ)上，準(zhǔn)備開始制作本次的網(wǎng)頁內(nèi)容和網(wǎng)頁版權(quán)聲明。

（4）根據(jù)網(wǎng)站策劃方案里的主色調(diào)和主題的要求，選擇灰色與深藍(lán)色作為邊框顏色，網(wǎng)頁內(nèi)容標(biāo)題文字顏色為黑色。

（5）以制作通知公告為例，使用文字工具輸入文字“通知公告”，文字大小為14號，文字顏色為黑色，文字字體為“宋體或者黑體”，根據(jù)自己的理解，可以為文字增加“混合選項(xiàng)”，設(shè)置文字效果。（6）新建圖層，選擇“線條工具”，線條粗細(xì)為1 像素，顏色為黑色或者深藍(lán)色都可以，繪制一條直線。

（7）新建圖層，選擇“圓角矩形工具”，半徑為50 像素，顏色為黑色或者深藍(lán)色。

（8）新建圖層，選擇“文字工具”，在剛才繪制好的圓角矩形上輸入“More”，文字大小是12，顏色為白色，字體為“Arial”。

（9）使用同樣的辦法可以制作完成其他網(wǎng)頁內(nèi)容部分的標(biāo)題。（10）保存文件。

5、實(shí)訓(xùn)要求

（1）由指導(dǎo)教師講清實(shí)訓(xùn)的基本原理，要求，實(shí)訓(xùn)目的。

第7頁《網(wǎng)頁設(shè)計(jì)與制作綜合實(shí)訓(xùn)》實(shí)訓(xùn)指導(dǎo)書

實(shí)訓(xùn)六對案例網(wǎng)站版面切圖

1、學(xué)時(shí)分配：6學(xué)時(shí)

2、實(shí)訓(xùn)目的

（1）熟悉Photoshop軟件的使用方法。（2）掌握網(wǎng)站版面設(shè)計(jì)的方法。（3）對案例網(wǎng)站版面進(jìn)行切圖。

3、實(shí)訓(xùn)任務(wù)

（1）掌握Photoshop軟件切片工具的使用方法。（2）查看網(wǎng)絡(luò)上相關(guān)網(wǎng)站網(wǎng)頁。

（3）根據(jù)小組討論結(jié)果，實(shí)際動(dòng)手對網(wǎng)站版面進(jìn)行切圖。

4、實(shí)訓(xùn)內(nèi)容

（1）打開Photoshop軟件，熟悉軟件的界面布局和工作面板的擺放，熟練使用Photoshop軟件。

（2）查看網(wǎng)上其它網(wǎng)站的網(wǎng)頁，了解網(wǎng)頁對象分布的基本情況。

（3）打開制作好的網(wǎng)站版面源文件，使用切片工具準(zhǔn)備對版面進(jìn)行切圖。（4）使用參考線將網(wǎng)站版面部分之間進(jìn)行分割。（5）使用切片工具對網(wǎng)站版面進(jìn)行切割。

（6）切圖完成后，選擇“文件”——“存儲(chǔ)為WEB所用格式”，存儲(chǔ)文件類型可以選擇“JPEG”或者“GIF”。（7）整理保存好的文件。

5、實(shí)訓(xùn)要求

（1）由指導(dǎo)教師講清實(shí)訓(xùn)的基本原理，要求，實(shí)訓(xùn)目的。

第8頁《網(wǎng)頁設(shè)計(jì)與制作綜合實(shí)訓(xùn)》實(shí)訓(xùn)指導(dǎo)書

實(shí)訓(xùn)七制作完成案例網(wǎng)站首頁

1、學(xué)時(shí)分配：6學(xué)時(shí)

2、實(shí)訓(xùn)目的

（1）熟悉Dreamweaver軟件的使用方法。（2）掌握使用表格布局網(wǎng)頁的方法。（3）制作完成案例網(wǎng)站首頁。

3、實(shí)訓(xùn)任務(wù)

（1）掌握Dreamweaver軟件的使用方法。（2）查看網(wǎng)絡(luò)上相關(guān)網(wǎng)站網(wǎng)頁。

（3）根據(jù)小組討論結(jié)果，實(shí)際動(dòng)手完成案例網(wǎng)站首頁。

4、實(shí)訓(xùn)內(nèi)容

（1）預(yù)覽實(shí)訓(xùn)網(wǎng)頁。

（2）在D盤根目錄下新建一個(gè)文件夾“home”，在該文件夾中分別新建“css”、“images”，“html”三個(gè)文件夾，（3）打開Dreamweaver軟件，將“home”文件夾定義為站點(diǎn)。

（4）創(chuàng)建一個(gè)命名為“index.html”的網(wǎng)頁文檔，設(shè)置網(wǎng)頁的頁面屬性。（5）根據(jù)網(wǎng)頁首頁效果圖，插入表格，進(jìn)行表格的嵌套，完成網(wǎng)頁首頁的布局。（6）在網(wǎng)頁插入的表格中輸入文字、水平線和日期等內(nèi)容，設(shè)置文本的屬性。（7）在網(wǎng)頁中插入圖像，設(shè)置圖像的屬性。

（8）創(chuàng)建CSS樣式表文件，分別定義需要添加效果的不同CSS樣式。（9）在網(wǎng)頁上分別應(yīng)用不同的CSS樣式。（10）保存網(wǎng)頁文件。

5、實(shí)訓(xùn)要求

（1）由指導(dǎo)教師講清實(shí)訓(xùn)的基本原理，要求，實(shí)訓(xùn)目的。

第9頁《網(wǎng)頁設(shè)計(jì)與制作綜合實(shí)訓(xùn)》實(shí)訓(xùn)指導(dǎo)書

實(shí)訓(xùn)八案例網(wǎng)站模板的制作

1、學(xué)時(shí)分配：6學(xué)時(shí)

2、實(shí)訓(xùn)目的

（1）熟悉Dreamweaver軟件的使用方法。（2）掌握網(wǎng)頁模板的制作方法。

（3）掌握使用網(wǎng)頁模板創(chuàng)建網(wǎng)頁的方法。

3、實(shí)訓(xùn)任務(wù)

（1）掌握Dreamweaver軟件的使用方法。（2）查看網(wǎng)絡(luò)上相關(guān)網(wǎng)站網(wǎng)頁。

（3）根據(jù)小組討論結(jié)果，實(shí)際動(dòng)手制作網(wǎng)頁模板。

4、實(shí)訓(xùn)內(nèi)容（1）根據(jù)下發(fā)的“二級網(wǎng)頁.jpg”，在Photoshop軟件中設(shè)計(jì)完成二級網(wǎng)頁版面，并且切圖制作網(wǎng)頁。

（2）查看網(wǎng)上其它網(wǎng)站的網(wǎng)頁，了解網(wǎng)頁對象分布的基本情況。

（3）在Dreamweaver軟件中打開制作好的二級網(wǎng)頁，選擇“文件”—“另存為模板”，將制作好的網(wǎng)頁轉(zhuǎn)化為模板文件。（4）在創(chuàng)建好的模板網(wǎng)頁上插入“可編輯區(qū)域”，根據(jù)需要可以插入多個(gè)可編輯區(qū)域。

（5）也可以選擇“文件”—“新建”—“模板文件”，重新創(chuàng)建一個(gè)新的模板文件，跟制作網(wǎng)頁的方法一樣，制作完成模板網(wǎng)頁后，一定要在模板網(wǎng)頁中插入可編輯區(qū)域。

（6）選擇“文件”—“模板”，選擇創(chuàng)建好的網(wǎng)頁模板，選擇“由模板創(chuàng)建”，利用制作好的模板來生成網(wǎng)頁。

（7）在生成的網(wǎng)頁中的可編輯區(qū)域中添加相應(yīng)的網(wǎng)頁內(nèi)容。（8）對創(chuàng)建好的網(wǎng)頁模板進(jìn)行編輯，并且進(jìn)行更新。（9）整理保存好的文件。

5、實(shí)訓(xùn)要求

（1）由指導(dǎo)教師講清實(shí)訓(xùn)的基本原理，要求，實(shí)訓(xùn)目的。

第10頁《網(wǎng)頁設(shè)計(jì)與制作綜合實(shí)訓(xùn)》實(shí)訓(xùn)指導(dǎo)書

實(shí)訓(xùn)九案例網(wǎng)頁超級鏈接的添加

1、學(xué)時(shí)分配：6學(xué)時(shí)

2、實(shí)訓(xùn)目的

（1）熟悉Dreamweaver軟件的使用方法；（2）掌握網(wǎng)頁超連接的添加和設(shè)置方法；（3）創(chuàng)建完成案例網(wǎng)頁的超連接。

3、實(shí)訓(xùn)任務(wù)

（1）掌握Dreamweaver軟件的使用方法。（2）查看網(wǎng)絡(luò)上相關(guān)網(wǎng)站網(wǎng)頁。

（3）根據(jù)小組討論結(jié)果，實(shí)際動(dòng)手創(chuàng)建網(wǎng)頁超鏈接。

4、實(shí)訓(xùn)內(nèi)容

（1）根據(jù)設(shè)計(jì)好的二級網(wǎng)頁版面，制作網(wǎng)頁模板。（2）打開Dreamweaver軟件使用創(chuàng)建的二級網(wǎng)頁模板來創(chuàng)建主頁的新聞網(wǎng)頁。（3）根據(jù)首頁新聞鏈接標(biāo)題內(nèi)容，選擇新聞網(wǎng)頁內(nèi)容，并將新聞內(nèi)容添加到使用網(wǎng)頁模板生成的新聞網(wǎng)頁中。

（4）為首頁新聞文字添加文字超鏈接。

（5）在創(chuàng)建新聞網(wǎng)頁的模板文件中添加返回首頁的鏈接。（6）更新網(wǎng)頁。

（7）根據(jù)首頁導(dǎo)航條內(nèi)容，選擇合適的網(wǎng)頁內(nèi)容，使用二級網(wǎng)頁模板生成相應(yīng)網(wǎng)頁。

（8）為首頁導(dǎo)航條添加圖片超鏈接，鏈接到相應(yīng)的二級網(wǎng)頁。

（9）在創(chuàng)建二級網(wǎng)頁的模板文件中創(chuàng)建返回首頁，以及二級網(wǎng)頁之間互相鏈接的超鏈接。

（10）更新網(wǎng)頁。（11）為首頁添加郵件鏈接、錨點(diǎn)鏈接、跳轉(zhuǎn)菜單鏈接、下載鏈接等其他超鏈接。（12）測試網(wǎng)頁超鏈接，保存相關(guān)文件。

5、實(shí)訓(xùn)要求

（1）由指導(dǎo)教師講清實(shí)訓(xùn)的基本原理，要求，實(shí)訓(xùn)目的。

第11頁《網(wǎng)頁設(shè)計(jì)與制作綜合實(shí)訓(xùn)》實(shí)訓(xùn)指導(dǎo)書

實(shí)訓(xùn)十案例網(wǎng)站加入動(dòng)態(tài)元素

1、學(xué)時(shí)分配：6學(xué)時(shí)

2、實(shí)訓(xùn)目的

（1）熟悉Flash軟件的使用方法；（2）掌握創(chuàng)建滾動(dòng)效果的方法；（3）為案例網(wǎng)站加入動(dòng)態(tài)效果。

3、實(shí)訓(xùn)任務(wù)

（1）掌握Dreamweaver軟件和Flash軟件的使用方法。（2）實(shí)際動(dòng)手為網(wǎng)站首頁制作一個(gè)Flash動(dòng)畫。

（3）為首頁增加新聞動(dòng)態(tài)滾動(dòng)效果，以及圖片動(dòng)態(tài)滾動(dòng)效果。

4、實(shí)訓(xùn)內(nèi)容

（1）打開Flash軟件，熟悉Flash軟件的使用方法。

（2）使用Flash軟件創(chuàng)建一個(gè)簡單動(dòng)畫，比如圖片之間的簡單切換。（3）打開Dreamweaver軟件，將Flash中生成的SWF格式動(dòng)畫文件插入到網(wǎng)頁中，設(shè)置動(dòng)畫屬性。

（4）熟悉鏈接網(wǎng)頁源代碼的編寫方法，掌握基本的網(wǎng)頁代碼標(biāo)簽。（5）在“通知公告”中給網(wǎng)頁新聞添加由下向上的動(dòng)態(tài)滾動(dòng)效果。（6）在“專業(yè)展板”中給圖片添加由右向左的動(dòng)態(tài)滾動(dòng)效果。（7）測試網(wǎng)頁效果，整理保存好的文件。

5、實(shí)訓(xùn)要求

（1）由指導(dǎo)教師講清實(shí)訓(xùn)的基本原理，要求，實(shí)訓(xùn)目的。

第12頁

第四篇：網(wǎng)頁設(shè)計(jì)與制作實(shí)訓(xùn)報(bào)告[范文]

《網(wǎng)頁設(shè)計(jì)與制作》

實(shí)習(xí)報(bào)告

指導(dǎo)老師：

實(shí)習(xí)地點(diǎn)：

實(shí)習(xí)時(shí)間：

實(shí)習(xí)班級：

學(xué)生姓名：

一、實(shí)習(xí)目的① 學(xué)會(huì)制作新聞發(fā)布系統(tǒng)。

② 學(xué)會(huì)制作在線調(diào)查系統(tǒng)。

③ 熟悉購物網(wǎng)站的主要功能和欄目。

④ 學(xué)會(huì)購物網(wǎng)站數(shù)據(jù)庫表的創(chuàng)建和數(shù)據(jù)庫連接的創(chuàng)建。

⑤ 學(xué)會(huì)購物系統(tǒng)前臺頁面制作和后臺管理制作。

二、實(shí)訓(xùn)內(nèi)容

1.創(chuàng)建數(shù)據(jù)庫表

① 啟動(dòng)Microsoft Access，執(zhí)行“文件”——“新建”命令，打開“新建文件”面板，在面板中單擊“空數(shù)據(jù)庫”。

② 彈出“文件新建數(shù)據(jù)庫”對話框，在對話框中選擇數(shù)據(jù)庫保存的路徑，“文件名”文本框中輸入shop。

③ 單擊“創(chuàng)建”按鈕，在對話框中雙擊“使用設(shè)計(jì)器創(chuàng)建表”選項(xiàng)。

④ 彈出“表1：表”對話框，在對話框中輸入“字段名稱”和字段所對應(yīng)的“數(shù)據(jù)類型”，將shopID字段設(shè)置為主鍵。

⑤ 執(zhí)行“文件”——“保存”命令，彈出“另存為”對話框，在對話框的“表名稱”文本框中輸入products。

⑥ 單擊“確定”按鈕，保存表。按以上步驟的方法，創(chuàng)建表fen和admin。

2.創(chuàng)建數(shù)據(jù)庫連接

新建一個(gè)網(wǎng)頁文件夾，打開IIS信息服務(wù)，創(chuàng)建IIS虛擬目錄，在文件夾安全性把來賓用戶的權(quán)限修改為完全控制，并導(dǎo)入數(shù)據(jù)庫。

3.制作購物網(wǎng)系統(tǒng)頁面

① 用index.html創(chuàng)建zhanshi.asp商品分類展示頁，新建站點(diǎn)，導(dǎo)入shop.mdb數(shù)據(jù)庫文件建立數(shù)據(jù)庫連接。插入表格并插入圖片、文字，創(chuàng)建記錄集并在表格相應(yīng)位置綁定數(shù)據(jù)。在服務(wù)器行為里為表格設(shè)置重復(fù)區(qū)域，創(chuàng)建記錄集RS2并在左邊的商品分類表格里綁定

數(shù)據(jù)，在服務(wù)器行為里為左側(cè)的表格添加重復(fù)區(qū)域和轉(zhuǎn)到詳細(xì)頁，制作記錄集導(dǎo)航條。

② 用index.html創(chuàng)建xiangxi.asp商品詳細(xì)信息頁，首先創(chuàng)建記錄集并制作左側(cè)的商品分類表格，之后在中間區(qū)域插入表格，在表格中插入圖片、文字，創(chuàng)建記錄集RS2并將數(shù)據(jù)綁定在表格相應(yīng)位置。

③ 用index.html創(chuàng)建denglu.asp商品詳細(xì)信息頁,創(chuàng)建記錄集并制作左側(cè)的商品分類表格，在中間區(qū)域插入表單，在表單里插入表格，在表格里插入文字、文本域、表單按鈕，并為表單設(shè)置檢查表單。創(chuàng)建記錄集RS2并在服務(wù)器行為里添加登錄用戶。

④ 用index.html創(chuàng)建fenlei.asp添加商品分類頁，插入表單，在表單里插入文字、文本域、表單按鈕，創(chuàng)建記錄集并在服務(wù)器行為里添加插入記錄和限制對頁的訪問。再用index.html創(chuàng)建fenleiok.asp,在其中插入表格輸入文字，并設(shè)置返回鏈接。

⑤ 用index.html創(chuàng)建tianjia.asp添加商品頁，創(chuàng)建記錄集，用插入記錄表單向?qū)?chuàng)建插入記錄表單，在服務(wù)器行為里添加限制對頁的訪問。再用index.html創(chuàng)建tianjiaok.asp,在其中插入表格輸入文字，并設(shè)置返回鏈接。

⑥ 用index.html創(chuàng)建guanli.asp商品管理頁，創(chuàng)建記錄集并制作左側(cè)的商品分類表格，在中間區(qū)域插入表格并插入文字，創(chuàng)建記錄集RS2并在表格相應(yīng)位置綁定數(shù)據(jù)，為該表格設(shè)置服務(wù)器行為的重復(fù)區(qū)域，制作修改和刪除鏈接，制作記錄集導(dǎo)航條。

⑦ 用tianjia.asp創(chuàng)建xiugai.asp修改頁面，創(chuàng)建記錄集在對應(yīng)的文本域中綁定數(shù)據(jù)，把服務(wù)器行為里的插入記錄刪除并添加更新記錄。在服務(wù)器行為里添加限制對頁的訪問。再用index.html創(chuàng)建xiugaiok.asp,在其中插入表格輸入文字，并設(shè)置返回鏈接。

⑧ 用index.html創(chuàng)建shanchu.asp刪除頁面,插入表格并插入文字，建立記錄集，在表格相應(yīng)位置綁定數(shù)據(jù)，插入表單和表單按鈕，創(chuàng)建服務(wù)器行為限制對頁的訪問和刪除記錄。再用index.html創(chuàng)建shanchuok.asp,在其中插入表格輸入文字，并設(shè)置返回鏈接。

三、疑難解惑

① 網(wǎng)頁不能正常打開，電腦用戶權(quán)限沒有修改，在文件夾安全性把來賓用戶的權(quán)限修改為完全控制。

② 創(chuàng)建重復(fù)區(qū)域時(shí)，總顯示相同的內(nèi)容，仔細(xì)閱讀教材，發(fā)現(xiàn)創(chuàng)建重復(fù)區(qū)域時(shí)要選中表格，而不是文字內(nèi)容。

③ 登陸頁面不能登陸，把表格放入表單后，重新登錄，問題解決。

④ 創(chuàng)建添加商品頁面時(shí)，無法顯示商品分類。在插入記錄表單時(shí)，應(yīng)將feileiID“顯

示為”下拉列表中選擇“菜單”，并在“菜單屬性”里的“域”列表中選擇fenlei。

⑤ 修改頁面點(diǎn)進(jìn)去初始內(nèi)容都一樣，“唯一鍵列”下拉列表中應(yīng)選擇shpID。

⑥ 商品分類點(diǎn)進(jìn)去每個(gè)種類都一樣，查找原因，發(fā)現(xiàn)記錄集中篩選是shpID，把記錄集中的篩選改為fenleiID解決。

四、實(shí)訓(xùn)心得

經(jīng)過一周動(dòng)態(tài)網(wǎng)頁的實(shí)訓(xùn)，使我們對本學(xué)期的這門課進(jìn)行了整體的匯總。在這匯總期間，也算是對自己本學(xué)期的一個(gè)考核，此次實(shí)訓(xùn)暴露出了許多我自身存在的問題，同時(shí)也對自身有了很大的提高。

在這次實(shí)訓(xùn)中，我也有許多收獲。首先，我體會(huì)到了作為一個(gè)計(jì)算機(jī)專業(yè)的人，不會(huì)用DW的痛苦和尷尬。在制作的過程中遇到問題，可以說得是困難重重，這畢竟是第一次獨(dú)自制作動(dòng)態(tài)網(wǎng)頁，難免會(huì)遇到過各種各樣的問題，同時(shí)在制作的過程中發(fā)現(xiàn)了自己的不足之處，對以前所學(xué)過的知識理解得不夠深刻，掌握得不夠牢固。在此過程當(dāng)中彌補(bǔ)了我許多知識上的缺陷，弄清的以前沒有搞懂的知識點(diǎn)。經(jīng)過多番的努力和辛酸，我成功地完成了這次過程艱辛的實(shí)訓(xùn)，而且我從中體會(huì)到了一種叫做‘成功的喜悅’的感覺，那種小有成就的興奮是只有置身其中的人才能體會(huì)的。

在實(shí)訓(xùn)過程中，我更體會(huì)到了基礎(chǔ)知識的重要性，也許我們正在迷惘，我們是否學(xué)到了東西，但事實(shí)說明零零散散的知識，在項(xiàng)目開發(fā)當(dāng)中起到了非常關(guān)鍵的作用，我們不缺少時(shí)間和工具，我們只是缺少經(jīng)驗(yàn)和動(dòng)手能力，如果我們以后能更好的在各方面增長自己的經(jīng)驗(yàn)，相信我們能在長長的就業(yè)隊(duì)伍中脫穎而出的！相信自己，相信未來。今后我將會(huì)更加努力的學(xué)習(xí)，不斷提高自身素質(zhì)，為我將來的就業(yè)打下良好的基礎(chǔ)

第五篇：網(wǎng)頁設(shè)計(jì)與制作實(shí)訓(xùn)報(bào)告

《Dreamweaver網(wǎng)頁設(shè)計(jì)與制作案例教程》

實(shí)訓(xùn)報(bào)告

專業(yè)：計(jì)算機(jī)網(wǎng)絡(luò)技術(shù) 年級： 2013級姓名：學(xué) 號：輔導(dǎo)老師：

制作電子商務(wù)類網(wǎng)站首頁

一、網(wǎng)站建設(shè)的前期準(zhǔn)備工作

1、網(wǎng)站整體需求分析

網(wǎng)站整體需求主要包括以下幾個(gè)方面： 1)網(wǎng)站建設(shè)背景及目標(biāo) 2)網(wǎng)站建設(shè)現(xiàn)狀分析 3)網(wǎng)站建設(shè)目標(biāo)分解

4)網(wǎng)站建設(shè)資金及人員投入情況分析

2、確定網(wǎng)站風(fēng)格

根據(jù)電子商務(wù)網(wǎng)站的特點(diǎn)，確定網(wǎng)站的整體風(fēng)格，即網(wǎng)站的色彩和版式。網(wǎng)站風(fēng)格是在網(wǎng)站整體需求分析的基礎(chǔ)上，通過明確網(wǎng)站設(shè)計(jì)的目的和用戶需求、訪問者的特點(diǎn)等得出的結(jié)論。本實(shí)例是針對一個(gè)工業(yè)產(chǎn)品交易平臺的網(wǎng)站，網(wǎng)站與用戶交互性強(qiáng)，因此確定其主色調(diào)為暖色系的橘黃色給人以輕松愉快的瀏覽環(huán)境。如圖是電子商務(wù)網(wǎng)站的LOGO。

3、網(wǎng)站素材搜集

明確網(wǎng)站主題和劃分板塊后，接著要為后續(xù)的網(wǎng)站建設(shè)搜集素材。若想讓網(wǎng)站有聲有色，能夠吸引客戶注意，就要盡量搜集文字、圖片、音頻、視頻、動(dòng)畫等多媒體素材。對于一些通用素材，可以從網(wǎng)上搜集得到，也可以根據(jù)需求自行制作素材，比如，通過Photoshop圖像處理軟件對圖像進(jìn)行優(yōu)化處理，使用Flash制作動(dòng)畫等。如圖所示。

二、創(chuàng)建站點(diǎn)

1、網(wǎng)站建設(shè)的第一步是創(chuàng)建本地站點(diǎn)。

2、創(chuàng)建的站點(diǎn)信息將顯示在“文件”面板中。如果需要對站點(diǎn)參數(shù)進(jìn)行修改，可以單擊“站點(diǎn)→管理站點(diǎn)”對站點(diǎn)進(jìn)行重新設(shè)置。

三、網(wǎng)站主頁制作

1.使用Div+CSS布局頁面

使用Div+CSS實(shí)現(xiàn)頁面布局，具體操作如下：

4）為AP Div元素設(shè)置CSS樣式。由于網(wǎng)站首頁和子頁面采取相同的布局風(fēng)格，因此樣式表采用外部鏈接樣式表。

5）選中創(chuàng)建的AP元素“container”，在右側(cè)的“CSS樣式”面板中單擊鼠標(biāo)右鍵，選擇“新建”命令，打開“新建CSS規(guī)則”對話框，并作相應(yīng)設(shè)置，如圖所示。

6）單擊確定按鈕，彈出“#container的CSS規(guī)則定義”對話框，選擇分類列表框下的“背景”選項(xiàng)卡，設(shè)置文檔的“背景顏色”為#FFF；在分類列表框中，切換到“區(qū)塊”選項(xiàng)卡，設(shè)置“文本對齊”屬性為左對齊；在分類列表框中，切換到“方框”選項(xiàng)卡，設(shè)置Ap Div的“寬”為960 px，“上邊界”為1 px，“下邊界”為0 px；“邊框”和“列表”選項(xiàng)卡的屬性保持默認(rèn)設(shè)置；切換到“定位”選項(xiàng)卡，單擊確定按鈕，完成對“#container”元素樣式的定義。設(shè)置后的“CSS樣式”面板如圖所示。

/* ==整體布局定義開始== */ #Container { width:960px;/*定義頁面寬度*/ visibility:visible;/*設(shè)置可見度*/ margin:1px auto 0;/*設(shè)置外邊距*/ background-color: #FFF;/*定義背景顏色*/ } 2.設(shè)置頁面屬性

在style.css樣式表文件內(nèi)部設(shè)置網(wǎng)頁的頁面屬性。頁面屬性是對標(biāo)簽屬性的設(shè)置。代碼如下所示： body{ font-size:12px;/*定義字號*/ color:#666;/*定義字體顏色*/ background:#FFF;/*定義背景顏色*/ text-align:center;/*定義文本位置*/ margin:0;/*定義外邊距*/ padding:0;/*定義外邊距*/ border:0;/*定義邊框粗細(xì)*/ background: transparent;/*定義背景透明*/ } 也可以打開index.html，選擇“修改→頁面屬性”菜單命令，在打開的“頁面屬性”對話框中進(jìn)行相應(yīng)設(shè)置。

3.插入圖片

在頂部的“top”元素中插入一幅圖像。如圖所示。

4.添加導(dǎo)航條

網(wǎng)頁導(dǎo)航條是非常重要的網(wǎng)頁元素，網(wǎng)頁間的跳轉(zhuǎn)，需要通過導(dǎo)航條來完成。

1）將光標(biāo)定位在“nav” Div元素中，在其內(nèi)部輸入列表項(xiàng)，并為列表項(xiàng)的各個(gè)單元設(shè)置超鏈接。設(shè)置情況如圖所示。

2）添加CSS樣式，需要在style.css文件中輸入相關(guān)代碼。#nav { height:30px;/*定義高度*/ width:100%;/*定義寬度*/ background-color:#c00;/*定義背景顏色*/ overflow: hidden;/*定義溢出效果*/ } #nav ul { font-size:12px;/*定義字號*/ color:#FFF;/*定義字體顏色*/ line-height:30px;/*定義字體行高*/ white-space:nowrap;/*定義區(qū)塊空格*/ margin:0 0 0 30px;/*定義外邊距*/ padding:0;/*定義內(nèi)邊距*/ } #nav li { list-style-type:none;/*定義列表類型*/ display:inline;/*定義區(qū)塊顯示效果*/ } #nav li a { text-decoration:none;/*定義字體修飾*/ font-family:Arial, Helvetica, sans-serif;/*定義字體*/ color:#FFF;/*定義字體顏色*/ padding:7px 10px;/*定義內(nèi)邊距*/ } #nav li a:hover { color:#ff0;/*定義字體顏色*/ background-color:red;/*定義背景顏色*/ 該樣式表使用列表項(xiàng)實(shí)現(xiàn)導(dǎo)航菜單功能。效果如圖所示。

5.推薦廠家

1）把光標(biāo)置于DIV元素“l(fā)eft”中，創(chuàng)建新的DIV元素 sideBarLefta1，并定義相關(guān)樣式

2）在DIV元素“sideBarLefta1”的內(nèi)部插入推薦廠家標(biāo)志及說明文字等信息，定義相關(guān)樣式如圖所示。

3）在style.css樣式表中插入下面的代碼，#left { float:left;/*定義浮動(dòng)位置 */ width:640px;/*定義寬度 */ height:832px;/*定義高度 */ }.sideBarLeftb1 { width:238px;/*定義寬度 */ height:240px;/*定義高度*/ border:#ebcbb4 solid 1px;/*定義邊框的顏色、粗細(xì)、樣式*/ } 6.網(wǎng)頁廣告設(shè)計(jì)制作

1）將光標(biāo)置于div元素“#left”中，插入一個(gè)嵌套的div元素#sideBarLefta2，2）將光標(biāo)置于DIV元素“banner”中，插入一個(gè)已經(jīng)準(zhǔn)備好的SWF元素。

3）選中“banner”下面DIV元素，并定義類為“hot”，在4個(gè)小DIV元素中分別插入準(zhǔn)備好的廣告圖，效果如圖所示

style.css樣式表中插入的代碼如下： #sideBarLefta2 {

float:left;/*定義浮動(dòng)位置 */ width:390px;/*定義寬度 */ height:268px;/*定義高度*/ overflow: hidden;/*定義溢出效果*/ } #banner { margin-top:5px;/*定義頂端外邊距*/ border:#999 solid 1px;/*定義邊框的顏色、粗細(xì)、樣式*/ width:390px;/*定義寬度 */ }.hot{ display:inline;/*定義區(qū)塊顯示效果*/ border:#999 1px solid;/*定義邊框的顏色、粗細(xì)、樣式*/ width:91px;/*定義寬度 */ height:70px;/*定義高度*/ float:left;/*定義浮動(dòng)位置 */ margin:2px;/*定義外邊距*/ } 7.頁面右側(cè)欄目設(shè)計(jì)

1）將光標(biāo)置于DIV元素“right”中，插入已經(jīng)準(zhǔn)備好的圖片service.jpg。如圖所示。

2）在service.jpg下面插入兩個(gè)div，分別定義為.sideBarRightb3和.sideBarRightb4，在新建的div中插入準(zhǔn)備好的廣告圖像ad1.jpg和ad2.jpg并在屬性面板中定義超鏈接，效果如圖所示。

在style.css中添加的代碼如下： #right { float:left;/*定義浮動(dòng)位置 */ width:320px;/*定義寬度 */ height:832px;/*定義高度 */ }.sideBarRightb3 { height:60px;/*定義高度*/ margin-top:5px;/*定義頂端外邊距*/ border:#ebcbb4 1px solid;/*定義邊框的顏色、粗細(xì)、樣式*/ }.sideBarRightb4 { height:93px;/*定義高度*/ margin-top:5px;/*定義頂端外邊距*/

border:#ebcbb4 1px solid;/*定義邊框的顏色、粗細(xì)、樣式*/ margin-bottom:5px;/*定義底端外邊距*/ }.sideBarRightb3,.sideBarRightb4 img { text-align:center;/*定義文本位置 */ padding:5px;/*定義內(nèi)邊距*/ } 8.行業(yè)欄目設(shè)計(jì)

1）將光標(biāo)置于DIV元素“l(fā)eft”中，在其下側(cè)插入一個(gè)嵌套的DIV元素“sideBarLeftb2”。

2）選中Div元素“sideBarLeftb2”，將光標(biāo)定位在其內(nèi)部，創(chuàng)建多個(gè)新Div，為了方便日后的維護(hù)我們將新建Div單獨(dú)定義為.sideBarLeftb3。

3）選中DIV元素“sideBarLeftb3”，在style.css中添加的代碼如下：

sideBarLeftb3 { text-align:left;/*定義文本位置 */ float:left;/*定義浮動(dòng)位置 */ height:150px;/*定義高度*/ width:280px;/*定義寬度 */ padding:4px;/*定義內(nèi)邊距*/ } 4）將光標(biāo)移到sideBarLeftb3的DIV元素中，插入兩行列表并對列表設(shè)置相關(guān)CSS參數(shù)。在style.css中添加的代碼如下：.sideBarLeftb3 ul { font-size:12px;/*定義字號*/ line-height:6px;/*定義字體行高*/ float:left;/*定義浮動(dòng)位置 */ width:270px;/*定義寬度 */ margin:0 0 0 5px;/*定義外邊距*/ padding:0;/*定義內(nèi)邊距*/ } 5）在列表中添加列表內(nèi)容，代碼如下：