教学课件·网页设计与制作第三版.ppt

1、网页设计与制作第三版项目一项目一搭建网站前期准备工作搭建网站前期准备工作初识网页相关概念初识网页相关概念1构建网站结构构建网站结构2明确网页设计的原则明确网页设计的原则3了解网站建设流程了解网站建设流程4了解网页制作工具了解网页制作工具5返回返回上一页上一页下一页下一页网站是网页构成的集合，搭建网站的主要任务是设计网页。通过本项任务的学习，了解网页的相关概念，包括网页、网站、主页、静态网页、动态网页、网页浏览机制等，从而为网页设计打下基础。任务任务1 1初识网页相关概念初识网页相关概念返回返回上一页上一页下一页下一页任务任务1 1初识网页相关概念初识网页相关概念网页又称Web页，它是网站的主要

2、组成部分，是被浏览器解读并显示的HTML标准文件，由文字、表格、图片、声音、视频、动画以及各种功能按钮组成。一个网页上的文字、图片、按钮又可以是指向其他页面的链接点，这些链接点称为超级链接(简称超链接)。当用户点击这些超链接时，就会在浏览器中显示被指向的页面。网页的超链接功能为人们从海量的网络信息资源中获取有用信息提供了简便途径。返回返回上一页上一页下一页下一页 网站(Web Site)，简而言之，就是一组具有共同主题的网页通过超链接的形式所组成的信息系统。网站的概念可以从以下四个方面加以理解。任务任务1 1初识网页相关概念初识网页相关概念返回返回上一页上一页下一页下一页任务任务1 1初识网页

3、相关概念初识网页相关概念1从信息组成上来看2从存放形式上来看3从客户访问上来看4从运行管理上来看返回返回上一页上一页下一页下一页任务任务1 1初识网页相关概念初识网页相关概念主页是网站的起始页和索引页，是用户浏览网站的“入口处”。与一般网页一样，主页可以存放各种信息，但它又是一个特殊的网页，主要由导航及各种超链接构成，用户可以通过主页提供的超链接访问其他页面的信息和资源。返回返回上一页上一页下一页下一页任务任务1 1初识网页相关概念初识网页相关概念(一一)静态网页静态网页静态网页是标准的HTML网页文件，它的文件扩展名是.htm或.html，可以包含文本、图像、声音、Flash动画、客户端脚本

4、、ActiveX控件及Java Applet等。这种网页不包含在服务器端运行的任何脚本，网页上的每一行代码都是由网页设计人员预先编写好后放置到Web服务器上的，在客户端的浏览器上解读的网页代码与服务器端的网页代码是一样的。返回返回上一页上一页下一页下一页任务任务1 1初识网页相关概念初识网页相关概念(二二)动态网页动态网页 动态网页是由HTML代码和服务器端运行的脚本代码所构成的网页文件。网页的内容动态地存储在服务器数据库中，当用户请求访问该页面时，通过运行服务器端的脚本代码、读取数据库信息来生成一个标准的HTML网页文件，然后将其发送到客户端的浏览器中进行显示。它们会随请求的用户和时间不同，

5、返回给浏览器不同的网页，因此称其为动态网页。返回返回上一页上一页下一页下一页任务任务1 1初识网页相关概念初识网页相关概念静态网页与动态网页的区别可以从以下四个方面理解。静态网页与动态网页的区别可以从以下四个方面理解。从本质上区分从本质上区分1从管理维护上区分从管理维护上区分2从设计技术上区分从设计技术上区分3从形式上区分从形式上区分4返回返回上一页上一页下一页下一页任务任务1 1初识网页相关概念初识网页相关概念(一一)服务器与浏览器服务器与浏览器 互联网是一个大型的、相互连接的分布式信息存储系统，它是以客户机/服务器模式工作的。通常来说，提供服务的一方称为服务器，请求服务或接受服务的一方称为

6、客户机。服务器是网络的核心设备，实际上是一种配置较高的计算机，安装有服务器软件(如Windows XP下的IIS)，其基本功能是提供网络资源共享、网络通信管理和网络通信服务。客户机是接受服务的计算机，配置可高可低，但必须安装有浏览器软件以解读网页文件。有些网页文件资源在浏览器不能解读时，会提示客户机安装相关的浏览器插件(如Flash播放器)。浏览器软件有很多，如火狐(Mozilla Firefox)、遨游(Maxthon)、腾讯TT(Tencent Traveler),Netscape Navigator，常用的是Windows自带的IE浏览器。返回返回上一页上一页下一页下一页任务任务1 1初

