《网页设计与制作》教案Word文件下载.docx

资源描述

《网页设计与制作》教案Word文件下载.docx

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

《网页设计与制作》教案Word文件下载.docx

学习完本课程后，学生应当基本掌握平面构成的图形设计能力及色彩搭配能力、简单页面布局的分析与制作能力，能够进行简单页面的设计与制作。

（二）专业能力与知识目标

根据表1典型工作任务，确定专业能力与知识目标见下表2所示。

表2　专业能力与知识目标

编号

专业知识目标

熟练规划站点

掌握图像编辑、图像合成、校色、调色及特效制作方法，利用Photoshop工具处理图像，设计网页界面，合理修饰网页。

利用表格合理布局网页，能在网页中添加行为、表单，为制作动态网页作准备

专业能力目标

掌握网页色彩的搭配能力

简单网页布局的分析与制作能力

（三）专业素质目标

１.具有一定分析能力

２.具有一定想象力

３.具有一定网页设计与制作能力

（四）综合能力和职业素养培养目标

１.敬业精神

２.团队协作精神

３.自主学习能力

４.沟通能力

５.表达能力

６.获取知识能力

7.创新能力

三、教学内容及过程

学习情境1：

表格布局

任务一：

创建网站目录，建立站点

【教学目标】

1．能力目标：

具备站点创建及文件管理能力。

2．知识目标：

（1）掌握HTML基本语法及常用属性

（2）掌握站点的建立方法

3．职业素质目标：

★获取资讯能力

【教学时间】

2学时

一、任务分析及准备（20分钟）

（一）任务综述：

目录的结构是一个容易忽略的问题，大多数站长都是未经规划，随意创建子目录。

目录结构的好坏，对浏览者来说并没有什么太大的感觉，但是对于站点本身的维护，以后内容的扩充和移植有着重要的影响。

所以建立目录结构时也要仔细安排。

（二）相关知识准备：

1、基本概念

HTML:

超文本标记语言（HyperTextMarkupLanguage）

CSS:

层叠样式表（CascadingStyleSheets）

JavaScript:

基于对象的脚本语言

2、网站与主页

网站：

一个链接的页面的集合。

主页或首页：

是网站中的一个特殊页面，它是作为一个组织或个人在WWW上开始点的页面，其中包含指向其他页的超链接。

通常主页的名称是固定的，如index.htm或index.html等。

3、制作网站所需的工具

简易的文本编辑器：

记事本是一个非常简单的文本编辑程序，用它编写程序非常好，因为它不会干涉你所输入的任何内容，给予你完全的控制权。

使用记事本（Notepad）或其他简易文本编辑器的话，全部代码均由你自己编写。

所见即所得的编辑器：

如Dreamweaver、FrontPage等。

4.网页文件命名

*.htm或*.html

无空格

无特殊符号（例如&

符号），只可以有下划线“_”，只可以为英文、数字

区分大小写

首页文件名默认为：

index.htm或index.html

5.HTML工作原理

如果在浏览器中任意打开一个网页，然后在窗口中空白位置单击鼠标右键，选择“查看源文件”命令（或者选择“查看”菜单中的“源文件”命令），则系统会启动“记事本”，其中包含一些文本信息。

元素：

是HTML语言的基本部分。

元素总是成对出现，每一对元素一般都有一个开始的标记（如<

body>

），也有一个结束的标记（如<

/body>

）。

元素的标记要用一对尖括号括起来，并且结束的标记总是在开始的标记前加一个斜杠。

二、教师示范（25分钟）

（一）新建站点

（二）创建网站文件目录

（三）创建网页并保存

（四）添加网页文字，如下图：

三、学生模仿（30分钟）

四、总结（15分钟）

不要将所有文件都存放在根目录下。

有网站制作者为了方便，将所有文件都放在根目录下。

这样就很容易造成：

文件管理混乱，搞不清哪些文件需要编辑和更新，哪些无用的文件可以删除，哪些是相关联的文件，影响工作效率；

上传速度变慢，服务器一般都会为根目录建立一个文件索引，如果将所有文件都放在根目录下，那么即使只上传更新一个文件，服务器也需要将所有文件再检索一遍，建立新的索引文件，很明显，文件量越大，等待的时间也将越长。

按栏目内容建立子目录。

子目录的建立，首先按主栏目建立。

友情连接内容较多，需要经常更新的可以建立独立的子目录。

