网页布局设计_实验手册.doc

网站美工设计实验手册网页布局设计实验手册班级：_计应0902_姓名：_郑祥云_ 学号：_2009050247_ 信息工程学院姓名： 学号： 成绩： 实验报告一实验名称： 栋力音乐网站 实验目的： 通过此次实验能了解css布局和div标签的功能以及运用； 实验报告：1、 首先创建一个站点，然后将images文件夹拉到站点文件夹里。2、 创建一个取名为CSS的规则，点击标签并设置在站点文件夹里。然后创建一个名称为*的标签定义在CSS规则里，并设置属性方框：填充和边界为0；边框宽度为0。然后再建一个标签并命名为body，设置文本对齐居中以及字体的大小。3、 然后插入div标签，在ID里键入box。然后点击新建CSS规则，并选中高级另取名为div保存在站点文件夹里。在box属性里设置方框宽各为100%。同样在div标签ID了键入要插入的高级标签名字并点击新建在div下创建top，设置宽高（998 .149）并设置背景图片。然后在div标签下创建menu，设置其属性宽高为（811.31） 以及边界上为（-15），插入相应的背景图片。然后在menu里运用li键入相应的文字。并为其设置menu li，设置属性为浮动左对齐，上边界在（10），左边界为（33）。至此网页的上半部分完成。4、 接下来在div下创建main，也就是网页的主体部分。设置其属性宽高为（648.1300），浮动左对齐。然后在main里插入left和right。并分别设置好宽高以及浮动对齐。接下来就是在left以及right里分别插入相应的一个个小窗体并为其设置好适合的宽高以及浮动对齐。其中在一些窗体里设置li，dl相应的属性。5、 再创建一个bottom，网页的最底部分。用以上相同的方法为其插入背景图片以及li，并设置好属性。网页完成。总结：通过此次实验我更加的了解css布局和div标签的功能，在实验中也遇到了蛮多的问题。在老师的指导和同学的帮助下得到了很好的解决，也加深了印象。姓名： 学号： 成绩： 实验报告二实验名称： 商务网站设计 实验目的： 通过此次实验能了解css布局和div标签的功能以及运用； 实验报告：1、 创建一个站点，然后将素材文件夹images拉到站点文件夹里。2、 新建css并取名“*”保存并设置其属性填充和边界为0；边框宽度为0。然后开始新建标签div，然后将box新建至其名下，设置属性宽高为100%。3、 接着，开始制作网站的top（网站的上部分），即插入标签top，然后设置宽高为（1003.65），插入图片。新建menu ，就是网站导航栏，首先先设置属性宽高为（1003.279），再设置li，键入文字，设置li属性有浮动，使其能工整的显示在页面里。再插入一张主题图片。这样一个导航菜单栏完成。4、 然后开始做网页的主体部分，首先还是一样，创建一个标签main，用来承载网页主体部分所有的内容，然后分别插入left和right两个标签，并分别设置好宽高以至能刚好打到main的宽高要求（后面发现高度有时候不够的话，可以修改），然后按照效果图上的显示，开始规划，然后设计一个个小标签，排布整齐，这样后面如果有错误能及时修改。然后按照要求开始插入图片和边距和边界属性。5、 待上面都完成之后，开始这个网页的最后过程，也就是网页的底部。首先还是先添加标签，然后新建CSS开始设置属性。然后分别插入小标签，键入文字设置其li属性。然后预览下，整体完成。总结：通过此次实验更加的了解css布局和div标签的功能，并且也学习了很多方法，能慢慢的用代码去实现这些功能。姓名： 学号： 成绩： 实验报告三实验名称： 纯flash网站设计 实验目的：通过此次实验来了解一个flash网站的制作以及技巧； 实验报告：1、 打开flash软件，创建一个“宽”为800像素，“高”750像素，“背景颜色”为“灰色”的flash文件。将图层1命名为背景，然后新建图层，并绘制一个左上和右下弯度为40的图形。然后复制一个到元件里，并为其改变成绿色以便后面需要。然后再画一个右下弧度为40的图形。接下来为刚才制作成元件的那个绿色的元件设置投影并拉到场景里。新建图层3，做一个短线到长线的形状补间动画。然后对背景设置遮罩，让动画层和元件层在背景层下并锁上。这样遮罩才有效果。2、 然后做一个和绿色元件一样大小的白色边框，当长线动画做好的时候整个白框能显示在整个画面的外轮廓。接下来做标志动画，做一个从右到左，从无到有，模糊到清晰的动画。然后开始做按钮元件，在此之前要先做一个灰色长条和白色方块的影片元件。然后开始设置帧数，使这个动画做到闪动的效果。然后开始复制按钮元件，做六个按钮元件。然后在场景里设置好帧数，在前面动画结束的时候，显示出标志动画和按钮的动画。3、 接下来做主体部分的左侧，就是文字的有无到有的一个过程。然后在其右侧做一个遮罩，先将图片拉到场景里，再做一个遮罩层，在右下角画一个方块，然后在适当的帧数上添加关键帧，将新添加的关键帧上将方块拉到将图片掩盖的大小。然后设置形状补间，再遮罩。这样一个图片的从左下角开始慢慢浮现在整个画面的动画完成。4、 然后做底下会员框的浮现，先在系统元件里拉出按钮元件。再拉出lable。将其中的文字描述改掉。然后开始做一个在图片动画浮现之后的底下信息浮现，最后在左下角浮