网页设计第一章起步
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
课程主要内容
●Dreamweaver CS5软件的使用 ●Photoshop CS5软件的使用 ●Flash CS5软件的使用
课程简介
课时：62课时（32理论课，30实验课） 课程性质：公共必修 考查方式：闭卷笔试 期末成绩=期末考试卷面成绩*70%+ 平时成绩*30%，其中平时成绩由出勤，课堂 表现与上机实验成绩组成。
<html> <head> <title>结构标记示例</title> </head> <body text="blue"> <p><i>斜体字文本</i> </p> </body> </html>
1.3 HTML基础
2.格式标记 （1）<p>„</p>（段落标记） <p>„</p>标记用来创建一个段落，在此标记之 间的文本将按照段落的格式显示。 （2）<br>（换行标记）<br>是一个很简单的标记， 它没有结束标记，用来创建一个换行。
1.3 HTML基础
（5）<ol></ol><ul></ul><li></li>（标有数字或圆 点的列表标记） ① <ol></ol>标记用来创建一个标有数字的列表； ② <ul></ul>标记用来创建一个标有圆点的列表； ③ <li></li>标记只能在<ol></ol>或<ul></ul>标 记之间使用，此标记对用来创建一个列表项。 若<li></li>放在<ol></ol>之间,则每个列表项加 上一个数字，若在<ul></ul>之间,则每个列表项加上 一个圆点。
1.3 HTML基础
（3）<b></b><i></i><u></u>（字体标记） ①<b></b>之间的文本以黑体字的形式输出； ②<i></i>之间的文本以斜体字的形式输出； ③<u></u>之间的文本以下加一划线的形式输出。 （4）<em></em><strong></strong>（强调加重标记） ① <em></em>用来输出需要强调的文本(通常是斜 体加黑体)； ②<strong></strong>则用来输出加重文本(通常也 是斜体加黑体)。
第1章 Web网站架构与HTML基础
◆网页设计的起步之路 ◆Web的特点和结构 ◆HTML基础
1.1 关于网页
1、什么是网页？ 网页是组成网站的基本元素，是承载各种 网站应用的平台。 2、 常见网站的类型 （1）企业型 现在绝大多数企业网站都属于这一类型， 这些网站实际上就是传统企业网上宣传平台。 一般提供大量的公司信息。
1.3 HTML基础
<html> <head><title>一个普通列表</title></head> <body text="blue"> <dl> <dt>中国城市</dt> <dd>北京 </dd> <dd>上海 </dd> <dd>广州 </dd> <dt>美国城市</dt> <dd>华盛顿 </dd> <dd>芝加哥 </dd> <dd>纽约 </dd> </dl> </body> </html>
1.3 HTML基础
2.什么是标记？
标记是网页文档中的一些有特定意义的符号。这 些符号指明如何显示文档中的内容。 标记总是放在三角括号中，大多数标记都成对出 现（有开始标记和结束标记）。结束标记和开始 标记所用的字符相同，只是前面加一个斜杠。例 如：<p>„</p> 用于标记一个自然段。 标记可以具有相应属性即各种参数，如size、 color、 text、 width和noshade等 。 例如：<p><font size="+1" color="red"></font></p>
色彩搭配的原则 （1）色彩的鲜明性 （2）色彩的独特性 （3）色彩的艺术性 （4）色彩搭配的合理性
1.1.3 网页色彩搭配
（1）同种色彩搭配 同种色彩搭配是指先选定一种色彩，然后调整 其透明度和饱和度，将色彩变淡或加深，由此 产生新的色彩。 （2）邻近色彩搭配 邻近色是指色环上相邻的颜色，如绿色和蓝色、 红色和黄色。 （3）对比色搭配 色彩三原色（RGB）的搭配最能体现色彩间的 差异。
1.2 Web的特点和结构
2.WWW的结构 WWW是成千上万个网站连結而成的页面式网 络信息系统。WWW采用“客户机/服务器”结 构。
网页访问的过程
网页存放在被称为Web服务器(Web Server)的计算机 上，等待用户访问。
1.2 Web的特点和结构
4.Web技术经历了3个发展阶段 第一代，提供对静态网页的管理和访问。 第二代，提供对动态网页的访问和显示。 第三代，除动态网页生成和访问之外，还提供 基于Web的联机事务处理能力。 静态网页是从放置到服务器以后，直到发送给 浏览器不会发生更改的网页，通常用HTML语言 编写其代码，保存为.htm文件。 动态网页是在发送到浏览器之前由应用程序服 务器修改的网页。动态网页的源文件可用HTML 语言和VBScript或JavaScript等脚本语言编写， 保存为.asp文件，也称为Web应用程序。
1.3 HTML基础
标记通常可以分成两种： 第一种用来指定网页上的元素或元素的样式。 例如， 指定一个自然段及其字体和颜色： <p><font size="+1" color="red"></font> 自然段内容。</p> 第二种用来指向其它的资源。 例如，指定一个链接地址： <a href=“www.google.com”>谷歌</a> 指定一个图片文件： <img src=“图片文件名” >
1.2 Web的特点和结构
本章介绍WWW的概念、Web服务器配置
一、WWW的概念 1.什么是WWW？
WWW是World Wide Web的缩写，简称为Web（万维 网）。WWW起源于1989年3月，是由欧洲粒子物理实 验室CERN (the European Laboratory for Particle Physics)开发的主从结构分布式（“客户 机/服务器”模式）超文本系统。 1992年1月，Web的第一个版本在瑞士日内瓦问世 。
1.3 HTML基础
[例2-3] 标有数字的列表与标有圆点的列表：
1.3 HTML基础
<html> <head><title>标有数字与圆点的列表</title></head> <body text="blue"> <ol><p>中国城市 </p> <li>北京 </li> <li>上海 </li> <li>广州 </li> </ol> <ul> <p>美国城市 </p> <li>华盛顿 </li> <li>芝加哥 </li> <li>纽约 </li> </ul></body></html>
1.3 HTML基础
3. 文本标记 （1）<pre></pre>(预处理标记)
表示<pre></pre>标记之间的文本原有格式 如word格式仍有效 。 （2）<h1></h1>„„<h6></h6>（六级标题标记） <h1></h1>是最大的标题，<h6></h6>则是 最小的标题。如果要在HTML文档中输出标题，那 麽可以使用六对标题标记的任何一对。
1.2 Web的特点和结构
WWW是一个全球性的信息系统，使计算机能 够在Internet上相互传送基于超媒体数据信息。 WWW也可以用来建立Intranet（企业内部网） 的信息系统。 WWW具有三个统一
1）.统一的资源命名方式：URL（统一资源定位符，即 网址）。 2）.统一的资源访问方式：HTTP（超文本传输协议）。 3）.统一的信息组织方式：HTML（超文本标记语言）。
1.3 HTML基础
（3）<dl></dl><dt></dt><dd></dd>（列表 标记）
① <dl></dl>用来创建一个列表; ② <dt></dt>用来创建列表中的上层项目; ③ <dd></dd>用来创建列表中最下层项目 <dt></dt>和<dd></dd>都必须放在<dl></dl>标记之 间。 [例2-2] 创建一个普通列表：
1.1.2 常见网站的基本类型
（2）电子商务型 要进行在线销售要使用的电子商务网站。
1.1.2 常见网站的基本类型
（3）公司门户型 这种被称为公司门户的网站提供了很多资源或服 务，往往是大型企业所需要的。例如：电子邮件， 论坛和公司相关的新闻和文章、会员社区等，是 为特定浏览者提供的入口。
1.1.3 网页中的色彩Fra Baidu bibliotek配
1.3 HTML基础
例如： <HTML> <HEAD> <TITLE>学生选课系统</TITLE> </HEAD> <BODY>网页制作练习</BODY> </HTML>
1.3 HTML基础
三、HTML的常用标记 1. HTML文档的结构标记
用来指明一个HTML文档的基本结构。 （1）文件标记：<HTML>„</HTML> 整个HTML文档内容均在<HTML>„</HTML>标记之 中。 （2）头部标记： <HEAD>„</HEAD> 整个HTML文档分头部和主体部分。头部使用 <HEAD>„</HEAD>标记标识，凡是在此标记之内的 内容，例如标题等，均属于头部信息。头部信息 不显示在Web页中。
1.1.3 网页色彩搭配
(4)暖色色彩搭配 暖色色彩搭配是指使用红色、橙色、黄色 等色彩的搭配。这种色调的运用，可为网页营 造出稳性、和谐和热情的氛围。 （5）冷色色彩搭配 冷色色彩是指使用绿色、蓝色及紫色等色彩的 搭配，可为网页营造出宁静、清凉和高雅的氛围。 冷色调与白色搭配一般会获得较好的视觉效果。 （6）文字与网页的背景色对比要突出 文字内容的颜色与网页的背景色对比要突出，底 色深，文字的颜色就淡一些。反之亦然。
1.3 HTML基础
一、 HTML的概念 1.什么是HTML ？ 超文本标记语言（HTML——HyperText Markup Language）是用于设计网页源文件（网页文档）的语 言。每一个页面的代码保存为一个网页源文件(.htm 文件) 。 八十年代初，HTML由万维网联盟（W3C：World Wide Web Consortium）制订。 HTML包括一些定义页面内容和格式的符号，称为标记。 它能够将文本、图像、声音和动画结合在一个网页文 档中。这些文档可以通过Web浏览器显示，还可以通 过超链接以访问其它的信息资源。 后来，进一步推出了XML（扩展标记语言），该语言 可以由程序员自己定义标记。 。
1.3 HTML基础
（3）头部标题标记： <TITLE>„</TITLE> 在此标记之间的内容将作为标题显示在浏览器的 标题栏。注意： <TITLE>„</TITLE>标记只能 放在<HEAD>„</HEAD>标记之间。 （4）主体标记： <BODY>„</BODY> 主体是Web页的主要部分，用<BODY>„</BODY> 标记定义的信息将显示在Web页中。 例如： （见下页）
1.3 HTML基础
二、如何编写和浏览HTML网页文档 启动IE，然后使用“查看”菜单中的“源文 件”菜单项，进入记事本，就可以输入网页 源文件了。在输入完之后，另存为.htm文件。 或者直接进入记事本，输入网页源文件。在 输入完之后，另存为.htm文件（选择保存类 型为“所有文件”）。 在浏览器中输入该文件名，就能浏览HTML源 文件的网页效果。
1.3 HTML基础
（6）<div></div>（分段标记） ①<div></div>标记对用来排版大块HTML段 落，也用于格式化表，此标记的用法与 <p></p>标记非常相似，同样有align对齐方 式属性 。 ②align属性，它用来说明对齐方式，语法 是：<p align=""></p>。 ③align可以是Left(左对齐)、Center(居中) 和Right(右对齐)三个值中的任何一个。 例如：<p align=“Center”></p>表示标 记中的文本居中显示。
1.3 HTML基础
3.什么是超文本、超媒体和超链接？ 超文本是网页上具有链接功能的文字。 例如，娱乐 新闻 电影 。 超媒体是网页上具有链接功能的多媒体。 超链接是网页上连接其它网页或网页上指 定位置的超文本和超媒体。 超链接分为文字和图像（包括动画）两种， 网页中的一段文字、一副图像或图像的某 一个部分等都可以定义为超链接。
●Dreamweaver CS5软件的使用 ●Photoshop CS5软件的使用 ●Flash CS5软件的使用
课程简介
课时：62课时（32理论课，30实验课） 课程性质：公共必修 考查方式：闭卷笔试 期末成绩=期末考试卷面成绩*70%+ 平时成绩*30%，其中平时成绩由出勤，课堂 表现与上机实验成绩组成。
<html> <head> <title>结构标记示例</title> </head> <body text="blue"> <p><i>斜体字文本</i> </p> </body> </html>
1.3 HTML基础
2.格式标记 （1）<p>„</p>（段落标记） <p>„</p>标记用来创建一个段落，在此标记之 间的文本将按照段落的格式显示。 （2）<br>（换行标记）<br>是一个很简单的标记， 它没有结束标记，用来创建一个换行。
1.3 HTML基础
（5）<ol></ol><ul></ul><li></li>（标有数字或圆 点的列表标记） ① <ol></ol>标记用来创建一个标有数字的列表； ② <ul></ul>标记用来创建一个标有圆点的列表； ③ <li></li>标记只能在<ol></ol>或<ul></ul>标 记之间使用，此标记对用来创建一个列表项。 若<li></li>放在<ol></ol>之间,则每个列表项加 上一个数字，若在<ul></ul>之间,则每个列表项加上 一个圆点。
1.3 HTML基础
（3）<b></b><i></i><u></u>（字体标记） ①<b></b>之间的文本以黑体字的形式输出； ②<i></i>之间的文本以斜体字的形式输出； ③<u></u>之间的文本以下加一划线的形式输出。 （4）<em></em><strong></strong>（强调加重标记） ① <em></em>用来输出需要强调的文本(通常是斜 体加黑体)； ②<strong></strong>则用来输出加重文本(通常也 是斜体加黑体)。
第1章 Web网站架构与HTML基础
◆网页设计的起步之路 ◆Web的特点和结构 ◆HTML基础
1.1 关于网页
1、什么是网页？ 网页是组成网站的基本元素，是承载各种 网站应用的平台。 2、 常见网站的类型 （1）企业型 现在绝大多数企业网站都属于这一类型， 这些网站实际上就是传统企业网上宣传平台。 一般提供大量的公司信息。
1.3 HTML基础
<html> <head><title>一个普通列表</title></head> <body text="blue"> <dl> <dt>中国城市</dt> <dd>北京 </dd> <dd>上海 </dd> <dd>广州 </dd> <dt>美国城市</dt> <dd>华盛顿 </dd> <dd>芝加哥 </dd> <dd>纽约 </dd> </dl> </body> </html>
1.3 HTML基础
2.什么是标记？
标记是网页文档中的一些有特定意义的符号。这 些符号指明如何显示文档中的内容。 标记总是放在三角括号中，大多数标记都成对出 现（有开始标记和结束标记）。结束标记和开始 标记所用的字符相同，只是前面加一个斜杠。例 如：<p>„</p> 用于标记一个自然段。 标记可以具有相应属性即各种参数，如size、 color、 text、 width和noshade等 。 例如：<p><font size="+1" color="red"></font></p>
色彩搭配的原则 （1）色彩的鲜明性 （2）色彩的独特性 （3）色彩的艺术性 （4）色彩搭配的合理性
1.1.3 网页色彩搭配
（1）同种色彩搭配 同种色彩搭配是指先选定一种色彩，然后调整 其透明度和饱和度，将色彩变淡或加深，由此 产生新的色彩。 （2）邻近色彩搭配 邻近色是指色环上相邻的颜色，如绿色和蓝色、 红色和黄色。 （3）对比色搭配 色彩三原色（RGB）的搭配最能体现色彩间的 差异。
1.2 Web的特点和结构
2.WWW的结构 WWW是成千上万个网站连結而成的页面式网 络信息系统。WWW采用“客户机/服务器”结 构。
网页访问的过程
网页存放在被称为Web服务器(Web Server)的计算机 上，等待用户访问。
1.2 Web的特点和结构
4.Web技术经历了3个发展阶段 第一代，提供对静态网页的管理和访问。 第二代，提供对动态网页的访问和显示。 第三代，除动态网页生成和访问之外，还提供 基于Web的联机事务处理能力。 静态网页是从放置到服务器以后，直到发送给 浏览器不会发生更改的网页，通常用HTML语言 编写其代码，保存为.htm文件。 动态网页是在发送到浏览器之前由应用程序服 务器修改的网页。动态网页的源文件可用HTML 语言和VBScript或JavaScript等脚本语言编写， 保存为.asp文件，也称为Web应用程序。
1.3 HTML基础
标记通常可以分成两种： 第一种用来指定网页上的元素或元素的样式。 例如， 指定一个自然段及其字体和颜色： <p><font size="+1" color="red"></font> 自然段内容。</p> 第二种用来指向其它的资源。 例如，指定一个链接地址： <a href=“www.google.com”>谷歌</a> 指定一个图片文件： <img src=“图片文件名” >
1.2 Web的特点和结构
本章介绍WWW的概念、Web服务器配置
一、WWW的概念 1.什么是WWW？
WWW是World Wide Web的缩写，简称为Web（万维 网）。WWW起源于1989年3月，是由欧洲粒子物理实 验室CERN (the European Laboratory for Particle Physics)开发的主从结构分布式（“客户 机/服务器”模式）超文本系统。 1992年1月，Web的第一个版本在瑞士日内瓦问世 。
1.3 HTML基础
[例2-3] 标有数字的列表与标有圆点的列表：
1.3 HTML基础
<html> <head><title>标有数字与圆点的列表</title></head> <body text="blue"> <ol><p>中国城市 </p> <li>北京 </li> <li>上海 </li> <li>广州 </li> </ol> <ul> <p>美国城市 </p> <li>华盛顿 </li> <li>芝加哥 </li> <li>纽约 </li> </ul></body></html>
1.3 HTML基础
3. 文本标记 （1）<pre></pre>(预处理标记)
表示<pre></pre>标记之间的文本原有格式 如word格式仍有效 。 （2）<h1></h1>„„<h6></h6>（六级标题标记） <h1></h1>是最大的标题，<h6></h6>则是 最小的标题。如果要在HTML文档中输出标题，那 麽可以使用六对标题标记的任何一对。
1.2 Web的特点和结构
WWW是一个全球性的信息系统，使计算机能 够在Internet上相互传送基于超媒体数据信息。 WWW也可以用来建立Intranet（企业内部网） 的信息系统。 WWW具有三个统一
1）.统一的资源命名方式：URL（统一资源定位符，即 网址）。 2）.统一的资源访问方式：HTTP（超文本传输协议）。 3）.统一的信息组织方式：HTML（超文本标记语言）。
1.3 HTML基础
（3）<dl></dl><dt></dt><dd></dd>（列表 标记）
① <dl></dl>用来创建一个列表; ② <dt></dt>用来创建列表中的上层项目; ③ <dd></dd>用来创建列表中最下层项目 <dt></dt>和<dd></dd>都必须放在<dl></dl>标记之 间。 [例2-2] 创建一个普通列表：
1.1.2 常见网站的基本类型
（2）电子商务型 要进行在线销售要使用的电子商务网站。
1.1.2 常见网站的基本类型
（3）公司门户型 这种被称为公司门户的网站提供了很多资源或服 务，往往是大型企业所需要的。例如：电子邮件， 论坛和公司相关的新闻和文章、会员社区等，是 为特定浏览者提供的入口。
1.1.3 网页中的色彩Fra Baidu bibliotek配
1.3 HTML基础
例如： <HTML> <HEAD> <TITLE>学生选课系统</TITLE> </HEAD> <BODY>网页制作练习</BODY> </HTML>
1.3 HTML基础
三、HTML的常用标记 1. HTML文档的结构标记
用来指明一个HTML文档的基本结构。 （1）文件标记：<HTML>„</HTML> 整个HTML文档内容均在<HTML>„</HTML>标记之 中。 （2）头部标记： <HEAD>„</HEAD> 整个HTML文档分头部和主体部分。头部使用 <HEAD>„</HEAD>标记标识，凡是在此标记之内的 内容，例如标题等，均属于头部信息。头部信息 不显示在Web页中。
1.1.3 网页色彩搭配
(4)暖色色彩搭配 暖色色彩搭配是指使用红色、橙色、黄色 等色彩的搭配。这种色调的运用，可为网页营 造出稳性、和谐和热情的氛围。 （5）冷色色彩搭配 冷色色彩是指使用绿色、蓝色及紫色等色彩的 搭配，可为网页营造出宁静、清凉和高雅的氛围。 冷色调与白色搭配一般会获得较好的视觉效果。 （6）文字与网页的背景色对比要突出 文字内容的颜色与网页的背景色对比要突出，底 色深，文字的颜色就淡一些。反之亦然。
1.3 HTML基础
一、 HTML的概念 1.什么是HTML ？ 超文本标记语言（HTML——HyperText Markup Language）是用于设计网页源文件（网页文档）的语 言。每一个页面的代码保存为一个网页源文件(.htm 文件) 。 八十年代初，HTML由万维网联盟（W3C：World Wide Web Consortium）制订。 HTML包括一些定义页面内容和格式的符号，称为标记。 它能够将文本、图像、声音和动画结合在一个网页文 档中。这些文档可以通过Web浏览器显示，还可以通 过超链接以访问其它的信息资源。 后来，进一步推出了XML（扩展标记语言），该语言 可以由程序员自己定义标记。 。
1.3 HTML基础
（3）头部标题标记： <TITLE>„</TITLE> 在此标记之间的内容将作为标题显示在浏览器的 标题栏。注意： <TITLE>„</TITLE>标记只能 放在<HEAD>„</HEAD>标记之间。 （4）主体标记： <BODY>„</BODY> 主体是Web页的主要部分，用<BODY>„</BODY> 标记定义的信息将显示在Web页中。 例如： （见下页）
1.3 HTML基础
二、如何编写和浏览HTML网页文档 启动IE，然后使用“查看”菜单中的“源文 件”菜单项，进入记事本，就可以输入网页 源文件了。在输入完之后，另存为.htm文件。 或者直接进入记事本，输入网页源文件。在 输入完之后，另存为.htm文件（选择保存类 型为“所有文件”）。 在浏览器中输入该文件名，就能浏览HTML源 文件的网页效果。
1.3 HTML基础
（6）<div></div>（分段标记） ①<div></div>标记对用来排版大块HTML段 落，也用于格式化表，此标记的用法与 <p></p>标记非常相似，同样有align对齐方 式属性 。 ②align属性，它用来说明对齐方式，语法 是：<p align=""></p>。 ③align可以是Left(左对齐)、Center(居中) 和Right(右对齐)三个值中的任何一个。 例如：<p align=“Center”></p>表示标 记中的文本居中显示。
1.3 HTML基础
3.什么是超文本、超媒体和超链接？ 超文本是网页上具有链接功能的文字。 例如，娱乐 新闻 电影 。 超媒体是网页上具有链接功能的多媒体。 超链接是网页上连接其它网页或网页上指 定位置的超文本和超媒体。 超链接分为文字和图像（包括动画）两种， 网页中的一段文字、一副图像或图像的某 一个部分等都可以定义为超链接。