web网站设计方案报告书.doc

WEB 网站设计汇报书

年第 1 学期

设 计 题 目： Web网站设计汇报
年 级 专 业：
姓 名 学 号：
所 在 学 院：

目 录

一、设计目标 2

二、设计题目 3

三、结构设计 3

四、技术分析 3

五、设计风格 7

一、 设计目标
在Internet飞速发展今天，大家已经无法离开网络，互联网成为大家快速获取、公布和传输信息关键渠道，它在大家政治、经济、生活等各个方面发挥着关键作用。所以网站建设在Internet应用上地位显而易见，它已成为政府、企机关信息化建设中关键组成部分，从而倍受大家重视。我们现代大学生更是离不开网络给我们带来好处和便利.不过,我们整天浏览网站网页到底是怎样制作呢?我们已经学了WEB这门课，就能够经过设计达成掌握网页设计、制作技巧。
了解和熟悉网页设计基础知识和实现技巧。依据题目标要求，给出网页设计方案，能够按要求，利用适宜图文素材设计制作符合要求网页设计作品。
熟练掌握Photoshoto等软件操作和应用。增强动手实践能力，深入加强本身综合素质。学会和团体配合，逐步培养做一个完整项目标能力。

二、 设计题目
《篮球球迷交流网》
关键是篮球新闻、视频，还有交流帖子区，交易广告平台等。
三、 结构设计
选定专题，确定题目以后，在做整个网站之前对网站进行需求分析。首先，做好需求调研。调研方法关键是上网查阅资料，在图书馆里翻阅相关书籍。
然后，调研结束以后对整个网站进行功效描述，并对网站进行总体计划，接着逐步细化。
我设计专题是篮球球迷交流网，包含多个方面，框架为：
首先是首页，首页下是新闻、视频、论坛、比赛、交易，从分栏全部能够回到首页。
首页关键分为新闻头条、热门话题区、热门比赛预告、靓图展示。
链接到新闻板块，则是多种和篮球相关新闻；视频则是多种网友公布片段，包含十佳球、比赛集锦和采访视频等；论坛就是大家发贴地方；比赛区里包含比赛赛程和球员排行榜（关键是nba）；交易区则是球迷联络交易装备平台，球迷能够发贴介绍自己新品或二手篮球相关装备（篮球、球鞋、球衣和护腕等），然后相互留下联络信息，以后经过淘宝等交易，其实就是起到广告作用。

四、 技术分析

WEB技术关键分为用户端和服务器技术。
Web用户端设计技术关键包含：html语言、Java Applets、脚本程序、CSS、DHTML、插件技术和VRML技术。
Web服务器端开发技术也是由静态向动态逐步发展、完善起来。Web服务器技术关键包含服务器、CGI、PHP、ASP、ASP.NET、Servlet和JSP技术。
基础用得到基础技术以下：
(一)建立布局
在这次网页设计中用到大量布局，所以怎么样建立布局是关键。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)编辑图像大小：在Dreamweaver cs3中，当在网页中加入一幅图像后，图像大小默认设置为其原来大小，假如加入图像太大或太小，或有其它尤其需要，就得调整图像大小。调整图像大小很简单灵活，只要你选中加入图像，用鼠标左键拖动图像边框，可任意调整图像宽度和高度直抵达成你满意尺寸。
(4)设置图像缩放百分比：网页设计一个关键标准就是网页兼容性，对于不一样浏览器或不一样分辨率，不管是800×600窗口，还是1024×768窗口，网页全部要能正常显示。设置图像缩放百分比就是将图像设置为大小能够按百分比改变，和浏览器大小成一固定百分比，这么在不一样大小浏览器窗口里图像全部能正常显示外观。设置图像缩放百分比步骤以下：
1.选中网页中图像，单击鼠标右键，在弹出快捷菜单里，选择“图像属性”菜单项，弹出一个“图像属性”对话框.
2.在“大小”栏中选中“指定大小”复选框，同时选中“宽度”和“高度”下面“百分比”单选按钮，然后在“宽度”和“高度”栏里输入想显示百分比，单击“确定”完成设置。外还能够在“外观”选项卡“水平间距”和“垂直间距”栏里进行设置，水平间距是指图像和周围元素在水平方向间距，以象素为单位；垂直间距指图像和周围元素在垂直方向间距。
（3）怎样编辑网页中图像
在经过fhotoshop等软件中，能够使用“图片”工具栏中多种工具对网页中图像进行编辑，编辑功效关键有：图像旋转和翻转、剪裁、图像淡化、凹凸效果等等。
另外，为了使图片更符合要求，我们还在photoshop cs3中对所用图片进行了处理，使得图片看起来愈加精细美观，符合我们专题要求。
（4）使用背景图像
使用背景图像和使用背景色不一样，使用背景色只将网页背景用某种颜色填充，而使用背景图像则是将网页背景用图像平铺。这么做能够使制作网页更美观好看。网页中使用背景图像具体步骤以下：
1.新建一个空白网页。
2.单击鼠标右键，弹出快捷菜单里选“网页属性”，弹出“网页属性”对话框.
3.开“背景”选项卡。
4.在“背景”选项卡“格式”栏中选中“背景图片”复选框，然后单击下面“浏览”按钮，出现一个“选择背景图片”对话框。
5.在“选择背景图像”对话框中单击“浏览文件”按钮，出现一个“选择文件”对话框。
6.在“选择文件”对话框文件列表中选择图像文件，单击“确定”按钮。
这么，所选图片将作为整个网页背景，假如在第4步时同时选中“水印”复选框，背景图片将显示为特殊水印效果，当网页滚动时，背景不动，只有网页内容滚动，产生一个透明层效果，很吸引人。
（5）插入flash动画
相关 Flash 视频 使用 Dreamweaver 中“插入 Flash 视频”命令，可将 Flash 视频内容插入 Web 页面，而无需使用 Flash 创作工具。该命令能够插入 Flash 组件；当您在浏览器中查看它时，它显示所选择 Flash 视频内容和一组播放控件。
（6）设置鼠标经过图片，进行图片交互
再插入图片下拉菜单中有一项是“鼠标经过”，点击这一项，会弹出一个对话框，在对话框中能够设置鼠标经过前图片和经过时图片，选择“确定”即可。
（7）设置链接
选中图片或文字，在下面链接属性中输入所要连接到地址，同时，下方目标属性被激活，输入blank设置成在新窗口中打开网页。我们设置了链接本站点网页页面，同时也连接了外网，使得大家访问页面时能够查询更多具体信息，方便用户查询。
五、 设计风格

