第一篇：網(wǎng)頁設(shè)計(jì)與制作實(shí)驗(yàn)過程及報(bào)告

網(wǎng)頁制作過程及報(bào)告

網(wǎng)頁設(shè)計(jì)與制作的一般實(shí)驗(yàn)步驟：

1、確定網(wǎng)站主題

網(wǎng)站里的每一個(gè)網(wǎng)頁都要有統(tǒng)一的風(fēng)格，以加強(qiáng)渲染自己性格的效果。最重要的是做出自己的風(fēng)格，吸引瀏覽者的眼球。

2、搜集材料

主要在網(wǎng)站上搜集所要的網(wǎng)頁信息，包括圖片、文字、相關(guān)的新聞，同時(shí)，查詢相關(guān)的圖書、報(bào)紙、光盤、多媒體等，也可以得來更加有說服力的信息。

3、規(guī)劃網(wǎng)站

我的網(wǎng)站包括5個(gè)頁面。版面設(shè)計(jì)要靈活，根據(jù)各部分內(nèi)容的不同適當(dāng)?shù)淖杂稍O(shè)計(jì)。但是每個(gè)頁面的主元素和位置不能變。用CSS設(shè)計(jì)一個(gè)樣式，以保證隨時(shí)、準(zhǔn)確的調(diào)用。另外，為了網(wǎng)頁布局的協(xié)調(diào)，還可以加入flash動態(tài)圖片，會達(dá)到更好的效果。

4、選擇合適的制作工具

做網(wǎng)頁的首先工具當(dāng)然為Dreamweaver。

5、認(rèn)識網(wǎng)頁設(shè)計(jì)工具Dreamweaver

（1）Dreamweaver的啟動

（2）窗口組成的認(rèn)識

6、新建站點(diǎn)

7、站點(diǎn)中首頁的創(chuàng)建

8、制作網(wǎng)頁

素材、風(fēng)格、模板都設(shè)計(jì)好以后，下一步就是具體的制作網(wǎng)頁。制作網(wǎng)站時(shí)，首先要做的就是站點(diǎn)的規(guī)劃，建立一個(gè)本地站點(diǎn)。網(wǎng)頁中的css 樣式文件也應(yīng)統(tǒng)一管理，做到有條不紊。

9、根據(jù)自己的網(wǎng)頁風(fēng)格，在網(wǎng)上搜集合適的圖片。

最后還要制作各個(gè)頁面的鏈接，把整個(gè)網(wǎng)頁可憐起來，形成一個(gè)統(tǒng)一的整體，方便瀏覽者進(jìn)行各個(gè)頁面間的跳轉(zhuǎn)。

10、上傳測試

網(wǎng)頁制作完畢以后，要進(jìn)行測試，在瀏覽器上運(yùn)行自己的網(wǎng)站，反復(fù)測試，以發(fā)現(xiàn)設(shè)計(jì)中的缺陷。

實(shí)驗(yàn)結(jié)果及理論分析：

通過這簡短的三個(gè)周的學(xué)習(xí)，讓我有一個(gè)獨(dú)立設(shè)計(jì)，制作網(wǎng)頁的機(jī)會，通過這次試驗(yàn)，我的收益頗多。首先，獨(dú)立的實(shí)踐了一個(gè)完整的網(wǎng)站設(shè)計(jì)的全過程，把設(shè)計(jì)中零散的注意點(diǎn)和要求在自己大腦中形成了一個(gè)完整的框架體系，使平時(shí)學(xué)到的知識點(diǎn)有了一個(gè)質(zhì)的升華，并且合理的在試驗(yàn)中進(jìn)行了實(shí)踐。第二，在這次實(shí)驗(yàn)的過程中，我搜集了大量的素材和網(wǎng)頁設(shè)計(jì)的技術(shù)技巧方面的書，擴(kuò)大了知識面，給我在以后的設(shè)計(jì)過程中能博采眾長，制作出技術(shù)精湛的網(wǎng)頁打下了基礎(chǔ)。最后，我感受最深的是，技術(shù)方面的學(xué)習(xí)，最重要的是自己實(shí)踐做出東西，只通過自己的親身實(shí)踐，才能學(xué)會、學(xué)懂、學(xué)通技術(shù)。

朱禮明

信息管理與信息系統(tǒng)1301班

2014.07.23

第二篇：電子政務(wù)網(wǎng)頁設(shè)計(jì)與制作實(shí)驗(yàn)教案

《電子政務(wù)網(wǎng)頁設(shè)計(jì)與制作》實(shí)驗(yàn)教案

實(shí)驗(yàn)名稱 IIS的安裝與調(diào)試

實(shí)驗(yàn)類型：演示型√ 驗(yàn)證型□ 綜合型□ 設(shè)計(jì)型□ 實(shí)驗(yàn)類別：基礎(chǔ)√ 專業(yè)基礎(chǔ)□ 專業(yè)□ 實(shí)驗(yàn)要求：必做√ 選做□ 實(shí)驗(yàn)學(xué)時(shí)：2 實(shí)驗(yàn)對象：本科生

一、實(shí)驗(yàn)?zāi)康?/p>

