项目七--设计与制作中小企业形象网站首页

1、项目七 设计与制作中小企业形象网站首页主要内容项目引导项目任务书项目任务实施1233项目任务分析4自学与拓展35项目引导对于电子商务网站的设计与制作而言，首先是对网站首页的确定。网站首页又称网站主页，是用户了解整个网站的关键，也是体现整个网站的主题和制作风格的关键。在网页制作中Photoshop除了可以完成网站图像素材的编辑处理外，还能完成网站页面效果图的设计与制作，然后对效果图文件进行切片并最终导出生成页面图像素材及网页文件。通过对首页的的设计与制作，有助于掌握常规电子商务网站的页面制作流程，为网站的子页面制作打下基础。本项目将通过对浙江内利信息技术有限公司的企业形象展示网站首页的制作来使学

2、生掌握企业网站首页制作的主要流程。项目任务书能力目标学习完本项目后，学生应当能够依据网站的首页效果图来来制作网站的首页，包括：将PSD效果图切片导出生成网页图像素材通过图像素材创建简单Flash动画通过Dreamweaver创建表格来制作网页项目任务引导任务一首页效果图切片处理及导出本任务目标是根据浙江内利信息技术有限公司的企业形象展示网站首页效果图来制作网站的首页面项目任务实施任务一首页效果图切片处理及导出 1.启动Photoshop，打开网页效果图 。为了提高制作效率，目前很多网站通常直接通过网页模板来修改完成。网页模板格式最常见的是psd，可以将模板文件直接通过Photoshop打开，然

3、后根据客户的需要进行相应的修改，最后完成最终的页面效果。由于在前续项目中已经熟练掌握Photoshop的操作，在本任务中重点讲述效果图的切片处理以及如何通过Dreamweaver完成网站首页面的制作，其中通过Photoshop打开的首页效果图文件“内利首页.PSD”项目任务实施任务一首页效果图切片处理及导出2.设置标尺和参考线为了方便定位和测量距离，需要设置标尺和参考线。首先将标尺和参考线的单位进行常规设置。执行“编辑首选项单位与标尺”命令，在弹出的对话框中分别设置“单位与标尺”、“参考线、网格、切边和计数”。在本任务中将“单位与标尺”中的“标尺”单位设置为“像素”。通过执行“视图标尺”命令，

4、在工作区边缘显示标尺，便于参考线定位。项目任务实施任务一首页效果图切片处理及导出3.使用切片工具通过单击“工具箱”的切片工具，使鼠标变成切片刀，可对工作区的图像进行切片操作。首先，考虑按整体布局结构进行切片。通过切片工具，对首页头部的企业logo沿图片边界进行框选，完成第一个切片。项目任务实施任务一首页效果图切片处理及导出然后对整个横向导航栏和banner广告宣传栏进行整体切片，对于颜色复杂的区域，常采用整体框选。在切片过程中，可借助参考线定位。完成页面中头部的切片项目任务实施任务一首页效果图切片处理及导出接着对页面主体部分进行切片。从左边的“内利简介”开始，将标题栏、图片分别切片，便于在页面

5、编辑时替换。项目任务实施任务一首页效果图切片处理及导出再是对尾部的切片，其中的文字部分，由于在Dreamweaver中可以重新输入，切片不需要考虑。在尾部导航列表中重复的箭头图标，只需切片其中一个图标，其余在Dreamweaver中引用切片的这个图标既可。另外切片时关注的是尾部区域不同图案的切片。尾部切片完成项目任务实施任务一首页效果图切片处理及导出最后是对网页背景和边框的处理。整个页面外边沿是带阴影效果的圆角边框，在页面内各区块外沿也带有细线框，这些在Dreamweaver中很难实现，大都是通过表格背景图片的形式加以处理，因此需要在这对效果图进行切片。同时在切片时还需要考虑，网页随着页面内容

