网页设计与制作教程

网页设计与制作教程

主讲：纪东华

第一章WWW 概述

§1.1Internet 概述一、什么是 Internet Internet 原意是互联网，又称因特

网、国际互联网，它不是一个单一的网络，它是一个巨大的、全球范围的计算机网络，它是借助于现代通信和计算机技术实现全球信息传递的一种快捷、有效、方便的工具。

1 、 Internet 的现状• Internet 的前身是美国国防部高级研究

规划局的 ARPA 网，成立于 1969 年 12 月，从八十年代开始发展，经过 20 年的发展，已取得了巨大的成功，现在已成为世界上规模最大、用户最多、资源最丰富的网络互联系统。迄今全球 Internet 网民已达 3亿多 , 据估计到 2005 年网民将达 10 亿。基于 Internet 的电子商务交易额也将从 97年的 80 亿美元增到 2003 年的 10000 亿美元。

2 、信息高速公路与下一代 Internet• 信息高速公路以高速度、大容量和高精度

的声音、数据、文字、图形和影像等的交互式多媒体信息服务，来最大幅度和最快速度地改变着人类的生活面貌和社会景观。实质是一个多媒体信息交互高速通信的广域网，它可以实现实时电视点播等的多媒体的通信服务。借助于光纤和光电技术，传输速率能达到 Gbps 数量级，并且将会达到 Tbps(10¹² b/s), 它与 Internet 并不是等同的。

• 下一代 Internet （ NGI ， Ipng) IPv4,IPv6

二、 Internet 与 TCP/IP 协议• TCP/IP ：传输控制协议 / 网际协议，是互联网络信息

交换的规则、规范的集合体，包含了 100 多种协议。• TCP 的主要功能：对网络中计算机和通信设备的管理，

规定了信息包应该怎样分层、分组，又怎样在收到信息包以后充组数据，以何种方式在线路上传输信号。

• IP ：定义了 Internet 上计算机之间的路由选择，向传输层提供统一的报文。

• 如：电子邮件传输、文件传输、新闻网络的新闻发布、访问全球网。

• IP 地址：是网上的通信地址，是计算机、服务、路由器的端口地址，每一个 IP 地址在全球是唯一的，是运行 TCP/IP 协议的唯一标识。

三、 Internet 网络地址• 1 、 DNS 系统• IP 地址的格式：主机名•域名• IP 在 Internet 中的地址是有一组以圆点为分隔符的四部

分数值所组成，每一部分有八位二进制组成，十进制格式中每一部分取值是 0~255 。如： 210.44.195.10

• DNS ：是由域名而由机器转换为 Internet 中的 IP 地址的系统，在网络中称之为域名服务系统。

• 域名的格式为：主机名 . 机构名 . 网络名 . 最高层域名。如： WWW.TANC.EDU.CN ，最高层域名一般是国家代号，如 CN （中国） UK （英国） JP （日本）。

• 常见的最高域名有

商业军事教育网络机构政府机构非赢利组织com mil edu net gov org

四、连接 Internet 的方式• 1 、拨号连接• 2 、 ISDN接入（一线通）• 传输速率： 64Kbps或 128Kbps• 3 、企业级用户的接入技术• 4 、其他的用户级接入技术• Cable Modem 、 WebTV 、 ADSL

(1,8M) 、手机上网、 Lan(100,100M)

§1.2 Web 服务器

• 一、 Web/Server 概述• 1 、 WWW 的基本结构

浏览器 WWW 服务器 GGI 中间件数据库服务器

HTTP

LAN/WAN

SQL

HTML WWW 服务器

2 、 HTTP

• 超文本传输协议3 、 Web Server 的性能由流量、响应时间来衡量4 、影响Web Server 的因素硬件方面： CPU 、内存、硬盘软件方面： HTTP 服务进程、 TCP/IP 实现、文

件系统、数据库、 GGI 程序。

二、 Windows Web 服务器的建立

• 参见教材 P10—P15

网页设计

一、基础知识（一）基本概念1 、网页网页就是在浏览器上看到的一页信息，

类似于书中的一页，也称为 Web 页。2 、网站将大量的网页放置在服务器上供人浏览，就构成了一个网站。

