网页设计DREAMWEAVER课程设计.docx

网页设计DREAMWEAVER课程设计.docx

《网页设计DREAMWEAVER课程设计.docx》由会员分享，可在线阅读，更多相关《网页设计DREAMWEAVER课程设计.docx（14页珍藏版）》请在冰豆网上搜索。

网页设计DREAMWEAVER课程设计

目录

一、设计题目1

二、设计性质、目的和任务1

三、设计内容1

四、网站设计与制作过程2

1、题目选择2

2、网站总体规划2

3、网站功能结构图3

4、首页制作3

1）logo制作3

2）导航制作3

5、一级网页分析4

1、首页4

2、系部概况8

3、专业介绍9

4、专业建设9

5、课程建设10

6、科研活动11

7、学期工作11

6、在所有网页中使用的功能12

五、网站的测试13

六、网站改进意见13

七、设计总结13

参考文献14

网页设计（DREAMWEAVER）课程设计

一、设计题目

榆树市延河天丰制米有限公司（企业网站）

二、设计性质、目的和任务

1、设计性质

课程设计是完成教学计划实现专业培养目标的一个重要的教学环节；是教学计划中综合性较强的实践性教学环节，它对提高学生综合运用专业知识分析和解决实际问题的能力，及培养学生的严肃认真的科学态度、严谨求实的工作作风和处理问题的能力等方面具有重要的意义，通过课程设计促进学生智能结构的形成和综合素质的提高。

2、设计目的

通过本次课程设计，使学生进一步巩固和掌握Dreamweaver的基本操作，并能将所学知识应用到实践中，为后续动态网页的制作打下基础。

3、设计任务

（1）熟练掌握网页设计的基础知识和静态网页设计的基本方法；

（2）掌握网页设计软件Dreamweaver的基本操作；

（3）掌握网页文本和图像的编辑技能；

（4）掌握运用表格、层、框架进行网页布局的方法；

（5）掌握模板与库、超级链接、表单等技术的使用；

（6）掌握CSS样式表的应用和行为面板的使用

（7）熟悉使用Dreamweaver软件连接数据库以实现动态网页的制作方法

三、设计内容

1、网站首页与二级页面的布局

2、网站站标设计、导航栏的设计

3、网页中图文混合排版的效果应用

4、通过CSS样式对网站进行整体格式控制

5、模板和库在网页中的应用

6、网页中鼠标经过图像效果的使用

7、网页中项目列表或编号列表的使用

8、网页中多种超链接设置的使用

9、网页中插入声音文件或背景音乐

10、网页中其它特殊效果的加入

四、网站设计与制作过程

1、题目选择

本网站是介绍“信息工程系”的系部网站。

本网站相当于系部的网络名片，不但对系部的形象是一个良好的宣传，同时可以使学生更加深刻的了解信息工程系，也可以通过网络直接了解系部的最新动态，学习内容，系部可以利用网站来进行宣传、新闻公告的发布、学期工作的安排等等。

系部网站的作用就是为展现系部形象，加强对系部了解，完善网络业务，还可以与其他高校学生之间的联系。

2、网站总体规划

本网站具有大气的风格色彩，有图文的混合排版、同时网页布局按要求体现了不同布局（表格布局、层布局）、设计站标等大量运用了Potoshop和Dreamweaver的知识。

二级页的布局模式以模板、表格和层布局布局为主，很整齐。

网站具有二级标题及网页，足够丰富。

主要分为首页、系部概况、专业介绍、专业建设、课程建设、科研活动、学期工作，还在首页加了背景音乐，总体来讲网站主要功能是能够满足“信息工程系”对外的一切介绍和公布内容，同时也能满足网友对“辽源职业技术学院-信息工程系”深入的了解。

3、网站功能结构图

4、首页制作

1）logo制作

Logo说明：

logo是由三不分组成的，左边是辽源职业技术学院的校徽，右面上部是信息工程系，下面是对应文字的英文。

图1

2）导航制作

为了实现多元化的目的我采用了横排导航位于整个网页的顶部，便于浏览者进行操作，为了区分所在浏览业的位置，应用了变色的导航效果，如图：

图2

5、一级网页分析

1、首页

设计分析：

我的网站是一个系部网站，作为一个系部网站，尤其是信息工程系的系部网站，其功能一定要全面，要突出信息化，多元化的特点要能充分体现出系部的特点，特长等等所以我用了轮换图片制作。

