Dreamweaver课件

,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,网页制作实例教程（第,3,版）,网页制作实例教程,(,第,3,版,),Dreamweaver,基础,（第,1,章）,1,，网页设计基础知识,2,，,认识,Dreamweaver CS4,操作界面,3,，创建站点,4,，用可视化方法制作一个网页,5,，用,HTML,代码制作一个网页,本章要点：,1.1.1,网页,网页从字面意思上来说就是网络上的页面，是通过浏览器显示信息的文档。一般情况下，网页由文本、表格、图像、超链接、表单、,Flash,动画等内容组成。,网页分为静态网页和动态网页，它们之间的主要区别在于能否与服务器进行交互。,静态网页是一个用,HTML,编写的文件，扩展名是,html,或,htm,。,动态网页是能与服务器进行交互的网页，文件扩展名主要有三种：,asp,、,jsp,、,php,。,1.1,网页设计基础知识,1.1.2,网站,网站又被称为站点，是由主页和相关网页构成的超文本信息的集合，通常是一个文件夹，存放网站的所有资源和页面文件 。,站点分为本地站点和远端站点，存贮在本地机上的站点文件夹称为,本地站点,，存贮在因特网服务器上的站点文件夹称为,远端站点,。,网站中一般包含一个主页和若干个子页，访问网站时默认打开的第一个网页称为,主页,，主页是站点的出发点和汇总点。,1.1.3,因特网,因特网（,Internet,）是全球最大的、开放的、由众多网络互联而成的计算机网络。,1.1,网页设计基础知识,1.1.5 HTTP,协议,TCP/IP,称为,“,传输控制,/,网络协议,”,，是因特网所采用的标准协议。,1.1.6 WWW,WWW,称为,“,万维网,”,，由遍布全世界的,Web,服务器组成，是一个庞大的信息网，每一个存贮在服务器的网站都是,WWW,中的一个节点。,1.1.4 TCP/IP,协议,HTTP,协议称为,“,超文本传输协议,”,，是在因特网上传输超文本的协议。,1.1.7 URL,URL,称为,“,统一资源定位器,”,，是网上资源的存放地址。,1.1,网页设计基础知识,1.1.8 FTP,协议,FTP,称为,“,文件传输协议,”,，用来进行文件的上传和下载。,1.1.10 IP,地址,因特网中的每一台计算机有惟一地址，称为,IP,地址。,IP,地址由,4,组数字组成，数字之间用圆点隔开，每一组数字都在,0,到,255,之间。,如：,“,202,102,96,44,”,就是一个主机服务器的,IP,地址。,1.1.9,服务器,服务器是提供网络服务的计算机，,Web,服务器主要用于存贮,Web,站点和页面。本地机与服务器之间通过各种通信线路连接，以实现相互通信。,1.1,网页设计基础知识,1.1.11,域名,域名是主机地址的文字名称，域名是惟一的，一个域名对应一个,IP,地址。,域名由,26,个英文字母、,10,个阿拉伯数字、减号和下划线组成，用圆点分隔成几节，字母不区分大小写。域名分级别，右边为最高级（也称为顶级），从右向左依次降低。,1.1,网页设计基础知识,1.1.12,网站设计,网站设计是指用,HTML,把多种媒体信息有效地组织起来，使浏览者高效、便捷地获取这些信息。,网站设计主要包括两个方面：,（,1,）信息的处理和组织，内容包括：文字排版、图片制作、平面设计、动画制作、影像制作等；,（,2,）网站的延伸设计，内容包括：网站主题定位、浏览群定位、智能交互、制作策划、形象包装、宣传营销等。,1.1,网页设计基础知识,1.2.1 DreamweaverCS4,的特点,（,1,）可视化编辑界面 （,4,）跨平台、跨浏览器,（,2,）强大的站点管理 （,5,）具有集成性,（,3,）灵活编写网页 （,6,）媒体支持能力,1.2 Dreamweaver CS4,简介,Dreamweaver,CS4,由,Adobe,公司出品，是当今最流行的、功能强大的专业网页制作软件。,1.2 Dreamweaver CS4,简介,1.2.2 DreamweaverCS4,的起始页,1.2 Dreamweaver CS4,简介,1.2.3 DreamweaverCS4,的工作窗口,1.2 Dreamweaver CS4,简介,1.2.4 DreamweaverCS4,的菜单栏,1.2.5,“,文件,”,工具栏,1.2 Dreamweaver CS4,简介,1.2.7,状态栏,1.2.6,“,插入,”,面板,1.2 Dreamweaver CS4,简介,1.2.8,属性面板,不同的网页元素，属性面板的内容也会不同。,1.2 Dreamweaver CS4,简介,1.2.9,面板组,1.3,设置页面属性,1.3.1,页面属性对话框,“,页面属性,”,对话框左边是,“,分类,”,列表，显示,6,个分类项：,外观（,CSS,）、外观（,HTML,）、链接（,CSS,）、,标题（,CSS,）、标题,/,编码、跟踪图像。,对话框右边显示与分类项对应的设计内容。,页面属性作用于整个网页，局部的特殊外观需要专门设置。,1.3,设置页面属性,1.3.2,设置页面的,“,外观（,CSS,）,”,1.3,设置页面属性,1.3.3,设置页面的,“,外观（,HTML,）,”,1.3,设置页面属性,1.3.4,设置页面的,“,链接（,CSS,）,”,1.3,设置页面属性,1.3.5,设置页面的,“,标题（,CSS,）,”,1.3,设置页面属性,1.3.6,设置页面的,“,标题,/,编码,”,1.4 Dreamweaver CS4,的文件操作,1.4.1,新建文件,1.4 Dreamweaver CS4,的文件操作,1.4.2,打开文件,1.4.3,保存文件,1.4.4,关闭文件,1.5,创建第一个网页,1,，工作窗口,1.5,创建第一个网页,2,，用浏览器预览,1.5,创建第一个网页,3,，查看代码,1.6 HTML,简介,1.6.1 HTML概述,HTML,称为,超文本标记语言,，它用超链接把因特网里存放在不同计算机上的网站信息联系在一起，形成有机整体。,HTML,文件不需要编译，由浏览器解释执行。,HTML,是标记语言，不是程序语言，它的格式非常简单，只是由网页元素和,HTML,标记组成。标记用来分隔和标记文档中的各个网页元素，元素的显示方式以及元素在网页中的位置由标记属性规定。,HTML,文件是标准的,ASCII,文本文件，可以用任意一个文本编辑器打开和编辑，如,Windows,系统自带的,“,记事本,”,。用,Dreamweaver CS4,可视化编辑的网页，系统会自动给出对应代码。,HTML,文件扩展名为,“,.htm,”,或者,“,.html,”,。,1.6 HTML,简介,1.6.2 HTML标记,HTML,标记放在,“,”,之间，,“,结束标记,”,带有,“,/,”,。,说明：,（,1,）标记名与,“,”,之间不能有空格。,（,2,）标记字母不区分大小写，建议都用小写。,（,3,）标记分为单标记和双标记。,单标记,，只有起始标记没有结束标记，如,或,，后一种写法是,xhtml,代码书写的规范。,双标记,，成对出现，如,和,。,（,4,）标记属性加在起始标记中，,如,你好,。,1.6 HTML,简介,1.6.3 HTML代码的书写规则,（,1,）,HTML,代码中所有的符号都是半角符号，代码不区分大小写。,（,2,）标记中的属性不分先后，属性之间用空格分隔，属性值可以写在双引号中，也可以不用引号直接书写。,（,3,）标记不能交叉，但可以嵌套。,（,4,）回车键和空格键在,HTML,源代码中不起作用。,（,5,）,HTML,源代码的注释语句以,“,”,结束。,1.6 HTML,简介,1.6.4 HTML文件的基本结构,1.6 HTML,简介,1.6.5 用HTML代码建立网页,用,HTML,制作网页,这是我用,HTML,代码制作的网页,这是我用,HTML,代码制作的网页,站 点,站点的基本操作,规划站点规划站点是建立站点的前期准备工作,主要包括确定目标群体，确定站点功能，确定站点结构。,1.1,确定目标主体是指确定网站的用户群体，网站是做给哪些人用的，以确定网站的风格，内容以及色彩效果等。如化妆品网站目标的目标群体为年轻时尚的女性，所以网站的风格应充满时尚感。,站点的基本操作,1.2,确定站点功能,确定站点功能是指确定网站可以为用户实现的功能和目标，以适应在网站建设中各方面的内容和要求。例如，制作个人类网站就可能需要使用,Flash,动画和个性化图标等。,1.3,安排站点结构,安排好站点的结构，可以为之后的网站节省时间减少麻烦。在安排站点结构时，要考虑文件夹的层次，分类问题。,不同的文件要分类存放，如果网站中的文件较多，还应分层分级的放入文件夹中，使站点目录结构变得清晰明了，方便后期管理和维护。,创建站点的基本结构，是指确定站点的整体结构和网页之间的结构关系。创建站点的基本结构时首先要建立空白的站点，其次是添加网页文件与站点文件夹。,1,创建站点,Dreamweaver CS4,提供了两种创建站点的方法：一是在启动,Dreamweaver,时通过欢迎画面创建；二是在,Dreamweaver,工作环境下，单击菜单栏中的,【,站点,】【,新建站点,】,命令。这两种创建站点的方法都是通过向导完成的，非常直观。,例,5-1,建立,kejian,站点。,1),启动,Dreamweaver CS5,，则弹出欢迎画面，如图,2),单击,【Dreamweaver,站点,】,选项，则弹出,【,的站点定义为,】,对话框，在该对话框中有两个标签，其中,【,基本,】,标签就是,站点定义向导，第一个对话框如图,5-10,所示,，这里有两个选项，第一个选项要求输入站点名称，以便在Dreamweaver中标识该站点，这里输入,“,kejian,”,。第二个选项要求输入站点的http地址，如果还没有域名，可以暂时不填。,图,5-10,第一个向导对话框,3),单击按钮，进入,站点定义向导的第二个对话框，如图5-11所示。该对话框询问用户是否要使用服务器技术，选择【否，我不想使用服务器技术】选项，表示该站点是一个静态站点，没有动态页。,图,5-11,第二个向导对话框,4),单击按钮，进入,站点定义向导的第三个对话框，如图5-,12,所示。该对话框,询问用户如何使用文件，这里选择第一个选项，然后在下面的文本框中指定一个文件夹，Dreamweaver将在其中存储站点文件,图,5-12,第三个向导对话框,5),单击按钮，进入,站点定义向导的第四个对话框，如图5-13所示。该对话框询问用户如何连接到远程服务器，这里从下拉列表中选择,“,无,”,。,图,5-13,第四个向导对话框,6),单击按钮，进入,站点定义向导的第五个对话框，其中显示了用户的设置概要，如图5-14所示。,7),单击按钮，则通过向导建立了一个本地教学站点。,图,5-14,第五个向导对话框,建立了本地站点以后，新建的站点将显示在,【,文件,】,面板中。单击菜单栏中的,【,窗口,】【,文件,】,命令，或者按下,F8,键，可以打开,【,文件,】,面板。该面板中显示了本地站点的名称以及本地站点的文件夹等选项，如图所示。,插入文本框（,F5,刷新）,插入图片,再见！,