班级群名-初中生话题作文

本次课基本信息
授课时间
授课方式
（请打√）
月 日 第 1 周星期 第 节
理论课 实验课□ 理实一体

讨论课□
习题课□ 其它□
授课
顺序
课时
安排
1
2
授课题目（教学章节或项目模块主题）：
1.1认识网页与网站 1.2网页设计知识

前次课

内容提要
本次课教学目的、要求（分掌握、熟悉、了解三个层次）：
1.了解网页、网站的概念、网页与网站的关系
2.熟悉静态网页与动态网页的区别，主页与网页的区别
3．掌握网页设计元素有哪些
4．掌握网页的结构与色彩
教学重点及难点：

重点：网页设计元素
难点：网页的结构与色彩
作业和思考题：


分析一张网页的结构、布局



课后小结：

教 学 设 计 页
对本次课的教学目标、教学重难点、教学方法、教学步骤与时间分配等环节进行设计

教学环节
课
前
本课的内容、考试方式、要求
网页、网站的概念、网页与网站
的关系
静态网页与动态网页的区别
课
分析电子商务网站首页有哪些元
上
素组成

网页设计元素有哪些（重点）
网页的结构与布局（难点）
网页的色彩
课
分析一张网页的结构、布局
后













时间

15min
10min
15min
5min
20min
20min
5min
教师活动 学生活动
讲授
讲授、案
例
讲授
引导
讲授、案
例
讲授、案
例
讲授、案
例



讨论

教 学 内 容 页


1.1

一、网页
网页是一种可以在互联网上传输、能被浏览器识别和翻译成页面并显示出来
的文件，网页是网站 的基本构成元素。
认识网页与网站

二、网站

网站 是提供各种信息和服务的平台，如用户熟悉的新浪、搜狐、京东网、当当
网等都是典型网站。网站由许多 网页组成，也可以通俗地理解成网站是存储在某个
服务器上的，包含了网页、图片、数据库和多媒体信息 等资源的一个文件夹。
三、网页与网站的关系
一个完整的网站是由多个网页构成 的，这些网页是分别独立的，这些独立的网
页通过超链接联系起来。网页是网站的基本信息单位，一个网 站通常由众多的网页
有机地组织起来，用来为网站用户提供各种各样的信息和服务，好比一栋大楼里的< br>一个个房间。
四、静态网页与动态网页的区别
在网站设计中，使用纯HTML格式的 网页通常称为静态网页，它运行于客户端。
早期的网站一般都是由静态网页组成的，它们是以.htm、 .html等为扩展名。

采用了动态网页技术，在服务器端运行的网页和程序被称为动 态网页，它们会
根据编写的程序访问数据库，并动态地生成页面。

教 学 内 容 页

1.2网页设计知识
一、网页设计元素

二、网页的结构与布局（案例）
结构： 2.导航 3.内容主体 4.版权信息
布局原理：对称与均衡；重点与主次；变化与统一
页面的布局
1. 结构布局
常用的结构布局方式包括“国”字型、拐角型、上下框架和左右框架等类型。
国字型 “国”字型结构一般这样来布局：最上端是网站logo、banner和导航栏，中间是当前
网页 的主要内容(通常被分为大小不等的三列，而中间的一列用来放置主体内容)，最
下面是网站版权声明等 。
通常用于主页的设计，其主要优点是页面容纳内容很多，信息量大。

教 学 内 容 页


图1-3 国字型布局
拐角型
拐角型结构与“国”字型结构最上端和最 下端结构布局是一样的。唯一区别体现在中
间样式，拐角型中间通常被分为大小不等的两列，其中较宽的 一列用来放置主体内
容。
优点是页面结构清晰，主次分明，是初学者最容易上手的布局方法。 缺点是规矩呆
板，如果不注意细节色彩，很容易让人”看之无味“

教 学 内 容 页


图1-4 拐角型布局
上下框架型
上下框架型结构与左右框架性类似，区别仅仅在于是一种上下分为两页的框架。
优点是视觉冲击力强，缺点是很难将两部分有机地结合起来

图1-5 上下框架型布局
左右框架型
左右框架型结构，一般导航链接放左边，有时最上面会有一个小 的标题或标致，右
面是正文。多数大型论坛都是这种结构的，部分企业也喜欢采用。
优点是视觉冲击力强，缺点是很难将两部分有机地结合起来

教 学 内 容 页


图1-6 左右框架型布局
2. 艺术布局
常用的平面艺术设计原则有分割、对称和平衡等。
POP布局
POP引自广告术语，就是指页面布局像一张宣传海报，POP布局是一种颇具 艺术感
和时尚感的网页布局方式。页面设计通常以一张精美的海报画面为布局的主体。
优点显而易见：漂亮吸引人。缺点就是速度慢。作为版面布局，还是值得借鉴的。

图1-7 POP布局