第四章++电子商务网站建设.ppt

第四章电子商务网站建设，4.1网页和HTML4.2“所见即所得”网页制作工具4.3网页动态效果4.4网站发布4.5数据库和动态网页设计4.6电子商务网站要求4.7摘要练习，4.1网页和HTML，4.1.1制作第一个网页示例4-1用HTML制作网页。第一个网页，我们用记事本来制作。记事本是一个内置于视窗系列中的文本编辑器，用于创建简单的文档。它主要用于处理扩展名为的文本文件。 txt 。具体制作过程如下：用鼠标点击“开始”“程序”“附件”“记事本”打开记事本。在记事本的编辑区，请写下下面的文字(注意“使用英文标点”)，并显示在记事本中，如图4-1所示。大家好！大家好！这是我们制作的第一个网页。点击超链接进入新浪，图4-1在记事本中编辑网页代码，在磁盘d的根目录下设置一个“我的网页”文件夹，并将编辑后的文本文件保存到该文件夹。注意，保存的文件名应该命名为“index.htm”，如图4-2所示。点击“保存”按钮后，在“我的网页”文件夹下，可以找到另一个带有“e”图标的文件。显然，这是我们刚刚编辑并保存的文件。双击文件图标，可以在浏览器中看到效果，这是一个简单的网页，如图4-3所示。图4-2保存在记事本中编辑的网页，图4-3浏览器中示例4-1的效果，以及图4.1.2超文本和HTML通过刚才的操作，您可能会问一个问题，什么是网页文件？为什么我可以用记事本编辑？它和一个带的文本文件有什么关系？“txt”分机？让我们逐一回答这些问题。事实上，网页文件的本质是文本文件，这就是为什么网页文件可以用记事本制作，但网页文件是一种特殊的文本文件，称为超文本文件。这里的“超级”主要是指超链接，即通过网页上嵌入的超链接可以跳转到其他位置的网页。网页“超文本”文件的扩展名为。“htm”或。 html ，它不同于扩展名为普通文本文件。 txt 。如果使用记事本打开，超文本文件将显示为文本。如果使用浏览器打开，它会显示为网页。事实上，当您使用浏览器打开网页文件时，也可以查看其文本文件的形式。单击浏览器工具栏上的“查看”“源文件”，用“记事本”打开网页的源文件，即文本形式的网页文件。在上面编辑的超文本文档中，我们输入的代码是用页面描述语言编写的，这种语言叫做超文本标记语言。换句话说，当创建一个网页时，我们需要使用超文本标记语言来描述网页。一般来说，我们认为网页、超文本文档和超文本标记语言文档的含义是相同的，它们是同一文档的不同标题。在上面创建的网页中，由“”括起的部分是HTML代码。我们称这个小单位为标签，也就是说，一个标签由少于“”的数字组成。超文本文件由标签和文本组成。标签在使用时不需要区分大小写。HTML标签分为单面标签和双面标签。任何成对出现的标记都是双边标记。显然，既然它成对出现，就必然有开始和结束。双边标记的开始标记和结束标记之间的区别在于，当结束标记小于数字“”时，结束标记完全相同。例如，超链接标签是双向标签。如果只有一个开始标记而没有结束标记，它就是一个单边标记。例如，换行标记是单边标记。让我们来看看，例4-1中的双边标记是什么？哪些单边标记？一个超文本标记语言文件应该有以下基本结构：超文本标记语言文件头开始文件头内容文件头结束文件体开始文件头内容文件体结束超文本标记语言文件尾，让我们具体解释一下上面三对标签的含义，并且是超文本标记语言文件的开始和结束标签，超文本标记语言文件中的所有内容都应该在这一对标签之间，一个超文本标记语言文件总是以和结束。标签通常位于文档的标题中，用于包含当前文档的相关信息，如标题和关键字。通常，我们将标签之间的内容称为HTML文件的“头”。一般来说，位于头部的内容不会直接显示在网页上，而是以另一种方式工作。例如，在我们创建的第一个网页中，标题的标签是在HTML的标题中定义的，它的内容不会出现在网页上，而是会出现在浏览器的标题栏上。和用于定义一个HTML文档的正文部分。通常，它跟在标记之后，在标记之前，网页上出现的所有正文内容都应该写在标记对之间。例如，在我们创建的第一个网页中，超链接标记出现在标记对的中间，并在浏览时显示在浏览器的网页浏览区域中。您可以根据上述方法检查网页的源文件，看看这些网页是否具有刚才提到的基本结构。除了这三对标签之外，在HTML文件中还有许多其他标签。这些标签可以被浏览器识别，这样就可以在浏览器中以某种方式显示HTML文件。如果读者对学习这些标签感兴趣，他们可以看看相关的HTML参考手册。4.1.3超媒体的一些读者可能会有疑问。既然网页是文本文件并且标有字符，为什么我们在网上冲浪时能在网页上看到丰富多彩的图片、动画、声音，有时还有视频？这是因为“超文本”文档还有另一个含义，“超媒体”。超文本和多媒体的结合产生了超媒体。事实上，最初的超媒体是超文本和多媒体的结合。简而言之，超媒体是通过允许超文本信息节点存储多媒体信息(图形、图像、音频、视频、动画和程序)并使用类似于超文本的机制来组织和管理它们而形成的。通过下面的例子，我们将了解超文本文档在浏览时是如何显示图片的。(示例4-2)超文本文档在浏览时显示图片。在以前构建的MyWeb文件夹下设置一个图像子文件夹，并在图像文件夹下存储一张图片。图片的扩展名必须为 。jpg or 。“gif”，图片名称不能包含中文字符(否则浏览器无法正确显示图片)。例如，在下面的示例中，我们在images文件夹下存储了一张文件名为“logo.jpg”的图片。然后，稍微修改示例4-1中的HTML代码，如下所示。大家好！大家好！这是我们制作的第一个网页。点击超链接进入新浪。保存文件后，浏览器中的浏览效果如图4-4所示。如您所见，图片已添加到网页中。在网页文件的HTML代码中，添加了图片的标签。这个标签的功能是告诉浏览器，当浏览器显示网页时，图片应该放在这里。这张图片位于存储网页的文件夹的子文件夹图像下，文件名称为logo.jpg。如果放置图片的文件名与本例中的不同，则只需修改文件名。图4-4示例4-2在浏览器中的效果，让我们比较一下在超文本页面中添加图片和在Word文档中添加图片的区别。在Word文档中，添加图片后，Word文档会将图片包含在文件中。即使删除了以前的图片文件，Word文档也可以正确显示图片。然而，超文本页面不包括图片，而是通过文本形式的标记告诉浏览器图片的存储路径，然后浏览器搜索图片文件并显示它。标签起到路标的作用，告诉浏览器图片文件应该放在哪里。如果图片文件被删除或图片路径错误，图片将无法在浏览器中正确显示，如图4-5所示。这表明超文本页面本身不包含图片，它只包含一个指示图片位置的标记，浏览器在浏览时调用图片。图4-5图片的效果不能在浏览器中正确显示。事实上，其他多媒体信息，如音频、视频、动画和其他程序也以类似的方式添加到网页中。超文本和多媒体的结合构成了我们在浏览网页时可以看到的丰富多彩的“超媒体”页面。4.2“所见即所得”网页制作工具，4.2.1“所见即所得”网页制作工具在第4.1节中，我们介绍了通过“记事本”制作网页的基本方法。这种制作网页的方法需要我们手动输入每个标签和标签的属性，然后通过浏览器，我们可以看到最终的页面效果。我们称之为“记事本”，一种需要手工标记的网页制作工具，一种标记网页的制作工具。除了记事本，还有一些更专业的标记网页制作工具，如热狗和可爱的网页。这些工具通常有内置的HTML参考手册，使用起来比记事本更方便，但仍然需要手动输入HTML代码。标记页面制作工具的主要优点是用户可以轻松控制代码。由于几乎每一行都是手动输入的，用户可以很好地掌握整个HTML文件的结构，同时确保代码最简洁，没有多余的组件。然而，标记网页制作工具的缺点也非常明显。首先，用户必须非常熟悉超文本标记语言，因为超文本标记语言的标签和标签属性非常多，对于普通用户来说，内存太大；其次，使用标记网页制作工具的效率太低，而电子商务网站通常有很多内容，更新速度很快。例如，ebay()主页上的HTML代码超过1000行。如果这些代码都是手工输入的，网站开发的过程是非常繁琐和乏味的，并且当出现错误时不容易被发现。此外，制作和排版不直观，难以控制，需要多次重复修改才能达到预期的效果。有没有办法让我们像在Word中处理电子文档一样创建网页？制作网页的过程能像在Word中打字和排版一样简单吗？答案是肯定的，我们可以通过“所见即所得”的网页制作工具来实现这个目标。所谓“所见即所得”(WYSIWYG)是指在编辑过程中创建的HTML文件和最终在浏览器中显示的文件是一样的，“所见即所得”(WYSIWYG)有时也称为“可视化”(Visual)。在使用“所见即所得”网页制作工具创建和编辑网页的整个过程中，制作人只需要知道如何格式化文本并将各种“超媒体”插入到网页中，所有其他细节都由编辑自动处理。所见即所得型网页制作工具使用类似于文字处理软件的工作界面，将“输入代码”转换为“绘图页”。编辑者可以在编辑过程中从屏幕上看到最终的页面效果。当然，您也可以在需要时查看相应的HTML文本。目前，两种流行的所见即所得网页制作工具是FrontPage和Dreamweaver。下面分别对这两个工具做一个简单的介绍，并使用FrontPage2000来实现示例4-2的效果，然后对这两个工具做一个比较。是微软办公套件中的一个网页制作工具。FrontPage的安装程序包含在办公企业版中。微软还出售一个单独的FrontPage安装盘。首页包括首页97、首页98、首页2000和首页2002。编辑推荐FrontPage2000或FrontPage2002(XP)。接下来，我们将以FrontPage2000为例来实现例4-2的效果。在计算机上安装FrontPage2000后，用鼠标点击“开始”-“程序”-“微软FrontPage”进入FrontPage2000的工作界面，如图4-6所示。这个界面非常类似于微软办公套件中的其他产品，如Word。每个人以前在Word中的文字处理经验都可以应用。图4-6FrontPage2000工作界面，点击FrontPage2000工具栏上的插入- 图片- 来自文件，通过选择文件对话框找到d磁盘我的Web文件夹下的子文件夹图像 logo.jpg 文件，点击确定按钮，可以插入图片。插入图片的操作完成后，直接在编辑区输入文字“大家好”。这是我们制作的第一个网页。“还有点击超链接进入新浪。应该注意的是，FrontPage2000包括两种新的换行方法。一种是直接按回车键。这种新的换行方法称为段落换行，因此在上下两部分之间会留下一行空白。相应的标记是：另一个是按住Shift键，然后按回车键。这种新的换行方法称为段内换行。上下两段之间没有空行，相应的标记是。这里我们在段落中使用换行符。添加超链接的方法也很简单。选择单词“Sina”(即按住鼠标左键选择两个单词，使其以相反的颜色出现)，然后单击鼠标右键，在弹出的对话框中选择“hyperlink”选项，如图4-7所示。在弹出的“创建超链接”对话框中填写网址，如图4-8所示。然后点击“确定”按钮，超链接完成。最后，将文件保存在“D:MyWeb”文件夹下，并将其命名为“index1.htm”。图4-7FrontPage2000超链接制作(1)，图4-8FrontPage2000超链接制作(2)，在FrontPage2000的左下角，有三个选项卡，即“普通”、“HTML”和“预览”。刚才我们使用了“正常”模式，也就是说，我们使用了“你看到的就是你得到的”方法来编辑网页。点击“HTML”切换到查看HTML代码的模式，如图4-9所示。在这种模式下，您可以看到刚刚编辑的网页的HTML代码。为什么我们不输入代码就能看到网页的代码？事实上，我们看到的所有代码都是由FrontPage2000自动生成的。我们迈出的每一步，FrontPage2000都会将我们的行为转换成相应的HTML代码。换句话说，在4.1节中，我们手动编写代码，现在FrontPage2000自动生成代码。然而，一切都保持不变。HTML标签是网页的本质。我们也可以直接在FrontPage2000的“HTML”模式下输入代码，当切换到“普通”模式时，我们可以在“所见即所得”模式下看到编辑效果。图4-9FrontPage2000的 HTML 模式，预览模式，您可以在浏览器中看到刚刚编辑的文档浏览效果。事实上，当制作相对简单的网页时，“正常”模式和“预览”模式没有太大区别。然而，当制作更复杂的网页时，“正常”模式很难达到与浏览器完全相同的显示效果，即“正常”模式和“预览”模式之间仍然有细微的差别。4.2.3 Dreamweaver是由Macromedia推出的“所见即所得”网页制作工具。Dreamweaver和Macromedia的图像处