网页设计与制作全套电子整本书电子教案教学教程整套课件.ppt

,单击此处编辑母版标题样式,*,*,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,网页设计与制作,第,1,章 网页设计基础,1.1,网页设计基础知识,1.2,网页设计的原则,1.3,HTML,语言简介,1.4,实践演练,1.1.1,相关概念,1、,网,页（,Web page,）,实际上就是一个文件，通过超级连接将各种文档连接起来的一个大规模的信息集合。网页存放在与互联网相连的某一部计算机中，经由网址（,URL,）来识别与存取，可以在,WWW,（,World Wide Web,）网上传输，并能被浏览器识别和翻译，当我们在浏览器中输入网址后，网页文件会被传送到用户的计算机，通过浏览器的解释，网页的内容在浏览器上显示出来,。,2、,网,站（,Website,）,是网页文件的集合，一个完整的网站是由首页和若干个独立的网页（也称内页或子页）组成的，在设计时，设计者首先需要规划网站的结构，再依据结构要求制作出呈现不同内容的网页，通过超链接将网页链接一起组成网站,。,例：,综,合门户网站，如新浪、网,易等,，这类网站内容丰富，结构庞大,；,也,有搜索类网站，如百度、谷歌等,。,1.1,网页设计基础知识,3、,首页,（,Home page,）,网,站首,页是,一个网站的入口网页，故往往会被编辑得易于了解该网站，并引导互联网用户浏览网站其他部分的内容。它是一个单独的网页，和一般网页一样，可以存放各种信息，同时又是一个特殊的网页，作为整个网站的起始点和汇总点。例如，当浏览者输入网站地址“,”后出现第一个页面，即是搜狐网站的首页。,4、,服,务器,/,客户,机,网站及网页的信息是存放在服务器上的，服务器的作用是管理大量的资源，并为多种用户提供服务。,客户机是服务于用户，调用服务器程序的计算机。客户机并没有严格的分类，所有通过访问服务器获得服务的计算机都可以称为客户机,。,1.1,网页设计基础知识,5,超链接,网站的各个网页是通过超链接链接在一起的。超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序,。,6,统一资源定位器,URL,URL,（,Uniform/Universal Resource Locator,）统一资源定位器，,URL,路径是一种互联网中标准的资源位置,标识方式,，使用,URL,路径可以标识位于互联网的计算机中任意位置的文件，用来指定网络上的资源位于那台计算机的那个目录中，其格式如下,：,：,/|,例：,1.1,网页设计基础知识,1.1.2,网页的类型：,有,2,种,不同的类型：基本,网页和,动态网页。,1.,基本网页,基本网页又称静态网页，是相对动态网页而言的。工作原理如,下：,1.1,网页设计基础知识,静态网页是标准的,HTML,文件，它的文件扩展名是,.htm,或,.html,，可以包含文本、图像、声音、,FLASH,动画、客户端脚本和,ActiveX,控件及,JAVA,小程序等。,2、,动,态网,页,动,态网页与,网页上的各种动画、滚动字幕等视觉上的“动态效果”没有直接关系，动态网页也可以是纯文字内容的，也可以是包含各种动画的内容，这些只是网页具体内容的表现形式，无论网页是否具有动态效果，采用动态网站技术生成的网页都称为动态网页,。,动态网页中除了基本网页中的元素外，还包括一些程序，这些应用程序需要浏览器与服务器之间发生交互行为，而且应用程序的执行需要应用程序服务器才能完成,。,动,态网页使用语言：超文本标记语言,+ASP,或超文本标记语言,+PHP,或超文本标记语言,+JSP,等。,动态网页有两种,：,一,种是普通动态网页，它不包含数据库,；,一,种是包含数据库的动态网页,。,1.1,网页设计基础知识,1.1,网页设计基础知识,普通动态网页,(2),包含数据库的动态网页,1.1.3,网页中的基本元素,文,本,:,用于显示信息和超级链接,。,文本是网页中信息的主体，可以准确的表达信息的内容与含义。为丰富文本的表现力，可以通过文本的字体、字号、颜色、底纹和边框等来展现信息,图像,:,用于提供信息、展示作品、装饰网页、表现风格和超级链接等。网,页中使用图像的格式有,GIF,、,JPEG,、,PNG,等格式。,动画,:,动画实质是动态的图像，可以有效的吸引浏览者的注意，提高网页的表现力和交互性。网,页中使用较多的是,GIF,动画和,Flash,动,画。,1.1,网页设计基础知识,声音,:,用于网页的背景音乐和前景音乐，用于网络声音文件的格式非常多，常用的是,MIDI,、,MAV,和,MP3,等,。,视频,:,网页中视频文件的格式也非常多，常见的有,RealPlayer,、,MPEG,、,AVI,和,WMV,等,。但必须插入相应的插件或嵌入相应的代码。,表格,:,有一种用来控制网页中页面布局的有效方式。,表单,:,提供客户端与服务器端信息交流的平台,。常用于填写申请或提交信息时的交互页面，如电子邮箱、主页空间、,QQ,号码等的申请页面及登录面。,1.1,网页设计基础知识,1.1.4,网,页的组成,从网页的布局及各部分完成的功能来划分，可以将网页划分成以下几部分：标题、网站标志、主体内容、网页头部和底部、导航栏、广告栏等,。,1标题,网页的标题部分在浏览器的标题栏中显示，标题应能够体现网页设计的目的，在很大程度上决定了网页其他元素的定位。网站中的每个页面都要有明确的标,题,。,2网站的标志,网站标志也叫LOGO，如同一个产品的商标，是网站风格和主体的集中体现，可以由文字、符号、图案等元素构成，集中体现了网站的特色、内容、文化内涵及个性。一般网站的标志都十分醒目、独特，并设置,在显,要位置，给浏览者留下深刻的印,象,。,1.1,网页设计基础知识,3导航,栏,导航栏是整个网站内容的模块提示，用来帮助浏览者熟悉网站结构，方便地访问想要浏览的内容。导航栏的位置对网页的结构和整体布局有着至关重要的作用，导航栏的位置一般有4种：页面左侧、右侧、顶部和底,部,4头部和底部,网页的头部（header），在网页的顶端，导航以上，通常会放置网站的LOGO、登录、注册信息、网站的宣传广告等，根据具体需要设计,。,网页的底部（footer），通常会放置版权信息、公司地址、联系方式等。网站的底部设计得漂亮，可以给网站呈现来一个完美的结尾,，,1.1,网页设计基础知识,5主体内容,网页的头部和底部中间的部分称为网页的正文部分，正文部分呈现网页的主要要呈现的内容。主体内容主要由如下几部分构成,：,（1）背景,背景用于衬托前景，使用背景是实现网站整体风格统一的方法之一。根据网页主题的不同，合理选择背景。可以设置为背景颜色或背景图,像,。,（2）文字,网页信息的主要载体，文字的内容要符合主题，文字的字体、字号、颜色等要与网页的整体相协调。,（3）图片、动画、视频,在网页的主体部分插入图片、动画、视频等元素，可以直观地展现内容，但有的图片仅仅是为了装饰,。,6广,告,及其它内容,页面中放置的各种形式的连接广告，可包括Banner型、Flash、文字链接型等各种类型的广告,。,使网站更具有特色，可适当地使用一些网页制作技巧，如添加背景音乐、视频、制作动态网页等,。,1.1,网页设计基础知识,1.1.5,网,页,制作,工具,Macromedia,公司推出的,Dreamweaver,、,Flash,、,Fireworks,以其强大的功能和易学的特性，成为网页制作的梦幻工具组合，被称为网页三剑客,。,1,网页编辑工具,Dreamweaver,Dreamweaver,是,Adobe,公司推出的一款网页设计的专业软件，因其功能强大和易操作性使它成为同类开发软件的佼佼者。Dreamweaver 是一款所见即所得的网页编辑工具，它支持HTML和CSS，能够使网页和数据库相关联，用于对Web站点、Web页和Web应用的程序设计、编码和开发，既适用于专业人员也适合于网页制作爱好者,。,1.1,网页设计基础知识,2网页动画制作工具,Flash是Adobe公司推出的一款功能强大的动画制作软件，它将动画设计与处理推向了一个更高、更灵活的艺术水准。Flash是一种交互式动画设计工具，用Flash制作的动画具有生动活泼、容量小、表现力丰富、网络功能强大等特点，它能通过对声音、文字、动画的结合来综合表现作者的创意，制作出高品质的动画。,3网络图像处理软件,Fireworks 是Adobe推出的创建、编辑和优化网页图像的多功能应用程序，该软件可以加速网页设计与开发，是一款创建与优化网页图像和快速构建网站界面的理想工具，它不仅具备编辑矢量图形与位图图像的灵活性，还提供了一个预先构建资源的公用库。在Fireworks中可以设计网页中的图像，如设计网页标志、网页按钮、网络广告、网站的整体页面效果和处理产品图像等,。,1.1,网页设计基础知识,1.2.1,版面设计,版面指的是浏览器看到的完整的一个页面布局，版面设计就是以最适合浏览的方式安排网页的各部分在页面上的位置。,1网页版面布局原则,网页版面布局设计时一般应遵循以下原则：,平衡性：文字、图像等要素的空间占用上分布均匀；色彩的平衡，要给人一种协调的感觉。,对称性：对称是一种美，我们生活中有许多事物都是对称的。但过度强调对称性就会给人一种呆板、死气沉沉的感觉，因此要适当地打破对称，制造一点变化。,对比性：让不同的形态、色彩等元素相互对比，来形成鲜明的视觉效果。例如黑白对比，圆形与方形对比等，它们往往能够创造出富有变化的效果。,疏密度：网页要做到疏密有度，即平常所说的“密不透风，疏可跑马”。不要整个网页一种样式，要适当进行留白，运用空格，改变行间距、字间距等制造一些变化的效果。,1.2,网页设计原则,2常用的版面布局形式有：,（1）T结构布局：最上方是广告条，页面下方左面是菜单，右面显示页面内容，整体上类似英文字母“T”，所以我们称之为T字型布局，如图1-12所示。这种布局条理清晰、主次分明，但略微有点呆板。,（2）“口”型布局：这种布局类似一个方框，上下是广告条，左面是菜单，右面是友情链接，中间是网页内容，如图1-13所示。这种布局方式页面布局紧凑、信息丰富，但四面封闭，容易给人一种压抑的感觉,。,1.2,网页设计原则,（,3,）“三”型布局：这种布局多用于国外站点，国内用得不多。特点是页面上横向条型色块，将页面整体分割为三部分，色块中大多放广告条，如图所示的网页实例。,1.2,网页设计原则,（4）对称对比布局：采取左右或者上下对称的布局，一半深色，一半浅色，一般用于设计型站点。,（5）POP布局：POP引自广告术语，就是指页面布局像一张宣传海报，以一张精美图片或Flash动画作为页面的设计中心，如图所示。,1.2,网页设计原则,1.2.2,网页,色彩,设,计,网,页设计的版式、图片、色彩等视觉方面的运用，直接影响到用户对网站的最初感觉，,而,其中,，,色彩的配色方案是至关重要的，网站整体的定位、风格都需要通过颜色带给用户。在配色中，不同的颜色担当着不同的角色，配色可分为主色、配角色、支配色、融合色、强调,色,。,1.2.3,网页,中图像,与文字,的排版设计,1.2.4,网页总体设计原,则,网站的制作流程：,1、,需求分析、规划阶段（网站策划）,2、,设计阶段（页面美工，生成效果图）,3、,实施阶段（网页制作）,详细流程为七个过程,：,1、,站点策划,2、,构思草图,3、,美工设计,4、,图形制作,5、,页面整合,6、,脚本编程,7、,测试发布,网,站,的,设,计流程,1.3,HTML,语言简介,HTML(Hypertext Markup Language,超文本标记语言）,它不是一种编程语言，而是一种描述性的,网,页,编,辑,和,标记语言，用于描述超文本中内容的显示方式。,例如，如何在网页中定义一个标题、一段文本或一个表格等，这些都是利用一个个的,HTML,标记来完成。,其最基本的语法是：,内容,或,内容,标,记,通常都是,成对使用的，有一个开头标记就对应一个结束标记。结束标记只是在开关标记的前面加一个斜杠,“/”。,当浏览器从服务器接收到,HTML,文件后，就会自动解释这些标记的含义并按照一定的格式把标记的信息显示有浏览器上。,1.3.1,HTML,基本概念,一个网页就是一个,HTML,文档,(.html),，它是一个普通的文本文档，可以使用任意文档编辑器编写。,HTML,标记说明：,1、,任何的,HTML,标志都是由,括起来的；,2、,标记名不区分大小写，但建议用小写；,3、,多数标记是成对出现，少数是单独出现如,、,等,;,4,、部分标记拥有属性设置，如颜色、大小等：,标记与属性之间用,空格,分隔，属性值用,等号,赋值，属性值用,双引号,定界，如：,1.3.1 HTML,的基本,概念,任何一个,HTML,文档都由两部分：标题和正文。其中,:,标识为标题部分，,标识为正文部分。,HTML,文件的结构格式如下：,标题部分,正文部分,1.3.1 HTML,的基本,概念,文档标志,。,标志用于,HTML,文档的最前面，用来标识,HTML,文档的开始。而,标志恰恰相反，它放在,HTML,文档的最后边，又来标识,HTML,文档的结束，两个标志必须成对使用。,文件头标志,。,和,构成,HTML,文档的开头部分,，,标志对之间的内,容都是描述,HTML,文档的相关信息，是,不会在浏览器的框内显示出来。两个标志必须成对使用,。,在此,标志之间可以使用,、,、,和,等,标志对,。,1.3.2,HTML,语言的基本,标志,（,1,）文件标题标志,用于设置网页标题，标记间的内容后在网页标题栏中出现，并且,标记只存在于,标记中,。,（,2,）,用于定义客户端脚本，比如,JavaScript,等,（,3,）,用于为,HTML,定义样式信息，规定浏览器中,HTML,文档的呈现方式,。,（,4,）,元素可提供有关页面的元信息，如名字、搜索引擎关键字、说明及更新频率等内容。,1.3.2,HTML,语言的基本,标志,文件主体,标志,.,是,HTML,文档的主体部分，在此标志对之间可以包含,、,、,、,等众多标志。它们所定义的文本、图像等将会在浏览器的框内显示出来。两个标志必须成对使用。,标志中还可以有如表,1-1,（,p15,）所,示的属性。,1.3.2 HTML,语言的基本标志,属性,用途,示例,设置,背景颜色,红色背景,设置,文本颜色,蓝色文本,设置,链接颜色,链接为蓝色,设置,已经使用的链接的颜色,下面是一个综合的例子，说明了,HTML,文档的结构和最基本标志的使用。,显示在浏览器最上边蓝色条中的文本,红色背景、蓝色的文本,HTML,文档的结构,第,1,步：打开,Dreamweaver,第,2,步：在“,欢迎界面,”选择“,新建,”列表中的“,HTML,”,或者,在“,文件,”菜单选择“,新建,”“,空白页,”文件类型,:,HTML,布局：,无单击“创建”按钮。,第,3,步：将文档窗口切换至“代码”视图，输入,HTML,代码。,第,4,步：,Ctrl+S,保存文件，,F12,在浏览器中运行。,创建,HTML,文档,启,动,Dreamweaver,CS6,时,会出现如图所示,的欢迎界,面,。,Dreamweaver CS6,的文档编辑界面（即主界面）主要由菜单栏、文档工具栏、文档窗口、状态栏、属性面板、面板组等部分组成，其中“文档窗口”是显示和编辑文档内容的工作区域，是操作的核心区域。,DreamweaverCS6,界面,1.4,实践演练,实验内容,1-,浏览网页，了解 网页特色和内容,1.,浏览以下网页，,了解,静态网页和动态网页的区别。,http,:/,2,、,浏览大型门户网站：新浪、搜狐等；企业网站：可口可乐、奔驰等；进一步理解网站的布局结构和配色方案、组成元素等,欢迎光临我的主页,这是我第一次做网页，无论怎么样，我都会努力做好,P29,任务,1,说明,一个简单的,HTML,示例,欢迎光临我的主页,这是我第一次做网页，无论怎么样，我都会努力做好,P29,任务,2,说明,实践练习：制作第一个网页,使用,Dreamweaver cs6,制作我的第一个网页,要求完成下面设置。,标题：我的网页,正文：这是我的第一个网页。,插入一张,图,片,设置网页,Metal,头部：,1、,名字，添加作者信息；,2、,关键字；,3、,说明；,4、,刷新,保,存为,mypage1_1.html,文件，,并,在,IE,浏览器中查看。,1.3 HTML,语言简介,1.3.3-1.3.10 HTML,常用标志介绍,1,、,段,落标,志,:,标志对是用来创建一个段落,在此标志对之间加入的文本将按照段落的格式显示在浏览器上,。,另,外，,标志还可以使用,align,属性，它用来说明对齐方式，语法是,。,align,可以,是,justify,、,Left、Center,和,Right,四,个,值中间的一个。,如,：,2.,换行标,志,是一个很简单的标志，它没有结束标志，因为它是用来创建一,个,+,回车,的,换行。,在,的使用上面还有一定的技巧，如果把,加在,标志对的外边,将创建一个很大的回车换行,即,前面和后面的文本的行与行之间的距离很大,若放在,的里面,则,前面和后面的文本行与行之间的距离比较,小,。,1.3.3,页面,格式标,志,3.,列表标志,、,、,用来创建一个普通的列表,用来创建列表中的上层项目,用来创建列表中最下层项目,三对标记都,必,须成对出现，且,需放,在,标志对之间,。,1.3.3,页面,格式标,志,、,、,标志对用来创建一,个有,数字的列表,；,标志对用来创建一个标有圆点的列表,；,标志对只能在,或,标志对之间使用，此标志对用来创建一个列表,项。,1.3.3,页面,格式标,志,1.,黑体字、斜体字、下划线标志对,用来使文本,以粗体（,bole,）的,形式输出。,用来使文本以斜体字的形式输出。,用来使文本以下,加下划线,的形式输出。,2.,文字字型标志,文字字型标志还有,、,、,、,。这些标志对的用法和上面讲的一样，差别只是输出文本是字体不一样而已。,用来输出打字机风格字体的文本。,用来输出引用方式的字体，通常是斜体。,用来输出需要强调的,文本，通常,是,斜体。,则用来输出加重,文本、文本加粗。,1.3.4,文本,标,志,3.,文字大小、字体、颜色标志,是一对很有用的标志对，它可以对输出文本的字体大小、颜色进行随意地改变，这些改变主要是通过对它的两个属性,size,和,color,的控制来实现的。,Size,属性用来改变字体的大小，它可以取值：,-N,、,N,和,+N,；而,color,属性则用来改变文本的颜色。颜色的取值可以是基本标志中讲过的十六进制,RGB,颜色码或,HTML,语言给定的颜色常量名。,标题格式标志,HTML,语言提供了一系列对文本中的标题进行操作的标志对：,，,一共有,6,对标题的标志对。,是最大的标题，而,则是最小的标题。,1.3.4,文本,标,志,图像属性赋值标志,标志并不是真正地将图像加入到,HTML,文档中，而是将,标志的,SRC,属性赋值。这个值是图像文件的文件名，包括路,径。,路径通,常有如下情况：,假如,HTML,文件与图形文件（假设文件名为,logo.gif,）在同一个目录下，则可以将代码写成,。,.,假如图形文件放在当前的,HTML,文档所在的目录的一个子目录（子目录名假设是,images,）下，则代码应该,为,。,.,假设图形文件放在当前的,HTML,文档所在的目录的上层目录（目录名假设是,home,）下，则相对路径就必须是准网址了,。,必须强调,，,src,属性在,标志,中必,须赋,值，,是标志中不可缺,少的部,分。,1.3.5,图像标志,除此之外，,标志还有,alt,、,align,、,border,、,width,和,height,属性：,alt,属于是,当图片无法显示时的替代文本,。,width,和,height,属性是图形的宽和高，默认单位是像素。,align,和,border,等,属性,html5,已不支持，对齐方式可用,设置。,水平线标志,标志是在,HTML,文档,中加入一,条水平线，它可以直接使用，具有,size,、,color,、,width,和,noshade,属性。,size,是设置水平的厚,度（高度）。,width,是设置水平线的宽度、默认单位为像素,。,align,是对齐方式，从居中、左和右对齐三者中选择，默认居中对齐。,noshade,属性不需要赋值，而是直接加入标志即可使用，它是用来假如一条没有阴影的水平线,（不设置此属,性，水平线将有阴影,）。,1.3.5,图像标志,创建表格标志,标志对用来创建一个表格，下表所示的是属性。,属性,用途,设置表格的背景色,设置边框的宽度，若不设置宽度默认值为,0,设置边框的颜色,设置垂直对齐方式，取值：,top,、,middle,、,bottom,和,baseline,填充，用于设置单元边沿与其内容之间的空白,间距，用于设置表格的单元格之间的空间大小,设置表格的宽度，单位用绝对像素值或总宽度的百分比,1.3.6,表格标志,表格的语法结构：,即,、,和,标志对之间的关系,标志,含义,最外层，创建一个表格,表格标题,可选择项，表格标题,创建一行,要输出的文本只能放在此处,要输出的文本只能放在此处,要输出的文本只能放在此处,创建一个单元个,（这里总共创建了三个单元格）,行末尾,最外层,1.3.6,表格标志,行、单元格和表格头标志,.,、,标志对用来创建表格的每一行。此标志对只能放在,标志对之间使,用,。,标志对用来创建表格中每一行中的每一个单元格，此标志对只有放在,标志对之间才识有效的，输入的文本也只有放在,标志对之间才,有效。,标志对用来设置表格头，文字通常是黑体、居中,。,表格标记相当重要，主要用于网页布局。因为表格不但可以固定文本和图像的输出，而且可以快速方便的设置背景和前景色。,1.3.6,表格标志,表格标志的综合应用,表格标志的综合示例,意大利,英格兰,西班牙,AC,米兰,拂罗伦莎,曼联,纽卡斯尔,巴塞罗那,皇家社会,1.3.6,表格标志,*colspan,属性规定单元格可横跨的列数,尤文图斯,桑普多利亚,利物普,阿申纳,皇家马德里,.,拉奇奥,国际米兰,切尔西,米德尔斯堡,马德里竞技,.,1.3.6,表格标志,创建链接标志,标志,对,之间加入需要,链接的文本和图像（链接图像即加入,标志）,。,其,href,属性是必选的，,Href,的值可以是网址或相对路径，也可以,mailto:,形式,。,对于,第一种情况，语法为,这样就可以创建一个超文本链接了，例如：,这是我的网站,对于,第二种情况，语法为,，这就创建了一个自动发送电子邮件的连接，,mailto,：后边紧跟着要自动发送的电子邮件的地址（即,E-mail,地址），例如：,这是我的电子邮箱（,E-mail,）,*,更复杂的超级链接的内容我们将在第四章重点介绍,1.3.7,链接,标志,1.3.8,框架标志,1.3.9,表单标志,1.3.10,其他标志,适用于,IE,译为,“,跑马灯,”,。例如,status Bar,，其意思是指走动,或,滚,动,的文字，其参数设定较多。例如：,Hello,1.3.10,其它,(1)behavior,=scroll,设,定文字的卷动方式，可选值为：,scroll,循环滚动，默认值。,slied,单次滚动。,alternate,来回滚动。,(2)direction,=left,设,置文字卷动方向，,left,从右向左，,right,从左向右,up,从下往下,down,从上往下。,(3)bgcolor,=#0000ff,设置,滚动文本,框的,背景颜色。,(4)height,=30 width=150,设置的高度和宽度，如,30%,或,30,像素,等。,(5)loop,=infinite,设,定文字卷动的次数，其值可以是正整数或,infinite,infinite,是表,示无限次。,(6)scrollamount,=30,设定一次滚动总的时间量，数字越小滚动越慢，默认为,6,。,1.3.10,其它,2,.,用于设置背景音乐，只适用于,IE,浏览器，,常用,属性：,scr=“,音频文件,”,loop=“infinite”,循环次数，,infinite,为多次。,是放在,之间的标志，此处以公式的形式进行介绍。,该,网页,的作者，用于设置网页作者。,该,网页的关键字，作用于寻找引擎的登录。,这,一行较为实用，能在预定的秒数内自动转到指定的网址，原始码中的,10,表示,10,秒,。,1.3.10,其它,本章小结及作业,本章小结,本章主要介绍网页的基础知识、相关概念、设计原则以及,HTML,语言的相关内容。,作业,1,、教材第一章习题,2,、预习,1.4,实践演练,网页设计与制作,第,2,章,Dreamweaver,入门,2.1,操作界面简介,2.2,创建与管理本地静态站点,2.3,利用,FTP,服务器传输站点,2.4,实践,演练,教学目标：,教学目标：,熟悉,Dreamweaver,CS6,的操作界面，能够自定义,操作,界面,，,掌握菜单和面板两种操作方法。,掌握本地站点的创建和管理操作。,了解网页的制作方法,了解,用,FTP,与服务器间传输,站点,文件和方法,2.1,操作界面简介,第,2,章,启,动,Dreamweaver,CS6,时,会出现如图所示,的欢迎界,面,。,Dreamweaver CS6,的文档编辑界面（即主界面）主要由菜单栏、文档工具栏、文档窗口、状态栏、属性面板、面板组等部分组成，其中“文档窗口”是显示和编辑文档内容的工作区域，是操作的核心区域。,2.1 DreamweaverCS6,界面,2.1,Dreamweaver CS6,界面介绍,菜单栏,浮动面板,站点管理窗口,属性面板,文档窗口,文档工具栏,标题栏,一、菜单栏工具,（,1,）文件：用来管理文件。,（,2,）编辑：用来编辑文本。,（,3,）查看：用来查看对象，包括代码的查看、面板的隐藏和工具栏的显示等。,（,4,）插入：用来插入网页各种元素，例如图片、表格、框架及超级链接等。,（,5,）修改：具有对页面元素修改的功能。,（,6,）格式：用来对文本操作，包括字体、字形、字号、字体颜色、,HTML/CSS,样式、段落格式化、扩展、缩进、列表、文本的队旗方式等。,（,7,）命令：收集了所有的附加命令项，包括应用记录、编辑命令清单、获得更多命令、扩展管理、清除,HTML/Word HTML,、检查拼写和排序表格等。,（,8,）站点：用来创建和管理站点，包括新建站点、管理站点、上传誉存回合查看链接等。,（,9,）窗口：用来用来打开与打开所有的面板和窗口，包括插入栏、,“,属性,”,面板、站点窗口和,“,CSS,”,面板等。,（,10,）帮助：内含,Dreamweaver,帮助、,Spry,框架帮助、,Dreamweaver,支持中心、产品注册和更新等。,2.1 Dreamweaver CS6,界面介绍,二、布局切换,标题栏,上的,【,设计器,】,视图下,拉按钮，用于切换界面方案。,练习：,1,、在,【,编辑,】,菜单下找到,【,首先参数,】,，设置字体大小 为,12 pt,。,2,、将界面方案切换为,“,经典,”,。,3,、,在【窗口】菜单下找到【隐藏面板】命令将所有面板隐藏。,2.1 Dreamweaver CS6,界面介绍,2.2.2,文,档窗口,2.2.3,文档工,具栏,“,文档,”,工具栏包含各种按钮，它们提供各种,“,文档,”,窗口视图（如,“,设计,”,视图和,“,代码,”,视图）的选项、各种查看选项和一些常用操作（如在浏览器中预览）。,在“文档”窗口中通过“代码”视图、“拆分代码”视图、“设计”视图、“代码”视图和“设计”视图,(,拆分视图,),或“实时”视图查看文档。您还可以选择水平或垂直查看拆分“代码”视图或代码和“设计”视图。,(,默认是水平显示。,),2.1 DreamweaverCS6,界面,三、文档工具栏,视图按钮,：用于切换文档窗口的三种视图。,实时视图按钮,：显示不可编辑的、交互式的、基于浏览器的文档视图。,预览/调试按钮,：可以在浏览器中预览或调试当前文档，可以从弹出式菜单中选择一个浏览器。,刷新设计器按钮,：修改了网页文档的源代码后单击此按钮将刷新设计视图，使其显示修改后的效果。,标题文本框,：显示或输入网页文档的标题。,2.1 Dreamweaver CS6,界面介绍,四、,Dreamweaver,属,性面板,属性面板主要用于查看和更改所选择对象的各种属性，针对所选对象的不同，属性面板中的参数会有所不同。其中包含“HTML”和“CSS”两个选项。属性面板下部分为扩展面板，展开或收起扩展面板可以在属性面板右侧的空白处双击。,2.1 DreamweaverCS6,界面,五、,状,态,栏,文档窗口底部的状态栏中显示着当前被编辑文档的相关信息，同时还包含了一些显示控制功,能。,六、面板组,面,板组一般位于,Dreamweaver,界面的右侧，提供了编辑文档和设置操作时类似于工具栏式的功能集合,。,其,中除了“插入”面板之外，还有“,CSS,样式”、“,AP,元素”、“,数据,库”、“绑定,”、“,文件”和“资源”等多个面板，一般来说面板组中显示的内容与文档中的当前操作有关，可以在“窗口”菜单中设置要显示的面板,。,2.1 DreamweaverCS6,界面,面板组,“,展开,”,和,“,折叠,”,的界面。,插入”面板,包,含用于创建和插入对象,(,例如表格、图像和链接,),的按钮。这些按钮按几个类别进行组织，您可以通过从“类别”弹出菜单中选择所需类别来进行切换。当前文档包含服务器代码时,(,例如,ASP,或,CFML,文档,),，还会显示其他类别。,2.1 DreamweaverCS6,界面,“,文件”面,板,:,可,查看和管理,Dreamweaver,站点中的文件,。,2.1 DreamweaverCS6,界面,2.2,创建与管理本地静态站点,Dreamweaver站点是网站中使用的所有文件和资源的集合。,站点中包括网页文件、图片文件、服务器端处理程序和Flash动画文件等。,Dreamweaver中的站点一般分为本地站点和远程站点两种。,本地站点,：,用于存放整个网站内容的本地文件夹，是用户的工作目录，一般制作网页时只需建立本地站点。,远程站点,：,是指存储于服务器上的站点。,2.2.1,站点概述,（,1,）使用文件夹来保存文档，分门别类来存储文件。每个站点对应一个根文件夹，其中包含多个子文件夹。,（,2,）使用合理的文件或文件夹名，首页名称。,文件名必须采用英文、数字、字符或汉语拼音，不要用中文，以防引起链接和浏览错误。,首页建议都采用：,index.html,文件名尽量有意义（含义）便于日后管理和维护。,（,3）,目录层次不要太深，最好,3,级以内，不要超过,5,级。,（,4,）将本地和远程站点设置为相同结构。,站点的,设计,原则：,2.2.2,、创建本地,站点,新,建,站点,（,1,）选择“站点”,“新建站点”,命令,，打开“站点设置对象”,对话框。,（,2,）在对话框中，,输入“站点名称”，“本地站点文件夹”。,（,3）,保存站点后，返回网页文档，查看浮动面板中站点文件夹。,例,1,：,创建一个名称为,“,会展中心,”,的本地站点，并保存在,F:,hzzx,文,件夹中。,2.2,创建与管理本地站点,输入,输入,2.2.3,管理本地站点,1、,编辑站点,例,1,：将所创建的,“,会展中心,”,站点修改为,“,世纪环球中心,”。,2、,复制和删除站点,例,2,：将,“,世纪环球中心,”,站点进行复制，并将其修改为,“,世纪环球中心,2”,站点，然后将,“,世纪环球中心,”,站点删除。,2.2,创建与管理本地站点,3、,导入和导出站点,例,3,：将,“,世纪环球中心,”,站点导入到桌面，以,世纪环球中心,.ste,文件命名。,例,4：,将,“,世纪环球中心,.ste”,站点导入,Dreamweaver,中,删除站点,修改站点,复制站点,导出站点,导入站点,新建站点,2.2,创建与管理本地站点,2.2.4,、编辑站点,内容,站,点的,内,容包括是网站用到的所有文,件与文件,夹，编辑站点内容指：新建文件或子文件夹，以及对文件或文件夹的管理操作。,1.,“新建文”,或件“新建文件夹”,。,2.,站点文件和文件夹的管理,对于建立的文件和文件夹可以进行：,移动、复制、重命名和删除等操作,3.,创建,“,世纪环球中心,”,网站内容，如图,创建本地站点,任务要求,：,创建如,下,图所示的个人站点，站点根目录为,E:mywebsite,，站点中包含了三个一级子文件夹,“,css,”,、,“,fonts,”,和,“,images,”,，其中,“,images,”,文件夹用于存放网页中使用的图片文件。,“,index.html,”,为网站中的主页文件，,“,说明,.txt,”,为有关网站说明的文本文件,实践演练一,P46,【说明】,1首先在Windows的文件夹窗口创建站点的文件夹结构。,2从网络上下载一个图片文件，存入,E:mywebsite images,文件夹下。,3启动Dreamweaver。,2.4.2,在“设计”视图编辑网页文档,任务要求,:,打开,“,文件,”,面板中的,index.html,文档，在文档窗口,“,设计,”,视图中编辑网页的内容，如,教材,图,2-37,所示。网页中的元素有,文本、水平线、图片,。,【,目的,】,熟悉,Dreamweaver,“,设计,”,视图下网页文档的编辑方法和过程，熟悉,Dreamweaver,菜单及面板中相关操作命令,。,【,说明,】,打开,mywebsite,站点根目录下的,index.html,主页文档，或者新建一个网页文档练习本任务。准备两张图片，一张用于做网页背景，一张做网页内容。,实践演练二,P47,教师端：,运行,FTP,文件传输服务器软件,学生端：,打开“站点设置对象”对话框,：,【,站点,】,菜单,【,管理站点,】,选择当前站点,单击,【,编辑,】,按钮,选择,【,服务器,】,点击添加服务器,【,】,。,设置服务器参数,测试服务器连接,：点击,【,测试,】,按钮,上传文件至,教师机,实践演练三,上传站点到教师 机,设置服务器参数,实际操作必填项,:,FTP,地址：,即教师机,IP,地址,根目录：,你,班级文件夹,你学号文件夹,如：,S17121stu01,“文件”面板,与传输站点相关的按钮,连接到远端主机,下载文件,上传文件,展开以显示本地或远程站点,显示远程服务器与本地站点的双窗模式,第,3,章 基本网页制作,本章内容,3.1,文本编辑,3.2,图像使用,3.3,多媒体对象的使用,对于,DW,创建的每个网页，可以使用“页面属性”对话框指定网页的布局和格式属性，“修改”“页面属性”。,3.2.5,设置网页背景,1,设置网页背景颜色,网页背景颜色在页面属性对话框里设置，步骤如下：,（,1,）选择“修改”“页面属性”命令，打开“页面属性”对话框，选择“外观（,CSS,）”类别。,（,2,）单击“背景颜色”旁边的,图标打开调色板，在调色板中鼠标指针变成“吸管”的形状。,（,3,）在所给颜色内选取一种颜色后单击“确定”按钮，关闭“页面属性”对话框。,设置页面属性,2,设置网页背景,图像,设置背景图像的方法如下：,（,1,）选择“修改”“页面属性”命令，打开“页面属性”对话框。,（,2,）单击“背景图像”右边的“浏览”按钮，打开“选定图像源文件”对话框。,（,3,）选择一幅图像后，在“重复”下拉列表框中指定背景图像在页面上的显示方式，单击“确定”按钮，所选择的图像将作为网页背景图像。,设置页面默认字体的大小、颜色等。,网页的边距、链接等,设置页面属性,3.1,文本编辑,文本处理主要包括：输入文字、设置文字大小、设置字体、设置文本颜色、设置文本对齐