您的位置: 首页 > 技术文档 > 网页制作 > 用GoLive实现CSS+DIV之一
DIV浮动IE文本出现3px间距的bug 回到列表 清除DIV浮动-使用:after
 用GoLive实现CSS+DIV之一

作者:赵鹏 时间: 2005-12-11 文档类型:原创 来自:蓝色理想

在可视化CSS编辑器方面,GoLive在版本6已经成型,其设计构思甚至成为许多专业CSS编辑器模仿的对象,如众所周知的TopStyle。近来随着中文版GoLive的发布,引发了业内网页制作软件之争。面对这个在国内几乎是一夜之间出现的新面孔,许多人开始关注。
我曾发表过有关GoLive将在网页制作方面取代DreamWeaver的评论,预计后者将转型为数据库开发组件。这是因为DreamWeaver在数据库方面非常优秀,但在可视化网页编辑方面早已落后(应该说不曾领先)。只是凭借着中文化优势占领着国内市场。

在CSS+DIV方式逐渐成为主流网页结构的今天,一款功能完善使用简单的CSS编辑器是非常必要的,并且应该融合到网页制软件之中,在这方面,GoLive领先同行软件至少两年。只是之前由于开发商不关注中文市场而一直不为人知。今天我们就来粗略看一下如何在GoLive中使用CSS编辑器。

1:CSS文件管理

GoLive默认是基于站点的软件,在建立新站点后将自动产生CSS目录及一个Basic.css文件。如下图。如果有多个CSS文件存在,加粗的文件为默认CSS文件。可在列表中右键点击CSS文件设为默认。
建立站点的视频教程:http://www.99ut.com/tutorial/golive/video/glv002.html (拥有视频源文件的站点可改为内部指向)

而新建的网页文件也将默认以链接方式使用这个外部CSS文件,这在源代码视图中可以看到。如下图。

对于已经打开处于编辑状态的页面,可长按编辑窗口右端红色箭头处的CSS编辑图标来选择更改外部CSS文件链接。如下图。

还可以在编辑窗口点击红色箭头处的标头区,然后选择其中绿色箭头处的外部CSS指示图标(删除该图标即脱离该外部CSS文件),然后在检查器〖CTRL_1〗调板中按住蓝色箭头处拖出定位线,定位到站点窗口的CSS文件名称上。

即使在页面文件未打开的情况下,也可以在站点窗口中选择文件(可多选),然后通过CSS调板来更改外部CSS文件链接,如下图就是为photo.html和story.html增加new1.css外部样式表的过程。此外还可以点击红色箭头处的按钮来增加。
若要脱离外部CSS样式文件,可在CSS调板中选择后点击红色箭头右方的垃圾桶图标。

2:在页面中应用样式

主要使用CSS调板〖CTRL_SHIFT_9〗来完成页面内容的样式指定。还可以使用快捷键〖CTRL_B〗开启浮动式CSS调板,每次操作之后浮动调板将消失。
如下图所示,指定的类型分为四种:内联样式(鼠标所选部分)、块样式(光标所在文字块)、p(光标所在段落)、body(全页面)。如果光标位于一个链接之上还将出现a(链接样式),选择表格或单元格后还将出现table(表格)和td(表格中的单元格)。

虽然完成指定后编辑窗口中将实时显示效果,GoLive还是提供了指定预览功能,鼠标在样式名称上悬停将出现浮动预览窗口(下图红框内即是),预览的内容包括应用效果和样式源代码。根据不同的指定类型,预览窗口中的应用效果也不同。如下图所示,在选择了GoLive CS2文字后,鼠标悬停于内联样式上,预览窗口就显示所选的文字内容。如果此时鼠标悬停于块样式上,预览窗口文字将显示为“GoLive CS2中文版”。

3:CSS编辑器

在站点窗口中双击css文件就可以开启样式编辑器。在开启的页面中点击右上角的CSS编辑按钮(本篇第3图所示)也可以开启编辑器。两者的区别在于前者是编辑外部样式文件,后者是编辑自身html样式表。

现在我们来看一下GoLive的样式编辑器,分为可视化编辑和提供给代码狂人使用的源代码(红色箭头处)两大视图。并提供了样式搜索器(绿色箭头处),这个看似简单的搜索其实非常全面,点击放大镜处可选择搜索的选项。

CSS内容可大致分为元素样式和自定义样式,元素样式的作用基本都是全局性的,如td将应用于页面中全部的单元格。而自定义样式(即类样式)可选择性地应用于页面的某个部分。在编辑窗口左方是样式列表,其中包含着元素样式和类样式,点击橙色箭头处可新建元素,点击紫色箭头处可新建类。

