网页设计与美工 省赛获奖

>>2023/6/18项目十一APDiv的应用2023/6/18项目导入周扬加入了学校的美食社团，美食社团准备创建一个介绍中国八大菜系的网站，考虑到美味的宣传要占用太量的页面位置，周扬决定使用APDiv来布局网页，向同学们介绍中国八大菜系的各种美食。项目导入2023/6/18任务分析1首先，周扬想要制作一个主页来显示我国八大菜系的图片，如图11-1-1所示。然后再分别制作介绍八大菜系的网页，其中川菜网页如图11-1-2所示。最后通过主页中的文字与相应的菜系介绍网页链接，网页将利用APDiv进行综合布局，展现中国八大菜系的风采和韵味。在制作的过程中，周扬将学习到：（1）什么是APDiv；（2）绘制APDiv的方法；（3）利用APDiv布局网页的方法。任务分析图11-1-1美食团主页效果图任务分析2023/6/18图11-1-2川菜网页效果图2023/6/18相关知识11．APDiv概述网页中的绝对定位元素APDiv也被称为层，是用来精确控制浏览器窗口中对象位置的HTML元素，APDiv内可以放置文本、图像等其他可以在HTML文档中插入的网页对象。2.APDiv元素首选参数单击菜单栏中的“编辑”→“首选参数”命令，打开“首选参数”对话框，如图11-1-3所示。首选参数用于定义APDiv元素的显示、宽、高、背景颜色、背景图像、嵌套等参数。相关知识图11-1-3APDiv首选参数3．单个APDiv元素的属性面板，如图11-1-4。选项功能如下：（1）“CSS-P元素”：为选择的APDiv元素指定ID。每个APDiv必须有唯一的ID。（2）“左、上”：用于指定APDiv元素的位置。（3）“宽、高”：设定APDiv元素的大小。（4）“Z轴”：设置APDiv元素的叠放顺序，在浏览器中，编号大的APDiv元素出现在编号小的APDiv元素前面。（5）“可见性”：指定APDiv元素是否可见，有四个选项可用。（6）“类”：设置APDiv元素的CSS类。相关知识2023/6/18图11-1-4单个APDiv属性面板4．多个APDiv属性面板，如图11-1-5。（1）大部分选项与单个APDiv属性面板的项目相同。（2）“标签”：定义所选APDiv元素的HTML标签。相关知识2023/6/18图11-1-5多个APDiv属性面板2023/6/18任务实施1Step1.建立站点并新建网页

Step2.创建菜系介绍网页

任务实施2023/6/18学习评价1学习评价序号评价指标自我评价1能够创建网站根目录及子文件夹，新建index.html网页。（5分）

2能够在index.html网页中绘制一个APDiv元素，插入标题图片。（10分）

3能够在index.html网页中绘制一个APDiv元素，插入表格、图片及文字。（15分）

4能够在index.html网页中绘制一个APDiv元素，插入底部图片。（5分）

5能够将index.html网页另存为cuancai.html，删除标题图片，输入文字，重新设置APDiv元素（ID为apDiv1）的属性。（5分）

6能够将表格删除，输入介绍川菜的文字，重新设置APDiv元素（ID为apDiv2）的属性。（10分）

7能够重新设置APDiv元素（ID为apDiv3）的属性。（5分）

8能够绘制APDiv元素（ID为apDiv4），设置属性，建立链接。（10分）

9能够完成其余网页的制作，建立与主页文字的链接。（15分）

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

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

2023/6/18任务分析2完成了网站主页和介绍八大菜系的网页的制作后，周扬又利用APDiv进行综合布局，制作了一个美食网的欢迎网页，如图11-2-1所示。在制作网页的过程中，周扬还利用Photoshop对图像进行了处理，制作了精美的素材，使网页更加漂亮了。在这个过程中，周扬将会学到：（1）APDiv的属性设置；（2）使用APDiv布局网页；（3）Photoshop图层的应用。任务分析图11-2-1欢迎网页效果图任务分析2023/6/182023/6/18相关知识21．Photoshop图层面板相关知识图11-2-2图层面板2．APDiv元素与表格的转换（1）“将APDiv转换为表格”对话框，如图11-2-3。选项的作用：①“最精确”：若APDiv元素之间存在间隙，则通过插入单元格来填充这些间隙。②“最小：合并空白单元”：将一定距离以内的APDiv元素创建为相邻的单元格，即融合其间的间隙。③“使用透明GIFs”：将转换后表格的最后一行填充为透明的GIF图像。④“置于页面中央”：生成的表格在页面居中位置。⑤“防止重叠”：可以防止APDiv元素重叠。⑥“显示AP元素面板”：在转换完成后会显示AP元素面板。⑦“显示网格”：可以在转换后的文档中显示网格线。⑧“靠齐到网格”：可以将转换后的文档靠齐到网格。相关知识2023/6/18图11-2-3将APDiv转换为表格对话框相关知识2023/6/18（2）“将表格转换为APDiv”对话框，如图11-2-4。各选项的作用：①“防止重叠”：可以防止APDiv元素重叠。②“显示AP元素面板”：在转换完成后会显示AP元素面板。③“显示网格”：可以在转换后的文档中显示网格线。④“靠齐到网格”：可以将转换后的文档靠齐到网格。相关知识2023/6/18图11-2-4将表格转换为APDiv对话框2023/6/18任务实施2Step1.使用Photoshop图层样式制作文字效果

Step2.利用APDiv元素布局网页

任务实施2023/6/18学习评价2学习评价序号评价指标自我评价1能够使用Photoshop的图层及图层样式编辑图像素材。（20分）

2能够绘制apDiv1-apDiv4，并为其设置属性。（10分）

3能够绘制apDiv5-apDiv12，并为其设置属性。（15分）

4能够在apDiv1及apDiv5-apDiv12中插入图像。（15分）

5能够在apDiv3中输入文字并完成相应的设置。（10分）

6能够在apDiv4中插入图像。（5分）

7能够保存并预览网页（5）分

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

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

2023/6/18项目总结1．APDiv元素的创建与编辑。2．利用APDiv元素布局网页。3．学习了Photoshop图层的应用。项目总结

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