教学课件电子商务网页设计与制作3.3任务二 制作学设计吧“关于我们”页面(1).pptx
《教学课件电子商务网页设计与制作3.3任务二 制作学设计吧“关于我们”页面(1).pptx》由会员分享,可在线阅读,更多相关《教学课件电子商务网页设计与制作3.3任务二 制作学设计吧“关于我们”页面(1).pptx(27页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、教材配套资源页完整PPT课件教学课件电子商务网页设计与制作3.3任务二 制作学设计吧“关于我们”页面(1)1SAMPLE项目三 使用HTML编写页面搭建页面底层的基础2任务描述了解关于我们页面结构1技术引入Div+CSS盒模型2新手试炼制作蓝色企业网站343.3 任务二 制作学设计吧“关于我们”页面任务实施完成关于我们页面制作31 任务描述了解关于我们页面结构4ABOUT ME 通过任务一的操作,完成了关于我们页面的基本结构的创建。接下来继续制作页面其他内容。制作过程中要熟练掌HTML页面的编辑和CSS样式的应用。网页中的图片格式通常为JPG、PNG或GIF格式。52 技术引入Div+CSS盒
2、模型6盒模型是CSS控制页面时一个很重要的概念。只有很好地掌握了盒模型以及其中每个元素的用法,才能真正控制页面中的各个元素的位置。盒模型是由margin(边界)、border(边框)、padding(填充)和content(内容)4 部分组成的。此外,在盒模型中,还具备高度和宽度两个辅助属性。margin:边界(或称为外边距),用来设置内容与内容之间的距离。border:边框,内容边框线,可以设置边框的粗细、颜色、样式等。padding:填充(或称为内边距),用来设置内容与边框之间的距离。content:内容,是盒模型中必需的一部分,可以放置文字、图像等内容。7ABOUT ME01执行“文件打
3、开”命令,打开页面“素材项目三3-3.html”,效果如图所示。将光标移至页面中名为box的Div中,然后将多余文字删除,插入图像“源文件项目三images86202.jpg”,如图所示。练一练练一练定位网页元素位置定位网页元素位置1.margin(边界)margin(边界)用来设置页面中元素和元素之间的距离,即定义元素周围的空间范围,是页面排版中一个比较重要的概念。margin属性包含4个子属性,分别是margin-top、margin-right、margin-bottom 和margin-left,分别用于控制元素四周的边距。8ABOUT ME02转换到该文件链接的外部CSS样式文件中,
4、定义id名为box的Div的CSS样式,如图所示。选中id名为box的Div,可以看到所设置的上边界效果,如图所示。练一练练一练定位网页元素位置定位网页元素位置设置CSS样式设置margin属性效果9ABOUT ME03执行“文件保存”命令,保存页面和外部CSS样式文件,在浏览器中预览页面,效果如图所示。练一练练一练定位网页元素位置定位网页元素位置页面预览效果10ABOUT ME2.border(边框)border(边框)是内边距和外边距的分界线,可以分离不同的HTML元素,border属性设置的是元素的最外围。在网页设计中,如果计算元素的宽和高,则需要把border计算在内。border属性
5、有3个子属性,分别是边框样式(border-style)、边框宽度(border-width)和边框颜色(border-color)。练一练练一练为网页元素添加边框为网页元素添加边框01执行“文件打开”命令,打开页面“素材项目三3-4.html”,效果如图所示。将光标移至页面中名为banner的Div中,插入相应的图像,如图所示。打开页面插入图像效果11ABOUT ME练一练练一练为网页元素添加边框为网页元素添加边框02转换到该文件链接的外部CSS样式文件中,定义名为.pic01的类CSS样式,如图所示。切换到“源代码”视图,在img标签中指定样式,如图所示。定义类样式为图像指定样式12ABO
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 教学课件电子商务网页设计与制作3.3任务二 制作学设计吧“关于我们”页面1 教学 课件 电子商务 网页 设计 制作 3.3 任务 关于 我们 页面
限制150内