网页设计第二章重点2.1.1 网站的种类1.根据网站提供的服务分类:信息类网站、交易类网站、互动游戏类网站、有偿信息类网站、功能型网站、综合类网站2.根据网站的性质分类:政府网站、企业网站、商业网站、教育科研机构网站、个人网站、非盈利机构网站、其他类型的网站3.根据在大型搜索引擎上的设置分类娱乐与休闲类网站、商业与经济类网站、艺术与人文类网站、健康与医药类网站、新闻与媒体类网站、政府与政治类网站、计算机与网络类网站、社会与文化类网站、科学与教育类网站、参考资料类网站2.1.2网站建设的步骤(出简答!p22-p28,书上的详细内容也看一遍!)1.网站目标和主题的确定网站目标的确定(为什么要建立网站);网站主题的确定(网站主题、网站风格、网站创意、网站名称)2. 网站的规划网站的规划包括:网站总体结构的设置、目录的设置和链接结构的设置。
3. 网站素材的准备网站素材的准备包括:素材的搜集、整理加工、制作和存储等环节。
4. 网站制作工具的选择和确定5. 网站的建立(设计制作网页)6. 注册域名和申请网站空间定个合适的域名:由域名构成的网址会像商标一样,好的域名有助于将来塑造网上的形象。
定义域名除了要考虑公司的性质以及信息内容的特征外,还应该使这个名字简洁、易记、具有冲击力。
租用虚拟服务器空间一般虚拟主机提供商都能向用户提供大容量,高速度的服务器。
用户可视网站的内容设置及其发展前景来选择。
一页网页所占的磁盘空间大约20~50KB,10MB大约可以放置200~500页,但如果网站中的图片、动画较多,需要文件下载或有数据库等,就需要多一些空间。
一般用户有50MB虚拟主机空间就够了。
7. 网站的测试和发布网站在发布前后都应进行相关测试。
8. 网站的宣传和推广首先企业自身要有推广网站的意识:在任何出现公司信息的地方都加上公司的网址,如名片、办公用品、宣传材料、媒体广告等。
9. 网站的更新和维护网站建成之后,在运营的过程中需要定期不断更新网站的信息,及时总结经验和不足,逐步完善网站的功能2.1.3 网站建设的原则1.牢记内容第一的原则2.网页文件命名原则3.图片命名的原则4.重视网页标题的设计5.网站导航设计要清晰6.网页长度应限定在三个整屏以内7.善用图像元素8.网站中所有路径都采用相对路径9.确保链接的有效性,链接层次不要太深10.善用表格来布局,但表格的嵌套层次要控制在三层左右11.遵循3次点击规则12.兼顾下载速度与美观13.及时更新网页14.避免滥用技术15.要保护好个人信息2.2.1网页的版面布局(加粗字体要背过,不加粗的理解或能自己叙述出来即可)1网页板式的基本类型:(脑海中要清楚以下8种型的图像效果,书上有图)国字型、拐角型、三型、对称对比型、标题正文型、框架型、封面型、flash型其中,对称对比型:左右或上下对称,一半深色一半浅色,视觉冲击力强标题正文型:最上面是标题,下面是正文。
一般是文章页面或注册页面框架型:分左右框架型、上下框架型、综合框架型(左右框架型:是指一种左右为分别两页的框架结构,一般左边是导航链接或标题标记,右边是正文。
大型论坛常用此种。
上下框架型类似,上下分别为两页的框架结构。
综合框架型是左右框架型与上下框架型的结合,较复杂)封面型:大部分为一些精美的平面设计并结合一些小动画,放上几个简单的链接或者仅是一个进入的链接,甚至直接在页面的图片上做上栏目链接。
2.布局安排点的布局,线的布局,面的布局,线条和形状点的排列所引起的视觉流动,引入了时间的因素,利用点的大小、形状与排列距离的变化,可以使页面富于节奏韵律。
线的布局安排主要体现为线的空间分割,分割是版式设计的主要手段之一。
作为视觉元素的线,不仅有长度和方向上的变化,还有粗与细、虚与实、粗糙和光滑等变化面的布局主要体现为面的空间分割,经分割所产生的比例关系,是决定页面均衡、协调的重要因素。
分为黄金分割,等间距分割,判断分割,数学级数分割线条和形状:直线条的艺术效果是挺拔、规矩、整齐,有轮有廓。
曲线和弧形在页面上的重复组合可以呈现流畅、轻快,富有活力的视觉效果。
一般应用于青春、活泼的主页题材。
2.2.2网页色彩设计1.色彩的基本原理●色彩的三属性:色相明度纯度●色彩的心理感觉:(1)色彩有冷暖感。
(2)色彩有兴奋感与沉静感。
(3)色彩有膨胀感与收缩感。
(4)色彩有前进感与后退感。
(5)色彩有轻重感。
●十二色相环2.网页色彩设计原理(1)色彩的面积与位置(2)色彩的对比:在背景图象上添加文本,一种较好的方法是使用相近色作为背景,补色作为文本色。
(3)网页配色分析3网页色彩搭配原理:(1)色彩的鲜明性(2)独特性(3)合适性、(4)联想性、(5)合理性、(6)时尚性、(1)色彩的鲜明性、色彩鲜艳,引人注目(2)独特性、与众不同的色彩搭配,衬托出网站的个性(3)合适性、按照内容决定形式的原则,色彩应服务于网站的内容,和网站的气氛相适应(4)联想性、不同色彩产生不同联想(5)合理性、照顾到人眼睛的生理特点,不用大面积高纯度色相,不过分强烈颜色对比,避免视觉疲劳(6)时尚性、关注流行色的发展4、网页各组成部分色彩的设计方法(1)网页内容:要求背景亮,文字暗,反之亦然,对比度要大(2)网页标头:logo放置的地方用深色,具有较高对比度。
标题使用与页面内容非常不同的字体或颜色,也可以采用页面内容的反色(3)导航菜单所在区域:菜单背景设置暗一些,依靠较高颜色对比度,比较强烈的图形元素或独特字体将网页内容和菜单的不同准确区分开来(4)侧栏:注意将网页内容和菜单的不同准确区分开来,同时也要易于阅读(5)页脚:不应该喧宾夺主2.2.3-2.2.41、网页设计原则:对比原则(大小对比、明暗对比、粗细对比、曲线与直线的对比、水平线与垂直线的对比、质感的对比、位置的对比、多重对比),协调原则(主与从、动与静、入与出、统一与协调),平衡原则、趣味原则2、文字编排形式有两端对齐、居中对齐、左对齐或有对齐和绕图排列。
3、图像的形式:方形图、退底图、出血图以及这三种形式的结合。
4、网页中图像的格式:gif、jpeg、bmp、png5、点布局:通过点的大小、主次引起浏览者的视觉流动。
6、线的布局安排主要体现为线的空间分割,分割是版式设计的主要手段之一。
7、面的布局主要体现为面的空间分割,经分割所产生的比例关系,是决定页面均衡、协调的重要因素。
黄金分割、等间距分割、判断分割、数学级数分割2.2.5—2.2.6文字格式:常用的中文字体有宋体、黑体、楷体、仿宋、行书、隶书、魏碑等。
常用的英文字体有Arial、Times New Roman、Impact等。
艺术字能为网页添色不少,但也不能随便地套用各种艺术字体。
最适合于网页正文显示的字体大小为12磅左右许多新闻性网站,通常采用9磅的字号。
文字的编排:常见的文字编排形式有两端对齐、居中对齐、左对齐或有对齐和绕图排列。
图形格式:GIF格式GIF格式是非失真压缩。
JPEG格式JPEG格式的图像采用失真的压缩算法,压缩比例越大,图像质量越差。
PNG格式PNG格式是一种非失真压缩格式,具有JPEG和GIF格式的全部优点。
SWF格式SWF是Macromedia Flash软件生成的流式多媒体文件,其特点是具有小巧精致的矢量画面以及非常强大的交互性能,可以在下载时同步播放。
图像编排:网页排版通常有四种形式:方形图、退底图、出血图以及这三种形式的结合网页设计第三章重点HTML:是一种建立网页文件的语言,它通过标记式指令,将影像,声音,图片和文字等连接起来。
学习html的意义:(1)浏览器解释效率高。
(2)格式漂亮。
(3)无任何垃圾代码产生,加快了网页的传输速度。
单标记:<标记名称> 双标记:<标记>内容</标记>标记的属性的格式为:<标记属性1="属性值1" 属性2="属性值2" …> 受影响的内容</标记>HTML文档是一种纯文本格式的文件,HTML文档的基本结构为:<html><head><title> 网页的标题</title></head><body>网页的内容</body></html><body>标记是文档的主体部分,其格式为:<BODY background=”images-URL” bgcolor=”color”text=”color”link=”color”alink=”color”vlink=”color”leftmargin=”value”topmargin=”value”>…</BODY>各属性值的含义如下:Background:设置网页背景图像。
images-URL:图像文件的路径bgcolor:设置网页背景颜色,默认为白色。
text:设置网页正文文字的色彩,默认为黑色。
Link:设置网页中可链接文字的色彩。
Alink:设置网页中被鼠标点中时可链接的文字的色彩Vling:设置网页中已经被单击过的可链接文字的色彩。
Leftmargin:设置页面左边距topmargin:设置页面上边距Value:表示空白量。
Color:表示颜色值。
HTML遵循的语法规则:(1)html以纯文本形式存放,扩展名为htm或html.(2)html标记不区分大小写。
(3)多数html标记可以嵌套,但不可以交叉。
(4)html标记一行可以写多个标记,一个标记也可以分多行书写,不用任何续行符号。
(5)html源文件中的换行,回车符和空格在显示效果是无效的。
HTML的文本格式标记1.标题格式标记的格式为:(P64 例3-2)<hn align="left|center|right"> 标题文字 </hn>n用来指定标题文字的大小,n取1~6的整数值,取1时文字最大,6时文字最小。
属性align设置标题在页面中的对齐方式:left、center或right。
缺省时默认为left。
2.文字格式标记:<font>标记设置文字的格式为:(P65 例3-3)<font size=“数字”face=“字体名”color=“颜色"> 被设置的文字</font>size用来设置文字的大小。
数字的取值范围从1~7,size取1时最小,取7时最大。
face用来设置字体。
如黑体、宋体、楷体_GB2312、隶书、Times New Roman 等。
color用来设置文字颜色。
3.字型设置标记:(P65 例3-4)<B>…</B>:文字以粗体显示<I>…</I>:文字显示为斜体<U>…</U>:显示下划线<STRIKE>…</STRIKE >:删除线<BIG>…</BIG>:使文字大小相对于前面的文字增大一级<SMALL>…</SMALL>:使文字大小相对于前面的文字减小一级<SUP>…</SUP>:使文字成为前一个字符的上标<SUB>…</SUB>:使文字成为前一个字符的下标<BLINK>…</BLINK>:使文字显示为闪烁效果<TT>…</TT>:以等宽体显示西文字符<CITE>…</CITE>:输出引用方式的字体,通常是斜体<EM>…</EM>:强调文字,通常用斜体加黑体<STRONG>…</STRONG>:特别强调的文字,通常也是斜体加粗体4.段落标记的格式为:<p align="left|center|right"> 文字 </p>其中属性align用来设置段落文字在网页上的对齐方式:left(左对齐)、center(居中)和right(右对齐)。