《网页设计与制作》第章课件.ppt

* 说明图片是dt-标题 下面的文字是dd-描述 * * * * 因此，在页面局部布局中，形成了4种常用的块状结构： （1）div-ul(ol)-li：常用于分类导航或菜单等场合； （2）div-dl-dt-dd：常用于图文混编场合； （3）table-tr-td：常用于图文布局或显示数据的场合； （4）form-table-tr-td：常用于布局表单的场合； 2.学会按上面4种块结构来组织和规划页面的结构，是盒模型实现的关键，后续将进行详细讲解和深入学习。 * 使用ol li有序列表，ul li无序列表和dl dt dd定义列表实现简单的商品购买页 * * 说明样式方面的内容后续章节将学习 * * 过度： 标准的由来，多个浏览器厂商的竞争、HTML编码混乱 标准的由来，多个浏览器厂商的竞争、HTML编码混乱 遵守国际化WEB标准，确保多个浏览器都兼容 W3C-万维网联盟，负责制定web行业标准，它包括一系列的标准。 重点强调我们这门课程需要严格遵守HTML 4.0.1/标准XHTML1.0，两者兼容。 说明：具体规范将随课程边学边告诉大家，DOM和ECMAScript下学期会学习； * 过度： 标准的由来，多个浏览器厂商的竞争、HTML编码混乱 标准的由来，多个浏览器厂商的竞争、HTML编码混乱 遵守国际化WEB标准，确保多个浏览器都兼容 W3C-万维网联盟，负责制定web行业标准，它包括一系列的标准。 重点强调我们这门课程需要严格遵守HTML 4.0.1/标准XHTML1.0，两者兼容。 说明：具体规范将随课程边学边告诉大家，DOM和ECMAScript下学期会学习； * 过度： 标准的由来，多个浏览器厂商的竞争、HTML编码混乱 标准的由来，多个浏览器厂商的竞争、HTML编码混乱 遵守国际化WEB标准，确保多个浏览器都兼容 W3C-万维网联盟，负责制定web行业标准，它包括一系列的标准。 重点强调我们这门课程需要严格遵守HTML 4.0.1/标准XHTML1.0，两者兼容。 说明：具体规范将随课程边学边告诉大家，DOM和ECMAScript下学期会学习； * * 使用ol li有序列表，ul li无序列表和dl dt dd定义列表实现简单的商品购买页 无序列表标签 常用于布局的块级标签7-2 body h3新人上路指南 /h3 ul li如何激活会员名？/li li如何注册贵美会员？/li li注册时密码设置有什么要求？/li li贵美认证/li /ul /body 无序列表 ul li列表项1/li …… /ul 定义描述标签 常用于布局的块级标签7-3 …… body dl dt咖啡/dt dd一种黑色的热饮料，原料据说是咖啡豆，非洲盛产这类原料。/dd dd可以提神，刺激神经。/dd dl /body …… 这种效果可以和无序列表互相替代，因dt是块状元素，所以常用于图文混编的布局场合 dl dt标题/dt dd描述1/dd …… /dl …… body dl dt 图片的HTML代码（后续讲解）……dt dd商品名称：灿坤蒸气电熨斗/dd dd商品价格：388元/dd dd商品简介：金钢低血超硬超顺滑,140ml透明大水箱设计/dd /dl /body …… 用定义描述标签实现图文混编的效果 常用于布局的块级标签7-4 文字有一定的缩进 表格 table tr td百度/td td新浪/td /tr …… /table 常用于布局的块级标签7-5 table--表格 tr --行 td --列（单元格） 表单 常用于布局的块级标签7-6 一般和table使用： form table tr td.../td td.../td /tr ..... /table /form form …… /form 分区标签 div 常用于布局的块级标签7-7 div标签可内嵌到p等标签内，作为普通块状元素使用 一般当作结构化块状元素使用，作为逻辑分区（分块）即容器来使用 …… div style=width:400px; height:300px; background:#9FF p……/p h3新人上路/h3 ul …… /ul div其实就是一个...... /div …… 操作演示：分区标签 1、div-ul