Flash专栏: 基础教程 | 技巧运用 | MTV实例教程 | 游戏实例教程 | 实例教程 | AS教程(new)
photoshop专栏: 基础 | 进阶 | 技巧总汇 | 精彩实例 | 文字特效 | 滤镜魔术 | 实际应用
网页设计: Dreamweaver教程 | FireWorks教程 | CorelDraw设计 | Freehand/Illustrator教程 | 音乐转换教程
其他教程: 操作系统 | 程序设计 | 网站开发 | 图形图像 | 数据库 | 网络技术 | 安全相关 | 认证考试 | 硬件知识 | 服务器
Dreamweaver专栏>Dreamweaver设计>不同分辨率下“自适应”页面一例   返回上一页

  日期:2005-01-17 21 作者:无言沙漠 来源:闪吧
天气预报 IP地址 手机号码 邮编 翻译 在线代理 在线评书 好dj


不同分辨率下“自适应”页面一例



虽然说现在显示器主流的都是17'的了,但是使用还是有很大一部分用户是使用的15‘显示器,怎么样子做到在1024×768与800×600下页面“自适应”呢?下面我就通过我做过过的2个页面,来给大家简单的说下吧!

先看看效果吧,看了效果讲起来比较直观点
1024×768下
按此在新窗口浏览图片

800×600下

按此在新窗口浏览图片

1、背景居中
首先讲点题外话——背景都是居中。这个是用CSS样式实现的,代码如下

body {background: #84CFEF url(bg.gif) center;}
背景图片可以成这样

按此在新窗口浏览图片

高度无所谓,一般2到5象素就可以了,宽度超过1024象素即可,反正两边都是背景样色,如果你想在1152×864下可以是这样的效果的话,可以做的更宽。

2、header部分
头部文件看起来是一体的,其实是有2个层组成的,分别是左侧的两个女孩的图片和背景flash组成。
先做一个760象素宽的flash动画,注意左边部分要留图片问题,而且注意好与图片衔接是否合理。
左侧的图片是在PS下面处理成背景透明的GIF动画,本人美工水平有限,所以大家会觉察边缘处理的不是很好,然后添加一个“层”(用div标签实现)请看下面的示意图。

按此在新窗口浏览图片

之所有在table里面还要分2列就是要保证div层居左、flash居右。而且这里要注意的一点是:div层位置和大小都可以留空,这样的话,就可以把位置固定在div标签放置的位置上,不会随意移动。

下面附上源码,以供大家研究。

点这里下载:
点击浏览该文件


 
高手云集 版权所有 1998-2006