《网页设计实用教程》第01章.ppt

21世纪计算机系列教程,网页设计实用教程 电子教案,退出,信息技术学院柏晓辉,第1章 网页设计快速入门,学习目的：网页设计的概念主板网页设计软件网页制作过程建立网站的过程HTML初步本章概述：我们经常浏览网页，可是网页究竟是什么？它是由什么做成的？如何自己动手制作网页呢？本讲先通过一个实例使读者初步了解网页及其制作的有关概念，然后详细介绍网页设计、网站建设的入门知识，最后还将通过实例简要介绍HTML的基础知识。,图1-1 在“记事本”中输入代码,图1-2 另存为html文件,图1-3 在IE中看到的页面效果,1.1在Internet上安个家 网页是什么网页是扩展名为htm或html的文本文件。HTML，即超文本标志（标记）语言。网页就是由它做成的。一个十分简单的网页设计实例，最初步感性认识。1.用记事本写一个最简单的个人主页,2.上传网页CuteFTP,图1-4“站点管理器”窗口,图1-5 填写站点信息,图1-6 上传完成的效果,3.浏览网页,图1-7 修改后的首页效果,主菜单,取消,1-3-1 保存网页中的图片（1）将鼠标移动图片上，单击鼠标右键；（2）在弹出的快捷式菜单中点击【图片另存为】菜单命令；（3）在弹出的“保存图片“对话框中选择合适的图片保存路径，并将图片命名为自己容易查询的名字，最后单击【保存】按钮。1-3-2 保存正在浏览的网页(1)依次单击IE浏览器菜单栏中的【文件】【另存为】菜单命令，弹出“保存网页(2)单击【保存】按钮即可将这个页面连同其中的图片完整地保存下来。,将网页中的信息复制到文档,1-2-1 有关网页设计的概念,1.网页与网站 网页：本质上就是html文件网站：网页的集合，若干个html文件通过“超链接”连接在一起。2.URL统一资源定位器URL(Uniform Resource Locator)，描述了Web浏览器请求和显示某个特定资源所需的全部信息。http:/:80/news.html传输协议 远程主机名 端口号 路径和文件名,3.FTP文件传输协议,文件传输协议（File Transfer Protocol，FTP）遵循的是TCP/IP协议族允许用户将文件从FTP服务器传输到客户机的过程称为下载；将文件从客户机传输到FTP服务器的过程称为上载将提供FTP服务的计算机称为FTP服务器，用户的本地计算机称为客户机。用户在访问FTP服务器之前必须进行登录，登录时要求用户给出其在FTP服务器上的合法帐号和口令。只有成功登录的用户才能访问该FTP服务器，并对授权的文件进行查阅和传输。,匿名FTP服务,匿名FTP服务器的实质是：提供服务的机构在它的FTP服务器上建立一个公开帐户(一般为Anonymous)，并赋予该帐户访问公共目录的权限，以便提供免费的服务FTP客户端程序三种类型：传统的FTP命令行、浏览器与FTP下载工具。FTP下载工具支持断点续传功能。FTP下载工具种类：CuteFTP、AceFTP、BulletFTP、WS-FTPHTTP下载工具Netants、GetRight、NetVampire、GoZilla Flashget（网际快车）,4.HTML Hyper Text Markup Languge 超文本标记语言一系列的标记符号或希望显示在文件中的代码告诉浏览器如何显示文字、图形、影像、声音。是构成网页的主要工具。5.HTML编辑器用于创建和修改HTML文档的软件。例如：记事本、Dreamweaver,6.服务器在网络上提供共享服务的设备设施。7.动态 HTMLDHTML用来创造和显示交互性、动态的网页的新技术8.HTTP（Hyper Text Transfer Protocol）超文本文件在Internet上传输所遵循的协议，,9.常用的Web图像格式PNGGIFBMPTIFFJPEGTGA,1-2-2 网页设计软件,1.FrontPage Microsoft 类office在处理动态网页方面功能不足2.HotDog美Sausage 简单易用但不是所见即所得3.网页制作“三剑客”MacromediaDreamweaver可视动态网页制作和网站管理Flash矢量动画，体积小，便下载边播放，加入声音Fireworks网络图像处理，各种图像，PhotoShop的层,4.FTP上传工具 CuteFTPUnloadNowWS-FTP5.其他技术JavaScipt与VbScipt（Visual Basic 描述语言）实现网页特效CGI（Common Gate Interface,通用网关接口）动态响应用户的操作ASP（Active Server Pages）创建、动态交互的Web服务器应用程序IDC（Internet Database Connector,网络数据库接口）发布并与用户交互使用网络数据库,5.其他技术ADO(ActiveX Data Object)结合ASP操作网络数据库PHP(HyperText Preprocessor)编写跨平台的Web CGI程序的内嵌式语言XML(eXtensible Markup Languge 可扩展标记语言)描述结构化数据，直接处理Web数据 VRML(Virtual Reality Modeling Languge 虚拟现实模型语言)网上虚拟现实语言，实现实物虚拟化WML 类似HTML，信息家电上网浏览语言,1.制作网页的基本过程简单的网页制作比较直观；复杂的网页却需要策划。策划可以分为以下几个阶段：分析阶段：搜集研究用户需求。设计阶段：编写一个脚本，制定页面的结构，确定链接和安排组织结构，收集素材。实现阶段：编写HTML程序，制作各种多媒体文件，组成页面和安排超级链接。测试阶段：用浏览器测试HTML文档的效果和正确性，用户的可接受性。维护阶段：网页要经常变化，要对制作好的HTML文档进行定期维护、更新、修改。2.网页制作的组织 页间导航方式通常有以下4种结构：层次结构：主页提供内容的整个概况，除了上下层之间建立链接以外，没有其他链接，这是一种类似菜单的结构。许多在线帮助系统都采用层次结构，读者很容易进行导航。线形结构：这是一种顺序结构，像书本一样，主页是标题、引言和目录。以后只有上下页之间有链接，一般还在每页上有一个“HOME”链接可以返回到第一页。这种结构适合于培训、小说等。读者无法导航。线形结构和层次结构的组合：比较常用的方式是线形结构和层次结构的组合。网状结构：页与页之间的链接是“自由的”，很少有总体规划。读者很容易被吸引，但也会“迷失方向”。对网页制作者来说，也不容易维护：例如要删除一页，则要同时删除链接到该页的许多链接。,1.2.3网页制作过程,1-2-4 企业建立网站的过程,企业建立网站应经历以下过程：明确建立网站的目标和用户需求总体设计方案主题鲜明网站的版式设计色彩在网页设计中的作用网页形式与内容相统一三维空间的构成和虚拟现实多媒体功能的利用结构清晰并且便于使用导向清晰内容更新与沟通,图1-9 企业网站建设流程,1.2.4 企业建立网站的过程,1-2-5 网页设计与HTML,1.解剖网页 用记事本,1-2-5 网页设计与HTML,1.解剖网页 用FrontPage,2.什么是HTML,Hyper Text Mark Languge 超文本标记语言是所有Internet站点共同的语言，网页一HTML格式的文件为基础，加上一些其他语言工具（例如：JavaScript、VBScript、JavaApplet等）构成的。这些文件除了一些基本文字还包括一些标签（Tag）,由“”符号以及一个字符串组成。而WWW浏览器功能是对这些标签进行解释，显示出文字、图像、动画，播放出声音。,网页标题这里是HTML文件的正文例如上面程序中网页标题 表明,3.为什么要学习HTML图形编辑工具自身的约束，将产生大量的垃圾代码。,4.HTML基本概念,标记这是正确的代码,标记不能交叉嵌套这是不正确的代码特殊字符方括号和英文双引号语法符合标记功能的属性参数的规定例如：段落标记(开始）段落结束表格开始表格结束表格行元素开始表格行元素结束表格一行中单元格的元素开始表格一行中单元格的元素结束Align表示对齐方式align=”left”|”center”|”right”,1.3 本章小结,网页制作并不复杂，用“记事本”就能制作出网页。但网页设计涉及的概念却很多，网页制作工具也不断呈现，各自的功能特点也不尽相同，就大多数人而言，使用所见即所得型的制作软件设计制作网页是首选。在此基础上初步掌握一些HTML最基本的规则，以提高网页的编写水平，提高网页的兼容性。本章重点介绍了网页设计的一些基本概念和基本常识，通过本章的学习，读者可以消除对网页制作的神秘感，为实际动手设计制作网页打下基础。,1.4 习题与操作题,习题（1）试解释以下术语：网页、网站、UR L、FTP、HTML、HTML编辑器、服务器、动态 HTM、HTTP。（2）常用的Web图像格式有哪些？它们各有何特点？（3）最简单的网页制作软件有哪些？（4）FrontPage有何特点？（5）为什么说网页制作“三剑客”是制作网页的最佳拍档？（6）常用的FTP上传工具有哪些？（7）简述制作网页的基本过程。（8）企业网站和一般个人主页有何区别？如何建设企业网站？（9）什么是HTML？为什么要学习HTML？操作题（1）试打开一个网页，然后分别用“记事本”和“FrontPage”来编辑当前网页。（2）试使用记事本制作一个简单的网页，然后在IE中浏览。,