DreamweaverCS5网页制作项目一.ppt

全国计算机 十二五 精品图书 项目一网页制作基础 任务一认识网站和网页任务二网站开发基础任务三初识DreamweaverCS5任务四站点基本操作任务五网页文档基本操作 任务一认识网站和网页 任务说明 本任务中 我们将简单了解网页和网站 网页的构成元素以及网页的本质 预备知识 一 网页和网站 网页就是我们上网时在浏览器中打开的一个个画面 网站则是一组相关网页的集合 一个小型网站可能只包含几个网页 而一个大型网站则可能包含成千上万个网页 另外 打开某个网站时显示的第一个网页被称为网站的主页 或首页 二 网页的构成元素 我们可以将网页中的元素按功能分为站标 导航条 广告条 标题栏和按钮等 站标 导航条 广告条 标题栏 按钮 三 网页的本质 一般情况下 网页中除了包含网页文件 扩展名为 html asp等 外 还有图像文件 扩展名为 jpg gif等 Flash动画文件 扩展名为 swf 脚本文件 扩展名为 js 样式文件 扩展名为 css 以及视频文件 扩展名为 avi flv等 等 任务实施 指出新浪网主页的构成元素 在了解了网页的构成元素后 接下来通过辨识 新浪网 网站首页的构成元素 来进一步加强和巩固前面的学习 站标 导航条 广告条 标题栏 按钮 任务二网站开发基础 任务说明 在学习制作网页之前首先了解一下与网站开发相关的基础知识 并从整体上认识一下其制作流程 对后面的学习将是非常有利的 下面就来了解一下与网站开发密切相关的基础知识 预备知识 一 网站管理与网页制作相关软件 Dreamweaver是目前最常用的网站管理和网页制作软件 其功能全面 操作灵活 专业性强 在制作网页时 除Dreamweaver外还需要用到Fireworks Flash Photoshop等辅助软件 二 网页制作基础 XHTML语言 XHTML是ExtensibleHyperTextMarkupLanguage 可扩展超文本标记语言 的英文缩写 它的前身是HTML 由于HTML代码繁琐 结构松散 所以推出了XHTML 也可以说 XHTML是HTML的一个升级版本 三 IP地址 域名和网址 1 IP地址 互联网上连接了不计其数的服务器和客户机 每一个主机在互联网上都有一个唯一的地址 我们称这个地址为IP地址 InternetProtocolAddress IP地址由4个小于256的数字组成 数字之间用点间隔 例如 61 135 150 126 就是一个IP地址 2 域名 由于IP地址在使用过程中难于记忆和书写 人们又开发了一种与IP地址对应的字符用以表示地址 这就是域名 每一个网站都有自己的域名 并且域名是独一无二的 例如 我们只需要在浏览器地址栏中输入搜狐网站的域名 然后按回车键就可以访问搜狐网站了 3 网址 网址又叫URL 英文全称是 UniformResourceLocator 即统一资源定位符 它是网络上通用的一种地址格式 用于标识网页文件在网络中的位置 一个完整的网址由通信协议名称 域名或IP地址 网页在服务器中的路径和文件名4部分组成 任务实施 网站建设基本流程 网站建设流程是从企业计划建设网站到网站建设完成的一套规范化运作 收集网站建设需求及素材 制作网站策划书 网页美术设计 美术与程序整合 测试和发布网站 推广和维护网站 任务三初识DreamweaverCS5 任务说明 DreamweaverCS5是一款集网页制作和网站管理于一身 所见即所得的网页编辑软件 下面我们首先启动该软件 然后熟悉一下其工作界面上的各组成元素 最后在任务实施中学习调整DreamweaverCS5工作界面的基本操作 预备知识 一 启动DreamweaverCS5 安装DreamweaverCS5后 单击桌面左下角的 开始 按钮 选择 所有程序 AdobeDreamweaverCS5 就可以启动DreamweaverCS5了 二 DreamweaverCS5界面元素简介 DreamweaverCS5的工作界面由应用程序栏 文档标签栏 文档工具栏 文档窗口 标签选择器 状态栏 属性检查器和面板组等组成 1 应用程序栏 应用程序栏位于工作区顶部 左侧显示菜单栏 右侧包含工作区切换器 可在其下拉列表中选择不同的工作区模式 CSLive 按钮和程序窗口控制按钮 2 文档标签栏 文档标签栏位于应用程序栏下方 左侧显示当前打开的所有网页文档的标签 标签上显示相应网页文档的名称 及其关闭按钮 右侧显示当前文档在本地磁盘中的保存路径以及向下还原按钮 下方显示当前文档中包含的文档以及链接文档 3 文档工具栏 文档工具栏位于文档标签栏的下方 包括各种可对文档进行操作的按钮 4 状态栏 状态栏位于文档窗口底部 它提供了与当前文档相关的一些信息 5 属性检查器 使用 属性检查器 可以检查和设置当前选定页面元素 如文本和插入对象 的最常用属性 属性检查器 中的内容会根据选定元素的不同而变化 6 面板组 默认状态下 面板组位于文档窗口右侧 面板组中包含各种类型的面板 Dreamweaver中的大部分操作都需要在面板中实现 其中最常用的有 插入 面板 文件 面板和 CSS样式 面板 任务实施 调整DreamweaverCS5工作界面 使用Dreamweaver制作或编辑网页时 经常需要打开 关闭某个面板 或对其工作界面进行各种调整 本节我们就来学习一下调整DreamweaverCS5工作界面的基本操作 具体操作见视频1 3 任务四站点基本操作 任务说明 一般在Dreamweaver中制作网页之前 最好先定义站点 然后在站点中创建网页 本任务主要学习在DreamweaverCS5中定义和管理站点的方法 预备知识 一 在DreamweaverCS5中定义站点 在Dreamweaver中定义站点的目的是把本地磁盘中的站点文件夹同Dreamweaver建立一定的关联 从而方便用户使用Dreamweaver管理站点和编辑站点中的网页文档 以及上传或下载站点内容等 二 在DreamweaverCS5中管理站点 定义站点后 如果需要修改站点属性 复制或删除站点等 可执行管理站点的操作 任务实施 在DreamweaverCS5中定义站点 欧妮雅 在本书的大部分 任务实施 中 我们都将制作 欧妮雅 化妆品网站的相关页面 下面我们先从定义该站点开始 具体操作见视频1 4 任务五网页文档基本操作 任务说明 定义好站点后 便可以在站点中创建网页了 本任务首先学习网页文档和文件夹的命名规则 然后依次学习新建 保存 打开 预览和关闭网页文档的方法 最后学习利用 文件 面板管理站点中网页文档和文件夹的方法 预备知识 一 网页文档和文件夹命名规则 首页文档一般命名为index html index asp或者index php 不要用中文命名网页文档和文件夹 网页文档名中不要使用大写英文字母 最好全部使用小写英文字母 运算符符号不能用在文件名的开头 比较长的网页文档名可以使用下划线 来隔开多个单词或关键字 在大型网站中 分支页面的文件应存放在单独的文件夹中 每个分支中的图像也应该存放在各自单独的文件夹中 存放网页图像的文件夹一般命名为 images 或者 img 在动态网站中 用来存放数据库的文件夹一般命名为 data 或者 database 二 新建和保存网页文档 在DreamweaverCS5中可以创建两种类型的网页文档 一种是直接创建的空白网页文档 另一种是通过DreamweaverCS5内置的模板创建具有一定内容和样式的网页文档 三 打开 预览和关闭网页文档 若要对已有的文档进行编辑 就需要在Dreamweaver中打开该文档 另外 在Dreamweaver中打开网页文档并执行相应操作后