第3章网页设计高级部分

《第3章网页设计高级部分》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第3章网页基本元素3.1层及其应用3.2表格的操作3.3超链接3.4框架的应用3.5电子相册和时间轴动画3.6行为面板的应用北京化工大学北方学院信息学院教研室层是网页中用来放置文本、图像、动画、表单、插件等网页元素的载体。层在Dreamweaver8网页编辑区中可以自由移动，改变层在网页中的位置，便可实现层中网页元素位置的改变。实际上，层的应用技术也是一种网页元素的定位技术，利用层能够精确对页面元素定位。设计者可以控制多个层的叠放次序，显示或隐藏层。层与时间轴配合使用，可以很方便地设计出动态页面效果，层与行为配合使用，还可以很方便地制作出滚动字幕

2、、下拉式菜单等页面效果。３.1.1层的创建和基本操作3.1层及其应用北京化工大学北方学院信息学院教研室1.创建和删除层2.激活和选中层3.调整、移动和对齐层4.层的属性设置３.1.1层的创建和基本操作北京化工大学北方学院信息学院教研室例4.1制作具有下列要求的网页，网页如图3-1所示。(1)页面的背景图片为bg0040.gif；(2)在页面合适的位置上插入4个层，层的大小为150×150像素。(3)在层中插入【鼠标经过图像】，原始图像分别是素材文件夹中的tu1_1.jpg、tu2_1.jpg、tu3_1.jpg、tu4_1.jpg，鼠标经过图像分

3、别是ch04中的tu1.jpg、tu2.jpg、tu3.jpg、tu4.jpg；3.1.2层的应用实例北京化工大学北方学院信息学院教研室(4)创建2个层，层中输入文字“书——精神的粮食”，设置【字体】为“方正舒体”，【大小】为7，【颜色】为#993300，【样式】为“粗体”，将层中文字格式化。并将下面1个层中文字由黄色改为黑色。(5)将2个文字层略微错开叠放在一起，设计出文字阴影效果，如图3-1所示。(6)网页文件以exa3-1.html为名保存在在本地站点Mysite中。北京化工大学北方学院信息学院教研室图3-1应用实例示意图北京化工大学北方学

4、院信息学院教研室表格不但在组织页面数据时非常有用，而且在网页元素布局安排上也起着重要的作用，利用表格可以控制文本和图形等对象在页面上的位置。设计者用Dreamweaver8能很方便地在表格中输入数据，对表格进行修改，改变其外观和结构。可以增加、删除、拆分、合并表格的单元格、行和列，可以修改单元格、行、列以及表格的属性，实现表格的嵌套，表与层互相转换等操作。3.2表格及其基本操作北京化工大学北方学院信息学院教研室3.2.1新建表格3.2.2设置表格和单元格的属性设置表格的属性2.设置单元格的属性北京化工大学北方学院信息学院教研室1.选择单元格(1)

5、选中某个单元格的2种方法如下：先单击要选择的单元格，然后拖动鼠标到相邻的单元格中，当被选中的单元格四周出现粗边框线时释放鼠标，即可选中该单元格；单击要选择的单元格，然后单击状态栏左侧标签选择器的，便可选中该单元格。3.2.3选取表格和单元格北京化工大学北方学院信息学院教研室(2)选中多个相邻的单元格的2种方法如下：单击第1个单元格，然后拖动鼠标到最后一个单元格，即可选中这组相邻的单元格；单击第1个单元格，然后按住Shift键，再单击这组相邻单元格的最后一个单元格，就可选中这组相邻的单元格。(3)选择多个不相邻的单元格的方法如下：按

6、住Ctrl键，然后再分别单击要选中的那些不相邻的单元格，这时被单击的单元格就可被选中，若在按住Ctrl键的同时，再次单击选中的单元格，将取消该单元格的选择。北京化工大学北方学院信息学院教研室(4)选择表格行的2种方法如下：将鼠标指向表格的左边框线，当光标变为时，单击可选中该行，此时如果拖动鼠标可同时选择多行；先单击某行的单元格，然后单击状态栏左侧标签选择器的，便可选中该行。(5)选择表格列的方法如下：将鼠标指向表格的上边框线，当光标变为时，单击可选中该列，此时如果拖动鼠标可同时选择多列。北京化工大学北方学院信息学院教研室2.选择表

7、格选择整个表格有4种方法：(1)先单击某个单元格，然后单击状态栏左侧标签选择器的

8、【表格】

9、【选择表格】命令，也可选中整个表格；(3)先单击表格中某一单元格，按两次Ctrl+A快捷键，也可选中整个表格；(4)单击表格的右边框线或下边框线，可选中整个表格。北京化工大学北方学院信息学院教研室在Dreamweaver8中，对于表格的嵌套没有特别的限制，表格完全可以像文本、图像一样直接插入到其他表格的单元格中，然后通过对单元格的拆分和合并等编辑操作，完成更复杂表格的嵌套操作。将

10、光标插入当前表格的某个单元格内，然后可选择【插入】

11、【表格】命令，在【插入表格】对话框中输入新表格的属性，便可以在当前单元格内再插入一个