学习网页设计需要耐心，假如没有耐心，就学不好网页设计，应为当你碰到一个问题时，假如不能立即得到问题答案，你可能需要很长时间去处理，我就碰到过一个问题，用了很长时间才处理。
页面设计
页面设计风格，每个人审美观全部不一样，所以中国、韩国和欧洲风格完全不一样，不过我发觉简约美，不管审美观怎么样不一样，最少不会说她难看，而我本人也比较喜爱简单风格，所以我选择了简约风格设计风格，不追求浮夸，只求简单实用，而且我认为网页设计应该重视实用性，因为它是让人浏览，是用户能够抚摩，能够评论，能够交互。所以我提倡简单美。
网页视觉效果
视觉形象识别即我们通常所说VI（VisualIdentity），所谓视觉形象识别，就是指能够被目标用户经过视觉来认知和企业相关一切事物，从最基础企业标志、吉祥物、标准色到企业日常业务中信纸、服装、名片等等，而我对视觉要求关键是色彩和视觉风格，色彩我选择主色调为红色和白色，副色调为蓝色，贴图为多种篮球图片，关键表现出热情感觉。
网页整体布局和导航
网页布局通常指是网页整体架构，说通俗一点就是排版。怎样突出最关键内容，即让用户第一眼就看到这个网页所想要传达信息。这一点至关关键。在大多数做比较成功网页中，一个共同特点就是网页整体架构十分清楚明了，所以我首页采取封面和flash型，便于用户浏览和点连接；然后视频分栏我选择综合框架型；论坛和交易区全部采取标题正文型，还带有上下框架结构。比赛分栏采取“国”字型。

首页内容要求出色丰富，简练明快。页面可爱清爽。首页关键是导航作用。首页制作时，时刻考虑着网页基础标准：统一，连贯，分割，对比及友好标准，内容统一，全部是为了专题服务，一个网站强调就是一个整体，只有围绕一个统一目标所做设计才是成功；连贯，页面之间关系连贯，统成一体；每版内容全部自成一体，颜色各异，便于浏览；整个网页有动有静，颜色不一样，形成对比，不呆板，富有生气；颜色各异，但又不一样之中又相同，浑然一体。使用方便:同第一个是相一致，满足使用者要求，网页做得越适合使用，就越显示出其功效美；页面用色协调，布局符合形式美要求: 布局有条理，充足利用美形式，是网页富有可欣赏性，提升级次。当然雅俗共赏是人人全部追求。同时将动态网页和静态网页结合起来。利用我们所学框架集，制作更完美页面。