第六章网页设计与制作基础

第六章网页设计与制作基础

6.1 网页设计的基本方式

6.2 HTML 基础

6.3 Dreamweaver 应用

本章内容


什么是网页，网站

在网站中，供用户阅读的一个个页面，就称之为“网页”，又称为 Web页。

是 WWW的基本文档，是用 HTML或其他语言编写，包括文本、图像、表格、按钮、动画等。

网站是众多网页的集合，网站的建设者把众多的网页按照一定的顺序和链接放一起，就组成了网站。


普通网页静态网页：浏览器端与服务器端不发生交互的网

页。文件名后缀 .html 和 .htm

接受请求

找到静态网页

发送网页

服务器端


动态网页动态网页

服务器端根据客户端的不同请求动态产生网页内容。支持客户端和服务器端的交互功能

接受请求

找到动态网页

发送网页

服务器端运行动态网页，生成静态网页


动态网页示例BBS 论坛

留言板

聊天室


常用的动态网页技术

CGI

ASP PHP JSP

ASP.NET J2EE

文件名后缀文件名后缀 ..ASPASP .PHP .JSP .PHP .JSP


网页设计的基本方式

手工编程

利用可视化工具

手工编程与可视化工具结合


网页设计的基本方式手工编程

网页是由 HTML 超文本标记语言编程的文本文档设计制作网页的过程就是生成 HTML 代码的过程 WWW 发展初期，制作网页是通过直接编写 HTML 代

码来实现的。手工编程制作网页对网页设计人员的要求较高，编程效

率低，调试过程复杂。但手工编程可以灵活地制作出丰富的网页效果。


网页设计的基本方式可视化工具方式

FrontPage 、 Dreamweaver 等可视化的网页编辑工具。在可视环境下编辑制作网页元素，由编辑工具自动生成

对应的网页代码。

操作简单直观，调试方便，是大众化的网页编辑方式。

在制作一些特殊网页效果上有一定的局限性。


网页设计的基本方式编程和可视化工具结合方式

编程和可视化工具结合是比较成熟的网页制作方式。具体过程为：一般的网页元素通过可视化工具编辑制作，

一些特殊的网页效果通过插入代码生成。效率高、调试方便而且可以实现丰富的网页效果，但要

求设计人员既要熟悉 Html 语言又能运用可视化工具。

6.3 网页元素的创作与编辑工具

Macromedia 公司——闪客帝国 Macromedia 公司总部设立在美国加州三番市，在

全球 50 多个国家设有经营机构。 Macromedia 公司的主要软件产品包括

Macromedia Authorware Macromedia Cold Fusion Macromedia Director Macromedia Dreamweaver Macromedia Fireworks Macromedia Flash Macromedia Flash Player Macromedia FreeHand Macromedia JRun

2005-12 Adobe 与 Macromedia 合并

交易涉及金额 34 亿美元


6.2 HTML 基础


本章内容

6.4 HTML 基础

HTML 超文本标记语言那 HTML 这四个字母代表什么呢？

超（ Hyper ）是相对于线性（ linear ）来说的。在很久以前，那时计算机程序还是线形运行的：当计算机程序执行完一个动作以后，转向下一行，这行结束后，继续下移，依次类推。但 HTML 则不同，你可以在任何时候跳转到任何地方。

文本（ Text ）：一连串的字符组成标记（ Markup ）：指的是你怎么处理文本。

加粗、标题等

语言（ Language ）： HTML 就是一种语言，它是描述性的标记语言，不是编程语言。

6.4 HTML 基础

HTML 扩展名

包含 HTML内容的文件最常用的扩展名是 .html

但是像 DOS 这样的旧操作系统限制扩展名为最多3 个字符，所以 .htm扩展名也被使用。虽然现在使用的比较少一些了，但是 .htm扩展名仍旧普遍被支持

它们是可供浏览器解释浏览的文件格式。

6.4 HTML 基础

HTML 超文本标记语言早期的 HTML 语法被定义成较松散的规则以有助于不熟悉

网络出版的人采用。网页浏览器接受了这个现实，并且可以显示语法不严格的网页。

随着时间的流逝，官方标准渐渐趋于严格的语法，但是浏览器继续显示一些远称不上合乎标准的 HTML 。

使用 XML 的严格规则的 XHTML （可扩展超文本置标语言）是 W3C 计划中的 HTML 的接替者。虽然很多人认为它已经成为当前的 HTML 标准，但是它实际上是一个独立的、和 HTML平行发展的标准。

W3C目前的建议是使用 XHTML 1.1 、 XHTML 1.0或者HTML 4.01进行网络出版。

6.4 HTML 基础

网页的代码查看方法：通过打开 IE 浏览器查看源代码（称

为 HTML 代码）

打开一个网站时看到的第一个页面就是主页，也称为首页，主页文件的名称一般为 index.htm 或index.html；

6.4 HTML 基础

元素与标签元素（ element ）。

用于结构化 HTML 文档，并告知浏览器如何呈现网页。

通常，元素由首标签（ start tag ）、内容（ content ）和尾标签（ end tag ）构成。

“标签”是什么？标签（ tag ）指示元素的起始与结束。