（1）网站的整体效果。

图3

（2）网页中导航栏中间的滚动图片。

图4

图5

（3）网页中图文混合排版的实现

图6

（4）布局方面设计用到了表格和层两种，网页是以一种随意布局的格式，所以用到的更多的是层布局。

使用了CSS样式调整文字格式，让文字更有特点、整齐、一致。

图7

（5）图像轮换图片新闻：

设置方法：

通过软件flash设置好图像的大小，来制作一个可以轮换的flash动画保存，然后回到dreamweaver选择插入-媒体-swf（或者快捷键ctrl+alt+f）

轮换图片展示1：

图8

轮换图片展示2：

图9

（6）网页中要有项目列表或编号列表的实现

图10

（7）网页中文字滚动的实现。

图11

图12

2、系部概况

设计分析：

本页用大量文字和图片介绍了“信息工程系”的系部简介、发展现状、系部教师等。

图13

3、专业介绍

设计分析：

本页用大量的图片展现了信息工程系的所有专业，让学生能耳目一新的阅览系部的专业。

图14

4、专业建设

设计分析：

本页运用网页中图文混合排版的功能，向用户提供了系部的专业建设、专业方向等。

图15

5、课程建设

设计分析：

本页提供了系部主要的课程建设，方便学生能及时准确的对所学专业的了解。

还提供了专业就业方向。

让学生能更多的了解今后的工作去向。

图16

6、科研活动

设计分析：

本页介绍了系部组织的活动，丰富学生的学习生活，加强同学之间的交流。

图17

7、学期工作

设计分析：

本页介绍了系部的学期工作的具体安排与动向，计划等等

6、在所有网页中使用的功能

（1）随着首页的打开还可以听到音乐，我运用代码在首页插入了一首背景音乐。

（2）图片轮换，应用java脚本进行编辑设计。

效果如下：

效果

（一）

效果

（二）

五、网站的测试

出现问题及解决方法

1、做的轮换图片在网页中不能显示

解决方法：

在做网页图片轮换的效果时常常会遇到图片无发显示，其原因有二。

一是、编辑的代码出现错误，二是图片的路径无代码中的不相符。

2、在网站中应用层是，在其他显示器运行网页时层的位置会移动

解决方法：

目前暂无好的解决方法。

3、每个页的导航位置不一样

解决方法：

复制导航和所在层的所有代码，在其他页面中粘贴。

这样就能固定层的位置。

六、网站改进意见

由于时间的关系网站内部的功能性不够完善，框架结构单一，大体上给人感觉太简单。

首页导航没能用导航条做，以后要好好改进。

因为这次程序设计我们只学习了静态的网页，没做动态的数据库，在以后的学习中，尽量把我的网站改成动态的。

七、设计总结

为期两周的网页设计就快结束了，在这短短的两周里，我学会了很多新的知识，更掌握了新的技能，让我觉得受益匪浅。

在这两周的时间里，我一心只做网页，做自己喜欢的风格的网页。

经历了一次充实而有愉快的程序设计，我学会了制作框架、给网页网页插入背景音乐、表格、框架……更深层次的掌握了它们的用法。

现在我心目中的网页也已经大体竣工，我感到很开心，经过这两周的不断探索，我喜欢上了这门课程，感觉很有意思。

或许程序设计的结束代表一段新生活的开始，但是我认为它不但是一门课，需要我们去掌握，同时还可以锻炼我们的逻辑思维能力和思维的严密性，还有就是在制作网页的过程中，更需要有不错的艺术审美观，这样，你做出的网页才会赏心悦目，让人眼前一亮，也就是从此刻起，我决心好好钻研这门课，力求这方面的技能达到顶级。

虽然网页已经完成，可这并不是一件轻而易举的事情，在此过程中我遇到了许多以前不曾遇到的问题，多的情况都是自己解决，万不得已之际，我会主动问老师和同学，直到弄懂为止！

这短短的两周让我更加清楚地明白老师平日里的良苦用心，也更加清楚地明白了自己以后应该怎样去做事。

参考文献

[1]《DreamweaverCS4入门与进阶》清华大学出版社

[2]参考网址：

[3]《网页设计与制作软件Dreamweaver基础》电子工业出版社2009年8月出版

[4]《网页设计基础与应用第一项课堂实训》吉林电子出版社2010年9月出版