使用CSS+Div构建网页设计步骤详解

该课程是关于使用CSS和DIV进行网页设计的精品课件，通过一系列步骤教授如何构建一个完整的网站。教程中强调了规划、HTML模板创建、网站分块、CSS样式设置以及解决浏览器兼容性问题等内容。 在网页设计过程中，首先要做的是【规划网站】。这一步骤至关重要，它包括确定网站的整体布局和各个组成部分。在这个例子中，网站被规划为五个主要部分：1. MainNavigation 导航条，带有动态效果；2. Header 包含网站的LOGO和名称；3. Content 作为网站的主要内容区域，大小根据内容自动调整；4. Sidebar 边栏，用于展示附加信息；5. Footer 包含版权和其他信息，尺寸固定。 接下来是【创建html模板及文件目录】。HTML模板是网站的基础结构，提供的代码示例展示了基本的HTML5文档结构，包括定义文档类型、字符编码、标题、元数据等。这些元素是网页可被正确解析和显示的关键。 然后，网站被【分为五个div】，这是【网页基本布局的基础】。每个div代表上述规划中的一个部分，通过CSS来控制它们的位置和样式。例如，使用浮动（float）属性可以实现内容的左右排列，或者利用定位（positioning）实现更复杂的布局。 在【网页布局与div浮动】阶段，会讲解如何利用CSS的float属性来使内容在页面上流动，以及如何清除浮动以防止父元素高度塌陷。 接着，是【网页主要框架之外的附加结构的布局与表现】，这可能涉及侧边栏、页脚等元素的CSS样式设置，如宽度、高度、颜色、字体等。 在【页面内的基本文本的样式设置】中，学习如何使用CSS控制文字的字体、大小、颜色、对齐方式、行高、内边距等，以提升用户体验。 【网站头部图标与logo部分的设计】会涉及图像的嵌入和CSS的背景属性，以及如何通过CSS让图标和LOGO在不同分辨率设备上适应性显示。 【页脚信息(版权等)的表现设置】将讲解如何创建固定在页面底部的版权信息，并保持其在页面滚动时始终可见。 【导航条的制作】是一项挑战，可能涉及到CSS的:hover伪类来创建按钮特效，以及可能需要处理IE浏览器特有的显示问题。 最后，【解决IE浏览器的显示BUG】是必不可少的，因为Internet Explorer常常有与其他浏览器不同的渲染方式，需要使用条件注释或特定的CSS hack来确保在IE中正常显示。 这个课程通过十个步骤，全面覆盖了从网站规划到CSS细节调整的全过程，对于初学者和希望提升CSS技能的设计师来说是非常有价值的资源。