photoshop图形图像处理项目1 网页设计制作入门 电子课件 中职网页制作项目实训教程.pptx

《photoshop图形图像处理项目1 网页设计制作入门 电子课件 中职网页制作项目实训教程.pptx》由会员分享，可在线阅读，更多相关《photoshop图形图像处理项目1 网页设计制作入门 电子课件 中职网页制作项目实训教程.pptx（32页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、photoshop图形图像处理项目1 网页设计制作入门 电子课件 中职 高教版 网页制作项目实训教程项目1网页设计制作入门由浅入深简章易懂贴近实际WANGYE ZHIZUO XIANGMU SHIXUN JIAOCHENG网页制作项目实训教程重庆大学出版社CONTENTS任务1 使用DW CS6创建第一个网页任务2 制作文本网页任务3 制作包含列表的网页任务1使用DW CS6创建第一个网页本任务可以分解为2个活动：创建与修改站点；制作第一个网页文档。活动1 创建与修改站点1-11、创建一个名称为“项目1”的本地站点，站点文件夹为D盘。2、修改“项目1”站点文件夹为桌面上的“Task1-1”文件

2、夹。活动要求活动1 创建与修改站点1-1启动Dreamweaver CS6软件（1）双击桌面上的Dreamweaver CS6图标，启动软件，如下图所示。知识窗欢迎界面 活动1 创建与修改站点1-1（2）在“欢迎界面”中单击“新建”栏下的“HTML”按钮，新建一个HTML网页文件，进入新的窗口界面，如下图所示。文档标签 菜单栏 文档工具栏 文档窗口 工作区切换器 标签选择器 属性面板 状态栏 面板组 活动1 创建与修改站点1-1详细操作步骤请参阅教材。活动实施主要是熟悉Dreamweaver CS6的软件界面，通过活动实施过程，熟悉站点的创建与修改操作，并能理解站点的作用。活动评价活动2 制作

3、第一个网页文档1-2新建一个网页文件，输入两行文字，并将网页文件以“task1-1-2.html”为文件名保存到“项目1”站点根目录下。效果如下图所示。活动要求活动2 制作第一个网页文档1-21、Dreamweaver CS6的三种编辑模式Dreamweaver CS6有三种编辑模式，分别是：代码、拆分、设计，如下图所示。知识窗三种编辑模式切换按钮 活动2 制作第一个网页文档1-22、网页的基本结构网页的基本结构由三部分组成：声明、头部、主体，如下图所示。活动2 制作第一个网页文档1-2（1）网页文档类型声明使用来声明网页的文档类型，用来告诉浏览器使用什么样的HTML或XHTML规范来解析网页

4、，它存在于页面的第一行，不区分大小写。（2）网页的头部：定义文档的头部。标签内包含、等标签。：提供有关页面的元信息（针对搜索引擎和更新频度的描述和关键词等），写在标签内。：设置页面的编码格式UTF-8。：告诉搜索引擎站点制作的作者。：告诉搜索引擎网站的关键字。：告诉搜索引擎网站的内容。：该标签用于定义文档的标题。写在标签内。HTML笔记：网页标题为“HTML笔记”，在浏览器标题栏上显示。（3）网页的主体：定义网页文档的主体。活动2 制作第一个网页文档1-2详细操作步骤请参阅教材。活动实施使用Dreamweaver CS6制作第一个网页并成功在浏览器中看查运行结果，通过操作掌握Dreamweav

5、er CS6网页制作的基本操作，包含网页文件的新建与保存、网页标题修改及内容的添加、如何在浏览器中运行网页结果等。活动评价任务2制作文本网页本任务可以分解为2个活动：使用标题、段落等文本网页标签制作诗词赏析页面；使用特殊字符对页面进行简单排版操作。活动1 制作诗词赏析页面2-1如下图所示，完成诗词赏析页面的制作，完成后以“task1-2.html”为文件名保存。活动要求活动1 制作诗词赏析页面2-11、标题标签标题标签表示一段文字的标题，共划分六级标题，从1级到6级，逐级字体减小。如下图所示。在Dreamweaver CS6中，单击“格式”-“段落格式”菜单命令，在打开的子菜单中选择“标题1”

