电子课件-网站建设技术-.ppt

1、网站建设技术第10章 企业网站后台管理系统设计内容概述 教学目标 知识点讲解实验 本章将以一个企业网站后台管理系统建设为案例，综合运用ASP技术，详细地开发一个完整的网站后台系统。BACK NEXTPREV 掌握网站后台管理系统的规划与设计；掌握对用户管理子系统和新闻发布子系统的规划与设计方法；掌握根据数据存储需求，设计数据表结构的方法；掌握ASP对数据库的连接访问方式，并重点掌握OLE DB连接方式；掌握常用的Access数据库的OLE DB连接字符串的构造方法；掌握用户信息的添加、删除、编辑以及用户登录验证页面、用户管理子系统主控制页面的编写方法；掌握新闻信息的添加、删除、编辑以及新闻发布

2、子系统主控制页面的编写方法；通过对本章的学习，掌握数据库管理系统的规划与设计方法，达到能独立规划设计并独立编写完成类似数据库应用系统的开发编程能力。BACK NEXTPREV 10.1 网站功能规划 BACK NEXTPREV 10.2 用户管理子系统10.2.1 系统需求分析 BACK NEXTPREV 10.2.2 系统数据库设计 BACK NEXTPREV 10.3 新闻发布系统10.3.1 系统需求分析BACK NEXTPREV 10.3.2 系统数据库设计 BACK NEXTPREV BACK NEXTPREV 实验目的与要求实验目的与要求1 1熟悉和掌握熟悉和掌握ASPASP对数据

3、库的存取访问对数据库的存取访问方法，掌握利用方法，掌握利用ASPASP编写编写WebWeb应用程序应用程序的方法。的方法。2 2掌握新闻发布系统的规划、设计与编掌握新闻发布系统的规划、设计与编程实现方法。程实现方法。3 3掌握掌握ASPASP程序的运行调试方法。程序的运行调试方法。实验十实验十 新闻发布系统设计与实现新闻发布系统设计与实现 实验内容 以一个企业网站后台为参考，编写新闻发布系统。运行调试方法。BACK NEXTPREV 实验十实验十 新闻发布系统设计与实现新闻发布系统设计与实现网站建设技术第11章 企业网站前台页面设计内容概述 教学目标 知识点讲解实验 本章将介绍网站前台页面的设

4、计与功能实现，主要包括网站栏目结构设计，网站首页布局设计，首页新闻、图片等动态内容的设计，以及其他页面的设计与制作。BACK NEXTPREV 掌握网站栏目结构设计的方法；掌握网站首页的布局与设计；掌握首页新闻动态、图片新闻、通知公告、成功案例和网站访问计数器等模块的编程实现方法；掌握新闻内容显示页面的编程实现方法；掌握图片内容显示的编程实现方法；通过对本章的学习，掌握网站前台页面和后台数据库衔接的方法，达到能独立设计制作复杂页面的能力。BACK NEXTPREV 11.1 网站栏目结构设计 BACK NEXTPREV 11.2 网站首页布局与设计 BACK NEXTPREV 11.3 首页各

5、功能模块的设计与实现11.3.1“新闻动态”模块 “新闻动态”栏目应用前面开发的新闻发布系统，自动从数据库webdata.mdb的news数据表中读取news_class字段值为“新闻动态”的相关信息显示在栏目指定区域。BACK NEXTPREV 11.3.2“图片新闻”模块 “图片新闻”模块是从数据库webdata.mdb的images数据表中读取img_class字段值为“图片新闻”的图片数据和标题信息显示在栏目指定区域。BACK NEXTPREV 11.3.3“通知公告”模块 “通知公告通知公告”栏目与前面的栏目与前面的“新闻动态新闻动态”栏目实现办法基本类似，栏目实现办法基本类似，也是

6、应用新闻发布系统从数据库也是应用新闻发布系统从数据库webdata.mdb的的news数据表中读取数据表中读取news_class字段值为字段值为“通知公告通知公告”的相关信息显示在栏目指定区域。的相关信息显示在栏目指定区域。BACK NEXTPREV 11.3.4“成功案例”模块 “成功案例”模块同样也是从数据库webdata.mdb的images数据表中读取img_class字段值为“成功案例”的图片数据显示在栏目指定区域。BACK NEXTPREV 11.3.5“网站访问计数器”模块 “网站访问计数器”用于记录浏览者对首页的累计访问次数。考虑到计数器的值要永久保存，所以在数据库webda

