网站设计报告模板.docx
《网站设计报告模板.docx》由会员分享，可在线阅读，更多相关《网站设计报告模板.docx（7页珍藏版）》请在冰豆网上搜索。
网站设计报告模板
网站设计报告模板
篇一：
《网页设计》课程报告模板
《网页设计》课程报告
学号:
专业:
姓名:
题目:
设计时间:
电子信息与计算机工程系
20XX年11月
目录
一、设计目的...............................................................................................................3二、课程设计题目.......................................................................................................3三、课程设计要求.......................................................................................................3四、需求分析...............................................................................................................4五、技术分析...............................................................................................................5六、创意分析...............................................................................................................8七、制作过程及要点...................................................................................................9八、参考资料.............................................................................................................12九、设计总结.............................................................................................................12
一、设计目的
本课程的设计目的是通过实践使同学们经历Dreamweavercs3开发的全过程和受到一次综合训练，以便能较全面地理解、掌握和综合运用所学的知识。
结合具体的开发案例，理解并初步掌握运用Dreamweavercs3可视化开发工具进行网页开发的方法；了解网页设计制作过程。
通过设计达到掌握网页设计、制作的技巧。
了解和熟悉网页设计的基础知识和实现技巧。
根据题目的要求，给出网页设计方案，可以按要求，利用合适图文素材设计制作符合要求的网页设计作品。
熟练掌握Photoshopcs3、Dreamweavercs3等软件的的操作和应用。
增强动手实践能力，进一步加强自身综合素质。
二、课程设计题目
设计的题目是：
《XXXXX》
三、课程设计要求
1．课程设计要求一人一题，每题之间不得有雷同现象。
2．每个题目至少要有8个不同页面（不能利用模板生成），总页面不少于10个。
作品中必须有为索引页，作品中需包含flash动画、超链接、图片、声音等多媒体元素。
3．课程设计过程中，首先要进行项目调研分析、技术设计分析及页面布局。
4．设计结束时，每人须按题目分析设计的要求，上交所有的HTML文档和素材，将所有文件作压缩包，文件名按“学号+姓名+项目名称”来命名（将压缩文件在课堂上发给我或者在课程结课一周内发送至邮箱：
zt_project@，否则将视为放弃所修课程）。
5．作品内容必须要和课程设计报告中的项目内容要一致，设计报告要求在3500字以上，报告内容应有课程设计题目、需求分析、设计制作方案及关键制作技术等内容，必要时需要将效果图抓屏后进行插图。
课程设计报告要求用A4纸打印后与作品一同上交，无设计报告者不予评定成绩。
选定主题，确定题目之后，在做整个网站之前对网站进行需求分析。
首先，做好需求调研。
调研方式主要是上网查阅资料，在图书馆里翻阅相关书籍。
调研内容如下：
1、网站当前以及日后可能出现的功能需求。
2、客户对网站的性能（如访问速度）的要求和可靠性的要求。
3、确定网站维护的要求。
4、网站的实际运行环境。
5、网站页面总体风格以及美工效果。
6、主页面和次级页面数量等。
7、内容管理及录入任务的分配。
8、各种页面特殊效果及其数量（如flash等）。
9、项目完成时间及进度。
然后，调研结束之后对整个网站进行功能描述，并对网站进行总体规划，接着逐步细化。
例如：
（本内容为模板例文不得抄袭）选做的主题是旅游交通，并且选定题目为“玩转西安”，其目的是做一个简单的网站，介绍西安旅游的各个方面，提供一定的资讯信息，。
进行一番调研之后，该网站整体站功能结构图如下：
建立布局
在这次的网页设计中用到大量的布局，所以怎么样建立布局是关键。
Dreamweavercs3是大多数人设计网页的称手兵器，也是众多入门者的捷径。
特别是其在布局方面的出色表现，更受青睐。
大家都知道，没有表格的帮助，很难组织出一个协调合理的页面。
1.点击“ALT+F6”键，进入布局模式，插入布局表格。
建立一个大概的布局。
2.使用背景图片：
选中该项，按浏览可以插入一幅准备好的图片作为表格的背景，因为图片是以平铺的形式作为表格背景，所以表格大小和图片尺寸都要控制好。
（二）网页中的图像
图像传输是的真正魅力所在，它与文字相比具有显著的优点：
一是直观，人眼观看图像时接受信息的速度远远超过观看文字时接受信息的速度；二是能更清楚地表达细节内容。
正是由于这些优点，所以在进行网页设计时图像很受欢迎。
如果网页做得像一幅风景画，浏览者一定会流连忘返（如果图片很大，效果会适得其反）。
图像文件的格式有几十种，如GIF、JPEG、BMP、EPS、PCX、PNG、FAS、TGA、TIFF、WMF等，现在InternetExplorer和Netscape支持的、最常用的图像格式是GIF、JPEG和BMP。
（1）在网页中插入图像
利用Dreamweaver20XXcs3可以方便地在网页中插入图像，还可以设置图像边框、大小、和位置，并且可以直接对图像进行xx。
在网页中加入图像的操作非常简单：
1.新建一个空白网页，把光标定位在网页的开始位置。
2.打开“工具”菜单，选择“图片”菜单项，在子菜单中选择“来自文件”菜单项，或者单击工具栏中的图片工具图标，弹出一个“图片”对话框。
3.在此对话框中单击“浏览”按钮，出现一个“选择文件”对话框。
4.在“选择文件”对话框的文件列表中选择某个图像文件，然后单击“确定”按钮，或直接双击该图像文件，该图像即被加入到网页中。
在网页中插入图像后我们就可以对图像的各种属性进行设置了。
（2）图像的各种属性设置1.选中所插入的图片，单击鼠标右键，弹出一个快捷菜单，在菜单中选择“图片属性”菜单项，出现一个“图片属性”对话框.2.打开“外观”选项卡。
设定图像边框粗细：
在“外观”选项卡的“布局”栏里可以根据需要定义图像的边框，也可以定义边框值为“0”，即无边框。
设置图像环绕方式：
一般情况下一幅图像只能与一行文字处在同一高度，但有时需要将图像和文字分开，且两者互不影响。
比如在网页左边插入一幅图像，要求右边的文字就像没有图像时可以多行输入，这就要通过设置图像的环绕方式来实现。
在网页中图像的环绕方式有两种：
①左环绕：
图像在左边，文本在图像的右边进行环绕。
②右环绕：
图像在右边，文本在图像的左边进行环绕。
在“外观”选项卡的“布局”栏中打开“对齐方式”下拉列表框，选择“左”
篇二：
网页设计报告模板
成都理工大学工程技术学院
网页设计实训报告
实训内容：
网页设计与制作
指导老师：
XXX
专业、班级：
200X级计算机通信X班姓名：
XXX
设计时间：
20XX年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．向静太网页插入动态效果。
（一）页面的设计方面
网页设计跟学习别的东西一样，也需要兴趣，所谓的兴趣也不是三分钟热度，是一种执著。
xx页设计需要耐心，如果没有耐心，就学不好网页设计，应为当你碰到一个问题时，如果不能立刻得到问题的答案，你可能需要很长时间去解决，我就碰到过一个问题，用了很长时间才解决。
xx页设计需要坚持，坚持不断的学习，因为设计网页的软件在不断的更新，因此我们要不断的学习。
并且xx页设计不要掉入技术的陷阱，如果你的网页设计技术一流，并且对软件的掌握程度已经达到一定水平，但是你设计的网页确不堪目睹，这是因为网页设计是介于平面设计和编程技术两者之间的"边缘科学."不仅涉及到美学,心理学,平面构成,色彩搭配等平面设计的方面的知识,还涉及到html,javascript,css,asp,php等编程语言技术方面的知识.只有综合运用多种知识,才能设计出视听特效,动感十足,富于个性的web页面,才能全面展现互联网这一新型媒体的独特魅力和多维空间的超强功能.并且我认为网页设计应该
注重实用性，因为它是让人浏览的，是用户可以抚摸，可以评论，可以交互的。
因此我提倡简单的美。
（二）网页视觉效果
视觉形象识别即我们通常所说的VI（VisualIdentity），与BI一起用于深化表现企业理念，同时也受到BI的影响。
所谓视觉形象识别，就是指能够被目标客户通过视觉来认知与企业相关的一切事物，从最基础的企业标志、吉祥物、标准色到企业日常业务中的信纸、服装、名片等等，在将其系统化以后就形成了企业的视觉形象识别系统。
视觉形象识别系统在整套CIS中处于最表层的位置，其中所有的设计都将与目标客户发生直接的接触。
（三）网页的整体布局和导航
网页的布局通常指的是网页的整体架构，说的通俗一点就是排版。
如何突出最重要的内容，即让用户眼就看到这个网页所想要传达的信息。
这一点至关重要。
在大多数做的比较成功的网页中，一个共同的特点就是网页的整体架构十分的清晰明了，便于用户浏览，网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型
网页布局是主要考虑以下几点：
1、首先要考虑整个网页的长和宽，以及长度和宽度之间的比例。
2、其次就应该考虑导航条的设置了。
3、正文的框架设置（横向因素和纵向因素交错）
（四）网页中文字、图像图象我利用网上搜索和自己所学过的banner
进行处理,这样做起来节约了很多时间。
四.实训过程
熟悉制作需要的三种软件：
Potoshop、MacromediaFlash8和Dreamweaver
制作全过程中都需要运用到三类软件，处理应用收集到的素材。
它不仅是必不可少图像处理软件，还能通过它设计页面布局、完成切片和图片优化工作、制作动画和翻转按钮、实现链接等效果。
图片处理：
⑴去污，例：
⑵图片截取合成，例：
flash8
他是专门用来设计和制作交互式网页动画的工具，可以将音乐、图像、图形和视频等数字媒体元素集成到一起来制作绚丽动的网页动态效果。
例：
字体越现
篇三：
web网站设计报告书
WEB网站设计报告书
设计
年级
姓名
所在学年第1学期题目：
Web网站设计报告专业：
学号：
学院：
目录
一、设计目的................................................2
二、设计题目................................................3
三、结构设计................................................3
四、技术分析................................................3
五、设计风格................................................7
一、设计目的
在Internet飞速发展的今天，人们已经无法离开网络，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。
因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。
我们当代大学生更是离不开网络给我们带来的好
处与便利.但是,我们成天浏览的网站网页到底是如何制作的呢?
我们已经学了WEB这门课，就可以通过设计达到掌握网页设计、制作的技巧。
了解和熟悉网页设计的基础知识和实现技巧。
根据题目的要求，给出网页设计方案，可以按要求，利用合适图文素材设计制作符合要求的网页设计作品。
熟练掌握Photoshoto等软件的的操作和应用。
增强动手实践能力，进一步加强自身综合素质。
学会和团队配合，逐渐培养做一个完整项目的能力。
二、设计题目
《篮球球迷交流网》
主要是篮球新闻、视频，还有交流帖子区，交易广告平台等。
三、结构设计
选定主题，确定题目之后，在做整个网站之前对网站进行需求分析。
首先，做好需求调研。
调研方式主要是上网查阅资料，在图书馆里翻阅相关书籍。
然后，调研结束之后对整个网站进行功能描述，并对网站进行总体规划，接着逐步细化。
我的设计主题是篮球球迷交流网，包括多个方面，框架为：
首先是首页，首页下是新闻、视频、论坛、比赛、交易，从分栏都可以回到首页。
首页主要分为新闻头条、热门话题区、热门比赛预告、靓图展示。
链接到新闻板块，则是各种与篮球有关的新闻；视频则是各种网友发布的片段，包括十佳球、比赛集锦和采访视频等；论坛就是大家发贴的地方；比赛区里包括比赛赛程和球员排行榜（主要是nba）；交易区则是球迷联系交易装备的平台，球迷可以发贴介绍自己的新品或二手篮球相关装备（篮球、球鞋、球衣和护腕等），然后互相留下联系信息，之后通过淘宝等交易，其实就是起到广告的作用。
四、技术分析
WEB技术主要分为客户端和服务器技术。
Web客户端设计技术主要包括：
html语言、JavaApplets、脚本程序、CSS、DHTML、插件技术以及VRML技术。
Web服务器端的开发技术也是由静态向动态逐渐发展、完善起来的。
Web服务器技术主要包括服务器、CGI、PHP、ASP、、Servlet和JSP技术。
基本的用得到的基础技术如下：
建立布局
在这次的网页设计中用到大量的布局，所以怎么样建立布局是关键。
Dreamweavercs3是大多数人设计网页的称手兵器，也是众多入门者的捷径。
特别是其在布局方面的出色表现，更受青睐。
大家都知道，没有表格的帮助，很难组织出一个协调合理的页面。
1.点击“ALT+F6”键，进入布局模式，插入布局表格。
建立一个大概的布局。
2.使用背景图片：
选中该项，按浏览可以插入一幅准备好的图片作为表格的背景，因为图片是以平铺的形式作为表格背景，所以表格大小和图片尺寸都要控制好。
（二）网页中的图像
图像传输是的真正魅力所在，它与文字相比具有显著的优点：
一是直观，人眼观看图像时接受信息的速度远远超过观看文字时接受信息的速度；二是能更清楚地表达细节内容。
正是由于这些优点，所以在进行网页设计时图像很受欢迎。
如果网页做得像一幅风景画，浏览者一定会流连忘返（如果图片很大，效果会适得其反）。
图像文件的格式有几十种，如GIF、JPEG、BMP、EPS、PCX、PNG、FAS、TGA、TIFF、WMF等，现在InternetExplorer和Netscape支持的、最常用的图像格式是GIF、JPEG和BMP。
（1）在网页中插入图像
利用Dreamweavercs3可以方便地在网页中插入图像，还可以设置图像边框、大小、和位置，并且可以直接对图像进行xx。
在网页中加入图像的操作非常简单：
1.新建一个空白网页，把光标定位在网页的开始位置。
2.打开“工具”菜单，选择“图片”菜单项，在子菜单中选择“来自文件”菜单项，或者单击工具栏中的图片工具图标，弹出一个“图片”对话框。
3.在此对话框中单击“浏览”按钮，出现一个“选择文件”对话框。
4.在“选择文件”对话框的文件列表中选择某个图像文件，然后单击“确定”按钮，或直接双击该图像文件，该图像即被加入到网页中。
在网页中插入图像后我们就可以对图像的各种属性进行设置了。
（2）图像的各种属性设置
1.选中所插入的图片，单击鼠标右键，弹出一个快捷菜单，在菜单中选择“图片属性”菜单项，出现一个“图片属性”对话框.
2.打开“外观”选项卡。
设定图像边框粗细：
在“外观”选项卡的“布局”栏里可以根据需要定义图像的边框，也可以定义边框值为“0”，即无边框。
设置图像环绕方式：
一般情况下一幅图像只能与一行文字处在同一高度，但有时需要将图像和文字分开，且两者互不影响。
比如在网页左边插入一幅图像，要求右边的文字就像没有图像时可以多行输入，这就要通过设置图像的环绕方式来实现。
在网页中图像的环绕方式有两种：
①左环绕：
图像在左边，文本在图像的右边进行环绕。
②右环绕：
图像在右边，文本在图像的左边进行环绕。
在“外观”选项卡的“布局”栏中打开“对齐方式”下拉列表框，选择“左”选项，并单击“确定”按钮，图像就被设置为左环绕方式，同样，如果选“右”，图像就被设置为右环绕方式。
xx图像大小：
在Dreamweavercs3中，当在网页中加入一幅图像后，图像大小默认设置为其原来的大小，如果加入的图像太大或太小，或有其他特别需要，就得调整图像的大小。
调整图像大小非常简单灵活，只要你选中加入的图像，用鼠标左键拖动图像边框，可任意调整图像的宽度和高度直到达到你满意的尺寸。
设置图像缩放比例：
网页设计的一个重要原则就是网页的兼容性，对于不同的浏览器或者不同的分辨率，不管是800×600的窗口，还是1024×768的窗口，网页都要能正常的显示。
设置图像缩放比例就是将图像设置为大小可以按比例变化，与浏览器的大小成一固定比例，这样在不同大小的浏览器窗口里图像都能正常的显示外观。
设置图像缩放比例的步骤如下：
1.选中网页中的图像，单击鼠标右键，在弹出的快捷菜单里，选择“图像属性”菜单项，弹出一个“图像属性”对话框.
升级会员 