7、识网页相关概念初识网页相关概念(二二)URI、介绍、介绍 URL(Uniform Resource Locator，统一资源定位符)通常称为网址，它是Internet上用来描述信息资源的字符串。其格式为:返回返回上一页上一页下一页下一页任务任务1 1初识网页相关概念初识网页相关概念URL由下列三部分组成由下列三部分组成:协议或称为服务方式该资源的主机域名或IP地址资源的具体地址，由路径和文件名组成返回返回上一页上一页下一页下一页任务任务1 1初识网页相关概念初识网页相关概念(三三)网页浏览机制网页浏览机制客户机访问服务器中的网络资源的下作原理返回返回上一页上一页下一页下一页任务任务2 2构建网

8、站结构构建网站结构物理结构即目录结构，构建网站的物理结构就是根据网站主题的需要，为不同类型的资源分别建立目录进行保存。对于信息量小的站点，可以将不同类型的文件存放在不同的文件夹中。对于文件数量众多、信息量大、文件类型复杂的站点，应根据不同的栏目建立目录，在不同栏目的目录下将不同类型的文件分类存放，如图所示。信息量小的站点的目录结构信息量大的站点的目录结构返回返回上一页上一页下一页下一页任务任务2 2构建网站结构构建网站结构(一一)树状链接结构树状链接结构树状链接结构返回返回上一页上一页下一页下一页任务任务2 2构建网站结构构建网站结构(二二)网状链接结构网状链接结构网状链接结构返回返回上一页上

9、一页下一页下一页任务任务2 2构建网站结构构建网站结构网站的物理结构与逻辑结构是密不可分的，逻辑结构建立在目录结构的基础之上，良好的逻辑结构可以方便用户浏览网站;而物理结构合理与否对网站的管理与维护及网站的逻辑结构的建立都具有重大影响。对浏览者来说，最关心的是网站的逻辑结构，即链接结构，而对网站设计人员来说，两种结构都必须合理策划和构建，要既方便浏览者浏览，又易于管理、更新和移植。返回返回上一页上一页下一页下一页任务任务3 3明确网页设计的原则明确网页设计的原则音频、视音频、视频等多媒频等多媒体元素体元素动画动画超链接超链接图像图像文字文字返回返回上一页上一页下一页下一页任务任务3 3明确网页

10、设计的原则明确网页设计的原则1.网站的主题不同，配色方案也随之不同网站的主题不同，配色方案也随之不同2.要注意同类色、邻近色、对比色的运用要注意同类色、邻近色、对比色的运用3.不要用大面积的高纯度色彩、过多的颜色不要用大面积的高纯度色彩、过多的颜色4.文字阅读的部分要使用对比色文字阅读的部分要使用对比色5.选择颜色要注意时效性选择颜色要注意时效性返回返回上一页上一页下一页下一页任务任务3 3明确网页设计的原则明确网页设计的原则(一一)规则布局规则布局规则布局有一个基本型(上下、上中下、左右、左中右)，通过基本型可以扩展出更多的布局形式。图1-6就是规则布局的四种基本型与十二种简单混合布局，以这

11、十六种布局形式可以扩展出更多的布局形式。规则布局的最大特点是层次清晰，通过比例的合理划分(可参照黄金分割比例)、色彩的运用、图片、动画、视频等元素的合理编排可以达到重心平衡稳定和区块运用合理的布局效果。这类布局是网页设计中最常见的形式，如“国”字形、“匡”字形、“吕”字形和“T”字形，它们适用于信息量较大的网站，如门户网站、政府、企业、学校等正规网站。实际上，所有站点均可使用这种布局形式。返回返回上一页上一页下一页下一页任务任务3 3明确网页设计的原则明确网页设计的原则四种基本型与十二种简单混合布局返回返回上一页上一页下一页下一页任务任务3 3明确网页设计的原则明确网页设计的原则(二二)不规则

12、布局不规则布局不规则布局的形式自由、个性张扬、使用灵活，完全是一种艺术创意形式。但非专业人员较难掌握色彩的运用、抽象的整体造型。常见的有封面型、广告创意型(POP),Flash动画型，一般个人网站、娱乐型网站可采用这种形式，也有企业网站使用这种形式。返回返回上一页上一页下一页下一页任务任务3 3明确网页设计的原则明确网页设计的原则在网页的布局中，不管使用什么形式的布局，都应注意以下几个问题在网页的布局中，不管使用什么形式的布局，都应注意以下几个问题:1.页面布局整体上都是上中下形式2.页面内容的高度、宽度要适应屏幕阅读习惯3.重点信息、焦点信息、亮点信息要突出显示4.图文搭配做到稳定、平衡5.

