Dreamweaver8入门教程.ppt

1 基础知识 网页设计简介 0 1网页设计概述0 2初识dreamweaver8 2 0 1网页设计概述 0 1 1网页设计遵循的理念0 1 2网站整体风格的确定0 1 3网页创意0 1 4网页色彩搭配简介0 1 5常用网页设计工具简介 3 0 1 1网页设计遵循的理念 1 考虑访问者的带宽问题 2 版面布局合理 3 网站标志的设计 4 站点内容要精 专 及时更新 4 0 1 2网站整体风格的确定 网站的风格指网站的整体形象给访问者的综合感受 包含的因素网站的标志设计 色彩 版面布局 浏览方式 交互性 文字和价值等 例如 儿童网站 wawayaya 是生动活泼的 大多商业网站如ibm 是专业严肃的 5 6 7 确定网站的整体风格需要注意以下几个方面 1 网站标志要放在醒目位置要保持不变 2 反应网站精髓的标语并动态显示 3 导航放在每一张网页的相同位置 4 确定网站的主体颜色并注意颜色 5 页面的布局一般采用左边导航右边文字 或者上面导航下面文字的方法 或两者结合使用 6 内容结构简单且分类要简而精 8 0 1 3网页创意 什么是创意 1 创意是传达信息的一种特殊手段 2 创意是将现有的要素重新组合 9 0 1 4网页色彩搭配简介 网页色彩搭配应考虑以下因素 1 色彩的鲜明性 2 色彩的独特性 3 色度的合适性 4 色彩的代表性 10 0 1 5常用网页设计工具简介 1 网页设计软件dreamweaver2 网络动画制作软件flash3 网络图像处理软件fireworks 本课程主讲photoshop 11 第1讲dreamweaver8 0界面及站点建设 12 第1讲dreamweaver8 0界面及站点建设 1 1dreamweaver8 0简介1 2创建站点1 3网页文件的基本操作1 4设置页面属性1 5练习制作简单的网页站点 13 1 1dreamweaver8 0简介 1 1 1dreamweaver8 0的启动和退出1 1 2dreamweaver8 0的工作环境 14 1 1 1dreamweaver8 0的启动和退出 1 启动dreamweaver8 0在windows操作系统下 单击左下角的 开始 按钮 从 程序 菜单中选择macromedia菜单 然后从子菜单中单击 macromediadreamweaver8 即可启动 如图所示 15 2 退出dreamweaver8 0退出dreamweaver8 0的方法很简单 我们可以有以下几种方式退出编辑界面 1 单击dreamweaver8窗口右上方的关闭按钮 2 按下 alt f4 组合键 3 选择 文件 菜单中的 退出 命令 或按快捷键ctrl q退出系统 16 1 1 2dreamweaver8 0的工作环境 dreamweaver8 0的操作窗口 17 1 2创建站点 1 2 1创建本地站点1 2 2管理站点1 2 3管理网站中的文件和文件夹 18 1 2 1创建本地站点 步骤1 在本地硬盘上建立一个用来存放站点的文件夹 命名为 site 该文件夹就是本地站点的根目录 是为网站特别建立的一个文件夹 步骤2 打开dreamweaver8 0 选择 站点 菜单下的 管理站点 命令 或者选择文件面板中的 管理站点 命令 打开 管理站点 对话框 19 步骤3 单击 管理站点 对话框中的 新建 按钮 在弹出菜单中选择 站点 命令 20 步骤4 单击 站点 命令后 系统会弹出窗口 这是一个定义站点的向导 选择 基本 选项卡 给网站定义一个名称 例如 数学与计算机系 21 步骤5 单击 下一步 按钮 在窗口中设置网站是否使用服务器技术 例如 asp php等 由于我们要制作的是基本的静态网站 所以选择 否 我不想使用服务器技术 单选按钮 22 步骤6 单击 下一步 按钮 开始设置网页的存储方法和存储路径 在上半部分的单选项中选择第一项 编辑我的计算机上的本地副本 完成后再上传到服务器 推荐 如果申请的网站空间支持在线编辑功能 那么可以选择 使用本地网络直接在服务器上编辑 单选项 23 24 步骤7 完成以上的设置后单击 下一步 按钮 在这里选择连接服务器的方式 以及网页在服务器上的存储位置 25 步骤8 单击 下一步 按钮 在这里选择是否使用 存回 和 取出 选中 是 启用存回和取出 选项 可以多人共同完成网站的维护工作 如果只需一个就能够完成网站的维护工作 可以选择 否 26 步骤9 至此完成了对网站的基本定义 单击 下一步 按钮 dreamweaver8 0会弹出对话框询问设置的信息是否准确 单击 完成 按钮 本地站点就创建成功了 27 1 2 2管理站点 1 切换站点dreamweaver8 0中可以同时存在多个站点 在文件面板左边的下拉列表框中选中某个已创建的站点 就可切换到对这个站点进行操作的状态 28 1 2 2管理站点 2 编辑站点如果要对站点进行编辑 可以在 管理站点 对话框中 选择要编辑的站点 然后用鼠标单击 管理站点 对话框中的 编辑 按钮 重新打开 站点定义 向导 根据需要一步一步修改站点的属性即可 29 1 2 2管理站点 3 删除站点如果不需要某个站点时 可以将其从站点列表中删除 选择 站点 菜单下的 管理站点 命令 打开 管理站点 对话框 在该对话框中选择一个站点 单击 删除 按钮 即可删除一个站点 对某一个站点进行删除操作后 网站的文件仍保存在硬盘原来的位置上 并没有从硬盘上删除 30 1 2 3管理网站中的文件和文件夹 1 创建文件夹和文件文件面板通常显示站点中的所有文件和文件夹 但新建的站点中不包含任何文件或文件夹 所有的文件和文件夹都需要新建 在文件面板中站点根目录上单击鼠标右键 然后从弹出的快捷菜单中单击菜单项 新建文件夹 或 新建文件 接着给新的文件夹或文件命名 31 1 2 3管理网站中的文件和文件夹 2 重命名文件夹或文件先选中需要重命名的文件夹或文件 然后单击右键 在弹出的快捷菜单中单击 编辑 选项的下级菜单中的 重命名 命令或者按 f2 快捷键 文件夹或文件的名称变为可编辑状态 重新输入新的名称 按enter键确认即可 3 移动和复制文件从 文件 面板的本地站点文件列表中 选中要移动或复制的文件夹或文件 如果要进行移动操作 在弹出的快捷菜单中单击 编辑 选项的下级菜单中的 剪切 命令 如果要进行复制操作 则执行 编辑 选项的 拷贝 命令 然后执行 编辑 选项下的 粘贴 命令 将文件夹或文件移动或复制到相应的文件夹中 4 删除文件夹或文件要从本地站点文件列表中删除文件夹或文件 先选中要删除的文件夹或文件 然后执行 编辑 选项同上的 删除 命令或按delete键 这时系统会弹出一个提示对话框 询问是否要真正删除文件夹或文件 单击 是 按钮确认后即可将文件夹或文件从本地站点中删除 32 1 3网页文件的基本操作 1 3 1创建网页和打开网页1 3 2保存网页1 3 3在浏览器中预览网页 33 1 3 1创建网页和打开网页 1 新建网页单击 文件 菜单下 新建 命令 即可弹出 新建文档 对话框 从 类别 列表框中选择 基本页 选项 然后选择 基本页 列表框中的 html 选项 单击 创建 按钮 即可新建一个空白的html网页文档 34 1 3 1创建网页和打开网页 2 打开网页单击 文件 菜单选择 打开 命令 弹出 打开 对话框 在该对话框内选中要打开的html文档 单击 打开 按钮 即可将选定的html文档打开 也可以在 文件 面板上 双击 站点目录 中的网页文件也可以打开网页文件 35 1 3 2保存网页 在完成创建 编辑的网页之后 关键的一步就是保存网页 否则一切都是徒劳的 保存网页有如下几种方法 单击 文件 菜单选择 保存 命令 可以原名字原路径保存当前的文档 单击 文件 菜单选择 另保存 命令 可弹出 另存为 对话框 利用该对话框可以将当前的文档以其他名字保存 单击 文件 菜单选择 保存全部 命令 可将当前正在编辑的所有文档以原名保存 36 1 3 3在浏览器中预览网页 单击标准工具栏上的预览按钮或按 f12 可在浏览器中预览所编辑的网页 37 1 4设置页面属性 步骤1 打开dreamweaver8 0 新建一个网页 或者打开一个现有的网页 选择 修改 菜单下的 页面属性 命令 或者单击属性面板中的 页面属性 按钮 打开 页面属性 对话框 38 1 4设置页面属性 步骤2 在 页面属性 对话框中设置 外观 参数 选择 页面属性 中的 外观 选项同 在右侧可能设置具体的参数 39 1 4设置页面属性 步骤3 页面属性设置完成后 单击 确定 保存设置 然后中再打开 页面属性 对话框 并选择左侧的 分类 列表中的 链接 选项同 在右侧可以对链接的样式进行详细的设置 40 1 5练习制作简单的网页站点 1 创建一个名为 计算机基础精品课程 的站点 将其中的本地站点保存在 d computer 文件夹下 远程站点保存在 d computer 文件夹下 根据如图所示的网站的逻辑图 为 计算机基础精品课程 网站建立一个存放图片的文件夹 images 并新建名为 index html teacher html jiaoxue html shiyan html rili html kejian html 和 luxiang html 的网页文件 最后设置index html的页面属性 41 1 5练习制作简单的网页站点 2 创建一个 个人求职主页 的站点 将其中的本地站点保存在 d self 文件夹下 远程站点保存在