网站前端页面设计应该怎么做？有啥要注意的？

新闻资讯发布时间2020.4.28.浏览数：1692

【网站前端页面设计应该怎么做？有啥要注意的？】。。。谷歌建站www.appwangye.com三行网络公司为您详细介绍 - 请往下阅读》

网站前端页面设计应该怎么做？有啥要注意的？

网站制作中，前端页面设计应该怎么做，需要注意什么事项呢，有哪些要求呢?下面为大家分析。

1、尊从内容与页面样式的脱离，如需要，同样也要做到布局与COLOR的脱离。什么样的图片属于内容：从数据库里取出来的图片。凡是不属于内容的图片请都用背景。

1) 页面代码，做到精简，逻辑性清楚;公用部位可以引入进来，比如头部，脚部。

2) CSS逻辑清析，精简。可在不改变功能的前提内，做到能更换页面布局及换色。

CSS样式每个页面引入不超过两个文件，一个是COMMON：它包含整个站点都需用到的公用部分，如整体布局，头部，脚部，框，按扭等。另一个是当前页的CSS。CSS文件引入在2个之内，减少http请求避免CSS的表达式。

2、尽量把页面的背景图及小图标整合到一张图片，用CSS定位方法。这样以减少http请求，从而降底网站的下载速度。

3、将脚本放在底部。

这样页面就可以逐步呈现，而且页面中的可视组件可以尽早下裁。

网站前端设计的注意事项是什么？

设计师需要注意的几点：

1、尽量考虑为元素命名其本身的作用或”用意”，达到语义化。不要使用表面形式的命名。如:red/left/big等。

2、组合命名规则:

[元素类型]-[元素作用/内容] 如：搜索按钮：btn-search

登录表单：form-login

新闻列表：list-news

3、涉及到交互行为的元素命名:

凡涉及交互行为的元素通常会有正常、悬停、点击和已浏览等不同样式，命名可参考以下规则：

鼠标悬停：hover 点击：click 已浏览：visited

如:搜索按钮：btn-search、btn-search-hover、btn-search-visited

4.用户体验方面需要注意的：

1)、每个连接，按钮要做上鼠标hover时的一个变化效果。如果hover时是换一张背景图片，请把这两张图片整合在一张图片中，以防止在hover时，页面还在download变化的那张图片，这样会出现那个按钮无图的间隔;

2)、 INPUT有个label，可以让用户在点击字时，光标自动跳入相应input中;

3)、图片应该有alt属性，以备图片阻止时，文字的替换。

配合程序开发人员我们需要注意的(xhtml)：

1、了解用户可编辑上传修改的“图片”，“文字”区域的需求。根据需求来定位控制，以保证页面的稳定显示。如图片，需了解：

1) 宽度是否是固定大小;

2) 宽度最大限度;

3) 大小不一样时的居中显示;

如文字，需了解：

1) 文字的最大长度。及加“…”省略号区域。

2) 在测试中经常也会碰到英文无空格情况，得用overflow: hidden的方法隐藏溢出部分。

2、每个页面加上正确显示的TITLE。

3、在页面中尽量完成每步交互效果，包括既时响应的。

4、提交程序员的DEMO必须是连贯的，交互效里齐全，而且经过自已在IE6.0，IE7.0，FIREFOX一次以上的整体测试。

三行网络——您值得信赖的广州网站开发公司

此文《网站前端页面设计应该怎么做？有啥要注意的？》由三行网络公司原创，转载请保留原文链接，谢谢！
关键词标签：网站前端页面设计应该怎么做？有啥要注意的？ (PC+手机)响应式网站建设

网站前端页面设计应该怎么做？有啥要注意的？

新闻资讯发布时间2020.4.28.浏览数：1692