网页制作基础--课件

第第4节节 网页设计基础网页设计基础Dreamweaver 计算机基础部计算机基础部2017.41ppt课件第4节网页设计基础Dreamweaver计算机基础部网站的创建和管理网站的创建和管理网站设计的基本操作网站设计的基本操作本节学习目标本节学习目标网页设计的基本概念网页设计的基本概念网页设计的超级链接和多媒体应用网页设计的超级链接和多媒体应用网站设计的布局网站设计的布局网页中表单的应用网页中表单的应用站点的发布与管理站点的发布与管理（*选学）2ppt课件网站的创建和管理网站设计的基本操作本节学习目标网页设计的基本4.1 网页设计的基本概念网页设计的基本概念1.网页与网页与HTML网页与网页与HTML网页与网页与HTML网页网页HTML3ppt课件4.1网页设计的基本概念1.网页与HTMLhtm网页网页HTML4ppt课件网页HTML4ppt课件网页网页HTML5ppt课件网页HTML5ppt课件 HTML（Hypertext Markup Language）是是一一种种超超文本标记语言，用来描述万维网上的超文本文件。文本标记语言，用来描述万维网上的超文本文件。从文件的角度来说，一个网页就是一个从文件的角度来说，一个网页就是一个HTML文件。文件。设计、创建、制作与发布网页设计、创建、制作与发布网页Dreamweaver CS4、FrontPage、Adobe Pagemile、Claris Home Page等等网页制作工具网页制作工具42万字符的万字符的HTML文本需文本需要我们自己编写吗？要我们自己编写吗？6ppt课件HTML（HypertextMarkup构构成成网网页页的的基基本本元元素素大大体体相相同同，主主要要包包括括标标题题、网网站站Logo、导导航航、超超链链接接、广广告告栏栏、文文本本、图图片片、动动画、视频与音频等。画、视频与音频等。按网页的表现形式可将网页分为按网页的表现形式可将网页分为：u静态网页静态网页u动态网页动态网页 2.网页设计的流程网页设计的流程 网页设计的流程网页设计的流程主要包括站点设计和网页制作两大部分。主要包括站点设计和网页制作两大部分。7ppt课件构成网页的基本元素大体相同，主要包括标题、网站Logo、导航网页设计的流程主要包括：网页设计的流程主要包括：1.前期策划2.创建站点3.创建主页和其他网页4.添加网页基本元素5.创建网页超级链接6.网页设计的版面布局7.制作网页表单8ppt课件网页设计的流程主要包括：8ppt课件本节课后网页制作课题本节课后网页制作课题制作一个属于自己的兴趣主题网站：例：自己喜爱歌手的网站 主页：歌手的介绍及发行唱片 为每一张唱片建立一张网页，对应网页上为该唱片的各曲目介绍，如歌词，词曲作者，歌曲试听、演唱会视频等等。9ppt课件本节课后网页制作课题制作一个属于自己的兴趣主题网站：9ppt4.2 网站的创建和管理网站的创建和管理4.2.1 Dreamweaver的界面的界面10ppt课件4.2网站的创建和管理4.2.1Dreamwea4.2.2 站点的新建与管理站点的新建与管理 在在Dreamweaver CS4中中，“站站点点”是是一一个个文文件件夹夹，用用于于存存放放网网站站的的所所有有图图像像、多多媒媒体体等等文文件件，便便于于用用户户对对站点进行发布、维护和管理。站点进行发布、维护和管理。1.站点的结构 要制作一个能够被公众浏览的网站，首先要在要制作一个能够被公众浏览的网站，首先要在本地磁盘上制作一个网站，然后把这个网站上传到本地磁盘上制作一个网站，然后把这个网站上传到Web服务器上。服务器上。放在本地磁盘上的网站称为本地站点，处于放在本地磁盘上的网站称为本地站点，处于Internet中中Web服务器上的网站称为远程站点。服务器上的网站称为远程站点。11ppt课件4.2.2站点的新建与管理在Dreamw2.站点的建立 本地站点是存放网站内容的集合本地站点是存放网站内容的集合体，网站的内容都分门别类地保存在体，网站的内容都分门别类地保存在各类文件夹中。各类文件夹中。步骤：步骤：（1）打开打开“站点定义站点定义”对话框对话框（2）定义站点）定义站点例例1：建建立立一一个个本本地地站站点点“站站点点1”，站站点点文文件件夹夹为为C盘的盘的“计算机应用计算机应用”。12ppt课件2.站点的建立本地站点是存放网站内容的集3.3.站点的管理站点的管理 站点建立后，站点建立后，Dreamweaver可可以对站点及站点中的文件进行管理，以对站点及站点中的文件进行管理，可以对所建立的站点进行移动、复制、可以对所建立的站点进行移动、复制、删除、导入、导出等操作。删除、导入、导出等操作。（1）打开）打开“管理站点管理站点”对话框对话框（2）切换站点）切换站点（3）编辑站点）编辑站点（4）复制站点）复制站点（5）删除站点）删除站点（6）导入）导入/导出站点导出站点（7）站点的查看方式）站点的查看方式13ppt课件3.站点的管理站点建立后，Dreamwe在网页创作中，网页上的信息大在网页创作中，网页上的信息大多是通过文字来表达的。文字是最基多是通过文字来表达的。文字是最基本的元素之一，具有准确快捷地传递本的元素之一，具有准确快捷地传递信息、存储空间小、易复制、易保存、信息、存储空间小、易复制、易保存、易打印等优点，其优势很难被其他元易打印等优点，其优势很难被其他元素所取代。素所取代。（1）输入文本和空格）输入文本和空格（2）文本换行（）文本换行（Enter与与Shift+Enter）4.3 网站设计的基本操作网站设计的基本操作1.文本操作14ppt课件在网页创作中，网页上的信息大多是通过文字来（3）网页页面属性设置 设置网页的标题、背景图像、背设置网页的标题、背景图像、背景颜色、文本颜色、链接颜色、页边距等，景颜色、文本颜色、链接颜色、页边距等，对外观进行整体上的控制，以保证页面属对外观进行整体上的控制，以保证页面属性的一致性。性的一致性。单击此按此按钮，打开打开“页面属性面属性”对话框框15ppt课件（3）网页页面属性设置设置网页的标题、背景例例2：打打开开wy1.html，将将网网页页标标题题设设置置为为“母母亲亲河河”，设置网页的超级链接颜色。，设置网页的超级链接颜色。16ppt课件例2：打开wy1.html，将网页标题设置为“母亲河”，设置（4）文本属性设置（HTML属性）例例3：在在wy1.html中添加日期和水平线。中添加日期和水平线。水平水平线属性属性设置置日期属性日期属性设置置（5 5）添加特殊字符（）添加特殊字符（“插入插入”/“HTMLHTML”/“特殊特殊字符字符”）（6 6）添加日期（）添加日期（“插入插入”/“日期日期”）和添加水）和添加水平线（平线（“插入插入”/“HTMLHTML”/“水平线水平线”）17ppt课件（4）文本属性设置（HTML属性）例3：在wy1.html中（7）设置列表 网页文本编排中，一些类型相同或具有序列网页文本编排中，一些类型相同或具有序列关系的文本内容可以通过列表的方式来呈现，如此关系的文本内容可以通过列表的方式来呈现，如此可以使网页资料显得整齐规则，便于阅读。可以使网页资料显得整齐规则，便于阅读。有两种有两种列表：列表：编号列表编号列表和和项目列表项目列表（“格式格式/列表列表”）。）。编号列表效果编号列表效果项目列表效果项目列表效果18ppt课件（7）设置列表网页文本编排中，一些类型相同例例4：将将wy1-1.html中的相应段落设置编号列表。中的相应段落设置编号列表。列表属性列表属性设置置列表菜列表菜单选择19ppt课件例4：将wy1-1.html中的相应段落设置编号列表。列表属 CSS（Cascading Style Sheet）称为）称为“层叠层叠样式表样式表”，简称为，简称为“样式表样式表”。CSS是一组格是一组格式设置规则，用于控制式设置规则，用于控制Web页面元素的外观布页面元素的外观布局。局。使用使用CSS可以灵活并更好地控制许多文本可以灵活并更好地控制许多文本属性，包括特定字体、大小、粗体、斜体、下属性，包括特定字体、大小、粗体、斜体、下划线等。划线等。2.CSS样式20ppt课件CSS（CascadingStyleS（1）CSS规则规则 CSS规则主要有选择器规则主要有选择器和声明两个部分组成，选择和声明两个部分组成，选择器是表示格式元素的术语，器是表示格式元素的术语，声明用于定义元素样式，如声明用于定义元素样式，如右侧右侧所示的所示的.a1是选择器，是选择器，介于介于之间的内容就是声明。之间的内容就是声明。选择器声明21ppt课件（1）CSS规则CSS规则主要有选择器和声明（2）CSS定义定义例例5：建建立立如如前前页页图图所所示示的的CSS规规则则.a1，并并应应用用到到wy1.html的第二段文本上。的第二段文本上。步骤：步骤：u单击文本单击文本“属性属性”面板上的按钮面板上的按钮 ，“目标规则目标规则”中中选择选择“”，单击出现，单击出现“新建新建CSS规则规则”对话框。对话框。u输入选择器名称输入选择器名称.a1，单击，单击“确定确定”按钮，在按钮，在“.a1的的CSS规则定义规则定义”对话框中点开对话框中点开“Font-Family”下拉列表，选下拉列表，选择择“编辑字体列表编辑字体列表”选项选项。u在在“编辑字体列表编辑字体列表”对话框中，单击对话框中，单击 按钮可以将右边按钮可以将右边“可用字体可用字体”中的中的“宋体宋体”放入左边的放入左边的“选择的字体选择的字体”中，中，单击上面的单击上面的“+”号，可将字体上面的添加到字体列表号，可将字体上面的添加到字体列表中，并可以继续添加新字体中，并可以继续添加新字体。u单击单击“确定确定”按钮，按钮，回到回到定义定义CSS规则规则对话框进行设置。对话框进行设置。22ppt课件（2）CSS定义例5：建立如前页图所示的CSS规则.a1，并添加字体定义规则23ppt课件添加字体定义规则23ppt课件（3）CSS的应用的应用u选择需设置属性的文本，在属性面板的“类”下拉列表框中选择.a1规则。选择a1规则24ppt课件（3）CSS的应用选择需设置属性的文本，在属性面板的“类”4.4 网页设计的超级链接和多媒体应用网页设计的超级链接和多媒体应用4.4.1.超级链接的设置超级链接的设置练习练习：完成下面网页中各式超级链接的设置：完成下面网页中各式超级链接的设置：25ppt课件4.4网页设计的超级链接和多媒体应用4.4.1.超级 超链接是指页面对象之间的链接关系，只有通超链接是指页面对象之间的链接关系，只有通过超链接才可以实现在不同网页，乃至不同网站之过超链接才可以实现在不同网页，乃至不同网站之间的跳转。间的跳转。超链接就是从一个网页指向一个目标的关系，超链接就是从一个网页指向一个目标的关系，目标可以是另一个网页，可以是同一网页的不同位目标可以是另一个网页，可以是同一网页的不同位置，还可以是一幅图像、一个文件等。置，还可以是一幅图像、一个文件等。26ppt课件超链接是指页面对象之间的链接关系，只有通过超例例6：在在wy1.html中中设设置置第第一一行行中中文文本本“黄黄河河”的的超级链接，链接文件为超级链接，链接文件为“huanghe.html”。插入链接对话框1.文本链接27ppt课件例6：在wy1.html中设置第一行中文本“黄河”的超级链接在在“目标目标”下拉列表中可以选择超级链接的打下拉列表中可以选择超级链接的打开方式开方式。u_blank：在一个新的浏览器中打开。u_parent：在父框架中打开。u_self：在网页所在的窗口或框架中打开，此为默认选项。u_top：在浏览器窗口打开。28ppt课件在“目标”下拉列表中可以选择超级链接的打开方式。_blank2.锚记链接Dreamweaver提供了锚记链接功能，可创建跳转到页面的指定位置的链接。当建立一个锚记后，会在屏幕上显示锚记标记。执行菜单“编辑/首选参数”命令，在“不可见元素”中选取“命名锚记”复选框，“确定”后即可显示锚记。显示锚记29ppt课件2.锚记链接Dreamweaver提供了例例7：在在wy1.html网网页页尾尾部部添添加加“返返回回顶顶部部”四四个个字，并建立超级链接，可跳转到网页的首部。字，并建立超级链接，可跳转到网页的首部。步骤：u定义锚记名“m1”u尾部添加“返回顶部”文字u选择文字，设置链接。注意注意：锚记前必须加上：锚记前必须加上#号，即号，即“#m1”。30ppt课件例7：在wy1.html网页尾部添加“返回顶部”四个字，并建3.EMAIL链接在对象的“属性”面板的“链接”框内输入“mailto:”并输入Email地址，如mailto:。4.4.外部链接外部链接在“属性”面板的“链接”框内直接输入外部链接地址，如http:/。31ppt课件3.Email链接在对象的“属性”面板的“链接”框内输入4.4.2.多媒体的应用多媒体的应用练习：练习：完成如下网页中多媒体元素的添加设置：完成如下网页中多媒体元素的添加设置：32ppt课件4.4.2.多媒体的应用练习：完成如下网页中多媒体元素的添加例例8：将将图图像像huanghe.jpg文文 件件 插插 入入 到到wy1.html文文档档中中，并并设设置置替替换文本换文本。选择图像像1.插入图像（插入图像（“插入插入/图像图像”）输入替入替换文本文本“母母亲河河”图像的属性设置图像的属性设置33ppt课件例8：将图像huanghe.jpg文件插入到wy1.html插入鼠标经过图像插入鼠标经过图像 “鼠标经过图像鼠标经过图像”是指在浏览器中，是指在浏览器中，当鼠标指针移动到图像上时，图像随当鼠标指针移动到图像上时，图像随即变成另外一幅图像，当鼠标指针移即变成另外一幅图像，当鼠标指针移开时，又会恢复到第一幅图像。开时，又会恢复到第一幅图像。命令：命令：“插入插入/图像对象图像对象/鼠标经过对象鼠标经过对象”34ppt课件插入鼠标经过图像“鼠标经过图像”是指在浏览器例例9：在在wy1.html网网页页中中插插入入“鼠鼠标标经经过过图图像像”，图像为图像为huanghe1.jpg和和huanghe2.jpg文件。文件。原始图像原始图像鼠标经过图像鼠标经过图像插入插入“鼠标经过图像鼠标经过图像”对话框对话框35ppt课件例9：在wy1.html网页中插入“鼠标经过图像”，图像为h2.插入插入Flash动画动画 Flash动画以其文档容量小、效果动画以其文档容量小、效果丰富等特点深受网页制作者的钟爱丰富等特点深受网页制作者的钟爱。例例10：将将Flash文文件件001.swf插插入入到到新新建建的的网网页页wy2.html中。中。“插入/媒体/SWF”菜单命令选择Flash文件36ppt课件2.插入Flash动画例10：将Flash文件001.s3.添加音频（添加音频（“插入插入/媒体媒体/插件插件”）例例11：将将声音声音文件文件ex2.wav添加到添加到网页网页wy2.html中中。插入音频后，打开“窗口”菜单中的“标签编辑器”，可以对音频进行属性设置。打开打开标签编辑器器音音频属性属性设置置37ppt课件3.添加音频（“插入/媒体/插件”）例11：将声音文件ex4.添加视频添加视频(“插入插入/媒体媒体/FLV”）例例12：将将视视频频文文件件Musicvedio.flv添添加加到到网网页页wy2.html中。中。FLV视频标签FLV预览效果38ppt课件4.添加视频(“插入/媒体/FLV”）例12：将视频文件M插入FLV对话框设置视频的宽度和高度设置自动播放设置循环播放39ppt课件插入FLV对话框设置视频的宽度和高度设置自动播放设置循环播放网页是网站构成的基本元素。一个网站是否精彩有什么影响因素呢？色彩的搭配、文字的变化、图片的处理还有一个非常重要的因素网页布局。什么是网页布局？网页布局是指网页内容在页面上所处位置的设计。4.3 网页布局网页布局40ppt课件网页是网站构成的基本元素。4.3网页布局40ppt课件常见的网页布局结构1“国字”型布局因布局结构与汉字“国”相似而得名。页面的最上部分一般放置网站的标志和导航栏或Banner广告，页面中间主要放置网站的主要内容，最下部分一般放置网站的版权信息和联系方式等。41ppt课件常见的网页布局结构1“国字”型布局41ppt课件2T型布局T型布局结构因与英文大写字母T相似而得名。其页面的顶部一般放置横网站的标志或Banner广告，下方左侧是导航栏菜单，下方右侧则用于放置网页正文等主要内容。42ppt课件2T型布局42ppt课件3标题正文型标题正文型布局的布局结构一般用于显示文章页面、新闻页面和一些注册页面等。43ppt课件3标题正文型43ppt课件4左右框架型布局左右框架型布局结构是一些大型论坛和企业经常使用的一种布局结构。其布局结构主要分为左右两侧的页面。左侧一般主要为导航栏链接，右侧则放置网站的主要内容 44ppt课件4左右框架型布局44ppt课件5上下框架型上下框架型布局与前面的左右框架型布局类似。其区别仅在于是一种上下分为两页的框架。45ppt课件5上下框架型45ppt课件6.综合框架型综合框架型布局是结合左右框架型布局和上下框架型布局的页面布局技术 46ppt课件6.综合框架型46ppt课件7POP布局POP布局是一种颇具艺术感和时尚感的网页布局方式。页面设计通常以一张精美的海报画面为布局的主体。47ppt课件7POP布局47ppt课件8FLASH布局FLASH布局是指网页页面以一个或多个Flash作为页面主体的布局方式。在这种布局中，大部分甚至整个页面都是Flash。48ppt课件8FLASH布局48ppt课件网页布局的方法在网页制作中，网页布局的重要性是显而易见的。布局有很多方法，但最基本的方法有两种：表格框架（*选学*）49ppt课件网页布局的方法在网页制作中，网页布局的重要性是显而易见的。1.利用表格布局网页右图为利用表格进行网页布局的页面，表格为9行5列，采用创建后合并单元格方式，表格无边框线。布局后的表格可以插入文字、图像、超级链接、Email链接和所有网页元素，且整齐美观。50ppt课件1.利用表格布局网页右图为利用表格进行网页布局的页面，表2.表格的基本操作表格是网页制作的一个重要组成部分，是最常用的网页布局元素之一。利用表格可以在页面上整齐地显示各种数据资料，以及对文本和图像进行定位，利用表格的背景、边框线等属性可以使网页更加美观。表格的组成元素主要是：行、列、单元格。51ppt课件2.表格的基本操作表格是网页制作的一个例例14：新新建建一一网网页页文文件件wy3-1.html，在在网网页页中中插插入入一一个个4行行3列表格，合并第一行单元格，并设置对齐方式居中。列表格，合并第一行单元格，并设置对齐方式居中。（1）表格的创建（）表格的创建（“插入插入/表格表格”）插入表格对话框，确定行数、列数。表格宽度可以为绝对像素单位，或为浏览器宽度的百分比52ppt课件例14：新建一网页文件wy3-1.html，在网页中插入一个“修改修改/表格表格/合并单元格合并单元格”在属性面板中，打开“对齐”下拉列表，设置居中对齐方式百合并单元格操作53ppt课件“修改/表格/合并单元格”在属性面板中，打开“对齐”下拉列表单元格单元格“填充填充”和和“间距间距”：u“填充填充”指单元格边框与单元格内容之间指单元格边框与单元格内容之间的距离，单位为像素的距离，单位为像素u“间距间距”指单元格边框与单元格边框之间指单元格边框与单元格边框之间的距离，单位为像素的距离，单位为像素（2）表格的属性设置）表格的属性设置54ppt课件单元格“填充”和“间距”：（2）表格的属性设置54ppt课件 表格建立好以后，选择菜单表格建立好以后，选择菜单“修改修改/表格表格”命命令，可以对表格的行、列、单元格等进行编辑。令，可以对表格的行、列、单元格等进行编辑。（3）表格的编辑）表格的编辑u“插入行”和“插入列”：在光标所处行或列上插入一空行或一空列，原来的行或列相应地往下移或往右移。u“插入行或列”：从光标开始处可一次插入多行或多列。u“删除行”和“删除列”：可一次删除选取的多行或多列。如未选取行或列，则删除光标所在行或列。u“拆分单元格”：将一个单元格拆分为多行或多列。u“合并单元格”：将选取的多个单元格合并为一个单元格。55ppt课件表格建立好以后，选择菜单“修改/表格”命令 单元格是表格的最基本单位，单元格属性与单元格是表格的最基本单位，单元格属性与表格的属性稍有不同表格的属性稍有不同。（4）单元格的属性设置）单元格的属性设置u“水平”和“垂直”：指单元格内容的对齐方式。“水平”为左对齐、右对齐、居中对齐等水平对齐方式，“垂直”为“顶端”、“居中”、“底部”等垂直对齐方式。u“宽”和“高”：表示单元格的宽度和高度，单位像素。若要指定百分比，可在数值后使用百分比符号%。u“背景颜色”：设置单元格的背景颜色。u“标题”：单元格中的内容为粗体并居中。u“不换行”：防止换行，当单元格内容宽于原单元格宽度时，单元格会加宽宽度来容纳所有内容。56ppt课件单元格是表格的最基本单位，单元格属性与表格 框架集由一组框架构成，框架集把浏览器窗框架集由一组框架构成，框架集把浏览器窗口划分为若干个区域，每个区域定义为一个框架，口划分为若干个区域，每个区域定义为一个框架，在此框架中可以显示不同的网页，从而实现在同在此框架中可以显示不同的网页，从而实现在同一页面中显示多个网页文档内容。一页面中显示多个网页文档内容。3.框架的创建及使用（*选学）57ppt课件框架集由一组框架构成，框架集把浏览器窗口划（1）创建和保存框架）创建和保存框架（*选学）例例15：新新建建一一框框架架集集文文件件wy3.html，框框架架为为“对对齐齐上上缘缘”，两两个框架文件分别保存为个框架文件分别保存为wy3-1.html、和和wy3-2.html。上框架wy3-1.html主框架wy3-2.html58ppt课件（1）创建和保存框架（*选学）例15：新建一框架集文件wy3插入框架集操作：插入框架集操作：“对齐上缘”框架集包含顶框架“topFrame”和主框架“mainFrame”59ppt课件插入框架集操作：“对齐上缘”框架集包含顶框架“topFram步骤：步骤：新建网页文件（未命名）新建网页文件（未命名）插入框架集插入框架集 光标置于上框架内，执行光标置于上框架内，执行“文件文件/在框架中打开在框架中打开”命令，命令，选择选择wy3-1.html文件，单击文件，单击“确定确定”。光标置于下框架内，执行光标置于下框架内，执行“文件文件/在框架中打开在框架中打开”命令，命令，选择选择wy3-2.html文件，单击文件，单击“确定确定”。执行执行“文件文件/保存全部保存全部”命令，输入文件名命令，输入文件名wy3.html，单击，单击“保存保存”。注注意意：执执行行“在在框框架架中中打打开开”命命令令，wy3-1.html和和wy3-2.html网页文件必须事先已存在于站点中。网页文件必须事先已存在于站点中。60ppt课件步骤：注意：执行“在框架中打开”命令，wy3-1.html和 可以发现，当把光标定位在不同框架时，在可以发现，当把光标定位在不同框架时，在窗口标题上显示的是在此框架中打开的网页文件窗口标题上显示的是在此框架中打开的网页文件名。而选取整个框架集外框时，窗口显示框架集名。而选取整个框架集外框时，窗口显示框架集文件名。文件名。如果创建的框架不是所需的，可以直接拖动如果创建的框架不是所需的，可以直接拖动框架分割线到窗口顶部或底部，清除框架。框架分割线到窗口顶部或底部，清除框架。61ppt课件可以发现，当把光标定位在不同框架时，在窗口（2）设置超级链接）设置超级链接（*选学）例例16：在在wy3-1.html（即即上上框框架架）中中设设置置文文本本的的超超级级链链接接。选选择择“黄黄河河游游”文文本本，设设置置超超级级链链接接到到wy1.html网网页页，目目标标为为mainFrame。注注意意：框框架架中中的的超超级级链链接接，目目标标可可以以设设置置为为某某个个框框架架（mainFrame、topFrame、leftFrame、rightFrame、bottomFrame等）等）。框架超链接目标62ppt课件（2）设置超级链接（*选学）例16：在wy3-1.html（3）框架面板）框架面板（*选学）利用框架面板可以灵活地选取某个框架，对框架进行属性设置。选择菜单“窗口/”框架可打开框架面板。框架面板63ppt课件（3）框架面板（*选学）利用框架面板可以灵（4）框架与框架集属性设置）框架与框架集属性设置（*选学）框架的属性分为框架集属性和框架属性两部分。“框架集”属性面板“框架”属性面板64ppt课件（4）框架与框架集属性设置（*选学）框架的在一个网站注册时，首先填写注册表，然后点击“提交”或“确定”按钮后，注册表的信息提交到网站。这个操作就是通过表单实现的。什么是表单：表单在网页中主要负责数据采集功能。表单是服务者与用户进行交互的通道。通过表单，用户可以在表单对象中输入或选择相关的信息，然后提交到站点服务器的数据库，而服务器脚本或应用程序即对这些信息进行处理，最后服务器回应请求，将信息发送回用户或客户端页面，从而达到人站交流的目的。4.4 表单的使用表单的使用65ppt课件在一个网站注册时，首先填写注册表，然后点击“提交”或“确定”表单组成一个表单有三个基本组成部分：表单标签：这里面包含了处理表单数据所用程序的URL以及数据提交到服务器的方法。表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的脚本或者取消输入，还可以用表单按钮来控制其他数据处理工作。66ppt课件表单组成一个表单有三个基本组成部分：66ppt课件“调查问卷”表单单行文本单选按钮复选框菜单/列表文件域命令按钮67ppt课件“调查问卷”表单单行文本单选按钮复选框菜单在网页中添加表单对象，必须先创建表单（或称表单域），在编辑状态下，表单以虚线框出现，同一表单中的各种表单元素应集中在表单中才会有效。表单对象可通过“插入”面板的“表单”选项卡来插入。表单域，表单中需提交的内容都必须放置在红色虚线框内。表单选项卡1.表单及表单属性（1）表单）表单68ppt课件在网页中添加表单对象，必须先创建表单（或称u“表单ID”：用来设置表单的名称，当同一页面中有多个表单时，需要有不同名称来区分。u“动作”：用来制定处理该表单的动态页或脚本的路径。例如需要通过Email发送，则可以输入mailto:u“方法”：设置将表单数据发送到服务器的方法，其中POST表示用标准输入方式发送数据到服务器，GET表示把表单数据附加到请求URL后发送到服务器。u“目标”：设置表单数据被处理后，反馈网页的打开方式。u“编码类型”：设置发送数据的编码类型。（2）表单属性）表单属性69ppt课件“表单ID”：用来设置表单的名称，当同一页面中有多个表单时，插入表单（表单域）后，可以在其中插入各种表单对象。2.表单对象（1）文本框）文本框例例17：在：在wy4.html网页中网页中插入表单域插入表单域，插入文本插入文本域域并设置属性。并设置属性。单行文本域属性设置密码设置可输入的最多字符数可显示的最多字符数70ppt课件插入表单（表单域）后，可以在其中插入各种表（2）文本区域）文本区域显示行数（3）单选按钮和复选框）单选按钮和复选框例例18：在：在wy4.html网页中添加单选按钮网页中添加单选按钮。单选按钮单选按钮属性多行文本域属性设置71ppt课件（2）文本区域显示行数（3）单选按钮和复选框例18：在wy4复选框属性例例18：在：在wy4.html网页中添加复选框网页中添加复选框。复选框72ppt课件复选框属性例18：在wy4.html网页中添加复选框。复选框（4）列表）列表/菜单菜单插入菜单项，单击属性面板上的插入菜单项，单击属性面板上的“列表值列表值”按钮，按钮，添加菜单内容。添加菜单内容。例例19：在：在wy4.html网页中添加菜单网页中添加菜单。单击此按钮可添加菜单内容单击“+”号可添加内容“菜单”属性73ppt课件（4）列表/菜单插入菜单项，单击属性面板上的“列表值”按钮，“列表”设置菜单预览列表预览列表允许多选74ppt课件“列表”设置菜单预览列表预览列表允许多选74ppt课件（5）文件域）文件域 利用文件域可以将选择的文件作为表单数据提利用文件域可以将选择的文件作为表单数据提交到服务器上。交到服务器上。例例20：在：在wy4.html网页中添加文件域网页中添加文件域。75ppt课件（5）文件域利用文件域可以将选择的文件作为表（6）按钮）按钮 按钮按钮是控制表单是控制表单提交提交或或重重设设的操作的操作。按钮“提交表单”表示将数据提交到服务器“重设表单”表示将表单数据重设为原始值76ppt课件（6）按钮按钮是控制表单提交或重设的操作。（7）图像域）图像域 可以使用图像作为按钮来提交表单可以使用图像作为按钮来提交表单。（8）跳转菜单）跳转菜单 在表单中使用跳转菜单，用户可以从菜单中选在表单中使用跳转菜单，用户可以从菜单中选择需要打开的相应的网页或文件。择需要打开的相应的网页或文件。例例22：在：在wy4.html网页中添加跳转菜单，内容是网页中添加跳转菜单，内容是“上海热线上海热线”和和“新浪网新浪网”。77ppt课件（7）图像域可以使用图像作为按钮来提交表单。插入跳转菜单对话框单击“+”号可添加菜单项选择此项，可插入“前往”按钮78ppt课件插入跳转菜单对话框单击“+”号可添加菜单项选择此项，可插入“4.5.1 站点的发布4.5.2 站点的管理4.5 站点的发布与管理站点的发布与管理（*选学）79ppt课件4.5.1站点的发布4.5站点的发布与管理（*选学4.5.1 站点的发布（*选学）“站点的发布站点的发布”是指利用是指利用DreamweaverDreamweaver将本地站点的网站内容传输到远程站点将本地站点的网站内容传输到远程站点这一过程。这一过程。远程站点通常位于一台已经开启远程站点通常位于一台已经开启WebWeb服服务器的计算机上。务器的计算机上。80ppt课件4.5.1站点的发布（*选学）“站点的发布”是指利用1.远程站点的建立（*选学）一般而言，远程站点和本地站点位于两台不同一般而言，远程站点和本地站点位于两台不同的计算机上。的计算机上。在建立远程站点之前必须先搞清楚三个问题：在建立远程站点之前必须先搞清楚三个问题：远程站点位于哪一台计算机上远程站点位于哪一台计算机上本地站点以什么通信方式访问远程站点本地站点以什么通信方式访问远程站点根据特定的通信方式，本地站点访问远程站点时根据特定的通信方式，本地站点访问远程站点时需要设置哪些参数需要设置哪些参数81ppt课件1.远程站点的建立（*选学）一般而 远程文件夹一般指远程文件夹一般指Web服务器上存储文件的位服务器上存储文件的位置，这些文件可以用来向互联网用户发布。置，这些文件可以用来向互联网用户发布。如果计划开发动态网页，如果计划开发动态网页，Dreamweaver 需要测需要测试服务器的服务以便生成和显示动态内容。在测试试服务器的服务以便生成和显示动态内容。在测试服务器上存放站点内容的文件夹就是测试服务器文服务器上存放站点内容的文件夹就是测试服务器文件夹。件夹。（1）远程文件夹和测试服务器文件夹82ppt课件远程文件夹一般指Web服务器上存储文件的位 Dreamweaver CS4提供的在本地和远程文件夹提供的在本地和远程文件夹之间传输文件时可以使用的访问方法之间传输文件时可以使用的访问方法：（2）远程文件夹的访问方法uFTP：如果使用FTP能够连接到Web服务器，可使用此设置。u本地/网络：如果远程文件夹位于网络文件夹或在本地计算机上时可使用此设置。uRDS（远程开发服务）：对于这种访问方法，远程文件夹必须位于运行AdobeColdFusion的计算机上。注意注意：上述不同的访问方法对应着不同的配置参数。只有正确配上述不同的访问方法对应着不同的配置参数。只有正确配置参数才能确保本地站点与远程站点之间能正常传输文件置参数才能确保本地站点与远程站点之间能正常传输文件。83ppt课件DreamweaverCS4提供的在本地u选择菜单选择菜单“站站点点/管理站点管理站点”命令命令，进入，进入“站点定义站点定义”对话框对话框。u在在“站点定义站点定义”对话框中，对话框中，输入相应内容输入相应内容并进行属性设并进行属性设置。置。（3）定义远程文件夹（以FTP方式访问）定义远程文件夹选择FTP方式选择远程信息主机名称84ppt课件选择菜单“站点/管理站点”命令，进入“站点定义”对话框。（远程文件夹一旦创建远程文件夹一旦创建成功，就可以从本地站点向成功，就可以从本地站点向远程站点上传文件了。在远程站点上传文件了。在Dreamweaver中，上传文件中，上传文件的操作主要通过的操作主要通过“文件文件”面面板来执行。板来执行。2.远程站点的发布（*选学）上传文件按钮85ppt课件远程文件夹一旦创建成功，就可以从本地站点向4.5.2 站点的管理（*选学）随着站点的发布和站点内容的不断更新，新增、删除和随着站点的发布和站点内容的不断更新，新增、删除和重命名文件的现象将不断出现，这将导致文件内部链接的失重命名文件的现象将不断出现，这将导致文件内部链接的失效以及本地站点、远程站点内容的不一致。效以及本地站点、远程站点内容的不一致。因此必须及时更因此必须及时更新站点的内容。新站点的内容。86ppt课件4.5.2站点的管理（*选学）随着1.远程站点的编辑（*选学）当远程站点的位置发生改变时（例如更改上传文件目录，当远程站点的位置发生改变时（例如更改上传文件目录，或彻底改变或彻底改变WebWeb服务器），就必须重新编辑与远程文件夹有关服务器），就必须重新编辑与远程文件夹有关的信息，保证本地站点与远程站点能正常通信。的信息，保证本地站点与远程站点能正常通信。打开打开“管理站点管理站点”对话框在对话框在“站点定义站点定义”对话框左侧选对话框左侧选择择“高级高级”选项卡，在右侧修改远程文件夹相关参数选项卡，在右侧修改远程文件夹相关参数。87ppt课件1.远程站点的编辑（*选学）当远程站点的位置发2.站点链接的更新（*选学）每当本地站点内发生移动或重命名文档时，每当本地站点内发生移动或重命名文档时，DreamweaverDreamweaver都可更新与该文档相关的链接。都可更新与该文档相关的链接。利用这项功能，可以先利用这项功能，可以先在本地让在本地让DreamweaverDreamweaver修复所有失效链接，然后上传远程站点，修复所有失效链接，然后上传远程站点，确保发布时所有文档内的链接指向正确。确保发布时所有文档内的链接指向正确。88ppt课件2.站点链接的更新（*选学）每当本地站点内发生移动（1）站点链接的自动更新常规选项页“首选参数”对话框自动更新选项总是：每当移动或重命名选定文档时，总是自动更新与该文档相关的所有链接更新选项从不：当你移动或重命名选定文档时，不自动更新与该文档有关的所有链接提示：显示一个对话框，列出此更改影响到的所有文件。单击“更新”可更新这些文件中的链接，而单击“不更新”将保留原文件不变。89ppt课件（1）站点链接的自动更新常规选项页“首选参数”对话框自动更新 在在“文件文件”面板的面板的“本地本地”视图中选择一个文件。选择菜视图中选择一个文件。选择菜单单“站点站点/改变站点范围的链接改变站点范围的链接”命令。命令。在在“更改整个站点链接更改整个站点链接”对话框中完成下列选项：对话框中完成下列选项：u更改所有的链接：单击文件夹图标更改所有的链接：单击文件夹图标 ，浏览，浏览到到并选择要取消链并选择要取消链接的目标文件。如果更改的是电子邮件链接、接的目标文件。如果更改的是电子邮件链接、FTP FTP 链接、空链接、空链接或脚本链接，请键入要更改链接的完整文本。链接或脚本链接，请键入要更改链接的完整文本。（2）站点链接的手动更新90ppt课件在“文件”面板的“本地”视图中选择一个文件。选择菜单u变成新链接：单击文件夹图标变成新链接：单击文件夹图标 ，浏览，浏览到到并选择要链接到的新并选择要链接到的新文件。如果更改的是电子邮件链接、文件。如果更改的是电子邮件链接、FTP FTP 链接、空链接或脚链接、空链接或脚本链接，请键入替换链接的完整文本。本链接，请键入替换链接的完整文本。更改站点链接对话框91ppt课件变成新链接：单击文件夹图标，浏览到并选择要链接到的新文件。（1）在折叠的“文件”面板中切换站点视图3.站点视图切换（*选学）站点视图下拉框92ppt课件（1）在折叠的“文件”面板中切换站点视图3.站点视图切换（2）在展开的“文件”面板中查看站点远程站点本地站点93ppt课件（2）在展开的“文件”面板中查看站点远程站点本地站点93pp94ppt课件ThankYou!94ppt课件