网页制作与设计入门.ppt

通过本章学习，应该掌握以下内容： 1.Dreamweavercs4概述 2.用dreamweavercs4制作基本的网页,第2章,一、 Dreamweavercs4概述,1、Dreamweavercs4的安装 下载安装程序； 进行安装 密码：wysj123456 收件箱,2、 Dreamweavercs4的工作区 （1）标题栏； （2）菜单栏； （3）插入面板组； （4）文档工具栏； （5）标准工具栏； （6）文档窗口； （7）状态栏； （8）属性面板； （9）浮动面板。,3、创建站点 （1）站点的分类 本地站点和远程站点 本地站点：网页制作者制作网页和测试网页的一个总的文件夹。不能在互联网中浏览。 远程站点：是本地站点的一个映射，结构基本相同，可以让任何上网的浏览者浏览的文件。,(2)创建本地站点 站点|新建站点 (3)管理站点 编辑站点； 复制和删除站点；,注意： 删除站点只是删除了根文件夹和dreamweaver 之间的关联，但是文件夹本身及其里面的内 容仍然存在。,4、用Dreamweavercs4创建文件 （1）主要的文件类型：HTML文件 （2）文件|保存（或者ctrl+s） （3）文件的命名一般使用英文字母和数字， 但不能以数字开头，也不能在文件名中使用空格、特殊字符或标 点符号，文件名最好不要使用汉字，因为许多浏览器不支持汉字命名的文件。,二、制作基本的网页,一、文本标题 1共设置了6级标题,16级,每级标题的字体大小依次递减 2设置标题方法： （1）选中文本或段落； （2）格式|段落； 属性|格式，下拉菜单选项； 插入面板|文本 练习举例,二、处理段落,1、输入文本 （1）直接输入 （2）复制：定位光标，编辑|粘贴 （3）文件|导入|word文档 (4)把word文档直接转换html文件,2、特殊字符,（1）定位光标 （2）“插入”面板|文本|字符:其他字符| （3）“插入”菜单|HTML|特殊字符 （4）键盘 （5）软键盘,3、插入日期,（1）插入|日期 （2）常用|插入日期按钮,4、文本的编辑,（1）方法：选中文本|属性 （2）改变文本的类型、样式和大小 （3）改变字体的颜色 （4）为文字设置更多的样式,5.文字的其他设置,（1）文本分段与换行 分段：enter 分行不分段：shift+enter （2）连续输入多个空格： 全角状态；ctrl+shift+空格； 编辑|首选参数|允许输入连续空格,6、页面设置 7、首选参数(再讲 跟踪图像),跟踪图像： 可以在“跟踪图像”文本框中指定复制设计时作为参考的图像。该图像只供参考，当文件在浏览器中显示时并不出现。 调节“透明度”，确定跟踪图像的不透明度，从完全透明到完全不透明。,注意： 设置“跟踪图像”之后，若再设置页面背景图像，则在设计视图中看不到页面背景图像，预览时才能看到。,8、项目列表和编号列表,（1）创建列表 项目列表：无序列表 编号列表：有序列表 (2)列表的嵌套,三、插入图像,1、网页图像的一般格式 （1）GIF格式（图形交换格式） 带动画效果 (2)JPG格式（联合图像专家组标准） 电子照片 (3)PNG格式（可移植网络图形） Photoshop中的图片,2、插入图像 (1)插入菜单|图像 (2)插入面板|常用|图像 操作举例 3、设置图像属性 注意： （1）图片文件最好独立存放于单独的文件夹。 （2）图片文件名尽量不使用汉字和特殊符号，否则可能导致图片在浏览器中不能显示。,4、插入其他图像元素 （1）插入图像占位符 准备好将最终图像添加到web页面之前使用的图形，在使用浏览器时，它将显示为一个红叉。 方法：插入面板|常用|插入图片下拉按钮|图像占位符 插入菜单|图像对象|图像占位符,（2）插入鼠标经过图像 插入|图像对象|鼠标经过图像,注意：主图像和次图像大小要一致 如果不一致，将自动调整第二个图像的大小以匹配第一个图像的属性,举例：,dreamweaver精彩网页设计实例导航ch033.5,（3）插入导航条 功能：实现网页的导航 方法：插入|图像对象|导航条,注意：每个网页文件只能包含一个导航条,举例：,dreamweaver精彩网页设计实例导航ch022.3,四、插入超级链接,网站是由一个个的网页构成的，网页之间不是彼此孤立而是相互关联的。 网页之间的关联一般是通过“超级链接”的方式。,超级链接由两部分组成：链接载体和链接目标。 链接载体：页面中引导浏览者去单击某个超级链接的载体，是一种指针。 许多页面元素都可以作为链接的载体，如文本、图像等。 链接目标:超级链接的指向位置或文件URL。 它可以是任意的网络资源，如：页面、图像、声音、各种文件、程序、E-mail,甚至是页面中的某个位置（即锚点）。,链接目标的分类：,_blank:将链接的文档载入一个新打开的浏览器窗 口。 _parent:将链接的文档载入该链接所在框架的父框架或父窗口。如果包含链接的框架不是嵌套框架，则所链接的文档载入整个浏览器窗口。 _self:将链接的文档载入链接所在的同一框架或窗口。此目标是默认的，所以通常不需要指定它。 _top:将链接的文档载入整个浏览器窗口，从而删除所有框架。,注意：当页面上无框架时， _top、 _parent、 _self这几个选项的表现是一样的，都是在原来的窗口打开网页。,1、文字链接,方法: (1)选中文本，属性|链接文本框中直接输入网页路径 （2）选中文本，属性|指向链接按钮 （3）选中文本，属性|浏览文件按钮 （4）选中文本，常用|链接按钮 （5）“插入”菜单|超级链接,2、图像链接,方法：选中图片，方法同上。,3、使用图像地图,定义：一张地图，当单击图片中的不同区域时，分别打开不同的URL页面。,创建圆形热点 创建矩形热点 创建多边形热点 移动热点区域,4、内部链接与外部链接,内部链接：链接目标文件位于同一个站点内部，也称为相对地址链接。 外部链接：链接目标文件位于站点之外或直接位于Internet上，也成为绝对地址链接。,5、电子邮件链接,方法： （1）“插入”菜单|电子邮件链接 （2）常用|“插入电子邮件链接”按钮 （3）属性链接文本框中直接输入mailto:电子邮件名称,6、命名锚点链接,功能：常用于内容庞大繁琐的网页，快速重定向网页特定的位置，比如：快速到首页、尾页或者网页中某篇文章处，便于浏览者查看网页内容。 创建过程分为两步：创建命名锚记和链接到命名锚记。,（1）创建锚记 “插入”菜单|命名锚记 或者 “插入”面板|常用|命名锚记 （2）创建链接 相同页面的链接：#锚记名称 不同页面的链接：链接目标路径#锚记名称 (再讲),8、空链接,在链接文本框中输入：# 作用：自动将当前页面重置到页面的首端，即页面的开始处。,9、脚本链接,在链接文本框中直接输入： Javascript:后面跟一些Javascript代码或函数调用 Javascript:self.close( );,10、Dreaweaver3种链接路径,（1）绝对路径： 提供所链接文档的完整的URL （2）文档相对路径 省略掉对于当前文档和所链接的文档的都相同的绝对URL部分 （3）站点根目录相对路径 提供从站点的根文件夹到文档的路径,五、插入多媒体,1、插入音乐 方法一:超级链接到声音文件 方法二：嵌入声音文件到网页中 插入|媒体|插件,注意：用户浏览器端必须拥有辅助应用程序才能查看常见的视频格式， 如real player、QuickTime和Windows Media Player等。,2、添加背景音乐,（1）这种音乐多以MP3、MIDI文件为主 （2）选择“代码”视图，将光标定位在之后，输入下列代码： (3)如果希望循环播放： (4)保存文件，按F12预览该文件。,3、插入视频,方法一:超级链接到视频文件 方法二：嵌入视频文件到网页中 插入|媒体|插件 注意：用户浏览器端必须拥有辅助应用程序才能查看常见的视频格式， 如real player、QuickTime和Windows Media Player等。,4、插入Flash对象,（一）插入Flash动画 注意： 要确保Flash动画能够播放，必须在浏览器安装Flash播放器（ Flash player）,3种不同的Flash文件类型,（1）Flash文件（.fla） 所有项目的源文件，在Flash程序中创建。此类型的文件只能在Flash中打开（而不能在Dreamweaver或浏览器中打开）。可以在Flash中打开Flash文件，然后将它导出为SWF文件以在浏览器中使用。,（2） Flash SWF文件（.swf） 是Flash文件（.fla）文件的压缩版本，已进行了优化以便于在Web上查看。此文件可以在浏览器中播放并且可以在Dreamweaver中进行预览，但不能在Flash中编辑此文件。这是使用Flash按钮和Flash文本的对象时创建的文件类型。,（3） Flash模板文件（.swt） 能够修改和替换Flash SWF文件中的信息。这些文件用于Flash按钮对象中，使您能够用自己的文本或链接修改模板，以便创建要插入在您的文档中的自定义 SWF。,插入flash动画的具体步骤：,（1）先准备好flash文件。 方法一：插入|媒体|Flash; 方法二：常用|插入媒体按钮。,注意：在该窗口中，Flash文件不会显示，更不会播放，而是一个Flash占位符。,（2）在弹出的“选择文件”对话框中选择扩展名为.swf的Flash文件，即可将其插入到网页编辑窗口。,（3）单击该Flash占位符，可以在“属性”面板中进行参数设置，比如Flash动画是否循环播放，是否自动播放，画面品质，显示比例以及预览播放效果等。 （4）保存，预览。,（二）插入FLashPaper,方法一：插入|媒体|FlashPaper 方法二：常用|插入媒体按钮,（三）插入Flash视频FLV文件,方法一：插入|媒体|FLV 方法二：常用|插入媒体按钮,（4）插入水平线,页面上可以使用一条或者多条水平线来分隔文本和对象。 方法：插入|HTML|水平线 更改水平线的颜色： ,六、插入表格,1、创建表格,2、表格的属性 3、单元格的属性 4、添加及删除行和列 5、拆分与合并单元格 6、嵌套表格 7、表格的布局模式,七、创建框架页面,所谓框架，就是在浏览器窗口中把窗口分成几个小的窗口，这些小窗口之间用边框来分隔，每个小窗口可以显示不同的HTML页面，可以说每一个窗口都是一个小的浏览器，这样的每一个小窗口，就是框架。,（一）框架的创建,1、使用预制框架集 文件|新建|示例中的页，“常规”选项卡中选择“框架集”,2、新建一个普通的HTML文件； “布局”面板单击“框架”按钮，在弹出的下拉菜单中选择框架样式。,3、使用鼠标拖动框架边框创建框架 注意：显示“框架边框” 查看|可视化助理|框架边框,（二）保存框架,在浏览器中浏览框架页面，必须先保存框架集和框架文件。 在保存时，每一个框架都有一个框架名称，可以用默认的框架名称，如： topFrame(上方)、leftFrame(下-左侧)、main Frame(下-右侧)等，也可以在“属性”面板中修改为新名称来保存。 方法：文件|保存全部,(三)编辑框架,1、改变框架大小 用鼠标拖动框架边框即可 2、拆分和删除框架 拆分：修改|框架页，选择拆分方式 删除：将鼠标放在分隔窗口的框架线上，将其拖动即可。,3、选择框架 方法一：窗口|框架，打开“框架”面板 单击框架,4、设置框架和框架集的属性,边界宽度： 以像素为单位设置框架内容与左右边框之间的距离。 边界高度： 以像素为单位设置框架内容与上下边框之间的距离。,注意：,如果要设置框架集的标题，一定要选择框架集而不是单个框架，然后在工具栏的“标题”字段中，输入框架集文档的名称，这样，当访问者在浏览器中查看该框架集时，标题显示在浏览器的标题栏中。单个框架的标题只是该框架所引用网页的标题。,（四）框架中的超级链接,在框架式网页中制作超级链接时，一定要设置链接的目标属性，为链接的目标文档指定显示的窗口。 -blank、-parent、-self、-top、 mainFrame、leftFrame、topFrame,注意：,（1）框架是不可以合并的。 （2）在创建链接时要用到框架名称，所以要很清楚地知道每个框架对应的框架名。 （3）如果要链接到站点外的某一页面，使用target=“-top”,或target=“-blank”来确保该页面不会显示为此站点的一部分。,八、HTML的基本语法,HTML文件由元素（element）组成，组成HTML文件的元素有许多种， 每一种元素都有名称和可选择的属性，元素的名称和属性都在起始链接签内表明，比如体元素body: 这是个简单的页面 ,实际上，HTML文件仅由一个HTML元素组成，即文件以开始，以 结束，文件的其他部分都是HTML的元素体。 HTML元素的元素体由3部分组成，即头元素、体元素 和一些注释。 头元素和体元素的元素体又有其他的元素、文本、注释组成。 即，一个HTML文件应具有下面的结构：, 说明：HTML文件开始 说明：头元素开始 头元素体 说明：头元素结束 说明：体元素开始 体元素体 说明：体元素结束 说明：HTML文件结束,（一）HTML文件头元素,1、标题 your title 或者 your title ,2、控制 起控制作用。 元素一般放在容器中，容器前。例如： ,(二)版面风格控制,1、网页体 #ff0000是RGB颜色值，为16进制数，开始两位数字表示红色的深浅，中间两位表示绿色的深浅，末尾两位表示蓝色的深浅，00为最小值，ff为最大值。,2、字体 元素的属性有color（颜色）、size（字体大小）、face（字体格式）等， ,3、标题 标题元素共有6种，为h1、h2、h3、h4、h5、h6，用于表示文章中的各种题目，标题号越小，字体越大。 Hn可以设置对齐属性，如align=“left”, align=“center”, align=“right”,4、分段 网页浏览器是基于窗口的，用户可随时改变显示区域的大小，所以，文本分段完全依赖于分段元素,5、清单,（1）无序清单 用开始，清单中的每一个条目都用引导，结尾处不需要用标签, 无可奈何花落去 似曾相识燕归来 小园香径独徘徊 ,（2）有序清单 用开始，每一个条目也用引导。, 无可奈何花落去 似曾相识燕归来 小园香径独徘徊 ,（3）自定义清单 用开始，清单条目以为引导，说明用引导。, 无可奈何花落去 第一句 似曾相识燕归来 第二句 小园香径独徘徊 第三句 ,6、预排版,HTML文件的输出是基于窗口的，因而HTML文件在输出时都要重新排版，对于不需要重新排版或者重排版有碍于美观的，可以用，使之在输出时，对这一部分不做任何修改。, 无可奈何花落去 似曾相识燕归来 小园香径独徘徊 ,7、表格, 说明：指定一行 cellpadding，是指单元格内文字