《網(wǎng)設(shè)計(jì)與制作》課程設(shè)計(jì)模板

1、沈陽(yáng)工業(yè)大學(xué)網(wǎng)頁(yè)設(shè)計(jì)與制作課程設(shè)計(jì)題目：電話簿管理系統(tǒng)學(xué)院：工程學(xué)院專業(yè)/班級(jí)：電子商務(wù)1101姓名：陳超同組人姓名：燕海霞王莉黃程程唐易靈指導(dǎo)教師：關(guān)學(xué)銘報(bào)告時(shí)間：2014年6月20日成績(jī)與教師評(píng)語(yǔ)成績(jī)一網(wǎng)頁(yè)設(shè)計(jì)的總體概述1.1 網(wǎng)頁(yè)設(shè)計(jì)1.2 網(wǎng)頁(yè)設(shè)計(jì)的目的1.3 網(wǎng)頁(yè)設(shè)計(jì)的任務(wù)1.4.1 網(wǎng)頁(yè)設(shè)計(jì)的要求內(nèi)容HTML標(biāo)記語(yǔ)言Dreamweaver8平面圖像處理軟件本文所制作網(wǎng)頁(yè)主題內(nèi)容介紹網(wǎng)頁(yè)題目網(wǎng)頁(yè)主題內(nèi)容二網(wǎng)頁(yè)素材制作2.1三Dreamweaver8網(wǎng)頁(yè)制作3.1 創(chuàng)建本地站點(diǎn)3.2 上頁(yè)制作過(guò)程3.3 二級(jí)頁(yè)面制作頁(yè)面之間的超缶車接四程序設(shè)計(jì)與實(shí)現(xiàn)3.1 功能設(shè)計(jì)數(shù)據(jù)庫(kù)設(shè)計(jì)五程序測(cè)試

2、六總結(jié)致謝參考文獻(xiàn)1.1 網(wǎng)頁(yè)設(shè)計(jì)的總體概述網(wǎng)頁(yè)設(shè)計(jì)網(wǎng)頁(yè)設(shè)計(jì)是網(wǎng)站是企業(yè)向用戶和網(wǎng)民提供信息（包括產(chǎn)品和服務(wù)）的一種方式，是企業(yè)開(kāi)展電子商務(wù)的基礎(chǔ)設(shè)施和信息平臺(tái)，離開(kāi)網(wǎng)站（或者只是利用第三方網(wǎng)站）去談電子商務(wù)是不可能的。企業(yè)的網(wǎng)址被稱為“網(wǎng)絡(luò)商標(biāo)”，也是企業(yè)無(wú)形資產(chǎn)的組成部分，而網(wǎng)站是INTERNET:宣傳和反映企業(yè)形象和文化的重要窗口。網(wǎng)頁(yè)設(shè)計(jì)的建站包含：企業(yè)網(wǎng)站、集團(tuán)網(wǎng)站、門戶網(wǎng)站、社區(qū)論壇、電子商務(wù)網(wǎng)站、網(wǎng)站優(yōu)化技術(shù)等，如中華網(wǎng)庫(kù)，在行業(yè)中各自有各自的作用。網(wǎng)頁(yè)設(shè)計(jì)是一個(gè)廣義的術(shù)語(yǔ)，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。不同領(lǐng)域的網(wǎng)頁(yè)設(shè)計(jì)，網(wǎng)頁(yè)圖形設(shè)計(jì)，界面設(shè)計(jì)，創(chuàng)作，其

3、中包括標(biāo)準(zhǔn)化的代碼和專有軟件，用戶體驗(yàn)設(shè)計(jì)和搜索引擎優(yōu)化。許多人常常會(huì)以工作小組負(fù)責(zé)不同方面的設(shè)計(jì)過(guò)程中，雖然有些設(shè)計(jì)師將他們所有的網(wǎng)頁(yè)設(shè)計(jì)是設(shè)計(jì)過(guò)程的前端（客戶端）的設(shè)計(jì)用于描述一個(gè)網(wǎng)站，包括寫標(biāo)記，但是這是一個(gè)灰色地帶，因?yàn)檫@還覆蓋了網(wǎng)絡(luò)的發(fā)展。網(wǎng)頁(yè)設(shè)計(jì)師預(yù)計(jì)將有意識(shí)的可用性，如果他們的作用，需要?jiǎng)?chuàng)建標(biāo)記，那么它們也有望成為最新的網(wǎng)頁(yè)易讀性指引。1.2 網(wǎng)頁(yè)設(shè)計(jì)的目的本課程的設(shè)計(jì)目的是通過(guò)實(shí)踐使同學(xué)們經(jīng)歷Dreamweaver8開(kāi)發(fā)的全過(guò)程和受到一次綜合訓(xùn)練，以便能較全面地理解、掌握和綜合運(yùn)用所學(xué)的知識(shí)。結(jié)合具體的開(kāi)發(fā)案例，理解并初步掌握運(yùn)用Dreamweaver8可視化開(kāi)發(fā)工具進(jìn)行網(wǎng)頁(yè)開(kāi)