6.4 HTML 基础

标签

所有标签都具有相同的格式：以小于号“ <” 开头，以大于号“ >” 结尾。

单标签只需单独使用就能完整地表达意思语法： < 标签名称 >

最常用的单标签是 <BR>, 它表示换行。

6.4 HTML 基础

标签

双标签由“首标签”和“尾标签”两部分构成，须成

对使用始标签告诉Web 浏览器从此处开始执行该标记所表示的功能

尾标签告诉Web 浏览器在这里结束该功能。

语法： < 标签 > 内容 </ 标签 >

6.4 HTML 基础

标签标签属性

许多单标记和双标记的始标记内可以包含一些属性

语法： < 标签名字属性 1 属性 2 属性 3 … >

6.4 HTML 基础

常用标签 1 、 <html> </html>

告诉浏览器，你们将采用 HTML 语言 <html> 标签用于文档的最前边，标识 Html 文档的开始。

</html> 标签放在 Html 文档的最后边，用来标识 Html文档的结束，两个标签必须一块使用。

可以省略不用。

6.4 HTML 基础

常用标签 2 、 <head> </head>

构成 Html 文档的开头部分

3 、 <title> </title> 显示网页的主题

网页标题（ title ）尤其重要，因为搜索引擎（比如Google ）要用它来索引网页

4 、 <body> </body> Html 文档的主体部分

6.4 HTML 基础

HTML 结构超文本文档分文档头和文档体两部分

文档头里，对这个文档进行了一些必要的定义文档体中才是要显示的各种文档信息。

<html> 　　　 <head>　　　　　　头部信息　　　 </head>　　　 <body>　　　　　文档主体，正文部分　　　 </body></html>

6.4 HTML 基础

常用标签

5 、标题一般文章都有标题、副标题、章和节等结构， HTML

中也提供了相应的标题标签 <Hn>, 其中 n 为标题的等级， HTML 总共提供六个等级的标题， n越小，标题字号就越大，以下列出所有等级的标题：

〈 H1>…</H1>　　　　　第一级标题

〈 H2>…</H2>　　　　　第二级标题

〈 H3>…</H3>　　　　　第三级标题

6.4 HTML 基础

属性属性是什么？

HTML 通过标签告诉浏览器如何展示网页（比如 <br />告诉浏览器显示一个换行）。你可以为某些元素附加一些信息，这些附加信息被称为属性（ attribute ）。

<h2 style="background-color:#ff0000;">我跟 HTML 的友谊 </h2>

属性应写在元素的首标签上。具体写法是：属性名称（ attribute name ）后紧跟一个等号（“ =” ），后面写上用双引号括起来的属性值（ attribute value ）。对于style属性的值，可以用分号（“ ;” ）来分隔多个样式指令。

6.4 HTML 基础

属性每个颜色都有其对应的十六进制代码。下面是一

些例子：白色： #ffffff黑色： #000000红色： #ff0000兰色： #0000ff绿色： #00ff00黄色： #ffff00

6.4 HTML 基础

常用标签 6 、 <p> </p>

用来创建一个段落，在此标签对之间加入的文本将按照段落的格式显示在浏览器上。

<p> 标签还可使用 align属性，用来说明对齐方式，

语法是： <p align=“”></p> 。 align 可以是 Left(左对齐 ) Center(居中 ) Right(右对齐 )

6.4 HTML 基础

常用标签 7 、 <br>

回车换行它没有结束标签

8 、 <font></font> 改变文本的字体大小、颜色；通过对它的两个属性 size 和 color 的控制来实现的。

6.4 HTML 基础

常用标签 9 、 img

指明一个图像在网络的位置。不是把图像的所有信息包含进来，浏览器根据路径到指定的地方去取图像。

<img src=" 图形文件地址 ">

src属性在 <img> 标签中是必须赋值的 <img> 标签还有 alt 、 align 、 border 、 width 和 height属性。

src ，代表“来源（ source ）”

6.4 HTML 基础

常用标签 10 <a> </a> 链接标签

<a HREF=“ 资源地址” > 链接文字 </a> 属性“ HREF” 定义了这个链接所指的地方；通过点击“链接文字”可以到达指定的文件。

元素 a 代表“链接（ anchor ）”；属性 href 代表“超文本引用（ hypertext reference ）”，

它用于指定链接指向何处——通常是一个因特网地址或者一个文件名。

6.4 HTML 基础

<a> </a> 链接链接分为本地链接、 URL 链接和目录链接。本地链接：　　对同一台机器上的不同文件进行的连接称为本地链接。采用绝对路径或相对路径来指示一个文件。

URL 链接　　如果链接的文件在其它服务器上，我们就要弄清我们所指向的文件时采用的哪一种 URL 地址。

6.4 HTML 基础

路径绝对路径是将主机地址和主机上资源发布目录的路径和资源名称进行完整的描述。 <a href="HTTP://ctec.xjtu.edu.cn/bbs/index.htm"> <a href="file:///c:/xitami/webpages/default.htm">

相对路径则是相对于当前的网页所在目录或站点根目录的路径 <img src="Snowwhite.jpg">

