4-2电子商务开发的前台技术.ppt

《4-2电子商务开发的前台技术.ppt》由会员分享，可在线阅读，更多相关《4-2电子商务开发的前台技术.ppt（38页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、Electronic Commerce Electronic Commerce电子商务电子商务4/20/20232第四章第四章 电子商务网站建设与电电子商务网站建设与电子商务开发的前台技术子商务开发的前台技术24/20/20233Reviewn页面的层次结构：一级页面、二级页面、三级页面页面的层次结构：一级页面、二级页面、三级页面n无论是复杂的商业网站，还是简单的个人网站，无论是复杂的商业网站，还是简单的个人网站，在网页的层次结构上都存在一些共同点，即任何一在网页的层次结构上都存在一些共同点，即任何一个网站均可用三层结构实现，也就是：个网站均可用三层结构实现，也就是：n首页栏目页文章页（内容页

2、）首页栏目页文章页（内容页）n或一级页面二级页面三级页面。或一级页面二级页面三级页面。4/20/20234本节课的本节课的目标目标n简单了解一下站点、网页、主页简单了解一下站点、网页、主页等概含等概含n了解网页的制作工具的特点了解网页的制作工具的特点n学习制作简单网页学习制作简单网页4/20/20235站点与网页站点与网页n网站网站 ：1 1、是计算机网络上的位置、是计算机网络上的位置 2 2、有各种信息、有各种信息 网页是网站的其本组成文件，可网页是网站的其本组成文件，可以包含文本、图片、动画、音乐、以包含文本、图片、动画、音乐、链接等元素链接等元素 可以把一个网站想像成一个国家：它首可以把

3、一个网站想像成一个国家：它首先有一位置；其二包含各种内容先有一位置；其二包含各种内容4/20/20236网页网页 与主页与主页n n主页组成与一般网页一样，核心是主页组成与一般网页一样，核心是htmlhtml语语言言n n使用浏览器访问网站时，网站中第一个被使用浏览器访问网站时，网站中第一个被执行的文件称为主页，主页的基本功能是执行的文件称为主页，主页的基本功能是帮助访问者轻松浏览网站帮助访问者轻松浏览网站 如把网站比成一本如把网站比成一本书，则网页为书中的每书，则网页为书中的每一张，而主页为书的目录页一张，而主页为书的目录页4/20/20237制作工具制作工具n n可以用任何文字编辑工具制作

4、网页前提是熟练掌握html语言n nn n现在出现了不用面对语言的工具软件如frontpage、还有flash、dreamweave4/20/20238要想学做网页，首先得了解制作网页的工具。要想学做网页，首先得了解制作网页的工具。制作网页主要制作网页主要有以下一些工具有以下一些工具 Frontpage，操作简单，实用，学起来比较轻松。，操作简单，实用，学起来比较轻松。Dreamweaver：这是网页三剑客之一，专门制作网页的工具，：这是网页三剑客之一，专门制作网页的工具，可以自动将网页生成代码，是普通网页制作者的首选工具，界面可以自动将网页生成代码，是普通网页制作者的首选工具，界面简单，实用

5、功能比较强大。建议初学者选用。简单，实用功能比较强大。建议初学者选用。另外一个工具就是代码编辑工具，例如写字本、另外一个工具就是代码编辑工具，例如写字本、EditPlus等，等，这些工具主要编辑这些工具主要编辑asp等动态网页。等动态网页。此外还有一些网络编程工具，此外还有一些网络编程工具，javascript、java编辑器等。编辑器等。要真正做一个好的网站，还必须有良好的设计功底。所以还要真正做一个好的网站，还必须有良好的设计功底。所以还得学很多边缘性的软件，例如得学很多边缘性的软件，例如photoshop、flash等。等。大型的网站大型的网站往往还需要数据库的支持，所以还得懂数据库。往

6、往还需要数据库的支持，所以还得懂数据库。制作工具制作工具4/20/20239不要忘不要忘记加入网加入网页的的titletitle是是显示在示在浏览器器标题栏的文字，在的文字，在网网页下下载时，它是最先出，它是最先出现的，所以你可以的，所以你可以用它提示网用它提示网页的主要内容，或者写些的主要内容，或者写些欢迎的迎的话 将首将首页命名命名为index.htm这是是规定，没什么好多定，没什么好多说的，哪的，哪页一旦一旦被取名叫被取名叫index.htm以后，等整个网站上以后，等整个网站上传了了以后，它就是以后，它就是别人用你的网址看到你网站的人用你的网址看到你网站的第一第一页。网页制作基础知识网页

