专题页面设计与制作课件.ppt

1、专题页面的设计与制作专题页面的设计与制作主讲：郑州北方汽修学校网编吴艺博2022-6-32022-6-31 1专题网页主要是由页面色彩、页面布局、页面图片和文字信息组成。页面色彩主要影响页面的整体观感、设计品质以及受众情绪。页面布局主要是对页面进行整体的规划，而页面图片和页面文字主要是为了明确的表示专题页面所表达的内容以及含义。专题页面的设计与制作专题页面的设计与制作2022-6-32022-6-32 2010203专题页面色彩专题页面色彩专题网页布局专题网页布局专题页面图片与文字专题页面图片与文字目目 录录 / / contentscontents2022-6-32022-6-33 31 1

2、专题页面与色彩搭配专题页面与色彩搭配zhuantyemianyusecaidapei2022-6-32022-6-34 4一个网站，给观看者留下第一印象不是网站合理的排一个网站，给观看者留下第一印象不是网站合理的排版，也不是网站丰富的内容，而是网站的色彩。色彩版，也不是网站丰富的内容，而是网站的色彩。色彩最具表现力，色彩的搭配不同，给人的感觉也是不同最具表现力，色彩的搭配不同，给人的感觉也是不同的。一个专题页面是否能够吸引浏览者的目光重点取的。一个专题页面是否能够吸引浏览者的目光重点取决于色彩。决于色彩。专题页面与色彩搭配专题页面与色彩搭配2022-6-32022-6-35 5一切色彩都是由光

3、的照射产生的色彩分为有彩色系和无彩色系色彩三要素：色相、明度、纯度等分析颜色色彩基础专题页面与色彩搭配专题页面与色彩搭配2022-6-32022-6-36 61.色彩的鲜明性：如果一个网站的色彩鲜明，很容易引人注意，会给浏览者耳目一新的感觉。2.色彩的独特性：要有与众不同色彩，网页的用色必须要有自己独特的风格，融入自己的想法，这样才能给人浏览者留下深刻的印象。3.色彩搭配的合理性：色彩要根据主题来确定，不同的主题选用不同的色彩。例如，用蓝色体现科技型网站的专业，用粉红色体现女性的柔情等。色彩特性专题页面与色彩搭配专题页面与色彩搭配2022-6-32022-6-37 7专题页面与色彩搭配网页色彩

4、搭配方法1.同种色彩搭配2.邻近色彩搭配3.对比色彩搭配4.暖色色彩搭配5.冷色色彩搭配6.有主色的混合色彩搭配网页配色很重要，网页颜色搭配的是否合理会直接影响到访问者的情绪。好的色彩搭配会给访问者带来很强的视觉冲击力。色彩搭配主要分为以下六种2022-6-32022-6-38 8同种色彩搭配同种色彩搭配：同种色彩搭配是指首先选定一种色彩，然后调整其透明度和饱和度，将色彩变淡或加深，而产生新的色彩，这样的页面看起来色彩统一，具有层次感。 专题页面与色彩搭配2022-6-32022-6-39 9邻近色彩搭配邻近色彩搭配:邻近色是指在色环上相邻的颜色，如绿色和蓝色、红色和黄色即互为邻近色。采用邻近

5、色搭配可以里是网页避免色彩杂乱，易于达到页面和谐统一的效果。专题页面与色彩搭配2022-6-32022-6-31010对比色彩搭配对比色彩搭配：一般来说，色彩的三原色最能体现色彩间的差异。色彩的强烈对比具有视觉诱惑力，能够起到几种实现的作用。对比色可以突出重点，产生强烈的视觉效果。通过合理使用对比色，能够使网站特色鲜明、重点突出。在设计时，通常以一种颜色为主色调，其对比色作为点缀，以起到画龙点睛的作用。专题页面与色彩搭配2022-6-32022-6-31111暖色色彩搭配暖色色彩搭配：暖色色彩搭配是指使用红色、橙色、黄色、集合色等色彩的搭配。这种色调的运用可为网页营造出稳性、和谐和热情的氛围。

6、专题页面与色彩搭配2022-6-32022-6-31212冷色彩搭配冷色色彩搭配：冷色色彩搭配是指使用绿色、蓝色及紫色等色彩的搭配，这种色彩搭配可为网页营造出宁静、清凉和高雅的氛围。冷色彩与白色搭配一般会获得较好的视觉效果。专题页面与色彩搭配2022-6-32022-6-31313有主色的混合色彩搭配有主色的混合色彩搭配是指以一种颜色作为主要颜色，同色辅以其他色彩混合搭配，形成缤纷而不杂乱的搭配效果专题页面与色彩搭配2022-6-32022-6-31414 网页配色不宜超过三种。 色相差异要明显，常见的有对比色、临近色、冷暖色调互补等方式，或者直接从成功作品中借鉴主辅色配比都可以。常见的有：朱

