网页设计与制作__教案Word格式.doc
《网页设计与制作__教案Word格式.doc》由会员分享，可在线阅读，更多相关《网页设计与制作__教案Word格式.doc（66页珍藏版）》请在冰点文库上搜索。
网站：
就是一个相互链接的网页的集合，它们可以共享。
大的网站页面数量多达几十万，甚至上百万页，小的个人网站也可以只包含数个页面。
主页：
是网站中的一个特殊网页，它是在WWW上进入网站的第一个网页，其中包含指向其他网页的超链接，通常主页的名称是固定的。
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．利用网上资源，在百度中搜索“网页配色方案”关键词，下载相关的“网页配色方案”文件，指导以后网页设计中的配色问题。
教学后记：
第一节课，应首先介绍网站发展的前景，重点分解Dreamweaver和其他软件的区别，提出利用网络传播信息，并由此讲述网络发展给网页带来的市场。
通过两节课的讲授，感觉到学生能对本课程产生比较大的兴趣！
第66页
2）
站点的创建与管理
本次课程将讲授网站站点的创建与管理知识，使学生了解到什么是站点，站点的种类，站点的作用，站点文件的管理。
站点的发布及网页的预览。
1．站点的创建；
2．站点文件的管理；
3．站点文件的预览；
4．站点地图的生成。
测试利用服务器技术的站点；
站点地图创建的条件；
远程站点的创建。
一、站点（10分钟左右）
也称“网站”，用来定位网站上的所有文件，是一系列通过超链接而相互联系的网页集合。
建立网站首先要在本地计算机上构建本地站点来管理站点中的文档，制作网页，测试完毕后，上传到Internet服务器。
二、新建本地站点（20分钟左右）
1．站点菜单->
新建站点
2．站点菜单->
管理站点->
新建
3．建立站点注意问题：
（1）用文件夹进行分类存储：
如网页文件存放在html文件夹中，图像文件存放在images文件夹中。
嵌套文件夹的层数不要太多，最多不超过三层，否则超链接时会出错。
（2）文件命名要合理：
建议全部使用小写的文件名称，不要用中文文件名。
文件夹的名称最好用顾名思义的英文，方便以后修改维护。
文件名也要符合规范，比如首页一般命名为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的界面及站点的建立
£
理论R实践
讲授法、演示法
利用DreamweaverCS3熟练创建本地.远程站点。
并掌握Dreamweaver的基本操作。
站点地图创建的条件；
1.本地站点的创建
（1）运行软件
（2）站点菜单->
（3）远程服务器连接选择为无
2.远程站点的创建
（3）远程服务器连接选择为FTP
3.IIS的安装
（1）我的电脑->
控制面板->
添加和删除程序
（2）选择添加windows组件
（3）勾选Internet信息服务，更新安装
4.创建利用服务器技术的站点
（3）是否利用服务器技术设置为是
（4）允许IIS，将默认站点的主目录设置为站点所对应的文件夹
（5）设置服务器站点的测试服务器为http：
//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．制作滚动文字：
属性：
① direction表示滚动的方向，值可以是left、right、up、down，默认为left。
② behavior表示滚动的方式，值可以是scroll（连续滚动）、slide（滑动一次）、alternate（来回滚动）。
③ Loop表示循环的次数，值是正整数，默认为无线循环。
④ Scrollamount表示运动速度，值是正整数，默认为6。
⑤ Scrolldelay表示停顿时间，值是正整数，默认为0，单位是毫秒。
⑥ Align表示元素的垂直对齐方式，值可以是top、bottom、middle。
⑦ Height、width表示运动区域的高度和宽度，值是正整数或百分比，默认width=100%，height为标签内元素的高度。
事件：
onMouseOver=this.stop（）和onMouseOut=this.start（），表示当鼠标浮到以上区域的时候滚动停止和当鼠标移开的时候又继续滚动。
1．关键字之间以英文逗号分隔。
关键词输入不是越多越好，因为大多数搜索引擎限制关键字的数量，所以设置关键字要精简才会被搜中率高。
2．什么是HTML？
HTML文件的基本结构是什么？
3．HTML标记的一般格式是什么？
虽然现在不懂HTML也能制作漂亮网页，但是只有掌握HTML，才可以更方便、更全面地控制网页，同时又一些网页设计离不开代码。
5）
网页文本的使用
本次课程将讲授网页制作过程中的文本使用，掌握各种特殊文本的输入，文本列表的使用。
1．特殊文本的输入及使用状态；
2．文本属性；
3．文本列表的使用；
4．在html中的文本代码。
1．有序列表和无序列表的区别；
2．描述性列表的制作。
一、文本的输入（10分钟左右）
1．换行与换段的输入
2．空白字符的输入
3．特殊符号的输入
4．日期与时间的插入
5．水平线的插入
二、文本的编辑（20分钟左右）
1．文本的选择：
鼠标拖选，按住shift+光标键选择
2．文本的删除，复制，移动，选择性粘贴
3．查找与替换：
ctrl+f
l文本对文本的替换
l带格式文本的替换
l源代码的替换
l文本高级及指定标签的替换
4．拼写检查：
shift+F7
三、文本的属性（15分钟左右）
1．属性工具栏：
窗口菜单
2．设置文本的格式.大小.字体.颜色（注意样式的变化）
3．设置文本对齐方式：
注意html代码中的变化
四、文本列表（30分钟左右）
1．项目列表的创建
2．编号列表的创建
3．描述性列表的创建
五、HTML中的文本代码（15分钟左右）
1．段落和换行代码
段落：
换行:
br/>
2．保留源格式代码：
pre
3．水平线代码：
hr/>
4．标题代码：
h1、h2、h3、h4、h5、h6
5．列表代码：
ulollidldtdd
1．设置网页中文本的字体、颜色时要注意什么问题？
2．如何修改水平线的颜色？
本节课授课前，应更多的让学生去回忆此前学习的word中的文本。
从而感觉本知识的非常容易，最后能比较发现网页文本的特殊性。
6）
建立简单的网页制作
通过站点的创建，以及站点文件的管理，创建一个简单的网站。
1．创建本地站点
2．创建首页
3．在首页输入文本内容
4．制作文本列表
主要步骤
一、创建本地站点
1．运行软件
3．远程服务器连接选择为无
二、创建首页
1．窗口->
文件
2．右击当前站点->
新建文件->
命名为Index.html
三、在首页输入文本内容
1．输入常规文本，并在其中换行/换段
2．输入空白字符，设置首选参数中的常规设置
3．插入日期和水平线
四、制作文本列表
1．制作无序列表
l 文本属性栏->
项目列表
l 敲回车继续新的项目
2．制作有序列表
编号列表
3．嵌套列表的制作
l 增加文本缩进
l 修改列表的类型（代码视图修改type）
4．制作定义性列表
l 切换至代码视图
l 插入dl标签
l 在dl标签中插入一个dt和若干个dd标签（dt和dd不可嵌套）
实训结果
通过学习，并对比此前学习的word中的文本。
发现网页文本的特殊性。
7）
制作一个简单的网页
本次课程将讲授网页制作过程中的图像的使用，掌握图像及图像对象的插入，交互式图像的使用。
掌握图像热区的使用。
1．图像占位符.鼠标经过图像；
2．图像热区；
3．制作网站相册；
4．图像的优化。
1．图像的类型；
2．网站相册的制作。
一、图像格式的介绍（5分钟左右）
1．GIF格式
2．JPEG格式
3．PNG格式
4．其他格式
二、图像文件的插入及属性（20分钟左右）
1．图像的插入：
插入菜单，站点面板，直接拖入到文档
2．图像的属性：
名称，源文件，大小，替代，边距，边框
3．图像的环绕效果
三、图像对象的插入及属性（20分钟左右）
1．图像占位符
2．鼠标经过图像
3．导航条
四、图像热区的使用（8分钟左右）
1．绘制热区：
矩形.椭圆形.多边形
2．选择热区
3．调整热区位置
五、Fireworks切图及导入FireworksHTML（10分钟左右）
1．用Fireworks制作简单的页面
2．利用切片工具分隔网页
3．插入菜单->
图像对象->
FireworksHTML
六、制作web相册（10分钟左右）
1．准备制作相册的素材图片
2．命令菜单->
创建网站相册
七、利用插件制作flash相册（7分钟左右）
1．搜索flash相册插件
2．下载安装并利用工具栏制作
八、图像的优化及格式的转换（10分钟左右）
1．命令菜单
2．右击图像
1．图像地图的作用是什么？
2．如何插入鼠标经过图像？
图像能相对充分的表现页面的内容，适当的在网页中加入图像可对页面进行点缀。
在选择图像时应尽量寻找品质较高，尺寸较大的文件，从而能方便编辑。
8）
网页图像的使用
1．练习站点的创建，以及站点文件的管理；
2．练习网页上文本和图像的使用；
3．掌握图文混排的网页制作技巧。
2．文本的输入；
3．网页图像的使用。
1．图文混排的网页；
2．修改水平线的颜色。
实训内容
利用提供的素材文件，制作一个“畅想未来”的网站，要求如下：
1.创建本地站点文件夹，将网页用到的素材按类别复制到站点文件夹中，启动Dreamweaver，定义站点。
2.新建index.html文件，设置背景颜色为“#B8DCF4”，网页标题为“畅想未来”。
3.插入基本的页面元素，包括文本、图像、水平线等。
4.对图像进行适当的调整，包括大小、在页面中的对齐方式、与周边对象的距离及环绕方式。
实训步骤
一、新建站点
1．站点菜单—>
新建站点—>
高级—>
站点名称：
畅想未来—>
站点根文件夹：
E:
/future
2．选中站点—>
右键—>
新建文件夹：
images（图像文件夹）
3．选中站点—>
新建文件：
index.html（网站首页）
4．把提供的图片素材复制到images文件夹中
二、设置页面属性
4．打开index.html空白文档
5．“修改”—>
“页面属性”—>
外观：
字体为宋体、大小为12像素，文本颜色为“#034881”，背景颜色为“#B8DCF4”，上边距为0像素，左、右边距的值均为30像素。
三、图像对象的插入及属性
1．“插入”—>
图像—>
images—>
1.jpg
2．属性面板—>
居中对齐
注：
编辑—>
首选参数—>
辅助功能—>
把图像前面的勾去掉
四、在页面中插入和编辑文本
1．编辑—>
常用—>
允许多个连续的空格勾选上，即可输入多个空格
2．创建项目列表
3．插入版权符号：
插入菜单—>
HTML--—>
特殊字符—>
版权
五、设置图像环绕效果
选中图片—>
属性面板—>
对齐—>
左对齐，同时设置页面的上下、左右边距
9）
超链接
本次课程将讲授网页制作过程中的超链接的使用，掌握超链接的创建方法，创建各种不同形式的链接。
理解链接目标的概念。
1.链接创建的简单方法
2.各种不同超链接的制作
3.链接的目标设置
1．理解链接的原理
2．框架页面中的链接
一、理解url（25分钟左右）
文件路径就是文件在电脑中的位置，表示文件路径的方式有两种，相对路径和绝对路径。
在网页设计中通过路径可以表示链接，插入图像、Flash、CSS文件的位置
1．绝对路径
URL：
（UniformResoureLocator：
统一资源定位器）是WWW页的地址，它从左到右由下述部分组成：
（1）Internet资源类型（scheme）：
指出WWW客户程序用来操作的工具。
如“http：
//”表示WWW服务器，“ftp：
//”表示FTP服务器，“gopher：
//”表示Gopher服务器，而“new：
”表示Newgroup新闻组。
（2）服务器地址（host）：
指出WWW页所在的服务器域名。
（3）端口（port）：
有时（并非总是这样），对某些资源的访问来说，需给出相应的服务器提供端口号。
（4）路径（path）：
指明服务器上某资源的位置（其格式与DOS系统中的格式一样，通常有目录/子目录/文件名这样结构组成）。
与端口一样，路径并非总是需要的。
URL地址格式排列为：
scheme：
//host：
port/path，例如http：
//
2．相对路径
（1）如何表示同级目录的文件
（2）如何表示上级目录的文件
（3）如何表示下级目录的文件
二、超链接的制作方法（15分钟左右）
1．通过插入菜单
2．利用插入栏
3．属性面板：
直接输入路径，指向文件，文
升级会员 