1、第11章 网页制作与网站建设,浏览网页原理图,11.1 剖析网页, 11.1.1 网页的本质, 网页是WWW（World Wide Web，万维网）上的基本文档，用HTML（Hyper Text Markup Language，超文本标记语言）书写。网页可以是网站的一部分，也可以独立存在。, 网页可以通过浏览器查看，常用的浏览器有微软Internet Explorer浏览器、 360安全浏览器、Mozilla Firefox 火狐浏览器、傲游(Maxthon)浏览器、腾讯TT浏览器(Tencent Traveler)等。,元素1, 文字、图片、,网页1,链接、动画、, 网站,元素m,声音、,视
2、频、,网页n,表格、表单、,网站构件关系 11.1.1 网页的本质,11.1.1 网页的本质, 简单的HTML文档, 长大欢迎您！,这里是荆州旅游网，我们带您畅游荆州！,11.1.1 网页的本质, 在HTML源代码中，用标记符经常是成对出现的。每一个标记,符都有特定的功用。, 和标记是用来说明在它们之间的文本属于HTML文件，浏览器从标记开始执行，当遇到标记时，将会停止执行。, 和标记是用来说明在它们之间的文本都属于HTML文件的文件头。它仅定义HTML文件需要特殊处理的一些预先说明，并不在浏览器中显示。, 和标记是用来说明在它们之间的文本是该文件的标题，此标题显示在浏览器最上方的标题栏中。如
3、果要把页面添加到浏览器的“收藏夹”中，该文档的标题便会成为“收藏夹”中的项目名称。, 和标记是用来说明在它们之间的文本是HTML文件的主体部分，也是整个HTML文件最重要的部分。它所包含的内容显示在浏览器的页面显示窗口里。,11.1.2 网页的基本构成, 按照在网站中位置的不同，网页可以分为： 引导页：引导页即是刚刚输入网站后所显示的页面，作为进入网站的一个入口。采用FLASH动画作为引导页引出首页的设计思路，是当前网站建设较为流行的做法。, 主页：指进入网站后看到的第一个页面，也称,为首页。, 内页：指与主页相链接的页面，也就是网站的内部页面。经常分为多个级别，分别称为二级页面、三级页面,1
4、1.1.2 网页的基本构成,导航栏,内容区,版权区,导航区,Logo,Banner,11.2 网站建设的基本流程, 11.2.1 网站前期规划与设计,1确定网站风格2确定网页版式3确定页面尺寸,11.2 网站建设的基本流程, 11.2.2 页面的实现与完善, 静态网页的实现, 通常在进行网页开发时，首先进行静态网页的制作。静态网页的每一行HTML代码都是将页面放置到服务器之前由设计人员编写的。因为网页内容在放置到服务器后不可更改，所以这种网页称为静态网页。当然，“静态”网页并不一定是完全静止的页面，一些GIF动画或一些Flash内容可以使静态网页活动起来。, 动态网页的实现, 动态页面是基于数
5、据库的页面，在有了网页的大致外观之后，许多网页内容的显示、添加和修改主要通过修改数据库来完成。动态网页一般通过ASP+HTML、JSP+HTML、PHP+HTML、CGI+HTML等编程语言来实现。, 完成了静态与动态页面的制作以后，要对网站目录中的所有,页面进行测试和完善，直至完全符合设计目标。,11.2 网站建设的基本流程, 11.2.3 网站的发布与维护, 在发布网页前必须在Internet上申请一个主页空间，,用于指定网站或主页在Internet上的位置。, 发布网页通常是使用FTP软件上传到服务器中申请的,网址目录下。, 站点上传到服务器后，应定期打开浏览器检查页面元素显示是否正常、
6、各种链接是否正常；每隔一段时间应对站点中的某些页面进行更新，保持网站内容的新鲜，以吸引更多的浏览者,11.2 网站建设的基本流程, IDC (Internet Data Center)，即互联网数据中心。是指在互联网上提供的各项增值服务服务。他包括：申请域名、租用虚拟主机空间、主机托管等业务的服务。,11.3 网页制作工具, 11.3.1 主流网页制作工具, 制作网页可以使用一些常用的文字编辑软件来编写网页源代码，如记事本、写字板，但这要求编写者对HTML语言非常熟悉，并且编写过程非常烦琐耗时。还可以使用Word等应用软件来自动生成网页，但这种方式产生的网页源代码会产生很多废码，使网页运行效率
7、大大降低。, HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器），两者各有千秋。所见则所得网页编辑器的优点就是直观性，使用方便，容易上手，您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别。,11.4 制作静态网页,11.4.4 使用超级链接有三种类型的链接路径：,1. 绝对路径（例如：http:/ 文档相对路径（例如：dreamweaver/contents.html）3. 站点根目录相对路径（例如：/support/dreamweaver/contents.ht
8、ml）,建议最好使用相对路径，这样做方便网站的移植，与绝对路径相比，相对路径能确保网页的链接在网站移动到其他计算机后能够保持连通。,11.5 制作动态网页, 什么是动态网页, 动态网页使用HTML+ASP、HTML+PHP或HTML+JSP等来实现。一般以.asp、.jsp、.perl、.php、.cgi等形式为后缀。动态网页与静态网页相比有如下特点：, 动态网页需要Web应用服务器支持其编译运行，并将编译结果提交给浏览器来显示，只用IE浏览器是无法显示出动态代码的运行结果的。, 动态网页以数据库技术为基础，大大降低了网站维护的工作,量。, 采用动态网页技术的网站可以实现更多的功能，如用户注,册、登录、搜索等，这是静态网页做不到的。,11.5 制作动态网页, 11.5.1 建立动态站点,1安装和配置Web服务器（IIS）,2用Access2003建立数据库和数据表3在Dreamweaver中建立动态站点4连接数据库,11.5 制作动态网页, 11.5.2 生成动态页, 在Dreamweaver8.0中建立好数据源和数据连接后，可以非常方便地完成自动生成动态页的工作，例如“记录集分页”、“主详细页集”、“插入记录”、“更新记录”、“删除记录”页面等。,
