2.2.2 在Dreamweaver中创建CSS—利用Dreamweaver提供的模板


2.2.2   在Dreamweaver中创建CSS—利用Dreamweaver提供的模板


在Dreamweaver中,有两类创建CSS的方法,一种是根据软件提供的模板进行创建,另外一种是自定义创建CSS。


打开Dreamweaver 8,选择文件→新建菜单,弹出如图2.4所示的对话框界面。其他版本的Dreamweaver也是类似的操作顺序和界面。







 
(点击查看大图)图2.4   新建文档对话框

在图2.4中,对话框分为3栏,最左边是文件类别栏,包含网站中起不同作用的各类文件列表,其中
有两种是和CSS有关系的:CSS样式表和页面设计(CSS)。


选择CSS样式表,在中间一栏中会出现很多的样式列表,它们都是预先设计好的模板,只需要任意选择一个,根据右侧上部的预览图确定当前选择的是否符合实际要求,确定后,单击创建按钮即可。这时Dreamweaver的编辑界面会出现该模板的CSS代码,我们可以在上面再进行添加修改,完成后单击文件菜单下的保存,或者同时按下Ctrl键和S键,在文件对话框中输入名称进行保存。显而易见,这里保存的CSS脱离任何的HTML文件,是外部CSS。


一般来说,外部CSS存放在网站的CSS子目录中,当然,这只是一个习惯而已,它可以放置在任意的位置,只要HTML页面在使用它的时候输入了正确的绝对路径或者相对路径。有关绝对路径和相对路径的知识,我们将在第3章中介绍。


图2.4中所选择的CSS样式表一项主要针对网页具体某部分内容的显示风格进行设置,而页面设计(CSS)一项,则是针对网页总体的排版风格进行设置。


单击图2.4中左边一栏“页面设计(CSS)”,对话框如图2.5所示。







 
(点击查看大图)图2.5  新建页面设计(CSS)界面
在图2.5中间一栏,列出了页面设计(CSS)预设的一些排版模板,它们的右边是被选模板的预览图。这些排版模板主要是根据常见网页的外观,总结出几种结构:双列就是指网页分为左边右边两栏;三列则是指网页分为左边、中间和右边3栏。我们可以根据需要选择合适的排版模板,确定后,单击“创建”按钮即可。软件将相应模板的CSS文件复制到当前设置站点的目录下。在Dreamweaver中如何设置站点可以参照第1章的介绍。


标签:
Warning: Invalid argument supplied for foreach() in C:\zl\webjia\view.php on line 50
友情链接
轻松育儿世界奇观
苏ICP备16066217号-2