3 、主页每个网站都有一个最基本的网页，叫主页。

（二）网页制作软件1 、网页设计软件a 、 Dreamweaver Dreamweaver 是目前设计网页最好的软件，它能生成高效简洁的 HTML源代码，支持动态网页技术，也可插入JavaScript 程序。

b 、 Frontpage Frontpage只能制作一些简单的、

质量不高的网页。

2 、图象处理软件a 、专门网页图象处理软件 Photodraw Fireworks

b 、其它图象处理软件 Photoshop Coreldreaw Fre

eHand

3 、动画制作软件 Flash

（三） Internet 概述1 、 Internet 的概念2 、 Internet 的起源3 、 IP 地址和域名连接在 Internet 上的电脑，都叫做主机，

每台主机都有一个唯一的号码，这便是 IP 地址。

IP 地址有四组数构成，每组 8位，共 32位（二进制），每组范围 0—255 ，在 IP 地址的 4 组数字中，包含了两部分信息：网络代号和主机代号。在 Internet 上共有 A 、 B 、C 、三类网络类型。

• 用 w.x.y.z表示一个 IP 地址IP 地址分类

类型 W值网络 ID 主机 ID 网络总数一个网络中主机总数

A 1--126 w x.y.z 126 16777214

B 128--191 w.x y,.z 16384 65534

C 192--223 w.x.y z 2097151 254

•域名

域名是用英文来表示 IP地址。

域名的一般格式为：

主机名 .机构名 .类别名 .地区名

Dreamweaver 4

一、 Dreamweaver 简介

1 、 Dreamweaver 是 Macromedia 公司的出品的一款 "所见即所得 " 的网页编辑工具。与 Frontpage 不同， Deamweaver采用的是 Mac 机浮动面版的设计风格，对于初学者来说可能会感到不适应。但当你习惯了其操作方式后，就会发现 Dreamweaver 的直观性与高效性是 Frontpage所无法比拟的。–　　


2 、 Dreamweaver 对于 DHTML （动态网页）的支持特别好，可以轻而易举地做出很多眩目的互动页面特效。插件式的程序设计使得其功能可以无限的扩展。 Dreamweaver 与 Flash 、 Firework 并称为 Macromedia 的网页制作三剑客，由于是同一公司的产品，因而在功能上有着一个非常紧密的结合。因此，说 Dreamweaver 是高级网页制作的首选并不为过。


3 、　 Dreamweaver 最新的版本为 :Dreamweaver 4.0 和 Dreamweaver UltraDev4.0 。后者支持 ASP 、 JSP 等程序的编写与调试。对于初学者来讲，这两个版本的 Dreamweaver 在使用上不会有太大的差别。而本书则以最新的 Dreamweaver4.0 为基准。

二、初步认识 Dreamweaver

1 、　Dreamweaver 的启动　　 Dreamweaver 的安装过程非常简单，一但

成功安装后，就可以在开始菜单找到 Dreamweaver 的选项：

二、初步认识 Dreamweaver2 、编辑窗口　　第一次启动 Dreamweaver ，首先看到的是 Dream

weaver 的编辑窗口：主菜单：在这里可以找到编辑窗口的的绝大部分功能主菜单：在这里可以找到编辑窗口的的绝大部分功能工具栏：是 Dreamweaver4 的新增功能工具栏：是 Dreamweaver4 的新增功能

对象面板（ Objects）：在网页编辑的过程中，通过单击对象面板的按钮来为网页添加相应的元素，如图片、表格、层、 Flash 。我们称这些元素为为对象。单击对象面板上的向

下箭头，能插入其他类型的对象，如特殊字符（ Characters）、表单 Froms）等。

对象面板（ Objects）：在网页编辑的过程中，通过单击对象面板的按钮来为网页添加相应的元素，如图片、表格、层、 Flash 。我们称这些元素为为对象。单击对象面板上的向

下箭头，能插入其他类型的对象，如特殊字符（ Characters）、表单 Froms）等。属性面板：用于显示所选中的网页元素的属性，并可在属性面板上修改。选择不同的网页元素，属性面板所显示的内容也有所不同，例如图片和表格所显示的属性是不一样的。此外，点击属性面板右下角的小三角可以根据使用的需要，缩小或展开属性面板，建议一般情况下都设置为展开模式。

