HTML5与CSS布局：浮动布局与Div基础

"网页设计与制作的第六章主要讲解了Div、HTML5结构元素、浮动布局以及CSS样式的相关知识，旨在帮助学习者理解和实践网页的整体布局制作。" 在这个课件中，首先介绍了Div，它是HTML中的一个标签，用于创建区分不同内容的区域，常作为文本、图像等页面元素的容器，是CSS布局的基础。在Dreamweaver中，可以通过“插入”面板的“HTML”类别来添加Div标签，并设置其Class和ID属性，以便于应用样式。此外，还可以通过“新建CSS规则”对话框创建自定义的CSS样式。 接下来，课程讲解了HTML5的结构元素，如Header标签，它用于表示文档或页面区域的头部，通常包含导航、logo或页面标题等。Header标签可以多次在页面中使用，以适应不同的内容区块。例如，一个简单的Header标签用法如下： ```html <header> <h1>我是大头</h1> </header> ``` 课件还涉及了浮动布局的原理和方法。浮动布局（float）是网页设计中常见的布局方式，通过设置元素的`float`属性（如`float: left`或`float: right`），可以让元素脱离正常文档流并沿着指定方向浮动。同时，为了防止浮动元素对周围内容的影响，需要使用`clear`属性来清除浮动。浮动布局常用于创建多列布局，但可能会导致父元素高度塌陷的问题，需要通过适当的清除技巧来解决。 在实践中，课件通过案例演示了如何构建一个企业网站的新闻列表页面。这包括创建HTML结构，使用Div标签组织内容，以及设置CSS样式来实现所需布局。CSS样式设置涵盖了各种属性，如类型、背景、区块、方框、边框、列表、定位、扩展和过渡，这些都能通过“div的CSS规则定义”对话框进行详细配置。 这个课件深入浅出地介绍了网页设计中的关键概念和技术，对于初学者理解网页设计的布局和样式控制具有很高的价值。通过学习和实践，读者能够掌握Div的使用，HTML5结构元素的应用，以及浮动布局的创建和优化，从而提升网页设计和制作的能力。