4、發(fā)的方法；了解網(wǎng)頁(yè)設(shè)計(jì)制作過(guò)程。通過(guò)設(shè)計(jì)達(dá)到掌握網(wǎng)頁(yè)設(shè)計(jì)、制作的技巧。了解和熟悉網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ)知識(shí)和實(shí)現(xiàn)技巧。根據(jù)題目的要求，給出網(wǎng)頁(yè)設(shè)計(jì)方案，可以按要求，利用合適圖文素材設(shè)計(jì)制作符合要求的網(wǎng)頁(yè)設(shè)計(jì)作品。熟練掌握Photoshop8、Dreamweaver8等軟件的的操作和應(yīng)用。增強(qiáng)動(dòng)手實(shí)踐能力，進(jìn)一步加強(qiáng)自身綜合素質(zhì)。我本次主要是設(shè)計(jì)的是以“電話簿管理系統(tǒng)”為主題的網(wǎng)頁(yè)。1.3 網(wǎng)頁(yè)設(shè)計(jì)的任務(wù)任務(wù)一、網(wǎng)站欣賞：DreamweaverCS3提供了站點(diǎn)創(chuàng)建與管理工具，通過(guò)站點(diǎn)管理器可以更好地利用站點(diǎn)對(duì)文件進(jìn)行管理，實(shí)現(xiàn)本地路徑設(shè)置、地址信息管理等功能管理、遠(yuǎn)程服務(wù)器信息管理、測(cè)試服務(wù)器環(huán)境配置、

5、棋板和庫(kù)任務(wù)二、網(wǎng)頁(yè)布局：網(wǎng)頁(yè)布局的好壞是決定網(wǎng)頁(yè)美觀與否的一個(gè)重要因素，主要從兩方面去理解，一種是結(jié)構(gòu)布局，另一種是藝術(shù)布局。通過(guò)合理的布局，可以將頁(yè)面中的文字、圖像等內(nèi)容完美、直觀地展現(xiàn)給訪問(wèn)者，同時(shí)合理安排網(wǎng)貞空間，優(yōu)化網(wǎng)頁(yè)的頁(yè)面效果和下載速度。因此，在對(duì)網(wǎng)頁(yè)進(jìn)行布局的過(guò)程中，應(yīng)遵循視覺(jué)的對(duì)稱平衡、對(duì)比、凝視和空白等原則。常見(jiàn)的網(wǎng)頁(yè)布局形式包括：兀型布局、“三”型布局、框架布局和POP布局。任務(wù)三、色彩基礎(chǔ)：網(wǎng)頁(yè)設(shè)計(jì)是一種特殊的視覺(jué)設(shè)計(jì)，它對(duì)色彩的依賴性很高。由于色彩能夠在不知不覺(jué)問(wèn)影響人的心理，左右人的情緒，所以色彩設(shè)計(jì)也是網(wǎng)站風(fēng)格設(shè)計(jì)的決定性因素之一。任務(wù)四、軟件的安裝：?jiǎn)?dòng)計(jì)算機(jī)，

6、將DreamweaverCS3光盤放入CD-ROM驅(qū)動(dòng)器中，找到DreamweaverCS3安裝文件setup.exe,雙擊即可啟動(dòng)安裝程序。按操作向?qū)崾静僮骷纯赏瓿扇堪惭b過(guò)程。1.4 網(wǎng)頁(yè)設(shè)計(jì)的要求內(nèi)容本程序的設(shè)計(jì)是為用戶提供一個(gè)電話薄管理平臺(tái)，給用戶提供一個(gè)管理聯(lián)系人的聯(lián)系方式的小系統(tǒng)。本電話薄管理系統(tǒng)利用計(jì)算機(jī)對(duì)通訊錄進(jìn)行統(tǒng)一管理，包括了添加、修改、查詢記錄等功能。程序中涉及結(jié)構(gòu)體、數(shù)組、文件等方面的知識(shí)，從而實(shí)現(xiàn)通訊錄管理工作的系統(tǒng)化、規(guī)范化和自動(dòng)化，給用戶的工作和生活提供便利。系統(tǒng)模塊設(shè)計(jì)：整個(gè)電話薄管理系統(tǒng)包括如下幾個(gè)功能模塊。(1)輸入記錄模塊:輸入記錄模塊主要完成將數(shù)據(jù)存入

