你问我答(26)——遵循Web标准的网页设计工作流程(五)
昨天介绍了布局设计和视觉细节设计这两个步骤,今天进行下一步工作,也是这个系列的最后一次内容了。
接下来我们进行一些交互性的动态设计,这里主要是为网页元素增加鼠标经过时的效果。如下图所示,在鼠标指针经过主导航栏和次导航栏的时候,相应的菜单项会发生变化,鼠标经过“登录帐号”或者“购物车”图像时,颜色也会变浅,这都是为了提示用户所进行的选择。此外,当鼠标经过图像时,图像周围的边框也会发变化。

到这里,这个页面的静态设计就算完成了,接下来还需要进行相应程序的开发,无论是由程序员进行开发,还是使用CMS系统,都应该相关的开发人员来继续工作了,设计师的工作到这里基本就结束了。
希望读者可以通过5天来的讲解,对网页设计从无到有,从策划构思到设计实施,有一个比较完整的概念了!
最后,谈一谈使用这种方法设计出来页面具有哪些优点。做到这里,读者可能还没有完全意识到使用这种CSS进行布局的优点。这种布局方式的最大优点是非常灵活,可以方便地扩展和调整。例如,当网站随着业务的发展,需要在页面中增加一些内容,那么不需要修改CSS样式,只需要简单地在HTML中增加相应的模块就可以了。
如下图所示的就是对页面扩展了内容以后的效果,在“主要内容”部分,增加了“特色促销”和“优中选优”两个模块,再右侧栏中增加了“送货服务”和“热门信息”两个模块,在前面的页面基础上,增加这些内容之需要几分钟的时间就可以完成。

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

试想如果没有从一开始就有良好的结构设计,那么稍微修改一下内容都是非常复杂的事情。如果读者曾经使用表格进行页面布局,就会发现这里列出的优点了,对于表格布局的网页,这些都是不可想象的。
好了,5天的讲解到这这里就全部完成了,希望通过以上的介绍,能够给读者在设计思路上有一些帮助!
4,386



老师 如果要做后台呢?我想加个后台来控制这个页面 怎么做啊?
谢谢老师
受益匪浅。
老师您好!
我想问下,在css设计彻底研究教程里用于编辑CSS的那个软件是叫什么啊?
大部分地方是Dreamweaver,有些地方也用了Expression web
收获不小,非常感谢!!!
体验场 ,
谢谢您的鼓励,欢迎您常来这里交流!
试想如果没有从一开始就有良好的结构设计,那么稍微修改一下内容都是非常复杂的事情。如果读曾经使用表格进行页面布局,就会发现这里列觉得优点,对于表格布局的网页,都是不可想象的。
温老师,这里漏了个字,就是“者”,仔细看下
谢谢可可!
已经修改过来了。
本例中出现了很多圆角,这些都是怎么实现的呀?是单背景图像吗?
你可以发现,在这个例子中,所有圆角框都是相同宽度的,因此就很简单了,只要两个背景图像就够了,上下滑动,就可以适应不同高度的需要了。
看完了,很好!支持一个!
最近研究css,对圆角很难控制,特别是那种四背景图像的滑动门的圆角,就是弄不明白,不知道老师能不能指点一下。
Bong ,
制作圆角框的方法有很多,至少几十种吧,各有特点。在实际设计的时候,可以根据需要来选择合适的方法。树立最后的那个5背景图像是适应性比较强的,在一个页面中,不同宽窄、长短的多个圆角框可以共享一套CSS代码和背景图像。
温老师:
您好,非常喜欢您最近编写的《遵循Web标准的网页设计工作流程》系列,让我们对网页设计的流程有了一个初步的了解。希望温老师接下来能推出更加细化各流程的相关系列文章或视频。
另附上自己的拙文与大家分享知识。
李华斌
2008-3-24于宁波
读者故事——与前沿视频教室的朋友分享——用CSS缩放图片
学习CSS也有几个月了,磕磕碰碰地总算把自己公司的网站架起来了。这其中与许多朋友的帮助和前沿视频教室几位老师视频教程的指导是分不开的,在这里先表示感谢。
……
斌斌无理,
看了您写的文章,非常棒。因此我稍加编辑后制作了一个pdf文档,收录到了我们的“读者故事与案例研究”栏目,您的是第一篇,以后如果有其他读者有兴趣,可以增加新的文章,使内容更丰富。
点击这里了解详细请情况。