7、制作基础知识4/20/202310将所有文件的文件名将所有文件的文件名统一格式用英文字母，如都一格式用英文字母，如都为英文小写。英文小写。图片片应使用使用.gif 和和.jpg(jpeg)格式格式这是两种位是两种位图文件格式，在同文件格式，在同样的的视觉清晰度下，文件量清晰度下，文件量往往比其他文件格式小，也就是往往比其他文件格式小，也就是说在网上下在网上下载的的时候候时间会更会更短。短。用用链接接连接各个接各个页面面建建议这步最后做，先将各个步最后做，先将各个页面的其它部分做好面的其它部分做好 网页制作基础知识网页制作基础知识4/20/202311用用dreamweave制作网页的过程制作网

8、页的过程n n先建立站点n n然后添加网页n n然后添加内容4/20/202312 网页文件网页文件2如如Photo.htm站点站点视频素材视频素材图片素材图片素材网页文件网页文件1如如Interest.htm主页文件主页文件 Index.htm声音素材声音素材站点结构站点结构4/20/202313 主页主页网页网页网页网页网页网页网页网页网页网页网页网页超链接超链接各网页之间通过各网页之间通过“超链接超链接”，构成一个整体，构成一个整体4/20/202314n n超级链接有三种情况。another location in the same documentanother location i

9、n the same document (from TOP of the page to BOTTOM of the page)(from TOP of the page to BOTTOM of the page)another document on the same host machine another document on the same host machine (another webpage in a folder on my pc)(another webpage in a folder on my pc)another document on the Internet

10、another document on the Internet (from SCU to SINA)(from SCU to SINA)4/20/202315例：设计、制作以校园生活为内容的网站例：设计、制作以校园生活为内容的网站学习目的：学习目的：1.1.掌握有关网页制作的基本知识。包括：站点、网页、掌握有关网页制作的基本知识。包括：站点、网页、HTMLHTML语言、网页的各种元素特性以及超链接等知识。语言、网页的各种元素特性以及超链接等知识。2.2.掌握制作简单网页的方法和技巧。掌握制作简单网页的方法和技巧。返回4/20/202316根据需要，确定网站根据需要，确定网站首页包括首页包括“

11、校园新闻校园新闻”、“网上学园网上学园”、“课余生活课余生活”、“资资源下载源下载”、“友情链友情链接接”、“留言板留言板”共共六大板块，接下来进六大板块，接下来进行站点各页面的规划。行站点各页面的规划。标题校园新闻 友友 情情 链链 接接网上学园网上学园资源下载资源下载课余生活课余生活留言板留言板站点站点的规划的规划4/20/202317校园新闻校园新闻网上学园网上学园课余生活课余生活 资源下载资源下载 留言板留言板 校园趣话校园趣话 校园文学校园文学 音乐无限音乐无限 娱乐新闻娱乐新闻 体育新闻体育新闻 首页首页站点站点的规划的规划4/20/202318 进行了网站的规划、相关信息资料的收

12、集后，接下来的任务进行了网站的规划、相关信息资料的收集后，接下来的任务就是建立站点。要建立一个找点，就要选定创建站点、制作网就是建立站点。要建立一个找点，就要选定创建站点、制作网页的工具，即网页制作软件。网页制作软件非常多，现在比较页的工具，即网页制作软件。网页制作软件非常多，现在比较流行的有流行的有Dreamweaver,FrontPage等工具软件。等工具软件。返回选择网页制作软件选择网页制作软件4/20/202319某教育网主页某教育网主页网站名和网网站名和网站站LOGO导航区网页内容4/20/202320 创建创建创建创建InternetInternet站点的一般方法是：先在本地机中建

