8-1网站设计与制作准备.pptx

《网页制作技术》课程网站首页设计与制作任课教师：谭卫

教学目标21.知识目标2.能力目标1.了解网站设计原则及要点2.掌握网站初始化含义3.了解企业网站模块设计与规划1.能对网站进行合理色彩搭配并完成制作前初始化工作；2.能进行不同类型的网站头部制作。

第一部分Knowledge网站设计与制作相关概念

网页设计原则一网页设计的基本原则有视觉美观、主题明确、内容与形式相统一、快速下载，以及为用户考虑等，符合这些要求的网页往往更容易受到用户的青睐。1.1视觉美观视觉美观是网页设计最基本的原则。试想一下，如果一个网页的用色俗气，版式杂乱无章，文字难以辨认，而且错字频出……这样一款设计糟糕的页面连让用户看第二眼的欲望都没有，又何谈宣传推广，招揽顾客？

网页设计原则一1.2主题明确如果要建设一个成功的网站，在设计静态页面时就应该考虑页面的内容有哪些？你的用户需要哪些信息？应该通过怎样的表现方式来使用户以最快的速度找到他们想要的信息？这就要求网页界面有一个清晰明确的主题，页面中的所有信息和元素都围绕这个主题来展开叙述，让用户看一眼就能明白页面要表达的意思。

网页设计原则一1.3内容与形式相统一网页的内容主要是指Logo、文字、图片、动画等要素，形式则是指整体版式和不同内容的布局方式，一个合格的网页应该是内容和形式高度统一的。

网页设计原则一1.4快速下载就现在的趋势来看，网页中最多的元素非图片莫属，所以要加快网页加载速度，还要从页面切图和优化存储图片下手，能通过代码实现的（例如纯色背景、直线、没有图层样式的普通文字）就不要切图，能用1像素平铺出来的就不要切2像素，能用32色存储的就不要用64色。1.5为用户考虑网站制作的目的就是让用户浏览网站,网站的界面友好性也是网站设计的重点所在。

网页设计要点二1.网站的整体风格设计网站的整体风格及其创意设计是最难以学习的。难就难在没有一个固定的模式可以参照和模仿。给你一个主题，任何两人都不可能设计出完全一样的网站。风格(style)是抽象的。是指站点的整体形象给浏览者的综合感受。这个“整体形象”包括站点的CI（标志、色彩、字体、标语）、版面布局、浏览方式、交互性、文字、语气、内容价值、存在意义、站点荣誉等等诸多因素。

网页设计要点二2.网页色彩的搭配无论是平面设计，还是网页设计，色彩永远是最重要的一环。当我们距离显示屏较远的时候，我们看到的不是优美的版式或者是美丽的图片，而是网页的色彩。网页配色时的小技巧：a．用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，这样的页面看起来色彩统一，有层次感。b．用两种色彩。先选定一种色彩，然后选择它的对比色。c．用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。

网页设计要点二在网页配色中，还要切记一些误区：不要将所有颜色都用到，尽量控制在三至五种色彩以内。背景和前文的对比尽量要大(绝对不要用花纹繁复的图案作背景)，以便突出主要文字内容。

第二部分Knowledge网站元素初始化

网站元素初始化一1、网站元素初始化的规范由于网页中块状元素默认有margin和padding值，在各个浏览器下解析不一样，为保证各浏览器下看到的效果一样，所以先初始化再统一赋值。最简单的初始化方法就是：*{padding:0;margin:0;}。有很多人也是这样写的。这确实很简单，但有人就会感到疑问：*号这样一个通用符在编写代码的时候是快，但如果网站很大，CSS样式表文件很大，这样写的话，会把所有的标签都初始化一遍，这样就大大的加强了网站运行的负载，会使网站加载的时候需要很长一段时间。

网站元素初始化一2.常用网站元素初始化代码：body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,th,td{margin:0px;padding:0px;}/*将所有用到的元素标签都去掉原有的内边距及外边距*/body{background:#fff;color:#333;font-size:16px;font-family:微软雅黑,SimSun,ArialNarrow;}/*设置整个页面的公共字体样式*/img,aimg{border:none;}/*去掉图片的边框*/o