《电子商务网页设计与制作》课件第二章.pptx

1、认知HTML制作的网页本章阐释了HTML语言、模板、库的制作、DIV+CSS页面布局技术等知识,通过学习,学生可灵活地修改和编辑代码,使用模板批量制作具有相同结构的网页,运用库制作多个具有相同内容的网页,这样不仅可以统一网站风格,而且可以提高制作效率。(1)认识HTML。(2)掌握常用的HTML标记及其属性。(3)掌握模板与库项目的创建方法。(4)了解DIV和CSS的基本概念。(5)掌握利用DIV+CSS布局网页的方法。认识HTML一，HTML概述二，编写和使用HTML超文本标记语言超文本标记语言(Hyper Text Markup Language,HTML)是用于创是用于创建建Web文档的

2、一种标记语言。由于编文档的一种标记语言。由于编写的简易性写的简易性,HTML已迅速成为网页编已迅速成为网页编程的主流语言程的主流语言,几乎所有的网页都是几乎所有的网页都是由由HTML或其他语言程序嵌套在或其他语言程序嵌套在HTML语言中编写的语言中编写的。在在IE浏览器中任意打开一个网页浏览器中任意打开一个网页,选择选择“查看查看”“源文件源文件”命令命令,打开打开该网页的源程序代码该网页的源程序代码要制作HTML文档,一般有两种方法:一种是使用记事本等工具,直接输入HTML源代码,然后保存为以“html”或“htm”为扩展名的网页文件;另一种方法是使用可视化的网页制作工具,根据用户的操作自动

3、生成HTML代码,如FrontPage、Dreamweaver等软件。三，HTML文档的基本结构(1)HTML文档包括三个主要标记,即文档标记、头部标记和主体标记。(2)所有的标记都要用尖括号“”括起来。(3)标记不区分大小写。(4)标记中如果包含多个参数,则各参数之间用空格分隔,参数位置不受限制。标记用于HTML文档的最前面,用来表示HTML文档的开始,而标记放在HTML文档的最后面,用来表示HTML文档的结束,这两个标记必须成对使用。之间的内容是头部信息,称为头部分。头部信息不会显示出来,在网页中是看不见的。之间的内容是网页的内容,称为主体部分,其内容将在浏览器窗口中显示出来。四，实施步骤

4、第一步:选择“开始”“程序”“附件”“记事本”命令,打开“记事本”窗口,在记事本中输入以下HTML代码第三步:双击保存的“webl.html”文件,打开浏览器浏览该网页,可以看到字幕“大家好,欢迎光临我的小站!”,从右向左滚动,标题“滚动字幕”出现在浏览器的标题栏第二步:代码输入完毕后,选择“文件”“保存”命令,打开“另存为”对话框,选择好保存位置,文件名为“webl.html”,保存类型为“所有文件”,单击“保存”按钮使用HTML制作简单网页6.图像标记7.超链接标记8.表格标记9.滚动标记1.标题标记2.主体标记3.段落标记4.换行标记5.水平线标记二，实施步骤搜索相关素材,并将素材的“r

5、enwu2”文件夹复制到D盘根目录下选择“开始”“程序”“附件”“记事本”命令,打开“记事本”窗口,在记事本中输入以下HTML代码代码输入完毕后,选择“文件”“保存”命令,打开“另存为”对话框,选择保存位置为“D:renwu2”,文件名为“yyxs.html”,保存类型为“所有文件”,单击“保存”按钮双击保存的“yyxs.html”文件,打开浏览器浏览该网页使用模板和库制作网页 模板是一种特殊类型的文档模板是一种特殊类型的文档,用于设计固定的并可重复使用的页面布局结构用于设计固定的并可重复使用的页面布局结构,基基于模板创建的网页会继承模板的布局结构。因此于模板创建的网页会继承模板的布局结构。因

6、此,在批量制作具有相同版式和风格在批量制作具有相同版式和风格的网页文档时的网页文档时,使用模板是一个不错的选择。利用模板可以使网站拥有统一的布局使用模板是一个不错的选择。利用模板可以使网站拥有统一的布局和外观和外观,而且模板变化时可以同时更新基于模板创建的网页文档而且模板变化时可以同时更新基于模板创建的网页文档,提高了站点管理和提高了站点管理和维护的效率。维护的效率。1.创建模板创建模板2.新建和取消可编辑区域新建和取消可编辑区域3.创建基于模板的文档创建基于模板的文档4.更新基于模板的文档更新基于模板的文档5.将网页从模板中分离将网页从模板中分离二、库项目 库是一种特殊的Dreamweave