13、主页、栏目页、文章页的布局既要统一，又要有区别返回返回上一页上一页下一页下一页任务任务4 4了解网站建设流程了解网站建设流程网站的内容决定网站的主题，所谓网站的主题就是网站所要表达的主要内容。确定网站的主题是网站建设中极为关键的一步。作为网站设计者，一定要明确自己的网站应该具有哪些内容，网站应向浏览者提供哪些信息，网站是为哪些浏览群体服务的，等等。给网站一个准确的定位，切忌内容过于庞杂，失去了中心主题而降低对浏览者的吸引力。对于初次接触网站建设的人员，最好选择自己喜爱或擅长的主题，如旅游主题、音乐主题、体育主题，以静态页面为主，保持网站结构清晰，尽量不要经常更新网站内容，以便快速掌握网站建设的

14、基本流程。在确定好网站主题后，还必须为网站起一个名字、设计一个Logo。总之，把握好网站建设的方向是网站建设成功的关键。返回返回上一页上一页下一页下一页任务任务4 4了解网站建设流程了解网站建设流程网站资料主要包括文本、图像、动画三大类。另外，依据网站的主题，还可能需要准备音频、视频等多媒体素材以及其他资料，如供浏览者下载的软件、Word文档。有些资料要进行制作，如Flash动画;有些资料还需要进一步加工和处理，如在不影响显示效果的情况下，图片应尽量压缩得小一些，以加快页面的加载速度。总之，收集、制作和整理资料时范围要广泛，在进行网页设计时再去粗取精。返回返回上一页上一页下一页下一页任务任务4

15、 4了解网站建设流程了解网站建设流程规划网站结构包括两方面的含义，即规划网站的目录结构(物理结构)和链接结构(逻辑结构)。物理结构反映网站中各种信息资源的存放形式，逻辑结构反映网站中信息的浏览形式。网站的物理结构与逻辑结构是密不可分的，逻辑结构建立在目录结构的基础之上，方便了用户的浏览。浏览者最关心的是网站的逻辑结构;而对于网站设计人员来说，两种结构都必须合理地策划和构建，既要方便浏览者浏览，又要易于网站的管理、更新和移植。物理结构的合理与否对网站的管理与维护、逻辑结构的建立都具有重大影响。这两种结构的设计方法在本项目任务2中已经进行了详细说明，此处不再赘述。返回返回上一页上一页下一页下一页任

16、务任务4 4了解网站建设流程了解网站建设流程页面设计包括内容设计、用色设计和布局设计，并且主页、栏目页、文章页的设计既要统一，又要有区别。本项目任务3中已经对相关内容进行了详细说明，此处不再赘述。返回返回上一页上一页下一页下一页任务任务4 4了解网站建设流程了解网站建设流程(一一)网站的测试网站的测试网站编辑制作完成后，最终需要在服务器上发布，但在发布之前必须对网站进行测试。网站的测试主要包括浏览器兼容性测试、链接测试和下载时间测试等，这些测试方法均可以使用Dreamweaver实现。返回返回上一页上一页下一页下一页任务任务4 4了解网站建设流程了解网站建设流程(二二)网站的发布网站的发布确定

17、网站空间申请域名网站上传返回返回上一页上一页下一页下一页任务任务4 4了解网站建设流程了解网站建设流程(一一)维护网站维护网站 网站要经常维护，保持内容的新鲜感，才能够吸引浏览者。网站的维护包括文章更新、页面布局变化、栏目调整、图形增删、广告设计、查看网站现有空间大小等内容。如果网站空间发生变化，应该及时对域名和空间进行绑定。静态网站的维护主要通过重新上传更新内容的方法实现，动态网站则是通过网站后台管理界面实现对内容的更新。返回返回上一页上一页下一页下一页任务任务4 4了解网站建设流程了解网站建设流程(二二)推广网站推广网站网站有付费的推广方法，如印刷品广告、媒体广告、户外广告，也有免费的推广

