第1章 网页制作基础
网页制作基础
常见网站由域名（domain name 俗称网址或 域名）、网站源程序和网站空间三部分构成。
域名俗称网址； 网站源程序则放在网站空间里面，表现为网站前 台和网站后台； 网站空间由专门的独立服务器或租用的虚拟主机 承担。
2. 网站分类
根据网站所用编程语言分类：例如asp网站、 php网站、jsp网站、Asp. net网站等； 根据网站的用途分类：例如门户网站（综合网 站）、行业网站、娱乐网站等； 根据网站的功能分类：例如单一网站（企业网 站）、多功能网站（网络商城）等；
常见的Web浏览器软件有：IE、Firefox、 Opera和Netcape等。 不同Web浏览器软件所支持的网页格式有所区 别，所以WWW服务器提供网页信息时，要考虑客 户端软件的支持情况。
1.2.4 W3C
W3C是英文 World Wide Web Consortium 的缩写，中文意思是W3C理事会或万维网联盟。 W3C于1994年10月在麻省理工学院计算机科学实 验室成立。创建者是万维网的发明者Tim BernersLee。 W3C组织是对网络标准制定的一个非赢利组织， 像HTML、XHTML、CSS、XML的标准就是由 W3C来定制。
HTML是一种规范，一种标准，它通过标记符 号来标记要显示的网页中的各个部分。网页文件本 身是一种文本文件，通过在文本文件中添加标记符， 可以告诉浏览器如何显示其中的内容（如：文字如 何处理，画面如何安排，图片如何显示等）。
浏览器按顺序阅读网页文件，然后根据标记符 解释和显示其标记的内容，对书写出错的标记将不 指出其错误，且不停止其解释执行过程，编制者只 能通过显示效果来分析出错原因和出错部位。但需 要注意的是，对于不同的浏览器，对同一标记符可 能会有不完全相同的解释，因而可能会有不同的显 示效果。
网页制作基础知识
4．制作工具的选择
可使用FrontPage、DreamWeaver等网页制作软件。在本案例中，将使用 DreamWeaver MX进行“网页制作学习园地”网站的创建。
1.2 理论知识
1.2.1 HTML语言
在Web的发展历史中，HTML技术是优秀而核心的Web技术之一。目前计算机上包含互 联网在内的大部分应用程序在交互操作上的核心原理都来自于HTML的链接设计思想。
<h#>...</h#> <b>...</b> <i>...</i> <u>...</u> <sup>...</sup> <sub>...</sub> <tt>...</tt> <cite>...</cite>
<em>...</em>
<address>...</address> <strong>...</strong> <pre>...</pre>
<font size=" ">
<font face=" ">
<font color=" ">
设置文字的颜色
2 . 文本样式标记
文本样式标记用于设置网页中文字格式化为特殊的形式，如加粗、倾斜等。
文本样式标记如下表：
标 记 说 明
定义标题级别，黑体字显示。"#"=1～6。<h1>显示的字号最大、<h6>最小。 设置粗体字 设置斜体字 设置下划线 设置文本为上标格式 设置文本为下标格式 设置打字机风格字体的文本 以引用或参考的形式格式化文本，通常显示为斜体。
网页设计与制作课件第1章
1.1.2 Web浏览器基本结构原理
知识点评
中文名称：网络浏览器或网页浏览器，简称浏览器 （Web Browser）。 浏览器是显示网页服务器或文件系统内的HTML文件，并让用户与这些文件 互动的一种软件。个人计算机上常见的网页浏览器包括Microsoft Internet Explorer、Opera和Netscape等。浏览器是最常用的客户端程序。 网页浏览器主要通过HTTP协议连接网页服务器而取得网页，HTTP容许网页 浏览器送交数据到网页服务器并且获取网页。网页的位置以URL（统一资源定位 符）指示，此乃网页的地址，以HTTP: //开始的便是通过HTTP协议登录。 网页通常使用HTML（超文本标记语言）文件格式，并在HTTP协议内以 MIME内容形式来定义。大部分浏览器均支持许多HTML以外的文件格式，例如 JPEG、PNG和GIF图像格式。在HTTP协议和URL内容结合下，网页设计者便可 以把图像、动画、视频、声音和多媒体包含在网页中，或让浏览者透过网页而浏 览它们。
上一页 下一页 返回
知识点评
Dreamweaver另外还提供了许多面板、检查器或窗口。若要打开Dreamweaver 面板、检查器或窗口，可以使用【窗口】菜单进行选择，如下图所示。
【窗口】菜 单项所包含 的内容
上一页 返回
1.3.2 创建本地虚拟站点
在本地创建虚拟站点，如下图所示。
目标案例
下一页 返回
步骤7：系统显示刚对网站的设置内容，如果要对设置不满，可以单击“上 一步”按钮更改设置。
上一页 下一页 返回
知识点评
7．“属性”检查器
用于显示网页中各个元素的相关属性，用户可以设置“属性”面板中的 各选项参数，对网页中的各个属性作设置和修改。如下图所示。
网页学习1-2
3. 网站所有文件所要介绍的全部内容做一个类似书籍目录的索引。主页上 的链接对应到一级页面，一级页面里的链接对应于二级页面，依次类推
4. 加入一些交互功能，如留言本、问卷调查、下载、搜索等 设计主页应注意的问题 主页上可供选择的链接不可太少也不可太多，太少会让访问者觉得没有 意思，太多又会吓倒访问者。 主页文件的大小一般不超过200K，否则打开主页的时间过长，会让浏览 者失去耐心的。 主页的在800*600的普通分辨率下应不出现水平滚动条。 主页的风格应与网站中的其他网页一致。
6.Flash Flash是美国Macromedia公司开发的矢量图形编辑和动画创作的专业软件，它是 一种交互式动画设计工具，用它可以将音乐、声效、动画以及富有新意的界面融合 在一起，以制作出高品质的网页动态效果。它主要应用于网页设计和多媒体创作等 领域，功能十分强大和独特，已成为交互式矢量动画的标准，在网上非常流行。 Flash广泛应用于网页动画制作、教学动画演示、网上购物、在线游戏等的制作中。 7.Fireworks Fireworks是由Macromedia公司开发的图形处理工具，它的出现使Web作图发生 了革命性的变化。因为Fireworks是第一套专门为制作网页图形而设计的软件，同时 也是专业的网页图形设计及制作的解决方案。 作为一款为网络设计而开发的图像处理软件，Fireworks还能够自动切割图像、 生成光 标动态感应的JavaScript程序等等，而且Fireworks具有强大的动画功能和 一个相当完美的 网络图像生成器。
2.FrontPage FrontPage是由Microsoft公司推出的新一代Web网页制作工具。FrontPage使网 页制作者能够更加方便、快捷地创建和发布网页，具有直观的网页制作和管理方法， 简化了大量工作。 FrontPage界面与Word、PowerPoint等软件的界面极为相似，为使用者带来了极 大的方便，Microsoft公司将FrontPage封装入Office之中，成为Office家族的一员， 使之功能更为强大。
网页制作基础
常用的WEB图像格式
• GIF（Graphics Interchange Format） –GIF可以用来存储各种图像文件。特别适用 于存储线条、图标和电脑生成的图像、卡 通和其它有大色块的图像。 –GIF文件小，是一种压缩的8位图像文件， 所以最多只支持256种不同的颜色。Gif支 持动态图、透明图和交织图。
HTML
• 文档类型定义
HTML文件结构
–DTD（Document Type Definition） –一组标记（编码：特定文档类型）＋内容模型＋属 性表
• 文档标记语法
–HTML文档标记语法有文件结构、文本段、组件、多 媒体及动态方式、超级链接等。
• 文本结构语法
–描述文本内容、文件头部、标题、语言字符集、文 本主体、多窗口页面等
网页元素
网页中的元素-声音和视频
• 声音
–不同浏览器对声音文件的处理方法是不同的，彼此之 间很可能不兼容。 –常用的有MIDI、WAV、MP3和AIF等。 –很多浏览器不要插件也可以支持MIDI,WAV和AIF格式的 文件，而MP3和RM格式需要专门的浏览器播放。 –使用声音作为背景音乐—会影响网页下载的速度。 –可以在网页中添加一个打开声音文件的链接，让音乐 播放变得可以控制。
网页元素
网页中的元素-图像
• 图像的作用
–提供信息，展示作品，装饰网页，表达个人情调和风格。
• 图象格式
–GIF、JPEG(JPG)、PNG，使用最广泛的是GIF和JPEG。
• 说明：当使用网页设计软件在网页上添加其他非GIF, JPEG, 或PNG格式的图片并保存时，这些软件通常会 自动将少于8位颜色的图片转化为GIF格式，或将多于 8位颜色的图片转化为JPEG. • 在网页中为了更有效地吸引浏览者的注意，许多网站 的广告都做成了动画形式。
第一章网页基础
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服务器连接。 • 另外，从站点的文件目录层次来看，网站内文件组织的第一层是站点 文件夹，可以看成是站点的根目录；将网站内容分类后，放在站点文 件夹下面的子目录，称为第二层；每个分类内容下面还有细节内容可 以放在第二层目录的下面，称为第三层。网站的目录结构设计主要考 虑是否方便浏览者进行浏览，这需要网站的设计者对网站的内容在整 体上进行规划。一般中小型的网站的层次不超过三层，层次过于复杂 容易使浏览者不易查找到想要浏览的内容。
网页制作案例教程 清华大学出版社习题答案
5、页面管理、功能管理、信息管理、会员管理、广告和连接的管理
二、选择题
1、A 2、A 3、A
三、简答题
略
四、完成下面的实训题目
略
4、确定栏目和版块、确定网站的目录结构和链接结构、确定网站的整体风格创意设计
5、更好的宣传推广网站
二、选择题
1、A 2、A 3、A 4、A
三、简答题
略
四、完成下面的实训题目
略
第3章HTML基础
一、填空题
1、<hi>
2、标题标签、段落标签、格式化标签
3、有序列表(Ordered List)，无序列表(Unordered List)
2、简述CSS盒模型。
盒子模型是CSS控制页面时一个很重要的概念，所有页面中的元素都可以看成是一个盒子，传统的表格排版是通过大小不一的表格和表格嵌套来排版网页内容的，改用css后，就是通过css定义的大小不一的盒子和盒子嵌套来编排网页。这种方式代码简洁，更新方便，能兼容更多的浏览器。假设将每个HTML元素看作是一个装了东西的盒子，盒子里的东西到盒子边框的距离我们称为填充（padding），盒子本身的边框（border），盒子外边框外和其他盒子之间的边界（margin）。如图9-1-1所示：
4、Link、visited、hover和active分别是指超链接的什么状态。
a:link指正常的未被访问过的链接；a:hover指鼠标在链接上；a:active指正在点的链接；a:visited指已经访问过的链接。
四、完成下面的实训题目
略
第9章使用CSS布局规划网页
一、填空题
1、直接添加在HTML的标识符里、添加在HTML的头信息标识符< head>里、链接样式表、联合使用样式表
一、网页制作基础知识
音频素材的收集与处理
Cool Edit Pro音频编辑软件 Audio Converter音频格式转换利器 GoldWave音频处理工具
网站页面结构图示
一级页面 首页（index.html) 其他栏目…
二 级 页 面
三 级 页 面
文章栏目1
文章栏目2
内容页1
内容页2
内容页1
内容页2
内容页1
……
网页制作培训
内容提要
网站及网页基本概念和建站流程
HTML脚本知识
CSS样式表 网页布局设计（表格、DIV+CSS） 导航菜单、数据列表设计 网页制作综合练习
网页制作培训第一讲
一、网页及网站相关概念
二、建立网站的一般流程
三、了解和认识Dreamweaver的功能及操作界面 四、创建、编辑和管理站点 五、建站网页素材的收集与加工处理
一、网页及网站相关概念
浏览器、HTML、URL 网页与网站、服务器与客户端、IP与域名
二、建立网站的一般流程
1、确定网站主题 2、设计网站结构 3、收集整理建站素材 4、创建站点文件夹及网页文件 5、设计制作网页 6、创建各种链接 7、测试站点 8、申请空间、注册域名 9、连接服务器上传网站 10、使用、新、维护
网站文件夹及文件结构层次图示
wangzhan
以自己的姓名第一个字母
images（图片文件夹） css flash web （图片文件夹） （flash文件夹）
（网页文件夹，如果网站规模大，可按栏目建立子 文件夹）
music （音乐文件夹） download （下载资料文件夹）
三、Dreamweaver的功能及操作界面
1、功能特点介绍 2、认识操作界面
1.2什么是网页和网站
（5）脚本程序（Script）
可以在网页中直接解释的程序语言，有：JavaScript、VBScript两种语言。
3．什么是网站
（1）学生阅读书中第5页中“什么是网站”小节的内容，找出以下问题的答案（8分钟）：
A、网站、站点、首页、主页的概念与关系
网站：许多相关网页有机结合而形成的一个信息服务中心。又常被为“站点”。
HTML就是用于编写网页的统一的语言规范。只有采用HTML制作的网页，浏览器才能正确地阅读和运行。
（2）HTML语言的编写方法
第一种方法：使用记事本之类的工具，输入HTML标记和网页的内容进行直接编写，然后保存为以html或htm为扩展名的网页文件；
第二种方法：使用可视化的网页制作工具根据用户的可视化操作自动生成HTML代码，这样可以使人不需要了解HTML语言也能做出很好的网页。
(B)网页文件内容分为两大部分：<Head>和</Head>对称标记我们称为头部分，主要包含着和网页文件有关的一些头信息，除了标题标记<title></title>外，其他内容不会显示在浏览器中；<Body>和</Body>对称标记我们称为正文部分，里面的内容会显示在IE浏览器中。HTML语言的其他标记都必须写在这两大标记中。
（2）演示操作实例1
<HTML>
<HEAD>
<title>欢迎大家光临</title>
</HEAD>
<BODY>
<marquee>这是我用记事本编写的第二个网页</marquee>
</BODY>
《网页设计与制作》第一章网页制作基础
块级元素与行内元素
浮动布局
浮动布局是一种常用的网页布局技术，通过设置元素的 `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`。
课后练习
《动画与网页制作》课后练习第一章网页制作基础判断正误（1）HTML标记符一般不区分大小写。
（对）（2）网站就是一个链接的页面集合。
（对）（3）将网页上传到Internet时通常采用FTP方式。
（对）（4）所有的HTML标记符都包括开始标记符和结束标记符。
（错）选择题（单选）（1）WWW是的意思。
答案：BA．网页B．万维网C．浏览器D．超文本传输协议（2）在网页中显示特殊字符，如果要输入“<”，应使用_________。
答案：D A．lt; B．≪ C．< D．<（3）浏览器是一种_________。
答案：BA．系统程序B．客户端程序C．服务器端程序D．编程工具填空题（1）如果要为网页指定黑色的背景颜色，应使用以下html语句：<body > 答案：bgcolor="black"（2）网页的扩展名通常是：答案：.htm或.html（3）要为网页添加背景音乐，应使用标记符。
答案：BGSOUND（4）BODY的属性用于设置未被访问过的超链接的颜色。
答案：link简答题（1）简要说明HTML 的基本工作原理。
综合题（1）编写一个能够显示背景图案并能播放背景音乐的网页。
（2）编写一个显示为如图所示的页面。
第二章文本与超链接判断正误（1）用H1标记符修饰的文字通常比用H6标记符修饰的要小（错）。
（2）B标记符表示用粗体显示所包括的文字。
（对）（3）使用FONT 标记符的size 属性可以指定字体的大小。
（对）（4）OL和LI标记符结合，可以创建无序列表，UL和LI 标记符结合可以创建有序列表。
（错）（5）在网页中创建超链接，其中URL 可以是相对地址或绝对地址。
（对）选择题（单选）（1）以下关于FONT标记符的说法中，错误的是：答案：D A．可以使用color 属性指定文字颜色。
B．可以使用size 属性指定文字大小（也就是字号）。
《网页设计与制作》教案
《网页设计与制作》教案第一章：网页设计基础1.1 网页设计概述介绍网页设计的概念、目的和重要性讨论网页设计的标准和原则1.2 网页设计流程讲解网页设计的基本流程，包括需求分析、设计稿、切片、编码和测试等步骤1.3 网页设计工具介绍常用的网页设计工具，如Photoshop、Dreamweaver、Fireworks等第二章：HTML与CSS基础2.1 HTML概述介绍HTML的概念、作用和基本结构2.2 HTML标签讲解常用的HTML标签，如、段落、图像、、列表等2.3 CSS概述介绍CSS的概念、作用和基本语法2.4 CSS选择器讲解常用的CSS选择器，如类选择器、ID选择器、属性选择器等第三章：网页布局与排版3.1 网页布局概述介绍网页布局的概念和重要性3.2 常用的网页布局方法讲解常用的网页布局方法，如固定布局、百分比布局、弹性布局等3.3 排版与字体介绍排版和字体的概念、作用和常用属性3.4 响应式网页设计讲解响应式网页设计的概念、方法和实现方式第四章：网页特效与交互4.1 网页特效概述介绍网页特效的概念和作用4.2 JavaScript基础讲解JavaScript的概念、作用和基本语法4.3 常用的网页特效与实例讲解常用的网页特效，如鼠标悬停效果、下拉菜单、滚动动画等，并提供实例进行演示4.4 交互式网页设计讲解交互式网页设计的概念、方法和实现方式第五章：网页设计与制作实践5.1 实践项目概述介绍实践项目的需求和目标5.2 网页设计稿制作根据实践项目需求，使用设计工具制作网页设计稿5.3 网页编码与测试使用HTML和CSS编写网页代码，并进行测试和调试讲解网页发布的步骤和注意事项，以及常用的网页推广方法第六章：网页图像与多媒体6.1 图像格式与优化介绍常见的网页图像格式，如JPG、PNG、GIF等，以及图像优化方法6.2 音频与视频讲解如何在网页中嵌入音频和视频，以及常用的媒体格式6.3 Flash动画介绍Flash动画的概念、制作方法和在网页中的应用6.4 动态效果与动画讲解如何在网页中实现动态效果和动画，包括使用CSS动画和JavaScript实现第七章：网页服务器与数据库7.1 服务器概述介绍网页服务器的概念、作用和常用服务器软件7.2 数据库概述介绍数据库的概念、作用和常用数据库管理系统7.3 动态网页制作基础讲解动态网页制作的基本原理，如服务器端编程和数据库连接7.4 实践项目：搭建简易的个人博客系统讲解如何使用服务器和数据库搭建一个简易的个人博客系统，包括前端设计和后端编程第八章：网页安全与SEO介绍网页安全的概念和重要性，以及常见的网络安全威胁8.2 网页安全措施讲解如何防范网络攻击和提高网页安全性，如使用SSL证书、X-Frame-Options 等8.3 SEO概述介绍搜索引擎优化（SEO）的概念、作用和方法8.4 SEO实践技巧讲解如何优化网页内容、结构和，以提高搜索引擎排名第九章：网页设计与制作的进阶技巧9.1 响应式网页设计深入讲解响应式网页设计的原理和实践方法，包括媒体查询和弹性布局9.2 前端框架与库介绍常用的前端框架和库，如Bootstrap、jQuery、React等，以及如何使用它们提高网页制作效率9.3 网页性能优化讲解如何提高网页加载速度和性能，包括图片优化、代码压缩和缓存策略9.4 实践项目：制作一个响应式商务网站讲解如何使用响应式设计和前端框架制作一个商务网站，包括布局、样式和交互设计第十章：网页设计与制作的拓展与趋势10.1 网页设计与制作的未来趋势探讨网页设计与制作的发展方向，如虚拟现实（VR）、增强现实（AR）等技术的应用10.2 网页设计规范与最佳实践介绍网页设计规范和最佳实践，以提高网页质量和用户体验10.3 跨平台网页设计与制作讲解如何使用跨平台技术，如PWA（Progressive Web Apps）、Node.js等，实现网页在不同平台和设备的兼容性和性能10.4 实践项目：制作一个跨平台的网页应用重点和难点解析重点环节1：网页设计基础和流程网页设计的标准和原则是设计的基石，需要重点掌握。
网页制作基础知识
2．HTML文档的基本结构
HTML语言的核心是标签（或者称为标记）。也就是 说，我们在浏览网页时看到的文字、图像、动画等在 HTML文档中都是用标签来描述的。一个完整的HTML 文档由<html>标签开始并由</html>标签结束，所有 的HTML代码都应写在<html>标签与</html>标签之 间。
1.3 网站建设流程
1.3.1 收集网站建设需求及素材
网站建设需求是指想要通过建设网站实现的功能和 目标；素材主要包括文字资料、图片、动画、声音 和视频等，素材按来源可分为以下几种类型。
•客户提供的素材：主要是与产品或企业相关的图像和文 字，比如产品外观图像等。 •网上收集的素材：主要是一些辅助性图像，这些图像的 装饰性较强，比如背景图像等。 •独自创作的素材：主要是整个页面中视觉面积最大、最 有说服力的图像，比如广告图像、标题图片等。
5．按钮
按钮通常是启动某些装置或机关的开关。网页中 的按钮也不例外，单击它后，网页会实现相应的 操作，比如页面跳转，或数据传输等。
1.1.3 IP地址、域名与网址
1．IP地址
我们知道，互联网是全世界范围内的计算机联为一 体而构成的通信网络。虽然互联网上连接了不计其 数的服务器与客户机，但它们并不是杂乱无章的。 每一个主机在互联网上都有唯一的地址，我们称这 个地址为IP地址（Internet Protocol Address）。IP地址由4个小于256的数字组成， 数字之间用点间隔。例如，“61.135.150.126” 就是一个IP地址。
3．HTML标签的类型与特点
实际上，学习HTML语言的过程也就是学习各种标 签格式的过程。 （1）单标签 语法是：<标签名称> （2）双标签 “双标签”由“始标签”和“尾标签”两部分构 成，必须成对使用。语法是：<标签> 内容 </ 标签> （3）标签属性 许多单标签和双标签的始标签内可以包含一些属 性。语法是：<标签名字 属性1 属性2 属性3…>
第一~三章网页设计基础知识
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源代码就可生成跨平台、跨浏览 器的网页，即使是初学者也能制作出专业水准的 网页，是网页设计者的首选工具。
《网页设计与制作》第一章：网页制作基础
【例】给网页设置 “励志学社”的文档标 题，可在头部输入以下代码： <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等专业浏览器以及一些以上述浏览器 为内核的专用浏览器。
网页设计与制作基础知识
网页设计与网站建设第1章网页制作基础知识本章内容1.1 基本概念☐计算机网络是Internet的基础，是多台计算机通过特定的连接方式构成的一个计算机的集合体。
☐网络是现代社会传播信息的重要途径，而网页又是这一途径中最为重要的手段。
可以说，在上网冲浪已经成为一种时尚的今天，网页已经成为人们与外界沟通的重要桥梁。
1.1.1 什么是Internet☐Internet，即英特网的英文表示，是最著名的广域网。
☐全世界的计算机相互连接而形成一个整个地球规模的计算机网络，这个全地球规模的计算机网络就是Internet。
☐在Internet中的任意一台计算机都可以从Internet上的其它计算机中来获得信息。
Internet的历史它起源与1969年，是由美国国防部设立的名为APPANET的军用网络。
1982年，美军方从APPANET 撤出，主要用于学术机构的连接，科学家可以分享数据今天Internet，以千万计的用户使用的全球性网络，没有人或机构拥有或全面控制。
Internet在我国的发展现状从国内Internet的发展现状来看，1994年4月，中科院计算机网络信息中心正式接入Internet，从此，中国Internet发生了飞速的发展。
截至2009年底，我国网民人数达到了3.84亿，即每四人中就有一人是网民。
另外网站数、IP地址等也迅速增长，分别达到251万和2.3亿。
从域名、网站数、IP地址等增长情况来看，我国互联网资源得到了全面提升。
Internet的接入方式PSTN接入（电话拨号）ISDN接入（综合业务数据网）DDN专线接入（数字数据网）DSL接入（宽带技术）分为对称的DSL和非对称的DSLInternet基本服务功能WWW服务WWW（World Wide Web，可译为“万维网”），是一个基于超级文本的信息查询工具。
WWW是在Internet的基础上，由各计算机节点上的WWW软件和超级文本格式的信息文件组成的。
网页制作基础教程
网页制作基础教程第一章网页制作基础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。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第1章网页制作基础使用浏览器上网时，你看到的一幅幅精彩画面，一般都是由服务器发送给浏览器，并由浏览器解释的HTML文档。
那么，HTML文档中有哪些内容，它们的格式是怎么样的，这是本章要向读者介绍的内容，它也是学习以后各章内容的基础。
本章内容主要包括：●Internet及Web的概念●超文本标记语言●常用的主页制作工具通过这一章的学习，要求读者：了解Internet及Web的概念；熟悉HTML文档格式和常用标签；了解常用的主页制作工具。
1.1 Internet信息服务1.1.1 Internet简介Internet(因特网)是一个通过网络设备把世界各国的计算机相互连接在一起的计算机网络，在Internet上，人们可以利用任何两台支持TCP/IP网络协议的计算机进行通信。
所谓协议是指计算机通信所使用的语言和规则。
Internet还支持多种流行的程序，包括World Wide Web。
World Wide Web(万维网)是在因特网上运行的全球性分布式信息系统，它是一个抽象的信息场所，在这个场所中，包含了几十乃至几百万台通过超文本传输协议（HTTP）提供信息服务的Web服务器，当用户使用浏览器向这些服务器发出请求时，服务器将把响应信息发送给浏览器，最后由浏览器解释并显示。
你正在使用的计算机可能是一台Web服务器，也可能是一台安装有浏览器的普通计算机，这取决于这台计算机中安装了什么程序，以及这台计算机接入到Internet的接入方式，如果你的计算机不能让其它人访问，那么就不能成为真正的Web服务器。
即使这样，你还是可以在计算机上安装一个称为个人Web服务器的程序来运行本教材中的所有实例。
VBScript+ASP动态网页制作FTP(File Transfer Protocol文件传输协议)，用于将文本、二进制文件和图形从一台计算机传输到另一台计算机，有了它，你可以将编写好的网页传送到能被其它用户访问的Web服务器上。
HTTP(HyperText Transmission Protocol超文本传输协议)用于定义在Web浏览器和Web 服务器之间如何传送数据。
在服务器向客户机传送文档之前，客户机和服务器间需要建立TCP连接，之后才发送HTTP请求信息，服务器接收到请求之后就给Web浏览器回送一个HTTP响应信息，最后服务器断开TCP连接。
HTTP协议主要用于定义信息的格式。
1.1.2 Web出版把一些文字、图片、声音等内容组织成一个或多个Web文档，放置在Web服务器上，供用户在能与该服务器相连的机器上访问，这一过程称为Web出版。
Web出版的方式主要有两种，一种是建立一个独立的Web服务器，这需要较高的代价，另一种是在其它服务器上开辟一个空间，通过链接的形式来访问你的Web页。
幸运的是，现在有许多站点（像网易、首都在线等）提供免费空间供大家建立网页。
1.2 超文本标记语言当用户阅读一般文本文件时，一旦遇到不是很清楚的内容，就需要另外打开其它文件，或翻转到本文件的其它位置查看，查看完成后可能已经忘记应该回到哪里继续阅读了，这样给阅读带来很大的不便。
为此，我们很希望有一种方法能在需要时自动转到相关内容，并方便地返回。
超文本就是为此而设计的。
一般把通过在文本中插入链接把相关文本组织在一起而形成的文档称为超文本(hypertext)。
通常超文本使用超文本标记语言来描述。
超文本标记语言(HyperText Makeup Language，简称HTML)是一种用来创作万维网页面的描述语言，它使用HTML标签来定义文档的格式、组成和链接关系，供浏览器解释执行。
所谓HTML标签，由3部分组成：左尖括号“＜”，“标签名称”，和右尖括号“＞”。
标签通常是成对出现的，分别称为“开始标签”和“结束标签”，结束标签的左尖括号后加一个斜杠符号“/”。
在各种HTML标签中，常常还可以定义一些属性，这些属性用于指出文档元素的一些特性，如背景颜色、字体大小、对齐方式等，指定文档元素属性的附加信息一般放在相应的“开始标签”中。
由于HTML文档是一种没有格式的文档，也称为ASCII文件。
因此，HTML文档可以使用任何一种文本编辑器来编写，如记事本、写字板和WORD等。
1.2.1 第一个HTML文档让我们先来看一个例子。
【例1-1】一个简单Web页• 2 •第1章 网页制作基础• 3 •<HTML><HEAD><TITLE>我的第一个WEB 页</TITLE></HEAD><BODY BGCOLOR="WHITE">正文内容写在这里......</BODY></HTML>将上述代码用文本编辑器或其他专门的主页制作软件输入并保存为一个扩展名为htm 或html 的文件后，在文件夹窗口双击该文件图标，就可看到如图1-1所示的结果。
图1-1 一个简单的Web 页从例出可以看出，一个HTML 文档的一般结构如下：1.一般形式<HTML><HEAD>头部</HEAD><BODY>主体部分</BODY></HTML>2.说明：<HTML>…</HTML>开始和结束标签<HEAD>…</HEAD>头部信息，可以包含标题(TITLE)，媒体环境(META)等说明信息,客户端脚本也可放在这一部分。
VBScript+ASP动态网页制作<BODY>…</BODY>网页主体部分。
它也有一些属性，形式为：<BODY BGCOLOR=#rrggbb text=#rrggbb link=#rrggbb alink=#rrggbbvlink=#rrggbb>其中：BGCOLOR背景颜色text 非链接文字的颜色link 链接文字的颜色alink正被点击的链接文字的颜色vlink 已经点击(访问)过的链接文字的颜色如果要使用背景图像，语法为：<BODY background=“图片文件名”>在HTML文档中，不区分英文字母的大小写，对于标签中的属性值，一般可以不加引号，只有当属性值中包含空格或一些其它符号时，引号才是必须的。
3.调试HTML代码总有一些时候会忘了输入某些代码或敲错某些代码，这时Web页可能会变得非常滑稽。
通过反复的浏览，比较出现的效果与预想效果的不同点，从中发现存在的错误，这一过程称为调试。
对于web页的调试没有多少技巧可言。
但要强调的一点是，应该仔细地观察显示的结果或系统给出的错误信息，从中判断出可能错在哪里，再去检查文件的内容，而不是在没有看清出了什么错误前就急着查文件内容，这样往往很难快速找到错误的位置。
常见的错误有标签名称书写错误、标签的属性书写错误、结束标签遗忘或书写错误等。
如例1-1第3行中若结束位置的</title>遗忘了或写成<title>，则其后的内容将显示在窗口的标题栏。
只要仔细观察显示结果，不难发现其中的错误。
1.2.2 文字修饰与布局1.修饰方法(1) 标题文字(Header)有时，希望将某些文字显示成像文章中的标题一样，这时，可使用H标签，形式如下：<Hn>作为标题的文字</Hn>其中n为1到6的数字，根据n的大小不同，将显示出不同大小的黑体字。
H1最大，H6最小。
标题文字独立占一行，不受段落标记的影响。
(2) 文字大小(FONT SIZE)形式：<FONT SIZE=n>需显示成n号大小的文字</FONT>其中：n=1,2,3…7。
SIZE的默认大小为3，在此基础上，可以用-2，-1，0，+1，+2，+3或+4代替n。
另外，可以用<BASEFONT SIZE=n>指出缺省字符大小，用<BIG>或<SMALL>来指出字符相对于周围字符的大小。
(3) 文字颜色(FONT COLOR)• 4 •第1章网页制作基础形式：<FONT COLOR=#rrggbb>需显示成指定颜色的文字</FONT>其中：rrggbb为16进制值，表示组成颜色的RGB三原色的对比关系，对常用的颜色，可以使用名称来代替式中的“#rrggbb”，对应关系为：Black(000000),Olive(008080),Red(ff0000),Blue(0000FF),Maroon(800000),Navy(000080),Gray(808080),Lime(00ff00),Fuchsiz(ff 00ff),White(ffffff),Green(008000),Purple(800080),Silver(C0C0C0),Y ellow(ffff00),Aqua(00ffff)。
(4) 定义字体(FONT FACE)：形式：<FONT FACE=“字体”>需显示成指定字体的文字</FONT>其中：字体为Arial、Times、Ms seriers、宋体、楷体等。
值得注意的是，在浏览器上是否能显示所设置的字体取决于浏览器所在的机器中是否安装了相应的字体。
以上三种文字的修饰方法有一个共同点就是都使用相同的标签<FONT>把要修饰的文字括起来，再用该标签的SIZE属性设置文字大小，用COLOR属性设置文字的颜色，用FACE 属性设置文字的字体。
当需要同时设置文字大小和颜色时，应把它放在同一个标签中，例如，要用6号大小红色显示“动态网页”这几个字时，应使用如下形式：<FONT SIZE=6 COLOR=Red>动态网页</FONT>(5) 标记文字：对于文字还有一些常用的修饰，即加粗、斜体和加下划线。
对此，HTML中设计了独立的标签，使用形式如下：<B>需要加粗的文字</B><I>需要显示成斜体的文字</I><U>需要添加下划线的文字</U>以上三个标签可重叠作用。
如：<B>动态<U>网页</B><I>制作</I></U>，将使“动态”两字加粗显示，“网页”两字加粗并加下划线，“制作”两字显示成斜体并加下划线。
另外还有一些标签如：<STRONG>、<EM>、<STRIKE>和<BLINK>等，但这些标签不一定被所有浏览器所支持。
【例1-2】文字的修饰<HTML><HEAD><TITLE>文字的修饰</TITLE></HEAD><BODY><H1>这是标题字体H1</H1><H6>这是标题字体H6</H6><P><FONT SIZE=5 FACE="楷体">这是大小为<BIG>5<SMALL>的楷体字</FONT><P>本教材讨论的是：<B>动态<U>网页</B><I>制作</I></U><P><FONT COLOR=#ff0000>这是红色的文字</FONT></BODY>• 5 •VBScript+ASP动态网页制作</HTML>本例中的代码，浏览时显示结果如图1-2所示。