网页制作第三章.pptVIP

Event Name Here BEA Confidential 网 页 制 作 第三章 Dreamweaver 网页设计 学习目标 什么是Dreamweaver? 了解Dreamweaver的工作界面 在Dreamweaver中如何创建和管理站点？ Dreamweaver 一款用于设计、开发网站和 Web 应用程序的专业HTML 编辑器 用户可以选择使用布局单元格或框架来设计页面的布局 可用于创建文本、插入动态图像、提供网页超链接、创建 Flash 文本和 Flash 按钮等 可用于组合由某些软件（如 Photoshop、Firework 等）制作的图形、动画和按钮 Dreamweaver 基本概念 静态网页：只能浏览，不能实现客户端和服务器端的交流互动 动态网页：随用户的输入而变化，能与客户端交流互动的网站页面 本地站点：一个在本地计算机上，存储网站所有文件的临时文件夹 远程站点：位于远程Web 服务器上存储网站所有文件的临时文件夹，与本地站点相对应 根文件夹：用于存储网站文件的本地根目录 Dreamweaver 工作区 Dreamweaver 提供两种工作区布局供选择： 设计者 代码编写者 Dreamweaver 工作区 Dreamweaver提供了一个集成所有面板和窗口的集成工作区 常用工具栏 常用工具栏中的按钮可用于将对象（如表格、图层和图形等）轻松插入 HTML 页面中 “常用”选项卡中的按钮可用于插入最常用的对象，如链接、表格、图像、水平线等 属性面板 编辑当前选择的页面元素属性 浮动面板 组合常用功能、方便用户操作 面板组 组合在一组标题下的多组相关面板 例如， “文件”面板包含以下两个组 文件 资源 创建站点 规划站点结构 规划站点结构是将网站文件分类存放在相应文件夹中以便于设计者管理。合理地组织站点结构，可提高工作效率，加快对站点的设计 根据站点规划，绘制网站结构草图 创建站点 步骤： 选择新建站点，然后为其命名 选择服务器技术（如果适用） 选择在本地计算机上编辑副本的选项 选择用于存储网站文件的文件夹 选择连接到远程服务器的选项 新建站点 通过[站点]?[新建站点]菜单命令新建站点 通过“文件”面板新建站点 新建站点 新建文件夹 建立站点后就可在站点中新建文件夹，该文件夹主要用来存储这个网站中用到的网页元素，如图片、音乐等。 管理本地站点 编辑本地站点 选择本地站点 删除站点中的文件和文件夹 更改站点信息 删除本地站点 管理站点地图 定义主页 使用站点地图时，必须保证该站点已定义了主页，因为主页是站点的根节点，必须有根节点才能存在各个子页 查看站点地图 在Dreamweaver “文件”面板的“视图”下拉列表框中选择“地图视图”选项进行查看 在站点地图中管理页面文件 选择页面文件 打开页面文件 更改页面标题 新建页面文件 页面设置 站点建好后，还需对页面进行一些简单的属性设置以方便以后的工作（修改－页面属性） 总 结 Dreamweaver是一种功能强大的网页编辑工具，可在所见即所得环境中灵活地制作网页 Dreamweaver可在设计网页时在其中插入文本、图像、动画、音频、视频和 Java Applet 等对象 在Dreamweaver 工作区中，所有面板、工具栏和文档窗口都集成在一个程序窗口中，类似于大多数基于 Windows 的程序 定义站点是设计网站的第一步，在此将定义站点的根文件夹、服务器和站点名称 上机实战 创建一个名为“国画欣赏”的站点，要求： 将站点保存在“D:\guohua”文件夹下 为该站点建立一个存放图片的文件夹“pic” 在站点中新建名为“index.html”、“ghzs.html”、“jrmh.html”、“ghds.html”、“flxs.html”、“ghlt.html”和“lxwm.html”的网页文件，并建立它们之间的连接关系 设置“index.html”的相关页面属性。 Dreamweaver中为网页添加文本和图像 课堂讲解 新建网页文档 插入文本 格式化文本 插入图像 插入表格 标尺和网格 超级链接 导航条 新建网页文档 -1 在Dreamweaver中创建新网页，可使用起始页或“文件”菜单 新建网页文档 -2 插入文本 在文档中插入文本，可使用以下方式： 在网页中直接键入文本 从其他应用程序（如 MS-Word、记事本等）复制并粘贴文本 将 Word 文档导入 Dreamweaver 插入特殊符号 无法通过键盘直接输入的特殊字符，可通过“插入特殊字符”进行插入 插入水平线 插入时间日期 格式化文本 设置字体 设置字体大小 设置字体颜色 设置字体样式 插入图像-1 图像格式 GIF(Gra