第1章网页设计概述概论.pptVIP

网页设计与制作 课程定位 《网页设计与制作》是软件技术专业的专业必修课程 《网页设计与制作》是以《计算机应用基础》课程为基础，同时又是软件技术专业各后续主要专业课的基础。 通过本课程的学习，应掌握网页设计与制作的基本理论、基本操作技能和基本分析方法，为以后学习Web应用程序开发等后续专业课程打下必备的基础。 学习目标 学 习 目 标 掌握网页编程基础html相关知识 培养收集、处理信息，准备、加工素材的能力 学生作品 1 什么是网页？ 第一章 网页基础概述 1 什么是网页？ 浏览Web时所看到的文件称为Web页，又称为网页。 网页可以将不同类型的多媒体信息（例如文本、图像、声音和电影等）组合在一个文档中。由于这些文档是用超文本标记语言HTML表示的，因此又称为HTML文档或超文本。 HTML HTML通过标记符（Tag）标记网页的各个组成部分，通过在网页中添加标记符，指示浏览器如何显示网页内容。浏览器按顺序阅读网页文件（HTML文件）。 任何网页页面都是以HTML语言为核心和基础的。 网站和网页 网站是网页的集合，网页是组成网站的元素。 一个小型网站可能只包含几个网页，而一个大型网站则可能包含成千上万个网页。 网页是什么 网页中除了包含文字外，还包含图像、动画等内容。 我们看到的一个个网页都是由多个文件组成的。网页文件是“根”，图像和动画文件都是“枝叶”。 网页中的元素类型 网页中的文字与图像 网页中的组成元素 文本 图像 动画 超链接 表格 表单 音频 视频 网页中使用的动画与视频影像 网页中使用的声音 适当的在网页上加点音乐效果，会使网页更具吸引力。目前，网上比较流行的音频格式主要有MIDI、WAV、MP3与Real Audio。 从功能角度分析网页 从功能的角度来看，可以将网页中的元素分为站标、导航栏、广告条、标题栏和按钮。 站标 站标也叫LOGO，是网站的标志，其作用是使人看见它就能够联想到企业。因此，网站LOGO通常采用企业的LOGO。 LOGO通常采用带有企业特色和思想的图案，或是与企业相关的字符或符号及其变形，当然也有很多是图文组合。 导航栏 导航栏实际上是网站内多个页面的超链接组合。导航栏也是网站中所有重要内容的概括，可以让浏览者在最短时间内了解网站的主要内容。 设计导航栏时，有几点需要注意。 如果网站内容不多，并且导航栏不超过两排，可以根据网站风格尝试灵活摆放，如放在网页的左侧或者放在页面上方等。 如果网站的栏目很多，可以将导航栏分为多排放置在主页LOGO的下方或右侧，为便于观看，可为各排设置不同的底色。 如果导航栏内容较多的话，尽量使用文字超链接而不用图片。不过，如果导航栏内容不多，或者网页内容比较活泼的话，多采用图片或Flash制作导航栏。 广告条 广告条又称Banner，其功能是宣传网站或替其他企业做广告，以赚取广告费。 标题栏 这里的标题栏不是指整个网页的标题栏，而是网页内部各版块的标题栏，是各版块内容的概括。 标题栏可以是文字加单元格背景，也可以是图片，一般的大型网站都采用前者，一些内容少的小网站采用后者。 按钮 网页中的按钮被点击之后，网页会实现相应的操作，比如页面跳转，或数据的传输等。 设计按钮时，要保证按钮与页面的协调，不能太抢眼，如果按钮上有字则尽量使用单色或渐变色背景，保证字迹清晰。当页面上有多个按钮的时候，应分清主次，根据网页的需要改变按钮的颜色或者大小。 网页的分类 按所处位置分类 按网页在网站中所处的位置可将网页分为主页和子页两类。 按表现形式分类 按网页的表现形式可将网页分为：静态网页和动态网页。 1.1.3 网页设计技术分类 1．静态网页设计技术 Internet最早出现时，站点内容都是以HTML静态页面形式存放在服务器上的，访问者浏览到的页面都是这些实际存在的静态页面。 静态网页设计技术 静态并不是指网页中的元素都是静止不动的，而是指网页制作完成后，静态网页内容一经发布到网站服务器上，无论是否有用户访问，每个静态网页的内容都是保存在网站服务器上的。也就是说，静态网页是保存在服务器上的内容不变的文件，每个网页都是一个独立的文件。 静态网页设计技术 浏览器“阅读”静态网页的执行过程较为简单，如图1-1所示。首先浏览器向网络中的Web服务器发出请求，指向某个普通网页；Web服务器接受请求信号后，将该网页传回给浏览器，此时传送的只是文本文件；浏览器接到Web服务器送来的信号后开始解读HTML标签，然后进行转换，将结果显示出来。 静态网页设计技术 由于静态网页的内容相对稳定，因此容易被搜索引擎检索。 静态网页没有数据库的支持，在网站制作和维护方面工作量较大，因此当网站信息量很大时，完全依靠静态网页制作方式