18、方法，如搜索引擎注册、网络广告交换、论坛发帖推广。无论用什么方法推广，网站的内容都是第一位的，只有内容具有影响力，搜索引擎才会自动收录网站，各种论坛、QQ群才会广泛传播，所以网站内容是网站最强的生命力。返回返回上一页上一页下一页下一页任务任务5 5了解网页制作工具了解网页制作工具标记型网页制作工具“所见即所得”型网页制作工具编程型网页制作工具一一二二三三END.网页设计与制作第三版项目二利用项目二利用HTMLHTML编写网页编写网页编写公司简介页面编写公司简介页面1编写产品展示页面编写产品展示页面2编写产品清单列表页面编写产品清单列表页面3项目二利用项目二利用HTMLHTML编写网页编写网页添

19、加页面的动态效果添加页面的动态效果6编写商务留言页面编写商务留言页面4将页面组合成网站将页面组合成网站5返回返回上一页上一页下一页下一页任务任务1 1编写公司简介页面编写公司简介页面(一一)HTML概述概述HTML代码是由若干代码是由若干HTML标签符号和由标签符号描述的各种标签符号和由标签符号描述的各种元素组成的。元素组成的。注释标签HTML标签HTML文档结构返回返回上一页上一页下一页下一页任务任务1 1编写公司简介页面编写公司简介页面(二二)标签标签标签在与之间使用，用来给网页命名，网页的名称将被显示在浏览器的标题栏中，该标签无属性。返回返回上一页上一页下一页下一页任务任务1 1编写公司

20、简介页面编写公司简介页面(三三)标签标签标签定义标签定义HTML文档的所有内容，如文本、超链接、文档的所有内容，如文本、超链接、图像、表格和列表。图像、表格和列表。返回返回上一页上一页下一页下一页任务任务1 1编写公司简介页面编写公司简介页面(四四)与文字排版有关的标签与文字排版有关的标签1.标签标签标签的显示返回返回上一页上一页下一页下一页任务任务1 1编写公司简介页面编写公司简介页面(四四)与文字排版有关的标签与文字排版有关的标签2.标签标签标签的显示返回返回上一页上一页下一页下一页任务任务1 1编写公司简介页面编写公司简介页面(四四)与文字排版有关的标签与文字排版有关的标签3.标题文字标

21、签标题文字标签标签的显示返回返回上一页上一页下一页下一页任务任务1 1编写公司简介页面编写公司简介页面(四四)与文字排版有关的标签与文字排版有关的标签4.标签标签返回返回上一页上一页下一页下一页任务任务1 1编写公司简介页面编写公司简介页面(四四)与文字排版有关的标签与文字排版有关的标签5.标签标签返回返回上一页上一页下一页下一页任务任务1 1编写公司简介页面编写公司简介页面(四四)与文字排版有关的标签与文字排版有关的标签6.项目符号、项目编号标签项目符号、项目编号标签嵌套列表显示结果返回返回上一页上一页下一页下一页任务任务1 1编写公司简介页面编写公司简介页面(四四)与文字排版有关的标签与文

22、字排版有关的标签7.排版方法及说明排版方法及说明行距控制自动换行空格的插入返回返回上一页上一页下一页下一页任务任务1 1编写公司简介页面编写公司简介页面罗德纺织品有限公司网站的公司简介页面返回返回上一页上一页下一页下一页任务任务2 2 编写产品展示页面编写产品展示页面(一一)插入图片的标签插入图片的标签返回返回上一页上一页下一页下一页任务任务2 2 编写产品展示页面编写产品展示页面标签的显示结果返回返回上一页上一页下一页下一页任务任务2 2 编写产品展示页面编写产品展示页面(二二)插入声音、视频、动画等元素的标签插入声音、视频、动画等元素的标签1.标签返回返回上一页上一页下一页下一页任务任务2

23、 2 编写产品展示页面编写产品展示页面(二二)插入声音、视频、动画等元素的标签插入声音、视频、动画等元素的标签2.标签返回返回上一页上一页下一页下一页任务任务2 2 编写产品展示页面编写产品展示页面罗德纺织品有限公司网站的产品展示页面返回返回上一页上一页下一页下一页任务任务2 2 编写产品展示页面编写产品展示页面该网页的制作步骤如下该网页的制作步骤如下:(1)打开记事本打开记事本(2)输入以下输入以下代码代码(3)保存为网页保存为网页文件文件(4)打开保存打开保存文件文件返回返回上一页上一页下一页下一页任务任务3 3编写产品清单列表页面编写产品清单列表页面(一一)表格标签表格标签表格标签的显示

