2.1制作“佳美馨装饰——网站简介”网页（课件）《Dreamweaver网页设计立体化教程（微课版）》（人民邮电出版社）

2024-08-10
| 28页
| 226人阅读
| 18人下载
普通

内容正文：

Dreamweaver 网页设计立体化教程（微课版）（Dreamweaver CC 2020） 项目二 添加文本与表格 1 目录 Contents 任务一 制作“佳美馨装饰——网站简介”网页 任务二 制作“佳美馨装饰——会员列表”网页 实训一 制作“中国皮影——皮影戏”网页 实训二 制作“中国皮影——皮影起源传说”网页 2 简介类的页面在网页中十分常见，通常由纯文本组成，有时也会添加相关的图片。本任务将制作“佳美馨装饰网简介”网页，要完成此任务，需要先新建网页，然后设置页面属性，再在其中输入并编辑文本，最后添加其他的网页元素。 一、任务描述 （一）任务背景 （1）掌握新建、保存、打开网页文件的方法。 （2）能够设置网页文件的页面属性和头部信息。 （3）掌握输入文本以及设置文本格式的方法。 （4）掌握插入特殊字符、水平线、日期等的方法。 （二）任务目标 3 二、相关知识 （一）新建、保存与打开网页 1．新建网页 新建网页主要有新建空白网页和从模板新建网页两种方式。 新建空白网页 从模板新建网页 4 二、相关知识 （一）新建、保存与打开网页 2．保存网页 对于尚未保存的网页文件，选择【文件】/【保存】菜单命令或【文件】/【另存为】菜单命令。 对于已经保存过的网页文件，选择【文件】/【保存】菜单命令将直接进行保存，选择【文件】/【另存为】菜单命令。 选择【文件】/【保存全部】菜单命令，将保存所有打开的文件，如果其中有尚未保存的文件，将打开“另存为”对话框。 5 二、相关知识 （一）新建、保存与打开网页 3．打开网页 选择【文件】/【打开】菜单命令，打开“打开”对话框，在其中选择要打开的网页文件，然后单击 按钮可打开该网页文件。 选择【文件】/【打开最近的文件】菜单命令，在弹出的子菜单中将显示最近打开过的网页文件，选择相应的命令即可打开该网页文件，如图所示。 打开最近的文件 6 二、相关知识 （二）设置网页属性 通过CSS样式来设置网页的外观。 1．外观（CSS） “外观（CSS）”选项卡 7 二、相关知识 （二）设置网页属性 在“分类”列表框中选择“外观（HTML）”选项，可通过<body>标签的属性来设置网页的外观。 2．设置“外观（HTML）”属性 “外观（HTML）”属性 8 二、相关知识 （二）设置网页属性 在“分类”列表框中选择“链接（CSS）”选项，可通过CSS样式来设置网页的超链接属性。 3．设置“链接（CSS）”属性 “链接（CSS）”属性 9 二、相关知识 （二）设置网页属性 在“分类”列表框中选择“标题（CSS）”选项，可设置1~6级标题文本的字体、样式、字号及颜色。 4．设置“标题（CSS）”属性 “标题（CSS）”属性 10 二、相关知识 （二）设置网页属性 在“分类”列表框中选择“标题/编码”选项，可设置页面的标题和编码等。 5．设置“标题/编码”属性 “标题/编码”属性 11 二、相关知识 （二）设置网页属性 在“分类”列表框中选择“跟踪图像”选项，单击“浏览”按钮可以选择一张图片作为跟踪图像。 6．设置“跟踪图像”属性 “标题/编码”属性 12 二、相关知识 （三）设置网页 关键字和描述 网页关键字是根据网页类容提炼出来的一些词语或短语，搜索引擎在收集网页时会读取网页的关键字信息。设置网页关键字的方法为：选择【插入】/【HTML】/【Keywords】菜单命令，打开“Keywords”对话框，在“关键字”文本框中输入关键字，多个关键字使用英文逗号隔开，再单击“确定”按钮 1．设置网页关键字 设置网页关键字 13 二、相关知识 （三）设置网页 关键字和描述 网页描述是一段介绍网页内容的文本，它也会被搜索引擎读取。设置网页描述的方法为：选择【插入】/【HTML】/【说明】菜单命令，打开“说明”对话框，在“说明”文本框中输入相关内容，再单击“确定”按钮。 2．设置网页描述 设置网页描述 14 二、相关知识 （四）输入文本 文本是网页中较常见的元素。在Dreamweaver中输入文本的方法有很多种，可以直接输入或复制文本等。 复制文本 直接输入文本 15 二、相关知识 （五）设置文本格式 在Dreamweaver中设置文本格式主要通过“属性”面板。选择【窗口】/【属性】菜单命令或按【Ctrl+F3】组合键可打开“属性”面板。“属性”面板分为“HTML”“CSS”两种模式，单击“HTML”“按钮可切换到“HTML”模式，单击“CSS”按钮可切换到“CSS”模式。 复制文本 直接输入文本 “属性”面板 16 二、相关知识 （六）插入列表 列表是指具有并列关系或先后顺序的若干段落，在Dreamweaver CC中可以插入多种类型的列表，其中较为常用的有无序列表和有序列表两种。 复制文本 无序列表也称项目列表，各列表项之间没有明显的先后顺序，无序列表前一般用圆点、圆形等特殊符号作为项目符号。 无序列表 有序列表 有序列表也称编号列表，各列表项之间有明显的先后顺序，有序列表前有由阿拉伯数字、英文字母或罗马数字等所构成的编号。 17 二、相关知识 （七）插入特殊字符 有时在网页中需要插入一些特殊符号，如英镑符号、注册商标符号、版权符号等。如果要插入其他字符，可以选择“其他字符”选项，在打开的“插入其他字符”对话框中可以选择更多特殊字符。 插入特殊字符 “插入其他字符”对话框 18 二、相关知识 （八）插入日期 在Dreamweaver中可直接插入当前日期，方法为：在“插入”面板中单击“日期”按钮，打开“插入日期”对话框，在其中可以设置星期格式、日期格式和时间格式。 “插入日期”对话框 19 二、相关知识 （九）插入水平线 在网页中，水平线是非常有用的元素，在组织信息时，可以使用一条或多条水平线分隔文本和对象，使段落区分更加明显，让网页更有层次感。插入水平线的方法为：将鼠标指针定位到插入点，在“插入”面板中单击“水平线”按钮。 20 三、任务实施 下面新建“佳美馨装饰”网站的“网站简介”网页并设置网页属性，具体操作如下。 （一）新建网页并设置网页属性 新建文档 管理字体 设置字体 21 三、任务实施 （一）新建网页并设置网页属性 设置外观属性 设置标题属性 保存文档 22 三、任务实施 下面在网页中添加文本并设置格式，具体操作如下。 （二）输入文本并设置格式 选择性粘贴 插入文档中的文本 23 三、任务实施 （二）输入文本并设置格式 换行文本 分段文本 插入空格 24 三、任务实施 （二）输入文本并设置格式 粘贴空格 设置标题格式 设置无序列表 25 三、任务实施 （二）输入文本并设置格式 设置文本格式 设置其他栏目格式 26 三、任务实施 下面在网页中插入特殊字符、日期和水平线，具体操作如下。 （三）插入特殊字符、日期和水平线 插入水平线 “插入日期”对话框 27 三、任务实施 （三）插入特殊字符、日期和水平线 设置日期格式 插入版权符号 设置段落格式 28 $$

资源预览图

2.1制作“佳美馨装饰——网站简介”网页（课件）《Dreamweaver网页设计立体化教程（微课版）》（人民邮电出版社）
1
2.1制作“佳美馨装饰——网站简介”网页（课件）《Dreamweaver网页设计立体化教程（微课版）》（人民邮电出版社）
2
2.1制作“佳美馨装饰——网站简介”网页（课件）《Dreamweaver网页设计立体化教程（微课版）》（人民邮电出版社）
3
2.1制作“佳美馨装饰——网站简介”网页（课件）《Dreamweaver网页设计立体化教程（微课版）》（人民邮电出版社）
4
2.1制作“佳美馨装饰——网站简介”网页（课件）《Dreamweaver网页设计立体化教程（微课版）》（人民邮电出版社）
5
2.1制作“佳美馨装饰——网站简介”网页（课件）《Dreamweaver网页设计立体化教程（微课版）》（人民邮电出版社）
6
所属专辑
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。