网页设计与美工 全市一等奖

项目六表格处理与网页布局>>2023/6/182023/6/18项目导入

周扬是一个听话、孝顺父母的中职学生。暑假里和爸爸妈妈一起去北京旅游，周扬对北京充满了向往和热爱，他在北京玩得很开心，用家里新买的数码相机拍摄了很多照片，北京的很多景点给周扬留下了深刻的印象。从北京回来之后，他想把在北京的见闻做成一个网站，和大家分享他对祖国首都的美好记忆。于是他在网页中插入表格，开始了网站的制作。项目导入2023/6/18任务分析1

首先，周扬想要制作一个景点介绍的网页，作为网站的首页，他想在网页中利用表格的布局功能，在网页中插入图片和文字等元素，简要介绍北京的一些景点，效果如图6-1-1所示。在这个过程中，周扬将会学到：

（1）在网页中插入表格，编辑表格的方法；

（2）在表格中插入嵌套表格的方法；

（3）在表格中插入图片和文字的方法。任务分析图6-1-1网站首页效果图任务分析2023/6/182023/6/18相关知识1相关知识1.插入表格在文档窗口中，将光标放在需要创建表格的位置，单击“常用”工具栏中的“表格”按钮，弹出“表格”对话框，指定表格的属性后，即可在文档窗口中插入设置的表格。相关知识2023/6/182.选择表格对象在对表格、行、列、单元格属性的设置之前，必须先选择这些对象。选择整个表格的方法是在表格内任意处单击，然后在状态栏中单击<table>标签即可；也可在单元格任意处右单击，然后在弹出的快捷菜单中单击执行“表格”→“选择表格”命令。要选中某一单元格，按住Ctrl键，鼠标在需要选中的单元格单击即可；或者，选中状态栏中的<td>标签。要选中连续的单元格，按住鼠标左键从一个单元格的左上方开始向要连续选择单元格的方向拖动。要选中不连续的几个单元格，可以按住Ctrl键，单击要选择的所有单元格即可。要选择某一行或某一列，将光标移动到行左侧或列上方，鼠标指针变为向右或向下的箭头图标时，单击即可。相关知识2023/6/183.设置表格属性选中一个表格后，可以通过属性面板更改表格属性。4.设置单元格属性把光标移动到某个单元格内，可以利用单元格属性面板对这个单元格的属性进行设置。相关知识2023/6/185.插入、删除表格的行和列选中要插入行或列的单元格，右单击，在弹出的快捷菜单中选择“插入行”或“插入列”或“插入行或列”命令即可。如果选择了“插入行”命令，在选择行的上方就插入了一个空白行，如果选择了“插入列”命令，就在选择列的左侧插入了一列空白列。如果选择了“插入行或列”命令，会弹出“插入行或列”对话框，可以设置插入行还是列、插入的数量，以及使在当前选择的单元格的上方或下方、左侧或是右侧插入行或列。要删除行或列，选择要删除的行或列，右单击，在弹出菜单中选择“删除行”或“删除列”命令即可。相关知识2023/6/186.拆分与合并单元格拆分单元格时，将光标放在待拆分的单元格内，单击属性面板上的“拆分”按钮，在弹出对话框中，按需要设置即可。合并单元格时，选中要合并的单元格，单击属性面板中的“合并”按钮即可。2023/6/18任务实施1Step1.建立站点并新建网页Step2.利用表格布局网页任务实施2023/6/18学习评价1学习评价序号评价指标自我评价1能够独立完成网站文件夹及子文件夹的创建。（10分）

2能够在网页中插入表格，正确设置表格的行数、列数、表格宽度、边框粗细等（10分）

3能够在表格中指定位置插入图片文件top.jpg和bottom.jpg（10分）

4能够在表格属性栏中设置表格对齐方式。（5分）

5能够在指定的位置插入表格，正确设置表格的行数、列数、表格宽度、边框粗细等（10分）

6能够正确拆分指定的单元格（10分）

7能够在指定的单元格中插入图片。（10分）

8能够在指定的单元格中插入文字。（10分）

9能够在正确的位置保存网页，预览网页（10分）

10能够独立完成任务（5分）

11学有余力，对小组内其他同学进行过辅导。（10分）

2023/6/18任务分析2任务分析

完成了首页的制作之后，周扬还想要制作“故宫”、“鸟巢”、“大剧院”、“航空博物馆”等四个网页，效果如图6-2-1、图6-2-2、图6-2-3、图6-2-4所示，这时他想到还需要制作一个导航栏来将各个网页链接起来，如图6-2-5所示。在这个过程中，周扬将会学到：（1）使用PhotoshopCS5制作导航栏背景图片的方法；（2）利用表格布局文字，设置表格背景图片，建立超级链接，制作导航栏的方法；（3）在表格中插入表格，在表中插入图片的方法。图6-2-1故宫网页效果图图6-2-2鸟巢网页效果图任务分析2023/6/182023/6/18图5-2-3大剧院网页效果图图5-2-4航空博物馆网页效果图任务分析2023/6/18图5-2-5导航栏效果图任务分析相关知识2023/6/18相关知识2图6-2-6渐变工具图6-2-7渐变工具栏相关知识2023/6/181．单击渐变下拉列表框右侧的三角形，可以打开渐变下拉面板，在其中可以选择一种渐变颜色进行填充。如图6-2-8所示。图6-2-8渐变下拉面板相关知识2023/6/182.单击“渐变预览条”可以弹出“渐变编辑器”对话框，如图6-2-9所示。图6-2-9渐变编辑器2023/6/18任务实施2Step1.利用Photoshop的“渐变工具”制作导航栏背景图片；Step2.利用表格布局制作导航栏；任务实施Step3.完成“故宫”、“鸟巢”、“大剧院”、“航空博物馆”等网页的制作。2023/6/18学习评价2学习评价序号评价指标自我评价1能够打开Photoshop“渐变编辑器”对话框，对色标的颜色进行设置。（10分）

2能够利用Photoshop的渐变工具，进行渐变填充，完成导航栏背景图片的制作。（10分）

3能够在网页中插入、编辑表格（10分）

4能够在单元格中插入背景图片，输入文字，完成导航栏的制作。（20分）

5能够完成“故宫”网页的制作，并将其保存在files文件夹下。（10分）

6能够完成“鸟巢”、“大剧院”、“航空博物馆”等网页的制作，并将其保存在files文件夹下。（15分）

7能够完成导航栏中的文字与对应网页的超级链接。（10分）

8能够独立完成任务（5分）

9学有余力，对小组内其他同学进行过协助或辅导。（10分）

2023/6/18项目总结

经过一番努力，周扬终于完成了网站的制作，他保存了文件，关闭了自己心爱的电脑，走到阳台上，望着夜空中升起的一轮明月，呼吸着清新的空气，梳理起自己学到的内容：1.在网页中插入和编辑表格，在表格中插入文本、图片等网页元素。2.利用表格布局网页，制作导航栏，建立导航栏与网页间的超级链接。3.学习了Photoshop的渐变工具，学习了渐变编辑器对话框的设置，制作了导航栏背景图片。这是一个宁静的夜晚，回想起在北京旅游的快乐时光，周扬开心地笑了。项目总结2023/6/18项目实训项目实训

通过学习本项目中制作网站的方法，3-5人组成一个项目小组，制作一个网站。具体要求：1．项目组内要选出一名组长负责组织、协调，通过小组讨论，制定出评价量规，对小组成员进行评价，小组内各成员要有具体明确的分工。2．网页素材可以通过手机、数码相机进行拍摄或从网上下载。3．利用Photoshop对素材进行剪切、添加文字等操作，制作网页所需的