专题页面计与制作.ppt

专题页面的设计与制作 主讲：郑州北方汽修学校网编吴艺博 Proposal –LIANZHONG MEDIA duplication and use prohibit ? 2010 COPYRIGHT, UNITE MEDIA 模板来自于 / * 模板来自于 / * 模板来自于 * 模板来自于 / * 模板来自于 / * 模板来自于 * 专题网页主要是由页面色彩、页面布局、页面图片和文字信息组成。页面色彩主要影响页面的整体观感、设计品质以及受众情绪。页面布局主要是对页面进行整体的规划，而页面图片和页面文字主要是为了明确的表示专题页面所表达的内容以及含义。 专题页面的设计与制作 01 02 03 专题页面色彩 专题网页布局 专题页面图片与文字 目 录 / contents 1 专题页面与色彩搭配 zhuantyemianyusecaidapei 一个网站，给观看者留下第一印象不是网站合理的排版，也不是网站丰富的内容，而是网站的色彩。色彩最具表现力，色彩的搭配不同，给人的感觉也是不同的。一个专题页面是否能够吸引浏览者的目光重点取决于色彩。 专题页面与色彩搭配 一切色彩都是由光的照射产生的 色彩分为有彩色系和无彩色系 色彩三要素：色相、明度、纯度等分析颜色 色彩基础 专题页面与色彩搭配 1.色彩的鲜明性：如果一个网站的色彩鲜明，很容易引人注意，会给浏览者耳目一新的感觉。 2.色彩的独特性：要有与众不同色彩，网页的用色必须要有自己独特的风格，融入自己的想法，这样才能给人浏览者留下深刻的印象。 3.色彩搭配的合理性：色彩要根据主题来确定，不同的主题选用不同的色彩。例如，用蓝色体现科技型网站的专业，用粉红色体现女性的柔情等。 色彩特性 专题页面与色彩搭配 专题页面与色彩搭配 网页色彩搭配方法 1.同种色彩搭配 2.邻近色彩搭配 3.对比色彩搭配 4.暖色色彩搭配 5.冷色色彩搭配 6.有主色的混合色彩搭配 网页配色很重要，网页颜色搭配的是否合理会直接影响到访问者的情绪。好的色彩搭配会给访问者带来很强的视觉冲击力。色彩搭配主要分为以下六种 同种色彩搭配 同种色彩搭配：同种色彩搭配是指首先选定一种色彩，然后调整其透明度和饱和度，将色彩变淡或加深，而产生新的色彩，这样的页面看起来色彩统一，具有层次感。 专题页面与色彩搭配 邻近色彩搭配 邻近色彩搭配:邻近色是指在色环上相邻的颜色，如绿色和蓝色、红色和黄色即互为邻近色。采用邻近色搭配可以里是网页避免色彩杂乱，易于达到页面和谐统一的效果。 专题页面与色彩搭配 对比色彩搭配 对比色彩搭配： 一般来说，色彩的三原色最能体现色彩间的差异。色彩的强烈对比具有视觉诱惑力，能够起到几种实现的作用。对比色可以突出重点，产生强烈的视觉效果。通过合理使用对比色，能够使网站特色鲜明、重点突出。在设计时，通常以一种颜色为主色调，其对比色作为点缀，以起到画龙点睛的作用。 专题页面与色彩搭配 暖色色彩搭配 暖色色彩搭配：暖色色彩搭配是指使用红色、橙色、黄色、集合色等色彩的搭配。这种色调的运用可为网页营造出稳性、和谐和热情的氛围。 专题页面与色彩搭配 冷色彩搭配 冷色色彩搭配：冷色色彩搭配是指使用绿色、蓝色及紫色等色彩的搭配，这种色彩搭配可为网页营造出宁静、清凉和高雅的氛围。冷色彩与白色搭配一般会获得较好的视觉效果。 专题页面与色彩搭配 有主色的混合色彩搭配 有主色的混合色彩搭配是指以一种颜色作为主要颜色，同色辅以其他色彩混合搭配，形成缤纷而不杂乱的搭配效果 专题页面与色彩搭配 网页配色不宜超过三种。 色相差异要明显，常见的有对比色、临近色、冷暖色调互补等方式，或者直接从成功作品中借鉴主辅色配比都可以。常见的有：朱红点缀深蓝、明黄点缀深绿等。 根据网页信息的多寡，页面设计中会有更多的色彩区域划分和文字信息区分需求，这样我们需要更多的同色系色彩满足要求，我们可以在“饱和度”和“明度”上做文章。 小结： 专题页面与色彩搭配 2 专题页面布局 zhuantyemianyusecaidapei 专题页面布局 专题网页布局 页面布局就是在网页设计时，把网页的各种构成要素文字、图片、菜单等在页面内完美的搭配起来。一个精美的网页,不仅体现在页面内容的精彩,还要有效地利用页面的有效显示空间,创造出合理的布局模式 专题页面布局 * 网页布局 (一)“国”字型，这类页面布局型式适用于大型网站,也就是在网页的最上面是网站的标题以及横幅广告,接下来是网站的主要内容,左右分列一些两小条内容,中间是主要部分,与左右一起罗列到底,最下面是网站的一些基本信息、联系方式、版权声明等。 专题页面布局 * 网页布局 (二)拐角型，这种结构与上一种“国”字型结构,其实只是形式上的区别,有相似性。顶端是标题及广告横幅,接下来的左侧是一