三、简单CSS应用实例
Expression Web中CSS已经成为核心功能之一，下面我们开始一个简单的CSS应用。点击菜单“文件”→“新建”，调用新建对话框，如图6。
程序支持的新建网页类型相当多，其中包含现成的CSS布局，也就是说，建立一个CSS布局网页，你甚至不需要写一句代码就能完成初步工作，大家根据说明需要选择一个即可，如图7。
现在一个最基本的CSS布局页面就建立好了，你只需要填入内容即可。可以看到点选目标后，程序提供实时高亮标记提示(本例：div#masthead.style1)，通过选择相关标记，可以快速选择网页对象，如图8。
键入文字后，可以通过工具栏按钮快速调节字体、字号、颜色等参数，同Word中操作完全一样。众所周知，Word也能生成网页文件的，上述简单操作，使用Expression Web同Word有什么不同呢？
当然区别很大，看似相同的效果，用Expression Web生成的代码是百分百符合网页标准规范的。程序默认主窗口中有个相当重要的任务窗格：“CSS属性”，可以看到通过工具栏做的文字修改，均是通过CSS定义实现的。你完全也可以在这里做文字定义，只不过在“CSS属性”中提供了更多的参数供设置，如图9。
CSS相关的参数非常多，初学者面对繁杂的参数往往不知所措，这里笔者建议大家通过“应用样式”任务窗格来实现修改的目的。
下面我们来给导航栏增加背景，选择“应用样式”窗格中的样式：#masthead(即导航栏应用的CSS)，点击右侧三角图标，在弹出菜单中选择“修改样式”，如图10。
进入“修改样式”对话框，这里许多人都会感觉眼熟，没错，同Dreamweaver中的CSS编辑器几乎一样。选择类别“背景”，设置“background-color”值，支持调用调色板选择颜色。这里程序提供了实时效果预览及说明，非常便于大家提高对于CSS语法的认识，如图11。
设置完成返回，可以看到导航栏背景颜色已经变为指定颜色了。
收藏 http://www.qqread.com/web-special/y292424.html进入讨论组讨论。
相关专题
- discuz! 5.0 论坛数据转换到动网php版本1.0的 (0次浏览)
- discuz! 4.0转换或者升级以后出现乱码情况的解 (0次浏览)
- Discuz! 3.0F Beta3升级到Discuz! 4后不能注册 (0次浏览)
- GOOGLE官方对网站设计方案的一些建议 (0次浏览)
- 二三十年代的珍贵钱币 (0次浏览)
- 土豆网前端概况 (0次浏览)
- 快乐上网过假期 儿童网站综合测试 (0次浏览)
- background-position另类用法 (0次浏览)
- 导航设计与信息架构 (0次浏览)
- (100-1)% 的内容是导航 (0次浏览)
