网页设计概论.docx

本章小结

•本章介绍了网站建设的准备工作，网页设计理念，确立网站风格，网页的创意设计以及色彩搭配等知识。

最后讲解了DreamweaverMX2004网页制作软件的基本工作界面和常用面板的功能。

通过本章的学习，用户可进行实际的操作和练习，使自己对网站设计有一个初步的认识。

1.3　习题与上机操作

第2章　网页设计基础入门

Ø教学目标

•本章介绍网页设计的整体规划，站点的建立，以及如何制作一个简单的网页.要求对于表格、图像、文字、背景音乐的处理有了一定的了解，还应该对超级链接有个初步的认识。

第2章　网页设计基础入门

教学重点和难点

•网站草图的设计

•站点的建立

•添加网页基本元素

•超级链接基础

2.1　设计草图

•在制作个人主页之前，首先来总体规划一下网站的结构。

根据原始素材来确定网站需要制作的内容。

我们的主人公是一个多才多艺的女孩，她的名字叫小慧。

小慧的作品很多，需要分类。

在制作网站之前，首先画出网站的设计草图。

2.1　设计草图

2.2　站点的建立

•首先给站点起个名字，叫“小慧的家”。

执行【站点】|【管理站点】菜单命令，或者在右侧【文件】功能面板下的【文件】选项卡中，单击【管理站点】超级链接。

2.2　站点的建立

•弹出【管理站点】对话框，单击【新建】按钮，选择【站点】命令，如图所示。

2.2　站点的建立

•屏幕上出现了站点定义的对话框，有【基本】和【高级】两个选项卡，选择【基本】选项卡，并在文本框内输入站点的名称——小慧的家。

2.2　站点的建立

•单击【下一步】按钮。

选择【否，我不想使用服务器技术】选项，单击【下一步】按钮。

接下来，要选择把文件存储在计算机上的什么位置，单击文本框右边的按钮。

2.2　站点的建立

•这里存储文件的位置是“F:

\xiaohui\”（在F盘下新建一个名为“小慧的家”的文件夹。

可以根据你的需要进行选择），如图所示，单击【下一步】按钮。

2.2　站点的建立

•打开【您如何连接到远程服务器？

】中的下拉菜单，选择【无】项，单击【下一步】按钮。

然后单击【完成】按钮，结束站点定义。

•回到【管理站点】对话框，左边出现了站点名称——“小慧的家”，如图所示。

2.2　站点的建立

•如果在上述的操作过程中有失误，可以单击【编辑】按钮进行修改。

单击【完成】按钮后，在【文件】功能面板下的【文件】选项卡中，也相应出现了相关信息，如图所示。

2.2　站点的建立

•为了存放网页中要用到的图片，可以在该站点下新建一个专门存放图片的文件夹。

选中“小慧的家”站点，单击鼠标右键，在弹出的菜单中选择【新建文件夹】，输入文件夹名称为“images”，按回车键确认。

这样，在站点下就多了一个“images”文件夹，如图所示。

2.2　站点的建立

•如果不想要这个文件夹了，也可以选中它，直接按键盘上的Delete键将它删掉。

•与创建文件夹的方法相同，也可以创建网页文件。

2.2　站点的建立

◆提示：

一般首页文件名为“index.htm”或者“index.html”，如果是使用ASP语言编写的页面，那么文件名变为“index.asp”，如果是用XML语言编写的，文件名为“index.xml”。

•我们可以把一些制作网页时要用到的图片放到“images”文件夹下。

接下来，就可以制作第一张网页，即首页文件——“index.htm”文件。

2.2.1　视图方式

打开“index.htm”文件，如图所示。

2.2.1　视图方式

•在【文档】工具栏上左端的三个按钮，分别为【显示代码视图】、【显示代码视图和设计视图】、【显示设计视图】，单击这3个按钮可以实现三种视图间的切换。

2.2.1　视图方式

•这三视图的用途各不相同，在代码视图中可以直接编辑网页的源代码，对于习惯编程的用户来说，是必不可少的；而设计视图能方便我们更好地美化网页，更合理地布局网页；时显示代码视图和设计视图让我们能够更好地理解源代码，提高编程能力。

2.2.2　表格的简单应用

•在Dreamweaver中的表格处理和Word中并不一样。

首先我们来创建一个表格。

2.2.2　表格的简单应用

•制作如图所示的表格效果。