图像文件 "Snowwhite.jpg" 与当前显示的网页在同一目录下

<img src="../image/Leaves.jpg">

图像文件 "Leaves.jpg " 在与当前显示网页所在目录同层次的另一子目录 image 下

6.4 HTML 基础

常用标签 11 、 <table><tr><td> </td></tr></table> 表格标签 <table></table> 表示一个表格； <tr></tr> 表示表格的一行 <td></td> 表示表格的一行中的一列 .

6.4 HTML 基础

表格的属性

属性用途

<table border=""> 设置边框的宽度，

<table bgcolor=""> 设置表格的背景色。

<table width=""> 设置表格的宽度

<table cellspacing=""> 设置表格格子之间空间的大小

<table cellpadding=""> 设置表格格子边框与其内部内容之间空间的大小。

6.4 HTML 基础

常用标签 12 <form></form> 表单标签

<form name=“ ” method=“ ” action=“ ”> <input type=“ ” name=“ ”>

……

</form>

用来创建一个表单，定义表单的开始和结束位置，在标签对之间的一切都属于表单的内容。

<form> 标签具有 action 、 method 和 target属性。

6.4 HTML 基础

action 的值是处理程序的程序名 ( 包括网络路径 : 网址或相对路径 ) ，如： <form action=“http://xld.home.chinaren.net/counter.cgi”> ，当用户提交表单时，服务器将执行网址 http://xld.home.chinaren.net/ 上的名为 counter.cgi 的 CGI程序。

method属性用来定义处理程序从表单中获得信息的方式，可取值为 GET 和 POST 的其中一个。 GET 方式是处理程序从当前 Html 文档中获取数据。 POST 方式与GET 方式相反，它是当前的 Html 文档把数据传送给处理程序，传送的数据量要比使用 GET 方式的大的多。

target属性用来指定目标窗口或目标帧。

常用标签

6.4 HTML 基础

常用标签 <input type=“ ”>

定义一个用户输入区，用户可在其中输入信息。此标签必须放在 <form></form> 标签对之间。

<input type=“”> 标签中共提供了八种类型的输入区域，具体是哪一种类型由 type属性来决定。

八种类型的输入区域有一个公共的属性 name ，此属性给每一个输入区域一个名字。

6.4 HTML 基础

Type属性取值输入区域类型<input type="TEXT" size="" maxlength="">

单行的文本输入区域 ,size 与maxlength属性用来定义此种输入区域显示的尺寸大小与输入的最大字符数

<input type="SUBMIT"> 将表单内容提交给服务器的按钮

<input type="RESET"> 将表单内容全部清除 ,重新填写的按钮

<input type="CHECKBOX" checked>

复选框 ,checked属性用来设置该复选框缺省时是否被选中 ,

常用标签

6.4 HTML 基础

常用标签 <sub></sub> 设置为下标 <sup></sup> 设置为上标 <small></small> 把文字缩小一号 <big></big> 把文字放大一号 <em></em> 同 <i></i> <strong></strong> 同 <b></b>

6.4 HTML 基础


6.2 HTML基础

6.3 Dreamweaver应用

本章内容

6.4 HTML 基础

作业——设计个人网页内容

基本情况；教育情况个人特长；社会活动（实习）兴趣爱好

技术要求采用表格和模板定位技术；加入背景音乐、图像查看器或 Flash动画；层的运用

参考样例 Flash动画讲解（需要耳机）

6.4 HTML 基础

交作业 FTP 上传 ftp://202.120.222.71/

作业下载区作业上传区 /李厦

6.4 HTML 基础

网站分类将网站按照主体性质不同分为

政府网站企业网站商业网站教育科研机构网站个人网站其它网站

6.4 HTML 基础

DreamWeaver

Macromedia 公司产品版本： 8.0

早期版本 Dreamweaver MX 2004（ 7.0）


Dreamweaver 的工作环境 Dreamweaver 的工作界面由文档窗口、工具栏、状态栏、上下文菜单、“插入”工具栏和属性检查器等部分组成。

文档窗口

文档工具栏

状态栏

菜单栏面板组

面板开关

属性检查器


站点的概念在 Dreamweaver 中，“站点”一词既表示 Web 站点又表示属于 Web 站点的文档的本地存储位置


规划和设计站点创建 Dreamweaver 站点

用户要创建一个站点，一般是先在本地将整个网站制作完成，然后再上传到 Web 服务器上。因此，在开始创建网页之前，最好用 Dreamweaver 建立一个本地站点。

Dreamweaver 内置了强大的 FTP功能，可以帮助用户将站点上传到 Internet 服务器上。

目的便于管理网页便于上传下载


准备工作收集素材

图片 Flash Audio Video

在站点下分别建立相应的文件夹保存素材


网页定位技术表格

表格由一行或多行组成；每行又由一个或多个单元格组成

模板在模板中设计“固定的”页面布局。然后创作者在模板

中创建可在基于该模板的文档中进行编辑的区域；模板最强大的用途之一在于一次更新多个页面。

框架图层 CSS+Div ……

Documents

第六章 网页设计与制作基础

第六章网页设计与制作基础