1．掌握檢測不同版本W(wǎng)indows操作系統(tǒng)IIS的安裝與否； 2.掌握在Windows操作系統(tǒng)中安裝IIS的方法；

3．掌握利用IIS設(shè)置虛擬目錄調(diào)試ASP程序的初步方法。

二、實(shí)驗(yàn)重點(diǎn)、難點(diǎn)

利用IIS設(shè)置虛擬目錄調(diào)試ASP程序

三、實(shí)驗(yàn)原理

ASP模型的運(yùn)行原理是：當(dāng)瀏覽器向Web服務(wù)器請求.asp文件時(shí)，服務(wù)器端腳本開始運(yùn)行，WEB服務(wù)器調(diào)用.asp文件，將運(yùn)行結(jié)果發(fā)送到瀏覽器。

四、實(shí)驗(yàn)設(shè)備、實(shí)驗(yàn)教學(xué)軟件介紹

個(gè)人PC，Windows 2000,IIS 5.0,記事本

五、實(shí)驗(yàn)分組及組織情況

無

六、實(shí)驗(yàn)的基本操作與實(shí)驗(yàn)重要步驟

1、實(shí)驗(yàn)前先觀看指導(dǎo)老師的演示；

2、如果計(jì)算機(jī)未安裝IIS，使用安裝程序安裝IIS；

3、利用記事本編寫教材P13 1－1的ASP程序并存盤；

4、在IIS中建立虛擬目錄，調(diào)試ASP程序，找出并解決問題，確保調(diào)試成功，并相互訪問；

5、學(xué)生獨(dú)立完成相應(yīng)的實(shí)驗(yàn)報(bào)告。

七、實(shí)驗(yàn)教學(xué)，如實(shí)驗(yàn)教學(xué)內(nèi)容設(shè)計(jì)、時(shí)間設(shè)計(jì)、實(shí)驗(yàn)教學(xué)手段設(shè)計(jì)、實(shí)驗(yàn)指導(dǎo)設(shè)計(jì)等；

參照上述實(shí)驗(yàn)內(nèi)容，分模塊講解各業(yè)務(wù)流程的作用和操作方法

八、預(yù)期的實(shí)驗(yàn)效果

多數(shù)學(xué)生能獨(dú)立完成實(shí)驗(yàn)，掌握基本原理和方法。

九、實(shí)驗(yàn)中應(yīng)注意事項(xiàng)

對于因操作系統(tǒng)本身的原因，無法安裝調(diào)試好IIS，需重新安裝系統(tǒng)。

十、課外實(shí)驗(yàn)或思考題

教材P13 練習(xí)1-1

十一、實(shí)驗(yàn)教材及實(shí)驗(yàn)參考資料

《ASP網(wǎng)頁數(shù)據(jù)庫短訓(xùn)教程》、劉瑞新主編，機(jī)械工業(yè)出版社，2005年出版

十二、實(shí)驗(yàn)后記

學(xué)生獨(dú)立完成實(shí)驗(yàn)報(bào)告

實(shí)驗(yàn)名稱 HTML網(wǎng)頁編輯

實(shí)驗(yàn)類型：演示型√ 驗(yàn)證型□ 綜合型□ 設(shè)計(jì)型□ 實(shí)驗(yàn)類別：基礎(chǔ)√ 專業(yè)基礎(chǔ)□ 專業(yè)□ 實(shí)驗(yàn)要求：必做√ 選做□ 實(shí)驗(yàn)學(xué)時(shí)：2 實(shí)驗(yàn)對象：本科生

一、實(shí)驗(yàn)?zāi)康?/p>

1．掌握HTML基本標(biāo)記的使用； 2.掌握HTML中超級鏈接的使用方法；

3．掌握HTML中特殊符號、圖片鏈接的使用方法。

二、實(shí)驗(yàn)重點(diǎn)、難點(diǎn)

HTML中特殊符號、圖片鏈接的使用方法

三、實(shí)驗(yàn)原理 HTML標(biāo)記語言

四、實(shí)驗(yàn)設(shè)備、實(shí)驗(yàn)教學(xué)軟件介紹

個(gè)人PC，Windows 2000,IIS 5.0,記事本

五、實(shí)驗(yàn)分組及組織情況 無

六、實(shí)驗(yàn)的基本操作與實(shí)驗(yàn)重要步驟

1.實(shí)驗(yàn)前先觀看指導(dǎo)老師的演示；

2.利用記事本編寫教材P34 2－1的HTML程序并存盤； 3.調(diào)試；

4.學(xué)生獨(dú)立完成相應(yīng)的實(shí)驗(yàn)報(bào)告。

七、實(shí)驗(yàn)教學(xué)，如實(shí)驗(yàn)教學(xué)內(nèi)容設(shè)計(jì)、時(shí)間設(shè)計(jì)、實(shí)驗(yàn)教學(xué)手段設(shè)計(jì)、實(shí)驗(yàn)指導(dǎo)設(shè)計(jì)等；

參照上述實(shí)驗(yàn)內(nèi)容，分模塊講解各業(yè)務(wù)流程的作用和操作方法

八、預(yù)期的實(shí)驗(yàn)效果