6、更新，可能会拉长变宽等。先对整个页面带阴影效果的圆角边框进行切片，首先从左边框非圆角区域中切片一块，该切片用于作左边框背景。然后是底部的圆角矩形区域，进行切片如图7-8所示，总共切成四份。其中“94”号切片用于底部边框的平铺背景。项目任务实施任务一首页效果图切片处理及导出项目任务实施任务一首页效果图切片处理及导出然后，同理对右边框进行切片，如图所示圈选部分。由于上边沿部分为全白，可以在Dreamweaver中设置，则就不用切片。项目任务实施任务一首页效果图切片处理及导出4.使用切片选择工具如果要对切片进行精确调整，同时对切片进行命名、拆分、附加链接等操作来进一步完善则需要通过“切片选择工具”来

7、完成。单击“工具箱”，切换选中“切片选择工具”，再点击网页logo的切片，单击右键弹出快捷菜单项目任务实施任务一首页效果图切片处理及导出在弹出的快捷菜单中选择“编辑切片选项”，弹出该切片的切片选项对话框，如图7-11所示。在对话框中，将名称改为“logo”后，单击“确定”按钮。项目任务实施任务一首页效果图切片处理及导出选择横向导航栏切片，在切片选项对话框中将名称改为“daohang”。选择左边框的切片，在切片选项对话框中将名称改为“zuo”项目任务实施任务一制造业类企业网站赏析 再用同样的方法，将左边框底部圆角矩形区域的切片依次命名成“zuo1”、“zuo2”、“zuo3”和底部切片“bott

8、om”。右边框也依次为“you”、“you1”、“you2”、“you3”项目任务实施任务一首页效果图切片处理及导出 然后选择头部的banner条切片，命名为“banner”。主体部分的切片进行设置，首先是“内利简介”这一标题栏。由于该标题栏是圆角矩形，标题栏内的内容可以更新，则该标题栏宽度不能固定。因此可考虑将该标题栏切片分为几块，左侧带圆圈的圆角矩形图片和右侧的圆角矩形图片，中间可使用背景图片平铺，这样宽度就变得可以调整。选择中间的切片并将其切片选项中的名称改为“btbei”，尺寸中宽度改为“5”像素，如图7-14所示，用于做标题背景平铺。其余左右两个圆角矩形分别命名为“btzuo”和“b

9、tyou”。这样其余“内利动态”、“内利加盟商”等宽度不一的标题栏，均可以使用“btzuo”、“btyou”和“btbei”这三个切片图片来构成。项目任务实施任务一首页效果图切片处理及导出标题图片下方的表格边框由灰色细线边框构成，这部分的切片和整个页面的外部边框切片类似，分别进行五个切片，命名为“zuobt1”、“zuobt2”、“dbt”、“youbt1”和“youbt2”,其中同侧2个切片的宽度要一致，可以通过参考线辅助也可以在切片选项中设置，如图7-15所示。另外主体部分中重复的箭头图标，只要选取其中一个图标进行切片即可，并将该切片命名为“arrow1”项目任务实施任务一首页效果图切片处

10、理及导出在合作伙伴这个区块，拖动参考线，将合作伙伴的图片切割出来即可，效果如图7-17所示。并将这些切片从左到右依次命名为“hz1”、“hz2”、“hz3”、“hz4”、“hz5”和“hz6”。项目任务实施任务一首页效果图切片处理及导出版权部分的切片设置，按照从左到右的顺序切割成三块，分别为左侧、中间用于平铺、以及右侧。其中左侧、中间用于平铺、右侧分别命名为“bq1”、“bq2”、“bq3”。然后将版权部分的箭头图标以及用于网站备案的警察卡通图像进行切割，依次命名为“arrow2”、 “p1”、“p2”和“p3”5.将切片完成后的图片另存为WEB格式。项目任务实施任务一首页效果图切片处理及导出

