第1章 网页设计——初识网站和网页.ppt

第1章 初识网站和网页 网站和网页 网页中的元素类型 从功能角度分析网页 常用网站管理与制作软件 网站建设流程 1.1 网站和网页 网站是网页的集合，网页是组成网站的元素。 一个小型网站可能只包含几个网页，而一个大型网站则可能包含成千上万个网页。 1.1.2 网页是什么 网页中除了包含文字外，还包含图像、动画等内容。 我们看到的一个个网页都是由多个文件组成的。网页文件是“根”，图像和动画文件都是“枝叶”。 1.2 网页中的元素类型 1.2.1 网页中的文字与图像 1.2.2 网页中使用的动画与视频影像 1.2.3 网页中使用的声音 适当的在网页上加点音乐效果，会使网页更具吸引力。目前，网上比较流行的音频格式主要有MIDI、WAV、MP3与Real Audio。 1.3 从功能角度分析网页 从功能的角度来看，可以将网页中的元素分为站标、导航栏、广告条、标题栏和按钮。 1.3.1 站标 站标也叫LOGO，是网站的标志，其作用是使人看见它就能够联想到企业。因此，网站LOGO通常采用企业的LOGO。 LOGO通常采用带有企业特色和思想的图案，或是与企业相关的字符或符号及其变形，当然也有很多是图文组合。 1.3.2 导航栏 导航栏实际上是网站内多个页面的超链接组合。导航栏也是网站中所有重要内容的概括，可以让浏览者在最短时间内了解网站的主要内容。 设计导航栏时，有几点需要注意。 如果网站内容不多，并且导航栏不超过两排，可以根据网站风格尝试灵活摆放，如放在网页的左侧或者放在页面上方等。 如果网站的栏目很多，可以将导航栏分为多排放置在主页LOGO的下方或右侧，为便于观看，可为各排设置不同的底色。 如果导航栏内容较多的话，尽量使用文字超链接而不用图片。不过，如果导航栏内容不多，或者网页内容比较活泼的话，多采用图片或Flash制作导航栏。 1.3.3 广告条 广告条又称Banner，其功能是宣传网站或替其他企业做广告，以赚取广告费。 1.3.4 标题栏 这里的标题栏不是指整个网页的标题栏，而是网页内部各版块的标题栏，是各版块内容的概括。 标题栏可以是文字加单元格背景，也可以是图片，一般的大型网站都采用前者，一些内容少的小网站采用后者。 1.3.5 按钮 网页中的按钮被点击之后，网页会实现相应的操作，比如页面跳转，或数据的传输等。 设计按钮时，要保证按钮与页面的协调，不能太抢眼，如果按钮上有字则尽量使用单色或渐变色背景，保证字迹清晰。当页面上有多个按钮的时候，应分清主次，根据网页的需要改变按钮的颜色或者大小。 1.4 常用网站管理与制作软件 1.4.1　常用网站管理与网页编辑软件 1.4.2 网页设计辅助软件 在进行网页制作时，除了需要Dreamweaver、FrontPage等软件外，还会用到Fireworks、Flash、Photoshop等软件，这些软件的主要功能与特点如下： 1.4.3 常用网站程序设计语言 如果网站中包含动态网页，除了需要学习一些常用的网页设计软件外，还应掌握一些常用的网站程序设计语言。 1.5 网站建设流程 1.5.1 根据要求确定网站内容 1.5.2 规划网站栏目 确定了网站内容后，就要开始进行网站规划。例如，将网站的内容划分成哪些栏目，从而使网站既便于浏览者的浏览，也有利于网站将来的维护和更新。 1.5.3 确定网页尺寸与版面布局 目前显示器最常用的分辨率是1024×768像素和800×600像素。 在1024×768的分辨率下显示的页面的尺寸应该为1007×600像素，而800×600的分辨率下显示的页面尺寸为778×435像素。 确定了网页尺寸后，接下来的任务就是确定网页布局类型了。网页布局类型没有确定的标准，可以根据需要制定。常见的布局有上下分割型、左右分割型和复合分割型（上下分割和左右分割结合）。 1.5.4 确定网站配色与风格 不同的网站有着自己不同的风格，也有着自己不同的颜色。基本上网站使用的颜色从出发点上看可以分为以下3种类型： 行业风格色 著名的化妆品公司—玫琳凯中国网站使用的颜色是粉色。这几乎是所有化妆品行业中最常用到的颜色，这种颜色代表了高贵，典雅以及甜蜜等； 企业标准色 在现代企业中，公司的CI形象显得尤其重要，每一个公司的CI设计必然要有标准的颜色。比如Intel官方网站的主色调是一种接近于天蓝的蓝色。 个人习惯色 这种配色方法在设计的时候自由度非常高，同时所选的题材与要表现的内容也是由设计者自己决定，比如设计者喜欢红色和黑色，那么在设计的时候就倾向于使用这两种颜色。 下面是一些网页配色时的小技巧 用一种色彩：这里是指先选定一种色彩，然后调整透明度或者饱和度。 用两种色彩：先选定一种色彩，然后选择它的对比色。 用一个色系：简单地说就是用一个感觉