Dreamweaver网页设计与应用（Dreamweaver CC 2019）（微课版）课件 第9-15章 表单-电子商务网页

项目引入：表单的出现使网页从单向的信息传递发展到能够与用户交互，而且交互性越来越强。本项目主要讲解表单的使用方法和应用技巧。通过对这些内容的学习，学生可以利用表单输入信息或进行选择，使用单行文本域、密码文本域、单选按钮、复选框、滚动列表、文件域、按钮等表单对象，将表单相应的信息提交给服务器进行处理。使用表单可以实现网上投票、网站注册、信息发布、网上交易等功能。项目9表单掌握创建表单的方法掌握设置表单属性的方法掌握在表单中插入文本域的方法掌握在表单中插入单选按钮和复选框的方法掌握在表单中插入下拉列表、滚动列表、文件域和按钮的方法掌握HTML5表单元素的应用方法项目目标掌握“用户登录界面”的关键制作步骤掌握“传统文化网页”的关键制作步骤掌握“健康测试网页”的关键制作步骤掌握“鑫飞越航空网页”的关键制作步骤技能目标激发对表单的使用方法和应用技巧的学习兴趣通过相互合作，培养团队合作精神素养目标任务9.1表单的使用创建表单表单的属性插入文本域任务实践—用户登录界面9.1.1创建表单在文档中插入表单的具体操作步骤如下。（1）在文档窗口中，将光标置于希望插入表单的位置。（2）插入表单，文档窗口中出现一个用来指示表单区域的红色虚线轮廓。“表单”效果图9.1.2表单的属性在在文档窗口中选择表单，“属性”面板中出现图所示的表单属性。表单“属性”面板9.1.3插入文本域单行文本域通常提供单字或短语响应，如姓名或地址。若要在表单中插入单行文本域，需要先将光标置于表单轮廓内需要插入单行文本域的位置，然后插入单行文本域。任务实践—用户登录界面使用“插入”面板“HTML”选项卡中的按钮插入表格，使用“表单”选项卡中的按钮插入文本域并设置相应的属性。效果图任务9.2插入单选按钮和复选框插入单选按钮插入单选按钮组插入复选框任务实践—传统文化网页9.2.1插入单选按钮插入单选按钮有以下几种方法。①单击“插入”面板“表单”选项卡中的“单选按钮”按钮，文档窗口的表单中出现一个单选按钮。②选择“插入>表单>单选按钮”命令，文档窗口的表单中出现一个单选按钮。单选按钮的“属性”面板，用户可以根据需要设置当前单选按钮的各项属性。

