网页制作实验报告.doc

网页制作学院：班级：姓名：学号： 日期：综合网站的开发及其设计方案一、确定网站主题及风格创意(1)网站的主题是什么？网页主题是情侣空间，(2)网站的用户是谁？有哪些功能？ 网站的用户面向广大消费者，可以网上购买珠宝首饰等。(3)网站的风格定位是什么?风格是浪漫。以红色、棕色和银色为主色调，中间嵌以相同色系，不失浪漫之情又给人融洽整洁之感。二、网站功能模块规划（1）画出站点地图，例：主页indexguanggao(contacts)Index-6(On-line shop)index-5(ourcatalog)Index-4(watches)index-3(wedding)index-2(jewelry)index-1Watch1watchweddingJewelry1jewelrypintuyouxi（2）画出链接结构图一级目录二级目录三级目录对应资源/链接/说明主页indexguanggao回到二级目录链接回二级目录(jewelry)index-1jewelry可链接到Jewelry1，(jewelry)index-1和(On-lineshop)index-5，可链接回二级目录Jewelry1可回到(jewelry)index-1可链接回二级目录(wedding)index-2wedding链接(On-lineshop)index-5，(wedding)index-2可链接回二级目录(watches)index-3watch链接(On-lineshop)index-5， Watch1可链接回二级目录Watch1可链接回二级目录(ourcatalog)Index-4回到二级目录选择需要购买的产品并进入相应页面(On-lineshop)index-5回到二级目录在线购物(contacts)Index-6回到二级目录提交建议（3）阐述各模块的布局特点及技术实现l 布局技术采用模板技术，使网站的设计效率增加，方便。布局方面采用表格和div层，运用div层进行排版，为了方便控制，排版时总要先添加一个总的div来控制布局，位置和大小，外层的div不需要设置浮动，也就是float的值。在这个外层里再设置内div，切记要设置浮动，即float值为left或right，根据设计需要来定，否则布局会发生混乱。表格会使你的设计整齐，排版相当方便。l 各静态模块的功能特点及内容呈现 静态模块呈现了向导内容，解释各个动态模块的目的和操作方式。l 动态模块的功能实现及技术（包括ASP核心代码的解释） A index页运用了效果行为 a 在添加行为的地方加入5个buttom控件，设置value的值就是控件上显示的文字； b 在显示行为的地方绘制AP div，在布局下选中绘制AP div，按住ctry健连续绘制5个AP div层； c 在5个AP div层里插入图片，并调整AP div的大小与图片一致，拖动AP div层将其放在你预先安排的地方并隐藏即可； d 选中new1健，在行为里添加效果-显示/渐隐，在目标元素中选择AP div1，效果选择显示然后单击确定； e 选中new1健，在行为里添加效果-增大/收缩，在目标元素里选择AP div1，效果选择增大然后单击确定即可，当然还可以进行其他属性的设置； f 剩余4个控件进行相同的操作，只是效果不同，分别为滑动、遮帘、晃动、高亮颜色。 g B index-1中运用了交换图像行为 a 在每一个div中插入图片,选中每张图片在属性窗口里设置其ID的值； b 选中图片，行为-交换图像在对话框中点浏览可以选择交换的图片，点击确定即可； c 其他图片的操作同上。 d C index-4中运用了图像滚动行为 在滚动行为代码里将src的值设置为图片的相对路径即可。 代码： 1、 Spry的应用 A spry运用在index-2 index-5 index-6 三个网页中，其中index-2中是spry选项卡面板，index-5 index-6是表单形式； B index-2中的选项卡 a 选择spry选项卡面板,在选项卡上修改文字内容，分别点其上的眼睛就可以分别设计内容； b 点击show1，在下面的内容区里添加div，插入显示的图片和相应的文字即可； c 点击show2，进行相同的操作。 d show1 show 2 Here are two exhibition piece, please click view, I hope you will be satisfied with. Here are two exhibition piece, please click view, I hope you will be satisfied with.C index-5 index-6的表单 a 选择spry验证文本区域，设置其行数，就可以调节他的显示高度； b 选择表单中的复选框，连续3个； c 选择表单中的提交按钮设置value的值即可。D a 模板应用，做好模板网页，在内容区天骄可编辑文本域，点击文件另存为模板即可，就会自动生一个Templates文件 b 打开子页，点击资源的倒数第二个图标，选中模板点击应用即可套用E guanggao页面中应用模板，插入flash文件F jewelry子页中应用模板，和点击图像放大效果 代码：$(document).ready(function()/Larger thumbnail preview $(ul.thumb li).hover(function() $(this).css(z-index : 10);$(this).find(img).addClass(hover).stop().animate(marginTop: -110px, marginLeft: -110px, top: 50%, left: 50%, width: 174px, height: 174px,padding: 20px , 200); , function() $(this).css(z-index : 0);$(this).find(img).removeClass(hover).stop().animate(marginTop: 0, marginLeft: 0,top: 0, left: 0, width: 100px, height: 100px, padding: 5px, 400););/Swap Image on Click$(ul.thumb li a).click(function() var mainImage = $(this).attr(href); /Find Image Name$(#main_view img).attr( src: mainImage );return false;););   The copyright to the network class level 10 LiuJunYan all The telephone number:G jewelry1子页运用模板，可折叠面板代码： 点击折叠 H 拼图游戏运用拖动AP元素行为在APdiv层中添加图片，在另一个APdiv中添加表格用于定位。选中body加行为拖动AP元素填入属性值即可。I watch运用图像变换其主要步骤和代码同BJ watch1运用图像滚动其主要步骤和代码同CK wedding子页运用了折叠式代码： Engagement suit Senior jewelry 2、 其他技术的应用(如多媒体技术，Flash、音视频的应用等)在所有网页的上部分均插入了相同的flashA 在插入flash的地方插入一个div，并设置与flash显示时同样的大小；B 点击常用-媒体，选择媒体的相应格式，在对话框中url选择要插入的媒体，点击确定即可。C 在guanggao子页插入了一个视频广告三、综合性布局设计（编写故事板）网站标题：情侣空间日期：2012年6月29号作者：刘君艳首页导航部分jewelry进入jewelry，jewelry1wedding进入weddingwatches进入watch，watch1ourcatalog进入二级目录On-lineshop进入二级目录contacts进入二级目录文本字体：Georgia, Times New Roman, Times, serif 大小：12PX 颜色：黑。橙四