《数据库原理及程序设计》实验课程教学大纲doc.docx

1、数据库原理及程序设计实验课程教学大纲doc电子商务技术基础实 验 指 导 书适用专业：电子商务适用班级：160509、160510适用学期：2017-2018学年第一学期指导教师：刘泰然2017年9月实验一 HTML基础实践1、实验项目名称、学时HTML基础实践，2学时2、实验目的（1）学习创建HTML文件方法；（2）掌握HTML文档结构及语法规则。3、实验要求实验前认真阅读实验指导书，掌握实验原理，熟悉实验任务。实验时注意观察，认真记录。实验结束后按规定整理试验用计算机设备。独立完成实验报告。4、实验原理HTML是制作网页的基础语言，是初学者必学的内容。虽然现在有许多所见即所得的网页制作工具

2、，但是这些工具生成的代码仍然是以HTML为基础的，学习HTML代码对设计网页至关重要。每个网页都有其基本的结构，需要掌握包括HTML文档结构、标签的格式等。5、实验所用仪器实验中心学生用计算机。6、实验步骤和方法1）创建HTML文件（1）打开记事本。（2）创建新文件，并按HTML语言规则编辑。（3）保存网页。（4）双击创建的HTML文件启动浏览器，查看网页的显示结果。2）制作什锦果园网的版权信息。页面中包括版权符号、空格，页面最终显示效果如图1-1所示。图1-1 什锦果园网的版权信息3）制作什锦果园网页面的摘要信息要求：网页标题为“什锦果园网通向健康的桥梁”；搜索关键字为“什锦果园，供求信息，

3、项目合作，生产开发，企业加盟”；内容描述为“什锦果园多年从事中外水果的商机发布与产品推广，始终奉行质量第一、诚信为本、开拓进取、客户至上的经营理念为宗旨，热情欢迎新老客户与我们建立长久的业务”。4）制作网络鞋城的版权信息。要求页面最终显示效果如图1-2所示。图1-2 网络鞋城的版权信息7、实验注意事项实验用计算机带有还原单元，每次重新启动，系统盘内容都会还原到初始状态。8、实验预习要求上机实验前，应仔细阅读教材、课堂笔记。上机实验时应带好教材、教学参考书及听课笔记。9、实验程序要求该实验最终程序存盘备份，以备以后成绩判定。实验二 HTML块级标签的使用1、实验项目名称、学时HTML块级标签的使

4、用，2学时2、实验目的（1）掌握基本块级标签的使用方法；（2）掌握布局块级标签的使用方法。3、实验要求实验前认真阅读实验指导书，掌握实验原理，熟悉实验任务。实验时注意观察，认真记录。实验结束后按规定整理试验用计算机设备。独立完成实验报告。4、实验原理HTML标签可以分为块级标签和行级标签，从页面布局的角度来看，设计者可以使用块级标签完成网页元素的组织与布局，而块级标签又可以细分为标题标签、段落标签和水平线标签。5、实验所用仪器实验中心学生用计算机。6、实验步骤和方法练习通过标签组织网页内容，制作什锦果园关于页面，页面在浏览器中显示的效果如图2-1所示。图2-1 什锦果园关于页面显示效果图7、实

5、验注意事项实验用计算机带有还原单元，每次重新启动，系统盘内容都会还原到初始状态。8、实验预习要求上机实验前，应仔细阅读教材、课堂笔记。上机实验时应带好教材、教学参考书及听课笔记。9、实验程序要求该实验最终程序存盘备份，以备以后成绩判定。实验三 HTML行级标签的使用1、实验项目名称、学时HTML行级标签的使用，2学时2、实验目的（1）掌握超链接的使用方法；（2）掌握网页图像的显示方式；（3）掌握网页表单元素的使用方法；（4）掌握换行标签使用。3、实验要求实验前认真阅读实验指导书，掌握实验原理，熟悉实验任务。实验时注意观察，认真记录。实验结束后按规定整理试验用计算机设备。独立完成实验报告。4、实

