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实验三 HT
6、ML 行级标签的使用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，分别用来存放图像素材和外部样式表文件。（2）页面素材将页面所需要使用的图像素材存放在文件夹 images 下。（3）外部样式表在文件夹 css 下新建一个名为 style.css 的样式表文件。2）制作页面8图 4-1 什锦果园业界资讯页面效果图7、实验注意事项实验用计算机带有还原单元，每次重新启动，系统盘内容都会还原到初始状态。8、实验预习要求上机实验前，应仔细阅读教材、课堂笔记。上机实验时应带好教材、教学参考书及听课笔记。9、实验程序要求该实验最终程序存盘备份，以备以后成绩判定。
