网页设计第二章重点解析.ppt

第二章使用Dreamweaver制作基本网页 基本网页制作 Dreamweaver CS3的安装 Dreamweaver CS3用户界面 在网页中使用文本 在网页中使用图像 在网页中创建超链接 在网页中使用多媒体元素 Dreamweaver CS3的安装 Dreamweaver CS3 的用户界面 主要有标题栏、菜单栏、插入栏、文档工具栏、属性面板和浮动面板组等部分组成 视图模式 【设计】视图 : 完全可编辑的可视化表示形式 视图模式 【代码】视图 : 用于编写和编辑 HTML、JavaScript服务器语言代码 本地站点的创建 在动手制作网页之前，都应该按照先前的网站规划建立一个本地站点，以便对各种资源进行管理 。 【站点】/【新建站点】命令 管理站点 在菜单栏中，选择【站点】/【管理站点】命令，打开【管理站点】对话框 在网页中使用文本 Dreamweaver CS3中插入文本的方法有两种： 1、直接在文档窗口，将鼠标光标定位在需要添加文本的位置输入即可。 2、复制其它文字处理程序中的现有文本，然后到网页文档中粘贴即可。 同时也可以使用【属性】面板中的栏，像WORD中一样为输入的文本设置粗体和斜体的样式，以及段落对齐方式。 列表的使用 列表可以将具有相似特性或某种顺序的文本进行排列，列表常用在列举等类型的文本中，通过列表可以使信息的层次关系更明确 列表的HTML代码 CSS样式格式化文本 用户使用【CSS】样式面板可以创建CSS样式，查看CSS样式属性以及将CSS样式应用于当前文档中 在网页中使用图像 在Dreamweaver CS3中插入图像的方法主要有直接插入图像和使用占位符插入图像两种。 将图像插入网页文档时，为了确保引用的正确性，通常需要将该图像文件保存在当前的站点中。如果图像文件不在当前站点中，Dreamweaver CS3会询问是否要将此文件复制到当前站点中。 图像占位符 在网页制作时如果还没有找到合适的图像文件时，可先插入图像占位符留一个位置，等确定后再在此位置插入图像。 图文混排的对齐方式 图文混排就是指图像和文字在网页中的对齐方式。可以通过图像【属性】面板中的【对齐】下拉列表进行设置。 img标签属性 在网页中创建超链接 路径一般有下面3种。 1、绝对路径 绝对路径提供完全的路径，主要用于创建外部链接。创建此类链接时目标端点必须是完整的URL地址，如/index.asp。当链接到其它网站中的文件时必须用绝对路径。 2、相对路径 相对路径适用于网站内部链接，它利用的是构建链接的两个文件之间的相对关系，不受站点文件夹所在的服务器地址的影响。书写时省略了绝对地址中的相同部分。 3、根路径 根路径是以“\”开始，接着写文件夹名，如“\zsm\index.htm”。根路径只能由服务器来解释。当站点规模非常大，在一个服务器上同时放置几个站点时需用到根目录相对地址。 设置文字超链接 可以直接拖拽【属性】面板中的【指向文件】按钮，指向要链接的文件 创建图像超链接 同一张图像上创建多个热点区域，然后分别为这些区域设置链接的目标端点。客户通过单击图像中的不同区域，从而链接到不同的页面和网址。 超链接标记属性 链接在网页中的标记其实很简单，只有一个即A标记。被a……/a标签括起来的部分就充当超级链接的载体，可以是图片也可以是文字。a标签相关属性如下. 超链接属性的设置 利用CSS层叠样式可以使网页中的超级链接具有更丰富的色彩，更加个性化。 a:link：超链接还没被访问时的状态。　　 a:visited：超链接被访问后的状态。 a:hover：鼠标移动到的超级链接 文本上的状态。 a:active：超级链接处于活动状态。　 制作多媒体动态网页 添加音乐 添加Flash动画 网页中插入视频 其它网页动态特效 添加背景音乐 1、选择“插入记录”/“标签”命令，打开【标签选择器】对话框。 2、选择“HTML标签”/“页元素”，在右边窗口中选中“bgsond”元素 3、单击【插入】打开【标签编辑器】对话框 插入Flash动画 单击【常用】插入栏中的媒体按钮，在弹出的下拉列表菜单中选择Flash。接着在打开【选择文件】对话框中选择要插入的swf文件 滚动字幕效果的公告栏 Marquee的功能可使文字或图片产生移效果。Marquee有几个重要属性。 Behavior滚动方式：scroll轮回滚动；altemate滚动一次 Direction移动方向：le