“单选按钮”效果图9.2.2插入单选按钮组先将光标放在表单轮廓内需要插入单选按钮组的位置，然后打开“单选按钮组”对话框。打开“单选按钮组”对话框有以下几种方法。①单击“插入”面板“表单”选项卡中的“单选按钮组”按钮。②选择“插入>表单>单选按钮组”命令。“单选按钮组”效果图“单选按钮组”对话框9.2.3插入复选框插入复选框有以下几种方法。①单击“插入”面板“表单”选项卡中的“复选框”按钮，文档窗口的表单中出现一个复选框。②选择“插入>表单>复选框”命令，文档窗口的表单中出现一个复选框。“复选框”效果图任务实践—传统文化网页使用“表单”选项卡中的单选按钮为页面添加单选按钮。效果图任务9.3插入下拉列表、滚动列表、文件域和按钮插入下拉列表和滚动列表创建文件域插入图像按钮插入普通按钮插入提交按钮插入重置按钮任务实践—健康测试网页1.插入下拉列表2.插入滚动列表9.3.1插入下拉列表和滚动列表“下拉菜单”效果图“滚动列表”效果图9.3.2插入文件域插入文件域有以下几种方法。①将光标置于表单中，单击“插入”面板“表单”选项卡中的“文件”按钮，文档窗口的表单中出现一个文件域。②选择“插入>表单>文件”命令，文档窗口的表单中出现一个文件域。文件域的“属性”面板，用户可以根据需要设置当前文件域的各项属性。“文件域”效果图9.3.3插入图像按钮插入图像按钮有以下几种方法。①单击“插入”面板“表单”选项卡中的“图像按钮”按钮。②选择“插入>表单>图像按钮”命令。图像按钮的“属性”面板，用户可以根据需要设置当前图像按钮的各项属性。“选择图像源文件”对话框9.3.4插入普通按钮插入普通按钮有以下几种方法。①单击“插入”面板“表单”选项卡中的“按钮”按钮，文档窗口的表单中出现一个按钮。②选择“插入>表单>按钮”命令，文档窗口的表单中出现一个按钮。按钮“属性”面板9.3.5插入提交按钮插入提交按钮有以下几种方法。①单击“插入”面板“表单”选项卡中的“‘提交’按钮”按钮，文档窗口的表单中出现一个提交按钮。②选择“插入>表单>‘提交’按钮”命令，文档窗口的表单中出现一个提交按钮。“提交”按钮“属性”面板9.3.6插入“重置”按钮插入重置按钮有以下几种方法。①单击“插入”面板“表单”选项卡中的“‘重置’按钮”按钮，文档窗口的表单中出现一个重置按钮。②选择“插入>表单>‘重置’按钮”命令，文档窗口的表单中出现一个重置按钮。“重置”按钮“属性”面板任务实践—健康测试网页使用“选择”按钮插入下拉列表，使用“属性”面板设置下拉列表的属性。效果图任务9.4创建HTML5表单元素插入电子邮件文本域插入Url文本域插入Tel文本域插入搜索文本域插入数字文本域插入范围文本域插入颜色文本域插入月表单插入周表单插入日期表单插入时间表单插入日期时间表单插入日期时间（当地）表单9.4.1插入电子邮件文本域插入电子邮件文本域有以下几种方法。①单击“插入”面板“表单”选项卡中的“电子邮件”按钮，可在文档窗口中添加电子邮件文本域。②选择“插入>表单>电子邮件”命令，文档窗口的表单中出现一个电子邮件文本域。电子邮件文本域“属性”面板9.4.2插入Url文本域插入Url文本域有以下几种方法。①单击“插入”面板“表单”选项卡中的“Url”按钮，文档窗口的表单中出现一个Url文本域。②选择“插入>表单>Url”命令，文档窗口的表单中出现一个Url文本域。URL文本域“属性”面板9.4.3插入Tel文本域插入Tel文本域有以下几种方法。①单击“插入”面板“表单”选项卡中的“Tel”按钮，文档窗口的表单中出现一个Tel文本域。②选择“插入>表单>Tel”命令，文档窗口的表单中出现一个Tel文本域。Tel文本域“属性”面板9.4.4插入搜索文本域插入搜索文本域有以下几种方法。①单击“插入”面板“表单”选项卡中的“搜索”按钮，文档窗口的表单中出现一个搜索文本域。②选择“插入>表单>搜索”命令，文档窗口的表单中出现一个搜索文本域。搜索文本域“属性”面板9.4.5插入数字文本域插入数字文本域有以下几种方法。①单击“插入”面板“表单”选项卡中的“数字”按钮，文档窗口的表单中出现一个数字文本域。②选择“插入>表单>数字”命令，文档窗口的表单中出现一个数字文本域。数字文本域“属性”面板9.4.6插入范围文本域插入范围文本域有以下几种方法。①单击“插入”面板“表单”选项卡中的“范围”按钮，文档窗口的表单中出现一个范围文本域。②选择“插入>表单>范围”命令，文档窗口的表单中出现一个范围文本域。范围文本域“属性”面板9.4.7插入颜色文本域插入颜色文本域有以下几种方法。①单击“插入”面板“表单”选项卡中的“颜色”按钮，文档窗口的表单中出现一个颜色文本域。②选择“插入>表单>颜色”命令，文档窗口的表单中出现一个颜色文本域。颜色“属性”面板9.4.8插入月表单插入月表单有以下几种方法。①单击“插入”面板“表单”选项卡中的“月”按钮，文档窗口的表单中出现一个月表单。②选择“插入>表单>月”命令，文档窗口的表单中出现一个月表单。月表单“属性”面板9.4.9插入周表单插入周表单有以下几种方法。①单击“插入”面板“表单”选项卡中的“周”按钮，文档窗口的表单中出现一个周表单。②选择“插入>表单>周”命令，文档窗口的表单中出现一个周表单。周表单“属性”面板9.4.10插入日期表插入日期表单有以下几种方法。①单击“插入”面板“表单”选项卡中的“日期”按钮，文档窗口的表单中出现一个日期表单。②选择“插入>表单>日期”命令，文档窗口的表单中出现一个日期表单。日期表单“属性”面板9.4.11插入时间表单插入时间表单有以下几种方法。①单击“插入”面板“表单”选项卡中的“时间”按钮，文档窗口的表单中出现一个时间表单。②选择“插入>表单>时间”命令，文档窗口的表单中出现一个时间表单。时间表单“属性”面板9.4.12插入日期时间表单插入日期时间表单有以下几种方法。①单击“插入”面板“表单”选项卡中的“日期时间”按钮，文档窗口的表单中出现一个日期时间表单。②选择“插入>表单>日期时间”命令，文档窗口的表单中出现一个日期时间表单。日期时间表单“属性”面板9.4.13插入日期时间（当地）表单插入日期时间（当地）表单有以下几种方法。①单击“插入”面板“表单”选项卡中的“日期时间（当地）”按钮，文档窗口的表单中出现一个日期时间（当地）表单。②选择“插入>表单>日期时间（当地）”命令，文档窗口的表单中出现一个日期时间（当地）表单。日期时间（当地）表单“属性”面板任务实践—鑫飞越航空网页使用“表单”选项卡中的按钮插入日期表单。效果图项目实践——房屋评估网页使用“文本”按钮插入单行文本域，使用“图像按钮”按钮插入图像按钮，使用“单选按钮”按钮插入单选按钮。效果图课后习题—智能扫地机器人网页使用“表单”按钮插入表单，使用“Table”按钮插入表格，进行页面布局，使用“图像按钮”按钮插入图像按钮，使用“复选框”按钮插入复选框，使用“文本”按钮插入单行文本域，使用“Tel”按钮插入Tel文本域。效果图项目引入：行为是Dreamweaver预置的JavaScript程序库，每个行为包括一个动作和一个事件。任何一个动作都需要一个事件激活，两者相辅相成。动作是一段已编辑好的JavaScript代码，这些代码在特定事件被激发时执行。本项目主要讲解行为和动作的使用方法。通过对这些内容的学习，学生可以在网页中熟练使用行为和动作，使制作的网页更加生动、精彩。项目10行为了解“行为”面板掌握行为的使用方法掌握动作的使用方法和技巧项目目标掌握“品牌商城网页”的关键制作步骤技能目标培养持续学习、独立思考的能力培养实践能力和专注力素养目标任务10.1行为概述“行为”面板使用行为10.1.1“行为”面板一般使用“行为”面板为网页元素指定动作和事件。选择“窗口>行为”命令，或按Shift+F4组合键，弹出“行为”面板。“行为”面板10.1.2使用行为1．将行为附加到网页元素上10.1.2使用行为2．将行为附加到文本上任务10.2动作打开浏览器窗口转到URL设置容器的文本设置状态栏文本设置文本域文字跳转菜单跳转菜单开始任务实践—品牌商城网页10.2.1打开浏览器窗口使用“打开浏览器窗口”动作可以在一个新的窗口中打开指定的URL，还可以指定新窗口的属性、特征和名称。“打开浏览器窗口”对话框10.2.2转到URL“转到URL”动作的功能是在当前窗口或指定的框架中打开一个新页面。此动作尤其适用于通过一次单击操作更改两个或多个框架的内容。“转到URL”对话框10.2.3设置容器的文本使用“设置容器的文本”动作的具体操作步骤如下。（1）单击“插入”面板“HTML”选项卡中的“Div”按钮，在文档窗口中生成一个div容器。选中该div容器，在“属性”面板的“DivID”文本框中输入名称。（2）在文档窗口中选择一个对象，如文字、图像、按钮等，打开“行为”面板。（3）在“行为”面板中单击“添加行为”按钮，并从弹出的菜单中选择“设置文本>设置容器的文本”命令，弹出“设置容器的文本”对话框。（4）如果不是默认事件，则单击该事件，出现下拉按钮，单击该下拉按钮，弹出包含全部事件的下拉列表，可根据需要选择相应的事件。（5）按F12键浏览网页效果。10.2.4设置状态栏文本使用“设置状态栏文本”动作的具体操作步骤如下。（1）选择一个对象，如文字、图像、按钮等，打开“行为”面板。（2）在“行为”面板中单击“添加行为”按钮，并从弹出的菜单中选择“设置文本>设置状态栏文本”命令，弹出“设置状态栏文本”对话框。对话框中只有一个“消息”选项，可以设置在状态栏中显示的消息。消息要简明扼要，否则浏览器将把溢出的消息截断。在对话框中根据需要输入状态栏消息或相应的JavaScript代码，单击“确定”按钮完成设置。（3）如果不是默认事件，在“行为”面板中展开该动作的下拉列表，选择相应的事件。（4）按F12键浏览网页效果。10.2.5设置文本域文字使用“设置文本域文字”动作的具体操作步骤如下。（1）若文档中没有文本域对象，则要先创建文本域。先选择“插入>表单>文本区域”命令，在页面中创建文本区域。然后在“属性”面板的“Name”文本框中输入该文本域的名称，该名称在网页中应是唯一的。（2）选择文本域并打开“行为”面板。（3）在“行为”面板中单击“添加行为”按钮，并从弹出的菜单中选择“设置文本>设置文本域文字”命令，弹出“设置文本域文字”对话框。（4）如果不是默认事件，则单击该事件，出现下拉按钮，单击该下拉按钮，弹出包含全部事件的下拉列表，可根据需要选择相应的事件。（5）按F12键浏览网页效果。10.2.6跳转菜单跳转菜单是链接的一种形式，与真正的链接相比，跳转菜单可以节省很大的空间。跳转菜单从表单中的菜单发展而来，可通过“行为”面板中的“跳转菜单”命令进行添加。“跳转菜单”对话框10.2.7跳转菜单开始“跳转菜单开始”动作与“跳转菜单”动作关联密切。“跳转菜单开始”将“前往”按钮和跳转菜单关联起来，单击“前往”按钮将打开在跳转菜单中选择的链接。通常情况下，跳转菜单不需要“前往”按钮。但是如果跳转菜单出现在一个框架中，而跳转菜单项链接到其他框架中的页，则通常需要使用“前往”按钮，以允许访问者重新选择已在跳转菜单中选择的菜单项。“跳转菜单开始”对话框任务实践—品牌商城网页使用“交换图像”命令制作鼠标指针经过图像时图像发生变化的效果。效果图项目实践—婚戒网页使用“打开浏览器窗口”命令制作指定大小和属性的弹出窗口。效果图课后习题——爱在七夕网页使用“打开浏览器窗口”命令制作指定大小的弹出窗口。效果图项目引入：在DreamweaverCC2019中插入的网页内容及动作都会自动转换为代码。本项目主要讲解网页代码的使用方法和应用技巧。通过对这些内容的学习，学生可以直接编写或修改代码，实现Web页面的交互效果。项目11网页代码了解网页代码掌握使用标签库插入标签的方法掌握常用的HTML标签掌握调用HTML事件过程的法项目目标掌握“品质狂欢节网页”的关键制作步骤掌握“土特产网页”的关键制作步骤技能目标培养对网页代码的探索精神培养将相关知识运用到实际操作中的应用能力素养目标任务11.1网页代码概述代码提示功能使用标签库插入标签任务实践—品质狂欢节网页11.1.1代码提示功能代码提示是网站设计者在文档窗口中编写或修改代码的有效工具。只要在“代码”视图的相应标签间按<键，就会出现标签列表，在标签内按Space键，就会出现关于该标签常用属性、方法、事件的代码提示列表。“代码”视图11.1.2使用标签库插入标签在DreamweaverCC2019中，标签库里有一组特定类型的标签，它包含DreamweaverCC2019应如何设置标签格式的信息。标签库提供了DreamweaverCC2019用于代码提示、目标浏览器检查、标签选择器和其他代码功能的标签信息。使用标签库编辑器可以添加和删除标签库、标签和属性，设置标签库的属性以及编辑标签和属性。“标签库编辑器”对话框任务实践—品质狂欢节网页使用“页面属性”命令改变页面的边距和标题，使用“IFRAME”按钮制作浮动框架效果。效果图任务11.2常用的HTML标签HTML是一种超文本标记语言，HTML文件是能够被网络浏览器读取并生成网页的文件。常用的HTML标签有以下几种。6．图形标签7．链接标签8．表单标签9．滚动标签10．载入网页背景音乐标签1．文件结构标签2．排版标签3．列表标签4．表格标签5．框架任务11.3调用HTML事件过程前面已经介绍了基本的事件及其触发条件，本书讲解在代码中调用事件过程的方法。调用事件过程有3种方法，下面以在按钮上单击弹出欢迎对话框为例介绍调用事件过程的方法。1．通过名称调用事件过程2．通过for、event属性调用事件过程3．通过控件属性调用事件过程任务实践—土特产网页切换到“代码”视图，手动输入代码实现禁止滚动和禁止右击效果。效果图项目实践—活动详情页使用“页面属性”命令添加页面标题，使用“IFRAME”按钮制作浮动框架效果。效果图课后习题—机电设备网页使用“页面属性”命令添加页面标题，使用“IFRAME”按钮制作浮动框架效果。效果图项目引入：文化艺术网站是指专业的文化和艺术类网站，其利用一张张网页弘扬我国文化和艺术，满足群众日益增长的文化需求，促进社会各界的文化和艺术交流。本项目以两个类型的文化艺术网页为例，讲解文化艺术网页的设计方法和制作技巧。项目12文化艺术网页掌握文化艺术网页的设计流程掌握文化艺术网页的布局思路掌握文化艺术网页的制作方法项目目标掌握“戏曲艺术网页”的关键制作步骤掌握“国画艺术网页”的关键制作步骤技能目标激发对艺术的热情传承传统文化，推动文化艺术的繁荣素养目标任务12.1文化艺术网页概述随着人们对精神生活的重视和审美品位的不断提升，文化艺术逐渐成为提升生活质量和情感表达的重要载体。文化艺术网页汇集了丰富多彩的内容，涵盖绘画、雕塑、戏剧、音乐、舞蹈、手工艺等多种艺术形式，既有传统文化的传承与保护，也有当代艺术的创新与突破。通过详细的艺术作品介绍、专题文章、视频展示等内容，用户可以深入了解不同艺术流派的历史渊源及其发展脉络。