多數(shù)學(xué)生能獨(dú)立完成實(shí)驗(yàn)，掌握基本原理和方法。

九、實(shí)驗(yàn)中應(yīng)注意事項(xiàng)

注意熱點(diǎn)鏈接的使用，調(diào)試出問題時(shí)，多從連接文件的上下級目錄上找原因。

十、課外實(shí)驗(yàn)或思考題

教材P34 練習(xí)2-1

十一、實(shí)驗(yàn)教材及實(shí)驗(yàn)參考資料

《ASP網(wǎng)頁數(shù)據(jù)庫短訓(xùn)教程》、劉瑞新主編，機(jī)械工業(yè)出版社，2005年出版

十二、實(shí)驗(yàn)后記

學(xué)生獨(dú)立完成實(shí)驗(yàn)報(bào)告

實(shí)驗(yàn)名稱 Vbscript對象編程

實(shí)驗(yàn)類型：演示型√ 驗(yàn)證型□ 綜合型□ 設(shè)計(jì)型□ 實(shí)驗(yàn)類別：基礎(chǔ)√ 專業(yè)基礎(chǔ)□ 專業(yè)□ 實(shí)驗(yàn)要求：必做√ 選做□ 實(shí)驗(yàn)學(xué)時(shí)：2 實(shí)驗(yàn)對象：本科生

一、實(shí)驗(yàn)?zāi)康?/p>

1．掌握Vbscript的基本數(shù)據(jù)類型、常量、變量、表達(dá)式和常用函數(shù)； 2.掌握在HTML中插入Vbscript編碼的方法； 3．掌握事件驅(qū)動程序的編制。

二、實(shí)驗(yàn)重點(diǎn)、難點(diǎn)

事件驅(qū)動程序的編制，面向?qū)ο蟮某绦蛟O(shè)計(jì)思想的掌握。

三、實(shí)驗(yàn)原理

Vbscript事件驅(qū)動程序編制。

四、實(shí)驗(yàn)設(shè)備、實(shí)驗(yàn)教學(xué)軟件介紹

個(gè)人PC，Windows 2000,IIS 5.0,記事本

五、實(shí)驗(yàn)分組及組織情況

無

六、實(shí)驗(yàn)的基本操作與實(shí)驗(yàn)重要步驟

1.實(shí)驗(yàn)前先觀看指導(dǎo)老師的演示；

2.利用記事本編寫教材P74練習(xí)4－1題的程序并存盤； 3.調(diào)試；

4.學(xué)生獨(dú)立完成相應(yīng)的實(shí)驗(yàn)報(bào)告。

七、實(shí)驗(yàn)教學(xué)，如實(shí)驗(yàn)教學(xué)內(nèi)容設(shè)計(jì)、時(shí)間設(shè)計(jì)、實(shí)驗(yàn)教學(xué)手段設(shè)計(jì)、實(shí)驗(yàn)指導(dǎo)設(shè)計(jì)等；

參照上述實(shí)驗(yàn)內(nèi)容，分模塊講解各業(yè)務(wù)流程的作用和操作方法

八、預(yù)期的實(shí)驗(yàn)效果

多數(shù)學(xué)生能獨(dú)立完成實(shí)驗(yàn)，掌握基本原理和方法。

九、實(shí)驗(yàn)中應(yīng)注意事項(xiàng)

對象編程的思想，對象事件的編程方法。

十、課外實(shí)驗(yàn)或思考題

教材P74 練習(xí)4-1

十一、實(shí)驗(yàn)教材及實(shí)驗(yàn)參考資料

《ASP網(wǎng)頁數(shù)據(jù)庫短訓(xùn)教程》、劉瑞新主編，機(jī)械工業(yè)出版社，2005年出版

十二、實(shí)驗(yàn)后記

學(xué)生獨(dú)立完成實(shí)驗(yàn)報(bào)告

實(shí)驗(yàn)名稱 表單設(shè)計(jì)

實(shí)驗(yàn)類型：演示型√ 驗(yàn)證型□ 綜合型□ 設(shè)計(jì)型□ 實(shí)驗(yàn)類別：基礎(chǔ)√ 專業(yè)基礎(chǔ)□ 專業(yè)□ 實(shí)驗(yàn)要求：必做√ 選做□ 實(shí)驗(yàn)學(xué)時(shí)：2 實(shí)驗(yàn)對象：本科生

一、實(shí)驗(yàn)?zāi)康?/p>

1．掌握DHTML中INPUT控件的使用； 2.掌握DHTML中SELECT控件的使用； 3．掌握DHTML中TextArea控件的使用。

二、實(shí)驗(yàn)重點(diǎn)、難點(diǎn)

掌握DHTML中INPUT控件的使用

三、實(shí)驗(yàn)原理 DHTML語言

四、實(shí)驗(yàn)設(shè)備、實(shí)驗(yàn)教學(xué)軟件介紹

個(gè)人PC，Windows 2000,IIS 5.0,記事本

五、實(shí)驗(yàn)分組及組織情況

無

六、實(shí)驗(yàn)的基本操作與實(shí)驗(yàn)重要步驟 1.實(shí)驗(yàn)前先觀看指導(dǎo)老師的演示；

