网页设计与制作(Dreamweaver-CS6)教案(第2版)(DOC 114页).doc

1、隆昌市城关职业中学教案授课教师郑昌全授课班级高2018级电子商务班课题网页设计基础课时2 课型理论课授课日期教学目标1、知识与技能目标：了解网站、网页的基本概念；了解WWW服务的基本概念及工作原理；2、过程与方法目标：了解网页色彩搭配的原则；3、情感态度与价值观： 培养严谨的科学态度教学重点网页的基础知识。教学难点网页的配色方案。教学方法讲授教具与学具准备一体机教学过程一Internet概述Internet，中文名称为“因特网”或“国际互联网”，是利用通信线路和通信设备将世界各地的计算机网络、主机和个人计算机互相连接起来，在网络协议控制下所构成的全球互联网系统。Internet提供的服务主要包

2、括万维网（WWW）、电子邮件（E-Mail）、文件传输（FTP）、远程登录（Telnet）等。 从每天的新闻报告、天气资讯，到在线音乐、网络视频、QQ、微博、微信，机票预订、旅馆安排、网上购物、证券交易等活动，网络已经渗透到我们生活的各个角落。二WWW服务 WWW 是 World Wide Web的缩写，也称为“万维网”。WWW是一种基于HTTP的交互式多媒体信息检索工具。 WWW服务采用客户机/服务器工作模式，由WWW浏览器、Web服务器和WWW协议组成。用户通过客户端的浏览器，向Web服务器发出URL请求，Web服务器接收并处理用户请求后，将网页返回给客户端，浏览器接收到网页后对其进行解释

3、，最终呈现给用户。WWW浏览器是专门来定位和访问Web信息的应用程序。常用的浏览器软件包括Microsoft公司的Internet Explorer和Netscape公司的Navigator。三Web站点和网页 Web站点，又称为网站，是指在因特网上，根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合，其运作原理如图所示。网页是构成网站的基本元素，一般又称作HTML文档，是一种可以在互联网上传输，能被浏览器识别和翻译成页面并显示出来的文件。 网页分为静态网页和动态网页，以 htm 或 html 为扩展名的文件，为静态网页。根据采用服务器技术的不同，网页扩展名又有ASP、P

4、HP、JSP等，这些网页称为动态网页。 当用户在浏览器的地址栏中输入网站的URL后见到的第一个网页称为网站的主页。 主页是网站中所有网页的索引页，通过单击主页上的超链接可以打开其他的网页。四、HTTP和URLHTTP：超文本传输协议，是互联网上应用最为广泛的一种网络协议，它允许将HTML文档从 Web 服务器传送到 WWW浏览器。Internet中的Web服务器数量众多，且每台服务器都包含有多个网页，用户要想在众多的网页中指明要获得的网页，就必须借助于统一资源定位符（URL, Uniform Resource Locators）进行资源定位。URL由三个部分组成：协议、主机名、路径及文件名。例

5、如：某网页的URL为： /wj1.html其中http:是采用的协议，是主机名，news指网页的路径（存储网页的文件夹），wj1.html是要访问的网页文件名。用户只要在浏览器的地址栏中输入要浏览网页的URL，便可以浏览到该网页。五色彩的基础知识色彩是网站中最主要的组成部分，网站页面的色彩处理得好，可以锦上添花，达到事半功倍的效果。色彩一般分为无彩色和有彩色两大类。无彩色是指黑、灰、白等不带颜色的色彩，有彩色是指红、黄、蓝等带有颜色的色彩。 （1）色彩的三要素：色相：指色彩的相貌，是色彩最显著的特征。明度：指色彩本身的明暗深浅程度，简单来说就是指色彩的程度。纯度：指色彩本身的鲜艳程序，又称为色

6、彩的饱和度。（2）色彩的感觉红色：是最引人注目的色彩，具有强烈的感染力，象征热情、喜庆、幸福。在色彩配合中常起着主色和重要的调和对比作用，是使用得最多的色。绿色：是植物是色彩，象征着平静、健康、健全、和谐和安全。蓝色：使人联想到天空、海洋，给人以爽朗、清凉的感觉，象征着平静、稳定性、和谐、统一、信任。黄色：给人明朗愉快的感觉，象征着光明、希望、高贵、愉快。橙色：介于红色与黄色之间，可以营造一种温馨的氛围，象征着温馨、时尚、轻快。紫色：是一种优雅、高贵、充满灵性并能激发创造力的颜色，象征着优雅、高贵、神秘、忧郁。白色：给人以干净整洁的感觉，象征着纯洁、天真、干净、轻松、神圣。黑色：是一种比较经典

