设为首页 - 加入收藏
您的当前位置:主页 > 网站基础 > 相关技巧 > 正文

网页设计思路注意技巧要点

来源:未知 编辑:站长沙龙小露 时间:2022-01-13 22:48

网页设计技巧有很多,今天常用于网站设计的几个技巧供大家参考使用!

技巧一:网站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">

1

2

3

技巧三:增强focus定义

很多网站都会想尽办法去除浏览器的:focus样式,尤其是针对IE浏览器更是。其实,浏览器默认带上:focus样式也是具有一定道理性的,它能够指示用户当前的鼠标焦点的位置在哪里。对于键盘流来说是特别重要的!所以建议不要去掉:focus样式。如果你认为默认的样式不美观或是不能实现统一(IE虚线框,Webkit是高亮的实现框,并且Safari是蓝色的,Chrome是橙色的),那么你也可以自己去定义一个高亮色:

a:focus {

      outline:1px solid red;

      background:yellow;

 }

1

2

3

4

技巧四:定义必填表单项

使用aria-required属性可以定义表单中的必填项:

<input type="text" name="username" aria-required="true">

1

技巧五:给你的页面添加一个h1

添加h1有利于seo的优化,对网站整体的可用性和可读性都是具有一定帮助的。

技巧六:定义表格的表头

很多人习惯性的将表格全部使用td标签,其实,表格不止有hd标签,还有th、col、scope等。简单的说,表头换成th标签比较好:

<th scope="col">Date</th>

1

技巧七:定义表格描述

不要简单的在表格前面/后面加上一个p就完事了,表格有专用的caption标签是可以使用的,就像定义图片一样。

<table>

   <caption>Class Schedule</caption>

<tr>

1

2

3

技巧八:避免“单击此处”

这样的链接描述对于普遍人来说无妨,但是对于搜索引擎来说却不太友好,而且还会对一些用户产生干扰,所以一定要把链接用到该用的地方。

技巧九:去掉tabindex

以前很多人都会用tabindex来“增强”用户的体验,但是这个属性却会打乱页面的正常阅读顺序,不管对于哪一类用户来说都不是友好的。所以tabindex属性最好不要乱用。

技巧十:在线检测一下

WebAIM开发的一个网页工具,当输入URL的时候就会自动进行检测,非常的方便且实用。大家可以试一下效果!

————————————————

版权声明:本文为CSDN博主「高级网络营销师」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/gjwlyxs/article/details/105464232

相关推荐:

    本文网址:http://www.shlzwl.cn/a/jichu/jq/2022/0113/177655.html ,喜欢请注明来源。

站长沙龙 www.shlzwl.cn 中国百万站长的福音,一站式服务。网站地图

Copyright © 2002-2019 站长沙龙 客服

Top