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

Electronic Commerce Electronic Commerce电子商务电子商务2/19/20232第四章第四章 电子商务网站建设与电电子商务网站建设与电子商务开发的前台技术子商务开发的前台技术22/19/20233Reviewn n页面的层次结构：一级页面、二级页面、三级页面页面的层次结构：一级页面、二级页面、三级页面页面的层次结构：一级页面、二级页面、三级页面页面的层次结构：一级页面、二级页面、三级页面n n无论是复杂的商业网站，还是简单的个人网站，无论是复杂的商业网站，还是简单的个人网站，无论是复杂的商业网站，还是简单的个人网站，无论是复杂的商业网站，还是简单的个人网站，在网页的层次结构上都存在一些共同点，即任何一在网页的层次结构上都存在一些共同点，即任何一在网页的层次结构上都存在一些共同点，即任何一在网页的层次结构上都存在一些共同点，即任何一个网站均可用三层结构实现，也就是：个网站均可用三层结构实现，也就是：个网站均可用三层结构实现，也就是：个网站均可用三层结构实现，也就是：n n首页栏目页文章页（内容页）首页栏目页文章页（内容页）首页栏目页文章页（内容页）首页栏目页文章页（内容页）n n或一级页面二级页面三级页面。或一级页面二级页面三级页面。或一级页面二级页面三级页面。或一级页面二级页面三级页面。2/19/20234本节课的目标本节课的目标n简单了解一下站点、网页、主页简单了解一下站点、网页、主页等概含等概含n了解网页的制作工具的特点了解网页的制作工具的特点n学习制作简单网页学习制作简单网页2/19/20235站点与网页站点与网页n网站网站 ：1 1、是计算机网络上的位置、是计算机网络上的位置 2 2、有各种信息、有各种信息 网页是网站的其本组成文件，可网页是网站的其本组成文件，可以包含文本、图片、动画、音乐、以包含文本、图片、动画、音乐、链接等元素链接等元素 可以把一个网站想像成一个国家：它首可以把一个网站想像成一个国家：它首先有一位置；其二包含各种内容先有一位置；其二包含各种内容2/19/20236网页网页 与主页与主页n n主页组成与一般网页一样，核心是主页组成与一般网页一样，核心是htmlhtml语语言言n n使用浏览器访问网站时，网站中第一个被使用浏览器访问网站时，网站中第一个被执行的文件称为主页，主页的基本功能是执行的文件称为主页，主页的基本功能是帮助访问者轻松浏览网站帮助访问者轻松浏览网站 如把网站比成一本书，则网页为书中的每如把网站比成一本书，则网页为书中的每一张，而主页为书的目录页一张，而主页为书的目录页2/19/20237制作工具制作工具n n可以用任何文字编辑工具制作网页 前提是熟练掌握html语言n nn n现在出现了不用面对语言的工具软件如frontpage、还有flash、dreamweave2/19/20238要想学做网页，首先得了解制作网页的工具。要想学做网页，首先得了解制作网页的工具。制作网页主要制作网页主要有以下一些工具有以下一些工具 Frontpage，操作简单，实用，学起来比较轻松。，操作简单，实用，学起来比较轻松。Dreamweaver：这是网页三剑客之一，专门制作网页的工具，：这是网页三剑客之一，专门制作网页的工具，可以自动将网页生成代码，是普通网页制作者的首选工具，界面可以自动将网页生成代码，是普通网页制作者的首选工具，界面简单，实用功能比较强大。建议初学者选用。简单，实用功能比较强大。建议初学者选用。另外一个工具就是代码编辑工具，例如写字本、另外一个工具就是代码编辑工具，例如写字本、EditPlus等，等，这些工具主要编辑这些工具主要编辑asp等动态网页。等动态网页。此外还有一些网络编程工具，此外还有一些网络编程工具，javascript、java编辑器等。编辑器等。要真正做一个好的网站，还必须有良好的设计功底。所以还要真正做一个好的网站，还必须有良好的设计功底。所以还得学很多边缘性的软件，例如得学很多边缘性的软件，例如photoshop、flash等。等。大型的网站大型的网站往往还需要数据库的支持，所以还得懂数据库。往往还需要数据库的支持，所以还得懂数据库。制作工具制作工具2/19/20239不要忘不要忘记加入网加入网页的的titletitle是是显示在示在浏览器器标题栏的文字，在的文字，在网网页下下载时，它是最先出，它是最先出现的，所以你可以的，所以你可以用它提示网用它提示网页的主要内容，或者写些的主要内容，或者写些欢迎的迎的话 将首将首页命名命名为index.htm这是是规定，没什么好多定，没什么好多说的，哪的，哪页一旦一旦被取名叫被取名叫index.htm以后，等整个网站上以后，等整个网站上传了了以后，它就是以后，它就是别人用你的网址看到你网站的人用你的网址看到你网站的第一第一页。网页制作基础知识网页制作基础知识2/19/202310将所有文件的文件名将所有文件的文件名统一格式用英文字母或数字。一格式用英文字母或数字。图片片应使用使用.gif 和和.jpg(jpeg)格式格式这是两种位是两种位图文件格式，在同文件格式，在同样的的视觉清晰度下，文件量清晰度下，文件量往往比其他文件格式小，也就是往往比其他文件格式小，也就是说在网上下在网上下载的的时候候时间会更会更短。短。用用链接接连接各个接各个页面面建建议这步最后做，先将各个步最后做，先将各个页面的其它部分做好面的其它部分做好 网页制作基础知识网页制作基础知识2/19/202311用用dreamweave制作网页的过程制作网页的过程n n先建立站点n n然后添加网页n n然后添加内容2/19/202312 网页文件网页文件2如如Photo.htm站点站点视频素材视频素材图片素材图片素材网页文件网页文件1如如Interest.htm主页文件主页文件 Index.htm声音素材声音素材站点结构站点结构2/19/202313 主页主页网页网页网页网页网页网页网页网页网页网页网页网页超链接超链接各网页之间通过各网页之间通过“超链接超链接”，构成一个整体，构成一个整体2/19/202314n n超级链接有三种情况。another location in the same documentanother location in 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 Internetanother document on the Internet (from SCU to SINA)(from SCU to SINA)2/19/202315例：设计、制作以校园生活为内容的网站例：设计、制作以校园生活为内容的网站学习目的：学习目的：1.1.掌握有关网页制作的基本知识。包括：站点、网页、掌握有关网页制作的基本知识。包括：站点、网页、HTMLHTML语言、网页的各种元素特性以及超链接等知识。语言、网页的各种元素特性以及超链接等知识。2.2.掌握制作简单网页的方法和技巧。掌握制作简单网页的方法和技巧。返回2/19/202316根据需要，确定网站根据需要，确定网站首页包括首页包括“校园新闻校园新闻”、“网上学园网上学园”、“课余生活课余生活”、“资资源下载源下载”、“友情链友情链接接”、“留言板留言板”共共六大板块，接下来进六大板块，接下来进行站点各页面的规划。行站点各页面的规划。标题校园新闻 友友 情情 链链 接接网上学园网上学园资源下载资源下载课余生活课余生活留言板留言板站点站点的规划的规划2/19/202317校园新闻校园新闻网上学园网上学园课余生活课余生活 资源下载资源下载 留言板留言板 校园趣话校园趣话 校园文学校园文学 音乐无限音乐无限 娱乐新闻娱乐新闻 体育新闻体育新闻 首页首页站点站点的规划的规划2/19/202318 进行了网站的规划、相关信息资料的收集后，接下来的任务进行了网站的规划、相关信息资料的收集后，接下来的任务就是建立站点。要建立一个找点，就要选定创建站点、制作网就是建立站点。要建立一个找点，就要选定创建站点、制作网页的工具，即网页制作软件。网页制作软件非常多，现在比较页的工具，即网页制作软件。网页制作软件非常多，现在比较流行的有流行的有Dreamweaver,FrontPage等工具软件。等工具软件。返回选择网页制作软件选择网页制作软件2/19/202319某教育网主页某教育网主页网站名和网网站名和网站站LOGO导航区网页内容2/19/202320 HTML语言语言 标记性语言。用来编制网页文档标记性语言。用来编制网页文档(也称也称HTML文档文档)。并不需要经过编译，只需要通过。并不需要经过编译，只需要通过浏览器来打开就可以看到结果浏览器来打开就可以看到结果 采用了标记方式，描述了每个在网页上的组采用了标记方式，描述了每个在网页上的组件，例如文本段落、文本格式、图像、超链接等件，例如文本段落、文本格式、图像、超链接等 通过超文本链接能方便地进行各种信息之间通过超文本链接能方便地进行各种信息之间切换切换2/19/202321 网页制作的基础是网页制作的基础是网页制作的基础是网页制作的基础是HTMLHTML语言语言语言语言 HTML HTML是一种超文本置标语言，是一种标记语是一种超文本置标语言，是一种标记语是一种超文本置标语言，是一种标记语是一种超文本置标语言，是一种标记语言，而不是编程语言言，而不是编程语言言，而不是编程语言言，而不是编程语言 为了提高网页制作为了提高网页制作为了提高网页制作为了提高网页制作(特别是动态网页制作特别是动态网页制作特别是动态网页制作特别是动态网页制作)的技的技的技的技术水平，就有必要了解、熟悉甚至精通术水平，就有必要了解、熟悉甚至精通术水平，就有必要了解、熟悉甚至精通术水平，就有必要了解、熟悉甚至精通HTMLHTML语言语言语言语言及脚本语言及脚本语言及脚本语言及脚本语言2/19/202322HTML文档的编辑 编辑操作编辑操作编辑操作编辑操作 WordWord：“视图视图视图视图”“HTML”“HTML源文件源文件源文件源文件”IE5 IE5：“查看查看查看查看”“”“源文件源文件源文件源文件”FrontPage FrontPage或者或者或者或者dreamwaverdreamwaver：单击：单击：单击：单击“HTML”“HTML”按钮按钮按钮按钮 进入进入进入进入FrontPage FrontPage 的的的的HTMLHTML编辑状态编辑状态编辑状态编辑状态 其他编辑器其他编辑器其他编辑器其他编辑器(如记事本如记事本如记事本如记事本,写字板等写字板等写字板等写字板等)不区分大小写不区分大小写不区分大小写不区分大小写 2/19/202323HTMLHTML文档的基本结构文档的基本结构 (1)(1)每个每个每个每个HTMLHTML文档文档文档文档(网页网页网页网页)以标记以标记以标记以标记开始，开始，开始，开始，以以以以结束结束结束结束 四四四四种基本标记如下：种基本标记如下：种基本标记如下：种基本标记如下：标明文档的开始和结束，定义文档标明文档的开始和结束，定义文档标明文档的开始和结束，定义文档标明文档的开始和结束，定义文档 标明文档的头部标明文档的头部标明文档的头部标明文档的头部 标明标题，显示在浏览器的标题栏标明标题，显示在浏览器的标题栏标明标题，显示在浏览器的标题栏标明标题，显示在浏览器的标题栏中中中中 标明文档的主体标明文档的主体标明文档的主体标明文档的主体 (2)HTML(2)HTML文档一般由两部分组成：头部和主体文档一般由两部分组成：头部和主体文档一般由两部分组成：头部和主体文档一般由两部分组成：头部和主体 2/19/202324 (3)(3)标记以标记以标记以标记以“”“”“”及标记名组成及标记名组成及标记名组成及标记名组成 双边标记：双边标记：双边标记：双边标记：示例：示例：示例：示例：.2/19/202325 常用的一些标记 （1 1）标题标记：）标题标记：）标题标记：）标题标记：Hn ALIGN”#”标题文字标题文字标题文字标题文字 示例：示例：示例：示例：网页制作网页制作网页制作网页制作 H1 H1到到到到H3H3字体逐渐变小。字体逐渐变小。字体逐渐变小。字体逐渐变小。（2 2）文字标记：）文字标记：）文字标记：）文字标记：FONT SIZE ”#”文字文字文字文字 设置文字的大小、字体及颜色设置文字的大小、字体及颜色设置文字的大小、字体及颜色设置文字的大小、字体及颜色 示例：示例：示例：示例：FONT SIZE”网页网页网页网页制作制作制作制作 （3 3）BODYBODY标记的标记的标记的标记的TEXTTEXT属性及属性及属性及属性及BGCOLORBGCOLOR属性：属性：属性：属性：BODY BGCOLOR ”#-”文字文字文字文字 设定整个网页的文字颜色和背景颜色设定整个网页的文字颜色和背景颜色设定整个网页的文字颜色和背景颜色设定整个网页的文字颜色和背景颜色 示例：示例：示例：示例：BODY text”#634000”网页制作网页制作网页制作网页制作 2/19/202326 常用的一些标记 （4 4）段落标记）段落标记）段落标记）段落标记：P ALIGN”#”文字块文字块文字块文字块 示例：示例：示例：示例：P ALIGN”right”网页制作网页制作网页制作网页制作 P ALIGN ”center”网页制作网页制作网页制作网页制作 （5 5）单相标签）单相标签）单相标签）单相标签-换行标记：换行标记：换行标记：换行标记：示例：示例：示例：示例：P ALIGN ”right”网页制作网页制作网页制作网页制作 网站管理网站管理网站管理网站管理 （6 6）居中对齐标记）居中对齐标记）居中对齐标记）居中对齐标记：文字文字文字文字 示例：示例：示例：示例：网页制作网页制作网页制作网页制作 （7 7）注释标记：）注释标记：）注释标记：）注释标记：!或或或或 !示例：示例：示例：示例：!2/19/202327 HTML文档的基本结构 例例例例1 1 显示显示显示显示“欢迎您来到欢迎您来到欢迎您来到欢迎您来到HTMLHTML世界世界世界世界”例例例例1 1 1 1 欢迎您来到欢迎您来到欢迎您来到欢迎您来到HTMLHTMLHTMLHTML世界世界世界世界 假设该文档的文件名为假设该文档的文件名为假设该文档的文件名为假设该文档的文件名为“Welcome.htm”“Welcome.htm”，存放在当前站点中，存放在当前站点中，存放在当前站点中，存放在当前站点中 12/19/202328 例例例例2 2 建立含有两个网页链接的建立含有两个网页链接的建立含有两个网页链接的建立含有两个网页链接的HTMLHTML文档文档文档文档 例例例例2 2 2 2 欢迎您欢迎您欢迎您欢迎您 A HREF=“A HREF=“A HREF=“”浏览北大浏览北大浏览北大浏览北大 其中其中其中其中:表示分段表示分段表示分段表示分段 表示插入超级链接表示插入超级链接表示插入超级链接表示插入超级链接思考：本例中两个链接分别是链接三种情况中的哪种？思考：本例中两个链接分别是链接三种情况中的哪种？思考：本例中两个链接分别是链接三种情况中的哪种？思考：本例中两个链接分别是链接三种情况中的哪种？2/19/202329 例3 显示唐诗游子吟n n n n 一首唐诗一首唐诗一首唐诗一首唐诗n n n n n n n n游子吟游子吟游子吟游子吟 n nn n 慈母手中线，游子身上衣。慈母手中线，游子身上衣。慈母手中线，游子身上衣。慈母手中线，游子身上衣。n n 临行密密缝，意恐迟迟归。临行密密缝，意恐迟迟归。临行密密缝，意恐迟迟归。临行密密缝，意恐迟迟归。n n 谁言寸草心，报得三春晖。谁言寸草心，报得三春晖。谁言寸草心，报得三春晖。谁言寸草心，报得三春晖。n n n n 2/19/202330 例4 显示唐诗静夜思n n n n 静夜思静夜思静夜思静夜思 n n 静夜思静夜思静夜思静夜思 n n(唐诗唐诗唐诗唐诗)n n FONT SIZE=5 FACE=COLOR=REDn n 床前明月光，疑是地上霜。床前明月光，疑是地上霜。床前明月光，疑是地上霜。床前明月光，疑是地上霜。n n FONT SIZE=5 FACE=COLOR=DARKBLUEn n&nbsp&nbsp 举头望明月，低头思故乡。举头望明月，低头思故乡。举头望明月，低头思故乡。举头望明月，低头思故乡。n n n n n n注：注：注：注：&nbsp&nbsp 的作用！的作用！的作用！的作用！2/19/202331 网页脚本语言初步认识 脚本脚本脚本脚本(Script(Script）实际上就是一段程序，用来完成某些）实际上就是一段程序，用来完成某些）实际上就是一段程序，用来完成某些）实际上就是一段程序，用来完成某些特殊的功能特殊的功能特殊的功能特殊的功能(主要是让它完成主要是让它完成主要是让它完成主要是让它完成HTMLHTML不能做的事不能做的事不能做的事不能做的事)两种脚本：服务器端脚本和客户端脚本两种脚本：服务器端脚本和客户端脚本两种脚本：服务器端脚本和客户端脚本两种脚本：服务器端脚本和客户端脚本 客户端脚本程序可以直接嵌入到客户端脚本程序可以直接嵌入到客户端脚本程序可以直接嵌入到客户端脚本程序可以直接嵌入到HTMLHTML文档中，并文档中，并文档中，并文档中，并由客户浏览器解释执行由客户浏览器解释执行由客户浏览器解释执行由客户浏览器解释执行(可减轻服务器的负荷可减轻服务器的负荷可减轻服务器的负荷可减轻服务器的负荷)脚本语言有脚本语言有脚本语言有脚本语言有VBScriptVBScript、JavaScriptJavaScript。VBScript VBScript由由由由McrosoftMcrosoft公司开发，基于公司开发，基于公司开发，基于公司开发，基于Visual BASICVisual BASIC2/19/202332 H=HOUR(TIME()H=HOUR(TIME()求出系统时间的小时数求出系统时间的小时数求出系统时间的小时数求出系统时间的小时数 IF H12 THEN IF H12 THEN 判断时数是否小于判断时数是否小于判断时数是否小于判断时数是否小于1212 DOCUMENT.WRITE(DOCUMENT.WRITE(早上好早上好早上好早上好!)!)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 根据不同的时间段在网页上发出问候语，如“早上好”等2/19/202333 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:电视指南电视指南 /TITLE A HREF ”本地电视本地电视 A HREF=“http :/ 2/19/202334 Exercise 1.1.3 Write3 Write down the corresponding HTML language.down the corresponding HTML language.2.2.3.3.(exercise.htmlexercise.html)4.4.