1、1,Electronic Commerce电子商务,2,第四章 电子商务网站建设与电子商务开发的前台技术2,3,Review,页面的层次结构：一级页面、二级页面、三级页面无论是复杂的商业网站，还是简单的个人网站，在网页的层次结构上都存在一些共同点，即任何一个网站均可用三层结构实现，也就是：首页栏目页文章页（内容页）或一级页面二级页面三级页面。,4,本节课的目标,简单了解一下站点、网页、主页等概含了解网页的制作工具的特点学习制作简单网页,5,站点与网页,网站 ：1、是计算机网络上的位置 2、有各种信息,网页是网站的其本组成文件，可以包含文本、图片、动画、音乐、链接等元素,可以把一个网站想像成一个
2、国家：它首先有一位置；其二包含各种内容,6,网页 与主页,主页组成与一般网页一样，核心是html语言使用浏览器访问网站时，网站中第一个被执行的文件称为主页，主页的基本功能是帮助访问者轻松浏览网站,如把网站比成一本书，则网页为书中的每一张，而主页为书的目录页,7,制作工具,可以用任何文字编辑工具制作网页 前提是熟练掌握html语言现在出现了不用面对语言的工具软件如frontpage、还有flash、dreamweave,8,要想学做网页，首先得了解制作网页的工具。 制作网页主要有以下一些工具 Frontpage，操作简单，实用，学起来比较轻松。 Dreamweaver：这是网页三剑客之一，专门制
3、作网页的工具，可以自动将网页生成代码，是普通网页制作者的首选工具，界面简单，实用功能比较强大。建议初学者选用。 另外一个工具就是代码编辑工具，例如写字本、EditPlus等，这些工具主要编辑asp等动态网页。 此外还有一些网络编程工具，javascript、java编辑器等。 要真正做一个好的网站，还必须有良好的设计功底。所以还得学很多边缘性的软件，例如photoshop、flash等。 大型的网站往往还需要数据库的支持，所以还得懂数据库。,制作工具,9,不要忘记加入网页的titletitle是显示在浏览器标题栏的文字，在网页下载时，它是最先出现的，所以你可以用它提示网页的主要内容，或者写些欢
4、迎的话 将首页命名为index.htm这是规定，没什么好多说的，哪页一旦被取名叫index.htm以后，等整个网站上传了以后，它就是别人用你的网址看到你网站的第一页 。,网页制作基础知识,10,将所有文件的文件名统一格式用英文字母或数字。图片应使用.gif 和.jpg (jpeg)格式这是两种位图文件格式，在同样的视觉清晰度下，文件量往往比其他文件格式小，也就是说在网上下载的时候时间会更短。用链接连接各个页面建议这步最后做，先将各个页面的其它部分做好,网页制作基础知识,11,用dreamweave制作网页的过程,先建立站点然后添加网页然后添加内容,12,站点结构,13,各网页之间通过“超链接”
5、，构成一个整体,14,超级链接有三种情况。another location in the 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),15,例：设计、制作以校园生活为内容的网站,学习目的：1.掌握有关网页制作的基本知识。包括：站点、网页、HTML语言、网页的各种元
6、素特性以及超链接等知识。2.掌握制作简单网页的方法和技巧。,返回,16,根据需要，确定网站首页包括“校园新闻”、“网上学园”、“课余生活”、“资源下载”、“友情链接”、“留言板”共六大板块，接下来进行站点各页面的规划。,站点的规划,17,校园新闻,网上学园,课余生活,资源下载,留言板,校园趣话,校园文学,音乐无限,娱乐新闻,体育新闻,首页,站点的规划,18,进行了网站的规划、相关信息资料的收集后，接下来的任务就是建立站点。要建立一个找点，就要选定创建站点、制作网页的工具，即网页制作软件。网页制作软件非常多，现在比较流行的有Dreamweaver, FrontPage等工具软件。,返回,选择网页
7、制作软件,19,某教育网主页,网站名和网站LOGO,导航区,网页内容,20,HTML语言 标记性语言。用来编制网页文档(也称HTML文档) 。并不需要经过编译，只需要通过浏览器来打开就可以看到结果 采用了标记方式，描述了每个在网页上的组件，例如文本段落、文本格式、图像、超链接等 通过超文本链接能方便地进行各种信息之间切换,21,网页制作的基础是HTML语言 HTML是一种超文本置标语言，是一种标记语言，而不是编程语言 为了提高网页制作(特别是动态网页制作)的技术水平，就有必要了解、熟悉甚至精通HTML语言及脚本语言,22,HTML文档的编辑,编辑操作 Word： “视图”“HTML源文件” I
8、E5： “查看” “源文件” FrontPage或者dreamwaver：单击“HTML”按钮 进入FrontPage 的HTML编辑状态 其他编辑器(如记事本, 写字板等) 不区分大小写,23,HTML文档的基本结构,(1) 每个HTML文档(网页)以标记开始，以结束 四种基本标记如下： 标明文档的开始和结束，定义文档 标明文档的头部 标明标题，显示在浏览器的标题栏中 标明文档的主体 (2) HTML文档一般由两部分组成：头部和主体,24,(3) 标记以“”及标记名组成 双边标记： 示例： . ,25,常用的一些标记,（1）标题标记： 标题文字 示例： 网页制作 H1到H3字体逐渐变小。 （
9、2）文字标记： 文字 设置文字的大小、字体及颜色 示例： 网页制作 （3）BODY标记的TEXT属性及BGCOLOR属性： 文字 设定整个网页的文字颜色和背景颜色 示例： 网页制作 ,26,常用的一些标记,（4）段落标记： 文字块 示例： 网页制作 网页制作 （5）单相标签-换行标记： 示例： 网页制作 网站管理 （6）居中对齐标记： 文字 示例： 网页制作 （7）注释标记： 或 示例：,27,HTML文档的基本结构,例1 显示“欢迎您来到HTML世界” 例1 欢迎您来到HTML世界 假设该文档的文件名为“Welcome.htm” ，存放在当前站点中,1,28,例2 建立含有两个网页链接的HT
10、ML文档 例2 欢迎您 浏览北大 其中: 表示分段 表示插入超级链接思考：本例中两个链接分别是链接三种情况中的哪种？,29,例3 显示唐诗游子吟, 一首唐诗 游子吟 慈母手中线，游子身上衣。 临行密密缝，意恐迟迟归。 谁言寸草心，报得三春晖。 ,30,例4 显示唐诗静夜思, 静夜思 静夜思 (唐诗) 床前明月光，疑是地上霜。 举头望明月，低头思故乡。 注： 的作用！,31,网页脚本语言初步认识,脚本(Script）实际上就是一段程序，用来完成某些特殊的功能(主要是让它完成HTML不能做的事)两种脚本：服务器端脚本和客户端脚本 客户端脚本程序可以直接嵌入到HTML文档中，
11、并由客户浏览器解释执行(可减轻服务器的负荷) 脚本语言有VBScript、JavaScript。 VBScript由Mcrosoft公司开发，基于Visual BASIC,32, H=HOUR(TIME() 求出系统时间的小时数 IF H 也可以增加时间段，如文件夹中的例5-2。,例5 根据不同的时间段在网页上发出问候语，如“早上好”等,33,Exercise,tell the difference between and in HTML language.2 what will show in the IE window according to the following HTML: 电视指南 本地电视 湖南卫视 ,34,Exercise,3 Write down the corresponding HTML language. ( exercise.html),
