网站规划建设与管理维护（第三版） 课件 单元 4 构建CSS3样式与网页布局.pptx

单元4构建CSS3样式与网页布局;单元4构建CSS3样式与网页布局;单元内容及任务说明;任务实施-体验CSS外部样式表;任务实施-体验CSS外部样式表;;相关知识;相关知识;任务实施-CSS样式应用;任务实施-CSS样式应用;任务实施-CSS样式应用;任务实施-CSS样式应用;相关知识;相关知识;相关知识;相关知识;相关知识;相关知识;相关知识;相关知识;相关知识;任务实施班级简历网页布局;任务实施-班级简历网页布局;任务实施-班级简历网页布局;任务实施-班级简历网页布局;相关知识;相关知识;本章小结;习题;习题;习题;习题;习题;习题;（二）中文版网页制作——index.html

1．在站点根目录中新建文件夹，将其命名为zhuwenj。在zhuwenj文件夹中新建网页index.html。

2．设计各布局方框，导入相关图像和文字。

3．导航中的“首页”超链接到default.html网页；“中文版”超链接到zhuwenj\index.html网页；english超链接到zhuwenj\english.html网页；“知识竞赛”超链接到zhuwenj\jingsai.html网页。

;（三）英文版网页制作——english.html

1．通过复制index.html，在zhuwenj文件夹中生成新网页english.html。

2．修改其中的中文文字，使之更换为英文文字。

3．制作完成后的效果如图4-65所示。

;（四）知识竞赛网页制作——jingsai.html

1．在zhuwenj文件夹中新建网页jingsai.html。

2．插入一个表单，在表单中输入图4-66所示的文字和相关表单控件。

3．单击“提交答案”按钮时，表单动作为发送到邮箱teacher@。

4．制作完成后的效果如图4-66所示。

;四、上机练习题

在D盘建立一个站点根目录文件夹，以“学号+姓名”命名。把chapter4\上机练习\images文件夹复制到“学号+姓名”文件夹中，并将该文件夹定义为站点。

（一）主页制作——index.html

1．在站点根目录新建网页index.html。

2．利用div完成界面布局，利用css控制各网页元素。

3．相册中的图像采取从左到右的滚动方式显示图片。

4．制作完成后的效果如图4-67所示。

;（二）二级子网页制作——日志网页log.html

1．在站点根目录新建网页log.html。

2．利用div完成界面布局，利用css控制各网页元素且编写格式风格一致的网页，复制index.html文件中的css格式要求。

3．制作完成后的效果如图4-68所示。

;（三）三级网页制作——大学军训militaryTraining.html

1．在站点根目录新建网页militaryTraining.html。

2．利用div完成界面布局，利用css控制各网页元素且编写格式风格一致的网页，复制index.html文件中的css格式要求。

3．制作完成后的效果如图4-69所示。

;图4-69大学军训网页——militaryTraining.html

（四）完成各网页链接

1．在主页中链接二级网页。在index.html中的“日志”链接到log.html。

2．在二级网页中链接三级网页。在log.html中的“大学军训”链接到militaryTraining.html。

3．完成各级网页的链接。在log.html的导航条中将“首页”链接index.html；在militaryTraining.html的导航中将“首页”链接index.html，“日志”链接log.html。

实训素材：chapter4\素材\images，chapter4\素材\日志.txt，chapter4\素材\大学军训.txt

;谢谢！