[计算机]网页设计

[计算机]网页设计

多媒体网站设计课程设计实验地点：多学科综合实验楼专业班级：计科0802学号：2008001418学生姓名：栗喜明指导教师：李海芳2012年1月14日11\n一、网站规划1.本课题的研究意义随着网络出版、发表和张贴文章等网络活动的急速增长，博客已经成为了一个指称这种网络出版和发表文章的专有名词。博客通常是由简短且经常更新的张贴构成，这些张贴的文章都按照年份和日期排列。博客的内容和目的有很大的不同，从对其他网站的超级链接和评论，到有关公司的新闻或构想，或者是个人的日记、照片、诗歌、散文，甚至科幻小说的发表或张贴。许多博客是个人将自己的想法表达出来，或者是一群人根据某个特定主题或共同目标进行合作，每个人都可以随时把自己的思想火花和灵感更新到博客站点之上。因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。根据个人喜好开发了博客网站。2．该网站的主要设计要求：（1）该网站的主页中包含文字、图像、声音、视频和动画等多媒体元素，各元素排列、摆放整洁、有序。网站界面颜色搭配合理，给用户友好感受。（2）在网站主页中，各媒体元素根据需要会具有超级链接功能，可以是页内链接也可以是页间链接。（3）该网站还会具有动态交互能力，能够和后台数据库动态交互数据。（4）该网站会有用户注册和登录，用户可以进行挑选物品，物品会有简介、图片、单价等信息。同时用户对选择的物品可以查看购物车，可以修改。11\n主页的大致排版：一、设计中用到的关键技术a)系统开发环境i.操作系统是windowsxp1.开发环境是JDK1.6+TOMCAT+ORACLE。2.开发工具是ECLIPSE（MYECLIPSE）b)采用Dreamweaver或Frontpage制作工具实现网站建设1.本网站的开发主要依靠Dreamweaver进行设计，添加子页面等。c)采用JSP技术实现和后台数据库交换数据二、数据库设计数据模型由三个要素组成：数据结构、数据操作和数据完整性约束。1.数据结构数据结构用于描述系统的静态特性，是所研究的对象类型的集合。数据模型按其数据结构分为层次模型、网状模型和关系模型。2.数据操作数据操作用于描述系统的动态特性，是指对数据库中各种对象的实例允许执行的操作的集合，包括操作及有关的操作集合。3.数据的约束条件11\n数据的约束条件是一组完整性规则的集合。完整性规则是给定的数据及其联系所具有的制约和存储规则，用以限定符合数据库状态以及状态的变化，以保证数据的正确、有效和相容。首先打开SQLServer本地客户端的查询分析器，如下图所示，选择或指定要连接的服务名称，输入帐户和密码。创建数据库：在数据库中的结构如下图：表：zilong此表为用户管理表表结构如图：创建代码如下：USE[flex]GO/******对象:Table[dbo].[ximing]脚本日期:01/12/201210:07:18******/SETANSI_NULLSONGOSETQUOTED_IDENTIFIERONGOCREATETABLE[dbo].[ximing]([bh][int]IDENTITY(1,1)NOTNULL,11\n[userid][nvarchar](50)NULL,[password][nvarchar](50)NULL,CONSTRAINT[PK_zilong]PRIMARYKEYCLUSTERED([bh]ASC)WITH(PAD_INDEX=OFF,STATISTICS_NORECOMPUTE=OFF,IGNORE_DUP_KEY=OFF,ALLOW_ROW_LOCKS=ON,ALLOW_PAGE_LOCKS=ON)ON[PRIMARY])ON[PRIMARY]各字段说明：Bh—编号，此字段为标识字段，在进行数据库插入的时候自动进行增加，所以在insert语句中不需要表示。Userid—用户IDPassword—用户密码创建数据库sql语句建表后，批量插入登录名和密码的数据本网站的登录是利用JSP技术，与后台数据库连接，验证后才能进行正确的进入index.html一、多媒体元素采集与制作图片文件中的素材：11\nMusic和video文件中的素材图片中的素材剪切利用了photoshop技术，如网站主页的页眉图片，文字的加入，图片的渲染等等。一、网页设计步骤1.网站的组织与策划 （1）定位网站的主题和名称——登陆页面11\n1.主题要小而精定位要小，内容要精。与个人息息相关的信息娓娓道来，让人通过网页来认识自己。2.如果题材已经确定以后，围绕题材给网站起一个名字—突出个人的性格特点，本次的名称为——乐GUAN。（2）定位网站的CI形象1.设计网站的标志(logo)——显示出来登陆者的尽可能多的信息。2.3.设计网站的标准色彩——以蓝色为基础，少量的其他颜色作为辅衬。4.设计网站的标准字体5.设计网站的宣传标语（3）确定网站的栏目栏目的实质是一个网站的大纲索引，索引应该将网站的主体明确显示出来。一般的网站栏目安排要注意以下几方面：1.要紧扣主题2.设立最近更新或网站指南栏目1.设立可以双向交流的栏目——留言本，可以让浏览者留下他们的信息。11\n（1）确定网站的目录结构网站的目录是指你建立网站时创建的目录。目录结构的好坏，对浏览者来说并没有什么太大的感觉，但是对于站点本身的上传维护，内容未来的扩充和移植有着重要的影响。1.不要将所有文件都存放在根目录下，会造成文件管理混乱2.按栏目内容建立子目录3.在每个主栏目目录下都建立独立的images目录4.目录的层次不要太深5.不要使用中文目录6.不要使用过长的目录（2）确定网站的链接结构网站的链接结构是指页面之间相互链接的拓扑结构。它建立在目录结构基础之上，但可以跨越目录。本网站采用了星状链接结构，各栏目之间可以相互访问。（3）设计网站的整体风格风格(style)是抽象的，是指站点的整体形象给浏览者的综合感受。这个"整体形象"包括站点的CI（标志，色彩，字体，标语），版面布局，浏览方式，交互性，文字，语气，内容价值，存在意义，站点荣誉等等诸多因素。风格是独特的，是站点不同与其他网站的地方。或者色彩，或者技术，或者是交互方式，能让浏览者明确分辨出这是你的网站独有的。风格是有人性的。通过网站的外表，内容，文字，交流可以概括出一个站点的个性，情绪。本网站采用了亮色系为主的色调，给人一种明快简洁的访问感觉，同时通过文字与画面以及视频和歌曲，来表达自己乐观向上的人生态度。2.主页设计11\n在这里我们应该遵循突出重点、平衡协调的原则，将网站标志、主菜单等最重要的模块放在最显眼的位置，然后在考虑交要模块的排放。我们可以根据平面设计和网页制作的技巧，对整个布局进行精雕细琢，以期达到更好的效果。其它页面的设计应该根据首页的设计风格进行设计。效果图已在上面展示。3．媒体素材采集制作应用所学到的多媒体技术，自己收集、整理、制作相关素材，要求利用多媒体信息编码技术，压缩信息量大的素材，以加快网页的浏览速度。（1）素材类型：文本、声音、图像、动画、视频等。（2）多媒体素材收集的依据与原则（3）制作多媒体素材的常用软件：文字软件（Windows记事本、Word、WPS、Excel、COOL3D等）；图像软件（Windows画图、Photoshop、Fireworks等）；声音软件（Windows录音机、CoolEdit、Winamp、豪杰超级解霸等）；动画软件（GifAnimator、Flash、Director、3DMAX等）；视频软件（WindowsMediaPlayer、超级解霸、Premiere、会声会影等）。（4）素材格式：实践中常会出现由于图片、音频、动画和视频的存储格式选择不当，造成多媒体课件占用空间大、品质低的问题，因此平衡文件大小与质量之间的关系是制作课件首要考虑的事情。图片素材：一般使用JPG格式，大小控制在100～200KB之间；如果涉及图形，一般使用GIF格式，大小控制在100K内。音频素材：一般使用WMA或者MP3格式的音频文件，流量控制在16～128Kb/s之间。动画素材：一般使用GIF和SWF格式的动画文件，前者适用小卡通动画，大小控制在100K内，后者适用于各种类型的动画，交互性很强，播放畅快，大小一般控制在10M内。视频素材：常使用WMV格式的视频文件，流量控制在250KB/S左右。4.数据库设计是指根据需求，在某一具体的数据库管理系统上，设计数据库的结构和建立数据库的过程。步骤:需求分析、概念设计、逻辑设计、物理设计、验证设计、运行与维护设计。11\n需求分析阶段(设计数据库之前)（1）了解网站业务，理解需求（2）重视输入输出在定义数据库表和字段需求（输入）时，首先应检查现有的或者已经设计出的报表、查询和视图（输出）以决定为了支持这些输出哪些是必要的表和字段。（3）创建数据字典和ER图表ER图表和数据字典可以让任何了解数据库的人都明确如何从数据库中获得数据。ER图对表明表之间关系很有用，而数据字典则说明了每个字段的用途以及任何可能存在的别名。对SQL表达式的文档化来说这是完全必要的。（4）定义标准的对象命名规范数据库逻辑设计:（1）表和字段的设计（2）选择键和索引（3）数据库完整性设计数据库测试:建立或者修订数据库之后，必须用新输入的数据测试数据字段。最重要的是，让用户进行测试并且同用户一道保证选择的数据类型满足网站要求。测试需要在把新数据库投入实际服务之前完成。5.测试网页的测试包括兼容性测试，即指在不同公司的浏览器，不同版本的浏览器中运行的兼容性；链接测试，检查是否有孤立的链接；实地测试，把网页上传到Internet服务器上，测试链接、下载速度等问题。经过在本地电脑上测试，浏览速度还是可以的，由于实验条件有限，上传到网上进行实际测试没能实现，对比本地的浏览速度，如果再简略一下图片的大小和适当剪切音频和视频或者改变编码，一定能达到真正下载的速度。六．设计环境硬件环境：高档次多媒体计算机11\n软件环境：1.操作系统：Windows7/2000/XP/NT（装有PWS或IIS服务器）2.制作工具：Dreamweaver4.0或以上版本3.浏览器：InternetExplorer5.0或以上版本4.数据库：SQLSERVER数据库系统5.应用软件：文字、声音、视频、动画等多媒体编辑软件七、课程设计总结与体会最重要的一点是：从理论知识到实际的一个过渡让我收获了只考理论是不可能接收到得一些信息，这也是以前做东西的时候的共性体会，虽然老师给过一些提示等等，但是真正能做出来，才能真正体会这个过程所能给我们自己的东西，通过这个实验，我更进一步了解了，jsp，dreamweaver和html的应用。11