Dreamweaver网页设计

第8章DreamweaverCS4网页制作技术8.1DreamweaverCS4基础8.2站点的创建与管理8.3创建网页基本元素8.4表格的应用8.5CSS样式的使用8.6框架的使用8.7添加多媒体元素8.1DreamweaverCS4基础（一）网页制作基础知识（二）AdobeDreamweaverCS4介绍（一）网页制作基础知识一、网站与网页由于互联网具备同时传送文字、动画、图形、声音等多媒体的能力，使之成为当今最流行的媒体。而形式各异、内容繁杂的网页是这些信息的载体。那么什么是网页？什么是网站？网页与网站究竟有哪些异同？网页包含哪些基本构成要素？网页（WebPage）实际上是一个文件，网页经由网址（URL）来识别与存取。当浏览者输入一个网址或单击某个链接，在浏览器中显示出来的就是一个网页。网站（WebSite）是由网页构成的一个具有相关联系的页面集合。一个网站少则由几个网页，多则由成百上千个网页组成。有的网站内容众多，如新浪、搜狐等门户网站；有个网站只有几个页面，如个人网站。在构成网站的众多网页中，有一个页面比较特殊，称为首页（HomePage）。网页制作基础知识二、网页类型静态网页所谓静态网页，就是网页里面没有程序代码。运行于客户端的程序、网页、插件和组件等都属于静态网页，在网络中看到的静态网页通常是以htm或html为后缀名的，俗称HTML文件。在浏览扩展名为htm的网页时，网站服务器不会执行任何程序就直接把文件传递给客户端的浏览器直接进行编译工作，除非网站管理人员更新过网页的内容，否则网页是不会因为执行程序而出现不同的内容的。动态网页所谓动态网页，就是网页内含有后台程序代码。运行于服务器端的程序、网页和组件等都属于动态网页，它们会随客户、时间及需求的不同，返回不同的页面。通常以扩展名asp或aspx存储，表示该网页是ActiveServerPages(ASP)动态网页。此外还有以php或jsp作为后缀名的网页。在浏览这种网页时，必须由服务器端先执行程序，再将执行完的结果下载给客户端的浏览器。网页制作基础知识三、网页的组成元素1.文本因为网页中的信息以文本为主，所以文本是网页中运用最广泛的元素之一。网页的设计与制作者可以通过设置字体、字号、颜色和底纹等属性来改变文本的视觉效果。2.图像在网页中使用图像可以丰富网页中的内容。在网页中的图像文件格式有很多种：GIF,JPEG,BMP,TIFF和PNG等，目前应用最为广泛的是GIF,JPEG和PNG。由于受网络速度的限制，网页中的图像往往被分割成多个部分，再利用排版技术将分割的图像拼合，以提高图像在浏览器中的显示速度。GIF：GraphicsInterchangeFormat，称为图像交换格式，采用LZW无损压缩算法。GIF图像文件不仅支持透明的背景色和动画格式，还支持256种颜色。由于GIF特定的存储方式，故而它可以支持有大面积单色区域的图像。通常网站中的LOGO、按钮图片和文字图片都是用这种格式。JPEG：JointPhotographicExpertsGroup，是由联合图像专家组开发的图形标准，采用有损的压缩算法。JPEG图像文件不支持透明的背景色和动画格式，它只支持24位真彩色。JPEG用于表现色彩丰富、形状复杂的图像。网页制作基础知识三、网页的组成元素2.图像JPEG：JointPhotographicExpertsGroup，是由联合图像专家组开发的图形标准，采用有损的压缩算法。JPEG图像文件不支持透明的背景色和动画格式，它只支持24位真彩色。JPEG用于表现色彩丰富、形状复杂的图像。GIF：GraphicsInterchangeFormat，称为图像交换格式，采用LZW无损压缩算法。GIF图像文件不仅支持透明的背景色和动画格式，还支持256种颜色。由于GIF特定的存储方式，故而它可以支持有大面积单色区域的图像。通常网站中的LOGO、按钮图片和文字图片都是用这种格式。PNG：PortableNetworkGraphics，便携式网络图形，是一种无损压缩的位图图形格式，支持索引、灰度、RGB[A]三种颜色方案以及Alpha通道等特性。PNG使用从LZ77派生的无损数据压缩算法。PNG存储灰度图像的深度可多到16位，存储彩色图像的深度可多到48位，并且还可存储多至16位的α通道数据。PNG的开发目标是改善并取代GIF作为适合网络传输的格式而不需专利许可，所以被广泛应用于互联网中，一般应用于JAVA程序、网页或S60程序中，因为它压缩比高，生成文件容量小。网络通讯中因受带宽制约，在保证图片清晰、逼真的前提下，网页中不可能大范围的使用文件较大的bmp、jpg格式文件，gif格式文件虽然文件较小，但其颜色失色严重。而PNG格式图片因其高保真性、透明性及文件体积较小等特性，被广泛应用于网页设计和平面设计中。PNG格式图片通常被我们制作成图片素材来使用，因为PNG图片在网页加载过程中占带宽较小，颜色逼真，下载一次可重复使用。网页制作基础知识三、网页的组成元素3.动画Flash动画：使用Flash制作出的动画质量较好，许多网页中的大型、复杂的动画一般使用Flash制作。Flash动画在浏览器中播放时需要安装插件MacromediaFlashPlayer等，否则不能播放。GIF动画：不需要插件，GIF动画通常用于制作简单的、只有急诊图片的交替动画。如站标、广告条、友情链接的LOGO等。网页制作基础知识三、网页的组成元素4.超链接超链接是指从一个网页指向一个目标的链接关系。这个目标可以是另一个网页，可以使相同网页上的不同位置，也可以是一幅图片、一个电子邮件地址、一个文件，甚至是一个应用程序。超链接是网页中最常用的一种元素。一个网站由若干个单独的网页文件组成，这些单独的网页由超链接结合起来，形成一个紧密联系的整体。超链接可分为文本超链接，图像超链接，电子邮件超链接，锚点链接，多媒体文件超链接和空超链接等。当鼠标移动到超链接上时，会变成一只小手的形状。网页制作基础知识三、网页的组成元素5.表格Flash对网页进行排版主要是用表格来完成，通过表格可以精确地控制各网页元素在网页中的位置。这里所说的表格并不是直观意义上的表格，它所指的范围更广泛。一般表格的边框不在网页中显示。8.表单表单是网页中实现交互的元素。表单用来接收浏览者在浏览器端的输入，将这些信息发送到设计者设置的目标端。表单由具有不同功能的表单对象组成。最简单的表单也要包含一个输入区域和一个提交按钮。浏览者填写表单的方式包括文本输入、单选按钮与复选框、下拉列表等。网页制作基础知识四、网站建设的基本流程规范的网站建设应遵循一定的流程，主要由规划设计阶段、实施发布阶段、评价阶段组成，各个阶段的具体环节如图所示。网页制作基础知识五、HTML1.HTML（HypertextMarkupLanguage）是一种Web网页元素的标记语言规范，称为超文本标记语言。所谓“超文本”，是指页面内可以包含图像、链接、多媒体对象、程序等非文本元素。所谓“标记”，是指它不是程序语言，而是由文字和标签组合而成。HTML文件是纯文本文件，可以由任意文本编辑器编写，文件的扩展名为“html”。2.HTML文档：一般使用3对HTML标签构成htmlhead头部信息/headbody正文信息/body/html3.HTML标签：单标签：br,hr双标签：标签内容/标签文本标签：h1/h1…h6/h6,h1align=“center”一级标题/h1图像标签：imgsrc=“images/dog.jpg”align=“right”border=“1”width=218height=273表格标签：table/table,caption/caption,tr/tr,th/th（二）AdobeDreamweaverCS4介绍2005年，Macromedia公司被Adobe公司收购之后，不久发布了DreamweaverCS3版本软件。到2009年，Adobe公司对DreamweaverCS3版本做了全面的界面改版，增添许多新功能，发布了DreamweaverCS4。AdobeDreamweaverCS4是一款专业的HTML编辑软件，用于对Web站点、Web页和Web应用程序进行设计、编码和开发。无论是喜欢直接编写HTML代码还是偏爱在可视化编辑环境中工作，Dreamweaver都会提供众多工具，丰富用户的Web创作体验。利用Dreamweaver中的可视化编辑功能，可以快速地创建页面而无需编写任何代码。不过，如果您更喜欢用手工直接编码，Dreamweaver还包括许多与编码相关的工具和功能。并且，借助Dreamweaver，还可以使用服务器语言（例如ASP、ASP.NET、JSP和PHP）生成支持动态数据库的Web应用程序。一、AdobeDreamweaverCS4的特点和新增功能特点：所见即所得制作效率高网站管理方便兼容性好可扩展性强相对于前期版本DreamweaverCS4增加了一些新的功能：1.全新的工作界面2.新增【实时】视图3.针对Ajax和Javascript框架的代码提示4.新增【相关文件】5.新增【代码导航器】8.InContextEditing7.CSS最佳做法8.HTML数据集9.Photoshop智能对象10.Subversion集成二、DreamweaverCS4的工作界面DreamweaverCS4的工作界面与Dreamweaver以前版本有所差别，主要由菜单栏、文档工具栏、编辑区、状态栏、属性检查器、面板组等部分组成，而插入栏则整合在面板组中，如图所示。8.2站点的创建与管理一、站点的概念二、创建站点三、管理站点中的文件四、实践练习一、站点的概念所谓站点，可以看做一系列文档的组合，这些文档之间通过各种链接关系，以目录树的形式将网站结构显示出来，使网站建设、网页设计人员能够一目了然地了解该网站和内容的嵌套层次。站点是一个管理网页文档的场所。简单地讲，一个个网页文档连接起来就构成了站点。站点可以小到一个网页，也可大到一个网站。设计网页之前应先创建站点。DreamweaverCS4具有强大的站点管理功能，可以实现站点的即时修改，帮助用户管理和维护整个站点的所有文档，它可以自动更新和修复文档中的链接和路径，以及实现远程站点和本地站点文档的同步与更新。Dreamweaver站点一般由3个部分（或文件夹）组成，具体取决于开发环境和所开发的Web站点类型。本地根文件夹：本地站点远程文件夹：远程站点测试服务器文件夹二、创建站点用Dreamweaver制作网站，首先第一步就是创建站点，为网站指定本地的文件夹和服务器，使之建立联系。此外，Dreamweaver提供的“管理站点”功能，还可以对新创建的站点进行管理。执行【站点】—【新建站点】执行【站点】—【管理站点】1.创建本地站点和远程站点本地站点是指在本地计算机上用来存放网站的所有文件的文件夹。远程站点是在服务器上存放网站所有文件的文件夹。通过设置远程站点的地址、登录名等信息，建立该服务器与本地站点的联系，在本地站点与远程站点之间传递文件。其具体操作步骤如下：2.使用“管理站点”对话框在上一小节创建站点过程中，已经接触到“管理站点”对话框。使用“管理站点”对话框，可以管理多个站点，实现对站点的创建、编辑、复制、删除、导入和导出。导出的站点文件为*.ste。三、管理站点中的文件学会如何创建站点后，新创建的站点是空的或杂乱的，下面将学习在Dreamweaver中如何管理站点中的文件，主要介绍两种方法：使用“文件”面板和使用“站点地图”。一般站点由首页（index.html）、图像文件夹（