网页设计与制作全套教学ppt课件

,*,网页设计与制作电子教案,网页设计与制作,2020,年,3,月,网页设计与制作2020年3月,教学目标,通过本章的学习，能够让学生了解网站的设计与工作流程，掌握,HTML,的基本概念和结构，能利用,HTML,制作网页,了解和,DHTML/XML,的区别，能熟练掌握利用,Dreamweaver,制作网页，利用,Fireworks,制作图片、利用,Flash,制作动画；并能有机地结合，制作出精美的网页。,教学目标通过本章的学习，能够让学生了解网站的设计与工,第,1,章 网页设计概述,第,2,章,HTML,语言基础,第,3,章,Dream weaver,基础,第,4,章 网页中的基础元素,第,5,章 网页页面布局,第,6,章 网页中的层和时间轴,第,7,章 表单的应用,第,8,章 在网页中使用行为,第,9,章,CSS,样式使用,第,10,章 网页中的多媒体应用,第,11,章 模板和库,第,12,章 站点测试和发布,第,13,章,Flash 8,简介,第,14,章,Fireworks8,简介,目录,第1章 网页设计概述目录,第1章 网页设计概述,$,知识目标,掌握网页、网站及主页的概念,了解网页中的主要元素,了解各种网页制作工具,8,能力目标,各种网页制作工具的配合使用,网站的整体规划,网站的设计流程,第1章 网页设计概述$ 知识目标,1.1,网页和网站,1.2,网页中的主要元素,1.3,网页制作工具,1.4,网页设计的基本流程,本章小结,第,1,章 网页设计概述,1.1 网页和网站第1章 网页设计概述,1.1 网页和网站,1.1.1,网页,1.1.2,网站,1.1.3,网页的基本功能,1.1 网页和网站1.1.1 网页,1,网页网页（,WEB,）：是用,html,语言编写的，通过,www,网传输，并被,web,浏览器翻译成可以显示出来的集合文本、图片、声音和动画等信息元素的页面文件（,网页示例,）。,2,网页的类型,根据页面内容可以分首页、主页、专栏网页、内容网页和功能网页等类型；按制作技术分为静态网页与动态网页。,1.1.1,网页,1.1 网页和网站,1网页网页（WEB）：是用html语言编写的，通,网站就是把一些网页等信息文件通过超链接的形式关联起来形成的信息文件的集合。信息可以是网页形式也可以是其他的文档形式。,网页与网站的区别与联系：,网站是一个文件夹，其中的文件不仅是网页还有网站所需的其他文件或文件夹。网页是一个页面文件，用来发布各种信息。网页是网站的构成要素，是网站信息发布与表现的一种主要形式；网站是网页通过超链接形成的集合。,1.1.2,网站,1.1 网页和网站,网站就是把一些网页等信息文件通过超链接的形式关联起来形成,1,、媒介的作用。使用者与信息之间的媒介。一方面是发布者，功能是发布信息；另一方面是浏览者，功能是提供浏览的信息，通过浏览网页找寻需要的信息。,2,、互动的作用。浏览者与网页制作单位之间互动的窗口，可以单向或双向传递信息。,3,、传输的作用。作为传输各种电子文件或信息之用，如下载说明书、更新文件、驱动程序等。,1.1.3 网页的基本功能,1.1 网页和网站,1、媒介的作用。使用者与信息之间的媒介。一方面是发布者，,1.2 网页中的主要元素,1.2.1,文本,1.2.2,图像,1.2.3,链接标志,1.2.4,其他的基本要素,网页的基本要素一般包括：文字、图像、动画和链接标志等，除此之外，网页的元素还包声音、多媒体和视频等。,1.2 网页中的主要元素1.2.1 文本网页的基本要,是网页中最基本的元素。网页中文字的设计一般从以下几个方面来考虑：,1,字体的选择。,2,字号、行距的选择。,3,特殊字体的使用。,4,字体的颜色。,1.2.1文本,1.2 网页中的主要元素,是网页中最基本的元素。网页中文字的设计一般从以下几个方面,现在网络上使用的绝大多数图片和图像是,gif,、,jpeg,和,png,文件格式。,网页上使用图像要注意的问题：,JPEG,格式适合于照片图像，,GIF,格式适合于包含纯色的图像，例如插图和线条图。,利用图像编辑软件来放大或缩小图像,屏幕显示图像的分辨率一般为,72dpi,。制作图像时，不必使用比此再高的分辨率。,1.2.2图像,1.2 网页中的主要元素,现在网络上使用的绝大多数图片和图像是gif、jpeg和p,如果建立的图像中只有黑色和白色，处理时可将它保存为黑白图像格式，这样可以减少图像文件的大小。,如果设计的,GIF,格式图像包含了渐变和直线，应尽量使得它们水平，因为,GIF,格以每条水平线为基础来压缩。,尝试各种不同的,JPEG,压缩率,使用合适的色彩模式。,慎用动画。,1.2.2图像,1.2 网页中的主要元素,如果建立的图像中只有黑色和白色，处理时可将它保存为黑白,链接也叫超链接（,Hyperlink,），是从一个网页指向另一个目的端的链接，是页面间的链接关系。,链接标志（载体）指的是网页中特殊的文本或图像，它们常常用不同的颜色和下划线来标识，在浏览器中，访问者可以用鼠标单击它们，能够从当前的网页转到链接的目的端位置。,超链接的标志一般有：文本、图像、热区三种。要注意的是，所有超链接标志均应清晰无误地向浏览者标识出来，让人一看就知道。,1.2.3链接标志,1.2 网页中的主要元素,链接也叫超链接（Hyperlink），是从一个网页指向另,除上述几种要素之外，在网页上经常使用的还有动画、视频、声音等各种信息的形式。,1,动画。目前网络上常用的动画类型有,gif,和,Flash,动画两种。,2,视频。是多媒体网页的一个重要组成部分，常用的视频格式有,avi,、,mpeg,和,mov,等，视频会大大增加网页的文件量，从而使用访问速度受到影响，因此要慎用。,3,音频。在网页中插入音频会增加网页的生动性。常用的音频格式有,rm(ram),、,midi,、,wav,和,mp3,等格式。音频文件和视频文件一样都会增加网页的文件量，因此要慎用。,1.2.4其他的基本要素,1.2 网页中的主要元素,除上述几种要素之外，在网页上经常使用的还有动画、视频、声,1.3 网页制作工具,1.3.1,网页编辑工具,1,超文本标识语言（,HTML,）,2,FrontPage,简介,3,Dreamweaver,1.3.2,网页图像编辑工具,1.3.3,动态网页技术,1.3 网页制作工具1.3.1网页编辑工具,1,Photoshop,。是,Adobe,公司开发的，是当今最流行的图形图象处理软件之一，它能够实现各种专业化的图像制作、处理及合成。,2,Fireworks,。是由,Macromedia,公司开发的图形处理工具，它是第一个专门为制作网页图形而设计的软件，同时也提供专业的网页图形设计及制作的解决方案。,3.Flash,。,Macromedia,公司出品的,Flash,是目前非常流行的一种交互式,Web,矢量动画软件。,Dreamweaver,和,Flash,、,Fireworks,三个软件被称为“网页三剑客”，是现在公认的比较标准的网页制作利器。,1.3.2,网页图像编辑工具,1.3 网页制作工具,1Photoshop。是Adobe公司开发的，是当今最,动态网页可以实现网页浏览者和网页设计者的交互，实现交互技术有两种：一种是客户端技术如常用的,JavaScript,和,VBScript,；另一种是服务器端技术如目前常用的,ASP,和,PHP,。,1,ASP(Active Server Pages),2,PHP(Hypertext Preprocessor),3,JSP(Java Server Pages),1.3.3动态网页技术,1.3 网页制作工具,动态网页可以实现网页浏览者和网页设计者的交互，实现交互技,1.4 网页设计的基本流程,1.4.1,网站的设计流程,1.4.2,网页的设计与制作,1.4.3,网页的测试,1.4.4,网页上传和发布,1.4 网页设计的基本流程1.4.1 网站的设计流程,1,确定网站的主题,2,规划网站的整体结构,3,收集整合网页素材,4,确定网页版面布局。,5,制作网页。,6,添加网页特效。,7,测试和发布网站。,1.4.1,网站的设计流程,1.4 网页设计的基本流程,1确定网站的主题1.4.1 网站的设计流程 1.4,1,确定网页的版面布局,（,1,）平衡性。（,2,）对称性。（,3,）对比性。,（,4,）疏密度。（,5,）比例。（,6,）韵律感。,网页的排版布局是决定网站美观与否的一个重要方面,通过合理的、有创意布局,才可以把文字、图像等内容完美地展现在浏览者前面。,2,网页设计与制作,网页设计与制作一般分为静态网页制作和动态网页制作两类。,1.4.2 网页的设计与制作,1.4 网页设计的基本流程,1确定网页的版面布局1.4.2 网页的设计与制作 1,1,浏览器兼容性测试。目前浏览器有：,Internet Explorer,与,Netscape,两大主流浏览器，二者对,HTML,和,CSS,等语法的支持度是不同的。在,Dreamweaver,中提供了可以检查网页中是否含有某版本浏览器不能识别的语法功能，设计者可以借助其进行检查。,2,平台的兼容性测试。设计要为用户着想，必须最少在一台,PC,和一台,Mac,机上测试你的网站网页，看看兼容性如何；,3,超链接完好性测试。超链接是连接网页之间、网站之间的桥梁，浏览者是不愿意访问一个经常出现“找不到网页”的问题的网站，作为设计者必须检测超链接的完好性，保证链接的有效性，不要留下太多的坏链接。,1.4.3网页的测试,1.4 网页设计的基本流程,1浏览器兼容性测试。目前浏览器有：Inter,网页设计好，必须把它发布到互联网上，否则网站形象仍然不能展现出去。发布的服务器可以是远程，也可以是本地。如果是发布到互联网上，要先申请域名和主页空间，然后再利用专用软件（如：,CuteFTP,）上传，,FTP,有很多种软件，最著名的是,CuteFTP,和,LeapFTP,，也可以用,Dreamweaver,内置的,FTP,上传。,1.4.4网页上传和发布,1.4 网页设计的基本流程,网页设计好，必须把它发布到互联网上，否则网站形象仍然不能,本章小结,第,1,章 网页设计概述,网页设计概述,网页和网站,网页中的主要元素,网页设计的基本流程,网页制作工具,网页,网站,网页的基本功能,文本,图像,链接标志,其他的基本要素,网页编辑工具,网页图像编辑工具,网站的设计流程,网页的设计与制作,网页的测试,网页上传和发布,常见的各种网页制作工具,动态网页技术,本章小结第1章 网页设计概述网页设计概述网页和网站网页中的,$,知识目标,了解,HTML,文件的基本结构,掌握,HTML,中文本的编辑及图像的语法,掌握,HTML,中各种设置超级链接的语法,掌握,HTML,中表格和框架的基本语法,8,能力目标,掌握进行文本及图像的编辑操作,掌握创建各种超级链接的操作,能够编写简单的,HTML,网页,掌握,HTML,文件中表格和框架的使用,第,2,章,HTML,语言基础,$ 知识目标 第2章 HTML语言基础,2.1 HTML,概述,2.2,文本的编辑,2.3,图像编辑,2.4,建立超链接,2.5,表格与框架,本章小结,第,2,章,HTML,语言基础,2.1 HTML概述第2章 HTML语言基础,2.1 HTML概述,2.1.1 HTML,简介,2.1.2 HTML,语法结构,2.1 HTML概述2.1.1 HTML简介,HTML,（,Hyper Text Markup Language,）又称超文本标识语言，是一种标识性的语言，是网页设计的最初语言。文件的扩展名,:“html”,或“,htm”,。,例,2.1,简单的,HTML,文档,.,长春欢迎您！,这里是长春悠游网，我们带您畅游长春！,由“,”,组成的就是标记。在,HTML,语言中标记分“单标记”和“围堵标记”。,2.1.1 HTML简介,2.1 HTML概述,HTML（Hyper Text Markup Langu,1,围堵标记,格式：,2,单标记,格式：,只有起始标记，没有结束标记。最常用的单标记是,它表示段内换行。,3,标记属性,格式：,各属性间无前后顺序，属性也可省略，当省略属性时取标记的默认值。,2.1.1 HTML简介,2.1 HTML概述,1围堵标记2.1.1 HTML简介 2.1 HTM,HTML,文档的基本结构：,文件开始,标头区开始,.,标题区,标头区结束,文件主体内容开始,文件主体内容,文件主体内容结束,文件结束,其中,之间表示这是个网页文件，是必有的标记。,2.1.2 HTML语法结构,2.1 HTML概述,HTML文档的基本结构：2.1.2 HTML语法结构,2.2 文本的编辑,2.2.1,段落标记,2.2.2,文本标记,2.2.3,标题显示等级,2.2.4,列表,2.2 文本的编辑2.2.1 段落标记,1,段落（,）,基本语法格式为：,其中参数,align,用于设定段落的位置是靠左、靠右还是居中。默认值是靠左；除,align,之外,还有其他参数如,class,。,class,参数是可选项，如果没有将按照默认值显示。,2,换行,单标记，放在一行的末尾，可以在一个段落内实现文本的强制换行，设置标记后面的文本字、图像和表格等内容显示于下一行。,2.2.1,段落标记,2.2 文本的编辑,1段落（）2.2.1 段落标记 2.2 文本,1,字体标记,其基本语法格式为：,Size,：设置字体的显示字号，范围是从“,1,7”,，其中“,3”,是默认值。,Color,：设置文本的颜色，值可以是颜色名（英文如,red,代表红色）或颜色的十六进制代码（,#000000,代表黑色，,#FFFFFF,代表白色）。,Face,：设置文本显示的字体，值为字体的名称。,在文本的标记中还有很多常用的标记，比如表示字体效果的，,(,黑体,),，,（斜体），,（加下划线）。,2.2.2,文本标记,2.2 文本的编辑,1字体标记2.2.2 文本标记 2.2,2,特殊字符,HTML,中除了我们上面学的的一些标记外，还有一些我们常用的特殊字符比如“,”,，这些特殊字符在,HTML,语言中都有对的转义符，常用的转义符与特殊字符参见下表：,2.2.2,文本标记,2.2 文本的编辑,HTML,代码,显示结果,说明,大于号或显示标记,&,可用于显示其它特殊字符,引号,注册,版权,商标,不断行的空格,2特殊字符2.2.2 文本标记 2.2 文本的编辑,3,水平线标记,水平线是在网页上划出一条水平的分割线，用,来标记水平线。语法格式为：,Size,：设置水平线的高度，以像素为单位。,Color,：设置水平线的颜色。,Width,：设置水平线的宽度，单位是像素或百分比，像素是绝对大小，不会随着程序窗口的大小而改，百分比是相对于程序窗口水平线所占的比例，会随着程序窗口的大小而改变。,Align,：设置水平线的对齐方式。对齐方式有左对齐，居中，右对齐三种。,2.2.2,文本标记,2.2 文本的编辑,3水平线标记2.2.2 文本标记 2.2,语法格式为：,n,：表示不同级别的标题，,n,值可以是,1-6,中的任意数字，其中,1,表示的标题字体最大。另外，可以用,align,属性设置对齐方式，常用的有左对齐，居中，右对齐三种对齐方式。,2.2.3,标题显示等级,2.2 文本的编辑,语法格式为：2.2.3 标题显示等级 2.2 文本的,在,HTML,中，列表常用的有“有序列表”和“无序列表”。,1,有序列表,基本语法结构为：,项目,1,项目,2,项目,n,2.2.4,列表,2.2 文本的编辑,在HTML中，列表常用的有“有序列表”和“无序列表”。2,1,有序列表,Type,：设置列表的序号类型，常用序号如下：,n=1,：用数字作为序号。,n=A,；用大写字母作为序号。,n=a,：用小写字母作为序号。,n=I,：用大写罗马数字作为序号。,n=i,：用小写罗马数字作为序号。,Start,：为可选参数，用于设置序号的起始数值。如不添加“,start”,则从每类序号的第一个序号开始。,2.2.4,列表,2.2 文本的编辑,1有序列表2.2.4 列表 2.2 文本的,2,无序列表,基本语法结构为：,项目,1,项目,2,项目,n,Type:,设置符号形状，有实心圆、小正方形、空心圆三种，具体如下：,n=disk,：符号为实心圆。,n=square,：符号为正方形。,n=circle,：符号为空心圆。,2.2.4,列表,2.2 文本的编辑,2无序列表2.2.4 列表 2.2 文本的编辑,2,.,3 图像编辑,2.3.1,插入图像,2.3.2,使用背景图像,我们在网页上经常会浏览图像，适当使用图像可以增加网页的美观。在网页最常用到的是插入图像和设置背景图像。,2.3 图像编辑2.3.1 插入图像我们在网页上经常,1,语法格式：,，,单标记,Src,：指明要添加的图像所在的具体路径和文件名。路径可以是相对路径，也可以是绝对路径。例：,。,绝对路径：完整的描述文件位置的路径就是绝对路径。对于绝对路径可以不需要知道其他任何信息就可以判断出文件的位置。,相对路径：所谓相对路径,顾名思义就是当前文档与目标的相对位置。例,.,2.3.1插入图像,2.3 图像编辑,1语法格式：2.3.1插入图像 2.3 图像编辑,2,图像的属性,除了“,src”,以外，,还有其他属性，可以定义图像的对齐方向，与周围元素的距离等，各属性及作用见表,2.2,。,表,2.2,图像属性列表,2.3.1插入图像,2.3 图像编辑,名称,作用,border,设定图像的边框,vspace,设定图像、文字与图像上下之间的间隔,hspace,设定图像、文字与图像左右之间的间隔,width,调整图像的宽度,height,调整图像的高度,alt,当浏览器无法显示图像时，会显示出,alt,属性所设定的文字,2图像的属性2.3.1插入图像 2.3 图像编辑,语法格式为：,2.3.2 使用背景图像,2.3 图像编辑,语法格式为：2.3.2 使用背景图像 2.3 图像编,2,.,4,建立超链接,2.4.1,建立超链接,2.4.2,使用书签,2.4.3,标记新窗口和基准链接,2.4 建立超链接2.4.1 建立超链接,建立超链接的标记是,，语法格式为：,超链接标识,url,：指明链接目标的具体路径和文件名。,超链接标识：是网页中链接的载体，可以是文字或图像等页面元素，用户点击它就会跳到超链接的目标位置。,2.4.1,建立超链接,2.4 建立超链接,建立超链接的标记是，语法格式为：2.4.1 建立超,定义书签,在,HTML,中，首先要定义书签，然后才在链接使用。定义书签的语法格式为：,书签名不能用中文，只能用英文和数字。,使用书签链接,其链接的格式为：,超链接标识,#,与书签名之间不能有空格。,2.4.2使用书签,2.4 建立超链接,定义书签2.4.2使用书签 2.4 建立超链接,1,标记新窗口（,target,）,“,target=”_blank”,，是链接标记的一个参数。语法格式为：,超链接标识,当点击链接载体的，就会在新窗口打开链接目标。,2,基准链接,标记是单标记，禁止使用结束标记，可以改变文件中所有链接标记的参数默认值。它只能位于文件的开头部分，即标记,与,之间。语法格式为：,2.4.3,标记新窗口和基准链接,2.4 建立超链接,1标记新窗口（target）2.4.3 标记新窗口和基,2,.,5 表格与框架,2.5.1,建立表格,2.5.2,表格属性,2.5.3,建立框架,2.5.4,框架属性,2.5 表格与框架2.5.1 建立表格,表格标记有,、,、,和,四个，他们的具体含义是：,:,定义表格,是表格必须的元素,：定义标题单元格，在这个单元格中的文字将用粗体表示。,：定义表格中的行。,：定义单元格，使用,标记一定要放在,标记内部。,上述标记中，,可以省略，其他三个是必须的。具体应用见例,2.12,。,标记中可以添加属性和参数，其中,border,，用于设置表格的边框宽度，值为大于等于“,0”,的整数，当值为“,0”,，在浏览器中显示无边框表格，无边框表格是网页布局最主要的手段。,2.5.1,建立表格,2.5 表格与框架,表格标记有、和四,除了,border,外，常用的表格属性参数有：,：定义单元格之间的距离，值为大于等于“,0”,的整数，单位是像素，“,0”,表示没有间距。,：定义单元格内的文字或其他元素到边框的距离,值为大于等于“,0”,的整数，单位是像素，“,0”,表示没有距离。,：定义表格的高度，值有两种单位，一是像素，表示表格高度为固定大小，一是百分比表示表格占据整个网页的高度百分比。,：定义表格的宽度，与高度一样有像素和百分比两种单位。,：定义表格边框的颜色。,：定义表格的背景色,2.5.2,表格属性,2.5 表格与框架,除了border外，常用的表格属性参数有：2.5.2 表,1,框架页的基本结构,：标记一个普通的,HTML,文档，用于在不支持框架的浏览器中显示。,：用于定义分割窗口，可以设置窗口的分割方式及是否显示框架边框等。,用于设置每个区域显示的内容，每个,URL,值指定一个事先己制作好的文件。,2.5.3,建立框架,2.5 表格与框架,1框架页的基本结构2.5.3 建立框架 2.5 表,2,建立框架,（,1,）建立纵向框架,建立纵向框架的基本语法为：,Cols,：设置垂直分割窗口，用“，”分隔，它的值可以是像素值或者是百分比，代表对应的子窗体占屏幕窗口的大小。如要将屏幕分割成三个子窗口，其中两个都占整个窗口的,30%,，那么只给开始的两个窗口赋值。语句为,，*代表框架剩余的部分分给最后一个子窗口，当然也可以写成,。,2.5.3,建立框架,2.5 表格与框架,2建立框架2.5.3 建立框架 2.5 表格与框架,（,2,）建立横框架,建立横向框架的基本语法为：,rows,：这个参数用来水平分割窗口，它的值可以是数字或者是百分比，代表对应的子窗口的大小，使用方法与,cols,相同。,（,3,）嵌套框架,嵌套框架是在己有的框架中嵌入框架的结构，利用嵌套框架可以实现窗口的横向与纵向的混合分割。嵌套框架的设置见例,2.16.,2.5.3,建立框架,2.5 表格与框架,（2）建立横框架2.5.3 建立框架 2.5 表格与,常用的框架属性有以下几种：,1,：设置框架的边框。值为,yes,（或,1,）有边框或,no,（或,0,）无边框。,2,：设置各窗口之间的空白区域大小。值是以像素为单位的数值。,3,：设置边框的颜色。值可以是的英文或颜色代码。,4,：设置框架是否显示滚动条。有三个值：,yes,表示有滚动条，,no,表示没有，,auto,表示根据内容的多少浏览器自动设置。,5,：设置框架在浏览器中不能被调整。,2.5.4 框架属性,2.5 表格与框架,常用的框架属性有以下几种：2.5.4 框架属性 2.5,本章小结,第,2,章,HTML,语言基础,HTML,语言基础,HTML,概述,图像编辑,表格与框架,建立超链接,HTML,简介,HTML,语法结构,段落标记,文本标记,标题显示等级,列表,插入图像,使用背景图像,建立超链接,标记新窗口和基准链接,建立表格,表格属性,建立框架,框架属性,使用书签,文本的编辑,本章小结第2章 HTML语言基础HTML语言基础HTML,$,知识目标,认识,Dreamweaver8,操作界面,掌握如何规划站点的结构,掌握网页文件的基本操作,8,能力目标,熟悉工作界面和使用各种面板,能够建立和管理本地站点,熟练网页文件的基本操作,第,3,章,Dream weaver,基础,$ 知识目标 第3章 Dream weaver基础,3,.,1 Dream weaver 8工作界面,3,.,2 规划与创建站点,3.3 网页文件的基本操作,本章小结,第,3,章,Dream weaver,基础,3.1 Dream weaver 8工作界面第3章 Dr,3.1 Dream weaver 8工作界面,3.1.1,启动Dreamweaver8,3.1.2 Dreamweaver8操作界面,3.1 Dream weaver 8工作界面3.1.1 启,单击“开始”按钮，在开始菜单中依次选择“程序”,“Macromedia”“Macromedia Dreamweaver8”,，启动,Dreamweaver8,程序。启动,Dreamweaver8,后出现开始界面。,3.1.1 启动和退出Dreamweaver8,3.1 Dream weaver 8工作界面,单击“开始”按钮，在开始菜单中依次选择“程序”“Mac,在Dreamweaver8的起始页中，单击“创建新项目”下的“HTML”，打开Dreamweaver8的工作界面,。,3.1.2 Dreamweaver8操作界面,3.1 Dream weaver 8工作界面,在Dreamweaver8的起始页中，单击“创建新项目”,3.1.2 Dreamweaver8操作界面,3.1 Dream weaver 8工作界面,文档工具栏,面板组和文件面板,3.1.2 Dreamweaver8操作界面3.1 Dre,3,.,2 规划与创建站点,3.2.1,规划网站的整体结构,3.2.2,建立本地站点,3.2.3,管理本地站点,3.2 规划与创建站点3.2.1 规划网站的整体结构,规划网站的结构要注意以下几个方面：,1文件及文件夹的命名要规范,2不要将所有文件存放在站点根目录下,3建立子文件夹对文件进行分类存放,4每个主栏目下都建立独立的Image目录,5模板（Library）和库(Templates)文件夹一定要位于站点根目录之下并不能被更名，否则在使用模板和库就会出错。,3.2.1,规划网站的整体结构,3.2 规划与创建站点,规划网站的结构要注意以下几个方面：3.2.1 规划网站的,创建站点,创建站点,1.,本地站点,本地文件夹是我们在硬盘上建立的工作目录。,Dreamweaver,将该文件夹作为,“,本地站点,”,。,2.,远程站点,远程文件夹是存储文件的位置，,Dreamweaver,该文件夹称为,“,远程站点,”,。一般说来，远程文件夹位于运行,Web,服务器的计算机上。,3.,测试服务器,测试服务器文件夹是,Dreamweaver,处理动态页的文件夹。,1.本地站点,1,建议：使用英文小写字母命名站点中的文件夹和文件；,2,建议：文件名要易记，要统一命名。,站点结构规划,1 建议：使用英文小写字母命名站点中的文件夹和文件； 2,选择菜单,“,站点,-,管理站点,”,，打开编辑站点对话框。,站点维护操作,1,新建站点；,2,编辑站点；,3,复制站点；,4,删除站点；,5,导入和导出站点。,选择菜单“站点-管理站点”，打开编辑站点对话框。站点维护操作,1在本地电脑硬盘上建立一个空的文件夹,2在Dreamweaver8中建立站点的操作：,（1）单击菜单栏中“站点”|“新建站点”命令，打开“未命名站点1的站点定义为”对话框,。,3.2.2,建立本地站点,3.2 规划与创建站点,（,2,）在“您打算为您的站点起什么名字？”对话框中输入站点的名称，如我们在此输入“长春悠游网”。然后单击下一步。,1在本地电脑硬盘上建立一个空的文件夹3.2.2 建立本,3.2.2,建立本地站点,3.2 规划与创建站点,（3）在对话框中选择“否，我不想使用服务器技术”，单击“下一步”，打开对话框。,3.2.2 建立本地站点3.2 规划与创建站点（3）在,3.2.2,建立本地站点,3.2 规划与创建站点,（,4,）选择“编辑我的计算机上的本地副本，完成后再上传到服务（推荐）（,E,）”选项。,（,5,）单击“浏览”按钮 ，打开对话框，选择,D,盘上创建的“,myweb1”,文件夹为站点本地根文件夹。,（,6,）单击“下一步”打开对话框如下右图。,3.2.2 建立本地站点3.2 规划与创建站点（4）选,3.2.2,建立本地站点,3.2 规划与创建站点,（,7,）在“如何连接到远程服务器？”选项的下拉列表中选择“无”，单击下一步，打开站点定义的“总结”对话框如左图。,（,8,）单击“完成”后，可以在“文件”面板中看到所设置的站点，如右图所示。,3.2.2 建立本地站点3.2 规划与创建站点（7）在,单击菜单栏中“站点”|“站点管理”命令,打开“站点管理”对话框。,（一）复制站点,1在“管理站点”对话框中，选择要复制的站点，如选择“依林小镇”。,2单击对话框中的“复制”按钮，即可复制出“依林小镇复制”的站点。,3.2.3,管理本地站点,3.2 规划与创建站点,单击菜单栏中“站点”|“站点管理”命令,打开“站点管理”对,（二）删除站点,1在“管理站点”对话框中，选择要删除的站点，如选择“依林小镇”。,2单击对话框中的“删除”按钮，弹出提示对话框，询问是否删除本地站点（如图所示），单击“是”，即可删除本地站点“依林小镇”。,3.2.3,管理本地站点,3.2 规划与创建站点,（二）删除站点3.2.3 管理本地站点3.2 规划与创,（三）编辑站点,：,编辑站点是对己创建的本地站点进行修改和编辑。将“依林小镇复制”站点的名称改为“依林小镇”为例的操作为：,1在“管理站点”对话框中选择要编辑的站点“依林小镇复制”。,2单击对话框中的“编辑”按钮，打开“依林小镇复制的站点定义为对话框”，单击高级选项卡。,3.在站点名称对话框中，将“依林小镇复制”改为“依林小镇”，单击“确定”按钮即可。,3.2.3,管理本地站点,3.2 规划与创建站点,（三）编辑站点：编辑站点是对己创建的本地站点进行修改和编,3.3 网页文件的基本操作,3.3.1,新建网页,3.3.2,保存网页,3.3.3,关闭网页,3.3.4,打开网页,3.3.5,预览网页,3.3 网页文件的基本操作3.3.1 新建网页,1执行以下操作之一：,单击菜单栏中“文件”|“新建”命令。,单击标准工具栏上的,按钮。,2打开“新建文档”对话框。,3选择“基本页”选项中的“HTML”，单击“创建”按钮，即可新建一个空白的文档。,3.3.1,新建网页,3.3 网页文件的基本操作,1执行以下操作之一：3.3.1 新建网页3.3 网页,1执行以下操作之一：,单击菜单栏中“文件”|“保存”命令,单击标准工具栏上的,按钮。,2打开“另存为”对话框。,3在“保存在”选项中选择网页的保存位置。在“文件名”文本框中的输入文件名。,4单击“保存”按钮，文件就保存到指定位置。,3.3.2,保存网页,3.3 网页文件的基本操作,单击菜单栏中“文件”|“关闭”或单击文档的窗口右上角的“关闭”即可。,3.3.3,关闭网页,1执行以下操作之一：3.3.2 保存网页3.3 网页,打开己保存的网页有以下三种方法,、通过文件菜单打开己有的网页：,（1）执行以下操作之一：,单击菜单栏中的“文件”|“打开”命令。,或单击标准工具栏上的 。,（2）打开“打开”对话框。,（3）在查找范围下拉列表中选择网页所在的文件夹,选择要打开的文件,单击“打开”按钮,即可打开了文件,2、在“文件”面板中打开网页文件,在“文件”面板中,双击要打开的文件,即可打开网页,3、在资源管理器中打开网页文件,在资源管理器中，右击要打开的网页文件，在弹出的快捷菜单中选择“在Dreamweaver8”中编辑即可将文件在Dreamweaver8中打开。,3.3.4,打开网页,3.3 网页文件的基本操作,打开己保存的网页有以下三种方法 3.3.4 打开网页3.,以在Iexplore中预览为例，执行以下操作之一：,单击菜单栏中“文件”|“在浏览器中预览”|“Iexplore 6.0”命令。,使用快捷键为F12。,在文档工具栏中单击，选择在浏览器中预览，如图所示。,3.3.5,预览网页,3.3 网页文件的基本操作,以在Iexplore中预览为例，执行以下操作之一：3.3,本章小结,第,3,章,Dream weaver,基础,Dream weaver,基础,Dream weaver 8,工作界面,规划与创建站点,网页文件的基本操作,启动和退出,Dream weaver,Dreamweaver8,操作界面,规划网站的整体结构,建立本地站点,管理本地站点,关闭网页,打开网页,新建网页,保存网页,预览网页,本章小结第3章 Dream weaver基础Dream w,$,知识目标,掌握在网页中的文本和段落的设置方法,掌握图像的插入及其属性的设置的方法,熟悉页面属性的设置,熟悉各种超级链接及设置,8,能力目标,掌握文本和段落属性设置的操作,掌握图像的插入及图像属性设置的操作,掌握页面属性的设置操作,掌握各种超级链接的设置及编辑操作,第,4,章 网页中的基础元素,$ 知识目标 第4章 网页中的基础元素,4.1,在网页中插入文本,4.2,在网页插入图像,4.3,插入其他网页元素,4.4,设置网页的页面属性,4.5,设置超级链接,本章小结,第,4,章 网页中的基础元素,4.1 在网页中插入文本第4章 网页中的基础元素,4.1 在网页中插入文本,4.1.1,插入文本,4.1.2,设置文本格式,4.1.3,段落格式的编辑,4.1.4,设置列表,4.1.5,简单的,CSS,样式应用,4.1 在网页中插入文本4.1.1 插入文本,（一）插入普通文本,:,添加文本有以下三种方法：,1直接在文档窗口中输入文本。,2拷贝文本。,3从其他文档导入文本。,（二）插入特殊字符,1将光标定位在要插入特殊字符的位置。,2在“插入”栏的“文本”类别中，选择要插入的符号，如图。,4.1.1 插入文本,4.1 在网页中插入文本,（一）插入普通文本:添加文本有以下三种方法：4.1.1,1选择要设置的文本。,2在“属性检查器” ，设置文本格式。,4.1.2 设置文本格式,4.1 在网页中插入文本,1选择要设置的文本。4.1.2 设置文本格式4.1,（一）应用己有的标题格式,（二）自定义设置段落格式,1设置对齐方式,2设置段落缩进,4.1.3,段落格式的编辑,4.1 在网页中插入文本,（一）应用己有的标题格式4.1.3 段落格式的编辑4.1,列表包括项目列表和编号列表两种。创建项目列表或编号列表的操作为：,1.,选择要创建列表的文本。,2.,在“属性检查器”中单击 按钮，可以创建项目列表；单击 按钮，可以创建编号列表。,3.,单击“属性检查器”中的 按钮，以弹出的“列表属性”对话框中可以重新设置列表的属性。,4.1.4 设置列表,4.1 在网页中插入文本,列表包括项目列表和编号列表两种。创建项目列表或编号列表的,CSS,是,Cascading Style Sheets,（层叠样式表单）的简称。使用,CSS,样式改变行距的操作为：,1,按组合键,Shift+F11,，打开,CSS,面板如所示。,2,点击,CSS,面板上的 按钮，打开“新建,CSS,规则”对话框并设置如图右，单击确定。,4.1.5,简单的CSS样式应用,4.1 在网页中插入文本,CSS是Cascading Style Sheets,单击“确定”按钮，打开“,.hangju,的,CSS,规则定义”对话框。设置如图，单击“确定”退出。,4.1.5,简单的CSS样式应用,4.1 在网页中插入文本,单击“确定”按钮，打开“.hangju的CSS规则定,选择要应用样式的两段文本或光标定位在段落中，在“属性检查器”中“样式”下拉列表中，选择“,hangju”,，则文本的行距发生了改变，如图所示。,4.1.5,简单的CSS样式应用,4.1 在网页中插入文本,选择要应用样式的两段文本或光标定位在段落中，在“属性,4.2 在网页插入图像,4.2.1,插入图像,4.2.2,设置图像属性,4.2.3,编辑图像,4.2.4,图像外部编辑,4.2.5,鼠标经过图像,4.2.6,创建导航条,4.2 在网页插入图像4.2.1 插入图像,在网页中插入图像的操作为：,1.将光标定位在要插入图像的位置。,2.执行以下操作之一：,单击菜单栏中的“插入”|“图像”命令。,在“插入”栏的“常用”类别中，单击“图像”按钮,3打开“选择图像源文件”对话框,，,选择需要的文件名称。,6在“相对于”下拉列表中选择“站点”。,7单击“确定”按钮，图像则插入到网页中。,4.2.1,插入图像,4.2 在网页插入图像,在网页中插入图像的操作为：4.2.1 插入图像4.2,在文档窗口选中图像时，在“属性检查器中就可以显示该图像的属性，并可对其进行修改。,1设置图像大小,：,可以直接在“宽”和“高”两个文本框内输入新的数值即可。还可以直接用鼠标拖动来改变图像的大小。具体操作为：,（1）选中要改变的图像，图像四周出现控制点。,（2）拖动任一个控制点则可改变图像大小,4.2.2,设置图像属性,4.2 在网页插入图像,在文档窗口选中图像时，在“属性检查器中就可以显示该图像的,3设置图像对齐方式,4其他图像属性,“源文件”：指定图像的源文件。单击“浏览”,按钮 或者直接键入文件的路径，可以重新定义源文件。,“替代”：用于指定在图像不能正常显示时，显示的关于图像的文本提示信息。在某些浏览器中，当鼠标指针滑过图像时也会显示该文本。,“垂直边距和水平边距”：以像素为单位设定图像与周围的网页元素间的距离。,“边框”：是以像素为单位的图像边框的宽度。默认为无边框。,4.2.2,设置图像属性,4.2 在网页插入图像,3设置图像对齐方式4.2.2 设置图像属性4.2 在,在,Dreamweaver8,中提供了基本图像编辑功能，各编辑按钮如下：,优化。单击此按钮可以打开“,Fireworks”,程序对图像进行优化。,裁剪。可让修剪图像的大小，从所选图像中删除不需要的区域。,重新取样。可对已调整大小的图像进行重新取样，提高图片在新尺寸和形状下的品质。,亮度和对比度。可让调整图像的亮度和对比度设置。,锐化可调整图像的清晰度。,4.2.3,编辑图像,4.2 在网页插入图像,在Dreamweaver8中提供了基本图像编辑功能，各编,启动外部图像编辑器执行以下操作之一：,双击要编辑的图像。,选择要编辑的图像，然后在属性检查器中单击“编辑”。,在“站点”面板中双击图像文件，启动主图像编辑器。如果尚未指定图像编辑器，,Dreamweaver8,将启动该文件类型的默认编辑器。,4.2.4 图像外部编辑,4.2 在网页插入图像,启动外部图像编辑器执行以下操作之一：4.2.4 图像外部,设置鼠标经过图像的操作为：,1,在“文档”窗口中,将光标定位在要显示鼠标经过图像的位置。,2,执行以下操作之一，打开插入鼠标经过图像对话框：,单击菜单栏中“插入,|,图像对象,|,鼠标经过图像”命令。,在“插入”栏的“常用”类别中，单击“图像”按钮右侧的箭头，在弹出的菜单中，选择“鼠标经过图像”，如图所示。,4.2.5,鼠标经过图像,4.2 在网页插入图像,设置鼠标经过图像的操作为：4.2.5 鼠标经过图像4.2,3,打开“鼠标经过图像”对话框。,4,单击“确定”，在网页中插入了鼠标经过图像。,5,保存并在浏览器中预览网页。,4.2.5,鼠标经过图像,4.2 在网页插入图像,3打开“鼠标经过图像”对话框。4.2.5 鼠标经过图像,1,准备好用于制作导航条的图像,这些图像最好大小尺寸一样。,2,在文档窗口中，将光标定位在要显示导航条的位置。一般导航条位网页的顶部或两侧。,3,单击菜单栏中“插入”,|“,图像对象”,|“,导航条”。,4,打开对话框，在对话框中设置。,在导航条中，每一个项目都对应一个按钮，该按钮具有一组状态图像，最多可达四个。项目名称在“导航条项目”列表中显示。用箭头按钮排列项目在导航条中的位置。单击“,+”,按钮，添加另一个项目，单击“,-”,可以删除选中的项目。向上和向下的箭头按钮，用于调整项目在导航条中排序。,4.2.6,创建导航条,4.2 在网页插入图像,1准备好用于制作导航条的图像,这些图像最好大小尺寸一样,5,设置完成一个项目后，单击加号“,+”,按钮向导航条添加另一个项目，然后重复上述步骤定义该项目。,6,完成设置后，单击“确定”按钮，在网页中插入了导航条。,4.2.6 创建导航条,4.2 在网页插入图像,5设置完成一个项目后，单击加号“+”按钮向导航条添加另,4.3 插入其他网页元素,4.3.1,水平线,4.3.2,日期和时间,4.3 插入其他网页元素4.3.1 水平线,（一）插入水平线,:,在网页中插入水平线的操作为：,1,在“文档”窗口中，将光标定位在要插入水平线的位置。,2,执行下列操作之一：,单击菜单栏中 “插入”,|“HTML”|“,水平线”命令。,在“插入”栏的“,HTML”,类别中，单击“水平线”按钮，如图。,3,水平线插入在网页中如图,4.3.1,水平线,4.3 插入其他网页元素,（一）插入水平线:在网页中插入水平线的操作为：4.3.1,（二）设置水平线属性：,1,选择水平线,2,打开“水平线属性”，如图所示。, “,宽”：用于设置水平线的宽度。, “,高”：以像素为单位，设置水平线的高度。, “,对齐”：设置水平线的对齐方式（“默认”、“左对齐”、“居中对齐”或“右对齐”）。, “,阴影”：指定绘制水平线时是否带阴影。取消选择此选项将使用纯色绘制水平线。,4.3.1,水平线,4.3 插入其他网页元素,（二）设置水平线属性：4.3.1 水平线4.3 插入其,（三）,.,增添颜色,1,选择水平线,2,在“属性检查器”上，单击 打开快速标签编辑器如图。,3,插入,color=,？,，颜色取值可以是英语（如,yellow,）也可用十六进制代码（如,#FFFF00,）,.,4.3.1,水平线,4.3 插入其他网页元素,（三）.增添颜色4.3.1 水平线4.3 插入其他网页,（一）将当前日期插入到文档中,1,在“文档”窗口中，定位光标在要插入日期的位置。在图,4.34,的网页中的图像下面输入文本“本网页制作于：”。,2,执行下列操作之一：,单击菜单栏中“插入”,|“,日期”命令。,在“插入”栏的“常用”类别中，单击“日期”按钮,3,打开“插入日期”对话框如图。,4.3.2,日期和时间,4.3 插入其他网页元素,（一）将当前日期插入到文档中4.3.2 日期和时间4.3,4,在对话框中，选择星期格式、日期格式和时间格式。,5,如选择“储存时自动更新”，在每次保存文档时都会更新插入的日期。取消选择，日期在插入后变成纯文本并永远不自动更新。,6,单击“确定”插入日期，效果如图所示。,4.3.2,日期和时间,4.3 插入其他网页元素,4在对话框中，选择星期格式、日期格式和时间格式。4.3,4.4 设置网页的页面属性,4.4.1,打开页面属性对话框,4.4.2,设置网页的标题,4.4.3,设置网页的背景,4.4.4,设置网页的文本,4.4.5,设置网页的边界,4.4 设置网页的页面属性4.4.1 打开页面属性对话框,1,要打开页面属性对话框可以执行以下操作之一：,单击菜单栏中“修改”,|“,页面属性”命令。,单击文本“属性检查器”中的“页面属性”按钮。,2,打开页面属性对话框，如图所示。,4.4.1 打开页面属性对话框,4.4 设置网页的页面属性,1要打开页面属性对话框可以执行以下操作之一：4.4.1,1,在页面属性对话框中，选择“标题,/,编码”分类，如图所示。,2,在“标题”文本框内输入网页的标题内容，如“长春游游网”。,3,点击“确定”退出页面属性对话框。,4,保存并在浏览器中预览网页,则标题出现在浏览器的左上角,4.4.2 设置网页的标题,4.4 设置网页的页面属性,1在页面属性对话框中，选择“标题/编码”分类，如图所示,（一）设置网页的背景颜色,1,在页面属性对话框中，选择“外观”分类。,2,执行以下操作之一：,在“背景颜色”对话框中输入颜色的十六进制代码如“,#66CCFF”,点背景颜色后的按钮 ，打开调色板选择颜色。,3,点击“确定”退出页面属性对话框。,4,保存并在浏览器中预览网页。,4.4.3设置网页的背景,4.4 设置网页的页面属性,（一）设置网页的背景颜色4.4.3设置网页的背景4.4,（二）设置网