2、成网站的基本元素,是承载各种网站应用的平台。它是一个文件,通常为HTML格式,可以存储在世界某个角落的某一台计算机中。网页和网站网页的基本元素网页的制作流程网页的常见类型:计算机基础与实训教材系列系列丛书官方网站/edu:1.1.1网页和网站在网页和网站开发领域,有着各式各样的专有名词。弄清楚它们之间的概念和联系,对于用户学习网页知识有极大的裨益。网页的概念网站的概念:计算机基础与实训教材系列系列丛书官方网站/edu:1.1.2网页的基本元素网页是一个纯文本文件,其通过HTML、CSS等脚本语言对页面元素进行标识,然后由浏览器自动生成页面。组成网页的基本元素通常
8、计算机基础与实训教材系列系列丛书官方网站/edu:1.4.3统一资源定位器URL(UniformResourceLocator)即统一资源定位器,它使用数字和字母来代表网页文件在网上的地址。URL好比Internet的门牌号码,它可以帮助用户在Internet的信息海洋中查找到所需要的资料。Web上所能访问的资源都有唯一的URL。URL包括所用的传输协议、服务器名称、文件的完整路径。例如,在浏览器的URL处输入/index.html就可以访问搜狐网站的主页。:计算机基础与实训教材系列系列丛书官方网站/edu:1.4.4网页框架语言HTMLHTML(HyperTextM
9、arkupLanguage)即超文本标记语言,是WWW上通用的描述语言。HTML语言主要是为了把存放在一台计算机中的文本或图形与另一台计算机中的文本或图形方便地联系在一起,形成有机的整体。HTML文件的基本结构HTML网页的常用标记网页设计与制作基础教程(第3版)第二章DreamweaverCC快速入门:计算机基础与实训教材系列系列丛书官方网站/edu:学习目标Dreamweaver是一款集网页制作与网站管理于一身的网页编辑软件,是针对专业网页设计师特别开发的视觉化网页开发工具,利用它,用户可以轻松制作出跨越平台和浏览器限制并且充满动感的网页。本章将重点介绍Dream
11、ry提供支持)。本节将详细介绍DreamweaverCC的工作界面和基本操作,帮助用户初步了解该软件的使用方法。DreamweaverCC的工作界面DreamweaverCC的基本操作:计算机基础与实训教材系列系列丛书官方网站/edu:2.1.1DreamweaverCC的工作界面DreamweaverCC的工作界面效果秉承栏Dreamweaver系列软件产品一贯简洁、高效和易用的特点,软件的多数功能都能在功能界面中非常方便地找到,如图2-1所示。菜单栏“插入”面板“文档”工具栏“文档”窗口“属性”检查器状态栏:计算机基础与实训教材系列系列丛书官方网站/e
12、du:2.1.2DreamweaverCC的基本操作使用DreamweaverCC编辑网页之前,用户应掌握该软件的基本操作方法,例如创建网页、保存网页、打开网页、设置网页属性以及预览网页的效果等。创建网页打开网页设置网页预览网页保存网页:计算机基础与实训教材系列系列丛书官方网站/edu:2.2创建与设置站点在Dreamweaver中,用户可以创建本地站点,本地站点是本地计算机中创建的站点,其所有的内容都保存在本地计算机硬盘上,本地计算机可以被看成是网络中的站点服务器。本节将通过实例操作,详细介绍在本地计算机上创建与管理站点的方法。站点简介规划站点创建本地站点
13、设置本地站点创建网站文件:计算机基础与实训教材系列系列丛书官方网站/edu:2.3设置Dreamweaver视图在DreamweaverCC中,软件提供了“设计”、“代码”、“拆分”、“实时视图”等多种视图模式,可以帮助设计者随时查看网页的设计效果和相应代码的对应状态。除此之外,在“设计”视图中,用户还可以使用“标尺”和“网络”功能,精确定位网页中的各种页面元素。切换“文档”视图使用可视化助理:计算机基础与实训教材系列系列丛书官方网站/edu:1.3.1切换“文档”视图DreamweaverCC文档窗口显示栏当前文档,选择“查看”命令,在文档视图下拉菜单中,用户可以“
14、设计”、“代码”、“拆分”、“实时视图”等视图模式,其各自的功能如下。设计视图代码视图代码视图实时视图实时代码模式检查模式:计算机基础与实训教材系列系列丛书官方网站/edu:2.3.2使用可视化助理DreamweaverCC提供了“标尺”和“网格”功能,用于辅助设计网页文档。“标尺”功能可以辅助测量、组织和规划布局;“网格”功能可以绝对定位的网页元素在移动时自动靠齐网格,还可以通过指定网格设置更改网格或控制靠齐行为。使用“标尺”功能使用“网络”功能网页设计与制作基础教程(第3版)第三章使用表格布局页面:计算机基础与实训教材系列系列丛书官方网站/edu:学习
15、目标在网页中插入的文本和图像会随着浏览器窗口的放大与缩小发生变化,这使得网页处于不稳定的显示状态。要解决这种状态,最简单的方法就是使用表格,表格不仅能够控制网页在浏览器窗口中的位置,还可以控制网页元素在网页中的显示位置。:计算机基础与实训教材系列系列丛书官方网站/edu:本章重点创建基本表格插入表格元素调整表格大小导入与导出表格数据使用表格制作网页:计算机基础与实训教材系列系列丛书官方网站/edu:3.1使用表格网页能够向访问者提供的信息是多样化的,包括文字、图像、动画和视频等。如何使这些网页元素在网页中的合理位置上显示出来,使网页变得不仅美观而且有条理,是
16、网页设计者在着手设计网页之前必须要考虑的问题。表格的作用就是帮助用户高效、准确地定位各种网页数据,并直观、鲜明地表达设计者的思想。网页中表格的用途创建表格插入表格元素设置表格属性:计算机基础与实训教材系列系列丛书官方网站/edu:3.1.1网页中表格的用途使用表格排版的页面在不同平台、不同分辨率的浏览器中都能保持其原有的布局,并且在不同的浏览器平台中具有较好的兼容性,所以表格式网页中最常用的排版方式之一。:计算机基础与实训教材系列系列丛书官方网站/edu:3.1.2创建表格表格是用于在HTML页面上显示表格式数据以及对文本和图形进行布局的工具。表格由一行或多行组成,每行
17、又由一个或多个单元格组成。插入表格插入嵌套表格:计算机基础与实训教材系列系列丛书官方网站/edu:3.1.3插入表格元素为了使网页中的元素能够有序的在浏览器中显示,用户在插入文本和图像之前,最好先插入一个表格。在表格中插入文本与图像的方法与直接在网页中插入基本相同,只是在插入之前,需要先将鼠标光标放置在表格中。在表格中输入文本在表格中插入图像:计算机基础与实训教材系列系列丛书官方网站/edu:3.1.4设置表格属性表格由单元格组成,即使是一个最简单的表格,也由一个单元格。而表格与单元格的属性完全不同,选择不同的对象(表格或单元格),“属性”检查器将会显示相应的选项参数。
18、表格属性单元格属性:计算机基础与实训教材系列系列丛书官方网站/edu:3.2编辑表格当用户创建的表格不符合网页设计的要求时,可以通过拆分与合并表格中的单元格,或者增加与删除表格行或列来达到所需的目的。除此之外,在表格中还可以执行复制、剪切、粘贴等操作,并保存原有单元格的格式。选择表格元素调整表格大小更改列宽和行高添加或删除行或列拆分与合并单元格复制与粘贴单元格设置表格内容排序导入与导出表格式数据:计算机基础与实训教材系列系列丛书官方网站/edu:3.2.1选择表格元素将鼠标光标放置在网页中的表格内,“属性”检查器将显示单元格的属性,而不是表格的属性。这说明选
19、中的单元格,而非表格。在网页中创建一个表格,既包括表格自身,还包含单元格、行与列等元素,而这些元素的选择方法各不相同。选择整个表格选中行和列选中单元格选中单元格区域选中不相邻的单元格:计算机基础与实训教材系列系列丛书官方网站/edu:3.2.2调整表格大小当用户选中网页中的表格后,在表格右下角区域将显示3个控制点,通过拖动这3个控制点可以将表格横向、纵向或者整体放大。:计算机基础与实训教材系列系列丛书官方网站/edu:3.2.3更改列宽和行高要更改单元格的列宽和行高,可以在“属性”面板中调整数值,或拖动列或行的边框来更改表格的列宽或行高;也可以在“代码”视图中修改HT
20、ML代码来更改单元格的宽度和高度。:计算机基础与实训教材系列系列丛书官方网站/edu:3.2.4添加或删除行或列表格中空白的单元格也会占据页面位置,所以多余的行或列可以删除;此外,也可以在特定行或列上方或左侧添加行或列。:计算机基础与实训教材系列系列丛书官方网站/edu:3.2.5拆分与合并单元格在制作页面时,如果插入的表格与实际效果不相符,例如有缺少或多余单元格的情况,可根据需要,进行拆分和合并单元格操作。:计算机基础与实训教材系列系列丛书官方网站/edu:3.2.6复制与粘贴单元格用户在DreamweaverCC中插入表格并选中表格中一个单元格后,选择“编辑”命令
21、,在弹出的的菜单中可以对表格执行“剪切”、“拷贝”、“粘贴”等操作。:计算机基础与实训教材系列系列丛书官方网站/edu:3.2.7设置表格内容排序对于网页中插入的表格,用户可以根据单个列的内容对表格中的行进行排序或者根据两个列的内容执行更加复杂的表格排序。:计算机基础与实训教材系列系列丛书官方网站/edu:3.2.8导入与导出表格式数据使用DreamweaverCC,用户不仅可以将另一个应用程序,例如Excel中创建并以分隔文本格式(其中的项以制表符、逗号、冒号、分号或其他分隔符隔开)保存的表格式数据导入到网页文档中并设置为表格的格式,而且还可以将DreamweaverCC
22、中的表格导出。导入表格式数据导出表格式数据网页设计与制作基础教程(第3版)第四章制作简单图文网页:计算机基础与实训教材系列系列丛书官方网站/edu:学习目标文本和图像是网页中不可缺少的部分,对文本进行格式化可以充分体现页面所要表达的重点,而在网页中插入图像的实质则是把我们设计完成的最终效果展示给人们看。:计算机基础与实训教材系列系列丛书官方网站/edu:本章重点在网页中插入文本设置网页文本的属性在网页中插入图像在网页中插入特殊符号:计算机基础与实训教材系列系列丛书官方网站/edu:4.1在网页中添加文本文本既是网页中不可缺少的内容,也是网页中最基本的对
24、无序列表在制作网页时,如果需要把各个项目美观地排列在一起,建议用户使用无序列表。在无序列表中各项目前面的圆点直接用制作好的图像来替代,也可以在CSS样式表中定义更改圆点形状。:计算机基础与实训教材系列系列丛书官方网站/edu:4.2.2制作有序列表在各个项目中将赋予编号或字母表来创建的目录称为“有序列表”。在有序列表中各项目之间的顺序是非常重要的。在每项之前赋予数字、罗马数字的大小写以及字母表的大小写。:计算机基础与实训教材系列系列丛书官方网站/edu:4.3设置网页文本属性使用Dreamweaver的“属性”检查器可以设置网页中文本的大小、颜色和字体等文本属性,并且可以设置
25、HTML的基本属性,也可以设置CSS文本的扩展属性。设置文本基本属性添加网页文本字体:计算机基础与实训教材系列系列丛书官方网站/edu:4.4在网页中插入图像在网页中插入图像可以起到美化页面的作用,常用的图像格式有JPEG和GIF两种。在网页中适当加入图像可以为网页增色不少,但图像文件过大会影响网页的下载速度,因此图像要用的少而精,必要时在不失真的情况下可以使用图像软件尽量压缩图像。网页图像简介插入普通网页图像插入网页背景图像插入Photoshop智能图像制作鼠标经过图像网页设计与制作基础教程(第3版)第五章处理与编辑网页图像:计算机基础与实训教材系列系列丛书官方网
27、图形图像编辑处理应用程序。一直都以其界面美观、操作边界,功能齐全的特点,在众多的图像编辑处理软件中高居榜首。使用Photoshop软件强大的图像修饰和色彩调整功能,可修复图像画面的瑕疵,调整图像画面的色彩和色调,并且可以自由合成多张图像从而获得满意的创意效果。PhotoshopCC的工作界面PhotoshopCC的基本操作:计算机基础与实训教材系列系列丛书官方网站/edu:5.1.1PhotoshopCC的工作界面如许多应用程序一样,当系统安装完PhotoshopCC后会自动在“开始”菜单中设置一个程序快捷方式,用户只要选择“开始”|“所有程序”|AdobeMaster
28、CollectionCC|AdobePhotoshopCC命令,或直接双击桌面上的PhotoshopCC快捷方式图标可启动该软件。菜单栏选项栏工具箱文档窗口状态栏面板:计算机基础与实训教材系列系列丛书官方网站/edu:5.1.2PhotoshopCC的基本操作在使用Photoshop处理网页图像之前,用户应掌握该软件的基本操作方法,包括新建图像、保存图像和打开图像等。新建文件打开文件置入文件保存文件关闭文件:计算机基础与实训教材系列系列丛书官方网站/edu:5.2处理网页图像使用Photoshop进行网页图像制作之前,用户可以对图像素材进行
29、编修处理,如调整图像的大小、校正变形、二次构图等操作,使其更加符合需求。网页图像的基础知识图像文件的基本操作常用工具的使用方法处理图层的操作方法创建路径使用通道使用图层蒙版使用滤镜:计算机基础与实训教材系列系列丛书官方网站/edu:5.2.1网页图像的基础知识在计算机中,图像都是以数字的方式进行记录和存储的,大致可分为矢量图像和位图图像两种。这两种图像类型有着各自的优点,在处理图像文件的过程中,这两种类型经常交叉使用。位图与矢量图网页图像格式:计算机基础与实训教材系列系列丛书官方网站/edu:5.2.2图像文件的基本操作在使用Photoshop制作网页图像元
30、素之前,用户首先应掌握使用Photoshop处理图像的一些基本操作方法。调整图像大小创建图像选区:计算机基础与实训教材系列系列丛书官方网站/edu:5.2.3常用工具的使用方法Photoshop的“工具”面板中显示了所有的可用工具,熟练使用这些工具是使用Photoshop制作网页图像的前提,下面将主要介绍设计网页图片元素时常用的工具。套索工具魔棒工具画笔工具铅笔工具模糊工具锐化工具仿制图章图案图章擦除工具渐变工具油漆桶工具:计算机基础与实训教材系列系列丛书官方网站/edu:5.2.4处理图层的操作方法图层是Photoshop中非常重要的一个概念,它是P
31、hotoshop实现绘制和处理图像的基础。在绘图、使用滤镜或调整图像时,这些操作只影响所处理的图层。如果对某一图层的编辑结果不满意,则可以放弃这些修改,重新编辑,这时文档的其他部分不会受到影响。添加图层调整图层复制图层删除图层链接图层合并图层添加图层样式:计算机基础与实训教材系列系列丛书官方网站/edu:5.2.5创建路径在Photoshop中可以使用“工具”面板中的“钢笔”工具、“自由钢笔”工具和“路径选择”工具创建路径。使用“钢笔”工具使用“自由钢笔”工具使用“路径选择”工具:计算机基础与实训教材系列系列丛书官方网站/edu:5.2.6使用通道在Phot
32、oshop中,通道是图像文件颜色数据信息的一种存储形式,它与图像文件的颜色模式密切关联,多个分色通道叠加在一起可以组成一幅具有颜色层次的图像。通道还可以用来存放选区和蒙版,让用户完成更复杂的操作和控制图像的特定部分。创建和编辑通道复制和删除通道:计算机基础与实训教材系列系列丛书官方网站/edu:5.2.7使用图层蒙版图层蒙版是图像处理中最为常用的蒙版,主要用来显示或隐藏图层的部分内容,在编辑的同时保留原图像不因编辑而受到破坏。创建图层蒙版应用图层蒙版停用与启用图层蒙版删除图层蒙版:计算机基础与实训教材系列系列丛书官方网站/edu:5.2.8使用滤镜Photoshop
33、中的滤镜是一种插件模块,使用滤镜可以改变图像像素的位置或颜色从而产生各种特殊的图像效果。Photoshop提供了多达百种的滤镜,这些滤镜经过分组归类后存放在“滤镜”菜单中。同时,Photoshop还支持由第三方开发商提供的增效工具。在安装后,这些增效工具滤镜出现在“滤镜”菜单的底部,与内置滤镜一样使用。使用滤镜使用滤镜库:计算机基础与实训教材系列系列丛书官方网站/edu:5.3编辑网页图像在网页中插入图像后,可以设置图像属性、对齐方式等编辑操作,这些编辑操作可以直接影响网页的整体效果。设置网页图像属性使用图像编辑器:计算机基础与实训教材系列系列丛书官方网站/edu:5.3.
34、1设置网页图像属性在网页文档中插入图像后,需要经常对图像进行大小、对齐方式、边距等属性的设置,这些设置可以在“属性”面板中进行。设定图像名称调整图像大小替换图像源文件添加图像替换文件剪裁图像:计算机基础与实训教材系列系列丛书官方网站/edu:5.3.2使用图像编辑器在Dreamweaver中,图像编辑器主要分为内部图像编辑器和外部图像编辑器。下面将分别介绍内部图像编辑器和外部图像编辑器的功能及特点。使用内部图像编辑器使用外部图像编辑器网页设计与制作基础教程(第3版)第六章制作多媒体网页:计算机基础与实训教材系列系列丛书官方网站/edu:学习目标除了在
35、网页中使用文本和图像元素来表达页面信息以外,在制作网页时还可以向其中插入Flash动画、视频和音乐控件等内容,以丰富网页的效果。本章将重点介绍使用Flash制作网站动画以及在网页中插入各种多媒体元素的方法。:计算机基础与实训教材系列系列丛书官方网站/edu:本章重点FlashCS6的绘图工具FlashCS6的基本操作制作Flash网页动画在网页中插入多媒体:计算机基础与实训教材系列系列丛书官方网站/edu:6.1FlashCS6简介Flash制作的动画是矢量动画,它凭借诸多的优点,广泛用于在互联网、多媒体课件制作以及游戏软件制作等领域。本节将主要介绍Flash
39、舞台上移动的复杂动画。:计算机基础与实训教材系列系列丛书官方网站/edu:6.2.4制作形状补间动画形状补间是一种在制作对象形状变化时经常被使用到的动画形式,它的制作原理是通过在两个具有不同形状的关键帧之间指定形状补间,以表现中间变化过程的方法形成动画。:计算机基础与实训教材系列系列丛书官方网站/edu:6.2.5制作传统补间动画传统补间动画可以用于补间实例、组和类型的位置、大小、旋转和倾斜,以及表现颜色、渐变颜色切换或淡入淡出效果。:计算机基础与实训教材系列系列丛书官方网站/edu:6.2.6在动画中使用层图层就像透明的薄片一样,层层叠加,如果一个图层上有一部分没有内
40、容,那么就可以透过这部分看到下面的图层上的内容。图层的基本操作转换元件引导图层遮罩图层:计算机基础与实训教材系列系列丛书官方网站/edu:6.3在网页中插入Flash动画在Dreamweaver中,Flash动画也是最常用的多媒体插件之一,它将声音、图像和动画等内容加入到一个文件中并能制作较好的动画效果,同时使用了优化的算法将多媒体数据进行压缩,使文件变得很小,因此,非常适合在网上传播。插入Flash动画设置Flash动画属性:计算机基础与实训教材系列系列丛书官方网站/edu:6.4在网页中插入视频与音频在网络发展的初期,很难在网页中看到图像听到音乐。但现在随着网络
41、传播速度的增强和流式服务的实现,完全可以通过网络观看录像、电影或收听音乐。本节将介绍使用DreamweaverCC在网页中插入视频和音频的方法。插入与设置Flash视频插入普通音视频:计算机基础与实训教材系列系列丛书官方网站/edu:6.5在网页中插入HTML5视频与音频DremweaverCC允许用户在网页中插入和预览HTML5音频与视频。下面将通过实例,介绍在网页中插入HTML5Video和HTML5Audio的方法。插入HTML5Video插入HTML5Audio网页设计与制作基础教程(第3版)第七章应用与管理网页链接:计算机基础与实训教材系列系列
42、丛书官方网站/edu:学习目标当网页制作完成后,需要在页面中创建链接。使网页能够与网络中的其他页面建立联系。链接是一个网站的灵魂,网页设计者不仅要知道如何去创建页面之间的链接,更应了解链接地址的真正意义。:计算机基础与实训教材系列系列丛书官方网站/edu:本章重点创建网页文本链接创建图像映射链接管理页面中的超链接在HTML代码中编辑超链接:计算机基础与实训教材系列系列丛书官方网站/edu:7.1超链接简介超链接是网页中重要的组成部分,其本质上属于一个网页的一部分,它是一种允许网页访问者与其他网页或站点之间进行连接的元素。各个网页链接在一起后,才能真正构成
44、ation)。:计算机基础与实训教材系列系列丛书官方网站/edu:7.1.2超链接的路径从作为链接起点的文档到作为链接目标的文档之间的文件路径,对于创建链接至关重要。一般来说,链接路径可以分为绝对路径与相对路径两类。据对路径相对路径:计算机基础与实训教材系列系列丛书官方网站/edu:7.2创建超链接在Dreamweaver中,用户可以创建各种超链接,为了在本地站点内移动或重命名文档或其他链接文件,依然可以自动更新指向文档的链接,Dreamweaver通常使用文档相对路径创建指定站点中其他网页的链接。本节将主要介绍在DreamweaverCC中创建各种类型超链接的具体方法
45、。创建文本链接创建图像映射链接制作锚点链接制作音视频链接制作文件下载链接制作电子邮件链接:计算机基础与实训教材系列系列丛书官方网站/edu:7.3管理超链接通过管理网页中的超链接,可以对网页进行相应的管理。管理超链接操作主要包括更新超链接、修改超链接和测试超链接。更新超链接修改超链接测试超链接在HTML代码中编辑超链接:计算机基础与实训教材系列系列丛书官方网站/edu:7.3.1更新超链接在站点内移动或重命名文档时,Dreamweaver会自动更新指向该文档的链接,将整个站点存储在本地磁盘上时,自动更新链接功能最适用,但要注意的是,Dreamweaver不会
46、更改远程文件夹中的相应文件。为了加快更新速度,Dreamweaver会创建一个缓存文件,用来存储跟本地文件夹有关的所有链接信息,在添加、删除或更改指向本地站点上的文件的链接时,该缓存文件会以可见方式进行更新。:计算机基础与实训教材系列系列丛书官方网站/edu:7.3.2修改超链接除了自动更新链接外,还可以手动修改所有创建的超链接,以指向其他位置。:计算机基础与实训教材系列系列丛书官方网站/edu:7.3.3测试超链接在Dreamweaver中常见的超链接是不能显示链接对象的,但可以在网页文档中打开链接页面,测试链接。要测试链接,首先选中要测试的链接,选择“修改”|“打开链接页面
47、”命令;或者按Ctrl键,双击选中的超链接,可在新窗口中打开链接网页文档。但要注意的是,测试页面必须保存在本地站点中。:计算机基础与实训教材系列系列丛书官方网站/edu:7.3.4在HTML代码中编辑超链接打开一个创建超链接的页面,选中创建的超链接,切换到“代码”视图中,显示了超链接标记标记。内部链接锚记链接外部链接网页设计与制作基础教程(第3版)第八章制作表单页面:计算机基础与实训教材系列系列丛书官方网站/edu:学习目标表单提供了从网页浏览者那里收集信息的方法,用于调查、订购和搜索等。一般表单由两部分组成,一部分是描述表单元素的HTML源代码,另一部分是客户
48、端脚本或者是服务器端用来处理用户信息的程序。:计算机基础与实训教材系列系列丛书官方网站/edu:本章重点在网页中创建表单在表单中插入对象制作表单网页:计算机基础与实训教材系列系列丛书官方网站/edu:8.1在网页中创建表单表单允许服务器端的程序处理用户端输入的信息,通常包括调查的表单、提交订购的表单和搜索查询的表单等。表单要求描述表单的HTML源代码和在表单域中输入信息的服务器端应用程序或客户端脚本。本节将主要介绍在DreamweaverCC中使用表单的方法。表单简介制作表单:计算机基础与实训教材系列系列丛书官方网站/edu:8.1.1表单简介表单在网页
49、中是提供给访问者填写信息的区域,从而可以收集客户端信息,使网页更加具有交互的功能。表单的概念表单的对象:计算机基础与实训教材系列系列丛书官方网站/edu:8.1.2制作表单若用户要在网页中制作一个表单,可以在Dreamweaver中选择“插入”|“表单”|“表单”命令,或单击“插入”面板中“表单”选项卡中的“表单”按钮。选中网页中插入的表单,在“属性”检查器中可以显示表单的属性。:计算机基础与实训教材系列系列丛书官方网站/edu:8.2插入表单对象创建表单时,需要先插入标签,并在其内部制作表格后再插入文本框、文本区域、密码域、单选按钮或复选框等各种表单要素。插入文本域插
51、用CSS样式表编辑CSS样式表:计算机基础与实训教材系列系列丛书官方网站/edu:9.1认识CSS样式表CSS是英语CascadingStyleSheets(层叠样式表)的缩写,它是一种用于表现HTML或XML等文件式样的计算机语言。用户在设计与制作网页的过程中,使用CSS样式,可以有效地对页面的布局、字体、颜色、背景和其他效果实现精确的控制。CSS样式表简介CSS的规则分类:计算机基础与实训教材系列系列丛书官方网站/edu:9.1.1CSS样式表简介要管理一个系统的网站,使用CSS样式,可以快速格式化整个站点或多个文档中的字体、图像等网页元素的格式。并且,CS
52、S样式可以实现多种不能用HTML样式实现的功能。CSS,是用来控制一个网页文档中的某文本区域外观的一组格式属性。使用CSS能够简化网页代码,加快下载速度,减少上传的代码数量,从而可以避免重复操作。CSS样式表是对HTML语法的一次革新,它位于文档的区,作用范围由CLASS或其他任何符合CSS规范的文本来设置。对于其他现有的文档,只要其中的CSS样式符合规范,Dreamweaver就能识别它们:计算机基础与实训教材系列系列丛书官方网站/edu:9.1.2CSS样式表分类布局是最基本的网页布局之一,其特点是将网页的各种结构模块进行平面排列,以构成整个网页。在设计网页布局的过程中,应遵循对
54、S设计器面板创建与附加CSS样式表设定媒体查询定义选择器设置CSS规则属性:计算机基础与实训教材系列系列丛书官方网站/edu:9.3使用CSS样式在DreamweaverCC中,用户可以在“属性”检查器中对文档中选中的网页元素套用CSS样式,也可以使用“多类选区”面板将多个CSS样式应用于单个网页元素。应用CSS样式使用多CSS类选区:计算机基础与实训教材系列系列丛书官方网站/edu:9.4编辑CSS样式在DreamweaverCC中要编辑CSS规则属性,除了可以使用“CSS设计器”面板的“属性”窗格以外,用户还可以在“属性”检查器中单击“目标规则”下拉列表按
55、钮,选择具体的选择器,然后单击“编辑规则”按钮,打开“CSS规则定义”对话框进行设定。下面将详细介绍“CSS规则定义”对话框中重要选项的功能。设置“类型”属性设置“背景”属性设置“区块”属性设置“方框”属性设置“边框”属性设置“列表”属性设置“定位”属性设置“扩展”属性设置“过渡”属性:计算机基础与实训教材系列系列丛书官方网站/edu:9.5应用CSS过渡效果在DreamweaverCC中,用户可以使用“CSS过渡效果”面板创建、修改和删除CSS3过渡效果。下面将介绍“CSS过渡效果”面板的具体使用方法。创建CSS3过渡效果编辑CSS3过渡效果删除CSS3过渡
56、效果:计算机基础与实训教材系列系列丛书官方网站/edu:9.5.1创建CSS3过渡效果在DreamweaverCC中,用户选择“窗口”|“CSS过渡效果”命令,显示“CSS过渡效果”窗口,然后在该窗口中单击“新建过渡效果”按钮,可以为网页中具体的页面元素设置CSS3过渡效果。:计算机基础与实训教材系列系列丛书官方网站/edu:9.5.2编辑CSS3过渡效果在DreamweaverCC的“CSS设计器”窗口中,用户选中某个过渡效果后,可以单击窗口中的“编辑所选过渡效果”按钮,编辑页面中的CSS3过渡效果。网页设计与制作基础教程(第3版)第十章使用模板和库制作网页:计算机
57、基础与实训教材系列系列丛书官方网站/edu:学习目标在进行大型网站的制作时,很多页面会用到相同的布局、图片和文字等元素,为了避免一次次的重复劳动,可以在DreamweaverCC中,使用软件提供的模板和库功能将具有相同版面结构的页面制作成模板,将相同的元素制作成库项目,以便随时调用。:计算机基础与实训教材系列系列丛书官方网站/edu:本章重点创建模板创建模板区域创建与设置库项目应用与修改库项目:计算机基础与实训教材系列系列丛书官方网站/edu:10.1使用模板板的原意为制作某种产品的“样板”或“构架”。通常网页在整体布局上,为了保持一贯的设计风格,会使用
58、统一的构架。在这种情况下,可以用模板来保存经常重复的图像或结果,这样在制作新网页时,在模板的基础上进行略微修改即可。模板简介创建模板创建模板区域使用模板创建网页创建嵌套模板:计算机基础与实训教材系列系列丛书官方网站/edu:10.1.1模板简介大部分网页都会在整体上具有一定的格式,但有时也会根据网站建设的需要,只把主页设计成其他形式。在网页文件中对需要更换的内容部分和不变的固定部分分别进行标识,就可以很容易地创建出具有相似网页框架的模板。使用模板可以一次性修改多个网页文档。使用模板的文档,只要没有在模板中删除该文档,它始终都会处于连接状态。因此,只要修改模板,就可以一次性地
59、修改以它为基础的所有网页文件:计算机基础与实训教材系列系列丛书官方网站/edu:10.1.2创建模板模板最强大的功能之一是可以更新多个页面。用模板创建的文档与该模板保持连接状态,可以修改模板并立即更新所有基于该模板的文档的相应部分。在DreamweaverCC中制作网页后,用户可以以当前页面为基准制作模板,也可以在新的文档中制作模板。:计算机基础与实训教材系列系列丛书官方网站/edu:10.1.3创建模板区域模板生成后,就可以在模板中分别定义可编辑区域、可选区域和重复区域等。可编辑区域可选区域重复区域重复表格:计算机基础与实训教材系列系列丛书官方网站/edu:10
60、.1.4使用模板创建网页在DreamweaverCC中,用户可以以模板为基础创建新的文档,或将一个模板应用于已有的文档。使用这样方法创建网页文档,可以保持整个网站页面布局风格的统一性,并且大大提高网页的制作效率。利用模板新建网页在网页中应用模板分离网页模板更新网页模板:计算机基础与实训教材系列系列丛书官方网站/edu:10.1.5创建嵌套模板嵌套模板对于控制共享许多设计元素的站点页面中的内容很有用,但在各页之间有些差异。基本模板中的可编辑区域被传递到嵌套模板,并在根据嵌套模板创建的页面中保持可编辑,除非在这些区域中插入了新的模板区域。对基本模板所做的更改在基于基本模板的模