第11章 企业网站前台页面设计.ppt

1、网站建设技术第11章 企业网站前台页面设计,本章将介绍网站前台页面的设计与功能实现，主要包括网站栏目结构设计，网站首页布局设计，首页新闻、图片等动态内容的设计，以及其他页面的设计与制作。,BACK,NEXT,PREV,掌握网站栏目结构设计的方法； 掌握网站首页的布局与设计； 掌握首页新闻动态、图片新闻、通知公告、成功案例和网站访问计数器等模块的编程实现方法； 掌握新闻内容显示页面的编程实现方法； 掌握图片内容显示的编程实现方法； 通过对本章的学习，掌握网站前台页面和后台数据库衔接的方法，达到能独立设计制作复杂页面的能力。,二、教学目标,BACK,NEXT,PREV,11.1 网站栏目结构设计,

2、三、知识点讲解,BACK,NEXT,PREV,11.2 网站首页布局与设计,三、知识点讲解,BACK,NEXT,PREV,11.3 首页各功能模块的设计与实现 11.3.1 “新闻动态”模块 “新闻动态”栏目应用前面开发的新闻发布系统，自动从数据库webdata.mdb的news数据表中读取news_class字段值为“新闻动态”的相关信息显示在栏目指定区域。,三、知识点讲解,BACK,NEXT,PREV,教师演示操作过程,11.3.2 “图片新闻”模块 “图片新闻”模块是从数据库webdata.mdb的images数据表中读取img_class字段值为“图片新闻”的图片数据和标题信息显示在栏

3、目指定区域。,三、知识点讲解,BACK,NEXT,PREV,教师演示操作过程,11.3.3 “通知公告”模块 “通知公告”栏目与前面的“新闻动态”栏目实现办法基本类似，也是应用新闻发布系统从数据库webdata.mdb的news数据表中读取news_class字段值为“通知公告”的相关信息显示在栏目指定区域。,三、知识点讲解,BACK,NEXT,PREV,教师演示操作过程,11.3.4 “成功案例”模块 “成功案例”模块同样也是从数据库webdata.mdb的images数据表中读取img_class字段值为“成功案例”的图片数据显示在栏目指定区域。,三、知识点讲解,BACK,NEXT,PRE

4、V,教师演示操作过程,11.3.5 “网站访问计数器”模块 “网站访问计数器”用于记录浏览者对首页的累计访问次数。考虑到计数器的值要永久保存，所以在数据库webdata.mdb中设计一个数据表counters，将动态改变的计数值保存在字段webcounter中,三、知识点讲解,BACK,NEXT,PREV,教师演示操作过程,11.4其他页面的设计与实现 统一设计布局网站“新闻中心”、“公司简介”、“成功案例”、“客户服务”、“联系我们”等其他页面。 统一布局网站其他页面，需要使用Div+CSS。,三、知识点讲解,BACK,NEXT,PREV,教师演示操作过程,13,实验十一 *企业网站的首页设计,BACK,NEXT,PREV,实验目的与要求 1熟悉和掌握ASP对数据库的存取访问方法，掌握利用ASP编写Web应用程序的方法。 2掌握网站栏目结构设计的方法； 3掌握网站首页的布局与设计； 4掌握首页新闻动态、图片新闻、通知公告、成功案例和网站访问计数器等模块的编程实现方法； 5掌握图片内容显示的编程实现方法；,14,实验内容 以一个企业网站前台页面为参考，设计实现网站