11、项目任务实施任务一首页效果图切片处理及导出然后要将切片导出，过渡到Dreamweaver就需要将图片保存为WEB格式。通过执行“文件存储为Web所用格式”命令，在弹出的对话框中作如图所示的设置，单击“存储”按钮即可。项目任务实施任务一首页效果图切片处理及导出单击按钮之后在弹出的“将优化结果存储为”对话框中，如图所示设置，将图片以“HTML和图像”的保存类型保存在前一项目设置的内利企业形象网站的站点根目录中。项目任务实施任务一首页效果图切片处理及导出5.预览导出的页面在Dreamweaver中，打开该站点的“index.html”文件，切片图片则保存在该站点的图像文件夹“images”中。可通过

12、浏览器预览该页面，完成从Photoshop过渡到Dreamweaver，实现图像切片的导出。项目任务分析任务一首页效果图切片处理及导出1.切片的作用加快图片加载速度；方便用图片做网页模版；方便对没有图片内容的地方修改；可以减少背景图片，若背景一致，切一小片然后选择表格背景平铺。2.切片工具选择切片工具，可以在图片中框选产生切片。 在工具选项栏中的样式设置为：正常，默认选项，通过框选拖动来确定切片长宽比例。 固定长宽比，设置高宽比。输入整数或小数作为长宽比。 固定大小，指定切片的高度和宽度，输入单位为像素值。 在通过切片工具创建切片时，按住 Shift 键并拖动可使切片为正方形，按住 Alt 键

13、可使切片从中心向四周扩展。 基于参考线的切片：可通过参考线在图像上定位，然后点选“基于参考线的切片”。可沿参考线创建相应的切片，同时将删除所有现有切片。基于图层的切片将包括图层中的所有像素数据。如果移动图层或编辑图层内容，切片区域将自动调整以包含新像素。3.切片类型 切片可按照内容类型分为：图像和无图像；按照创建方式分为：用户、基于图层和自动。使用切片工具创建的切片被称为用户切片，也是最常见的；通过图层创建的切片称作基于图层的切片。当创建用户切片或基于图层的切片时，将会自动生成自动切片来占据该用户切片或基于图层的切片的周围区域。也就是自动切片为图像中用户切片或基于图层的切片未定义的空间。基于图

14、层的切片：当图像文件为多图层时，可将各图层单独成为一个切片。选中要创建切片的图层，点选“图层”菜单列表中的“新建基于图层的切片”来生成。 由于基于图层的切片与图层的像素内容相关联，灵活性不高；自动切片则无法单独优化。但可以将自动切片和基于图层的切片转换为用户切片。通过切片选择工具的选项栏中的“提升”按钮实现。 项目任务分析任务一首页效果图切片处理及导出4.切片时的注意事项各个切片的边界尽可能多的处于同一横坐标或纵坐标上。这样便于调整各个切片的边界，也便于在Dreamweaver中编辑。在切片时，背景相同，重复出现的区域裁切成统一大小，只使用其中一张区域的图片即可。在Dreamweaver后期处

15、理时，颜色单一的区域，可直接使用表格或者背景颜色来设置，因此在切片的过程中，这部分切片的“切片类型”可选“无图像”。5.组合切片 可以将两个或多个切片组合为一个单独的切片。操作步骤为：首先选择切片选择工具，再按住Shift键后点选要组合的切片，最后点击右键在快捷菜单中选择“组合”。选择的组合切片如果不相邻，或者比例或对齐方式不同，则新组合的切片可能会与其它切片重叠。 组合切片将采用选定的切片系列中的第一个切片的优化设置。组合切片始终为用户切片，而对原切片是否含有自动切片无关。另外，基于图层的切片是无法进行组合的。项目任务分析任务一首页效果图切片处理及导出自学与拓展任务一首页效果图切片处理及导出