任务12.2戏曲艺术网页任务分析任务效果任务制作

12.2.1任务分析京剧是我国传统戏曲艺术的精华，集音乐、舞蹈、文学、武术于一体。本任务是设计制作戏曲艺术网页，要求通过设计详细地展现京剧历史、行当、经典剧目，并且可以播放名家名段的视频等。通过这个平台，访问者不仅能够深入了解和欣赏京剧艺术，还能促进京剧文化的传播与传承，激发更多人对这门传统艺术的兴趣。在网页设计过程中，将背景设计成干净整洁的浅色背景并搭配毛笔笔触，体现出戏曲的传承和精神。导航条放在页面顶部，便于访问者对网页进行浏览。中间部分使用独特的京剧人物图像，使页面更加生动直观，通过图像和文字的设计编排，展现戏曲风格和文化特色。右侧和下方设计了最新动态、戏曲新闻和相关知识栏目。整个页面充满了中国传统戏曲文化的气息。

12.2.2任务效果本任务使用“属性”面板设置单元格的宽度、高度和文字颜色，制作导航条；使用“Image”按钮为页面添加图像；使用“CSS设计器”面板设置文字行距和文字大小。效果图

12.2.3任务制作1．制作导航条和焦点图区域2．制作内容区域3．制作底部区域

