项目三主页的设计与制作 利用DIV+CSS完成主页布局.pptVIP

健雄职业技术学院计算机工程系 史桂红 项目三 主页的设计与制作 利用DIV+CSS完成主页布局 知识技能目标 1、清楚Web标准； 2、会使用常用的HTML5标签。 复习 完成如下操作： 1、C盘上新建文件夹myweb； 2、配置Apache服务器； 3、新建动态站点mywebsite，并检测站点。 工作任务列表 任务：熟悉HTML5基本结构及组成元素 一、HTML5 2004年WHATWG（Web Hypertext Application Technology Working Group）提出，2007年被W3C(World Wide Web Consortium万维网联盟)接纳。 1、HTML5文件的基本结构 任务：HTML5 2、网页的摘要信息：便于搜索引擎搜索及提高排名 网页的摘要信息通过title和meta标签体现 （1）title标签：在浏览器窗口的标题栏显示网页标题 （2）meta标签：其内容不显示，加入该标签的作用是方便浏览器解析或利于搜索引擎搜索。 1）设置字符编码： meta charset=“utf-8” utf-8 为国际通用的字符编码 2）设置关键字和内容描述信息 meta name=“keywords” content=“太仓鼎天贸易有限公司 / meta name=“description” content=“太仓鼎天贸易有限公司是一家经营施耐德电气设备的公司 / 任务：HTML5 3、HTML5新增的标签及属性 4、HTML5模板中的代码结构及组成 !doctype html是HTML5对文档类型的声明，其作用是告诉浏览器这是一个HTML5页面。它必须是HTML文档的第一行，位于html标签之前。 meta charset=“utf-8”字符编码为utf-8 title设置页面标题，要让每个页面的title 是唯一的，从而提升搜索引擎结果排名，并让访问者获得更好的体验。 任务：HTML5 5、HTML5中注释 !-- …… -- HTML5的几个注意点： （1）HTML5中所有标签的元素和属性的名字不区分大小写，但建议使用小写。 （2）所有的标记都必须合理正确嵌套 所有的嵌套都必须按顺序，pb/p/b 必须修改为： pb/b/p 就是说，一层一层的嵌套必须是严格对称。 任务：HTML5 课堂实践一 站点文件夹下新建文件夹exer/exer1，在exer1文件夹下新建exer1.html文件，利用HTML标签完成如下效果： 学习h1-h6标题标签及段落标签p的使用 课堂实践二 完善exer1.html文件，完成如下效果： 学习div标签及ul li标签的使用 div(division,分隔) 通用块状元素，在标准网页布局中最常用的结构化元素。表示文档结构块，可以把文档分割为一个或多个区域。 div相关知识 ul、ol、li (项目列表) ul: unordered list缩写，表示无顺序列表 ol: ordered list缩写，表示有顺序的列表 li: item in a list缩写，表示列表中的项目 列表元素全部是块状元素，全部配对使用： ul与li合用则定义无序列表； ol与li合用定义有序列表； 列表序号属性：type 1、a、A、i、I 列表序号属性：type disc、circle、square 项目列表相关知识 ol!--有序列表-- li列表项/li li列表项/li ... /ol ul!--无序列表-- li列表项/li li列表项/li ... /ul 列表元素的用法 项目列表相关知识 课堂实践三 在exer文件夹下新建文件夹images，将下发的图片存于该文件夹下，完善exer1.html文件，完成如下效果： img的语法格式：img src=“图片地址” alt=“图像的替代文字” title=“鼠标悬停提示文字” / 学习img标签及span标签的使用 小结与作业 作业 总结 HTML常用标签的使用 * W3C组织:(World Wide Web Consortium, 万维网联盟) 是一个专门负责网络标准制定的非赢利组织，诸如HTML、XHTML、CSS、XML等标准都是W3C制定的。W3C提倡Web页结构是内容和样式分离。其中XHTML负责组织内容结构，CSS负责表现样式。 Body标签以上的内容是为浏览器和搜索引擎准备的 健雄职业技术学院计算机工程系 史桂红 * W3C组织:(World Wide Web Consortium, 万维网联盟) 是一个专门