2.利用記事本或Dreamweaver等軟件編寫表單程序并存盤； 3.調(diào)試；

4.學(xué)生獨(dú)立完成相應(yīng)的實(shí)驗(yàn)報(bào)告。

七、實(shí)驗(yàn)教學(xué)，如實(shí)驗(yàn)教學(xué)內(nèi)容設(shè)計(jì)、時(shí)間設(shè)計(jì)、實(shí)驗(yàn)教學(xué)手段設(shè)計(jì)、實(shí)驗(yàn)指導(dǎo)設(shè)計(jì)等；

參照上述實(shí)驗(yàn)內(nèi)容，分模塊講解各業(yè)務(wù)流程的作用和操作方法

八、預(yù)期的實(shí)驗(yàn)效果

多數(shù)學(xué)生能獨(dú)立完成實(shí)驗(yàn)，掌握基本原理和方法。

九、實(shí)驗(yàn)中應(yīng)注意事項(xiàng) Dreamweaver集成化工具的使用

十、課外實(shí)驗(yàn)或思考題

教材P121 練習(xí)6-1

十一、實(shí)驗(yàn)教材及實(shí)驗(yàn)參考資料

《ASP網(wǎng)頁數(shù)據(jù)庫短訓(xùn)教程》、劉瑞新主編，機(jī)械工業(yè)出版社，2005年出版

十二、實(shí)驗(yàn)后記

學(xué)生獨(dú)立完成實(shí)驗(yàn)報(bào)告

實(shí)驗(yàn)名稱 Response對象應(yīng)用

實(shí)驗(yàn)類型：演示型√ 驗(yàn)證型□ 綜合型□ 設(shè)計(jì)型□ 實(shí)驗(yàn)類別：基礎(chǔ)√ 專業(yè)基礎(chǔ)□ 專業(yè)□ 實(shí)驗(yàn)要求：必做√ 選做□ 實(shí)驗(yàn)學(xué)時(shí)：2 實(shí)驗(yàn)對象：本科生

一、實(shí)驗(yàn)?zāi)康?/p>

1．掌握Response對象中Write方法的使用； 2.掌握Response對象中Redirect方法的使用； 3．掌握Response對象中End方法的使用。

二、實(shí)驗(yàn)重點(diǎn)、難點(diǎn)

Response對象中Write方法的使用

三、實(shí)驗(yàn)原理

ASP中Response對象應(yīng)用

四、實(shí)驗(yàn)設(shè)備、實(shí)驗(yàn)教學(xué)軟件介紹

個(gè)人PC，Windows 2000,IIS 5.0,記事本

五、實(shí)驗(yàn)分組及組織情況

無

六、實(shí)驗(yàn)的基本操作與實(shí)驗(yàn)重要步驟

1.實(shí)驗(yàn)前先觀看指導(dǎo)老師的演示；

2.利用記事本或Dreamweaver等軟件編寫程序并存盤； 3.打開IIS并設(shè)置虛擬目錄進(jìn)行調(diào)試； 4.學(xué)生獨(dú)立完成相應(yīng)的實(shí)驗(yàn)報(bào)告。

七、實(shí)驗(yàn)教學(xué)，如實(shí)驗(yàn)教學(xué)內(nèi)容設(shè)計(jì)、時(shí)間設(shè)計(jì)、實(shí)驗(yàn)教學(xué)手段設(shè)計(jì)、實(shí)驗(yàn)指導(dǎo)設(shè)計(jì)等；

參照上述實(shí)驗(yàn)內(nèi)容，分模塊講解各業(yè)務(wù)流程的作用和操作方法

八、預(yù)期的實(shí)驗(yàn)效果

多數(shù)學(xué)生能獨(dú)立完成實(shí)驗(yàn)，掌握基本原理和方法。

九、實(shí)驗(yàn)中應(yīng)注意事項(xiàng)

對于ASP的內(nèi)置對象，注意代碼的編寫規(guī)范性。

十、課外實(shí)驗(yàn)或思考題

教材P142 練習(xí)7-1

十一、實(shí)驗(yàn)教材及實(shí)驗(yàn)參考資料

《ASP網(wǎng)頁數(shù)據(jù)庫短訓(xùn)教程》、劉瑞新主編，機(jī)械工業(yè)出版社，2005年出版

十二、實(shí)驗(yàn)后記

學(xué)生獨(dú)立完成實(shí)驗(yàn)報(bào)告

實(shí)驗(yàn)名稱 交互式表單程序設(shè)計(jì)

實(shí)驗(yàn)類型：演示型√ 驗(yàn)證型□ 綜合型□ 設(shè)計(jì)型□ 實(shí)驗(yàn)類別：基礎(chǔ)√ 專業(yè)基礎(chǔ)□ 專業(yè)□ 實(shí)驗(yàn)要求：必做√ 選做□ 實(shí)驗(yàn)學(xué)時(shí)：2 實(shí)驗(yàn)對象：本科生

一、實(shí)驗(yàn)?zāi)康?/p>

1．掌握交互式表單程序設(shè)計(jì)的方法； 2.掌握Response對象中Write方法的使用； 3.掌握Request對象中Form集合的應(yīng)用。