任务12.3国画艺术网页任务分析任务设计任务制作

12.3.1任务分析国画是我国传统绘画的代表，具有悠久的历史和独特的艺术风格。本任务是设计制作国画艺术网页，旨在展示国画的魅力与多样性，网页内容包含国画历史、技法、名家作品赏析以及绘画教学资源。访问者可以通过该网页深入了解国画的文化内涵、传统技艺和当代发展，欣赏不同风格和流派的优秀作品，并有机会参与在线艺术交流和学习。该网页能激发更多人对国画艺术的兴趣，为中华传统艺术的发展注入新的活力。在网页设计过程中，将背景设计为传统水墨画的黑白颜色形式；通过对国画信息的展示充分表现国画的艺术美感；整个网页图像丰富多样，充满特色。

12.3.2任务设计本任务使用“Image”按钮插入网页logo，使用“页面属性”命令改变页面文字的大小、颜色和边距，使用“CSS设计器”面板设置页面背景图像和文字行距等，使用“属性”面板设置单元格的宽和高。效果图

12.3.3任务制作1．设置背景图像、制作导航条和焦点图区域2．制作国画名家介绍区域3．制作名作欣赏区域和底部效果

项目实践—书法艺术网页效果图使用“页面属性”命令设置页面字体、大小\颜色和页边距，使用“属性”面板设置单元格背景颜色、宽度和高度，使用“CSS设计器”面板设置文字的颜色、大小和行距。

