爬格子的拇指_博客

文章列表

您正在查看 "网站建设" 分类下的文章

2009-06-05 18:05

自己从工艺品设计到平面设计到网络设计，虽然设计原则不离其宗，但经验下来的心得告诉自己，设计媒介的变化带来很多媒介自身的特殊性，下面总结下网站视觉设计的一些要点，有他人经验，也有自己的心得：

1—logo：基本logo特征，符合logo设计基础（平面设计通用）显示器效果：清晰度，最小尺寸（因显示器分辨率而带来的，等同线下平面设计的印刷效果）

2—文字：内容等级决定字体、字号大小、粗细；状态决定颜色（默认或者根据网站特殊统一）

3—广告、内容图片：尺寸样式的定位，同一页面的和谐性，图片的优化，位置的节奏，大小对比。

%N#H#%　　4—icon：品牌性，表达准确合理，设计手法（依据品牌性），一致性，作用：吸引，醒目，方便识别、理解、**作、记忆。

5—可点击（button)：区别（不可点击），根据人的生活经验：厚度，可按，质感（实体联想），色彩（品牌性、统一性、对比性）；统一的样式大小（依据里面文字的内边距统一）

6—背景图片：氛围效果营造，同产品的统一性，优化（品质大小，色彩信息，实现方案），

7—图文排版：主图次文，图文节奏，空隙，模块化。

8—当前状态：放大（形状），变色（反色、对比色、明度纯度区别色），链进链出后指定内容提示。

9—交互控件：样式合理准确性（人对系统默认的认知和生活常规认知），状态（视觉表现样式和动作过程优化），创意。

10—loading:内容关联性（loading前后的内容关联），无聊等待的乐趣，体积、面积优化，创意。

11—用户反馈_ 成功、出错、提示、无结果：文案（明确、合理、人性化、创意），图形（明确、醒目、色彩的心理认知准确度）。

12—动画效果：过程合理（模拟真实环境的合理化），连续，节奏感，用户日常动作表现，音效配合，创意。

13—首尾设计：首（品牌宣传、自身特点、明确内容、气氛表达、创意。尾：呼应、节奏（与首），创意。

14—适应屏设计（全屏设计）：最大最小屏幕的考虑（文字、图片的位置、折行效果）

15—固定尺寸的栅格设计：合理的单元格（考虑黄金分割），单元格面积节奏，边距统一性。
16—demo设计样稿：对内容最多最少的考虑。

17—页面：品牌性，基调元素一致性，复用性，节奏感、面积感，视觉第一吸引，引导浏览，点线面关系，素描原理（运用素描的基本规律来做页面）。

18—阅读：背景对阅读（视力）的舒适度，内容与背景的对比舒适度。

其实还有很多设计的点比如交互设计，比如代码设计，我们可以展示给用户看到的这些综上所述，构成了用户体验设计的一个大过程，自己在做的很多时候其实也不是都能估计到每个点的，总结出来以帮助随时审视

http://bbs.zzbaike.com/thread-11935-1-1.html

类别：网站建设 | 评论(0) | 浏览()

html 图像超级链接

2009-06-04 17:57

图像的链接和文字的链接方法是一样的，都是用<a>标签来完成，只要将<img>标签放在<a>和</a>只见就可以了。用图像链接的图片的上有蓝色的边框，这个边框颜色也可以在<body>标签中设定。

<html>
<head>
<title>使用图像为选取的对象</title>
</head>
<body>
 
<h1 align="center">图片的超链接</h1>

<center>
<a href="http://www.sohu.com/" target="_blank"><img alt="搜狐网站" src="../../imge/logo[1].gif"></a>
<a href="http://www.baidu.com/"><img alt="百度搜索" src="../../imge/logo[2].gif"></a>
<a href="http://www.sina.com.cn"><img alt="新浪网站" src="../../imge/logo(3).gif"></a>
</center>
</body>
</html>