7、的色彩，象征着严肃、神秘、威严、深沉、压抑。灰色：是一种可以衬托任何色彩的颜色，象征温和、谦让、平凡、考究。六色彩的搭配原则（1）网页色彩搭配时，要善用单色、对比色、邻近色和同类色。（2）网页要用与众不同的色彩，不同类型的网站配以不同的色彩，从而表达不同的情感诉求。（3）色彩要和网站的内容、文化氛围相符合，以便更好的突出网站的特色。（4）网页配色时，尽量把颜色控制在三种之内，以免使页面产生“乱”的效果七网站常见的配色方案（1）儿童类网站：常运用幸福感强烈、充满温情、智慧和希望的黄色；干净、清澈的蓝色；渲染朝气、健康、自然的绿色；营造温馨氛围，活泼、朝气的橙色。（2）教育类网站：常运用平静、清澈

8、的蓝色；充满希望的绿色；营造活泼、朝气的橙色。（3）企业类网站：常运用沉稳、冷静、严谨、成熟的冷色调蓝色，给人一种稳定感，使访问者容易建立对网站的信任。（4）购物类网站：常运用红色、黄色、橙色等暖色调渲染氛围，让浏览者在购物的同时感觉到轻松和愉快。（5）旅游休闲类网站：常运用代表大自然、健康和希望的绿色，代表天空、海洋，干净清澈的蓝色。批注：板书设计1、 Internet概述2、 WWW服务3、 Web站点和网页4、 色彩的基础知识5、 色彩的搭配原则6、 网站常见的配色方案作业布置完成 任务一 体验Html文档网页基础教学后记隆昌市城关职业中学教案授课教师郑昌全授课班级高2018级电子商务班

9、课题网页设计基础课时2课型上机操作课授课日期教学目标1、知识与技能目标：了解网站、网页的基本概念；了解WWW服务的基本概念及工作原理；2、过程与方法目标：了解网页色彩搭配的原则；3、情感态度与价值观：培养严谨的科学态度教学重点网页的基础知识。教学难点网页的配色方案。教学方法案例教学教具与学具准备电脑教学过程一、 学生完成上机任务任务1：体验HTML文档网页基础二、 老师巡视并解答学生遇到的问题批注：板书设计作业布置教学后记隆昌市城关职业中学教案授课教师郑昌全授课班级高2018级电子商务班课题HTML文档入门课时2课型理论课授课日期教学目标1、知识与技能目标：理解常见的HTML标记的格式、功能和

10、使用；2、过程与方法目标：学会使用HTML源代码制作简单网页的方法3、情感态度与价值观： 培养学生的团队合作精神教学重点HTML文档的基本结构及常用标记。教学难点JavaScript脚本语言的基本语法。教学方法讲授教具与学具准备电脑教学过程一网站设计常用软件1.网站设计开发软件（1）文本编辑器（2）Frontpage（3）Dreamweaver2.网页美化工具（1）Photoshop（2）Fireworks（3）Flash二HTML文档入门1HTML语言概述HTML（Hypertext Marked Language，超文本标记语言）是用于创建Web文档的一种标记语言。2HTML文档基本结构一

11、个HTML文档是由一系列的网页元素和标记组成的，HTML用标记来规定元素的属性和它在文件中的位置。HTML文档的结构包括头部分和主体部分两大部分,具体结构如图所示。3HTML文档基本结构（1）HTML文档包括3个主要标记，文档标记、头部标记和主体标记。（2）标记不区分大小写。（3）所有的标记都要用尖括号括起来。标记用于HTML文档的最前面，用来标识HTML文档的开始，放在HTML文档的最后面，用来标识HTML文档的结束，这两个标记必须成对使用。在内，称为文件头部，可以包含、等标记，这部分信息不会在浏览器的窗口中显示出来。在内，称为正文主体，可包含、等标记，其内容将在浏览器窗口中显示出来。（3）

