网页制作教程项目一 网页制作基础

知识链接:网页元素 二．网页的组成元素
1. 标题
2. 网 页眉
4. 主体内容
知识链接:网页元素
5. 页脚
6. 功能区
知识链接:网页元素
7. 导航区
知识链接:网页元素
8. 广告区
广告区
知识链接:网页布局 三.网页布局结构
知识链接:基本概念
3．网页与主页
网页是由HTML（超级文本标识语言）或者其他语言编写的，通过 Web浏览器（如IE）编译后供用户获取信息的页面，也称为Web页，其 中可包含文字、图像、声音、动画和超链接等各种网页元素。网页是 WWW的基本信息单位，每个网页以独立文件形式存放，其扩展名 有.htm、.html、.asp、.jsp等。 主页是网站中的一个特殊网页，它是进入网站的第一个页面，其中 包含指向其他网页的超链接。主页是网站的“门面”，其作用远比其他 网页更重要，设计时必须精心考虑。主页的名称一般是固定的，通常为 index.html或 index.asp等。
通过讲解辅导与作业练习，要使学生能熟练掌握网站建设的 流程及网页制作的内容，培养对优秀网站和网页的鉴赏能力。
• 素质目标：
1. 具有勤奋学习的态度，严谨求实、创新的工作作风； 2. 具有良好的心理素质和职业道德素质；
3. 具有高度责任心和良好的团队合作精神；
4. 具有一定的科学思维方式和判断分析问题的能力； 5. 具有较强的网页设计创意思维、艺术设计素质。
布局分析
图1.3 hao123网站的布局结构
1.分析hao123网站
Hao123网站为导航型网站，主要内容由导航网址组成， 除此之外，页面上还有网站站标（logo）、网站广告 (banner)、邮箱登录入口及搜索框、网站备案号等。 如图1.4所示。

1、
题干
因为静态网页的访问速度快，所以现在互联网上的大部分网站都是由静态网页组成的。
知识点编号
题目类型
判断题
难度等级
简单
权重分值
2分
答案
错
答案说明
现在互联网上的大部分网站都是由静态网页和动态网页混合组成的，两者各有千秋，用户在开发网站时可根据需求酌情采用。
关键字
认识网页
2、
题干
网页主要由文字、图像和超链接等元素构成，但是也可以包含音频、视频以及Flash等。
HTML语言简介
5、
题干
在网站建设中，HTML用于搭建页面结构，CSS用于设置页面样式，__________用于为页面添加动态效果。
知识点编号
题目类型
填空题
难度等级
简单
权重分值
2分
答案
JavaScript
答案说明
考察对JavaScript的理解
关键字
JavaScript语言简介
二、判断题（2‘*10）
知识点编号
题目类型
判断题
难度等级
简单
权重分值
2分
答案
错
答案说明
不同的浏览器对同一个CSS样式有不同的解析，这样就导致了同样的页面在不同浏览器下的显示效果可能不同。
关键字
常见浏览器
三、选择题（2‘*10）
1、
题干
在Dreamweaver中，使用主浏览器预览网页的快捷键是（）。
A、Ctrl+S B、F12 C、F5 D、Ctrl+F12
知识点编号
题目类型
判断题
难度等级
简单
权重分值
2分
答案

中等
权重分值
2分
答案
CD
答案说明
Web标准是由W3C与其他标准化组织共同制定的，它并不是某一个标准，而是一系列标准的集合，主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。
关键字
Web标准
10、
题干
下列选项中属于Web标准构成部分的是( )。
A、结构标准
知识点编号
题目类型
判断题
难度等级
简单
权重分值
2分
答案
错
答案说明
在网站建设中，HTML用于搭建页面结构，CSS用于设置页面样式，而JavaScript则用于为页面添加动态效果。
关键字
JavaScript语言简介
8、
题干
实际网页制作过程中，最常用的网页制作工具是Dreamweaver。( )
知识点编号
题目类型
关键字
Web标准
3、
题干
HTML中文译为________________，主要是通过HTML标记对网页中的文本、图片、声音等内容进行描述。
知识点编号
题目类型
填空题
难度等级
简单
权重分值
2分
答案
超文本标记语言
答案说明
HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标记语言”，主要是通过HTML标记对网页中的文本、图片、声音等内容进行描述。
关键字
JavaScript语言简介
4、
题干
下面选项中，属于网页构成元素的是（ ）。
A、音频
B、视频
C、文字
D、psd图像
知识点编号

《网页制作》项目式教案一、教学目标1. 知识与技能：了解网页制作的基本概念和流程。

掌握HTML、CSS和JavaScript的基本语法和应用。

能够独立设计并制作一个简单的网页。

2. 过程与方法：通过案例分析和实践操作，培养学生的创新思维和团队协作能力。

学会使用网页制作工具，如网页编辑器和浏览器开发者工具。

学会利用网络资源，进行网页素材的搜索和整理。

3. 情感态度与价值观：培养学生的信息技术素养，提高他们对网络文化的认识和理解。

培养学生热爱科学、勇于探索的精神风貌。

培养学生团队协作、共同进步的合作意识。

二、教学内容1. 网页制作基本概念和流程网页的定义和特点网页制作的流程和步骤网页编辑器和浏览器开发者工具的使用2. HTML基本语法和应用HTML标签的概念和作用常用的HTML标签及其属性表格、表单和图片标签的使用3. CSS基本语法和应用CSS的选择器和语法结构常用的CSS属性和值盒子模型和布局控制4. JavaScript基本语法和应用JavaScript的概念和作用基本数据类型和运算符条件语句和循环语句5. 网页素材的搜索和整理网络资源的获取方法素材的选择和处理技巧素材的版权和合法使用三、教学重点与难点1. 教学重点：HTML、CSS和JavaScript的基本语法和应用。

网页制作的基本流程和步骤。

网页素材的搜索和整理方法。

2. 教学难点：JavaScript编程逻辑和函数的运用。

响应式网页设计和浏览器兼容性问题。

网页美化和创意设计。

四、教学方法与手段1. 教学方法：项目式教学法：以实际项目为主线，引导学生全程参与，培养实际操作能力。

案例教学法：通过分析典型案例，使学生更好地理解和掌握知识。

任务驱动法：布置具体的任务，让学生在完成任务的过程中学习和进步。

2. 教学手段：利用多媒体教室，进行PPT讲解和屏幕演示。

使用网络资源和教学平台，进行案例分析和在线交流。

利用网页制作工具和开发者工具，进行实践操作。