13、立站点，站点的一般方法是：先在本地机中建立站点，站点的一般方法是：先在本地机中建立站点，站点的一般方法是：先在本地机中建立站点，即创建和编辑好该站点所必需的一系列按一定要求链接起来的即创建和编辑好该站点所必需的一系列按一定要求链接起来的即创建和编辑好该站点所必需的一系列按一定要求链接起来的即创建和编辑好该站点所必需的一系列按一定要求链接起来的网页文档及相关文件，再发布到指定的网页文档及相关文件，再发布到指定的网页文档及相关文件，再发布到指定的网页文档及相关文件，再发布到指定的WebWeb服务器，形成真正服务器，形成真正服务器，形成真正服务器，形成真正的站点的站点的站点的站点 1.创建新站点创建

14、新站点 主要是用站点模板和站点向导来创建站点主要是用站点模板和站点向导来创建站点主要是用站点模板和站点向导来创建站点主要是用站点模板和站点向导来创建站点 站点模板是由一组事先经过格式化的空白网页组成的，相站点模板是由一组事先经过格式化的空白网页组成的，相站点模板是由一组事先经过格式化的空白网页组成的，相站点模板是由一组事先经过格式化的空白网页组成的，相当于一个站点的骨架，通过它可以容易地搭起整个站点的框架当于一个站点的骨架，通过它可以容易地搭起整个站点的框架当于一个站点的骨架，通过它可以容易地搭起整个站点的框架当于一个站点的骨架，通过它可以容易地搭起整个站点的框架 创建、打开和删除站点4/20

15、/202321网页的制作和测试 1.新建网页新建网页 选择选择选择选择“文件文件文件文件”菜单中的菜单中的菜单中的菜单中的“新建新建新建新建”，再选择，再选择，再选择，再选择“网页网页网页网页”命令，命令，命令，命令，或单击或单击或单击或单击“常用常用常用常用”工具栏上的工具栏上的工具栏上的工具栏上的“新建网页新建网页新建网页新建网页”按钮，此时在网页编辑按钮，此时在网页编辑按钮，此时在网页编辑按钮，此时在网页编辑区中即可看到新建的空白网页区中即可看到新建的空白网页区中即可看到新建的空白网页区中即可看到新建的空白网页 .HTM.HTM.HTM.HTM 或或或或 .HTML.HTML.HTML.

16、HTML 与与与与WordWordWordWord编辑文档的操作方法类似编辑文档的操作方法类似编辑文档的操作方法类似编辑文档的操作方法类似 2.打开网页打开网页 3.保存网页保存网页 4.关闭网页关闭网页 5.测试网页测试网页 “预览预览预览预览”选择选择选择选择“文件文件文件文件”菜单中的菜单中的菜单中的菜单中的“在浏览器中预览在浏览器中预览在浏览器中预览在浏览器中预览”使用使用使用使用IEIE浏览器来打开指定的网页文档浏览器来打开指定的网页文档浏览器来打开指定的网页文档浏览器来打开指定的网页文档4/20/202322 1.插入字幕插入字幕 在网页中设置移动字幕，可以使某段文字在网页上循环作

17、在网页中设置移动字幕，可以使某段文字在网页上循环作在网页中设置移动字幕，可以使某段文字在网页上循环作在网页中设置移动字幕，可以使某段文字在网页上循环作水平移动水平移动水平移动水平移动 2.悬停按钮悬停按钮 悬停按钮是个动感按钮，当访问者将鼠标指向该按钮时，悬停按钮是个动感按钮，当访问者将鼠标指向该按钮时，悬停按钮是个动感按钮，当访问者将鼠标指向该按钮时，悬停按钮是个动感按钮，当访问者将鼠标指向该按钮时，按钮就会改变颜色或形状按钮就会改变颜色或形状按钮就会改变颜色或形状按钮就会改变颜色或形状 3.横幅广告管理器横幅广告管理器 在网页的同一地方轮流显示不同的图片，可以在有限的网在网页的同一地方轮流

18、显示不同的图片，可以在有限的网在网页的同一地方轮流显示不同的图片，可以在有限的网在网页的同一地方轮流显示不同的图片，可以在有限的网页页面中提供尽可能多的信息页页面中提供尽可能多的信息页页面中提供尽可能多的信息页页面中提供尽可能多的信息 4.站点计数器站点计数器 站点计数器通常添加在主页中，用于统计和显示站点被访站点计数器通常添加在主页中，用于统计和显示站点被访站点计数器通常添加在主页中，用于统计和显示站点被访站点计数器通常添加在主页中，用于统计和显示站点被访问的次数问的次数问的次数问的次数 插入Web组件4/20/202323 1.1.动态动态HTMLHTML效果效果 设置动态设置动态设置动态

