网页设计实验报告.doc

-装- - 订 -线- 班级 经济学1班 组别 第六组 - 广 东 商 学 院 答 题 纸（格式二）课程 网页设计与制作基础 20122013学年第一学期小组成绩 评阅人 评语（由教师在答辩时填写）评价项目好一般差评分标准主题选择每项10分。好（8-10分）;一般（6-7分）;差（6分以下）网站环境与站点管理网页布局设计内容组织与导航设计样式与外观设计设计报告撰写好（15-20分）;一般（10-14分）;差（9分以下）页面元素的插入及设置文字每项5分。好（4-5分）;一般（3分）;差（3分以下）图片超链接多媒体元素表格表单个人成绩表（该表前两列由学生填写外，其余部分由教师填写）学号姓名贡献率（%）个人成绩1225060210412250602108122506021071225060211612250602128动漫网页设计-一、 设计目的首先，通过制作网页了解HTML中涉及的技术；其次，掌握网页设计的流程及相关网页制作效果，比如框架集、插入图片或者媒体、CSS样式、Java Script语言等等；最后，通过了解Dreamweaver的使用方法后对制作网页和网页开发的流程进行网页设计。因此，选择一个我们组员比较感兴趣的课题“动漫”进行网页设计，拓宽组员之间对动漫的认识，增强交流，掌握网页设计技能，并通过网页普及动漫元素。二、 设计环境软件：Dreamweaver、Fireworks硬件：Windows XP、Windows 7、电脑三、 分工情况本来是打算按照：陈灼德、黄炯杭收集资料，邓锴网页设计，陈光锐、卢雄伟编写程序，全体成员美化的分工来进行网页设计的，后来考虑到要充分发挥组员对Dreamweaver的操作使用能力，所以改为卢雄伟负责总主页，其他组员自己选一动漫进行自我设计，由总主页链接到每个组员的分主页。这样能够很好地展示每个组员的能力，并且在制作中，我们互相交流Dreamweaver的制作，尽可能地使得网页的制作能够简洁、美观。四、 设计流程设计流程：1. 网页主要分为5个页面，分别是火影忍者简介、人物简介、剧场版、壁纸、注册用户或会员页面，以火影忍者简介作为主页。2. 寻找素材、包括GIF动态图、相关图片文字、JS代码等。3. 制作导航，超链接到各个网页中，导航运用的是图片切换行为。4. 在“火影忍者简介”中，利用锚点标记、层、Spry菜单栏与行为混合应用、内部超链接、Java Script返回顶部、表单表格混合应用、插入GIF图像、内部CSS样式整体布局形成。另外，超链接到“注册用户或会员注册”页面中。最后增加“登录”JS语言。5. 在“人物简介”中，利用Spry菜单栏与行为混合应用、层、锚点标记、内部超链接、Java Script返回顶部、内部CSS样式、表格表单混合运用、插入动态GIF图像美化页面整体运用布局。6. 在“剧场版”中，运用插入动态GIF图片、层、时间轴、插入Flash视频、Java Script返回顶部布局。7. 在“壁纸”中，运用表格将每一张图片都放在表格中，设置合适大小，运用显-隐藏和晃动行为、层、每一张图片都超链接到每一张图片的原始尺寸页面中布局。8. 在“注册”页面中，运用表单表格混合应用、图像交换对象、插入动态GIF图片美化、Spry选项卡式列表、超链接到“火影忍者简介”主页整体布局。设计流程：1.根据小组分工将主题确定为“海贼王”动漫网站2.建立5个网页：首页、地图、王下七武海、顶上战争、以及注册页面(1)首页：主要用表单、表格、AP Div（层）来布局，使得网站可以有独立开的有不同信息板块，与此同时增加了一些动态GIF图像、时间轴、背景音乐作为修饰，并且设置了许多网站相关链接。(2)地图：“地图”页面的主要设计思想是：在网页中放置一张动漫里主角冒险的主要航海路径图，并且利用AP Div（层）以及时间轴的相结合，使得小船在地图上游动，并且在相应的地方设置热点，创建超链接，通过超链接打开网页，对动漫主要的时间点和故事进行介绍。(3)王下七武海：主要是运用Spry选项卡式面板，对其中个别人物做出了一些相关信息介绍，以及Java Sprit的信息提示功能(4)顶上战争：主要运用了表单、表格、AP Div（层）还有时间轴来制作、添加了部分图片转换效果和Flash视频的添加。(5)注册页面：主要运用的依旧是表单、表格、跟之前相比添加了复选框，单选按钮等功能，并且将时间抽跟行为（显示和隐藏）做了一个结合，做到了动态下的图片切换。设计流程：1.小组确立总主题为“动漫”，我负责其中的“死神”板块。网战初步构思为5个主要网页，分为“首页”、“作者介绍”、“角色介绍”、“篇章”、“死神百科”。2.网页构架相对比较整洁，内容较少，主要目的在于尽可能把课本和老师所教的知识展示出来。3.上网查找下载相关素材，包括文字内容、图片、视频、音乐等。4.先建好站点，设计好每个网页的框架，再把素材复制粘贴到网页中。5.充分利用学过的知识设计网页，例如文本属性的设置、插入图像与编辑、插入音乐视频、6.表格表单运用、框架与层的装饰、模板的运用、CSS样式的套用，还运用行为和时间轴配合素材做出相应的效果。7.把几个网页链接在一起，合成一个完整的网站。8.把整个站点的所有内容上交到组长处，然后再链接成一个“动漫”主题的大网站。设计流程：1.资料的搜集。2.熟悉制作软件。做网页主要用的工具便是dremweaver、photoshop、flash软件。3.构建站点框架。建立站点并设计网页大概内容。4.设计主页及二级页面。利用框架集，表格，层等技术给图片文本等定位，添加表单，图片等各种元素并运用CSS样式美化网页。5.实现网页间的链接根据需要编辑网页间和网页内的链接。6.向静态网页插入动态效果根据需要的动态效果添加行为和时间轴，并加入动态图片和flash视频。设计流程：五、 总结在这次网页设计中，我收获了很多，在设计过程中通过寻找方法实现自我想法找到很多乐趣。最深刻的就是设计时间轴。在设计时间轴中，想法是有两个层，放进大小、动态相似的GIF图片，相向运动。最后经过种种试验获得成功，那一刻的感受就是无比的具有成就感。在网页设计过程中，有很多这样的成就试验。同时，在组员交流学习中学到了更多的技术，比如JS返回顶部。总之，网页设计让我收获了很多，学习到很多网页知识。搜集素材的时候尽量搜集多一点，等着备用，所以到后来我会空出很多没有用到的素材，这是一个需要改进的地方。设计找想法的过程是最难的。整个过程都感觉布局存在很大问题，导致及时做出了一些东西，但是网页设计的并不好看；有些想法超出了实际，在现有的基础上达不到，因此只能用其他方式去填补之前想法留下的空缺，导致整体效果不佳。关于新的尝试，有尝试去网上找一些技巧，但是并没有使用网络的模板或者代码来美化自己网页。在一些网页视频教学的小技巧中，有尝试过“个性鼠标”、“动态分隔线”等效果，总的来说过程不难，但是效果因为缺少了一些插件出不来，后来也只能被迫删除。有些网络教学的Dreamweave的版本更新，插件更为齐全，这也是但是看视频教学时忽略了的问题。过程中下载了很多图片进行备用，但是实际用到的并不多，而且因为其他原因对网页进行了重做，但是在保存的时候还是保存在了原有的文件夹，导致文件夹过大。感觉做的时候所能用的技巧还是过于单一了。并没有太多样。因为制作的5个网页所设想的布局不同，所以并没有运用到框架以及模板等问题：1、老师以前讲的内容有点忘记。2、很多离奇的想法想实现，但却不知道怎么操作。解决：翻书、问同学、上网查资料，实在操作不了就放弃。收获：基本学会了设计一个完整的网页，虽然并不是很完美。通过这次实习，在制作时想想使自己的网页更加丰富多彩，在网页中插入图象，动画，动态特效。可是总遇到这样那样的问题，但在同学的帮助和自己摸索的情况下完成了这个实习的成果。从制作网页过程