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

网站建设技术——第11章 企业网站前台页面设计 内容概述 教学目标 知识点讲解 实验 本章将介绍网站前台页面的设计与功能实现，主要包括网站栏目结构设计，网站首页布局设计，首页新闻、图片等动态内容的设计，以及其他页面的设计与制作。 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 教师演示操作过程 * 实验十一 ***企业网站的首页设计 BACK NEXT PREV 实验目的与要求 1．熟悉和掌握ASP对数据库的存取访问方法，掌握利用ASP编写Web应用程序的方法。 2．掌握网站栏目结构设计的方法； 3．掌握网站首页的布局与设计； 4．掌握首页新闻动态、图片新闻、通知公告、成功案例和网站访问计数器等模块的编程实现方法； 5．掌握图片内容显示的编程实现方法； * 实验内容 以一个企业网站前台页面为参考，设计实现网站的首页。要求必须包含新闻动态、图片新闻、通知公告、成功案例和网站访问计数器等模块。 BACK NEXT PREV 实验十一 ***企业网站的首页设计 * 指导子阶段一： 1、停止华夏银行卡页面的制作，没有完成的学员课后完成 2、教员总结上个案例大家普遍遇到的问题并进行讲解，没有完成案例的学员遇到的困难主要有哪些，进行介绍讲解，使这些学员在课后能够完成 3、介绍用户登录页面完成后的效果，以及文本输入框的样式、超链接、文本的样式，按钮的特殊样式 * * 指导子阶段一： 1、停止华夏银行卡页面的制作，没有完成的学员课后完成 2、教员总结上个案例大家普遍遇到的问题并进行讲解，没有完成案例的学员遇到的困难主要有哪些，进行介绍讲解，使这些学员在课后能够完成 3、介绍用户登录页面完成后的效果，以及文本输入框的样式、超链接、文本的样式，按钮的特殊样式 * * 指导子阶段