7、ta.mdb中设计一个数据表counters，将动态改变的计数值保存在字段webcounter中 BACK NEXTPREV 11.4其他页面的设计与实现 统一设计布局网站“新闻中心”、“公司简介”、“成功案例”、“客户服务”、“联系我们”等其他页面。统一布局网站其他页面，需要使用Div+CSS。BACK NEXTPREV 实验十一实验十一 *企业网站的首页设计企业网站的首页设计 BACK NEXTPREV 实验目的与要求实验目的与要求1 1熟悉和掌握熟悉和掌握ASPASP对数据库的存取访问方法，掌握利对数据库的存取访问方法，掌握利用用ASPASP编写编写WebWeb应用程序的方法。应用程序的

8、方法。2 2掌握网站栏目结构设计的方法；掌握网站栏目结构设计的方法；3 3掌握网站首页的布局与设计；掌握网站首页的布局与设计；4 4掌握首页新闻动态、图片新闻、通知公告、成功掌握首页新闻动态、图片新闻、通知公告、成功案例和网站访问计数器等模块的编程实现方法；案例和网站访问计数器等模块的编程实现方法；5 5掌握图片内容显示的编程实现方法；掌握图片内容显示的编程实现方法；实验内容 以一个企业网站前台页面为参考，设计实现网站的首页。要求必须包含新闻动态、图片新闻、通知公告、成功案例和网站访问计数器等模块。BACK NEXTPREV 实验十一实验十一 *企业网站的首页设计企业网站的首页设计 网站建设技

9、术第12章 网站管理与维护内容概述 教学目标 知识点讲解实验 本章将从网站域名的基础知识开始，介绍域名和空间的申请、网站的上传与发布、网站的维护与安全和网站的评价与推广。BACK NEXTPREV 了解域名的概念；掌握域名和空间的申请方法；掌握网站的上传与发布的方法；了解网站维护的解决方案；了解网站推广的方式。BACK NEXTPREV 12.1 域名和空间的申请一、什么是域名一、什么是域名 任何一个连接在Internet的主机或路由器，都有一个唯一的层次结构的名字，即域名（domain name）。二、什么样的域名才是一个好域名二、什么样的域名才是一个好域名 三、域名的价值三、域名的价值四、

10、申请域名四、申请域名 BACK NEXTPREV 12.2网站的上传与发布 一、一、IE直接上传直接上传二、使用二、使用CuteFTP发布网站发布网站三、使用三、使用Dreamweaver自带的上传工具发布网站自带的上传工具发布网站BACK NEXTPREV 12.3网站的维护与安全12.3.1网站的维护n 直接委托给网络公司维护。n 聘请一个网站运营专家来维护。BACK NEXTPREV 12.3.2网站的安全1网站常见的安全问题网站常见的安全问题2网站的安全措施网站的安全措施BACK NEXTPREV 12.4网站的评价与推广n 网站的评价网站的评价n 网站的推广网站的推广 BACK NE

11、XTPREV 实验十二实验十二 上传发布企业网站上传发布企业网站 BACK NEXTPREV 实验目的与要求实验目的与要求 熟悉域名申请和空间购买的过程，掌握网站的上传熟悉域名申请和空间购买的过程，掌握网站的上传与发布。与发布。实验内容 以一个企业网站为参考，1为企业网站申请域名。2上传与发布企业网站。BACK NEXTPREV 实验十二实验十二 上传发布企业网站上传发布企业网站 网站建设技术 第1章 网站建设概述内容概述 教学目标 知识点讲解实验 本章将主要介绍网站与网站建设的涵义，当前流行的几种网站开发技术与工具，以及构建Web服务器的方法。BACK NEXTPREV 了解网站与网站建设的

12、涵义；了解常用的几种网站开发技术与工具；掌握Web服务器的构建方法。BACK NEXTPREV 1.1网站建设的涵义n 网站，实质上就是包括主页在内的很多网页的集网站，实质上就是包括主页在内的很多网页的集合，也称站点。合，也称站点。n 网站建设是指由网站策划师、网页设计师、网络网站建设是指由网站策划师、网页设计师、网络程序员等专业网站开发人员使用各种网络程序开程序员等专业网站开发人员使用各种网络程序开发技术和网页设计技术，为企事业单位、公司或发技术和网页设计技术，为企事业单位、公司或个人在个人在InternetInternet上建立站点，包括提供域名注册上建立站点，包括提供域名注册和主机托管等