16、1.内利商城首页PSD效果图切片 对含有多图层的内利商城首页PSD图像，进行切片。切片后，并对结果进行优化，完成切片及网页文件的导出。自学与拓展任务一首页效果图切片处理及导出2.对切片进行不同的优化对含有动画的PSD促销信息图像进行切片。在“存储为WEB和设备所用格式”时，含有动画的切片保存为GIF动画格式，其余静态切片则保存为JPEG格式。项目任务引导任务二制作Flash banner条本任务目标通过Flash 来制作内利企业形象网站首页的banner宣传区动画项目任务实施任务二制作Flash banner条1.新建Flash文档打开Flash，选择新建文件，在“新建”列表中可选Flash文

17、件（ActionScript3.0）。Flash整个工作界面如图所示。Flash软件的运用也和Photoshop类似，也是通过各类浮动工作面板和菜单选项来完成的。项目任务实施任务二制作Flash banner条2.修改舞台大小 Flash工作区中显示文档的区域，被称为舞台，类似Photoshop的“画布”。修改文件的大小，可通过创建文件后的工作区中，在其文档的属性面板中的“大小”选项进行设置。在本任务中，舞台大小设置为838像素*312像素，其余采用默认选项。同样，也能通过执行执行“修改文档”命令来完成。项目任务实施任务二制作Flash banner条3.创建背景图层Banner宣传区动画由三

18、幅背景图像切换构成。首先，双击时间轴面板上的“图层1”，将其更名为“背景”，选中第1帧。然后执行“文件导入导入到舞台”命令，在弹出的对话框中通过路径选择“flash”文件夹中的“背景1.jpg”，文件完成导入。由于其余两个图像文件命名和“背景1.jpg”成序列，Flash可一次逐帧导入序列图像文件，这里先不使用，在弹出提示“是否导入序列中所有图像”中选“否”。选中该图片，并在位图的属性面板中设置其大小和位置，让其铺满舞台项目任务实施任务二制作Flash banner条在“背景”图层中，选中第40帧，通过右键选择“插入关键帧”将“背景1”图像延伸到第40帧。再选择导入“背景2.jpg”，调整其大

19、小位置并延伸到第80帧，以及同样操作“背景3.jpg”延伸到第120帧4.新建元件通过执行“插入新建元件”项目任务实施任务二制作Flash banner条在元件编辑界面中，输入文本“浙江内利信息技术有限公司”，楷体，大小为30。再在其下方输入“Zhejiang Neili Information Technology Co.,ltd”，调整位置，属性设置如图7-31所示。然后再选中文文字，选择“滤镜”面板，在添加滤镜中，选择“投影”，如图7-32所示设置。完成滤镜设置后，再分别将两段文字颜色设置为白色，通过单击“场景1”返回原舞台场景。项目任务实施任务二制作Flash banner条5.将元件

20、运用到舞台通过“插入图层”按钮 添加图层“图层2”，并重命名为“内利”。选中该图层，右键单击第40帧，在弹出的快捷菜单中选择“插入关键帧”。然后选中“内利”图层的第1帧，将“库”面板中的元件“内利文字”拖入到舞台上的左侧。项目任务实施任务二制作Flash banner条6.创建补间动画选中“内利”图层的第30帧，插入关键帧。在其属性面板完成如图7-33所示设置，即设置“Alpha”即透明度为100%，通常按照默认的设置即可。项目任务实施任务二制作Flash banner条6.创建补间动画选中“内利”图层的第30帧，插入关键帧。在其属性面板完成如图7-33所示设置，即设置“Alpha”即透明度为

21、100%，通常按照默认的设置即可。选中“内利”图层最后一个灰色的非空白帧，既39帧，插入关键帧。将实例“内利文字”的透明度改为0%。然后在两个关键帧之间的任意帧通单击右键在弹出的菜单中选择“创建补间动画”项目任务实施任务二制作Flash banner条然后，可以将播放头拖放至图层第1帧处，按下回车键，预览动画效果，如需停止播放课通过按“ESC”键来操作。7.创建“背景2.jpg”对应文字按照相同的方法新建元件“卡宣传”，文字内容“综合缴费 小额支付”，大小28，白色，灰色投影。再新建元件“卡宣传2”，文字内容“轻松便利生活 就要内利卡”，大小32，白色，灰色投影。返回“场景1”后，通过“插入图

