web网站设计报告书

由五，修族4件技大专WE咧站设计报告书学年第二学期设计题目： Web网站设计报告年级专业：姓名学号：所在学院：一、设计目的 2二、设计题目 3三、结构设计 3四、技术分析 3五、设计风格 7一、 设计目的在 Internet飞速发展的今天，人们已经无法离开网络，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。因此网站建设在Internet 应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。 我们当代大学生更是离不开网络给我们带来的好处与便利.但是，我们成天浏览的网站网页到底是如何制作的呢？我们已经学了 WE睑门课,就可以通过设计达到掌握网页设计、制作的技巧。了解和熟悉网页设计的基础知识和实现技巧。根据题目的要求，给出网页设计方案，可以按要求，利用合适图文素材设计制作符合要求的网页设计作品。熟练掌握 Photoshoto 等软件的的操作和应用。增强动手实践能力，进一步加强自身综合素质。学会和团队配合，逐渐培养做一个完整项目的能力。二、 设计题目篮球球迷交流网主要是篮球新闻、视频，还有交流帖子区，交易广告平台等。三、 结构设计选定主题，确定题目之后，在做整个网站之前对网站进行需求分析。首先，做好需求调研。调研方式主要是上网查阅资料，在图书馆里翻阅相关书籍。然后，调研结束之后对整个网站进行功能描述，并对网站进行总体规划，接着逐步细化。我的设计主题是篮球球迷交流网，包括多个方面，框架为：首先是首页，首页下是新闻、视频、论坛、比赛、交易，从分栏都可以回到首页。首页主要分为新闻头条、热门话题区、热门比赛预告、靓图展示。链接到新闻板块，则是各种与篮球有关的新闻；视频则是各种网友发布的片段，包括十佳球、比赛集锦和采访视频等；论坛就是大家发贴的地方；比赛区里包括比赛赛程和球员排行榜（主要是nba）;交易区则是球迷联系交易装备的平台，球迷可以发贴介绍自己的新品或二手篮球相关装备（篮球、球鞋、球衣和护腕等），然后互相留下联系信息，之后通过淘宝等交易，其实就是起到广告的作用。技术分析WE鼓术主要分为客户端和服务器技术。Web户端设计技术主要包括：html语言、Java Applets、脚本程序、CSS DHTML插件技术以及VRM股术。Web服务器端的开发技术也是由静态向动态逐渐发展、完善起来的。Web服务器技术主要包括服务器、CGI、PHP ASR ASP.NET Servlet 和 JSP技术。基本的用得到的基础技术如下：（一）建立布局在这次的网页设计中用到大量的布局，所以怎么样建立布局是关键。 Dreamweaver cs3 是大多数人设计网页的称手兵器，也是众多入门者的捷径。特别是其在布局方面的出色表现，更受青睐。大家都知道，没有表格的帮助，很难组织出一个协调合理的页面。1 .点击“ ALT+F6键，进入布局模式，插入布局表格。建立一个大概的布局。2 . 使用背景图片：选中该项，按浏览可以插入一幅准备好的图片作为表格的背景，因为图片是以平铺的形式作为表格背景，所以表格大小和图片尺寸都要控制好。（二）网页中的图像图像传输是 WWWJ真正魅力所在，它与文字相比具有显著的优点：一是直观，人眼观看图像时接受信息的速度远远超过观看文字时接受信息的速度；二是能更清楚地表达细节内容。正是由于这些优点，所以在进行网页设计时图像很受欢迎。如果网页做得像一幅风景画，浏览者一定会流连忘返（如果图片很大，效果会适得其反）。 图像文件的格式有几十种，如 GIF、JPEG BMP EPS PCX PNG FAS TGA TIFF、WM噂，现在 Internet Explorer和Netscape支持的、最常用的图像格式是GIF、JPEG BMP（ 1 ）在网页中插入图像利用 Dreamweaver cs3 可以方便地在网页中插入图像，还可以设置图像边框、大小、和位置，并且可以直接对图像进行编辑。在网页中加入图像的操作非常简单：1. 新建一个空白网页，把光标定位在网页的开始位置。2. 打开“工具”菜单，选择“图片”菜单项，在子菜单中选择“来自文件”菜单项，或者单击工具栏中的图片工具图标，弹出一个“图片”对话框。3. 在此对话框中单击“浏览”按钮，出现一个“选择文件”对话框。4. 在“选择文件”对话框的文件列表中选择某个图像文件，然后单击“确定”按钮，或直接双击该图像文件，该图像即被加入到网页中。在网页中插入图像后我们就可以对图像的各种属性进行设置了。( 2 )图像的各种属性设置1 .选中所插入的图片，单击鼠标右键，弹出一个快捷菜单，在菜单中选择“图片属性”菜单项，出现一个“图片属性”对话框.2 . 打开“外观”选项卡。(1) 设定图像边框粗细：在“外观”选项卡的“布局”栏里可以根据需要定义图像的边框，也可以定义边框值为“ 0”，即无边框。(2) 设置图像环绕方式：一般情况下一幅图像只能与一行文字处在同一高度，但有时需要将图像和文字分开，且两者互不影响。比如在网页左边插入一幅图像，要求右边的文字就像没有图像时可以多行输入，这就要通过设置图像的环绕方式来实现。在网页中图像的环绕方式有两种：左环绕：图像在左边，文本在图像的右边进行环绕。右环绕：图像在右边，文本在图像的左边进行环绕。在“外观”选项卡的“布局”栏中打开“对齐方式”下拉列表框，选择“左”选项，并单击“确定”按钮，图像就被设置为左环绕方式，同样，如果选“右”，图像就被设置为右环绕方式。(3) 编辑图像大小：在Dreamweaver cs3 中，当在网页中加入一幅图像后，图像大小默认设置为其原来的大小，如果加入的图像太大或太小，或有其他特别需要，就得调整图像的大小。调整图像大小非常简单灵活，只要你选中加入的图像，用鼠标左键拖动图像边框，可任意调整图像的宽度和高度直到达到你满意的尺寸。(4) 设置图像缩放比例：网页设计的一个重要原则就是网页的兼容性，对于不同的浏览器或者不同的分辨率，不管是 800X 600的窗口，还是1024X768的窗口，网页都要能正常的显示。设置图像缩放比例就是将图像设置为大小可以按比例变化，与浏览器的大小成一固定比例，这样在不同大小的浏览器窗口里图像都能正常的显示外观。设置图像缩放比例的步骤如下：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 型，便于用户浏览和点连接；然后视频分栏我选择综合框架型；论坛和交易区都采用标题正文型，还带有上下的框架结构。比赛分栏采用“国”字型。首页内容要求精彩丰富，简洁明快。页面可爱清爽。首页主要是导航作用。首页制作时，时刻考虑着网页的基本原则：统一，连贯，分割，对比及和谐的原则，内容统一，都是为了主题服务，一个网站强调的就是一个整体，只有围绕一个统一的目标所做的设计才是成功的；连贯，页面之间关系连贯，统成一体；每版内容都自成一体，颜色各异，便于浏览；整个网页有动有静，颜色不同，形成对比，不呆板，富有生气；颜色各异，但又不同之中又相同，浑然一体。使用方便: 同第一个是相一致的，满足使用者的要求，网页做得越适合使用，就越显示出其功能美；页面用色协调，布局符合形式美的要求: 布局有条理，充分利用美的形式，是网页富有可欣赏性，提高档次。当然雅俗共赏是人人都追求的。同时将动态网页与静态网页结合起来。利用我们所学的框架集，制作更完美的页面。此文档可自行编辑修改，如有侵权请告知删除，感谢您的支持，我们会努力把内容做得更 好