web网站设计报告书

1、WE网站设计报告书 _学年第_J学期 设 计 题 目： Web网站设计报告 年 级 专 业： 姓 名 学 号： 所 在 学 院： 一、设计目的 2 二、设计题目 3 三、结构设计 3 四、技术分析 3 五、设计风格 7 一、设计目的 在In ternet飞速发展的今天，人们已经无法离开网络，互联网成为人们快速获取、发布和传递信 息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。因此网站建设在In ternet 应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的 重视。我们当代大学生更是离不开网络给我们带来的好处与便利但是，我们成天浏览的网站

2、网页到底 是如何制作的呢？我们已经学了 WE弦门课，就可以通过设计达到掌握网页设计、制作的技巧。 了解和熟悉网页设计的基础知识和实现技巧。根据题目的要求，给出网页设计方案，可以按要求， 利用合适图文素材设计制作符合要求的网页设计作品。 熟练掌握Photoshoto等软件的的操作和应用。增强动手实践能力，进一步加强自身综合素质。学会和 团队配合，逐渐培养做一个完整项目的能力。 二、设计题目 篮球球迷交流网 主要是篮球新闻、视频，还有交流帖子区，交易广告平台等。 三、结构设计 选定主题，确定题目之后，在做整个网站之前对网站进行需求分析。首先，做好需求调研。调研 方式主要是上网查阅资料，在图书馆里翻

3、阅相关书籍。 然后，调研结束之后对整个网站进行功能描述，并对网站进行总体规划，接着逐步细化。 我的设计主题是篮球球迷交流网，包括多个方面，框架为： 首先是首页，首页下是新闻、视频、论坛、比赛、交易，从分栏都可以回到首页。 首页主要分为新闻头条、热门话题区、热门比赛预告、靓图展示。 链接到新闻板块，则是各种与篮球有关的新闻；视频则是各种网友发布的片段，包括十佳球、比 赛集锦和采访视频等；论坛就是大家发贴的地方；比赛区里包括比赛赛程和球员排行榜（主要是 nba）;交易区则是球迷联系交易装备的平台，球迷可以发贴介绍自己的新品或二手篮球相关装备（篮 球、球鞋、球衣和护腕等），然后互相留下联系信息，之后

4、通过淘宝等交易，其实就是起到广告的作 用。 四、技术分析 WE我术主要分为客户端和服务器技术。 Web客户端设计技术主要包括：html语言、Java Applets、脚本程序、CSS DHTML插件技术以及 VRML技 术。 Web服务器端的开发技术也是由静态向动态逐渐发展、完善起来的。Web服务器技术主要包括服务器、 CGI、PHP ASP、Servlet 和 JSP技术。 基本的用得到的基础技术如下： （ 一 ） 建立布局 在这次的网页设计中用到大量的布局，所以怎么样建立布局是关键。Dreamweaver cs3 是大多数人 设计网页的称手兵器，也是众多入门者的捷径。特别是其在布局方面的出

5、色表现，更受青睐。大家都 知道，没有表格的帮助，很难组织出一个协调合理的页面。 1点击“ ALT+F6键，进入布局模式，插入布局表格。建立一个大概的布局。 2. 使用背景图片：选中该项，按浏览可以插入一幅准备好的图片作为表格的背景，因为图片是以平铺 的形式作为表格背景，所以表格大小和图片尺寸都要控制好。 二）网页中的图像 图像传输是 WW的真正魅力所在，它与文字相比具有显着的优点：一是直观，人眼观看图像时接受信 息的速度远远超过观看文字时接受信息的速度；二是能更清楚地表达细节内容。正是由于这些优点， 所以在进行网页设计时图像很受欢迎。如果网页做得像一幅风景画，浏览者一定会流连忘返（如果图 片很

