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

下载本文档

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

文档简介

网页设计与制作项目式教程（HTML+CSS）（慕课版）项目四综合电商类网页开发项目——制作“助农乐购”网站商品页面任务4.3制作“助农乐购”网站商品页面教学任务任务项目实施任务分析页面的框架结构主要包括头部区、主体区、脚部区，其中脚部区跟注册页的是一样的，主要分析头部区和主体区的框架结构。1.头部区：包括“头部顶端”、“头部搜索”、“头部导航”部分。框架结构图及主要设置要求如图所示。任务4.3制作“助农乐购”网站商品页面项目实施任务分析2.主体区：包括“导航路径”、“商品预览区”、“商品介绍区”部分。框架结构图及主要设置要求如图所示。任务4.3制作“助农乐购”网站商品页面任务4.3制作“助农乐购”网站注册页面知识储备知识导图根据任务分析，在之前掌握知识的基础上，完成本任务还需要学习的主要知识点有CSS伪类、元素类型转换、iframe框架，知识导图如图所示。知识储备新知学习1：CSS伪类1.CSS伪类的作用和语法

CSS伪类是用来添加一些选择器的特殊效果。它可以给某些特定的元素设置样式规则，从而添加一些特定的样式，实现更精细化的样式效果。CSS伪类通常以:冒号的形式出现，被放置在CSS选择器的末尾。基本语法规则为：

选择器:伪类{样式语句;}任务4.3制作“助农乐购”网站商品页面知识储备新知学习1：CSS伪类2.超链接的CSS伪类CSS伪类的应用场景非常广泛，其中最常见的是用于超链接样式的控制。例如：你想让鼠标停留在某个超链接文字上时，文字颜色发生变化，这时就可以使用CSS伪类来实现这个效果。在支持CSS的浏览器中，链接的不同状态都可以以不同的方式显示。伪类示例描述:linka:link未访问的链接，用于定义链接的常规状态。:visiteda:visited已访问的链接，用于判断已经访问过的链接。:hovera:hover鼠标划过的链接，用于表现鼠标覆盖在链接上的状态。:activea:active已选中的链接，用于表现鼠标按下时的链接状态。任务4.3制作“助农乐购”网站商品页面知识储备新知学习1：CSS伪类3.超链接的CSS伪类样式举例任务4.3制作“助农乐购”网站商品页面知识储备新知学习2：元素类型转换1.display属性及属性值

网页元素类型有两大类，一类是块级元素，一类是行内元素，这两类元素的类型不是一层不变的，可以根据需要来转换。CSS中的display属性可以规定元素应该生成的框的类型，从而用来改变元素的显示类型。display常用属性值如下表所示：任务4.3制作“助农乐购”网站商品页面属性值描述none此元素不会被显示。block此元素将显示为块级元素，此元素前后会带有换行符。inline默认。此元素会被显示为内联元素，元素前后没有换行符。inline-block行内块元素。list-item此元素会作为列表显示。table此元素会作为块级表格来显示（类似<table>），表格前后带有换行符。table-row此元素会作为一个表格行显示（类似<tr>）。table-column此元素会作为一个单元格列显示（类似<col>）table-cell此元素会作为一个表格单元格显示（类似<td>和<th>）inherit规定应该从父元素继承display属性的值。知识储备新知学习2：元素类型转换1.display属性的应用举例

display属性的应用场景很多，其中经常会被用于横向列表导航栏的制作。代码如下：任务4.3制作“助农乐购”网站商品页面在没有为列表的li标签设置类型转换前，因为li是块元素，会换行，导航栏是竖式排列的。如果要将此导航栏的选项改为横向分布，可给li元素添加display:inline-block;的样式语句，它会将li元素转换为行内块元素，这样列表项就不会换行了。知识储备新知学习2：元素类型转换1.display属性的应用举例

display属性的应用场景很多，其中经常会被用于横向列表导航栏的制作。代码如下：任务4.3制作“助农乐购”网站商品页面如果希望几个列表项在列表宽度范围内平均分布，则可以将li元素转换为表格单元格，将其父元素（ul元素）转换为表格。知识储备新知学习3：框架元素iframe1.iframe元素是HTML中一种用于将一个网页嵌入到另一个网页中的内联框架元素，用来加载和显示来自不同源的内容，如其他网站或者同一网站内的其他页面。它常常被用于框架集成、嵌入广告或视频、动态加载、跨域通信等方面。iframe元素由<iframe>标签定义，常用属性如表所示。任务4.3制作“助农乐购”网站商品页面属性值描述namename定义iframe框架的名称。widthpx定义ifame框架的宽度。heightpx定义ifame框架的高度。srcurl定义在iframe框架中显示的网页文档的URL。scrollingyes（是）no（否）auto（自动）定义是否在iframe框架中显示滚动条。frameborder1（是）0（否）定义是否显示iframe框架的边框。知识储备新知学习3：框架元素iframe2.ifame语法及举例：

