第1章内容回顾-UI设计圣经网.pptVIP

网站页面构成 本门课程目标 学完本门课程后，你能够： 知道HTML是什么，它能够做什么 了解HTML的编辑工具DW的使用 熟练掌握HTML中常用标签的含义和作用 预习检查 HTML文档的基本结构是什么？ 什么是块级、行级标签？ h1、p、hr分别代表什么？ 插入一条直线用什么标签？ 本章任务 制作图文并茂的商品介绍页 什么是HTML HTML：Hyper Text Markup Language 超文本标签语言 HTML：网页的“源码” 浏览器：“解释和执行”HTML源码的工具 HTML告知浏览器如何显示网页 HTML文档的结构 html head title我的第一个网页 /title /head body Hello World! /body /html HTML 网页 head头部部分 body主体部分 html…/html标签标记 HTML 文档的开始和结束 网页标题 网页内容，可以是文本、图像等 这部分包括标题和其他说明信息，包括在 head…/head 标签内 这部分包含文本、图像和链接，它包括在 body…/body 标签内 HTML文档的基本结构 记事本 Dreamweaver HTML的编辑工具 操作演示1：在记事本里创建网页 网页的摘要信息2-1 网页摘要信息利于浏览器解析和搜索引擎搜索： 使用title标签 head title搜狐-中国最大的门户网站/title /head head meta name= keywords content= 淘宝,网上购物,在线交易,交易市场 / meta name= description content= 淘宝网-亚洲最大、最安全的网上交易平台，提供各类服饰、美容、家居、数码、…… / /head head meta http-equiv=Content-Type content=text/html; charset=gb2312 / /head 网页的摘要信息2-1 使用meta标签 （1）描述文档类型和字符编码 （2）描述搜索关键字和描述 提供搜索关键字和内容描述信息，方便搜索引擎的搜索 标题标签 …… body h1一级标题/h1 h2二级标题/h2 h3三级标题/h3 h4四级标题/h4 h5五级标题/h5 h6六级标题/h6 /body …… 布局常用标签 h1最大 h6最小 前后隔行 操作演示2：标题标签 h1标题/h1 …… h6标题/h6 段落标签 …… body h1北京欢迎你/h1 p北京欢迎你，有梦想谁都了不起/p p有勇气就会有奇迹。/p /body …… 前后换行，类似教材中的段落 操作演示3：段落标签 p……/p 布局常用标签 水平线标签 …… body h1北京欢迎你/h1 hr / p北京欢迎你，有梦想谁都了不起！/p p有勇气就会有奇迹。/p /body …… 横线用于内容分割 单个标签的闭合形式 操作演示4：水平线标签 hr / 布局常用标签 需求说明： 显示唐诗介绍（ UltraEdit环境 ） 完成时间：20分钟 分析应使用哪些标签？ 标签练习一 有序列表标签 …… body h3注册步骤：/h3 ol li填写信息/li li收电子邮件/li li注册成功/li /ol /body …… 有序列表 操作演示5：有序列表标签 ol li列表项1/li … … /ol 布局常用标签 无序列表标签 body h3新人上路指南 /h3 ul li如何激活会员名？/li li如何注册贵美会员？/li li注册时密码设置有什么要求？/li li贵美认证/li /ul /body 无序列表 操作演示6：无序列表标签 ul li列表项1/li …… /ul 布局常用标签 定义描述标签 …… body dl dt咖啡/dt dd一种黑色的热饮料，原料据说是咖啡豆，非洲盛产这类原料。/dd dd可以提神，刺激神经。/dd /dl /body …… 这种效果可以和无序列表互相替代，因dt是块状元素，所以常用于图文混编的布局场合 操作演示7：dl和dt标签 dl dt标题/dt dd描述1/dd …… /dl 布局常用标签 …… body dl dt 图片的HTML代码（后续讲