网页设计与制作(Dreamweaver-CS6)教案(第2版).doc
《网页设计与制作(Dreamweaver-CS6)教案(第2版).doc》由会员分享,可在线阅读,更多相关《网页设计与制作(Dreamweaver-CS6)教案(第2版).doc(102页珍藏版)》请在三一办公上搜索。
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构件等对象,可以定义页面的布局。“表单”:用于创建表单和插入表单元素,可以实现网页的交互
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 设计 制作 Dreamweaver CS6 教案
链接地址:https://www.31ppt.com/p-4296406.html