二、實(shí)驗(yàn)重點(diǎn)、難點(diǎn)

Request對象中Form集合的應(yīng)用

三、實(shí)驗(yàn)原理

ASP交互式表單程序設(shè)計(jì)

四、實(shí)驗(yàn)設(shè)備、實(shí)驗(yàn)教學(xué)軟件介紹

個(gè)人PC，Windows 2000,IIS 5.0,記事本

五、實(shí)驗(yàn)分組及組織情況

無

六、實(shí)驗(yàn)的基本操作與實(shí)驗(yàn)重要步驟 1.實(shí)驗(yàn)前先觀看指導(dǎo)老師的演示；

2.利用記事本或Dreamweaver等軟件編寫程序并存盤； 3.打開IIS并設(shè)置虛擬目錄進(jìn)行調(diào)試； 4.學(xué)生獨(dú)立完成相應(yīng)的實(shí)驗(yàn)報(bào)告。

七、實(shí)驗(yàn)教學(xué)，如實(shí)驗(yàn)教學(xué)內(nèi)容設(shè)計(jì)、時(shí)間設(shè)計(jì)、實(shí)驗(yàn)教學(xué)手段設(shè)計(jì)、實(shí)驗(yàn)指導(dǎo)設(shè)計(jì)等；

參照上述實(shí)驗(yàn)內(nèi)容，分模塊講解各業(yè)務(wù)流程的作用和操作方法

八、預(yù)期的實(shí)驗(yàn)效果

多數(shù)學(xué)生能獨(dú)立完成實(shí)驗(yàn)，掌握基本原理和方法。

九、實(shí)驗(yàn)中應(yīng)注意事項(xiàng)

注意對于Form集合的運(yùn)用，代碼要規(guī)范。

十、課外實(shí)驗(yàn)或思考題

教材P163 練習(xí)8-1

十一、實(shí)驗(yàn)教材及實(shí)驗(yàn)參考資料

《ASP網(wǎng)頁數(shù)據(jù)庫短訓(xùn)教程》、劉瑞新主編，機(jī)械工業(yè)出版社，2005年出版

十二、實(shí)驗(yàn)后記

學(xué)生獨(dú)立完成實(shí)驗(yàn)報(bào)告

第三篇：個(gè)人網(wǎng)頁制作過程

個(gè)人網(wǎng)頁制作過程：

制作個(gè)人網(wǎng)頁的目的就是向大家介紹自己，我制作個(gè)人網(wǎng)頁的過程如下

（1）首先是熟悉并熟練一款網(wǎng)頁制作軟件的使用方法，這樣制作出來的個(gè)人主

頁才不會顯得粗糙，我選擇的是frontpage，這款軟件比較適合于初學(xué)者來使用。雖然在制作效果上也許會遜色一點(diǎn)，但是其優(yōu)點(diǎn)的是比較容易上手。

（2）其次就是選擇素材了，網(wǎng)頁上那些好看的背景還有點(diǎn)綴以及一些裝飾，標(biāo)

志性的圖片，元素都是需要自己來選擇的。選擇好了這些圖片元素會為你的網(wǎng)頁增添很多生氣。這里介紹一個(gè)比較好的網(wǎng)站。我的所有圖片元素以及背景都是從這里面找的。

（3）所需要介紹的當(dāng)然是自己的個(gè)人信息，包括自己的基本信息以及自己的愛

好，工作以及一些零碎的感悟。這些都是要在網(wǎng)頁里面表達(dá)出來的文本信息，所以必須要實(shí)現(xiàn)準(zhǔn)備好。

（4）現(xiàn)在就是需要布置自己的網(wǎng)站了，我的計(jì)劃是用多頁面網(wǎng)站來介紹自己，制作個(gè)人主頁。首先必須有一個(gè)主頁，里面是我的基本信息，然后有幾個(gè)選項(xiàng)，分別超鏈接我的愛好，我的工作以及我的感悟。在下面會有三個(gè)子網(wǎng)頁，分別就是我的愛好，我的工作以及我的感悟。出去剩下的兩個(gè)不在超鏈接以外，我的愛好會再向下借三個(gè)子網(wǎng)頁，分別是我喜歡的歌，我喜歡的書和我喜歡的電影。

（5）有了明確的目標(biāo)就開始著手制作，在上面那個(gè)網(wǎng)站里下載的背景和矢量圖

都是需要加工的，需要利用繪圖工具把需要的元素從整個(gè)照片里摳出來，把不需要的多余的部分擦除，在這個(gè)時(shí)候什么圖片需要放置在什么地方用來做什么已經(jīng)有一個(gè)大致的想法。

（6）沒有用其他的網(wǎng)頁制作工具，frontpage里面需要事先插入表格，將圖片

文本信息填到適合的表格里，這里面的布局工作就需要自己動手了，以個(gè)人愛好而定，里面遇到了不少問題，但都最終被我解決了。這里面插入圖片需要在插入選項(xiàng)里面選擇插入圖片，設(shè)置背景則是在格式選項(xiàng)里選擇背景，背景圖片也要在繪圖工具里設(shè)定好尺寸。一開始我選擇的網(wǎng)頁形式是新建一個(gè)只有一個(gè)網(wǎng)頁的網(wǎng)站，后面的子網(wǎng)頁可以在網(wǎng)站里新建網(wǎng)頁來實(shí)現(xiàn)。