12、文字标记格式：文本内容说明： 标记用于设置网页中文字的字号、字体、颜色等属性。设置字号时，（最小）、（最大）、（比预设字大一级）、（比预设字小一级）。（4）段落标记格式：段落文本说明：由标记所标识的文字代表同一个段落的文字。其中align属性有left、center和right三个参数，分别代表左对齐、居中对齐和右对齐。（5）换行标记格式：说明：是个单标记，HTML文件中任何位置只要使用了标记，当文件显示在浏览器中时，该位置之后的文字将显示于下一行。（6）水平线标记格式：说明：在网页中插入一条水平分隔线，将不同的内容信息分开，使文字看起来清晰、明确。noshade用于设置水平为实心线（默认为阴

13、影线）。（7）图像标记格式：说明：图像地址可以是本地计算机上的文件，也可以是一个URL地址，但图像必须是GIF、JPG/JPEG或PNG格式的，其他格式的图像不能被插入到网页中。 Alt参数用于设置图像的说明信息，当浏览器不能显示图像时，则用该参数指定的文本替换特定的图片。若图片正常显示，则当鼠标指该图片时也会显示该文字。（8）超链接标记格式：文本或图像说明：为标记中的文本或图像添加超链接目标，浏览网页时单击可打开指定的目标文件。target用于指定打开目标窗口的方式，默认情况是在当前窗口中打开，如果要在新窗口中打开目标窗口，则可将target的属性值设为_blank。根据链接目标的不同，可将

14、超链接分为以下几项：内部链接，链接到本地计算机上的文件，例如：单击查看1.html文件内容外部链接，链接到本地站点以外其他任何一个站点上的文件，例如：单击打开新浪网E-mail链接，链接到一个电子邮件地址，单击将启动默认E-mail程序发送信件，例如：请给我发信锚记链接，在某个Web页面中创建一个被称为“锚点”的标记，让页面上的另外一个位置引用，相当于在某个文件中重要之处做上书签，需要该部分时直接查找书签就能找到此部分。（9）表格标记表格标记由表格标记、行标记和单元格标记3部分组成。表格标记行标记 单元格标记 说明：单元格边距是指单元格内容与单元边框之间的像素数，单元格间距是指相邻单元格之间的

15、距离。菜单域下拉菜单： 菜单中的第1个值 菜单中的第2个值 滚动菜单： 菜单中的第1个值 菜单中的第2个值 按钮域提交按钮：所输入的内容提交给相关程序，让服务器对其进行处理：重置按钮：把刚输入的内容清除，重新输入：（11）滚动标记格式：滚动的方方文本JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言。使用它的目的是与HTML语言一起实现在一个Web页面中与Web客户交互作用。1.常量在JavaScript中，常量有以下6种基本类型（1）整型常量：可以使用十六进制、八进制和十进制表示。（2）实型常量：由整数部分加小数部分表示，如12.12、125.369等。（3）布尔值：布尔常

16、量只有两种状态：true和false。（4）字符型常量：使用单引号或双引号括起来的一个或几个字符。（5）空值：JavaScript中有一个空值null，表示什么也没有。（6）特殊字符：JavaScript有以反斜杠（）开头的不可显示的特殊字符。2变量变量中存取数据、提供存放信息的容器。包括整数数量、字符型变量、布尔型变量和实数数量。批注：板书设计作业布置教学后记隆昌市城关职业中学教案授课教师郑昌全授课班级高2018级电子商务班课题HTML文档入门课时2课型上机操作课授课日期教学目标1、知识与技能目标：理解常见的HTML标记的格式、功能和使用；2、过程与方法目标：学会使用HTML源代码制作简单网

17、页的方法3、情感态度与价值观：培养学生的团队合作精神教学重点HTML文档的基本结构及常用标记。教学难点JavaScript脚本语言的基本语法。教学方法案例教学法教具与学具准备电脑教学过程一、 学生完成上机任务任务2：一个简单的JavaScript加法程序二老师巡视并解答学生遇到的问题批注：板书设计作业布置教学后记隆昌市城关职业中学教案授课教师郑昌全授课班级高2018级电子商务班课题Dreamweaver初级应用课时2课型理论课授课日期教学目标1、知识与技能目标：本地站点的创建与编辑方法。2、过程与方法目标： 学会网页文件的新建、保存、预览等基本操作。3、情感态度与价值观： 培养团队合作精神教学