6、大，效果会适得其反）。 图像文件的格式有几十种，如 GIF、JPEG、BMP、EPS、PCX、PNG、 FAS TGA TIFF、WM等，现在In ternet Explorer 和Netscape支持的、最常用的图像格式是 GIF、 JPEG和 BMP （1）在网页中插入图像 利用 Dreamweaver cs3 可以方便地在网页中插入图像，还可以设置图像边框、大小、和位置，并且可 以直接对图像进行编辑。在网页中加入图像的操作非常简单： 1. 新建一个空白网页，把光标定位在网页的开始位置。 2. 打开“工具”菜单，选择“图片”菜单项，在子菜单中选择“来自文件”菜单项，或者单击工具栏 中的图片

7、工具图标，弹出一个“图片”对话框。 3. 在此对话框中单击“浏览”按钮，出现一个“选择文件”对话框。 4. 在“选择文件”对话框的文件列表中选择某个图像文件，然后单击“确定”按钮，或直接双击该图 像文件，该图像即被加入到网页中。在网页中插入图像后我们就可以对图像的各种属性进行设置了。 （2）图像的各种属性设置 1. 选中所插入的图片，单击鼠标右键，弹出一个快捷菜单，在菜单中选择“图片属性”菜单项，出现 一个“图片属性”对话框 . 2. 打开“外观”选项卡。 （1）设定图像边框粗细：在“外观”选项卡的“布局”栏里可以根据需要定义图像的边框，也可以定义 边框值为“ 0”，即无边框。 （2）设置图像

8、环绕方式：一般情况下一幅图像只能与一行文字处在同一高度，但有时需要将图像和文字 分开，且两者互不影响。比如在网页左边插入一幅图像，要求右边的文字就像没有图像时可以多行输 入，这就要通过设置图像的环绕方式来实现。在网页中图像的环绕方式有两种： 左环绕：图像在左边，文本在图像的右边进行环绕。 右环绕：图像在右边，文本在图像的左边进行环绕。 在“外观”选项卡的“布局”栏中打开“对齐方式”下拉列表框，选择“左”选项，并单击“确定” 按钮，图像就被设置为左环绕方式，同样，如果选“右”，图像就被设置为右环绕方式。 (3) 编辑图像大小：在 Dreamweaver cs3 中，当在网页中加入一幅图像后，图像

9、大小默认设置为其原来 的大小，如果加入的图像太大或太小，或有其他特别需要，就得调整图像的大小。调整图像大小非常 简单灵活，只要你选中加入的图像，用鼠标左键拖动图像边框，可任意调整图像的宽度和高度直到达 到你满意的尺寸。 (4) 设置图像缩放比例：网页设计的一个重要原则就是网页的兼容性，对于不同的浏览器或者不同的分 辨率，不管是800X 600的窗口，还是1024 X 768的窗口，网页都要能正常的显示。设置图像缩放比例 就是将图像设置为大小可以按比例变化，与浏览器的大小成一固定比例，这样在不同大小的浏览器窗 口里图像都能正常的显示外观。设置图像缩放比例的步骤如下： 1. 选中网页中的图像，单击

10、鼠标右键，在弹出的快捷菜单里，选择“图像属性”菜单项，弹出一个 “图像属性”对话框 . 2. 在“大小”栏中选中“指定大小”复选框，同时选中“宽度”和“高度”下面的“百分比”单选按 钮，然后在“宽度”和“高度”栏里输入想显示的比例，单击“确定”完成设置。外还可以在“外 观”选项卡的“水平间距”和“垂直间距”栏里进行设置，水平间距是指图像与周围元素在水平方向 的间距，以象素为单位；垂直间距指图像与周围元素在垂直方向的间距。 (3) 怎样编辑网页中的图像 在通过 fhotoshop 等软件中，可以使用“图片”工具栏中的各种工具对网页中的图像进行编辑，编辑 功能主要有：图像旋转和翻转、剪裁、图像淡化