24、返回返回上一页上一页下一页下一页任务任务3 3编写产品清单列表页面编写产品清单列表页面(一一)表格标签表格标签返回返回上一页上一页下一页下一页任务任务3 3编写产品清单列表页面编写产品清单列表页面(一一)表格标签表格标签返回返回上一页上一页下一页下一页任务任务3 3编写产品清单列表页面编写产品清单列表页面(一一)表格标签表格标签返回返回上一页上一页下一页下一页任务任务3 3编写产品清单列表页面编写产品清单列表页面(一一)表格标签表格标签使用表格的注意事项:(1)(1)表格中各单元格的内容可以是文本、图像、动画、视频、链接、表格中各单元格的内容可以是文本、图像、动画、视频、链接、表单、表单域等所

25、有网页元素。表单、表单域等所有网页元素。(2)(2)依据单元格中的内容，表格具有自动缩放功能。依据单元格中的内容，表格具有自动缩放功能。(3)(3)表格可以嵌套使用，嵌套层数不限。表格可以嵌套使用，嵌套层数不限。返回返回上一页上一页下一页下一页任务任务3 3编写产品清单列表页面编写产品清单列表页面(二二)使用表格布局页面使用表格布局页面表格布局的注意事项如下:(1)表格布局时边框宽度的值一定要设置为表格布局时边框宽度的值一定要设置为0，即不显示边框。，即不显示边框。(2)表格布局经常通过表格的嵌套实现。表格布局经常通过表格的嵌套实现。(3)表格布局时的网页代码可读性差。表格布局时的网页代码可读

26、性差。(4)多重嵌套的表格下载速度慢。多重嵌套的表格下载速度慢。返回返回上一页上一页下一页下一页任务任务3 3编写产品清单列表页面编写产品清单列表页面罗德纺织品有限公司网站的产品清单列表页面返回返回上一页上一页下一页下一页任务任务4 4编写商务留言页面编写商务留言页面(一一)表单的概念表单的概念表单是供浏览者填写信息的页面元素，服务器从中采集客户端的信息，使网页具有交互的功能。在包含表单元素的网页中，当用户填写完信息并提交(Submit)后，表单的内容就从客户端的浏览器传送到服务器上，经过服务器上的处理程序(如ASl程序)处理后，再将用户所需信息传送回客户端的浏览器上，这样网页就具有了交互性。

27、返回返回上一页上一页下一页下一页任务任务4 4编写商务留言页面编写商务留言页面(二二)表单标签表单标签表单用标签对来创建，格式如下:action属性的值是服务器端处理表单数据的程序名(包括路径)，如果这个属性是空值，即“”，则使用当前文档处理表单数据。用户提交表单后，服务器就执行action属性值表示的程序(如ASP程序)。返回返回上一页上一页下一页下一页任务任务4 4编写商务留言页面编写商务留言页面(三三)表单控件标签表单控件标签表单很像容器，组成它的主要内容是表单控件，文本框、多行文本框、表单很像容器，组成它的主要内容是表单控件，文本框、多行文本框、密码框、列表框、单选按钮、复选按钮、提交

28、按钮、重置按钮等都是表单密码框、列表框、单选按钮、复选按钮、提交按钮、重置按钮等都是表单控件。下面介绍这些表单控件标签。控件。下面介绍这些表单控件标签。返回返回上一页上一页下一页下一页任务任务4 4编写商务留言页面编写商务留言页面(三三)表单控件标签表单控件标签多行文本多行文本框控件框控件列表控件列表控件标签标签返回返回上一页上一页下一页下一页任务任务4 4编写商务留言页面编写商务留言页面罗德纺织品有限公司网站的商务留言页面返回返回上一页上一页下一页下一页任务任务5 5将页面组合成网站将页面组合成网站内部链接内部链接外部链接外部链接E-mail链接链接书签链接书签链接其他文档链接其他文档链接空

29、链接空链接返回返回上一页上一页下一页下一页任务任务5 5将页面组合成网站将页面组合成网站罗德纺织品有限公司网站的主页返回返回上一页上一页下一页下一页任务任务6 6添加页面的动态效果添加页面的动态效果滚动字幕滚动字幕加入收藏加入收藏设为主页设为主页返回返回上一页上一页下一页下一页任务任务6 6添加页面的动态效果添加页面的动态效果添加动态效果后的罗德纺织品有限公司网站的主页返回返回上一页上一页下一页下一页任务任务6 6添加页面的动态效果添加页面的动态效果左侧单元格内表格的嵌套形式和对齐方式END.网页设计与制作第三版项目三利用项目三利用Dreamweaver CS6Dreamweaver CS6制

