任务32搭建首页.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个单元格“分别”进行合并。

注意：是“分别”进行合并

尝试练习：

按图3-2_13所示，使用站点根目录下的“images”文件夹下的相关素材，完成如下操作：

１、标记“”处的单元格插入图像“4.gif”;标记“”处的单元格设置背景为“1.gif。

２、所有标记为“”的单元格均插入同一图像“39.pnt”；对应的相同单元格（即标记为“”）的背景色设为“#fbe0e3”。

３、所有标记为“”的单元格背景色均设为“#FFFF99”。

４、所有标记为“”的所在单元格均插入图像“sort-ddcart.gif”。

任务3-2搭建首页

操作步骤：

3、为“商品搜索栏”模块输入“商品名”；为“新品上架”模块输入“定价”、“品牌”、“优惠价”、“VIP价”等文字。操作如图3-2_14所示。

4、将“商品名”设置为“宋体”、“12px”，操作如图3-2_15所示。

任务3-2搭建首页

尝试练习：

1、将“定价”“品牌”“优惠价”“VIP价”等文字的字体属性设定为“宋体”“12px”。

2、若将“定价”“品牌”“优惠价”“VIP价”等文字的字体设定为其它字体，如“楷体”，如何设置？请尝试操作。