18、重点掌握文本的属性设置；教学难点掌握CSS样式的基本操作；教学方法讲授法教具与学具准备一体机教学过程一、 Dreamweaver的工作界面1工作区切换器设计器：可以弥补编程能力较差带来的缺陷，直观可视，设计和修改简单方便。编码人员（高级）：用于那些主要用代码来制作网页的用户使用.经典：便于习惯使用之前版本布局模式的设计者使用.双重屏幕：适用于在计算机上有两个显示器的用户。2菜单栏 提供了10个主菜单项，利用菜单栏基本上能够实现Dreamweaver的所有功能。菜单项按照功能的不同进行划分，使用户使用方便。例如，“文件”菜单中包含了对文档操作的命令；“插入”菜单中包含了向网页中插入各种页面元素和

19、创建超链接的命令；“站点”菜单中包含了创建和管理站点的相关命令。3文档工具栏和文档窗口“文档”工具栏包含了“文档”窗口视图模式的切换按钮，以及一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项; “文档”窗口用来显示当前打开的文档，用户在这里进行网页的编辑制作。4状态栏5“属性”面板 “属性”面板用于查看和设置当前选定对象（如文本、图像等）的最常用属性。该面板的内容会根据选择对象的不同而显示不同的属性。6面板组 Dreamweaver中的面板通常被组织到面板组中，其中的面板以选项卡的形式显示。单击面板组右上角的“展开面板”或“折叠为图标”按钮，可以展开或折叠面板组。单击面板标签名称

20、可以切换到该面板，双击标签名称，可以展开或折叠该面板。拖动面板标签可以在面板组内改变该面板的排列位置，或将面板拖动到另一个面板组的标签处，当出现蓝色突出显示的区域时，释放鼠标可创建新的面板组。向外拖动面板或面板组可使其变为浮动的状态。浮动的面板或面板组可以停靠在一个固定的位置，拖动面板或面板组到要停靠位置的边缘，当出现蓝色线时释放鼠标即可。7“插入”面板 面板包含将各种网页元素插入到文档的快捷按钮。“常用”：用于创建和插入最常用的对象，例如图像、表格、媒体和链接等。 “布局”：用于插入表格、框架和 Spry构件等对象，可以定义页面的布局。“表单”：用于创建表单和插入表单元素，可以实现网页的交互

21、性。 “数据”：主要用来添加与网站后台数据库相关的动态交互元素。 “Spry”：主要包含Spry工具按钮，用来创建给站点访问者带来更多丰富体验的网页。 “Incontext Editing”：包含供生成Incontext编辑页面的按钮。通过该功能，网页设计人员不但可以维护其站点设计的完整性，同时允许客户处理自己的更新。“文本”：用于插入各种文本格式和列表格式的标签，如B（粗体）、h1(标题1)。“收藏夹”：用于将“插入”栏中最常用的按钮分组和组织到某一公共位置。二、 站点的创建与管理1创建本地站点 步骤： （1）运行Dreamweaver，选择菜单“站点新建站点”命令。 （2）选择“站点设置对

22、象”对话框对话框中的“站点”选项，在“站点名称”文本框中输入用户自定的站点名称。在“本地站点文件夹”文本框中直接输入站点文件夹的路径，或单击后面的“浏览文件夹” 按钮，在打开的“选择根文件夹”对话框中进行选择。（3）如果要对站点属性进行详细的设置和调整，可以选择“高级设置”选项。（4）在“站点设置对象”对话框中单击“保存”按钮，完成本地站点的创建，此时“文件”面板中将显示站点中所有文件和文件夹。2编辑站点 （1）选择菜单“站点管理站点”命令，或在“文件”面板的下拉列表中选择“管理站点”命令，打开“管理站点”对话框。 （2）选择要编辑的站点，单击“编辑”按钮或直接双击站点名称，在弹出的“站点设置

23、对象”对话框中可以对站点信息进行修改。 （3）编辑完成后，单击“保存”按钮，返回“管理站点”对话框，单击“完成”按钮。3复制站点 （1）选择菜单“站点管理站点”命令，打开“管理站点”对话框，在弹出的“管理站点”对话框中选择要复制的站点，单击“复制”按钮，将会出现新站点。 （2）用鼠标双击新复制出的站点，在弹出的“站点设置对象”对话框中进行修改设置，单击“保存”按钮，返回“管理站点”对话框。4删除站点 选择菜单“站点管理站点”命令，打开“管理站点”对话框，选择要删除的站点，单击“删除”按钮，即可将站点删除。5导出和导入站点 如果在两台计算机之间移动站点，或多个用户共同开发网站，可通过Dreamw