13、服务的总称。包括网站策划、网页和主机托管等服务的总称。包括网站策划、网页设计、网站功能设计、网站内容设计、网站推广、设计、网站功能设计、网站内容设计、网站推广、网站评估、网站运营、网站整体优化等。网站评估、网站运营、网站整体优化等。BACK NEXTPREV 网站是展示企业形象、加强客户服务，完善网络业务的新型网络平台，通过建设网站，可以达到以下目的：n 企业形象展示与提升企业形象展示与提升 n 网络化的业务、用户管理网络化的业务、用户管理 n 开展电子商务开展电子商务 BACK NEXTPREV 1.2网站建设技术介绍 n“静态静态”网页：指网页的内容已预先设计好，并网页：指网页的内容已预先

14、设计好，并存放在存放在WEBWEB服务器上，当用户通过浏览器及互联网服务器上，当用户通过浏览器及互联网的的HTTPHTTP协议向协议向WEBWEB服务器提出请求时，服务器仅仅服务器提出请求时，服务器仅仅是将原已设计好的静态是将原已设计好的静态HTMLHTML文档传送给用户浏览文档传送给用户浏览器。器。n“动态动态”网页：指网页能够根据用户的要求和选网页：指网页能够根据用户的要求和选择，进行不同的处理，并根据处理的结果，自动择，进行不同的处理，并根据处理的结果，自动生成新的页面，不再需要设计者手动更新生成新的页面，不再需要设计者手动更新HTMLHTML文文档。档。BACK NEXTPREV 1.

15、2.1 静态网页设计技术n HTML（HyperText Markup Language）n XML、XSL（extensible Markup Language、extensible Stype Language）n CSS(Cascading Stype Sheets)n DHTML（Dynamic HTML）n XHTML（extensible HTML）n JavaScript BACK NEXTPREV 1.2.2 动态网页设计技术n ASPASP（Active Server Pages），即动态服务器页），即动态服务器页 n PHPPHP（Hypertext Preprocesso

16、r），即超文本预处），即超文本预处理器理器 n JSPJSP（Java Server Pages），是基于），是基于Java Servlet以及整个以及整个Java体系的体系的Web开发技术。开发技术。BACK NEXTPREV 1.2.3 网页设计软件n 网页编辑工具网页编辑工具Dreamweavern 图形图像处理软件图形图像处理软件Photoshop n 图形制作工具图形制作工具Fireworks n 动画制作工具动画制作工具FlashBACK NEXTPREV 1.3 建站准备架设Web服务器n IIS的安装的安装 n Web站点的配置与管理站点的配置与管理BACK NEXTPREV

17、实验目的与要求 熟悉ASP的运行环境，掌握Web服务器IIS的安装与配置。实验一实验一 IIS的安装与配置的安装与配置 BACK NEXTPREV 实验内容 1安装IIS。2在D盘根目录下创建站点文件夹mysite。3启动Internet服务管理器，配置修改默认Web站点，将该站点的根目录设置为D:mysite。4在Dreamweaver CS3中，编写一个简单的网页，并运行。实验一实验一 IIS的安装与配置的安装与配置 BACK NEXTPREV 网站建设技术第2章网站规划与设计 内容概述 教学目标 实验知识点讲解 本章主要介绍网站规划与设计的基本知识，解析网站规划的方法和网站设计的一般过程

18、，以及如何编写网站策划书。BACK NEXTPREV 了解网站规划的主要任务、特点与原则；了解如何进行网站类型的定位、网站目录结构组成及网站栏目规划方法；了解网站设计的目标、原则与特点；了解和掌握网站设计的一般过程。BACK NEXTPREV 2.1网站规划2.1.1主要任务、特点与原则一、一、网站规划的主要任务网站规划的主要任务 n 制定网站的发展战略制定网站的发展战略 n 制定网站的总体方案制定网站的总体方案n 制定网站建设的资源分配计划制定网站建设的资源分配计划BACK NEXTPREV 二、二、网站规划的主要特点网站规划的主要特点n 网站规划工作是面向长远的、未来的、全局性和关键性的问

19、题，因此网站规划工作是面向长远的、未来的、全局性和关键性的问题，因此它具有较强的不确定性。它具有较强的不确定性。n 网站规划是为整个系统建设确定目标、战略、系统总体结构方案和资网站规划是为整个系统建设确定目标、战略、系统总体结构方案和资源计划，因而整个过程是一个管理决策过程。源计划，因而整个过程是一个管理决策过程。n 网站规划人员对管理与技术环境的理解、见解程度以及开创精神与务网站规划人员对管理与技术环境的理解、见解程度以及开创精神与务实态度是网站规划工作的决定因素。实态度是网站规划工作的决定因素。n 网站规划工作的结果是要明确回答规划工作内容中提出的问题，描绘网站规划工作的结果是要明确回答规