第四篇：網(wǎng)頁設(shè)計(jì)及制作 實(shí)習(xí)報(bào)告

中原工學(xué)院信息商務(wù)學(xué)院畢業(yè)實(shí)習(xí)報(bào)告專用紙

網(wǎng)頁設(shè)計(jì)及制作

【實(shí)習(xí)目的】

熟悉和掌握計(jì)算機(jī)網(wǎng)頁設(shè)計(jì)的基本技巧及網(wǎng)頁制作相關(guān)工具軟件等內(nèi)容。通過網(wǎng)頁設(shè)計(jì)理論聯(lián)系實(shí)際操作，鞏固所學(xué)的知識，提高處理問題的能力。充分學(xué)習(xí)網(wǎng)頁設(shè)計(jì)實(shí)踐中的操作理論，提高自己網(wǎng)頁設(shè)計(jì)水平，并為能順利與社會環(huán)境接軌做準(zhǔn)備。

【實(shí)習(xí)時(shí)間】

2012年2月15日至2012年3月15日

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

未來路錦江國際花園9棟501室

【實(shí)習(xí)單位】

鄭州市托斯卡納餐飲有限公司

【實(shí)習(xí)內(nèi)容和過程】

實(shí)習(xí)內(nèi)容：

我在托斯卡納餐飲公司旗下的56°網(wǎng)絡(luò)蛋糕店一個(gè)月的實(shí)習(xí)，我的工作就是負(fù)責(zé)設(shè)計(jì)整個(gè)網(wǎng)站的頁面部分。為其一個(gè)月的實(shí)習(xí)，使我第一次親身感受到了所學(xué)知識與實(shí)際的應(yīng)用，作為一個(gè)網(wǎng)站美工除了要求網(wǎng)頁三劍客,ps,這些必會的軟件以外，還要對Html用的很熟,對ASP或PHP或jsp要有初步的了解。通過這次實(shí)習(xí)，進(jìn)一步鞏固和深化所學(xué)的理論知識，為以后的工作打好基礎(chǔ)。以下是我做的一些實(shí)習(xí)過程中的經(jīng)驗(yàn)總結(jié)：

（1）表達(dá)一定的藝術(shù)效果

一個(gè)成功的網(wǎng)站應(yīng)該把網(wǎng)頁設(shè)計(jì)得吸引人，同時(shí)又要傳達(dá)設(shè)計(jì)思想和情感。網(wǎng)頁作為一種媒體，它必須具有一定的藝術(shù)感染力，一個(gè)平淡無奇、雜亂無章或毫無美感的網(wǎng)頁很難會有瀏覽者喜歡，更不要說讓瀏覽者去注意它的內(nèi)容了。

（2）使頁面結(jié)構(gòu)清晰可讀性強(qiáng)

經(jīng)常可以看到這樣的頁面，上面堆砌了許多內(nèi)容，卻沒有考慮它的空間框架，讓人看了無法知曉哪些內(nèi)容才是最具發(fā)言權(quán)的。沒有流暢的視覺流程，這是典型的沒有注意到編排清晰度、可讀性的表現(xiàn)。

（3）實(shí)現(xiàn)不同的功能

在網(wǎng)絡(luò)這條信息高速公路上，網(wǎng)頁最主要的功能就是一種傳遞信息的手段。因此，它一切內(nèi)容都是為了這個(gè)目的而服務(wù)，都是要圍繞這個(gè)中心進(jìn)行設(shè)計(jì)的。然而，要實(shí)現(xiàn)這個(gè)功能，網(wǎng)頁的美工設(shè)計(jì)和內(nèi)容都必須有針對性。所謂針對性，就是指對不同類別的網(wǎng)頁要求采用不同的美工藝術(shù)效果。

（4）網(wǎng)頁的內(nèi)容

網(wǎng)頁設(shè)計(jì)人員美化網(wǎng)頁，增加網(wǎng)頁設(shè)計(jì)的藝術(shù)感，都是為了網(wǎng)頁設(shè)計(jì)的內(nèi)容服務(wù)的。一般來說，網(wǎng)頁的幾項(xiàng)基本內(nèi)容：標(biāo)題、網(wǎng)站標(biāo)志、主體內(nèi)容、導(dǎo)航、廣告欄等。

（5）確定網(wǎng)站的類型

在設(shè)計(jì)網(wǎng)頁之需要做大量的準(zhǔn)備工作，需要思考以下幾個(gè)問題：

1、網(wǎng)站的類型：站點(diǎn)屬于新聞、娛樂、商務(wù)類的綜合站點(diǎn)，還是個(gè)人主頁；

（6）確定網(wǎng)站的風(fēng)格

