你问我答(26)——遵循Web标准的网页设计工作流程(五)

昨天介绍了布局设计和视觉细节设计这两个步骤,今天进行下一步工作,也是这个系列的最后一次内容了。

接下来我们进行一些交互性的动态设计,这里主要是为网页元素增加鼠标经过时的效果。如下图所示,在鼠标指针经过主导航栏和次导航栏的时候,相应的菜单项会发生变化,鼠标经过“登录帐号”或者“购物车”图像时,颜色也会变浅,这都是为了提示用户所进行的选择。此外,当鼠标经过图像时,图像周围的边框也会发变化。

网页设计流程-交互

到这里,这个页面的静态设计就算完成了,接下来还需要进行相应程序的开发,无论是由程序员进行开发,还是使用CMS系统,都应该相关的开发人员来继续工作了,设计师的工作到这里基本就结束了。

希望读者可以通过5天来的讲解,对网页设计从无到有,从策划构思到设计实施,有一个比较完整的概念了!

最后,谈一谈使用这种方法设计出来页面具有哪些优点。做到这里,读者可能还没有完全意识到使用这种CSS进行布局的优点。这种布局方式的最大优点是非常灵活,可以方便地扩展和调整。例如,当网站随着业务的发展,需要在页面中增加一些内容,那么不需要修改CSS样式,只需要简单地在HTML中增加相应的模块就可以了。

如下图所示的就是对页面扩展了内容以后的效果,在“主要内容”部分,增加了“特色促销”和“优中选优”两个模块,再右侧栏中增加了“送货服务”和“热门信息”两个模块,在前面的页面基础上,增加这些内容之需要几分钟的时间就可以完成。

网页设计流程-增加模块

不但如此,充分设计合理的页面,可以非常灵活地修改样式,例如,只需要将两列布局的浮动方向交换,就可以立即得到一个新的页面,如下图所示,可以看到,左右两列交换了位置。

网页设计流程-交换顺序

试想如果没有从一开始就有良好的结构设计,那么稍微修改一下内容都是非常复杂的事情。如果读者曾经使用表格进行页面布局,就会发现这里列出的优点了,对于表格布局的网页,这些都是不可想象的。

好了,5天的讲解到这这里就全部完成了,希望通过以上的介绍,能够给读者在设计思路上有一些帮助!

4,386

欢迎您发表留言

(须填写)
(须填写,不公开)

请注意:这里输入的HTML代码会被屏蔽,如果需要讨论复杂的具体代码问题,请到我们的论坛发贴,谢谢!

15条留言