图像的影像地图超链接

在HTML中还可以把图片划分成多个热点区域，每一个热点域链接到不同网页的资源。这种效果的实质是把一幅图片划分为不同的热点区域，再让不同的区域进行超链接。这就是影像地图。要完成地图区域超链接要用到三种标签：<img><map><area>下面分别介绍这些标签的用法：

影像地图（Image Map）标签的使用格式：

<img src="图形文件名" usemap="#图的名称">



<map name="图的名称">



<area shape=形状 coords=区域座标列表 href="URL资源地址">
......可根据需要定义多少个热点区域
<area shape=形状 coords=区域座标列表 href="URL资源地址">

</map>

【1】shape -- 定义热点形状
shape=rect：矩形
shape=circle：圆形
shape=poly：多边形

【2】coords -- 定义区域点的坐标

a.矩形：必须使用四个数字，前两个数字为左上角座标，后两个数字为右下角座标
例：<area shape=rect coords=100,50,200,75 href="URL">

b.圆形：必须使用三个数字，前两个数字为圆心的座标，最后一个数字为半径长度
例：<area shape=circle coords=85,155,30 href="URL">

c.任意图形（多边形）：将图形之每一转折点座标依序填入
例：<area shape=poly coords=232,70,285,70,300,90,250,90,200,78 href="URL">

在制作本文介绍的效果时应注意的几点：
　　 1、在<img>标记不要忘记设置usemap、ismap参数，且usemap的参数值必须与<map>标记中的name参数值相同，也就是说，“图像地图名称”要一致；
　　 2、同一“图像地图”中的所有热点区域都要在图像地图的范围内，即所有<area>标记均要在<map>与</map>之间；
　　 3、在<area>标记中的 cords 参数设定的坐标格式要与shape参数设定的作用区域形状配套，避免出现在shape参数设置的矩形作用区域，而在cords 中设置的却是多边形区域顶点坐标的现象出现。

<html>
<head>
<title>影像地图</title>
</head>

<body>
<img src="../../imge/yxlj.jpg" alt="影像地图" hspace="10" align="left" usemap="#yxdt" border="0">
<map name="yxdt">
<area shape="rect" coords="80,69,180,120" href="http://www.baidu.com/" target="_blank" alt="点击链接到百度搜索">
<area shape="circle" coords="283,95,45" href="http://www.sina.com.cn" target="_blank" alt="点击链接到新浪网站">
</map>
 
 
 
 
 
 
<a href="#" onClick="javascript:window.history.back()">返回</a>
</body>
</html>

http://bbs.zzbaike.com/thread-11844-1-1.html

类别：网站建设 | 评论(0) | 浏览()

提升网站打开速度的七个好办法

2009-06-03 17:53

一、记得帮页面减肥

我们浏览网页实际上是将虚拟主机中的网页内容下载到本地硬盘，再用浏览器解释查看的。下载网页的快慢在显示速度上占了很大比重，所以，网页本身所占的空间越小，那么浏览速度就会越快。这就要求在做网页的时候遵循一切从简的原则，如：不要使用太大的Flash动画、图片等资源。干净、简洁的页面会给人一种思路明朗的感觉。

二、如没必要，尽量使用静态HTML页面

众所周知，ASP、PHP、JSP等程序实现了网页信息的动态交互，运行起来的确非常方便，因为它们的数据交互性好，能很方便地存取、更改数据库的内容，使网站“动”起来，如：论坛、留言板等。但是这类程序必须先由服务器执行处理后，生成HTML页面，然后再“送”往客户端浏览，这就不得不耗费一定的服务器资源。如果在虚拟主机上过多地使用这类程序，网页显示速度肯定会慢，所以没有必要，请尽量使用静态的HTML页面。

三、不要将整个页面内容塞到一个Table中

