教学材料《电子 商务》-项目六_第1页
教学材料《电子 商务》-项目六_第2页
教学材料《电子 商务》-项目六_第3页
教学材料《电子 商务》-项目六_第4页
教学材料《电子 商务》-项目六_第5页
已阅读5页，还剩183页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

单元一静态网页基础知识初期的网站都是由静态网页组成的，网页中只有文字、图形、图像等，用户只能被动地接受这些信息。那时的Web页面的核心是HTML（一种标记语言），它编写很方便，不要求有特定的语言环境，可以用任何一种编辑器写好，便可以放到浏览器观看结果。现在HTML已经有许多专门的编辑软件，如FrontPage、Hotdog、Dreamweaver等。下一页返回单元一静态网页基础知识最初的Web是完全的静态，仅仅提供大量的信息服务，没有服务器端/客户端的概念。“静态”指的就是网站的网页内容“固定不变”。当用户浏览器通过互联网的HTTP（HypertextTransferProtocol）协议向Web服务器请求提供网页内容时，服务器仅仅是将原已设计好的静态HTML文档传送给用户浏览器。其页面的内容使用的是标准HTML代码，再加上GIF格式的动态图片。下一页返回上一页单元一静态网页基础知识一、HTML简介HTML（HypertextMarkupLanguage，超文本标志语言）是构成Web页面（Page）的主要工具，是用来表示网上信息的符号标志语言。在网上，如果要向全球范围内出版和发布信息，需要有一种能够被广泛理解的语言，即所有的计算机都能够理解的一种用于出版的“母语”。WWW（WorldWideWeb）所使用的出版语言就是HTML语言。通过HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML“翻译”成可以识别的信息，就是现在所见到的网页。下一页返回上一页单元一静态网页基础知识1.HTML的功能（1）出版在线的文档，其中包含标题、文本、表格、列表以及照片等内容。（2）通过超链接检索在线的信息。（3）为获取远程服务而设计表单，可用于检索信息、订购产品等。（4）在文档中直接包含表格数据、视频剪辑、声音剪辑以及其他的一些应用。下一页返回上一页单元一静态网页基础知识2.HTML的编写工具用HTML编写的文件（文档）的扩展名是.html或.htm，它们是供浏览器解释浏览文件的格式。可以使用记事本、写字板等编辑工具来编写HTML文件。HTML语言使用标志对（标签）的方法来编写文件，既简单又方便。它通常使用<标志名></标志名>来表示标志的开始和结束（例如<HTML></HTML>标志对），因此在HTML文档中这样的标志对都必须是成对使用的。下一页返回上一页单元一静态网页基础知识在今天，做网页的工具到处都是，只要动几下鼠标，一个精彩的网页就出来了，HTML是否要学呢？答案是肯定的，因为工具就是工具，它们生成的代码是机械的，不够简洁，使网页打开的速度减慢。还有很多新的功能，工具是生成不了的，必须对代码进行编辑。3.HTML文件的本质HTML文件的实质是以.htm或.html为扩展名的纯文本文件。下一页返回上一页单元一静态网页基础知识4.HTML文件的格式查看网页源文件，可见HTML文件的格式如下：<html><head><title>网页的标题</title></head><body>……</body></html>下一页返回上一页单元一静态网页基础知识其中省略号部分是网页的内容，其实每个标记都是一一对应的。每个网页文件都是以<html>开始和以</html>结束。<title>与</title>之间的内容是网页的标题，会显示在浏览器的标题栏上。<body>与</body>之间放的是网页内容。下一页返回上一页单元一静态网页基础知识5.标志（tag）的结构特点（1）用<>包围。（2）多数成对出现。（3）结束标记用/。（4）标签是嵌入式的。（5）标签可有多种属性和属性值。（6）标签用西文半角字符，对大小写不敏感。下一页返回上一页单元一静态网页基础知识6.HTML文件的组成（1）头部和主体。（2）标志和普通文本。7.文件标题标志文件标题标志为<title></title>。使用过浏览器的人可能都会注意到浏览器窗口最上边的蓝色部分显示的文本信息，那些信息一般是网页的“主题”。要将网页的主题显示到浏览器的顶部其实很简单，只要在<title></title>标志对之间加入要显示的文本即可。下一页返回上一页单元一静态网页基础知识8.颜色表示方法HTML用#RRGGBB字符串代表色彩，称为RGB值。RGB值中的RR、GG和BB分别代表红绿蓝三原色的两位十六进制整数值。每种原色的取值范围为00～FF（即十进制的0～255），即一个字节存储一种原色。每种原色都有256种由浅至深的色彩变化，网页中呈现的色彩都是由这三种原色调配出来的。RGB值可以表示出（256×256×256）种颜色。下一页返回上一页单元一静态网页基础知识9.常用颜色举例常用颜色举例如表6-1所示。二、HTML基础（一）页面格式标志在网页设置中，会用到HTML页面设置、列表设置等格式标志。（1）段落标志：<p></p>。（2）预处理文本：<pre></pre>。（3）换行标志：<br>。下一页返回上一页单元一静态网页基础知识（二）列表标志1.定义列表<dl></dl>用于创建一个定义列表，<dt></dt>用于创建列表中的上层项目，<dd></dd>用于创建列表中最下层项目，<dt></dt>和<dd></dd>都必须放在<dl></dl>标志对之间。示例代码及效果如表6-2所示。下一页返回上一页单元一静态网页基础知识2.有序列表和无序列表<ol></ol>标志对用于创建一个有序列表；<ul></ul>标志对用于创建一个无序列表；<li></li>标志对只能在<ol></ol>或<ul></ul>标志对之间使用，此标志对用于创建一个列表项。示例代码及效果如表6-3所示。下一页返回上一页单元一静态网页基础知识（三）标题格式标志HTML语言提供了一系列对文本中的标题进行操作的标志对：<h1></h1>…<h6></h6>，即一共有6对标题的标志对。<h1></h1>是最大的标题，而<h6></h6>则是最小的标题，也就是标志中h后面的数字越大标题文本就越小。如果HTML文档中需要输出标题文本，就可以使用这6对标题标志对中的任何一对。下一页返回上一页单元一静态网页基础知识（四）文本标志<b></b>：使文本以黑体字的形式输出。<i></i>：使文本以斜体字的形式输出。<u></u>：使文本以下加一划线的形式输出。<sub></sub>：下标。<sup></sup>：上标。<tt></tt>：输出打字机风格字体的文本。<cite></cite>：输出引用方式的字体，通常是斜体。<em></em>：输出需要强调的文本（通常是斜体加黑体）。下一页返回上一页单元一静态网页基础知识<strong></strong>：输出加重文本（通常也是斜体加黑体）。<font></font>：设定文本的字体大小、颜色、字体名等，通过属性size、color、face的控制来实现。size属性用来改变字体的大小，它可以取值-N、N和+N；而color属性则用来改变文本的颜色；face属性值为系统中现有的字体，如“楷体_GB2312”。为保证在客户端浏览器中显示正确字体的网页，不要使用非系统自带的特殊字体，如“华文彩云繁”等。下一页返回上一页单元一静态网页基础知识（五）特殊字符特殊字符如表6-4所示。（六）网页图像格式网页图像主要包括JPEG、GIF和PNG格式。1.可交换图像文件格式由于几乎所有的Web浏览器都支持可交换图像文件（GIF）格式（文件扩展名为.gif），因而该格式是万维网上最常用的两个图像文件格式之一。由于此格式最多仅可显示256种颜色，因而最适于黑白线条图形、彩色剪辑图片和具有大块实心颜色的图片。GIF89a格式也同时支持透明和动画。GIF文件用于以下几种情况。下一页返回上一页单元一静态网页基础知识（1）包含透明区域的图像。（2）有限的彩色，例如256色或更少。（3）离散区域中的彩色。（4）黑白图像。（5）小尺寸图像，例如站点上的按钮。（6）清晰度和边缘清晰度很重要的图形，例如线条图形或卡通。（7）包含文本的图像。（8）动画。下一页返回上一页单元一静态网页基础知识2.联合摄影专家组格式联合摄影专家组（JPEG）格式（文件扩展名为.jpg或.jpeg）是Web上的另一个最常用的图像文件格式。它不局限于256色，因此可以使用它来显示高质量的照片或包含上百万种颜色的图片。由于它被设计为图像存储格式，因而可以有效地将高质量的大照片压缩为非常紧密的文件，这在用电子邮件发送大图像时很有用。然而，将图像文件的大小压缩得越多（或修改并重新保存图像），图像信息的丢失也越多，并且质量也会下降。此外，该格式不支持透明和动画。JPEG文件用于以下几种情况。下一页返回上一页单元一静态网页基础知识（1）照片。（2）自然视觉效果图像。（3）大数量的颜色，例如上百万。（4）具有大量细节的图像，例如房地产站点上房屋的照片。（5）大尺寸的图像。下一页返回上一页单元一静态网页基础知识3.可移植网络图形格式可移植网络图形（PNG）格式（文件扩展名为.png）可以显示上百万种颜色。然而，由于它是一种新的格式，当前只有很少的浏览器可以支持（尽管它正快速获得支持）。以这种格式保存的图像，即便将文件压缩，其质量也不会降低。它支持透明，但不支持动画（因为它不能包含多个图像）。下一页返回上一页单元一静态网页基础知识（七）图像标志图像在网页制作中担任着非常重要的角色。HTML语言也专门提供了<img>标志来处理图像的输出。<img>标志并非真正地将图像融入到HTML文档中，而是标明图像文件的存放位置。src属性是<img>标志中不可缺少的一部分，必须赋值，其值是图形文件的存放位置和文件名。align属性是图像的对齐方式。border属性是图像的边框，可以取大于或者等于０的整数，默认单位是像素。下一页返回上一页单元一静态网页基础知识width和height属性是图像的宽和高，默认单位也是像素。alt属性是当鼠标移动到图像上时显示的文本。（八）图像实例以图6-1所示图像为例。其对应的代码如下：<imgsrc="cmu_cname.gif"width="101"height="22"alt="中国医科大学"border="1">下一页返回上一页单元一静态网页基础知识（九）水平线标志<hr>标志是在HTML文档中加入一条水平线，它可以直接使用，具有size、color、width和noshade属性。size属性是设置水平线的厚度。width属性是设定水平线的宽度，默认单位是像素。noshade属性不用赋值，而是直接加入标志即可使用，它用于加入一条没有阴影的水平线（不加入此属性，水平线将有阴影）。下一页返回上一页单元一静态网页基础知识（十）表格标志表格标志对于制作网页是很重要的，现在很多网页都是使用多重表格，主要是因为表格不但可以固定文本或图像的输出，而且可以任意地进行背景和前景颜色的设置。可见表格在网页排版中的作用。<table></table>标志对用于创建一个表格，属性如表6-5所示。下一页返回上一页单元一静态网页基础知识表格的定义顺序是先定义行，再定义该行中的单元格。<tr></tr>标志对用于创建表格中的每一行。此标志对只能放在<table></table>标志对之间使用，而在此标志对之间加入文本将是无用的，因为在<tr></tr>之间紧跟<td></td>标志对才是有效的语法。<td></td>标志对用于创建单元格，此标志对只有放在<tr></tr>标志对之间才是有效的，输入的文本也只有放在<td></td>标志对中才有效（即才能够显示出来）。下一页返回上一页单元一静态网页基础知识<td>具有width、colspan、rowspan和nowrap属性。width属性是单元格的宽度，单位用绝对像素值或总宽度的百分比。colspan属性是设置一个表格单元格跨占的列数（默认值为1）。rowspan属性是设置一个表格单元格跨占的行数（默认值为1）。下一页返回上一页单元一静态网页基础知识表格实例：<tableborder="1"><tr><tdrowspan="2"bgcolor="#0033FF"><fontcolor="#FFFFFF">1单元格跨越多行</font></td><tdbgcolor="#999999"><fontcolor="#FFFFFF">1</font></td><tdbgcolor="#0066FF"><fontcolor="#FFFFFF">2</font></td></tr><tr>上一页下一页返回单元一静态网页基础知识<tdbgcolor="#990000"><fontcolor="#FFFFFF">4</font></td><tdbgcolor="#009900"><fontcolor="#FFFFFF">5</font></td></tr><tr><tdbgcolor="#006600"><fontcolor="#FFFFFF">6</font></td>上一页返回上一页单元一静态网页基础知识<tdcolspan="2"bgcolor="#996600"><fontcolor="#FFFFFF">7单元格跨越多列</font></td></tr></table>其对应生成的表格如图6-2所示。返回上一页单元二动态网页制作一、编辑文本Dreamweaver8为Web设计提供了方便的编辑环境，可以编辑HTML、CFML、ASP、JavaScript和CSS等文档，如VisualBasic、NET、C#和Java等语言。创建静态页面是Dreamweaver8最基本的功能，主要涉及到设置页面属性、向页面添加文本、向页面添加图像等内容。下面以实例的方式讲述静态页面制作的方法和技巧。下一页返回单元二动态网页制作（一）创建和打开文档创建和打开文档是Dreamweaver8最基础的操作，也是制作网站的第一步，Dreamweaver8为用户提供了几种选择新的工作文档的选项。1.创建新空白文档打开Dreamweaver8，选择“文件”→“新建”命令，弹出“新建文档”对话框，可以看到“常规”选项卡已被打开，在“类别”列表框中选择“基本页”“动态页”“模板页”“其他”或“框架集”选项，然后在右侧的列表中选择要创建的文档的类型。上一页下一页返回单元二动态网页制作例如，选择“基本页”创建HTML文档，或选择“动态页”创建ColdFusion或ASP文档，诸如此类，单击“创建”按钮完成空白文档的创建。2.创建基于现存模板的文档选择“文件”→“新建”命令，打开“新建文档”对话框，打开“模板”选项卡。在“模板用于”列表框中选择包含要使用的模板的Dreamweaver8站点，然后在右侧的列表中选择一个模板，单击“创建”按钮，完成模板页的创建。提示：如果站点中没有任何模板，可以在“新建文档”对话框的一种设计文件类别中将文档另存为模板，然后创建基于该模板的页面。上一页下一页返回单元二动态网页制作若要在“资源”面板中应用模板创建新文档，执行以下操作即可。选择“窗口”→“资源”命令，打开“资源”面板，在“资源”面板中，单击左侧的“模板”按钮以查看当前站点中的模板列表。右击或按住Ctrl键单击要应用的模板，然后在弹出的快捷菜单中选择“从模板新建”命令，在文档窗口中打开文档。上一页下一页返回单元二动态网页制作3.打开现有文档若要打开现有的文件，执行以下操作即可。选择“文件”→“打开”命令，弹出“打开”对话框，定位并选择要打开的文件，单击“打开”按钮，在文档窗口中打开文档。默认情况下，JavaScript、文本和CSS样式表在“代码”视图中打开。可以在Dreamweaver8中工作时更新文档，然后保存文件中的更改。上一页下一页返回单元二动态网页制作4.设置页面属性设置页面属性是制作网页的第一步，一般网页属性主要在HTML文档中的<head>区域中和<body>区域的<body>属性中。在<head>区中，一般包含题目、作者、关键字等网页的信息属性，在<body>属性中，一般包含背景、字体及链接的颜色、页边距等网页的属性。上一页下一页返回单元二动态网页制作（二）设置页面前景色及背景图像（1）打开Dreamweaver8，选择“文件”→“新建”命令，弹出“新建文档”对话框，新建一个空白的HTML文件，并选择“文件”→“保存”命令，将文件保存为5.2.html，如图6-3和图6-4所示。（2）选择“修改页面属性”命令或单击“属性”面板中的“页面属性”按钮，如图6-5所示。（3）在“页面属性”对话框左侧的“分类”列表框中选择“外观”选项，单击“背景图像”文本框后的“浏览”按钮，选择“5.0/Images/01.jpg”，在“重复”下拉列表框中选择“横向重复”选项。下一页返回上一页单元二动态网页制作提示：“重复”下拉列表框的设置是针对“背景图像”的，在“重复”下拉列表框中，当选择“不重复”选项时，背景图像将不会重复，只在页面上显示一次；当选择“重复”时，背景图像将会在横向和纵向上重复显示；当选择“横向重复”时，背景图像只会在横向上重复显示；当选择“纵向重复”时，背景图像只会在纵向上重复显示，在本例中，可以设置“重复”选项为“横向重复”。（4）单击“应用”按钮应用“页面属性”设置，单击“确定”按钮完成“页面属性”对话框设置，页面效果如图6-6所示。下一页返回上一页单元二动态网页制作（5）单击“属性”面板中的“页面属性”按钮，在“页面属性”对话框左侧的“分类”列表框中选择“外观”选项，设置“背景颜色”值为#3366CC，如图6-7所示。提示：如果页面背景不是图像，而是纯色，就可以通过“页面属性”对话框中的“背景颜色”实现。单击“背景颜色”拾色框，在弹出的拾色器中选择合适的颜色，或直接在文本框中输入颜色值。下一页返回上一页单元二动态网页制作（6）打开“页面属性”对话框，在左侧的“分类”列表框中选择“链接”选项，设置“链接字体”为“宋体”，大小为9像素，“链接颜色”“已访问链接”“活动链接”值都为#000000，“变换图像链接”值为#333399。（7）在“下划线样式”下拉列表框中选择“始终无下划线”选项，页面内具有超链接的文本不显示下划线效果，如图6-8所示。下一页返回上一页单元二动态网页制作（三）设置页面标题和页面关键字（1）在“页面属性”对话框左侧的“分类”列表框中选择“标题”选项，设置其字体和颜色的值，如图6-9所示。提示：此处设置的页面“标题”属性是指页面中字体的“标题”属性，而并非是在浏览网页时在浏览器的标题栏所看到的网页的标题。页面中字体的“标题”属性默认有6个值，可以通过这里对页面的“标题”属性进行更改。（2）打开“属性”面板，选中页面中文字，在“格式”下拉列表框中选择所需要的标题，如图6-10所示。下一页返回上一页单元二动态网页制作（3）在“页面属性”对话框左侧的“分类”列表框中选择“标题/编码”选项，设置“标题”为“页面背景”，“编码”为“简体中文（GB2312）”，如图6-11所示。提示：标题经常被网页初学者忽略，因为它对网页的内容不产生任何影响。在浏览网页时，会在浏览器的标题栏中看到网页的标题，在进行多个窗口切换时，它可以很明确地提示当前网页信息。而且，当收藏一个网页时，也会把网页的标题列在收藏夹内。下一页返回上一页单元二动态网页制作（4）如果不对网页标题进行设置，则网页标题默认为“无标题文档”，在“页面属性”对话框中，设置完标题后的页面标题如图6-12所示。（5）设置网页标题的方法有很多，可以直接在“文档”工具栏的“标题”文本框内输入网页标题，按键盘上的Enter键确认，也可以在“代码”视图中，在HTML标签<title>和</title>之间设置网页标题，如图6-13所示。（6）在“页面属性”对话框左侧的“分类”列表框中选择“跟踪图像”选项，可以设置文档的跟踪图像及图像的透明度，如图6-14所示。下一页返回上一页单元二动态网页制作提示：跟踪图像属性一般很少用，主要用途是初学者对搭建网页表格不熟，把网页设计稿设置为跟踪图像，调节其透明度，然后根据设计稿轮廓，搭建表格。这样制作出来的页面和设计稿的偏差少，比较精确。（7）单击“确定”按钮，完成“页面属性”对话框的设置。（8）在“插入”工具栏中选择HTML，单击HTML类别中的“文件头”下拉列表按钮，在下拉列表中选择“关键字”选项，如图6-15所示。（9）在弹出的“关键字”对话框中输入页面的关键字“电子商务网站建设与管理”，如图6-16所示。下一页返回上一页单元二动态网页制作（10）单击“插入”工具栏中的HTML类别中的“文件头”下拉列表按钮，在下拉列表中选择“说明”选项，弹出“说明”对话框，如图6-17所示。在“说明”对话框中输入网页的说明描述“电子商务网站建设与管理”。（11）单击“文档”工具栏中的“代码”按钮，转换为“代码”视图，可以看到已经在<head>标签中加入了关键字和说明文字的设置代码，如图6-18所示。下一页返回上一页单元二动态网页制作提示：大部分搜索引擎在查询网页时都是根据头元素里的关键字来进行的，显示的内容也是头元素的描述。当然，现在大的搜索引擎一般都可以做到网页的全文检索了，不过为了使网页可以适应更多的搜索引擎，在头部加入关键字和描述是十分有益的。上一页下一页返回单元二动态网页制作（四）向页面中添加文本内容无疑是网站的灵魂，而文本是构成网站灵魂的物质基础。文本在网站上的运用是最为广泛的，一个内容充实的网站必然会运用大量的文本。在Dreamweaver8中，输入文本与修改文本的过程非常简单，只要在编辑区单击，就会出现输入光标，然后就可以像在Word等文字编辑软件中那样进行文字的输入了。在一段已经输入完成的文本中进行修改也是比较简单的，可以利用Delete键或Backspace键删除文字，也可以单击需要增加的文字处，进行添加操作。上一页下一页返回单元二动态网页制作二、向网页中添加图像随着网络宽带的普及，尤其是WWW的出现，使得大多数人都可以使用窗口的方式来进行浏览。Internet也迅速变为一个大众的媒体，应用范围扩展到商业、娱乐等人类生活的各个方面，如何用漂亮的图像来吸引人们的视线是每个网站都需要面对的问题。在MacromediaDreamweaver8中，可以在“设计”视图或“代码”视图中将图像插入文档。上一页下一页返回单元二动态网页制作虽然存在很多种图形文件格式，但Web页面中通常使用的只有3种，即GIF、JPEG和PNG。目前，GIF和JPEG文件格式的支持情况最好，大多数浏览器都可以查看它们。由于PNG文件具有较大的灵活性并且文件较小，所以它几乎对任何类型的Web图形都是最适合的；但是，MicrosoftInternetExplorer（4.0和更高版本）和NetscapeNavigator（4.04和更高版本）只有部分支持PNG图像的显示。因此，在制作Web页面时，一般情况下都使用GIF或JPEG图像。上一页下一页返回单元二动态网页制作在将图像插入Dreamweaver8文档时，Dreamweaver8自动在HTML源代码中生成对该图像文件的引用。为了确保此引用的正确性，该图像文件必须位于当前站点中。如果图像文件不在当前站点中，Dreamweaver8会询问是否要将此文件复制到当前站点中。下一页返回上一页单元二动态网页制作三、表格的应用先使用较大的表格对网页的版面进行大致的控制和区域的分配，再使用嵌套的表格对细节进行刻画，表格是用于在HTML页上显示表格式数据以及对文本和图形进行布局的强有力的工具。表格由一行或多行组成，每行又由一个或多个单元格组成。下一页返回上一页单元二动态网页制作表格包括以下3个基本元素。●行（水平线的间隔，用<TR>…</TR>定义）；●列（垂直线的间隔，用<TD>…</TD>定义）；●单元格（行和列的交叉元素）。当在“设计”视图中对表格进行格式设置时，可以设置整个表格或表格中所选行、列或是单元格的属性。如果将整个表格的某属性（例如背景颜色或对齐）设置为一个值而将单个单元格的属性设置为另一个值，则单元格的格式设置优先于行格式设置，行格式设置又优先于表格格式设置。上一页下一页返回单元二动态网页制作1.在页面中应用表格表格格式设置的优先顺序为单元格、行、表格。例如，如果将单元格的背景颜色设置为蓝色，然后将整个表格的背景颜色设置为黄色，则蓝色单元格不会变为黄色，因为单元格格式设置优先于表格格式设置。在浏览网页的时候可以发现，很多用于网站排版的表格都是经过美化处理的，这些表格不仅起到了布局排版的作用，而且在很大程度上美化了网页，使网页看起来更加漂亮、新颖。上一页下一页返回单元二动态网页制作2.设置表格和单元格格式表格和单元格有许多属性，两者之间有很多共同的属性，随着软件的不断升级，大多数属性都可以通过Dreamweaver8的“属性”面板进行修改，给使用者带来了很大的方便。通过设置表格及表格单元格的属性或将预先设置的设计应用于表格来更改表格的外观，当选择了某个表格或单元格后，使用属性检查器可以查看更改其属性。上一页下一页返回单元二动态网页制作3.拆分和合并单元格在网站制作过程中，对网页进行排版和修改，可能会按照不同的版面需要将单元格合并、拆分或进行其他操作。使用“属性”面板或选择“修改”→“表格”命令的级联菜单中的命令拆分或合并单元格。只要整个选择部分的单元格形成一行或一个矩形，便可以合并任意数目的相邻的单元格，以生成一个跨多个列或行的单元格或将单元格拆分为任意数目的行或列，而不管它是否是合并的。Dreamweaver8将自动重新构造表格（添加所需的COLSPAN或ROWSPAN属性），以创建指定的排列方式。上一页下一页返回单元二动态网页制作四、超链接Internet的核心是超链接，它将HTML网页文件和其他资源链接成一个无边无际的网络。在Dreamweaver8中对超链接的设置更加简单容易，选中要插入超链接的文字或图像后，可以直接在“属性”面板的“链接”文本框中输入或使用浏览方式选择超链接的文件和网址。上一页下一页返回单元二动态网页制作Dreamweaver8提供了多种创建超文本链接方法，可创建到文档、图像、多媒体文件或可下载文件的链接。可以建立到文档内任意位置的任何文本或图像（包括标题、列表、层或框架中的文本或图像）的链接。在Dreamweaver8中还可以为图像创建热点。在“属性”面板中选择定义热点的形状，同时可以在图像上直接编辑热点，对热点的位置和大小都可以进行灵活的设置。上一页下一页返回单元二动态网页制作1.创建超链接使用Dreamweaver8创建超链接既简单又方便，只要选中要设置为超链接的文字或图像，然后在“属性”面板的“链接”文本框中添加相应的URL地址即可，也可以拖动指向文件的指针图标指向链接的文件，同时可以使用“浏览”按钮在本地和局域网上选择链接的文件。上一页下一页返回单元二动态网页制作2.超链接功能概述URL（UniformResourceLocator）代表的是统一资源定位。URL的功能就是提供一种在Internet中查找任何内容的标准方法。URL可以用到6个不同的部分，尽管所有的部分在读取URL时都不是必需的。每个部分都由一些斜线、冒号、井号所分隔。当作为一个属性的值被输入时，整个URL一般会由引号包围来保证地址作为一个整体读取。上一页下一页返回单元二动态网页制作一个典型的URL为，它表示“新浪网”WWW服务器上的起始HTML文件（文件具体存放的路径及文件名取决于该WWW服务器的配置情况），与单机系统绝对路径、相对路径的概念类似，统一资源定位也有绝对URL和相对URL之分。上文所述的是绝对URL。上一页下一页返回单元二动态网页制作通常情况下，当浏览一个网页时，浏览器都会从头显示这个页面。而且，如果老的页面不被替换的话，Web访问者必须通过滚动方式来查看当前屏幕下面的信息。一种HTML技术就可以忽略显示窗口上面的内容，而直接链接到页面上任何特定的点上，这种技术就是锚记链接。针对网页中的同一张图片，也可以通过热点工具为图片的不同区域添加不同的超链接。上一页下一页返回单元二动态网页制作五、制作多媒体网页MacromediaDreamweaver8可以快速便捷地向Web站点添加声音和影片。可以将“设计备注”附加到这些对象上，以便于小组成员之间的交流。还可以在MacromediaDreamweaver8自身内插入MacromediaFlash8按钮和文本对象。上一页下一页返回单元二动态网页制作1.在网页中应用多媒体随着多媒体技术和宽带网络技术的飞速发展，在网页中应用视频已经不再是梦想了。制作多媒体网页逐渐成为了趋势。在网页中应用多媒体元素，可以极大地丰富网页元素的样式和类型。实现一种效果可以通过包括多媒体方式在内的多种方式，而多媒体是其中最有魅力的方式之一，也是潮流的方向。上一页下一页返回单元二动态网页制作2.多媒体功能概述常用的网页设计中的多媒体的应用，其中包括Flash和Shockwave影片，QuickTime、AVI、JavaApplet、ActiveX控制以及各种格式的音频文件。上一页下一页返回单元二动态网页制作六、表单的应用表单可以被认为是从Web访问者那里收集信息的一种方法，它不仅可以收集访问者的浏览印象，还可以做更多的事情，例如在登记注册免费邮件时，可以用表单来收集一些必需的个人资料；在电子商场购物时，收集每个网上顾客具体购买的商品信息；甚至在用户使用搜索引擎查找信息时，查询的关键词都是通过使用表单提交到服务器上的。上一页下一页返回单元二动态网页制作1.一般表单的工作过程（1）访问者在浏览有表单的网页时，可填写必需的信息，然后单击某个按钮提交填写的信息。（2）这些信息通过Internet传送到服务器上。（3）服务器上有专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。（4）当数据完整无误后，服务器反馈一个输入完成信息。上一页下一页返回单元二动态网页制作从上面的表单工作过程中可以看到，表单的开发可以分为两个部分，一是具体在网页上制作必需的表单项目，这一部分称为前端，主要是在Dreamweaver8或其他网页制作软件中进行；另一部分是编制如何处理这些信息的程序，这一部分称为后端，主要是用具体的解释或编译程序制作（如ASP、PHP、JAVA等）。上一页下一页返回单元二动态网页制作2.创建HTML表单1）HTML表单功能概述表单，如同HTML表格，可以认为是网页内的自包含单元。表单的所有元素包含在表单标签<form>…</form>中。与表格不同的是，虽然一个页面上可以有多个表单，但是不可以像嵌套表格一样嵌套表单。一个表单通常为两部分：一是form标签，一个文本域。其中form标签主要表示表单提交的方式以及提交给的程序，文本域供浏览者填写各种表单内容。上一页下一页返回单元二动态网页制作如果没有form标签，在测试表单时显示都是正确的，但是绝对不可能完成表单的提交工作。（1）文本域：接收任何类型的字母数字文本输入内容。文本可以单行或多行显示，也可以以密码域外的方式显示。在这种情况下，输入文本将会被告知替换为星号或项目符号，以避免其他用户看到这些文本。（2）隐藏域：存储用户输入的信息，如姓名、电子邮件地址或偏爱的查看方式，并在该用户下次访问该站点使用这些数据。上一页下一页返回单元二动态网页制作（3）按钮：在单击时执行操作。通常这些操作包括提交或重置表单。可以为按钮添加自定义名称或标签，或使用预定义的“提交”或“重置”标签之一。（4）复选框：允许在一组选项中选择多个选项，用户可以选择任意多个适用的选项，如图6-19所示。（5）单选按钮：代表互相排斥的选择。在某一个单选按钮组（由两个或多个共同一名称的按钮组成）中选择一个按钮，就会取消选择该组中的所有其他按钮。（6）列表菜单：在一个滚动列表中显示选项值，用户可以从该滚动列表中选择多个选项。“菜单”选项在一个菜单中显示选项值，用户只能从中选择单个选项。上一页下一页返回单元二动态网页制作（7）跳转菜单：是可导航的列表或弹出菜单，它可以插入一种菜单，这种菜单中的每个选项都链接到某个文档或文件。（8）文件域：使用户可以浏览到其他计算机上的某个文件并将文件作为表单数据上传。（9）图像域：可以在表单中插入一个图像。图像域可用于生成图形化按钮，例如“提交”或“重置”按钮。上一页下一页返回单元二动态网页制作提示：作为一种表单对象，动态表单对象的初始由服务器在页面被从服务器中请求时确定，而不是由表单设计者在设计时确定。例如，当用户请求的PHP页上包含带有菜单的表单时，该页中的PHP脚本会自动使用存储在数据库中的值填充该菜单。然后，服务器将完成后的页面发送到该用户的浏览器中显示。返回上一页任务一静态网页制作【实训准备】能访问Internet的机房，学生每人一台计算机。【实训目的】了解FrontPage2003的应用，让学生学会使用FrontPage2003制作静态网页。【实训内容】训练FrontPage2003制作静态网页。【实训过程】（1）打开FrontPage2003程序，新建一个空白网页，如图6-20所示。返回下一页任务一静态网页制作（2）根据制作网页的内容，先大致划分出总体的框架。为方便直观便于了解，这个教程就是现在这个网页的框架，如图6-21所示。选择“插入”→“插入表格”命令，划分出4个大的框架（1为Logo区、2为过渡区、3为主内容区、4为最底部分），如图6-22所示。（3）先对框架的宽度进行设定，如图6-23所示，选中表格，右击，在弹出的快捷菜单中选择“表格属性”命令。返回下一页上一页任务一静态网页制作（4）在“表格属性”对话框中，设定网页的宽度，这里是900（单位是像素，这个宽度是根据总体背景框架图的宽度设定的），并把“单元格衬距”“单元格间距”以及边框的“粗细”均设置为0，如图6-24所示。（5）这样，就完成了对总体框架的设定，下一步是对每个单元格进行设定。首先选中第一个单元格，右击，在弹出的快捷菜单中选择“单元格属性”命令，如图6-25所示。返回下一页上一页任务一静态网页制作（6）在“单元格属性”对话框内，应根据个人的要求设置它的高度，这里的107是根据已做好的Logo图片的高度设定的。在“背景”选项区域中，选中“使用背景图片”复选框，把需要的图片地址填写上（也可以使用单一的颜色，使用单一颜色时，不能选中“使用背景图片”复选框，直接在“颜色”下拉列表框中选择就可以了）。设置完成后单击“应用”按钮，然后单击“确定”按钮即可，如图6-26所示。下一页返回上一页任务一静态网页制作（7）再对第二个单元格进行设置，方法同上一步，如图6-27所示。在对第三个单元格（3为主内容区）设置时可以不设置它的高度，所以在用PS做背景时一定注意图片上下的衔接问题。（8）第四个单元格的设置方法与第一个单元格相同，如图6-28所示。（9）将多出来的单元格选中删除，如图6-29所示。上一页下一页返回任务一静态网页制作（10）这样总的框架就设置好了，再对第三个单元格进行细部的划分，先选中主内容区，右击，在弹出的快捷菜单中选择“单元格属性”命令，在弹出的“单元格属性”对话框中的“水平对齐方式”下拉列表框中选择“居中”选项、在“垂直对齐方式”下拉列表框中选择“顶部对齐”选项，其他的不用设定，如图6-30所示。（11）插入表格，这样做的目的是把“文章区”和右侧的栏目分开，如图6-31所示。上一页下一页返回任务一静态网页制作（12）插入的表格默认是100%的大小，可以手动调整它的宽度，如图6-32所示。（13）表格调整完成后，这里主要是适应背景图的大小，如感觉文字位置不太满意。可以选择“格式”→“段落”命令，进行细部的修改，如图6-33所示。上一页下一页返回任务一静态网页制作（14）这样“文章区”的布局就完成了，下面对Logo区（第一个单元格）编辑。在这里主要是加入一些常用的超级链接，内容见本网页的Logo，根据背景图片，常用的链接只能加在这个区域的右下角，所以在设置布局时就设定为“右对齐”或“相对底部对齐”，如图6-34所示。（15）在编辑超链接文字时也可以不加入表格，可是会发现在FrontPage编辑好后发到博客里字体的分布就有很大的不同，所以这里加入了表格，如图6-35所示。（16）在每一个单元格内添入一个链接，如图6-36所示。上一页下一页返回任务一静态网页制作（17）至此，总体基本就完成了，在FrontPage里，选择“编辑”→“全选”命令，然后复制。打开博客，粘贴就可以了。对了，还有对图片和文字的超链接的方法，先复制一个图片（网络上的）到编辑的文章的相应位置，如图6-37所示。（18）右击图片，在弹出的快捷菜单中选择“超链接”命令，在“地址”文本框里填写上超链接的地址，单击“确定”按钮即可，如图6-38所示。上一页下一页返回任务一静态网页制作（19）制作文字的超级链接的方法是先选中超链接的文字，右击，在弹出的快捷菜单中选择“超链接”命令，方法同上，如图6-39所示。（20）这样一个漂亮的网页就制作完成了，至于一些其他的网页特效，以后再共同学习。上一页返回任务二动态网页制作【实训准备】能访问Internet的机房，学生每人一台计算机。【实训目的】利用Dreamweaver8制作动态网页。【实训内容】训练动态网页制作。【实训过程】下一页返回任务二动态网页制作1.熟悉数据库原理在Dreamweaver8中，可以访问的数据库类型相当多，从数据库的老祖宗dBase到目前市场上的主流Access、SQLServer、MySQL、Oracle等都能使用。在这里选择使用最简单、最普遍的数据库——Access来说明，或许Access不适用于大型数据库网站，但对于小型网站来说，应该是绰绰有余的。以下将以Access2003为范例，制作一个完整的数据库，再将它链接到网页中。提示：在操作本节的范例与建立数据库时，必须使用MicrosoftAccess，所以请确定计算机中是否安装此软件。上一页下一页返回任务二动态网页制作2.规划数据表字段（1）双击“使用设计器创建表”选项，先设计字段以添加一个表。提示：如果想自己建立数据库，在进入Access之后，选择窗口右方的“添加”→“空白数据库”选项，然后在指定的文件夹下建立（class.mdb）。（2）接着就会进入添加数据字段的界面了。①字段名称：字段的显示名称。②数据类型：数据保存的类型，如图6-40所示。上一页下一页返回任务二动态网页制作（3）数据类型的设置十分重要，使用正确的数据类型才能正确保存、应用数据。表6-6所示是MicrosoftAccess的6种主要的数据类型说明。上一页下一页返回任务二动态网页制作3.进行数据表字段的命名用户在命名数据表字段时常犯的错误是利用中文命名，这样往往会造成数据库访问错误，也影响程序的编写。但是，在Dreamweaver8中文版问世后，这个问题已经解决了，所以可以使用中文来命名数据表字段。（1）如果使用英文当作数据表字段的名称，也要注意，不可以使用代码的内置函数名称及保留字。例如，有许多人常会利用VBScript的内置函数time和date作字段名称，这样会让程序在链接数据库时发生错误。（2）在数据表字段中不可以使用一些特殊符号，如？、！、%或是空格符等。上一页下一页返回任务二动态网页制作4.建立数据表字段接下来制作的范例是学生的通讯录，为了熟悉数据库制作的过程，所有字段都使用中文命名，也可能顺便测试Dreamweaver8对中文段名的接受度，如图6-41所示。上一页下一页返回任务二动态网页制作图6-41所示是设置完毕后的界面，在建立时有如下几个重点。（1）在所有字段中，一定要设置某字段为主键，所谓主键，就是该字段内每一条记录都不能重复，通常就设置这个字段类型为“自动编号”。例如，默认“学号”为主键，先选择这个字段，单击工具栏上的“主键”按钮，在字段前会出现一个*符号，这个字段就被设置为主键。上一页下一页返回任务二动态网页制作自动编号类型的字段是不允许用户修改或添加字段中的值的，当用户添加记录时，该字段会自动按顺序编入一个号码。如果删除某一条记录，该记录所使用的编号也不会再被系统使用。这是较重要的地方。（2）在文本类型的字段中，有“必填字段”和“允许空字符串”选项，如果这个字段并不一定存入数据，例如“电子邮件”字段可能并不是每个人都有，那么就应该将“必填字段”设置为“否”，“允许空字符串”设置为“是”。这个设置十分重要，例如将“允许空字符串”设置为“否”，一旦在操作时忘记输入数据到字段中而违反了这个规则，即会出现网页的错误而无法进行。上一页下一页返回任务二动态网页制作（3）“默认值”的用处是，某些字段在输入时，若没有加入数据，数据库会自动加上该字段所设置的默认值，以确保字段无论有无输入都会有值。设置完毕之后，请单击“保存”按钮保存这个表，并将它命名为“学生通讯录”，关闭数据表回到原来的界面时，就会出现一个新表“学生通讯录”，如图6-42所示。上一页下一页返回任务二动态网页制作5.在MicrosoftAccess中录入数据（如图6-43所示）请依照字段的说明及规定一一输入数据，以下是注意事项。（1）输入完一个字段后，可以按方向键或Tab键跳到下一个字段继续输入数据。（2）输入完整条记录时，在最后一个字段按Tab键添加一条记录并继续添加数据。（3）类型为“自动编号”的字段“学号”是不需要输入的，如图6-44所示。上一页下一页返回任务二动态网页制作6.设置DSN的数据库连接方式DSN的设置必须先在系统的ODBC管理器中进行。（1）选择“开始”→“控制面板”命令，在“控制面板”窗口中双击“管理工具”图标，打开“管理工具窗口，如图6-45所示，双击“数据源（ODBC）”图标，打开“ODBC数据源管理器“对话框。（2）打开“系统DSN”选项卡，然后单击“添加”按钮，如图6-46所示。上一页下一页返回任务二动态网页制作（3）弹出“创建新数据源”对话框，在这里会看到本地服务器上安装ODBC驱动程序。①选择MicrosoftAccessDriver（*.mdb）选项，如图6-47所示。②单击“完成”按钮。（4）接着会进入“ODBCMicrosoftAccess安装”对话框，如图6-48所示。上一页下一页返回任务二动态网页制作①在“数据源名”文本框中输入数据库的识别名称：connClass。②单击“选择”按钮设置数据库的来源。提示：“数据源名”千万不要使用中文命名，否则会造成在预览时发生“找不到数据来源名称且未指定默认的驱动程序”的错误，这是要特别注意的。上一页下一页返回任务二动态网页制作（5）选择数据文件所在的位置（C:\dwasp2010\class.mdb），最后单击“确定”按钮，回到上一层对话框时再单击两次“确定”按钮来完成ODBC数据源的设置，如图6-49所示。①选择数据库文件所在的位置。上一页下一页返回任务二动态网页制作（6）测试网站设置完成DSN之后，如何在Dreamweaver8中使用呢？回到Dreamweaver8，进入先前的站点定义：DWASP2010测试网站，添加文件showdata.asp，并打开该文件。（1）先选择“窗口”→“数据库”命令进入“应用程序”面板组的“数据库”面板。单击“+”按钮，在弹出的菜单中选择“数据源名称（DSN）”命令进入设置对话框，如图6-50所示。上一页下一页返回任务二动态网页制作（2）在“数据源名称（DSN）”对话框中，如图6-51所示，打开“数据源名称（DSN）”的下拉列表框，Dreamweaver8已自动将ODBC中设置的数据源全部显示在这里了。（3）填入connDSN。（4）设置的数据源名称为connClass。上一页下一页返回任务二动态网页制作（5）因为这个连接是使用本地的ODBC数据源，所以选“使用本地DSN”单选按钮。（6）单击“测试”按钮确认连接是否成功。（7）单击“确定”按钮，如图6-52所示。（8）最后，在“数据源名称（DSN）”对话框中单击“确定”按钮完成设置，设置完毕后，在“数据库”面板内会添加一个connDSN连接。上一页下一页返回任务二动态网页制作提示：①如果要更改连接的设置，直接在该连接名称上双击进入连接进行修改。②设置完毕，在C:\dwasp2010下会添加一个Connections文件夹，内含connDSN.asp和connDSNLess.asp两个ASP文件。上一页下一页返回任务二动态网页制作7.绑定记录集所谓记录集，就是将数据库里的数据表按照用户要求来筛选、排序所整理出来的记录。可在“绑定”面板中执行这个添加操作。（1）打开“应用程序”面板组中的“绑定”面板，然后单击“+”按钮，在弹出的菜单中选择“记录集（查询）”命令，如图6-53所示。（2）在“记录集”对话框中，有许多设置项，可以在“名称”文本框中为这个记录集命名，在这里采用默认值Recordset1。在“连接”下拉列表框中选择连接名称，这里选择第一个连接名称connDSN，如图6-54所示。上一页下一页返回任务二动态网页制作①输入记录集名称。②选择使用的连接。③选择使用的数据表。④选择显示“全部”字段。（3）这时会看到Dreamweaver8已经成功地连接设置的数据表，并将数据表中的字段全部显示在“列”列表框中，选择“全部”单选按钮即表示使用该数据表中所有的字段。在对话框的下方还有两个选项：“筛选”和“排序”。这就是为记录集设置显示条件的字段，如图6-55所示。上一页下一页返回任务二动态网页制作单击“测试”按钮来测试连接结果，此时会出现一个“测试SQL指令”对话框，对话框中显示了数据库中所有的数据，单击“确定”按钮回到先前的对话框，如图6-56所示。最后单击“确定”按钮结束设置，回到“绑定”面板。（4）可以在“绑定”面板上看到名为“记录集（Recordset1）”的记录集，用户单击“+”按钮就能看到记录集内的所有字段名称。其中还包括了3个统计字段：“第一个记录索引”“最后一个记录索引”“总记录数”，如图6-57所示。上一页下一页返回任务二动态网页制作（5）现在就可以拖动这些字段将它放置在网页上，如图6-58所示，在页面上建立一个表格，准备显示这些数据，并将数据字段一一拖动到指定表格单元格中。（6）现在预览，只会读出数据库的第一个记录，需要设置重复区域，将所有数据一一读出。首先要选择设置重复的区域。①请选取第二行显示数据的字段。②在“服务器行为”面板中单击“+”按钮，在弹出的菜单中选择“重复区域”命令打开“重复区域”对话框设置重复区域，如图6-59所示。上一页下一页返回任务二动态网页制作在“重复区域”对话框中设置“显示”为“所有记录”来显示所有数据，再单击“确定”按钮。③设置完毕之后，在表格上方可看到“重复”灰色标签。④接下来就能预览结果了。单击“活动数据视图”按钮进入活动数据视图的显示模式，会看到在编辑页面里记录全部读入进来。⑤还可以按F12键打开浏览器查看结果。果然，通过Dreamweaver8，轻轻松松地将数据库的数据转换成为真实网页了。这样便完成了页面showdata.asp的制作，选择“文件”→“保存”命令保存此作品，如图6-60所示。上一页返回技能训练制作网站公告栏【训练准备】能访问Internet的机房，学生4人一组，每人一台计算机。【训练目的】使用Dreamweaver8练习简单网页制作。【训练内容】训练利用软件制作网站公告栏。下一页返回技能训练制作网站公告栏【训练过程】（1）打开Dreamweaver8，选择“文件”→“新建”命令，弹出“新建文档”对话框，新建一个空白的HTML文件，并选择“文件”→“保存”命令，将文件保存为5.3.html。（2）单击“属性”面板上的“页面属性”按钮，在弹出的“页面属性”对话框左侧的“分类”列表框中选择“外观”选项，设置页面的“左边距”“上边距”为0，如图6-61所示。上一页下一页返回技能训练制作网站公告栏提示：“页面属性”对话框中的上、下、左、右4个边距指的是页面内容与“文档”窗口边界或浏览器边界的距离。如果不设置边距的值，Dreamweaver8会默认为页面内容与边界之间有一定的默认距离。上一页下一页返回技能训练制作网站公告栏（3）在“文档”工具栏的“标题”文本框中输入网页标题“网站公告栏”，按Enter键确认，如图6-62所示。（4）单击“插入”工具栏中的“表格”按钮，在工作区中插入一个3行3列，表格宽度为262像素，边框粗细、单元格边距、单元格间距均为0的表格。在“属性”面板上设置“对齐”属性为“居中对齐”，如图6-63所示。（5）完成“属性”面板的设置。（6）将光标移至表格1行1列位置，在“属性”面板中设置表格宽度为18像素，高度为42像素。上一页下一页返回技能训练制作网站公告栏（7）将光标移至表格1行2列位置，在“属性”面板中设置表格宽度为225像素。（8）将光标移至表格1行3列位置，在“属性”面板中设置表格宽度为19像素。（9）将光标移至表格1行2列位置，插入一个1行2列的表格，设置表格宽度为100%，高度为30像素。（10）将光标移至单元格1行1列位置，单击“插入”工具栏中的“图像”按钮，插入图像“5.0/Images/03.gif”。上一页下一页返回技能训练制作网站公告栏（11）将光标移至表格1行2列位置，设置背景为“5.0/Images/04.gif”。（12）在新表格内1行2列，输入“网站公告”，并设置字体为14号，加粗，颜色为#FFFFFFF。（13

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论