7、數(shù)組中的工作。在此電話薄管理系統(tǒng)中，記錄可以從以文本形式存儲(chǔ)的數(shù)據(jù)文件中讀入，也可以從鍵盤逐個(gè)輸入記錄。(2) 查詢記錄模塊：查詢記錄模塊主要完成在數(shù)組中查找滿足相關(guān)條件的記錄。在電話薄管理系統(tǒng)中，用戶可以按照聯(lián)系人姓名或聯(lián)系人電話號(hào)碼在數(shù)組中進(jìn)行查找。(3)更新記錄模塊：更新記錄模塊主要完成對(duì)記錄的維護(hù)。在電話薄管理系統(tǒng)中，它能實(shí)現(xiàn)對(duì)記錄的修改、刪除、插入和排序操作。(4)輸出記錄模塊:輸出記錄模塊主要完成兩個(gè)任務(wù)HTML標(biāo)記語(yǔ)言基本內(nèi)容：1. 構(gòu)建HTMLMJM2. 文本及版面風(fēng)格控制3. 圖像、超鏈接和表格4. HTML的表單5. HTML的其他常用標(biāo)記層疊樣式表CSS要求：1）了解HT

8、MlS言與高級(jí)語(yǔ)言（如VBC等）的區(qū)別；識(shí)記網(wǎng)頁(yè)常用標(biāo)記及屆性，如標(biāo)題、字體、段落、圖像、超鏈接、表格等；2）熟練掌握HTM聯(lián)單中各界面對(duì)象的標(biāo)記符號(hào)和屆性，如表單、文本域、列表域、復(fù)選框與單選鈕、命令按鈕等；3）熟練掌握在Dreamweaver中使用層疊樣式表CSS了解層疊樣式表與標(biāo)記屆性的區(qū)別。Dreamweaver8基本內(nèi)容1. Dreamweaver8基礎(chǔ)知識(shí)2. 設(shè)計(jì)站點(diǎn)3. 文字處理與圖像4. 超鏈接5. 表格與圖層的使用6. 框架7. 層疊樣式表CSS表單與行為要求：了解Dreamweaver8基礎(chǔ)知識(shí)、掌握設(shè)計(jì)站點(diǎn)、文字與圖像處理、超鏈接、表格與圖層的使用、框架、層疊樣式表CS

9、S表單與行為。平面圖像處理軟件基本內(nèi)容：1.靈活運(yùn)用Fireworks8作網(wǎng)站的圖像處理2.靈活運(yùn)用Flash8作網(wǎng)站的動(dòng)畫處理要求：了解網(wǎng)頁(yè)文字素材、圖形圖像素材、聲音素材、動(dòng)畫素材的基礎(chǔ)和Fireworks、Flash的使用方法。本文所制作網(wǎng)頁(yè)主題內(nèi)容介紹1.5.1網(wǎng)頁(yè)題目電話簿管理系統(tǒng)1.5.2網(wǎng)頁(yè)主題內(nèi)容本文網(wǎng)頁(yè)是沈陽(yáng)工業(yè)大學(xué)工程學(xué)院11級(jí)電子商務(wù)專業(yè)小蘋果組合的電話簿，其中包括對(duì)小蘋果成員電話信息進(jìn)行添加、刪除和修改，以及及時(shí)更新成員的電話號(hào)碼和所在單位部門,方便其他同學(xué)及時(shí)取得小蘋果成員的最新聯(lián)系方式和相關(guān)動(dòng)態(tài)0二網(wǎng)頁(yè)素材制作Fireworks制作圖片Photoshop制作首頁(yè)圖片

10、三程序設(shè)計(jì)與實(shí)現(xiàn)3.1功能設(shè)計(jì)(1)制作該網(wǎng)頁(yè)頁(yè)面主要實(shí)現(xiàn)電話簿的管理，其主要功能分別為：添加電話；電話管理；電話修改<tablewidth="428"height="38"border="1"align="center"><tr><td><divalign="center"><ahref="user_add.asp">添加電話</a></div></td>'將添加電話設(shè)置