20、划工作内容中提出的问题，描绘出网站的总体概貌和发展进程，宜粗不宜细。出网站的总体概貌和发展进程，宜粗不宜细。BACK NEXTPREV 三、网站规划的基本原则三、网站规划的基本原则n 明确建立网站的目标和用户需求明确建立网站的目标和用户需求 n 总体设计方案主题鲜明总体设计方案主题鲜明n 快速的访问快速的访问 n 网站的内容应及时更新网站的内容应及时更新 n“三次单击三次单击”原则原则 n 网站的信息交互能力网站的信息交互能力 n 多平台策略多平台策略 BACK NEXTPREV 2.1.2网站类型定位一、一、网站分类网站分类n 门户型网站门户型网站 n 专业型网站专业型网站 BACK NEX

21、TPREV 2.1.2网站类型定位二、常见的专业型网站二、常见的专业型网站 n 电子商务网站电子商务网站 n 企业网站企业网站 n 政府网站政府网站 n 行业信息网站行业信息网站 n 新闻媒体网站新闻媒体网站 n 提供免费服务和资源的网站提供免费服务和资源的网站 n 学校和科研机构网站学校和科研机构网站 n 论坛性网站论坛性网站 n 个人网站个人网站 BACK NEXTPREV 2.1.3网站目录结构n 不要将所有文件都存放在根目录下不要将所有文件都存放在根目录下 n 按栏目内容建立子目录按栏目内容建立子目录 n 在每个主目录下都建立独立的在每个主目录下都建立独立的Images目录目录 n 目

22、录的层次不要太深目录的层次不要太深 n 尽量不要使用中文目录名尽量不要使用中文目录名 n 不要使用过长的目录名不要使用过长的目录名 BACK NEXTPREV 2.1.4 网站栏目规划 n 要紧扣主题要紧扣主题 n 指引迷途，清晰导航指引迷途，清晰导航 n 设立最近更新或网站指南栏目设立最近更新或网站指南栏目 n 设立下载或常见问题回答栏目设立下载或常见问题回答栏目BACK NEXTPREV 2.2网站设计2.2.1网站设计的原则 n 明确建立网站的目标和用户需求明确建立网站的目标和用户需求 n 总体设计方案主题鲜明总体设计方案主题鲜明 n 网站的版式设计网站的版式设计 n 网页设计中的色彩搭

23、配网页设计中的色彩搭配 n 网页形式与内容相统一网页形式与内容相统一 n 内容更新与沟通内容更新与沟通 n 合理运用新技术合理运用新技术 BACK NEXTPREV 2.2.2网站设计的过程n 网站网站CI的设计的设计 n 页面版式设计页面版式设计 n 辅助元素设计辅助元素设计 BACK NEXTPREV 2.3网站策划n 网站策划基本知识网站策划基本知识 n 网站策划书的编写网站策划书的编写 n 综合案例综合案例网上购物网站策划书网上购物网站策划书 BACK NEXTPREV 实验目的与要求掌握网站策划书的编写方法。实验二实验二 编写网上书店网站策划书编写网上书店网站策划书 BACK NEX

24、TPREV 实验内容 请以“卓越亚马逊”网上书店网站为例写一份网站策划书。BACK NEXTPREV 实验二实验二 编写网上书店网站策划书编写网上书店网站策划书 网站建设技术第3章 使用HTML制作网页内容概述 教学目标 知识点讲解实验 本章通过具体案例，详细地介绍了HTML语言中常用的标记及其属性，并解析如何使用HTML语言编制网页。BACK NEXTPREV 掌握HTML页面基本结构和HTML标记使用方法。掌握文本控制、图像显示的方法。掌握使用超级链接、创建表格的方法。掌握多媒体元素及表单对象的使用。BACK NEXTPREV 3.1HTML基础3.1.1 使用HTML标记设计网页利用利用

