网页设计表单

一、 网页设计表单的概念及作用
    表单（Form）是一种结构化的文件，用于收集和发布信息。它是网站管理员与访问者进行交流的一种媒介，通过访问者填写表单中的选择题、填空题和问答题，网站管理员可以收集到来自世界各地的资料和意见。目前表单主要用来进行意见调查、在线查询、网上购物、在线申请等。在表单中经常出现的字段有：单行文本框、多行滚动文本框、单选框、复选框、下拉列表框和按钮。
二、网页设计HTML表单设计基础
    表单在HTML页面中起着重要作用，它是与用户交互信息的主要手段。一个表单至少应该包括说明性文字、用户填写的表格、提交和重填按钮等内容。用户填写了所需的资料之后，按下“提交资料”按钮，这样所填资料就会通专门的CGI接口传到Web服务器上。网页的设计者随后就能在Web服务器上看到用户填写的资料，从而完成了从用户到作者之间的反馈和交流。对于免费个人网站，往往服务器不提供CGI功能，也可以电子邮件来接收用户的反馈信息。
　　表单中主要包括下列元素：
button——普通按钮
radio ——单选按钮
checkbox——复选框
select ——下拉式菜单
text ——单行文本框
textarea——多行文本框
submit——提交按钮
reset—— 重填按钮
　　用HTML设计表单常用的标记是：<form>、<input>、<Option>、<Select>、<textarea>和<isindex>等标记。
1、<form>表单标记
　　 该标记的主要作用是设定表单的起止位置，并指定处理表单数据程序的url地址。其基本语法结构如下：
<form
action＝url
method=get|post
name＝value
onreset=function
onsubmit＝function
target=window>
</form>
　　 其中action：用于设定处理表单数据程序url的地址。这样的程序通常是CGI应用程序，采用电子邮件方式时，用action=”mailto:你的邮件地址”。
method：指定数据传送到服务器的方式。有两种主要的方式，当method=get时，将输入数据加在action指定的地址后面传送到服务器；当method=post时则将输入数据按照HTTP传输协议中的post传输方式传送到服务器，用电子邮件接收用户信息采用这种方式。
name：用于设定表单的名称。onrest和onsubmit是主要针对“reset”按钮和“submit”按钮来说的，分别设定了在按下相应的按钮之后要执行的子程序。
target：指定输入数据结果显示在那个窗口，这需要与<frame>标记配合使用。
2、<input>表单输入标记
　　 此标记在表单中使用频繁，大部分表单内容需要用到此标记。其语法如下：
<inPut
aligh=left|righ|top|middle|bottom
name=value
type=text|textarea|password|checkbox|radio|submit|reset|file|hidden|image|button
value=value
src=url
checked
maxlength=n
size=n
onclick=function
onselect=function>
align：是用于设定表单的位置是靠左（left）、靠右（right）、居中（middle）、靠上 top）还是靠底（bottom）。
name：设定当前变量名称。
type：决定了输入数据的类型。其选项较多，各项的意义是：
type=text：表示输入单行文本；
typet=textarea：表示输入多行文本；
type=password:表示输入数据为密码，用星号表示；
type－checkbox：表示复选框；
type－radio：表示单选框；
type一submit：表示提交按钮，数据将被送到服务器；
tyPe－reset：表示清除表单数据，以便重新输入；
type－file：表示插入一个文件；
type－hidden：表示隐藏按钮；
type＝image：表示插入一个图像；
type一button：表示普通按钮；
value：用于设定输入默认值，即如果用户不输入的话，就采用此默认值；
src：是针对type=image的情况来说的，设定图像文件的地址；
checked：表示选择框中，此项被默认选中；
maxlength：表示在输入单行文本的时候，最大输入字符个数；
size：用于设定在输入多行文本时的最大输入字符数，采用width，height方式；
onclick：表示在按下输入时调用指定的子程序；
onselect：表示当前项被选择时调用指定的子程序。
3、<select>下拉菜单标记
　　 用<select>标记可以在表间中插入一个下拉菜单，它需与<option>标记联用，因为下拉菜单中的每个选项要用<option>标记来定义。<select>标记的语法如下：
<select
name=nametext
size=n
multiple>
　　 其中name：设定下拉式菜单的名称；
size：设定菜单框的高度，也就是一次显示几个菜单项，一般取默认值（size=”1″）；
multiple：设定为可以进行多选。
4、<option>选项标记
　　 该标记为下拉菜单中一个选项，语法很简单：
<option
selected
value=value>
其中selected：表示当前项被默认选中；
value：表示该项对应的值，在该项被中之后，该项的值就会被送到服务器进行处理。
5、<textarea>多行文本输入标记
　　 这是一个建立多行文本输入框的专用标记，其语法如下：
<textarea
name=name
cols=n
rows=n
wrap=off|hard|soft>
　　 各参数含义：name：文本框名称；clos：宽度；rows：高度（行数）；wrap：换行控制，off：不自动换行；hard：自动硬回车换行，换行标记一同被传送到服务器中去；soft：自动软回车换行，换行标记不会传送到服务器中去。
　　 表单所涉及的标记较多，参数也较复杂，而实际制作表单时就是这些标记的组合应用，但一般的表单不可能涉及所有参数，我们还是那个原则，能用默认值的尽量用默认值，绝不设定一个不用的参数。我在后面的文章中将通过实例介绍一些常用参数的应用技巧。
三、 网页设计表单网页的制作方法
    通常制作表单网页的方法有两种，第一种是手工添加，第二种是利用表单向导，这里我们着重介绍第一种方法。
