《网设计与制作》课程设计模板

1、沈阳工业大学网页设计与制作课程设计题目：电话簿管理系统学院：工程学院专业/班级：电子商务1101姓名：陈超同组人姓名：燕海霞王莉黄程程唐易灵指导教师：关学铭报告时间：2014年6月20日成绩与教师评语成绩一网页设计的总体概述1.1 网页设计1.2 网页设计的目的1.3 网页设计的任务1.4.1 网页设计的要求内容HTML标记语言Dreamweaver8平面图像处理软件本文所制作网页主题内容介绍网页题目网页主题内容二网页素材制作2.1三Dreamweaver8网页制作3.1 创建本地站点3.2 上页制作过程3.3 二级页面制作页面之间的超缶车接四程序设计与实现3.1 功能设计数据库设计五程序测试

2、六总结致谢参考文献1.1 网页设计的总体概述网页设计网页设计是网站是企业向用户和网民提供信息（包括产品和服务）的一种方式，是企业开展电子商务的基础设施和信息平台，离开网站（或者只是利用第三方网站）去谈电子商务是不可能的。企业的网址被称为“网络商标”，也是企业无形资产的组成部分，而网站是INTERNET:宣传和反映企业形象和文化的重要窗口。网页设计的建站包含：企业网站、集团网站、门户网站、社区论坛、电子商务网站、网站优化技术等，如中华网库，在行业中各自有各自的作用。网页设计是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。不同领域的网页设计，网页图形设计，界面设计，创作，其

3、中包括标准化的代码和专有软件，用户体验设计和搜索引擎优化。许多人常常会以工作小组负责不同方面的设计过程中，虽然有些设计师将他们所有的网页设计是设计过程的前端（客户端）的设计用于描述一个网站，包括写标记，但是这是一个灰色地带，因为这还覆盖了网络的发展。网页设计师预计将有意识的可用性，如果他们的作用，需要创建标记，那么它们也有望成为最新的网页易读性指引。1.2 网页设计的目的本课程的设计目的是通过实践使同学们经历Dreamweaver8开发的全过程和受到一次综合训练，以便能较全面地理解、掌握和综合运用所学的知识。结合具体的开发案例，理解并初步掌握运用Dreamweaver8可视化开发工具进行网页开

4、发的方法；了解网页设计制作过程。通过设计达到掌握网页设计、制作的技巧。了解和熟悉网页设计的基础知识和实现技巧。根据题目的要求，给出网页设计方案，可以按要求，利用合适图文素材设计制作符合要求的网页设计作品。熟练掌握Photoshop8、Dreamweaver8等软件的的操作和应用。增强动手实践能力，进一步加强自身综合素质。我本次主要是设计的是以“电话簿管理系统”为主题的网页。1.3 网页设计的任务任务一、网站欣赏：DreamweaverCS3提供了站点创建与管理工具，通过站点管理器可以更好地利用站点对文件进行管理，实现本地路径设置、地址信息管理等功能管理、远程服务器信息管理、测试服务器环境配置、

5、棋板和库任务二、网页布局：网页布局的好坏是决定网页美观与否的一个重要因素，主要从两方面去理解，一种是结构布局，另一种是艺术布局。通过合理的布局，可以将页面中的文字、图像等内容完美、直观地展现给访问者，同时合理安排网贞空间，优化网页的页面效果和下载速度。因此，在对网页进行布局的过程中，应遵循视觉的对称平衡、对比、凝视和空白等原则。常见的网页布局形式包括：兀型布局、“三”型布局、框架布局和POP布局。任务三、色彩基础：网页设计是一种特殊的视觉设计，它对色彩的依赖性很高。由于色彩能够在不知不觉问影响人的心理，左右人的情绪，所以色彩设计也是网站风格设计的决定性因素之一。任务四、软件的安装：启动计算机，

6、将DreamweaverCS3光盘放入CD-ROM驱动器中，找到DreamweaverCS3安装文件setup.exe,双击即可启动安装程序。按操作向导提示操作即可完成全部安装过程。1.4 网页设计的要求内容本程序的设计是为用户提供一个电话薄管理平台，给用户提供一个管理联系人的联系方式的小系统。本电话薄管理系统利用计算机对通讯录进行统一管理，包括了添加、修改、查询记录等功能。程序中涉及结构体、数组、文件等方面的知识，从而实现通讯录管理工作的系统化、规范化和自动化，给用户的工作和生活提供便利。系统模块设计：整个电话薄管理系统包括如下几个功能模块。(1)输入记录模块:输入记录模块主要完成将数据存入