而一些相关性强，不需要经常更新的栏目，例如：

网站简介、站长情况等可以合并放在一个统一目录下。

所有程序一般都存放在特定目录，例如：

CGI程序放在cgi-bin目录，所有提供下载的内容也最好放在一个目录下，便于维护管理。

在每个主目录下都建立独立的Images目录。

一般来说，一个站点根目录下都有一个默认地Images目录。

将所有图片都存放在这个目录里很是不方便，比如在栏目删除时，图片的管理相当麻烦。

所以为每个主栏目建立一个独立的Images目录是方便管理的。

原因很简单，就是方便维护与管理。

其它需要注意的还有：

目录的层次不要太深，不要超过3层；

不要使用中文目录，使用中文目录可能对网址的正确显示造成困难；

不要使用过长的目录，太长的目录名不便于记忆；

尽量使用意义明确的目录，以便于记忆和管理。

【课外拓展实践】

任务：

自行设计鱼之乐博客文件目录

启发式教学法

四阶段法

任务二：

制作第一个网页

具备页面结构分析能力、表格使用能力。

（1）掌握Table标记及表格的插入、修改与删除。

（2）掌握页面布局的常规设置。

（3）了解表格布局方法。

★自学能力

一、任务分析及准备（10分钟）

从前一般网页都使用表格进行排版设计，这样作的优点在于设计制作速度快，尤其在可视化网页编辑器，如MicrosoftFrontPage、AdobeDreamweaver中，这样设计显得直观而方便。

但使用表格布局页面让越来越复杂的版面需要许多不断嵌套的表格设计，致使网页代码变得冗长复杂，使文件体积增大，且不容易被搜索引擎查找。

同时，这样做也不利于大型网站的改版工作。

因此，基于表格的布局技术也是网站建设从业者的基本技能。

本次任务，是利用表格布局简单博客页面。

（2）相关知识准备：

1、HTML语法结构及规则

html>

head>

title>

此处设置网页标题<

/title>

/head>

h3>

文字标题<

/h3>

段落<

br/>

fontsize="

14px"

color="

FFFF00"

段落第二行<

/font>

/p>

/html>

2、Dreamweaver属性面板的使用

二、教师示范（20分钟）

示范案例：

（一）创建网页并保存

（二）分析案例结构

（三）制作案例头部

1、插入表格

2、设置表格背景

3、插入文字

（四）制作案例主体部分结构

2、设置单元格宽度

3、插入文字、图像等内容

三、学生模仿（45分钟）

1、表格高度一般不用设置。

2、表格嵌套：

如果某一个单元格中的内容又要分成几部分，可以继续在这个单元格中插入表格。

3、表格的边框一定要为0，即table中的border属性值为"

。

也就是让表格在网页预览中不可见，这样才能实现表格布局的目的。

4、根据内容确定表格及单元格宽度，不随意拉动表格及单元格边框。

利用表格布局图文列表

任务三：

创建博客日志页面

【教学任务】

学习网页素材的管理，并创建日志页面文件，设置页面属性。

具备网页素材文件管理能力。

（1）掌握网页相关素材文件的命名规则。

（2）掌握页面的创建及保存方法。

2课时

一、任务分析及准备（30分钟）

1.网页素材文件的来源——效果图切片

2.文件命名规则

用正规的26个英文字母和10数字再加上一个必要的_（下划线）来组合成网页的文件名。

3.图像命名规范

名称分为头尾两部分，用下划线隔开。

头部分表示此图片的大类性质。

例如：

放置在页面顶部的广告、装饰图案等长方形的图片我们取名：

banner；

标志性的图片我们取名为：

logo；

在页面上位置不固定并且带有链接的小图片我们取名为button；

在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名：

menu；

装饰用的照片我们取名：

pic；

不带链接表示标题的图片我们取名：

title依照此原则类推。

尾部分用来表示图片的具体含义，用英文字母表示。

banner_sohu.gifbanner_sina.gifmenu_aboutus.gifmenu_job.giftitle_news.giflogo_police.giflogo_national.gifpic_people.jpgpic_hill.jpg

有onmouse效果的图片，两张分别在原有文件名后加"

_on"

和"

_off"

命名。

4.网页背景及文字大小设置、页边距——页面属性面板

二、教师示范（15分钟）

1、新建页面

2、设置页面属性

1、经验总结

页面默认具有一定值的边距。

2、知识总结

网页设计常用单词：

背景Background按钮button图标icon菜单menu