方法一：
1、新建网页
2、在网页上输入“留言簿”三个字后我们就需要插入一个可以为访客提供姓名输入的栏目。 　 单击菜单：插入――表单，会自动弹出一个下拉菜单，列出所有可供选择的字段
　 仔细观察，看看我们现在需要的是哪一个字段？（这里我们需要插入一个“单行文本框”）选中“单行文本框”后你的网页中会自动出现一个虚线框（这就是整个表单的范围）、一个“单行文本框”还有一对“提交”、“全部重写”按钮。
注意：
　　 虚线框中的每个元素可以看作是文字一样地对待，光标可以在它们之间移动，并可以在它们之间插入空格、空行
　　 将光标移至“单行文本框”前，插入文字“姓名”，再在“单行文本框”后插入文字“性别”
4、下面该作“性别”的字段了，经过分析，性别只可能有一种选择，不是“男”就是“女”，就像我们作单选题一样，那么想一想这里该用哪一个字段呢。
　　 我们发现“表单”里有一项是“单选按钮”，对，就是它了。
　　 我们在“性别”后面插入两个“单选按钮”，并分别在它们后面写上“男”、“女”。
注意：
　　 可以把字段当作文字一样来对待，那我们也可以对它进行“剪切”“复制”“粘贴”等操作，这里插入的第二个“单选按钮”就可以复制前一个。
想一想：
　　 预览发现，系统会自动让第一个“单选按钮”成为默认项，那么这样的默认项能不能改变或去掉呢？
　　 当然可以，双击一个“单选按钮”，会出现“单选按钮属性”对话框，默认选中就是设置的“初始状态”中的“已选”，可以改成“未选”。
5、“性别”只能选择一个，那“爱好”就有好多选择了，这里又该用什么字段呢。
　　 “表单”菜单里有一个“复选框”，这们可以用它来设计“爱好”的选项。
注意：
　　 “单选按钮”是圆形的，“复选框”是方形的，我们可以用“单选按钮”来设计单选题，用“复选框”来设计多项选择题。
　　 双击“复选框”同样可以打开“复选框属性”对话框，看看根据自己的需要可以改动哪些参数。
6、要实现单项选择我们除了可以用“单选按钮”外还可以使用“下拉菜单”，这种字段特别适合用在选择项较多的情况下（如“职业”）。
　　 通过菜单：插入――表单――下拉菜单，在网页中适当的地方插入一个“下拉菜单”，这时你会发现插入的“下拉菜单”中的选项是空的，怎么添加呢？
　　 还是通过双击“下拉菜单”，打开“下拉菜单属性”对话框。
　　 点击“添加”按钮，在“添加选项”对话框中添加需要的选择项，注意，如果是希望默认选择的，可以选中下面“初始状态”中的“已选”。
　　 可以再添加其它选项，并且可以利用“上移”“下移”按钮调整各选项之间的顺序。
7、如果要做留言板需要给访客提供能输入大量文字的地方，显然“单选文本框”是不够的，我们该加入什么字段呢？
　　 在插入――表单里还有一个“滚动文本框”，我们点击插入，而且还可以调整它的大小，当里面输入的文字多了后它会自动产生滚动条。
8、我们再来看看“提交”和“全部重写”两个按钮，这两个按钮是在插入任何一个表单字段时自动插入的，当然你也可以根据需要删除、修改。
　　 如果想把按钮上的文字改掉该怎么办呢，我们还是双击按钮，把“标签”的内容改掉即可。
　　 这里要注意的是，按钮“名称”和“标签”的区别。
注意可以结合我们上节课讲过的表格为表单网页排版布局。
除了我们刚才介绍的那种根据自己需要在表单菜单里逐一添加表单元素外，我们还有一种更简单的制作表单网页的方法，就是利用表单网页向导。
方法二：
1、菜单：文件――新建――网页
　　 在“新建”对话框里选择“表单网页向导”，确定。
注意：要想打开“新建”对话框，必须使用菜单，不要直接点击快捷工具栏上的“新建”按钮。
2、下一步，点击“添加”选择一种表单类型，这里我们可以看出表单不仅仅是用在打造留言板上，它在购物订单、调查信息、申请信箱、搜索等很多地方都常用到，这里我们选择“个人信息”为例吧。
3、在下一步可以根据自己的需要选择需要的参数，并且进行必要的设置。（其实这一步大家填写的就是一张表单）
4、还可以为你的表单网页选择多个类型的表单，每一步设置好了即可完成。
5、这时就自动生成了一张表单网页，我们还可以根据自己的需要对网页上的任何元素进行必要的修改。
这里我们可以看出网页上的表单元素也是利用表格进行排版的，我们还可以再进行修改，再插入图片、文字、表格等元素，还可以再进行色彩上的修饰，总之希望大家能发挥自己的想象，做出的网页具有自己的个性。
四、 网页设计表单处理
    在网页中加入表单用来收集信息时，表单本身只负责收集使用者输入的资料，真正在幕后负责接收、传递、处理、回应工作的，是CGI（Common Gateway Interface），即公共网关接口通信协议。一般情况下，如果要在网页中加入表单，就意味着必需自己撰写或使用别人写好的CGI程序。CGI程序一般用C、C++、Perl等语言编写，放在服务器上执行。对于不同的Web Server，CGI程序并不兼容，如果服务器换了一种Web Server程序，那么必须重写一个CGI程序。某些设计不良的CGI程序在执行时会使服务器主机的运行发生问题，甚至造成死机，因此一般的服务器管理员不会随便让使用者将CGI程序放到服务器主机上，于是ASP应运而生。ASP（Active Server Pages，即动态服务器网页）技术的原理与CGI相同，当服务器接收到表单资料后，会调用对应的ASP程序来处理这些资料，并将处理结果转换成HTML格式的资料送回浏览器供访问者观看。ASP的优点在于开发简单且跨平台，在一般的文字编辑软件中使用JavaScript或VBScript语言编写，结合HTML语法，不需要编译和链接即可执行。另外由于ASP程序送出标准的HTML文件到浏览器，因此目前大部分的服务器都支持ASP。

网页设计框架

