网页制作第一讲课件
合集下载
《网页设计基础》PPT课件
1.4 建立网站的基本流程
图1-2所示的是一个网站的完整制作流程.
确定主题策划与准备来自收集资料与素材规划网站结构
图
-
1
设计网页版式
2
确定网站结构
网
站
制作阶段
制作网页元素
的
制
插入元件与排版
作 流
上传网站
程
后期工作
维护与更新
1.4.1 确定主题
网站的主题也就是网站的题材, 是网站设计首先遇到的问题.
〔2〕利用Fireworks修改图像非常方便.
〔3〕Fireworks无需借助其他工具就可 以完成将一个图像转化为网页元素的全过程.
〔4〕Fireworks具有文件导出功能.
1.3.2 Flash
Flash是Macromedia公司开发 的用于矢量图形编辑和动画创作的 专业软件,它是一种交互式动画设 计工具,用它可以将音乐、声效、 动画以及富有新意的界面融合在一 起,以制作出高品质的网页动态效 果.
网站的定位要小,内容要精.
网站的题材最好选自己擅长或 者喜爱的内容.
网站名称,是网站设计的一部 分,而且是一个关键的要素,和现实 生活中一样,网站名称是否正气、
1.4.2 搜集资料 1.4.3 网站的整体规划
进行网站的整体规划也就是组 织网站的内容并设计其结构. 1.4.4 网页设计与制作
1．静态网页的设计与制 作
Dreamweaver是 Macromedia公司推出的一款大 众化的网页制作软件,它具有可 视化编辑界面,用户不必编写复 杂的HTML源代码就可以生成跨 平台、跨浏览器的网页,不仅适 合于专业网页编辑人员的需要, 同时也容易被业余网页制作人员 所掌握.
1.2.3 FrontPage
第1章网页设计制作基础精品PPT课件
服务器端
• 浏览者进入网站后首先看到的是这个网站的主页， 主页集成了指向二级网页及其他网站的链接。
• 主页一般命名为index或default。
二级网页
进站页 主页
1.1.2什么是HTML
• HTML是英文Hypertext Markup Language的缩写， 一般译为“超文本标记语言”。
• 用HTML编写的文件的扩展名是.htm或.html。
• 一般来说网站中导航栏的位置在各个页面中出现 的位置是比较固定的，而且风格也比较一致。
1.2.6 文字和图片
• 每行文字最好在20～30个中文（40～60个英文）之间。 • 一个版面上字型最好不超过3种。 • 文字的颜色要和背景有明显区别。 • 图片的主题要清晰可见。 • 图片所含文字要清晰可的原则，如无特别需要，不要放 置大型图像文件活加上其他的程序。
• 页面内容放置的要有条理。
分类
• 可以按主题分类、按性质分类、按机关组织分类，按 人类思考直觉式分类等。
• 分类原则是让访问者可以很容易的找到目标。
互动性
图像的应用技巧
• 使用图像式一定要考虑传输时间的问题。 • 图像格式要采用一般浏览器都支持的格式，最常用的
网页制作
1. 网页设计制作基础
1.1 网页的基本概述
• 互联网 • 网页 • HTML
1.1.1什么是互联网
• Internert即国际互联网，也称为全球信息资源 网。
• Internet是由Interconnection和Network两个词组 合而成的，通常翻译为“因特网”或者“国际 互联网”。
抓住用户
• 网站操作必须便捷。 • 网站有内容，有特色。
着手规划、确定特色、锁定目标
• 浏览者进入网站后首先看到的是这个网站的主页， 主页集成了指向二级网页及其他网站的链接。
• 主页一般命名为index或default。
二级网页
进站页 主页
1.1.2什么是HTML
• HTML是英文Hypertext Markup Language的缩写， 一般译为“超文本标记语言”。
• 用HTML编写的文件的扩展名是.htm或.html。
• 一般来说网站中导航栏的位置在各个页面中出现 的位置是比较固定的，而且风格也比较一致。
1.2.6 文字和图片
• 每行文字最好在20～30个中文（40～60个英文）之间。 • 一个版面上字型最好不超过3种。 • 文字的颜色要和背景有明显区别。 • 图片的主题要清晰可见。 • 图片所含文字要清晰可的原则，如无特别需要，不要放 置大型图像文件活加上其他的程序。
• 页面内容放置的要有条理。
分类
• 可以按主题分类、按性质分类、按机关组织分类，按 人类思考直觉式分类等。
• 分类原则是让访问者可以很容易的找到目标。
互动性
图像的应用技巧
• 使用图像式一定要考虑传输时间的问题。 • 图像格式要采用一般浏览器都支持的格式，最常用的
网页制作
1. 网页设计制作基础
1.1 网页的基本概述
• 互联网 • 网页 • HTML
1.1.1什么是互联网
• Internert即国际互联网，也称为全球信息资源 网。
• Internet是由Interconnection和Network两个词组 合而成的，通常翻译为“因特网”或者“国际 互联网”。
抓住用户
• 网站操作必须便捷。 • 网站有内容，有特色。
着手规划、确定特色、锁定目标
网页制作第一讲
网页制作基础
1. 任课教师：常海燕
2. 课件下载、作业提交
服务器地址：ftp://211.68.116.156 用户名：chy_s 无密码
主要内容
1 网页设计基础 2 Dreamweaver高级操作
5 css样式表
6 JavaScript网页特效
例 2
(2).属性
<标记名 属性名="属性值"> ……
</标记名>
说明: 属性只出现在起始标记中.
<font color=“#ff0000”>这是一段红色的文字</font>
例 3
(3).元素
元素由起始标记﹑内容和结束标记组成,每个元素都有一些 相关的属性,元素是构成HTML文档的基本单位
在代码中，不区分大小写，比如，将<head>写成 <HEAD>或<Head>都可以。 任何空格或回车在代码中都无效，插入空格或回车有专 用的标记，分别是 、<br>。因此，不同的标记间 用回车键换行再编写是个不错的习惯。
标记中不要有空格，否则浏览器可能无法识别，比如不 能将<title>写成< title>。
第一讲
基本概念
超文本标记语言HTML:Hyper Text Markup Language
是一种规范，是一种标准。他是通过标记符(tag)来标 记显示网页的各个部分。所有网页都是HTML格式的
文件。
专门用于制作网页的语言(.htm 或 .html文件). HTML是一种文字处理语言,不是程序语言 HTML 2.0
﹑2.2﹑
4.0﹑ 4.01
什么是网页:
1. 任课教师：常海燕
2. 课件下载、作业提交
服务器地址：ftp://211.68.116.156 用户名：chy_s 无密码
主要内容
1 网页设计基础 2 Dreamweaver高级操作
5 css样式表
6 JavaScript网页特效
例 2
(2).属性
<标记名 属性名="属性值"> ……
</标记名>
说明: 属性只出现在起始标记中.
<font color=“#ff0000”>这是一段红色的文字</font>
例 3
(3).元素
元素由起始标记﹑内容和结束标记组成,每个元素都有一些 相关的属性,元素是构成HTML文档的基本单位
在代码中，不区分大小写，比如，将<head>写成 <HEAD>或<Head>都可以。 任何空格或回车在代码中都无效，插入空格或回车有专 用的标记，分别是 、<br>。因此，不同的标记间 用回车键换行再编写是个不错的习惯。
标记中不要有空格，否则浏览器可能无法识别，比如不 能将<title>写成< title>。
第一讲
基本概念
超文本标记语言HTML:Hyper Text Markup Language
是一种规范，是一种标准。他是通过标记符(tag)来标 记显示网页的各个部分。所有网页都是HTML格式的
文件。
专门用于制作网页的语言(.htm 或 .html文件). HTML是一种文字处理语言,不是程序语言 HTML 2.0
﹑2.2﹑
4.0﹑ 4.01
什么是网页:
(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
网页制作(超详细ppt版)
Web浏览器的选用
现在可以得到许多web浏览器，他们遍 及了几乎所有的计算机系统。Web浏览器 的功能是充当与web的接口，它们在 internet上对特定的web页面和文档发出请 求，当它们接收到文件后，就将格式化后 的版本返回html文件并显示到屏幕之上。 安装了web浏览器的计算机还可以处理ftp 等方法的信息请求。
1.网页和网站 2.动态网站和静态网站 3.web1.0和web2.0
三.Html基础及简单页面设计
HTML的编写是指创制和定义html文档 的过程。重要内容:
1.Html标记 2.Html的基本结构 3.创建一个简单页面 4.浏览自己的页面
文档结构和格式的定义是由html元素来 完成的。而html元素是由单个或一对标记 定义的包含范围。一对标记是指一个起始
要创建自己的页面，最基础技术就是html （hypertext makeup language，超文本标记语 言），现在绝大多数web文档都是由html编写的。
www是一个全球性的、交互式的、动态的、 多平台的、分布式的、图像超文本的信息系统。
要能在web上四处不遨受游地域，的首访限问先制者，必和网须网站站安上有装的信一息个可 w上e台导b的不浏航限受览制最操器，作简如系。单台统有的客平一了户台方只通机服自法要就构务己互可就成器联以的分，是网布多w交信结保e互息布持b合的、多可浏连过反媒浏以览以新程馈体在览随器，信信w时器w提息息后w随上交，的，地发如各进在行种w更性eb 能w在ind各ows页、上lin移n式ux动等。你可以通图过像和选声择音指、视定频的高亮 度系显统示平台的文字、词或图像从等一个页面移至另一 页面，也可以利用该页的地址或url（uniform resource locator）统一资源定位器来直接移至 该指定页。
网页制作PPT课件
CSS历史
CSS最早在1996年由W3C发布，经过多个版本的发展，目前最新的版本是CSS3，增加了许多新的特性和 功能。
CSS选择器
元素选择器
通过HTML元素名称来选择并应用样式，例如`p { color: red; }`会将所有段落的文本颜色设置为红 色。
ID选择器
通过ID来选择并应用样式，以`#`开头，例如 `#myID { font-size: 20px; }`会将ID为myID的元 素的字体大小设置为20像素。
类选择器
通过类名来选择并应用样式，以`.`开头，例如 `.myClass { background-color: yellow; }`会将 所有class属性为myClass的元素的背景色设置为 黄色。
属性选择器
通过元素的属性和值来选择并应用样式，例如 `[href] { text-decoration: none; }`会将所有带有 href属性的元素的文本装饰去除。
表单验证
为了提高用户体验和确保数据准确性，需要对表单进行验证，如检 查输入格式、验证必填项等。
交互设计
通过合理的布局和美观的设计，使表单易于填写和提交，同时提供 友好的用户反馈，如错误提示、成功提示等。
导航菜单设计
1 2
导航类型
根据网页结构和内容，可以选择合适的导航类型， 如水平导航、垂直导航、面包屑导航等。
React框架介绍及使用
JSX语法
React 使用 JSX 语法，允许在 JavaScript 中编写 HTML 结构， 提高了开发效率。
组件化开发
React 同样支持组件化开发，可以将页面拆分成多个独立的组件。
状态管理
React 提供了状态管理功能，可以方便地管理组件的状态和数据。
CSS最早在1996年由W3C发布，经过多个版本的发展，目前最新的版本是CSS3，增加了许多新的特性和 功能。
CSS选择器
元素选择器
通过HTML元素名称来选择并应用样式，例如`p { color: red; }`会将所有段落的文本颜色设置为红 色。
ID选择器
通过ID来选择并应用样式，以`#`开头，例如 `#myID { font-size: 20px; }`会将ID为myID的元 素的字体大小设置为20像素。
类选择器
通过类名来选择并应用样式，以`.`开头，例如 `.myClass { background-color: yellow; }`会将 所有class属性为myClass的元素的背景色设置为 黄色。
属性选择器
通过元素的属性和值来选择并应用样式，例如 `[href] { text-decoration: none; }`会将所有带有 href属性的元素的文本装饰去除。
表单验证
为了提高用户体验和确保数据准确性，需要对表单进行验证，如检 查输入格式、验证必填项等。
交互设计
通过合理的布局和美观的设计，使表单易于填写和提交，同时提供 友好的用户反馈，如错误提示、成功提示等。
导航菜单设计
1 2
导航类型
根据网页结构和内容，可以选择合适的导航类型， 如水平导航、垂直导航、面包屑导航等。
React框架介绍及使用
JSX语法
React 使用 JSX 语法，允许在 JavaScript 中编写 HTML 结构， 提高了开发效率。
组件化开发
React 同样支持组件化开发，可以将页面拆分成多个独立的组件。
状态管理
React 提供了状态管理功能，可以方便地管理组件的状态和数据。
第01章-网页设计基础知识ppt课件(全)
:::::《计算机基础与实训教材系列》系列丛书官方网站
edu :::::
1.4.4 网页框架语言HTML
HTML(Hyper Text Markup Language)即超文本标记语言，是WWW上 通用的描述语言。HTML语言主要是为了把存放在一台计算机中的文本或图 形与另一台计算机中的文本或图形方便地联系在一起，形成有机的整体。
《 网页设计与制作基础教程(第3版)》
第一章
网页设计基础知识
学习目标
随着因特网（Internet）的不断发展，越来越多的人都想要 学习设计与制作网页，但是要实现较好的网页效果，设计者首 先要了解网页的相关基础知识，例如网页与网站的关系，网页 设计的构思与布局方式，常用的网页制作工具，以及与网页相 关的概念等。
简单地说，WWW是漫游Internet的工具，它把Internet上不同地点的相 关信息聚集起来，通过WWW浏览器(如IE，即Internet Explorer)检索，无论 用户所需的信息在什么地方，只要浏览器为用户检索到之后，就可以将这些 信息(文字、图片、动画、声音等)“提取”到用户的计算机屏幕上
edu :::::
1.1.2 网页的基本元素
网页是一个纯文本文件，其通过HTML、CSS等脚本语言对页面元素进 行标识，然后由浏览器自动生成页面。组成网页的基本元素通常包括文本、 图像、超链接、Flash动画、表格、交互式表单以及导航栏等。
:::::《计算机基础与实训教材系列》系列丛书官方网站
edu :::::
网页制作软件——Dreamweaver 图像处理软件——Photoshop 动画制作软件——Flash
:::::《计算机基础与实训教材系列》系列丛书官方网站
edu :::::
第1章 网页设计基础PPT学习课件
2020/3/3
1.6 HTML语言
1.6.1文件结构标签 1.6.2表格标签 1.6.3文本段落标签 1.6.4图像标签 1.6.5链接标签 1.6.6框架标签 1.6.7表单 1.6.8块标签
25
2020/3/3
互联网就是借助通信线路将计算机和各种相 关设备相连接，并按照统一的标准在各种设 备之间进行数据传输和交换，实现互联互通， 以达到计算机之间资源共享和信息交换的目 的。
3
2020/3/3
1.1互联网基础
互联网提供的主要服务包括万维网（World Wide Web，WWW，3W，Web），电子邮件（E-mail）， 文件传输（FTP）和远程登录（Telnet）等。
10
2020/3/3
1.2网页设计知识
3. 利用图像配色
1.2.2网页设计元素
1. 网站标识
网站logo，将网站logo置于页面比较醒目的位置，如左 上角。
2. 网站banner
网站banner一般位于页面的顶部，即可以表达和突出网 站创意和形象，也可以传达某种特定信息。
网络banner通常是由GIF动画、JPEG图像或Flash动画完 成的。
1.5.3后期工作
1．网站测试 网站测试包括网站运行的每个页面和程序。兼容性测试，
超链接测试是必选的测试内容。
2．网站发布 网站发布包括申请域名，申请服务器空间和上传网站内
容。
22
2020/3/3
1.5 网站制作流程
3．网站推广 注册搜索引擎是最直接和有效的方法。 通过在同行或相关行业网站中，建立网站的相互链
Dreamweaver，Photoshop和Flash是由Adobe公司开发 的3款软件，具有良好的集成性。Photoshop和Flash的 输出结果可以直接导入Dreamweaver网页中。
网页设计制作概述-PPT课件
2）设置开发环境：包括选择Web应用程序服务器、利用 Dreamweaver网页制作软件定义站点及数据源。
3）规划页面设计和布局：包括用绘画工具创建页面和界面 模型，以及使用Dreamweaver、FrontPage布置页面。 4）创建内容资源：包括使用Fireworks、Photoshop和 Flash创建图像、视频等。 5）组合、测试和部署站点：包括使用Dreamweaver设置 文本格式、编译资源，测试代码将站点发布到服务器上。 6）维护站点：包括使用Dreamweaver保持内容的更新。
1.1 网页、网站的概念
1.1.2 静态网页和动态网页 •按照Web服务器的响应方式的不同，可以将Web页分为静 态网页和动态网页。 • 静态网页指客户端的浏览器发送URL请求给Web服务器， 服务器查找需要的超文本文件，不加处理直接下载到客户端， 运行在客户端的页面是已经事先做好并存放在服务器中的网 页。
1.1 网页、网站的概念
1.1.2 静态网页和动态网页 动态网页是指必须经过应用程序服务器处理后才能交给Web 服务器送到客户端进行显示的网页文件。这类网页根据所采 用的应用程序服务器不一样，其文件名的扩展名也不一样。 可以是 hph，jsp，asp等等。 动态网页技术根据程序运行的区域不同，分为客户端动态技 术与服务器端动态技术。 客户端动态技术不需要与服务器进行交互，实现动态功 能的代码往往采用脚本语言形式直接嵌入到网页中。服务器 发送给浏览者后，网页在客户端浏览器上直接响应用户的动 作。常见的客户端动态技术包括JavaScript、ActiveX和 Flash等。
1.1 网页、网站的概念
1.1.2 静态网页和动态网页 •按照Web服务器的响应方式的不同，可以将Web页分为静 态网页和动态网页。 • 静态网页指客户端的浏览器发送URL请求给WWW服务器， 服务器查找需要的超文本文件，不加处理直接下载到客户端， 运行在客户端的页面是已经事先做好并存放在服务器中的网 页。其页面的内容使用的仅仅是标准的HTML代码，静态网 页通常由纯粹的HTML/CSS语言编写。
相关主题