任务四：

制作博客日志页面Banner及导航部分

制作如下效果图：

具备页面结构分析能力、表格基本布局能力。

（1）掌握表格的使用技巧

（2）掌握网页结构

1.单元格背景设置——单元格属性面板

2.单元格垂直对齐方式

3.图文混排——图像对齐方式

4.段落与强制换行——<

与<

br>

5.关于表格的理解

1）<

table>

...<

/table>

-定义表格

tr>

-定义表行

th>

-定义表头

td>

-定义表元（表格的具体数据）

表格的代码表示：

Food<

/th>

Drink<

Sweet<

/tr>

/td>

2）表格的基本操作

a.表格的插入

b.表格的选择及属性设置

c.单元格的选择及属性设置

d.合并及拆分单元格

3）表格布局原理-从上到下，从外到内

表格布局方式主要是利用HTML语言中table元素所具有的零边框特性。

由于table元素在显示的时候，使得单元格的边框和间距被设置为0，既不显示边框，所以可以将网页中的各个元素按照版式划分后，分别放入表格的单元格中，从而实现了复杂的排版组合效果。

1、页面设置

2、头部banner

3、导航栏

1）表格布局从上到下、从外到内；

2）图像需利用多单元格拼接时，表格填充、间距、边框均设置为0；

3）单元格垂直对齐方式默认为居中，一般会调整为“顶端”对齐；

4）图文混排时调整文字与图像的对齐方式需在图像属性面板中设置“对齐”属性。

1）表格代码

tableborder="

cellpaddding="

cellspacing="

nbsp;

2）图像代码

imgsrc="

任务五：

制作博客日志页面主体部分结构

（1）掌握嵌套表格的使用技巧

知识准备：

表格宽度单位：

1.百分比

相对单位，相对于所在容器宽度，最大值为100%。

选择该单位，自身宽度随所在容器宽度改变而改变。

2.像素

绝对单位。

选择该单位，自身宽度不会随所在容器宽度改变而改变。

任务分析：

本次任务主要是构建页面主体部分的两栏结构，为添加页面内容做准备。

表面上是两栏结构，但不一定用1行2列的表格实现，可以有多种方法。

两栏间有一定距离，可以采用1行3列的表格，将中间列作为两栏间的间隔。

布局表格左右均有空隙，可将布局表格的宽度设置为不足100%，再将表格居中对齐，使多出的空隙均分于左右两侧。

1.设置容器背景。

2.分析搭建两栏结构。

三、学生模仿（20分钟）

四、教师示范（15分钟）

1.分析搭建左边栏及右边栏相同的两行栏目结构。

2.演示内部嵌套表格及该表格所在容器的多种选择方式。

五、学生模仿（20分钟）

六、总结（10分钟）

1.经验总结

1）嵌套表格的宽度一般选用相对宽度的单位“百分比”。

2）单元格垂直对齐方式默认为居中，一般会调整为“顶端”对齐；

3）图文混排时调整文字与图像的对齐方式需在图像属性面板中设置“对齐”属性。

2.知识总结

1）宽度属性：

width

2）对齐属性：

align

3）表格及单元格的多种选择方式

讲授法

任务六：

（2）掌握水平线的使用方法

如效果图所示，本任务主要包含两部分：

文字及各篇文章提要之间的分割线。

其中文字部分可看做3部分：

标题及日期、文章内容提要、相关链接。

由效果图可见，文字部分总体宽度较分割线短，分割线与头部标题容器等宽，因此，文字部分可用3行1列表格作为布局结构，在表格后再插入水平线，以实现分割线效果。

1.插入3行1列表格。

2.插入文章标题及日期，使用<

h4>

格式化文章标题。

3.插入水平线

三、学生模仿（40分钟）

1）注意效果图细节；

2）注意HTML标签语义。

水平线：

hr/>

任务七：

制作博客日志页面主体左边部分

具备文字及超链接样式的使用能力。

（1）掌握文字的样式使用技巧

（2）掌握超链接的样式使用技巧

如效果图所示，本任务主要完成文章列表部分文字样式的设置，主要包含文章标题样式、相关链接部分文字样式。

文章标题由于使用<

标签，自动采用<

标签样式，即文字产生一定数值的边界。

相关链接部分，需要去除超链接默认样式的下划线，并为该单元格中的所有文字均设置为统一颜色。

因此，需采用CSS控制对应网页元素的样式。