一、网页设计框架与框架集的概念
　　框架：是浏览器窗口中的一个区域，它可以显示与浏览器窗口的其余部分中所显示内容无关的 HTML 文档。
　　框架集：是 HTML 文件，它定义一组框架的布局和属性，包括框架的数目、框架的大小和位置以及在每个框架中初始显示的页面的 URL 。框架集文件本身不包含要在浏览器中显示的 HTML 内容，但 noframes 部分除外；框架集文件只是向浏览器提供应如何显示一组框架以及在这些框架中应显示哪些文档的有关信息。
二、网页设计框架的用途
　　最常见用途就是导航。一组框架通常包括一个含有导航条的框架和另一个要显示主要内容页面的框架。 但是，框架的设计可能比较复杂；并且在许多情况下，您可以创建没有框架的 Web 页，它可以达到使用一组框架所能达到的许多同样效果。
　　使用框架具有以下优点：
访问者的浏览器不需要为每个页面重新加载与导航相关的图形。
每个框架都具有自己的滚动条（如果内容太大，在窗口中显示不下），因此访问者可以独立滚动这些框架。
　　例如，当框架中的内容页面较长时，如果导航条位于不同的框架中，那么向下滚动到页面底部的访问者就不需要再滚动回顶部来使用导航条。
　　使用框架具有以下缺点：
可能难以实现不同框架中各元素的精确图形对齐。
对导航进行测试可能很耗时间。
各个带有框架的页面的 URL 不显示在浏览器中，因此访问者可能难以将特定页面设为书签。
三、网页设计框架和框架集工作流程
　　要在浏览器中查看一组框架，请输入框架集文件的 URL ；浏览器随后打开要显示在这些框架中的相应文档。通常将一个站点的框架集文件命名为 index.htm ，以便当访问者未指定文件名时默认显示该名称。
　　下面的示例显示了一个由三个框架组成的框架布局：一个较窄的框架位于侧面，其中包含导航条；一个框架横放在顶部，其中包含 Web 站点的徽标和标题；一个大框架占据了页面的其余部分，其中包含主要内容。这些框架中的每一个都显示单独的 HTML 文档。

　　在此示例中，当访问者浏览站点时，在顶部框架中显示的文档永远不更改。侧面框架导航条包含链接；单击其中某一链接会更改主要内容框架的内容，但侧面框架本身的内容保持静态。无论访问者在左侧单击了哪一个链接，右侧主要内容框架都会显示适当的文档。
四、网页设计创建框架和框架集
　　1、使用预定义的框架集
　　通过预定义的框架集，您可以很容易地选择您要创建的框架集类型。 创建预定义的框架集有两种方法：
通过插入栏，您可以创建框架集并在某一个新的框架中显示当前文档。
将插入点放置在文档中， 从“插入” > “ HTML ” > “框架”子菜单中选择预定义的框架集或在“插入”栏的“布局”类别中，单击“框架”按钮上的下拉箭头，然后选择预定义的框架集。
“新建文档”对话框创建新的空框架集。
选择“文件” > “新建”， 在“新建文档”对话框中，选择“框架集”类别，从“框架集”列表选择框架集， 单击“创建”。
　　2、设计框架集
　　可以通过向窗口添加 “ 拆分器 ” ，在 Dreamweaver 中设计您自己的框架集。
创建框架集操作： 选择“修改” > “框架集”，然后从子菜单选择拆分项（例如“拆分左框架”或“拆分右框架”）。 Dreamweaver 将窗口拆分成几个框架。如果打开一个现有的文档，它将出现在其中一个框架中。
框架拆分操作： 要拆分插入点所在的框架，从“修改” > “框架集”子菜单选择拆分项。要以垂直或水平方式拆分一个框架或一组框架，请将框架边框从“设计”视图的边缘拖入“设计”视图的中间。要使用不在“设计”视图边缘的框架边框拆分一个框架，请在按住 Alt 键的同时拖动框架边框。
删除框架操作： 将边框框架拖离页面或拖到父框架的边框上。 如果要删除的框架中的文档有未保存的内容，则 Dreamweaver […]

网页设计表格