6、验原理行级标签也成为行内标签、内联标签。当设计者使用块级标签完成网页元素的组织与布局后，要为其中的每个小区块添加内容，就需要用到行级标签。5、实验所用仪器实验中心学生用计算机。6、实验步骤和方法1）通过表格布局制作什锦果园联系信息表单，表格布局示意图如图3-1所示。图3-1 布局示意图2）网页最终显示效果如图3-2所示。图3-2 网页显示效果图7、实验注意事项实验用计算机带有还原单元，每次重新启动，系统盘内容都会还原到初始状态。8、实验预习要求上机实验前，应仔细阅读教材、课堂笔记。上机实验时应带好教材、教学参考书及听课笔记。9、实验程序要求该实验最终程序存盘备份，以备以后成绩判定。实验四 CS

7、S基础实践1、实验项目名称、学时CSS基础实践，2学时2、实验目的（1）掌握CSS的语法规范；（2）掌握样式表的语法规则。3、实验要求实验前认真阅读实验指导书，掌握实验原理，熟悉实验任务。实验时注意观察，认真记录。实验结束后按规定整理试验用计算机设备。独立完成实验报告。4、实验原理CSS（Cascading Style Sheets，层叠样式表单）简称为样式表，是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。样式就是格式，在网页中，像文字的大小、颜色以及图片位置等，都是设置显示内容的样式。层叠是指当在HTML文档中引用多个定义样式的样式文件（CSS文件）时，若多个样式

8、文件间所定义的样式发生冲突，将依据层次顺序处理。5、实验所用仪器实验中心学生用计算机。6、实验步骤和方法1）前期准备（1）栏目目录结构在栏目文件夹下创建文件夹images和css，分别用来存放图像素材和外部样式表文件。（2）页面素材将页面所需要使用的图像素材存放在文件夹images下。（3）外部样式表在文件夹css下新建一个名为style.css的样式表文件。2）制作页面图4-1 什锦果园业界资讯页面效果图7、实验注意事项实验用计算机带有还原单元，每次重新启动，系统盘内容都会还原到初始状态。8、实验预习要求上机实验前，应仔细阅读教材、课堂笔记。上机实验时应带好教材、教学参考书及听课笔记。9、实

9、验程序要求该实验最终程序存盘备份，以备以后成绩判定。实验五 Div+CSS布局技术1、实验项目名称、学时Div+CSS布局技术，2学时2、实验目的（1）理解Div布局理念；（2）掌握CSS盒模型的原理；（3）学会Div+CSS布局技术的灵活运用。3、实验要求实验前认真阅读实验指导书，掌握实验原理，熟悉实验任务。实验时注意观察，认真记录。实验结束后按规定整理试验用计算机设备。独立完成实验报告。4、实验原理传统的HTML标签中，既有控制结构的标签（如标签和标签），又有控制表现的标签（如标签和标签），还有本意用于结构后来被滥用于控制表现的标签（如标签和标签）。页面的整个结构标签与表现标签混合在一起。

10、相对于其他HTML继承而来的元素，Div标签的特性就是它是一种块级元素，更容易被CSS代码控制样式。5、实验所用仪器实验中心学生用计算机。6、实验步骤和方法页面布局规划：1）什锦果园水果沙拉局部内容的页面效果入图5-1所示。图5-1 什锦果园水果沙拉局部内容效果图2）什锦果园水果沙拉页面局部布局示意图如图5-2所示。图5-1 页面局部布局示意图页面的制作过程：1）前期准备（1）栏目目录结构在栏目文件夹下创建文件夹images和css，分别用来存放图像素材和外部样式表文件。（2）页面素材将页面所需要使用的图像素材存放在文件夹images下。（3）外部样式表在文件夹css下新建一个名为style.

11、css的样式表文件。2）制作页面7、实验注意事项实验用计算机带有还原单元，每次重新启动，系统盘内容都会还原到初始状态。8、实验预习要求上机实验前，应仔细阅读教材、课堂笔记。上机实验时应带好教材、教学参考书及听课笔记。9、实验程序要求该实验最终程序存盘备份，以备以后成绩判定。实验六 制作博客页面1、实验项目名称、学时制作博客页面，2学时2、实验目的学会使用CSS代码修饰常见的网页元素。3、实验要求实验前认真阅读实验指导书，掌握实验原理，熟悉实验任务。实验时注意观察，认真记录。实验结束后按规定整理试验用计算机设备。独立完成实验报告。4、实验原理了解了CSS设计中的4个核心基础盒模型、标准流、浮动和

