【培训课件】网页设计与制作教程

《【培训课件】网页设计与制作教程》由会员分享，可在线阅读，更多相关《【培训课件】网页设计与制作教程（31页珍藏版）》请在金锄头文库上搜索。

1、网页设计与制作教程第一章WWW概述1.1Internet概述一、什么是InternetInternet原意是互联网，又称因特网 、国际互联网，它不是一个单一的网络 ，它是一个巨大的、全球范围的计算机 网络，它是借助于现代通信和计算机技 术实现全球信息传递的一种快捷、有效 、方便的工具。1、Internet的现状 Internet的前身是美国国防部高级研究 规划局的ARPA网，成立于1969年12月， 从八十年代开始发展，经过20年的发展 ，已取得了巨大的成功，现在已成为世 界上规模最大、用户最多、资源最丰富 的网络互联系统。迄今全球Internet网民 已达3亿多,据估计到2005年网民将达1

2、0亿 。基于Internet的电子商务交易额也将从 97年的80亿美元增到2003年的10000亿美 元。2、信息高速公路与下一代Internet 信息高速公路以高速度、大容量和高精 度的声音、数据、文字、图形和影像等 的交互式多媒体信息服务，来最大幅度 和最快速度地改变着人类的生活面貌和 社会景观。实质是一个多媒体信息交互 高速通信的广域网，它可以实现实时电 视点播等的多媒体的通信服务。借助于 光纤和光电技术，传输速率能达到Gbps 数量级，并且将会达到Tbps(10 b/s),它 与Internet并不是等同的。 下一代Internet（NGI，Ipng)IPv4,IPv6二、Intern

3、et与TCP/IP协议 TCP/IP：传输控制协议/网际协议，是互联网 络信息交换的规则、规范的集合体，包含了 100多种协议。 TCP的主要功能：对网络中计算机和通信设备 的管理，规定了信息包应该怎样分层、分组 ，又怎样在收到信息包以后充组数据，以何 种方式在线路上传输信号。 IP ：定义了Internet上计算机之间的路由选择 ，向传输层提供统一的报文。 如：电子邮件传输、文件传输、新闻网络的 新闻发布、访问全球网。 IP地址：是网上的通信地址，是计算机、服务 、路由器的端口地址，每一个IP地址在全球是 唯一的，是运行TCP/IP协议的唯一标识。三、 Internet网络地址 1、DNS系

4、统 IP地址的格式：主机名域名 IP在Internet中的地址是有一组以圆点为分隔符的四部 分数值所组成，每一部分有八位二进制组成，十进制 格式中每一部分取值是0255。如：210.44.195.10 DNS：是由域名而由机器转换为Internet中的IP地址的 系统，在网络中称之为域名服务系统。 域名的格式为：主机名.机构名.网络名.最高层域名。如 ：WWW.TANC.EDU.CN，最高层域名一般是国家代号 ，如CN（中国）UK（英国）JP（日本）。 常见的最高域名有商业军事教育网络机构政府机构非赢利组织 commiledunetgovorg四、连接Internet的方式 1、拨号连接 2、

5、ISDN接入（一线通） 传输速率：64Kbps或128Kbps 3、企业级用户的接入技术 4、其他的用户级接入技术 Cable Modem、WebTV、 ADSL(1,8M)、手机上网、 Lan(100,100M)1.2 Web服务器 一、Web/Server概述 1、WWW的基本结构浏览器WWW服务器 GGI中间件数据库 服务器HTTPLAN/WANSQLHTMLWWW服务器2、HTTP 超文本传输协议 3、Web Server的性能 由流量、响应时间来衡量 4、影响Web Server的因素 硬件方面：CPU、内存、硬盘 软件方面：HTTP服务进程、TCP/IP实现、文件 系统、数据库、G

6、GI程序。二、Windows Web服务器的建立 参见教材P10P15网 页 设 计一、基础知识（一）基本概念 1、网页网页就是在浏览器上看到的一页信息， 类似于书中的一页，也称为Web页。 2、网站将大量的网页放置在服务器上供人浏览 ，就构成了一个网站。 3、主页每个网站都有一个最基本的网页，叫主 页。（二）网页制作软件 1、网页设计软件 a、DreamweaverDreamweaver是目前设计网页最 好的软件，它能生成高效简洁的HTML 源代码，支持动态网页技术，也可插入 JavaScript程序。 b、FrontpageFrontpage只能制作一些简单的、 质量不高的网页。2、图象处

7、理软件 a、专门网页图象处理软件Photodraw Fireworks b、其它图象处理软件Photoshop Coreldreaw FreeHand 3、动画制作软件Flash（三）Internet概述 1、Internet的概念 2、 Internet的起源 3、IP地址和域名连接在Internet上的电脑，都叫做主机， 每台主机都有一个唯一的号码，这便是IP地址 。IP地址有四组数构成，每组8位，共32位（ 二进制），每组范围0255，在IP地址的4组 数字中，包含了两部分信息：网络代号和主 机代号。在Internet上共有A、B、C、三类网 络类型。 用w.x.y.z表示一个IP地址