第一部分　网页设计插入表格
一、在网页设计中插入表
　1、定位插入点，使用鼠标单击。
　2、调出“插入表”对话框，
　　 ⑴　方法一：单击“对象”面板（普通）中的“插入表格”对象按钮；
　　 ⑵　方法二：单击“插入”｜“表格”菜单；
　3、确定行与列数　在“行”与“列”的输入框内输入所需的数值。
　4、确定边距与间距　在“单元格边距”与“单元格间距”的输入框内输入所需的数值。
　　 边距：指单元格内的数据（内容）与边框线的距离，默认为1个像素。
　　 间距：指相邻单元格之间的距离（包括上、下、左、右），默认为2个像素。
　5、确定表格宽度　在“宽度”输入框内输入所需的数值，在其右边选择单位。
　　 通常以百分比为单位，即以浏览器的宽度为基准的百分比。这样会随着浏览器窗口宽度的改变而改变；若选择“像素”固定单位，则当表格宽度大于浏览器窗口宽度时，将出现水平滚动条。
　 6、确定边框的厚度　在“边框”输入框内输入所需的数值。默认为1，若为0，则没有边框线（在布局时应用相当广。
二、在表格中添加内容
　1、插入文本
　　 ⑴　直接输入文本　定位单元格，直接输入文本，若文本超过宽度，则自动扩展。首先是按横向自动分摊宽度，若不够，则转到下行。
　　 ⑵　粘贴其它文本　先将其它文本存入到剪贴板中，再将剪贴板中的内容粘贴至当前光标处。
　2、在单元格中插入图片　与在文档中插入图片一样操作。
　　 ⑴　选定位，鼠标单击；
　　 ⑵　然后单击“对象”面板中的“插入图像”钮或选择“插入”｜“图像”菜单，弹出查找图像文件对话框；
　　 ⑶　选择所需的图像文件，单击“选择”即可。
三、输入外部数据
　　Dreamweaver可接受其它程序创建的表格数据，但这些表格数据要使用定界符。定界符即单元格间的分隔符，一般有制表位、冒号、分号等。还可以是Excel文件。
　　 导入Excel文件操作方法为：
　　 ⑴　启动Dreamweaver，建立一个文档
　　 ⑵　选择“文件”｜“导入”｜“Excel文档”菜单，弹出对话框。
　　 ⑶　选择Excel文件，确定即可。
　　 导入表格数据文件操作方法为：
　　 ⑴　启动Dreamweaver，建立一个文档
　　 ⑸　选择“文件”｜“导入”｜“导入表格数据”菜单，弹出对话框。
　　 ⑹　选择“数据文件”　单击“浏览”钮，查找到所需文件，选择“定界符”后，单击“确定”钮。
　　 ⑺　还可进行其它设置：“表格宽度”、“边距”、“间距”、“格式化首行”、“边框”等。
四、选择单元格元素
　1、选择单元格　用鼠标在所要选定的单元格内单击。
　2、选择一行　将指针指向待选行的最左边，当出现黑色的向右箭头时，单击。
　3、选择一列　将指针指向待选列的最上面，当出现黑色的向下箭头时，单击。
　4、选择连续的多行　
　　 方法一：将指针指向待选第一行的最左边，当出现黑色的向右箭头时，拖向最后一行。
　　 方法二：也可借助于键盘，先选第一行，然后按住Shift键不放，再选最后一行。
　5、选择连续的多列　
　　 方法一：将指针指向待选第一列的最上面，当出现黑色的向下箭头时，拖向最后一列。
　　 方法二：也可借助于键盘，先选第一列，然后按住Shift键不放，再选最后一列。
　6、选择不连续的多行、多列或单元格　按住Ctrl键不放，再用鼠标选择所需的行、列或单元格。
　7、选择整个表　
　　 方法一：将鼠标指针向表格的左上角，待出现四个方向的移动指针时，单击。
　　 方法二：先选中一个区域（行、列或单元格），再选择“编辑”｜“全选”菜单。
　　 方法三：先在表中单击，再选择“修改”｜“表格”｜“选择整个表”菜单，或右击的快捷菜单。
　　 方法四：先在表中单击，再选择状态左边的粗黑标记“table”。
第二部分　网页设计格式化表格
一、设置表格整体属性
　　选定整个表格，将出现表格属性面板。
　 在面板中，可修改
　　 ⑴　表格名称：为表格取一个名称，便于脚本语言调用。
　　 ⑵　行、列：修改行与列数。
　　 ⑶　宽与高度：修改宽度，可设百分比或固定值。高度一般让其自动调节，当然编辑完毕也可固定。
　　 ⑷　边距、间距：内容与边线的间隔，单元格间的间距。
　　 ⑸　对齐：有四种对齐方式，default、左对齐、居中对齐、右对齐。
　　 ⑹　边框：设置边框线的厚度，当值为0，无边框。
　　 ⑺　背景颜色、边框颜色：设置其颜色，可单击颜料盒选择。
　　 ⑻　背景图像：可选择一幅图像作为背景。
　　 ⑼　清除行高按钮：将自动清除行中多余的高度。
　　 ⑽　清除列宽按钮：将自动清除列中多余的宽度。
　　 ⑾　像素转百分比按钮与百分比转像素按钮：使表格的度量单位相互转换。
二、格式化行、列或单元格
　　当选择了行、列或单元格时，出现属性面板
　　 在面板中，可修改
　　 ⑴　水平对齐：有四个值　Default、左对齐、居中对齐、右对齐。
　　 ⑵　垂直对齐：有五个值　Default、顶端、中间、底端、基线。
　　 ⑶　宽度与高度：修改宽度与高度的值。若表格宽度单位为百分比，则宽度可随整个表格自动调节。
　　 ⑷　不换行：当内容超过单元格宽度时，不会自动转到下一行，一直向右扩展，出现水平滚动条。
　　 ⑸　标题：设为标题，该行文本自动变为粗体，一般只设表头一行。
　　 ⑹　边框：设置边框的颜色，默认为无色，可单击颜料盒选择。
　　 ⑺　背景颜色：设置其颜色，可单击颜料盒选择。
　　 ⑻　背景：可选择一幅图像作为背景。
　　 ⑼　合并单元格按钮：将选定的多个连续单元格合并为一个单元格。
　　 ⑽　拆分单元格按钮：将一个单元格拆分为多个单元格，可拆成多行或多列。
　　 ⑾　上部为文字属性格式，若单元为图像，则上部为图像属性。
三、使用预置表格类型
　　Dreamweaver系统中内置了许多表格类型，我们可以直接套用。
　1、选中要套用的表格　用鼠标在表格中单击。
　2、调出预置格式表格　选择“命令”｜“格式化表格”，弹出对话框。
　3、在预置格式下拉表中，选择所需的格式。
　4、在“行颜色”区，可设置行的颜色。
　　 ⑴　第一种：指行中的颜色用第一种颜色。
　　 ⑵　第二种：指行中的颜色用第二种颜色。
　　 […]

网页设计超级链接