点击蓝色箭头处的两个按钮可将编辑窗口拆分为源代码或文本预览。此外在编辑的同时检查器调板〖CTRL_1〗也会出现文本预览。有关样式编辑器的其他设定可参考视频教程:http://www.99ut.com/tutorial/golive/video/glv023.html

>

在左方选择一个样式后,则可进入编辑状态,如下左图,共有7大项目:字体属性、文本属性、块属性、边距和填充、边框和外框、列表项目及其它、背景属性。默认为字体属性。相应属性如果被设定,将会在信息栏(红色箭头处)出现图标。

点击绿色箭头处将出现颜色调板,从中可以选取色彩。GoLive提供了很多专业的色板,如下右图就是著名的VisiBone配色表。

其他6类属性设定如下各图所示。

此外,GoLive可以从对象调板〖CTRL_2〗中使用CSS布局,如下图红色箭头处。从而实现CSS+DIV的网页结构。

建立了CSS布局后将产生相应的样式,可在页面的样式编辑器中进行设定。如下左图。可同时配合如下右图的表和框调板进行选择。

有关GoLive的CSS具体操作已做成视频教程,大家可通过文章前面的链接观看或访问http://www.99ut.com/tutorial,有关使用DIV布局的视频教程及GoLive文字教程将在近期制作。大家互相交流,共同进步。

出处:蓝色理想
责任编辑:赵鹏

◎进入论坛网页制作网站综合版块参加讨论

相关文章 更多相关链接
Adobe推出合并后的新CS2套件!
GoLive与DreamWeaver未来之路
国内首家中文GoLive CS2视频教程
分析网页文字的字号
任意字符集下正常显示网页
作者文章 更多作者文章
GoLive与DreamWeaver未来之路
国内首家中文GoLive CS2视频教程
Adobe收购MM后可能的产品改变
如何使用11px及10px的清晰汉字
《大师之路》平面设计基础教程
关键字搜索 常规搜索 推荐文档
热门搜索:CSS Fireworks 设计比赛 网页制作 web标准 用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG
站点最新 站点最新列表
周大福“敬•自然”设计大赛开启
国际体验设计大会7月将在京举行
中国国防科技信息中心标志征集
云计算如何让安全问题可控
云计算是多数企业唯一拥抱互联网的机会
阿里行云
云手机年终巨献,送礼标配299起
阿里巴巴CTO王坚的"云和互联网观"
1499元买真八核 云OS双蛋大促
首届COCO桌面手机主题设计大赛
栏目最新 栏目最新列表
浅谈JavaScript编程语言的编码规范
如何在illustrator中绘制台历
Ps简单绘制一个可爱的铅笔图标
数据同步算法研究
用ps作简单的作品展示页面
CSS定位机制之一:普通流
25个最佳最闪亮的Eclipse开发项目
Illustrator中制作针线缝制文字效果
Photoshop制作印刷凹凸字体
VS2010中创建自定义SQL Rule

蓝色理想版权申明:除部分特别声明不要转载,或者授权我站独家播发的文章外,大家可以自由转载我站点的原创文章,但原作者和来自我站的链接必须保留(非我站原创的,按照原来自一节,自行链接)。文章版权归我站和作者共有。

转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去我站点水印。

特别注意:本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有,文章若有侵犯作者版权,请与我们联系,我们将立即删除修改。

您的评论
用户名:  口令:
说明:输入正确的用户名和密码才能参与评论。如果您不是本站会员,你可以注册 为本站会员。
注意:文章中的链接、内容等需要修改的错误,请用报告错误,以利文档及时修改。
不评分 1 2 3 4 5
注意:请不要在评论中含与内容无关的广告链接,违者封ID
请您注意:
·不良评论请用报告管理员,以利管理员及时删除。
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·本站评论管理人员有权保留或删除其管辖评论中的任意内容
·您在本站发表的作品,本站有权在网站内转载或引用
·参与本评论即表明您已经阅读并接受上述条款
推荐文档 | 打印文档 | 评论文档 | 报告错误  
专业书推荐 更多内容
网站可用性测试及优化指南
《写给大家看的色彩书1》
《跟我去香港》
众妙之门—网站UI 设计之道
《Flex 4.0 RIA开发宝典》
《赢在设计》
犀利开发—jQuery内核详解与实践
作品集 更多内容

杂⑦杂⑧ Gold NORMANA V2