《网页设计与制作》教案设计Word文档格式.docx

《网页设计与制作》教案设计Word文档格式.docx

《《网页设计与制作》教案设计Word文档格式.docx》由会员分享，可在线阅读，更多相关《《网页设计与制作》教案设计Word文档格式.docx（73页珍藏版）》请在冰豆网上搜索。

课程教案〔№:

1〕

授课内容

网页制作根底知识

课型

☑理论☐实践

授课学时

2

教学方法与手段

讲授法

教学目的与要求

本次课程将讲授网页制作的根本知识，使学生了解到什么是网页，网页制作涉与到哪些工具、网页与有什么区别，网页与普通的文档有什么区别等。

通过讲授也将使学生了解到网页的组成，网页语言的种类与各自特点；

动态网页与静态网页的定义；

Internet信息发布的原理等等内容。

教学重点与难点

教学重点：

1．Internet信息访问原理。

2．什么是网页？

（1）网页内容组成；

（2）网页编写语言种类与特点。

3．Dreamweaver8功能简介。

教学难点：

　　Internet信息访问原理；

网页编写语言种类与特点。

教学过程设计

一、根底知识

1．网页简介〔15分钟左右〕

网页：

是组成〔WorldWideWeb：

万维网〕的根本元素，也被称为页面或Web页。

不同的网页通过超联系在一起，构成了纵横交织结构。

就是一个相互的网页的集合，它们可以共享。

大的页面数量多达几十万，甚至上百万页，小的个人也可以只包含数个页面。

主页：

是中的一个特殊网页，它是在上进入的第一个网页，其中包含指向其他网页的超，通常主页的名称是固定的。

2．Internet简介〔5分钟左右〕

3．了解常用的网页制作工具〔10分钟左右〕

如：

Dreamweaver和FrontPage

4．了解美化网页的主要工具〔10分钟左右〕

〔1〕图像处理软件：

Photoshop、Fireworks、CorelDRAW等

〔2〕动画制作工具：

Flash

5．了解网页中的脚本语言〔10分钟左右〕

如：

VBScript、JavaScript

6．了解服务器端主要技术〔10分钟左右〕

服务器端脚本语言：

ASP、JSP、PHP、CGI等。

它们的形式与HTML有些类似，但功能更加强大，能够实现许多功能。

二、了解建立的根本流程〔10分钟左右〕

1．确定主题

2．搜集资料

3．规划

4．选择适宜的制作工具

5．制作网页

6．上传测试

7．推广宣传

8．维护更新

三、DreamweaverCS3根底〔20分钟左右〕

1．Dreamweaver的开展史

2．DreamweaverCS3的新功能

3．DreamweaverCS3工作区简介

4．网页文档的根本操作

作业/思考题：

1．列举你所了解的网页设计的常用工具和美化网页的主要工具

2．建立的根本流程有哪些步骤？

请归纳总结。

3．利用网上资源，在XX中搜索“网页配色方案〞关键词，下载相关的“网页配色方案〞文件，指导以后网页设计中的配色问题。

教学后记：

第一节课，应首先介绍开展的前景，重点分解Dreamweaver和其他软件的区别，提出利用网络传播信息，并由此讲述网络开展给网页带来的市场。

通过两节课的讲授，感觉到学生能对本课程产生比拟大的兴趣！

2〕

站点的创建与管理

本次课程将讲授站点的创建与管理知识，使学生了解到什么是站点，站点的种类，站点的作用，站点文件的管理。

站点的发布与网页的预览。

1．站点的创建；

2．站点文件的管理；

3．站点文件的预览；

4．站点地图的生成。

　　测试利用服务器技术的站点；

站点地图创建的条件；

远程站点的创建。

一、站点〔10分钟左右〕也称“〞，用来定位上的所有文件，是一系列通过超而相互联系的网页集合。

建立首先要在本地计算机上构建本地站点来管理站点中的文档，制作网页，测试完毕后，上传到Internet服务器。

二、新建本地站点〔20分钟左右〕

1．站点菜单->

新建站点

2．站点菜单->

管理站点->

新建

3．建立站点注意问题：

（1）用文件夹进展分类存储：

如网页文件存放在html文件夹中，图像文件存放在images文件夹中。

嵌套文件夹的层数不要太多，最多不超过三层，否如此超时会出错。

（2）文件命名要合理：

建议全部使用小写的文件名称，不要用中文文件名。

文件夹的名称最好用顾名思义的英文，方便以后修改维护。

文件名也要符合规X，比如首页一般命名为index.html或default.html。

三、文件的管理〔20分钟左右〕

1．文件的创建（鼠标右击站点->

新建文件；

文件菜单->

新建；

ctrl+N）；

2．文件的选择（鼠标点击单项选择；

按ctrl或shift键辅助多项选择）；

3．打开和编辑文件（双击）；

4．删除文件；

5．重命名文件（右击文件；

F2）；

6．保存与另存为文件：

ctrl+s/f12；

或通过文件菜单；

7．文件的复制，移动，关闭：

