《网页设计与制作》第一章：网页制作基础
《网页设计与制作》教案
《网页设计与制作》教案第一章：网页设计基础1.1 教学目标让学生了解网页设计的基本概念和原则让学生掌握网页设计的流程和方法1.2 教学内容网页设计的概念和定义网页设计的原则和要素网页设计的流程和方法1.3 教学方法讲授法：讲解网页设计的概念和原则实践法：学生动手实践设计简单的网页1.4 教学评价学生能回答出网页设计的概念和定义学生能理解并运用网页设计的原则和要素学生能独立完成简单的网页设计第二章：HTML与CSS基础2.1 教学目标让学生了解HTML和CSS的基本概念和作用让学生掌握HTML和CSS的基本语法和用法2.2 教学内容HTML的基本概念和语法CSS的基本概念和语法HTML和CSS的综合应用2.3 教学方法讲授法：讲解HTML和CSS的基本概念和语法实践法：学生动手实践编写HTML和CSS代码2.4 教学评价学生能回答出HTML和CSS的基本概念和作用学生能理解并运用HTML和CSS的基本语法和用法学生能独立完成简单的HTML和CSS代码编写第三章：网页布局与排版3.1 教学目标让学生了解网页布局和排版的基本原则和方法让学生掌握使用HTML和CSS进行网页布局和排版的技术3.2 教学内容网页布局的基本原则和方法网页排版的基本原则和方法使用HTML和CSS进行网页布局和排版的技术3.3 教学方法讲授法：讲解网页布局和排版的基本原则和方法实践法：学生动手实践进行网页布局和排版3.4 教学评价学生能回答出网页布局和排版的基本原则和方法学生能理解并运用HTML和CSS进行网页布局和排版的技术学生能独立完成具有良好布局和排版的网页设计第四章：网页动画与交互4.1 教学目标让学生了解网页动画和交互的基本概念和原理让学生掌握使用HTML和CSS实现网页动画和交互的技术4.2 教学内容网页动画的基本概念和原理网页交互的基本概念和原理使用HTML和CSS实现网页动画和交互的技术4.3 教学方法讲授法：讲解网页动画和交互的基本概念和原理实践法：学生动手实践实现网页动画和交互4.4 教学评价学生能回答出网页动画和交互的基本概念和原理学生能理解并运用HTML和CSS实现网页动画和交互的技术学生能独立完成具有动画和交互功能的网页设计第五章：网页优化与推广5.1 教学目标让学生了解网页优化和推广的基本概念和方法让学生掌握使用SEO和网络营销技术进行网页优化和推广的技巧5.2 教学内容网页优化的基本概念和方法网页推广的基本概念和方法使用SEO和网络营销技术进行网页优化和推广的技巧5.3 教学方法讲授法：讲解网页优化和推广的基本概念和方法实践法：学生动手实践进行网页优化和推广5.4 教学评价学生能回答出网页优化和推广的基本概念和方法学生能理解并运用SEO和网络营销技术进行网页优化和推广的技巧学生能独立完成具有优化和推广功能的网页设计第六章：网页图像处理与多媒体应用6.1 教学目标让学生了解网页图像处理的基本概念和工具让学生掌握网页图像处理和多媒体应用的技术6.2 教学内容网页图像处理的基本概念和工具（如Photoshop、Fireworks等）多媒体元素在网页中的应用（如音频、视频等）图像和多媒体的HTML和CSS标记6.3 教学方法讲授法：讲解网页图像处理的基本概念和工具实践法：学生动手实践进行网页图像处理和多媒体应用6.4 教学评价学生能回答出网页图像处理的基本概念和工具学生能理解并运用网页图像处理和多媒体应用的技术学生能独立完成具有图像和多媒体应用的网页设计第七章：网页编程技术7.1 教学目标让学生了解网页编程的基本概念和语言让学生掌握常用的网页编程技术和框架7.2 教学内容网页编程的基本概念和语言（如JavaScript、jQuery等）常用的网页编程技术和框架（如Bootstrap、React等）编程实践和项目案例7.3 教学方法讲授法：讲解网页编程的基本概念和语言实践法：学生动手实践进行网页编程和技术应用7.4 教学评价学生能回答出网页编程的基本概念和语言学生能理解并运用常用的网页编程技术和框架学生能独立完成编程实践和项目案例第八章：移动网页设计与制作8.1 教学目标让学生了解移动网页设计的基本概念和原则让学生掌握移动网页设计与制作的技术和工具8.2 教学内容移动网页设计的基本概念和原则移动网页设计与制作的技术和工具（如Responsive Design、Adobe Edge Mobile等）移动网页设计的实践和案例分析8.3 教学方法讲授法：讲解移动网页设计的基本概念和原则实践法：学生动手实践进行移动网页设计与制作8.4 教学评价学生能回答出移动网页设计的基本概念和原则学生能理解并运用移动网页设计与制作的技术和工具学生能独立完成移动网页设计与制作的项目案例第九章：网页项目实战与团队协作9.1 教学目标让学生了解网页项目实战的基本流程和方法让学生掌握团队协作的基本技巧和工具9.2 教学内容网页项目实战的基本流程和方法团队协作的基本技巧和工具（如Git、Project Management Software等）项目案例分析和实战演练9.3 教学方法讲授法：讲解网页项目实战的基本流程和方法实践法：学生分组进行项目实战和团队协作9.4 教学评价学生能回答出网页项目实战的基本流程和方法学生能理解并运用团队协作的基本技巧和工具学生能独立完成项目实战和团队协作的任务第十章：网页设计与制作的未来趋势10.1 教学目标让学生了解网页设计与制作的未来趋势和发展方向让学生掌握前沿技术和创新思维的方法10.2 教学内容网页设计与制作的未来趋势和发展方向（如VR/AR、等）前沿技术和创新思维的方法（如Blockchn、Design Thinking等）创新项目和案例分析10.3 教学方法讲授法：讲解网页设计与制作的未来趋势和发展方向实践法：学生进行创新项目和思维训练10.4 教学评价学生能回答出网页设计与制作的未来趋势和发展方向学生能理解并运用前沿技术和创新思维的方法学生能独立完成创新项目和案例分析重点和难点解析重点环节一：网页设计的概念和原则重点关注学生对网页设计的基本理解，以及如何运用设计原则进行网页创作。
(2021)网页设计与制作第一章网页制作基础完美版PPT
2021/6/8
15
➢认识网站
❖ 1.门户网站 ❖ 2.个人网站 ❖ 3.专业网站 ❖ 4.职能网站
2021/6/8
16
1.门户网站
2021/6/8
17
2.个人网站
❖ 个人网站具有较强个性化，是以个人名 义开发创建的网站，其内容、样式、风 格等都是非常有个性的。
2021/6/8
18
3.专业网站
Text Transfer Protocol，超文本传输协议）
作为网络应用层通信协议
2
➢ URL
❖Internet上所有的资源都有一个唯一的 URL地址，一般将URL地址称为网址。
URL的完整格式如下：
协议://主机名（或IP地址）：端口号/路径名/文件名
2021/6/8
3
【例】几个URL的例子.
Bgcolor为背景颜色。关于颜色的值后面会详 细介绍。Text为不包含超级链接的文字颜色。
Link为超级链接文字的颜色。 Alink为正被点击的超级链接文字的颜色。
27
2021/6/8
Vlink为已经点击过的超级链接文字的颜色。 Background设置，如果设置了背景图片， 图片会覆盖已经设置的颜色。
网页设计与制作第 一章网页制作基础
第1章 网页制作基础
➢ Web和浏览器
➢ Web
❖ Web的特点和结构
▪ Web 最 大 的 特 点 是 使 用 了 超 文 本 （Hypertext）
▪ WWW采用C/S（客户机/服务器）工作模式
▪
2021/6/8
在 浏 览 器 和 服 务 器 之 间 应 用 HTTP （ Hyper
2021/6/8
19
第1章网页设计与制作基础
网络规划及艺术设计
（6）图片。图片是网页十分重要的组成部分，有了图片， 网页才能够吸引更多的访问者，才能够更好地表现主题。
（3）的英文全名为World Wide Web，又称3W或Web，中文 译名为万维网。提供的服务之一，它由遍布在Internet上的称 为Web服务器的计算机组成。
（4）浏览器。浏览器是一种浏览网页的软件，通过它可以 方便地浏览Internet上提供的电子邮件、FTP、网络新闻组和电 子公告栏等服务资源。目前，主要的浏览器有Internet Explorer和Netscape，其版本越高，所支持的网页效果就越多， 所以要经常升级。
（6）域名。由于IP地址的数字形式难以记忆和使用， 因此人们引入了域名用以代替复杂的IP地址。域名是用英文 来表示IP地址的。域名是由固定的域名管理组织在全球进行 统一管理的，要获取域名需到各地的网络管理机构进行申请。 申请域名后，无论在哪里，只要在与Internet相连的浏览器 的地址栏中输入域名即可登录相应的网站。
（7）动画。动画是由一组连续播放的静态画面组成的，所 谓连续播放既指时间上的连续，也指画面内容上的连续，即播 放的相邻两幅图像之间内容相差不大，如图1.3.3所示为一段香 蕉卡通动画。网页上的动画主要分为两类：一类是GIF格式的图 片动画，一类是Flash动画。
网络规划及艺术设计
网络规划及艺术设计
（1）单击“开始”按钮，选择“所有程序”→“附 件”→“记事本”命令，启动记事本程序。
《网页设计与制作》第一章网页制作基础
块级元素与行内元素
浮动布局
浮动布局是一种常用的网页布局技术，通过设置元素的 `float` 属性，可以让元素脱离正常的文档流，向左或向右移动，直到遇到父元素的边界或另一个浮动元素。
使用浮动布局可以实现多种布局效果，例如多列布局、文字环绕图像等。
定位布局通过设置元素的 `position` 属性，可以精确控制元素在页面上的位置。常见的定位方式有静态定位（`static`）、相对定位（`relative`）、绝对定位（`absolute`）和固定定位（`fixed`）。
在线网页编辑器
网页制作工具简介
延时符
02
HTML基础
HTML文档结构
<html>元素是HTML文档的根元素，包含了整个文档的内容。
<!DOCTYPE html>声明文档类型为HTML5。
HTML文档由一系列的元素构成，包括`<!DOCTYPE html>`、`<html>`、`<head>`和`<body>`等。
03
响应式图片可以有效地减少带宽和加载时间，提高网页的性能和用户体验。
01
响应式图片是指在不同尺寸的屏幕上显示不同分辨率的图片。
02
通过使用HTML的srcset属性和CSS的picture元素，可以指定不同尺寸屏幕下的图片源，从而实现响应式图片。
响应式图片
THANKS
属性选择器
01
03
02
04
CSS选择器
用于设置元素的前景色和背景色，如`color`和`background-color`。
颜色与背景
用于设置字体类型、大小、行高等，如`font-family`、`font-size`和`line-height`。
《网页设计与制作》第一章：网页制作基础
【例】给网页设置 “励志学社”的文档标 题，可在头部输入以下代码： <TITLE>励志学社</TITLE>
（4）主体标记 网页的主体是“<BODY>……</BODY>”标记
对作用的范围
<BODY>标记用于定义HTML文档主体的开始， 它能够设置网页的背景图像、背景颜色、链接颜色 和网页边距等属性，其基本用法如下所示： <BODY Background="URL" Bgclolr=Color Bgpropeties=Fixed Leftmargin=n Link=Color Alink=Color Text=Color Topmargin=n Vlink=Color>
2.个人网站
❖ 个人网站具有较强个性化，是以个人名 义开发创建的网站，其内容、样式、风 格等都是非常有个性的。
3.专业网站
❖ 这类网站具有很强的专业性，通常只涉 及某一个领域，内容专业。如榕树下网 站（）即是一个专业文学网站。
4.职能网站
❖ 职能网站具有专门的功能，如政府职能 网站等。目前逐渐兴起的电子商务网站 也属于这类网站，较有名的电子商务网 站有阿里巴巴（）、 卓越网（）和当当网上书店（）等。
Fireworks通过自动变形，用动的效果，图片编 辑工具和拖拽工具能传送较精彩的 Fireworks 图片。
Macromedia Flash 工具可较快的制作 SWF 文件。
思考题
1.1 什么是WWW？什么是网页？ 1.2 一个完整的URL由哪几部分组成？举
出几个URL的例子。 1.3 如何设置IE的主页？如何用IE收藏一
➢ 浏览器
❖概述 ❖分类 ▪Internet Explorer ▪Netscape Navigator ▪Mosaic等专业浏览器以及一些以上述浏览器 为内核的专用浏览器。
《网页设计与制作》第一章：网页制作基础波波制作
2013-3-6
1.3 网页制作的基本方法
制作网页的基本步骤
1、确定网页的内容 2、设计网页的组织结构
3、资料的收集与整理
4、选择网页的设计方法 常用的网页制作工具有Frontpage、 Dreamweaver等。服务器端的ASP程序可以使用 Visual Interdev、UltraDEV等编辑。
2013-3-6
4
【例】给网页设置 “励志学社”的文档标 题，可在头部输入以下代码： <TITLE>励志学社</TITLE>
2013-3-6
5
（4）主体标记 网页的主体是“<BODY>……</BODY>”标记 对作用的范围
<BODY>标记用于定义HTML文档主体的开始， 它能够设置网页的背景图像、背景颜色、链接颜色 和网页边距等属性，其基本用法如下所示： <BODY Background="URL" Bgclolr=Color Bgpropeties=Fixed Leftmargin=n Link=Color Alink=Color Text=Color Topmargin=n Vlink=Color> Bgcolor为背景颜色。关于颜色的值后面会详 细介绍。Text为不包含超级链接的文字颜色。 Link为超级链接文字的颜色。 Alink为正被点击的超级链接文字的颜色。
2013-3-6
6
Vlink为已经点击过的超级链接文字的颜色。 Background设置，如果设置了背景图片， 图片会覆盖已经设置的颜色。
Leftmargin、Topmargin用于设置网页的左 边距和上边框，它们是以像素为单位 【例1】将网页的上边距和左边距分别设置为40 和30个像素的宽度，使用黑色文本、白色背景， 未访问的链接源采用蓝色，已访问的链接源标记 为暗红色。 <BODY Background="moom.gif" Bgcolor="White" Bgproperties=Fixed Leftmargin=30 Link="Blue" Text="Black" Topmargin=40 Vlink="Maroon">
《网页设计与制作教程》(教程全集)第1章
1.3 网站的设计
1.3.5 其他页面的设计
其他的页面设计步骤： 确定页面的功能模块→设计页面的布局→处理技术上 的细节。
需要注意以下几点： 1、和主页保持相同的风格。 2、要有返回首页的链接。 3、在页面上显示当前的位置。 4、目录结构不要超过四层。
1.3 网站的设计
1.3.6 企业网站的设计
网站主要由主机、域名和网页等组成。
1.2 网站的规划
1. 网站的题材
目前网站的题材主要有新闻、体育、经济、科技、计 算机技术、软件沙龙、房产、通信、短信、网上聊天、即时 信息、网上社区、校园天地，交通、证券、娱乐网站、旅行、 参考、资讯、网上求职、家庭教育、健康知识、生活时尚、 游戏、广告以及一些体现个人特色的网站等内容。
1.2 网站的规划
3. 给网站取名
网站的名称还要合情合理，最好能让人感觉到有亲切 感，当然，还一定要合法，坚决不能带有反动的、色情的、 迷信的、危害社会安全的名词语句。
1.2 网站的规划
4. 决定网站性质
在创建网站时，决定站点的性质是必须的。设计者应 清楚站点的性质，确定它将会提供什么样的服务，网页中应 该显示什么内容等，以便在站点设计过程中能突出网站主题。
1.3 网站的设计
1.3.1 网站的结构设计
网站的结构设计其实也就 是合理地设计网站的栏目和板 块。那么，需要设计哪些栏目 和板块呢?如何合理地去设计呢? 这是网站设计的目标。
1.3 网站的设计
1.3.2 网站的目录结构设计
在组织网站目录结构时，一般应该遵循如下一些规则：
1、用文件夹分类保存文档。 2、使用合理的文件名称。 3、将本地站点和远程站点设置为相同的目录结构。
成功的企业网站可以将公司信息、产品信息等最完整、 最形象和最具有良好沟通性等方面向世界展示。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
IE6的界面
标题栏 菜单栏 工具栏 地址栏
浏览窗口
状态栏
2015-4-27 7
Iபைடு நூலகம்6.0的使用
浏览网页
“停止”按钮 前进和后退 刷新页面 改变文字大小 选择编码 全屏幕显示 查看源文件
2015-4-27
8
打开多个窗口
用菜单栏上的“文件”→“新建”→“窗口”， 会打开一个新的浏览器窗口。
2015-4-27
5
浏览器
概述 分类 Internet Explorer Netscape Navigator Mosaic等专业浏览器以及一些以上述浏览器 为内核的专用浏览器。 其中使用最广泛的是Microsoft出品的 Internet Explorer 6.0（简称IE6）。
2015-4-27 6
2015-4-27 36
思考题
1.1 什么是WWW？什么是网页？ 1.2 一个完整的URL由哪几部分组成？举 出几个URL的例子。 1.3 如何设置IE的主页？如何用IE收藏一 个网页？ 1.4 网页中一般都使用了哪些技术？ 1.5 Macromedia Studio MX2004有哪 几部分组成？
2015-4-27 17
2.个人网站
个人网站具有较强个性化，是以个人名
义开发创建的网站，其内容、样式、风 格等都是非常有个性的。
2015-4-27
18
3.专业网站
这类网站具有很强的专业性，通常只涉
及某一个领域，内容专业。如榕树下网 站（）即是一个专 业文学网站。
Macromedia Studio MX2004是目前应用最 广泛的网页制作工具组件，使用方便、功能齐全， Dreamweaver、Flash、Fireworks被称作“网页 三剑客”。
在Dreamweaver 里用丰富的层叠样式表制作耐看， 专业的网站。 Fireworks通过自动变形，用动的效果，图片编 辑工具和拖拽工具能传送较精彩的 Fireworks 图片。 Macromedia Flash 工具可较快的制作 SWF 文件。
2015-4-27
19
4.职能网站
职能网站具有专门的功能，如政府职能
网站等。目前逐渐兴起的电子商务网站 也属于这类网站，较有名的电子商务网 站有阿里巴巴（）、 卓越网（）和当当网上书 店（）等。
2015-4-27 20
2015-4-27
25
【例】给网页设置 “励志学社”的文档标 题，可在头部输入以下代码： <TITLE>励志学社</TITLE>
2015-4-27
26
（4）主体标记 网页的主体是“<BODY>……</BODY>”标记 对作用的范围
<BODY>标记用于定义HTML文档主体的开始， 它能够设置网页的背景图像、背景颜色、链接颜色 和网页边距等属性，其基本用法如下所示： <BODY Background="URL" Bgclolr=Color Bgpropeties=Fixed Leftmargin=n Link=Color Alink=Color Text=Color Topmargin=n Vlink=Color> Bgcolor为背景颜色。关于颜色的值后面会详 细介绍。Text为不包含超级链接的文字颜色。 Link为超级链接文字的颜色。 Alink为正被点击的超级链接文字的颜色。
2015-4-27 4
（3）: 8001///uugna/index.html，从运行在端口号8001的 服务器上访问index.html主页。
（4)/Addressing/URL/5BNF.html#httpaddress，访问 服务器 上Addressing/URL目录下的5-BNF.html 网页文件 中锚点标识为httpaddress的地方。
2015-4-27 30
1.23 Web服务器端程序
专业的网站都是建立在使用数据库的 基础上的，要将这些数据库变成可以通过 浏览器显示和操作的Web页面，就需要编 写服务器端的程序。用户向服务器传送提 交的表单（个人信息、选择结果等）需要 在服务器端进行记录、筛选等处理。大量 的数据库查询、修改处理也需要服务器端 程序的支持。 目前常用的服务器端编程技术主要有 CGI、ASP、PHP、JSP等，不同的技术 31 需要不同的系统环境支持。
2015-4-27
27
Vlink为已经点击过的超级链接文字的颜色。 Background设置，如果设置了背景图片， 图片会覆盖已经设置的颜色。
Leftmargin、Topmargin用于设置网页的左 边距和上边框，它们是以像素为单位 【例1】将网页的上边距和左边距分别设置为40 和30个像素的宽度，使用黑色文本、白色背景， 未访问的链接源采用蓝色，已访问的链接源标记 为暗红色。 <BODY Background="moom.gif" Bgcolor="White" Bgproperties=Fixed Leftmargin=30 Link="Blue" Text="Black" Topmargin=40 Vlink="Maroon">
1、网页的标题要简洁，明确。 2、在文本中要使用水平线，以分割不同部分。 3、对重点段落要强调显示。
4、网页中插入的图片要尽量的小。
5、图形要附加文字说明，以便关闭图像时查 看。 6、网页中引用的资料及商标（或图标），不 能侵犯版权。
2015-4-27 35
1.4 Macromedia Studio MX2004
是一种超文本标记语言，作为一种网页编 辑语言，易学易懂。
2015-4-27
23
1、HTML网页
HTML网页通常是由三部分内容组成的： 版本信息、网页标题（HEAD）和文档主体 （BODY）。 下面就是网页结构的总体框架：
<!HTML网页版本信息说明> <HTML> <HEAD> <!标题标记、属性及其内容> </HEAD> <BODY> <!主体标记、属性及其内容> </BODY> </HTML>
网页设计与制作
第1章 网页制作基础
南海学院计算机系制作
第1章
Web
网页制作基础
Web和浏览器 Web的特点和结构
2015-4-27
Web 最 大 的 特 点 是 使 用 了 超 文 本 （Hypertext）
WWW采用C/S（客户机/服务器）工作模式 在浏览器和服务器之间应用 HTTP （ Hyper Text Transfer Protocol，超文本传输协议） 作为网络应用层通信协议
认识网页
Flash动画 导航栏 GIF动画 文字 表单 图片 超级链接
2015-4-27
21
网页中的元素
1.文字
2.图像 3.表单 4.Flash动画 5. 表格
6. 超级链接
7. 视频、音频 8. POP窗口
2015-4-27
9. 标题栏和状态栏文字
22
1.2
网页制作的相关知识
HTML语言概述
2015-4-27
24
（1）版本信息 版本信息位于HTML网页文件的第一行
（2）HTML文件标记 大部分网页文件都是以<HTML>标记开始的，在文件 的结尾处又以</HTML>结束
（3）头部信息 HEAD标记之间是HTML文档的头部，用来标明当前文档 的有关信息
在HEAD标记之间，使用频率最高的标记就是 TITLE，它用于定义显示在浏览器标题栏的文档标题。
2
URL
Internet上所有的资源都有一个唯一的 URL地址，一般将URL地址称为网址。
URL的完整格式如下：
协议://主机名（或IP地址）：端口号/路径名/文件名
2015-4-27
3
【例】几个URL的例子.
（1），用 http协议和缺省端口号（80）访问微软公司 服务器。这里没有指定路 径和文件名，所以访问的结果是把一个缺省 主页送给浏览器。 （2）ftp:///pub/mswindows/winvn926.zip，用FTP协议访问北京 大学FTP服务器上路径名为pub/ms-windows、 文件名为winvn926.zip的文件。
2015-4-27
15
认识网站
1.门户网站
2.个人网站
3.专业网站
4.职能网站
2015-4-27
16
1.门户网站
这类网站是一种综合性网站，涉及领域 非常广泛，包含文学、音乐、影视、体 育、新闻和娱乐等方方面面的内容，具 有论坛、搜索和短信等功能。现在国内 较著名的门户网站有搜狐 （）、网易 （）等。
2015-4-27 29
1.22 静态网页和动态网页
静态网页指基本上全部使用 HTML语言制作的网页，页面的 内容是固定不变的。
动态网页（DynamicHTML， DHTML）利用JavaScript，CSS (层叠样式表) 及其它类似的语言如 VBScript等与HTML进行有机的结 合来使静态的HTML网页变成动态。
2015-4-27
28
2、XML语言
XML（eXtensible Markup Language）被称作是下一代的网页标 记语言，也是采用各种标记来形成网 页的源代码。 XML中包括可扩展格式语言 XSL(Extensible Style Language) 和 可扩展链接语言XLL(Extensible Linking Language)。
一般情况下，打 开四、五个窗口可以 充分利用系统资源， 而且通过调整窗口的 大小和位置还可以同 时浏览。