22、层”按钮在“内利”之上添加图层“图层3”，并重命名为“card”。在该图层第40帧，插入关键帧，此时为白色的空白帧。再在第80帧插入关键帧。选中第40帧，将“库”面板中的元件“卡宣传”拖入到舞台边缘之外项目任务实施任务二制作Flash banner条再选中该图层第60帧，插入关键帧。然后移动该元件如图所示位置，并“创建补间动画”。项目任务实施任务二制作Flash banner条以此类推，新建图层“card2”，创建补间动画，使元件“卡宣传2”，从60帧开始到第79帧处的透明度从0%过渡到100%项目任务实施任务二制作Flash banner条8.创建“背景3.jpg”对应文字新建元件“shop

23、”，内容如图所示。项目任务实施任务二制作Flash banner条返回“场景1”后，新建图层“shop”。在该图层第80帧，插入关键帧，此时为白色的空白帧。选中第80帧，将“库”面板中的元件“shop”拖入到舞台项目任务实施任务二制作Flash banner条9.创建遮罩层在图层“shop”上方新建图层“遮罩”，在该图层第80帧，插入关键帧。在该图层第111帧，也插入关键帧。回到第80帧，单击工具箱的“矩形工具” ，在其属性面板中设置“矩形边角半径”为“50”，并在舞台上绘制圆角矩形。通过“选择工具”选中该形状，在属性面板，如图7-41所示设置，宽度和高度要求略大于元件“shop”中文字属性的

24、宽度和高度。项目任务实施任务二制作Flash banner条项目任务实施任务二制作Flash banner条项目任务实施任务二制作Flash banner条再选中该图层的第110帧，插入关键帧，将该形状拖动至完全覆盖“shop”中的文字。然后在80帧至109帧之间创建补间动画。选中“遮罩”图层，单击右键在弹出的菜单中选择“遮罩层”，完成对图层“shop”的遮罩项目任务实施任务二制作Flash banner条10.预览动画完成动画后，可以执行“文件发布预览”命令进行预览或者也可通过快捷键“Ctrl+ENTER”完成项目任务实施任务二制作Flash banner条11.调整动画速度通过预览，如果觉

25、得动画速度过快，可以通过“修改”菜单中的“文档”，在“文档属性”对话框中降低帧频值。12.保存flash动画通过“文件”菜单的“另存为”，将该动画文件保存为“banner.fla”。13.发布flash动画使动画文件能在网页中运用，可通过“文件”菜单的“发布设置”进行项目任务实施任务二制作Flash banner条1.舞台舞台是工作区中创建 Flash 文档时放置图形内容的矩形区域。舞台区域的内容能在 Flash Player 或WEB浏览器窗口中显示。在舞台上定位项目，可以通过“视图”菜单中的网格、辅助线和标尺来辅助定位。2.元件元件指创建一次即可多次重复使用的图形、按钮、影片剪辑或文本。对

26、应的三种类型分别是图形、按钮和影片剪辑。所有的元件都可通过库面板进行查看及使用。将元件从库面板中拖动到舞台上，就生成了该元件的一个实例。通过双击库面板中的元件，可进入元件编辑界面。在元件编辑界面中改变元件的属性，所有舞台上的元件实例属性会跟着发生变化，而改变实例的属性，元件的属性则不会发生变化。项目任务分析任务二制作Flash banner条3.库“库”面板是存储和组织在 Flash 中创建的各种元件的地方，它还用于存储和组织导入的文件，包括位图图形、声音文件和视频剪辑。 使用“库”面板可以组织文件夹中的库项目，查看项目在文档中使用的频率，并按类型对项目排序。在 Flash 中工作时，可以打开