30、作网页制作网页认识认识Dreamweaver CS6Dreamweaver CS61制作简单页面制作简单页面2利用表格工具制作网页利用表格工具制作网页3利用利用AP DIVAP DIV和和SprySpry制作网页制作网页4项目三利用项目三利用Dreamweaver CS6Dreamweaver CS6制作网页制作网页基于行为与基于行为与SprySpry特效特效制作网页制作网页7利用框架技术制作网页利用框架技术制作网页5使用使用CSSCSS修饰和美化网页修饰和美化网页6使用模板快速制作网页使用模板快速制作网页8返回返回上一页上一页下一页下一页任务任务1 1认识认识Dreamweaver CS6D

31、reamweaver CS6Dreamweaver CS6的起始页返回返回上一页上一页下一页下一页任务任务1 1认识认识Dreamweaver CS6Dreamweaver CS6Dreamweaver CS6的标准工作界面返回返回上一页上一页下一页下一页任务任务1 1认识认识Dreamweaver CS6Dreamweaver CS6(一一)菜单栏菜单栏菜单栏u 文件:管理文件，例如，新建、打开、保存、另存为、导人、导出及打印。u 编辑:编辑文本，例如，剪切、复制、粘贴、查找、替换和参数设置。u 查看:切换视图模式以及显示、隐藏标尺、网格线等辅助视图功能。u 插入:插入各种元素，例如，图片、

32、多媒体组件、表格、框架及超级链接。u 修改:修改页面元素，例如，在表格中再插人表格及拆分、合并单元格。u 格式:对文本进行操作，例如，设置文本格式。u 命令:所有的附加命令项。u 站点:创建和管理站点。u 窗口:显示和隐藏控制面板以及切换文档窗口。u 帮助:联机帮助功能。例如，按下Fl键，就会打开电子帮助文本。返回返回上一页上一页下一页下一页任务任务1 1认识认识Dreamweaver CS6Dreamweaver CS6(二二)面板组面板组面板组“插入”面板组返回返回上一页上一页下一页下一页任务任务1 1认识认识Dreamweaver CS6Dreamweaver CS6(四四)标准工具栏标

33、准工具栏标准下具栏标准工具栏包含执行“文件”和“编辑”菜单中常见操作的按钮:如新建、打开、在Bridge中浏览、保存、全部保存、打印代码、剪切、复制、粘贴、撤销和重做，如图所示。返回返回上一页上一页下一页下一页任务任务1 1认识认识Dreamweaver CS6Dreamweaver CS6(五五)样式呈现工具栏样式呈现工具栏“样式呈现”工具栏（默认情况下处于隐藏状态）包含一些按钮，如果使用依赖于媒体的样式表，则这些按钮可帮助您查看设计在不同媒体类型中的呈现方式。它还包含一个允许您启用或禁用 CSS 样式的按钮。若要显示该工具栏，请选择“查看”“工具栏”“样式呈现”。样式呈现工具栏返回返回上一

34、页上一页下一页下一页任务任务1 1认识认识Dreamweaver CS6Dreamweaver CS6(六六)文档窗口文档窗口当打开或创建一个项目，进人文档窗口时，可以在文档区域中进行文字输人、表格插人和图片编辑等操作。文档窗口显示当前文档，可以选择以下任一视图。返回返回上一页上一页下一页下一页任务任务1 1认识认识Dreamweaver CS6Dreamweaver CS6(七七)状态栏状态栏文档窗口底部的状态栏提供与正创建的文档有关的其他信息。状态栏返回返回上一页上一页下一页下一页任务任务1 1认识认识Dreamweaver CS6Dreamweaver CS6(八八)“属性属性”面板面板

35、“属性”面板可以检查和编辑当前选定页面元素(如文本和插人的对象)的最常用属性。“属性”面板的内容根据选定的元素的不同会有所不同。“属性”面板返回返回上一页上一页下一页下一页任务任务1 1认识认识Dreamweaver CS6Dreamweaver CS6(九九)“文件文件”面板面板使用“文件”面板可以查看和管理Dreamweaver站点中的文件，如图所示。文件面板返回返回上一页上一页下一页下一页任务任务1 1认识认识Dreamweaver CS6Dreamweaver CS6(十十)CSS样式样式”面板面板 使用“CSS样式”面板可以跟踪影响当前所选页面元素的CSS规则和属性或影响整个文档的规

