网设计与制作教程.ppt

网页设计与制作教程 第一章 WWW概述 1 1Internet概述 一 什么是InternetInternet原意是互联网 又称因特网 国际互联网 它不是一个单一的网络 它是一个巨大的 全球范围的计算机网络 它是借助于现代通信和计算机技术实现全球信息传递的一种快捷 有效 方便的工具 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 10DNS 是由域名而由机器转换为Internet中的IP地址的系统 在网络中称之为域名服务系统 域名的格式为 主机名 机构名 网络名 最高层域名 如 WWW TANC EDU CN 最高层域名一般是国家代号 如CN 中国 UK 英国 JP 日本 常见的最高域名有 四 连接Internet的方式 1 拨号连接2 ISDN接入 一线通 传输速率 64Kbps或128Kbps3 企业级用户的接入技术4 其他的用户级接入技术CableModem WebTV ADSL 1 8M 手机上网 Lan 100 100M 1 2Web服务器 一 Web Server概述1 WWW的基本结构 浏览器 WWW服务器 GGI 中间件 数据库服务器 HTTP LAN WAN SQL HTML WWW服务器 2 HTTP 超文本传输协议3 WebServer的性能由流量 响应时间来衡量4 影响WebServer的因素硬件方面 CPU 内存 硬盘软件方面 HTTP服务进程 TCP IP实现 文件系统 数据库 GGI程序 二 WindowsWeb服务器的建立 参见教材P10 P15 网页设计 一 基础知识 一 基本概念1 网页网页就是在浏览器上看到的一页信息 类似于书中的一页 也称为Web页 2 网站将大量的网页放置在服务器上供人浏览 就构成了一个网站 3 主页每个网站都有一个最基本的网页 叫主页 二 网页制作软件1 网页设计软件a DreamweaverDreamweaver是目前设计网页最好的软件 它能生成高效简洁的HTML源代码 支持动态网页技术 也可插入JavaScript程序 b FrontpageFrontpage只能制作一些简单的 质量不高的网页 2 图象处理软件a 专门网页图象处理软件PhotodrawFireworksb 其它图象处理软件PhotoshopCoreldreawFreeHand3 动画制作软件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地址分类 域名域名是用英文来表示IP地址 域名的一般格式为 主机名 机构名 类别名 地区名 Dreamweaver4 一 Dreamweaver简介 1 Dreamweaver是Macromedia公司的出品的一款 所见即所得 的网页编辑工具 与Frontpage不同 Deamweaver采用的是Mac机浮动面版的设计风格 对于初学者来说可能会感到不适应 但当你习惯了其操作方式后 就会发现Dreamweaver的直观性与高效性是Frontpage所无法比拟的 一 Dreamweaver简介 2 Dreamweaver对于DHTML 动态网页 的支持特别好 可以轻而易举地做出很多眩目的互动页面特效 插件式的程序设计使得其功能可以无限的扩展 Dreamweaver与Flash Firework并称为Macromedia的网页制作三剑客 由于是同一公司的产品 因而在功能上有着一个非常紧密的结合 因此 说Dreamweaver是高级网页制作的首选并不为过 一 Dreamweaver简介 3 Dreamweaver最新的版本为 Dreamweaver4 0和DreamweaverUltraDev4 0 后者支持ASP JSP等程序的编写与调试 对于初学者来讲 这两个版本的Dreamweaver在使用上不会有太大的差别 而本书则以最新的Dreamweaver4 0为基准 二 初步认识Dreamweaver 1 Dreamweaver的启动Dreamweaver的安装过程非常简单 一但成功安装后 就可以在开始菜单找到Dreamweaver的选项 二 初步认识Dreamweaver 2 编辑窗口第一次启动Dreamweaver 首先看到的是Dreamweaver的编辑窗口 工具栏 是Dreamweaver4的新增功能 对象面板 Objects 在网页编辑的过程中 通过单击对象面板的按钮来为网页添加相应的元素 如图片 表格 层 Flash 我们称这些元素为为对象 单击对象面板上的向下箭头 能插入其他类型的对象 如特殊字符 Characters 表单Froms 等 属性面板 用于显示所选中的网页元素的属性 并可在属性面板上修改 选择不同的网页元素 属性面板所显示的内容也有所不同 例如图片和表格所显示的属性是不一样的 此外 点击属性面板右下角的小三角可以根据使用的需要 缩小或展开属性面板 建议一般情况下都设置为展开模式 面板组 又称可停靠浮动面板 Dreamweaver还有很多很多其他的浮动面板 我们可以根据自己的喜好 将不同的浮动面板重新组合 这就是所谓的面板组 在Photoshop中 也有类似的概念 快速启动栏 又称启动面板 用于显示或隐藏响应的浮动面板 启动面板与右下角的微型启动栏一一对应 其中是切换到站点管理器 是切换到行为面板 是查看网页源代码 编辑区域 以 所见即所得 的方式显示被编辑网页内容 二 初步认识Dreamweaver 3 提示1 如果屏幕上的浮动面板位置过于凌乱 甚至超出了桌面范围而不便操作的时候 在改变了显示器的分辨率后尤其容易出现这种情况 可以选取主菜单中的 Window ArrangePanels 自动重排浮动面板 提示2 以下是几个常用的浮动面板的快速打开和关闭的热键 好好记住 因为将会再制作过程中被频繁地使用 Properties属性面板 Crtl F3CSSStyles样式面板 Shift F11Behaviors行为面板 Shift F3Objects对象面板 Crtl F2 二 初步认识Dreamweaver 4 站点窗口站点窗口是Dreamweaver另一个重要的窗口 左半部是远程站点的目录 一般显示为空 只有在FTP连通状态下才有显示内容 右半部是当前编辑中的本地目录 站点窗口的作用其实就是直观而方便地让你让像管理硬盘里的文件一样管理的你的站点 三 制作前的准备工作 定义网站 在正式开始制作网页之前 最好先定义一个新网站 这是为了更好地利用站点窗口对站点文件进行管理 定义的方法方法一 在站点窗口的下拉菜单选择最后一项DefineSites 如下图 三 制作前的准备工作 定义网站 此时会弹出一个新的对话框 点击New按钮是定义一个新网站 如果日后需要对旧有网站重新定义 可以在左边的网站列表中选中你需要重新定义的网站 然后点击Edit按钮便可 三 制作前的准备工作 定义网站 方法二 选择命令菜单Site NewSite选项 基本设置在接着看到的对话框中 要进行以下三步简单的设置 SiteName 网站名称 为你的网站起一个名字 这个名字只起着识别的作用 与网站发布后真实的名字无关 例如这里的名字是 我的网站 而实际上我的网站叫 上网指南 LocalRoot 本地根目录 设置网站在本地硬盘的位置 点击后面的文件夹图标可