8、IP地址分类类 型W值网络ID主机ID网络总 数一个网络中主机总数A1-126wx.y.z12616777214 B128-191 w.xy,.z1638465534C192-223 w.x.y z2097151 254域名域名是用英文来表示IP地址。域名的一般格式为：主机名.机构名.类别名.地区名Dreamweaver 4一、Dreamweaver 简介1、Dreamweaver是Macromedia公司的出 品的一款“所见即所得“的网页编辑工具 。与 Frontpage不同，Deamweaver采 用的是Mac机浮动面版的设计风格，对 于初学者来说可能会感到不适应。但当 你习惯了其操作方式

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

10、er 4.0和Dreamweaver UltraDev4.0。后者支持ASP、JSP等程 序的编写与调试。对于初学者来讲，这 两个版本的Dreamweaver在使用上不会 有太大的差别。而本书则以最新的 Dreamweaver4.0为基准。二、初步认识 Dreamweaver1、 Dreamweaver的启动Dreamweaver的安装过程非常简单，一但 成功安装后，就可以在开始菜单找到 Dreamweaver的选项：二、初步认识 Dreamweaver 2、编辑窗口第一次启动Dreamweaver，首先看到的是Dreamweaver的编辑窗口：主菜单：在这里可以找到编辑窗口的的绝大部分功能工

11、具栏：是Dreamweaver4的新增功能对象面板（Objects）：在网页编辑的过程中，通过单击对象面板的按钮来为网页添加相应 的元素，如图片、表格、层、Flash。我们称这些元素为为对象。单击对象面板上的向下箭头，能插入其他类型的对象，如特殊字符（Characters）、表单Froms）等。属性面板：用于显示所选中的网页元素的属性，并可在属性面板上修改。选择不同的网页元素，属性面板所显 示的内容也有所不同，例如图片和表格所显示的属性是不一样的。此外，点击属性面板右下角的小三角可以根据使用的需要，缩小或展开属性面板，建议一般情况下都设置为展开模式。面板组（又称可停靠浮动面板）：Dreamwe

12、aver 还有很多很多其他的浮动面板，我们可以根 据自己的喜好，将不同的浮动面板重新组合，这就是所谓的面板组。在Photoshop中，也有类 似的概念。:快速启动栏（又称启动面板）：用于显示或隐藏响应的浮动面板。启动面板与右下角的微型启动栏 一一 对应；其中 是切换到站点管理器， 是切换到行为面板， 是查看网页源代码编辑区域：以“所见即所得”的方式显示被编辑网页内容二、初步认识 Dreamweaver3、【提示1】如果屏幕上的浮动面板位置过 于凌乱，甚至超出了桌面范围而不便操作的 时候（在改变了显示器的分辨率后尤其容易 出现这种情况），可以选取主菜单中的 “Window Arrange Pan

13、els”自动重排浮动面 板。 【提示2】以下是几个常用的浮动面板的快 速打开和关闭的热键，好好记住，因为将会 再制作过程中被频繁地使用：Properties属性面板：Crtl+F3CSS Styles样式面板：Shift+F11Behaviors行为面板：Shift+F3Objects对象面板：Crtl+F2 二、初步认识 Dreamweaver4、站点窗口 站点窗口是Dreamweaver另一个重要的窗 口，左半部是远程站点的目录，一般显示为 空，只有在 FTP 连通状态下才有显示内容； 右半部是当前编辑中的本地目录，站点窗口 的作用其实就是直观而方便地让你让像管理 硬盘里的文件一样管理的你

14、的站点在以后网页制作的过程中，将会频繁地在编辑窗口和站点窗口之间 切换。三、制作前的准备工作定义网站 在正式开始制作网页之前，最好先定义一个新网站， 这是为了更好地利用站点窗口对站点文件进行管理。定义的方法 方法一：在站点窗口的下拉菜单选 择最后一项Define Sites，如下图。三、制作前的准备工作定义网站此时会弹出一个新的对话框，点击New按钮是定义一 个新网站，如果日后需要对旧有网站重新定义，可以 在左边的网站列表中选中你需要重新定义的网站，然 后点击 Edit 按钮便可。三、制作前的准备工作定义网站方法二：选择命令菜单 Site New Site 选项。基本设置在接着看到的对话框中，

15、要进行以下三步简单的设置： Site Name（网站名称）：为你的网站起一个名字，这个名 字只起着识别的作用，与网站发布后真实的名字无关，例如这 里的名字是：“我的网站”，而实际上我的网站叫“上网指南”； Local Root（本地根目录）：设置网站在本地硬盘的位置， 点击后面的文件夹图标可以选择硬盘的任意目录作为存放网站 文件的目录； Cache（缓存）：建立缓存可以使文件的移动、改名、查找 等站点管理的操作速度大大提升，因此建议大家在这里打上钩 。 完成后，回到站点窗口，就可以看到如下类似的画面：三、制作前的准备工作定义网站三、制作前的准备工作定义网站 可以看到，“我的网站”的名称已经出现在站点窗口 了，因为是新建的一个站点，所在在本地目录看到的 一片空白。站点定义完毕之后，就可以正式制作属于你自己的 网页了