11、、凹凸效果等等。 另外，为了使图片更符合要求，我们还在 photoshop cs3 中对所用的图片进行了处理，使得图片看起 来更加精细美观，符合我们的主题要求。 (4) 使用背景图像 使用背景图像与使用背景色不同，使用背景色只将网页的背景用某种颜色填充，而使用背景图像则是 将网页的背景用图像平铺。这样做可以使制作的网页更美观好看。网页中使用背景图像的具体步骤如 下： 1. 新建一个空白网页。 2. 单击鼠标右键，弹出的快捷菜单里选“网页属性”，弹出“网页属性”对话框. 3. 开“背景”选项卡。 4. 在“背景”选项卡的“格式”栏中选中“背景图片”复选框，然后单击下面的“浏览”按钮，出现 一个“

12、选择背景图片”对话框。 5. 在“选择背景图像”对话框中单击“浏览文件”按钮，出现一个“选择文件”对话框。 6. 在“选择文件”对话框的文件列表中选择图像文件，单击“确定”按钮。 这样，所选图片将作为整个网页的背景，如果在第4 步时同时选中“水印”复选框，背景图片将显示 为特殊的水印效果，当网页滚动时，背景不动，只有网页内容滚动，产生一种透明层的效果，非常吸 引人。 （ 5）插入 flash 动画 关于 Flash 视频 使用 Dreamweaver 中的“插入 Flash 视频”命令，可将 Flash 视频内容插 入 Web 页面，而无需使用 Flash 创作工具。该命令可以插入 Flash

13、 组件；当您在浏览器中查看它 时，它显示所选择的 Flash 视频内容以及一组播放控件。 （6）设置鼠标经过图片，进行图片交互 再插入图片的下拉菜单中有一项是“鼠标经过”，点击这一项，会弹出一个对话框，在对话框中可以 设置鼠标经过前的图片和经过时的图片，选择“确定”即可。 （7）设置链接 选中图片或者文字，在下面的链接属性中输入所要连接到的地址，同时，下方的目标属性被激活，输 入 blank 设置成在新窗口中打开网页。我们设置了链接本站点的网页页面，同时也连接了外网，使得 大家访问页面时能够查询更多详细的信息，方便用户查询。 五、设计风格 学习网页设计需要耐心，如果没有耐心，就学不好网页设计，

14、应为当你碰到一个问题时，如果不 能立刻得到问题的答案，你可能需要很长时间去解决，我就碰到过一个问题，用了很长时间才解决。 页面设计 页面的设计风格，每个人的审美观都不同，所以中国、韩国和欧洲的风格完全不同，但是我发现简约 美，不管审美观怎么样不同，至少不会说他难看，而我本人也比较喜欢简单的风格，所以我选择了简 约风格的设计风格，不追求浮夸，只求简单实用，并且我认为网页设计应该注重实用性，因为它是让 人浏览的，是用户可以抚摸，可以评论，可以交互的。因此我提倡简单的美。 网页视觉效果 视觉形象识别即我们通常所说的 VI （ VisualIdentity ），所谓视觉形象识别，就是指能够被目标客户

15、通过视觉来认知与企业相关的一切事物，从最基础的企业标志、吉祥物、标准色到企业日常业务中的 信纸、服装、名片等等，而我对视觉的要求主要是色彩和视觉风格，色彩我选择主色调为红色和白 色，副色调为蓝色，贴图为各种篮球图片，主要体现出热情的感觉。 网页的整体布局和导航 网页的布局通常指的是网页的整体架构，说的通俗一点就是排版。如何突出最重要的内容，即让用户 第一眼就看到这个网页所想要传达的信息。这一点至关重要。在大多数做的比较成功的网页中，一个 共同的特点就是网页的整体架构十分的清晰明了，所以我的首页采用封面和 flash 型，便于用户浏览 和点连接；然后视频分栏我选择综合框架型；论坛和交易区都采用标题正文型，还带有上下的框架结 构。比赛分栏采用“国”字型。 首页内容要求精彩丰富，简洁明快。页面可爱清爽。首页主要是导航作用。首页制作时，时刻考 虑着网页的基本原则：统一，连贯，分割，对比及和谐的原则，内容统一，都是为了主题服务，一个 网站强调的就是一个整体，只有围绕一个统一的目标所做的