All articles| All Pictures| All Softwares| All Video| Go home page| Write articles| Upload pictures

Reading number is top 10 articles
关于ASP.NET在IIS一些问题的经验总结_[Asp.Net教程]
PHP技巧:PHP文件系统基本操作类_[PHP教程]
delphi设置光标闪烁的速度
一些关于SQL2005+ASP.NET2.0的问题_[Asp.Net教程]
无法远程登入MySQL数据库的三种解决办法_php资料_编程技术
SQL Server安装挂起错误解决方式_[SQL Server教程]
网站在什么情况下才可以改版-_百度优化_seo学堂
资深网管教你一步步安装MYSQL数据库_php资料_编程技术
ASP.NET从零起步设计网站全过程(6)_[Asp.Net教程]
PHP语言发展历史:它有三位创始人_php资料_编程技术
Reading number is top 10 pictures
黑社会大哥相亲
Kim jong il's mistress, national beauty JinYuJi actor3
Female model behind the bitterness, often being overcharged5
Startling Russian girl blind date scene3
A resort photographed beautiful young woman change clothes process vomiting blood1
美女当网吧管理员的悲剧
The money of more than 100 countries and regions14
NeedWallpaper3
Look at the Spring Festival people crowded into the what kind
日本小萝莉2
Download software ranking
c#程序设计案例教程
The king of fighters 97(Mobile phone games-apk)
The Bermuda triangle2
变速齿轮3.26
仙剑奇侠传98版歌曲
网页特效实例大全
Ashlynn Video5
C#程序员参考手册
Unix video tutorial15
Tram sex maniac 2 (H) rar bag11
归海一刀 published in(发表于) 2014/3/30 5:35:41 Edit(编辑)
用GoLive实现CSS+DIV_[Html教程]

用GoLive实现CSS+DIV_[Html教程]

用GoLive实现CSS+DIV_[Html教程]

在可视化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文字教程将在近期制作。大家互相交流,共同进步。





 
 
 
 
 


添加到del.icio.us 添加到新浪ViVi 添加到百度搜藏 添加到POCO网摘 添加到天天网摘365Key 添加到和讯网摘 添加到天极网摘 添加到黑米书签 添加到QQ书签 添加到雅虎收藏 添加到奇客发现 diigo it 添加到饭否 添加到飞豆订阅 添加到抓虾收藏 添加到鲜果订阅 digg it 貼到funP 添加到有道阅读 Live Favorites 添加到Newsvine 打印本页 用Email发送本页 在Facebook上分享


Disclaimer Privacy Policy About us Site Map

If you have any requirements, please contact webmaster。(如果有什么要求,请联系站长)
Copyright ©2011-
uuhomepage.com, Inc. All rights reserved.