27、任意 Flash文档的库，将该文件的库项目用于当前文档。Flash还提供几个含按钮、图形、影片剪辑和声音的范例库。 4.补间动作动画在一个关键帧上放置一个元件，然后在另一个关键帧上改变这个元件的大小、颜色、位置以及透明度等属性，Flash根据两个关键帧之间的内容变化创建的动画称为补间动画。补间动作动画创建后，时间轴面板上补间的背景色变为淡紫色，在起始帧和结束帧之间呈现一个实心长箭头。项目任务分析任务二制作Flash banner条5.遮罩层遮罩层可以将与遮罩层相链接的图形中的图像遮盖起来。用户可以将多个层组合放在一个遮罩层下，以创建出多样的效果。若要创建遮罩，则将图层指定为遮罩层，然后在该图层

28、上绘制或放置一个填充形状。可以将任何填充形状用作遮罩，包括组、文本和元件。然后可以通过创建的这些对象看到被遮罩层内的对象。作为遮罩层的对象，颜色、透明度、渐变等属性是被忽略的。例如不能通过渐变色来实现被遮罩层的渐变变化。运用遮罩制作而成的动画为遮罩层中的内容在动，而被遮罩层中的内容保持静止。 项目任务分析任务二制作Flash banner条1.补间形状动画 在一个关键帧上绘制一个形状，然后在另一个关键帧上更改该形状或绘制另一个形状等，Flash将自动根据二者之间的帧的值或形状来创建动画，它可以实现两个图形之间颜色、形状、大小、位置的相互变化。形状补间动画创建后，时间帧面板的背景色变为淡绿色，在

29、起始帧和结束帧之间呈现一个实心长箭头；构成形状补间动画的元素多为用鼠标或压感笔绘制出的形状，而不能是图形元件、按钮、文字等，如果要使用图形元件、按钮、文字，则必须先对其进行分离后才可以做形状补间动画，分离操作也可用快捷键“CTRL+B”来实现。为了更好地说明此动画的制作过程，举一个简单的例子来说明。创建补间形状动画，将“内利卡商城”五个字逐渐转变为5个圆形图案自学与拓展任务二制作Flash banner条关键步骤为在图层1的第1帧处，首先将文字分离，在第40帧关键帧处，将通过元件导入的5个圆形图案分离并删除文字。然后在第1帧到第39帧之间的任意帧上创建补间形状动画。自学与拓展任务二制作Flas

30、h banner条2.Flash导航条 在电子商务网页中，导航条也经常使用Flash来制作完成。在使用Flash制作导航条过程中， ActionScript变得必不可少。ActionScript 是Adobe Flash Player 运行时环境的编程语言。它可以在 Flash 内容和应用程序中实现交互性、数据处理以及其他功能，是Flash的脚本语言。新的ActionScript 3.0使用OOP（面对对象编程）。比如浙江内利信息技术有限公司企业网站首页的导航条就是采用Flash来制作完成的，里面运用了部分ActionScript的脚本语言自学与拓展任务二制作Flash banner条项目任务

31、引导任务三制作首页页面本任务目标通过任务一切片导出的首页图像素材，运用Dreamweaver来编辑完成内利企业形象网站的首页面1.启动Dreamweaver打开页面将任务所需素材放置入内利站点内各对应文件夹中。通过Dreamweaver打开任务一在内利站点中产生的首页“index.html”。为了便于分析页面结构布局，将视图通过单击“布局”工具栏的“扩展”按钮，进入扩展表格模式，在弹出的“扩展表格模式入门”对话框中点击“确定”项目任务实践任务三制作首页页面 项目任务实践任务三制作首页页面在该模式下，分析从Photoshop自动导出的网站首页面的结构布局模式，表格中单元格布局较为凌乱，为了提高网

