文档介绍：该【网页设计-页面布局、层、行为和时间轴的使用 】是由【wxq362】上传分享，文档一共【35】页，该文档可以免费在线阅读，需要了解更多关于【网页设计-页面布局、层、行为和时间轴的使用 】的内容，可以使用淘豆网的站内搜索功能，选择自己适合的文档，以下文字是截取该文章内的部分文字，如需要获得完整电子版，请下载此文档到您的设备，方便您编辑和打印。网页设计
第1页,共35页。
行为
第6章页面布局、层、行为和时间轴的使用
第2页,共35页。
网页布局是网页设计的一个重要组成部分,在布局模式中使用表格和布局单元格可以对网页进行排版,利用布局表格的嵌套可以设计复杂的版面,除此之外还可以使用层来布局版面。
第6章页面布局、层、行为和时间轴的使用
第3页,共35页。
设计一个网页,先要规划好版式,常用的版式为分栏式结构,比如二分栏、三分栏、四分栏等,搜狐网就是一个三分栏结构,如图6-1所示。
第4页,共35页。
把搜狐网版式简化一下,如图6-2所示,这是一个典型三分栏结构,第一行分两列,左边单元格放置Logo图片。右边单元格放入导航菜单,由于栏目比较多,所以分成三行排放,第二行为网页的主题部分,分为三栏,左边一栏为特色栏目导航,右边两栏分别放置不同的网页内容,最下面一行放置版权信息。
湖北省精品课程《网页设计与制作》就是一个典型的二分栏的结构,如图6-3所示,,-
第5页,共35页。
布局表格的绘制
布局单元格的绘制
嵌套布局表格的绘制
第6页,共35页。
,并精确地定位层,可以对层进行选择、移动、调整大小和对齐等操作。层主要有如下功能:
有了层以后可以将元素置于层中,因为层可以重叠,所以就可以产生许多重叠效果
可以利用层来精确定位网页元素。它可以包含文本、图像甚至其它层,凡是HTML文件可包含的元素均可包含在层中。
层还有非常特殊的功能,就是通过应用时间轴可以使其移动和变换。这样在层中放置一些图片或文本,就能够实现动画效果。
层可以转换成表格,为不支持层的浏览器提供解决方法。
层可以显示和隐藏,应用这一功能可以实现网页导航中的下拉菜单。
在HTML中,层的描述如下所示。
<divid="layerl"style="position:absolute;left:162px;top:247px;
width:168px;height:94px;:1"></div>
第7页,共35页。
创建层有如下方法。
第8页,共35页。
层属性面板主要有以下参数。
⑴层编号:层的名称,用于识别不同的层。
⑵左:层的左边界距离浏览器窗口左边界的距离。
⑶上:层的上边界距离浏览器窗口上边界的距离。
⑷宽:层的宽。
⑸高:层的高度。
⑹Z轴:层的Z轴顺序。
⑺背景图像:层的背景图。
⑻可见性:层的显示状态,包括default、inherit、visible和hidden4个选项。
⑼背景颜色:层的背景颜色。
⑽剪辑:用来指定哪一部分是可见的,输出的数值是距离层4个边界的距离。
⑾溢出:如果层里面的文字太多或图像太大,层的大小不足以全部显示的时候,有以下选项:
visible超出的部分照样显示。
hidden超出的部分隐藏。
scrool不管是否超出,都显示滚动条。
auto有超出时才出现滚动条。
第9页,共35页。
层的基本操作
利用层可以精确的定位网页元素,包括如何选择层,设置
层的背景颜色、改变层的可见性等基本操作。
第10页,共35页。