网页设计与制作项目式教程（HTML+CSS）（慕课版）课件11.制作“助农乐购”网站主页_第1页
网页设计与制作项目式教程（HTML+CSS）（慕课版）课件11.制作“助农乐购”网站主页_第2页
网页设计与制作项目式教程（HTML+CSS）（慕课版）课件11.制作“助农乐购”网站主页_第3页
网页设计与制作项目式教程（HTML+CSS）（慕课版）课件11.制作“助农乐购”网站主页_第4页
网页设计与制作项目式教程（HTML+CSS）（慕课版）课件11.制作“助农乐购”网站主页_第5页
已阅读5页，还剩26页未读， 继续免费阅读

下载本文档

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

文档简介

网页设计与制作项目式教程（HTML+CSS）（慕课版）项目四综合电商类网页开发项目——制作“助农乐购”网站主页项目实施任务分析小丁制作完了商品页以后，就开始着手制作网站主页，根据页面的设计需求，最终效果如图所示：页面效果任务4.4制作“助农乐购”网站主页项目实施任务分析分析页面的框架结构，主要包括头部区、主体区、脚部区3个部分，其中头部区、脚部区跟商品页的是一样的，所以主要分析主体区的框架结构。主体区主要包括“广告导航”、“热卖推荐”部分。框架结构图及主要设置要求如图所示。任务4.4制作“助农乐购”网站主页知识储备知识导图在之前掌握知识的基础上，完成本任务还需要学习的主要知识点有CSS精灵图、定位布局，知识导图如图所示。任务4.4制作“助农乐购”网站主页知识储备新知学习1：CSS精灵图1.CSS精灵图的概念CSS精灵图（sprite）是一种背景图片的应用方式，将多个小图片整合到一张透明背景的大图片中，然后将这个大图作为背景图，通过background-position属性来使用。核心目的是有效地减少服务器接受和发送请求的次数，提高页面的加载速度。在使用精灵图时，需要精确测量每个小背景图片的大小和位置。任务4.4制作“助农乐购”网站主页知识储备新知学习1：CSS精灵图2.background-position属性值background-position属性我们在前面已经简单学习过，这里来详细讨论下它的属性值如何设置，如表所示。任务4.4制作“助农乐购”网站主页知识储备新知学习1：CSS精灵图3.位置值的计算插入精灵图之后，可以通过background-position属性在大图上进行定位来寻找需要的小图片。在进行定位时，只要找到目标图片的坐标点就可以了，那么要怎么寻找目标图片的坐标点呢？任务4.4制作“助农乐购”网站主页知识储备新知学习1：CSS精灵图3.位置值的计算把精灵图的横向当作X轴，纵向当作Y轴，左上角当作原点(0,0)，注意网页中的坐标X轴向右是正值，向左是负值；Y轴向下是正值，向上是负值。结合上图我们可以看到第二个小图标的左上角距离X轴原点有100px的距离，距离Y轴原点有0px的距离，那么第二个小图标的坐标点为(100,0)，由于原点是不动的，如果想要让第二个小图标显示出来，精灵图就需要向左移动100px，因此，第二个小图标的background-position属性值就为“-100px,0”，同理可得第三个小图标的值为“0,-100px”，第四个小图标的值为“-100px,-100px”。任务4.4制作“助农乐购”网站主页知识储备新知学习1：CSS精灵图4.CSS精灵图应用举例例如我们要制作如右图所示的导航栏图标，在不使用CSS精灵图技术时，需要将图标一个个插入到相应位置，而使用CSS精灵图则可以将这4个小图标先用图像处理工具拼合在一张大图上。任务4.4制作“助农乐购”网站主页知识储备新知学习1：CSS精灵图任务4.4制作“助农乐购”网站主页知识储备新知学习2：定位布局1.定位属性position在前面学习中介绍了文档流的知识，如果想让网页元素成为定位流，即实现在上下左右几个方向上的精确定位，则可以使用CSS的定位布局，通过position属性来设置元素的定位类型。position属性的常用定位方式，见表所示。任务4.4制作“助农乐购”网站主页知识储备新知学习2：定位布局2.定位的偏移量设置了position属性，仅仅只是确定了元素用哪种方式定位，不能体现元素的偏移量，则还需要用left、right、top或bottom来精确定义元素的偏移值。具体如下表所示。任务4.4制作“助农乐购”网站主页知识储备新知学习2：定位布局3.定位布局的语法：定位元素{position:定位方式;left:像素值;right:像素值;top:像素值;bottom:像素值;}任务4.4制作“助农乐购”网站主页知识储备新知学习2：定位布局4.定位布局的举例：任务4.4制作“助农乐购”网站主页定位布局前定位布局后知识储备新知学习2：定位布局5.堆叠属性z-index