这是网页设计的问题了，很多站长为了追求页面统一对齐，将整个页面的内容都塞进了一个Table(表格)里，然后再由单元格td来划分各个“块”的布局，这种网站的显示速度是绝对慢的。因为Table要等里面所有的内容都加载完毕后才显示出来的，如果某些内容无法访问，就会拖延整个页面的访问速度。正确的做法是：将内容分割到几个具有相同格局的Table中去，不要全都塞到一个Table里。

四、将ASP、ASPX、PHP等文件的访问改为.js引用

这在ASP、ASPX、PHP等程序设计时应该注意的，如果你要在静态的HTML页面里嵌入动态的数据，而这些动态的数据是由ASP、PHP等程序来提供的话，会使用以下的语句引用：，这样的话，每次有一个人访问你的网站，服务器就要执行并处理一次tongji.asp文件，从数据库抽取相应的数据，再输出给网页显示，如果有几万个人同时访问，就要执行几万次，后果就可想而知。建议在这些程序中将数据动态生成到一个js文件中去，然后在首页引用该js文件。这样，数据显示的任务就交给客户端的浏览器去做，不会耗费服务器的资源，显示速度自然就很快。

五、使用iframe嵌套另一页面

如果你要在网站上插入一些广告代码，又不想让这些广告网站影响速度的话，那么，使用iframe最合适不过了。方法是：将这些广告代码放到一个独立的页面去，然后在首页用如下的代码将该页面嵌入即可，这样就不会因为广告页面的延迟而拖了整个首页的显示。

六、讲究网站计数器代码放置的技巧

在网页里放置计数器可以统计网站的访问流量，为站长和广告商家提供访问依据，但是，不管功能有多强大的网站统计系统，都会有出故障的时候。如果直接把统计代码放到页面内容的前面，或者放在一个Table或者div标签里，那么在计数器不能访问的时候，你的页面上那个Table或者div就会产生几十秒钟的延迟，导致页面很长时间才能访问。所以，要提高网站的速度，就要讲究统计代码放置的位置，正确的方法是：把统计代码放到页面的最下面，并且不要和页面内容同在一个Table或者div标签里。可以在页面代码的最下方直接放置统计代码，或者在最下方单独做一个Table或者div来放置计数器。这样，在计数器不能访问的时候，你的网站速度也不会受到丝毫影响。

七、友情链接的学问

网站之间互相做链接可以增加网站的宣传效果，做LOGO图片链接更能准确地描述网站的主题和定位，宣传效果会大大的增强，但图片链接做得太多，必然会影响网页的显示速度。很多站长都喜欢直接引用友情网站上的图片URL，这样图片要先经过加载才能显示的，各个友情网站的访问速度不一样，整个表格都要等图片都下载完了才能显示出来，这样大大降低了网页的速度。因此，做友情链接时应尽量做到：

1. 只做文字链接：做文字链接是不会延迟网页速度的。

2. 将所有链接放到一个独立的分页去，然后在首页链接上该页。

3. 如果友情链接一定要出现在首页，请将链接所在的整个Table放到页面的最下方，因为页面是由上到下逐行显示的，将其放到页面的最下方，不会延迟其他内容的显示。

4. 友情链接的LOGO图片先下载后再传到自己的网页空间，这样，速度由自己的网站空间决定而不受友情网站的影响。

http://bbs.zzbaike.com/thread-11937-1-1.html

类别：网站建设 | 评论(0) | 浏览()

HTTP状态码及含义

2009-06-02 18:08

HTTP状态码及含义，譬如大家经常探讨并且与本文相关的Http状态码：

404：服务器找不到指定的资源，请求的网页不存在(譬如浏览器请求的网页被删除或者移位，但不排除日后该链接有效的可能性)；
410：请求的网页不存在(注意：410表示永久性，而404表示临时性)；
200：服务器成功返回请求的网页；
301：网址永久性重定向
302：网址临时性重定向

