《计算机应用基础案例教程 教学课件 ppt 作者 许勇第 7 章网页制作软件Dreamweaver CS4》由会员分享，可在线阅读，更多相关《计算机应用基础案例教程 教学课件 ppt 作者 许勇第 7 章网页制作软件Dreamweaver CS4（53页珍藏版）》请在金锄头文库上搜索。
1、2019/8/10,1,第七章 网页制作软件Dreamweaver CS4,2019/8/10,2,本章主要内容,7.1 网页制作语言简介,7.2 Dreamweaver CS4简介,7.3 制 作 网 页,2019/8/10,3,7.1 网页制作语言简介,2019/8/10,4,7.1.1 HTML,1HTML的概念 HTML（HyperText Markup Language）即超文本标记语言或超文本链接标示语言，是WWW的描述语言。 HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）和主体（Body）
2、两大部分。其中，头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。,2019/8/10,5,2HTML基本语法结构 一个HTML文件包含两部分信息，其一是文本内容，其二即为标签。标签分单独出现的标签和成对出现的标签两种。 整个HTML文档由文档头和文档主体两部分构成，这两部分内容分别用标签和标签界定。文档头中包含文档标题等属性，文档主体则规定了将在浏览器窗口中显示的内容及其显示格式。,2019/8/10,6,3HTML常用标记 HTML标签通常是英文词汇的全称或缩略语，但它们与一般文本有区别，它们放在单书名号里：Paragragh标签是，块引用标签是。 常用的有关Web页文本格式的标签
3、有以下几种。 1）标签 2）标签 3）预格式化文本标签 4）和标签 5）标签 6）字符格式标签 7）标签,2019/8/10,7,7.1.2 XHTML,XHTML可以用以下内容来进行概括。 （1）XHTML是EXtensible Hyper Text Markup Language的英文缩写，即可扩展的超文本标记语言。 （2）XHTML语言是一种标记语言，不需要编辑，可以直接由浏览器执行。 （3）XHTML是用来代替HTML的，也可以说是HTML一个升级版本，在2000年由W3C公布发行。 （4）XHTML是一种增强了的HTML，它的可扩展性和灵活性将适应未来网络应用更多的需求。 （5）XH
4、TML是基于XML的应用。 （6）XHTML更简洁、更严谨。,2019/8/10,8,7.1.3 CSS,CSS可以用以下内容来描述。 （1）CSS是Cascading Style Sheets（层叠样式表）的简称。 （2）CSS语言是一种标记语言，不需要编译，可以直接由浏览器执行（属于浏览器解释型语言）。 （3）在标准网页设计中CSS负责网页内容（XHTML）的表现。 （4）CSS文件也可以说是一个文本文件，包含了一些CSS标记。CSS文件必须使用CSS为文件名后缀。 （5）可以通过简单更改CSS文件，改变网页的整体表现形式，可以减少工作量，所以它是每一个网页设计人员的必修课。 （6）CSS
5、是由W3C的CSS工作组产生和维护的。,2019/8/10,9,（7）CSS的定义是由三个部分构成：选择符（selector）、属性（properties）和属性的值（value）。 （8）CSS可以用任何写文本的工具进行开发，如文本工具、Dreamweaver。 （9）CSS要和HTML或者XHTML语言相结合才起作用。 （10）CSS的优点是图片传输速度比HTML网页要快一点。 （11）CSS简单来说就是用来美化网页用的，在主页制作时采用CSS技术可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。,2019/8/10,10,7.1.4 Javascript,Javasc
6、ript是为了适应动态网页制作的需要而诞生的一种新的编程语言，如今越来越广泛地应用于Internet网页制作上。Javascript是由Netscape公司开发的一种脚本语言。 在HTML基础上，使用Javascript可以开发交互式Web网页，例如可以在线填写各类表格、联机编写文档并发布等。Javascript的出现使得网页和用户之间实现了一种实时性的、动态的、交互性的关系，使网页包含更多活跃的元素和更加精彩的内容。 一个Javascript程序其实是一个文档，一个文本文件，它需要嵌入到HTML文档中。所以，任何可以编写HTML文档的软件都可以用来开发Javascript。,2019/8/1
7、0,11,7.2 Dreamweaver CS4简介,2019/8/10,12,7.2.1 Dreamweaver CS4的特点,Dreamweaver CS4提供了多种视窗模式，满足了不同层次用户的需求；它可以实现在网页中方便地插入对象；时间轴和层的结合，实现了动画的快速生成，使页面有了更多的动感；模板的使用能够使站点中的文档风格具有一致性，可以增强一个站点的整体效果。,2019/8/10,13,7.2.2 Dreamweaver CS4的操作界面,第一次启动Dreamweaver CS4时，会出现如下图所示界面。 1）“设计器”工作区布局 如果用户的主要工作是使用Dreamweaver中的
8、可视化工具制作静态页面，最好选择“设计者”工作区。,2019/8/10,14,2）“编码器”工作区布局 选择“设计器”布局，单击“确定”按钮之后可以看到Dreamweaver CS4的工作界面，如下图所示。,2019/8/10,15,1菜单栏 菜单栏包括【文件】、【编辑】、【查看】、【插入】、【修改】、【格式】、【命令】、【站点】、【窗口】和【帮助】10个菜单，如下图所示。 2文档工具栏 文档工具栏包括了控制文档窗口视图的按钮和一些比较常用的弹出菜单，用户可以通过【代码】、【拆分】、【设计】和【实时视图】4个按钮使工作区在不同的视图模式之间进行切换，如下图所示。,2019/8/10,16,3文
9、档窗口 文档窗口是网页的设计区，所设计的网页或代码都将显示在该窗口。 4状态栏 状态栏位于文档窗口的底部，如下图所示。在状态栏最左侧是标签选择器，用于显示当前选定内容标签的层次结构。单击该层次结构中的任何标签可以选择该标签及其全部内容。 5属性面板 网页设计中的对象都有各自的属性。用户可以在属性面板中设置对象的属性，且属性面板的设置项目会根据对象的不同而不同。下图所示的是选择表格内的文字对象后的属性面板。,2019/8/10,17,6插入栏 插入栏包含常用、布局、表单、数据、Spry、文本、收藏夹等10个选项卡。通过插入栏可以很方便地插入网页对象。插入栏有两种显示方式，一种是以菜单方式显示，另
10、一种是以制表符方式显示。“常用”插入栏右图所示。 7文件面板 文件面板具有3个方面的功能：管理本地站点，包括建立文 件和文件夹、重命名文件和文件夹，以及管理本地站点的结构；管理远程站点，包括文件上传和更新文件；连接网络应用服务器，预览使用了程序语言的网页。,2019/8/10,18,7.3 制 作 网 页,2019/8/10,19,网站的整体风格是指站点的整体形象给浏览者的综合感受。这个“整体感受”包括站点的CI（标志、色彩、字体和标语）、版面布局、浏览方式、交互性、文字、内容价值等诸多因素。 下图所示分别是简洁型和个性化的风格。,7.3.1 确定网站的整体风格,2019/8/10,20,7.
11、3.2 创建与管理站点,（1）双击Dreamweaver CS4快捷方式图标进入主界面，如图1所示。 （2）在标题栏中依次选择“站点”|“管理站点”命令，打开“管理站点”对话框，如图2所示。也可以通过展开“文件”面板组，单击“文件”面板中的“管理站点”超链接，如图3所示。在“管理站点”对话框中单击“新建”按钮，在下拉列表中选择“站点”。,图2,图1,图3,2019/8/10,21,（3）在打开的对话框中包含两个选项卡：“基本”和“高级”，如左图所示。 （4）在打开的对话框中选择是否要采用服务器技术，这里我们选择“否，我不想使用服务器技术”选项，如右图所示。单击“下一步”按钮。,2019/8/1
12、0,22,（5）弹出使用文件询问界面，包括两个选项，由于我们将在本地硬盘上进行站点的制作和测试，因此这里选中“使用本地网络直接在服务器上进行编辑”单选按钮；在文本框中输入站点文件夹的路径D：myWebsite，如左图所示。 （6）对话框中将显示站点的基本信息概要，如右图所示。单击“完成”按钮，返回“管理站点”对话框。,2019/8/10,23,7.3.3创建网页基本元素,1打开并保存新页 新建新页面：选择“文件”|“新建”命令，打开“新建文档”对话框，如下图所示，从各种预先设计的页面类别中选择一种，比如选择“空白页”中的HTML，然后单击“创建”按钮，Dreamweaver CS4即展开工作区
13、界面。 保存文档：选择“文件”|“另存为”命令，打开“另存为”对话框，选择保存的位置并输入文件名，然后单击“保存”按钮。,2019/8/10,24,2添加具有样式的文本 在Dreamweaver CS4中，可以在文档窗口中键入文本，或从其他源（例如Microsoft Word文件）复制并粘贴文本。使用“属性”面板可以对文本的格式进行设置。 3添加图像 选择“插入”|“图像”命令，打开“选择图像源文件”对话框，如左图所示，选中图像文件后单击“确定”按钮即可给网页添加图像。如右图所示。,2019/8/10,25,4设置页面背景 （1）右击页面，在弹出的快捷菜单中选择“页面属性”命令，打开“页面属性
14、”对话框，如左图所示。 （2）在对话框中选择“分类”栏中的“外观”选项。 （3）在右窗格中，单击“背景颜色”栏右边的下三角按钮，在弹出来的颜色面板中选择颜色，如右图所示。单击“确定”按钮，即为网页设置了背景颜色。,2019/8/10,26,5查看代码 Dreamweaver CS4的代码编写所支持的语言是很多的，有HTML、XHTML、CSS、JavaScript、ColdFusion 标记语、Visual Basic、C#、JSP、PHP，但Dreamweaver CS4的语言特定编码功能并不支持某些语言，如Perl。 单击文档工具栏上的“显示代码视图”按钮，即可进行查看所制作网页的代码，如
15、右图所示。,2019/8/10,27,6预览网页 编辑完网页的内容后，依次选择“文件”|“保存”命令可将网页进行保存。返回到页面编辑器中，按F12键可预览网页效果，如下图所示。,2019/8/10,28,7.3.4使用表格布局网页,表格是现代网页制作的一个重要组成部分。它之所以重要是因为可以实现网页的精确排版和定位。下图展示的是通过对一个2行2列表格进行编辑后的网页效果。,2019/8/10,29,这幅页面的排版格式如果用以前我们所讲的对齐方式是无法实现的，为此需要利用表格来实现，操作步骤如下。 （1）单击设计窗口右侧常用工具栏中的“表格”按钮，如左图所示，或者选择“插入”菜单中的“表格”命令
16、，打开“表格”对话框，如右图所示。 （2）在“表格”对话框，设置表格为2行2列，其余的参数都保留其默认值，单击“确定”按钮即可。,2019/8/10,30,（3）在窗口中可以看到新建了一张表格，如左图所示。将指针移到表格的边框线上，可以调整表格的高或宽。 （4）按住Ctrl键，分别单击表格的左上格和左下格，可同时选中这两个单元格，如右图所示。,2019/8/10,31,（5）在展开的“属性”面板中单击“合并单元格”按钮，可将表格的两个单元格合并在一起，如左图所示。如果要分割单元格，则先选中单元格，再单击“分割单元格”按钮。合并后的单元格如右图所示。 （6）选择表格，将指针移到表格的黑色点上，按住鼠标左键并进行拖动，到适当的位置时松开鼠标。 （7）单击左单元格，输入“照片赏析”文字，并调整单元格的大小。因示例要求是竖排，故在输入每个字之后按Enter键进行换行。 （8）在右上单元格内插入相应的图片；在右下单元格内插入文本。,2019/8/10,32,7.3.5创建超链接,1超链接概述 超链接通常是从一个网页到另一个目标网页，或