36、则和属性(“全部”模式)。使用“CSS样式”面板顶部的切换按钮可以在“全部”和“当前”两种模式之间切换，还可以在“全部”和“当前”两种模式下修改CSS属性，如图所示。CSS样式”面板返回返回上一页上一页下一页下一页任务任务1 1认识认识Dreamweaver CS6Dreamweaver CS6(十一十一)可视化辅助线可视化辅助线Dreamweaver提供了几种可视化辅助线，帮助用户设计文档和大概估计文档在浏览器中的外观。用户可以执行以下任一操作:(1)将文档窗口与所需的窗口对齐，查看元素如何更好地适合页面。(2)用跟踪图像作为页面背景，可帮助用户复制在插图或图像编辑应用程序(如Adobe P

37、hotoshop或Adobe Fireworks)中创建的设计。(3)用标尺和辅助线为精确定位和调整页面元素提供可视的提示。(4)使用网格标记可以精确定位绝对定位元素(AP元素)以及调整其大小。返回返回上一页上一页下一页下一页任务任务1 1认识认识Dreamweaver CS6Dreamweaver CS6(一一)自适应流体网格布局自适应流体网格布局创建自适应流体网格布局页面返回返回上一页上一页下一页下一页任务任务1 1认识认识Dreamweaver CS6Dreamweaver CS6(二二)“多屏预览多屏预览”面板面板“多屏预览”面板返回返回上一页上一页下一页下一页任务任务1 1认识认识D

38、reamweaver CS6Dreamweaver CS6(三三)CSS过渡效果过渡效果返回返回上一页上一页下一页下一页任务任务1 1认识认识Dreamweaver CS6Dreamweaver CS6(四四)增强型增强型j Query移动框架支持移动框架支持创建针对手机的文件返回返回上一页上一页下一页下一页任务任务1 1认识认识Dreamweaver CS6Dreamweaver CS6(四四)增强型增强型j Query移动框架支持移动框架支持应用“jQuery Mobile色板”面板 返回返回上一页上一页下一页下一页任务任务1 1认识认识Dreamweaver CS6Dreamweaver

39、 CS6(五五)改善的改善的FTP性能性能改善的站点管理返回返回上一页上一页下一页下一页任务任务1 1认识认识Dreamweaver CS6Dreamweaver CS6(六六)更新的实时视图更新的实时视图通过实时视图测试后的网页返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面(一一)设置站点的本地信息设置站点的本地信息设置站点的本地信息返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面(二二)设置远程服务器的连接方式设置远程服务器的连接方式选择“站点”“新建站点”命令，在弹出的对话框中选择“服务器”选项，在“基本”选项卡中选择“连接方法”为“FTP”

40、，然后分别设置网站的“FTP地址”“用户名”和“密码”等信息，如图所示。返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面(三三)完成站点建立完成站点建立站点设置完成后，可以看到“文件”面板中列出了站点中的文件，如图3-2 2所示。如果“文件”面板没有显示，可以执行“窗口”“文件”命令查看(快捷键为F8)。站点文件夹返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面(一一)创建空白网页创建空白网页(1)在菜单栏中执行“文件”一“新建”命令，弹出“新建文档”对话框，如图所示。“新建文档”对话框返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简

41、单页面(一一)创建空白网页创建空白网页(2)在“空白页”选项卡中选择页面类型为“HTML，以及布局为“无”，单击“创建”按钮，创建一个新的可编辑的网页，在“标题”文本框中输人“南通罗德纺织品有限公司”，如图所示。返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面(一一)创建空白网页创建空白网页(3)在文档窗口中输人相应代码后，选择“文件”“保存”命令，将网页保存在站点中，文件命名为index.Html。返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面(二二)设置页面属性设置页面属性(1)在菜单栏执行“修改”一“页面属性”命令，弹出“页面属性”对话框，如

42、图所示。返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面(二二)设置页面属性设置页面属性(2)设置网页外观。一般情况下，设置字体大小为12像素，文本颜色、背景颜色和背景图像可自行设定。同时设置网页四边的边距，一般只设置上边距为0像素，如图所示。返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面(二二)设置页面属性设置页面属性(3)选择背景图像。单击“浏览”按钮，在弹出的“选择图像源文件”对话框中选择背景图片为201.jpg，然后单击“确定”按钮返回。返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面(三三)预览网页预览网页 在菜单栏