12、定位，就可以以此为基础，使用CSS来进行网页中文本、图像、链接、导航等元素的样式设置。5、实验所用仪器实验中心学生用计算机。6、实验步骤和方法1）前期准备（1）栏目目录结构在栏目文件夹下创建文件夹images和css，分别用来存放图像素材和外部样式表文件。（2）页面素材将页面所需要使用的图像素材存放在文件夹images下。（3）外部样式表在文件夹css下新建一个名为style.css的样式表文件。2）制作页面（1）制作页面的CSS样式（2）制作页面的网页结构代码什锦果园博客页面的布局示意图如图6-1所示，制作完成的页面效果如图6-2所示。图6-1 什锦果园博客页面布局示意图图6-2 什锦果园博

13、客页面效果7、实验注意事项实验用计算机带有还原单元，每次重新启动，系统盘内容都会还原到初始状态。8、实验预习要求上机实验前，应仔细阅读教材、课堂笔记。上机实验时应带好教材、教学参考书及听课笔记。9、实验程序要求该实验最终程序存盘备份，以备以后成绩判定。实验七 利用CSS制作关于页面1、实验项目名称、学时利用CSS制作关于页面，2学时2、实验目的（1）练习使用CSS设置链接；（2）掌握导航菜单的基本设置方法。3、实验要求实验前认真阅读实验指导书，掌握实验原理，熟悉实验任务。实验时注意观察，认真记录。实验结束后按规定整理试验用计算机设备。独立完成实验报告。4、实验原理在一个网站中，所有网页都会通过

14、超链接互相链接在一起，用户通过超链接在各个页面之间导航，这样才会形成一个有机的网站。在设计网站时，链接与导航都是页面中至关重要的组成部分之一。一个包含美观链接的页面能给浏览者带来新鲜的感觉，而要实现链接的多样化离不开CSS样式的辅助。普通的Web站点由一组页面组成，用户通过超链接在各个页面之间导航，用CSS制作导航菜单可以提高用户体验，而其制作方法可以分为普通的超链接导航和使用列表标签构建的导航菜单。5、实验所用仪器实验中心学生用计算机。6、实验步骤和方法1）前期准备（1）栏目目录结构在栏目文件夹下创建文件夹images和css，分别用来存放图像素材和外部样式表文件。（2）页面素材将页面所需要

15、使用的图像素材存放在文件夹images下。（3）外部样式表在文件夹css下新建一个名为style.css的样式表文件。2）制作页面（1）页面整体的制作页面整体body、整体容器main、h1-h4标题、段落、超链接风格、浮动和清除浮动的CSS代码定义如下：body /*设置页面整体样式*/ margin:0px; padding:0px; color:#333; /*设置默认文字颜色为深灰色*/ font-family: Tahoma, Geneva, sans-serif; font-size:13px; /*设置文字大小为13px*/ line-height:1.5em; /*设置行高是字

16、符的1.5倍*/ background-color: #ede4bb; /*设置背景色为土黄色*/ background-image: url(./images/body.jpg); background-position: top; /*背景图像顶端对齐*/ background-repeat: repeat-x; /*背景图像水平重复*/#wrapper /*整个页面容器wrapper的样式*/ position: relative; width: 980px; padding: 0 5px; /*上、右、下、左的内边距依次为0px,5px, 0px,5px*/ margin: 0 aut

17、o; /*容器自动居中*/#wrapper .fruit position: absolute; top: 0px; left: -30px; width: 145px; height: 119px; background: url(./images/fruit.png) no-repeat;a, a:link, a:visited /*设置超链接及访问过链接的样式*/ color: #7c0d0b; /*设置链接颜色*/a:hover /*设置鼠标悬停链接的样式*/ color: #996600; /*设置悬停链接颜色*/ text-decoration:none; /*链接无修饰*/p /

