网页设计与制作报告实用3篇

【导言】此例“网页设计与制作报告实用3篇”的文档资料由阿拉题库网友为您分享整理，以供您学习参考之用，希望这篇资料对您有所帮助，喜欢就复制下载支持吧！

网页设计报告1

一、本课题的目的和意义：

随着互联网技术的迅速发展网络已逐渐深入人心，更是成为继报刊、电视、广播等传统媒体之后而迅速兴起的一新的传媒介质，网络宣传已成为众多宣传手段的重中之重，各种各样的网站也就应运而生。为宣传企业而制作的公司网站、可进行网上购物的电子商务网站、能及时了解到天下事的新闻网站、方便学习的教育网站，充斥着我们的视野，满足着我们的需要。网站的规划与建设，已悄然被许多人摆到了首要的位置上。

当今的人们，如果依然依靠传统的方式展示自己已经不能满足现在人们的需要，所以做一个网站就成为人们一件十分有意义并有兴趣去做的事情。利用企业网站我们可以让全国，甚至全世界的人们有机会知道自己的公司。

二、本课题研究的难点

规划并建设好一个企业网站，并不是一件容易的事。首先，规划好这个网站就不容易。因为是企业网站，所以要求要比其它类型的网站更加独具匠心，有独特的眼光。这就规划者有了更高的要求。首先，要根据自己的要求网站的风格布局、色彩搭配和大体轮廓，并确立网站的栏目、内容。其次，网站制作者将要根据前一点安排整个页面文字图片的布局，这就要求设计者对网页制作具有相当的水平，美工、排版能力要强。再者，企业网站需要实现的动态及时更新等功能要求网站制作程序员有良好的编程基础，在网络编程语言ASP、PHP、JSP或ASP。NET等中选择来进行网站管理后台的编写并与前台挂钩并通过更新数据库来实现网站的更新。当然，选择的编程语言也要与网站服务器平台所支持的技术相符合。这就要求在配置服务器或是购买虚拟主机时根据需要来进行配置或选择。ZUI后，网站安全性也是一个重中之重，在如今黑客当行、病毒当道的互联时空，网站的安全犹为重要。

三、本课题研究要解决的问题

规划并建设好一个令人耳目一新的企业网站，并不是一件容易的事。首先，规划好这个网站就不容易。这要求网站规划者熟悉企业的情况，并确立网站的栏目、内容。其次，网站制作者将要根据网站的规划书来确定网站的风格、布局、色彩搭配等，这就要求设计者对网页制作具有相当的水平，美工、排版能力要强。再者，企业网站需要实现的动态及时更新等功能要求网站制作程序员有良好的编程基础，在网络编程语言ASP、PHP、JSP或ASP。NET等中选择来进行网站管理后台的编写并与前台挂钩并通过更新数据库来实现网站的更新。当然，选择的编程语言也要与网站服务器平台所支持的技术相符合。这就要求在配置服务器或是购买虚拟主机时根据需要来进行配置或选择。ZUI后，网站安全性也是一个重中之重，在如今黑客当行、病毒当道的互联时空，网站的安全犹为重要，否则，功亏一篑！这就要求配置服务器或选择虚拟主机时的谨慎以及编写网站管理后台的注意。

四、本课题研究的目标及内容

1、本课题研究的目标是：建立一个具有特色的企业网站。