如果瀏覽者主要是年輕人，頁面就要設(shè)計(jì)得基調(diào)明快，活潑富有朝氣；如果針對的群體是政府工作者或科學(xué)工作者，那么頁面就要設(shè)計(jì)得嚴(yán)謹(jǐn)、嚴(yán)肅、理性、科學(xué)；如果針對的群體是婦女兒童，頁面則要設(shè)計(jì)得溫馨、友愛、輕松；如果針對的群體是戀人或從事藝術(shù)工作的人，頁面就要設(shè)計(jì)得浪漫并有藝術(shù)感

（7）確定網(wǎng)頁之間的鏈接關(guān)系

在網(wǎng)站的總體規(guī)劃列出來后，就必須要考慮各個(gè)網(wǎng)頁之間的關(guān)系，是星型、樹型、網(wǎng)型還是直線鏈接。

實(shí)習(xí)過程：

1．我所在的公司是托斯卡納餐飲公司旗下的56°蛋糕部門，主要項(xiàng)目是蛋糕類。而我主要是負(fù)責(zé)網(wǎng)頁設(shè)計(jì)制作這一塊。

2.因?yàn)槭怯嘘P(guān)蛋糕的網(wǎng)站，我首先從網(wǎng)上了解了一些有關(guān)項(xiàng)目和一些基本常識。接下來我就應(yīng)該考慮配色與構(gòu)圖了。這在做食品網(wǎng)頁上是最關(guān)鍵的環(huán)節(jié)?？紤]配色與構(gòu)圖：對整個(gè)內(nèi)容有了一了解后，現(xiàn)在要思考作品的色彩和具體的構(gòu)圖，先用筆畫出草圖，也可以直接在腦海里構(gòu)思。色彩要活潑健康，所以選擇粉色作為主色調(diào)。

查找素材：其實(shí)素材這種東西總是數(shù)量大于質(zhì)量，我可以很輕易的下載到許多許多的素材，但卻很少用的到它。為了使網(wǎng)頁看上去質(zhì)量更好，要對圖片的進(jìn)

行篩選，加上拍攝的蛋糕圖片。

開始設(shè)計(jì)：設(shè)計(jì)的時(shí)間是最多的，有的時(shí)候，在設(shè)計(jì)時(shí)原先找到的素材就不能用了，甚至全部用不到。所以后來我就先設(shè)計(jì)，想用什么圖的時(shí)候再找。加上去拍攝蛋糕的照片使用PS進(jìn)行加工，讓的圖片上的蛋糕更加誘人。做一張首頁效果圖一般用兩天的時(shí)間。然后把效果圖給領(lǐng)導(dǎo)看，等到領(lǐng)導(dǎo)通過才能進(jìn)行下一步工作。

做子頁：子頁一般需要五六張效果圖。不過，對于這一步驟來將，我們就輕松多了。時(shí)間一般也需要兩天。

切圖：所有的效果圖做好了之后就開始切圖，切圖其實(shí)就是把效果圖變成網(wǎng)頁。一般需要兩天。切圖之中其實(shí)會遇到好多匪夷所思的事情，不過當(dāng)你熟練這后就好了。當(dāng)然，一開始我經(jīng)常會遇到，比如代碼的意思是使網(wǎng)頁正題居中，但結(jié)果卻是整個(gè)網(wǎng)頁偏移到了左邊。等等這樣的事情在我初期切圖的時(shí)候經(jīng)常遇到?，F(xiàn)在好多了。

完成：做到這一步我的任務(wù)就完成了。

工作這么長時(shí)間，對一切越來越熟習(xí)之后，總想找到一些別的感覺。每天我會去不同風(fēng)格的網(wǎng)站，會觀察他們出彩的地方，然后不斷加強(qiáng)自身的職業(yè)素質(zhì)。

【實(shí)習(xí)體會和收獲】

光陰似箭，日月如梭。轉(zhuǎn)眼間，愉快而又充實(shí)的網(wǎng)頁實(shí)習(xí)結(jié)束了，在這一個(gè)月的時(shí)間里，讓我嘗試了理論與實(shí)踐相結(jié)合。網(wǎng)頁設(shè)計(jì)理論一點(diǎn)點(diǎn)轉(zhuǎn)化為實(shí)踐經(jīng)驗(yàn)。豐富的實(shí)習(xí)生活充滿了驚喜，快樂和充實(shí)，當(dāng)然也少不了網(wǎng)頁設(shè)計(jì)過程中的困難。實(shí)習(xí)結(jié)束了，覺得腦袋里又注入了新的知識，對網(wǎng)頁設(shè)計(jì)也有了新的了解，在以后的工作中，希望能用自己了解的東西去處理相關(guān)問題，在探究新的問題，使自己不斷進(jìn)步。

在實(shí)習(xí)生涯中影響了我很多，就像我用兩天的時(shí)間制作出一張首頁效果圖，他人往往只能看到完成品。而這并不是最重要的，最重要的是別人沒有經(jīng)歷的我卻在珍惜的創(chuàng)作過程。也許這個(gè)過程還遠(yuǎn)遠(yuǎn)不能稱之為創(chuàng)造，但我會努力的。做了一個(gè)月的美工，終于體會到網(wǎng)頁設(shè)計(jì)無非是圖文混排的那點(diǎn)事。不過，當(dāng)你真正的去努力的創(chuàng)造了之后，結(jié)果卻并不會每次都是好的。太多自己精心設(shè)計(jì)的東西，被別人一眼就否定了。當(dāng)時(shí)心情真的很糟糕。不過，現(xiàn)在想想，這都些都沒