属性面板：用于显示所选中的网页元素的属性，并可在属性面板上修改。选择不同的网页元素，属性面板所显示的内容也有所不同，例如图片和表格所显示的属性是不一样的。此外，点击属性面板右下角的小三角可以根据使用的需要，缩小或展开属性面板，建议一般情况下都设置为展开模式。

面板组（又称可停靠浮动面板）： Dreamweaver 还有很多很多其他的浮动面板，我们可以根据自己的喜好，将不同的浮动面板重新组合，这就是所谓的面板组。在 Photoshop 中，也有类似的概念。

面板组（又称可停靠浮动面板）： Dreamweaver 还有很多很多其他的浮动面板，我们可以根据自己的喜好，将不同的浮动面板重新组合，这就是所谓的面板组。在 Photoshop 中，也有类似的概念。

: 快速启动栏（又称启动面板）：用于显示或隐藏响应的浮动面板。启动面板与右下角的微型启动栏一一对应；其中是切换到站点管理器，是切换到行为面板，是查看网页源代码

: 快速启动栏（又称启动面板）：用于显示或隐藏响应的浮动面板。启动面板与右下角的微型启动栏一一对应；其中是切换到站点管理器，是切换到行为面板，是查看网页源代码

编辑区域：以“所见即所得”的方式显示被编辑网页内容编辑区域：以“所见即所得”的方式显示被编辑网页内容

二、初步认识 Dreamweaver　 3 、【提示 1 】如果屏幕上的浮动面板位置过于凌乱，甚至超出了桌面范围而不便操作的时候（在改变了显示器的分辨率后尤其容易出现这种情况），可以选取主菜单中的“Window > Arrange Panels”自动重排浮动面板。　

【提示 2 】以下是几个常用的浮动面板的快速打开和关闭的热键，好好记住，因为将会再制作过程中被频繁地使用：　　 Properties属性面板： Crtl+F3　　CSS Styles 样式面板： Shift+F11　　 Behaviors行为面板： Shift+F3　　Objects 对象面板： Crtl+F2

二、初步认识 Dreamweaver

　　4 、站点窗口　　　　站点窗口是 Dreamweaver另一个重要的窗

口，左半部是远程站点的目录，一般显示为空，只有在 FTP 连通状态下才有显示内容；右半部是当前编辑中的本地目录，站点窗口的作用其实就是直观而方便地让你让像管理硬盘里的文件一样管理的你的站点

在以后网页制作的过程中，将

会频繁地在编辑窗口和站点窗口之间切换。

三、制作前的准备工作——定义网站• 在正式开始制作网页之前，最好先定义一个新网站，这是为了更好地利用站点窗口对站点文件进行管理。

　　定义的方法　　方法一：在站点窗口的下拉菜单选择最后一项 Define Sites ，如下图。

三、制作前的准备工作——定义网站

此时会弹出一个新的对话框，点击 New按钮是定义一个新网站，如果日后需要对旧有网站重新定义，可以在左边的网站列表中选中你需要重新定义的网站，然后点击 Edit 按钮便可。

　


方法二：选择命令菜单 Site > New Site 选项。　　基本设置　　在接着看到的对话框中，要进行以下三步简单的设置：　　① Site Name （网站名称）：为你的网站起一个名字，这个名

字只起着识别的作用，与网站发布后真实的名字无关，例如这里的名字是：“我的网站”，而实际上我的网站叫“上网指南”；

　　② Local Root （本地根目录）：设置网站在本地硬盘的位置，点击后面的文件夹图标可以选择硬盘的任意目录作为存放网站文件的目录；

　　③ Cache （缓存）：建立缓存可以使文件的移动、改名、查找等站点管理的操作速度大大提升，因此建议大家在这里打上钩。　　　

　　完成后，回到站点窗口，就可以看到如下类似的画面：

　

三、制作前的准备工作——定义网站• 　可以看到，“我的网站”的名称已经出现在站点窗口了，因为是新建的一个站点，所在在本地目录看到的一片空白。

　　站点定义完毕之后，就可以正式制作属于你自己的网页了

网页设计与制作教程

Documents