《企业网站前台页面设计课堂PPT》由会员分享，可在线阅读，更多相关《企业网站前台页面设计课堂PPT（14页珍藏版）》请在金锄头文库上搜索。
1、网站建设技术网站建设技术第第11章章 企业网站前台页面设计企业网站前台页面设计www.skf- 内容概述内容概述 教学目标教学目标 知识点讲解知识点讲解实验实验 本本章章将将介介绍绍网网站站前前台台页页面面的的设设计计与与功功能能实实现现，主主要要包包括括网网站站栏栏目目结结构构设设计计，网网站站首首页页布布局局设设计计，首首页页新新闻闻、图图片片等等动动态态内内容容的的设设计计，以以及及其其他他页页面面的的设计与制作。设计与制作。BACK NEXTPREV 3 3掌握网站栏目结构设计的方法；掌握网站栏目结构设计的方法；掌握网站首页的布局与设计；掌握网站首页的布局与设计；掌握首页新闻动态
2、、图片新闻、通知公告、掌握首页新闻动态、图片新闻、通知公告、成功案例和网站访问计数器等模块的编程成功案例和网站访问计数器等模块的编程实现方法；实现方法；掌握新闻内容显示页面的编程实现方法；掌握新闻内容显示页面的编程实现方法；掌握图片内容显示的编程实现方法；掌握图片内容显示的编程实现方法；通过对本章的学习，掌握网站前台页面和通过对本章的学习，掌握网站前台页面和后台数据库衔接的方法，达到能独立设计后台数据库衔接的方法，达到能独立设计制作复杂页面的能力。制作复杂页面的能力。BACK NEXTPREV 4 411.1 11.1 网站栏目结构设计网站栏目结构设计 BACK NEXTPREV 11.2 1
3、1.2 网站首页布局与设计网站首页布局与设计 BACK NEXTPREV 11.3 11.3 首页各功能模块的设计与实现首页各功能模块的设计与实现11.3.1 11.3.1 “ “新闻动态新闻动态” ”模块模块 “ “新闻动态新闻动态” ”栏目应用前面开发的新闻发布系统，自动从数据库栏目应用前面开发的新闻发布系统，自动从数据库webdata.mdbwebdata.mdb的的newsnews数据表中读取数据表中读取news_classnews_class字段值为字段值为“ “新闻动态新闻动态” ”的相关信息显示在栏目指定区域。的相关信息显示在栏目指定区域。 BACK NEXTPREV 教师演示操
4、作过程教师演示操作过程教师演示操作过程教师演示操作过程11.3.2 11.3.2 “ “图片新闻图片新闻” ”模块模块 “ “图片新闻图片新闻” ”模块是从数据库模块是从数据库webdata.mdbwebdata.mdb的的imagesimages数据表中读取数据表中读取img_classimg_class字段值为字段值为“ “图片新闻图片新闻” ”的图片数据和标题信息显示在栏目指的图片数据和标题信息显示在栏目指定区域。定区域。 BACK NEXTPREV 教师演示操作过程教师演示操作过程教师演示操作过程教师演示操作过程11.3.3 11.3.3 “ “通知公告通知公告” ”模块模块 “ “通
5、知公告通知公告通知公告通知公告” ”栏目与前面的栏目与前面的栏目与前面的栏目与前面的“ “新闻动态新闻动态新闻动态新闻动态” ”栏目实现办法基本类似，栏目实现办法基本类似，栏目实现办法基本类似，栏目实现办法基本类似，也是应用新闻发布系统从数据库也是应用新闻发布系统从数据库也是应用新闻发布系统从数据库也是应用新闻发布系统从数据库webdata.mdbwebdata.mdb的的的的newsnews数据表中读取数据表中读取数据表中读取数据表中读取news_classnews_class字段值为字段值为字段值为字段值为“ “通知公告通知公告通知公告通知公告” ”的相关信息显示在栏目指定区域。的相关信息
6、显示在栏目指定区域。的相关信息显示在栏目指定区域。的相关信息显示在栏目指定区域。 BACK NEXTPREV 教师演示操作过程教师演示操作过程教师演示操作过程教师演示操作过程11.3.4 11.3.4 “ “成功案例成功案例” ”模块模块 “ “成功案例成功案例” ”模块同样也是从数据库模块同样也是从数据库webdata.mdbwebdata.mdb的的imagesimages数据表数据表中读取中读取img_classimg_class字段值为字段值为“ “成功案例成功案例” ”的图片数据显示在栏目指定区的图片数据显示在栏目指定区域。域。 BACK NEXTPREV 教师演示操作过程教师演示操
7、作过程教师演示操作过程教师演示操作过程11.3.5 11.3.5 “ “网站访问计数器网站访问计数器” ”模块模块 “ “网站访问计数器网站访问计数器” ”用于记录浏览者对首页的累计访问次数。考虑用于记录浏览者对首页的累计访问次数。考虑到计数器的值要永久保存，所以在数据库到计数器的值要永久保存，所以在数据库webdata.mdbwebdata.mdb中设计一个数据中设计一个数据表表counterscounters，将动态改变的计数值保存在字段，将动态改变的计数值保存在字段webcounterwebcounter中中 BACK NEXTPREV 教师演示操作过程教师演示操作过程教师演示操作过程教
8、师演示操作过程11.411.4其他页面的设计与实现其他页面的设计与实现 统一设计布局网站统一设计布局网站“ “新闻中心新闻中心” ”、“ “公司简介公司简介” ”、“ “成功案例成功案例” ”、“ “客户服务客户服务” ”、“ “联系我们联系我们” ”等其他页面。等其他页面。 统一布局网站其他页面，需要使用统一布局网站其他页面，需要使用Div+CSSDiv+CSS。BACK NEXTPREV 教师演示操作过程教师演示操作过程教师演示操作过程教师演示操作过程1313实验十一实验十一实验十一实验十一 * *企业网站的首页设计企业网站的首页设计企业网站的首页设计企业网站的首页设计 BACK NEXT
9、PREV 实验目的与要求实验目的与要求实验目的与要求实验目的与要求1 1 1 1熟悉和掌握熟悉和掌握熟悉和掌握熟悉和掌握ASPASPASPASP对数据库的存取访问方法，掌握利对数据库的存取访问方法，掌握利对数据库的存取访问方法，掌握利对数据库的存取访问方法，掌握利用用用用ASPASPASPASP编写编写编写编写WebWebWebWeb应用程序的方法。应用程序的方法。应用程序的方法。应用程序的方法。2 2 2 2掌握网站栏目结构设计的方法；掌握网站栏目结构设计的方法；掌握网站栏目结构设计的方法；掌握网站栏目结构设计的方法；3 3 3 3掌握网站首页的布局与设计；掌握网站首页的布局与设计；掌握网站
10、首页的布局与设计；掌握网站首页的布局与设计；4 4 4 4掌握首页新闻动态、图片新闻、通知公告、成功掌握首页新闻动态、图片新闻、通知公告、成功掌握首页新闻动态、图片新闻、通知公告、成功掌握首页新闻动态、图片新闻、通知公告、成功案例和网站访问计数器等模块的编程实现方法；案例和网站访问计数器等模块的编程实现方法；案例和网站访问计数器等模块的编程实现方法；案例和网站访问计数器等模块的编程实现方法；5 5 5 5掌握图片内容显示的编程实现方法；掌握图片内容显示的编程实现方法；掌握图片内容显示的编程实现方法；掌握图片内容显示的编程实现方法；13131414实验内容实验内容以一个企业网站前台页面为参考，以一个企业网站前台页面为参考，设计实现网站的首页。要求必须包含新设计实现网站的首页。要求必须包含新闻动态、图片新闻、通知公告、成功案闻动态、图片新闻、通知公告、成功案例和网站访问计数器等模块。例和网站访问计数器等模块。 BACK NEXTPREV 实验十一实验十一实验十一实验十一 * *企业网站的首页设计企业网站的首页设计企业网站的首页设计企业网站的首页设计 1414
