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