第6章-网页设计基础ppt课件

.,第6章网页设计基础DreamweaverCS4,计算机基础部67705379,.,本章学习目标6.1网页设计的基本概念6.2Dreamweaver工具的使用6.3站点的发布与管理,本章习题布置,.,第六章习题布置理论题：一、单选题1-25（P351）二、多选题1-5（P353）三、填空题1-10（P354）操作题：实验报告9-10,退出,.,本章学习目标,本章以DreamweaverCS4为平台，重点介绍网页的设计、制作与发布。网页与网站的关系，网站的创建与管理。文字及图像的处理网页中添加多媒体元素网页的超级连接网页的布局网页的交互式表单处理,.,本章学习目标,返回本章首页,图片,字体设置,水平线,编号列表,超级链接,Email链接,日期,锚点链接,鼠标经过图像,.,6.1网页设计的基本概念,6.1.1网页与HTML6.1.2网页设计的流程,返回本章首页,.,6.1.1网页与HTML,HTML（HypertextMarkupLanguage）是一种超文本标记语言，用来描述万维网上的超文本文件。从文件的角度来说，一个网页就是一个HTML文件。,.,6.1.1网页与HTML,构成网页的基本元素大体相同，主要包括标题、网站Logo、导航、超链接、广告栏、文本、图片、动画、视频与音频等。按网页的表现形式可将网页分为：静态网页动态网页,1、网页与网页文件,.,HTML（HypertextMarkupLanguage）是一种超文本标记语言，用来描述万维网上的超文本文件。HTML的普遍应用就是使用超文本的技术，通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面，实现与世界各地主机文件的链接。,6.1.1网页与HTML,2.网页制作语言HTML,.,例1：创建一个网页，显示“祝大家新年快乐！”，标题为“新年快乐”。,6.1.1网页与HTML,例1网页效果图,.,6.1.1网页与HTML,例1HTML代码,.,（1）HTML的结构和常用标签HTML的结构一般使用以下三对标签来构成。标签：文档中的所有文本都包含在其中，表示该文档是用超文本标记语言HTML编写的。头部标签：用以说明整个文件的一些公共属性。正文标签：标签之间的文本是正文，是在浏览器窗口中要显示的页面内容。,6.1.1网页与HTML,.,（2）HTML文件的编写与保存HTML文件的编写主要有两个途径：作为文本文件通过记事本输入代码，保存时将文件扩展名改写为.html。通过网页制作工具，在代码视图中直接输入代码并保存。,6.1.1网页与HTML,.,常用的网页制作工具有以下几种：Dreamweaver：可视化网页制作工具FrontPage：表单式网页制作工具AdobePagemile：多框架、表单和ImageMap图像的网页制作工具ClarisHomePage：动态网页快速制作工具,6.1.1网页与HTML,3.网页制作工具,返回本节首页,.,6.1.2网页设计的流程,网页设计的流程主要包括站点设计和网页制作两大部分。,.,网页设计的流程主要包括：前期策划创建站点创建主页和其他网页网页设计的版面布局添加网页基本元素创建网页超级链接制作网页表单,6.1.2网页设计的流程,返回本节首页,.,6.2Dreamweaver工具的使用,6.2.1Dreamweaver的界面6.2.2站点的新建与管理6.2.3网页元素的添加与处理6.2.4网页中的超链接6.2.5网页的布局6.2.6表单的使用,返回本章首页,.,6.2.1Dreamweaver的界面,Dreamweaver是由美国著名多媒体软件开发商Adobe公司推出的一款专业可视化网页制作工具，是集网页制作和网站管理于一身的所见即所得式的网页编辑器，是新网页三剑客之一。DreamweaverCS4的界面简洁而高效，集成程度高，提供了众多功能强大的可视化设计工具、应用程序开发环境以及代码编辑支持，使用户能够快捷地创建代码规范的应用程序。,.,Dreamweaver的界面,6.2.1Dreamweaver的界面,.,Dreamweaver主要包括10项主菜单：,6.2.1Dreamweaver的界面,1.菜单栏,.,Dreamweaver工具栏主要有：（1）“插入”工具栏,6.2.1Dreamweaver的界面,2.工具栏,（2）“文档”工具栏,（3）“应用程序”工具栏,.,文档编辑区是编辑和设计网页的主要工作区域,6.2.1Dreamweaver的界面,3.文档编辑区,“文档”编辑区,.,属性面板位于操作界面底部，主要用于编辑和查看页面中各对象的属性设置。在默认情况下，属性面板显示的是文本属性。DreamweaverCS4进一步提升了CSS规则在网页设计上的应用，在属性面板里提供了“HTML”和“CSS”两种类型的属性设置。,6.2.1Dreamweaver的界面,4.“属性”面板,.,（1）HTML类型：可以进行格式、粗/斜体、项目符号与编号、段落缩排、链接及链接目标等属性设置。这些属性只针对当前所选内容产生效果。,6.2.1Dreamweaver的界面,4.“属性”面板,选择“HTML”按钮,.,（2）CSS类型：属性设置后会自动建立一个CSS样式，以便下次直接套用所见的样式。,6.2.1Dreamweaver的界面,4.“属性”面板,选择“CSS”按钮,.,面板是提供某类功能命令的组合，通过面板可以快速完成目标的相关操作，利用“窗口”菜单下的对应命令可打开或关闭相关的面板。,6.2.1Dreamweaver的界面,5.面板组,返回本节首页,“CSS样式和AP元素”面板组,“文件和资源”面板组,.,6.2.2站点的新建与管理,在DreamweaverCS4中，“站点”是一个文件夹，用于存放网站的所有图像、多媒体等文件，便于用户对站点进行发布、维护和管理。,.,1.站点的结构,6.2.2站点的新建与管理,要制作一个能够被公众浏览的网站，首先要在本地磁盘上制作一个网站，然后把这个网站上传到Web服务器上。放在本地磁盘上的网站称为本地站点，处于Internet中Web服务器上的网站称为远程站点。,.,6.2.2站点的新建与管理,站点一般由三部分组成：本地文件夹：本地文件夹通常位于本地计算机，是本地计算机硬盘上一个文件夹，用于存储当前处理的文件。远程文件夹：远程文件夹通常位于远程服务器上，主要用于存储某些文件，这些文件用于测试、生产、协作和发布等用途。测试服务器文件夹：测试服务器是指用于处理动态网页的文件夹，因此也被称为“动态页文件夹”。,.,2.站点的建立,6.2.2站点的新建与管理,本地站点是存放网站内容的集合体，网站的内容都分门别类地保存在各类文件夹中。,.,6.2.2站点的新建与管理,步骤：（1）打开“站点定义”对话框（2）定义站点,例1-2：建立一个本地站点“站点1”，站点文件夹为C盘的“计算机应用”。,.,3.站点的管理,6.2.2站点的新建与管理,站点建立后，Dreamweaver可以对站点及站点中的文件进行管理，可以对所建立的站点进行移动、复制、删除、导入、导出等操作。,.,3.站点的管理,6.2.2站点的新建与管理,（1）打开“管理站点”对话框（2）切换站点（3）编辑站点（4）复制站点（5）删除站点（6）导入/导出站点（7）站点的查看方式,返回本节首页,.,6.2.3网页元素的添加与处理,框架集,表单,.,1.文本操作,6.2.3网页元素的添加与处理,在网页创作中，网页上的信息大多是通过文字来表达的。文字是最基本的元素之一，具有准确快捷地传递信息、存储空间小、易复制、易保存、易打印等优点，其优势很难被其他元素所取代。,（1）输入文本和空格（2）文本换行（Enter与Shift+Enter）,.,（3）网页页面属性设置,6.2.3网页元素的添加与处理,设置网页的标题、背景图像、背景颜色、文本颜色、链接颜色、页边距等，对外观进行整体上的控制，以保证页面属性的一致性。,单击此按钮，打开“页面属性”对话框,.,例2：打开wy1.html，将网页标题设置为“母亲河”，设置网页的超级链接颜色。,6.2.3网页元素的添加与处理,.,（4）文本属性设置（HTML属性）,6.2.3网页元素的添加与处理,例3：在wy1.html中添加日期和水平线。,水平线属性设置,日期属性设置,（5）添加特殊字符（“插入”/“HTML”/“特殊字符”）,（6）添加日期（“插入”/“日期”）和添加水平线（“插入”/“HTML”/“水平线”）,.,（7）设置列表,6.2.3网页元素的添加与处理,网页文本编排中，一些类型相同或具有序列关系的文本内容可以通过列表的方式来呈现，如此可以使网页资料显得整齐规则，便于阅读。有两种列表：编号列表和项目列表（“格式/列表”）。,编号列表效果,项目列表效果,.,例4：将wy1-1.html中的相应段落设置编号列表。,6.2.3网页元素的添加与处理,列表属性设置,列表菜单选择,.,在网页中插入图像，可以使网页更加美观，它能装饰网页，表达企业或个人的情趣和风格。,2.图像操作,6.2.3网页元素的添加与处理,.,例5：将图像huanghe.jpg文件插入到wy1.html文档中，并设置替换文本。,6.2.3网页元素的添加与处理,选择图像,（1）插入图像（“插入/图像”）,.,例5：将图像huanghe.jpg文件插入到wy1.html文档中，并设置替换文本。,6.2.3网页元素的添加与处理,设置替换文本,输入替换文本“母亲河”,.,（2）图像的属性设置,6.2.3网页元素的添加与处理,.,（3）插入鼠标经过图像,6.2.3网页元素的添加与处理,“鼠标经过图像”是指在浏览器中，当鼠标指针移动到图像上时，图像随即变成另外一幅图像，当鼠标指针移开时，又会恢复到第一幅图像。命令：“插入/图像对象/鼠标经过对象”,.,例6：在wy1.html网页中插入“鼠标经过图像”，图像为huanghe1.jpg和huanghe2.jpg文件。,6.2.3网页元素的添加与处理,原始图像,鼠标经过图像,.,插入“鼠标经过图像”对话框,6.2.3网页元素的添加与处理,.,CSS（CascadingStyleSheet）称为“层叠样式表”，简称为“样式表”。CSS是一组格式设置规则，用于控制Web页面元素的外观布局。使用CSS可以灵活并更好地控制许多文本属性，包括特定字体、大小、粗体、斜体、下划线等。,3.CSS样式,6.2.3网页元素的添加与处理,.,（1）CSS规则,6.2.3网页元素的添加与处理,CSS规则主要有选择器和声明两个部分组成，选择器是表示格式元素的术语，声明用于定义元素样式，如右侧所示的.a1是选择器，介于之间的内容就是声明。,选择器,声明,.,（2）CSS定义,6.2.3网页元素的添加与处理,例7：建立如图6-2-47所示的CSS规则.a1，并应用到wy1.html的第二段文本上。,步骤：单击文本“属性”面板上的按钮，“目标规则”中选择“”，单击出现“新建CSS规则”对话框。,.,6.2.3网页元素的添加与处理,输入选择器名称.a1，单击“确定”按钮，在“.a1的CSS规则定义”对话框中点开“Font-Family”下拉列表，选择“编辑字体列表”选项。在“编辑字体列表”对话框中，单击按钮可以将右边“可用字体”中的“宋体”放入左边的“选择的字体”中，单击上面的“+”号，可将字体上面的添加到字体列表中，并可以继续添加新字体。单击“确定”按钮，回到定义CSS规则对话框进行设置。,.,6.2.3网页元素的添加与处理,添加字体,定义规则,.,（3）CSS的应用,6.2.3网页元素的添加与处理,选择需设置属性的文本，在属性面板的“类”下拉列表框中选择.a1规则。,选择a1规则,.,（1）插入Flash动画Flash动画以其文档容量小、效果丰富等特点深受网页制作者的钟爱。,4.多媒体操作,6.2.3网页元素的添加与处理,例8：将Flash文件001.swf插入到新建的网页wy2.html中。,.,插入Flash动画（“插入/媒体/SWF”菜单命令）,6.2.3网页元素的添加与处理,选择Flash文件,.,（2）添加音频（“插入/媒体/插件”）,6.2.3网页元素的添加与处理,例9：将声音文件ex2.wav添加到网页wy2.html中。,插入音频后，打开“窗口”菜单中的“标签编辑器”，可以对音频进行属性设置。,打开标签编辑器,音频属性设置,.,（3）添加视频(“插入/媒体/FLV”）,6.2.3网页元素的添加与处理,例10：将视频文件Musicvedio.flv添加到网页wy2.html中。,FLV视频标签,FLV预览效果,.,6.2.3网页元素的添加与处理,插入FLV对话框,设置视频的宽度和高度,返回本节首页,设置自动播放,设置循环播放,.,超链接是指页面对象之间的链接关系，只有通过超链接才可以实现在不同网页，乃至不同网站之间的跳转。超链接就是从一个网页指向一个目标的关系，目标可以是另一个网页，可以是同一网页的不同位置，还可以是一幅图像、一个文件等。,6.2.4.网页中的超链接,.,6.2.4网页中的超链接,例11：在wy1.html中设置第一行中文本“黄河”的超级链接，链接文件为“huanghe.html”。,插入链接对话框,1.文本链接,.,在“目标”下拉列表中可以选择超级链接的打开方式。,6.2.4网页中的超链接,_blank：在一个新的浏览器中打开。_parent：在父框架中打开。_self：在网页所在的窗口或框架中打开，此为默认选项。_top：在浏览器窗口打开。,.,6.2.4网页中的超链接,2.图像和图像热区链接,（1）图像链接,创建图像超级链接的方法与建立文本超级链接相似，即选择图像，然后进行超级链接设置。,链接目标为新浏览器窗口,超链接对象,图像对象,.,6.2.4网页中的超链接,（1）图像热区链接,除了指定一整张图像建立超级链接外，还可以利用图像热点工具，在图像上指定某个区域建立超级链接，方法是先绘制图像热点区域，再为该区域建立链接，从而实现在同一个图像上建立多个超级链接的目的。热点工具有：矩形热点工具、椭圆形热点工具和多边形热点工具。,.,6.2.4网页中的超链接,例12：将wy1.html网页中huanghe.jpg上的黄河区域建立超级链接，链接到“huanghe.html”文件，目标位置为“新窗口”。,热区位置,矩形热点工具,椭圆形热点工具,多边形热点工具,.,6.2.4网页中的超链接,3.锚记链接,Dreamweaver提供了锚记链接功能，可创建跳转到页面的指定位置的链接。当建立一个锚记后，会在屏幕上显示锚记标记。执行菜单“编辑/首选参数”命令，在“不可见元素”中选取“命名锚记”复选框，“确定”后即可显示锚记。,显示锚记,.,6.2.4网页中的超链接,例13：在wy1.html网页尾部添加“返回顶部”四个字，并建立超级链接，可跳转到网页的首部。,步骤：定义锚记名“m1”尾部添加“返回顶部”文字选择文字，设置链接。,注意：锚记前必须加上#号，即“#m1”。,.,6.2.4网页中的超链接,4.Email链接,在对象的“属性”面板的“链接”框内输入“mailto:”并输入Email地址，如mailto:aa。,5.外部链接,在“属性”面板的“链接”框内直接输入外部链接地址，如。,返回本节首页,.,6.2.5网页的布局,在网页制作中，网页布局的重要性是显而易见的，网页布局有很多方法，但最基本的方法是利用表格和利用框架进行网页布局。,.,1.利用表格布局网页,6.2.5网页的布局,右图为利用表格进行网页布局的页面，表格为9行5列，采用创建后合并单元格方式，表格无边框线。布局后的表格可以插入文字、图像、超级链接、Email链接和所有网页元素，且整齐美观。,.,2.表格的基本操作,6.2.5网页的布局,表格是网页制作的一个重要组成部分，是最常用的网页布局元素之一。利用表格可以在页面上整齐地显示各种数据资料，以及对文本和图像进行定位，利用表格的背景、边框线等属性可以使网页更加美观。表格的组成元素主要是：行、列、单元格。,.,例14：新建一网页文件wy3-1.html，在网页中插入一个4行3列表格，合并第一行单元格，并设置对齐方式居中。,（1）表格的创建（“插入/表格”）,6.2.5网页的布局,插入表格对话框，确定行数、列数。,表格宽度可以为绝对像素单位，或与浏览器宽度的百分比,.,6.2.5网页的布局,“修改/表格/合并单元格”,在属性面板中，打开“对齐”下拉列表，设置居中对齐方式,百合并单元格操作,.,6.2.5网页的布局,单元格“填充”和“间距”：“填充”指单元格边框与单元格内容之间的距离，单位为像素“间距”指单元格边框与单元格边框之间的距离，单位为像素,（2）表格的属性设置,.,6.2.5网页的布局,表格建立好以后，选择菜单“修改/表格”命令，可以对表格的行、列、单元格等进行编辑。,（3）表格的编辑,“插入行”和“插入列”：在光标所处行或列上插入一空行或一空列，原来的行或列相应地往下移或往右移。“插入行或列”：从光标开始处可一次插入多行或多列。“删除行”和“删除列”：可一次删除选取的多行或多列。如未选取行或列，则删除光标所在行或列。“拆分单元格”：将一个单元格拆分为多行或多列。“合并单元格”：将选取的多个单元格合并为一个单元格。,.,6.2.5网页的布局,单元格是表格的最基本单位，单元格属性与表格的属性稍有不同。,（4）单元格的属性设置,“水平”和“垂直”：指单元格内容的对齐方式。“水平”为左对齐、右对齐、居中对齐等水平对齐方式，“垂直”为“顶端”、“居中”、“底部”等垂直对齐方式。“宽”和“高”：表示单元格的宽度和高度，单位像素。若要指定百分比，可在数值后使用百分比符号%。“背景颜色”：设置单元格的背景颜色。“标题”：单元格中的内容为粗体并居中。“不换行”：防止换行，当单元格内容宽于原单元格宽度时，单元格会加宽宽度来容纳所有内容。,.,6.2.5网页的布局,框架集由一组框架构成，框架集把浏览器窗口划分为若干个区域，每个区域定义为一个框架，在此框架中可以显示不同的网页，从而实现在同一页面中显示多个网页文档内容。,3.框架的创建及使用,.,6.2.5网页的布局,（1）创建和保存框架,例15：新建一框架集文件wy3.html，框架为“对齐上缘”，两个框架文件分别保存为wy3-1.html、和wy3-2.html。,上框架wy3-1.html,主框架wy3-2.html,.,6.2.5网页的布局,插入框架集操作：,.,6.2.5网页的布局,步骤：新建网页文件（未命名）插入框架集光标置于上框架内，执行“文件/在框架中打开”命令，选择wy3-1.html文件，单击“确定”。光标置于下框架内，执行“文件/在框架中打开”命令，选择wy3-2.html文件，单击“确定”。执行“文件/保存全部”命令，输入文件名wy3.html，单击“保存”。,注意：执行“在框架中打开”命令，wy3-1.html和wy3-2.html网页文件必须事先已存在于站点中。,.,6.2.5网页的布局,可以发现，当把光标定位在不同框架时，在窗口标题上显示的是在此框架中打开的网页文件名。而选取整个框架集外框时，窗口显示框架集文件名。如果创建的框架不是所需的，可以直接拖动框架分割线到窗口顶部或底部，清除框架。,.,6.2.5网页的布局,（2）设置超级链接,例16：在wy3-1.html（即上框架）中设置文本的超级链接。选择“黄河游”文本，设置超级链接到wy1.html网页，目标为mainFrame。,注意：框架中的超级链接，目标可以设置为某个框架（mainFrame、topFrame、leftFrame、rightFrame、bottomFrame等）。,框架超链接目标,.,6.2.5网页的布局,（3）框架面板,利用框架面板可以灵活地选取某个框架，对框架进行属性设置。选择菜单“窗口/”框架可打开框架面板。,框架面板,.,6.2.5网页的布局,（4）框架与框架集属性设置,框架的属性分为框架集属性和框架属性两部分。,“框架集”属性面板,返回本节首页,“框架”属性面板,.,6.2.6表单的使用,表单是服务者与用户进行交互的通道。通过表单，用户可以在表单对象中输入或选择相关的信息，然后提交到站点服务器的数据库，而服务器脚本或应用程序即对这些信息进行处理，最后服务器回应请求，将信息发送回用户或客户端页面，从而达到人站交流的目的。,.,6.2.6表单的使用,“调查问卷”表单,单行文本,单选按钮,复选框,菜单/列表,文件域,命令按钮,.,6.2.6表单的使用,在网页中添加表单对象，必须先创建表单（或称表单域），在编辑状态下，表单以虚线框出现，同一表单中的各种表单元素应集中在表单中才会有效。表单对象可通过“插入”面板的“表单”选项卡来插入。,表单域，表单中需提交的内容都必须放置在红色虚线框内。,表单选项卡,1.表单及表单属性,（1）表单,.,6.2.6表单的使用,“表单ID”：用来设置表单的名称，当同一页面中有多个表单时，需要有不同名称来区分。“动作”：用来制定处理该表单的动态页或脚本的路径。例如需要通过Email发送，则可以输入mailto:aa“方法”：设置将表单数据发送到服务器的方法，其中POST表示用标准输入方式发送数据到服务器，GET表示把表单数据附加到请求URL后发送到服务器。“目标”：设置表单数据被处理后，反馈网页的打开方式。“编码类型”：设置发送数据的编码类型。,（2）表单属性,.,6.2.6表单的使用,插入表单（表单域）后，可以在其中插入各种表单对象。,2.表单对象,（1）文本框,例17：在wy4.html网页中插入表单域，插入文本域并设置属性。,单行文本域属性设置,密码设置,可输入的最多字符数,可显示的最多字符数,.,6.2.6表单的使用,（2）文本区域,显示行数,（3）单选按钮和复选框,例18：在wy4.html网页中添加单选按钮。,单选按钮,单选按钮属性,多行文本域属性设置,.,6.2.6表单的使用,复选框属性,例18：在wy4.html网页中添加复选框。,复选框,.,6.2.6表单的使用,（4）列表/菜单,插入菜单项，单击属性面板上的“列表值”按钮，添加菜单内容。,例19：在wy4.html网页中添加菜单。,单击此按钮可添加菜单内容,单击“+”号可添加内容,“菜单”属性,.,6.2.6表单的使用,“列表”设置,菜单预览,列表预览,列表允许多选,.,6.2.6表单的使用,（5）文件域,利用文件域可以将选择的文件作为表单数据提交到服务器上。,例20：在wy4.html网页中添加文件域。,.,6.2.6表单的使用,（6）按钮,按钮是控制表单提交或重设的操作。,按钮,“提交表单”表示将数据提交到服务器,“重设表单”表示将表单数据重设为原始值,.,6.2.6表单的使用,（7）图像域,可以使用图像作为按钮来提交表单。,（8）跳转菜单,在表单中使用跳转菜单，用户可以从菜单中选择需要打开的相应的网页或文件。,例22：在wy4.html网页中添加跳转菜单，内容是“上海热线”和“新浪网”。,.,6.2.6表单的使用,插入跳转菜单对话框,单击“+”号可添加菜单项,选择此项，可插入“前往”按钮,.,6.2.6表单的使用,无“前往”按钮,有“前往”按钮,注意：添加了“前往”按钮后，当选择某项时，不再直接跳转到相应的网页，而是必须通过单击“前往”按钮才能实现跳转。,返回本节首页,.,6.3站点的发布与管理,6.3.1站点的发布6.3.2站点的管理,返回本章首页,.,6.3.1站点的发布,“站点的发布”是指利用Dreamweaver将本地站点的网站内容传输到远程站点这一过程。远程站点通常位于一台已经开启Web服务器的计算机上。,.,1.远程站点的建立,6.3.1站点的发布,一般而言，远程站点和本地站点位于两台不同的计算机上。在建立远程站点之前必须先搞清楚三个问题：远程站点位于哪一台计算机上本地站点以什么通信方式访问远程站点根据特定的通信方式，本地站点访问远程站点时需要设置哪些参数,.,6.3.1站点的发布,远程文件夹一般指Web服务器上存储文件的位置，这些文件可以用来向互联网用户发布。如果计划开发动态网页，Dreamweaver需要测试服务器的服务以便生成和显示动态内容。在测试服务器上存放站点内容的文件夹就是测试服务器文件夹。,（1）远程文件夹和测试服务器文件夹,.,6.3.1站点的发布,DreamweaverCS4提供的在本地和远程文件夹之间传输文件时可以使用的访问方法：,（2）远程文件夹的访问方法,FTP：如果使用FTP能够连接到Web服务器，可使用此设置。本地/网络：如果远程文件夹位于网络文件夹或在本地计算机上时可使用此设置。RDS（远程开发服务）：对于这种访问方法，远程文件夹必须位于运行AdobeColdFusion的计算机上。,注意：上述不同的访问方法对应着不同的配置参数。只有正确配置参数才能确保本地站点与远程站点之间能正常传输文件。,.,6.3.1站点的发布,选择