一、网页设计超级链接的概念
　　超级链接简称链接，是指从一个网页指向一个目标对象的连接关系，它包含两个部分，即链接源和链接目标，链接源就是通常鼠标放在上面变成小手的网页元素，它可以是文档内任何地方的任何文本、图象或图像的某个部分，还可以是FLASH动画、FLASH文本、FLASH按钮、普通按钮、鼠标经过图像、导航栏等。链接目标就是链接所指向的网页、网页的某个位置、图象、多媒体文件、电子邮件或可下载软件、WORD文档、EXECL文档等。
　　超级链接的作用是，可以把一个网站的网页或多个网站连接起来，点击链接时从一个网页跳转到另一个网页，或者跳转到页面指定的位置。也正是超链接的存在是人们改变了以往的顺序阅读习惯，使整个Internet上的信息连为一个整体。
　　绝对路径：是一个完整的URL，包括协议、域名、路径，如 HTTP://www.czvtc.edu.cn/xi_bu/xin_xi/index.htm，常用于链接外服务器上的文件。
　　相对链接：只有路径，没有协议、域名，它又分为站点根目录相对路径和文档相对路径。站点根目录相对路径指从站点的根文件夹到文档的路径，它常用于对服务器的大型站点，当需要经常在站点的不同文件夹之间移动文件时，不用更改链接，它是最佳选择如/xi_bu/xin_xi/index.htm。文档相对路径指和当前文档所在的文件夹相对的路径，它使用较多。如../image/bg.jpg。
　　锚点：指在网页中对某个位置的标记，如#top，jxgc.htm#top，用于转移到指定网页的指点位置。
二、网页设计各种链接的功能和实现方法。
1 导航链接：实现站点内文档的链接。
　　 实现方法：
　　　　 使用指向文件图标链接文档：选中添加链接的网页元素，将“属性”检查器的“链接”域右边的“指向文件”图标拖动到站点窗口的文档中。这种方法方便快捷，推荐使用。若指向一个文件夹，如果发布到网上后，自动会打开这个文件夹下的默认首页文件index.htm。
　　　　　使用属性检查器：选中添加链接的网页元素，点击属性面板中的“浏览文件”图标。选中一个文件。会出现一个文件相对于“文档”，“站点根目录的选择”。文档相对路径是最适合用于本地链接的路径类型，适合绝大多数Web站点，推荐使用。
　　　　　从打开文档的选取中创建链接：选中文字，按Shift键，拖动出现“指向文件”图标，把“指向文件”图标拖向目标文件，就会建立链接。
　　选定链接目标之后，选择被链接文档要打开的位置：
若要使被链接文档不出现在当前窗口或框架中，从属性面板的“目标”弹出式菜单选取一个选项。
　　　　　_blank 在新的未命名的浏览器窗口中加载链接文档。
　　　　　_parent 在父框架页或包含该链接的框架窗口中加载链接文档。如果包含链接的框架不是嵌套的，则链接文档将加载到整个浏览器窗口中。
　　　　　_self 将链接文档加载到与链接相同的框架或窗口中，该目标是默认值，所以通常您不需要指定它。
　　　　　_top 将在整个浏览器窗口中加载链接文件，同时移除所有框架。
　　一个网站中，第一级链接或者导航链接选择_self，第二级链接和友情链接选择_blank。
2 锚点链接：链接到文档中的指定位置。
　　创建步骤：
　　　 链接到文档中的指定位置：在需要插入锚的地方，点一下光标，然后单击常用面板上的命名锚记工具。键入锚记名称，一个站点中的锚记名称只可以是唯一的，否则会出现错误。在文档中选取要创建链接的网页元素，点击属性面板中的“指向文件”图标，并将它拖动到您需要链接的锚记处，也可在链接文本框中输入锚点名字，如#top，也可链接到其他网页的锚点上，如jxgc.htm#top。
3 空链接：是一个无指向的链接，通常用于为页面上的对象或文本附加行为。
　　创建步骤：
　　　 在文档窗口中，选中要设置链接的文本、图像或其他对象，在属性面板的链接框中，只输入一个“#”号，如果单击这种地址为一个“#”的链接，无论当前你处于文档的什么地方，都会自动跳转到文档的开头位置。很多人非常讨厌这种情况，因此出现很多插件。可以用“###”来代替“#”，单击这样的链接的时候，会保持当前页面的浏览位置。还可以在属性面板的链接框中输入javascript:;创建空链接。
4 创建javascript脚本链接：用于执行javascript代码或者调用javascript函数，这样可以让来访者不用离开当前Web页面就可以得到关于一个项目的其他信息。当来访者点击某指定项目时，脚本链接也可以用于执行计算，表单确认和其他处理任务。
　　创建步骤：
　　　 　在文档窗口中选取文本，图象或对象，在“属性”检查器的“链接”栏中键入javascript:，其后紧接javascript代码或函数调用。例如在链接栏中键入javascript:alert(’哈哈你上当了’)创建一个链接，点击链接后就会出现一个警告框。
5 创建电子邮件链接
　　方法一：选取需要创建链接的文本或者图像，点击常用面板中的“电子邮件链接”工具，输入邮件地址。
　　方法二：选取需要创建链接的文本或者图像，在属性面板中的链接栏输入mailto:邮件地址，如：mailto:ronghe@sina100.com。
6 链接到站点中的文档或者其它站点，可以使用跳转菜单，跳转菜单是文档中的一种来访者可以看见的弹出式菜单，其中列出了链接的文档或文件。
　　创建跳转菜单，例如制作一个友情链接。
首先将插入点放在要插入链接的位置。点击表单面板中的跳转工具，在插入跳转菜单对话框中，点添加项添加新链接，在属性面板中选择类型为“菜单”。  新浪 搜狐 网易
7 给链接增加提示，给链接增加快捷键。
　　首先将插入点放在要插入链接的位置，点击常用面板上的超级链接工具，设置链接参数，标题是指当指向链接会出现提示，访问键是指按键盘上的快捷键会选中链接。例如在实例中按Alt+D键会选中5D多媒体。
　　当链接目标为非本站文档时，需要在属性栏中链接文本框中输入地址，

网页设计使用图像

一、网页设计图像简述
在计算机领域中，图形基本上分为位图图像和矢量图形两大类，而网页图像也就是这两类图形中的一部份。明确两者之间的差异，对创建和编辑网页图像很有帮助。
1、位图图像
Photoshop和其他的图形图像处理软件一样，一般都产生位图图像，也叫栅格图像。位图图像是用小方形网格（位图或栅格），即像素来代表图像，每个像素都被分配一个特定位置和颜色值，因此，处理位图图像时，编辑的是像素而不是对象或形状。
位图图像与分辨率有关，它包含固定数量的像素。如果在显示器上以较大的倍数放大显示，或以过低的分辨率打印，位图图像将出现锯齿边缘，有些粗糙。但在表现阴影和色彩（如在照片或绘画图像中）的细微变化方面，位图图像是最佳选择。
2、矢量图形
诸如Adobe Illustrator之类绘图软件创作的矢量图形，是由称为矢量的数学对象所定义的直线和曲线组成的。矢量根据图形的几何特性来对其进行描述。
矢量图形与分辨率无关，换句话说，可以将其缩放到任意大小和以任意分辨率再输出打印出来，都不会遗漏细节或降低清晰度。因此，矢量图形是文字（尤其是小字）和较粗糙图形的最佳选择，这些图形（比如微标）在缩放到不同大小时必须保持清晰的线条。
矢量和点阵图像在显示器中都是以像素的方式来显示的。
[…]