6、“标题6”中的一个，或者在“属性”面板的“格式”下拉列表框中选择“标题1”“标题6”中的一个，都可在网页中插入相对应的标题标签。知识窗活动1 制作诗词赏析页面2-12、段落与换行标签（1）段落标签在设计模式下，按回车键即可自动添加段落标签。（2）换行标签在设计模式下，按Shift+回车键，即可添加换行标签。花篮的花儿香 听我来唱一唱 唱一唱来到了南泥湾 南泥湾好地方 好地方花篮的花儿香 听我来唱一唱 唱一唱来到了南泥湾 南泥湾好地方 好地方活动1 制作诗词赏析页面2-1详细操作步骤请参阅教材。活动实施通过本次活动，掌握网页中文字的输入操作，并能力正确设置标题格式，以及在网页中输入文字时段落与换

7、行符的使用。活动评价活动2 对诗词赏析页面进行简单排版2-2如下图所示，打开“task1-2.html”文件，对诗词赏析页面进行简单排版操作。活动要求活动2 对诗词赏析页面进行简单排版2-21、粗体标签粗体标签主要用于文字加粗，可以通过以下两种方法给网页文字添加粗体标签：在“代码”视图模式中，在需要设置加粗效果的文字两端添加标签。在“设计”视图模式中，选择要设置加粗效果的文字，在“属性”面板中单击“粗体”按钮（快捷键为：Ctrl+B），如下图所示。2、斜体标签斜体标签主要用于文字倾斜显示，可以通过以下两种方法给网页文字添加斜体标签：在“代码”视图模式中，在需要设置倾斜效果的文字两端添加标签。在

8、“设计”视图模式中，选择要设置倾斜效果的文字，在“属性”面板中单击“斜体”按钮（快捷键为：Ctrl+I），如下图所示。知识窗“粗体”按钮 “斜体”按钮 活动2 对诗词赏析页面进行简单排版2-23、特殊符号网页中常见的特殊符号如下表所示：注意：每个符号后面都必须以分号作为结束，不可省略。4、水平线标签水平线主要用于分隔网页内容，使网页内容显示更清晰。活动2 对诗词赏析页面进行简单排版2-2详细操作步骤请参阅教材。活动实施通过本次活动，掌握如何在网页插入特殊字符、如何插入水平线、如何在网页中添加有效空格，掌握如何通过“属性”面板设置网页中的文字格式，如加粗、斜体等，在通过“属性”面板设置网页中的文

9、字格式时，注意与Word相应功能进行对比。活动评价任务3制作包含列表的网页本任务可以分解为2个活动：使用项目列表制作树形菜单；使用编号列表制作在线考试试卷。活动1 制作树形菜单3-1如下图所示，完成树形菜单的制作，完成后以“task1-3-1.html”为文件名保存。活动要求活动1 制作树形菜单3-11、项目列表项目列表，也称无序列表，列表项之间无顺序之分，每个列表项前均有一个项目符号，如下图所示。2、项目列表的设置项目列表可以通过“属性”面板进行设置，如下图所示。知识窗无序列表 桔子 香蕉 苹果活动1 制作树形菜单3-13、项目列表的类型项目列表的类型可以通过type属性设置列表显示符号的类

10、型，如下图所示。disc：实心圆点square：实心方框circle：空心圆点type=circle 时的无序列表：桔子 香蕉 苹果活动1 制作树形菜单3-1详细操作步骤请参阅教材。活动实施通过本次活动，掌握网页制作中项目列表的使用，通过本次活动的操作练习，学会如何将文本转换为项目列表，学会如何通过“属性”面板中的相关工具按钮对项目列表进行操作，以及项目列表类型的设置操作。活动评价活动2 制作在线考试试卷3-2如下图所示，完成在线考试试卷的制作，完成后以“task1-3-2.html”为文件名保存。活动要求活动2 制作在线考试试卷3-21、编号列表编号列表，也称有序列表，以数字或字母作为列表项

11、符号，如下图所示。知识窗 桔子 香蕉 苹果 活动2 制作在线考试试卷3-22、编号列表的类型编号列表的类型可以通过type属性设置列表显示编号的类型，如下图所示。1：数字A：大写英文a：小写英文i：小写罗马字符I：大写罗马字符type=1 时的有序列表：桔子香蕉苹果type=a 时的有序列表：桔子香蕉苹果活动2 制作在线考试试卷3-2详细操作步骤请参阅教材。活动实施通过本次活动，掌握网页制作中编号列表的使用，通过本次活动的操作练习，学会如何将文本或者项目列表转换为编号列表，学会如何通过“属性”面板中的相关工具按钮对编号列表进行操作，以及编号列表类型的设置操作。活动评价感谢您的观看由浅入深简章易懂贴近实际WANGYE ZHIZUO XIANGMU SHIXUN JIAOCHENG