实验三框架布局及标准页面布局设计与实现.docVIP

实验三 框架布局及标准页面布局 一、实验目的 1．掌握框架布局语法结构，熟悉框架布局链接应用方法 2．掌握CSS语法，熟悉CSS标准页面布局的设计与实现方法。 3．掌握Dreamweaver中CSS设置方法 二、实验内容 1．将table布局改为框架布局练习 2．CSS标准布局应用练习 3．Dreamweaver CSS设置练习。 三、实验习题 1．列举链接的target属性值及其含义 target属性值的含义： ? _blank:新建窗口 _self:相同窗口 _parent:父窗口 _top:首窗口CSS position 属性 通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。 position 属性值的含义： static 元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。 relative 元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。 absolute 元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。 fixed 元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。 提示：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。 1.优点 固定宽度布局更容易使用，在设计方面更容易定制。 在所有浏览器中宽度一样，所以不会受到图片、表单、视频和其他固定宽度内容的麻烦。 不需要min-width和max-width，所有浏览器都支持。 即使需要兼容800×600这么小的分辨率，网页的主体内容仍然有足够的宽度易于阅读。 2.缺点 对于使用高分辨率的用户，固定宽度布局会留下很大的空白。因此出现了“黄金比例”，“三分定律”，综合平衡和其他设计原则。 屏幕分辨率过小时需要垂直滚动条。 无缝纹理，连续的图案需要适应更大的分辨率。 固定宽度布局一般在可用性上得分较低。1.优点 流动布局页面对用户更友好，因为它能自适应用户的设置。 页面周围的空白区域在所有分辨率和浏览器下都是相同的，在视觉上更美观。 如果设计良好，流动布局可以避免在小分辨率下出现水平滚动条。 2.缺点 设计者更难控制用户所见，并可能忽略掉一些错误，因为在特定的分辨率下看起来好的。 图片，视频以及其他设置了宽度的内容可能需要多种宽度以适应不同分辨率的用户。 在特别大的分辨率下，内容会被拉成长长的一行，变得难以阅读。 1.优点 应用恰当的弹性布局对用户十分友好。页面中所有元素可以随着用户的偏好缩放。 对于同时喜欢流动和定宽布局的设计师来说，弹性布局是完美的，因为前两种布局的优点在弹性布局中都能找到。 2.缺点 正是因为第一个优点，这种布局会产生一个巨大的可用性问题。需要花更多时间理解和测试，让布局适合所有用户。 这种布局类型相对于其他两个更难制作，它能带来的一点儿可用性提升看起来并不值得。 根据布局的具体情况，一些弹性设计需要专门为IE6追加一些样式。