19、设置动态HTMLHTML效果后，当打开网页、进行单击、效果后，当打开网页、进行单击、效果后，当打开网页、进行单击、效果后，当打开网页、进行单击、双击或鼠标悬停等操作时，网页内指定的文本、图像、双击或鼠标悬停等操作时，网页内指定的文本、图像、双击或鼠标悬停等操作时，网页内指定的文本、图像、双击或鼠标悬停等操作时，网页内指定的文本、图像、按钮、字幕、链接等对象能够实现某种动画效果，如按钮、字幕、链接等对象能够实现某种动画效果，如按钮、字幕、链接等对象能够实现某种动画效果，如按钮、字幕、链接等对象能够实现某种动画效果，如飞出、缩放等飞出、缩放等飞出、缩放等飞出、缩放等 2.2.网页过渡网页过渡 网页

20、过渡是指进入或离开网页时的特殊效果网页过渡是指进入或离开网页时的特殊效果网页过渡是指进入或离开网页时的特殊效果网页过渡是指进入或离开网页时的特殊效果 动态效果及网页过渡4/20/202324 HTML语言语言 标记性语言。用来编制网页文档标记性语言。用来编制网页文档(也称也称HTML文档文档)。并不需要经过编译，只需要通过。并不需要经过编译，只需要通过浏览器来打开就可以看到结果浏览器来打开就可以看到结果 采用了标记方式，描述了每个在网页上的组采用了标记方式，描述了每个在网页上的组件，例如文本段落、文本格式、图像、超链接等件，例如文本段落、文本格式、图像、超链接等 通过超文本链接能方便地进行各种

21、信息之间通过超文本链接能方便地进行各种信息之间切换切换4/20/202325 网页制作的基础是网页制作的基础是网页制作的基础是网页制作的基础是HTMLHTML语言语言语言语言 HTMLHTML是一种超文本置标是一种超文本置标是一种超文本置标是一种超文本置标语言，是一种标记语语言，是一种标记语语言，是一种标记语语言，是一种标记语言，而不是编程语言言，而不是编程语言言，而不是编程语言言，而不是编程语言 为了提高网页制作为了提高网页制作为了提高网页制作为了提高网页制作(特别是动态网页制作特别是动态网页制作特别是动态网页制作特别是动态网页制作)的技的技的技的技术水平，就有必要了解、熟悉甚至精通术水平，

22、就有必要了解、熟悉甚至精通术水平，就有必要了解、熟悉甚至精通术水平，就有必要了解、熟悉甚至精通HTMLHTML语言语言语言语言及脚本语言及脚本语言及脚本语言及脚本语言4/20/202326HTML文档的编辑 编辑操作编辑操作编辑操作编辑操作 WordWord：“视图视图视图视图”“HTMLHTML源文件源文件源文件源文件”IE5IE5：“查看查看查看查看”“源文件源文件源文件源文件”FrontPageFrontPage或者或者或者或者dreamwaverdreamwaver：单击：单击：单击：单击“HTML”HTML”按钮按钮按钮按钮 进入进入进入进入FrontPage FrontPage 的

23、的的的HTMLHTML编辑状态编辑状态编辑状态编辑状态 其他编辑器其他编辑器其他编辑器其他编辑器(如记事本如记事本如记事本如记事本,写字板等写字板等写字板等写字板等)不区分大小写不区分大小写不区分大小写不区分大小写 4/20/202327HTMLHTML文档的基本结构文档的基本结构 (1)(1)每个每个每个每个HTMLHTML文档文档文档文档(网页网页网页网页)以标记以标记以标记以标记开始，开始，开始，开始，以以以以结束结束结束结束 四四四四种基本标记如下种基本标记如下种基本标记如下种基本标记如下：标明文档的开始和结束，定义文档标明文档的开始和结束，定义文档标明文档的开始和结束，定义文档标明文

