DREAMWEAVER笔记.doc

DREAMWEAVER笔记第一节DREAMWEAVER的基本操作DREAMWEAVER是梦幻工厂，是一个所见即所得的网页设计软件，只需用添加合适元素及属性就可以制作漂亮网页一、界面菜单栏、快捷菜单栏、三咱视图（代码、拆分、设计）、浮动面板属性栏CTRL+F3，F4可使页面最大化，F12预览网页HTML保存格式为*.html ；模板保存为：*.dwt一般保存一个网页时，文件名一定要是英文，或英数结合，不能是汉字或单个的数字，把首页名称命名为INDEX二、一个网页的基本构成00000sldgjs 表示用来限定一个HTML页的开始和结束表示构成HTML文档的头部表示该网页标题，在网页标题栏显示 用来定义HTML文档的主体部分（即内容）HTML出现形式：首尾标记必须成对出现，起始标记必须出现，结尾标记是可选的，HTML不区分大小写，一般情况下为小写一个HTML标记有文件的元素、元素的属性、属性值三个部分组成三、HTML头部信息头部信息指包含在网页代码head和标记之间有于定义网页基本信息的那部分代码，调出文件头标签：CTRL+SHIFT+H头部信息主要包括三个元素：、1、有两个属性：name有两个属性值：keyword：关键字，指可以帮助搜索找到自己的网页 description：说明，描述信息 http_equir有一个属性值：refresh：刷新，刷新的属性必须用HTTP-EQUIR2、指定义文档的基础链接地址，文档中所有超级链接的路径都以该基础链接地址为参数，URL（Universal Resource Location）统一资源定位器3、指定义了当前文档与其他资源之间的关系想用文件头元素：利用插入/HTML/文件头标签HTML（Hyper Text Markup Language）超文本标记语言WWW(World Wide Web)万维网第二节 文本代码的认识1、加粗标记、语法格式：文本内容首尾标记必须成对出现2、下划线标记语法格式：文本内容首尾标记必须成对出现3、强调标记、语法格式：文本内容首尾标记必须成对出现4、强制换行标记语法格式：文本内容没有尾标记快捷键：SHIFT+ENTER5、段落标记语法格式：文本内容尾标记是可选的Align是对齐属性属性值： center justify left right6、级别标题（h1-h6）,从h1-h6文本依次递减语法格式：文本内容首尾标记必须成对出现第三节 站点的管理及页面属性站点分为远程站点和本地站点本地站点：就是建立在本地计算机的一个文件夹远程站点：是建立在远程服务器上的一个文件夹创建一个站点的必备条件：1、必须先建立一个文件夹，点击站点/新建站点/弹出站点对话框，在第一个空格内输入名称点击下一步，之后选择，不使用服务器技术，点击下一步，选择本地副本完成后上传，把文件存储在什么位置(你所建立的文件夹中)，点击下一步，不连接到服务器，下一步，完成2、进入你所在的站点，新建一个文件夹名为images（这个文件夹用来放置需要的所有图片），再建一个名为pages的文件夹（放置各个网页）站点对话框说明：自动刷新本地文件列表：指明当不使用站点文件管理器窗口把文件拷入本地站点时，是否自动刷新本地文件夹列表。默认图像文件夹：站点中存在默认图像文件夹HTTP地址：网站要上传到远程站点的地址，便于区分内部链接和外部链接启用缓存：在移动、改名和删除文件时，迅速地更新链接HTTP（Hyper Text Text Pact）超文本传输协议FTP文件传输协议第四节 插入图片、导航条第五节 超级链接连接路径的类型：绝对路径、相对路径、基本根目录路径绝对路径指使用完整的URL（统一资源定位器）来连接路径的方式绝对路径的形式：HTTP：/网址使用绝对路径的优点：路径同链接源路径无关：不随超级链接所在文档位置的改变而改变使用绝对路径的缺点：不利于测试，使用绝对路径会因为网页还未上传到远程站点而不能顺利完成测试相对路径：指使用目标与源之间的相对位置关系来表示链接路径注意：使用相对路径，需要超级链接的目标网页与超级链接所在网页位于相同的站点中，在同一个站点内的链接就是相对路径相对路径的优点：只要站点中文件结构不发生变化，那么超级链接的路径总是有效相对路径的缺点：对于移动了位置的文档其中的相对路径都会失效基本根目录路径：是对绝对路径和相对路径这两种路径的结合超级链接的类型有四种：1、文档链接：内容2、命名锚链接：用于定义文档内部的一个指定位置，一般在一个长文档中实现内容的快速检索和定位（内部链接）3、电子邮件链接：4、脚本链接：是执行Javascript代码或调用Javascript函数可设置在用户单击特定对象时验证表单计算或设置页面参数。链接Alert:指对话框内将要弹出的内容显示命名锚标记：编辑/首选参数/不可见元素/选中第六节 表格初步认识第七节 表格的操作一、表格的三种模式：标准模式、扩展模式、布局模式扩展模式又称为扩展表格模式，该模式临时向文档中的所有表格添加单元格边距和间距，并且加粗表格的边框以使编辑操作更加容易，可以精桷地选择表格或表格中的对象以及精确地放置光标插入点布局模式：可以使用布局表格和布局单元格来对页面进行布局，用来对网页大体设计做出框架，布局模式：绿色按钮用来画整体表格，蓝色按钮画布局单元格二、表格的其它操作1、可以从外部导入表格：插入/表格对象/导入表格数据2、对表格外观修改：命令/格式化表格3、对表格进行排序：命令/排序表格第八节 表单表单是网页中实现交互功能的主要途径，主要用来实现浏览网页的用户与服务器之间的信息交流服务器端脚本是用复杂的程序语言实现的，常用的服务器端脚本有：ASP、PHP、JSP用户与服务器之间的相互交流：是用户在表单中输入的信息传递到服务器，服务器即运行脚本进行处理，然后将执行结果返回到浏览器，一般情况在进行注册、登录、网上投票时都需要使用表单表单标签： 属性：1、method: 属性值：get:表单中的信息形成一个新的URL发送给服务器处理程序，表单内容附加到URL之后，对信息长度进行了限制，不具备保密性 Post：指用户在表单中填写的的数据包含在表单的主体中，在传递时对字符没有限制，一般情况下默认是用post方法传递数据2、action：指一个用于接收和处理表单数据的程序3、enctype：用于设置发送表单到服务器的媒体类型 属性值：application/x-www-form-urlencoded：默认的编码形式multipart/form-data：用mine编码形式text/plain：以纯文本形式传递信息，只在method为post时有效4、target：设置表单信息返回的窗口二、表单控件：输入控件、选择控件、按钮控件、文件控件、其它控件1、输入控件标签：input 属性：type:表示控件的类型 属性值：file:文件域 Hidden:隐藏域 Image:图像域 Password:密码域 Reset:重置按钮 Submit:提交按钮 Text:文本域 Checkbox：复选框 Radio:单选框表单域其中一个标签，在输入标记之前,有尾标签第九节 表单（二）隐藏域用于存储用户输入的信息，当用户再次访问该网页时，可以使用这些信息（输入标记） Select：菜单和列表标签（选择域）Option：首尾标记成对出现，和列表标签同时出现Fieldset：注册信息的标签列表和菜单域常用来在选项较多时进行单选或多选跳转菜单域是在菜单的基础上添加了行为而形成的通常用来实现导航图像域可以制作图像类型的提交按钮客户端脚本就是在浏览器中运行的脚本，客户端脚本常用来产生一些网页特效或简单的交互功能，可以放在HTML代码中的任何地方，通常在HTML文件的头部之间，创建变量、数组及自定义函数，而在HTML文件主体执行运算和进行显示，客户端脚本必须包含在标记之间例：第十节 框架框架作用：在于将浏览器窗口化分成多个区域，每个区域显示一个HTML文档框架，最主要的作用在于实现网页的导航框架包含两种元素：框架集（frameset）、框架（frame）Rows指定框架布局由一组逗号分隔的像素，百分比相对长度的列表,默认值是百分之百，即指一行Cols指定垂直框架布局，由一组逗号分隔的像素，百分比相对长度列表,默认值是百分之百，即指一列Src：指链接可以是页面文件或图的地址，地址类型可以是相对地址也可以是绝对地址Scrolling：指控制滚动条显示，属性值：1、no：在任何情况下都不显示滚动条 2、yes：总是显示滚动条 3、auto:自动，决定是否显示滚动条，若页面内容超出了页面范围，则显示滚动条，反之隐藏Noresize：指该框架不能用鼠标拖动边框的方法改变尺寸框架文档的兼容性语法：替换显示内容首尾标记必须成对出现用法：若浏览器不支持框架结构，或者用户关闭浏览器的框架显示功能，需要用替换显示元素第十一节 层的应用层的作用：可以配合表格进行布局管理，有时可以完全取代表格，层在网页中相当于一个容器，可以放置其它页面元素，而层本身可能定位在页面中的任意位置1、层标签：、首尾成对出现属性：visibility可见性：四个属性值：inherit继承：如果该层嵌套在其他层中，则使用该层父级的可见性visible可见：无论该层的父级是否可见，该层总是可见hidden隐藏：无论该层的父级是否可见，该层总是不可见和标签的区别：不支持层的浏览器在标签的前后放置额外的换行符，是块级别的元素，则是内联元素，为了保持层的相对独立性，一般情况下使用标签第十二节 行为面板行为（Behavior）由事件（Event）和该事件所触发的动作（Action）组成。行为将javascript代码放置在文档中，以允许访问者与网页进行交互事件（Event）：是浏览器生成的消息，指示该页的访问者执行了某种操作OnMouseOver：当访问者将鼠标指针移动某个链接上时，浏览器为该链接生成一个onMouseOver事件OnClick：当访问者单击链接时，浏览器为该链接生成一个OnClick事件，双击选定元素时触发该事件OnLoad：在图片或页面完成装载后触发该事件OnChange：当改变了页面上的值或文本域的值后单击页面其他位置时触发该事件OnSubmit：确认表单时触发该事件OnSelect：在文本区域选定文本时触发该事件OnBlur：当指定元素不再作为用户交互的焦点时触发该事件动作（Action）由预先编写的javascript代码组成，这些代码执行特定的任务，例如：打开浏览器窗口、弹出提示信息、播放声音、显示或隐藏层等。打开浏览器窗口：可以在一个新窗口中打开指定的URL，可以指定该窗口的大小，以及是否显示导航条、地址工具栏、状态栏和菜单栏等拖动层：可以拖动网页中的层，可以实现网页拼图游戏，一般在网页加载完毕后即可对层进行拖动第十三节 对象的嵌入和模板一、 对象的嵌入1、嵌入FLASHFLASH制作的矢量动画具有文件小，质量好的优点，在网络中运用极为广泛，主流浏览器都对FLASH动画提供了较好的支持，在DREAMWEAVER中嵌入FLASH对象是常用的一种对象嵌入方法，FLASH动画类型为*.SWF在代码中插入FLASH动画的标签是,其中标签是Microsoft 为ActiveX控件定义的，标签是Netscape Navigator为插件定义插入FLASH属性:品质高低属性 设置是否循环播放 设置是否自动播放 设置FLASH透明度2、嵌入视频视频文件在网页中主要有两种用途：一是使用指向视频文件的超级链接，用户可以单击超级链接下载文件；二是在线放映视频文件，这需要用户端安装有支持播该视频文件的播放器插件（视频文件格式*.mpg）3、嵌入声音下面列出常见的声音文件格式以及每种格式在网页设计上的优缺点（1）.midi（乐器数字接口）用于乐器，许多浏览器都支持midi文件并且不要求插件，但midi文件不能被录制并且必须使用特殊途径的硬件的软件在计算机上合成（2）.wav该格式文件具有较好的声音品质，许多浏览器都支持此类格式文件并且要求插件，但其较大的文件大小严格限制了可以在网页使用的声音的长度（3）.mp3这是一种压缩格式，它可令声音文件明显缩小，但声音品质非常好，MP3技术使得可以对文件进行“流式”处理，以合访问者不必等待整个文件下载完成即可收听该文件，若要播放MP3文件，访问者必须下载并安装辅助应用程序或插件(4).aif该格式与wav格式类似,也具有较好的声音品质,大多数浏览器都可以播放它并且不要求插件,但文件一般较大(5)嵌入shockwave对象shockwave是由Macromedia公司制定的一种用于在网上进行交互的媒体标准,采用压缩格式,可以使用Macromedia Director创建的媒体文件被快速下载,并在浏览器播放(6)嵌入ActiveX控件ActiveX控件是可以充当浏览器插件的可重复使用的组件,Dreamweaver中的ActiveX对象使设计者可以为访问者的浏览器中的Active控件参数二、 模板模板可以生成一系列具有相同基本结构的文档，设计者可将网页中会有的部分，如同一栏目下的导航条、图标和页面布局等提出来形成一个模板如果说没有在站点目录下建立Template文件夹，则Dreamweaver将自动在指定的站点目录下创建一个Template文件夹，并将创建的模板文件保存到该文件夹中（1）对模板定义区域首先打开模板文件选择需要设置为可编辑区域的文本或内容，单击“插入/模板对象/可编辑区域”重复区域即文档中重复显示的部分，如可以重复显示的表格行，并可要重复表格中设置交替的背景色可选区域是在创建模板时定义的，在基于模板创建网页时用户可控制是否显示其内容可编辑的可选区域，即允许用户在可选区域内编辑内容，若该可选区域中包含文本或图像，则用户即可以控制内容是否显示，又可以进行编辑（2）应用模板新建文件，按F11调出资源面板，选中里面的模板，选中模板，右键单击“应用”即可，或右键单击“从模板新建即可”（3）库的使用在资源面板里可以存储代码、FLASH等，选择一段代码，点击资源面板下“新建库项目”，即可把选中的内容作为库存储起来，在代码视图中显示为黄色，供其它文件引用（4）如何分离模板可选中模板，在“修改/模板/从模板中分离”即可把模板他离出来第十四节 CSS样式一CSS即层叠样式表（Cascading Style Sheets），它是一种对文档进行格式化的高级技术，CSS样式使网页设计者能更好地控制网页设计，同时改进功能，以提供辅助功能并减小文件大小最简单的样式是在属性栏里的样式，当定义了一个文本的样式（大小、颜色）之后，自动生成了一个样式，这种样式一般都是内嵌型的“内嵌式的样式表”在head区之后，以开头CSS样式分为三类：类、重新改变标签的样式、伪类第一种类：这种可以应用到各种标签中，在代码视图中以表示第二种类：主要用于定义整个网页布局第三种：伪类ID,这种一般应用于定义链接样式，定义DIV层的标签样式，或者定义某个对象的样式如（表格、表单）类的命名：一种以英文为开头，后面为类名，如：.btn，打开类样式对话框之后，可以设置类型、背景、方框等属性，然后选中该对象，如一个按钮，在属性栏里选中.btn应用即可二种示对整个网页进行修改，可在里面输入一些要修改的标签，直接对标签修改三种需要输入某些特定对象DIV层或表单等，在上面填写该对象名称时注意以#号开头，有时自动填入的名称是错误的需要重填，然后设计样式，如果在前面输入“.”,那这样的命名就相当于第一种类的命名（对设置链接、表单、表格、DIV标签应用较多）使用外挂样式CSS样式，在新建CSS样式时，选择“新建文件”保存在站点下的STYLE文件夹下，第一个一般起名为basic.css,如有更多，可以再新建一个定义CSS样式区块样式：垂直对齐：设置对象的垂直对方式 空格：设置如何处理对象中的空格 文字缩进：设置每一段第一行的缩进程序，也可以输入负值，但有些游览器不支持 显示：设置是否显示对象以及以何种方式显示方框样式：浮动：设置应用样式的对象是怎样围绕对象浮动的1、 左对齐：将对象放置在左页面空白处2、 右对齐：将对象放置在右页面空白处 清除：设置对象的边不允许分层1、 左对齐：表明不允许分层出现在应用样式的对象左侧2、 右对齐：表明不允许分层出现在应用样式的对象右侧边界：在该选区中可以定义应用样式的对象边界和其他对象之间的空格数填充：在该选区中可以定义应用样式的对象内容和对象边界之间的空格数列表样式：类型：设置项目符号或编号的外形 项目符号图像：设置该选项目符号图像 位置：设置列表项文本是否换行和缩进以及是否边缘对齐定位样式：类型：设置对层的定位方式 显示：设置层的显示状态 溢出：设置内容超出定义的大小范围时如何处理 z轴：设置层的堆叠顺序 定位：设置层的位置大小 剪辑：设置层的可见区域扩展样式：分页：用来设置打印页面时在样式所控制的对象之前或者之后强行分页 视觉效果：用来设置光标以及滤镜效果 光标：设置当光标经过样式所控制的对象时光标改变的形状 过滤器：设置对样式所控制对象使用的特殊效果第十五节CSS样式二怎样定义不同的伪类要实现不同的的链接颜色色彩方案，有两种方法：一种是采用框架的方法，一种是采用CSS样式的方法采用框架，把不同链接颜色方案的文字放在不同的框架内，需要拆分框架采用CSS样可以使用网页在一个框架情况下，应用不同链接色彩方案，主要原理是用类和伪类，定义为页面属性里的链接，链接类以A表示类四个特性：链接（a:link）、已访问（a:visited）、鼠标停留（a:hover）、鼠标激活（a:active），其中某一部分的链接可以自定义一个类，如打开样式面板，选择类，输入“gray”,打开类设置对话框，设置字体大小，颜色等属性，再次点击CSS样式面板，新建一个伪类，输入“a.gray:hover”定义该类变换图像链接，应用该类，先把相应文字加上链接，可以选择下方的标签,应用伪类，也可以直接选择样式表的类名，当应用该类之后，在代码视图中，链接标签之前加上一个表示应用类第十六节 WEB服务器和上传网页一、web应用程序可以同一系列相关的静态和动态网页组成，可以实现与访问者之间的交互，被广泛应用于搜索引擎，门户网站、电子商务、用户调查反馈等众多领域当WEB应用程序接收到静态网页的请求时，服务器需将该页的内容直接发送到发出请求的浏览器，当WEB应用程序接收到一动态网页的请求时，该网页中的程序代码将首先被解释执行，处理完成后，服务器自动将生成静态网页内容返回给请求的客户浏览器二、WEB服务器程序即指安装能够提供WEB服务的服务器程序（有ASP指Active Server Pages和IIS Internet Information Server）安装WEB服务器开始控制面板添加删除程序添加Windows组件，选择Internet信息，服务（IIS），单击下一步，即可完成三、 配置远程站点要想将站点上传到远程服务器上，首先需要配置远程站点（1）将本地站点上传到远程站点的方法FIP：通过FTP协议连接到WEB服务器在其对话框中的“主机目录”指在文本框中输入空间提供者提供的专门用来存放您的站点的文件夹名称，“登录名密码、主机目录”这些信息都可以在申请网站空间时获得本地/网络：用于在本地计算机或网络工作组中运行WEB服务器典型的有（IIS和PWS）其对话框中“远端文件夹”指在存放远程站点的文件夹四、 发布站