实训六利用表格进行网页布局.docVIP

实训六 利用表格进行网页布局 课时：3 班级：12计算机班 实训日期：2013-4-2 编写时期：2013-3-29 一、实训目的 1、了解网页设计常用的几种版式；2、掌握绘制及编辑布局表格和布局单元格； 3、掌握利用布局表格的嵌套来设计较复杂的版面； 4、掌握在布局表格中添加具体内容 ； 5、掌握设置布局表格和单元格属性 。 二、实训内容 利用布局表格制作网页 三、知识点分解 由上图可知，该网页的结构属于拐角型，先画出该网页的版式结构。 LOGO BANNER 导航菜单 导 航 网页内容 网页内容 版权信息 我们可以知道在进行该网页布局时，先要布最外面的表格，然后布最上端的表格，用来放置LOGO和BANNER，然后再布一个单元格放置导航菜单，接着下面布三个并排的表格，分别放置左边的导航，中间的网页内容，右边的网页内容，最下面再布一个单元格，放置版权信息。 四、实训步骤 新建一个文档，打开“属性面板”，单击按钮，在弹出的页面属性对话框中将“背景图像”设为“bg-greenline.jpg”。 将“插入”栏中的“常用”选项卡改为“布局”选项卡，此时就出现“布局”工具栏，如图2-6-3所示。 3、单击布局工具栏中的按钮，进入布局模式。 4、首次执行以上操作之一后，会打开“从布局模式开始”对话框，在该对话框中给出在“布局模式”下创建表格的方法的提示。单击 按钮即可切换到布局模式。切换到“布局”模式后，在“文档”窗口的顶部会出现标有“布局模式”的蓝色长条。 5、在“插入”栏的“布局”选项卡中单击“绘制布局表格”按钮 。 6、将鼠标光标放置在页面上，此时鼠标光标变为加号（+）。 7、将鼠标移到要创建表格的左上角位置并按住鼠标不放拖动到要创建表格的右下角后释放鼠标。 8、选中该表格，打开属性面板，将表格的宽度设为“783px”，高度设为“845px”。 9、在“插入”栏的“布局”选项卡中单击“绘制布局表格”按钮 。将鼠标光标放置在刚才绘制的表格的左上角，拖动鼠标，绘制一个嵌套表格，规格为：宽度“783px”，高度“101px”。 10、选中该表格，切换到“标准”模式，将背景图像改为“log1-text.jpg”。 11、再切换到“布局”模式，在“插入”栏的“布局”选项卡中单击“绘制布局单元格”按钮。选中该单元格，打开属性面板，将单元格的宽度设为“111px”，高度设为“101px”，水平对齐方式设为“左对齐”，垂直对齐方式设为“顶端”。 12、将图像“niux-home.gif”插入到该单元格，打开属性面板将其宽设为“35”，高设为“30”，对齐设为“绝对居中”，在紧接着该图像的旁边写上文字“加入收藏”，同时将该文字设为：字体“宋体”，大小“12px”。 13、将“插入”栏中的“布局”选项卡改为“文本”选项卡，单击“换行符”按钮，光标自动定位到下一行。 14、将“插入”栏中的“文本”选项卡改为“布局”选项卡，进入“布局”模式，重复步骤11、12两次。 15、在“插入”栏的“布局”选项卡中单击“绘制布局单元格”按钮。选中该单元格，打开属性面板，将单元格的宽设为“783px”，高设为“29px”，水平对齐设为“居中对齐”，垂直设为“居中”，背景颜色设为“#FF9900”。 16、将光标定位到该单元格，输入文字“首页”，然后将“插入”栏中的“布局”选项卡改为“文本”选项卡，单击“不换行空格”按钮两次，出现了两个空格，紧接着输入“|”（该符号用键盘上的“shift+\”输入），再单击“不换行空格”按钮两次，紧接着输入“国内旅游”，后面文字按相同方法输入，选中导航栏的所有文字，将其设为：字体“宋体”，大小“14px”，颜色“#000099”。 17、紧接导航栏的布局单元格，在它下方绘制一个宽为“181px”，高为“665px”，颜色为“#dde56c”的布局表格，用来放左边导航内容。 18、在该布局表格内绘制一个宽“181px”，高“73px”的布局单元格，然后将“ygdd.jpg”图像插入到该单元格，同时设该图像的宽为“181px”，高为“73px”。 19、紧接上面的布局单元格，在它下方绘制一个宽“181px”，高“60px”，水平对齐为“居中对齐”，垂直为“居中”的布局单元格，输入文字“人文地理”，同时将该文字设为：字体“楷体”，大小“18px”，颜色“#CC0033”。 20、紧接上面的布局单元格，在它下方绘制一个宽“181px”，高“98px”，的布局表格。 21、在上面的布局表格内绘制一个宽“26px”，高“96px”，的布局单元格。 22、在上面的布局单元格右边绘制一个宽“153px”，高“24px”，垂直“居中”的布局单元格，输入文字“□自然环境”(“□”的输入：在“智能