显示标签为“网页设计”的博文。显示所有博文
自适应网页设计
之前折腾过网页设计的时候也曾经考虑过这个问题的说，特别是那段时间做一个论坛的副站长帮助维护论坛（虽然现在也是，不过基本上已经只是挂名不干实事了……没办法，我太懒了）。
今天在月光博客上看到一文说google在线讲座（需要AdSense注册电子邮件才能观看）关于自适应网页设计的事。整理一下收藏下来了。
来源：http://www.williamlong.info/archives/3686.html
这个自适应网页设计方法效果是：维护同一个网页代码，即可使网站在多种浏览设备（从桌面电脑显示器到智能手机或其他移动产品设备）上具有更好的阅读体验。
1、在HTML头部增加viewport标签。
在网站HTML文件的开头，增加viewport meta标签告诉浏览器视口宽度等于设备屏幕宽度，且不进行初始缩放。代码如下：
<meta name="viewport" content="width=device-width, initial-scale=1" />
这段代码支持Chrome、Firefox、IE9以上的浏览器，但不支持IE8以及低于IE8的浏览器。
2、在CSS文件尾部增加针对不同屏幕分辨率的规则。
例如使用如下的代码，可以让屏幕宽度低于480像素的设备（如iPhone等），网页侧栏隐藏中部内容栏宽度自动调节。以下代码针对Z-Blog，WordPress相关标签名称只需修改一下即可。
@media screen and (max-device-width: 480px) {
#divMain{
float: none;
width:auto;
}
#divSidebar {
display:none;
}
}
3、布局宽度使用相对宽度。
网页总体框架可以使用绝对宽度，但往下的内容框架、侧栏等最好使用相对宽度，这样针对不同分辨率进行修改就方便。当然也可以不用相对宽度，那就需要在 @media screen and (max-device-width: 480px) 里面增加各个div的针对小屏幕的宽度，实际上更麻烦。
4、页面使用相对字体
在HTML页面上不要使用绝对字体（px），而要使用相对字体（em），对于大多数浏览器来说，通常用 em = px/16 换算，例如16px就等于1em。
今天在月光博客上看到一文说google在线讲座（需要AdSense注册电子邮件才能观看）关于自适应网页设计的事。整理一下收藏下来了。
来源：http://www.williamlong.info/archives/3686.html
这个自适应网页设计方法效果是：维护同一个网页代码，即可使网站在多种浏览设备（从桌面电脑显示器到智能手机或其他移动产品设备）上具有更好的阅读体验。
1、在HTML头部增加viewport标签。
在网站HTML文件的开头，增加viewport meta标签告诉浏览器视口宽度等于设备屏幕宽度，且不进行初始缩放。代码如下：
<meta name="viewport" content="width=device-width, initial-scale=1" />
这段代码支持Chrome、Firefox、IE9以上的浏览器，但不支持IE8以及低于IE8的浏览器。
2、在CSS文件尾部增加针对不同屏幕分辨率的规则。
例如使用如下的代码，可以让屏幕宽度低于480像素的设备（如iPhone等），网页侧栏隐藏中部内容栏宽度自动调节。以下代码针对Z-Blog，WordPress相关标签名称只需修改一下即可。
@media screen and (max-device-width: 480px) {
#divMain{
float: none;
width:auto;
}
#divSidebar {
display:none;
}
}
3、布局宽度使用相对宽度。
网页总体框架可以使用绝对宽度，但往下的内容框架、侧栏等最好使用相对宽度，这样针对不同分辨率进行修改就方便。当然也可以不用相对宽度，那就需要在 @media screen and (max-device-width: 480px) 里面增加各个div的针对小屏幕的宽度，实际上更麻烦。
4、页面使用相对字体
在HTML页面上不要使用绝对字体（px），而要使用相对字体（em），对于大多数浏览器来说，通常用 em = px/16 换算，例如16px就等于1em。
网页不间断背景音乐|即使页面跳转也不间断的背景音乐
用wordpress有一段时间了，发现有一个不好的地方，就是无法像QQ空间那样不间断地播放背景音乐，只能在某一页或者某篇文章中播放音乐，一刷新就重新播放，或者一打开其他链接就没音乐了。
谷歌百度了好久都无法搜出有这样的源代码，虽然有很多人在问。很多人的答案只有两个字：“框架”。虽然前几天一时兴起学做wordpress主题，跟着教程做了一个极其简陋的主题，CSS、HTML、PHP代码都有接触一些，但都是些最最最基本的，可以说完全不会网页语言。更别说要我用什么“框架”来做了。
无意中在一个论坛看到有这样效果的背景音乐，一时好奇加手贱，尝试将其网页代码脚本提取出来，整理完之后在本地架设的wordpress博客上测试了一下，完美运行……
但是又不敢未经过论坛主人的同意就用，虽然我天朝大国很多人民一向这样做似乎也没啥关系，但我想不能这么猥琐，于是留下一帖询问可否使用，因为我发现它用的脚本全是国外的人做的，而且注明遵守GPL协议，也就是开源，只有CSS文件和HTML文件可能是自己写的，所以我还想着应该很快回复而且90%以上都可用吧。
结果到现在已经过了三天都无任何回复。看样子被讨厌了，被鄙视了，被不屑了呢。谁叫自己这么手贱，居然将别人的源代码都给提取了出来……
没办法，自己动手丰衣足食，虽然自己愚钝不才，不让用就不让用呗，但咱也不能因此放弃的是不？于是昨晚上就学用框架iframe自己做，查了一大堆资料，终于做成了一个极其简陋的半成品。
浏览器兼容性：
问题：
效果预览，进入音乐模式：点我
在我自己的电脑上，自己的谷歌浏览器上浏览效果还可以，不知道别人的就怎样了。
暂时就这样算了，我的网站一般也就我自己进，不着急完善。
源代码：
直接放个做好的文件：
额……之后有空的话可能会尽量完善它，也继续在这里更新吧。
谷歌百度了好久都无法搜出有这样的源代码，虽然有很多人在问。很多人的答案只有两个字：“框架”。虽然前几天一时兴起学做wordpress主题，跟着教程做了一个极其简陋的主题，CSS、HTML、PHP代码都有接触一些，但都是些最最最基本的，可以说完全不会网页语言。更别说要我用什么“框架”来做了。
无意中在一个论坛看到有这样效果的背景音乐，一时好奇加手贱，尝试将其网页代码脚本提取出来，整理完之后在本地架设的wordpress博客上测试了一下，完美运行……
但是又不敢未经过论坛主人的同意就用，虽然我天朝大国很多人民一向这样做似乎也没啥关系，但我想不能这么猥琐，于是留下一帖询问可否使用，因为我发现它用的脚本全是国外的人做的，而且注明遵守GPL协议，也就是开源，只有CSS文件和HTML文件可能是自己写的，所以我还想着应该很快回复而且90%以上都可用吧。
结果到现在已经过了三天都无任何回复。看样子被讨厌了，被鄙视了，被不屑了呢。谁叫自己这么手贱，居然将别人的源代码都给提取了出来……
没办法，自己动手丰衣足食，虽然自己愚钝不才，不让用就不让用呗，但咱也不能因此放弃的是不？于是昨晚上就学用框架iframe自己做，查了一大堆资料，终于做成了一个极其简陋的半成品。
浏览器兼容性：
Opera：不知道为什么没有声音……
google chrome：经测试还可以
360安全浏览器：经测试1个还可以，1个没有声音
IE：出现关闭浏览器之后还会继续播放的奇葩景色，关闭的时候如果出现弹窗“脚本错误”全选否，然后就能完全关闭了。
其他：未知。
问题：
框架不会自适应宽度，所以浏览器不同大小可能会出现奇葩的外形问题。
尝试过网上很多自适应宽度的方法，不知道为什么在dreamweaver中浏览，网页很正常，一到浏览器上就诡异了。
效果预览，进入音乐模式：点我
在我自己的电脑上，自己的谷歌浏览器上浏览效果还可以，不知道别人的就怎样了。
暂时就这样算了，我的网站一般也就我自己进，不着急完善。
源代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>秒速340|音乐模式</title>
<meta name="Keywords" content="秒速340|动漫音乐" />
<meta name="Description" content="秒速340|网页不间断播放音乐" />
<meta name="generator" content="秒速340" />
<meta name="author" content="秒速340" />
<meta name="copyright" content="秒速340" />
<meta http-equiv="MSThemeCompatible" content="Yes" />
<meta http-equiv="imagetoolbar" content="no" />
</head>
<body>
<iframe src="http://miaosu340.me" frameborder="0" scrolling="auto"height="700" id="mainFrame" width="100%" allowtransparency="true">
</iframe>
<iframe src="http://www.xiami.com/res/player/xiamiMusicPlayer_ld.swf?dataUrl=/song/playlist/id/14340370/type/3" width="0" height="0" allowtransparency="true" scrolling="no">
</iframe>
</body>
</html>
直接放个做好的文件：
额……之后有空的话可能会尽量完善它，也继续在这里更新吧。
我刚做的一个网页—瞬间/秒速打开首页
非常简单的一个首页，自己制作的，用了纯文字加flash的形式。
因为是纯文字的关系，所以打开速度非常之快，瞬间打开，是我见过的打开速度最快的网页。
不过比起以前的那个版本有点不足，那就是加载图片的速度变慢了，之前做的那个图片的加载完全没有停顿的，现在这个有停顿。可能是画质提高的原因。
本来计划做的时候是觉得会很快就能够做完的，实际上所花的时间超出我的预料。遇到了不少问题，筛选图片、压缩图片、制作flash、制作网页、测试、检查浏览器兼容性。本来不会跟着浏览器的大小改变网页大小，后来上网查了一下，要建不同的CSS，比较麻烦，然后就用了宽度自适应，用%来设定网页宽度，问题解决的比较蛋疼。浏览器太小的话排版就很难看了。
网址：http://moeacg.eu5.org/home
这个网站是我用免费空间开的。速度非常棒，默认开启了安全模式，而且不能关闭。在我用过这么多的免费全能空间之中，这个免费空间做的网站速度最快，很少出现加载一半然后就停止加载的情形，其他很多免费空间做的网站都有这样的情况，每次都要刷新几次才行。
做完之后才发现有张图片重复了……我明明检查了几遍的了TAT……不幸啊！！果然够倒霉的我。
另外，这个博客（http://yuki.ixiezi.com）刚开了一个编辑器插件，搞到现在编辑都有些问题。有时光标都会无缘无故跑到别的地方去……本来写博客的时候行间的距离很大的，现在却没有了……还有非得要开编辑工具栏full模式才可以，否则连个工具栏都不见了，写文字的地方也无法编辑……
再这么蛋疼，我真有可能将这博客搬到http://moeacg.eu5.org/上然后这个博客就用来备份算了。
订阅：
博文 (Atom)