24、eaver的导入和导出站点功能来实现。 （1）导出站点 “站点管理站点”命令，打开“管理站点”对话框，选择要导出的站点，单击“导出”按钮。在弹出的“导出站点”对话框中，选择站点定义文件的保存位置，输入站点定义文件的文件名，单击“保存”按钮。导出站点时，只是将站点的定义信息保存到站点定义文件（扩展名是.ste）中，不包括站点文件夹中的文件和文件夹。 （2）导入站点 “站点管理站点”命令，打开“管理站点”对话框，单击“导入”按钮，弹出“导入站点”对话框。选择导入站点定义文件,单击“打开”，选择“管理站点”对话框中“完成”按钮。站点被导入后，导入的站点将出现在“文件”面板的列表中，如果有重名站点，则

25、导入的站点名称后面自动加上数字“2”。三文档的基本操作1创建文件夹 在本地站点中创建文件夹可使用以下方法： 通过“我的电脑”或“资源管理器”直接在站点文件夹中进行创建。 在“文件”面板中选择站点名称或文件夹，单击鼠标右键，选择“新建文件夹”命令，输入文件夹的名称，按【Enter】键完成。2创建空白网页文件 启动Dreamweaver后，窗口中会出现一个开始页面，单击“新建”栏“HTML”选项即可创建一个空白网页。选择菜单“文件新建”命令，打开“新建文档”对话框，选择“空白页”选项卡中的“HTML”页面类型，在“布局”列表中选择“无”，单击“创建”按钮。“文件”面板中选择站点，单击鼠标右键，从弹

26、出的快捷菜单中选择“新建文件”命令，输入文件的名称，按【Enter】键完成。3保存网页文件 菜单“文件保存”命令或按【Ctrl+S】组合键可对当前文档进行保存。如果对打开的文档进行了修改，但尚未保存，文件名后将自动显示一个“*”保存后“*”将消失。4文档的打开和预览 菜单“文件打开”命令，弹出“打开”对话框，选择要打开的文件，单击“打开”按钮，或“文件”面板中，选择要打开的文档，右键单击鼠标，在弹出的快捷菜单中选择“打开”命令，或直接双击鼠标都可以打开该文档。菜单“文件在浏览器中预览IExplore”命令，或按【F12】键。5移动和复制文件（文件夹） 在“文件”面板中，选择要移动或复制的文件和

27、文件夹。单击鼠标右键，在弹出的快捷菜单中选择“编辑拷贝”命令，然后选择目标位置，从快捷菜单中选择“编辑粘贴”命令，可完成文件或文件夹的复制操作。 单击鼠标右键，在弹出的快捷菜单中选择“编辑剪切”命令，然后选择目标位置，从快捷菜单中选择“编辑粘贴”命令，可完成文件或文件夹的移动操作。用鼠标直接将文件或文件夹拖动到新位置，可完成文件或文件夹的移动操作。6删除文件（文件夹） 在“文件”面板中，选择要删除的文件或文件夹，右单击鼠标，从弹出的快捷菜单中选择“编辑删除”命令或直接按【Del】键。批注：板书设计一、 Dreamweaver的工作界面二、 站点的创建与管理三、 文档的基本操作作业布置完成任务3

28、：独具匠心创建与管理本地站点教学后记隆昌市城关职业中学教案授课教师郑昌全授课班级高2018级电子商务班课题Dreamweaver初级应用课时2课型上机操作课授课日期教学目标1、知识与技能目标：本地站点的创建与编辑方法。2、过程与方法目标：学会网页文件的新建、保存、预览等基本操作。3、情感态度与价值观：培养团队合作精神教学重点掌握文本的属性设置；教学难点掌握CSS样式的基本操作；教学方法案例法教具与学具准备电脑教学过程一、学生完成上机任务任务3：独具匠心创建与管理本地站点二老师巡视并解答学生遇到的问题批注：板书设计作业布置教学后记隆昌市城关职业中学教案授课教师郑昌全授课班级高2018级电子商务班

29、课题页面属性课时2课型理论课授课日期教学目标1、知识与技能目标： 学会页面属性的设置；2、过程与方法目标：页面属性的设置方法；3、情感态度与价值观： 培养科学严谨的精神教学重点页面属性的设置方法；教学难点页面属性的设置方法；教学方法讲授教具与学具准备一体机教学过程一 页面属性1. 外观在“外观”选项中可以设置页面的默认字体、背景颜色和页面边距等。2.链接 在“链接”选项中可以设置链接的字体、颜色和下划线样式等，如图所示。3.标题/编码 在“标题/编码”选项中可以设置网页标题和编码类别，如图所示。4HTML网页中的META属性 （1）name属性 META标签中的name属性是针对网络搜索引擎对

