任务32搭建首页

1、2 搭建首页123、能插入对应的文档和图片等资源。任务效果图1操作步骤：主页不同于其它页面，在这里显示了系统中最常见、最重要和最关键的信息。由作品预览可看出，整个页面分为顶部、中部和底部3大部分。顶部主要包括网站图标、主题展示、导航条等内容，我们可以将各种对象放置在一个表格的不同单元格中。中部分为左、右两个区域，左侧是我购买的商品、商品导航、商品排行榜、友情链接4个栏目；右侧是实现搜索、新品上架、精品推荐3个栏目。底部是版权信息等内容。一、在站点根目录（E:gshop2.0）下新建“衢州恒创网上商城”首页index.asp文件，并对“页面属性”进行相应设置。1、新建index.asp文件，操作

2、如图3-2_2所示。2、设置“页面属性”单击“修改”菜单，选择“页面属性”菜单项，对页面属性进行设置，操作如图3-2_3所示任务3-2 搭建首页2操作步骤：二、使用表格对商城主页进行布局根据商城切片图可知，商城顶部主要包括网站图标、主题展示、导航条等内容；左侧是我购买的商品、商品导航、商品排行榜、友情链接4个栏目；底部是版权信息等内容。用户在浏览商城不同的页面时，这些区域的界面结构、版面内容只有略微改变或完全不变，因此可以将这些区域单独设计成一个独立的页面，以“包含文件”的方式嵌套进主页布局中。右侧是实现搜索、新品上架、精品推荐3个栏目。因此可以将该商城的布局表格初设为5行2列，再根据切片图逐

3、步细化。1、新建表格并合并相应单元格，如图3-2-4所示。任务3-2 搭建首页3尝试练习：按图3-2_5所示，完成如下操作：1、将第2、3、4行第1列的3个单元格合并2、将第5行的2个单元格合并。任务3-2 搭建首页4操作步骤：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个单元格“分别”

4、进行合并。注意：是“分别”进行合并5表格属性表格Id：用来设置表格的Id标识，便于以表格为对象进行编程中的调用。行、列：用来设置表格的行数和列数。宽、高：用来设置表格的宽度和高度，其右侧的下拉框用来设置宽度的单位，有两个选项“百分比”和“像素”。填充：用来设置单元格边框与其内容之间的距离，单位是像素。间距：用来设置表格中单元格之间的距离，单位是像素。输入的数值越大，单元格之间的边框线就越粗，实际单元格与单元格之间的距离就越大。对齐：用来设置表格相对于同一段落中其他页面元素的对齐方式。包括：“默认”、“左对齐”、“居中对齐”和“右对齐”，其中“默认”的对齐方式是以浏览器默认的对齐方式来对齐的，大

5、多为“左对齐”。边框：用来设置表格边框的宽度，其单位为像素。和：用来删除表格中的所有明确指出的列宽或者行高，表格中的单元格可以根据内容自动调整到最合适的宽度和高度。和 ：前者用来将表格的所有宽度的单位转换为“像素”；后者用来将表格的所有宽度的单位转换为“百分比”。背景颜色：用来设置表格的背景颜色。边框颜色：用来设置表格的边框颜色。背景图像：用来设置表格的背景图像，应使用相对路径设置背景图像。任务3-2 搭建首页6操作步骤：三、制作各模块1、制作“商品搜索栏”版块。设置图3-2_10所示单元格背景色为“#ffffc8” 。、制作“新品上架”版块。（1）插入“新品上架”图像。（2）设置单元格背景为

6、新插入“新品上架”图片的单元格设置背景，背景图案为站点根目录下的“1.gif”文件，具体操作如图3-2_12所示。任务3-2 搭建首页7尝试练习：按图3-2_13所示，使用站点根目录下的“images”文件夹下的相关素材，完成如下操作：、标记“”处的单元格插入图像“4.gif”;标记“”处的单元格设置背景为“1.gif。、所有标记为“”的单元格均插入同一图像“39.pnt”；对应的相同单元格（即标记为“”）的背景色设为“#fbe0e3”。、所有标记为“”的单元格背景色均设为“#FFFF99”。、所有标记为“”的所在单元格均插入图像“sort-ddcart.gif”。任务3-2 搭建首页8操作步骤：3、为“商品搜索栏”模块输入“商品名”；为“新品上架”模块输入“定价”、“品牌”、“优惠价”、“VIP价”等文字。操作如图3-2_14所示。4、将“商品名”设置为“宋体”、“12px”，操作如图3-2_15所示。任务3-2 搭建首页尝试练