嵌套表格制作一个简单的网页
第3章实践与练习3:
嵌套表格制作一个简单的网页
本例着重练习在Dreamweaver中创建表格,并通过嵌套表格来实现对网页的布局,制作一个有导航栏的简单的网页,并使代码高度和可视高度一致。本例最终效果如下图所示。
⑴首先运行程序Dreameaver8,选择菜单栏“文件→新建”命令,创建新文档。
⑵选择菜单栏“插入→表格”命令,创建一个1行1列宽度为100%的表格,选中表格,在属性面板中设该表格的“高”为“100%”,“间距”为“0”、“边距”为“0”。
⑶在表格的单元格内单击鼠标左键,在属性面板中,设单元格的“水平”为“居中对齐”、“垂直”为“居中”,此时光标就在单元格的正中闪烁。
⑷选择菜单栏“插入→表格”命令,插入一个3行3列的表格。选中表格,在属性面板中设该表格的“宽”为“600”,“高”为“300”,“填充”为“0”,“间距”为“0”,“边框”为“0”。插入表格后,就在第一个表格中嵌套了一个表格,嵌套进来的表格居于第一个表格的中心。如图所示。
⑸第一个表格就是帮助网页定位的,嵌套进来的表格是网页部分,接下来就在嵌套表格里进行操作。分别选中第一行的各个单元格,然后单击属性面板上“背景”右边的“单元格背景URL”按钮,准备为各个单元格添加背景。
⑹单击“单元格背景URL”按钮后,会弹出“选择图像源文件”对话框,在对话框的“查找范围”列表里找到背景图片(/images/bg1.jpg),单击“确定”按钮,这就为第一行各个单元格添加了背景图。
添加背景图后的效果
⑺为第一行添加背景图后可以看到背景图片超出了第一行的单元格,所以需要设置单元格的相关属性。单击第一行第一列单元格,在属性面板中设置单元格的属性,“宽”为“240”,“高”为“59”。
⑻在第一行第一列单元格内单击鼠标左键,在属性面板中设置“水平”为“居中对齐”,“垂直”为“底部”。输入文本“名香艺馆”,设置字体为“黑体”、大小为“36”并加粗,字体颜色为“#999900”。这样网页的顶部就制作完成了。
⑼选取第三行的所有单元格,单击属性面板上的“行”下方的“合并所有单元格,使用跨度”按钮,合并这一行。在这一行的单元格内单击鼠标左键,在属性面板上设“高”为“40”、“背景色”为黑色。在单元格中输入文本“梦之坊工作室电话:0555─2315040”,然后在属性面板中设置文本在单元格中“居中对齐”。设置字体大小为“12”,颜色为白色。这样网页的底部就制作完成了。
网页底部
⑽选取第二行的所有单元格并合并。单击合并后的单元格,选择菜单栏“插入→表格“命令,在第二行的单元格中插入一个1行2列的表格。选中该表格,在属性面板中设“宽”、“高”都为“100%”,“间距”为“0”。这是网页的中间主体部分。
在第二行的单元格中嵌套表格
⑾单击在第10步中插入的表格左列的单元格,在属性面板中输入“宽”为“20%”、“背景色”为浅灰色(#CCCCCC),设置“垂直”为“顶端”。然后选择菜单栏“插入→表格”命令插入一个8行1列,宽度为100%的表格作为导航栏。
⑿选中导航栏表格,“间距”设为“0”,各行的“高”分别交替地设为“6”、“20”。行高为“20”的单元格的背景色设为橘黄色。
⒀此时发现行高为“6”的单元格的高度与可视高度不一致。此时单击行高为“6”的单元格,然后单击“代码”按钮,进入代码视图。
代码的高度与可视高度不一致输入导航栏文本⒁在光标闪烁处有“ ;”代码,删除此代码。同样的方法把其他行高为“6”的单元格在代码视图中“ ;”也删除。这样,行高的代码高度就和可视高度就一致了。
⒂在行高为“20”的单元格中输入文本,设置并应用样式,导航栏就制作完成了。
⒃单击第10步操作中嵌入的表格的右列单元格,选择菜单栏“插入→图像”命令,插入一张图片(/images/ 8.2.10.jpg),按住鼠标左键调整图片的大小到304×261。
⒄在图片右侧的单元格内单击,然后选择菜单栏“插入→表格”命令插入一个5行2列,宽度为100%的表格。合并第二列并设置其宽度为47,均分第一列各行都高度,在第四行里输入文本:“熏香有着悠久的历史,最早的书香世家之说中的香,即为熏香。”
⒅在第一行第二列单元格中单击,设置其“宽度”为“260”,“水平”为“居中对齐”、“垂直”为“底部”。输入文本:“名香香艺”,并进行大小与颜色的设置。
⒆按菜单栏“文件→保存”命令,保存文档,预览网页效果。
网页设计与制作期末试题及答案
网页设计与制作模拟试题 一、单项选择题(每空1分,共10分) 1. 客户/服务器系统的最大特点是客户机和服务器 ( D ) A. 必须运行在同一台机器上 B. 必须运行在同一个网络上 C. 必须运行在不同的计算机上 D. 不必运行在同一计算机上 2. 若需要软件把LAN上的客户机从Internet上隐藏起来,并为客户机执行Web 请求,则下面( D )软件能实现此项功能。 A. Internet Information Server B. Index Server C. Personal Web Server D. 代理服务器 3. 通常一个站点的主页默认文档名是 ( C ) A. Main.htm B. Webpage.htm C. Index.htm D. Homepage.htm 4. 通常,比较好的建立站点目录的习惯是 ( A ) A. 在根目录下建立一个总的IMAGE目录放置图象文件 B. 直接把图象文件放置在各栏目的目录下 C. 为各栏目建立一个单独的IMAGE目录放置图象文件 D. 在每个目录下建立一个IMAGE目录放置图象文件 5. 以下有关页面布局的说法正确的是 ( D ) A. 分辨率越高,可供使用的页面尺寸越大 B. 网页布局与平面设计一样,不受页面大小的影响 C. 页眉和页脚中只能出现文本,不能出现图形 D. 页面布局通常是通过手工设计的,目前还没有相应的电脑软件完成这一工作 6. 以下关于HTML文档的说法正确的一项是 ( A ) A. 与这两个标记合起来说明在它们之间的文本表示两个HTML 文本 B. HTML文档是一个可执行的文档 C. HTML文档只是一种简单的ASCII码文本 D. HTML文档的结束标记