静态网页制作教程 第一章 网页基础
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属性。
静态网页制作教程入门级
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文件
第一章网页基础
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是否要学呢？答案是肯定的， 因为工具就是工具，它们生成的代码是机械的，不够简洁， 使网页打开的速度减慢。还有很多新的功能，工具是生成不 了的。必需对代码进行编辑。
《网页设计与制作》第一章网页制作基础
块级元素与行内元素
浮动布局
浮动布局是一种常用的网页布局技术，通过设置元素的 `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技术、社交媒体广告和电子邮件营销等方式，提高电商网站的曝光率和流量。同时，运用优惠券、促销活动和会员制度等手段提高用户转化率和忠诚度。
第一~三章网页设计基础知识
1.1.2 Internet 1.什么是Internet Internet即“因特网”，它是目前全球 最大的、开放的计算机互联网络。是一个 基于TCP/IP的网络，由分布在各个国家的 数以万计的网络互联设备组成。
1.1.2 Internet 1.什么是Internet （1） Internet起源于美国国防部的高级 研究计划局，最初主要用于军事。 20世纪70年代迅速壮大，发展成科研和 教育机构服务的网络。 （2） Internet提供的服务：WWW服务 （网页浏览服务）、电子邮件、文件传输 （FTP）、在线聊天、网上购物、网络炒股、 联网游戏等等。
WWW服务器采用客户机/服务器的工作模式。
1.1.4 统一资源定位器URL 1.URL：是对Internet上资源的一种准确定位 机制，它以一种全世界统一的、唯一标识 来确定某个网络资源，可以访问Internet 任何一台主机或者主机上的文件。
1.1.4 统一资源定位器URL
2.URL的组成：检索资源所使用的协议类型、存放 资源的主机域名、资源所在的路径名与文件名。 3.URL的地址格式：应用协议类型://主机域名/路径/ 文件名
2.1 页面的构成元素
2. 页面的构成元素
设计是一个思考过程，制作是将思考表现出来。也就 是说设计是网页的核心和灵魂。 结合网页设计的过程，按照网页页面所包含的各个构 成元素分类阐述： 表现主题 网站名称和CI形象 设计风格 版式设计 色彩运用 网页导航 视听元素
2.2 主题设计
1. 网页制作工具 （1）文本编辑器---网页制作通常使用HTML语言， HTML文档可以使用多种文件编辑器进行编辑。 例如记事本、word、写字板等。 （2）FrontPage---是由微软公司推出的网页制作工 具。其界面与word极为相似。 （3）Dreamweaver---具有可视化编辑界面，用户 不必编写HTML源代码就可生成跨平台、跨浏览 器的网页，即使是初学者也能制作出专业水准的 网页，是网页设计者的首选工具。
静态网页
09 </html>
【运行程序】浏览该页面，结果如图1.3所示，它只能浏览而不能被交互。
图1.3 静态页面示例
【深入学习】静态页面使用HTML编写，通常扩展名为.htm、.html、.shtml、.xml等。静态网页只能单纯地在网页中展示文字与图片，听起来似乎功能简单，但它是所有网页的基础要素，其重要性不言而喻。
图1.1和图1.2都是有着一个3×3表格的页面。这样的描述，如同HTML语言所表达的含义，体现出页面上的内容，而在浏览器中最后的显示效果是完全不同外表的两个表格。图1.1表格的边框较粗，黑色；图1.2表格边框较细，红色。这是因为它们使用了不同的CSS样式表。
所以通俗地说，HTML表现了页面的结构，而CSS修饰了页面中的这些内容。如果把制作网页比作一个人在设计一间屋子，那么HTML语言的作用是用来明确这个屋子内要放入哪些家具，或者是床、书柜、椅子等。而CSS的作用就是改变这些家具的样式，对应的如床的样式、书柜的样式、椅子的样式等。
在静态网页中，整个网页的主要结构与网页的显示控制都必须利用HTML实现。在HTML格式的网页上，可以出现各种动态的效果，如.GIF格式的动画、Flash、滚动字幕等。这些“动态效果”只是视觉上的，而动态网页是不同的概念。
1.1.3 动态网页
动态网页是与静态网页相对应的，指网页的内容可以根据某种条件的改变而自动改变。如腾讯公司的Qzone空间里，常常会有一些使用者嵌入一个小小的计数器功能，当有人单击设计者的网页时，计数器的值会自动增加。这个计数器就是动态的。再比如，目前网络流行的论坛、社区网，其中用户的注册页面，当用户输入正确的用户名和密码后会成功登录，如果输入的用户名或密码错误，页面会提示用户错误信息。这也是典型的动态页面。
静态网页设计知识点
静态网页设计知识点静态网页设计是指通过HTML、CSS等静态技术手段来构建网页的过程。
在静态网页设计中，我们需要掌握一些关键的知识点，以确保所设计的网页既具备美观的外观，又具备良好的用户体验。
本文将重点介绍一些静态网页设计的知识点，以帮助读者更好地理解和运用这些技术。
一、HTML基础知识1. HTML基本结构：HTML网页一般由<!DOCTYPE>声明、<html>标签、<head>标签和<body>标签组成。
2. 标题与段落：使用<h1>至<h6>标签定义标题，使用<p>标签定义段落。
3. 图片与链接：使用<img>标签插入图片，使用<a>标签创建链接。
4. 列表与表格：使用<ul>、<ol>和<li>标签定义无序和有序列表，使用<table>、<th>和<td>标签创建表格。
二、CSS样式设计1. CSS选择器：针对HTML元素的不同属性和结构进行选取，可以使用标签名、类名、ID等不同类型的选择器。
2. 字体与颜色：使用font-family属性定义字体样式，使用color属性定义文字颜色。
3. 背景与边框：使用background属性定义背景颜色或背景图片，使用border属性定义边框样式。
4. 盒模型：了解盒模型的概念和属性，包括margin、padding、border和content。
5. 浮动与定位：使用float属性定义元素的浮动方式，使用position属性定义元素的定位方式。
三、响应式设计与布局1. 媒体查询：利用CSS的@media规则，根据设备的屏幕尺寸和特征，为不同的屏幕设备提供不同的布局和样式。
2. 弹性盒子布局：使用CSS的flex属性，实现弹性的页面布局和定位。
3. 栅格系统：借助CSS框架（如Bootstrap），通过定义栅格来实现网页的自适应布局。
网页制作基础教程
网页制作基础教程第一章网页制作基础1、什么是网页一般浏览器中打开的都是网页，这些文档是通过超文本标记语言HTML表示出来的；主页：在网站中默认打开的页面称为主页，也叫首页，主页是进入网站的门户，网页中包括的内容：文本，图像，超级链接，表格，表单，多媒体及一些特殊的效果2、网站及运作原理网站是在互联网上一个固定的面向全世界发布消息的地方，它由网站地址和网站空间构成；网站开发者常常将网站称作为站点，在网站的开发者来说，网站就是在计算机上创建的一个多级的文件夹，并在各文件夹中保存着相关网页文件。
根据站点文件夹所在的位置分为：本地站点和远程站点；根据服务技术分：静态网站和动态网站3、了解HTML语言HTML是网上用于编写网页的主要语言，使用HTML语言编写的网页文件也是一个标准的纯文本文件，可以使用文本编辑器将它打开，但是该纯文本文件如果使用浏览器打开就会看到排版整齐的网页；4、HTML语言标签HTML标签用来标记网页元素，以形成文本布局，文字的格式及五彩缤纷的画面，HTML的标签分单标签和成对标签两种基础标签：<html></html> <head></head> <body></body>5、常用动态建站技术ASP是由微软开发的动态网页技术标准，其原理通过在HTML页面中加入VB JA V A代码，服务器在返回网页之前首先执行这些代码，产生最终的结果。
6、网站的制作流程及制作工具初期规划：建站之前，要有明确目的，要明白建立网站的目的，接受对象是哪些群体，要为访问者提供怎样的服务，然后对整个网站进行策划，中期制作：搭建本地站点，建立文件夹，建立站点结构图，设置页面属性等；后期工作：全面测试，上传后进行实地测试，完成本地测试后，再上传到服务器，以便进行远程测试；7、网页设计工具Dreamweaver 8 是最常用的网页编辑工具之一，使用该工具可以在其提供的三种视图中进行网页编辑与修改；图像处理工具Firework 8主要用来对网页中用到的图像素材进行制作或处理，它可以快速地制作和处理网页中图像，动画制作工具：FLASH 8 主要用来制作一些精彩的小动画，可以使页面变得更加精美，该软件是目前最流行的，矢量的，具有交互性的图形编辑软件；第二课创建站点1、启动：开始——程序——Macromediadreamweaver 8（双击桌面的图标）2、关闭：文件——退出，关闭按钮3、窗口的组成：标题栏（软件名称，版本号，文件名，最小化，最大化，关闭按钮）菜单栏：由文件，编辑，查看，插入，修改，文本，站点，窗口等主菜单组成；插入栏：位于菜单栏下方，有网页制作时常用的元素及命令，如常用，布局等开始页：打开软件时的页面，该页面位于屏幕中间的大部分区域；属性面板：一般位于窗口的底部，显示文档，网页元素及相关工具的属性；面板集：位于窗口右侧，可以快速展开或折叠一些功能面板，4、创建站点：站点——新建站点——站点名称——否（不用服务器）——建立一个本地文件夹——如何连接远程服务器（无）——完成；5、编辑站点，复制站点，删除站点，导出站点，导入站点，完成按钮；6、管理站点中的文件：站点的名称，远程文件管理器，站点文件结构——弹出菜单——视图菜单8、文档的新建，保存，打开及属性设置9、设置页面属性：修改——页面属性（页面字体，大小，文本颜色，背景颜色，背景图像，页边距，跟踪图像）第三课：制作网页1、在网页中插入文本（直接输入文本即可）（换行：ENTER，按SHIFT+ENTER可得到较小的行距；2、设置字体，大小，字形，颜色，对齐方式3、在网页中插入图像：插入——图像（图像的大小，对齐方式，边距等设置）4、插入——层（在层中插入图像，可将图像到处拖动）5、在网页中插入鼠标经过图像：插入——图像对象——鼠标经过图像（原始图像，鼠标经过时的图像）6、插入特殊的符号，版权，注册商标等；插入——文本——版权，注册商标，符号等7、插入多媒体文件；插入——媒体——FLASH（选择插入的文件）8、设置动画的大小及其边距（属性面板：宽，高，垂直，水平的间距）9、插入——布局对象——层（设置背景图像，大小，方向等设置）10．向网页中插入链接：选择文本——在图像中选择链接的文件；11．创建外部链接：在文档中输入网名，选择名称：引用链接网址12．创建锚记：先命名锚记——然后再选择要引用锚记的文字，然后进行链接OK（引用时加#）13．在网页中插入视频：插入——媒体——插件（选择视频文件14．创建邮件链接：选择图像——链接邮箱地址15．创建下载链接：选择文本或图像——链接文件（ZIP RAR EXE）等文件第四课页面布局1、插入——表格（行数，列数）2．表格的宽度，3．边框粗细；4．单元格边距；5．单元格间距；6．合并所选单元格，拆分单元格，背景，背景颜色，边框；7．表格布局；插入——表格（在单元格内插入表格（做嵌套表格）8．改变列宽，行高9．网页的布局：插入——布局对象——层（可以创建多个层，如同文本框的设置）10．设置层的属性：宽度，高度，单击插入图像的层选择手柄，在属性面板中11．布局网页框架：创建布局表格，创建布局单元格，做嵌套布局表格；12．将布局转换成表格：修改——转换——表格到层（防止层重叠，显示层面板，显示靠齐到网格）13．框架布局与样式定义：插入——框架（选择框架布局形式）14．制作背景固定网页：定义样式第五课CSS样式与行为1、光晕效果的应用CSS面板——添加滤镱设置（名称，（GLOW（color=?,strength=?）设置(color=red,strength=3)2、添加行为：行为面板（添加行为，删除行为，执行顺序）3．设置触发行为的事件：事件，动作4．记录移动路径5、添加时间轴行为：6、制作表单元素；第六课，表单与模板、1、制作注册页面2、创建网站模板；3、将网页保存为模板：文件——另存为模板4、创建可编辑区域：插入——模板对象——可编辑区域；5、网页模板的应用，打开后修改——然后另存为其它网页文件；6、分离模板：修改——模板——套用模板到页（修改——模板——从模板中分离）第七课：FLASH的操作1、启动：双击桌面图标，2、退出：关闭按钮；3、窗口的组成：标题栏，菜单栏，编辑栏，工具箱，面板集，舞台，属性面板；4、标题栏：它位于整个窗口的最上方，最小化，最大化，关闭按钮等；5、菜单栏：由文件，编辑，视图，插入，修改，文本，命令等6、工具栏：位于整个软件的左侧，分为，工具，查看，颜色和选项四个选项；绘制卡通房子的练习；第二课工具的使用1、直线工具；按SHIFT水平或垂直直线，粗细，端点（尖角，圆角，斜角）2、钢笔工具：是通过路径来绘制笔触图形的，按CTRL或双击曲线外时，可结束绘图；3、任意变形：旋转，倾斜，缩放，扭曲，封套模式等；4、输入文本：文本类型，字体，字号，字体样式，对齐方式；5、添加滤镜效果：选择对象或文本——属性栏中找到滤镜类型；（删除滤镜）6、美化图形——设置颜色7。
设计静态网页知识点
设计静态网页知识点在设计静态网页时，你需要了解一些基本的知识点，以确保你能够创建出整洁美观、功能齐全的网页。
下面将介绍一些重要的知识点。
一、HTML基础知识HTML（超文本标记语言）是网页的基础，它用于描述网页的结构和内容。
在设计静态网页时，你需要了解以下几个重要的HTML标签：1. <!DOCTYPE>：定义文档类型。
2. <html>：定义HTML文档。
3. <head>：定义文档的头部分，包含网页的元数据。
4. <title>：定义网页的标题。
5. <body>：定义文档的主体部分，包含网页的内容。
6. <h1> - <h6>：定义标题。
7. <p>：定义段落。
8. <a>：定义链接。
9. <img>：定义图像。
10. <div>：定义文档区块。
二、CSS样式CSS（层叠样式表）用于美化网页，控制网页的样式和布局。
以下是一些常用的CSS属性：1. color：定义文本颜色。
2. font-size：定义字体大小。
3. background-color：定义背景颜色。
4. margin：定义元素的外边距。
5. padding：定义元素的内边距。
6. border：定义元素的边框样式。
7. text-align：定义文本的对齐方式。
8. display：定义元素的显示类型。
三、响应式设计在设计静态网页时，需要考虑不同设备和屏幕大小的适配。
响应式设计可以使网页在各种设备上都能良好显示。
以下是一些常用的响应式设计技巧：1. 使用媒体查询（@media）来根据屏幕大小应用不同的CSS样式。
2. 采用流式布局，使用百分比和弹性盒子（Flexbox）来设置元素的尺寸和位置。
3. 使用图标字体（Icon Fonts）代替图像，以适应不同分辨率的屏幕。
四、网页优化在设计静态网页时，需要注意网页的性能和加载速度。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
英文名称 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站点的 目标、可得到信息及途径的简单页面是很有帮助的。 这一页面应包括内容介绍及目录，它可以使读者能对 继续阅读哪一页做出迅速的判断。此外，这一页上还 可包括指向有关所述论题的、更多信息的页面链接。