网页设计与制作06.ppt

Dreamweaver 8 （一） 教学目的 启动Dreamweaver 8 熟悉Dreamweaver 8操作界面 学会建立站点 网页属性的设置 文本、图像、超链接、水平线的使用 Dreamweaver 8简介 Dreamweaver的字面意思为“梦幻编织者”，是Macromedia公司推出的可视化网页制作工具。 相比较而言，比Frontpage显得更为专业。 网页三剑客 所见即所得 HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器），两者各有千秋。 所见则所得网页编辑器的优点就是直观性，使用方便，容易上手，您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点  所见即所得 一、难以精确达到与浏览器完全一致的显示效果。也就是说您在所见即所得网页编辑器中制作的网页放到浏览器中是很难完全达到您真正想要的效果，这一点在结构复杂一些的网页（如分帧结构、动态网页结构）中便可以体现出来； ?? 所见即所得 二、 页面原始代码的难以控制性，比如您在所见即所得编辑器中制作一张表格也要几分钟，但您要它完全符合您要求可能需要几十分钟，甚至更多时间。 而相比之下，非所见则所得的网页编辑器，就不存在这个问题，因为所有的HTML代码 都在您的监控下产生，但是由于非所见则所得编辑器的先天条件就注定了它的工作低效率。 如何实现两者的完美结合，则既产生干净、准确的HTML代码，又具备则见则所得的 高效率、直观性，一直是网页设计师梦想。 Dreamweaver 8的工作环境 参数选择 “编辑”?“首选参数” 工作界面 菜单栏 工具栏 文档窗口 可停靠浮动面板 插入面板 属性面板 状态栏 菜单栏 所有的编辑工作都可以通过菜单栏里的命令来完成。 单击F4键关闭所有浮动面板，再单击F4又可以打开。 利用“窗口”菜单，可以控制各种浮动窗口和面板的开启和关闭。 工具栏 菜单“查看”?“工具栏” ?“标准”或“文档” 文档窗口 设计视图 代码视图 设计视图和代码视图 插入面板 插入面板也是一个浮动的面板，包含以下几个面板：“常用”、“布局”、“文本”等。 也可以选择菜单“插入/……”来插入对象。 可停靠浮动面板（面板组） 打开/折叠按钮 抓取按钮 状态栏 可以通过单击状态栏上的HTML标签来选取对象，故又称“选择状态栏”。 站点 “站点”可以简单地理解为文件夹，编辑的网页、图片、音乐等都放在这个文件夹里。 建立站点 选择菜单“站点/新建站点”； 为网站取名，如“音乐空间”； 建立一个静态站点，无需服务器； 选择站点存放的路径； “无”链接到远程服务器； 完成。 管理站点 新建文件或文件夹 删除文件或文件夹 编辑文件 注意事项 建立有意义的文件夹对资源文件进行分门别类的管理 使用英文名称（小写) 删除站点只是删除了本地相关文件和站点的联系，文件仍然是存在的。 建立完站点结构后，准备工作基本完成，可以继续index.html首页的创建。双击站点面板中的index.html ，我们要为这个页面进行简单的图文混排设计。 页面属性设置 “修改”?“页面属性” 设置标题 设置背景图像 设置背景颜色、字体颜色 设置链接文本颜色 设置左边界和顶部边界（一般设为“0”） 跟踪图像 插入面板中的布局视图，下面以滁州学院的主页为例，介绍跟踪图像的使用方法。 使用截图软件，截取主页图片。 使用Dreamweaver的跟踪图像功能，导入主页图片。 打开“插入”面板中的“布局”，采用“布局视图”，可以绘制布局表格和绘制布局单元格。 基本文字页面 直接在编辑窗口中插入文字。 选中网页中的文字，在下面的属性面板中设定字体、字号、颜色及排列方式等。 插入标题和文本 如书中的例子：图3-19 设置文本标题级、文本字体、字体大小、文本颜色。 文本对齐 插入水平线 创建项目列表和缩进文本。 滚动文字 操作步骤如下： 在网页中插入表格，设置背景颜色和边框颜色； 在表格中插入文字信息，如“新闻消息”等； 打开“设计”视图，在td标签后输入marquee； 设置的marquee属性behavior，direction,onmouseover,onmouseout等。 列表 有序列表 无序列表 文本缩进 列表序号 图文混排的页面 插入图像 图像的基本属性：尺寸、对齐方式、边框、说明文字等。 图像与文本的排列 插入鼠标经过图像 图像文字的混排 插入图像 图像与文本的排列 插入翻转图像效果 插入－交互式图像－鼠标经过图像 创建导航按钮效果 插入－交互式图像－导航条 创建图像热区 创建网页相册集 命令－创建网页相册 建立网页链接