当对多个元素同时进行定位时，定位元素之间有可能发生重叠，如果想调整元素的堆叠顺序，则可以对定位元素设置z-index属性，z-index属性只对定位元素起作用，其值是整数，默认值为0，可以是负数。值越大元素的堆叠顺序就越靠上，反之值越小元素的堆叠顺序就越靠下。任务4.4制作“助农乐购”网站主页操作实践任务实践4.4.1：搭建页面基础1.设置HTML头部标签信息在“助农乐购”网站项目CSS目录中新建index.css文件，打开“助农乐购”网站项目列表中的index.html文件，在头部标签<head>内设置网页标题，引入CSS文件，具体代码如下：任务4.4制作“助农乐购”网站主页操作实践任务实践4.4.1：搭建页面基础2.从商品页拷贝头部区、脚部区模块根据分析，主页和商品页的头部区、脚部区模块是一摸一样的，所以将goods.html、goods.css中关于头部区、脚部区模块的代码分别复制到index.html、index.css中。3.搭建主体区主干结构根据对主体区的结构分析，该部分包括“广告导航”和“热卖推荐”两大部分，用div元素布局。在<body>标签内头部区代码后书写主体区部分的主干结构代码，具体代码如下：任务4.4制作“助农乐购”网站主页操作实践任务实践4.4.2：制作广告导航区如图所示，根据对广告导航区的结构分析，该部分包括左边的“侧导航”和右边的“广告图”两大部分，用div元素布局。1.制作“侧导航”部分任务4.4制作“助农乐购”网站主页操作实践任务实践4.4.2：制作广告导航区如图所示，根据分析，该部分由1个无序列表ul构成，列表内有12个列表项li，每个列表项内包括图标和导航文字。在“广告导航”模块<divclass="banner">…</div>内书写以下代码：任务4.4制作“助农乐购”网站主页操作实践任务实践4.4.2：制作广告导航区任务4.4制作“助农乐购”网站主页CSS样式代码如下：操作实践任务实践4.4.2：制作广告导航区2.制作“广告图”部分如图所示，根据分析，该部分由1个广告图和2个轮播按钮构成，轮播按钮分别布局在广告图的最左侧和最右侧垂直居中的位置，用div元素布局。具体代码如下：任务4.4制作“助农乐购”网站主页操作实践任务实践4.4.2：制作广告导航区2.制作“广告图”部分需要注意的是，一般广告图上的轮播按钮在默认状态下是隐藏的，当鼠标覆盖到轮播按钮上方时，轮播按钮才会出现，如图所示。所以轮播按钮除了设置定位布局外，还需要用display属性来实现隐藏和显示的效果。任务4.4制作“助农乐购”网站主页操作实践任务实践4.4.2：制作广告导航区提示：如果要让轮播按钮布局在广告图垂直方向居中的位置，如果直接设置上偏移值top为广告图高度的一半即200像素，会发现按钮靠下，并不在垂直居中的位置。这是因为偏移值的计算是以定位元素的左上角为基准点的，而不是中心点。所以这里就还需要减去它本身的高度的一半，以保证轮播按钮的中心点挪到上偏移200像素的位置，所以这里轮播按钮的上偏移值应该为：广告图高度一半（200像素）-按钮高度一半（20像素）=180像素，如图所示。任务4.4制作“助农乐购”网站主页操作实践任务实践4.4.3：制作热卖推荐区如图所示，根据对热卖推荐区的结构分析，该部分包括上面的“热卖推荐导航”和下面的“热卖推荐展示”两大部分，用div元素布局。1.制作“热卖推荐导航”部分任务4.4制作“助农乐购”网站主页操作实践任务实践4.4.3：制作热卖推荐区1.制作“热卖推荐导航”部分如图所示，根据分析，该部分由1个无序列表ul构成，列表内有8个列表项li。在“热卖推荐”模块<divclass="hot">…</div>标签内书写以下代码：任务4.4制作“助农乐购”网站主页CSS样式代码操作实践任务实践4.4.3：制作热卖推荐区2.制作“热卖推荐展示”部分如图所示，根据分析，该部分由2个无序列表ul构成，每个列表内有5个列表项li，用来布局商品展示块。任务4.4制作“助农乐购”网站主页操作实践任务实践4.4.3：制作热卖推荐区任务4.4制作“助农乐购”网站主页HTML代码如下：操作实践任务实践4.4.3：制作热卖推荐区任务4.4制作“助农乐购”网站主页CSS代码如下：任务拓展利用所学，在主页右边设计制作一个导航工具栏，要求在窗口固定位置，不随页面滚动。效果如图所示。制作导航工具栏任务4.4制作“助农乐购”网站主页小结延伸任务小结本任务围绕“助农乐购”网站主页的制作，分析了页面的结构要素，介绍了CSS精灵图、定位布局的知识与技能，综合应用完成了页面的制作。任务4.4制作“助农乐购”网站主页项目小结通过本项目的学习，小丁完成了助农乐购网站的注册页、商品页以及主页的制作任务，掌握了表单、iframe框架、CSS进阶选择器的使用方法以及CSS精灵图和定位布局的应用。小丁的职业技能和

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

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

最新文档

评论

0/150

提交评论