18、*设置段落样式*/ margin: 0px; /*外边距为0px*/ padding: 0 0 10px 0; /*上、右、下、左的内边距依次为0px,0px,10px,0px*/img /*设置图片样式*/ border: none; /*图片无边框*/h1, h3 /*设置h1标题和h3标题共同的样式*/ font-weight: normal; /*字体正常粗细*/h1 /*设置h1标题独立的样式*/ font-size: 40px; /*设置文字大小为40px*/ color: #000; /*设置文字颜色为黑色*/ margin: 0 0 30px 0; /*上、右、下、左的外边距依

19、次为0px,0px,30px,0px*/ padding: 5px 0; /*上、右、下、左的内边距依次为5px,0px,5px,0px*/h3 /*设置h3标题独立的样式*/ font-size: 21px; /*设置文字大小为21px*/ color: #000; /*设置文字颜色为黑色*/ margin: 0 0 20px 0px; /*上、右、下、左的外边距依次为0px,0px,20px,0px*/ padding: 0; /*内边距为0px*/.cleaner clear: both; /*清除所有浮动*/.cleaner_h30 clear: both; /*清除所有浮动*/ he

20、ight: 30px; /*清除浮动后区块的高度为30px*/.cleaner_h40 clear: both; /*清除所有浮动*/ height: 40px; /*清除浮动后区块的高度为40px*/.float_l float: left; /*向左浮动*/.float_r float: right; /*向右浮动*/（2）页面顶部的制作页面顶部的内容被放置在名为header的Div容器中，主要用来显示页面logo和导航菜单，如图7-1所示。图7-1 页面顶部显示效果（3）页面中部的制作 页面中部的内容被放置在名为content的Div 容器中，包括左侧区域和右侧区域。左侧区域包括水果分类

21、纵向菜单；右侧区域包括公司简介、经营特色和发展规划，如图7-2所示。图7-2 页面中部显示效果（4）页面底部的制作 页面底部的内容被放置在名为footer_wrapper的Div容器中，用来显示版权信息，如图7-3所示。图7-3 页面底部显示效果（5）制作页面的网页结构代码7、实验注意事项实验用计算机带有还原单元，每次重新启动，系统盘内容都会还原到初始状态。8、实验预习要求上机实验前，应仔细阅读教材、课堂笔记。上机实验时应带好教材、教学参考书及听课笔记。9、实验程序要求该实验最终程序存盘备份，以备以后成绩判定。实验八 制作二级纵向列表模式的导航菜单1、实验项目名称、学时制作二级纵向列表模式的导

22、航菜单，2学时2、实验目的掌握利用JavaScript进行网页特效的基本设置。3、实验要求实验前认真阅读实验指导书，掌握实验原理，熟悉实验任务。实验时注意观察，认真记录。实验结束后按规定整理试验用计算机设备。独立完成实验报告。4、实验原理JavaScript是一种行为脚本语言，它是介于Java与HTML之间、基于对象事件驱动的编程语言，它是制作网页行为的标准之一。在Web 标准中，使用HTML设计网页的结构，使用CSS设计网页的表现，使用JavaScript制作网页的特效。用JavaScript可以创建出运行在多平台和浏览器上的交互行为和效果。5、实验所用仪器实验中心学生用计算机。6、实验步骤

23、和方法1）建立网页结构。首先建立一个包含二级导航菜单选项的嵌套无序列表。其中，一级导航菜单包含4个菜单项，二级导航菜单包含用于实现导航的文字链接。菜单的初始效果如图8-1所示。图8-1 菜单的初始效果2）设置菜单的CSS样式。在设置网页菜单时，一般二级导航是被隐藏的，只有当鼠标经过一级导航时才会触发二级导航的显示，而当鼠标移开后，二级导航又自动隐藏。在这个设计思路的基础上，接着设计菜单的宽度、字体，以及列表和列表选项的类型和边框样式。3）添加实现二级导航菜单的JavaScript脚本。页面预览后的效果如图8-2所示。图8-2 页面预览效果图7、实验注意事项实验用计算机带有还原单元，每次重新启动，系统盘内容都会还原到初始状态。8、实验预习要求上机实验前，应仔细阅读教材、课堂笔记。上机实验时应带好教材、教学参考书及听课笔记。9、实验程序要求该实验最终程序存盘备份，以备以后成绩判定。