25、HTML基本标记，创建红色背景、蓝色文字的网页。基本标记，创建红色背景、蓝色文字的网页。BACK NEXTPREV 3.1.2 知识解析一、超文本标记语言一、超文本标记语言HTML HTML（Hyper Text Mark-up Language）即超文本标记语言，是即超文本标记语言，是WWW的描述语言。它是的描述语言。它是一个包含标记的文本文件，包含了所有将显示在一个包含标记的文本文件，包含了所有将显示在网页上的文字信息，其中也包括对浏览器的一些网页上的文字信息，其中也包括对浏览器的一些指示，如文字应放置在何处，显示模式是什么样指示，如文字应放置在何处，显示模式是什么样的等等。的等等。HTM

26、L文件通过标记符文件通过标记符(tag)来实现这一来实现这一功能。功能。BACK NEXTPREV 二、二、HTML的标记符号的标记符号n 一般情况下，一般情况下，HTML标记符号使用下列格式：标记符号使用下列格式：文件内容文件内容n 标记内可以包含一些属性，标记属性可由用户设置，否则将采用默认标记内可以包含一些属性，标记属性可由用户设置，否则将采用默认的设置值。属性名称出现在标记符号的后面，并且以空格进行分隔，的设置值。属性名称出现在标记符号的后面，并且以空格进行分隔，如果标记具有多个标记属性，那么不同的属性名称之间将以空格隔开。如果标记具有多个标记属性，那么不同的属性名称之间将以空格隔开。

27、其语法是：其语法是：BACK NEXTPREV 三、三、HTML文档的基本结构文档的基本结构 HTML文件通常是由文件通常是由3部分组成：起始标记、文档头和文件主体，其中文部分组成：起始标记、文档头和文件主体，其中文件主体是件主体是HTML文件的主要部分与核心内容，它包括文件所有的实际文件的主要部分与核心内容，它包括文件所有的实际内容与绝大多数的标记符号。内容与绝大多数的标记符号。n 添加起始标记添加起始标记n 设置文档头设置文档头 n 网页的主体结构网页的主体结构 n HTML中的注释中的注释 BACK NEXTPREV 四、四、HTML标记语言的特点标记语言的特点 n HTML标记均用标记

28、均用括起来，大多数的标记成对使用，标记的开始符和结束符括起来，大多数的标记成对使用，标记的开始符和结束符相同，结束符前多一个斜杠，其用法格式为：相同，结束符前多一个斜杠，其用法格式为：文本文本n 标记符还拥有属性，利用这些属性可对修饰的部分进行更加详细地控制，其标记符还拥有属性，利用这些属性可对修饰的部分进行更加详细地控制，其用法格式为：用法格式为：文本文本n 各属性项之间用空格分隔，属性值可用单引号或双引号引起来，也可以不用各属性项之间用空格分隔，属性值可用单引号或双引号引起来，也可以不用引号直接表达。引号直接表达。n HTML标记可嵌套使用，从不同的角度对文本格式进行控制。嵌套使用时注标记

29、可嵌套使用，从不同的角度对文本格式进行控制。嵌套使用时注意不要发生交叉嵌套。标记符不区分大小写，各标记的书写表达没有先后顺意不要发生交叉嵌套。标记符不区分大小写，各标记的书写表达没有先后顺序要求。序要求。n 有些标记是单独使用的，没有对应结束标记。如换行标记有些标记是单独使用的，没有对应结束标记。如换行标记和水平线标记和水平线标记等。等。BACK NEXTPREV 3.2 创建基本网页 3.2.1文本编辑本例将使用文本控制格式实现如图所示页面。n 段落标记（段落标记（）与换行标记（）与换行标记（）n 标题标记（标题标记（Hn）n 设置文本格式设置文本格式 BACK NEXTPREV 3.2.2

30、使用图像本案例将实现在网页中插入图像，页面效果如图所示。n 在网页中插入图像在网页中插入图像 n 设置图像属性设置图像属性BACK NEXTPREV 3.2.3建立超链接 本案例将实现对左图所示页面中的文本“怪石”建立超链接，点击超链接，将打开右图所示的页面。n 创建超链接创建超链接 n 创建锚点链接创建锚点链接 n 创建邮件链接创建邮件链接 BACK NEXTPREV 3.2.4 使用表格本案例利用表格实现下图所示页面中的图像和文本的控制。n 表格标记表格标记 n 表格标记的常用属性表格标记的常用属性 n 表格行的标记及属性表格行的标记及属性 n 表格单元格标记及属性表格单元格标记及属性 B

