《网站外观设计与内容编辑详述》由会员分享，可在线阅读，更多相关《网站外观设计与内容编辑详述（102页珍藏版）》请在金锄头文库上搜索。
1、01 05 2020 1 第3章网站外观设计和内容编辑 河北科技大学经济管理学院袁再健 01 05 2020 2 通过本章的学习 主要掌握以下知识点 Dreamweaver简介站点的规划与设计站点的管理网页编辑与超连接网页定位技术层叠样式 模板与库表单与应用 01 05 2020 3 3 1DreamweaverMX简介 DreamweaverMX是Macromedia公司最新发布的集网页设计 代码开发 网站创建和管理于一体的软件 DreamweaverMX不仅可以轻松设计网站前台的页面 而且也可以方便地实现网站后台的各种复杂功能 01 05 2020 4 启动DreamweaverMX后 屏
2、幕显示的是工作区窗口 此时系统打开一个名为Untitled的空白文档 在网页文件编辑区中 设计者可以完成网页的设计 工作区窗口各部分功能如下所述 DreamweaverMX的工作环境 01 05 2020 5 标题栏菜单栏文档工具栏网页文件编辑区状态栏浮动面板和浮动面板组 插入 面板 属性 面板 01 05 2020 6 3 2站点的规划与设计 1 创建具有浏览器兼容性的站点2 站点结构的组织3 创建设计外观4 设计导航方案5 规划和收集资源 01 05 2020 7 创建网站一般有以下几个步骤 1 规划站点 了解建站的目的 收集各种有关的资料 确定站点的主题 风格 网站要提供的服务和网页要表
3、达的主要内容 2 创建站点的基本结构 在计算机中创建本地站点的根文件夹以及存放各种资料的子文件夹 配置好所有系统的参数和站点测试路径 3 网页设计 充分利用收集到的数据资料 合理地运用DreamweaverMX提供的技术 最完美地设计出能表达网站中心思想的Web页面 01 05 2020 8 规划站点 Dreamweaver站点 和 Internetweb站点 不完全相同 Dreamweaver站点 是在Dreamweaver制作网页的过程中所使用的术语 是定义一个站点名称 存放文件的文件夹 使用的Web服务器和应用服务器技术等 InternetWeb站点 则是把已经成功的网站内容放到Inte
4、rnet或Intranet的web服务器上供用户浏览 即运行系统的web服务器上的站点 网站的发布过程就是将Dreamweaver站点变成InternetWeb站点的过程 01 05 2020 9 有两种 一是使用 站点定义向导 这可以根据提示逐步完成设置过程 二是使用 高级 设置 可以根据需要分别设置本地 远程和测试文件夹 设置Dreamweaver站点的方法 01 05 2020 10 3 2 1编辑站点 1 选择菜单栏中的 站点 编辑站点 出现 站点管理 对话框 在对话框中可以定义多个站点 新建站点操作如下 1 单击 新建 站点 出现站点定义对话框2 单击 基本 选项卡以使用站点定义向导
5、 或者单击 高级 选项卡以使用 高级 设置 01 05 2020 11 建站过程中要注意一点 所有站点名称和素材名称只能用英文 不能用中文 因为DreamweaverMX对中文的解析不是很好 如果用中文会出现解析问题 01 05 2020 12 编辑站点对话框 01 05 2020 13 站点定义 01 05 2020 14 3 2 2设置本地文件夹 1 在 站点定义 对话框中选择 高级 选项卡和 本地信息 类别选项 2 输入 站点名称 如mysite 3 输入 本地根文件夹 或者单击文件夹图标以选择或新建一个本地文件夹 如D xwx11 4 如果选中 自动刷新本地文件列表 选项 则当每次复制
6、文件到本地文件夹时 系统将自动刷新本地文件列表 如果不选中此项 则可以在站点面板中手动刷新 5 在 默认图像文件夹 中确定存放图像的默认文件夹 一般是根目录下的 Images 6 在 HTTP地址 文本框中 输入Web站点将使用的URL 这使Dreamweaver能够验证站点中使用绝对URL的链接 7 启用缓存 选项 指定是否创建本地缓存以提高链接和站点管理任务的速度 01 05 2020 15 完成后的本地文件夹对话框 01 05 2020 16 3 2 3设置远程文件夹1 在站点定义对话框中选择 高级 选项卡的 远程信息 分类选项2 选择一个 访问 选项 本地 网络 3 确定一个 远程文件
7、夹 4 自动刷新远程文件列表 复选框 5 保存时自动将文件上传到服务器 复选框 6 启用文件存回和取出 7 单击 确定 按钮 01 05 2020 17 定义远程站点对话框 01 05 2020 18 3 2 4用FTP连接到Web服务器 1 输入FTP主机名 2 输入远程站点的主目录名 3 输入连接FTP服务器的登录名和密码 4 如果你的防火墙配置要求被动FTP 则选择 UsePassiveFTP 5 使用防火墙选项 6 在windows中使用安全FTP选择FTP来访问远程文件夹时 在Windows中可以选择使用SSH安全登录检查框以自动继续FTP的安全检查 7 其它选项与 本地 网络 中相
8、同 8 单击 确定 按钮 01 05 2020 19 使用ftp连接时的远程站点定义对话框 01 05 2020 20 1 在 站点定义 对话框中选择 高级 选项卡 然后从 类别 列表中选择 测试服务器 2 服务器模型3 访问方式有 无 FTP 和 Local Network 三种 4 测试服务器5 自动刷新远程文件列表选项6 URL前缀7 单击 确定 按钮 3 2 5设置测试服务器 01 05 2020 21 测试服务器定义对话框 01 05 2020 22 应用服务器技术列表 01 05 2020 23 3 3 1 文件 面板1 使用 文件 面板2 设置 文件 面板参数3 设置 文件视图列
9、 4 在 文件 面板中查看站点 3 3管理站点文件 01 05 2020 24 展开的文件面板 01 05 2020 25 折叠的文件面板 01 05 2020 26 站点面板工具栏 01 05 2020 27 站点首选参数对话框 01 05 2020 28 站点面板的文件列表 01 05 2020 29 站点定义中的 文件视图列 选项 01 05 2020 30 3 3 2站点地图 站点地图仅适用于本地站点 若要创建远程站点的地图 需将远程站点的内容复制到本地磁盘上的一个文件夹中 然后使用 编辑站点 命令将该站点定义为本地站点 01 05 2020 31 1 设置站点1 选择 站点 编辑站点
10、 出现 编辑站点 对话框 2 选择一个 站点 并单击 编辑 按钮 出现 站点定义 对话框 3 从左侧的 分类 列表中选择 站点地图布局 站点定义 对话框即可显示 站点地图布局 选项4 单击文件夹图标以通过浏览查找站点的主页 01 05 2020 32 5 在 列数 文本框中 键入一个数字以设置在站点地图窗口中每行要显示的页数 6 在 列宽 文本框中 键入一个数字以设置站点地图列的宽度 7 在 图标标签 下 选择在站点地图中与文档图标一起显示的名称表示为文件名还是页标题 8 在 选项 下 选择要在站点地图中显示的文件 9 单击 确认 按钮 01 05 2020 33 站点地图布局对话框 01 0
11、5 2020 34 站点地图例图 01 05 2020 35 2 站点地图 站点地图的显示规则如下 1 以红色显示的文本指示断开的链接 2 以蓝色显示并标有地球图标的文本 指示其它站点上的文件或特殊链接 3 绿色选中标记指示你已取出的文件 4 红色选中标记指示他人取出的文件 5 锁形图标指示只读或锁定的文件 01 05 2020 36 若要在站点地图中打开某页进行编辑 可执行以下操作之一 1 双击该文件 2 选择该文件 然后选择 文件 打开 或 站点 打开 01 05 2020 37 3 3 3从站点列表中删除站点 1 选择 站点 编辑站点 出现 编辑站点 对话框 2 选择一个站点名称 3 单
12、击 删除 按钮 出现一个对话框 要求确认删除 如图3 16所示 4 单击 是 从列表中删除站点 或单击 NO 保留站点名称 5 单击 完成 关闭 编辑站点 对话框 01 05 2020 38 确认删除站点对话框 01 05 2020 39 3 3 4获取和上传文件 1 从远程或测试服务器或取文件 1 在 文件 面板上 从 站点 弹出式菜单中选择一个 站点 2 如果在使用FTP传输文件 请单击 连接 按钮打开于远程服务器的连接 如果可以在前以链接的 远程 窗格中看到远程文件 则无需单击 连接 当单击 获取 时 Dreamweaver会自动连接 01 05 2020 40 3 选择所需文件进行下载
13、 通常在 远程视图 或 测试服务器 视图中选择这些文件 也可以在 本地视图 中选择相应的文件 4 单击 文件 面板工具栏上的 获取 按钮 或者选择 站点 获取 如果文件当前已在文档窗口中打开 则可以从文档窗口中选择 站点 获取 出现一个对话框 询问是否要获取相应文件 5 若要下载相关文件 则单击 是 否则单击 否 按钮 01 05 2020 41 3 3 5同步本地和远程站点上的文件 1 在 文件 面板上选择一个站点 2 选择要上传的文件 通常在 本地 视图中选择这些文件 也可以在 远程 视图中选择相应的文件 3 单击 文件 面板工具栏上的 上传 按钮 如果文件当前已经在文档窗口中打开 则可以
14、从文档窗口种选择 站点 上传 命令 4 若要上传相关文件 则单击 是 否则单击 否 按钮 01 05 2020 42 确认获取相关文件对话框 01 05 2020 43 如果远程站点为ftp服务器 则使用ftp来同步文件 其操作如下 1 在 文件 面板中 从 当前站点 列表弹出式菜单中选择一个站点 2 选择特定的文件或文件夹 如果要同步整个站点 则跳过此步骤 3 从上下菜单中选择 同步 出现 同步文件 对话框 4 完成该对话框 01 05 2020 44 3 4网页编辑与超链接 DreamweaverMX文字格式化主要有4种方式 1 手工格式化方式是在文本 属性 面板中完成文字的格式化操作 2
15、 用HTML标记格式化方式是用系统提供的HTML标记来格式化文本 3 用HTML样式来格式化文本的方式 4 CSS样式是一种对网页文档内容进行精确格式化的方法 它可以使用许多HTML样式不能使用的属性 3 4 1网页文档的格式化 01 05 2020 45 3 4 2网页编辑的基本操作 3 4 2 1在网页中插入各种元素1 插入水平线2 插入日期3 插入Flash按钮和Flash文字4 插入JavaApplet程序5 插入ActiveX控件6 插入第三方插件 01 05 2020 46 3 4 2 2文本的查找和替换 3 4 2 3文本的拼写检查 3 4 2 4建立网站相册3 4 2 5利用外
16、部编辑器编辑图像3 4 2 6创建鼠标经过图像 01 05 2020 47 3 4 3创建超链接 3 4 3 1超链接概述超链接是用准备好的文本 按钮 图像等对象与其他对象建立链接 也就是在源端点和目标端点之间建立一种链接 源端点是超链接的起始端点 目标端点是链接的对象 也称为目标锚 超链接按源端点的链接划分 分为超文本链接和非超文本链接两类 01 05 2020 48 3 4 3创建超链接 3 4 3 2创建超链接的方法 5种 3 4 3 3在站点管理器中编辑超链接3 4 3 4创建锚点链接3 4 3 5创建电子邮件链接3 4 3 6创建导航条3 4 3 7创建跳转菜单3 4 3 8创建映射图链接 01 05 2020 49 3 5网页的定位技术 3 5 1创建表格的基本操作3 5 2表格的编辑与格式化3 5 3外部数据导入和表格排序3 5 4布局表格和布局单元格3 5 5层的创建和基本操作3 5 6层的属性设置1003 5 7层与表格互换3 5 8层的应用实例3 5 9框架的基本操作3 5 10框架和框架集的选择与属性设置3 5 11框架和框架集的保存3 5 12框架应用实例 01