网页设计CSS样式表的设置和应用

一、网页设计CSS概念：
　　CSS是Cascading Style Sheets（层叠样式表单）的简称。它允许设计者在HTML文档中加入样式（如字体类型、颜色、大小等等）。对于设计者来说它是一个非常灵活的工具，不必再把繁杂的样式定义编写在文档结构中，可以将所有有关于文档的样式指定内容全部脱离出来，在行内定义、在标题中定义，甚至作为外部样式文件供HTML调用。CSS在当前的网页设计中已经成为不可缺少的技术，例如我们现在最常见的去除链接文字的下划线、设置网页文档内容为 9磅字就是CSS最简单的应用。
　　在CSS基本样式设置范例中，我们可以看到网页中s1、s2、s3三种最基本的CSS设置。为不同内容的文字设置了不同的字体、字型、字号及背景色；凹凸按钮的制作一、二范例中，为锭接文字在未打开链接、指向链接、活动链接、已访问链接设置了四种不同显示状态下同的颜色，这就是CSS的最简单应用。且网页每次被打开时会有一种切换效果，这是CSS的滤镜功能中的RevealTrans所完成的。
二、网页设计CSS的创建与使用：
◇创建CSS样式：
1、显示CSS样式浮动面板：单击［窗口］－－［CSS样式］
2、单击浮动面板右下角的加号
3、输入样式表名称
4、选择样式类型：（有三种）通常我们选择创建自定义样式
创建自定义样式：建一个可以作为 class 属性应用于文本区域或文本块的样式。
重定义HTML标签：对指定的 HTML 标签的默认格式进行重新定义。小心使用重定义标签，这样做你会改变许多页面的布局。
使用CSS选择器：对特定的标签组合，或者包含有指定 1d 属性的所有标签进行格式定义。 (在后面的内容中我们再会作详细举例和分析)
5、选择应用区：（有二种）
仅对该文档：则只能将此样式应用于本文件。
新建样式表文件：可将此样式保存成一个文件，可供其他文件调用。
6、样式定义对话框：（有8种样式属性设置对话框，详细介绍请参看帮助信息）
◇范例完成与演示：
　　1、首先定义一个嵌入式（仅对本文档）的样式——body中的文字定义为9pt。
　　按下Shift+F11打开CSS面板(CSS面板面于DREAMWEAVER MX的右边，和行为，HTML样式均在设计窗口)——新建一个样式表——选中重新定义HTML标签(R)和仅对该文档两项——出现“CSS样式定义”对话框——选择分类为“类型”——设定文字为“宋体”、大小为9pt——确定。
　　说明：上面的定义选择了<body>标签，也就是说<body>标签内的文字都将会是宋体，大小为9磅（pt），而 <body>是网页的主体，也就是说网页内的所有文字都如上定义。
　　范例：CSS基本样式设置。
　　2、定义一外部连接式CSS样式——去掉链接文字的下划线，为链接文字设置不同状态下的链接颜色。
　　很多网站做出来的链接都是无下划线的（或者鼠标移到后下划线不见了），而自己做出来的网页总是有下划线的。还有默认链接文字的颜色是固定的，未链接时为蓝色，链接后为紫红色，千篇一律，在网页中很是单调，其实这些都可以根据网站的风格、设计者的喜好进行不同的设置。
　　再次“新建CSS样式”——这次选中使用CSS选择器和新建样式表文件两项，标签选择选a:link——“保存样式表文件”为a.css（样式表文件的扩展名为.CSS）——在“CSS样式定义”对话框中，字本装饰那里选无，表示无下划线，文字颜色为ff0000——确定即设定好了未链接文字无下划线，且文字颜色为红色。
　　说明：<a>是指有链接的文字
　　　　　a:link：表示已经链接；
　　　　　a:hover：表示鼠标移上链接时；
　　　　　a:active：表示链接激活时；
　　　　　a:visited：表示己点击过的链接。
　　然后重复几次上面步骤，按你的喜欢分别定义好上面几个标签即可。
　　范例：凹凸按钮的制作一、二。
　　3、CSS滤镜的使用——为网页设置页面间的切换效果。
　　将代码<Meta http-equiv=Page-enter content=revealTrans(Transition=?,Duration=?) >加入<head>区，其中Duration：是切换时间，以秒为单位。Transtition：是切换方式，可设置为0到23，显示不同的切换效果。
　　范例：滤镜的淡入淡出效果
三、网页设计CSS的滤镜：
　　这就是CSS的最精彩的部分–滤镜，它将把我们带入绚丽多姿的多媒体世界。正是有了滤镜属性，页面才变得更加漂亮——“CSS样式定义”对话框的“分类”中有一项“扩展”，这个功能很强，可以改变光标的样式，还有定义滤镜。CSS提供了一些内置的多媒体滤镜特效，使用这种技术可以把可视化的滤镜和转换效果添加到一个标准的HTML元素上，例如图片、文本容器、以及其他一些对象。Dreamweaver提供了16种滤镜可供选择。　　　　　　　　　　　　　　　　　
滤镜名　 说明 
Alpha　 让对象呈现渐变半透明效果 
Blur　　 让对象产生风吹模糊的效果
BlendTrans 网页或对象的淡入淡出切换效果
DropShadow 让对象有一个下落式的阴影
Glow 在对象的周围产生光晕而模糊的效果 
Chroma 让图像中的某一颜色变成透明色
FlipH　 让HTML对象水平转换
FlipV 让HTML对象垂直转换 
Wave　 让HTML对象产生水平或是垂直方向上的正弦波形
Shadow　 让对象产生阴影效果 
Mask　 利用一个HTML对象在另一个对象上产生图像的遮罩
Light　 在HTML元件上放置一个光影 
Gray　 把一个彩色的图象变成灰色调图象 
RevealTrans 让网页或对象建立切换效果
Invert 让对象产生照片底片的效果
XRay 让对象轮廓突出显示 
　　其中，RevealTrans、BlendTrans、Light一般需要与JavaScript脚本结合，方能产生效果。RevealTrans更是有23种切换效果，如下图所示：
转换类型 对应代号 转换类型 对应代号 转换类型 对应代号
矩形从大到小 0 垂直形百叶窗 8 水平向外裂开 16
矩形从小到大 1 水平形百叶窗 9 向左下剥开 17
圆形从大到小 2 水平棋盘
 10 向左上剥开 18
