网页设计电子教案ppt课件.ppt

Dreamweaver网页设计 网页基本知识概述 几个问题 什么是网页设计 1 互联网发展史a 国际互联网的起源和发展六十年代 ARPAnet网络 1983年 NSFnet 1991年6月 NSFnet成为国际互联网的主干网 b 互联网在中国的发展 第一阶段1986 6 1994 3研究实验阶段 第二阶段1994 4 1996起步阶段 第三阶段1997年到今天快速增长阶段 c 个别网站的发展历史 163网站 2 网页是各种万维网文档的总称网页技术演化静态文档 动态文档 活动文档 3 网页设计除了要求能表达我们的思想完成必须的功能 还要求美的视觉感受和很快的响应速度 为什么要学习网页设计 1 网页设计中的商业化倾向2 设计目的一 利用图像美化网页 提高点击率 二 吸引读者注意力 提高网站知名度 三 传递商品信息 诱发购买欲 怎样学好网页设计与制作技能 1 根据不同的培养目标选择不同的内容 一 知识速成型Frontpage photoshop gif制作工具等二 网页设计型Dreamweaver flash fireworks三 程序开发型Html asp jsp php 脚本语言 网络数据库四 管理员型Dreamweaver 网站建设与管理五 版面设计师绘图 图像处理 色彩 结构美学 2 学习方法掌握基本概念 理论和操作技巧研究别人的成果在实际项目中锻炼 这门课的学习安排 1 课堂操作示范2 上机实践3 考核方式 笔试 论文 课程设计 学习概述 本部分内容是设计网页的基础 本章首先介绍了一些与Internet和网页设计相关的基础知识 是读者设计网页必不可少的知识 虽然利用Dreamweaver可以不用编写一行代码就能设计出专业水准的网页 但理解和掌握HTML语言对网页设计很有帮助 对读者以后学习服务器端的编程语言也大有裨益 因为本书定位于静态网页设计 所以只对HTML语言最常用的标签元素作简单的讲解 基本知识 1Internet 国际互联网络 Internet也可以称为 因特网 网际网 等 它是一个全球性的计算机互联网络 世界各地的人们可以自由的通过网络连接来共享和使用Internet上所提供的信息资源 如 浏览网页 下载电影 收发E mail也可以和远方的朋友进行视频聊天等等 2WWW 万维网 WorldWideWeb万维网 简称WWW或3W WWW是由欧洲量子物理实验室CERN theEuropeanLaboratoryforParticlePhysics 发展出来的分布式超媒体系统 WWW中的信息资源主要由大量的Web文档组成 这些Web页采用超级文本 HyperText 组成Internet上最庞大的服务类型 WWW采用的是客户 服务器结构 其作用是响应客户端的请求 把客户端所需的资源传送给该客户 3URL 统一资源定位器 URL是UniformResourceLocator的缩写 它是Internet上的WWW服务程序用于指定信息位置的表示方法 也就是日常生活中所说的网址 基本知识 4Server 服务器 服务器即信息的提供者 它是指具有固定IP地址 并为网络用户提供服务的计算机 正是通过它 才能获得如此丰富的网络共享资源 服务器又可以分为Web服务器 E mail服务器 FTP服务器等等 当然可以只用一台计算机来同时实现Web服务器 E mail服务器 FTP服务器等服务器的功能 通常服务器的硬件配置都比较高 5Browser 浏览器 Browser就是指在使用的电脑上安装的 用来显示指定文件的程序 目前 使用最多的浏览器主要有两个 一个是美国微软公司的IE InternetExplorer 现在IE占据了Windows平台的绝对主流 另一个是网景公司的NetscapeNevigator 主要在Linux等平台下用 6FTP 文件传送协议 FTP是Protocold的缩写 FTP就是完成Internet上两台计算机之间文件传送 从远程服务器获取文件至自己的计算机 称为 下载 文件 若将文件从自己的计算机传送至远程服务器 则称之为 上载 文件 基本知识 7HTML 超文本链接标示语言 HTML是HypertextMarkupLanguage的缩写 它是一种简单 通用的全置标记语言 HTML文档是文本格式 可以用任何一种文本编辑器对它进行编辑 也可以借助专业HTML编辑器对它进行可视化处理 如 Dreamweaver在UNIX平台中 HTML文档的后缀名为 html 而在WINDOWS平台中则为 htm 网站的首页一般命名为index htm index html default htm default html等 8JavaJava是一种由Sun公司提出的 从C 发展而来的新型的程序设计语言 它可以作为一个独立的程序而不需要浏览器的支持 然而对静态网页来说Java主要用于创建JavaApplet Java小应用程序 9JavaScriptJavaScript是一种在网页中使用的脚本语言 它是由Netscape公司发明的 原来的名字叫LiveScript 注意 JavaScript的语法类似Java 两者的名字也有几分相似 但是 如要仅凭此就认为两者有某种关系 那就错了 它们只是名字和语法相似 除此之外 两者没有任何联系 基本知识 10XML 可扩展标记语言 XML是ExtensibleMarkupLanguage的缩写 中文意思是可扩展的标记语言 由于HTML语言满足不了日益复杂的WEB信息交流的需要 因此出现了XML语言 但是设计XML语言的初衷不是为了取代HTML 而是为了加强HTML语言 HTML着重在如何将文件资料显示出来 而XML主要着重在如何将文件结构化以方便资料的交换 11AjaxAjax是AsynchronousJavaScript XML的缩写 意思是基于XML的异步JavaScript 它可以构建动态的和响应更快捷的Web应用程序 该技术的关键就在于对浏览器端的JavaScript CSS XML DHTML等技术进行整合 从而实现异步通信 这样一来使得浏览器端用户有这样的感觉 Web站点看起来是即时响应的 不需要长久的等待 HTML简介 1一个简单的网页作为一名Web开发人员 是不可避免的要接触和使用HTML语言 HTML语法非常简单 它通过各种标记来表示 可以先来看一个建立简单网页的例子如 a 实例代码在记事本中输入以下代码 从开始到结束 HTML基础一个简单的网页b 保存文件然后执行 文件 保存 命令 注意要选择 保存类型 为 所有文件 在左边单击 桌面 图标 如图1 1所示 输入文件名 chapter01 1 htm 单击 保存 按钮 HTML简介 图1更改文件的保存类型 HTML简介 3 查看所创建的文件在桌面上找到它双击 此时windows默认的IE浏览器打开了它 如图1 2所示 图1 2创建一个简单的HTML网页 HTML简介 HTML元素与标签从上面的代码可以看出 网页文档的结构和格式的定义是由HTML元素来完成的 HTML就是利用各种标签来显示和排列各个对象的 一个标签是由小于号 所包围起来的字符串 开始标签内是一串允许的属性 值对 如 当然也可以没有属性 值对 如上面的代码只有 结束标签则是以一个斜杠 开头的标签 如 注意 结束标签没有属性 值对 如上例解释如下 HTML文档开始 文档头部开始 文档标题开始 HTML基础 文档标题 文档标题结束 文档头部结束 文档主体开始 一个简单的网页 文档主体内容 它是网页的最主要部分 文档主体结