31、ACK NEXTPREV 3.2.5 使用多媒体 本案例要求使用多媒体元素及相关素材，制作一多媒体网站首页，其页面运行效果如图所示。n 常用多媒体组件常用多媒体组件 n 添加视频添加视频 n 添加音乐添加音乐 BACK NEXTPREV 3.3综合案例 制作网上购物网站首页 本案例设计制作“手机电子商城”网上购物网站首页。BACK NEXTPREV 实验目的与要求 熟悉HTML标记，掌握页面布局的基本方法。实验内容 设计制作一个企业网站首页。实验三实验三 使用使用HTML制作企业网站首页制作企业网站首页 BACK NEXTPREV 网站建设技术第4章 使用CSS布局网页 内容概述 教学目标 实

32、验知识点讲解 本章通过具体案例，详细地介绍了CSS语言的基础知识。内容主要包括添加样式表的方法、CSS选择器的设置方法、盒子模型、文字、颜色和背景的设置方法以及多种页面布局的设置方法等。BACK NEXTPREV 掌握添加CSS样式的方法；掌握设置CSS选择器的方法；掌握盒子模型的设置方法；掌握盒子的浮动和定位的设置方法；掌握文字、颜色和背景的设置方法；掌握页面布局的方法。BACK NEXTPREV 4.1使用CSS样式设计页面使用CSS样式设计“网页设计教学”页面，页面效果如图所示。BACK NEXTPREV 4.2 知识解析4.2.1 CSS基础一、一、Web标准标准二、二、XHTML三、

33、三、DOCTYPE声明声明四、四、CSS简介简介 BACK NEXTPREV 五、添加五、添加CSS的方法的方法n 嵌入样式表嵌入样式表n 内嵌样式表内嵌样式表 n 链接外部链接外部CSS样式表（外部样式）样式表（外部样式）六、六、CSS选择器选择器 n 选择器类型选择器类型n CSS的继承性的继承性 n 注释注释 BACK NEXTPREV 七、七、div和和span 网页元素可以分为行内元素和块级元素两种添加起始标记。示例网页元素可以分为行内元素和块级元素两种添加起始标记。示例如下图所示。如下图所示。BACK NEXTPREV 4.2.2 盒子模型 盒子模型(Box Model)是CSS中

34、一个很重要的概念。它是用来描述一个元素是如何组成的。BACK NEXTPREV 浮动属性值 4.2.3 盒子的浮动与定位 盒子的浮动属性floatfloat 属性可以实现复杂页面的CSS布局。none：元素在水平方向会自动伸展。left:元素会向其父元素的左侧靠紧。right:元素就会向其父元素的右侧靠紧。BACK NEXTPREV 盒子的定位属性position position 属性可以实现页面元素的定位。它规定了四种定位方式，分别对应于position属性的值。1static:标准流布局2absolute:绝对定位3 relative:相对定位4fixed:固定定位BACK NEXTPR

35、EV 4.2.4 文字、颜色和背景一、文字一、文字 在CSS 中常见的字体(font)属性有以下几种：n font-family n font-size n font-weight n font-style n font-variant BACK NEXTPREV 二、颜色二、颜色color(颜色)属性值的设置方式有三种：n 十六进制值 n RGB 码 n 颜色名称 三、背景三、背景在在CSS 中常见的背景中常见的背景(background)属性有以下几种：属性有以下几种：n background-color n background d-image n background-repeat n

36、 background-attachment n background-position BACK NEXTPREV 冻结布局css布局相对布局凝结物布局绝对布局流动布局BACK NEXTPREV 4.4 布局与排版页面需求 在素材页面中实现两栏布局 页面布局锁定 设置页面内容区显在浏览器的中间。CSS布局安庆美食网页面素材页面BACK NEXTPREV 页面分析 在素材页面中采用流动布局并结合盒子浮动的设置来实现两栏布局 采用冻结布局把页面布局锁定 采用凝结物布局来解决。这种设计锁定了页面中内容区的宽度，但它把内容区放到浏览器的中间CSS布局安庆美食网页面完成效果BACK NEXTPREV

37、4.4综合案例 制作网上购物网站首页使用Div+CSS，布局“手机电子商城”网上购物网站首页。BACK NEXTPREV 实验目的与要求 掌握运用CSS样式表进行页面布局的技术。实验内容 运用CSS样式表布局为企业网站设计一个首页。实验四实验四 布局企业网站首页布局企业网站首页 BACK NEXTPREV 网站建设技术第5章 使用JavaScript设计网页特效 内容概述 教学目标 实验知识点讲解 本章通过具体案例，详细地介绍了JavaScript脚本语言的基本语法，内容主要包括JavaScript内置对象、函数、浏览器对象的使用和事件处理的方法等。BACK NEXTPREV 熟悉JavaSc

