复旦大学精品课程《计算机网络与网页制作》课件-页面布局高级技术课件复习资料.ppt

计算机网络与网页制作课程是复旦大学提供的精品课程，旨在让学生掌握计算机网络的基础知识以及网页制作的高级技术。其中页面布局是网页设计的重要环节，涉及到美观、用户体验和内容的逻辑结构。在本课件复习资料中，强调了CSS的运用，特别是CSS的浮动属性，以及定位技术的使用来实现复杂的页面布局。 介绍了CSS的“浮动”属性，该属性能够让页面中的元素脱离正常的文档流，按照指定方向排列。比如，可以使用float属性让图像浮动到页面的特定位置，或者让一个元素如菜单移动到其他元素的旁边。浮动属性是布局中常用的技术之一，有助于实现文字环绕图像等布局效果。 课程介绍了如何为不同的页面设置不同的布局。这涉及到创建和应用不同的CSS规则来响应页面结构的多样性。例如，通过为不同的内容区域如导航栏、主内容区、侧栏和页脚设置不同的布局规则，可以创建清晰且功能性强的页面结构。 使用display:none属性也是本课件的一个重点。这个属性可以隐藏页面上的元素，使其不显示也不占位，这对于创建动态交互式网页非常有用。例如，可以通过JavaScript控制某些元素在特定情况下显示或隐藏，增加页面的互动性。 课件还强调了通过CSS为页面的不同区域分配样式。例如，可以为标题区、导航区、主内容区、侧边栏和页脚分别应用不同的CSS样式，使每个部分都有其独特的布局和视觉效果。通过使用CSS选择器，可以准确地选择页面中的特定元素，并对其应用样式，比如设置背景颜色、调整宽度、添加内边距、外边距等。 此外，布局时还需要考虑到页面的响应性和用户体验。例如，可以设置导航栏中的列表项为水平排列，以及在鼠标悬停时改变链接的样式，从而提高导航的易用性。对间隙的调整也是改善用户界面的关键，例如通过调整导航链接左侧的间隙，使得链接的点击区域更大，更加直观。 课件中提到了利用div标签来构建页面的不同区域。div是布局中常用的HTML元素，通过div标签可以将页面分割为不同的部分，并且可以为每个部分指定ID或类，以便于在CSS中为它们添加样式。通过恰当使用div标签与CSS的组合，可以实现复杂且功能性强的网页布局。 这份课件复习资料涵盖了页面布局设计的各个方面，包括CSS的浮动属性、不同布局的应用、display:none属性、CSS选择器的使用、响应式设计的考虑以及div标签的布局应用等，这些都是网页设计与制作中不可或缺的关键技术。