网页制作实用教程(第3版)(txt+pdf+epub+mobi电子书下载)


发布时间:2020-08-08 20:36:33

点击下载

作者:张淑清

出版社:职业教育出版分社

格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT

网页制作实用教程(第3版)

网页制作实用教程(第3版)试读:

第3版前言

随着Internet技术及其应用的不断发展,人们的生活和工作已经越来越离不开网络。网页是宣传一个网站的重要窗口,内容丰富、制作精美的网页才会吸引访问者浏览,这与网站生存息息相关。本书出版9年以来,得到了广大师生的认可,销量近三万册。近年来,网页制作技术日新月异,学生的知识结构也发生了很大的变化。根据多年的教学实践和观察,我们对本书的教学大纲和教学内容进行了大幅度的调整,力求在引进最新、最前沿的网页制作技术的同时,还能兼顾知识体系更接近高职高专学生接受能力的特点。因此,本书各章节都以新知识、新技术和活泼的实例向读者叙述网页制作的技术方法,以求深入浅出,引人入胜。

一、本书结构

全书共11章,建议安排72学时,其中上机实训为36学时。具体内容如下。

第1章 网页制作基础

。介绍网页制作的基础知识和网站开发的一般流程。建议安排2学时。

第2章 初识Dreamweaver CS6。介绍Dreamweaver CS6的安装、卸载及基本操作方法。建议安排8学时,其中上机操作4学时。

第3章 网页元素的添加。介绍如何在网页中添加文字、图像并设置超级链接等。建议安排8学时,其中上机操作4学时。

第4章 精通CSS样式。通过具体实例介绍使用CSS样式控制网页元素及网页外观的方法。建议安排8学时,其中上机操作4学时。

第5章 表格与AP Div。通过具体实例介绍表格的布局方法和AP Div的布局方法。建议安排8学时,其中上机操作4学时。

第6章 使用Div+CSS布局。通过具体实例讲述网页布局的最新技术、Div+CSS布局的优势及网页布局技术的发展趋势。建议安排8学时,其中上机操作4学时。

第7章 使用框架布局。介绍了框架布局的特点与作用。建议安排6学时,其中上机操作4学时。

第8章 行为的应用。介绍行为的作用和常见行为的使用。建议安排8学时,其中上机操作4学时。

第9章 交互式表单。介绍创建表单、表单元素的方法及验证表单的方法。建议安排4学时,其中上机操作2学时。

第10章 模板和库。介绍模板和库的作用及基本操作方法。建议安排4学时,其中上机操作2学时。

第11章 站点的发布。介绍网站空间的申请与域名的注册,以及网站的上传、维护与更新,并通过制作一个完整网站的综合实例,向读者介绍制作网站的全过程。建议安排8学时,其中上机操作4学时。

二、编写人员名单

参加编写的人员按照编写章节顺序有:庞康、张淑清、韦波、李刚、叶俊、刘莉莉、刘敏、贡晓静、黄恋芦。

由于作者经验和水平有限,且网页制作技术日新月异,书中不足之处在所难免,恳请广大读者批评指正。编者2014年6月于南宁第1章网页制作基础

情景导入

小白在一家网页制作公司开始了她的实习生活。为了快速了解网页制作的工作,小白开始学习网页制作的相关知识。

知识技能目标

● 认识互联网有关的基础概念。

● 了解网页的本质。

● 了解HTML页面的基本结构。

● 能够分析简单的网页源码。

● 能够编写简单的静态页面。

课堂案例展示访问网页的一般过程1.1预备知识1.1.1 因特网

因特网(Internet)又称网际网路或互联网、英特网,是网络与网络之间所串连成的庞大网络,这些网络以一组通用的协定相连,形成逻辑上的单一巨大国际网络。这种将计算机网络互相联接在一起的方法可称作“网络互联”,在这基础上发展出覆盖全世界的全球性互联网络称“互联网”,即是“互相连接一起的网络”。Internet主要提供的服务有万维网(WWW)、文件传输协议(FTP)、电子邮件(E-mail)及远程登录等。1.1.2 万维网