24、档的开始和结束，定义文档 标明文档的头部标明文档的头部标明文档的头部标明文档的头部 标明标题，显示在浏览器的标题栏标明标题，显示在浏览器的标题栏标明标题，显示在浏览器的标题栏标明标题，显示在浏览器的标题栏中中中中 标明文档的主体标明文档的主体标明文档的主体标明文档的主体 (2)HTML(2)HTML文档一般由两部分组成：头部和主体文档一般由两部分组成：头部和主体文档一般由两部分组成：头部和主体文档一般由两部分组成：头部和主体 4/20/202328 (3)(3)标记以标记以标记以标记以“”及标记名组成及标记名组成及标记名组成及标记名组成 双边标记：双边标记：双边标记：双边标记：示例：示例：示例

25、：示例：.4/20/202329 常用的一些标记 （1 1）标题标记：）标题标记：）标题标记：）标题标记：#”标题文字标题文字标题文字标题文字 /示例：示例：示例：示例：网页制作网页制作网页制作网页制作 H1 H1到到到到H3H3字体逐渐变小。字体逐渐变小。字体逐渐变小。字体逐渐变小。（2 2）文字标记：）文字标记：）文字标记：）文字标记：FONT SIZE#”文字文字文字文字 设置文字的大小、字体及颜色设置文字的大小、字体及颜色设置文字的大小、字体及颜色设置文字的大小、字体及颜色 示例：示例：示例：示例：FONT SIZE 网页制作网页制作网页制作网页制作 （3 3）BODYBODY标记的标

26、记的标记的标记的TEXTTEXT属性及属性及属性及属性及BGCOLORBGCOLOR属性：属性：属性：属性：BODY BGCOLOR#-”文字文字文字文字 设定整个网页的文字颜色和背景颜色设定整个网页的文字颜色和背景颜色设定整个网页的文字颜色和背景颜色设定整个网页的文字颜色和背景颜色 示例：示例：示例：示例：BODY color#634000”网页制作网页制作网页制作网页制作 4/20/202330 常用的一些标记 （4 4）段落标记）段落标记）段落标记）段落标记：P ALIGN#”文字块文字块文字块文字块 示例：示例：示例：示例：P ALIGN right”网页制作网页制作网页制作网页制作

27、P ALIGN center”网页制作网页制作网页制作网页制作 （5 5）单相标签）单相标签）单相标签）单相标签-换行标记：换行标记：换行标记：换行标记：示例：示例：示例：示例：P ALIGN right”网页制作网页制作网页制作网页制作 网站管理网站管理网站管理网站管理 （6 6）居中对齐标记）居中对齐标记）居中对齐标记）居中对齐标记：文字文字文字文字 示例：示例：示例：示例：网页制作网页制作网页制作网页制作 （7 7）注释标记：）注释标记：）注释标记：）注释标记：!或或或或 !示例：示例：示例：示例：!4/20/202331 HTML文档的基本结构 例例例例1 1 显示显示显示显示“欢迎您

28、来到欢迎您来到欢迎您来到欢迎您来到HTMLHTML世界世界世界世界”例例例例1 1 1 1 欢迎您来到欢迎您来到欢迎您来到欢迎您来到HTMLHTMLHTMLHTML世界世界世界世界 假设该文档的文件名为假设该文档的文件名为假设该文档的文件名为假设该文档的文件名为“Welcome.htmWelcome.htm”，存放在当前站点中，存放在当前站点中，存放在当前站点中，存放在当前站点中 14/20/202332 例例例例2 2 建立含有两个网页链接的建立含有两个网页链接的建立含有两个网页链接的建立含有两个网页链接的HTMLHTML文档文档文档文档 例例例例2 2 2 2 A HREF=A HREF=

29、A HREF=欢迎您欢迎您欢迎您欢迎您 A HREF=A HREF=A HREF=浏览北大浏览北大浏览北大浏览北大 其中其中其中其中:表示分段表示分段表示分段表示分段 表示插入超级链接表示插入超级链接表示插入超级链接表示插入超级链接思考：本例中两个链接分别是链接三种情况中的哪种？思考：本例中两个链接分别是链接三种情况中的哪种？思考：本例中两个链接分别是链接三种情况中的哪种？思考：本例中两个链接分别是链接三种情况中的哪种？4/20/202333 例3 显示唐诗游子吟n n n n 一首唐诗一首唐诗一首唐诗一首唐诗n n n n BODY =#cc9999 n n n n游子吟游子吟游子吟游子吟

