Dreamweaver 8 新功能图文实例讲解-实例讲解(2)(1)_网页设计_Dreamweaver教程

您的位置：学习网(Gzu521.com) -> 考试资料 -> 网页设计 -> Dreamweaver教程 -> 资料正文

学习网考试学习资料

Gzu521.com

Dreamweaver 8 新功能图文实例讲解-实例讲解(2)(1)

Dreamweaver教程点击：次发布时间：2006-7-13 【字体：大中小】来源：Gzu521.com

Gzu521.com我的学习网

　5.扩展的CSS支持

　　在网页中插入视频文件以后，我们再在它的下方输入一段文字来体验一下Dreamweaver8 的css支持给我们带来了哪些新变化？使用文本工具输入一段文字，然后打开css面板，如图23所示。

1Z{+?ou€LOPuC} [ 本资料来源于贵州学习网网页设计Dreamweaver教程 http://Www.gzU521.com ] 1Z{+?ou€LOPuC}

图23

　　新的css面板完全设计成了一个统一的面板，我们在此面板中可以快速确认样式、编辑样式、查看应用于页面元素的样式。

　　单击“添加属性”，可以直接输入样式属性，比如我输入color，然后在后面的颜色选择器中选择一种颜色就可以了，如图24所示。当然其它css属性也可以直接在这里输入，这比起以前要反复修改网页代码真是方便了不少。

图24

　　单击css面板中的current按钮，可以显示当前所选中内容的css摘要，而与所选内容无关的css会以删除线的形式出现，如图25所示。这个功能对我们快速确认应用于当前选定元素的css属性十分有帮助，在列表中可以方便地查看哪种样式中的哪种属性被应用到当前选中的元素。新的css控制面板可以使我们从复杂的多种css样式中解脱出来，从而轻松完成一个网页的内容格式化。

图25

　　好了，我们再来看看在可视化助理方面提供了对css的新支持。执行“查看/可视化助理”菜单命令，你会发现多了“css layout backgrounds”、“css layout box model”、“css layout outlines”三个选项，分别为背景模式、框模式和外形轮廓模式显示css样式效果。如图26所示。

图26 (友佳电脑信息网,www.jztop.com)

　　另外，还有一个值得我们关注的新功能――样式呈现工具栏，使用这个新功能我们可以为不同的媒体类型进行设计，比如屏幕、手持设备、打印输出设备、电视设备、投影设备等等。当我们将外部样式表附加到文档中时可以指定样式表的类型，下面是建立好的三个样式表文件，分别应用于屏幕、打印设备和电视，并已被链接到网页中。

　　在工具栏上单击鼠标右键，选中“样式呈现”选项，就会在工具栏下方出现“样式呈现”的各个按钮了，如图27中红色框内所示。

图27

　　每一个按钮都有自己不同的用途，从左到右依次为屏幕、打印、手持设备、投影设备、tty、tv和打开/关闭css。单击不同的按钮，可以激活相应的媒体类型，与之相关的css文件就被加载。
在建立页面的时候，我们只需要建立适合所需要的媒体类型css文件，dreamweaver 8将会精确显示我们设计的页面是如何在相应媒体中应该显示的效果。

　6.代码折叠功能

　　我们再来看看新的代码折叠功能，如果你经常编写html代码，你可能对足足几页的代码不会陌生，让你去找代码中的某一行，翻来覆去地拖动滚动条，这的确是一项烦人的工作。在dreamweaver 8中已经解决了这个问题，我们只需通过编辑器左边的加号和减号就可以轻易找到并控制相关的代码了。[32+"ask?hvK}[ 此文转贴于我的学习网网页设计Dreamweaver教程 http://www.Gzu521.com][32+"ask?hvK}

　　打开我们制作的主页，单击“code”按钮，切换到代码视图中，如图28所示。

图28 (友佳电脑信息网,www.jztop.com)

　　在代码视图中拖动鼠标选中一段代码，代码的左侧会出现两个减号把这段代码包含到一起，如图29所示。

本文共3页: 第 1 [2] [3] 页

责任编辑：gzu521

更多相关信息->

网页设计分类

	HTML教程
	CSS教程
	Javascript教程
	Dreamweaver教程
	FrontPages教程
	FireWorks教程
	Flash教程
	PhotoShop教程
	建站知识

分类推荐信息

更多...

大类最新文章

更多...