ctrl+c.ctrl+x，ctrl+w；

8．消除文件只读属性：

右击文件选择；

9．将文件设为首页：

和制作站点地图有关；

10．给文件添加设计备注：

备注文件的存放位置和文件的扩展名。

四、页面预览（F12键）〔20分钟左右〕

1．文件菜单->

在浏览器中预览->

选择浏览器

2．工具栏->

地球土标->

选择浏览器：

此时可通过〞添加浏览器〞选项来增加更多的浏览器

3．编辑菜单->

首选参数->

不选〞使用临时文件预览〞

五、站点的编辑和管理〔20分钟左右〕

1．站点管理器：

文件面板（窗口菜单或F8键）

2．打开现有本地站点

3．查看本地和远程的文件和地图

4．调整窗口视图

5．保存站点地图

6．重建站点缓存

7．站点编辑，复制，删除，导入与导出：

站点菜单->

管理站点

1．在制作网页前为什么要首先建立站点？

2．定义本地站点的含义是什么？

3．建立站点应该注意的问题？

的站点，好似一个班级，应该首先为班级起一个名称，并配备一个班主任，然后再陆续的参加一些学生。

这其实就是我们站点创建时应该为站点起一个名字，并设置一个首页，增加更多的超。

3〕

了解Dreamweaver的界面与站点的建立

☐理论☑实践

讲授法、演示法

利用DreamweaverCS3熟练创建本地.远程站点。

并掌握Dreamweaver的根本操作。

　　站点地图创建的条件；

1.本地站点的创建

（1）运行软件

（2）站点菜单->

（3）远程服务器连接选择为无

2.远程站点的创建

（3）远程服务器连接选择为FTP

3.IIS的安装

（1）我的电脑->

控制面板->

添加和删除程序

（2）选择添加windows组件

（3）勾选Internet信息服务，更新安装

4.创建利用服务器技术的站点

（3）是否利用服务器技术设置为是

（4）允许IIS，将默认站点的主目录设置为站点所对应的文件夹

（5）设置服务器站点的测试服务器为：

//localhost

5.站点文件的管理

站点文件的创建.编辑与预览

6.管理站点

（1）站点菜单->

（2）实现对站点创建.删除.编辑

（3）导出并重新导入站点

通过本次实训，让学生系统的掌握站点的创建与管理，了解各类站点的创建过程，并能正确的导出和导入站点文件。

4〕

HTML语言简介

1．了解HTML语言，重点掌握HTML文件的根本结构和语法格式；

2．掌握标记语言的用法；

3．熟记<

title>

标记、<

marquee>

标记与常用属性代码。

1．HTML文件的根本结构；

2．HTML语法格式；

　　设置网页标题；

设置网页关键字；

制作滚动文字。

一、HTML简介〔5分钟左右〕

HTML：

（HyperTextMarkupLanguage）是一种超文本标记语言，是网页制作的根本语言。

即通过将特定的标记放置在文本或图片或URL前后，来达到使该段文本或图片或URL以指定方式显示的目的。

二、HTML文件的根本结构〔10分钟左右〕

<

HTML>

head>

网页的标题<

/title>

/head>

body>

网页的主体内容

/body>

/HTML>

三、HTML语法格式〔20分钟左右〕

1．HTML标记一般格式

标记属性1=〞属性值1〞属性2=〞属性值2〞…>

对象

/标记>

说明：

标记除了上述格式，还有单标记，如下面的<

img>

标记；

属性书写不分先后顺序；

属性值用英文双撇号括住。

2．HTML语法规如此

HTML文件以纯文本格式形式存放，扩展名为“*.html〞或“*.htm〞。

HTML标记不区分大小写。

多数HTML标记可以嵌套，但不可以交叉。

HTML源文件中的换行、回车符和多个连续空格在显示效果中无效。

只有在设计视图中才有用。

在HTML源文件中，<

br>

为换行标记；

p>

/p>

为换段标记；

空格用&

nbsp;

表示。

四、HTML标记举例〔55分钟左右〕

1．设置网页标题：

标记

2．元信息标记：

meta>

标记的信息只显示在源代码中，浏览器中没有显示，通过设置<

标记的不同属性，可以定义页面中各种元数据，如页面的名称、关键词等多种信息。

3．制作滚动文字：

属性：

1　direction表示滚动的方向，值可以是left、right、up、down，默认为left。

2　behavior表示滚动的方式，值可以是scroll〔连续滚动〕、slide〔滑动一次〕、alternate〔来回滚动〕。

3　Loop表示循环的次数，值是正整数，默认为无线循环。

4　Scrollamount表示运动速度，值是正整数，默认为6。

5　Scrolldelay表示停顿时间，值是正整数，默认为0，单位是毫秒。

6　Align表示元素的垂直对齐方式，值可以是top、bottom、middle。

7　Height、width表示运动区域的高度和宽度，值是正整数或百分比，默认width=100%，height为标签内元素的高度。

事件：

onMouseOver=this.stop（）和onMouseOut=this.start（），表示当鼠标