网页制作――――简介和超链接使用

网页程序设计基础第一章网页简介和超链接张新课程信息目标掌握HTML文档结构和标记的使用了解互联网了解HTML在HTML文档中使用超链接在HTML文档中使用特殊字符使用META标记4网页是利用超文本标记语言HTML(HyperTextMarkupLanguge)编写的，存放在Internet／Intranet上的Web服务器中，供访问者使用浏览器来阅读。利用HTML语言编写出来的网页又称为超文本，即网页中包含有文本、图形、声音、图像和超链接(HyperLink)等多媒体信息。通常我们看到的网页，都是以.htm或html后缀结尾的文件，称.HTML文件。5网页是在浏览因特网时看到的一个个的页面；•文字、图片和动画等网站是指存放在网络服务器上的完整信息的集合体：它是由一个或多个网页，按照一定的逻辑顺序，以超链接（A）方式连接在一起，形成的一组描述完整信息的整体。首页(主页):构成网站的第一页，一般起目录、导航作用，所以又叫导航页。6主页个人简历我的相册作品展示家庭相册心情随笔个人相册网站作品平面作品涂鸦作品7互联网简介•互联网是世界上最大的计算机网络•互联网被称为网络的网络•万维网是互联网中的一个子网•服务器（WorldWideWeb）8互联网万维网网络99协议：访问（HTTP）地址：统一资源定位符UniformResourceLocators(URL)用来标识Web上的页面和资源HTML:超文本标记语言HyperTextMarkupLanguage用于创建可以通过Web访问的文档地址URL相当于一个文件名在网络范围的扩展URL的格式：URL的访问方式://主机:端口/路径例如：——文件传送协议FTPhttp——超文本传送协议HTTP存放资源的主机在因特网中的域名可省略，默认端口80，文件指向主页12流行的浏览器软件包括：InternetExplorer（IE）NavigatorFirefox、腾讯TT、360安全浏览器、搜狗等B/S工作原理工作原理：基于B/S(Browser/Server,浏览器/服务器)模式Server因特网Http请求Http响应静态网页技术静态网页技术所谓静态是指网页的内容是事先设计好的，不会根据实际情况发生变化HTML语言（HpyerTextMarkupLanguage，超文本标记语言）文件扩展名：.htm或.html制作工具MicrosoftFrontPageMacromediaDreamweaverText动态网页技术动态网页技术网页的内容不再是固定不变的，而会根据实际情况发生动态变化网页里的内容很大一部分是访问数据库得到的，用户输入的信息也将被保存到数据库中与用户的交互性大大加强分类•Server端动态网页技术•Client端动态网页技术Server端动态网页技术Web服务器不只是简单地将用户请求的文件发送给Client端，而是先执行相应的脚本程序（Script），通常执行的结果为HTML格式，然后将执行结果返回给浏览器进行显示用户能够看到的只是HTML文件，而看不到脚本程序的源代码Server端动态网页技术CGI（CommonGatewayInterface，通用网关接口）脚本程序文件扩展名：.cgi典型应用实例：检查用户身份用户浏览器DBServerCGIscript12345678Server端动态网页技术在HTML代码中嵌入脚本程序代码段，Web服务器同样先将脚本程序代码段执行，转变为HTML代码后，返回给浏览器显示•ASP（ActiveServerPages，动态服务器主页），由Microsoft公司推出，以VisualBasic为脚本语言，文件扩展名为.asp•ASP.net，是微软新一代动态服务器主页，以任何支持.net技术的语言为脚本，文件扩展名为aspx•PHP，采用了类似于C语言的脚本语言，扩展名为.php•JSP（JavaServerPages），以Java为脚本语言，扩展名为.jspServer端动态网页技术开发工具VisualInterDev（CGI/ASP）VisualStudio.net（ASP.net）DreamweaverUltraDev（CGI/ASP/PHP/JSP）Dreamweaver（CGI/ASP/PHP/JSP）文本编辑器：UltraEdit,TextClient端动态网页技术JavaScriptPlug-in（各类插件）媒体工具类AdobePhotoshop/MacromediaFireworksMacromediaFlashJava语言（JavaApplet）可移植性强，可以在不改动源程序的前提下让应用程序运行于不同的操作系统平台上，适用于网络环境21基于web的网络应用电子商务应用电子商务(electroniccommerce)是指通过Internet进行的各种商务活动，它覆盖与商务活动有关的所有方面电子商务是商务活动与信息技术相结合的产物，它是传统商务领域的一场巨大变革电子商务代表着一种新的产品生产、销售与企业运营管理方式电子商务的类型企业与企业(businesstobusiness，B2B)企业与消费者(businesstoconsumer，B2C)消费者与消费者(consumertoconsumer，C2C)22电子政务(electronicgovernment)通过应用信息技术，实现全部政府业务处理的电子化，达到高效、方便、透明地处理政府机关之间，政府与企业、公众的全部业务服务的目的电子政务的类型政府部门之间的电子政务(government-to-government，G-to-G)政府对企业的电子政务(government-to-business，G-to-B)政府对公众的电子政务(government-to-citizen，G-to-C)23远程教育应用通过数字化音频、视频技术，实现文字、图像和声音的同步传输，有效解决教师与学生之间的距离与时间的限制，最大限度地共享优质的师资、授课环境、实验环境等资源，实现交互式教学远程教育培训服务主要包括：•教育门户网站、教育频道、远程教育培训平台提供商、远程教育培训内容商等24博客应用博客(blog)是以文章的形式在Internet上发表和信息共享博客在技术上属于网络共享空间，在形式上属于个人Internet出版，博客是人们在Internet上思想交流的一种新方式博客的主要类型以个人的记事、表达与交流为主的博客，即个人博客由共同关心某类问题的人或团体构成的博客社区，例如技术研讨、新闻时事等25播客与网络电视应用播客是基于Internet的数字广播技术。初期的播客借助一种iPodder的软件与一些便携播放器相结合播客录制网络语音广播节目，并传输到网络中共享给其他用户，用户可将广播节目下载到自己的播放器中收听26搜索引擎应用搜索引擎(searchengineer)是Internet中的一种Web服务器，它主动搜索其他Web服务器中的信息并索引，将索引内容存储在可供查询的数据库中•包含Internet中各种信息的庞大数据库，它必须不断更新自己的数据库，以便反映Internet中的最新信息常用的搜索引擎•Google搜索引擎：•百度搜索引擎：搜索关键字、高级搜索27基于P2P的网络应用P2P(peer-to-peer)是一种客户结点之间以对等的方式，通过直接交换信息达到共享计算机资源和服务的目的P2P网络淡化服务提供者与服务使用者的界限，每个结点既是网络服务的使用者，又可以向其他客户提供资源和服务即时通信P2P软件流媒体P2P软件QQPPLivePoPoTvAntsMSNMessengerGoogleTalk2829301.HTML语言HTML语言的发展：80年代末在SGML的基础上产生1994年，W3C（WorldWideWebConsortium）组织对HTML进行了标准化工作自1990年问世以来，已发行4个版本：HTML1.0、HTML2.0、HTML3.0、HTML4.0、HTML5.0HTML标准的网站：●HyperTextMarkupLanguage—超文本标记语言–制作Web页面的基本编程语言–一系列标记的集合–用HTML编写的超文本文档称为HTML文档。●HTML文档的编写方法–手工直接编写：记事本、EditPlus等，存成.htm或.html文件–可视化编辑器：Dreamweaver、Frontpage等–由Web服务器实时动态地生成：IIS、Tomcat等1.HTML语言HTML标签及其属性标记:是HTML语言的基本组成部分，要用括起来。●双边标记：头标与尾标。如：title…/titlehtml…/html。●单边标记：只有头标。如：hr标记属性：对标记的状态进行描述，出现在标记的内，属性值用“”或者’’引起来。常见共有属性：color、bgcolor、background、size、width、height、align、src。34HTML开发HTML标记的格式组成：HTML.../HTML•HTML标记用于标记HTML文档的开始和结束•元素-标识标记•属性-描述标记•值-分配给属性的内容ELEMENTATTRIBUTE=value标记:人(事物)属性:性别、头发、职业……值:女性、长头发、工程师……男性、黄头发、培训师……35HTML作用•使用HTML标记或元素，可以：–控制页面和内容的外观–发布联机文档–使用HTML文档中插入的链接检索联机信息–创建联机表单，收集用户的信息、执行事务等等–插入动画–开发帮助文件36HTML语法示例：HTMLHEADTITLE欢迎学习HTML/TITLE/HEADBODYH3我的第一个HTML文档/H3/BODY/HTML运行结果37标记HTMLHEADTITLE欢迎使用HTML/TITLE/HEADBODYBGCOLOR=lavenderP这会是一种很有趣的体验P另一个段落元素/BODY/HTML运行结果38补充：关于颜色颜色值是一个关键字或一个RGB格式的数字。aqua，black，blue，fuchsia,gray，green，lime，maroon，navy，olive，purple，red，silver，teal，white，yellow色彩的概述色彩具有五颜六色，千变万化的特点。平时我们看到的白光，经过分析在色带上可以看到，事实上包括了7种颜色。色彩有冷、暖之分，其巧妙运用会达到意想不到的效果。红色代表：热情、活泼、热闹、温暖、幸福橙色代表：光明、华丽、兴奋、快乐。黄色代表：明朗、愉快、高贵、希望绿色代表：平静、和平、柔和、安静、青春蓝色代表：永恒、沉静、理智、诚实紫色代表：高贵、魅力、自傲白色代表：纯洁、朴实、神圣灰色代表：消极、谦虚、平凡、中庸、寂寞黑色代表：坚实、严肃、粗莽40在HTML中对于颜色的定义可以用6位十六进制数。电脑屏幕的色彩是由rgb（红、绿、蓝）三种色光所合成的，通过调整这三个基色就可以调配出其它的颜色。–每2位数代表一种颜色的浓度，三种颜色的顺序为红、绿、蓝，00代表颜色浓度最小，FF代表颜色浓度最大。#000000代表