HTML5+CSS3网页设计实战 课件 第6章 个人网页布局实战

第6章

个人网页布局实战01学习目标02课程思政目标03知识点04本章练习PPT模板/moban/

学习目标掌握对页面效果图进行准确的切片，输出成所需的图片格式；强化对图片文件进行合理地命名；培养能完成个人网站的页面布局能力；培养页面布局过程中排错、纠错的能力；进一步培养代码整理的习惯。第6章

个人网页布局实战1通过本章学习，要求达到以下既定目标：课程思政目标2“切片”练习，强调“精确到一个像素”的精度，培养学生严谨治学的态度。“文字素材的提取”，要养成善于借助周边工具来快速完成项目的职业素质。“代码整理”阶段，培养学生对细节的认真考究，避免虎头蛇尾的行为。个人独立完成专题练习，培养学生的独立意识，强化与他人沟通的能力。第6章

个人网页布局实战3知识点6.1将网页截图进行切片6.2网站目录、文件整理6.3搭建项目并进行页面布局6.4代码整理第6章

个人网页布局实战6.1将网页截图进行切片3知识点6.1将网页截图进行切片将如图6-1所示的效果图进行切片，要求图片尽可能少的空白区域以减少图片文件大小；图片尺寸尽可能凑个整数或偶数以方便计算盒子的相关间距；生活照片类图片采用jpg格式，图标类图片尽可能采用支持透明底的png格式。6.1将网页截图进行切片3知识点（1）在photoshop软件中打开“unit6-img\教材插图\图6-1单页面网站效果.png”，在“视图”菜单中激活“标尺”选项。（2）观察图片，明确哪些内容是需要输出为图片格式。一句话表述“可以用简单的css样式实现的内容原则上就不要输出图片”。（3）建立第一根参考线，要求参考线尽可能贴近图像内容，减少图像文件大小，如图6-2所示。6.1将网页截图进行切片3知识点（4）使用框选工具，建立选区后，用上下光标键调整图标在选区中间，如图6-3所示。6.1将网页截图进行切片3知识点有了这个选区作为定位，Photoshop默认对象之间有磁吸（吸附）功能，我们可以建立另外上、下、右三根参考线了，如图6-4所示。有了这个选区作为定位，Photoshop默认对象之间有磁吸（吸附）功能，我们可以建立另外上、下、右三根参考线了，如图6-4所示。6.1将网页截图进行切片3知识点（5）使用切片工具给各个分割好的区域进行切片，并且命名切片，如图6-7所示。图标类命名一般为icon+序号或者icon+英文关键字。6.1将网页截图进行切片3知识点（6）选择“文件”-“输出为web所用格式”，在如图6-8所示的对话框中，检查一下输出的格式，点击“存储”。6.1将网页截图进行切片3知识点在弹出的文件存储对话框中，切片切记选中为“所有用户切片”，如图6-9所示。6.2网站目录、文件整理3知识点6.2网站目录、文件整理站点根目录文件夹命名为“site”或者“website”，里面包含如图6-11所示的“css”、“images”两个文件夹，将切图得到的图片放入在images文件夹中。6.3搭建项目并进行页面布局3知识点6.3搭建项目并进行页面布局效果图属于文字类页面，页头划分的不是很明确，有点类似长篇文章结构，所以我们将用<section>区块标签设计，当然也可以采用传统的<div>标签搭建主要框架。严格做到以下几点要求：用注释标注各大容器的结构和css样式范围。尽可能的简化HTML结构，不添加非必须的父容器。定义通用样式，可以省去许多代码量。写css选择器时，尽量在每个选择器前面加上统一的父级id或class，看起来会非常整齐，便于维护。每个容器应该填写height属性，以免出现坍塌。给大的容器添加颜色各异的底色，这会有助于及时判定异常所在。写完大的容器对应的HTML代码后，及时调试看结果，结果无误后在hbuilder中将这完成的部分代码进行折叠，将会省去许多滚屏时间。3知识点（1）搭建第一个版块<section>容器的HTML结构，代码如图6-12所示。6.3搭建项目并进行页面布局（2）编写对应css样式代码，如图6-13所示。3知识点（3）搭建第二个版块<section>容器的HTML结构，代码如图6-14所示。6.3搭建项目并进行页面布局3知识点（4）编写对应的CSS代码，如图6-15所示。6.3搭建项目并进行页面布局3知识点（5）搭建第三个版块<section>容器的HTML结构，代码如图6-16所示。6.3搭建项目并进行页面布局3知识点（6）编写对应的CSS代码，如图6-17所示。6.3搭建项目并进行页面布局3知识点（7）搭建第四个版块<section>容器的HTML结构，代码如图6-18所示。6.3搭建项目并进行页面布局3知识点（8）编写对应的CSS代码，如图6-19所示。6.3搭建项目并进行页面布局3知识点（9）制作页脚部分，HTML结构代码如图6-20所示。6.3搭建项目并进行页面布局3知识点（10）编写对应的CSS代码，如图6-21所示。6.3搭建项目并进行页面布局我们回滚屏幕到“版块四”的CSS样式中，修改代码如图6-22所示。3知识点6.3搭建项目并进行页面布局3知识点针对箭头变大的情况，修改个别属性，代码如图6-23所示。6.3搭建项目并进行页面布局3知识点（11）保存文件，预览检查箭头样式无误后，继续完成右侧部分对应CSS代码，如图6-24所示。6.3搭建项目并进行页面布局6.4代码整理3知识点6.4代码整理接近布局的最终效果的时候，将辅助用的边框、背景色等属性进行删除，并再次预览页面效果。接下来要将内置样式表修改为外部样式表。最大的好处，是可以将这些样式分享给这个网站的其他页面使用，尽管这个网站只有一个页面。注意，改为外部样式表后，图片的src属性大概率因路径调整而要修改。6.4代码整理3知识点（1）在hbuilder的项目管理器中，css文件夹下新建一个名字为“style”的css文件，如图6-25所示。6.4代码整理3知识点（2）打开“style.css”文件，将index.html的<style>标签内所有代码复制到里面，如图6-26所示。6.4代码整理3知识点（3）修改图片路径。由于图像文件有点多，我们尽可能采用软件的“替换”功能快速完成，点击“查找”菜单的“替换”命令，在窗体右上角录入以下信息后，记得将文件存盘，如图6-27所示。（4）在index.html中增加<link>标签链接外部样式表，代码如图6-28所示。6.4代码整理3知识点（5）将index.html和style.css保存一下，预览最终的页面效果。6.5扩展练习4本章练习【练习1】打开资源包中的“第6章扩展练习\练习1\单页面个人网站-2.png”文件，观察如图6-29所示的页面效果，按本章讲授的知识点进行布局。4本章练习【练习2】