网页设计中层应用案例分析.docVIP

网页设计中层应用案例分析 　　摘要：本文通过介绍层的概念、表格和层的区别、创建层的方法、设置层的初始状态这些内容，讲述了层的一个方面应用在网页中制作一只自由飞翔的小鸟。 　　关键词：层；表格；站点；时间轴；关键帧div+css 　　 　　　一、层的概念 　　 　　　所谓层就是网页内容的容器，网页设计人员可以定位在网页上的任意位置，层可以包含文本、图像、表单、插件或其他任何HTML文档中允许放入的内容，甚至层内还可以包含其他层，同时层也可以移动和重叠。 　　在Dreamweavcr中，层可以分为CSS层和Netscape层两种格式： 　　1、CSS层是利用或标记来创建层，它通过CSS样式来实现对文档内容的定位，具有很好的兼容性，Microsoft Intemet Explorer和NetscapeNavigator都支持CSS格式。它的属性由环球网协会(W3C)的“用层叠样式表定位HTML元素”定义。 　　2、Netscape层是使用或标记来创建层，它是Netscape公司自定义的层标准，它的兼容性较差，只有Netscape Navigator浏览器才支持，它的属性由Netscape的专有层格式定义。 　　 　　二、表格和层的区别 　　 　　大家都知道表格和层都是用于网页设计布局工具，那它们之间又有怎样的区别呢?下面通过一张表格很清楚便可知道： 　　 　　　三、创建层的方法 　　 　　1、插入层：把光标置于网页制作软件Dreamweaver的文档编辑窗口中想插入层的地方，然后选择菜单[插入]―[层]命令。 　　2、拖放层：把插入栏中的层按钮拖到文档编辑窗口中。 　　3、绘画层：在插入栏中单击层按钮，在文档编辑窗口中拖动鼠标画出一层。(注意：只能拖动到设计视图中才能插入层) 　　4、创建多个层：单击插入栏中层按钮，按下Ctrl键的同时，在文档编辑窗口中画出一个层。只要不释放Ctrl键，可以连续创建多个层。 　　 　　四、设置层的初始状态 　　 　　要设置层的初始状态，可以通过选择层以后，层的属性面板中可见性属性来设置。 　　各项含义如下： 　　default(默认)：按照浏览器默认方式控制层的可见性。大多数浏览器都会以inherit方式控制层的可见性。 　　inherit(继承)：继承父层的可见性属性。 　　Visible(可见)：总是显示该层的内容，不管父层是否可见。 　　Hidden(隐藏)：总是隐藏该层的内容，不管父层是否可见。 　　 　　五、制作一只自由飞翔的小鸟 　　 　　操作步骤： 　　1、新建一个网页文件。(1)通过[开始]菜单―[程序]―[Macromedia]―[Macromedia Dreamweaver]，启动Dreamweaver。 　　(2)运行Dreamweaver后，第一件要做的工作就是必须创建站点，创建站点的目的是为了在网页设计过程中便于有效地管理网站文件。创建方法： 　　通过[站点]菜单―[新建站点]命令打开对话框，有基本和高级两个选项卡，基本选项卡是一个建立站点的向导，高级选项卡则用来快速设置站点的属性。建议入门或初学者先使用基本选项卡，高手和比较熟悉后再选用高级选项卡。基本选项卡根据提示一步步操作即可，这里重点介绍高级选项卡的设置。 　　*在“分类”列表框中选择“本地信息”选项，创建一个本地站点。 　　*“本地信息”列表框中设置以下参数项： 　　站点名称：在此文本框中输入站点名称。 　　本地根文件夹：设置站点文件的存放位置。可以直接在文本框中输入路径，也可以单击后面的文件夹图标，浏览选择本地站点存放位置。 　　*自动刷新本地文件列表：选择此复选框后，如果更改、删除站点文件等这些操作，可以自动刷新本地站点文件列表。 　　*默认图像文件夹：设置默认的图像存储路径。 　　*HTTP地址：设置站点的URL，可以验证站点内使用的绝对URL的超链接。 　　*启用缓存：选择此项可以创建本地高速缓存，改善链接的速度和提高站点管理。 　　设置完成后，单击“确定”按钮。结果在右边[站点]面板就会出现下图的情况 　　(3)新建一个网页文件。选择[文件]―[新建]命令，或者按键盘上Ctrl+N快捷键新建一个HTML类型的文件，然后选择[文件]―[保存]命令，将弹出一个[保存为]对话框，需要选择保存的位置(刚才创建站点的本地根文件夹中)、保存的文件类型为htm或者html和保存的文件名以后，将新建文件保存为bird.htn。 　　(4)设置页面属性。通过[修改]菜单―[页面属性]命令，或按Ctrl+J快捷键设置。 　　只需要设置标题(标题内容会在IE浏览器窗口的标题栏中显示)和顶部边界为0(网页内容和窗口上边之间的距离)。