32、页编辑效率，减少切片图片数量，只保留核心切片图片，一般需要通过Dreamweaver重新规划页面的表格布局来实现网站首页面的制作。打开通过项目六在“内利网站”站点中创建的空白网页“index.html”。项目任务实践任务三制作首页页面2.设置页面属性在页面“index.html”中，将网页标题设为“浙江内利信息技术有限公司” 。按下回车后，在页面名称后出现“*”标记，表示页面有修改而未保存。这时可通过执行“文件”菜单列表中的“保存”对修改内容进行保存后，“*”标记消失。项目任务实践任务三制作首页页面在默认的属性面板中单击“页面属性”按钮，在弹出的对话框中按照图片所示进行参数设置，单击“应用”按

33、钮后再点击“确定”即可完成页面属性设置。项目任务实践任务三制作首页页面3. 创建首页整体结构执行“插入记录表格”命令，在弹出的对话框中设定好表格的行数和列数等相关属性，在空白页面中插入一个1行3列、宽度为961像素的表格。然后选中该表格，在其属性面板中将表格的“对齐方式”设置为“居中”，背景颜色设为白色即值为“#FFFFFF”项目任务实践任务三制作首页页面将光标定位至第1列中，在其单元格的属性面板中将单元格的宽度设置为“48”，将图片“zuo.jpg”设置为单元格的背景图片将光标定位至第3列中，按照以上方法将单元格的宽度设置为“40”，将图片“you.jpg”设置为单元格的背景图片将光标置于第

34、2列中，在其单元格的属性面板中将单元格的高度设置为“21”，用于留白项目任务实践任务三制作首页页面4.创建首页logo区域按Tab键将光标切换到原表格的最后一列所在的单元格中，再按Tab键可自动在已有的表格基础上在下方追加一行。按Tab键光标切换至第2行第2列中，在其属性面板中将单元格的“垂直”参数设置为“顶端”在以上单元格中插入一个1行2列、宽度为100%的表格，单击“常用”插入栏中的“图片”按钮，在弹出的对话框中选择站点图像文件夹“images”下的图片“logo.jpg”，完成logo图片的插入，然后将该单元格的宽度设置为跟图片的宽度相一致即“337”像素。，在弹出的对话框中选择站点图像

35、文件夹“images”下的图片“logo.jpg”，完成logo图片的插入，然后将该单元格的宽度设置为跟图片的宽度相一致即“337”像素。项目任务实践任务三制作首页页面按Tab键将光标置于第2列中，将单元格的“水平”参数设置为“右对齐”，如图7-58所示。然后在单元格中输入文本“返回首页 | 加入收藏 | 联系我们”，至此完成logo区域的制作项目任务实践任务三制作首页页面5.创建首页导航栏部分将光标置于上一个表格的最后一个单元格中，按Tab键追加一行。将光标置于新插入行的中间单元格中，在单元格的属性面板中将其“水平”参数设置为“居中对齐”。 然后单击“常用”插入栏中的“媒体”下拉列表中的“F

36、lash”按钮 ，在弹出的“选择文件”对话框中选择站点根目录下的“flash”文件夹中的“dh.swf”文件，单击“确定”按钮，在弹出“对象标签辅助功能属性”对话框中，单击“确定”按钮，完成Flash文件的插入。项目任务实践任务三制作首页页面6.创建首页banner宣传区部分将光标置于上一个表格的最后一个单元格中，按Tab键追加一行。将光标移至新插入行的中间单元格中，在单元格的属性面板中将其“水平”参数设置为“居中对齐”。然后在该单元格中插入Flash对象“banner.swf”，完成了首页banner宣传区部分的制作。至此，网页头部区域已完成项目任务实践任务三制作首页页面7.创建首页主体区域

