网页设计与制作第1章DreamweaverMX简介

1、网页设计与制作 要求先修课程：具备INTENET的基本知识讲课进度：上课时间共13周，总共16章， 每章3课时左右（6月21日停课）授课要求：原理清楚、能够应用、注重实践； 课堂保持安静、可以自由支配内容； 按时按量完成作业； 考试严格、公正(笔试占8，平时占20）。 前言WWW的出现，使得Internet产生了革命性的发展，并且已经进入了新闻、广告、电子商务、信息服务等各行各业，而主页则是WWW服务中非常重要的角色。主页技术不断地发展，最初采用文本编辑器逐行编写HTML代码生成，由于HTML语言的专业性较强，在当时只有专业技术人员才能实现，而现在随着可视化理念与技术的成熟，所见即所得的网页制

2、作软件不断地出现。前言本学期的重点就是以dreamweaver mx2004为主的网页制作工具，同时以图像处理软件Firework和矢量动画软件flash为辅助工具，目标是掌握主页制作各方面的知识。主要的设计软件：Microsoft 公司的 frontpageMacromedia 公司的 DreamweaverAdobe 公司的 Golive其中Macromedia 公司在图形图像及多媒体开发领域是世界顶级的公司之一，世界第二大应用软件开发商，其开发的dreamweaver 以其专业的水准，简洁易用的界面和易学易用的特点而成为主流。第1章 Dreamweaver MX 2004学习目标：通过本

3、章学习，要求掌握有关网页的基本知识，熟悉Dreamweaver MX 2004的界面组成和工具栏、面板组，学会创建站点，管理站点，为以后网页制作铺平道路。 第1章 Dreamweaver MX 20041.1网页的基础知识1.2 Macromedia Studio MX 2004介绍 1.3 Dreamweaver MX 2004界面介绍 1.4 定义站点 1.5 【文件】面板 1.6 创建文件夹 1.1网页的基础知识1.1 .1网页的概念1.1.2 URL 1.1.3 FTP 1.1.4 HTML 1.1.5 网页的分类1.1 .1网页的概念网页是 Web中的基本文档，是用HTML语言或其他

4、语言(如VBScript、JavaScript、ASP、PHP、JSP)编写的，通常以htm或html作为文件的扩展名。通常所说的网站是由一个或多个网页文档组成的，进入网站时首先打开的页面称为网站的首页，也称为主页。多个网页通过超级链接的形式关联在一起。网页中包含文字、图片、声音、动画、表格、影像、表单以及链接等元素，通过对这些元素的有机组合，就构成了包含各种信息的网页。1.1.2 URL URL（Uniform Resource Locator）即统一资源定位器。它描述了Web浏览器请求和显示某个特定资源所需要的全部信息，包括使用的传输协议，提供Web服务的主机名，HTML文档在远程主机上的

5、路径和文件名，以及客户与远程主机连接时使用的端口号，例如：http:/book/index.htm，其中http为传输协议；wwwxyjxcn为使用的远程主机名；book/index.htm 为HTML文档的路径和文件名。URL提供了互联网上资源的准确位置。1.1.3 FTP FTP（File Transfer Protocol）是文件传输协议的简称。FTP使文件和文件夹能够在Internet上公开传输。Internet是一个非常复杂的计算机环境，有PC、工作站、MAC、大型机，连接在Internet上的计算机上千万台，而这些计算机可能运行不同的操作系统，有运行Unix的服务器，也有运行Win

6、dows的PC机和运行MacOS的苹果机等等(微软推出的最新操作系统windows vista)，为了解决各种操作系统之间的文件传输问题，需要建立一个统一的文件传输协议，这就是现在的FTP协议。基于不同的操作系统有不同的FTP应用程序，而所有这些应用程序都遵守FTP协议，这样用户就可以把自己的文件传送给别人，或从其它的用户环境中获得文件。1.1.4 HTML HTML（Hyper Text Markup Language，超文本标识语言）是用于创建Web文档的编程语言。通过它可以往普通文档中加入一些特殊的标签（这些标签具有一定的语法结构），使生成的文档能包含文字、图像、声音、动画等，还能包含其

7、他文档，从而成为超文本文档(Hyper Text Document)；实际上超文本文档中本身是不含有上述多媒体数据的，而是仅含有指向这些多媒体数据的指针，这种指针一般称为链接(Link)。通过超文本文档方式，用户仅仅使用鼠标点击操作，就可以得到所要的文档，而不管该文档是何种类型(普通文档、图像或声音等)，也不管它身居何处(本机上、局域网上或未知的某国外机器上)。1.1.5 网页的分类1静态网页 所谓静态网页，就是该网页文件里没有程序代码，只有HTML标记，这种网页文件的后缀为.htm或.html。静态网页一经制成，内容就不会再变化，不管何时何人访问，显示的都是一样的内容，如果要修改有关内容，就

8、必须修改源代码，然后重新上传到服务器上。静态网页中可能包含动画。1.1.5 网页的分类1静态网页静态网页的工作原理如下： 当你在浏览器里输入一个网址回车后，就向服务器端提出了一个浏览网页的请求。服务器端接到请求后，就会找到你要浏览的静态网页文件，然后发送到你的浏览器上显示出来。1.1.5 网页的分类2动态网页 所谓动态网页，就是该网页文件不仅含有HTML标记，而且含有程序代码，这种网页的后缀一般根据不同的程序设计语言来定，如ASP文件的后缀为.asp。JSP文件的后缀为.jsp。动态网页能够根据不同的时间、不同的来访者而显示不同的内容，还可以根据用户的即时操作和即时请求，动态网页的内容发生相应

9、的变化。如常见的BBS、留言板、聊天室等就是用动态网页来实现的。 1.1.5 网页的分类2动态网页 动态网页的工作原理与静态网页有很大的不同。当你在浏览器里输入一个动态网页网址回车后，就向服务器端提出了一个浏览网页的请求，服务器端接到请求后，首先会找到你要浏览的动态网页文件，然后就执行网页文件中的程序代码，将含有程序代码的动态网页转化为标准的静态网页，最后将静态网页发送给你，其原理如图1-2所示。 返回1.2 Macromedia Studio MX 2004介绍 1.2.1 Dreamweaver MX 2004 1.2.2 Fireworks MX 2004 1.2.3 Flash MX

10、2004 返回1.3 Dreamweaver MX 2004界面介绍1.3.1 Dreamweaver MX 2004文档窗口 1.3.2 窗口项目介绍 初次运行Dreamweaver，我们建立一个HTML文档，就会看到如下界面：它主要包括标题栏、菜单栏、工具栏、文档窗口、状态栏和浮动面板组成。如图所示。返回1.4 定义站点 我们建立网站的基本方法是：先在本地计算机上创建页面，然后上传服务器。网站的文件很多，为了对文件进行管理、维护，我们把所有的文件都放在一个目录下，这个目录就是我们所说的站点。建立网站之前，要先在本地计算机上建立站点，规划好站点下的各级子目录，然后才开始创建网页。主页的设计软

11、件的启动 界面介绍 基本操作内容的编排与页面布局 基本操作创建新页面打开文件修改页面保存文件、创建站点注意：1. 名称尽量用英文或拼音，很多服务器在上传文件时会更改这些符号（特殊符号或汉字），从而可能导致链接失效。2. 保存的时候注意修改文件路径内容的编排与布局主页的内容一般可分为三类：一类是有关这个主页或站点的内容，比如说主页的标题、主页标志、主页统计及管理信息等；一类是这个主页的主体内容，这部分内容是整个主页的核心，也是这个主页要展示给访问者的信息索引；最后一类是与这个主页本身没什么关系，通常属于那种赞助、合作性质的内容，比如说广告、友情链接等。不同的内容类型往往决定了在主页中不同的摆放位

12、置，重要的内容放在显眼的位置，如主页的左上角、主页的中央等。1.页面的尺寸因为主页是在浏览器中显示的，页面设置会直接影响浏览的效果，所以必须了解屏幕的分辨率和页面默认的显示尺寸。一般来说常用的有800*600和1024*768（我们经常在网页上可以看到“建议使用IE浏览器，分辨率800*600.”），而分辨率的数字就是指屏幕的高度和宽度分别有多少个象素（点）。不同的分辨率页面的显示尺寸分别是780*490 和1007*6382.页面元素：可以看成对象，可以是文字、图像、动画、声音、视频、JAVA Applet、表单和常用对象（如flash对象、ActiveX控件）3.主页布局的基本方法：框架布

13、局、表格布局、层布局内容的编排与布局分析一个主页（不是分析内容而是分析主页的实现） 页面的整体分析，包括框架结构、色彩搭配，以及页面布局与内容编排 框架结构，即将如何分配整个版块（一般主要有标题、导航条、内容区、落款区）细节分析（页面上的闪光点） 内容的编排与布局实例参考返回1.5 【文件】面板 【文件】面板有两个选项卡，一个是【文件】，另一个是【资源】。【文件】选项卡用于对网站文件夹和文件进行管理，通过【资源】选项卡可以查看网站所用到的文件、图像、颜色、链接、动画、模板、库等资源信息。【文件】面板有两种状态，一种是面板状态，另一种扩展状态。如图1-21所示：可通过按钮进行切换 1.6 创建文件夹 网站内每个分支的文件被统一存放在单独的文件夹内，根椐栏目的划分，又可以细分到子文件夹。图像文件存放在特定的文件夹里，数据库文件存放在特定的文件夹内。合理地使用文件夹来管理网站内的文件，可使网站建设有条不紊，易于维护。创建文件夹的方法有很多种，下面我们通过【文件】面板来创建站点根目录下的子文件夹 。返回上机操作新建一张页面，修改标题为班级名称。在