网页设计报告模板 - 图文

成都理工大学工程技术学院

网页设计实训报告

实训内容：网页设计与制作 指导老师：XXX

专业、班级：200X级计算机通信X班 姓名：XXX

设计时间：2011年11月18日

一.实训目的

1.掌握网页制作环境和网站建设步骤。

2. 掌握网页制作软件DreamWeaver的基本使用技能。 3.熟练掌握静态网页的设计与制造过程。 4.了解动态网页的设计与制作过程。

5.了解并逐步运用网页设计中的标识（logo）’视觉设计’色彩设计 版式构成等网页整体建设技术和方法。

6.练习在网站建设中多媒体技术的运用。 7.练习在DreamWeaver软件中使用插件。 8.编制网站建设说明书与课程设计总结。 9.通过实习培养团队协作精神。

10.培养文献查询能力 实习方案设计能力自助实验能力实习报告撰写能力。

二.实训内容

用dreamweaver，photoshop，flash等软件设计一个网页。

三．实训步骤

1．资料的搜集。 2．熟悉制作软件。 3．构建站点框架。

打开Dremweaver后第一步便是新建站点 4．设计主页。

5．实现网页间的链接，链接的过程其实很简单，主要是把要链接的文字选择在选择工具栏的链接按钮最后选择自己要链接的网页单击确定便可以了。 6．向静太网页插入动态效果。 （一）页面的设计方面

网页设计跟学习别的东西一样，也需要兴趣，所谓的兴趣也不是三分钟热度，是一种执著。学习网页设计需要耐心，如果没有耐心，就学不好网页设计，应为当你碰到一个问题时，如果不能立刻得到问题的答案，你可能需要很长时间去解决，我就碰到过一个问题，用了很长时间才解决。学习网页设计需要坚持，坚持不断的学习，因为设计网页的软件在不断的更新，因此我们要不断的学习。并且学习网页设计不要掉入技术的陷阱，如果你的网页设计技术一流，并且对软件的掌握程度已经达到一定水平，但是你设计的网页确不堪目睹，这是因为网页设计是介于平面设计和编程技术两者之间的\边缘科学.\不仅涉及到美学,心理学,平面构成,色彩搭配等平面设计的方面的知识,还涉及到html,javascript,css,asp,php等编程语言技术方面的知识.只有综合运用多种知识,才能设计出视听特效,动感十足,富于个性的web页面,才能全面展现互联网这一新型媒体的独特魅力和多维空间的超强功能.并且我认为网页设计应该

注重实用性，因为它是让人浏览的，是用户可以抚摸，可以评论，可以交互的。因此我提倡简单的美。

（二）网页视觉效果

视觉形象识别即我们通常所说的VI（VisualIdentity），与BI一起用于深化表现企业理念，同时也受到BI的影响。所谓视觉形象识别，就是指能够被目标客户通过视觉来认知与企业相关的一切事物，从最基础的企业标志、吉祥物、标准色到企业日常业务中的信纸、服装、名片等等，在将其系统化以后就形成了企业的视觉形象识别系统。视觉形象识别系统在整套CIS中处于最表层的位置，其中所有的设计都将与目标客户发生直接的接触。 （三）网页的整体布局和导航

网页的布局通常指的是网页的整体架构，说的通俗一点就是排版。如何突出最重要的内容，即让用户眼就看到这个网页所想要传达的信息。这一点至关重要。在大多数做的比较成功的网页中，一个共同的特点就是网页的整体架构十分的清晰明了，便于用户浏览，网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型

网页布局是主要考虑以下几点：

1、首先要考虑整个网页的长和宽，以及长度和宽度之间的比例。 2、其次就应该考虑导航条的设置了。

3、正文的框架设置（横向因素和纵向因素交错） （四）网页中文字、图像

图象我利用网上搜索和自己所学过的banner进行处理,这样做起来节约了很多时间。

四.实训过程

熟悉制作需要的三种软件：Potoshop、Macromedia Flash 8和Dreamweaver 制作全过程中都需要运用到三类软件，处理应用收集到的素材。

1.Photoshop

它不仅是必不可少图像处理软件，还能通过它设计页面布局、完成切片和图片优化工作、制作动画和翻转按钮、实现链接等效果。

图片处理： ⑴去污，例：

⑵图片截取合成，例：