《网页设计与制作实例教程》第10章（孙涛）ppt课件（全）.pptVIP

清华大学出版社 《网页设计与制作实例教程》 第10章 高等学校计算机应用规划教材 2022-4-26 主编 方其桂 内容提要 第10章 网页设计实例 在网页设计中，分静态网页和动态网页。对于HTML格式的网页，通常被称为“静态网页”，早期的网站一般都是由静态网页制作的，更新起来较为麻烦。动态网页则是含有后台数据库，可以进行交互，容易更新的网页。 教学目录 制作静态网页 制作动态网页 01 02 第10章 网页设计实例 10.1 制作静态网页 教学内容 10.1.1 规划网站 制作网页和制作其他电子作品一样，必须进行细致的规划，分析完成该任务需要哪些条件，分几步完成，如何完成等等。 实例1 规划“安徽旅游资源信息网”网站 规划网站时首先需要选择合适的主题，对网页结构规划，对页面进行版面设计，有的多人开发网站还需对相关人员进行分工等，如下图所示。 第10章 网页设计实例 10.1 制作静态网页 教学内容 10.1.2 建立站点 网站具有管理网页和素材的功能，所以先建立站点，然后在站点中创建网页，建立文件夹，管理站点中的素材资源。 实例2 建立“安徽旅游资源信息网”网站 运行Dreamweaver CS6软件，建立相关文件夹和网页，效果如下图所示。 第10章 网页设计实例 10.1 制作静态网页 教学内容 10.1.3 制作首页 建立站点后，接下来的任务就是制作网页。首页是一个网站的“门面”，要美观，同时能链接到各个分页面。 实例3 制作“安徽旅游资源信息网”网站首页 运行Dreamweaver CS6软件，打开“index.html”文件，通过表格进行布局规划，新建CSS规则美化页面内容，编辑和美化网页内容等一系列操作，完成效果如下图所示。 第10章 网页设计实例 10.1 制作静态网页 教学内容 10.1.4 制作分栏目页面 站点首页完成后，接下来的任务就是分栏目页面的制作，分栏目页面是栏目内容的简介和目录，通过它可以链接到各个分页面。以下以“红色旅游”栏目为例，介绍分栏目页面的制作。 实例4 制作“红色旅游”分栏目页 对于和首页面相同的内容，可以通过复制完成，不同的内容则再通过表格进行布局规划等一系列操作，完成效果如下图所示。 第10章 网页设计实例 10.2 制作动态网页 教学内容 10.2.1 规划网站 规划网站可以对网站的建设起到指导和计划的作用，规划时需要分析完成网站的制作需要哪些条件，分几步完成，如何完成等等，对网站的制作和维护起到定位作用。 实例5 规划“花季文学网”网站 “花季文学”为主题的动态网站，是个简单的新闻系统，规划时需要，对数据库进行设计，对网页结构规划，对页面进行版面设计，有的多人开发网站还需对相关人员进行分工等。本实例最终完成后的图片效果如图所示。 第10章 网页设计实例 10.2 制作动态网页 教学内容 10.2.2 创建数据库 一个动态网站的建设首先要创建数据库，而创建数据库的重点是构建逻辑结构，以下以Access数据库的建立为例，介绍动态网站数据库的设计。 实例6 创建“花季文学”网站数据库 运行Microsoft Office Access 2003软件，新建一个空白的数据库文件，通过使用设计器创建表，完成如下图所示的数据库。 第10章 网页设计实例 10.2 制作动态网页 教学内容 10.2.3 制作前台网页 标准的动态网站一般分为2个部分，一部分网页可展示给浏览者，也就是我们所说的前台网页，而另一部分则用于网站管理（网站后台网页），这部分内容没有授权许可，是不可进行浏览。 实例7 制作“花季文学”网首页 “花季文学”网的首页是用来显示数据库中文章的标题，完成后如下图所示。 第10章 网页设计实例 10.2 制作动态网页 教学内容 10.2.3 制作前台网页 实例8 制作“花季文学”网文章显示页 文章显示页是单击文章目录列表中的文章名称后，用来显示数据库中的文章信息，完成后如下图所示。 第10章 网页设计实例 10.2 制作动态网页 教学内容 10.2.4 制作后台管理网页 网 站的后台管理页面是网站的核心部分，用户通过后台管理可以很方便的针对网站进行维护和数据更新。 实例9 制作发布文章网页 发布文章网页是指网站管理员在后台操作页面中，用来发布新文章的页面，发布页面中，一般包含文章的标题、文章作者、文章内容等信息，完成后如下图所示。 第10章 网页设计实例 10.2 制作动态网页 教学内容 10.2.4 制作后台管理网页 实例10 制作更新文章网页 修改已发布的文章是网站维护的一个常用操作，而更新文章页面就是针对其制作的。完成后的页面如下图所示