注意：大部分搜索引擎将“404”与“410”状态同等对待，如Google。(参见Matt Cutts的说明)

对HTTP404状态码的理解

　　HTTP 404 错误意味着链接指向的网页不存在，即原始网页的URL失效，这种情况经常会发生，很难避免，比如说：网页URL生成规则改变、网页文件更名或移动位置、导入链接拼写错误等，导致原来的URL地址无法访问；当Web 服务器接到类似请求时，会返回一个404 状态码，告诉浏览器要请求的资源并不存在。但是，Web服务器默认的404错误页面，无论Apache还是IIS，均十分简陋、呆板且对用户不友好，无法给用户提供必要的信息以获取更多线索，无疑这会造成用户的流失。

　　因此，很多网站均使用自定义404错误的方式以提供用户体验避免用户流失。一般而言，自定义404页面通用的做法是在页面中放置网站快速导航链接、搜索框以及网站提供的特色服务，这样可以有效的帮助用户访问站点并获取需要的信息。

HTTP404对SEO的影响

　　自定义404错误页面是提供用户体验的很好的做法，但在应用过程中往往并未注意到对搜索引擎的影响，譬如：错误的服务器端配置导致返回“200”状态码或自定义404错误页面使用Meta Refresh导致返回“302”状态码。正确设置的自定义404错误页面，不仅应当能够正确地显示，同时，应该返回“404”错误代码，而不是 “200”或“302”。虽然对访问的用户而言，HTTP状态码究竟是“404”还是“200”来说并没有什么区别，但对搜索引擎而言，这则是相当重要的。

(一)自定义404错误页返回“200”状态码

　　当搜索引擎蜘蛛在请求某个URL时得到“404”状态回应时，即知道该URL已经失效，便不再索引该网页，并向数据中心反馈将该URL表示的网页从索引数据库中删除，当然，删除过程有可能需要很长时间；而当搜索引擎得到“200”状态回应时，则会认为该url是有效的，便会去索引，并会将其收录到索引数据库，这样的结果便是这两个不同的url具有完全相同的内容：自定义404错误页面的内容，这会导致出现复制网页问题。对搜索引擎而言，特别是Google，不但很难获得信任指数TrustRank，也会大大降低Google对网站质量的评定。（为什么会出现返回“200”状态码的情况？？请参看下面内容“自定义404错误页面的基本原则”）

　　我一直在使用Google Sitemap，当我们提交XML格式网站地图文件时，Google会验证我们的身份以确保是网站合法的管理者。验证方式有两种：上传指定名称的html 页到网站根目录或者在网页meta区域添加一个标识身份的meta标签。我通常是使用上传html网页的方式，但Google却提示我网站根目录下找不到这个网页（实际上我已上传，并且通过浏览器可以访问），这是一个很可怕的问题，见图：

(二)自定义404错误页使用Meta Refresh返回“302”状态码

　　常常看到许多网站的自定义404错误页面采取类似这样的形式：首先显示一段错误信息，然后，通过Meta Refresh将页面跳转到网站首页、网页地图或其他类似页。根据具体实现方式不同，这类404页面可能返回“200”状态码，也可能返回“302”，但不论哪种，从SEO技术角度看，均不是一种合适的选择。

　　对“200”状态的情况我们上面已经谈过，那么，当404页面返回“302”时，搜索引擎会怎么对待呢？从理论上说，对“302”错误，搜索引擎认为该网页是存在的，只不过临时改变了地址，仍然会索引收录该页，这样，同样会出现类似于“200”状态码时的重复文本问题；其次，以google为代表的主流搜索引擎对302重定向的适用范围要求越来越严格，这类不当使用302重定向的情况存在很大的风险。

确保自定义404错误页面能够返回“404”状态码

　　在自定义404错误页面设置完毕后，一定要检查一下其是不是能够正确地返回“404”状态码。可以使用Server Header检查工具，输入一个不存在网页的url，查看一下HTTP Header的返回情况，确信其返回的是“404 Not found”。