其中行数和列数都为2，表格宽度为600，单元格边距和单元格间距都为30。

2.2.3　图像的基本操作

•表格里不但可以输入文字，还可以插入图片。

2.2.4　文本的编辑与基本操作

•1．输入网页的标题

•2．插入特殊文本字符

•3．文本简单的排版

•4．设置字体、颜色、大小、对齐方式和样

•5．页面属性

2.2.5　插入水平线和更新日期

2.2.5　插入水平线和更新日期

2.2.6　背景图片和背景音乐

本章小结

•本章主要介绍了网站的草图设计，接着讲解了如何建立站点，通过本章的学习要求能够制作简单的网页，最后还应该大致了解超级链接的基础知识。

2.4　习题与上机操作

•

（1）要在本地创建一个新站点，可以使用Dreamweaver自带的哪个工具来创建。

•

（2）简述相对路径与绝对路径的含义，及它们各自的优缺点。

•（3）在DreamweaverMX2004中创建一个本地站点“个人网站”，将并将其保存在D:

\myjobs。

•（4）制作几张网页，里面可包含表格、图像、文字、水平线、背景音乐、背景图片等元素。

第4章　超级链接的应用

Ø教学目标

•本章介绍如何利用超级链接来实现文档之间的跳转，其中包括文本超级链接，链接到指定的锚点、链接到电子邮件地址和连接到空链接等各种超链接，并将详细讲解如何创建表单以及超链接的属性设置。

第4章　超级链接的应用

教学重点和难点

•创建各种常用超级链接

•创建表单

•给链接增加提示

•链接的管理

4.1超级链接的基本操作

•首先考虑网站的文件名，可以设计如图所示的网站草图。

“给我留言”将来可以单独制作成留言板，而“写信给我”可以用邮件链接制作，所以先不考虑。

4.1.1创建网站内部的链接

什么是文本超级链接呢？

浏览网页时，鼠标指针经过某些文本时，形状会发生变化，同时文本也可能发生相应的变化。

4.1.2创建网站外部的链接

•1．创建邮件链接

Ø方法一：

在页面中选择“写信给我”，在【属性】面板的【链接】文本框中输入“mailto:

cnxiaohui2004@”。

4.1.2创建网站外部的链接

Ø方法二：

单击【常用】工具栏中的【电子邮件链接】按钮，或者执行【插入】|【电子邮件链接】命令，弹出【电子邮件链接】对话框，在【文本】后的文本框中输入“写信给我”，在【E-mail】文本框中输入邮箱地址“cnxiaohui2004@”。

•按键盘上的F12键后，单击“写信给我”的链接，系统会自动运行Outlook软件，就可以撰写电子邮件了。

4.1.2创建网站外部的链接

•2．创建表单

4.1.2创建网站外部的链接

•表单是用户利用浏览器对Web站点网络数据库进行查询的一种界面，用户利用表单可以输入信息或选择选项等，然后将这些信息提交给服务器进行处理。

•这种查询方式叫做交互（用户和服务器）的或者叫做双向的。

表单对象包括文本域、列表框、复选框和单选按钮。

•表单对象是让用户输入信息的地方，表单域是放置表单对象的区域，只有表单域内的表单对象，才可以将它的信息传送出去，才可以接收外来的信息。

4.1.2创建网站外部的链接

•创建表单域：

•方法1：

将光标移到要插入表单域的位置，单击“插入”（表单）面板内的“表单”按钮

•方法2：

用鼠标将表单对象面板内的表单图标拖曳到网页编辑窗口内

•单击表单域内部，按回车键可将表单域调大；如果再按Backspace键，又将表单域缩小。

•通常表单域在浏览器内是看不到的。

4.1.2创建网站外部的链接

•显示表单域：

在表单域创建后，可以单击“视图”菜单的——“可视化助理”——“不可见元素”命令，隐藏或显示表单的矩形红线。

•删除表单域：

单击表单域的红线处，选中表单域，按Delete键，可删除表单域。

4.1.2创建网站外部的链接

•表单的属性：

•“表单名字”文本框：

在该文本框内输入表单域的名字。

表单域的名字可用于JavaScript和VBScript等脚本语言中，这些脚本语言可控制表单域的属性。

•“动作”文本框和文件夹按钮：

利用它们可以输入脚本程序或含有脚本程序的HTML文件。

4.1.2创建网站外部的链接

•表单的属性：

•“方法”列表框：

