Dreamweaver教程：制作CSS控制的固定宽度布局

2009-12-18 11:34:46 作者：不详来源：AA25

本教程为入门级教程，适合初学者学习，由最简单的知识一点一点进阶。主要以实例为主，很少部分理论，这样更适应初学者快速掌握。因本人也正在学习，难免有一些错误或疏漏地方，望各位给予指正。本教程参考《CSS网站布局实录》一书，在此向作者表示感谢。

要想学好DIV+CSS，首先要有一定的HTML和CSS知识，如果这些你还不了解，建议你先去补习这一课，再来学习本教程。另外还要抛弃传统表格布局的思维模式，至于为什么，在你学习本教程中慢慢就会体会到。如果这些你都准备好了，那么开始吧！

一列固定宽度

一列固定宽度是基础中的基础，所以这节作为入门的第一节。

我们给div使用了layout作为id名称，为了便于查看，使用了background-color: #E8F5FE;将div的背景色设置成浅蓝色，用border: 2px solid #A9C9E2;将边框设置成天蓝色。背景色和边框的属性将会在以后的教程中讲解。

由于是固定宽度布局，因此我们直接设置了宽度属性width: 300px;与高度属性height: 200px;最终效果请点击“运行此代码”按钮查看。

提示:可以对代码修改后再运行。

下面讲解一下具体的步骤，因为本系列为入门级教程，所以采用dreaweaver可视化开发，让您少去手工写代码（但起码能看懂每句的意思），同时教程中尽量配图，做到简洁易懂。如果您对CSS了解较多，本步骤可略过。

1、打开dreamweaver（以8.0为例），选择文件——新建

如图，注意选择好文档类型，建议选择XHTML 1.0 Transitional类型，有关文档类型更多知识，请参考：选择合适的Doctype，解决CSS失效问题

选择工具栏的“插入div标签”工具，在对话框的ID框中写入id的名称#layout，然后在CSS面板中新建CSS样式，或者直接点击下边的新建css样式按钮，创建成功后会自动插入id名称，点击确定即可看到div标签已经插入到页面中了（如果刚插入的div为未选中状态，在css面板中新建时则需手动输入ID名：#layout）。

注意：此处选择器内请输入你要定义的id名称
CSS样式设置如下：

注：红线框内的部分为本例中需要设置的部分。

怎么样，一列固定宽度，就这么简单！

相关热词：CSS布局排版固定宽度

分享到：

更多...

收藏至我的帐号

教程排行榜: dreamweaver教程：用Spry制作选项卡滑动菜单; 用Dreamweaver在网页中插入背景音乐的3种方法; 如何在Dreamweaver中灵活控制网页表格高度和宽度？; Adobe Dreamweaver CS5 网友试用感受; 熟练使用Dreamweaver必备的二十个小技巧; Dreamweaver教程：建造简易版的PHP论坛网站; Dreamweaver技巧：在网页中插入透明Flash的方法; 折叠菜单用dreamweaver轻松制作; Dreamweaver制作网页的段落排版技巧; Dreamweaver的快捷键清单; 巧用Dreamweaver正则工具解决代码替换问题; 图文详解用Dreamweaver制作复杂的交换图像; Dreamweaver教程：制作CSS控制的固定宽度布局; DreamWeaver高级教程：如何批量替换超链接标签？; Dreamweaver教程：轻松制作超酷的Flash相册; Adobe Dreamweaver CS5 的新增功能抢先预览

下载排行榜: 基于jQuery的超炫酷的3D切换JS幻灯焦点图特效代码; 半透明立体质感的宽屏flash+xml焦点幻灯代码; 简洁效果多图切换flash幻灯焦点图代码; 带标题和数字导航的JS焦点幻灯特效代码; 适合摄影网站超漂亮的宽屏flash+xml幻灯轮换代码; 31款简单实用的CSS+JS下拉菜单脚本; 3D立体效果金字塔环形旋转的flash+xml相册代码; 基于jQuery实现的瀑布流布局列表特效代码; 透明质感上下滑动带小图预览5屏JS焦点图幻...; 超酷的3D摩天轮flash+xml相册幻灯图片代码; 能沿多个方向滑动切换的jquery幻灯代码; 自带多种幻灯效果支持缩略图导航的jquery画...; 可改图片尺寸和张数的flash幻灯轮换代码; 很好看的带缓冲效果CSS下拉菜单导航代码; 基于jquery很有趣的360度全景图片预览特效; 6屏幻灯上下滑动式带缩略图和文字介绍的fla...