Dreamweaver网页制作课件.pdf

Dreamweaver网页制作主讲：周星宇第一章网页制作基础知识1.1 网页制作概述1.2 H T M L基础1.3 D r ea mWea ve r 概述1.1 网页制作概述.1.1网页的基本概念.1.2网页制作的一般过程.1.3网页制作常用软件.1.4网页制作中注意的问题1.1.1网页的基本概念 1.网页-网页就是在浏览器上看到的一个一个的页面。网页都是用H T M L的文件格式来表示的。2.网页的类型按照网页在一个网站中所处的位置可将其分为:-主页：是指进入一个网站时看到的第一页。-内页：是指与主页相链接的与本网站相关的页面。1.1.1网页的基本概念3.浏览器浏览器是专门用于浏览网页的软件，如I E。4.网页制作-网页制作就是编写网页文件。5.常见的名词(1)域名一个网站的网址。好像一个名字，该名字是 全世界唯一的。1.1.1网页的基本概念站点它是构建在网络上、具有独立名称的逻辑上的独立 体。大到一个网站，小到一个网页。超级链接是指将一个网站中的不同页面连接起来的功能。(4)导航条相当于一个网站的目录，导航条通过超级链接与各 个站点或网页链接。1.1.1网页的基本概念表单是用于申请或提交某些信息而填写的交互网页。(6)发布是将制作好的网页上传到网上的过程。UR L是全球资源定位器。它的功能是提供一种在 I nternet上查找任何信息的标准方法。使用最广的UR L形式是用于表示网页的I nternet位置。h ttp:/www.s i 构建页面框架填充内容制作网页的原则:为读者提供有用 的信息；要美观。1.1.3网页制作常用软件(1)图像处理软件用来对图片进行效果处理。常用的有：Ph otosh op 和F i reworkso F ireworks具有便捷的图片和按钮制作功能，并能 快捷地生成网页中常用的GI F、J PEG等图像格式。(2)动画制作软件常用的有F la sh。用它能制作出具有交互功能的平 面动画，并且生成的播放文件很小，有利于网上 发布。1.1.3网页制作常用软件(3)网页布局软件网页布局就像Word排版一样，只需将一个页面中 的内容合理地整合即可。常用 的有：F rontPa g e 和 Drea mwea vero Drea mwea ver与F rontPa g e相比，它的排版能力更 强，功能更全面、操作更灵活、专业性更强。1.1.3网页制作常用软件图形处理软件 Ph otosh op 和F i reworks处理|导入动画制作软件 F la sh(M a cromed ia)导入，作为 网页的插件制作通过小插件插入 一er：(Fl ash动画图 三类软件间的相互关系示意图1.1.4网页制作中注意的问题 首页精简 页面简朴 善用图片 链接丰富 有纲有领ffl1.2 HTML基础2.1 H T M L的概念2.2 H T M L的语法规则2.3 H T M L文件的基本结构2.4 H T M L的常用标记2.5格式化文本1.2.1 HTML的概念 H T M L（H ypertext M a rkup La ng ua g e,超文本标记语 言）是一种纯文本类型的标记式语言，不需要编译而 直接由浏览器解释执行。是目前I nternet上用于 编写网页的主要语言。它的作用是通过一些标签来告诉浏览器怎么显示 标签中的内容。H T M L不仅要负责组织数据，还要 负责显示这些数据。H T M L中的标签是固定的，不能自己扩展标签。1.2.2 HTML的语法规则H T M L的语法规则有三种表达方式：表达方式一：标记）对象/标记）封闭类型标记，占多数。成对出现。例如（粗体显示）：网页制作课程表达方式二：标记属性上参数1属性2=参数2对象/标记 封闭类型标记的扩展形式，利用属性可以进一步 设置对象某方面的内容，而参数则是设置的结果。例如（创建超级链接）：新 浪主页1.2.2 HTML的语法规则表达方式三：标记）非封闭类型标记，较少，例如换行符：b r例如（以两行显示）：网页制作协 课程语法规则说明:以纯文本形式存放，扩展名为“*.h tm”或“*h tml”H T M L标记不分大小写 多数H T M L标记可以嵌套，但不可交叉 如：错误：北京C/pX/font正确:font colok#0000fF R晾 H T M L文件一行可以写多个标记，也可以一个标记写在 多行中，但一个单词不能分两行写 H T M L源文件的换行、回车符及多个空格在显示时都是 无效的。是换行符，是换段符 注释：号注释内容1.2.3 HTML文件的基本结构 一个典型的H T M L文本的基本结构形式如下:H T M L文件标记 文件头标记 标题标记 文本标题 文件体标记，网页中的所有内容文本内容1.2.3 HTML文件的基本结构+匚exa mple-记事本0文件任）编辑超）格式）查看W）帮助国）一个简单的 HTML 示例p align=center XFont size=7 color=你好/font1.2.3 HTML文件的基本结构41.2.4 HTML的常用标记1.H T M L标记符 /H T M L这两个标记符是H T M L文档的标记 符。处于文档的最前端，表示文档的开始，即 浏览器从开始解释。而是H T M L文件头标记符，用来描述 H T M L首部的内容，说明文档的整体信息。所有首部信息并不会出现在利用WWW浏览器所看到 的窗体中。通常与某些标记符一起使用。如：标记符。1.2.4 HTML的常用标记3.T I T LE标记符 指的是一份文档的标题。通常来说，每一份文档都应该有一个标题来简述 这一份文档的特色或是主题。对于WWW浏览器而言，标题所在的位置虽然依照浏 览器的不同而不同，但是大部分都位于浏览器的 最上方。1.2.4 HTML的常用标记4.BODY标记符 /BODY指的是定义出一个H T M L文档的体 部，位于首部下面。在标记符内的文字，所有使用标记符的地 方都可以经浏览器正确地显示在浏览器窗体中。1.2.5格式化文本字型设置标记开始标记作用文本以粗体显示文本以斜体显示或在文本下方显示下划线、或strike在文本中间显示横线（删除线）突出显示文本文本以下标方式显示文本以上标方式显示文本以大字体显示small)文本以小字体显示增强文本的显示效果段落标记1.2.5格式化文本2.字体格式设置格式：font fa ce=“字体”文字/font3.字号设置格式:font size=“字号”文字/fontSize：17的整数，1号最小。默认字号为3。4.文字颜色设置格式：font co I or=#ooooff”文字/font练习格式化文本，要求：文本内容：“网页制作”，字体为“隶书”，字号为“6，字体颜色为pooooff网页制作1.2.5格式化文本5.标题格式设置格式：标题文字有6级标题，n的值为16,值越小，字号越大。6.段落对齐设置：格式:.a lig n 属性值:“left”、“center、“r ig h t”7.强制换行标记：格式：是一个单标记，与的区别是：段落标记的行距要 宽。练习H 在记事本中编写一个完整的H T M L文件，要求：标题为“欢迎光临我的主页”主页内容为“网页制作课程简介”，其中：字体 为“隶书，字号为“6，字体颜色为“#oooofF。段落内容居中显示。、-练习-记事本 M叵I区I文件鱼）编辑起）格式）查看国）帮助鱼）title）欢迎光临我的主页Font Face=隶书size=6 color=（ttooooff”）网页制作课程简介ffl1.3 DreamWeaver概述.3.1 Drea mwea ver 的界面.3.2文档的基本操作1.3.1 Dreamweaver的界面 1.插入栏放置了各种类型的对象（如图像、表格和层等的 按钮）。每个对象都有一段H T M L代码，允许在插 入它时设置不同的属性。2.工具栏放置了各种视图（如设计视图、代码视图）、各 种查看选项和一些常用的操作按钮。3.编辑窗口显示当前创建和编辑的文档。1.3.1 Dreamweaver的界面 4.属性面板用于查看和更改所选对象或文本的各种属性，选 取不同的对象，其属性面板内容不同。5.可停靠浮动面板是停靠在某个标题下面的相关面板的集合。6.状态栏 用于显示当前文档的状态。7.快捷菜单插入栏Q la croa edia Drea a vea rer IX 2004-无标题文者(Untitled-1)文件9 编辑也）查看9 插入9 修改）文本CD命令 站点 窗口过）帮助QD国园园I标一扩展布局.、，|:DP圈H 设计0工具栏力代码Im拆分设计 标题：无标题文档 ut.a e 国.浮动面板组编辑窗口，屋性”代码r 应用程序行为一回|九卜相关css标签 CbodyonAfterPrint onAfterUpdate onBeforePrint onBeforeUpdate onBlur onCli ck onContextMenu onDblClick unDrag onDragEnd onDragEnter iriDragLeaveonDrop onFini sh onFocusonHelp onKeyDown onKeyPress onKeyllponLoadonLos eCapture onMouseDown onMouseMove文件网页标签文件卜资源后未命名站点L V本地视图V 2c 15分6伍|国样式9大小）点站09Q 用田.由，B-国由.4.|+)点 站 名 命 未(CAop en建蓦杯2004全国fMy eBooksMy Musi cMy PicturesMy Vi deosMy Web Sitestemplate for Finetec中国申孑竞技不许你来V备妥1.3.2文档的基本操作1.文档的存取单击“文件”一“打开”命令。2.文档的编辑3.在浏览器中预览网页单击“文件”一“在浏览器中预 览”-hexplore”命令F12。1.3.2文档的基本操作文档视图的选择(D从网页的设计方面考虑：标准视图：是典型的Drea mwea ver设计视图。布局视图：可以绘制布局单元格或布局表格并在 其中添加各种内容(如图像、文本等)。(2)从文档窗口显示的内容方面考虑：代码视图 代码和设计视图 设计视图第二章如何创建自己的网站2.1网站的概念站点包括：本地和远程使用Drea mwea ver建Web站点最常见的方法是在您的本地磁盘上创建并编辑网页，然后将这些网页的副本上传到一个远程Web服务器使公众可以访问它们。2.2站点管理2.2站点管理2.2.1新建本地站点2.2.2编辑本地站点2.2.3编辑站点文件2.2.4在浏览器中预览2.2JLM建本地站点未命名站点1的站点定义为区基本高皴单击“基本”选项卡站点定义您打算为您的站点起什么名字？北菊潞例瞌!示例：MySite编辑文件 测试文件输入站点名字单击“下一步7共享文件Ma cromedia Drea mwea ver MX 2004中的站点是文件和文件夹的集合，它对应于服务器上 的Web站点。如果您希望使用FTP或RDS直接在服务器上工作，您应当转而 服务器连接。服务器连接不允许您执行站点范围的操作，比如链:FTF 或 RJS下一步也）11取消帮助图 新建站点对话框ysit e的站点定义为区|基本高级站点定义+编辑文件第2部分 测试文件 共享文件I选择“否”，表您是否打算使用服务器技术，如ColdFusion、ASP.NET、ASP、JSP或PHP?0杳;葭丕想使用服英黑技术二j；。是，我想使用服务器技术.(Y)个示该站点是静态站点，没有 动态页。单击“下一步”k上一步立)下一步国L取消I帮助图 新建站点对话框2ySite的站点定义为基本高皴站点定义选中翁辑文件,第3部分 测试文件 注享文件在开发过程中，您打算如何使用您的文件？0编辑我的计算机上的本地副本，完成后再上传到服务器（推荐）堡）使用本地网络直接在服务器上进行编辑也）。使用FTF或MS直接在服务器上进行编辑建）选择站点的本地 根文件夹您将把文件存储在计篁机上的什么位置？E：drea mwea 9er_temp我的站点,单击“下一步”I 取消 11 帮助 I图 新建站点对话框_3ysite的站点定义为基本高级站点定义您的站点包含以下设置：本地信息：站点名称：Mysite本地根文件夹：E：dr e a mw e a ver_t emp 我的站点远程信息：访问：我将在以后完成此设置。测试眼务器：访问,我将在以后完成此设置。可以使用高级选项卡对您的站点进行进一步配置。单击“完成R.上二步|完成|取消|帮助|图 新建站点对话框_5“总结”界面2.2.2编辑本地站点单击“站点”一“管理站点”命令。可以对 站点进行编辑、删除和复制等操作。区T图管理站点新建编辑复制。.删除 导出.导入复).二完成)帮助管理站点对话框2.2.3编辑站点文件1.新建文件夹右击“站点”窗口的空白处，在弹出菜单中选 择“新建文件夹”。2.新建文件右击新建的文件夹，在弹出菜单中选择“新建 文件”。此时即可在Drea mwea ver窗口中进行网页文件 的编辑。2.2.3编辑站点文件3.复制文件/文件夹4.删除文件/文件夹5.重命名文件/文件夹6.打开文件打开一个已有的网页文件exa mple.h tmo7.保存文件单击“文件”一“另存为，将它保存到站 点中。2.2.4在浏览器中预览单击“文件”一“在浏览器中预览”一 i exp lore”命令。上机实战1.创建我的站点地图2.要求：I-在D盘建立名为M ysite的站点-在新建站点下建立名为untitled、ima g e 及web的三个文件夹。-将名为untitled的文件夹改名为yua nsuj i第三章基本操作3.1创建和编辑文档32插入图片3-3插入其他媒体3.4上机实战3.1 创建和编辑文档3.1.1 创建文档3.1.2 设置页面属性3.1.3属性面板3.1.4 文本设置3.1.5 段落设置3.1.1创建文档单击“文件”“新建”命令。新建文档常规 模板 类别：基本页:预览:基本页动态页模板页其他CSS样式表胭架集页面设计（CSS）页面设计页面设计（有辅助功能的）KTMLHTML模板 库项目 CSSJa va ScriptXML 动作脚本无预览I帮助国）I首选参数也）.获取更多内容描述：HTML文档使文档与XKTML兼容量）I创建 I I取消 I3.1.2设置页面属性单击“修改”一“页面属性”命令。分类页面屋性外观图“页面属性”对话框3.1.2设置页面属性i.外观2.页面字体、大小、文本颜色、背景颜色3.链接4.标题5.标题/编辑页面6,实例：设置个性化标题I方法1：查看一工具栏一文档一标题方法2：标题/编辑页面3.1.3属性面板图“属性面板”3.1.4文本设置1.设置文本格式2.设置字体颜色1.设置文本格式文本类型：可选择文本为段落还是标题类型。字体大小：表示在原字体上加大字号。-表 示在原字体上减小字号。“+7”和7号字的大小相 同。格式9 链接,文本类型、（段落/标题）,国性图“属性面板”2.设置字体颜色颜色基本颜色(B)：inii-厂l厂规定自定义颜色也)I确定 I取消 I“颜色列表”图“颜色”对话框图3.1.5段落设置1.设置段落对齐方式2.设置列表首先将文本类型设置为段落:在“格式”下拉列表框中选择“段落展落对齐方式设置项目无序列表 有序列表j段落整体凸出 缩进图“属性面板”3.2插入和编辑图像2.3.1图像文件格式2.3.2插入图像2.3.2.1直接插入图像2.3.2.2用占位符插入图像2.3.3编辑图像3.2.1图像文件格式1.J PG/J PEG（联合图像专家组）：有损压缩格式的图像，扩展名j pg或j peg;.它支持24位真彩色，如果要显示的图像特别重视 色彩，可以使用该类型的图像。2.G I F（图像交换格式）：无损压缩，仅支持8位颜色，适用于显示卡通等 对色彩要求不高的地方；.它支持动画格式，所以在网络上很流行。3.2.2.1直接插入图像单击“插入”“图像”命令。如果图像文件不在定义的本地站点中，则询问是否复选择图像源制到本地站点中。la croa edia Drea vea ver EE从文件名称选择 G）文件系统C数据源选中“文件系 统”单选项9 文件位于站点MySx te的根文件夹以外 y 当您发布站点时用能不能访问。您的根文件夹是：E drea mwea ver_temp您愿意将该文件复制到根文件夹中吗?查找范围（I）image-B.Blue hills.Nater lilies.jpgycn3.jpg图像预览800 x 600 JPEG,82 K/括贝文件为田团文件名）：Water lilies.jpg文件类型 1）:图像立库（*.gif;*.jpg;*,jpeg；*,png）W 取消UBL:相对于:file./E|/dreamweavejtCTip/我的站点/imai文档Unt:tled-1要使用此选项，谙保存文件；团预览图像图“选择图像源”对话框保存在（X）:I t dr e a mw e a vr_t empima gehf web文件名V）:jw君叫第保存类型a）：所有文件（*.*）v Q夕国|确认-3.2.2.2用占位符插入图像占位符用于在图像为准备好之前要安排 页的布局在插入栏的“常用”.按钮.I I图像占位符 圜双击占位符插入图像名称：I宽度：反 高度：筋颜色：口 I替换文本：I“图像占位符”对话框输入该图像的 名称以便用脚 本语言（如JavaScr i pt）引用底,鼠设置图像顶部和底部 的边距3.2.3编辑图像宽、高更换图像边框粗细I像,8 2K宽世)|200|源文件漏e/Wa ter lilies.jpg|口 窜代(T)高国）100 口链接圾）、垂直边距S）D水平边距国）目标 低品质源设置图像左侧和右 侧的边距图编辑）重设大小边框|0 与至与对藜）默认值建立 链接图像属性面板图像与周围文字 的对齐方式3.3插入其他媒体3.3.1 插入水平线插入一HTML水平线3.3.2 插入Flash插入一媒体3.4上机实战新建一个网页，输入不同字体和颜色 的文字，并为其加上背景图片。选择一张喜欢的图片，插入到网页中,使文字与图环绕 插入一张图片，要求当鼠标滑过图片 时能看到相关介绍在网页中练习插入各种媒体（fla sh按钮、水平线等）第四章表格技术4.1添加表格4.2表格的设置4.3实例应用4.4上机实战4.1添加表格4.1.1表格的概念1.表格：由一些线条分开的小格组成。2,边框：组成表格的线条。3.单元格：被边框分开的区域。4.行：位于水平方向的一系列单元格。5,歹人位于垂直方向的一系列单元格。6.单元格中可以存放数据、文字、图形、图 片。7.单元格内部边距：文字或其他对象同单元 格边缘之间的距离。8.单元格间距：单元格之间的距离4.1,1表格的基本概念边框班级计算机列1单元格间距内部边距行1行24.1.2.插入表格-切换到设计视图窗口。单击“插入”栏中的“布局”选项卡。单击“标准视图”按钮一“插入表格”按钮，打开“插入表格”对话框。图“插入表格”对话框说明 在“页眉”部分选择一个标题选项：-无:对表不启用列或行标题。-左侧：可以将表的第一列作为标题列，以便为表中的每一 疗输入一个标题。-顶部：可以将表的第一行作为标题行，以便为表中的每一 列输入一个标题。-两者：使您能够在表中输入列标题和行标题。在“辅助功能”部分指定以下选项：-标题:提供了 一个显示在表格外的表格标题。-对齐标题:指定表格标题相对于表格的显不位置。-摘要:给出了表格的说明。屏幕阅读器可以读取摘要文本,但是该文本不会显示在用户的浏览器中。4.L3.在表格中添加内容单元格中可以插入任何类型的数据，例如文本、图像、表单甚至表格，同时可以按照通常的编辑方式编辑其中 的内容。4.2表格的设置 1.选取表格、行、列 2.调整表格和单元格的大小 3.在表格中插入行或列 4.删除行/列/表格 5.合并、拆分单元格 以上操作中使用菜单命令的方法：方法一：单击“修改”一“表格”命令，选择其中 相应的命令。方法二：将光标定位在表格中，单击右键，选择快 捷菜单中的相应命令。文本 命令 站点 窗口 帮助修改）页面属性化）.Ctrl+J模板属性化）.3所选属性）C trl+Shi ft+Jg 设计1gb代码i 应用程.编辑标签场）.暄,站占资源快速标签编辑器）Ctrl+T文件编审创建链接口）Ctrl+L移除链接国）Ctrl+Shift+L打开链接页面）.链接目标r1MySi te1S站B-0|表格|选择表格6）Ctrl+A框架页也）导航条CB）合并单元格 Ctrl+Alt+M拆分单元格化）.Ctrl+Alt+S排列顺序对齐 转换C）插入行国）Ctrl+M插入列（）C trl+Shi ft+A插入行或列CD.库（1）f模板 时间轴也）删除行也）删除列也）Ctrl+Shift+MCtrl+Shift+-增加行宽也）增加列宽口）减少行宽世）减少列宽Ctrl+Shift+Ctrl+Shift+清除单元格高度国）清除单元格宽度）1转换宽度为像素转换宽度为百分比）将高度转换为像素将高度转换为百分比582表格选择表格）段落格式化）列表合并单元格）拆分单元格化）.对齐 字体国）样式 HTML样式复）CSS样式 大小9插入行国）插入列C）插入行或列支）.一删除行也）删除列堡）模板增加行宽国）编辑标签更）.插入KTML图）.Ctrl+F5增加列宽口）减少行宽世）减少列宽4.2编辑表格 1.选取表格、行、列选定表格：使用菜单命令。选定行、歹I J:鼠标指向行、歹I J,光标变成箭头后点 左键。-2.调整表格和单元格的大小方法一：使用菜单命令。方法二：直接用鼠标拖动边框。3.在表格中插入行或列方法一：使用菜单命令。方法二：右击，单击“表格”一“选择表格”命 令，然后直接修改属性面板中的行数、列数。4.删除行/列/表格 方法一：使用菜单命令。方法二：同插入方法二。方法三：选中要删除的行/列/表格，按d elete键。5.合并、拆分单元格选中单元格，使用菜单命令。表格Id 行屯）口觉附255像素工W 鼬 闻列匚高126 O v间隧）边框61 1讨野学背热跑匚 魂鼬口【卜上 日背景国像 Qb表格格式化 1.2.3.设置表格属性设置单元格属性自动套用格式1.设置表格属性如果窗口中没有属性面板，可单击“窗口”一“属性”命令。将光标定位在表格中，单击右键，选择“表格”格”“选择表格”命令。或者单击“修改”一“表“选择表格”命令Q打开表爆函与Q段落中文本单元格内间距（像素）些图像的对齐方式。y性PPj表格Idv埴充g|对齐默认列列I高皿I隆一I属h 间距）|I边框1 I行 2 宽世）把谪除列宽清除行高_ _、小弁引 背景颜色匚|匚 二|边框颜色向0JZ一卜加h背景图像（B）0将表格宽度/高 度转换成像素将表格宽度/高度转换成%7 A单位是：像素_ _72.设置单元格属性成为标题 单元格表示，若以 百分比表示,在数值后7的水会上为 中“i向知 格在方齐 元本”对 单文平直地图 单元格的属性面板3.自动套用格式可用系统提供的表格设计方案来格式化表格。具体操作：选取表格。-单击“命令”一“格式化表格”命令，显 示“格式化表格”对话框。-在列表中选择合适的设计方案。单击“确 定”。3.自动套用格式十格式化表格SimplelSimple2Simple3Simple4Al tRows：Blue&YellowAltRows：Ea rth Colors|AltRows：Ba sic GreyAltRows：Ora ngeA行颜色：第一种：口 FFFFCC第二种:匚|SCCFF99第一行:最左列:表格:文字样式:文本颜色:文字样式:标注而不是TR标签边框粗细。“0”表示 无表格线图“格式化表格”对话表格实例应用制作个人简历制作各种不同效果的立体表格-突出的立体表格-边框凹进的立体表格-凹进的立体表格一边框突出的立体表格上机实战利用表格技术重新布局你的网页第五章创建超级链接1.2.3.4.超级链接的类型超级链接的路径创建链接 实例应用5.1超级链接的类型超级链接有源端点和目标端点两种链接 形式。源端点超级链接中有链接的一端称为链接的 源端点。目标端点超级链接中跳转到的页面称为链接的 目标端点。5.1超级链接的类型源端点的链接：-文本链接：即文字链接。带有下划线的文 字。-图像链接：单击图像跳转到相关的浏览页 面。美观实用。最常用。表单链接：当填写完一个表单后，单击提 交或取消等按钮时会自动跳转页面。5.1超级链接的类型目标端点的链接：外部链接：链接的目标端点是本站点外的站点或 文档。如:友情链接。内部链接：链接的目标端点是本站点中的其他文 档。E-ma il链接：单击该链接可以启动电子邮件程序,允许书写并发送邮件到指定的邮箱地址。局部链接：是通过文档中的命名锚实现的,在浏览 时即可跳转到当前文档或其他文档的某一指定位 I 直。5.2超级链接的路径1复习：UR L是全球资源定位器。它的功能是提供一种 在I nternet工查找任何信息自勺标湘方法。每个网页只有唯一的地址，称为资源定位符（即UR L地址）。通过UR L可以访问世界上任何 发布在网上的信息。完整的UR L地址：协议类型：服务器名：端口号/目录/文件名+文档中的命名锚 h ttp:/www.s i :1024/news/i nd ex.h tmI#h eI I o5.2超级链接的路径 L绝对路径 绝对路径提供链接目标端点所需的完整的UR L地址,包括使用的协议类型。例如：h ttp:/www.sina,com/news/ind ex.h tml 优点：路径与源端点所处的位置无关。不论源端点如何 移动，都可以正常实现跳转。缺点：如果目标在本网站上，则会给移植和测试带来不 便，因此，对内部链接和局部链接最好不使用绝 对路径。5.2超级链接的路径 2.相对路径 是目标端点与源端点之间的相对位置，它的参考 点是源端点，与协议类型、网址和根目录的位置 无关。优点：只要站点的结构和文件的相对位置不变，链接就 不会出现错误。缺点：如果修改了站点的结构，或移动了文档，则文档 中的链接就会失败。5.2超级链接的路径 3.基于根目录的路径可以看作是一个基于本网站的根目录的相对路径,通常用一个/表示根目录。不管源端点在哪个文件中，都可以使用正确的路 径链接到指定的位置。I例./ima g e/tu l.j pg5.3创建链接1.文档链接2.链接到命名锚3.E-ma il 链接4.热区链接5.导航条1.文档链接 方法一：打开属性面板，直接在“链接”文 本框中输入链接的文档地址。方法二：单击固，打开“选择文件”对话 方法三：直接拖动一到站点中要链接的目标文件上。链接（X-）/MySi te/web/ex a mple,htm-=列表项目.一指定链接文档 在哪一级目录 一中被打开/I bla nk Ipa rent Llf _topE 尾性格式无|瓜|默字体图 属性面板2.链接到命名锚创建命名锚（建立锚点）锚所在的位置就是链接的目标端点位置链接命名锚I设置源端点-若链接的目标锚位于当前文档#样章试读-若链接的目标锚位于其他文档I nd ex.h tml#样章试读3.E-mai I 链接选中要作为超级链接的文字。单击,或“插入”一“电子邮件链接”菜单命令。在“文本”框中输入要作为链接的文字，在“E-ma il”框中输入E-ma i I地址。席用Ag1超1国臼国物奉寡|篝同隔回官电子峰件捱接图“电子邮件链接”对话框屋性金IM Si.|标题：E?简单的ht方例 二比.c?口，暄图 属性面板卑的UTIL示例一i.cro30ft Internet Expl.H O.文件演希度有看收藏工具中 帮助Q后退D包.、1林地址!1,段E：drea mwea ver_temp拿期邮件13回区文件g 编辑 查看插入 格式工具建创避耳发送X皿力_I复书ua 2日正在从以下站点下载：Ele：E：Oody图“E-ma il链接”演示4.热区链接图像链接利用热点工具在图像上添加多个链接口 025.3.5创建导航条复习：相当于一个网站的目录，导航条通过超级链接 与各个站点或网页链接。导航条的作用无论浏览到何处，单击导航条即可跳转到相 应的网页。在页面中起网站导航的作用。1.插入导航条“导航条”1.插入导航条插入导航条导航条元件:项目名称:鼠标经过图像:按下图像:按下时鼠标经过图像:替换文本:按下时，前往的URL:状态图像:，在“导/航条元 I件”列 表框中 上移/下选项：回预先载入图像页面载入时就显示鼠标按下图像“插入：水平回使用表格图 插入导航条对话框十9无标题文档（网页制作 第2讲/2-da oha ngtia o-ex）回区图 在设计视图中看到的导航条地图组）图像，6K 宽世）诿源文件）|77Xa gyiia gel.j痴小一）替代 回高国中20 I梃接勘）2-导肮家T.htm _J|33ZICIEJ垂直边距现）目标也）KSEE93 低品质源|边椎口 叁妄叁一）对齐必）默认值期1:、口 0 2水平边距第“目标”栏设 置为bl ank，_/标黑文档 _ Kicrosoft Internet Explorer J,yD|X|文件已 斓据旧 查看坦收滕0i TMitj 帮助皿阁；搜索（收藏夹QT媒体邛囹心备课,网页制作，网页制作第2讲,2-da ohmgti a orx.htm|Q 转到 公司简介产品说明引导航条示例-Microsoft Internet ExplorerE白ile：/D：/备课/网页制作/网页:文件（F）翁辑 查看 收藏 工具（X）帮助电）G后混0 ;搜索 收藏夹妁、媒体 0堪；一句D、备课，网页制作,网页制作第2讲12-da oha ngtia o-1.htmV转到公司简介题完毕f我的电脑图在浏览器中使用导航条2.编辑导航条十选中导航条。单击“修改”“导航条”菜单命令。.修改导航条区p图导航条元件:项目名称:_+J jlII 确定 II-Ina me2帮助状态图像:ile：/E|/备课/网页制作八emp/a sd.gi浏览.)主窗口选项：回预先载入图像初始时显示鼠标按下图像修改导航条上机练习 设置个人主页，编辑文字体。在个人主页中设置个人主页、个人简介、个人影展及新闻导航几个栏目 在主页中插入图片 对图片设置热区链接 对几个栏目设置不同的链接 插入导航栏第六章框架结构6.1框架的基本概念6.2创建框架和框架集6.3选择框架和框架集6.4设置框架和框架集属性6.5保存框架和框架集6.1框架的基本概念 框架的功能是把一个浏览器窗口划分为若干个区域，分别显示不同的网页。每一个框架是浏览器窗口的一个能够显示独立页面的 区域，也可以理解成一个能够独立显示的文档。框架由单个框架和框架集组成：单个框架是指在网页上定义的一个区域。框架集定义了一组网页显示的框架数、框架大小、载入框架的网页源和其他可定义的属性等。6.2创建框架和框架集方法一：单击布局一“框架”按钮中的预定义框架集中的 一个。蓝色区域表示当前文档，白色区域显示其他文档 的 磊3礼 Dremeaver IB 2004 俨丽客（web/rij ht j rame.ht ui）嫩）雕）瞅）献Q）蜘）婵俞翎&跃）襦艮目自6.2创建框架和框架集方法二：将光标定位在文档中。单击“插入”一“H T M L-一“框架”菜单中所需的框架类型。插入9修改)标签 图像9 图像对象 媒体Q)表格 表格对象 布局对象表单打文本Q）命令:Ctrl+E Ctrl+Alt+ICtrl+Alt+T超级捱接口 电子邮件捱接)命名锚记 日期鹿 注释Ctrl+Alt+A左方Q)右方也 上方 下方 下方及左侧嵌套 下方及右侧嵌套)左侧及上方嵌套口 左侧及下方嵌套 右包及下方嵌套(X)右咽上方嵌套 上方及下方口 上方及左侧嵌套Q)上方及右侧嵌套HTML水平线Q)模板对象Q)框架框架集 框架 浮动框架 无框架自定义收藏夹也 获取更多对象文本对象Q0 脚本对象0 文件头标签世)特殊字符 6.2创建框架和框架集方法三:修改）将光标定位在一个框架中。K1J*1-,化化6命令 站点 窗口世）帮助电）Ctrl+JCtrl+Shift+J单击“修改”一“框架页，菜单中所需的拆分项。编辑标签快速标签编辑器，）Ctrl+T创建链接1）移除链接国）打开链接页面（Q）.链接目标Ctrl+LCtrl+Shift+L表格9框架页7_编辑无框架内容更）导航条也）拆分左框架1）排列顺序色）拆分右框架国）对齐国）拆分上框架也）转换（）拆分下框架也）库9 模板更）时间轴也）6.2创建框架和框架集+(3回区励无标题文档(eb/Unt it led-1.ht)490 x 313 1 K/1 秒图 创建好的框架6.3选择框架和框架集方法一：在文档窗口中选择按住Al t键在框架内单击。被选择框架的边框带有点线轮廓。方法二：在框架面板中选择单击“窗口”一“其他”一“框架”菜单命令，在浮动面板 组中打开框架面板。在框架面板中单击需要的框架。QEI3 无标题文档(Unt itledFra eset-7)380 x 170 1 K/1 秒高级布局卜答案ftFrai图框架面板6.4设置框架和框架集属性 使用框架属性面板可以设置框架属性。框架属性包括框架的名称、框架源文件、框架的空白边距、框架的滚动特性、框 架的边框特性等。1.设置框架属性 选中要设置属性的框架，显示框架属性面板。该名称可以被JavaScript程序引用屋性框架源文件的URL地址是否显示边框V框架名称 源文件）/MySiJe/web/保存框架示例_F.htm 后 边框 默认-leftFra me 滚动国”否 二 回 回不能调整大小 边框颜色J二匚边界宽度电）边界高度鱼）框架中的内容 到边框的距离用是否能在浏览器中通过拖动/_善架边框来改变框架大小文档内容超出框架的大1.设置框架属性“滚动”：文档内容超出框架的大小时，是否显示滚动条。“是”：无论框架文档中的内容是否超出框架大小，都会显示滚 动条。“否”：即使框架文档中的内容超出了框架大小，也不显示滚动 条。“自动”：当框架文档中的内容超出了框架大小时，才会显示滚 动条。“默认”：大多数浏览器按“自动”方式处理。“边框”：是否显示边框。“是”：显示框架的边框。“否”：不显示框架的边框。“默认”：多数浏览器采用显示框架的边框方式。2,设置框架集属性选中要设置属性的框架集，显示框架集属性面板。设置框架集中所有框架的属性。注意：框架的属性设置优于框架集的属性设置。血屋性S F I边框明否 下边框颜色C）口匚边框宽度世）o单嬴_ 便素:J醛范围设置框架集中不同 框架的行列大小6.5保存框架和框架集H 1.保存框架文件：保存某个框架中的文档内容。2.保存框架集文档：保存框架集和其中的文档内容。3.保存框架集中的全部文件：依次将各个框架中的 内容保存为一个单独的文件。题无标题文档 眄页制作 第3讲/doc333.hS）回区|Framelll Frame222Left FrameMainFrameDoc333|TopFrame框架中的文档内容6.5保存框架和框架集 1.保存框架文件：将光标定位到要保存的框架中。-单击“文件”一“保存框架”菜单命令。2.保存框架集文档：-选中要保存的框架集。-单击“文件”一“保存框架页”菜单命令。6.5保存框架和框架集 3.保存框架集中的全部文件：将光标定位到要保存的框架中。-单击“文件”一“保存全部”菜单命令。如果框架集中有文档未被保存，则会出现“另存为”对话框，提示保存该文档。上机实战建立一个框架结构的 网页，使左边链接的 内容可以在右下方的 框架内变换。第七章设置css样式表7.1 创建css样式一方法一：窗口一CSS样式”面板-方法二：文本属性检查器一样式一管理样式一方法三：窗口一标签检查器一相关CSS新建规则 一方法四：文本一CSS样式新建新建CSS样式名祢：|副抽附411三确定选择器类型：6类（可应用于任何标签）9）C标签（重新定义特定标签的