第4章 网页制作概述.ppt

第4章网页制作概述 网页制作简介 HTML的概述 Dreamweavercs4的编辑环境 创建和管理站点 页面内容设置 CSS样式 表单操作 IIS简介 精选网页实例制作 4 1网页制作简介 1 基础知识及常用术语2 网页制作常用软件1 网页布局软件2 图像处理软件3 动画制作软件3网站制作的基本流程 基础知识及常用术语 基础知识及常用术语 1 网页的概述总体来说 与网页有关的基本概念包括网页 是纯文本格式的HTML文件 用任何文本编辑器都可以打开编辑 它也是一种可以在WWW网上传输 并被浏览器认识和翻译成页面显示出来的文件网站 是由一个一个页面构成的 是网页的有机结合体主页 是网站的第一页 浏览者可以通过主页链接到网站的其他页 基础知识及常用术语 2 网页常用术语域名 是Internet上的一个服务器或一个网络系统的名字域名具有唯一性 在全世界范围内 没有重复的域名域名分为国内域名和国际域名两种国内域名由中国互联网络信息中心CNNIC ChinaInternetNetworkInformationCenter 审批并维护国际域名由专门的国际机构审批并维护从技术上讲 域名只是一个Internet中用于解决与IP地址对应问题的一种方法 基础知识及常用术语 IP InternetProtocol 地址 是在网络上分配给每台计算机或网络设备的32位数字标识在Internet上 每台计算机或网络设备的IP地址是全世界唯一的一个IP地址实际上由网络ID号和主机ID号两部分组成IP地址的格式是xxx xxx xxx xxx 其中xxx是0 255之间的任意整数 例如 某网站主机的IP地址是212 22 42 54 基础知识及常用术语 HTTP HyperTextTransferProtocol 超文本传输协议 是WWW浏览器和WWW服务器之间的应用层通信协议HTTP协议是基于TCP IP之上的协议 它不仅保证正确传输超文本文档 还确定传输文档中的哪一部分 以及哪一部分内容首先显示 如文本先于图形 等 基础知识及常用术语 FTP FileTransferProtocol 文件传输协议 是在计算机和网络之间交换文件的最简单的方法FTP的主要功能是上传 下载文件 查询文件目录 更改文件名称及删除文件等Web服务器 Web服务器是放在网络中某个节点上的计算机 装有某种服务系统 拥有独立的IP地址当客户向URL所指定的Web服务器发出请求时 Web服务器根据请求的程序返回相应的内容至客户端 按HTTP协议进行交互 基础知识及常用术语 URL UniformResourceLocator 统一资源定位器 用一种统一的格式来描述各种信息资源 包括文件 服务器的地址和目录等语法是 超链接 指站点内不同网页之间 站点与Web之间的链接关系 由链接载体 源端点 和链接目标 目标端点 两部分组成 可以使站点内的网页成为有机的整体 还能够使不同站点之间建立联系 基础知识及常用术语 导航条 Navigation 导航条相当于网站的目录 指通过一定的技术手段 为网站的访问者提供一定的途径 使其可以方便地访问到所需的内容 主页的导航条就是最上面的那些包括网站所有内容的链接表单 供浏览者提交填写的信息的交互网页申请邮箱时在网上填写的各个页面就是表单发布 将制作好的网页传到网上的过程就是发布 4 1 2网页制作常用软件 网页制作常用软件 1 网页布局软件FrontPage与Office系列软件的其他成员一起组成一个有机的整体Macromedia推出的Dreamweaver更是一个广受好评的网页设计软件 4 1 2网页制作常用软件 2 图像处理软件Macromedia公司推出的网页图片制作软件Fireworks具有强大的功能动画制作软件MacromediaFlash是制作Web动画电影的专业标准创作工具 4 1 2网页制作常用软件 制作网站制作的基本流程1 网站的内容2 网站的组织结构3 资料的收集与整理4 选择网站的设计方法 4 2HTML的概述 1 HTML文档2 描述页面整体结构的标记3 HTML的主要头部标记4 HTML的内部主体标记 4 2 1HTML文档 HTML文档HTML HyperTextMark upLanguage 超文本标记语言 是一种用来制作超文本文档的简单标记语言用HTML编写的超文本文档称为HTML文档 它能独立于各种操作系统平台 如UNIX Windows等 4 2 1HTML文档 生成一个HTML文档主要有以下三种途径 手工直接编写 例如 用你所喜爱的ASCII文本编辑器或其他HTML的编辑工具 通过某些格式转换工具将现有的其他格式文档 如Word文档 转换成HTML文档由Web服务器 或称HTTP服务器 一方实时动态生成 4 2 1HTML文档 HTML文档中包含两种信息 页面本身的文本 表示页面元素 结构 格式和其他超文本链接的HTML标记标记 4 2 2描述页面整体结构的标记 描述页面整体结构的标记HTML定义了3种标记用于描述页面的整体结构 以及浏览器和HTML工具对HTML页面的确认一般的页面结构如下 头部信息文档主体 正文部分 4 2 2描述页面整体结构的标记 标记标记是HTML文档的第一个标记 它通知客户端该文档是HTML文档 结束标记应该出现在HTML文档的尾部 标记标记出现在文档的起始部分 标明文档的题目 或介绍 标题或主题信息 该部分包含的是文档的无序信息 若不需头部信息则可省略此标记 结束标记指明文档标题部分的结束之处 4 2 2描述页面整体结构的标记 标记HTML文档中的标记用来指明文档的主体区域 表示正文开始 通常包含其他字符串 如标题 段落 列表等 也可简单地理解成标题以外的所有部分 使用结束标记指明主体区域的结束之处 4 2 3HTML的主要头部标记 HTML的主要头部标记 当前文档的URL全称 即基底网址 使用方法如下 设置本文档的原始地址 使读者知道下载的地址在HTML中使用语句链接相对位置为 这时 浏览器的状态栏的地址将是 4 2 3HTML的主要头部标记 帮助在本地机上制作网页的时候 能够模拟看到上传后网页所处的位置 检测网站的目录结构非常方便例如 以下语句用于把当前框架中的链接显示到content框架中 设置整个文档资料使用同一种指定的字体 字号和颜色例如指网页的文字默认字体是宋体 大小是9pt 4 2 3HTML的主要头部标记 这个标记可以用来设定显示在浏览器左上方的标题内容 一对标记表明了一个网页的总标题 是标记里面的必需标记 的格式是 标题文本标记所设定的标题文本不超过64个字符 一般显示在窗口顶端的标题栏中 4 2 3HTML的主要头部标记 用于设置文档的搜索关键字 由服务器自动产生一个可用于检索的网关脚本 用于在网页文本中设定CSS层叠样式表代码内容 用于显示本文档和其他文档之间的链接关系 这个标记最有用的应用就是外部层叠样式表的定位 用于设定页面中程序脚本的内容 4 2 3HTML的主要头部标记 无信息标记 位于HTML文档的标记对中 用于描述不包含在标准HTML里的一些文档信息 包括网页关键字 描述 刷新 指定服务器和客户端的可用信息等 不显示在HTML页面上 但起着重要的作用例如 以上语句设置页面的关键字和描述 以便搜索引擎记录并提供给用户查询 4 2 4HTML的内部主体标记 HTML的内部主体标记标记中有一些属性 是用于定义页面内的显示效果ALINK LINK TEXT和VLINK 用于设置文字的颜色ALINK 当前激活的链接文字的颜色LINK 链接的颜色TEXT 链接文字的颜色VLINK 参观过的链接文字的颜色 4 2 4HTML的内部主体标记 BACKGROUND BGPROPERTIES和BGCOLOR 用于设置页面的背景BACKGROUND 背景图案 该图案在页面内平铺BGPROPERTIES 若设置成FIXED 则背景图案不滚动BGCOLOR 设置背景色 4 2 4HTML的内部主体标记 页边距设置标记 LEFTMARGIN 左边的页边空白 TOPMARGIN 顶端的页边空白 MARGINWIDTH 左右两边的页边空白宽度 MARGINHEIGHT 上下两边的页边空白高度 4 3Dreamweaver8的编辑环境 新建和保存文件功能菜单工作区Dreamweavercs4的工作区中包括插入栏 编码工具栏 文档工具栏 文档窗口 标签选择器 属性面板 面板组和文件面板等 4 4创建和管理站点 建立新站点管理站点资源申请主页空间网页的上传和发布 4 5页面内容设置 插入图像插入多媒体 4 6CSS样式 CSS是CascadingStyleSheets的缩写 即层叠样式表 一般称为CSS样式表单 CSS是设置页面元素对象格式的一系列规则 利用这些格式规则可以对网页中的元素对象进行格式化控制 从而方便地设计页面外观 是网页设计必不可少的工具之一 我们通常所说的CSS 一般指CSS1 即层叠样式表单一级 是目前广泛使用的CSS标准 由国际组织W3C WorldWideWebConsortium 所控制 4 7表单操作 插入表单表单的基本操作表单基本属性的设置 4 8IIS简介 IIS是InternetInformationServer的缩写 是微软提供的Internet服务器软件IIS可以使得在Internet上发布信息变得很容易IIS5 0版有很多新增功能 有助于Web管理员创建灵活的应用程序IIS的安装IIS是Windows操作系统自带的组件IIS的架设 4 8IIS简介 IIS虚拟目录的设置虚拟目录是指Web服务器中的一些文件夹 在物理路径上不一定要求被包含在主目录下 但为了方便Web服务器管理 可以通过建立虚拟目录的方式来把这些文件夹同主目录关联起来建立虚拟目录可以通过两种方式来 在Internet信息服务中建立在资源管理器中建立 4 9精选网页实例制作 1 道德修养网页制作制作目的本例主要介绍Dreamweaver的基本应用 层的运用 网页框架制作 页面翻转等制作要点观察网页构造链接字体属性设置新建站点制作文字飞入效果 时间轴 插入图片 4 9精选网页实例制作 新建框架网页设置背景颜色和边距层的运用使用地图