30、网页内容收录进行设置。在网页中需要设置这些属性以便于搜索引擎的收录。 （2）http-equiv属性语言与编码网页刷新与跳转设定网页的到期时间禁止浏览器从缓存中调用页面设置cookie时间网页的等级评定强制页面在窗口中以独立页面显示设置网页加载或离开时的过渡效果二 文本的输入1在网页中添加文本（1）添加普通文本，可以采用以下三种方法。直接通过键盘输入文本。在其他应用程序中，选择文本，按Ctrl+C键复制，切换到DreamWeaver文档窗口,选择菜单“编辑粘贴”命令（或按Ctrl+V键）复制文本。选择菜单“文件导入word文档”命令，弹出“导入Word文档”对话框，选择要导入的Word文，单击

31、“打开”按钮，将该word文档中的全部文本添加到文档窗口中。(2) 插入空格按Ctrl+Shift+Space键。选择菜单“插入记录HTML特殊字符不换行空格”命令。选择插入栏“文本”类别中的按钮，在下拉菜单中选择“不换行空格”命令。在代码视图窗口中，输入空格代码 。切换中文输入法为全角状态，按空格键输入。(3) 插入特殊字符 选择菜单“插入HTML”中“特殊字符”命令，在子菜单中选择要插入的特殊字符。 (4) 插入日期 在“文档”窗口中，将插入点定位到需要插入日期的位置。选择菜单“插入日期”命令或单击“插入”面板“常用”类别中的“日期”按钮 ，弹出“插入日期”对话框，设置完成后，单

32、击“确定”按钮。2文本的分段和换行 强制换行有段落换行和换行符换行两种方式。 (1) 段落换行 在换行位置按Enter键，会自动添加段落标记和，生成新的段落，并且在两段之间会空出一行。 (2) 换行符换行按Shift+Enter键。选择菜单“插入记录HTML特殊字符换行符”命令。选择插入栏“文本”类别中的按钮，在下拉菜单中选择“换行符”命令。代码视图窗口中，输入换行代码标记 。3文本的属性设置（1）在“CSS”界面中设置文本格式单击文本属性面板中的“字体”列表按钮，选择“编辑字体列表”命令，弹出“编辑字体列表”对话框，如图所示。 在“可用字体”列表中选择要添加的字体，双击鼠标或单击 按钮，将其

33、添加到“选择的字体”列表中，可以同时添加多种字体。单击 按钮，可在“字体列表”表中添加字体列表项。在“字体列表”中选择字体列表项，单击 按钮，可将其删除。字体添加完毕后，单击“确定”按钮。 (2) 设置文字大小在属性面板的“大小”列表中选择相应的大小级别和单位，可以更改选择文字的大小。(3) 设置文本颜色系统默认文本颜色是黑色，要设置文本其他颜色，先选择文本，单击属性面板中的，在颜色拾取器中选择颜色，或在右边的文本框中输入颜色的名称或16进制代码，例如：red或#FF0000。（4）在“HTML”界面中设置段落格式设置段落标题的格式：在“格式”下拉列表中选择“标题 1 - 标题 6”即可设置段

34、落的标题格式。若想去除已有的格式，可将格式选项设为“无”。设置段落的缩进方式创建项目列表和编号列表4文本的属性设置 设置文本格式，需先选中文本，出现如图文本属性面板，可以对文本进行相应的属性设置。5插入水平线 (1) 创建水平线 光标定位于需要插入水平线的位置，选择菜单“插入记录HTML水平线”命令。l (2) 修改水平线选择水平线，窗口下方出现如图所示的属性面板，通过属性面板，可以设置水平线的一些属性。设置水平线颜色。右击水平线，在弹出菜单中选择“编辑标签”命令，打开 “标签编辑器”对话框。选择“浏览器特定的”选项，单击，在颜色拾取中选择合适颜色，单击“确定”按钮。批注：板书设计一、 页面属

