《8-1网站设计与制作准备.pptx》由会员分享，可在线阅读，更多相关《8-1网站设计与制作准备.pptx（14页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、网站首页设计与制作 教学目标2 1.知识目标 2.能力目标p1.了解网站设计原则及要点p2.掌握网站初始化含义p3.了解企业网站模块设计与规划p1.能对网站进行合理色彩搭配并完成制作前初始化工作；p2.能进行不同类型的网站头部制作。第一部分Knowledge 网站设计与制作相关概念 网页设计原则一网页设计的基本原则有视觉美观、主题明确、内容与形式相统一、快速下载，以及为用户考虑等，符合这些要求的网页往往更容易受到用户的青睐。1.1 视觉美观 视觉美观是网页设计最基本的原则。试想一下，如果一个网页的用色俗气，版式杂乱无章，文字难以辨认，而且错字频出这样一款设计糟糕的页面连让用户看第二眼的欲望都没
2、有，又何谈宣传推广，招揽顾客？网页设计原则一1.2 主题明确 如果要建设一个成功的网站，在设计静态页面时就应该考虑页面的内容有哪些？你的用户需要哪些信息？应该通过怎样的表现方式来使用户以最快的速度找到他们想要的信息？这就要求网页界面有一个清晰明确的主题，页面中的所有信息和元素都围绕这个主题来展开叙述，让用户看一眼就能明白页面要表达的意思。网页设计原则一1.3 内容与形式相统一网页的内容主要是指Logo、文字、图片、动画等要素，形式则是指整体版式和不同内容的布局方式，一个合格的网页应该是内容和形式高度统一的。网页设计原则一1.4 快速下载 就现在的趋势来看，网页中最多的元素非图片莫属，所以要加快
3、网页加载速度，还要从页面切图和优化存储图片下手，能通过代码实现的（例如纯色背景、直线、没有图层样式的普通文字）就不要切图，能用1 像素平铺出来的就不要切2 像素，能用32 色存储的就不要用64 色。1.5 为用户考虑网站制作的目的就是让用户浏览网站,网站的界面友好性也是网站设计的重点所在。网页设计要点二1.网站的整体风格设计 网站的整体风格及其创意设计是最难以学习的。难就难在没有一个固定的模式可以参照和模仿。给你一个主题，任何两人都不可能设计出完全一样的网站。风格(style)是抽象的。是指站点的整体形象给浏览者的综合感受。这个“整体形象”包括站点的CI（标志、色彩、字体、标语）、版面布局、浏
4、览方式、交互性、文字、语气、内容价值、存在意义、站点荣誉等等诸多因素。案例网址:http:/ 无论是平面设计，还是网页设计，色彩永远是最重要的一环。当我们距离显示屏较远的时候，我们看到的不是优美的版式或者是美丽的图片，而是网页的色彩。网页配色时的小技巧：a用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，这样的页面看起来色彩统一，有层次感。b用两种色彩。先选定一种色彩，然后选择它的对比色。c用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。案例网址:http:/ 网页设计要点二 在网页配色中，还要切记一些误区：l不要将所有颜色都用到，尽量控制在三
5、至五种色彩以内。l背景和前文的对比尽量要大(绝对不要用花纹繁复的图案作背景)，以便突出主要文字内容。案例网址:http:/ 网站元素初始化 网站元素初始化一1、网站元素初始化的规范 由于网页中块状元素默认有margin和padding值，在各个浏览器下解析不一样，为保证各浏览器下看到的效果一样，所以先初始化再统一赋值。最简单的初始化方法就是：*padding:0;margin:0;。有很多人也是这样写的。这确实很简单，但有人就会感到疑问：*号这样一个通用符在编写代码的时候是快，但如果网站很大，CSS样式表文件很大，这样写的话，会把所有的标签都初始化一遍，这样就大大的加强了网站运行的负载，会使网
6、站加载的时候需要很长一段时间。网站元素初始化一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;/*将所有用到的元素标签都去掉原有的内边距及外边距*/bodybackground:#fff;color:#333;font-size:16px;font-family:微软雅黑,SimSun,Arial Narrow;/*设置整个页面的公共字体样式*/img,a img border:none;/*去掉图片的边框*/ol,
7、ul,li list-style:none;/*去掉有序列表和无序列表的项目符号和编号*/table,td,tr,thfont-size:12px;/*设置表格中的文字大小*/a:link,a:visitedcolor:#333;text-decoration:none;a:hover,a:active color:#08774d;text-decoration:none;/*为超级链接初始化与网站配色合理的颜色，去除下代线*/divoverflow:hidden;/*对盒子溢出的部分进行隐藏*/.clearfloat:none;clear:both;/*清除浮动*/注意：所有的初始化样式应链接到所有本站点中的所有网页中。THANK YOU