有什么，這也無非是成長中常常要遇到的事罷了。

在實(shí)習(xí)過程中，我發(fā)現(xiàn)社會比校園更殘酷，在工作的單位我學(xué)會了，凡事第一反應(yīng)是找方法，而不是找借口；凡事先訂立目標(biāo)，并且盡量制作“夢想板”；凡事預(yù)先做計(jì)劃，盡量前目標(biāo)視覺化；六點(diǎn)優(yōu)先工作制，每一分，每一秒做生產(chǎn)力的事情；把重要的觀念，方法寫下來，并貼起來，以隨時(shí)提示自己；每天提前30分鐘上班，推遲30分鐘下班。

工作是人生活的重要部分，不論是消極還是積極，都會給人帶來不同感受。而精彩的生活往往有來源于有意義的工作中，所以我不會讓自己因工作的煩惱、困難和壓力，困擾自己，使自己工作情緒化、生活情緒化。遇到困難我會用平常的心態(tài)實(shí)際看待問題，告自己凡事要先做人、后做事。

第五篇：網(wǎng)頁設(shè)計(jì)與制作期末設(shè)計(jì)報(bào)告

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

---個(gè)人網(wǎng)站設(shè)計(jì)報(bào)告

指導(dǎo)老師：盛加林 學(xué)號：20082809 姓名：杜才偉 班級：信管0802

一． 概述

隨著網(wǎng)絡(luò)技術(shù)的迅速發(fā)展，網(wǎng)絡(luò)應(yīng)用越來越趨于平凡化，無論是企業(yè)還是其他組織機(jī)構(gòu)或者是個(gè)人，都希望利用計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)開發(fā)對自己有價(jià)值的東西。關(guān)于個(gè)人網(wǎng)站，現(xiàn)在越來越多的人通過個(gè)人網(wǎng)站記錄自己的故事，與朋友分享生活的點(diǎn)滴，同時(shí)還可以通過個(gè)人網(wǎng)站廣交朋友。

本次的個(gè)人網(wǎng)站設(shè)計(jì)是網(wǎng)頁設(shè)計(jì)與制作的期末檢測，同時(shí)也是對自己學(xué)習(xí)的檢驗(yàn)。本次設(shè)計(jì)運(yùn)用平臺是windows，運(yùn)用的工具是Macromedia Dreamweaver 8，主要語言是html語言和javascript，樣式設(shè)計(jì)采用的是css樣式。

在個(gè)人網(wǎng)站的設(shè)計(jì)中，我采用了通常iframe網(wǎng)頁框架，風(fēng)格源于自己瀏覽其他網(wǎng)站的靈感，網(wǎng)頁flash的設(shè)計(jì)借鑒了網(wǎng)上優(yōu)秀flash動畫，首頁還采用了網(wǎng)頁音樂播放器控件。照片的處理用到了photoshop和Macromedia Fireworks 8。

二． 設(shè)計(jì)結(jié)構(gòu)圖

個(gè)人空間我們的故事

相冊關(guān)于我首頁 三． 設(shè)計(jì)主題

歲月如梭，年華似水。默默流逝的青春給我們每個(gè)人留下了不同的回憶，我的個(gè)人空間的設(shè)計(jì)主要是記錄大學(xué)生活。有學(xué)校的剪影，有寢室的合影??每一張記錄都是未來的我最美好的回憶。設(shè)計(jì)的主要以懷念為主題。曾經(jīng)的那些花兒，曾經(jīng)的那些故事都是生命里美的轉(zhuǎn)彎。

四． 模塊介紹

（一）、首頁介紹

首頁是個(gè)人網(wǎng)站的入口，大概的設(shè)計(jì)框架是頭是一個(gè)部分、頭以下分為左右兩個(gè)部分。頭部如下圖：

導(dǎo)航條：

導(dǎo)航條主要是“我們的故事”、“相冊”、“關(guān)于我”三個(gè)模塊的超鏈接點(diǎn)擊三個(gè)連接即可跳轉(zhuǎn)到不同頁面。頭部以下部分：

這部分的設(shè)計(jì)主要有圖片處理、文字從下往上滾動、音樂播放器、時(shí)鐘的設(shè)計(jì)、flash設(shè)計(jì)

(二)、我們的故事

我們的故事主要是文字描述，整體樣式如下：

這個(gè)部分主要是記錄一些故事，每一段故事中都會存在一些悲傷的插曲，背景漂浮的flash動畫加上背景音樂，還有略帶傷感的文字，整體呈現(xiàn)淡淡的傷感而又不失積極向上。

(三)、相冊 相冊主要是展示大學(xué)四年中的記錄，有關(guān)于學(xué)校的，有我們寢室的，有自己的：整天樣式如下圖：

相冊頁面上面是大學(xué)里照片的輪換，中間是自己處理后的照片，下面是文字大概描述照片的故事：

(四)、關(guān)于我 五． 主要設(shè)計(jì)

(一)、首頁主體框架