Web_开发与技术设计四.pptVIP

Web 开发与技术设计 第四讲 网站设计（三） 提纲 定位你的网站主题和名称 网站的形象设计与CI 策划 网站的栏目和版块 网站的目录结构和链接结构 网站的整体风格与创意设计 版面布局与首页的设计 色彩的搭配 网页中的字体、插图处理、动画与广告 考虑不同的浏览器和分辨率 版面布局的过程 构思构图（草案）。目的是将脑海里朦胧的想法具体化，变成可视可见的轮廓。 设计方案（粗略布局）。除了文本文字可以不必认真，以字符象征性地代替以外，其它所有的内容都要接近将来的网页效果。 量化描述（定案）。即把网页设计方案中的视觉元素的各项参数确定下来。 构思构图（草案） 草图的目的是将脑海里朦胧的想法具体化，变成可视可见的轮廓。 草图也许是几条线、几个色块，但它是进一步深入细化的基础，决定着将来网页的基本面貌。 草图类似一个创意，它是连结艺术思想与作品制作的桥梁，网页设计的精髓正是在这时显露出来。 新建页面就象一张白纸，没有任何表格，框架和约定俗成的东西，你可以尽可能的发挥你的想象力，将你想到的景象画上去。你可以用一张白纸和一支铅笔，当然也可以用作图软件把你的最初创意画出来。 构思构图（草案） 用笔勾画网页的轮廓草图及布局安排。上图为北京希望电子出版社BHP网站网页设计草图之一 构思构图（草案） 草图的构思、创意的产生往往来自于一些现有设计作品、图形图像素材的组合、改造和加工。 汲取成功作品中的一些视觉元素及其组合方式，加入自己的新元素形成新的组合（有些是素材本身规定了的），其思维方式是借鉴重组和逆向模仿。 借鉴重组是加进或减少组合的元素进行新的组合； 逆向模仿是对视觉元素的量(描述参数)进行改变，至于变化到什么程度，需要专业的眼光才能把握住。 构思构图（草案） 逆向模仿是利用反向思维来完成设计和创作的。把现有作品的视觉元素的性质加以改变、重组，与自己的素材结合而产生新的设计作品。比如原有作品的背景色是黑色的，你把它改成白色就会变成另外一个样子；再比如，某个网页的图像位置放在左边、文字在右边，你只要将图文左右倒置一下就与原作的布局有所不同。网页布局由各个元素（形态、位置、色彩、字体、疏密）组合而成的，各个元素均可被尺寸、角度等程度参数所描述。如果将其中的一个或多个视觉元素的描述参数加以改变，就可能实现新的设计作品。 以灰色为底色的网页效果 以黑色为底色的网页效果 设计方案（粗略布局） 首先将需要放置的功能模块安排到页面上，主要包含网站标志、主菜单、栏目条、广告位、搜索器、计数器等。必须突出重点，将网站标志、主菜单等最重要的模块放在最显眼最突出的位置，然后再考虑次要模块的排放。 各个功能模块的样式位置确定之后，需要认真研究文稿与图形图像的编排，按照平面设计的规律做出网页的基本样式。可以继续用画笔尺子创作，也可以运用Photoshop Illustrator Pagemaker 或者Frontpage 等软件在显示器上进行。 量化描述（定案） 对网页外形尺寸的确定。一般计算机显示器的分辨率设置为800×600，网页的横宽最好不要超出800 像素，网页的长度、高度可根据内容的需要而定。 确定设计方案上的所有图形图像的尺寸,其单位也是用像素pixels 表示。同时标明该图在网页中的相对位置。 各个字体字号的描述及其所在页面位置的参数。有些作为标题的文字其实已经作为图形图像对待了，这里的文字仅仅指文本的字体和由计算机程序产生的标题字，同时也应说明字体的HTML 的色彩数值。 各种色彩的数值的确定。除图形图像以外，设计方案中的标准色、底色、文字的颜色，都应该以RGB模式数值或HTML语言数值表示出来。 估算一下页面的大小。根据经验或参照类似的在线网页，概算一下将来的网页大约有多少个KB。一般每页上的图文KB 数加起来不要超出50KB ，否则就会影响显示速度。 版面布局的原则 平衡 指画面的图像、文字的视觉分量在左右、上下几个方位基本相等，分布匀称，能达到安定、平稳的效果，过于平衡的画面难免有呆板的感觉，有时需要在局部打破平衡或对称。图为海尔网校早期版本的网页，其用色块的分布保持视觉平衡。 版面布局的原则 呼应 在不平衡的布局中的补救措施，使一种元素同时出现在不同的地方，形成视觉上的相互联系。如图的右侧用红色的字与左侧的红色相呼应。 Adobe 公司的页面。红色的字在版式中起到全局呼应、平衡视觉、活跃画面的作用 版面布局的原则 对比 所谓对比，就是利用不同的色彩、形态、线条等视觉元素相互并置对比,造成画面的多种变化,达到丰富视觉的效果。 形态对比:圆与方的对比 版面布局的原则 疏密 疏：是指画面中形式元素稀少甚至空白的部分；密：是指画面中形式元素繁多的部分