35、性二、 文本的输入作业布置任务4：独具匠心文本的设置教学后记隆昌市城关职业中学教案授课教师郑昌全授课班级高2018级电子商务班课题任务4：独具匠心文本的设置课时2课型上机操作课授课日期教学目标1、知识与技能目标：学会页面属性的设置；2、过程与方法目标：页面属性的设置方法；3、情感态度与价值观：培养科学严谨的精神教学重点页面属性的设置方法；教学难点页面属性的设置方法；教学方法案例法教具与学具准备电脑教学过程一 学生上机完成下面的任务任务4：独具匠心文本的设置二 老师解决学生遇到 的问题批注：板书设计作业布置教学后记隆昌市城关职业中学教案授课教师郑昌全授课班级高2018级电子商务班课题CSS样式的

36、基本操作课时2课型理论课授课日期教学目标1、知识与技能目标： 掌握CSS样式的基本操作；2、过程与方法目标： 理解CSS样式的意义及方法3、情感态度与价值观： 培养团队协作精神教学重点掌握CSS样式的基本操作；教学难点掌握CSS样式的基本操作；教学方法讲授法教具与学具准备一体机教学过程1“CSS样式”面板 可以使用“CSS 样式”面板查看、创建、编辑和删除 CSS 样式，并且可以将外部样式表附加到文档。 执行以下操作之一均可打开“CSS样式”面板，如图所示。选择“窗口CSS样式”命令。按Shift+F11快捷键。单击属性面板上的“CSS面板”按钮。2使用“CSS样式”面板创建CSS样式 （1）

37、打开“CSS样式”面板，单击面板右下方的“新建CSS规则”按钮 ，打开“新建CSS规则”对话框 （2）选择要创建的CSS样式的类型 （3）选择定义样式的位置，然后单击“确定”按钮。 （4）如果选择的是“新建样式表文件”选项，则打开“保存样式表文件为”对话框，选择样式表文件的保存位置，输入样式表文件名，单击“保存”按钮。如果选择某一样式表文件，则生成的样式将追加到该样式表文件中。如果选择的是“仅对该文档”选项，则直接打开“CSS规则定义”对话框。 （5）在“CSS规则定义”对话框中，从“分类”列表中选择样式选项，完成样式属性的设置后，单击“确定”按钮。3定义CSS样式的属性 （1）定义CSS样式

38、“类型”属性 在“CSS规则定义”对话框中的“分类”列表中选择“类型”选项，可以定义CSS样式的基本字体和进行类型设置; （2）定义CSS样式“背景”属性 （3）定义CSS样式“区块”属性,定义CSS样式的标签及属性的间距和对齐方式; （4）定义CSS样式“方框”属性,控制元素在页面上放置方式的标签和属性设置; （5）定义CSS样式“边框”属性,定义元素周围边框的设置; （6）定义CSS样式“列表”属性,为列表标签定义列表设置，如项目符号的大小和类型; （7）定义CSS样式“定位”属性,用来确定与选定的 CSS 样式相关的内容在页面上的定位方式; （8）定义CSS样式“扩展”属性,用来定义光标

39、、图像等内容的视觉效果4管理CSS样式（1）编辑CSS样式;（2）应用CSS样式（3）从选定内容删除类样式（4）删除CSS样式（5）重命名CSS样式（6）链接外部CSS样式表 提示：创建类和ID样式时，样式名称必须以句点和#开头，并且可以包含任何字母和数字组合。如果没有输入开头的句点和#，Dreamweaver 将自动为名称添加句点和#。样式被编辑修改后，将会自动更新应用该样式的对象。样式被删除后，应用于该样式的所有对象也将去除所套用的格式批注：板书设计1“CSS样式”面板2使用“CSS样式”面板创建CSS样式3定义CSS样式的属性4管理CSS样式作业布置任务5：独具匠心多媒体网页设计教学后记

40、隆昌市城关职业中学教案授课教师郑昌全授课班级高2018级电子商务班课题CSS样式的基本操作课时2课型上机操作课授课日期教学目标1、知识与技能目标：掌握CSS样式的基本操作；2、过程与方法目标：理解CSS样式的意义及方法3、情感态度与价值观：培养团队协作精神教学重点掌握CSS样式的基本操作；教学难点理解CSS样式的意义及方法教学方法案例法教具与学具准备电脑教学过程一 学生上机完成案例任务5：独具匠心多媒体网页设计二 老师解决学生遇到的问题。批注：板书设计作业布置教学后记隆昌市城关职业中学教案授课教师郑昌全授课班级高2018级电子商务班课题图像的插入与编辑课时2课型理论课授课日期教学目标1、知识与技能目标： 学会图像的插入和属性设置；2、过程与方法目标： 能插入Flash动