静态网页制作教程 第一章 网页基础
英文名称 Black While Gray Sliver Red Green Blue Yellow
颜色 黑 白 灰 银灰 红 绿 蓝 黄
英文 Purple Olive Navy Aqua Lime Maroon Teal Fuchsia
颜色 紫 橄榄绿 深蓝 水蓝 青绿 茶色 墨绿 紫红
1.HTML标记
在html中，标记的语法如下： <标记名称>要控制的文字</标记名称> 当用一组html标记将一段文字夹在中间时，这段文字与夹文 字的标记被称为一个组件。如： <title>hehe</title> 这就是一个组件，其中的title即为元素名，<title>就是一个标 记，hehe为该元素的内容，有时在元素名后面还有属性。因 此，在html文件中某个组件的完整定义语法如下: <标记名称 属性1=“值1” 属性2=“值2” 属性3=“值3”……>组件 数据</标记名称> 由以上可知，标记元素有四种格式： 空元素（没有内容的元素） 带有属性的空元素 带有内容的元素 带有内容和属性的元素
另外，也可以利用十六进制数值方式来指定颜色，颜 色的表示方法如下： #RRGGBB 其中，RR代表红色、GG代表绿色、BB代表蓝色，我 们以00到FF的值表示三种颜色成分的多少，以指定 出三种原色以多少的成分组成新颜色。语法如下： <body bgcolor=“#00ff00”> 另外，ie支持3位数的颜色表示方法。与六位数的表 示方法类似，不过就是位数少而已 #RGB分别表示红绿蓝的成分。 例如：绿色可以用“#0F0”表示 （实例）
文档结构和格式的定义是由html元素来完成的。 而html元素是由单个或一对标记定义的包含范 围。一对标记是指一个起始标记和一个结束标 记。一个起始标记是由一个元素名和后面的一 个在小于号（<）和大于号（>）之间的属性/ 值对系列组成。结束标记在元素前有一个斜杠 （/），此外，它并不包括属性/值列表。
4.如果可能，应该将每一页都设计的简短一 些，每一页的文本及图形不应该超过一到两 个屏幕。如果一页太长，则读者不得不来回 滚动屏幕以阅读整份页面，这样就会打断文 档的流畅性。如果页面必须很长，则应在文 档中包括目录和指向特殊位置的链接，以使 读者便于找到所需信息。 5.不要在页面上ห้องสมุดไป่ตู้置太多的图形。图形文件 很大，意味着浏览器装载一页包括图形的页 面会非常费时。尽管你的网络连接可能非常 的迅速，但是别人访问你网页可能相对很慢。 6.在决定将自己的页面推向世界之前，应仔 细检查一下是否有错误和不佳之处。
了解HTML的发展信息
要掌握html，就必须了解它的发展。大家可以通过下 面俩个链接了解html文档草案的现状、未来html的发 展已经url的工作原理的升级文档等。 1./:提供一个链接指向描述已被确 认为internet标准及现在被所有浏览器支持的html特 性的文档。 2./hypertext/www/addressing/add ressing.html:讲解url的各种类型和如何在web文档中 使用它们。
4.利用图像作为WEB页面使得 背景
Background属性 指定作为html文件背景的图片，可以使用的图 文件格式为gif和jpg，其语法如下： Background=“文件名称与路径” 假如引用c:/html/sub/目录下的bg.gif图文件作 为html文件背景时，此属性的设置语法如下： Background=“c:/html/sub/bg.gif”
<html> <head> …… </head> <body> …… </body> </html>
Html
head
body
从上图中，我们可以容易的了解到整个html文件中 所有的数据均被建立为一个一个组件，并组织为一 个层次化的结构。 当利用html标记来定义组件时，定义标记不可交错， 否则将造成错误。下面的语法中，<head>标记与 <body>标记彼此交错，这样是不对的，如果标记 交错时，我们无法区别两个组件的范围 <html> <head> …… <body> 错误 </head> …… </body> </html>
四.WEB页面的颜色
通过<body>标记内属性的设置，来达到控制 web页面的颜色的效果，主要内容： 1.为web页面设置背景颜色 2.为web页面设置文本颜色 3.在web页面设置中为超文本链接设置颜色 4.利用图像作为web页面使得背景
1.为WEB页面设置背景颜色
Html允许编写者为其web页面选择各种各样 的颜色，包括背景、文本等等，这通过这种 <body>标记的常用属性 Bgcolor属性（用来控制页面的背景颜色） 语法：bgcolor=“颜色” 其中，颜色可以通过两种方式来表示，可以 直接指定颜色的英文名称，常用的基本颜色 名称如表：
<head>标记：建立的组件的内容为文件 标题。其中并不放网页的任何内容，而 是放置有关有关html文件的信息，例如： 文件的标题、编辑方式……等等。这些信 息大部分是提供索引、辨认和其他应用 之使用。 <body>标记：建立的组件是html文件的 主体，也就是网页的主要内容。依照各 种html的控制，这些内容将呈现在浏览 器的窗口中。 因此，所有文件的最基本结构如下：
寻找一个WEB编写工具
Html编辑器或编写工具是指不用进入html核心而为web 页面创建html文档的程序。这些程序所使用的格式与 允许人们在一页上输入文件或图形的字处理器或页面 设计程序相似。 许多字处理器，如microsoft word都具有html的编辑功 能。一般的，人们都使用windows自带的文本编辑器— —记事本程序来编写。还有一些软件，如microsoft frontpage和dreamweaver都内置一web编写工具，这使 得初学者在创建web页面时更简单。但是要学习更好的 网页设计制作（如动态网页等），必须要掌握html的 基本原理，所以这种情况下不宜使用frontpage和 dreamweaver等可视化的网页开发工具。
第一章 网页基础
一.www基础 二.网站和网页 三.Html基础及简单页面设计 四.Web页面的颜色 五.给html文档加注释
一.WWW基础
www（world wide web，简称互联网），一直 被人们称作internet的“杀手应用程序”。它可 以显示普通文字和图像并访问其他页面，而信 息子页则使得它成为internet上发展最快的部分。 你可能已经掌握了在web上如何探索信息世界， 但也有可能不太清楚如何向全世界发布你自己 的信息——有关你自己的信息，如你个人的兴趣、 你的工作等。 要创建自己的页面，最基础技术就是html （hypertext makeup language，超文本标记语 言），现在绝大多数web文档都是由html编写 的。
3.创建一个简单页面
创建一简单页面的基本步骤 1.打开一个html编辑器 2.编辑你的html文档 使用记事本程序 3.保存html文档 4.浏览你做的页面 <html> 文件扩展名为.html格式
<head> <title>我终于会自己设计页面了</title> </head> 两种方法： <body> 1.打开ie浏览 我终于会自己设计页面了哈哈 </body> 可以通过ie的菜单选项打开.html文件 </html>
注意：在html标记中，英文大小写字母 的意义是相同的，也就是说<html>和 <HTML>标记是一样的。 由于标记的存在和使用，html拥有层次 极为分明的基本结构。这对页面的制作 有很大的帮助。
2.HTML的基本结构
由于在HTML语法中，每个由html标记与文 字所形成的组件还可以包括另一组组件， 因此，整个html文件就像一个大组件，还包 含了许多小组件。 其中，所有的html文件最外层的组件，是由 <html>标记所建立的，在<html>标记所建 构的组件中，还包含了两个主要的子组件， 这两个子组件是由<head>标记与<body>标 记建立的。
www是一个全球性的、交互式的、动态的、 多平台的、分布式的、图像超文本的信息系 统。 访问者和网站有 不受地域的限制， 网站上的信息可 要能在web上四处遨游，首先必须安装一个 交互的过程，提交 一台服务器，多 可以在www上发 不受操作系统平 只要互联网保持连 以随时随地进行更 web浏览器。有了自己的web浏览器后，在 新 通就可以 信息、反馈信息 台的限制，如 台客户机构成分布 布多媒体信息，如 web上导航最简单的方法就是结合浏览器的 式 图像和声音、视频 windows、linnux等 各种性能在各页上移动。你可以通过选择指 系统平台 等 定的高亮度显示的文字、词或图像从一个页 面移至另一页面，也可以利用该页的地址或 url（uniform resource locator）统一资源定位 器来直接移至该指定页。
创建自己WEB页面的要点
有了上诉基本知识以后，就可以开始学习创建自己的 web页面了。不过，在创建自己的页面过程中，有一些 非常有用的技巧，必须好好的记住。 1.首先要搞清楚自己要说的东西。这看起来是很自然 的，但是许多页面的不成功就是由于它们缺少重点， 因为要展示给读者的观点一定要清楚明了。如果别人 搞不懂你想说什么，就不会有兴趣去读你的主页和其 他页面。 2.确定好目标之后，就应该考虑页面应包括的内容。 此时就应该按内容分割材料。材料可以分布在几页上， 也可以组合在同一页面中，这取决于你的写作方式。 3.除非页面非常短，否则编写一个简单介绍web站点的 目标、可得到信息及途径的简单页面是很有帮助的。 这一页面应包括内容介绍及目录，它可以使读者能对 继续阅读哪一页做出迅速的判断。此外，这一页上还 可包括指向有关所述论题的、更多信息的页面链接。
合集下载
Dreamweaver静态网页制作过程
第三页，编辑于星期五：二十三点 五十四分。
Dreamweaver静态网页制作(续)
内部链接：在同一网站文档之间的链接 外部链接：在不同网站文档之间的链接 锚点链接：同一网页或不同网页的指定位置的链接； E-mail链接：翻开填写电子邮件表格的链接； 2）文档的路径（URL） 相对路径： 绝对路径：完整的URL （基于目录的路径）：从根目录出发 3）链接的方法 在属性面板中可以直接使用 可以选择被链接文档的载入位置 _blank：新的未命名的浏览器窗口中； _parent：父框架集或包含该链接的框架窗口中； _self：相同的窗口中（是无需指定的） _top：整个浏览器窗口并删除所有框架； 可以借助于样式表来实现
网站内容的组织 （1）选择力求专业化；（主要是面向谁的问题） （2）网页内容的变化性； （3）网站内容设计者的爱好； （4）网站栏目的安排
第十五页，编辑于星期五：二十三点 五十四分 。
Dreamweaver静态网页制作(续)
a.要紧扣主题； b.设立最近更新或网站指南栏目； c.设立可以双向交流的栏目，如论坛、BBS、邮件列表等 d.设立要下载或常见问题的栏目。（从而做到信息资源的共享） 名称要正、名称要易记、名称要有特色。
图像的路径和文件名称，单击“Browse〞（浏览）按钮，可以从磁盘上选择图像文件。 这里不仅可以输入本地图像文件的路径和文件名称，也可以用URL的形式输入其他位置 的图像名称。实际上，这里设置的是<body>标记的background属性。 c)Background（背景） 在这里可以为文档页面指定背景颜色。实际上设置的是<body>标 记的bgcolor属性。 d)Text（文本） 这里可以设置文档页面中文字的前景颜色，实际上设置的是<body>标记的 text属性。 e)Links（链接） 这里可以设置文档页面中尚未访问过的超级链接的文字颜色，实际上设置 的是<body>标记的link属性。 f)Visited Links（访问过的链接） 这里可以设置文档页面中已经访问过的超级链接的文字 颜色，实际上设置的是<body>标记的vlink属性。
Dreamweaver静态网页制作(续)
内部链接：在同一网站文档之间的链接 外部链接：在不同网站文档之间的链接 锚点链接：同一网页或不同网页的指定位置的链接； E-mail链接：翻开填写电子邮件表格的链接； 2）文档的路径（URL） 相对路径： 绝对路径：完整的URL （基于目录的路径）：从根目录出发 3）链接的方法 在属性面板中可以直接使用 可以选择被链接文档的载入位置 _blank：新的未命名的浏览器窗口中； _parent：父框架集或包含该链接的框架窗口中； _self：相同的窗口中（是无需指定的） _top：整个浏览器窗口并删除所有框架； 可以借助于样式表来实现
网站内容的组织 （1）选择力求专业化；（主要是面向谁的问题） （2）网页内容的变化性； （3）网站内容设计者的爱好； （4）网站栏目的安排
第十五页，编辑于星期五：二十三点 五十四分 。
Dreamweaver静态网页制作(续)
a.要紧扣主题； b.设立最近更新或网站指南栏目； c.设立可以双向交流的栏目，如论坛、BBS、邮件列表等 d.设立要下载或常见问题的栏目。（从而做到信息资源的共享） 名称要正、名称要易记、名称要有特色。
图像的路径和文件名称，单击“Browse〞（浏览）按钮，可以从磁盘上选择图像文件。 这里不仅可以输入本地图像文件的路径和文件名称，也可以用URL的形式输入其他位置 的图像名称。实际上，这里设置的是<body>标记的background属性。 c)Background（背景） 在这里可以为文档页面指定背景颜色。实际上设置的是<body>标 记的bgcolor属性。 d)Text（文本） 这里可以设置文档页面中文字的前景颜色，实际上设置的是<body>标记的 text属性。 e)Links（链接） 这里可以设置文档页面中尚未访问过的超级链接的文字颜色，实际上设置 的是<body>标记的link属性。 f)Visited Links（访问过的链接） 这里可以设置文档页面中已经访问过的超级链接的文字 颜色，实际上设置的是<body>标记的vlink属性。
静态网页制作教程入门级
JavaScr ipt 简 介
JavaScript是 一种脚本语言
JavaScript主 要用于增强网
页交互性
JavaScript可 以与HTML和 CSS结合使用
JavaScript可 以用于实现各 种动态效果和
交互功能
JavaScr ipt 基 本 语 法
添加标题
JavaScript概述
添加标题
HTML发展历程：从HTML 1.0到HTML5，经历了多个版本的发展和改进。
HTML基本结构：包括DOCTYPE声明、HTML元素、头部元素和主体元素等。
HTML常用标签：如标题标签、段落标签、链接标签、图像标签等。
HTML基 本 结 构
HTML文档的基本结构
HTML标签的分类与作用
HTML属性的定义与使用
发布网页到互联网上
注册域名 购买主机 上传网站文件 设置DNS解析
如何让搜索引擎找到你的网页
优化网页标 题和描述
优化网页内 容
优化网页 URL
提交网站到 搜索引擎
汇报人：
“写作前的准备”为标题的内容 • 写作前的准备 • 确定写作目标和主题 • 收集相关资料和素材 • 制定写作计划和提纲 • 准备好写作工具和环境
添 加 JavaScr ipt 代 码
JavaScript代码的 基本语法
在HTML文件中添 加JavaScript代码
JavaScript代码的 常用功能
互和动态更新
文件扩展名： 以.html、.htm、.shtml、 .xml等为扩展名
加载速度快：由于静态网页 不需要服务器处理，因此加
载速度相对较快
静态网页与动态网页的区别
定义：静态网页 是预先编写好的 HTML文件，而 动态网页则是根 据用户输入或系 统数据动态生成 的内容
静态网站建设 第四版 第一章 网页设计基础
1.1.1 Internet简介
Internet是一个全球性的计算机互联网络，中文名称 为“国际互联网”或“因特网”，是指将两台计算机或者 是两台以上的计算机终端、客户端、服务端通过计算机信 息技术手段互相联系起来，人们可以与远在千里之外的朋 友相互发送邮件、共同完成一项工作、以实现资源共享。
— 5—
— 14 —
第一章 网页设计基础
1.3 网页创意设计
1.3.1 什么是创意
创意并不是天才者的灵感，而是思考的结果。创意是 将现有的要素重新组合，是引人入胜、精彩万分、出奇不 意的想法；创意是捕捉出来的点子，是创作出来的奇招。 在网页设计中，创意的中心任务是表现主题。因此，创意 阶段的一切思考，都要围绕着主题来进行。
1.3 网页创意设计
1.2.5 图像
图像在网页中具有提供信息、展示形象、装饰网页、 表达个人情趣和风格的作用。图像是文本的说明和解释， 在网页适当位置放置一些图像，不仅可以使文本清晰易读， 而且使得网页更加有吸引力。网页中可以使用GIF、JPEG、 和PNG等多种图像格式，其中使用最广泛的是GIF和JPEG 两种格式。
1.1 网络基础知识
— 7—
1.1.3 什么是网页
网页又称HTML文件，是一种可以在网络上传输，能 被浏览器认识和翻译成页面并显示出来的文件
在网站设计中，纯粹HTML格式的网页通常被称为 “静态网页”。静态网页是相对于动态网页而言，是指没 有后台数据库、不含程序和不可交互的网页。静态网页是 网站建设初期经常采用的形式。
— 8—
第一章 网页设计基础
1.2 网页基本构成要素
1.2.2 Banner
Banner是网站横幅广告，是互联网广告中最基本的广 告形式。通常用于宣传网站的某个栏目或活动，为了能吸 引更多的注意，一般都制作成动画形式。Banner可以位于 网页顶部、中部或底部任意位置。常见的尺寸是480×60 像素或233×30像素。
静态网页的制作
信息添加到网页框架
中
设计网页布局和样式
确定网页主题和 风格
设计网页布局： 包括页面结构、 导航栏、内容区 域等
确定网页颜色、 字体、图片等样 式元素
使用HTML和CSS 技术实现网页布 局和样式的制作
编写HTML代码
了解HTML基本结构 学习常用标签和属性 掌握CSS样式和JavaScript脚本的使用 学会使用编辑器和IDE进行开发
静态网页与动态网页的区别
定义：静态网页 是预先编写好的 HTML文件，而 动态网页则是根 据用户输入或系 统数据动态生成 的内容。
交互性：动态网 页具有交互性， 可以根据用户输 入或系统数据展 示不同的内容， 而静态网页则没 有交互性。
更新方式：静态 网页需要手动更 新，而动态网页 则可以通过后台 管理系统自动更 新。
图片格式选择：选 择合适的图片格式， 如JPEG、PNG等， 以获得最佳的图像 质量和文件大小
文件大小限制：设 定合理的文件大小 限制，避免过大导 致加载缓慢
代码优化：精简 HTML、CSS和 JavaScript代码， 减少不必要的代码 和冗余
静态网页的发布与部署
发布到本地服务器
静态网页的本地发布 本地服务器的搭建与配置 静态网页的部署与访问 本地服务器与远程服务器的区别
静态网页的制作
汇报人：
汇报时间：20XX/XX/XX
YOUR LOGO
目录
CONTENTS
1 静态网页的基本概念 2 静态网页的制作流程 3 静态网页的制作工具 4 静态网页的优化技巧 5 静态网页的发布与部署 6 静态网页的常见问题和解决方案
静态网页的基本概念
静态网页的定义
静态网页是预先编写好的 HTML文件
中
设计网页布局和样式
确定网页主题和 风格
设计网页布局： 包括页面结构、 导航栏、内容区 域等
确定网页颜色、 字体、图片等样 式元素
使用HTML和CSS 技术实现网页布 局和样式的制作
编写HTML代码
了解HTML基本结构 学习常用标签和属性 掌握CSS样式和JavaScript脚本的使用 学会使用编辑器和IDE进行开发
静态网页与动态网页的区别
定义：静态网页 是预先编写好的 HTML文件，而 动态网页则是根 据用户输入或系 统数据动态生成 的内容。
交互性：动态网 页具有交互性， 可以根据用户输 入或系统数据展 示不同的内容， 而静态网页则没 有交互性。
更新方式：静态 网页需要手动更 新，而动态网页 则可以通过后台 管理系统自动更 新。
图片格式选择：选 择合适的图片格式， 如JPEG、PNG等， 以获得最佳的图像 质量和文件大小
文件大小限制：设 定合理的文件大小 限制，避免过大导 致加载缓慢
代码优化：精简 HTML、CSS和 JavaScript代码， 减少不必要的代码 和冗余
静态网页的发布与部署
发布到本地服务器
静态网页的本地发布 本地服务器的搭建与配置 静态网页的部署与访问 本地服务器与远程服务器的区别
静态网页的制作
汇报人：
汇报时间：20XX/XX/XX
YOUR LOGO
目录
CONTENTS
1 静态网页的基本概念 2 静态网页的制作流程 3 静态网页的制作工具 4 静态网页的优化技巧 5 静态网页的发布与部署 6 静态网页的常见问题和解决方案
静态网页的基本概念
静态网页的定义
静态网页是预先编写好的 HTML文件
第一章网页基础
1.1.3静态网页与动态网页 1.1.3静态网页与动态网页
2. 动态网页 动态网页使用ASP、PHP和CGI等程序生成，动态网页中的某些脚本 只能在Web服务器上运行，而静态网页中的任何脚本都不能在Web 服务上运行。当Web服务器接收到对静态网页的请求时，服务器将 Web 该页发送到请求浏览器，而不进一步的处理。当Web服务器接收到 对动态网页的请求时，它将做出不同的反映：服务器根据URL携带 的参数通过应用服务软件（如IIS等）运行服务器端程序，产生的结 果页面再返回客户端。应用服务软件与Web服务器软件一并安装、 运行在同一台计算机上。
1.2 网站的基本结构
• 1.2.2 动态网站的层次结构 • Web服务器上存在许多HTML文件，用户可以使用浏览器通过HTTP 协议来访问并显示这些超文本页面。但是HTML文件仅仅是静态的网 页，不能动态更新，为了能动态访问网上的数据库资源，达到交互式 的访问的目的，Web服务器中包括了CGI（公共网关接口），提供了 与网上数据库资源连接的可能性。中间件可以实现Web服务器与数据 库资源的连接。对于嵌入了数据库访问检索项的网页，中间件可以将 检索项转换成SQL语句访问数据库，并将所需的数据库资源解释成浏 览器可以解释的HTML页面供用户浏览。数据库资源可以经局域网或 广域网与Web服务器连接。 • 另外，从站点的文件目录层次来看，网站内文件组织的第一层是站点 文件夹，可以看成是站点的根目录；将网站内容分类后，放在站点文 件夹下面的子目录，称为第二层；每个分类内容下面还有细节内容可 以放在第二层目录的下面，称为第三层。网站的目录结构设计主要考 虑是否方便浏览者进行浏览，这需要网站的设计者对网站的内容在整 体上进行规划。一般中小型的网站的层次不超过三层，层次过于复杂 容易使浏览者不易查找到想要浏览的内容。
静态网页的制作PPT课件
.
1.4静态网页的制作工具
1、图像处理与动画制作工具：Photoshop、Flash 等。 2、网页编辑工具：1）纯文本编辑工具，如 Notepad等；2）转换工具，如word等；3）专用工 具，如FrontPage、Dreamweaver等。 3、网页上传工具：1)FTP工具，如WS-FTP， CuteFTP等；2)专用网页编辑软件的文件传输功能。 4、网页优化工具：网页减肥茶、网页优化大师等。
.
1.3静态网页的工作过程
静态网页制作概括起来，有如下几个部分： 1、网页素材搜集与制作（图像处理与动画制作） 经常需要在网页中应用一些图像与动画，一方面是由于 实际内容的需要，一方面是为了增加网页吸引力。在WWW 上通常采用jpeg、GIF格式的图片和flash等格式的动画。 2、网页版式设计 规划各元素在网页中的位置关系和表现方法，合理安排 图像、文本等元素，使网页布局合理、美观大方。 3、文本编写 自己的网页中需要大量的文字材料，这就要在网页编辑 器中用HTML语言中的标签编写。也可以利用网页编辑工具 的“所见即所得”功能，直接写入文字。 4、处理网页之间的关联 主要是建立合理、高效的网页导航系统。 5、网页发布 主要是将建设好的网页上传到服务器中供用户浏览。
.
2.2 HTML编写工具
用HTML编写的文件(文档)的扩展名是．HTML或.HTM。 它们是供浏览器解释浏览文件的格式。可以使用记事本、写 字板等编辑工具来编写HTML文件。HTML语言使用标志对 (标签)的方法来编写文件，既简单又方便。它通常使用<标志 名></标志名>来表示标志的开始和结束(例如 <HTML></HTML>标志对)，因此在HTML文档中这样的标志 对都必须是成对使用的。 在今天，做网页的工具到处都是,只要动几下鼠标，一个 精彩的网页就出来了，HTML是否要学呢？答案是肯定的， 因为工具就是工具，它们生成的代码是机械的，不够简洁， 使网页打开的速度减慢。还有很多新的功能，工具是生成不 了的。必需对代码进行编辑。
1.4静态网页的制作工具
1、图像处理与动画制作工具：Photoshop、Flash 等。 2、网页编辑工具：1）纯文本编辑工具，如 Notepad等；2）转换工具，如word等；3）专用工 具，如FrontPage、Dreamweaver等。 3、网页上传工具：1)FTP工具，如WS-FTP， CuteFTP等；2)专用网页编辑软件的文件传输功能。 4、网页优化工具：网页减肥茶、网页优化大师等。
.
1.3静态网页的工作过程
静态网页制作概括起来，有如下几个部分： 1、网页素材搜集与制作（图像处理与动画制作） 经常需要在网页中应用一些图像与动画，一方面是由于 实际内容的需要，一方面是为了增加网页吸引力。在WWW 上通常采用jpeg、GIF格式的图片和flash等格式的动画。 2、网页版式设计 规划各元素在网页中的位置关系和表现方法，合理安排 图像、文本等元素，使网页布局合理、美观大方。 3、文本编写 自己的网页中需要大量的文字材料，这就要在网页编辑 器中用HTML语言中的标签编写。也可以利用网页编辑工具 的“所见即所得”功能，直接写入文字。 4、处理网页之间的关联 主要是建立合理、高效的网页导航系统。 5、网页发布 主要是将建设好的网页上传到服务器中供用户浏览。
.
2.2 HTML编写工具
用HTML编写的文件(文档)的扩展名是．HTML或.HTM。 它们是供浏览器解释浏览文件的格式。可以使用记事本、写 字板等编辑工具来编写HTML文件。HTML语言使用标志对 (标签)的方法来编写文件，既简单又方便。它通常使用<标志 名></标志名>来表示标志的开始和结束(例如 <HTML></HTML>标志对)，因此在HTML文档中这样的标志 对都必须是成对使用的。 在今天，做网页的工具到处都是,只要动几下鼠标，一个 精彩的网页就出来了，HTML是否要学呢？答案是肯定的， 因为工具就是工具，它们生成的代码是机械的，不够简洁， 使网页打开的速度减慢。还有很多新的功能，工具是生成不 了的。必需对代码进行编辑。
《网页设计与制作》第一章网页制作基础
块级元素与行内元素
浮动布局
浮动布局是一种常用的网页布局技术，通过设置元素的 `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`。
静态网页设计Dreamweaver 第一章
1.2 网站配色方案
（4）三色配色方案
在圆环上选择一个等边三角形三个顶点上的颜色构成配 色。 对比强烈，页面显得不稳定，给人另类的感觉，产生紧 张感。
1.3 网站设计常用软件
1、网站设计开发软件 （1）文本编辑器 记事本、Word写字板、UltraEdit等。通过书写HTML语言 来编写网页，也称为源代码编辑器。 （2）FrontPage 微软公司开发的，所见即所得，结合了设计、HTML、预 览三种显示模式，适合做简单的网页。 （3）DreamWeaver Adobe公司开发的一款优秀的网站开发工具，功能十分 强大，当前最为流行的网站设计软件。
1.3 网站设计常用软件
1、网页美工软件 （1）Photoshop Adobe公司开发的一款图形图像软件，流行的平面设计 软件之一。是美化网页的常用工具。 （2）Fireworks 网络图形设计编辑软件，它简化了网络图形设计的工作 难度，可以做出动态的GIF动画，可以轻易的完成大图 切割、动态按钮、动态翻转图等。 （3）Flash
模块一
网页设计基础
实训1
体验HTML文档
目的： 理解网页的本质HTML文档 简单了解使用HTML编写网页 内容：P1-P4
1.1
网页基础知识
1、Internet（因特网）概述
定义：利用通信线路和通信设备将世界各地 的计算机网络、主机和个人计算机互相连 接起来，在网络协议控制下构成的全球互 联网。 万维网（www）
单行文本域 <input name=“文本域名称” type=“text” value=“初始值”/> 密码文本域
<input name=“文本域名称” type=“password” value=“初始值”/>
《静态网页的制作》课件
表单验证的实现
验证用户输入
使用JavaScript可以验证用户 在表单中输入的数据，确保数 据的正确性和有效性。
防止恶意输入
通过JavaScript的验证，可以 防止恶意用户输入对网站造成 安全威胁的内容，如SQL注入 、跨站脚本攻击等。
提高用户体验
通过实时验证，用户可以立即 知道输入的数据是否符合要求 ，提高用户体验。
动态内容的生成
数据动态展示
使用JavaScript可以动态展示数据，如动态表格、图 表等。
动态内容更新
通过JavaScript可以动态更新网页内容，根据用户的 操作或时间等条件进行内容的变化。
个性化内容推荐
使用JavaScript可以根据用户的喜好和行为，推荐个 性化的内容和产品。
06
静态网页的优化与发布
总结词：详细描述
动画：CSS提供了关键帧动画，可以创建复杂的动画 效果。通过改变元素的属性值，可以实现元素的移动
、旋转、缩放等动画效果。
过渡：CSS的过渡属性可以实现元素属性值的变化效 果，如颜色、大小等。通过过渡效果，可以创建平滑
的视觉效果，提高用户体验。
05
JavaScript在静态网页中的应用
80%
特点
可以实现响应用户操作、动态更 新内容等功能，提升用户体验。
图像处理软件
作用
用于处理和优化网页中使用的图片。
常用软件
Photoshop、GIMP等。
特点
可以进行图片裁剪、调整色彩、添加滤镜等操作 ，提高图片质量。
03
静态网页的基本构成
HTML文档结构
HTML文档的基本元素
HTML文档由`<!DOCTYPE html>`、`<html>`、`<head>`和`<body>`等元素组成， 每个元素都有其特定的作用。
静态网页制作经典教程
总结词
表单元素
04
CHAPTER
网页优化
减少HTTP请求
通过合并、压缩和利用缓存等技术，减少页面加载过程中所需的HTTP请求数量。
优化图片大小
采用适当的图片格式，压缩图片文件大小，以加快页面加载速度。
使用CDN加速
通过内容分发网络（CDN）将静态资源缓存到全球各地的节点，提高用户访问速度。
加载速度优化
详细描述
弹性布局中的元素宽度通常使用百分比值来设置，这样当浏览器窗口大小改变时，元素的大小和位置也会相应地调整。这种布局方式具有高度的灵活性和可扩展性，能够适应不同尺寸的屏幕和设备。
弹性布局
03
CHAPTER
页面元素
文本是网页中最基本的元素，用于传达信息、标题、段落等。
总结词
在静态网页中，文本通常使用HTML标签进行格式化，如 `<h1>` 到 `<h6>` 用于标题，`<p>` 用于段落，以及 `<strong>` 和 `<em>` 用于强调文本。
详细描述
响应式布局采用CSS3的媒体查询技术，通过检测浏览器窗口或设备的宽度和分辨率，应用不同的CSS样式来改变网页的布局和元素的大小。这种布局方式能够确保网页在不同设备上都能获得良好的视觉效果和用户体验。
响应式布局
总结词
弹性布局采用百分比宽度和相对单位，使网页元素的大小和位置能够随着浏览器窗口的大小而变化。
优化购物流程和用户体验
电商网站应简化购物流程，提供清晰的导航和搜索功能，以及实时库存更新和订单跟踪。确保用户在购物过程中能够快速找到所需信息并顺利完成购买。
加强营销和推广
通过运用SEO技术、社交媒体广告和电子邮件营销等方式，提高电商网站的曝光率和流量。同时，运用优惠券、促销活动和会员制度等手段提高用户转化率和忠诚度。
表单元素
04
CHAPTER
网页优化
减少HTTP请求
通过合并、压缩和利用缓存等技术，减少页面加载过程中所需的HTTP请求数量。
优化图片大小
采用适当的图片格式，压缩图片文件大小，以加快页面加载速度。
使用CDN加速
通过内容分发网络（CDN）将静态资源缓存到全球各地的节点，提高用户访问速度。
加载速度优化
详细描述
弹性布局中的元素宽度通常使用百分比值来设置，这样当浏览器窗口大小改变时，元素的大小和位置也会相应地调整。这种布局方式具有高度的灵活性和可扩展性，能够适应不同尺寸的屏幕和设备。
弹性布局
03
CHAPTER
页面元素
文本是网页中最基本的元素，用于传达信息、标题、段落等。
总结词
在静态网页中，文本通常使用HTML标签进行格式化，如 `<h1>` 到 `<h6>` 用于标题，`<p>` 用于段落，以及 `<strong>` 和 `<em>` 用于强调文本。
详细描述
响应式布局采用CSS3的媒体查询技术，通过检测浏览器窗口或设备的宽度和分辨率，应用不同的CSS样式来改变网页的布局和元素的大小。这种布局方式能够确保网页在不同设备上都能获得良好的视觉效果和用户体验。
响应式布局
总结词
弹性布局采用百分比宽度和相对单位，使网页元素的大小和位置能够随着浏览器窗口的大小而变化。
优化购物流程和用户体验
电商网站应简化购物流程，提供清晰的导航和搜索功能，以及实时库存更新和订单跟踪。确保用户在购物过程中能够快速找到所需信息并顺利完成购买。
加强营销和推广
通过运用SEO技术、社交媒体广告和电子邮件营销等方式，提高电商网站的曝光率和流量。同时，运用优惠券、促销活动和会员制度等手段提高用户转化率和忠诚度。