404错误的处理方式
(一)定制404错误页面的基本原则

　　首先应明确的是，404错误应工作在服务器级而不是网页级。对定制使用动态页面如PHP脚本类型的404页时，必须确保在PHP执行前服务器已经顺利地送出“404”状态码，不然，一旦执行到了ISAPI级别，返回的状态码便只能是“200”或其他如“302”之类的重定向状态码了。

　　其次，在自定义网站的404错误页面时，对设置的错误页面URL链接应使用相对路径而不是绝对路径，而且自定义404页面应该放在网站根目录下。尽管无效链接可能是多种形式的URL，但当发生404访问错误时，WEB服务器会自动将其转到自定义的当404错误页中，这跟URL的形似没有关系。

(二)Apache下设置404错误页面

　　为Apache Server设置 404错误页面的方法很简单，只需在.htaccess 文件中加入如下内容即可：
ErrorDocument 404 /notfound.php

注意：
1.切记不要将404错误转向到网站主页，否则可能会导致主页在搜索引擎中消失
2.切记不要使用绝对URL(例如：http://www.bloghuman.com/nofound.php形式)，如果使用绝对URL返回的状态码是“302”+“200”（已测试）

(三)IIS/ASP.net下设置404错误页面

首先，修改应用程序根目录的设置，打开 “web.config” 文件编辑，在其中加入如下内容：

＜configuration＞
＜system.web＞
＜customErrors mode=”On” defaultRedirect=”error.asp”＞
＜error statusCode=”404″ redirect=”notfound.asp” /＞
＜/customErrors＞
＜/system.web＞
＜/configuration＞

注：上文例中“error.asp”为系统默认的404页面，“notfound.asp”为自定义的404页面，使用时请修改相应文件名。

然后，在自定义的404页面“notfound.asp”中加入：

＜%
Response.Status = “404 Not Found”
%＞

这样，便可以保证IIS能够正确地返回“404”状态码

(四)在IIS/ASP.net下设置404静态页面

设置静态404错误页面的方法则比较简单，在IIS管理器中右键单击要管理的网站，打开“属性”中的“自定义错误信息”页，为“404”设定相应的错误信息页即可。不过，此处在“消息类型”中一定要选择“文件”或“默认值”，而不要选择“URL”，不然，将导致返回“200”状态码。

http://bbs.zzbaike.com/thread-12075-1-1.html

类别：网站建设 | 评论(0) | 浏览()

怎样解决DIV层被Flash动画遮盖问题？

2009-06-01 18:07

今天测试div层和flash的交互，发现div层总是被flash层遮盖，在百度上找了一会，说是加个就成了，我加完后在IE下问题是解决了，但是FF下好像没有反应，后来才知道IE中和FF加的代码是不一样的，如下：
　　IE浏览器下可用

　　firefox下可用

　　关于wmode属性资料：

　　(可选)允许使用 Internet Explorer 4.0 中的透明 Flash 内容、绝对定位和分层显示功能。此标记/属性仅在带有 Flash Player ActiveX 控件的 Windows 中有效。

　　"Window"在 Web 页上用影片自己的矩形窗口来播放应用程序。"Window"表明此 Flash 应用程序与 HTML 层没有任何交互，并且始终位于最顶层。

　　"Opaque" 使应用程序隐藏页面上位于它后面的所有内容。

　　"Transparent"使 HTML 页的背景可以透过应用程序的所有透明部分显示出来，并且可能会降低动画性能。

　　"Opaque windowless"和"Transparent windowless"都可与 HTML 层交互，从而允许 SWF 文件上方的层遮蔽应用程序。这两种选项之间的差异在于"Transparent"允许透明，因此，如果 SWF 文件的某一部分是透明的，则 SWF 文件下方的 HTML 层可以透过该部分显示出来，而"opaque"则不会显示。