课后习题—诗词艺术网页效果图使用“页面属性”命令设置页面字体、大小、颜色和页边距，使用“CSS设计器”面板设置单元格背景图像，以及文字的颜色、大小和行距，使用“属性”面板设置单元格的宽度和高度。项目引入：随着旅游行业蓬勃发展，旅游网站受到广泛关注。根据旅游公司的市场定位和产品特点，旅游休闲网页表现出了不同的类型和特色。本项目以两个旅游休闲网页为例，讲解旅游休闲网页的设计方法和制作技巧。项目13旅游休闲网页了解旅游休闲网页的功能掌握旅游休闲网页的设计流程掌握旅游休闲网页的布局掌握旅游休闲网页的制作方法项目目标掌握“滑雪运动网页”的关键制作步骤掌握“户外运动网页”的关键制作步骤技能目标培养包容与开放的心态培养勇于挑战的精神培养环保意识素养目标任务13.1旅游休闲网页概述随着人们生活水平的日益提高，旅游已成为人们休闲、娱乐的首选方式之一。一波又一波的旅游热潮使旅游行业蓬勃发展，而通过互联网进行宣传也成为旅游行业的一项重要举措。因此，越来越多的旅游网站建立起来，丰富多彩的网页内容不仅为旅游者提供了了解外界及旅行社情况的窗口，而且为旅行社提供了网上报名、网上预订的信息。良好的交流环境使得旅游行业满足更多的用户需求成为可能，也为用户寻找更好的旅游产品提供了良好的契机。

