九乡新闻网:网页设计中各个工具的作用简介
来源：百度文库 编辑：九乡新闻网 时间：2024/04/30 20:30:07
一、表格的作用
二、层的作用
三、用表格制作各种颜色的线条
四、网页的动态过渡效果
五、动画效果代码“Marquee”
六、简单对网页进行加密
一、表格的作用
1）表格的基本作用
表格在网页中是用途非常广泛的一种网页元素，他的重要作用之一是可以用于有序地排列数据，与Microsoft Office Word 2000/2003软件的作用完全相同。
表格的插入方法是：选“插入”－》“表格”，出现“表格”对话框，并可以设置表格的一些属性，如表格的行数、列数、表格的宽度、边框的线宽等等。
（注意：表格的宽度有相对宽度“百分比”和绝对宽度“像素”两种显示方式！！他是指浏览器在某分辨率下，显示的表格宽度，如果是相对宽度，则表示表格在该分辨率下以相对的宽显示，与表格的像素多少无关；而绝对宽度是指表格的宽度有多少像素就显示多宽的表格，与浏览器所用分辨率无关！）
2）表格的布局作用
表格在网页制作中，他的另一个重要作用就是：进行布局。也就是利用表格的特点，可以精确地定位文本元素、图像元素、及其他的元素等。用表格来布局，技术上的熟练程度将直接影响到网页设计的外观。
方法是：首先用铅笔在草稿纸上画出网页的布局方案图，要注意表格内的单元格，是可以任意分隔和合并的（在表格的属性面板中设置！），也可以插入表格。另外，表格是用于布局的，所以，在“属性”面板中的“边框”（或“边框粗细”文本栏）一定要输入数值“0”，即是无边框。
3）分析“酷男孩工作室”网页
分析方法是：首先将该网页保存到指定的站点内，注意文件名不能用中文名！再用“Dreamweaver MX 2004”软件打开该网页文件，即可显示出所有的技术细节。
请同学们自己分析“欢迎到巧克力的主页来!”网页！！文件名为“hydqkldzyl.HTL”！！
二、层的作用
用表格来布局，可以看到一个特点，就是表格的定位十分准确，也很严谨。但是，非常不灵活，而且用表格来对页面元素进行定位实在太难掌握了。
在许多图形图像软件中，都有“层”这个概念及其运用。但是，对于Dreamweaver MX 2004软件来说，“层”有所不同，一是他用于网页元素的布局及其他技巧运用,如下拉菜单等；二是用于设计动态的效果（层与时间轴及行为是密切结合的！）。
用层来布局，其特点是，他可以游离在网页元素之上，从而可以利用他来灵活而精确地定位其他的网页元素。
要布局某个网页元素，其方法是：首先选“窗口”菜单，使“插入”打勾，出现插入面板；在插入面板中，选中“布局”选项卡，并确定是“标准”模式；再在“插入”菜单中选“布局对象”－》“层”命令，即可；最后，点击该层内部，再插入其他的网页元素后，拖动层到合适的位置。
二、层的作用
1）层用于做立体字
方法：新建立一个图层，在里面输入文字“SCHOOL”！！颜色为黑色！！
再建立一个图层，用相同的大小输入以上文字，颜色为红色！！
最后将两个图层进行叠加，注意前后的关系！
2）用层制作页中页
电视有个画中画功能，当网页的内容较多且比较分散时，可以把它分类，再用下面介绍的方法做一个或几个内嵌式窗口（也就是所谓的“页中页”），把同类的内容放在一个窗口中，这样整个页面看起来将简炼的多
页中页的制作方法：把鼠标移到需插入内嵌式窗口的地方点一下，插入一个图层，在其内部点击以下，再插入一个图层，这样插入的图层的特点是：第一次插入的图层是“父层”，第二次插入的图层是“子层”。而且都是使用相对坐标定位，图层在与表格混合排版时定位不准，其原因是它使用了绝对坐标定位
用对象面板插入的图层都是用绝对坐标定位的，而用“插入”菜单插入的图层是在没拖动时是使用相对坐标，一旦用鼠标拖动就改为绝对坐标了，而“子层”永远用相对坐标（相对“父层”）。为了减少误拖动“父层”，从而给定位带来麻烦，把“父层”的“宽”和“高”均设置为“1”。把“子层”拖到合适的位置，浏览时就在这个位置显示“页中页”。设置好图层属性面板的参数。
在“子层”的图层属性面板上设置好“宽”和“高”，图层的“宽”和“高”也就是内嵌式窗口的“宽”和“高”，把“溢出”选择为“Auto”，就是最为主要的一步，否则在窗口中就没有滚动条了。
在“子层”上面输入“页中页”的网页元素内容，如文字、图片等，由于图层支持所有网页制作技术，因此可以大胆地在“页中页”上发挥你的创意，现在完成了，可用浏览器来浏览了。
在“页中页”制作过程中，由于图层是叠加在页面上的，可能影响你编辑网页的其它内容，这时你可以在图层的属性面板上把“可见性”选择为“hidden”（隐藏图层），这样图层就看不见了，当然也就不会影响编辑其它内容了，但在网页全部制作完后，不要忘记把“可见性”改回来，否则，它在浏览时也看不见了。
图层隐藏后可用图层面板（按F11键），上面有当前网页的所有图层，在隐藏图层前面有一只眼睛，是闭着的，可用鼠标点一下，眼睛睁开了，图层也就取消了隐藏属性；再点一下，眼睛图标没有了，这时图层的显示属性取默认值；再点一下，又是一个闭着眼睛的图标出现了，图层又被隐藏了。所以不在图层属性面板上而是在图层面板上也可以隐藏图层。
注意：随着“页中页”中内容的增加，图层越拉越长，这没关系，请一定保持原来子层的宽和高的尺寸，在浏览时还是按原定义的窗口大小显示。
三、用表格制作各种颜色的线条
制作水平细线方法：
在 Dreamweaver 中，插入一个单行单列的表格，设置 border="0"、cellspacing="0"、cellpadding="0" 。然后在属性面板中设置表格的背景色。
进入源代码窗口，把
当把“ ”删除后，表格就收缩了，设置的背景颜色也成了水平细线的颜色。
必须注意的是，最好在设定了背景颜色时再把“ ”删除，否则，在设计窗口中再改动颜色就不太方便了。
请同学们考虑如何制作各种颜色的垂直细线！！！
、
四、网页的动态过渡效果
当从一张网页点击超级链接到下一张网页时，将出现过渡效果。
方法：打开A网页，点击“插入”－》“HTML”－》“文件头标签”－》“Meta(M)”命令！！
其中，参数为：
属性为 “HTTP-EQUIVALENT”；
值为 “PAGE-ENTER”；
内容为
“REVEALTRANS(DURATION=3,TRANSITION=2)”。
注意：延时不要太长；效果值在0到23之间！！
五、动画效果代码“Marquee”
1）基本语法
基本用法：把该代码插入到“