个人类网页制作.pptVIP

个人类网页制作 基本布局技术 本讲导航 任务 完成个人页面网页 学习目标 让设计在页面中居中的技术 创建两列或三列基于浮动的布局 创建固定宽度，流体和弹性布局 将列拉长到整个可用空间高度 让设计在页面中居中 方法1、左右边界自动 方法2、定位和负值空白边 方法1 左右margin自动 让box在浏览器窗口中居中（Firefox适用） 让box在IE浏览器窗口中也居中 方法2、定位+负值margin 页面div结构同上 基于浮动的布局 两列浮动布局 三列浮动布局 两列浮动布局 Div结构 Css样式 三列浮动布局 思考 布局类型 固定宽度布局 流体布局 弹性布局 流体布局 宽度使用百分比（%）作单位，div宽度随浏览器大小而改变，保证内容都能显示。 宽度过窄时，显示效果较差，可使用min-width属性定义最小宽度，但ie6不支持 Ie5计算填充的方法不同，流体布局在ie5中显示不正常。 弹性布局 使用字体大小作为宽度单位。如width:40em; 大多数浏览器默认字号为16px，16px的62.5%是10px，可以设置，body{font-size：62.5%；}，则默认文字的大小1em为10px，则可以很容易的将px转换为em。（？）进而可以用em为单位进行布局。 当增大或减小字号时，网页宽度会随之增减。 网页过宽超出浏览器，会出水平滚动条。可以使用max-width属性限制网页的最大宽度，但非标准浏览器（如ie6）可能不支持该属性。 *弹性-流体混合布局 弹性和流体两种方式结合 em（弹性布局）定义宽度，%（流体）定义最大宽度。 效果欣赏、分析 分析 布局：上+中（左+右）+下 内容：logo，导航（nav），banner，图片，文字，底部（bottom） logo+nav bottom main left right banner 制作思路 新建站点、新建文件和文件夹 制作页面布局的结构 Css制作页面布局样式 添加内容 设置内容的样式 站点操作 新建站点 站点中建立images文件夹 新建文件index.html 文档标题为“咖啡香浓” 制作布局的样式-基本样式 添加样式*{ }，存放在 新建样式表文件css.css中。 添加样式body{}，存放在css.css中 制作页面布局的结构 制作布局的样式-布局div样式 定义布局的样式放在文件div.css中 #box #top #main #bottom 制作top部分内容 插入flash对象top.swf 设置透明背景flash 制作main内部--banner 在banner内部插入flash对象banner.swf,设置透明背景 编写样式#banner 制作main内部--left 在left内部插入图片204.jpg，查看图片的大小， 编写样式#left 制作main内部--right 在right内部，添加素材文字，设置段落 编写样式#right(在div.css中) ) (在css.css中)设置首行缩进2个字符 最后几段的颜色变化 最后一行右对齐 制作bottom 在bottom中添加素材文字 在#bottom中添加样式属性padding等