课题的内容是：在这个课题中，主要是用于公司相关信息的介绍，以及相关的产品内容的`介绍。方便他人的了解。它的内容主要包括对网站前台的设计及制作，包括企业网站的logo设计，布局的设计，网站页面的制作、片头动画及页面动画的设计制作、注册登陆系统以及各链接和相关技术的开发等。在这里，我将以制作某企业网站为例，具体阐述个人网站的制作过程。

制作网站过程：

1、网页美工

用photoshop CS制作页面效果图片，搭配好颜色，设计好版式，这样做的目的是为了让网站的页面更具有整体性和美观性，色调搭配及版面的设计都可以通过photoshop CS这个强大的图片处理软件来完成，这样设计出来的网页不论是从美工还是从版式上都是一流的。

2、导航条和文字图片的布局

用DreamweaverMX和FlashMX设计制作导航条，同时对文字图片进行调整。具体的就是文字的大小、字体以及图片的格式、大小进行调整。

3、超链接其动态设计

用用DreamveaverMX建立超链接使整个网站能够自由地相互关联，使浏览者能够方便地到达所需要的网页。另外，本网站还可以进行注册，利用ASP与Access相连使网站变为动态网站。

五、课题研究进展计划

1第一周到四周完成毕业设计开题报告

2第五周调研，准备各种参考资料、充实所需知识

3第六周查阅相关书籍资料，提出可行性的设计方案

4第七到十六周具体设计与制作工作

5第十七周文档的生成与整理，指导教师修改

6第十八周毕业设计论文的相关资料的搜集

7第十九周完成毕业论文撰写

六、参考文献

《网页设计典型技巧》 Time创作室人民邮电出版社20xx年10月

《ASP动态网站开发毕刘瑞斯机械工业出版社20xx年3月

《ASP+Access组建动态网站实例精讲》龙马工作室人民邮电出版社20xx年6月

网页设计实验报告实验心得2

一 设计目的

本课程的设计目的是通过实践使同学们经历Dreamweaver cs3开发的全过程和受到一次综合训练，以便能较全面地理解、掌握和综合运用所学的知识。结合具体的开发案例，理解并初步掌握运用Dreamweaver cs3可视化开发工具进行网页开发的方法；了解网页设计制作过程

通过设计达到掌握网页设计、制作的技巧。 了解和熟悉网页设计的基础知识和实现技巧。

根据题目的要求，给出网页设计方案，可以按要求，利用合适图文素材设计制作符合要求的网页设计作品。

熟练掌握Photoshop cs3、Dreamweaver cs3等软件的的操作和应用。 增强动手实践能力，进一步加强自身综合素质。 学会和团队配合，逐渐培养做一个完整项目的能力。

二、课程设计题目

玩转西安

三、课程设计要求

1.课程设计要求一组一题，每题之间不得有雷同现象。

2.每个题目至少要 有15个不同页面(不能利用模板生成)，总页面不少于30个。作品中必须有为索引页，作品中需包含flash动画、超链接、图片、声音等多媒体元素。

3.课程设计过程中，首先要进行项目调研分析、技术设计分析及页面布局。 4.设计结束时，每人须按题目分析设计的要求，上交所有的HTML文档和素材，将所有文件只作为压缩包，文件名按“学号+姓名+项目名称”来命名。

5.作品内容必须要和课程设计报告中的项目内容要一致，设计报告要求在5000字左右，报告内容应有课程设计题目、需求分析、设计制作方案及关键制作技术等内容，必要处需要将效果图抓屏后进行插图。课程设计报告要求用A4纸打印后与作品一同上交，无设计报告者不予评定成绩。

选定主题，确定题目之后，在做整个网站之前对网站进行需求分析。首先，做好需求调研。调研方式主要是上网查阅资料，在图书馆里翻阅相关书籍。调研内容如下：

1、 网站当前以及日后可能出现的功能需求。

2、 客户对网站的性能(如访问速度)的要求和可靠性的要求。 3、 确定网站维护的要求。 4、 网站的实际运行环境。

5、 网站页面总体风格以及美工效果。 6、 主页面和次级页面数量等。 7、 内容管理及录入任务的分配。

8、 各种页面特殊效果及其数量(如flash等)。 9、 项目完成时间及进度。

然后，调研结束之后对整个网站进行功能描述，并对网站进行总体规划，接着逐步细化。

我们选做的主题是旅游交通，并且选定题目为“玩转西安”，其目的是做一个简单的网站，介绍西安旅游的各个方面，提供一定的资讯信息，。进行一番调研之后，该网站整体站功能结构图如下：

(一)建立布局

在这次的网页设计中用到大量的布局，所以怎么样建立布局是关键。Dreamweaver cs3是大多数人设计网页的称手兵器，也是众多入门者的捷径。特别是其在布局方面的出色表现，更受青睐。大家都知道，没有表格的帮助，很难组织出一个协调合理的页面。

1.点击“ALT+F6”键，进入布局模式，插入布局表格。建立一个大概的布局。 2.使用背景图片：选中该项，按浏览可以插入一幅准备好的图片作为表格的背景，因为图片是以平铺的形式作为表格背景，所以表格大小和图片尺寸都要控制好。

(二)网页中的图像

图像传输是WWW的真正魅力所在，它与文字相比具有显著的优点：一是直观，人眼观看图像时接受信息的速度远远超过观看文字时接受信息的速度；二是能更清楚地表达细节内容。正是由于这些优点，所以在进行网页设计时图像很受欢迎。如果网页做得像一幅风景画，浏览者一定会流连忘返(如果图片很大，效果会适得其反)。 图像文件的格式有几十种，如GIF、JPEG、BMP、EPS、PCX、PNG、FAS、TGA、TIFF、WMF等，现在Internet Explorer和Netscape支持的、最常用的图像格式是GIF、JPEG和BMP。 (1)在网页中插入图像

利用Dreamweaver cs3可以方便地在网页中插入图像，还可以设置图像边框、大小、和位置，并且可以直接对图像进行编辑。在网页中加入图像的操作非常简单：

1.新建一个空白网页，把光标定位在网页的开始位置。

2.打开“工具”菜单，选择“图片”菜单项，在子菜单中选择“来自文件”菜单项，或者单击工具栏中的图片工具图标，弹出一个“图片”对话框。 3.在此对话框中单击“浏览”按钮，出现一个“选择文件”对话框。 4.在“选择文件”对话框的文件列表中选择某个图像文件，然后单击“确定”按钮，或直接双击该图像文件，该图像即被加入到网页中。在网页中插入图像后我们就可以对图像的各种属性进行设置了。 (2)图像的各种属性设置 1.选中所插入的图片，单击鼠标右键，弹出一个快捷菜单，在菜单中选择“图片属性”菜单项，出现一个“图片属性”对话框。 2.打开“外观”选项卡。

(1)设定图像边框粗细：在“外观”选项卡的“布局”栏里可以根据需要定义图像的边框，也可以定义边框值为“0”，即无边框。

(2)设置图像环绕方式：一般情况下一幅图像只能与一行文字处在同一高度，但有时需要将图像和文字分开，且两者互不影响。比如在网页左边插入一幅图像，要求右边的文字就像没有图像时可以多行输入，这就要通过设置图像的环绕方式来实现。在网页中图像的环绕方式有两种：

①左环绕：图像在左边，文本在图像的右边进行环绕。 ②右环绕：图像在右边，文本在图像的左边进行环绕。

在“外观”选项卡的“布局”栏中打开“对齐方式”下拉列表框，选择“左”

网页设计报告3

静态网页设计专业实训总结报告提要：

网页设计实训就快结束了，在这短短的两周里，我学会了很多新的知识，更掌握了新的技能，让我觉得受益匪浅。在实训时，有空闲就会想到学校里青葱岁月，简单流畅，无忧无虑。

插入apdiv标签，插入图片，创建超链接，设置段落

作品展示

图一：中秋送祝福

项目2

项目介绍

有铁血战鹰的的图片素材及相关资料，对铁血战鹰进行描述，创建“铁血战鹰网页”

关键技术

应用表格布局，插入横线对网页进行美化

作品展示

图二：铁血战鹰

项目3

项目介绍

现有自然写真的图片，要求自然写真的图片在鼠标经过时换成别的图片，点下导航栏的标题时转向别的网页，制作静态网页，网页名称为自然写真。

关键技术应用

练习头标题的应用，超链接的创建，flash的插入，导航栏的创建。

作品展示

图三：自然写真

3．实训过程总结

实训收获

这个阶段的实训我们主要是练习网页制作及网站发布的各种知识。近些年随着计算机的广泛应用，Internet已经成为人们获得信息不可或缺的媒介，特别是Internet的普及和发展，网络已经成为了不可或缺的通信手段。无论是最新的新闻信息、新产品的出台、新游戏的发布、最新的动态，包括等候就业人才的个人简历，我们都是可以通过网络来获得。但是什么为这提供平台的呢。我们又是通过什么来获取这些信息的呢―网页。由于人们使用网络的频繁，网页作为上网的主要依托就变得非常的重要。网页讲究的是排版布局，其功能主要就是提供一种形式给每个上网者，让他们能够了解网站提供的信息。网页设计直接面对的是大量的用户，随时都会反馈回来对网页的批评建议等，可以根据实际情况进行修改，这样做可以使使用者用起来更加的方便。

Dreamweaver工具为我们实现这些提供了便利，下面我将网页制作和网站发布的知识总结如下：

（1）网页制作的前期工作是搜集大量的素材，我们的网页只有是实用的才会是大众喜欢的，搜集素材以充实我们的'网页。当然我们也应该在此时定下网站的方向是什么，剩下的就是靠Dreamweaver进行编辑；

（2）网页的版式设计，版式设计时我们应该有重点，把重要的内容新闻放在醒目的位置上。规划各元素在网页中的位置关系和表现方法，合理安排图像、文本等元素，使网页布局合理、美观大方；

（3）文本编写，我们的网页中需要大量的文字材料，这就要在网页编辑器中用HTML语言中的标签编写。也可以利用网页编辑工具的“所见即所得”功能，直接写入文字。在浏览器中运行时出现冗余代码时返回代码页面重新进行查看修改；

（4）处理网页之间的关联，这主要是建立合理、高效的网页导航系统；

（5）网页发布过程，主要是将建设好的网页上传到服务器中供用户浏览。

存在的问题及解决思路

（1）在Dreamweaver基础方面：制作网页时如何实现网页不跳转就可以出现新的内容，实现页面内的链接；用代码编写网页上的按钮，实现按钮的各种功能，如刷新，重置，确定操作。Css样式表的概念模糊。

（2）网站风格方面：一个网站的各个页面之间风格应该是统一的，只有围绕一个风格才会成功。

（3）网站的内容方面：在制作网站时内容之间应该是相关的，在制作时我们不能追求面面俱到，只能做到精益求精。杂乱无章的网站是不会有大的发展的。

4．结束语

网页设计实训就快结束了，在这短短的两周里，我学会了很多新的知识，更掌握了新的技能，让我觉得受益匪浅。在实训时，有空闲就会想到学校里青葱岁月，简单流畅，无忧无虑，回想各位老师的授课，孜孜不倦，学校的生活固然是快乐，但是学校的实训课程真的很重要，因为它能让我们这些在校学生接触到社会的发展，让我们有时间岗位环境，顺利得从单纯的校园生活感到复杂社会生活的不同。在这一周的时间里，我一心只做网页，做自己喜欢的风格的网页。经历了一次充实而有愉快的实训，我学会了制作框架、使用锚点、给网页网页插入背景音乐、表格、视频、flash、导航条等更深层次的掌握了它们的用法，现在我心目中的网页也已经大体竣工，我感到很开心，经过这两的不断探索，我喜欢上了这门课程，感觉很有意思。或许实训的结束代表一段新生活的开始，但是我认为它不但是一门课，需要我们去掌握，同时还可以锻炼我们的逻辑思维能力和思维的严密性，还有就是在制作网页的过程中，更需要有不错的艺术审美观，这样，你做出的网页才会赏心悦目〖〗，让人眼前一亮，也就是从此刻起，我决心好好钻研这门课，力求这方面的技能达到顶级。虽然网页已经完成，可这并不是一件轻而易举的事情，在此过程中遇到了许多以前不曾遇到的问题，多的情况都是自己解决，万不得已之际，我会主动问老师和同学，直到弄懂为止！让我更加清楚地明白老师平日里的良苦用心，也更加清楚地明白了自己以后应该怎样去做事。