单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,一、内容概述,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,三、知识点讲解,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,三、案例分析,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,四、实验任务,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,一、课程说明,网站建设技术,第,11,章 企业网站前台页面设计,内容概述,01,教学目标,02,知识点讲解,03,实验,04,本章将介绍网站前台页面的设计与功能实现，主要包括网站栏目结构设计，网站首页布局设计，首页新闻、图片等动态内容的设计，以及其他页面的设计与制作。,BACK,NEXT,PREV,掌握网站栏目结构设计的方法；,掌握网站首页的布局与设计；,掌握首页新闻动态、图片新闻、通知公告、成功案例和网站访问计数器等模块的编程实现方法；,掌握新闻内容显示页面的编程实现方法；,掌握图片内容显示的编程实现方法；,通过对本章的学习，掌握网站前台页面和后台数据库衔接的方法，达到能独立设计制作复杂页面的能力。,二、教学目标,BACK,NEXT,PREV,11.1,网站栏目结构设计,三、知识点讲解,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,字段值为“图片新闻”的图片数据和标题信息显示在栏目指定区域。,三、知识点讲解,BACK,NEXT,PREV,教师演示操作过程,11.3.3“,通知公告”模块,“通知公告”栏目与前面的“新闻动态”栏目实现办法基本类似，也是应用新闻发布系统从数据库,webdata.mdb,的,news,数据表中读取,news_class,字段值为“通知公告”的相关信息显示在栏目指定区域。,三、知识点讲解,BACK,NEXT,PREV,教师演示操作过程,11.3.4“,成功案例”模块,“成功案例”模块同样也是从数据库,webdata.mdb,的,images,数据表中读取,img_class,字段值为“成功案例”的图片数据显示在栏目指定区域。,三、知识点讲解,BACK,NEXT,PREV,教师演示操作过程,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,实验内容,以一个企业网站前台页面为参考，设计实现网站的首页。要求必须包含新闻动态、图片新闻、通知公告、成功案例和网站访问计数器等模块。,BACK,NEXT,PREV,实验十一 *企业网站的首页设计,