1、电子商务技术基础实 验 指 导 书适用专业： 电子商务适用班级： 170509、170510适用学期： 2018-2019 学年第一学期指导教师： 刘泰然2018 年 9 月目 录实验一 HTML 基础实践 .1实验二 HTML 块级标签的使用 .3实验三 HTML 行级标签的使用 .5实验四 CSS 基础实践 .7实验五 Div+CSS 布局技术 .9实验六 制作博客页面 .11实验七 利用 CSS 制作关于页面 13实验八 制作二级纵向列表模式的导航菜单 .171实验一 HTML 基础实践1、实验项目名称、学时HTML 基础实践，2 学时2、实验目的（1）学习创建 HTML 文件方法；（2
2、）掌握 HTML 文档结构及语法规则。3、实验要求实验前认真阅读实验指导书，掌握实验原理，熟悉实验任务。实验时注意观察，认真记录。实验结束后按规定整理试验用计算机设备。独立完成实验报告。4、实验原理HTML 是制作网页的基础语言，是初学者必学的内容。虽然现在有许多所见即所得的网页制作工具，但是这些工具生成的代码仍然是以 HTML 为基础的，学习 HTML 代码对设计网页至关重要。每个网页都有其基本的结构，需要掌握包括 HTML 文档结构、标签的格式等。5、实验所用仪器实验中心学生用计算机。6、实验步骤和方法1）创建 HTML 文件（1）打开记事本。（2）创建新文件，并按 HTML 语言规则编辑
3、。（3）保存网页。（4）双击创建的 HTML 文件启动浏览器，查看网页的显示结果。2）制作什锦果园网的版权信息。页面中包括版权符号、空格，页面最终显示效果如图 1-1 所示。图 1-1 什锦果园网的版权信息3）制作什锦果园网页面的摘要信息要求：网页标题为“什锦果园网通向健康的桥梁” ；搜索关键字为“什锦果园，供求信息，项目合作，生产开发，企业加盟” ；内容描述为“什锦果园多年从事中外水果的商机发布与产品推广，始终奉行质量第一、诚信为本、开拓进取、客户至上的经营理念为宗旨，热情欢迎新老客户与我们建立长久的业务” 。24）制作网络鞋城的版权信息。要求页面最终显示效果如图 1-2 所示。图 1-2
4、网络鞋城的版权信息7、实验注意事项实验用计算机带有还原单元，每次重新启动，系统盘内容都会还原到初始状态。8、实验预习要求上机实验前，应仔细阅读教材、课堂笔记。上机实验时应带好教材、教学参考书及听课笔记。9、实验程序要求该实验最终程序存盘备份，以备以后成绩判定。3实验二 HTML 块级标签的使用1、实验项目名称、学时HTML 块级标签的使用，2 学时2、实验目的（1）掌握基本块级标签的使用方法；（2）掌握布局块级标签的使用方法。3、实验要求实验前认真阅读实验指导书，掌握实验原理，熟悉实验任务。实验时注意观察，认真记录。实验结束后按规定整理试验用计算机设备。独立完成实验报告。4、实验原理HTML
5、标签可以分为块级标签和行级标签，从页面布局的角度来看，设计者可以使用块级标签完成网页元素的组织与布局，而块级标签又可以细分为标题标签、段落标签和水平线标签。5、实验所用仪器实验中心学生用计算机。6、实验步骤和方法练习通过标签组织网页内容，制作什锦果园关于页面，页面在浏览器中显示的效果如图 2-1所示。图 2-1 什锦果园关于页面显示效果图7、实验注意事项实验用计算机带有还原单元，每次重新启动，系统盘内容都会还原到初始状态。8、实验预习要求上机实验前，应仔细阅读教材、课堂笔记。上机实验时应带好教材、教学参考书及听课笔记。49、实验程序要求该实验最终程序存盘备份，以备以后成绩判定。5实验三 HTM
6、L 行级标签的使用1、实验项目名称、学时HTML 行级标签的使用，2 学时2、实验目的（1）掌握超链接的使用方法；（2）掌握网页图像的显示方式；（3）掌握网页表单元素的使用方法；（4）掌握换行标签使用。3、实验要求实验前认真阅读实验指导书，掌握实验原理，熟悉实验任务。实验时注意观察，认真记录。实验结束后按规定整理试验用计算机设备。独立完成实验报告。4、实验原理行级标签也成为行内标签、内联标签。当设计者使用块级标签完成网页元素的组织与布局后，要为其中的每个小区块添加内容，就需要用到行级标签。5、实验所用仪器实验中心学生用计算机。6、实验步骤和方法1）通过表格布局制作什锦果园联系信息表单，表格布局
7、示意图如图 3-1 所示。图 3-1 布局示意图2）网页最终显示效果如图 3-2 所示。6图 3-2 网页显示效果图7、实验注意事项实验用计算机带有还原单元，每次重新启动，系统盘内容都会还原到初始状态。8、实验预习要求上机实验前，应仔细阅读教材、课堂笔记。上机实验时应带好教材、教学参考书及听课笔记。9、实验程序要求该实验最终程序存盘备份，以备以后成绩判定。7实验四 CSS 基础实践1、实验项目名称、学时CSS 基础实践，2 学时2、实验目的（1）掌握 CSS 的语法规范；（2）掌握样式表的语法规则。3、实验要求实验前认真阅读实验指导书，掌握实验原理，熟悉实验任务。实验时注意观察，认真记录。实验
8、结束后按规定整理试验用计算机设备。独立完成实验报告。4、实验原理CSS（Cascading Style Sheets，层叠样式表单）简称为样式表，是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。样式就是格式，在网页中，像文字的大小、颜色以及图片位置等，都是设置显示内容的样式。层叠是指当在 HTML 文档中引用多个定义样式的样式文件（CSS 文件）时，若多个样式文件间所定义的样式发生冲突，将依据层次顺序处理。5、实验所用仪器实验中心学生用计算机。6、实验步骤和方法1）前期准备（1）栏目目录结构在栏目文件夹下创建文件夹 images 和 css，分别用来存放图像素材和外部
9、样式表文件。（2）页面素材将页面所需要使用的图像素材存放在文件夹 images 下。（3）外部样式表在文件夹 css 下新建一个名为 style.css 的样式表文件。2）制作页面8图 4-1 什锦果园业界资讯页面效果图7、实验注意事项实验用计算机带有还原单元，每次重新启动，系统盘内容都会还原到初始状态。8、实验预习要求上机实验前，应仔细阅读教材、课堂笔记。上机实验时应带好教材、教学参考书及听课笔记。9、实验程序要求该实验最终程序存盘备份，以备以后成绩判定。9实验五 Div+CSS 布局技术1、实验项目名称、学时Div+CSS 布局技术，2 学时2、实验目的（1）理解 Div 布局理念；（2）
10、掌握 CSS 盒模型的原理；（3）学会 Div+CSS 布局技术的灵活运用。3、实验要求实验前认真阅读实验指导书，掌握实验原理，熟悉实验任务。实验时注意观察，认真记录。实验结束后按规定整理试验用计算机设备。独立完成实验报告。4、实验原理传统的 HTML 标签中，既有控制结构的标签（如标签和标签） ，又有控制表现的标签（如标签和标签） ，还有本意用于结构后来被滥用于控制表现的标签（如标签和标签） 。页面的整个结构标签与表现标签混合在一起。相对于其他 HTML 继承而来的元素，Div 标签的特性就是它是一种块级元素，更容易被 CSS 代码控制样式。5、实验所用仪器实验中心学生用计算机。6、实验步骤
11、和方法页面布局规划：1）什锦果园水果沙拉局部内容的页面效果入图 5-1 所示。图 5-1 什锦果园水果沙拉局部内容效果图102）什锦果园水果沙拉页面局部布局示意图如图 5-2 所示。图 5-1 页面局部布局示意图页面的制作过程：1）前期准备（1）栏目目录结构在栏目文件夹下创建文件夹 images 和 css，分别用来存放图像素材和外部样式表文件。（2）页面素材将页面所需要使用的图像素材存放在文件夹 images 下。（3）外部样式表在文件夹 css 下新建一个名为 style.css 的样式表文件。2）制作页面7、实验注意事项实验用计算机带有还原单元，每次重新启动，系统盘内容都会还原到初始状态
12、。8、实验预习要求上机实验前，应仔细阅读教材、课堂笔记。上机实验时应带好教材、教学参考书及听课笔记。9、实验程序要求该实验最终程序存盘备份，以备以后成绩判定。11实验六 制作博客页面1、实验项目名称、学时制作博客页面，2 学时2、实验目的学会使用 CSS 代码修饰常见的网页元素。3、实验要求实验前认真阅读实验指导书，掌握实验原理，熟悉实验任务。实验时注意观察，认真记录。实验结束后按规定整理试验用计算机设备。独立完成实验报告。4、实验原理了解了 CSS 设计中的 4 个核心基础盒模型、标准流、浮动和定位，就可以以此为基础，使用CSS 来进行网页中文本、图像、链接、导航等元素的样式设置。5、实验所
13、用仪器实验中心学生用计算机。6、实验步骤和方法1）前期准备（1）栏目目录结构在栏目文件夹下创建文件夹 images 和 css，分别用来存放图像素材和外部样式表文件。（2）页面素材将页面所需要使用的图像素材存放在文件夹 images 下。（3）外部样式表在文件夹 css 下新建一个名为 style.css 的样式表文件。2）制作页面（1）制作页面的 CSS 样式（2）制作页面的网页结构代码什锦果园博客页面的布局示意图如图 6-1 所示，制作完成的页面效果如图 6-2 所示。12图 6-1 什锦果园博客页面布局示意图图 6-2 什锦果园博客页面效果7、实验注意事项实验用计算机带有还原单元，每次重
14、新启动，系统盘内容都会还原到初始状态。8、实验预习要求上机实验前，应仔细阅读教材、课堂笔记。上机实验时应带好教材、教学参考书及听课笔记。9、实验程序要求该实验最终程序存盘备份，以备以后成绩判定。13实验七 利用 CSS 制作关于页面1、实验项目名称、学时利用 CSS 制作关于页面，2 学时2、实验目的（1）练习使用 CSS 设置链接；（2）掌握导航菜单的基本设置方法。3、实验要求实验前认真阅读实验指导书，掌握实验原理，熟悉实验任务。实验时注意观察，认真记录。实验结束后按规定整理试验用计算机设备。独立完成实验报告。4、实验原理在一个网站中，所有网页都会通过超链接互相链接在一起，用户通过超链接在各
15、个页面之间导航，这样才会形成一个有机的网站。在设计网站时，链接与导航都是页面中至关重要的组成部分之一。一个包含美观链接的页面能给浏览者带来新鲜的感觉，而要实现链接的多样化离不开 CSS 样式的辅助。普通的 Web 站点由一组页面组成，用户通过超链接在各个页面之间导航，用 CSS 制作导航菜单可以提高用户体验，而其制作方法可以分为普通的超链接导航和使用列表标签构建的导航菜单。5、实验所用仪器实验中心学生用计算机。6、实验步骤和方法1）前期准备（1）栏目目录结构在栏目文件夹下创建文件夹 images 和 css，分别用来存放图像素材和外部样式表文件。（2）页面素材将页面所需要使用的图像素材存放在文
16、件夹 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; /*设置行高是字符的 1.
17、5 倍*/14background-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 auto; /*容器
18、自动居中*/#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 /*设置段落样式*/margin:
19、 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; /*上、右、下、左的外边距依次为 0px,0px,30p
20、x,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; /*清除所有浮动*/height: 30px; /
21、*清除浮动后区块的高度为 30px*/.cleaner_h40 clear: both; /*清除所有浮动*/height: 40px; /*清除浮动后区块的高度为 40px*/15.float_l float: left; /*向左浮动*/.float_r float: right; /*向右浮动*/（2）页面顶部的制作页面顶部的内容被放置在名为 header 的 Div 容器中，主要用来显示页面 logo 和导航菜单，如图7-1 所示。图 7-1 页面顶部显示效果（3）页面中部的制作页面中部的内容被放置在名为 content 的 Div 容器中，包括左侧区域和右侧区域。左侧区域包括水果分类
22、纵向菜单；右侧区域包括公司简介、经营特色和发展规划，如图 7-2 所示。图 7-2 页面中部显示效果（4）页面底部的制作页面底部的内容被放置在名为 footer_wrapper 的 Div 容器中，用来显示版权信息，如图 7-3 所示。16图 7-3 页面底部显示效果（5）制作页面的网页结构代码7、实验注意事项实验用计算机带有还原单元，每次重新启动，系统盘内容都会还原到初始状态。8、实验预习要求上机实验前，应仔细阅读教材、课堂笔记。上机实验时应带好教材、教学参考书及听课笔记。9、实验程序要求该实验最终程序存盘备份，以备以后成绩判定。17实验八 制作二级纵向列表模式的导航菜单1、实验项目名称、学
23、时制作二级纵向列表模式的导航菜单，2 学时2、实验目的掌握利用 JavaScript 进行网页特效的基本设置。3、实验要求实验前认真阅读实验指导书，掌握实验原理，熟悉实验任务。实验时注意观察，认真记录。实验结束后按规定整理试验用计算机设备。独立完成实验报告。4、实验原理JavaScript 是一种行为脚本语言，它是介于 Java 与 HTML 之间、基于对象事件驱动的编程语言，它是制作网页行为的标准之一。在 Web 标准中，使用 HTML 设计网页的结构，使用 CSS 设计网页的表现，使用 JavaScript 制作网页的特效。用 JavaScript 可以创建出运行在多平台和浏览器上的交互行
24、为和效果。5、实验所用仪器实验中心学生用计算机。6、实验步骤和方法1）建立网页结构。首先建立一个包含二级导航菜单选项的嵌套无序列表。其中，一级导航菜单包含 4 个菜单项，二级导航菜单包含用于实现导航的文字链接。菜单的初始效果如图 8-1 所示。图 8-1 菜单的初始效果2）设置菜单的 CSS 样式。在设置网页菜单时，一般二级导航是被隐藏的，只有当鼠标经过一级导航时才会触发二级导航的显示，而当鼠标移开后，二级导航又自动隐藏。在这个设计思路的基础上，接着设计菜单的宽度、字18体，以及列表和列表选项的类型和边框样式。3）添加实现二级导航菜单的 JavaScript 脚本。页面预览后的效果如图 8-2 所示。图 8-2 页面预览效果图7、实验注意事项实验用计算机带有还原单元，每次重新启动，系统盘内容都会还原到初始状态。8、实验预习要求上机实验前，应仔细阅读教材、课堂笔记。上机实验时应带好教材、教学参考书及听课笔记。9、实验程序要求该实验最终程序存盘备份，以备以后成绩判定。
