网页制作-清华大学出版社-第4章-网页基本元素设计范例.ppt

案例实施 （3）在打开的空白文档中，选择“文件”｜“保存”菜单项，将文件保存在根目录下，文件名为4.11.html。 （4）在页面4.11.html的文档编辑区的【标题】文本框里，将标题命名为“医药商务网站”。 （5）选择“插入”|“常用”|“表格”，插入4行1列的表格，如图4-11-3所示。 （6）插入表格后，页面如图4-11-4所示。 案例实施 （7）改变表格“宽度”属性值为760像素，对齐方式为居中对齐。 （8）选中表格第一行，并改变其高度为110像素，然后选择“修改”下拉菜单“表格”|“拆分单元格”选项，如图4-11-5所示。 案例实施 案例实施 （9）弹出如图4-11-6所示的对话框，将其拆分为2列，拆分后将其第一列的宽度设置为30%。 案例实施 （10）选中第一行第一个单元，然后点击“插入”|“图像”，弹出如图4-11-7所示的选择图像源文件对话框，选择images文件夹下的top.gif。 案例实施 （11）按照第（5）步方法在第二行内插入一个1行6列，边框为1像素的表格，将其背景颜色设置为蓝色，并在每个单元格内输入相应的文字，调整每个单元格的宽度以适应文字的宽度，如图4-11-8所示。 案例实施 （12）将每个单元格内的文字设置为超链接。 （13）将第三行的高度设置为320像素，输入相应的文字，并设置其字号为12，颜色为黑色，靠左对齐，如图4-11-9所示。 案例实施 （14）把最后一行字做成超链接。 （15）在文字下方按照第（10）步方法插入images文件下的tu1.gif、tu2.gif、tu3.gif，并调整其之间的距离，如图4-11-10所示。 案例实施 （16）同样方法在表格第4行插入footer.gif。 （17）将光标放置表格第一行的第二个单元格内，插入flash文件下的banner.swf。 案例实施 谢谢！ * 4.6.3插入鼠标经过图像 （1）在“文档”窗口中，将插入点放置在要显示鼠标经过图像的位置。 （2）在“插入”栏中，选择“常用”，然后单击“鼠标经过图像”图标，即显示“插入鼠标经过图像”对话框，如图4-6-3所示。 4.6.4 插入背景图像 背景图像的插入可以通过点击 进行，通过点击会弹出页面属性对话框，如图4-6-6所示。 4.7添加超链接 网页中，单击了某些图片、有下划线或有明示链接的文字就会跳转到相应的网页中去。要创建基本超链接的操作方法如下： （1）在网页中选中要做超级链接的文字或者图片。执行下列操作之一： （2）指向被链接文件 1）在属性面板中单击黄色文件夹图标，在弹出的对话框里选中相应的网页文件就完成了。做好超级链接属性面板出现链接文件显示。 ①选择链接文件 ②显示链接文件 图4-7-1 链接属性对话框图 2）特殊方法 创建超链接的特殊方法是在属性面板的链接域右边的“指向文件”的图标。使用它可以方便快捷地创建指向站点窗口中一个文档或图像文件，或者指向另一个打开文档中命名锚点的链接。 图4-7-2 “指向文件”图标指向窗口文档的链接 4.7.2 图像热区链接 热区链接是指在图片上的超级链接，这里所说的图片上的超级链接是指在一张图片上实现多个局部区域指向不同的网页链接。比如一张中国地图的图片，单击了不同的省跳转到不同的网页。可点的区域就是热区。为了演示制作效果下面的中国地图我加了一些链接，你可以用鼠标测试。鼠标移动到省份的热区，会显示提示，如果有预先设置的网站，点击会进入对方的网站。 创建热区链接的操作步骤如下： （1）首先插入图片。单击图片，如图4-7-3所示，用展开的属性面板上的绘图工具在画面上绘制热区，如图4-7-4所示 图4-7-3 插入的中国地图图片 图4-7-4 图像属性面板图 （2）属性面板改换为热点面板如图4-7-5所示：链接输入框：填入相应的链接。替换框：填入你的提示文字说明。目标框：不作选择则默认在新浏览器窗口打开。 图4-7-5 热点面板图 4.7.3电子邮件链接 1.在编辑状态下，先选定要链接的图片或文字（比如：欢迎您为我们的网站提意见），在插入栏点 或点插入菜单选“电子邮件链接”弹出如下对话框。 2．填入E-Mail地址即可，如图4-7-6所示。 图4-7-6 “电子邮件链接”对话框图 另外，还可以选中图片或者文字，直接在属性面板链接框中填写“mailto：邮件地址”，如图4-7-7所示。 图4-7-7 超级链接属性面板图 4.7.4 脚本链接 创建脚本链接的操作步骤如下： （1）在文档窗口中选择要创建脚本链接的文字或图像，这里选择文本“关闭窗口”。 （2）在“属性”面板的“链接”文本框中输入“javascript:”，并在其后输入javascript代码或函数调用，这里输入的是“javascript: