网页设计05798.ppt

第1章 网页制作基础知识 认识网站与网页 网页制作软件和制作技术 网站建设流程 网页设计的基本原则 1.1 认识网站与网页 1.1.1 网页的本质 1.1.2 网页的功能组成 1．站标 2．导航条 如果网站内容不多，可根据网站风格尝试灵活摆放导航条，也可以使用图片或Flash动画等制作导航条。 如果网站栏目很多，可以将导航条分为多排放置在Logo的下方或右侧。为便于查看，可为各排设置不同的底色。 3．广告条 4．标题栏 5．按钮 1.1.3 IP地址、域名与网址 1．IP地址 2．域名 3．网址 1.1.4 静态网页与动态网页 1.2 网页制作软件和制作技术 1.2.1 网站管理与网页制作软件 1.2.2 HTML语言简介 1．认识HTML 2．HTML文档的基本结构 3．HTML标签的类型与特点 1.2.3 脚本语言简介 1.2.4 数据库简介 1.3 网站建设流程 1.3.1 网站策划 2．规划网站结构 3．确定网站要应用的技术 1.3.2 收集网站素材 1.3.3 设计和制作网站 1.3.4 空间和域名申请 1.3.5 测试和发布网站 1.3.6 推广和维护网站 1．网站推广 2．网站维护 1.4 网页设计的基本原则 1.4.1 网页的配色 1.4.2 网页的版式 1.4.3 网页尺寸 * * 网页就是我们上网时在浏览器中看到的一个个画面，网站则是一组相关网页的集合。一个小型网站可能只包含几个网页，而一个大型网站则可能包含成千上万个网页。 另外，打开某个网站时显示的第一个网页被称为网站的主页（或首页），它可以说是网站的门户，通过它不仅可以了解网站的性质和内容，还可以访问网站中的其他页面。 我们看到的网页包含了一组文件，它们分别是网页文件（扩展名为.html、.asp等）、图像文件（扩展名为.jpg、.gif等）和Flash动画文件（扩展名为.swf）等。 从浏览者的角度看，网页中无非就是一些文字、图像和动画等。但从专业的角度来讲，网页中的元素各有其不同的作用，可以将他们分为站标、导航条、广告条、标题栏和按钮等，如下图所示。 站标 导航条 按钮 广告条 标题栏 站标也叫Logo，是网站的标志，其作用是使人看见它就能够联想到企业。因此，网站Logo通常采用企业的Logo。 Logo一般采用蕴含企业文化和特色的图案，或是与企业名称相关的字符或符号及其变形，当然也有很多是图文组合。 导航条是链接到网站内主要页面的超链接组合，它可以引导浏览者轻松找到网站中的各个页面，导航条也因此而得名。 设计导航条时，应注意以下几点。 广告条又称Banner，其功能是宣传网站或替其他企业做广告。Banner的尺寸可以根据版面需要来安排。 此处的标题栏不是指整个网页的标题栏，而是网页内部各版块的标题栏，是各版块内容的概括。它使得网页内容的分类更清晰、明了，大大地方便了浏览者。 标题栏可以是文字加不同颜色的背景，也可以是图片，这要根据网站的内容和规模来决定。 在现实生活中，按钮通常是启动某些装置或机关的开关。网页中的按钮也沿用了这个概念。网页中的按钮被点击之后，网页会实现相应的操作，比如页面跳转，或数据的传输等。 虽然互联网上连接了不计其数的服务器与客户机，但它们并不是杂乱无章的。每一个主机在互联网上都有唯一的地址，我们称这个地址为IP地址（Internet Protocol Address）。IP地址由4个小于256的数字组成，数字之间用点间隔。例如，“26”就是一个IP地址。 由于IP地址在使用过程中难于记忆和书写，人们又发现了一种与IP地址对应的字符来表示地址，这就是域名。每一个网站都有自己的域名，并且域名是独一无二的。例如，我们只需要在浏览器地址栏中输入搜狐网站的域名“”，然后按回车键就可以访问搜狐网站了。 网址又叫URL，英文全称是“Uniform Resource Locator”，即统一资源定位符。它是网络上通用的一种地址格式，用于标识网页文件在网络中的位置。 一个完整的网址由通信协议名称、域名或IP地址、网页在服务器中的路径和文件名4部分组成。 从大的方面讲，网页可分为静态网页和动态网页。通常是从制作技术的角度来区分静态网页和动态网页的，完全采用HTML技术制作的网页称为静态网页；使用HTML、编程语言和数据库共同完成，需要与服务器实时交互的网页称为动态网页。 目前用于网站管理和网页制作的软件主要是Dreamweaver，其功能全面、操作灵活、专业性强。另外，它还可以作为动态网站的开发环境。 在制作网页时，除Dreamweaver外还需要用到Fireworks、Flash、Photoshop等辅助软件。 HTML语言是网页制作的基础，本节我们便来认识一下该语言，了解一下HT