网页制作————简介和超链接使用PPT课件.ppt

可编辑 第一章网页简介和超链接张新 1 课程信息 2 目标 掌握HTML文档结构和标记的使用 了解互联网 了解HTML 在HTML文档中使用超链接 在HTML文档中使用特殊字符 使用标记 3 4 网页是利用超文本标记语言HTML HyperTextMarkupLanguge 编写的 存放在Internet Intranet上的Web服务器中 供访问者使用浏览器来阅读 利用HTML语言编写出来的网页又称为超文本 即网页中包含有文本 图形 声音 图像和超链接 HyperLink 等多媒体信息 通常我们看到的网页 都是以 htm或html后缀结尾的文件 称 HTML文件 4 5 网页是在浏览因特网时看到的一个个的页面 文字 图片和动画等网站是指存放在网络服务器上的完整信息的集合体 它是由一个或多个网页 按照一定的逻辑顺序 以超链接 A 方式连接在一起 形成的一组描述完整信息的整体 首页 主页 构成网站的第一页 一般起目录 导航作用 所以又叫导航页 5 6 6 7 互联网简介 互联网是世界上最大的计算机网络互联网被称为网络的网络万维网是互联网中的一个子网WWW包含分散在世界范围内的众多Web服务器 WorldWideWeb 7 8 互联网 万维网 8 9 9 IE浏览器 URL地址 网页 HTTP协议 9 10 协议 访问WWW上的资源必须遵循超文本传输协议HyperTextTransferProtocol HTTP 地址 统一资源定位符UniformResourceLocators URL 用来标识Web上的页面和资源HTML 超文本标记语言HyperTextMarkupLanguage用于创建可以通过Web访问的文档 www 10 11 WWW地址 URL相当于一个文件名在网络范围的扩展URL的格式 例如 80 index action 11 12 流行的浏览器软件包括 InternetExplorer IE NavigatorFirefox 腾讯TT 360安全浏览器 搜狗等 12 B S工作原理 工作原理 基于B S Browser Server 浏览器 服务器 模式 13 静态网页技术 静态网页技术所谓静态是指网页的内容是事先设计好的 不会根据实际情况发生变化HTML语言 HpyerTextMarkupLanguage 超文本标记语言 文件扩展名 htm或 html制作工具MicrosoftFrontPageMacromediaDreamweaverText 14 动态网页技术 动态网页技术网页的内容不再是固定不变的 而会根据实际情况发生动态变化网页里的内容很大一部分是访问数据库得到的 用户输入的信息也将被保存到数据库中与用户的交互性大大加强分类Server端动态网页技术Client端动态网页技术 15 Server端动态网页技术Web服务器不只是简单地将用户请求的文件发送给Client端 而是先执行相应的脚本程序 Script 通常执行的结果为HTML格式 然后将执行结果返回给浏览器进行显示用户能够看到的只是HTML文件 而看不到脚本程序的源代码 16 Server端动态网页技术CGI CommonGatewayInterface 通用网关接口 脚本程序文件扩展名 cgi典型应用实例 检查用户身份 17 Server端动态网页技术在HTML代码中嵌入脚本程序代码段 Web服务器同样先将脚本程序代码段执行 转变为HTML代码后 返回给浏览器显示ASP ActiveServerPages 动态服务器主页 由Microsoft公司推出 以VisualBasic为脚本语言 文件扩展名为 aspASP net 是微软新一代动态服务器主页 以任何支持 net技术的语言为脚本 文件扩展名为aspxPHP 采用了类似于C语言的脚本语言 扩展名为 phpJSP JavaServerPages 以Java为脚本语言 扩展名为 jsp 18 Server端动态网页技术开发工具VisualInterDev CGI ASP VisualS ASP net DreamweaverUltraDev CGI ASP PHP JSP Dreamweaver CGI ASP PHP JSP 文本编辑器 UltraEdit Text 19 Client端动态网页技术JavaScriptPlug in 各类插件 媒体工具类AdobePhotoshop MacromediaFireworksMacromediaFlashJava语言 JavaApplet 可移植性强 可以在不改动源程序的前提下让应用程序运行于不同的操作系统平台上 适用于网络环境 20 21 基于web的网络应用 电子商务应用电子商务 electroniccommerce 是指通过Internet进行的各种商务活动 它覆盖与商务活动有关的所有方面电子商务是商务活动与信息技术相结合的产物 它是传统商务领域的一场巨大变革电子商务代表着一种新的产品生产 销售与企业运营管理方式电子商务的类型企业与企业 businesstobusiness B2B 企业与消费者 businesstoconsumer B2C 消费者与消费者 consumertoconsumer C2C 21 22 电子政务 electronicgovernment 通过应用信息技术 实现全部政府业务处理的电子化 达到高效 方便 透明地处理政府机关之间 政府与企业 公众的全部业务服务的目的电子政务的类型政府部门之间的电子政务 government to government G to G 政府对企业的电子政务 government to business G to B 政府对公众的电子政务 government to citizen G to C 22 23 远程教育应用通过数字化音频 视频技术 实现文字 图像和声音的同步传输 有效解决教师与学生之间的距离与时间的限制 最大限度地共享优质的师资 授课环境 实验环境等资源 实现交互式教学远程教育培训服务主要包括 教育门户网站 教育频道 远程教育培训平台提供商 远程教育培训内容商等 23 24 博客应用博客 blog 是以文章的形式在Internet上发表和信息共享博客在技术上属于网络共享空间 在形式上属于个人Internet出版 博客是人们在Internet上思想交流的一种新方式博客的主要类型以个人的记事 表达与交流为主的博客 即个人博客由共同关心某类问题的人或团体构成的博客社区 例如技术研讨 新闻时事等 24 25 播客与网络电视应用播客是基于Internet的数字广播技术 初期的播客借助一种iPodder的软件与一些便携播放器相结合播客录制网络语音广播节目 并传输到网络中共享给其他用户 用户可将广播节目下载到自己的播放器中收听 25 26 搜索引擎应用搜索引擎 searchengineer 是Internet中的一种Web服务器 它主动搜索其他Web服务器中的信息并索引 将索引内容存储在可供查询的数据库中包含Internet中各种信息的庞大数据库 它必须不断更新自己的数据库 以便反映Internet中的最新信息常用的搜索引擎Google搜索引擎 26 27 基于P2P的网络应用 P2P peer to peer 是一种客户结点之间以对等的方式 通过直接交换信息达到共享计算机资源和服务的目的P2P网络淡化服务提供者与服务使用者的界限 每个结点既是网络服务的使用者 又可以向其他客户提供资源和服务即时通信P2P软件流媒体P2P软件QQPPLivePoPoTvAntsMSNMessengerGoogleTalk 27 28 28 29 29 30 30 1 HTML语言 HTML语言的发展 80年代末在SGML的基础上产生1994年 W3C WorldWideWebConsortium 组织对HTML进行了标准化工作自1990年问世以来 已发行4个版本 HTML1 0 HTML2 0 HTML3 0 HTML4 0 HTML5 0HTML标准的网站 http www w3c org pub www 31 HyperTextMarkupLanguage 超文本标记语言 制作Web页面的基本编程语言一系列标记的集合用HTML编写的超文本文档称为HTML文档 手工直接编写 记事本 EditPlus等 存成 htm或 html文件可视化编辑器 Dreamweaver Frontpage等由Web服务器实时动态地生成 IIS Tomcat等 32 1 HTML语言 HTML标签及其属性标记 是HTML语言的基本组成部分 要用括起来 双边标记 头标与尾标 如 单边标记 只有头标 如 标记属性 对标记的状态进行描述 出现在标记的内 属性值用 或者 引起来 常见共有属性 color bgcolor background size width height align src 33 34 HTML开发 HTML标记的格式组成 HTML标记用于标记HTML文档的开始和结束 元素 标识标记 属性 描述标记 值 分配给属性的内容 标记 人 事物 属性 性别 头发 职业 值 女性 长头发 工程师 男性 黄头发 培训师 34 35 HTML作用 使用HTML标记或元素 可以 控制页面和内容的外观发布联机文档使用HTML文档中插入的链接检索联机信息创建联机表单 收集用户的信息 执行事务等等插入动画开发帮助文件 35 36 HTML语法示例 欢迎学习HTML我的第一个HTML文档 运行结果 36 37 标记 欢迎使用HTML这会是一种很有趣的体验另一个段落元素 37 38 补充 关于颜色 颜色值是一个关键字或一个RGB格式的数字 aqua black blue fuchsia gray green lime maroon navy olive purple red silver teal white yellow 38 色彩的概述 色彩具有五颜六色 千变万化的特点 平时我们看到的白光 经过分析在色带上可以看到 事实上包括了7种颜色 色彩有冷 暖之分 其巧妙运用会达到意想不到的效果 红色代表 热情 活泼 热闹 温暖 幸福橙色代表 光明 华丽 兴奋 快乐 黄色代表 明朗 愉快 高贵 希望绿色代表 平静 和平 柔和 安静 青春蓝色代表 永恒 沉静 理智 诚实紫色代表 高贵 魅力 自傲白色代表 纯洁 朴实 神圣灰色代表 消极 谦虚 平凡 中庸 寂寞黑色代表 坚实 严肃 粗莽 39 40 在HTML中对于颜色的定义可以用6位十六进制数 电脑屏幕的色彩是由rgb 红 绿 蓝 三种色光所合成的 通过调整这三个基色就可以调配出其它的颜色 每2位数代表一种颜色的浓度 三种颜色的顺序为红 绿 蓝 00代表颜色浓度最小 FF代表颜色浓度最大 000000代表纯黑 FFFFFF代表纯白 40 41 d 图中所示是部分颜色的RGB代码 例 为页面设置背景色 41 42 HTML文档的结构 HTML部分文档头部分正文部分 欢迎进入HTML世界这会是一种很有趣的体验 基本结构 42 43 段落标记 欢迎使用HTML这会是一种很有趣的体验另一个段落元素 43 44 换行标记 欢迎使用HTML这会是一种很有趣的体验另一个段落元素 44 45 使用对齐属性 学习HTML这会是一种很有趣的体验 右对齐 45 46 使用META标记2 1 提供关于网页的信息 对网页的描述 根据关键词生成响应 获得文档的作者名称 2 应用 关键词生成响应 Expires Mon 15Sep200314 25 27GMT 设置网页的到期值 响应 46 47 3 自动刷新页面 4 使用网页所使用的编码 应用 如网上实时新闻报道 应用 如在不同浏览器上正确显示中文 使用META标记2 2 47 48 在HTML文档中使用特殊字符 Userid用户名 口令 200189 号 20189 号 风驰电掣 quot 号 xx 120 与符号 CopyRight版权所有 版权符号 APTECH 注册商标 48 49 1 职位 关于可申请的职位 2 培训资源 本学院美术学位的培训资源请单击此处查看视频 3 联盟 我们有许多联盟 超链接简介2 1 主页 落锚点 职位 培训资源 请单击此处查看视频 联盟 49 50 超链接简介2 2 Web站点1 Web站点2 50 51 创建超链接 要创建超链接 必须指定两个部分 要链接的文件的完整地址或URL 热点 热点可以是一行文字甚至一个图像 C internet index htmlservice index html 绝对URL 文件的完整地址 相对URL 51 52 超链接 锚记A HypertextProtocol是协议类型http 超文本传输协议gopher 搜索文件telnet 打开telnet会话ftp 文件传输协议mailto 发送电子邮件Host domain是服务器的Internet地址Port是目标服务器的端口号Hypertext是用户必须单击才能激活链接的文本或图像eg 文档2互联网互联网互联网 语法为 52 53 链接到其他文档 码头使用链接本页的所有内容都讲述关于如何创建到文档的链接单击此处查看文档2 船文档2这是文档2 单击文档1中的超链接后将显示本页 返回 53 54 链接到同一文档的各个部分 使用链接互联网HTML简介多样化和统一性互联网互联网是网络的网络 也就是说 计算机网络可以跨越国家甚至全球的范围连接到其他网络 世界上所有的计算机都可以通过TCP IP传输协议绑定在一起 HTML简介超文本标记语言是Web用来创建和识别文档的标准语言 虽然它不是标准通用标记语言 SGML 的子集 但与它有着某种程度上的关联 SGML是一种文档格式语言表示方法 多样性和统一性万事万物都离不开多样性和统一性这样一条基本准则 也就是说 所有的事物都可以融合成一个整体 同时 又保持自己独特的与众不同的一面 站点的独特性恰恰来源于它的一致性 颜色 字体 分栏布局以及其他设计元素应在站点的每个部分都保持一致 单击 54 55 链接到另一文档中某个特定位置 主文档互联网HTML简介多样性和统一性 单击 55 56 链接到另一文档中某个特定位置 副文档互联网互联网是网络的网络 也就是