37、版块根据首页效果图所示，在主体区域版块，主要分为三个栏目区：“内利简介”、“内利动态”和“内利加盟商”。将光标置于上一个表格的最后一个单元格中，按Tab键追加一行。将光标移至新插入行的中间单元格中，在单元格的属性面板中将其“垂直”参数设置为“顶端”。在该单元格中插入1个1行5列、宽度为100%的表格。设置该表格第1、3、5列所在单元格的宽度，按照从左到右的顺序依次设置为“430”、“209”以及“213”。在表格第1行第1列所在的单元格中插入1个3行1列、宽度为100%的表格，将光标移至新插入表格第1行第2列的单元格中，插入一个1行4列宽度为100%的表格。将光标移至新插入表格的第1个单元格中

38、，将其宽度设为为“30”，插入图片“btzuo.jpg”，然后在第2列中将 “btbei.jpg”设置为该单元格的背景图片，并输入文字“内利简介”，选中文字，在其属性面板中将文字的大小设置为“14”，字体颜色设置为“白色”项目任务实践任务三制作首页页面按Tab键切换到下一个单元格，将“btbei.jpg”设置为该单元格的背景图片，设置单元格中的光标在水平方向上向右对齐，并输入文本“更多”，设置其大小为“12”，颜色为“白色”。继续将光标切换到下一个单元格，插入图片“btyou.jpg”，并设置该单元格的宽度为“10”，至此，完成了“内利简介”版块的标题栏部分的内容。在标签选择器中选中离当前单元

39、格最近的标签，按键盘上向右的光标键将光标，然后按Tab键将光标移至第2行所在的单元格中，插入一个2行3列，宽度为100%的表格。将第1行第1列的宽度和高度设置为“10”和“267”，将图像“zuobt1.jpg”设置为该单元格的背景图片。切换至“显示代码视图”，如图所示，将该单元格被选中的空格“”删除。项目任务实践任务三制作首页页面将光标移至第三列，按照同样的方法将单元格宽度设置为“10”，并将图像“youbt1.jpg”设置为单元格的背景图片。在第2行第1列的单元格中插入图像“zuoxia.jpg”，并将该单元格的宽度设置为“10”，删除单元格默认存在的空格。在第2列所在的单元格中将图像“x

40、iabj.jpg”设置为背景图像，在第3列中插入图像“youxia.jpg”。将光标移至原有表格第1行第2列的单元格中，将单元格“水平”参数设置为“居中对齐”，插入一个2行3列，宽度为90%的表格。将新表格的第1行高度设置为“30”，第1行第2列的宽度设置为“15”，然后在表格的第2行第1列中插入图片“nljj.jpg”，并将该单元格的宽度设为与图片宽度相同，在第2行第3列中输入内利简介的相关文本，通过如图所示设置文本首行缩进2个空格。项目任务实践任务三制作首页页面项目任务实践任务三制作首页页面对于“内利动态”栏目版块，按照前一栏目区“内利简介”的方法进行操作项目任务实践任务三制作首页页面对于

41、“内利加盟商”栏目版块，同样按照栏目区“内利简介”的方法操作。其中版块的内容部分可以在中间空白的单元格中插入一个3行1列，宽度为95%的表格。将第1列的“高度”设置为“9”，在第2列中插入一个1行3列，宽度为100%的表格，在新插入表格的第1列中插入图像“jm1.jpg”，并将该单元格的“宽度”和“高度”分别设置为“70”和“78”。将第2列的“宽度”设置为“10”，按Tab键切换至第3列，插入一个3行1列，宽度为100%的表格，根据首页效果图所示一次插入箭头图标及输入相应的文本项目任务实践任务三制作首页页面至此，首页主体区域部分的内容就完成了，页面预览效果如图所示。项目任务实践任务三制作首页页面8.创建网页底部中合作伙伴部分选中首页主体区域部分最外层的表格，按向右的光标键，连续按两次Tab键，在原有表格的基础上追加一行，将光标定位至中间单元格，插入1行3列，宽度为100%的表格，背景颜色设置为“#f1f1f1”。执行“窗口CSS样式”命