7、红点缀深蓝、明黄点缀深绿等。 根据网页信息的多寡，页面设计中会有更多的色彩区域划分和文字信息区分需求，这样我们需要更多的同色系色彩满足要求，我们可以在“饱和度”和“明度”上做文章。小结：小结：专题页面与色彩搭配2022-6-32022-6-315152 2专题页面布局专题页面布局zhuantyemianyusecaidapei2022-6-32022-6-31616专题页面布局专题网页布局页面布局就是在网页设计时，把网页的各种构成要素文字、图片、菜单等在页面内完美的搭配起来。一个精美的网页,不仅体现在页面内容的精彩,还要有效地利用页面的有效显示空间,创造出合理的布局模式专题页面布局专题页面布局

8、 2022-6-32022-6-3171718网页布局(一)“国”字型，这类页面布局型式适用于大型网站,也就是在网页的最上面是网站的标题以及横幅广告,接下来是网站的主要内容,左右分列一些两小条内容,中间是主要部分,与左右一起罗列到底,最下面是网站的一些基本信息、联系方式、版权声明等。 专题页面布局专题页面布局 2022-6-32022-6-3181819网页布局(二)拐角型，这种结构与上一种“国”字型结构,其实只是形式上的区别,有相似性。顶端是标题及广告横幅,接下来的左侧是一窄列链接等,右列是很宽的正文,底端也是一些网站的辅助信息。在这种类型中,一种很常见的类型是,顶端是标题及广告,左侧是导航

9、链接。专题页面布局专题页面布局 2022-6-32022-6-3191920网页布局（三)左右框架型，这是一种左右分为两页的框架结构。一般左面是导航链接,有时顶端会有一个小的标题或标致,右面是正文。目前,大部分的大型论坛都是这种结构,一些企业网站也喜欢采用这种左右框架型结构。这种类型结构非常清晰,一目了然。 专题页面布局专题页面布局 2022-6-32022-6-3202021除了以上的布局类型外,还有上下框架型、综合框架型等。在以上几种网站页面的布局设计中，我们可以发现页面布局大致也分为以下几个部分：1、顶部部分，其中又包括了导航、菜单和横幅广告图片；2、内容部分又可分为侧边栏、主体内容；3

10、、底部，包括一些版权信息。专题页面布局专题页面布局 小结小结2022-6-32022-6-321213 3专题页面图片与文字专题页面图片与文字zhuantiyemianwenziyutupian2022-6-32022-6-3222223 专题页面图片要比文字更能增加网页的吸引力，页面图片能够提升用户在浏览网页时的的体验。因此图片的展现形式也是相当重要的。图片的展示形式丰富多样，不同形式的图片展现也让浏览网页更加多样化！专题页面图片与文字专题页面图片与文字专题页面图片与文字专题页面图片与文字2022-6-32022-6-3232324专题页面图片与文字专题页面图片与文字专题页面图片的展现形式：

11、专题页面图片的展现形式：1、分组展示，同一种类型的图片，具有典型的说明性，通过调整图片与图片之间的间距、大小、让由一个或者多个图片组成的组，形成一个集体，集中去体现，更加说明性，据不完全统计，浏览者在有文字和图片同时存在的页面上，图片会比较文字更加有吸引和点击！2022-6-32022-6-3242425专题页面图片与文字专题页面图片与文字专题页面图片的展现形式：专题页面图片的展现形式：2、图片的瀑布流，首先什么是瀑布流：瀑布流是最近新起的一种图片展示方式，在相比较下这种方式会更加有创意性，不设置高的这种特性，更加适合人的浏览，错乱的排版更加有艺术性用户可以在众多图片中快速地扫视，然后选择其中

12、自己感兴趣的部分。2022-6-32022-6-3252526专题页面图片与文字专题页面图片与文字专题页面图片的展现形式：专题页面图片的展现形式：3、上下点击，其实我们经常会碰到这种模式的图片浏览方式，包括产品展示，图片展示，通常这种展示方式会带来更好的用户体现，最大化的体现了图片的展示。2022-6-32022-6-3262627专题页面图片与文字专题页面图片与文字专题页面文字专题页面文字在浏览网站中，文字通常起到画龙点睛的左右。合理的图片与文字搭配，能够最大化的体现页面专题的内容。2022-6-32022-6-3272728专题页面图片与文字专题页面图片与文字专题页面文字注意事项：专题页面文字注意事项：1.合理的图片与文字布局，使整个标题形成一个整体。2.专题文字一般都很精辟简短，基本上简单几个字就能概括了整个产品所表达的含义，吸引浏览者对展示产品的关注度。3.文字能够直接的表达出，专题是什么，为什么，怎么样，在专题页面文字设计中，文字的设计需符合整个专题的风格。2022-6-32022-6-32828The EndThankyou2022-6-32022-6-32929