任务13.2滑雪运动网页任务分析任务效果任务制作

13.2.1任务分析雪上运动浪漫而又刺激。不分年龄，男女老少皆可在雪场上尽情享受滑雪的乐趣，感受到这项运动带来的无穷快乐。本任务是为滑雪场设计网页，目的是突出滑雪的刺激和乐趣，吸引更多消费者。在网页制作过程中，将网页的背景设计为美丽的雪山，充满激情的运动员在滑雪，勾起人对滑雪运动的无限向往，网页的色彩搭配清爽怡人，整体色调符合滑雪运动的特色，顶部的深色导航条便于滑雪爱好者浏览信息。下方文字和图像搭配，清晰地介绍了滑雪场的信息，整体设计使人印象深刻。

13.2.2任务效果本任务将使用“Table”按钮插入表格，以布局网页，使用“CSS设计器”面板设置表格、单元格的背景图像，以及文字的颜色、大小和字体，使用“属性”面板设置单元格的高度。效果图

13.2.3任务制作1．制作导航条2．制作内容区域3．制作项目区域和底部区域

任务13.3户外运动网页任务分析任务效果任务制作

13.3.1任务分析户外运动是一种健康的生活方式，融合了娱乐、锻炼和自然体验。户外运动往往充满挑战性，包括徒步旅行、登山、露营等，能够培养个人毅力、团队合作精神，并增强野外生存能力。本网页旨在宣传户外运动，并组织各类户外活动，所以设计应突出户外活动的挑战性和乐趣。在网页制作过程中，将攀岩运动作为背景，表现出户外运动的惊险与刺激，导航条放在网页的顶部，方便浏览者浏览。用户外运动的图像表示户外运动的类别，这些图像放置在页面的中间位置，明确、醒目，下方的其他详细信息可使浏览者有种希望参与其中的冲动。

13.3.2任务效果本任务将使用“Table”按钮插入表格以布局网页，使用“Image”按钮插入图像，使用“CSS设计器”面板设置表格、单元格的背景图像、边线效果，以及文字的大小、颜色和行距，使用“属性”面板设置单元格的高度。效果图

13.3.3任务制作1．制作导航条和焦点图区域2．制作项目介绍区域3．制作底部区域

项目实践—平遥古城旅游网页效果图使用“页面属性”命令改变页面字体、大小、颜色和页边距，使用“Image”按钮插入图像，使用“CSS设计器”面板设置单元格背景、文字颜色和行距。

