28
Thank you
The End
专题页面图片的展现形式：
3、上下点击，其实我们经常会碰到这种模式的图 片浏览方式，包括产品展示，图片展示，通常这种 展示方式会带来更好的用户体现，最大化的体现了 图片的展示。
26
专题页面图片与文字
专题页面文字
在浏览网站中，文字通常起到画龙点睛的左右。合 理的图片与文字搭配，能够最大化的体现页面专题 的内容。
19
专题页面布局
网页布局
（三)左右框架型，这是一种左右分为两页的框架结构。一般左面是导航 链接,有时顶端会有一个小的标题或标致 ,右面是正文。目前,大部分的大 型论坛都是这种结构 ,一些企业网站也喜欢采用这种左右框架型结构。这 种类型结构非常清晰,一目了然。
20
专题页面布局
小结
除了以上的布局类型外,还有上下框架型、综合框架型等。
在以上几种网站页面的布局设计中，我们可以发现页面布局大致
也分为以下几个部分： 1、顶部部分，其中又包括了导航、菜单和横幅广告图片；
2、内容部分又可分为侧边栏、主体内容；
3、底部，包括一些版权信息。
21
3
专题页面图片与文字
zhuantiyemianwenziyutupian
专题页面图片与文字
专题页面图片与文字

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