11、成超鏈接，點(diǎn)擊“添加電話”跳轉(zhuǎn)到user_add.asp進(jìn)行操作<td><divalign="center"><ahref="user_manage.asp">電話管理</a></div></td>'將電話管理設(shè)置成超鏈接，點(diǎn)擊“電話管理”跳轉(zhuǎn)到user_manage.asp進(jìn)行操作'<td><palign="center"><ahref="loginout.asp">注銷登錄</a&g

12、t;</p></td></tr>'將注銷登錄設(shè)置成超鏈接，點(diǎn)擊“注銷登錄”跳轉(zhuǎn)到loginout.asp進(jìn)行操作</table>3.2數(shù)據(jù)庫(kù)設(shè)計(jì)四程序測(cè)試(1) 網(wǎng)頁(yè)登錄頁(yè)面電話簿管理網(wǎng)頁(yè)首頁(yè)首頁(yè)顯示數(shù)據(jù)庫(kù)中存入的電話信息：首頁(yè)搜索引擎通過(guò)輸入姓名，實(shí)現(xiàn)在數(shù)據(jù)庫(kù)中搜索數(shù)據(jù)的功能:功能實(shí)現(xiàn)代碼：<tablewidth="90%"border="0"align="center"cellpadding="1"cellspacing="1"b

13、gcolor="#6699cc"><tr><tdheight="20"bgcolor="#6699cc"align="center"style="BACKGROUND-IMAGErl(images/titlebg.gif);COLOR#330099;font:10.5pt"><spanclass="STYLE1blackText">搜索電話</span></td></tr><tr><

14、;tdheight="60"bgcolor="#FFFFFF"><tablewidth="90%"border="0"align="center"cellpadding="0"cellspacing="0"><tr><formname="form2"method="post"action="user_manage.asp?action=select">&l

15、t;tdalign="center">按姓名查找：<inputname="namekey"type="text"="namekey2"size="12">&nbsp;<inputname="checkbox"type="checkbox"="checkbox2"value="1"checked模糊查詢<inputtype="submit"name="

16、Submit2"value="查詢"></td></form></tr></table></td></tr></table>電話添加頁(yè)面點(diǎn)擊首頁(yè)添加電話彈出該頁(yè)面，帶有星號(hào)的選項(xiàng)必須進(jìn)行填寫，填寫好信息后點(diǎn)擊保存，將數(shù)據(jù)添加到數(shù)據(jù)庫(kù)。功能實(shí)現(xiàn)代碼：<tablewidth="42%"height="330"border="0"align="center"cellpadding="0&

17、quot;cellspacing="0"class="CContent"><tr><thclass="tablestyle_title">電話維護(hù)頁(yè)面</th></tr><tr><tdclass="CPanel"><tableborder="0"cellpadding="0"cellspacing="0"style="width:100%"><

18、;tralign="center"><tdclass="TablePanel"><%iflid<>""then%>電話信息修改<%else%電話信息添加<%endif%></td></tr><TR><TDwidth="100%"><fieldsetstyle="height:100%;"><legend>電話信息</legend><tablewid

19、th="100%"height="189"border="0"cellpadding="2"cellspacing="1"style="width:100%"><tr><tdnowrapalign="right"width="15%">姓名:</td><tdwidth="35%"><inputname='name'type="tex

20、t"class="text"id="name"style="width:154px"value="<%=name%>"/><spanclass="red">*</span></td></tr><tr><tdnowrap="nowrap"align="right">電話：</td><td><label></label&

21、gt;<inputname='tel'type="text"class="text"id="tel"style="width:154px"value="<%=tel%>"/><spanclass="red">*</span></td></tr><tr><tdalign="right"nowrap="nowrap">單位:<

22、;/td><td><label><inputname='department'type="text"class="text"id="department"style="width:154px"value="<%=department%>"/></label></td></tr></table><br/></fieldset></TD></

23、TR></TABLE></td></tr><TR><TDcolspan="2"align="center"height="50px"><inputtype="submit"name="Submit"value="保存"class="button"/><inputtype="hidden"name="id"value="<

24、;%=lid%>"/></TD></TR></TABLE>刪除信息選中要?jiǎng)h除的信息，然后點(diǎn)擊刪除所選項(xiàng)，系統(tǒng)會(huì)自動(dòng)彈出“你確定這樣做嗎？”點(diǎn)擊確定刪除所選中的信息。點(diǎn)擊反回，取消操作。功能實(shí)現(xiàn)代碼：</table><br><br><divalign="center"><inputtype="submit"name="Submit"value="刪除所選電話"onClick="returnconfirm('您確定要這樣操作嗎？')">全選<inputtype="checkbox"name="checkbox2"value="CheckAll"onClick="mm()"></div></td