38、ript的基本语法；使用JavaScript进行网页脚本编程。BACK NEXTPREV 5.1 使用JavaScript进行客户端编程 使用使用JavaScript编写用户注册页面编写用户注册页面Register.html的脚本，使页面能够的脚本，使页面能够实现用户注册信息检验、显示系统日期、随机产生验证码等功能。页面实现用户注册信息检验、显示系统日期、随机产生验证码等功能。页面效果如图所示。效果如图所示。BACK NEXTPREV 5.1.1 在网页中嵌入使用JavaScript 利用利用JavaScript在在HTML 网页中输出网页中输出“欢迎注册成为淘宝网会欢迎注册成为淘宝网会员！员

39、！”。页面效果如图所示。页面效果如图所示。嵌入的方法为：嵌入的方法为：BACK NEXTPREV 5.1.2 利用JavaScript在网页中显示日期 使用JavaScript编程，要求在当前网页中以“年月日 星期”格式，显示系统的当前的日期和星期数，若为星期六或星期日，则星期数用红色显示。n JavaScript的常量、变量与表达式设置文本格式的常量、变量与表达式设置文本格式n 结构控制语句结构控制语句 n 内置对象内置对象Date和和Array BACK NEXTPREV 5.1.3 利用JavaScript进行表单验证使用JavaScript编程，要求对表单中输入的信息进行校验。n 函数

40、的定义与调用函数的定义与调用 n 内置对象内置对象String和和Math n JavaScript浏览器对象浏览器对象 n JavaScript的事件处理的事件处理 BACK NEXTPREV 5.2 网页中常用的JavaScript效果n 改变页面背景色或背景图片改变页面背景色或背景图片n 设为首页和加入收藏设为首页和加入收藏 n 弹出窗口与关闭窗口弹出窗口与关闭窗口 n 文本框中显示提示语，当鼠标单击时文本消失文本框中显示提示语，当鼠标单击时文本消失 n 图片轮流显示图片轮流显示 n 可关闭的随页面滚动的广告可关闭的随页面滚动的广告 BACK NEXTPREV 实验目的与要求 熟悉Jav

41、aScript的编程方法，掌握JavaScript的语法和在网页中的编程应用。实验三实验三 使用使用HTML制作企业网站首页制作企业网站首页 BACK NEXTPREV 实验内容 试用JavaScript编写“用户注册”页面，要求能够实现用户注册信息检验、显示系统日期、随机产生验证码、状态栏跑马灯等功能。实验三实验三 使用使用HTML制作企业网站首页制作企业网站首页 BACK NEXTPREV 网站建设技术第6章 使用VBScript脚本编程内容概述 教学目标 知识点讲解实验 VBScript是ASP动态网页默认的编程语言，配合ASP内建对象和ADO对象，用户很快就能掌握访问数据库的ASP动态

42、网页开发技术。VBScript是学习ASP程序运行的基础。BACK NEXTPREV 掌握VBScript的基本语法；掌握VBScript在服务器端编程的方法。BACK NEXTPREV 6.1 VBScript基础6.1.1 在网页中嵌入VBScript脚本（一）在（一）在HTML网页中使用网页中使用VBScript 案例：在网页中输出文本案例：在网页中输出文本“用户用户【李明李明】,你好，欢迎使用！你好，欢迎使用！”其语法格式为：其语法格式为：vbscript代码代码BACK NEXTPREV 6.1.1 在网页中嵌入VBScript脚本（二）在（二）在ASP网页中使用网页中使用VBScr

43、ipt 案例：在案例：在ASP页面中输出当前的日期页面中输出当前的日期 语法格式为：语法格式为：或或在服务器端运行的代码在服务器端运行的代码BACK NEXTPREV 6.1.2 使用VBScript变量案例：利用变量设置用户登录欢迎语句。VBScript数据类型数据类型 n VBScript常量常量 n VBScript变量变量 BACK NEXTPREV 6.1.3 使用VBScript输入输出数据 案例：使用使用InputBox（）与（）与MsgBox（）函数，效果如图所示。（）函数，效果如图所示。n 输入函数输入函数InputBox（）（）n 输出函数输出函数MsgBox（）（）BAC

