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