网页设计与制作教程

2021/8/171网页设计与制作教程网页设计与制作教程全文共31页，当前为第1页。2021/8/172第一章WWW概述网页设计与制作教程全文共31页，当前为第2页。2021/8/173§1.1Internet概述一、什么是InternetInternet原意是互联网，又称因特网、国际互联网，它不是一个单一的网络，它是一个巨大的、全球范围的计算机网络，它是借助于现代通信和计算机技术实现全球信息传递的一种快捷、有效、方便的工具。网页设计与制作教程全文共31页，当前为第3页。2021/8/1741、Internet的现状Internet的前身是美国国防部高级研究规划局的ARPA网，成立于1969年12月，从八十年代开始发展，经过20年的发展，已取得了巨大的成功，现在已成为世界上规模最大、用户最多、资源最丰富的网络互联系统。迄今全球Internet网民已达3亿多,据估计到2005年网民将达10亿。基于Internet的电子商务交易额也将从97年的80亿美元增到2003年的10000亿美元。网页设计与制作教程全文共31页，当前为第4页。2021/8/1752、信息高速公路与下一代Internet信息高速公路以高速度、大容量和高精度的声音、数据、文字、图形和影像等的交互式多媒体信息服务，来最大幅度和最快速度地改变着人类的生活面貌和社会景观。实质是一个多媒体信息交互高速通信的广域网，它可以实现实时电视点播等的多媒体的通信服务。借助于光纤和光电技术，传输速率能达到Gbps数量级，并且将会达到Tbps(10¹²b/s),它与Internet并不是等同的。下一代Internet（NGI，Ipng)IPv4,IPv6网页设计与制作教程全文共31页，当前为第5页。2021/8/176二、Internet与TCP/IP协议TCP/IP：传输控制协议/网际协议，是互联网络信息交换的规则、规范的集合体，包含了100多种协议。TCP的主要功能：对网络中计算机和通信设备的管理，规定了信息包应该怎样分层、分组，又怎样在收到信息包以后充组数据，以何种方式在线路上传输信号。IP：定义了Internet上计算机之间的路由选择，向传输层提供统一的报文。如：电子邮件传输、文件传输、新闻网络的新闻发布、访问全球网。IP地址：是网上的通信地址，是计算机、服务、路由器的端口地址，每一个IP地址在全球是唯一的，是运行TCP/IP协议的唯一标识。网页设计与制作教程全文共31页，当前为第6页。2021/8/177

三、Internet网络地址1、DNS系统IP地址的格式：主机名•域名IP在Internet中的地址是有一组以圆点为分隔符的四部分数值所组成，每一部分有八位二进制组成，十进制格式中每一部分取值是0~255。如：0DNS：是由域名而由机器转换为Internet中的IP地址的系统，在网络中称之为域名服务系统。域名的格式为：主机名.机构名.网络名.最高层域名。如：WWW.TANC.EDU.CN，最高层域名一般是国家代号，如CN（中国）UK（英国）JP（日本）。常见的最高域名有商业军事教育网络机构政府机构非赢利组织commiledunetgovorg网页设计与制作教程全文共31页，当前为第7页。2021/8/178四、连接Internet的方式1、拨号连接2、ISDN接入（一线通）传输速率：64Kbps或128Kbps3、企业级用户的接入技术4、其他的用户级接入技术CableModem、WebTV、ADSL(1,8M)、手机上网、Lan(100,100M)网页设计与制作教程全文共31页，当前为第8页。2021/8/179§1.2Web服务器一、Web/Server概述1、WWW的基本结构浏览器WWW服务器GGI中间件数据库服务器HTTPLAN/WANSQLHTMLWWW服务器网页设计与制作教程全文共31页，当前为第9页。2021/8/17102、HTTP超文本传输协议3、WebServer的性能由流量、响应时间来衡量4、影响WebServer的因素硬件方面：CPU、内存、硬盘软件方面：HTTP服务进程、TCP/IP实现、文件系统、数据库、GGI程序。网页设计与制作教程全文共31页，当前为第10页。2021/8/1711二、WindowsWeb服务器的建立参见教材P10—P15网页设计与制作教程全文共31页，当前为第11页。2021/8/1712网页设计

网页设计与制作教程全文共31页，当前为第12页。2021/8/1713一、基础知识（一）基本概念1、网页网页就是在浏览器上看到的一页信息，类似于书中的一页，也称为Web页。2、网站将大量的网页放置在服务器上供人浏览，就构成了一个网站。3、主页每个网站都有一个最基本的网页，叫主页。网页设计与制作教程全文共31页，当前为第13页。2021/8/1714（二）网页制作软件1、网页设计软件a、DreamweaverDreamweaver是目前设计网页最好的软件，它能生成高效简洁的HTML源代码，支持动态网页技术，也可插入JavaScript程序。b、FrontpageFrontpage只能制作一些简单的、质量不高的网页。网页设计与制作教程全文共31页，当前为第14页。2021/8/17152、图象处理软件a、专门网页图象处理软件