用来选择客户站与服务器之间传送数据的方式。

三个选项是：

¡°默认¡±（使用浏览器默认设置将表单数据发送到服务器）、¡°GET¡±（获得，即追加表单值到URL，并发送服务器GET请求）、¡°POST¡±（传递，在消息正文本中发送表单的值，并发送服务器POST请求）。

4.1.2创建网站外部的链接

•表单的属性：

•“目标”值有：

•_blank:

在未命名的新窗口中打开目标文档；

•_parent:

在显示当前文档的窗口的父窗口中打开目标文档；

•_self:

在提交表单所使用的窗口中打开目标文档；

•_top:

在当前窗口的窗体内打开目标文档。

此值可用于确保目标文档占用整个窗口，即使原始文档显示在框架中。

4.1.2创建网站外部的链接

•文本域的属性设置：

•文本域用于接受任何格式的文本、数字和字符。

•¡°字符宽度¡±文本框：

文本域的宽度，即可显示字符的最多个数。

•¡°最大字符数¡±/¡°多行¡±文本框：

单行时允行输入的字符个数，可比文本框宽度大/多行时输入文本框的行数。

•¡°类型¡±栏：

单行、多行属性框发生变化。

•¡°初始值¡±文本框：

用来输入文本框的初始内容。

•¡°换行¡±列表框：

默认（采用浏览器的默认值）、关（当输入的文字超过文本框的宽度时，不换行，会出现滚动条）、虚拟（当输入的文字超过文本框的宽度时，会自动换行，但向服务器传输数据时无回车符）、实体（当输入的文字超过宽度时，会自动中入回车符，换行）。

4.1.2创建网站外部的链接

•按钮的属性设置：

•按钮用来制作¡°提交¡±和¡°重置¡±按钮，还可以调用函数。

•¡°标签¡±文本框：

用来输入按钮上的文字。

•¡°动作¡±栏：

有三个选项，用来选择单击该选项后引起的动作类型。

•¡°提交表单¡±表示可以向服务器提交整个表单；

•¡°重设表单¡±表示可以取消前面的输入，复位表单；

•¡°无¡±表示是一般按钮，可以用来调用脚本程序。

4.1.2创建网站外部的链接

•复选框的属性设置：

•有选中和未选中两种状态，多个复选框允许多选。

•¡°选定值¡±文本框：

用来输入复选框选中时的数值，通常为1或0。

•¡°初始状态¡±栏：

有两个单选项，用来设置复选框的初始状态。

4.1.2创建网站外部的链接

•单选按钮组（也叫单选项组）的属性设置：

•可以设置单选按钮组中单选按钮的个数和名称。

如果要增加选项，可以单击¡°+¡±按钮；如果要删除选项，可以单击选中该选项，再单击¡°-¡±按钮。

如果要调整选项的显示次序，可选中选项，再单击¡°向上移¡±或¡°向下移¡±按钮。

4.1.2创建网站外部的链接

•列表的属性设置：

•它的作用是将一些选项放在一个带滚动务的列表框内。

•¡°类型¡±栏：

有两个单选项，用来选择¡°菜单¡±或¡°列表¡±。

•¡°高度¡±文本框：

用来输入列表的高度值，即可以显示的行数。

•¡°选定范围¡±复选框：

表示列表中的各选项可以同时选择多项。

•¡°初始化时选定¡±文本框：

用来设置第一次调出该菜单时，菜单中默认的选中项。

•¡°列表值¡±按钮：

可以输入菜单或列表内显示的选项内容，以及输入此选项提交后的返回值。

4.1.2创建网站外部的链接

•文件域的属性设置：

•用来让用户从中选择磁盘、路径和文件，并将该文件上传到服务器中。

•¡°字符宽度¡±文本框：

文件域的宽度，即可显示字符的最多个数。

•¡°最多字符数¡±文本框：

允许用户输入的字符个数，它可以比文件域的宽度值大。

4.1.2创建网站外部的链接

•3．添加下载文件的链接

•有的时候，要在网页中为文件提供下载链接，每一个下载的文件必须对应一个下载链接，如果有多个文件的话，一般利用压缩软件将这些文件或者文件夹压缩成为一个文件。

即首先建立一个“rar”文件夹，然后将文件打包成“pic.rar”文件，存放到该文件夹中。

4.1.2创建网站外部的链接

• 登录
• 首页
• 资源分类
• 升级会员
• 通知公告
• 帮助中心