使用Web标准建站第8天：CSS布局入门
[
2006/06/29 16:43 | by Space.As ]
2006/06/29 16:43 | by Space.As ]
CSS布局与传统表格(table)布局最大的区别在于：原来的定位都是采用表格，通过表格的间距或者用无色透明的GIF图片来控制文布局版块的间距；而现在则采用层(div)来定位，通过层的margin,padding,border等属性来控制版块的间距。
1.定义DIV
分析一个典型的定义div例子：
#sample{ MARGIN: 10px 10px 10px 10px;
PADDING:20px 10px 10px 20px;
BORDER-RIGHT: #CCC 2px solid;
BORDER-BOTTOM: #CCC 2px solid;
BORDER-LEFT: #CCC 2px solid;
BORDER-TOP: #CCC 2px solid;
BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom;
COLOR: #666;
TEXT-ALIGN: center;
LINE-HEIGHT: 150%; WIDTH:60%; }
说明如下：
层的名称为sample，在页面中用<div id="sample">就可以调用这个样式。
1.定义DIV
分析一个典型的定义div例子：
#sample{ MARGIN: 10px 10px 10px 10px;
PADDING:20px 10px 10px 20px;
BORDER-RIGHT: #CCC 2px solid;
BORDER-BOTTOM: #CCC 2px solid;
BORDER-LEFT: #CCC 2px solid;
BORDER-TOP: #CCC 2px solid;
BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom;
COLOR: #666;
TEXT-ALIGN: center;
LINE-HEIGHT: 150%; WIDTH:60%; }
说明如下：
层的名称为sample，在页面中用<div id="sample">就可以调用这个样式。
使用Web标准建站第7天：CSS入门
[ 2006/06/29 16:37 | by Space.As ]
2006/06/29 16:37 | by Space.As ]
在了解XHTML代码规范后，我们就要进行CSS布局。首先先介绍一些CSS的入门知识。如果你已经很熟悉了，可以跳过这一节，直接进入下一节。
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。
1.基本语法规范
分析一个典型CSS的语句：
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
样式声明写在一对大括号"{}"中；
COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔；
"#FF0000"和"#FFFFFF"是属性的值(value)。
2.颜色值
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。
1.基本语法规范
分析一个典型CSS的语句：
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
样式声明写在一对大括号"{}"中；
COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔；
"#FF0000"和"#FFFFFF"是属性的值(value)。
2.颜色值
使用Web标准建站第6天：XHTML代码规范
[ 2006/06/29 16:36 | by Space.As ]
2006/06/29 16:36 | by Space.As ]
在开始正式内容制作之前，我们必须先了解一下web标准有关代码的规范。了解这些规范可以帮助你少走弯路,尽快通过代码校验。
1.所有的标记都必须要有一个相应的结束标记
以前在HTML中，你可以打开许多标签，例如<p>和<li>而不一定写对应的</p>和</li>来关闭它们。但在XHTML中这是不合法的。XHTML要求有严谨的结构，所有标签必须关闭。如果是单独不成对的标签，在标签最后加一个"/"来关闭它。例如:
<br /><img height="80" alt="网页设计师" src="../images/logo_w3cn_200x80.gif" width="200" />
2.所有标签的元素和属性的名字都必须使用小写
与HTML不一样，XHTML对大小写是敏感的，<title>和<TITLE>是不同的标签。XHTML要求所有的标签和属性的名字都必须使用小写。例如：<BODY>必须写成<body> 。大小写夹杂也是不被认可的，通常dreamweaver自动生成的属性名字"onMouseOver"也必须修改成"onmouseover"。
1.所有的标记都必须要有一个相应的结束标记
以前在HTML中，你可以打开许多标签，例如<p>和<li>而不一定写对应的</p>和</li>来关闭它们。但在XHTML中这是不合法的。XHTML要求有严谨的结构，所有标签必须关闭。如果是单独不成对的标签，在标签最后加一个"/"来关闭它。例如:
<br /><img height="80" alt="网页设计师" src="../images/logo_w3cn_200x80.gif" width="200" />
2.所有标签的元素和属性的名字都必须使用小写
与HTML不一样，XHTML对大小写是敏感的，<title>和<TITLE>是不同的标签。XHTML要求所有的标签和属性的名字都必须使用小写。例如：<BODY>必须写成<body> 。大小写夹杂也是不被认可的，通常dreamweaver自动生成的属性名字"onMouseOver"也必须修改成"onmouseover"。
使用Web标准建站第5天：head区的其他设置
[ 2006/06/29 16:32 | by Space.As ]
2006/06/29 16:32 | by Space.As ]
这些技巧主要讲meta标签设置的，其实与符合web标准关系不大，只要注意在最后加"/"关闭标签就可以，但是既然是入门教程，就写得详细一点吧。
收藏夹小图标
如果你将本站加入收藏夹，可以看到在收藏夹网址之前的IE图标变成了本站特别的图标。要实现这样效果很简单，首先制作一个16x16的icon图标，命名为favicon.ico，放在根目录下。然后将下面的代码嵌入head区：
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
为搜索引擎准备的内容
代码如下，替换成你自己站点的内容就可以：
收藏夹小图标
如果你将本站加入收藏夹，可以看到在收藏夹网址之前的IE图标变成了本站特别的图标。要实现这样效果很简单，首先制作一个16x16的icon图标，命名为favicon.ico，放在根目录下。然后将下面的代码嵌入head区：
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
为搜索引擎准备的内容
代码如下，替换成你自己站点的内容就可以：
使用Web标准建站第4天：调用样式表
[ 2006/06/29 16:30 | by Space.As ]
2006/06/29 16:30 | by Space.As ]
用web标准设计网站，过渡的方法主要是采用XHTML+CSS，css样式表是必不可少的。这就要求所有网页设计师必须熟练掌握CSS，如果你以前不常用，那么现在就开始学习吧。要制作符合web标准的网站，不懂CSS是设计不出漂亮的页面的。
事实上，所有表现的地方都需要用CSS来实现。我们以前都习惯用table来定位和布局，现在要改用DIV来定位和布局。这是思维方式的变化，一开始有些不习惯。呵呵，任何变革都会有阻力的，为了享受标准带来的"益处"，放弃一些老的传统做法是值得的。
事实上，所有表现的地方都需要用CSS来实现。我们以前都习惯用table来定位和布局，现在要改用DIV来定位和布局。这是思维方式的变化，一开始有些不习惯。呵呵，任何变革都会有阻力的，为了享受标准带来的"益处"，放弃一些老的传统做法是值得的。
使用Web标准建站第3天：定义语言编码
[ 2006/06/29 16:26 | by Space.As ]
2006/06/29 16:26 | by Space.As ]
第三步是定义你的语言编码，类似这样：
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
为了被浏览器正确解释和通过W3C代码校验，所有的XHTML文档都必须声明它们所使用的编码语言，我们一般使用gb2312(简体中文)，制作多国语言页面也有可能用Unicode、ISO-8859-1等，根据你的需要定义。
通常这样定义就可以了。但是要补充说明的是，XML文档并不是这样定义语言编码的，XML的定义方式如下：
<?XML version="1.0" encoding="gb2312"?>
你在Macromedia.com的首页代码第一行就可以看见类似的语句，这也是W3C推荐使用的定义方法。那为什么我们不直接采用这种方法呢？原因是一些浏览器对标准的支持不完善，不能正确理解这样的定义方法，比如IE6/windows。所以在目前过渡方案下，我们依然推荐使用meta方式。当然，你可以两种方法都写。
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
为了被浏览器正确解释和通过W3C代码校验，所有的XHTML文档都必须声明它们所使用的编码语言，我们一般使用gb2312(简体中文)，制作多国语言页面也有可能用Unicode、ISO-8859-1等，根据你的需要定义。
通常这样定义就可以了。但是要补充说明的是，XML文档并不是这样定义语言编码的，XML的定义方式如下：
<?XML version="1.0" encoding="gb2312"?>
你在Macromedia.com的首页代码第一行就可以看见类似的语句，这也是W3C推荐使用的定义方法。那为什么我们不直接采用这种方法呢？原因是一些浏览器对标准的支持不完善，不能正确理解这样的定义方法，比如IE6/windows。所以在目前过渡方案下，我们依然推荐使用meta方式。当然，你可以两种方法都写。
使用Web标准建站第2天：什么是名字空间
[ 2006/06/29 16:24 | by Space.As ]
2006/06/29 16:24 | by Space.As ]
DOCTYPE声明好以后，接下来的代码是：
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
通常我们HTML4.0的代码只是<html>，这里的"xmlns"是什么呢？
这个"xmlns"是XHTML namespace的缩写，叫做"名字空间"声明。名字空间是什么作用呢？自己的理解是：
由于xml允许你自己定义自己的标识，你定义的标识和其他人定义的标识有可能相同，但表示不同的意义。当文件交换或者共享的时候就容易产生错误。为了避免这种错误发生，XML采用名字空间声明，允许你通过一个网址指向来识别你的标识。例如：
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
通常我们HTML4.0的代码只是<html>，这里的"xmlns"是什么呢？
这个"xmlns"是XHTML namespace的缩写，叫做"名字空间"声明。名字空间是什么作用呢？自己的理解是：
由于xml允许你自己定义自己的标识，你定义的标识和其他人定义的标识有可能相同，但表示不同的意义。当文件交换或者共享的时候就容易产生错误。为了避免这种错误发生，XML采用名字空间声明，允许你通过一个网址指向来识别你的标识。例如：
使用Web标准建站第1天:选择什么样的DOCTYPE
[ 2006/06/29 16:22 | by Space.As ]
2006/06/29 16:22 | by Space.As ]
第一天
开始制作符合标准的站点，第一件事情就是声明符合自己需要的DOCTYPE。
查看本站首页原代码，可以看到第一行就是：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
打开一些符合标准的站点，例如著名web设计软件开发商Macromedia，设计大师Zeldman的个人网站，会发现同样的代码。而另一些符合标准的站点(例如k10k.net)的代码则如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
那么这些代码有什么含义？一定要放置吗？
开始制作符合标准的站点，第一件事情就是声明符合自己需要的DOCTYPE。
查看本站首页原代码，可以看到第一行就是：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
打开一些符合标准的站点，例如著名web设计软件开发商Macromedia，设计大师Zeldman的个人网站，会发现同样的代码。而另一些符合标准的站点(例如k10k.net)的代码则如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
那么这些代码有什么含义？一定要放置吗？
初学web标准的几个误区
[ 2006/06/29 16:21 | by Space.As ]
2006/06/29 16:21 | by Space.As ]
非常高兴地看到很多设计师开始关注和尝试使用web标准制作网页。但从网友们的问题和制作中发现几个问题，在这里特别提醒一下：
1.不是为了通过校验才标准化。
web标准的本意是实现内容(结构)和表现分离，就是将样式剥离出来放在单独的css文件中。这样做的好处是可以分别处理内容和表现，也方便搜索和内容的再利用。
W3C校验仅仅是帮助你检查XHTML代码的书写是否规范，CSS的属性是否都在CCS2的规范内。代码的标准化仅仅是第一步，不是说通过的校验，我的网页就标准化了。我们不是为了虚名，或者向别人炫耀：“看我的页面通过了校验”而去标准化，我们的目的是为了使自己的网页设计工作更有效率，为了缩小网页尺寸，为了能够在任何浏览器和网络设备中正常浏览。
请大家沉下心来，仔细研究和理解web标准的内涵。网络上已经充满了不要浮躁和虚荣，请不要将这种风气带到web标准应用中来，这样做只会影响和损害web标准的推广。
1.不是为了通过校验才标准化。
web标准的本意是实现内容(结构)和表现分离，就是将样式剥离出来放在单独的css文件中。这样做的好处是可以分别处理内容和表现，也方便搜索和内容的再利用。
W3C校验仅仅是帮助你检查XHTML代码的书写是否规范，CSS的属性是否都在CCS2的规范内。代码的标准化仅仅是第一步，不是说通过的校验，我的网页就标准化了。我们不是为了虚名，或者向别人炫耀：“看我的页面通过了校验”而去标准化，我们的目的是为了使自己的网页设计工作更有效率，为了缩小网页尺寸，为了能够在任何浏览器和网络设备中正常浏览。
请大家沉下心来，仔细研究和理解web标准的内涵。网络上已经充满了不要浮躁和虚荣，请不要将这种风气带到web标准应用中来，这样做只会影响和损害web标准的推广。
FlashCom基础教学
[ 2006/06/05 12:00 | by Space.As ]
2006/06/05 12:00 | by Space.As ]
安装说明:
1.安裝
2.檢查 FCS 服務未啟動
3.解壓並拷貝到安裝目錄
4.重啟並檢查 FCS服務以啟動
5.到管理控制台輸入序號
6.完成
1.Installl flash com server 1.5 dev edition.
2.Please Check that flash com server & flash com server adim "services" are not ruuning.
3.Unzip "flashcom 1.6 r105 update" and copying the contents to the install directory of flash com server 1.5.If promoting "Want to overwrite?"click "Yes".
4.Restart flash com server 1.5.(Check that flash com server & flash com server adim "services" are ruuning)
5.Go to license tab of Administration Console and input both serial numbers.
6.Finish
Administration Console登陆后的License里输入序列号.
防火墙打开1935端口
Programing FlashCommunicatiion Server电子版书籍下载
1.安裝
2.檢查 FCS 服務未啟動
3.解壓並拷貝到安裝目錄
4.重啟並檢查 FCS服務以啟動
5.到管理控制台輸入序號
6.完成
1.Installl flash com server 1.5 dev edition.
2.Please Check that flash com server & flash com server adim "services" are not ruuning.
3.Unzip "flashcom 1.6 r105 update" and copying the contents to the install directory of flash com server 1.5.If promoting "Want to overwrite?"click "Yes".
4.Restart flash com server 1.5.(Check that flash com server & flash com server adim "services" are ruuning)
5.Go to license tab of Administration Console and input both serial numbers.
6.Finish
Administration Console登陆后的License里输入序列号.
防火墙打开1935端口
Programing FlashCommunicatiion Server电子版书籍下载
流式flash格式——FLV
[ 2006/06/05 11:38 | by Space.As ]
2006/06/05 11:38 | by Space.As ]
Flash MX以前，flash 中的视频文件得导入是一帧一帧变成位图。结果导致文件巨大，限制了它的应用范围。
随着Flash MX的推出，Macromedia 公司开发了属于自己流式视频格式——FLV。这种格式是在sorenson 公司的压缩算法的基础上开发出来的。sorenson 公司也为MOV格式提供算法。
FLV格式不仅可以轻松的导入Flash 中，几百帧的影片就以两秒钟；同时也可以通过rtmp 协议从Flashcom 服务器上流式播出。
http://www.sky-link.net.cn/course/flash/root/course33.htm 这是播出效果，还比较流畅吧！
现在市场上，FLV格式的转换软件有两种。下载地址如下：
http://download.com.com/3120-20-0.html?qt=flv&tg=dl-2001
下面，我们就看看播放FLV 的两种方法：
随着Flash MX的推出，Macromedia 公司开发了属于自己流式视频格式——FLV。这种格式是在sorenson 公司的压缩算法的基础上开发出来的。sorenson 公司也为MOV格式提供算法。
FLV格式不仅可以轻松的导入Flash 中，几百帧的影片就以两秒钟；同时也可以通过rtmp 协议从Flashcom 服务器上流式播出。
http://www.sky-link.net.cn/course/flash/root/course33.htm 这是播出效果，还比较流畅吧！
现在市场上，FLV格式的转换软件有两种。下载地址如下：
http://download.com.com/3120-20-0.html?qt=flv&tg=dl-2001
下面，我们就看看播放FLV 的两种方法：
如何给图片上添加提交表单动作
[ 2006/05/30 10:34 | by Space.As ]
2006/05/30 10:34 | by Space.As ]
<script LANGUAGE="JAVASCRIPT">
function search() {
document.form1.submit();
}
</script>
.................
<img src="imgs/3.gif" width="74" height="23" onClick="search()">
函数 search()
给图片添加onClick动作 调用函数 search()
注意 表格的名字 必须和你要提交的表单名字一致 form1 ....
function search() {
document.form1.submit();
}
</script>
.................
<img src="imgs/3.gif" width="74" height="23" onClick="search()">
函数 search()
给图片添加onClick动作 调用函数 search()
注意 表格的名字 必须和你要提交的表单名字一致 form1 ....
工作需要...............
搜集了不少.可以参考使用..
1.wma格式
放在 <body> 里面。下面是部分解释:
<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" id="MediaPlayer1" >
<param name="Filename" value="/blog/1.Wma"> <!--你文件的位置-->
<param name="PlayCount" value="1"><!--控制重复次数: “x”为几重复播放几次; x=0，无限循环。-->
<param name="AutoStart" value="0"><!--控制播放方式: x=1，打开网页自动播放; x=0，按播放键播放。-->
<param name="ClickToPlay" value="1"><!--控制播放开关: x=1，可鼠标点击控制播放或暂停状态; x=0，禁用此功能。-->
<param name="DisplaySize" value="0"><!--控制播放画面: x=0，原始大小; x=1，一半大小; x=2，2倍大小。-->
<param name="EnableFullScreen Controls" value="1"><!--控制切换全屏: x=1，允许切换为全屏; x=0，禁用此功能。-->
<param name="ShowAudio Controls" value="1"><!--控制音量: x=1，允许调节音量; x=0，禁止音量调节。-->
<param name="EnableContext Menu" value="1"><!--控制快捷菜单: x=1，允许使用右键菜单; x=0，禁用右键菜单。-->
<param name="ShowDisplay" value="1"><!--控制版权信息: x=1，显示电影及作者信息;x=0，不显示相关信息-->
</object>
搜集了不少.可以参考使用..
1.wma格式
放在 <body> 里面。下面是部分解释:
<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" id="MediaPlayer1" >
<param name="Filename" value="/blog/1.Wma"> <!--你文件的位置-->
<param name="PlayCount" value="1"><!--控制重复次数: “x”为几重复播放几次; x=0，无限循环。-->
<param name="AutoStart" value="0"><!--控制播放方式: x=1，打开网页自动播放; x=0，按播放键播放。-->
<param name="ClickToPlay" value="1"><!--控制播放开关: x=1，可鼠标点击控制播放或暂停状态; x=0，禁用此功能。-->
<param name="DisplaySize" value="0"><!--控制播放画面: x=0，原始大小; x=1，一半大小; x=2，2倍大小。-->
<param name="EnableFullScreen Controls" value="1"><!--控制切换全屏: x=1，允许切换为全屏; x=0，禁用此功能。-->
<param name="ShowAudio Controls" value="1"><!--控制音量: x=1，允许调节音量; x=0，禁止音量调节。-->
<param name="EnableContext Menu" value="1"><!--控制快捷菜单: x=1，允许使用右键菜单; x=0，禁用右键菜单。-->
<param name="ShowDisplay" value="1"><!--控制版权信息: x=1，显示电影及作者信息;x=0，不显示相关信息-->
</object>
如何在Flash里添加设为首页按扭动作
[ 2006/05/26 18:16 | by Space.As ]
2006/05/26 18:16 | by Space.As ]
myButton.onPress = function() { getURL("javascript:addFav('http://www.2solo.net','2S')");}; HTML页面的之间加入
设为首页:
myButton.onPress = function() {
getURL("javascript:void(document.links[0].style.behavior='url(#default#homepage)');void document.links[0].setHomePage('http://www.2solo.net');", "_self", "POST");
};
如果网页中没有链接的话要在之间加入
设为首页:
myButton.onPress = function() {
getURL("javascript:void(document.links[0].style.behavior='url(#default#homepage)');void document.links[0].setHomePage('http://www.2solo.net');", "_self", "POST");
};
如果网页中没有链接的话要在之间加入
利用搜索引擎寻找真正的免费资源
[ 2006/05/19 07:19 | by Space.As ]
2006/05/19 07:19 | by Space.As ]
你可能每天都要使用很多遍Google这个搜索引擎站点，下面的这种新鲜玩法你听说过吗？
网上总会有许多人共享出一些不受保护的音乐文件目录(可称之为“开放目录”)，使用在Google中输入以下关键词，就会列出大量的音乐文件目录列表。
-inurl:htm -inurl:html intitle:"index of" mp3
在以上字符串中我们用到了“index of”和inurl命令，作用是只列出目录。最后的关键词“mp3”告诉Google在这些目录中搜索mp3音乐文件。当然，不止可以搜索mp3，还可以将关键词改为“wma”、“ogg”、“avi”等，这样就可以搜索到不同的音乐或视频文件。
更进一步，比如你要搜索有关网页设计的内容，可以将最后的关键词改为“网页设计”。如果想搜索一些学习的教程，则改为“教程”。也可以指定两个或以上的关键词，比如：
-inurl:htm -inurl:html intitle:"index of" photoshop 教程
或者，比如要搜布兰妮的mp3歌曲，则可以如下输入：
-inurl:htm -inurl:html intitle:"index of" mp3 "britney spears"
再比如，搜索李连杰的电影(avi格式的)，可以输入：
网上总会有许多人共享出一些不受保护的音乐文件目录(可称之为“开放目录”)，使用在Google中输入以下关键词，就会列出大量的音乐文件目录列表。
-inurl:htm -inurl:html intitle:"index of" mp3
在以上字符串中我们用到了“index of”和inurl命令，作用是只列出目录。最后的关键词“mp3”告诉Google在这些目录中搜索mp3音乐文件。当然，不止可以搜索mp3，还可以将关键词改为“wma”、“ogg”、“avi”等，这样就可以搜索到不同的音乐或视频文件。
更进一步，比如你要搜索有关网页设计的内容，可以将最后的关键词改为“网页设计”。如果想搜索一些学习的教程，则改为“教程”。也可以指定两个或以上的关键词，比如：
-inurl:htm -inurl:html intitle:"index of" photoshop 教程
或者，比如要搜布兰妮的mp3歌曲，则可以如下输入：
-inurl:htm -inurl:html intitle:"index of" mp3 "britney spears"
再比如，搜索李连杰的电影(avi格式的)，可以输入：