PhotodrawFireworksb、其它图象处理软件

PhotoshopCoreldreawFreeHand3、动画制作软件

Flash网页设计与制作教程全文共31页，当前为第15页。2021/8/1716（三）Internet概述1、Internet的概念2、Internet的起源3、IP地址和域名连接在Internet上的电脑，都叫做主机，每台主机都有一个唯一的号码，这便是IP地址。

IP地址有四组数构成，每组8位，共32位（二进制），每组范围0—255，在IP地址的4组数字中，包含了两部分信息：网络代号和主机代号。在Internet上共有A、B、C、三类网络类型。网页设计与制作教程全文共31页，当前为第16页。2021/8/1717用w.x.y.z表示一个IP地址IP地址分类类型W值网络ID主机ID网络总数一个网络中主机总数A1--126wx.y.z12616777214B128--191w.xy,.z1638465534C192--223w.x.yz2097151254域名域名是用英文来表示IP地址。域名的一般格式为：主机名.机构名.类别名.地区名网页设计与制作教程全文共31页，当前为第17页。2021/8/1718

Dreamweaver4

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

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

网页设计与制作教程全文共31页，当前为第20页。2021/8/1721一、Dreamweaver简介3、

Dreamweaver最新的版本为:Dreamweaver4.0和DreamweaverUltraDev4.0。后者支持ASP、JSP等程序的编写与调试。对于初学者来讲，这两个版本的Dreamweaver在使用上不会有太大的差别。而本书则以最新的Dreamweaver4.0为基准。网页设计与制作教程全文共31页，当前为第21页。2021/8/1722二、初步认识Dreamweaver1、Dreamweaver的启动

Dreamweaver的安装过程非常简单，一但成功安装后，就可以在开始菜单找到Dreamweaver的选项：网页设计与制作教程全文共31页，当前为第22页。2021/8/1723二、初步认识Dreamweaver2、编辑窗口第一次启动Dreamweaver，首先看到的是Dreamweaver的编辑窗口：主菜单：在这里可以找到编辑窗口的的绝大部分功能工具栏：是Dreamweaver4的新增功能对象面板（Objects）：在网页编辑的过程中，通过单击对象面板的按钮来为网页添加相应的元素，如图片、表格、层、Flash。我们称这些元素为为对象。单击对象面板上的向下箭头，能插入其他类型的对象，如特殊字符（Characters）、表单Froms）等。属性面板：用于显示所选中的网页元素的属性，并可在属性面板上修改。选择不同的网页元素，属性面板所显示的内容也有所不同，例如图片和表格所显示的属性是不一样的。此外，点击属性面板右下角的小三角可以根据使用的需要，缩小或展开属性面板，建议一般情况下都设置为展开模式。面板组（又称可停靠浮动面板）：Dreamweaver还有很多很多其他的浮动面板，我们可以根据自己的喜好，将不同的浮动面板重新组合，这就是所谓的面板组。在Photoshop中，也有类似的概念。:快速启动栏（又称启动面板）：用于显示或隐藏响应的浮动面板。启动面板与右下角的微型启动栏一一对应；其中是切换到站点管理器，是切换到行为面板，是查看网页源代码编辑区域：以“所见即所得”的方式显示被编辑网页内容网页设计与制作教程全文共31页，当前为第23页。2021/8/1724二、初步认识Dreamweaver

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

【提示2】以下是几个常用的浮动面板的快速打开和关闭的热键，好好记住，因为将会再制作过程中被频繁地使用：

Properties属性面板：Crtl+F3

CSSStyles样式面板：Shift+F11

Behaviors行为面板：Shift+F3

Objects对象面板：Crtl+F2网页设计与制作教程全文共31页，当前为第24页。2021/8/1725二、初步认识Dreamweaver

4、站点窗口

站点窗口是Dreamweaver另一个重要的窗口，左半部是远程站点的目录，一般显示为空，只有在FTP连通状态下才有显示内容；右半部是当前编辑中的本地目录，站点窗口的作用其实就是直观而方便地让你让像管理硬盘里的文件一样管理的你的站点网页设计与制作教程全文共31页，当前为第25页。2021/8/1726

在以后网页制作的过程中，将会频繁地在编辑窗口和站点窗口之间切换。

网页设计与制作教程全文共31页，当前为第26页。2021/8/1727三、制作前的准备工作——定义网站在正式开始制作网页之前，最好先定义一个新网站，这是为了更好地利用站点窗口对站点文件进行管理。定义的方法

方法一：在站点窗口的下拉菜单选择最后一项DefineSites，如下图。网页设计与制作教程全文共31页，当前为第27页。2021/8/1728

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

此时会弹出一个新的对话框，点击New按钮是定义一个新网站，如果日后需要对旧有网站重新定义，可以在左边的网站列表中选中你需要重新定义的网站，然后点击Edit按钮便可。网页设计与制作教程全文共31页，当前为第28页。2021/8/1729