信息技术工单式教程课件—7

信息技术信息技术模块七 网页制作工单7.1 设计购物网站首页一、任务提出二、任务分析三、相关知识点四、任务实施五、总结与提高任务提出任务背景 王晶晶是呼伦贝尔电子商城的一名导购员，结合当下的电商环境，商城需要更新一个“电子产品”的销售购物网站首页，王晶晶申请加入项目组进行学习和实践。任务提出需解决以下问题需解决以下问题 问题问题如何制作静态网站首页？通过完成制作购物网站首页，使学生初步掌握html文本标签、超链接、图像定义和功能；掌握css字体样式、文本样式、颜色、区块、及盒子布局属性的功能；综合应用html+css设计页面样式技术，开发“购物网站”首页。任务的重点是html标签和css样式格式设置，难点是div+css样式的综合运用。任务分析操作流程图任务分析效果图任务分析相关知识点DIV+CSS，就是网页HTML代码主要使用DIV将内容模块化，用CSS控制其显示效果。好处很多，从前端层面来说，大大减轻工作量，提高工作效率。从界面布局来将，能够更准确更灵活的将页面元素定位，且保证在不同的环境下获得基本一致的效果。Div的盒子功能和css样式应用可以设计灵活多变的网页布局。Div+css任务实施制作购物网站首页一、启动HBuilderX编辑器，新建一项目文件gw1、在gw文件夹下index.html文件中，title里输入“购物网站”2、在css文件夹下新建style.css文件3、在img文件夹，存储网页中使用的图片素材任务实施制作购物网站首页二、在index.html文件的标签中用标签引入css外部文件style.css代码如下：任务实施制作购物网站首页三、编辑style.css文件，重置默认样式字体大小设为18px内边距和外边距的默认值为0去除文本装饰代码如下：body font-size:18px;margin:0;padding:0;text-decoration:none;任务实施制作购物网站首页四、导航栏内容及样式Index.html中设置导航栏内容：任务实施制作购物网站首页四、导航栏内容及样式Style.css中导航设置栏格式：任务实施制作购物网站首页五、设置Banner图Style.css中导航设置栏格式：imgmax-width:100%;index.html中添加banner图：任务实施制作购物网站首页六、设置商品栏：index.html中添加商品栏：任务实施制作购物网站首页六、设置商品栏：在style.css文件里，输入新品首发的css样式任务实施制作购物网站首页七、底边栏:在index.html输入“xx科技公司”在style.css文件中，设置底边栏的css样式总结与提高总结与提高总结与提高 制作购物网站首页的案例，导航栏关键制作购物网站首页的案例，导航栏关键是浮动设置，链接显示为块级元素；新品首是浮动设置，链接显示为块级元素；新品首发图片宽度为页面宽的发图片宽度为页面宽的30%，行内块级显示，行内块级显示；综合应用；综合应用div+css设计页面技术，练习并设计页面技术，练习并掌握字体样式、文本样式、颜色、背景功能掌握字体样式、文本样式、颜色、背景功能和和css盒子模型属性的功能。盒子模型属性的功能。