44、K NEXTPREV 6.1.4 使用VBScript内置函数 案例：使用使用date()、time()、weekday()函数，效果如图所示。函数，效果如图所示。VBScript提供了若干个用于获取系统日期与时间的函数，如表所示。提供了若干个用于获取系统日期与时间的函数，如表所示。BACK NEXTPREV 6.1.5 VBScript流程控制 一、条件语句一、条件语句（一）选择分支语句（一）选择分支语句案例：实现根据考试成绩分数确定等级级别，效果如图所示。实现根据考试成绩分数确定等级级别，效果如图所示。其语法格式为：其语法格式为：IfThen 语句语句1ElseifThen语句语句2Els

45、e语句语句nEnd If BACK NEXTPREV 6.1.5 VBScript流程控制（二）多路选择分支语句（二）多路选择分支语句案例：实现登录页面的分时问候，效果如图所示。实现登录页面的分时问候，效果如图所示。当当If条件为条件为True时，即当符合时，即当符合If条件时，执行条件时，执行If至至End之间的脚本。其语之间的脚本。其语法格式为：法格式为：IfThen语句语句1Else语句语句2End If BACK NEXTPREV 6.1.5 VBScript流程控制（三）（三）SelectCase语句语句其语法格式为：其语法格式为：Select CaseCase语句语句1Case语句

46、语句2Case Else语句语句nEnd Select BACK NEXTPREV 二、循环语句二、循环语句 循环语句结构用于重复执行一组指定的语句。在VBScript中常使用的循环语句有以下几种：n DoLoop 当（或直到）条件为True时循环。n WhileWend 当条件为True时循环。n ForNext 指定循环次数，使用计算器重复运行语句。BACK NEXTPREV （一）（一）DoLoop循环循环1当型循环结构当型循环结构案例：利用DoLoop语句实现从1到100的累加和。效果如图所示。n 两者区别：当第一次执行循环语句条件不成立时，“格式1”不执行循环体，而“格式2”要执行一

47、次循环体。n 当型循环语句，当条件为真（True）时执行循环体，条件为假（False）时终止循环。BACK NEXTPREV （一）（一）DoLoop循环循环2直到型循环结构直到型循环结构注：在直到型循环结构中，条件为假时执行循环体，条件为真时终止循环。BACK NEXTPREV （二）（二）WhileWend循环循环 2直到型循环结构直到型循环结构用WhileWend语句判别鸡兔同笼问题，效果如图所示。WhileWend语句结构与DoLoop 语句结构类似，是为那些熟悉其语法的用户提供的。在程序运行过程中，每当遇到While语句时，首先判断条件是否成立，如果成立就执行循环，不成立则退出循环。

48、其语法格式为：While 语句WendBACK NEXTPREV （三）（三）ForNext循环循环 2直到型循环结构直到型循环结构利用ForNext语句实现从1到100的偶数累加和，效果如图所示。WhileWend语句结构与DoLoop 语句结构类似，是为那些熟悉其语法的用户提供的。在程序运行过程中，每当遇到While语句时，首先判断条件是否成立，如果成立就执行循环，不成立则退出循环。其语法格式为：While 语句WendBACK NEXTPREV 6.1.6 使用VBScript过程 一、一、Sub 过程过程 案例：利用利用Sub过程比较输入两个数中的较大者，过程比较输入两个数中的较大者，

49、效果如图所示。效果如图所示。Sub过程是包含在过程是包含在Sub和和End Sub语句之间的一组语句之间的一组VBScript语句，语句，执行所规定的操作但不返回值。执行所规定的操作但不返回值。Sub过程的定义格式为：过程的定义格式为：定义过程：定义过程：Sub()语句语句End Sub调用过程：调用过程：Call(实际参数实际参数)BACK NEXTPREV 6.1.6 使用VBScript过程 二、二、Function过程过程 Function过程又称为函数过程，是包含在过程又称为函数过程，是包含在Function和和End Function语句之间的一组语句之间的一组VBScript语句

50、。语句。Function过程与过程与Sub过程过程类似，不同的是类似，不同的是Function过程通常会返回一个值，而过程通常会返回一个值，而Sub过程不返回过程不返回值。值。BACK NEXTPREV 6.2 VBScript对象与事件 一、一、DOM事件事件 DOM（Document Object Model，文档对象模型）技术是以对，文档对象模型）技术是以对象的形式来表示象的形式来表示HTML文档的各种元素以及有关的浏览器信息，它使文档的各种元素以及有关的浏览器信息，它使脚本代码能够访问和控制脚本代码能够访问和控制Web页面中的各种内容，并实现与用户操作页面中的各种内容，并实现与用户操作