网页设计与制作项目教程
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
❖素质目标：
1. 具有勤奋学习的态度，严谨求实、创新的工作作风； 2. 具有良好的心理素质和职业道德素质； 3. 具有高度责任心和良好的团队合作精神； 4. 具有一定的科学思维方式和判断分析问题的能力； 5. 具有较强的网页设计创意思维、艺术设计素质。
任务1：制作简单的图文页面
❖任务描述
1. 创建站点，文件及文件夹命 名及站点文件目录结构符合 规范。
❖步骤5 插入图片
❖步骤6 设置图片的对齐方式，并插入其他图片
❖步骤7 插入水平线
❖步骤8 保存并在浏览器中预览效果
知识点
一．Dreamweaver CS5 简介
▪ Adobe Dreamweaver CS5是一款集网页制作 和管理网站于一身的所见即所得网页编辑器， Dreamweaver CS5是第一套针对专业网页设 计师特别发展的视觉化网页开发工具，利用它 可以轻而易举地制作出跨越平台限制和跨越浏 览器限制的充满动感的网页。
▪ 1. 创建项目列表 ▪ 2. 创建编号列表
❖九．插入页面的头部内容
▪ 1. 设置META ▪ 2. 插入关键字 ▪ 3. 插入说明 ▪ 4. 插入刷新 ▪ 5. 设置基础 ▪ 6. 设置链接 ▪ 7. 设置标题
❖十．插入与设置图像元素
▪ 1. 在网页中插入图像 ▪ 2. 设置图像属性 ▪ 3. 图像的对齐方式 ▪ 4. 插入图像占位符 ▪ 5. 设置图像占位符 ▪ 6. 插入鼠标经过图像
❖4. 在页面中使用图片，使用【插入】菜单中的【 图像】命令插入图片，选择图片后，使用图像【 属性】面板设置图片的格式。
❖5. 在【文件】菜单选择【在浏览器中预览】命令 或者【文档】工具栏中选择【在浏览器中预览】 按钮，可以在浏览器中预览完成的页面。
网页设计与制作项目教 程
2020年4月19日星期日
学习内容
1 Dreamweaver软件基本操作 2 创建、管理站点 3 创建图文页面
任务描述
❖知识目标：
通过系统学习使学生能做到基本掌握Dreamweaver 软件的基本 用法，掌握创建与管理站点、创建简单图文页面的方法。
❖技能目标：
通过讲解辅导与作业练习，要使学生能熟练掌握Dreamweaver的 操作方法，简单页面的制作方法，并能灵活应用知识技巧。
二．Dreamweaver CS5 启动界面
菜单栏 工具栏 【属性】面板
面板组
1. 菜单栏
▪ 【菜单栏】包括多种菜单项，单击任意一个菜 单项将弹出一个下拉菜单，在下拉菜单中选择 不同的菜单项可以完成不同的操作。
❖2. 工具栏
▪ 【文档】工具栏中包含视图选择按钮，单击该 按钮使可以在文档的【代码】、【拆分】和【 设计】视图间快速切换。
❖3. 属性面板
▪ 在【属性】面板中，主要用于查看和更改所选 择的对象的各种属性。
❖4. 面板组
▪ 面板组是一组停靠在某个 标题下面的相关面板的集 合，面板集中了网页编辑 和站点管理过程中集中的 按钮。
❖三．Dreamweaver CS5 工作界面
插入栏 设计选项
❖1. 插入栏
▪ 插入栏中包含【常用】、【Βιβλιοθήκη Baidu布局】、【表单】、【数据 】、【Spry】、【文本】、 【收藏夹】插入栏。
2. 网页设置标题 3. 图文混排，与效果图保持
一致。
任务分析
❖该页面为一 个简单图文 页面，其中 主要内容由 文字与图片 组成，以水 平线分隔。
网页标题 页面路径
文字 图片
水平线
任务实施
❖步骤1 准备站点文件与素材 ❖步骤2 创建站点
❖步骤3 创建页面文件
“设计”视图 标题 工作区
❖步骤4 更改页面标题及输入文字
▪ （5）在【Spry】插入栏 中，包含构建【Spry】页 面等按钮，其中包括Spry 数据对象和构件等按钮。
▪ （6）文本是网页中最常见 、运用最广泛的元素之一， 是网页内容的核心部分，在 网页中添加文本与在Word 等文字处理软件中添加文本 一样方便。
▪ （7）【收藏夹】插入栏中，使用鼠标右键单 击，即可自定义收藏夹对象。
分析与思考
❖ 1.为什么要创建站点？ ❖ 2.如何在页面中输入空格？ ❖ 3.在插入图像时，弹出【图像标签辅助功能属性】对话框
，在其中设置的“替换文本”有何作用？ ❖ 4.图像对齐方式有哪几种？ ❖ 5.插入图像占位符有什么作用？ ❖ 6.在【文档】工具栏中的【标题】中输入的标题，显示在
何处？
任务小结
❖ 1. 使用【站点】中【新建站点】或者【管理站点】的命令 创建站点，在【站点设置对象】对话框中设置【站点名称 】与【本地站点文件夹】。
❖ 2. 使用【文件】菜单或者【本地文件】面板在 Dreamweaver软件中创建文件、编辑文件和保存文件。
❖ 3. 在页面中输入文字，使用【插入】菜单中的命令插入水 平线和特殊字符。
❖2. 管理站点中的文件
▪ （1）创建文件夹 ▪ （2）创建网页文件 ▪ （3）移动和复制文件
❖六．在网页中创建文本
▪ 1. 在网页中输入文本 ▪ 2. 设置字体格式
❖七．插入特殊文本对象
▪ 1. 插入特殊字符 ▪ 2. 插入水平线 ▪ 3. 插入注释 ▪ 4. 插入日期
❖八．项目符号和编号列表
❖2. 设计视图
▪ 设计、代码及拆分三种设计视图。
❖四．使用Dreamweaver CS5 创建站点
1. 使用【管理站点】向导搭建站点 2. 使用【高级】面板创建站点
❖五. 使用Dreamweaver CS5管理站点及站 点文件夹
▪ 1. 使用Dreamweaver CS5管理站点
• （1）打开站点 • （2）编辑站点 • （3）删除站点 • （4）复制站点
▪ （1）在【常用】插入栏中 ，可以创建和插入最常用的 对象，例如图像和表格。
▪ （2）在【布局】插 入栏中，包括标准表 格和扩展表格两个选 项卡。
▪ （3）【表单】：在 Dreamweaver中，表单 输入类型称为表单对象 ，是动态网页中最重要 的元素对象之一。
▪ （4）在【数据】插入栏中 ，可以插入各种数据，如 Spry数据对象、记录集和插 入记录等。
1. 具有勤奋学习的态度，严谨求实、创新的工作作风； 2. 具有良好的心理素质和职业道德素质； 3. 具有高度责任心和良好的团队合作精神； 4. 具有一定的科学思维方式和判断分析问题的能力； 5. 具有较强的网页设计创意思维、艺术设计素质。
任务1：制作简单的图文页面
❖任务描述
1. 创建站点，文件及文件夹命 名及站点文件目录结构符合 规范。
❖步骤5 插入图片
❖步骤6 设置图片的对齐方式，并插入其他图片
❖步骤7 插入水平线
❖步骤8 保存并在浏览器中预览效果
知识点
一．Dreamweaver CS5 简介
▪ Adobe Dreamweaver CS5是一款集网页制作 和管理网站于一身的所见即所得网页编辑器， Dreamweaver CS5是第一套针对专业网页设 计师特别发展的视觉化网页开发工具，利用它 可以轻而易举地制作出跨越平台限制和跨越浏 览器限制的充满动感的网页。
▪ 1. 创建项目列表 ▪ 2. 创建编号列表
❖九．插入页面的头部内容
▪ 1. 设置META ▪ 2. 插入关键字 ▪ 3. 插入说明 ▪ 4. 插入刷新 ▪ 5. 设置基础 ▪ 6. 设置链接 ▪ 7. 设置标题
❖十．插入与设置图像元素
▪ 1. 在网页中插入图像 ▪ 2. 设置图像属性 ▪ 3. 图像的对齐方式 ▪ 4. 插入图像占位符 ▪ 5. 设置图像占位符 ▪ 6. 插入鼠标经过图像
❖4. 在页面中使用图片，使用【插入】菜单中的【 图像】命令插入图片，选择图片后，使用图像【 属性】面板设置图片的格式。
❖5. 在【文件】菜单选择【在浏览器中预览】命令 或者【文档】工具栏中选择【在浏览器中预览】 按钮，可以在浏览器中预览完成的页面。
网页设计与制作项目教 程
2020年4月19日星期日
学习内容
1 Dreamweaver软件基本操作 2 创建、管理站点 3 创建图文页面
任务描述
❖知识目标：
通过系统学习使学生能做到基本掌握Dreamweaver 软件的基本 用法，掌握创建与管理站点、创建简单图文页面的方法。
❖技能目标：
通过讲解辅导与作业练习，要使学生能熟练掌握Dreamweaver的 操作方法，简单页面的制作方法，并能灵活应用知识技巧。
二．Dreamweaver CS5 启动界面
菜单栏 工具栏 【属性】面板
面板组
1. 菜单栏
▪ 【菜单栏】包括多种菜单项，单击任意一个菜 单项将弹出一个下拉菜单，在下拉菜单中选择 不同的菜单项可以完成不同的操作。
❖2. 工具栏
▪ 【文档】工具栏中包含视图选择按钮，单击该 按钮使可以在文档的【代码】、【拆分】和【 设计】视图间快速切换。
❖3. 属性面板
▪ 在【属性】面板中，主要用于查看和更改所选 择的对象的各种属性。
❖4. 面板组
▪ 面板组是一组停靠在某个 标题下面的相关面板的集 合，面板集中了网页编辑 和站点管理过程中集中的 按钮。
❖三．Dreamweaver CS5 工作界面
插入栏 设计选项
❖1. 插入栏
▪ 插入栏中包含【常用】、【Βιβλιοθήκη Baidu布局】、【表单】、【数据 】、【Spry】、【文本】、 【收藏夹】插入栏。
2. 网页设置标题 3. 图文混排，与效果图保持
一致。
任务分析
❖该页面为一 个简单图文 页面，其中 主要内容由 文字与图片 组成，以水 平线分隔。
网页标题 页面路径
文字 图片
水平线
任务实施
❖步骤1 准备站点文件与素材 ❖步骤2 创建站点
❖步骤3 创建页面文件
“设计”视图 标题 工作区
❖步骤4 更改页面标题及输入文字
▪ （5）在【Spry】插入栏 中，包含构建【Spry】页 面等按钮，其中包括Spry 数据对象和构件等按钮。
▪ （6）文本是网页中最常见 、运用最广泛的元素之一， 是网页内容的核心部分，在 网页中添加文本与在Word 等文字处理软件中添加文本 一样方便。
▪ （7）【收藏夹】插入栏中，使用鼠标右键单 击，即可自定义收藏夹对象。
分析与思考
❖ 1.为什么要创建站点？ ❖ 2.如何在页面中输入空格？ ❖ 3.在插入图像时，弹出【图像标签辅助功能属性】对话框
，在其中设置的“替换文本”有何作用？ ❖ 4.图像对齐方式有哪几种？ ❖ 5.插入图像占位符有什么作用？ ❖ 6.在【文档】工具栏中的【标题】中输入的标题，显示在
何处？
任务小结
❖ 1. 使用【站点】中【新建站点】或者【管理站点】的命令 创建站点，在【站点设置对象】对话框中设置【站点名称 】与【本地站点文件夹】。
❖ 2. 使用【文件】菜单或者【本地文件】面板在 Dreamweaver软件中创建文件、编辑文件和保存文件。
❖ 3. 在页面中输入文字，使用【插入】菜单中的命令插入水 平线和特殊字符。
❖2. 管理站点中的文件
▪ （1）创建文件夹 ▪ （2）创建网页文件 ▪ （3）移动和复制文件
❖六．在网页中创建文本
▪ 1. 在网页中输入文本 ▪ 2. 设置字体格式
❖七．插入特殊文本对象
▪ 1. 插入特殊字符 ▪ 2. 插入水平线 ▪ 3. 插入注释 ▪ 4. 插入日期
❖八．项目符号和编号列表
❖2. 设计视图
▪ 设计、代码及拆分三种设计视图。
❖四．使用Dreamweaver CS5 创建站点
1. 使用【管理站点】向导搭建站点 2. 使用【高级】面板创建站点
❖五. 使用Dreamweaver CS5管理站点及站 点文件夹
▪ 1. 使用Dreamweaver CS5管理站点
• （1）打开站点 • （2）编辑站点 • （3）删除站点 • （4）复制站点
▪ （1）在【常用】插入栏中 ，可以创建和插入最常用的 对象，例如图像和表格。
▪ （2）在【布局】插 入栏中，包括标准表 格和扩展表格两个选 项卡。
▪ （3）【表单】：在 Dreamweaver中，表单 输入类型称为表单对象 ，是动态网页中最重要 的元素对象之一。
▪ （4）在【数据】插入栏中 ，可以插入各种数据，如 Spry数据对象、记录集和插 入记录等。