网页设计基本步骤
网页设计基本步骤
dw怎么制作网页
一、用“原型法”细化网站设计需求
用DW在最短的时间内搭出一个可以浏览、跳转的网站,然后与客户一起体验并评估这个网站原形的架构、流程、布局、配、文字等不同层面。
二、网页链接的深度、广度和耦合程度
超级链接是网页设计中最重要的信息组织方式,也是整个Web世界的精髓所在。但糟糕的链接设计——比如过于泛滥和随意的超级链接——很可能会让冲浪者迷失在充斥着信息碎片的海洋里。java教程项目和实际项目差别有多大
如果将网站首页视为链接层次中的第一级,那么,由首页中的超级链接得到的,在信息内容上具有从属关系的站内页面就是网页链接层次中的第二级;从每个第二级页面又可以继续得出第三级网页;依此类推,我们多半可以得到一个完整的树形链接结构。在这个树形链接结构中,整棵树的层数可以被称为站内网页链接的深度,页面最多的一层中包含的页面总数可以被称为站内网页链接的广度。一般说来,一个网站的链接深度和广度最好有一个合适的均衡关系,深度过大的网站不利于冲浪者快速获取相关信息,广度过大的网站则容易让冲浪者在无数并列的超级链接面前不知所措。
当网页中的某个链接既没有指向下一级网页,也没有指向上一级网页时,它必然构成了由当前页面向跨层级网页或站外URL的“跳转”,这种跳
转的出现频率可以被称为网页链接的泛耦合程度。泛耦合程度过低的网站无法有效发挥Web冲浪的价值,由此得到的网站过于死板;另一方面,泛耦合程度较高的网站又有可能造成信息内容的支离破碎,影响冲浪者的正常阅读。因此,网页链接的泛耦合程度应该与网站的设计需求相适应——儿童或动漫类的网站应鼓励那些代表跳跃式思维的泛耦合链接,而一个学术类的网站则应该对泛耦合链接持相对谨慎的态度。
几乎每个网页都有导航栏。对同一个网站内的.所有网页来说,导航栏必须在设计风格上力求统一。否则,冲浪者就需要分别适应每个页面的导航界面风格,这不但会浪费不少时间,也会严重影响整个网站的使用美感。
但这里所说的统一并不是要求我们为每个网页设计出一模一样的导航栏。完全相同的导航栏会让冲浪者在浏览过程中由疲惫而麻木、由麻木而丧失对网站的浏览兴趣。也就是说,我们应该在统一的整体风格下,在每一个或每一组网页的导航栏中寻求细节上的变化。
比方说,我们可以在确保所有导航栏形状、布局、字体一致性的基础上,变换不同导航栏的背景颜;或者,我们可以在统一了彩、形状、字体的情况下,变换不同导航栏的相对位置;再或者,我
们还可以变换不同页面中导航栏的背景图片——当然,所有背景图片应当从属于某种统一的风格——同时保持其他设计元素不变。
“在统一的基础上寻求变化”——除了导航栏以外,网页设计师在处理同一页面或同一网站内的其他设计问题时,这句话也同样有效。
三、网页基本布局
淘宝导航css代码编辑器>mouseclick用法当然,网页设计师还是要尽量熟悉那些典型网页的基本布局方式,以根据客户的需要选择使用。比如,门户类网页为了尽可能多地展现信息内容,通常都会设计成三栏甚至四栏的纵向布局;公司首页为了展现强大的企业实力,往往会选择“视野”更宽阔的横向布局;个人主页为了展示网站主人的个性,其网页布局方式也会千差万别,像轴向布局、网格布局、斜角布局、放射布局、多中心布局、离散布局、对比布局等等都是常见的个人主页布局方式。
四、网页空间中的视觉导向
每个网页都是一个神奇的视觉空间。像我们熟悉的四维时空一样,网页空间也有深度、广度和时间流逝的感觉,甚至还会在设计元素引发的“力”的作用下产生运动或扭曲。
每当我们打开一个新的网页后,我们的视线首先会聚焦在网页中最引人注意的那一点上——我们通常
称其为视觉焦点。随后,我们的思路会受到视觉焦点周边设计元素的形状和分布方式的影响,并在不知不觉中把视线转移到另一个值得停留的地方例如,一段醒目的线条,一种彩到其近似的渐变,它们都会让我们的视线按照设计师预先安排的轨迹移动。如此继续下去,视线经过的所有关注点可以连接成一条完整的视觉路径。网页开发培训机构
使用视觉路径引导冲浪者按某种内在的逻辑顺序浏览网页信息的过程可以被称为网页空间中的视觉导向。是否能自发、自觉地使用视觉导向的设计方法并根据视觉路径的走向排列关键信息,这是区别专业网页设计师和业余网页设计师的一个重要依据。
表单大师如何快速填五、网页空间的秩序及运动趋势
网页空间的秩序是网页中所有视觉元素相互作用的结果。分析某个特
定网页空间的秩序时,最好把视觉元素抽象为“点”、“线”、“面”三大类,然后分别考察每一类元素之间以及不同类型元素之间的相互作用。
在设计师眼中,每一个视觉元素都可以被看成是“力”的源泉。不同视觉元素释放出来的“力”的方向和大小不同。一个向右倾斜的三角形可以同时释放出类似“重力”的垂直作用力和向右的水平作用力。视觉元素和视觉元素通过“力”相互作用,共同影响着整个网页的空间秩序。
当网页空间中所有作用力处于平衡状态时,空间秩序最为稳定,整个网页看起来比较和谐、均衡;反之,当所有作用力可以在某个方向上形成合力时,空间秩序就会处于不稳定的状态,整个网页看起来则会充满动感和活力。
六、网页中的留白
网页中的留白就像情感小说中的心理描写或是动作电影中的抒情段落一样,可以让网页的视觉效果更加自由、流畅。很遗憾,许多网页设计师都不懂得这个浅显的道理,他们或是在客户需求的压力下,或是在不良设计习惯的驱使下,将整个页面塞满了图片、文字、链接或是广告,以至于所有视觉元素都不得不在拥挤的空间内苟延残喘、痛苦挣扎。
留白并不特指网页中的白区域。事实上,网页中凡是没有前景元素干扰的视觉区域都可以被称为留白。横向通栏的留白可以让网页拥有一种水平的流动感;纵向的留白可以平衡文字、导航栏等视觉元素在水平方向的作用力;标题区域的大面积留白可以突出公司名称或网页标题信息;正文区域内的大面积留白既可以丰富页面布局的内涵,也可以缓解冲浪者在阅读时可能产生的视觉疲劳。
七、文字信息的设计和编排
编排网页上的文字信息时需要考虑字体、字号、字符间距和行间距、段落版式、段间距等许多要素。
从美学观点看,既保证网页整体视觉效果的和谐、统一,又保证所有文字信息的醒目和易于识别,这是评价此类工作的最高标准。从技术方面来说,今天的网页设计师大多使用CSS样式来控制和编排文字信息,但在使用某种客户端未必安装的特殊字体时,设计师通常会将文字信息保存为图片或Flash对象,以确保所有设计元素在客户端浏览器中的正确展现。
“对比”是另一个设计和编排文字信息时必须考虑的问题。不同的字体、不同的字号、不同的文字颜、不同的字符间距在视觉效果上都可以形成强烈的对比。精心设计的文字对比可以为网页空间增添活力,而过于泛滥的对比因素也会让整个网页混乱不堪。
八、图片和动画
在网页中使用图片时,同样需要考虑美学和技术两方面的问题。首先,图片的彩、形状、风格等一定要与网页的整体风格相适应,图片所要传达的理念或信息内容应当尽可能清晰、准确——这是美学方面的考量。其次,网页设计师必须知道二值、灰度、256及真彩图片之间的差异,懂得矢量图片和点阵图片各自的优缺点,并尽量优化图片的比特大小以减少网页的传输时间——这是技术方面的考量。只有在美学和技术两方面都让人满意的图片才有资格出现在网页的整体设计中。
九、网页空间中的运动趋势线
许多网页的视觉空间中都隐藏了一条富有活力的运动趋势线。当你观

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。