网页设计技巧有很多,今天常用于网站设计的几个技巧供大家参考使用!
技巧一:网站logo添加替代文本
给网站logo添加替代文本有两个好处:一个是能够让搜索引擎识别logo图片的含义;另一个是当图片由于延时未能够加载出来时,也能够让用户知道哪一个是你的网站logo。
具体方法如下:
① <img src="logo.png" alt="图片说明">
如果你使用背景图来作为logo的话,那么你也可以添加title属性来实现;
② <
span title=“图片说明”></span>
链接+图片的方式当然是最好的,但是最好也要加上title属性;
③ <a title="图片说明">图片说明</a>
技巧二:添加基本的Landmarks
ARIA Landmarks是W3C定义的一套网站可用性规则,对于网站不同的模块添加描述性的Landmark,或者是直接叫role,这样有利于对搜索引擎更好的解释你的网页,让用户更好的使用你的网站。
<nav role="navigation">
<div id="maincontent" role="main">
<form action="search.php" role="search">
技巧三:增强focus定义
很多网站都会想尽办法去除浏览器的:focus样式,尤其是针对IE浏览器更是。其实,浏览器默认带上:focus样式也是具有一定道理性的,它能够指示用户当前的鼠标焦点的位置在哪里。对于键盘流来说是特别重要的!所以建议不要去掉:focus样式。如果你认为默认的样式不美观或是不能实现统一(IE虚线框,Webkit是高亮的实现框,并且Safari是蓝色的,Chrome是橙色的),那么你也可以自己去定义一个高亮色:
a:focus {
outline:1px solid red;
background:yellow;
}
技巧四:定义必填表单项
使用aria-required属性可以定义表单中的必填项:
<input type="text" name="username" aria-required="true">
技巧五:给你的页面添加一个h1
添加h1有利于seo的优化,对网站整体的可用性和可读性都是具有一定帮助的。
技巧六:定义表格的表头
很多人习惯性的将表格全部使用td标签,其实,表格不止有hd标签,还有th、col、scope等。简单的说,表头换成th标签比较好:
<th scope="col">Date</th>
技巧七:定义表格描述
不要简单的在表格前面/后面加上一个p就完事了,表格有专用的caption标签是可以使用的,就像定义图片一样。
<table>
<caption>Class Schedule</caption>
<tr>
技巧八:避免“单击此处”
这样的链接描述对于普遍人来说无妨,但是对于搜索引擎来说却不太友好,而且还会对一些用户产生干扰,所以一定要把链接用到该用的地方。
技巧九:去掉tabindex
以前很多人都会用tabindex来“增强”用户的体验,但是这个属性却会打乱页面的正常阅读顺序,不管对于哪一类用户来说都不是友好的。所以tabindex属性最好不要乱用。
技巧十:在线检测一下
WebAIM开发的一个网页工具,当输入URL的时候就会自动进行检测,非常的方便且实用。大家可以试一下效果!