Internet第06章-1网页制作基础.ppt

网页制作基础（一）,主要内容,HTML介绍Dreamweaver介绍插入文本和设置文本格式插入图像链接与导航添加音频、视频等多媒体元素使用表格,1、HTML简介,什么是HTML？HTML是用来描述网页的一种语言。HTML指的是超文本标记语言(HyperTextMarkupLanguage)HTML不是一种编程语言，而是一种标记语言(markuplanguage)标记语言是一套标记标签(markuptag)HTML使用标记标签来描述网页,1、HTML简介,HTML标签HTML标记标签通常被称为HTML标签(HTMLtag)。HTML标签是由尖括号包围的关键词，比如HTML标签通常是成对出现的，比如和标签对中的第一个标签是开始标签，第二个标签是结束标签开始和结束标签也被称为开放标签和闭合标签,1、HTML简介,HTML文档=网页HTML文档描述网页HTML文档包含HTML标签和纯文本HTML文档也被称为网页Web浏览器的作用是读取HTML文档，并以网页的形式显示出它们。浏览器不会显示HTML标签，而是使用标签来解释页面的内容：,HTML实例,无标题文档MyFirstHeadingMyfirstparagraph.,例子解释与之间的文本描述网页与之间显示网页标题与之间的文本是可见的页面内容与之间的文本被显示为标题与之间的文本被显示为段落,2、Dreamweaver基础,MacromediaDreamweaver8是一款专业的HTML编辑器，用于对Web站点、Web页和Web应用程序进行设计、编码和开发。Dreamweaver、Flash和Fireworks是Maeromedia公司开发的，有网页梦幻组合之称。它们越来越受到多媒体和网页制作的专业人员以及电脑爱好者的宠爱。,2.1Dreamweaver工作区,插入栏,文本工具栏,面板栏,文件面板,属性栏,标签选择器,页面编辑区,文档窗口,“文档”窗口显示当前文档。可以选择下列任一视图：“设计”视图是一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。在该视图中，Dreamweaver显示文档的完全可编辑的可视化表示形式，类似于在浏览器中查看页面时看到的内容。“代码”视图是一个用于编写和编辑HTML、JavaScript、服务器语言代码（如PHP或ASP标）以及任何其它类型代码的手工编码环境。“拆分”视图使您可以在单个窗口中同时看到同一文档的“代码”视图和“设计”视图。,“文档”工具栏,状态栏“文档”窗口底部的状态栏提供与您正创建的文档有关的其它信息。,手形工具使您可以单击文档并将其拖入“文档”窗口。单击“选择”工具可禁用手形工具。,标签选择器显示环绕当前选定内容的标签的层次结构。,“插入”栏,“插入”栏包含用于创建和插入对象（如表格、层和图像）的按钮。当鼠标指针滚动到一个按钮上时，会出现一个工具提示，其中含有该按钮的名称。这些按钮被组织到几个类别中，您可以在“插入”栏的左侧切换它们。当前文档包含服务器代码时（例如ASP或CFML文档），还会显示其它类别。当您启动Dreamweaver时，系统会打开您上次使用的类别。,文件管理,Dreamweaver创建文件Dreamweaver打开文件Dreamweaver保存文件,或者从“文件”菜单,从起始页进行,3、文本,3.1插入文本手工输入从其他文件或程序中复制文本，切换到Dreamweaver，将插入点定位在“文档”窗口的“设计”视图中，然后选择“编辑”“粘贴”或“编辑”“选择性粘贴”。直接粘贴时带有文本格式,3.2设置文本格式,设置字体更改文本颜色设置样式设置段落格式对齐文本缩进文本,3.3插入日期,在“文档”窗口中，将插入点放在要插入日期的位置。选择“插入”“日期”或在“插入”栏的“常用”类别中，单击“日期”按钮。在出现的对话框中，选择星期格式、日期格式和时间格式。如果希望在每次保存文档时都更新插入的日期，请选择“储存时自动更新”。,3.4插入特殊字符,从“插入”“HTML”“特殊字符”子菜单中选择字符名称。在“插入”栏中的“文本”类别中，单击“字符”按钮选择需要的字符。,3.5在字符之间添加空格,执行下列操作之一：选择“插入”“HTML”“特殊字符”“不换行空格”。按“Ctrl+Shift+空格键”,3.6插入换行,若要添加段落换行，按Enter键(Windows)。若要添加换行符，按Shift+Enter键(Windows),4.插入图像,图像通常用来添加图形界面（例如导航按钮）、具有视觉感染力的内容（例如Logo）或交互式设计元素（例如鼠标经过图像或图像地图），是网页中必不可少的元素之一。计算机对图像的处理也是以文件的形式进行的，由于图像编码的方法很多，因而形成了许多图像文件格式。但Web页中通常使用的只有三种格式，即GIF、JPEG和PNG。本节将重点介绍三种图像格式的特点及其适用的范围。,4.1插入图像占位符,图像占位符是在准备好将最终图形添加到Web页面之前使用的图形将插入点放置在要插入占位符图形的位置。执行下列操作之一：在“常用”插入栏中，单击“图像”图标选择“图像占位符”。选择“插入”“图像对象”“图像占位符”。“图像占位符”对话框随即显示。在该对话框中，为图像占位符选择选项。您可以设置占位符的大小和颜色，并为占位符提供文本标签。单击“确定”。,4.2插入图像,将插入点放置在要插入占位符图形的位置。执行下列操作之一：在“常用”插入栏中，单击“图像”图标。选择“插入”菜单“图像”。选择要插入的图像单击“确定”,4.3调整图像大小,在“文档”窗口中选择该图像，此时图像的底部、右侧及右下角出现调整大小控制点。执行下列操作之一，调整图像的大小：若要调整图像的宽度，拖动右侧的选择控制点。若要调整图像的高度，拖动底部的选择控制点。若要同时调整图像的宽度和高度，拖动顶角的选择控制点。若要在调整元素尺寸时保持图像的比例（其高宽比），在按住Shift键的同时拖动顶角的选择控制点。,4.4裁剪图片,选择图像单击属性检查器中的“裁减工具”图标。所选图像周围会出现裁剪控制点。调整裁剪控制点直到边界框包含的图像区域符合所需大小。在边界框内部双击或按Enter键裁剪所选区域。将显示一个对话框通知您正在裁剪的图像文件将在磁盘上更改。单击“确定”。,4.5对齐图像,插入图像默认的对齐方式是“左对齐”，可以通过对齐图像操作调整图像的位置，使图像与同一行中的文本、另一个图像、插件或其它元素对齐。具体操作步骤如下：（1）在“编辑区”中单击选中要调整的图像，可以看出图像当前默认的对齐方式为“左对齐”，（2）在“属性检查器”中单击“对齐”下拉列表框选择“右对齐”选项，也可以使用“对齐”按钮（左对齐、右对齐、居中对齐）设置图像的水平对齐方式,5.插入多媒体内容,随着多媒体技术的发展，网页已有原先单一的图片、文字内容发展为多种媒体想集合的表现形式。在网页中应用多媒体技术，如音频、视频、Flash动画等内容，取消了之前版本中不常用到的插入Flash按钮及Flash文字功能。可以增强网页的表现效果，使网页更生动，激发访问者兴趣。,5.1插入声音文件,嵌入音频将声音直接并入页面中，但只有在访问站点的访问者具有播放所选声音文件的适当插件后，声音才可以播放。将插入点放置在您要嵌入文件的地方，然后执行以下操作之一：在“插入”栏的“常用”类别中，单击“媒体”按钮，然后选择“插件”图标。选择“插入”菜单“媒体”“插件”。,5.2创建和插入Flash按钮,在“文档”窗口中，将插入点放置在您要插入Flash按钮的位置。若要打开“插入Flash对象”对话框，选择“插入”菜单“媒体”“Flash按钮”。即会出现“插入Flash按钮”对话框。完成“插入Flash按钮”对话框，然后单击“应用”或“确定”，将Flash按钮插入“文档”窗口中。,注意在插入Flash按钮或文本对象前，必须保存您的文档。,5.3插入Flash内容,在“文档”窗口的“设计”视图中，将插入点放置在您要插入内容的地方，然后执行以下操作之一：在“插入”栏的“常用”类别中，选择“媒体”，然后单击“插入Flash”图标。选择“插入”菜单“媒体”“Flash”。在显示的对话框中，选择一个Flash文件(.swf)。,5.4插入Flash视频,选择“插入”菜单“媒体”“Flash视频”。在“插入Flash视频”对话框中，从“视频类型”弹出式菜单中选择“累进式下载视频”或“流视频”。设置对话框选项的其余部分。单击“确定”。,“累进式下载视频”将Flash视频(FLV)文件下载到站点访问者的硬盘上，然后播放。但与传统的“下载并播放”视频传送方法不同，渐进式下载允许在下载完成之前就开始播放视频文件。“流视频”对Flash视频内容进行流式处理，并在一段很短时间的缓冲（可确保流畅播放）后在Web页上播放该内容。,6、使用表格进行布局,表格是用于在HTML页上显示表格式数据以及对文本和图形进行布局的强有力的工具。表格由一行或多行组成；每行又由一个或多个单元格组成。虽然HTML代码中通常不明确指定列，但Dreamweaver允许您操作列、行和单元格。当选定了表格或表格中有插入点时，Dreamweaver会显示表格宽度和每个表格列的列宽。宽度旁边是表格标题菜单与列标题菜单的箭头。如果未看到表的宽度或列的宽度，说明没有指定该表或列的宽度。如果出现两个数字，说明“设计”视图中显示的可视宽度与HTML代码中指定的宽度不一致。,6.1插入表格并添加内容,将插入点放在需要表格出现的位置。执行下列操作之一：选择“插入”菜单“表格”。在“插入”栏的“常用”类别中，单击“表格”按钮。即会出现“表格”对话框。设置相应的参数单击“确定”完成,6.2使用表格进行布局,选取表格单击表格的左上角、表格的顶边缘或底边缘的任何位置或者行或列的边框。所选表格的下边缘和右边缘出现选择柄。,6.3使用表格进行布局,选择行或列定位鼠标指针使其指向行的左边缘或列的上边缘。当鼠标指针变为选择箭头时，单击以选择单个行或列，或进行拖动以选择多个行或列。,6.4使用表格进行布局,选择单元格可以选择单个单元格、一行单元格或单元格块或者不相邻的单元格。若要选择整个行或列若要选择单个单元格，执行以下操作之一：单击单元格，然后在“文档”窗口左下角的标签选择器中选择标签。按住Ctrl键单击(Windows)若要选择多个单元格，执行以下操作之一：从一个单元格拖到另一个单元格可选择连续的单元格。按住Ctrl键(Windows)，单击要选中的单元格,6.5使用表格进行布局,调整表格大小选择该表格执行下列操作之一：若要在水平方向调整表格的大小，拖动右边的选择柄。若要在垂直方向调整表格的大小，拖动底部的选择柄。若要在两个方向调整表格的大小，拖动右下角的选择柄。,6.6使用表格进行布局,调整列和行的大小若要更改列宽度并保持整个表的宽度不变，拖动要更改的列的右边框。若要更改某个列的宽度并保持其他列的大小不变，按住Shift键，然后拖动列的边框。,6.7使用表格进行布局,添加行和列若要添加单个行或列，执行以下操作：单击一个单元格。选择“修改”“表格”“插入行”或“修改”“表格”“插入列”/“插入行”。在插入点的上面出现一行或在插入点的左侧出现一列。若要添加单个行或列单击一个单元格。选择“修改”“表格”“插入行或列”。即出现“插入行或列”对话框。设置“行”或“列”的数，然后完成对话框其他内容。,6.8使用表格进行布局,删除行和列单击要删除的行或列中的一个单元格，然后选择“修改”“表格”“删除行”或“修改”“表格”“删除列”。选择完整的一行或列，然后选择“编辑”“清除”或按Delete键。,6.9使用表格进行布局,拆分和合并单元格合并：选择连续行中形状为矩形的单元格。执行下列操作之一：选择“修改”“表格”“合并单元格”。在属性检查器中，单击“合并单元格”按钮。,拆分单元格单击单元格。执行下列操作之一：选择“修改”“表格”“拆分单元格”。在属性检查器中，单击“拆分单元格”按钮。,6.10、使用表格进行布局,设置表格属性填充间距对其边框边框颜色背景颜色和背景图片,6.11、使用表格进行布局,设置单元格属性,7.超链接,所谓的超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后,链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。按照链接路径的不同,网页中超链接一般分为以下3种类型:内部链接,锚点链接和外部链接。,7.超链接,网页上的超链接一般分为三种：一种是绝对URL的超链接。就是统一资源定位符，简单地讲就是网络上的一个站点、网页的完整路径，如:,创建从contents.html到其它文件的链接，如下所示：若要从contents.html链接到hours.html（两个文件在同一文件夹中），文件名就是相对路径：hours.html。若要链接到tips.html（在名为resources的子文件夹中），可使用相对路径resources/tips.html。每个正斜杠(/)表示在文件夹层次结构中下移一级。若要链接到index.html（在父文件夹中，contents.html向上一级），可使用相对路径./index.html。每个./表示在文件夹层次结构中上移一级。若要链接到catalog.html（在父文件夹的其它子文件夹中），可使用相对路径./products/catalog.html。其中./向上移至父文件夹；products/向下移至products子文件夹中。,站点根目录相对路径,站点根目录相对路径提供从站点的根文件夹到文档的路径。如果在处理使用多个服务器的大型Web站点，或者在使用承载有多个不同站点的服务器，则可能需要使用这些类型的路径。不过，如果不熟悉此类型的路径，最好坚持使用文档相对路径。站点根目录相对路径以