课后习题—私人定制旅游网页效果图使用“页面属性”命令改变页面字体、大小、颜色、背景颜色和页边距，使用“Image”按钮插入图像；使用“CSS设计器”面板设置单元格背景、文字颜色和行距，使用“属性”面板改变单元格的高度和宽度。项目引入：品牌展示网页是企业展示自身品牌形象和核心价值的重要平台，通过视觉设计和内容编排向用户呈现品牌故事、产品与服务、成功案例等关键信息。本项目以两个类型的品牌展示网页为例，讲解品牌展示网页的设计方法和制作技巧。项目14品牌展示网页了解品牌展示网页的功能掌握品牌展示网页的设计流程掌握品牌展示网页的布局掌握品牌展示网页的制作方法项目目标掌握“品茗茶业网页”的关键制作步骤掌握“拓森科技网页”的关键制作步骤技能目标培养批判性思维和解决问题的能力培养责任感和上进心素养目标任务14.1品牌展示网页概述品牌展示网页旨在全面介绍和推广品牌，通过视觉效果和内容的结合传达品牌的核心价值和独特魅力，提高品牌知名度和吸引力。其目标是吸引潜在客户、合作伙伴和投资者，提高他们对品牌的信任度和忠诚度。

任务14.2品茗茶业网页任务分析任务效果任务制作

14.2.1任务分析茶是一种源自我国的古老饮品，承载着丰富的文化内涵。茶有许多品种，每种茶都有其独特的风味和功效。茶不仅是一种饮品，也是一种生活方式和精神象征。本任务以品茗茶业品牌展示为例，设计制作一个茶叶网页，旨在为茶叶爱好者提供全面的茶文化信息和优质的茶叶产品。通过此网页，用户可以了解不同种类的茶叶、茶文化历史、茶叶制作工艺等内容，同时可以购买到优质的茶叶产品，满足品茶需求。在网页制作过程中，浅色的背景与茶山相互衬托，突出了茶叶的生机与清新，导航条的设计简洁清晰，方便浏览者浏览。通过对文字和图像的精心编排和分类设计提供给浏览者最需要了解的相关信息。

14.2.2任务效果本任务将使用“页面属性”命令设置页面属性，使用“Table”按钮插入表格，使用“Image”按钮插入图像，使用“CSS设计器”面板设置文字的大小、颜色和行距。效果图

14.2.3任务制作1．设置页面属性并制作导航条2．制作内容区域3．制作底部区域

任务14.3拓森科技网页任务分析任务效果任务制作

14.3.1任务分析拓森是一家以提供科技数字化创新服务为主的专业化体验咨询公司。以数据为核心，通过品牌传播和数字营销等服务，满足用户多样化的传播与创意需求。本案例是为企业设计制作网站，旨在为用户提供最新的服务和行业趋势，以满足用户对企业服务的了解，促进交流与创新。在网页制作过程中，通过简洁清晰的导航条、富有视觉冲击力的Banner、详细的公司简介、明确的核心业务展示和强大的合作伙伴展示，体现公司的实力和品牌价值，引导用户进一步探索和合作。

14.3.2任务效果本任务将使用“页面属性”命令设置页面字体、大小、颜色、页边距及页面标题，使用“Table”按钮布局页面，使用“Image”按钮插入图像，添加网页标志和广告条，使用“CSS设计器”面板设置单元格背景、文字颜色、文字大小及文字行距，使用“属性”面板设置单元格的宽度及高度。效果图

14.3.3任务制作1．制作导航条2．制作公司简介区域3．制作核心业务和合作伙伴区域

项目实践—思美化妆品网页效果图使用“Table”按钮插入表格，使用“Image”按钮插入图像，使用“属性”面板设置单元格的宽度、高度及背景颜色，使用“CSS设计器”面板设置文字的颜色、大小。

课后习题—东方木品家具网页效果图使用“页面属性”命令设置页面字体、大小、颜色及页边距、页面标题，使用“Image”按钮插入装饰性图像；使用“属性”面板设置单元格高度和对齐方式，使用“CSS设计器”面板设置文字的大小、颜色及行距。项目引入：近年来，电子商务发展迅速。它是数字化商业社会的核心，是未来商业发展的主流方式。随着时代的发展，不具备网上交易能力的企业可能会失去广阔的市场，以致于无法在未来的市场竞争中存活。本项目以两个类型的电子商务网页为例，讲解电子商务网页的设计方法和制作技巧。项目15电子商务网页了解电子商务网页的功能掌握电子商务网页的设计流程掌握电子商务网页的布局掌握电子商务网页的制作方法项目目标掌握“电子购物平台网页”的关键制作步骤掌握“生活家具网页”的关键制作步骤技能目标培养创新思维和解决问题的能力培养社会责任感和公民意识培养积极向上的乐观心态素养目标任务15.1电子商务网页概述随着互联网技术的飞速发展，电子商务已