万维网(World Wide Web)简称Web或WWW,是一个基于超文本(Hypertext)方式的信息检索服务技术,它将位于Internet上不同地点的相关数据信息有机地编织在一起。WWW提供了一种良好的信息查询接口,用户仅需提出查询要求,而到什么地方查询及如何查询则由WWW自动完成。

Web是我们登录Internet后最常用到的Internet的功能。我们将自己的计算机连入Internet后,有一半以上的时间都是在与各种各样的Web页面打交道。在基于Web方式下,我们可以浏览、搜索、查询各种信息,可以发布自己的信息,可以与他人进行实时或者非实时的交流,可以游戏、娱乐、购物等。1.1.3 URL

URL为“Uniform Resource Locator”的缩写,通常翻译为“统一资源定位器”,它是一个指定Internet上资源位置的标准,也就是人们常说的网址。其格式为:

通信协议://服务器地址[:通信端口]/[路径]

● 通信协议:使计算机之间能交换信息的一组规则和标准。

● 服务器地址:指出 WWW 页面所在的服务器域名。

● 通信端口:有时(并非总是这样)对某些资源的访问来说,需给出相应的服务器提供服务的端口号。

● 路径:指明服务器上某个资源的位置(其格式与DOS系统中的格式一样,通常由“目录/子目录/文件名”这样的结构组成)。与端口一样,路径并非总是需要的。例如,http://www.sina.com.cn/就是典型的URL地址。1.1.4 DNS

DNS是“Domain Name Service” 的缩写,通常翻译为“ 域名管理系统”,简称域名,它采用分层管理模式,用于将机器的名称转变成IP地址。

DNS使用阶层式的命名标准。此阶层的运作方式是由右向左,右边的表示最高等级。简单的范例如图1-1所示。图1-1 DNS阶层式的命名1.1.5 IP地址

IP(Internet Protocol)即网际协议,是为计算机网络相互连接进行通信而设计的协议,是计算机在因特网上进行相互通信时应当遵守的规则。IP地址是给因特网上的每台计算机和其他设备分配的一个唯一的地址。1.1.6 浏览器

浏览器是指将互联网上的文本文档(或其他类型的文件)翻译成网页,并让用户与这些文件交互的一种软件工具,主要用于查看网页的内容。在Windows环境中较为流行的Web浏览器为微软的Internet Explorer、Mozilla Firefox、谷歌的Chrome,这些浏览器在性能方面各有千秋,在用户界面上也有所不同。本文的实例全部使用IE浏览器打开查看。1.1.7 FTP

FTP(File Transfer Protocol)即文件传输协议,是一种快速、高效和可靠的信息传输方式,通过该协议可把文件从一个地方传输到另一个地方,从而真正实现资源共享。制作好的网页要上传到服务器上,就要用到FTP。1.1.8 电子邮件

电子邮件又称E-mail,是目前Internet上使用最多、最受欢迎的一种服务。电子邮件是利用计算机网络的电子通信功能传送信件、单据、资料等电子媒体信息的通信方式,它最大的特点是可以在任何地方、任何时间收发信件,大大提高了工作效率,为办公自动化、商业活动提供了很大的便利。1.1.9 HTTP

超文本传输协议(Hyertext Transfer Protocol,HTTP),它是一种最常用的网络通信协议。若想链接到某一特定的网页时,就必须通过HTTP协议,不论你是用哪一种网页编辑软件,无论在网页中加入什么资料,或是使用哪一种浏览器,利用HTTP协议都可以看到正确的网页效果。1.1.10 HTML

HTML(Hyper Text Markup Language)即超文本标记语言,是一种用来制作超文本文档的简单标记语言,也是制作网页最基本的语言,它可以直接由浏览器执行。1.2网页

