网页设计与制作 Dreamweaver CS6 标准教程
本章学习的主要内容: 1. Dreamweaver CS6工作界面 2. 创建网站站点 3. 管理站点 4. 网页文档头部信息设置
2.1 Dreamweaver CS6工作界面 Adobe Dreamweaver CS6是一款集网页设计、 制作和管理网站于一身的可视化网页编辑软件, 它保留了Dreamweaver早期版本的各种优点, 不仅可以轻松设计网站的前台页面,也可以方 便地实现网站后台各种复杂功能。
2.1 Dreamweaver CS6工作界面 2.1.1 开始页面 2.1.2 工作环境 2.1.3 工作区布局 2.1.4 多文档的编辑界面
2.1.1 开始页面 Dreamweaver CS6启动后,默认情况下会显示 开始页面,用户可以在开始页面中打开已有文档 或新建文档。勾选开始页面底部【不再显示】, 下次启动Dreamweaver CS6时将不会显示开始 页面。 选择菜单【编辑】|【首选参数】,在【首选参数】 对话框中勾选【显示欢迎屏幕】,单击【确定】 按钮,在下次启动时重新显示开始页面。
2.1.2 工作环境 Dreamweaver CS6的工作环境由菜单栏、文 档工具栏、文档窗口、状态栏、属性面板(或 属性检查器)和浮动面板组等部分组成。
2.1.3 工作区布局 Dreamweaver CS6为用户提供了多种工作区 布局,用户可以根据需要设定工作区环境,也 可以新建工作区布局,并对它进行管理和删除 操作。 选择菜单【窗口】|【工作区布局】,在子菜 单中选择一种工作区布局。
2.1.4 多文档的编辑界面 Dreamweaver CS6提供了多文档的编辑界面,将多 个文档集中到一个窗口中,用户可以单击文档编辑窗 口上方选项卡的文件名切换到相应的文档,还可以按 住鼠标左键拖动选项卡改变文档的顺序。
2.2 创建网站站点 站点是存放一个网站所有文件的场所,由若干文 件和文件夹组成。用户在开发网站前必须先建立 站点,便于组织和管理网站文件。
2.2 CSS样式控制面板 2.2.1 创建新站点 2.2.2 新建和保存网页 2.2.3 管理站点文件和文件夹 2.2.4 课堂案例—慈善救助中心
2.2.1 创建新站点 站点按站点文件夹所在位置分为两类:本地站点 和远程站点。 本地站点是指本地计算机上的一组文件,远程站 点是远程WEB服务器上的一组文件。 创建本地站点首先要在本地硬盘上新建一个文件 夹或者选择一个已经存在的文件夹作为站点文件 夹,那么这个文件夹就是本地站点的根文件夹。
2.2.1 创建新站点 创建本地站点的操作步骤如下。 选择菜单【站点】|【新建站点】,或选择【管理站点】 并在【管理站点】对话框中单击【新建】按钮,打开 【站点设置对象】对话框,在左边选择【站点】,在右 侧输入站点名称和本地站点文件夹路径。 单击左侧【高级设置】,展开其他选项,选择【本地 信息】,在右侧设置相应的属性。 其他项可以根据需要设置,设置完毕后单击【保存】 按钮。在【文件】面板中可以看到新建的本地站点。
2.2.2 新建和保存网页 1.新建网页文档 选择菜单【文件】|【新建】,打开【新建文档】 对话框,在左侧选择【空白页】,在【页面类型】 中选择【HTML】,在【布局】中选择【无】。 单击【创建】按钮就可以创建网页文档。 2.保存网页文档 保存网页文档有如下两种方法。 (1)选择菜单【文件】|【保存】或【全部保 存】。在【另存为】对话框的【文件名】文本框 中输入网页的名称,单击【保存】按钮完成保存。 (2)按<Ctrl+S>快捷键保存网页文档。
2.2.3 管理站点文件和文件夹 1. 创建文件和文件夹 2.重命名文件和文件夹 3.移动文件和文件夹 4.删除文件或文件夹
2.2.4 课堂案例—慈善救助中心 案例学习目标:学习创建站点、管理站点文件 和文件夹的方法。 案例知识要点:使用【站点】|【新建站点】 创建站点,在【文件】面板中移动文件、重命 名文件。 素材所在位置:光盘/案例素材/ch02/课堂案 例-慈善救助中心。 案例效果如图2-17所示。
2.3 管理站点 建立站点以后,可以对站点进行打开、编辑、 复制和删除等各种操作。
2.3 管理站点 2.3.1打开站点 2.3.2编辑站点 2.3.3复制站点 2.3.4删除站点
2.3.1 打开站点 Dreamweaver允许建立多个站点,并可以通 过切换打开需要编辑的站点。打开站点的操作 步骤如下。 选择菜单【窗口】|【文件】或按<F8>键打 开【文件】面板,单击左边的下拉框,在下拉 列表中选择要打开的站点。 打开站点后,在【本地文件】下显示该站点 内的所有文件和文件夹。
2.3.2 编辑站点 编辑站点可以重新设置站点的一些属性,操作 步骤如下。 选择菜单【站点】|【管理站点】,打开【管 理站点】对话框,选择要编辑的站点名称,如 webtest,单击编辑按钮图标 。 打开【站点设置对象webtest】对话框。经 过对各种设置修改后,单击【保存】按钮,返 回【管理站点】对话框。
2.3.3 复制站点 复制站点可以建立多个结构相同的站点,让这 些站点保持一定的相似性,可以提高工作效率。 复制站点的操作步骤如下。 选择菜单【站点】|【管理站点】,打开【管 理站点】对话框,选择要复制的站点名称,如 webtest,单击【复制】按钮。这时在左边的 站点列表中会出现一个新的复制站点,名称为 “webtest复制”。 复制的站点和原站点默认使用同一个文件夹, 选择复制的站点,对其各种设置进行编辑操作。
2.3.4 删除站点 在Dreamweaver中删除站点,只是删除了 Dreamweaver同本地站点之间的关系。本地 站点中的文件夹和文件,仍然保存在硬盘原来 的位置上,没有被删除,也没有任何改变。 删除站点的操作步骤如下。 选择菜单【站点】|【管理站点】,打开【管 理站点】对话框,选择要删除的站点名称,单 击【删除】按钮。 在打开的【Dreamweaver】对话框中单击 【是】按钮,选中的站点就被删除,
2.4 网页文档头部信息设置 2.4.1 插入搜索关键字 2.4.2 设置描述信息 2.4.3 插入版权信息 2.4.4 设置刷新时间
2.4.1 插入搜索关键字 插入搜索关键字可以通过以下两种方法完成。 1.在代码视图中插入关键字 在【文档】窗口中切换到代码视图,将光标置于 <head>…</head>标签中。 选择菜单【插入】|【HTML】|【文件头标签】|【关键 字】,打开【关键字】对话框,输入关键字,如“礼品,节 日礼品”,多个关键字用英文逗号分隔。 单击【确定】按钮完成设置,在代码视图下可以看到 <head>标签内新增了如下代码: <meta name="keywords" content="礼品,节日礼品" />
2.4.1 插入搜索关键字 2.使用META对话框插入关键字 选择菜单【插入】|【HTML】|【文件头标签】 |【META】,打开【META】对话框,在【值】 文本框中输入keywords,在【内容】文本框中 输入关键字,多个关键字用英文逗号隔开。 单击【确定】按钮完成设置,在代码视图中 可看到相应的HTML标签。
2.4.2 设置描述信息 设置网页描述信息的操作如下。 在【文档】窗口中切换到代码视图,将光标置于 <head>…</head>标签中。选择菜单【插入】| 【HTML】|【文件头标签】|【说明】,在【说明】 对话框中输入说明文字。 单击【确定】按钮完成描述信息设置,在代码视图 下可以看到<head>标签内新增了如下代码: <meta name="description" content="节日礼品, 商务礼品" />
2.4.3 插入版权信息 在网页文档中插入版权信息的操作如下。 选择菜单【插入】|【HTML】|【文件头标签】| 【META】,打开【META】对话框,在【值】文本框 输入copyright,在【内容】文本框中输入版权信息, 如“本页版权归设计者所有”,单击【确定】按钮。 在代码视图下可以看到<head>标签内新增了如下代 码: <meta name="copyright" content="本页版权归 设计者所有" />
2.4.4 设置刷新时间 设置刷新时间具体操作步骤如下。 在【文档】窗口中切换到代码视图,将光标置于 <head>…</head>标签内,选择菜单【插入】| 【HTML】|【文件头标签】|【刷新】。 在【刷新】对话框中设置相应属性。 单击【确定】按钮,在代码视图下可以看到 <head>标签内新增了如下代码: <meta http-equiv="refresh" content="30" />