Dreamweaver MX网页设计与制作 作者 曾立 第1章.pptVIP

Dreamweaver网页设计和制作 第1章 网页制作基础知识 第1章 站点规划 1.1 Dreamweaver MX简介 1.2 定义站点 1.3 实用文本 1.4 实用图像 1.5 设置超级链接 简介 Dreamweaver是美国Macromedia公司开发的集网页制作和网站设计于一体的所见即所得站点开发工具。 供专业网页设计人员使用 最新版本 本章任务 安装软件 认识窗口结构 标尺和网格的使用 工作区的设置 历史的使用 规划站点 选择和建立Web服务器 站点的创建和管理 文档的管理 命令的自动化 1.1 概述 三剑客：DW＋FW＋FL 可开发ASP、JSP等动态网页 1.2 规划网站 创建网站的第一步： 明确建站的目的 确定所面向的用户 提供的核心服务 设计网站的整体架构、链接关系 网站整体风格设计：色彩、布局等 注：凡事预则立，不预则废 网站主题 网站主题是站点设计的灵魂 主题应明确、服务应专而精、不应盲目追求大而全：如Google、Baidu 创建本地站点 创建站点：演示 编辑站点 复制站点 删除站点 导入站点 导出站点 站点地图 以树形结构图方式显示站点中的各网页文件间的链接关系，直观表现整个站点结构 操作： 显示站点地图 改变显示区域 设置站点地图 上机作业要求 在本机上建立文件夹： 命名规则：日期+班级+学号 如：200701013001 每次作业应上交到指定位置 1.3 使用文本 网页包括了很多的元素，文本无疑是最基本最常用的元素。文本产生的信息量大，输入、编辑都很方便，并且占用空间小，不会占用太多的等待浏览时间。学习网页设计应该从最基本的文本处理开始，。 【案例1.2】文本的操作 实例描述 制作关键 最终效果 最终效果 操作步骤如下 按照要求建立站点 输入文本 调整文本格式 插入文本 直接插入文本 插入日期（储存时自动更新） 插入特殊字符 换行符（Shift+Enter） 分段（Enter） 空格（在代码中输入nbsp） 空格：Ctrl+Shift+空格 水平线 水平线对于信息的组织很有用。在页面上，可以使用一条或多条水平线以可视方式分隔文本和对象。 创建水平线 修改水平线 调整文本格式 文本字体 文本格式、样式 项目列表、编号列表 设置对齐 CSS样式（通过设置行距引入） CSS即层叠样式表，在网页设计中应用相当广泛。可以设置页面显示相关的属性，如字体和表格等页面元素的大小、颜色、边框等。 CSS样式 创建CSS样式 使用CSS样式 管理CSS样式 上机指导 准备素材 创建网站 设计网页 预览 1.4 使用图像 网页中只有文字是很单调的，如果在网页中插入适合的图像，就能很形象的传递出网站的风格和主题，使网页图文并茂，一下生动、直观起来。 在网页中使用的图像有几点需要注意： 要与主题相合。 颜色搭配要适当。 能兼顾美观和文件量小。 图像格式最好采用Gif、Jpg、Png三种图像格式。 【案例1.3】图像的操作 实例描述 制作关键 最终效果 最终效果 基础知识 网页支持的图像格式及图像的来源。 插入图像的方法、图像属性设置的方法、网站相册的制作。读者应结合上机实战认真练习。 操作步骤如下 建立站点 插入图像 设置图像格式 导入文字 设置文字格式 美化整个网页 插入图像 直接插入图像 用占位符插入图像 设置图像的一般属性 图像的宽和高 图像“替代” 图像边框的使用 图像对齐方式 给图像加入链接 普通链接 热点工具添加链接 图像高级设置 鼠标经过图像设置 导航条的创建 插入Fireworks HTML对象 上机指导 设计如右图的网页 准备素材 创建网站 设计网页 预览 1.5 设置超级链接 Internet的核心是超链接，它将各种资源链接起来，方便我们寻找和使用。网络中的一各个网页是通过超链接的形式联系在一起的。超链接是网页区别于其他形式媒体的最重要的特征，有可它，网页就可以产生动态和交互性效果，访问者就可以在Web的世界中畅游，享受网上冲浪的感觉。 万维网（World Wide Web） 万维网简称WWW或3W，是目前Internet（因特网）上最流行的一种基于超文本形式的资源信息。万维网的最大好处是它将全世界的各种信息链接在一起，用户可通过网络无偿地访问这些资源并加以利用。 浏览器 要想访问网络中的各种资源，还需要一个工具，那就是浏览器，否则无法访问到网络中丰富的资源。通过浏览器可以充分共享网络上的各种免费的资源。目前使用最广泛的是基于微软视窗平台的浏览器，主要有以下两类。 统一资源定位器（Universal Resource Locator） 要统一资源定位器简称URL，是用来指出某项信息的位置及存取方式，以取得各种服务信息的一种标准方法。简单地说，