中职网页设计与制作(中国工信出版集团)教案：数字未来-Flex布局_第1页
中职网页设计与制作(中国工信出版集团)教案：数字未来-Flex布局_第2页
中职网页设计与制作(中国工信出版集团)教案：数字未来-Flex布局_第3页
中职网页设计与制作(中国工信出版集团)教案：数字未来-Flex布局_第4页
全文预览已结束

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

中等专业学校2022-2023-2教案编号：备课组别计算机课程名称网页设计与制作所在年级二年级主备教师授课教师授课系部授课班级授课日期课题任务10数字未来——Flex布局教学目标1.巩固CSS+Div布局和美化网页的方法和技巧2.学会使用Flex布局和美化网页的方法和技巧重点学会使用Flex布局和美化网页的方法和技巧难点学会使用Flex布局和美化网页的方法和技巧教法讲练法、演示法、任务驱动法教学设备多媒体机房教学环节教学活动内容及组织过程个案补充教学内容教学内容教学内容【复习导入】引导学生回顾上节课学习内容【教学过程及内容】任务描述：通过布局“数字未来”网页，学会使用Flex布局页面的方法和技巧。任务解析：在本任务中，需要完成以下操作：巩固CSS+Div布局和美化网页的方法和技巧。学会使用Flex布局和美化网页的方法和技巧。任务操作：将素材中的renwu10文件夹复制到D盘根目录。运行DreamweaverCC，新建站点“数字未来”，站点文件夹为D:\renwu10，在站点根目录下新建网页文件index.html；打开“页面属性”对话框，在“外观（css）”分类选项卡中设置背景颜色为#000，文本颜色为#FFF。创建嵌套Div。打开index.html，“插入→Div”,在DOM面板中输入Div的名字“#wrapper”；光标定位在“#wrapper”层中，再次选择“插入→Div”，分别插入嵌套Div,“#banner”和“#main”；同样的方法创建“#content”、“#img-list”嵌套Div，DOM面板如下所示。在CSS设计器中分别定义wrapper层的样式,设置宽为865px,左、右边界为auto在CSS设计器中定义banner层的样式,并插入“images”文件夹中的图像“1.jpg”banner的属性设置设置好banner层后的“拆分”视图在content层中输入“数字未来.doc”中的文本并编辑CSS在img-list层插入图像及Flex布局样式。光标定位在img-list层中，插入“images”文件夹中的“2.jpg”、“3.jpg”、“4.png”和“5.jpg”四幅图像，并设置四个图像间隔平均分配的flex布局样式具体操作：(7)保存文件，按F12预览网页效果。上机实训用Flex布局制作导航栏，效果如下所示。关键代码如下：li{flex:1; text-align:center; line-height:100px; list-style:none; background:green; border-right:1pxsolidgrey;}【课堂小结】教师引导学生小结本课所学内容。【作

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论