7、r CS6文件,其中包含可放置到网页中的一组单个资源或资源副本。库中的这些资源称为库项目,也就是要在整个网站范围内反复使用或经常更新的元素。1.创建库项目2.插入库项目3.编辑库项目4.利用库项目更新网站三，实施步骤第一步:搜索相关素材,并将素材中的“renwu3”文件夹复制到D盘根目录下,双击打开Dreamweaver CS6,新建站点“得力专卖店”,指定本地站点文件夹“D:renwu3”。第二步:选择“文件”“另存为模板”命令,打开“另存模板”对话框第三步:打开“xsyp.dwt”模板文档,将第3行第1个单元格中的表格删除,将第3行第2个单元格中的内容删除。第四步:选择“文件”“新建”命令

8、,打开“新建文档”对话框第一步:搜索相关素材,并将素材中的“renwu3”文件夹复制到D盘根目录下,双击打开Dreamweaver CS6,新建站点“得力专卖店”,指定本地站点文件夹“D:renwu3”。第二步:选择“文件”“另存为模板”命令,打开“另存模板”对话框，在“站点”下拉列表框中选择“得力专卖店”选项,在“另存为”文本框中输入名称“xsyp”,单击“保存”按钮,单击“是”按钮。系统将在站点根目录中自动创建名为“templates”的文件夹,并将模板文档“xsyp.dwt”保存到该文件夹中。第三步:打开“xsyp.dwt”模板文档,将第3行第1个单元格中的表格删除,将第3行第2个单元格

9、中的内容删除。将光标定位到第3行第1个单元格内,选择“插入”“模板对象”“可编辑区域”命令,打开“新建可编辑区域”对话框，在“名称”文本框中输入“daohang”,单击“确定”按钮,即可在模板中插入一个名为“daohang”的可编辑区域。用同样的方法,在第3行第2个单元格内创建一个名为“content”的可编辑区域第四步:选择“文件”“新建”命令,打开“新建文档”对话框,在左边栏中选择“模板中的页”,在“站点”列表中选择“得力专卖店”,在“模板”列表中选择“xsyp”模板,单击“创建”按钮,即可创建一个基于该模板的新文档。将光标定位到可编辑区域content中,删除其中的区域名称“conten

10、t”,选择“插入”“图像”命令,在打开的“选择图像源文件”对话框中选择“images/xbq.jpg”,单击“确定”按钮，以“xbq.html”为名进行保存。第五步第五步:将光标定位到可编辑区域将光标定位到可编辑区域“daohang”中中,删除其中的区域名称删除其中的区域名称“daohang”,选择选择“插入插入”“表格表格”命令命令,打开打开“表格表格”对话框对话框,插入一个插入一个8行行1列的嵌套表格列的嵌套表格,表格宽度为表格宽度为100%,其他项为其他项为0。在嵌套表格的第。在嵌套表格的第1行单元格中输入行单元格中输入“产品分类产品分类”,在第在第2行单元格中输入行单元格中输入“学生削

11、笔器学生削笔器”,在第在第3行单元格中输入行单元格中输入“书写书写工具工具”,在第在第4行单元格中输入行单元格中输入“笔袋笔袋/文具盒文具盒”等等第六步:选中“daohang”区域中的嵌套表格,将其拖动到“库”类别中,新建一个名为“xsypl.lbi”的库项目第七步:新建网页文件“sxgj.html”。选择“插入”“图像”命令,将搜索到的素材中的“sxgj.jpg”导入网页中第八步:在“sxgj.html”文件内,选择“修改”“模板”“应用模板到页”命令,打开“选择模板”对话框第九步:将光标定位到可编辑区域“daohang”中,删除其中的区域名称“daohang”,选择“库”面板中的“xsyp

12、l.lbi”库项目,然后在面板中单击“插入”按钮,插入该库项目第十步:用同样的方法创建笔袋/文具盒的页面“bdwjh.html”。在content的可编辑区域内插入图片“bdwjh.jpg”,在content的可编辑区域内引用库“xsypl.lbi”。第十一步:在“库”面板中,双击库项目“xsypl.lbi”,打开该库项目。为库项目中的“学生削笔器”“书写工具”“笔袋/文具盒”建立超链接,分别为“xbq.html”“sxgj.html”“bdwjh.html”。第十二步:打开“xbq.html”文件,按F12键进行预览。可以看到,库中创建超链接后,使用该模板的文档中也出现了超链接。第十三步:打开“index.html”文件,为导航栏中的“学生用品”建立超链接“xbq.html”,保存并预览效果。在记事本中创建如图所示的网页,网页背景色为“#9FF”,保存在“D:renwu1”文件夹中,网页文件名为“web2.html”。谢谢观赏！