任务3 2 搭建首页.pptVIP

任务3-2 搭建首页 任务要求 1、能使用表格设计网站主页的主体和局部布局结构 2、能设计与制作导航栏 3、能插入对应的文档和图片等资源。 任 务 效 果 图 操作步骤： 　　主页不同于其它页面，在这里显示了系统中最常见、最重要和最关键的信息。由作品预览可看出，整个页面分为顶部、中部和底部3大部分。 　　顶部主要包括网站图标、主题展示、导航条等内容，我们可以将各种对象放置在一个表格的不同单元格中。 　　中部分为左、右两个区域，左侧是我购买的商品、商品导航、商品排行榜、友情链接4个栏目；右侧是实现有哪些信誉好的足球投注网站、新品上架、精品推荐3个栏目。 　　底部是版权信息等内容。 　　一、在站点根目录（E:\gshop2.0）下新建“衢州恒创网上商城”首页index.asp文件，并对“页面属性”进行相应设置。 　　1、新建index.asp文件，操作如图3-2_2所示。 　　2、设置“页面属性” 单击“修改”菜单，选择“页面属性”菜单项，对页面属性进行设置，操作如图3-2_3所示 任务3-2 搭建首页 操作步骤： 　　二、使用表格对商城主页进行布局 　　根据商城切片图可知，商城顶部主要包括网站图标、主题展示、导航条等内容；左侧是我购买的商品、商品导航、商品排行榜、友情链接4个栏目；底部是版权信息等内容。用户在浏览商城不同的页面时，这些区域的界面结构、版面内容只有略微改变或完全不变，因此可以将这些区域单独设计成一个独立的页面，以“包含文件”的方式嵌套进主页布局中。右侧是实现有哪些信誉好的足球投注网站、新品上架、精品推荐3个栏目。因此可以将该商城的布局表格初设为5行2列，再根据切片图逐步细化。 　　1、新建表格并合并相应单元格，如图3--2-4所示。 任务3-2 搭建首页 尝试练习： 按图3-2_5所示，完成如下操作： 　　1、将第2、3、4行第1列的3个单元格合并 　　2、将第5行的2个单元格合并。 任务3-2 搭建首页 操作步骤： 　　2、表格中嵌套插入表格。 单击“常用”选项卡中的“表格”工具按钮，设置表格参数如图3-2_6所示。 　　合并相关单元格，操作如图3-2_7所示 任务3-2 搭建首页 尝试练习： 按图3-2_8和图3-2_9所示，完成如下操作： 　1、在图3-2_7中步骤“”合并的单元格内插入一个5行4列的表格。 　2、按图3-2_9所示，将图3-2_8中所示的新插入的表格的第1、4、5行的4个单元格“分别”进行合并。 注意：是“分别”进行合并 表格属性 　　　　　表格Id：用来设置表格的Id标识，便于以表格为对象进行编程中的调用。 　　　　　行、列：用来设置表格的行数和列数。 　　宽、高：用来设置表格的宽度和高度，其右侧的下拉框用来设置宽度的单位，有两个选项“百分比”和“像素”。 　　填充：用来设置单元格边框与其内容之间的距离，单位是像素。 　　间距：用来设置表格中单元格之间的距离，单位是像素。输入的数值越大，单元格之间的边框线就越粗，实际单元格与单元格之间的距离就越大。 　　对齐：用来设置表格相对于同一段落中其他页面元素的对齐方式。包括：“默认”、“左对齐”、“居中对齐”和“右对齐”，其中“默认”的对齐方式是以浏览器默认的对齐方式来对齐的，大多为“左对齐”。 　　边框：用来设置表格边框的宽度，其单位为像素。 　　和：用来删除表格中的所有明确指出的列宽或者行高，表格中的单元格可以根据内容自动调整到最合适的宽度和高度。 　　和 ：前者用来将表格的所有宽度的单位转换为“像素”；后者用来将表格的所有宽度的单位转换为“百分比”。 　　背景颜色：用来设置表格的背景颜色。 　　边框颜色：用来设置表格的边框颜色。 　　背景图像：用来设置表格的背景图像，应使用相对路径设置背景图像。 任务3-2 搭建首页 操作步骤： 　　三、制作各模块 　　　1、制作“商品有哪些信誉好的足球投注网站栏”版块。 　　　设置图3-2_10所示单元格背景色为“#ffffc8” 。 　　　２、制作“新品上架”版块。 　　　（1）插入“新品上架”图像。 　　　（2）设置单元格背景 　　　　为新插入“新品上架”图片的单元格设置背景，背景图案为站点根目录下的“1.gif”文件，具体操作如图3-2_12所示。 任务3-2 搭建首页 尝试练习： 按图3-2_13所示，使用站点根目录下的“images”文件夹下的相关素材，完成如下操作： 　１、标记“?”处的单元格插入图像“4.gif”;标记“?”处的单元格设置背景为“1.gif。 　２、所有标记为“?”的单元格均插入同一图像“39.pnt”；对应的相同单元格（即标记为“?”）的背景色设为“#fbe0e3”。 　３、所有标记为“?”的单元格背景色均设为“#FFFF99”。 　４、所有标记为“?”的所在单元格均插入图像“sort-ddcart.gif”。 任务3-2 搭建首