30、n nn n 慈母手中线，游子身上衣。慈母手中线，游子身上衣。慈母手中线，游子身上衣。慈母手中线，游子身上衣。n n 临行密密缝，意恐迟迟归。临行密密缝，意恐迟迟归。临行密密缝，意恐迟迟归。临行密密缝，意恐迟迟归。n n 谁言寸草心，报得三春晖。谁言寸草心，报得三春晖。谁言寸草心，报得三春晖。谁言寸草心，报得三春晖。n n n n 4/20/202334 例4 显示唐诗静夜思n n n n 静夜思静夜思静夜思静夜思 n n 静夜思静夜思静夜思静夜思 n n(唐诗唐诗唐诗唐诗)n n FONT SIZE=5 FACE=COLOR=REDn n 床前明月光，疑是地上霜。床前明月光，疑是地上霜。床前

31、明月光，疑是地上霜。床前明月光，疑是地上霜。n n FONT SIZE=5 FACE=COLOR=DARKBLUEn n nbsp 举头望明月，低头思故乡。举头望明月，低头思故乡。举头望明月，低头思故乡。举头望明月，低头思故乡。n n n n n n注：注：注：注： nbsp 的作用！的作用！的作用！的作用！4/20/202335 网页脚本语言初步认识 脚本脚本脚本脚本(Script(Script）实际上就是一段程序，用来完成某些实际上就是一段程序，用来完成某些实际上就是一段程序，用来完成某些实际上就是一段程序，用来完成某些特殊的功能特殊的功能特殊的功能特殊的功能(主要是让它完

32、成主要是让它完成主要是让它完成主要是让它完成HTMLHTML不能做的事不能做的事不能做的事不能做的事)两种脚本：服务器端脚本和客户端脚本两种脚本：服务器端脚本和客户端脚本两种脚本：服务器端脚本和客户端脚本两种脚本：服务器端脚本和客户端脚本 客户端脚本程序可以直接嵌入到客户端脚本程序可以直接嵌入到客户端脚本程序可以直接嵌入到客户端脚本程序可以直接嵌入到HTMLHTML文档中，并文档中，并文档中，并文档中，并由客户浏览器解释执行由客户浏览器解释执行由客户浏览器解释执行由客户浏览器解释执行(可减轻服务器的负荷可减轻服务器的负荷可减轻服务器的负荷可减轻服务器的负荷)脚本语言有脚本语言有脚本语言有脚本语

33、言有VBScriptVBScript、JavaScriptJavaScript。VBScriptVBScript由由由由McrosoftMcrosoft公司开发，基于公司开发，基于公司开发，基于公司开发，基于Visual BASICVisual BASIC4/20/202336 H=HOUR(TIME()H=HOUR(TIME()求出系统时间的小时数求出系统时间的小时数求出系统时间的小时数求出系统时间的小时数 IF H12 THEN IF H12 THEN 判断时数是否小于判断时数是否小于判断时数是否小于判断时数是否小于1212 DOCUMENT.WRITE(DOCUMENT.WRITE(早上

34、好早上好早上好早上好 !)!)ELSE ELSE IF H18 THEN IF H18 THEN 再判断时数是否小于再判断时数是否小于再判断时数是否小于再判断时数是否小于1818 DOCUMENT.WRITE(DOCUMENT.WRITE(下午好下午好下午好下午好 !)!)ELSE ELSE DOCUMENT.WRITE(DOCUMENT.WRITE(晚上好晚上好晚上好晚上好 !)!)END IF END IF END IF END IF 也可以增加时间段，如文件夹中的也可以增加时间段，如文件夹中的也可以增加时间段，如文件夹中的也可以增加时间段，如文件夹中的例例例例5-25-2。例5 根据不同

35、的时间段在网页上发出问候语，如“早上好”等4/20/202337 Exercise 1 1tell the difference between tell the difference between and in HTML and in HTML language.language.2 what will show in the IE window according to the 2 what will show in the IE window according to the following HTML:following HTML:电视指南电视指南 A HREF=“”本地电视本地电视 A HREF=“http:/”湖南卫视湖南卫视 4/20/202338 Exercise 3 Write down the corresponding HTML language.3 Write down the corresponding HTML language.(exercise.htmlexercise.html)