圆形从小到大 3 垂直棋盘 11 […]

网页设计文本与网页属性设置

一、网页设计编辑文本
1、输入文本
        在Dreamweaver中输入文本的方法与在Word中输入文本的方法基本相同，在此没有必要重复。此处将讲述如何改变文字的默认状态，将文字变成自己想看到的效果。
        （1）换行
         自动换行：在输入文字时，若一行的长度超过了Dreamweaver窗口的显示范围，文字将自动换到下一行。自动换行的好处在于不管浏览器窗口的大小，网页文字者将依照窗口大小自动换行，避免超出页面之外而需要移动滚动条浏览的情况。
         利用Enter键换行：在输入文字后按Enter键，文字成段，且上下段各空一行。
         利用Shift+Enter键换行：如果想要将文字手动换行，中间又不能出现空白行，可以按shift+Enter键。还可以通过插入栏来完成，将插入栏切换到Character类，再单击按钮，即可实现换行而又不出现空白行。
        （2）加入特殊字符
        有时为了内容的需要，要在网页中插入一些键盘上没有的特殊字符，例如注册商标®、版权符©等。在Dreamweaver MX中，这些特殊字符不仅可以通过Insert菜单下的Special Character命令来插入，还可以通过插入栏直接插入。将插入栏切换到Character类，再单击显示的Character按钮列表上所要插入的特殊字符按钮，即可插入字符。但插入的字符在Dreamweaver中是看不到的，看到的只是这些字符的代码而已。如果想查看插入的字符，则需要在浏览器中浏览。
        如果在插入栏中找不到所需的字符，还可单击 按钮，将弹出Insert Other Character(插入其他字符）对话框，在其中有更多的字符可供插入。
        （3）加入批注文字
        在网页中加入适当的批注文字(Comment)，可以使日后修改、管理网页时更加方便。由于批注只有在编辑网页时或查看原代码时才能看到，所以不必担心批注文字破坏版面。
        将光标移到想要插入批注的地方，然后单击插入栏中Common类的Inset Comment按钮，弹出Comment (插入批注)对话框，如下图所示。在对话框中输入批注的内容，再单击OK按钮，即可将批注内容加入到网页中。

2、查找和替换文本
        在Dreamweaver MX中，如果要在文档中查找或替换某个文字，可利用其提供的查找和替换功能。Dreamweaver MX能在4种不同的环境中进行查找和替换，这4种不同的环境是Current Document(当前文档)、Entire Local Site(整个本地站点)、Selected Files in Site(在站点中选择的文件)和Folder(文件夹)。还提供了4种不同的查找方式，即Source Code(源代码)、Text(Advanced)(文本高级查找方式)及Specific Tags(特殊标记符)。利用这些功能可以很轻松地完成在各种复杂条件下的查找和替换。
        选择Edit(编辑)\Find and Replace(查找与替换)命令，打开Find and Replace对话框，如下图所示。完成相关设置后，单击Find All或Replace All按钮，可以完成查找或替换。

        关于图中各项的说明。
        1、设置当前查找环境。
        2、显示当前文档标题。
        3、查找字符串文本框。
        4、设置当前查找方式。
        5、替换字符串文本框。
        6、查找与替换选项(包括是否区分大小写、是否忽略空格区别、是否使用常规表达式)。
        7、查找下一个满足条件的字符串。
        8、查找所有满足条件的字符串。
        9、替换满足条件的字符串。
        10、替换所有满足条件的字符串。
        11、保存当前查询条件。
        12、打开硬盘中已经存在的查询条件文件。
        在Dreamweaver MX中，可以在代码视图下很方便地查看整个设计的代码。如果想查找或替换代码中的特殊标记及其属性，也可以通过查找与替换功能来完成。
3、检查拼写
        如果要对英文材料进行校正，可以使用Dreamweaver提供的Check Spelling(检查拼写)功能。
        选中需进行拼写检查的文字内容，再选择Text\Check […]

网页设计软件Dreamweaver MX界面简介

1.选择网页设计Dreamwever MX工作界面
        在第一次启动Dreamweaver MX时，系统会打开Workspace Setup对话框让用户选择工作界面，如下图所示。在该对话框中可以选择Dreamweaver MX的工作界面，用户可以选择Dreamweaver MX Workspace(Dreamweaver MX工作界面）、Dreamweaver MX Workspace HomeSite/Coder-Style和Dreamweaver 4 Workspace等3种工作界面中的一种。
 
       （1）Dreamweaver MX Workspace
        Dreamweaver MX Workspace是使用MDI（多文档界面）一个整合型工作界面，其将所有的文档窗口和面板整合到主窗口中，并将面板组放在窗口的右边部分，如下图所示，推荐使用该工作界面。

        （2）Dreamweaver MX Workspace Home Site/Coder-Style界面
        在Workspace Setup对话框中选择Dreamweaver MX Workspace按钮后，再启用下边的HomeSite/Coder-style单选按钮，可以使用Dreamweaver MX Workspace HomeSite/Coder-Style工作界面。该工作界面也是一个同Dreamweaver MX 相同的整合型的工作界面，不过其面板组放在主窗口的左边，如下图所示。该工作界面主要是为喜欢手写代码的用户设计的，在该工作界面中使用HomeSite或Macrwmedia自己的ColdFusion Studio等网页编辑器使用类似的界面，打开该工作界面时默认的显示模式为显示代码模式。
 
       （3）Dreamweaver 4 Workspace
        Dreamweaver 4 Workspace是为那些宁愿使用熟悉的Dreamweaver 4界面的用户准备的，选择该工作界面将使Dreamweaver MX的工作界面看起来和Dreamweaver 4的界面相似，如下图所示。

2.网页设计主窗口
        Dreamweaver MX的整个工作界面为一个多文档型的窗口，该主窗口主要包括以下内容。
        （1）菜单栏
        使用菜单栏基本上能够实现Dreavweaver MX的所有功能。其功能包含在10个菜单中：File(文件)菜单用来管理文件，Edit(编辑)菜单用来编辑文本，View(查看)菜单用来查看物件，Insert(插入)菜单用来插入元素，Modify(修改)菜单实现对页面元素修改的功能，Text(文本)菜单用来对文本进行操作，Commands(命令)菜单收集了所有的附加命令项，site(站点)菜单用来管理站点，Window(窗口)菜单用来切换所有的控制面板和窗口，Help(帮助)菜单可实现联机帮助功能。在后面的讲述中，将涉及到每个菜单中的命令。
        （2）插入栏
        插入栏是MX版本中新添加的部件，其实质就是Dreamweaver 4 中的对象面板组，在其中包含一些用于创建不同类型对象(如图像、表格、层、媒体、脚本和应用程序等)的按钮。用户可以单击Insert按钮隐藏/显示整个插入栏，通过单击相应的标识符名切换显示不同的按钮。
        （3）文档工具栏
        文档工具栏中包含常用编辑文档的操作按钮。
        […]

网页设计软件Dreamweaver MX新增功能

随着网页设计软件版本的不断提高， Dreamweaver 的功能也在不断增加和完善。 Dreamweaver 目前已经升级到MX 版，在功能方面也增强了许多，下面介绍一下其新增功能。
1、网页设计方面的新增功能
        （1）改善工作界面
        Dreamweaver MX 提供了更规范化的工作界面及更好的面板管理：Dreamweaver MX 将多个面板组成组，随时可以展开或集合，然后进一步把多个面板组放在一起，Dreamweaver MX 在此基础上将所有Dreamweaver 关联窗口全部置入主窗口中（仅限Windows操作系统），该界面被称为MDI（Multiple Document Interface,多文档界面）。
        （2）新增文档样式
        在新建文档时， Dreamweaver MX 提供多种文档样式供用户选择，这些文档样式主要有Basic Page（基本样页）、Dynamic Page(动态样页）、Template Page（模板样页）、Other（其他）、CSS Style Sheets（层叠样式表）、Framesets（框架）、Page Designs（页面设计）和Page Designw（Accessible）等8个基本样式类型，使用这些样式可以使用户的网页设计拥有专业品质的界面和脚本。
        （3）更好地支持CSS
        Dreameaver MX进一步加强了对CSS（层叠样式表）的支持，提供了一个改进的CSS样式面板。通过该面板用户可以使用设计时间样式片段（design-time style sheets）减少页面编辑。
        改进后的CSS样式面板可以使用户很容易区分本地定义样式和那些在外部样式表中定义的样式，同时还提供了许多新的CSS2结构。
       （4）增强了Dreamweaver的模板功能
        Dreamweaver MX增强了其模板功能，可以使用户很容易达到以下目的：所有的区域可随意选择，通过使用重复区域在同一个界面中显示多个项目；可以实现多个模板嵌套；使修改单个标识符的属性变得可行。
2、网页设计代码方面新增功能
        （1）新增向导式代码工作界面
        新增的向导式代码工作界面可以使用户在使用 HomeSite （最好的HTML编辑器之一）或 Macromedia 的ColdFusion Studio 时，使用相似的工作蚧面（仅限Windows操作系统）。
        （2）新增代码提示功能
        新增的代码提示功能可以在用户编辑代码时自动显示命令代码以供用户选择，从而使用户不用去记忆繁多的命令代码。
       （3）区域面板
        新增的区域面板用来存储、组织和重新使用任何一条（或多条）代码。用户可以在各种代码中插入或屏蔽某一段代码。
       （4）新增标识符编辑功能
        新增的标识符编辑功能可以使用户在代码显示界面随意编辑单个标识符的属性，如 HTML 标识符、CFML号标识符和 ASPNET标识符等。
3、扩展方面新增功能
        […]

网页设计软件Dreamweaver MX简述

当今网页设计软件可以说是层出不穷，Macromedia 推出的 Dreamweaver 就是一个广泛受到好评的网页设计软件。它是一套针对专业网页设计师特别设计的可视化网页开发工具，利用它可以轻而易举地制作出跨越平台和跨越浏览器的充满动感的网页。
         Dreamweaver MX 拥有出色的软件界面，其特别的控制面板使设计者们用起来得心应手。Dreamweaer MX 还能与 Macromedia 公司的其他软件进行完美的合作。Dreamweaver MX 最精彩之处便是其强大的多媒体处理功能，在设计DHTML(Dynamic HTML)和 CSS(Cascading Style Sheets)方面表现得极为出色，它利用 JavaScript和 DHTML 语言代码轻松地实现网页元素的动作和交互性操作。在这方面它超过了FrontPage 2002 Hotdog 和 HomeSite 等著名网页设计软件，成为目前最为流行的网页设计工具。
    只要上过网，就一定会被网页上的精彩内容所吸引，自然而然就想亲手制作一个网页。制作网页的方法很多，如果从头学习HTML语言，用“记事本”一个字一个字地制作出来，则不下一番功夫，而且没有足够的经验是不可能建立起一个真正的网页的。
        除此以外如果想做一些精彩动画如文字的旋转或是图片的跳动…… 这些会动的网页效果一般需要用Script语言来完成。而如果想把图片或动画放到网页设计的任意处或使其具有更多的变化，还得熟悉一下苦涩无味的CSS语法，想起来就会让人产生无力感。
         在目前市面上众多的网页设计编辑软件中，有的重视效率，有的强调版面设计，而Dreamweaver MX可以很方便地实现这两方面的完美结合。另外，Dreamweaver MX 的网页设计动态效果与网页设计排版功能都优于一般同类软件，即使是初学者也能制作出相当水准的网页，所以Dreamweaver MX 是网页设计者的最佳选择。