7、数组中的工作。在此电话薄管理系统中，记录可以从以文本形式存储的数据文件中读入，也可以从键盘逐个输入记录。(2) 查询记录模块：查询记录模块主要完成在数组中查找满足相关条件的记录。在电话薄管理系统中，用户可以按照联系人姓名或联系人电话号码在数组中进行查找。(3)更新记录模块：更新记录模块主要完成对记录的维护。在电话薄管理系统中，它能实现对记录的修改、删除、插入和排序操作。(4)输出记录模块:输出记录模块主要完成两个任务HTML标记语言基本内容：1. 构建HTMLMJM2. 文本及版面风格控制3. 图像、超链接和表格4. HTML的表单5. HTML的其他常用标记层叠样式表CSS要求：1）了解HT

8、MlS言与高级语言（如VBC等）的区别；识记网页常用标记及届性，如标题、字体、段落、图像、超链接、表格等；2）熟练掌握HTM联单中各界面对象的标记符号和届性，如表单、文本域、列表域、复选框与单选钮、命令按钮等；3）熟练掌握在Dreamweaver中使用层叠样式表CSS了解层叠样式表与标记届性的区别。Dreamweaver8基本内容1. Dreamweaver8基础知识2. 设计站点3. 文字处理与图像4. 超链接5. 表格与图层的使用6. 框架7. 层叠样式表CSS表单与行为要求：了解Dreamweaver8基础知识、掌握设计站点、文字与图像处理、超链接、表格与图层的使用、框架、层叠样式表CS

9、S表单与行为。平面图像处理软件基本内容：1.灵活运用Fireworks8作网站的图像处理2.灵活运用Flash8作网站的动画处理要求：了解网页文字素材、图形图像素材、声音素材、动画素材的基础和Fireworks、Flash的使用方法。本文所制作网页主题内容介绍1.5.1网页题目电话簿管理系统1.5.2网页主题内容本文网页是沈阳工业大学工程学院11级电子商务专业小苹果组合的电话簿，其中包括对小苹果成员电话信息进行添加、删除和修改，以及及时更新成员的电话号码和所在单位部门,方便其他同学及时取得小苹果成员的最新联系方式和相关动态0二网页素材制作Fireworks制作图片Photoshop制作首页图片

10、三程序设计与实现3.1功能设计(1)制作该网页页面主要实现电话簿的管理，其主要功能分别为：添加电话；电话管理；电话修改<tablewidth="428"height="38"border="1"align="center"><tr><td><divalign="center"><ahref="user_add.asp">添加电话</a></div></td>'将添加电话设置

11、成超链接，点击“添加电话”跳转到user_add.asp进行操作<td><divalign="center"><ahref="user_manage.asp">电话管理</a></div></td>'将电话管理设置成超链接，点击“电话管理”跳转到user_manage.asp进行操作'<td><palign="center"><ahref="loginout.asp">注销登录</a&g

12、t;</p></td></tr>'将注销登录设置成超链接，点击“注销登录”跳转到loginout.asp进行操作</table>3.2数据库设计四程序测试(1) 网页登录页面电话簿管理网页首页首页显示数据库中存入的电话信息：首页搜索引擎通过输入姓名，实现在数据库中搜索数据的功能:功能实现代码：<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>电话添加页面点击首页添加电话弹出该页面，带有星号的选项必须进行填写，填写好信息后点击保存，将数据添加到数据库。功能实现代码：<tablewidth="42%"height="330"border="0"align="center"cellpadding="0&

17、quot;cellspacing="0"class="CContent"><tr><thclass="tablestyle_title">电话维护页面</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>删除信息选中要删除的信息，然后点击删除所选项，系统会自动弹出“你确定这样做吗？”点击确定删除所选中的信息。点击反回，取消操作。功能实现代码：</table><br><br><divalign="center"><inputtype="submit"name="Submit"value="删除所选电话"onClick="returnconfirm('您确定要这样操作吗？')">全选<inputtype="checkbox"name="checkbox2"value="CheckAll"onClick="mm()"></div></td