43、中执行“文件”“在浏览器中预览”“Internet Explorer”命令或单击工具栏中 按钮即可打开IE浏览器，预览网页。网页预览效果如图所示。返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面(一一)添加文本添加文本(1)直接输入文本。(2)从其他文档复制并粘贴。粘贴文字到空白文档返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面(二二)设置文字格式设置文字格式(1)用鼠标选择文档窗口中第一行的“企业介绍”四个字，在“属性”面板的“HTML中选择“格式”为“标题2，如图所示。字体属性设置返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简

44、单页面(二二)设置文字格式设置文字格式(2)在“属性”面板的“CSS中设置对齐方式为居中对齐(单击图标)，弹出如图所示的“新建CSS规则”对话框。“新建CSS规则”对话框返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面(二二)设置文字格式设置文字格式(3)建立自定义类“.t1，然后设置字体颜色为“#FF0000，结果如图3-30所示。文字格式设置完成返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面(二二)设置文字格式设置文字格式(4)设置第一段文字为“楷体、14号、红色、斜体”，第二段文字为“黑体、18号、蓝色、居中对齐、粗体”。用鼠标选择第一段文字

45、，在CSS“属性”面板中选择14号字体，随即弹出“新建CSS规则”对话框，定义自定义类“.t2，如图所示，完成后单击“确定”按钮。定义自定义类“.t2返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面(二二)设置文字格式设置文字格式编辑字体列表。Dreamweaver CS6预设的可供选择的只有13项英文字体，要想使用其他字体，需编辑字体列表。编辑字体列表返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面(二二)设置文字格式设置文字格式 分别设置第一段文字和第二段文字的字体。选中对应文字，从CSS“属性”面板中的“字体”下拉列表中分别选择“楷体”“黑体”

46、。设置字体大小。从CSS属性”面板中的“大小”下拉列表中分别选择14号和18号字体。字号数字从小到大，对应的字也逐渐增大。设置文字颜色。单击CSS属性”面板中的颧按钮，在弹出的颜色列表中选择所需要的颜色，即红色和蓝色。设置字符样式。单击CSS属性”面板中的树或俐按钮，将选定文本设置为粗体或斜体，如图所示。设置字符样式返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面(二二)设置文字格式设置文字格式各项设置完成后，预览网页，如图所示。预览字体设置效果返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面(三三)文字的其他设置文字的其他设置换行换行文本空格文本空

47、格插入特殊字符插入特殊字符插人水平线插人水平线插人项目列表插人项目列表插人文件头插人文件头标签标签返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面(三三)文字的其他设置文字的其他设置首选参数设置返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面(三三)文字的其他设置文字的其他设置插人特殊字符返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面(三三)文字的其他设置文字的其他设置水平线属性设置列表属性设置文件头内容返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面目前互联网上支持的图像格式主要有GIF,JPEG和PN

48、G三种，其中使用最为广泛的是GIF和JPEG。在制作网页时，要先构想好网页布局，在图像处理软件中将需要插入的图片进行处理，然后存放在站点根目录下的文件夹中。返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面(一一)在在“公司介绍公司介绍”四个字符下面添加企业图片四个字符下面添加企业图片返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面(二二)选择图像路径选择图像路径返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面 注意注意:如果要插入的图片不在根文件夹中，会弹出如图所示的对话框，提醒用户将该图片保存到根文件夹中，一般情况下都单击“是

49、”按钮，然后将该图片保存到根文件夹中。返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面(三三)设置图像属性设置图像属性图像的属性返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面(四四)在在Dreamweaver中编辑图像中编辑图像Dreamweaver提供了基本的图像编辑功能，可以在Dreamweaver中重新取样、裁剪、优化和锐化图像，还可以调整图像的亮度和对比度。Dreamweaver的图像编辑工具旨在使网页设计者能与内容设计者(负责创建网站中使用的图像文件)轻松地实现协作。返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面(

50、五五)插入其他图像元素插入其他图像元素1.插入图像占位符返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面(五五)插入其他图像元素插入其他图像元素2.鼠标经过图像返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面链接是一个网站的灵魂，一个网站是由多个页面组成的，而这些页面之间依据链接确定相互之间的导航关系。超级链接是指站点内不同网页之间、站点与Web之间的连接关系，它可以使站点内的所有网页成为有机的整体，还能够使不同站点之间建立联系。超级链接由两部分组成:链接载体和链接目标。返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面(一一)关