创建一个ifame框架的基本语法格式如下：

<iframesrc=""width="800"

height="600"></iframe>

这样就实现了在一个800*600px大小的iframe框架当中嵌入了“淘宝网”主页的内容。任务4.3制作“助农乐购”网站商品页面知识储备新知学习3：框架元素iframe2.ifame语法及举例：如果要嵌入本项目内的其他网页，也可将src属性的值设置为项目内其他网页的相对路径地址。例如要创建一个500*300px大小的无边框无滚动条的iframe窗口，嵌入注册页reg.html的内容，则代码如右所示：任务4.3制作“助农乐购”网站商品页面<iframesrc="reg.html"width="500"height="300"frameborder="0"scrolling="no"></iframe>知识储备新知学习3：框架元素iframe2.ifame语法及举例：

在实际应用中，也经常会使用超链接来控制在iframe框架中显示不同的嵌入内容，例如要实现如图所示的，点击“淘宝”或“注册页”超链接就可以在同一iframe框架中显示对应的页面内容。这里代码设置要点是，需要为<iframe>标签设置name属性，然后将超链接的target属性值设置为跟那么值相同，即让超链接指向的内容显示在iframe框架中。任务4.3制作“助农乐购”网站商品页面操作实践任务实践4.3.1：搭建页面基础1.设置HTML头部标签信息在“助农乐购”网站项目CSS目录中新建goods.css文件，打开“助农乐购”网站项目列表中的goods.html文件，在头部标签<head>内设置网页标题，引入CSS文件，具体代码如下：任务4.3制作“助农乐购”网站商品页面操作实践任务实践4.3.1：搭建页面基础2.2.从注册页拷贝脚部区模块根据分析，商品页和注册页的脚部区模块是一摸一样的，所以将reg.html、reg.css中关于脚部区模块的代码分别复制到goods.html、goods.css中。任务4.3制作“助农乐购”网站商品页面操作实践任务实践4.3.2：制作页面头部区1.搭建头部区主干结构根据之前对头部区的结构分析，头部区分为顶端、搜索、导航栏三个部分，分别用div元素布局。在<body>…<body>内首先书写头部区三个部分的主干结构代码。任务4.3制作“助农乐购”网站商品页面操作实践任务实践4.3.3：制作商品导航路径1.搭建主体区主干结构根据之前对主体区的结构分析，主体区可以分为“商品导航路径”、“商品预览”、“商品介绍”三个区域，分别用div元素布局。在<body>标签内头部区代码后书写主体区部分的主干结构代码。任务4.3制作“助农乐购”网站商品页面操作实践任务实践4.3.3：制作商品导航路径2.制作商品导航路径

该区域由1行文字超链接组成导航路径。编写其Html+CSS代码。任务4.3制作“助农乐购”网站商品页面操作实践任务实践4.3.4：制作商品预览区根据对商品预览区的结构分析，该部分包括左侧的“商品缩略图”和右侧的“商品购买信息”部分，用div元素布局。任务4.3制作“助农乐购”网站商品页面1.制作“商品缩略图”部分根据分析，该部分由2个div构成，1个div里放商品大图，1个div里放5个商品缩略小图。在商品预览区<divclass="main_show">…</div>标签内书写代码。操作实践任务实践4.3.4：制作商品预览区任务4.3制作“助农乐购”网站商品页面2.制作“商品购买信息”部分根据分析，该部分由1个h3标题，1个文本段落，1个form表单构成。操作实践任务实践4.3.5：制作商品介绍区根据对商品介绍区的结构分析，该部分包括上部的“介绍导航”和下部的“介绍框架”部分，用div元素布局。当点击“介绍导航”上的超链接时，能在“介绍框架”内显示相应的内容，比如点击“购买须知”，会显示如图4-51所示内容，该功能由iframe框架实现。该部分由1个无序列表构成，里面包括4个带超链接功能的列表项。任务4.3制作“助农乐购”网站商品页面任务拓展根据任务实践4.3.5的内容，设计完善商品介绍

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

温馨提示

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

最新文档

评论

0/150

提交评论