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

《电子商务开发的前台技术.ppt》由会员分享，可在线阅读，更多相关《电子商务开发的前台技术.ppt（34页珍藏版）》请在三一办公上搜索。

1、Electronic Commerce电子商务,第四章 电子商务网站建设与电子商务开发的前台技术2,Review,页面的层次结构：一级页面、二级页面、三级页面无论是复杂的商业网站，还是简单的个人网站，在网页的层次结构上都存在一些共同点，即任何一个网站均可用三层结构实现，也就是：首页栏目页文章页（内容页）或一级页面二级页面三级页面。,本节课的目标,简单了解一下站点、网页、主页等概含了解网页的制作工具的特点学习制作简单网页,站点与网页,网站：1、是计算机网络上的位置 2、有各种信息,网页是网站的其本组成文件，可以包含文本、图片、动画、音乐、链接等元素,可以把一个网站想像成一个国家：它首先有一位置；

2、其二包含各种内容,网页 与主页,主页组成与一般网页一样，核心是html语言使用浏览器访问网站时，网站中第一个被执行的文件称为主页，主页的基本功能是帮助访问者轻松浏览网站,如把网站比成一本书，则网页为书中的每一张，而主页为书的目录页,制作工具,可以用任何文字编辑工具制作网页 前提是熟练掌握html语言现在出现了不用面对语言的工具软件如frontpage、还有flash、dreamweave,要想学做网页，首先得了解制作网页的工具。制作网页主要有以下一些工具 Frontpage，操作简单，实用，学起来比较轻松。Dreamweaver：这是网页三剑客之一，专门制作网页的工具，可以自动将网页生成代码，

3、是普通网页制作者的首选工具，界面简单，实用功能比较强大。建议初学者选用。另外一个工具就是代码编辑工具，例如写字本、EditPlus等，这些工具主要编辑asp等动态网页。此外还有一些网络编程工具，javascript、java编辑器等。要真正做一个好的网站，还必须有良好的设计功底。所以还得学很多边缘性的软件，例如photoshop、flash等。大型的网站往往还需要数据库的支持，所以还得懂数据库。,制作工具,不要忘记加入网页的titletitle是显示在浏览器标题栏的文字，在网页下载时，它是最先出现的，所以你可以用它提示网页的主要内容，或者写些欢迎的话 将首页命名为index.htm这是规定，没

4、什么好多说的，哪页一旦被取名叫index.htm以后，等整个网站上传了以后，它就是别人用你的网址看到你网站的第一页。,网页制作基础知识,将所有文件的文件名统一格式用英文字母或数字。图片应使用.gif 和.jpg(jpeg)格式这是两种位图文件格式，在同样的视觉清晰度下，文件量往往比其他文件格式小，也就是说在网上下载的时候时间会更短。用链接连接各个页面建议这步最后做，先将各个页面的其它部分做好,网页制作基础知识,用dreamweave制作网页的过程,先建立站点然后添加网页然后添加内容,站点结构,各网页之间通过“超链接”，构成一个整体,超级链接有三种情况。another location in t

5、he same document(from TOP of the page to BOTTOM of the page)another document on the same host machine(another webpage in a folder on my pc)another document on the Internet(from SCU to SINA),例：设计、制作以校园生活为内容的网站,学习目的：1.掌握有关网页制作的基本知识。包括：站点、网页、HTML语言、网页的各种元素特性以及超链接等知识。2.掌握制作简单网页的方法和技巧。,返回,根据需要，确定网站首页包括“校

6、园新闻”、“网上学园”、“课余生活”、“资源下载”、“友情链接”、“留言板”共六大板块，接下来进行站点各页面的规划。,站点的规划,校园新闻,网上学园,课余生活,资源下载,留言板,校园趣话,校园文学,音乐无限,娱乐新闻,体育新闻,首页,站点的规划,进行了网站的规划、相关信息资料的收集后，接下来的任务就是建立站点。要建立一个找点，就要选定创建站点、制作网页的工具，即网页制作软件。网页制作软件非常多，现在比较流行的有Dreamweaver,FrontPage等工具软件。,返回,选择网页制作软件,某教育网主页,网站名和网站LOGO,导航区,网页内容,HTML语言 标记性语言。用来编制网页文档(也称HT

7、ML文档)。并不需要经过编译，只需要通过浏览器来打开就可以看到结果 采用了标记方式，描述了每个在网页上的组件，例如文本段落、文本格式、图像、超链接等 通过超文本链接能方便地进行各种信息之间切换,网页制作的基础是HTML语言 HTML是一种超文本置标语言，是一种标记语言，而不是编程语言 为了提高网页制作(特别是动态网页制作)的技术水平，就有必要了解、熟悉甚至精通HTML语言及脚本语言,HTML文档的编辑,编辑操作 Word：“视图”“HTML源文件”IE5：“查看”“源文件”FrontPage或者dreamwaver：单击“HTML”按钮 进入FrontPage 的HTML编辑状态 其他编辑器(

8、如记事本,写字板等)不区分大小写,HTML文档的基本结构,(1)每个HTML文档(网页)以标记开始，以结束 四种基本标记如下：标明文档的开始和结束，定义文档 标明文档的头部 标明标题，显示在浏览器的标题栏中 标明文档的主体(2)HTML文档一般由两部分组成：头部和主体,(3)标记以“”及标记名组成 双边标记：示例：.,常用的一些标记,（1）标题标记：标题文字 示例：网页制作 H1到H3字体逐渐变小。（2）文字标记：文字 设置文字的大小、字体及颜色 示例：网页制作（3）BODY标记的TEXT属性及BGCOLOR属性：文字 设定整个网页的文字颜色和背景颜色 示例：网页制作,常用的一些标记,（4）段

9、落标记：文字块 示例：网页制作 网页制作（5）单相标签-换行标记：示例：网页制作 网站管理（6）居中对齐标记：文字 示例：网页制作（7）注释标记：或 示例：,HTML文档的基本结构,例1 显示“欢迎您来到HTML世界”例1 欢迎您来到HTML世界 假设该文档的文件名为“Welcome.htm”，存放在当前站点中,1,例2 建立含有两个网页链接的HTML文档 例2 欢迎您 浏览北大 其中:表示分段 表示插入超级链接思考：本例中两个链接分别是链接三种情况中的哪种？,例3 显示唐诗游子吟,一首唐诗 游子吟 慈母手中线，游子身上衣。临行密密缝，意恐迟迟归。谁言寸草心，报得三春晖。,例4 显示唐诗静夜思

10、,静夜思 静夜思(唐诗)床前明月光，疑是地上霜。  举头望明月，低头思故乡。注：  的作用！,网页脚本语言初步认识,脚本(Script）实际上就是一段程序，用来完成某些特殊的功能(主要是让它完成HTML不能做的事)两种脚本：服务器端脚本和客户端脚本 客户端脚本程序可以直接嵌入到HTML文档中，并由客户浏览器解释执行(可减轻服务器的负荷)脚本语言有VBScript、JavaScript。VBScript由Mcrosoft公司开发，基于Visual BASIC,H=HOUR(TIME()求出系统时间的小时数 IF H 也可以增加时间段，如文件夹中的例5-2。,例5 根据不同的时间段在网页上发出问候语，如“早上好”等,Exercise,tell the difference between and in HTML language.2 what will show in the IE window according to the following HTML:电视指南 本地电视 湖南卫视,Exercise,3 Write down the corresponding HTML language.(exercise.html),