网页实际上就是一个文件,这个文件存放在世界上某个地方的某一台计算机中,而且这台计算机必须要与因特网相连接。网页是由网址(URL)来识别与存取的。在浏览器的地址栏中输入网页的地址后,经过复杂而又快速的程序解析后,网页文件就会被传送到计算机中,然后再通过浏览器解释网页的内容,最后展现在浏览者的眼前。1.2.1 网页的本质

什么是网页的本质?在回答这个问题之前先请访问一个网页,首先向IE浏览器地址栏输入URL地址(例如网易的主页 http://www.163.com),这也就是向服务器发送了一个请求,当服务器接收到这个请求时,则必须做出反应,也就是反馈。之后客户端接收到了反馈信息,并在浏览器中显示所要的内容。这个过程也可以用图简单表示,如图1-2所示。图1-2 访问网页的一般过程

网页打开了,出现在眼前的是图文并貌的网页页面。它们是怎么传过来的呢?选择IE浏览器页面中的“查看>源文件”命令,会弹出一个用记事本打开的文本文件(用其他浏览器,可能会在浏览器新打开一个标签显示网页源码),这就是该网页的源码,也就是所谓的网页的本质。该文件的内容是从Web服务器端传递过来的,如图1-3所示。图1-3 查看网页源文件

从记事本中可以看到,网页的源文件由一些类似这样的标签组成。这些标签是HTML语言的标记。HTML的英文全称是Hyper Text Markup Language,直译为超文本标记语言。该语言不是一种程序设计语言,而是一种描述文档结构的标记语言。它的作用是通过一些标签来指示浏览器如何显示包含在标签中的内容。参考下面一段程序:

My Homepage

Hello world!!

其中用“<”和“>”括起来的部分(例如“title”),就是前面所说的标记(也叫标签)。HTML语言中的标记很多,最常见的有以下8种。

1.HTML标记

标记放在HTML文件的开头,以标记结尾,用以向浏览器说明该文件是HTML文件。

2.“文件头”标记

文件头标记是以开头,以结尾。一般放在标记的后面,用于定义网页文档的头部。其中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等。文档的头部描述了文档的各种属性和信息,包括文档的标题、在Web中的位置以及和其他文档的关系等。

3.“文件标题”标记

标题标记为,这对标记用来设定文件的标题,注释该文件的内容。浏览器通常都会将文件标题显示在浏览器窗口的左上角。

4.“文件体”标记

文件体标记为和,一般用来指明HTML文档的内容,如文字、标题、段落和列表等,也可以用来定义页面的背景颜色。

以下几个标记都是包含在body标记中的。

5.“标题”标记

标题标记的格式为。(n代表从1~6的数字)。此标记被用来设置标题字体的大小。HTML准许有

这6级标题。

6.“字体”标记

字体标记的格式为,用来设置网页中文字的各种属性,比如字体、大小、颜色等。

7.“表格”标记

表格标记的格式为

,用来在网页中插入表格,表格在网页中的应用十分广泛,除了用以显示数据外,还可以使用它来进行网页布局,实现网页元素定位。在和
标签中,还可以使用和 标记定义表格行,和标记定义表头,和标记定义表格单元。

8.“图片”标记

图片标记的格式为(#代表图片的URL),用于在网页中显示图片。要注意图片标记与上面的几个标记不同,它没有结尾标记。

HTML文档结构如图1-4所示。图1-4 HTML文档结构

用记事本编辑上文提到的HTML代码,并保存为“My Homepage.html”,如图1-5(a)所示。然后用浏览器打开该文件(直接双击文件图标),得到如图1-5(b)所示的结果。图1-5(a) 用记事本查看网页图1-5(b) 用浏览器打开网页

从图1-5(a)中可以看到,在标记里有“color=red”代码,用于指明字体的颜色是红色。标记中用来修饰标记内容的部分叫做标记属性,color就是font标记中修饰字体颜色的属性。属性是用来修饰标记的,通过对属性赋予不同的值,可使网页显示不同的风格。

HTML的规则很多,用户不需要全部掌握,能够看懂各种HTML标记,会给标记属性赋值就可以了。看懂HTML代码,不仅可以使自己制作网页时得心应手,还可以借助别人的技术来充实自己的网页。

另外,在HTML文件中,还可以加入脚本语言(如JavaScript或VBScript),使用脚本语言,可以制作出许多网页特效。1.2.2 静态网页与动态网页

静态网页是相对于动态网页而言的,并不是说网页中的元素是静止不动的。静态网页是指浏览器与服务器端不发生交互的网页,网页中的Gif动画、Flash以及Flash按钮等都会发生变化。

静态网页的执行过程大致如下。(1)浏览器向网络中的服务器发出请求,指向某个静态网页。(2)服务器接到请求后,将传输给浏览器,此时传送的只是文本文件。(3)浏览器接到服务器传来的文件后解析HTML标签,将结果显示出来。

动态网页除了具有静态网页中的元素外,还包括一些应用程序,这些程序需要浏览器与服务器之间发生交互行为,而且应用程序的执行需要服务器中的应用程序服务器才能完成。无论网页是否具有动态效果,采用动态网站技术生成的网页都称为动态网页。

静态网页与动态网页是相对应的,静态网页的URL后缀是以htm、html、shtml、xml等常见形式出现的。而动态网页的URL 后缀是以asp、jsp、php、 perl、cgi等形式出现的。利用Dreamweaver CS6既可以创建静态网页,也可以创建动态网页。本书主要介绍创建静态网页技术。1.2.3 网页设计的概述

网页设计是一个网页创作的过程,是根据客户需求从无到有的过程,网页设计具有很强的视觉效果、互动性、操作性等其他媒体所不具有的特点。

一个成功的网页设计,首先在观念上要确立动态的思维方式,其次要有效地将图形引入网页设计中,以提高人们浏览网页的兴趣。在崇尚鲜明个性风格的今天,网页设计应该增加个性化的因素。

网页设计并非是纯粹的技术型工作,而是融合了网络应用技术与美术设计两个方面。因此,对从业人员来说,仅掌握网页设计制作的相关软件是远远不够的,还需要有一定的美术功底和审美能力。在网络世界中,有许多设计精美的网页值得我们去学习和欣赏。1.3网站的一般开发流程

网站(英文名字为website是指在因特网上,根据一定的规则,使用 HTML 等工具将一系列内容相关的网页组织在一起,彼此之间建立联系(比如将一个公司的概况、产品和服务等做成一系列的网页,网页之间通过各种网页元素的链接达到建立联系的目的),这些网页和网页元素合起来就构成了一个网站。简单地说,网站是一种通信工具,就像布告栏一样,人们可以通过网站来发布自己想要公开的资讯,或者利用网站来提供相关的网络服务。人们可以通过网页浏览器来访问网站,获取自己需要的资讯或者享受网络服务。1.3.1 收集资料和素材

网站里最重要的资源是文字资源和图片资源,因此大部分的收集工作应围绕这两种资源展开。资源收集的途径很多,概括说来,主要有网络资源收集、光盘资源收集和书籍资源收集三种。如果利用这三种方式都不能找到所需要的资源,那么只好请专人进行创作了。网站中不应该只使用收集来的资源,原创的内容能吸引更多的访问者。因此,虽然亲自进行创作是一件很辛苦的工作,但我们鼓励在网站建设中尽可能多地使用原创内容。

对于收集到的资源,有必要对其进行分类、整理以及编辑、处理,以使其符合自己的要求。值得一提的是,如果收集来的资源是有版权的,使用前应先与作者联系,在使用时也应署名出处。尊重版权是每一个网站制作者应遵循的原则。1.3.2 规划站点

在创建站点之前需要对站点进行规划,站点的形式有并列、层次和网状等3种,需根据实际情况进行选择。

在规划站点时应按站点所包含的内容进行频道的划分,如要制作一个综合性的网站,其包含的内容非常多,如军事、文学、社会、时政、体育和情感等多个方面,在各主频道下面又有很多的小栏目,各小栏目下面又包括许多的网页,设计网站时需要考虑到各个网页的内容及版式。1.3.3 网页的实施与细化

完成站点规划后,便可具体到每一个页面的制作。在制作网页时,首先要做的就是设计版面布局,就像传统的报刊杂志制作一样,可将网页看作一张报纸进行排版布局。版面指的是在浏览器中看到的完整的页面大小。因为不同的显示器分辨率不同,所以,同一个页面的大小可能出现800像素×600像素、1024像素×768像素等不同尺寸。由于现在显示器的分辨率一般都在1024像素×768像素以上,要达到浏览网页的最佳效果,可以设置宽为1000像素,网页的高度可不做限制。

布局网页就是以最适合浏览的方式将网页元素排放在页面的不同位置,这是一个创意的过程,需要一定的经验,初学者也可以参考一些优秀的网站来寻求灵感。

版面布局完成后,就可以着手制作每一个页面了,通常可从首页做起,制作过程中可以先使用表格或AP Div对页面进行整体布局,然后将需要添加的内容分别添加到相应的单元格中,并随时预览效果,及时调整,直到整个页面完成并达到理想的效果,然后使用相同的方法完成整个网站中其他页面的制作。1.3.4 测试站点

在制作好网页后,不能马上发布站点,还需要对站点进行测试。站点测试可根据浏览器种类、客户端以及网站大小等要求进行测试,Dreamweaver CS6自身具有测试站点的功能。1.3.5 发布站点

发布站点之前需在Internet上申请一个主页空间,以指定网站或主页在Internet上的位置,然后将网站的所有文件上传到服务器空间中。上传网站通常使用FTP(远程文件传输)软件将其上传到申请的网址目录下。使用FTP软件上传文件速度较快,也可使用Dreamweaver CS6中的发布站点命令进行上传。1.3.6 更新和维护站点

站点上传到服务器后,并不是就一劳永逸了,网站维护人员需要每隔一段时间对站点中的某些页面进行更新,保持网站内容的新鲜感以吸引更多的浏览者,还应定期打开浏览器检查页面元素显示是否正常、各种超级链接是否正常链接等,防止网站出现浏览故障或链接故障等问题而影响访客的浏览。

另外,为了扩大网站的影响力,还需要对站点进行推广和宣传,如将网站注册到各大搜索网站中以便提高网站的访问量等。1.4小结

制作精美的网页,掌握基本的概念是基础,熟悉制作工具是保证,了解和掌握网页程序语言是根本。本章简明扼要地介绍了网页中常见的概念、HTML文件的基本形式,以及网站的定位和网站的一般开发流程,为后续章节的学习打下了基础。1.5习题

一、填空题

1.用浏览器访问的网页是存储在______中的。

2.DNS通常翻译为______。

3.FTP是指______。

4.HTTP译为______。

二、选择题

1.HTML语言是一种(  )语言。

A.编程  B.标记  C.地方  D.机器

2.URL的意思是(  )。

A. 统一资源定位符,可以用以指定表明网络上各种资源的位置

B. 仅仅是三个字母URL

C. 连接循环线路

D. 没有明确的意义

三、判断题

1.Internet就是人们常说的3W,中文翻译为万维网。(  )

2.网页的本质就是指网页所包含的文字、图片等内容。(  )

四、简答题

1.网站和网页是什么关系?

2.什么是静态网页?

3.什么是动态网页?

4.网站的开发流程是什么?1.6上机实训

1.制作如图1-6所示的网页。图1-6 “我的第一个网页”浏览显示结果

操作步骤如下。(1)阅读如下代码,并在记事本中进行编辑。

我的第一个网页

大家好,这是我的第一个网页。

ao1网bp2页cq3制dr4作


Welcome here!

(2)编辑完成后将其保存为“firstweb.html”,并双击打开该文档在浏览器中浏览。

2.浏览几个界面美观的网站(见图1-7~图1-9)。(1)http://www.pta-sh.com.cn/图1-7 页面效果图(2)http://www.modern-plaza.com.cn/图1-8 页面效果图(3)http://www.excegroup.com/flash/图1-9 页面效果图第2章初识Dreamweaver CS6

情景导入

小白为了尽快掌握网页制作知识,开始学习如何利用DreamweaverCS6工具设计网页。

知识技能目标

● 安装Dreamweaver CS6的系统要求。

● Dreamweaver CS6的安装和卸载。

● Dreamweaver CS6的工作环境。

● 学会安装和卸载Dreamweaver CS6。

● 能够在Dreamweaver CS6中新建站点、文件和目录。

课堂案例展示Dreamweaver CS6 安装欢迎界面2.1Dreamweaver CS6介绍

Dreamweaver CS6是世界顶级软件厂商Adobe推出的一套拥有可视化编辑界面,用于制作并编辑网站和移动应用程序的网页设计软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起,功能强大,使得各个层次的开发人员和设计人员都能够快速创建界面优美的基于标准的网站和应用程序。从对基于CSS的设计的支持到手工编码功能,Dreamweaver CS6提供了专业人员在一个集成、高效的环境中所需的工具。与前几个版本比较,CS6在界面整合和易用性方面更加贴近用户;CS6使用了自适应网格版面创建页面,可以在发布前使用多屏幕预览审阅设计,大大提高工作效率;经过改善的FTP使得CS6能更高效地传输大型文件;“实时视图”和“多屏幕预览”面板可呈现html5代码。Dreamweaver CS6可以在Windows XP系统下使用。2.1.1 安装Dreamweaver CS6的系统要求

Dreamweaver CS6对计算机系统的配置要求不高。(1)Dreamweaver CS6对Windows系统的要求如表2-1所示。表2-1 Dreamweaver CS6对windows系统的要求(2)Dreamweaver CS6对Mac OS系统的要求如表2-2所示。表2-2 Dreamweaver CS6对Mac OS系统的要求2.1.2 安装 Dreamweaver CS6

安装Dreamweaver CS6的具体方法如下。(1)进入安装欢迎界面,如图2-1所示。图2-1 Dreamweaver CS6 安装欢迎界面(2)如果有序列号的话直接选择“安装”,输入序列号即可以继续安装直到安装完成。如果没有序列号,选择“试用”打开“软件许可协议”对话框,如图2-2所示。图2-2 Dreamweaver CS6 许可协议

接受许可协议后,Dreamweaver CS6将会要求登录Adobe账号来将试用注册到用户的账号中,如果已经登录Adobe账号直接单击“下一步”即可(如果没有Adobe账号可以单击“创建Adobe ID”,输入个人信息和联系方式后,就可以创建一个Adobe账号),如图2-3所示。图2-3 Dreamweaver CS6 试用登录(3)登录操作完成后就进入了安装选项界面,如图2-4所示。图2-4 Dreamweaver CS6安装选项界面(4)单击“安装”按钮之后就可以开始安装,安装完成后出现如图2-5所示的提示界面。图2-5 Dreamweaver CS6 安装完成2.1.3 卸载Dreamweaver CS6

如果所安装的Dreamweaver CS6软件出现了问题,则需要将Dreamweaver CS6卸载后重新进行安装。卸载 Dreamweaver CS6的具体方法如下。(1)打开Windows 7系统中的“控制面板>所有控制面板项”窗口,双击“程序和功能”选项,如图2-6所示。进入“卸载或更改程序”窗口,如图2-7所示。图2-6 “控制面板”窗口图2-7 “卸载或更改程序”窗口(2)在列表中选择Adobe Dreamweaver CS6,再单击“卸载”按钮,弹出“卸载选项”界面,如图2-8所示。图2-8 Dreamweaver CS6卸载选项(3)单击“卸载”按钮,会弹出一个“程序和功能”消息框,单击“确定”按钮后,就进入了卸载界面显示Dreamweaver CS6的卸载进度,如图2-9所示。卸载完成后,显示卸载完成界面,如图2-10所示,单击“关闭”按钮,完成Dreamweaver CS6的卸载。图2-9 Dreamweaver CS6 卸载进度条图2-10 Dreamweaver CS6卸载完成2.1.4 启动 Dreamweaver CS6

用鼠标双击桌面上的快捷图标,或者通过“开始>所有程序>Adobe Dreamweaver CS6”命令,如图2-11所示,即可启动Dreamweaver CS6,启动后的界面如图2-12所示。图2-11 启动 Dreamweaver CS6图2-12 Dreamweaver CS6 启动界面2.1.5 Dreamweaver CS6的工作环境

在图2-12所示的Dreamweaver CS6启动界面中,选择“新建>HTML”,进入Dreamweaver CS6的工作界面,如图2-13所示。图2-13 Dreamweaver CS6工作界面

Dreamweaver CS6提供了一个将全部元素置于一个窗口中的集成布局。这种布局更能体现出Dreamweaver CS6异常灵活的功能特性,不同级别和不同经验的用户都能够依靠这种应用程序的外观显著提高工作效率。Dreamweaver CS6的工作界面主要由以下几部分组成。

① “菜单栏”:包含了所有 Dreamweaver CS6操作所需要的命令。这些命令按照操作类别分为“文件”“编辑”“查看”“插入”“修改”“格式”“命令”“站点”“窗口”和“帮助”10个菜单。

② “文档工具栏”:包含按钮和弹出式菜单,它们提供各种文档窗口视图,如“设计”视图和“代码”等视图和多屏幕、文件管理、调试、浏览器兼容性检查等一些常用操作。

③ “代码视图窗口”:在该窗口中显示当前编辑页面的相应代码。

④ “设计视图窗口”:在该窗口中显示所制作页面的效果,也是可视化操作的窗口,可以使用各种工具在该窗口中输入文字、插入图像等,是所见即所得的视图。

⑤ “标签选择器”:位于“文档”窗口底部的状态栏左侧,可显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签可以选择该标签及其全部内容。

⑥ “属性”面板:用于查看和更改选中对象的各种属性。

⑦ “状态栏”:在状态栏上提供了设计视图的一些辅助工具,并且还显示了当前文档的大小以及文档编码格式等相关信息。

⑧ “面板组”:由一系列快捷面板组成,在面板上可以快速操作网页。面板组主要包括插入面板、CSS样式/AP元素/标签检查器面板、数据库/绑定/组件面板和文件/资源面板等。

⑨ “设计器”按钮:单击该按钮,可以在弹出的菜单中选择一种设计器作为 Dreamweaver的工作界面。

⑩ “站点”按钮:单击该按钮,在弹出的菜单中包括“新建站点”和“管理站点”两个选项。选择相应的选项,即可弹出相应的对话框,进行站点的相关操作。

⑪ “扩展 Dreamweaver”按钮:单击该按钮,在弹出的菜单中可以选择相应的选项。

⑫ “布局”按钮:单击该按钮,在弹出的菜单中可以选择一种Dreamweaver设计窗口的布局方式。2.2文档的基本操作2.2.1 创建Dreamweaver CS6文档

创建文档是用Dreamweaver CS6进行网页设计的第一步。Dreamweaver CS6本身为用户提供了多种创建文档的方式,比如启动Dreamweaver CS6时在“新建”列表中选择 HTML,就可以创建一个空白的HTML页面,还可以利用软件提供的网页设计模板创建新文档以及从已有文件创建新文档等。下面介绍两种比较常用的文档创建方法。

在启动Dreamweaver CS6时创建空白HTML文档。

启动Dreamweaver CS6程序时,在“新建”列表中选择HTML,如图2-14所示,创建一个空白的HTML页面,如图2-15所示。图2-14 从欢迎屏幕创建文档

试读结束[说明:试读内容隐藏了图片]

下载完整电子书


相关推荐

最新文章


© 2020 txtepub下载