网站建设与网页制作课程PPT.ppt

1、网页设计与制作,吕戈静,2016.10,教学目标,通过本章的学习，能够让学生了解网站的设计与工作流程，掌握HTML的基本概念和结构，能利用HTML制作网页,了解和DHTML/XML的区别，能熟练掌握利用Dreamweaver制作网页，利用Fireworks制作图片、利用Flash制作动画；并能有机地结合，制作出精美的网页。,第1章 网页设计概述 第2章 HTML语言基础 第3章 Dream weaver基础 第4章 网页中的基础元素 第5章 网页页面布局 第6章 网页中的层和时间轴 第7章 表单的应用 第8章 在网页中使用行为 第9章 CSS样式使用 第10章 网页中的多媒体应用 第11章 模

2、板和库 第12章 站点测试和发布 第13章 Flash 8简介 第14章 Fireworks8简介,目录,第1章 网页设计概述,$ 知识目标 掌握网页、网站及主页的概念 了解网页中的主要元素 了解各种网页制作工具 8 能力目标 各种网页制作工具的配合使用 网站的整体规划 网站的设计流程,1.1 网页和网站 1.2 网页中的主要元素 1.3 网页制作工具 1.4 网页设计的基本流程 本章小结,第1章 网页设计概述,1.1 网页和网站,1.1.1 网页 1.1.2 网站 1.1.3 网页的基本功能,1网页网页（WEB）：是用html语言编写的，通过www网传输，并被web浏览器翻译成可以显示出来的

3、集合文本、图片、声音和动画等信息元素的页面文件（网页示例）。 2网页的类型 根据页面内容可以分首页、主页、专栏网页、内容网页和功能网页等类型；按制作技术分为静态网页与动态网页。,1.1.1 网页,1.1 网页和网站,网站就是把一些网页等信息文件通过超链接的形式关联起来形成的信息文件的集合。信息可以是网页形式也可以是其他的文档形式。 网页与网站的区别与联系： 网站是一个文件夹，其中的文件不仅是网页还有网站所需的其他文件或文件夹。网页是一个页面文件，用来发布各种信息。网页是网站的构成要素，是网站信息发布与表现的一种主要形式；网站是网页通过超链接形成的集合。,1.1.2 网站,1.1 网页和网站,1

4、、媒介的作用。使用者与信息之间的媒介。一方面是发布者，功能是发布信息；另一方面是浏览者，功能是提供浏览的信息，通过浏览网页找寻需要的信息。 2、互动的作用。浏览者与网页制作单位之间互动的窗口，可以单向或双向传递信息。 3、传输的作用。作为传输各种电子文件或信息之用，如下载说明书、更新文件、驱动程序等。,1.1.3 网页的基本功能,1.1 网页和网站,1.2 网页中的主要元素,1.2.1 文本 1.2.2 图像 1.2.3 链接标志 1.2.4 其他的基本要素,网页的基本要素一般包括：文字、图像、动画和链接标志等，除此之外，网页的元素还包声音、多媒体和视频等。,是网页中最基本的元素。网页中文字的

5、设计一般从以下几个方面来考虑： 1字体的选择。 2字号、行距的选择。 3特殊字体的使用。 4字体的颜色。,1.2.1文本,1.2 网页中的主要元素,现在网络上使用的绝大多数图片和图像是gif、jpeg和png文件格式。 网页上使用图像要注意的问题： JPEG格式适合于照片图像，GIF格式适合于包含纯色的图像，例如插图和线条图。 利用图像编辑软件来放大或缩小图像屏幕显示图像的分辨率一般为72dpi。制作图像时，不必使用比此再高的分辨率。,1.2.2图像,1.2 网页中的主要元素,如果建立的图像中只有黑色和白色，处理时可将它保存为黑白图像格式，这样可以减少图像文件的大小。 如果设计的GIF格式图像

6、包含了渐变和直线，应尽量使得它们水平，因为GIF格以每条水平线为基础来压缩。 尝试各种不同的JPEG压缩率 使用合适的色彩模式。 慎用动画。,1.2.2图像,1.2 网页中的主要元素,链接也叫超链接（Hyperlink），是从一个网页指向另一个目的端的链接，是页面间的链接关系。 链接标志（载体）指的是网页中特殊的文本或图像，它们常常用不同的颜色和下划线来标识，在浏览器中，访问者可以用鼠标单击它们，能够从当前的网页转到链接的目的端位置。 超链接的标志一般有：文本、图像、热区三种。要注意的是，所有超链接标志均应清晰无误地向浏览者标识出来，让人一看就知道。,1.2.3链接标志,1.2 网页中的主要元

7、素,除上述几种要素之外，在网页上经常使用的还有动画、视频、声音等各种信息的形式。 1动画。目前网络上常用的动画类型有gif和Flash动画两种。 2视频。是多媒体网页的一个重要组成部分，常用的视频格式有avi、mpeg和mov等，视频会大大增加网页的文件量，从而使用访问速度受到影响，因此要慎用。 3音频。在网页中插入音频会增加网页的生动性。常用的音频格式有rm(ram)、midi、wav和mp3等格式。音频文件和视频文件一样都会增加网页的文件量，因此要慎用。,1.2.4其他的基本要素,1.2 网页中的主要元素,1.3 网页制作工具,1.3.1网页编辑工具 1超文本标识语言（HTML） 2Fro

8、ntPage简介 3Dreamweaver 1.3.2网页图像编辑工具 1.3.3动态网页技术,1Photoshop。是Adobe公司开发的，是当今最流行的图形图象处理软件之一，它能够实现各种专业化的图像制作、处理及合成。 2Fireworks。是由Macromedia公司开发的图形处理工具，它是第一个专门为制作网页图形而设计的软件，同时也提供专业的网页图形设计及制作的解决方案。 3.Flash。Macromedia公司出品的Flash是目前非常流行的一种交互式Web矢量动画软件。 Dreamweaver和Flash、Fireworks三个软件被称为“网页三剑客”，是现在公认的比较标准的网页制

9、作利器。,1.3.2 网页图像编辑工具,1.3 网页制作工具,动态网页可以实现网页浏览者和网页设计者的交互，实现交互技术有两种：一种是客户端技术如常用的JavaScript和VBScript；另一种是服务器端技术如目前常用的ASP和PHP。 1ASP(Active Server Pages) 2PHP(Hypertext Preprocessor) 3JSP(Java Server Pages),1.3.3动态网页技术,1.3 网页制作工具,1.4 网页设计的基本流程,1.4.1 网站的设计流程 1.4.2 网页的设计与制作 1.4.3 网页的测试 1.4.4 网页上传和发布,1确定网站的主题

10、 2规划网站的整体结构 3收集整合网页素材 4确定网页版面布局。 5制作网页。 6添加网页特效。 7测试和发布网站。,1.4.1 网站的设计流程,1.4 网页设计的基本流程,1确定网页的版面布局 （1）平衡性。（2）对称性。（3）对比性。 （4）疏密度。（5）比例。（6）韵律感。 网页的排版布局是决定网站美观与否的一个重要方面,通过合理的、有创意布局,才可以把文字、图像等内容完美地展现在浏览者前面。 2网页设计与制作 网页设计与制作一般分为静态网页制作和动态网页制作两类。,1.4.2 网页的设计与制作,1.4 网页设计的基本流程,1浏览器兼容性测试。目前浏览器有：Internet Explor

11、er与Netscape两大主流浏览器，二者对HTML和CSS等语法的支持度是不同的。在Dreamweaver中提供了可以检查网页中是否含有某版本浏览器不能识别的语法功能，设计者可以借助其进行检查。 2平台的兼容性测试。设计要为用户着想，必须最少在一台PC和一台Mac机上测试你的网站网页，看看兼容性如何； 3超链接完好性测试。超链接是连接网页之间、网站之间的桥梁，浏览者是不愿意访问一个经常出现“找不到网页”的问题的网站，作为设计者必须检测超链接的完好性，保证链接的有效性，不要留下太多的坏链接。,1.4.3网页的测试,1.4 网页设计的基本流程,网页设计好，必须把它发布到互联网上，否则网站形象仍然

12、不能展现出去。发布的服务器可以是远程，也可以是本地。如果是发布到互联网上，要先申请域名和主页空间，然后再利用专用软件（如：CuteFTP）上传，FTP有很多种软件，最著名的是 CuteFTP 和 LeapFTP，也可以用Dreamweaver内置的FTP上传。,1.4.4网页上传和发布,1.4 网页设计的基本流程,本章小结,第1章 网页设计概述,$ 知识目标 了解HTML文件的基本结构 掌握HTML中文本的编辑及图像的语法 掌握HTML中各种设置超级链接的语法 掌握HTML中表格和框架的基本语法 8 能力目标 掌握进行文本及图像的编辑操作 掌握创建各种超级链接的操作 能够编写简单的HTML网页

13、 掌握HTML文件中表格和框架的使用,第2章 HTML语言基础,2.1 HTML概述 2.2 文本的编辑 2.3 图像编辑 2.4 建立超链接 2.5 表格与框架 本章小结,第2章 HTML语言基础,2.1 HTML概述,2.1.1 HTML简介 2.1.2 HTML语法结构,HTML（Hyper Text Markup Language）又称超文本标识语言，是一种标识性的语言，是网页设计的最初语言。文件的扩展名:“html”或“htm”。 例2.1 简单的HTML文档 .长春欢迎您！ 这里是长春悠游网，我们带您畅游长春！ 由“”组成的就是标记。在HTML语言中标记分“单标记”和“围堵标记”。

14、,2.1.1 HTML简介,2.1 HTML概述,1围堵标记 格式： 2单标记 格式： 只有起始标记，没有结束标记。最常用的单标记是, 它表示段内换行。 3标记属性 格式： 各属性间无前后顺序，属性也可省略，当省略属性时取标记的默认值。,2.1.1 HTML简介,2.1 HTML概述,HTML文档的基本结构： 文件开始 标头区开始 .标题区 标头区结束 文件主体内容开始 文件主体内容 文件主体内容结束 文件结束 其中之间表示这是个网页文件，是必有的标记。,2.1.2 HTML语法结构,2.1 HTML概述,2.2 文本的编辑,2.2.1 段落标记 2.2.2 文本标记 2.2.3 标题显示等级

15、 2.2.4 列表,1段落（） 基本语法格式为： 其中参数align用于设定段落的位置是靠左、靠右还是居中。默认值是靠左；除align之外还有其他参数如class。class参数是可选项，如果没有将按照默认值显示。 2换行 单标记，放在一行的末尾，可以在一个段落内实现文本的强制换行，设置标记后面的文本字、图像和表格等内容显示于下一行。,2.2.1 段落标记,2.2 文本的编辑,1字体标记 其基本语法格式为： Size：设置字体的显示字号，范围是从“17”，其中“3”是默认值。 Color：设置文本的颜色，值可以是颜色名（英文如red代表红色）或颜色的十六进制代码（#000000代表黑色，#FF

16、FFFF代表白色）。 Face：设置文本显示的字体，值为字体的名称。 在文本的标记中还有很多常用的标记，比如表示字体效果的，(黑体)，（斜体），（加下划线）。,2.2.2 文本标记,2.2 文本的编辑,2特殊字符 HTML中除了我们上面学的的一些标记外，还有一些我们常用的特殊字符比如“”，这些特殊字符在HTML语言中都有对的转义符，常用的转义符与特殊字符参见下表：,2.2.2 文本标记,2.2 文本的编辑,3水平线标记 水平线是在网页上划出一条水平的分割线，用来标记水平线。语法格式为： Size：设置水平线的高度，以像素为单位。 Color：设置水平线的颜色。 Width：设置水平线的宽度，单

17、位是像素或百分比，像素是绝对大小，不会随着程序窗口的大小而改，百分比是相对于程序窗口水平线所占的比例，会随着程序窗口的大小而改变。 Align：设置水平线的对齐方式。对齐方式有左对齐，居中，右对齐三种。,2.2.2 文本标记,2.2 文本的编辑,语法格式为： n：表示不同级别的标题，n值可以是1-6中的任意数字，其中1表示的标题字体最大。另外，可以用align属性设置对齐方式，常用的有左对齐，居中，右对齐三种对齐方式。,2.2.3 标题显示等级,2.2 文本的编辑,在HTML中，列表常用的有“有序列表”和“无序列表”。 1有序列表 基本语法结构为： 项目1 项目2 项目n ,2.2.4 列表,

18、2.2 文本的编辑,1有序列表 Type：设置列表的序号类型，常用序号如下： n=1：用数字作为序号。 n=A；用大写字母作为序号。 n=a：用小写字母作为序号。 n=I：用大写罗马数字作为序号。 n=i：用小写罗马数字作为序号。 Start：为可选参数，用于设置序号的起始数值。如不添加“start”则从每类序号的第一个序号开始。,2.2.4 列表,2.2 文本的编辑,2无序列表 基本语法结构为： 项目1 项目2 项目n Type:设置符号形状，有实心圆、小正方形、空心圆三种，具体如下： n=disk：符号为实心圆。 n=square：符号为正方形。 n=circle：符号为空心圆。,2.2.

19、4 列表,2.2 文本的编辑,2.3 图像编辑,2.3.1 插入图像 2.3.2 使用背景图像,我们在网页上经常会浏览图像，适当使用图像可以增加网页的美观。在网页最常用到的是插入图像和设置背景图像。,1语法格式： ，单标记 Src：指明要添加的图像所在的具体路径和文件名。路径可以是相对路径，也可以是绝对路径。例：。 绝对路径：完整的描述文件位置的路径就是绝对路径。对于绝对路径可以不需要知道其他任何信息就可以判断出文件的位置。 相对路径：所谓相对路径,顾名思义就是当前文档与目标的相对位置。例.,2.3.1插入图像,2.3 图像编辑,2图像的属性 除了“src”以外，还有其他属性，可以定义图像的对

20、齐方向，与周围元素的距离等，各属性及作用见表2.2。 表2.2 图像属性列表,2.3.1插入图像,2.3 图像编辑,语法格式为： ,2.3.2 使用背景图像,2.3 图像编辑,2.4 建立超链接,2.4.1 建立超链接 2.4.2 使用书签 2.4.3 标记新窗口和基准链接,建立超链接的标记是，语法格式为： 超链接标识 url：指明链接目标的具体路径和文件名。 超链接标识：是网页中链接的载体，可以是文字或图像等页面元素，用户点击它就会跳到超链接的目标位置。,2.4.1 建立超链接,2.4 建立超链接,定义书签 在HTML中，首先要定义书签，然后才在链接使用。定义书签的语法格式为： 书签名不能用

21、中文，只能用英文和数字。 使用书签链接 其链接的格式为： 超链接标识 #与书签名之间不能有空格。,2.4.2使用书签,2.4 建立超链接,1标记新窗口（target） “target=”_blank”，是链接标记的一个参数。语法格式为： 超链接标识 当点击链接载体的，就会在新窗口打开链接目标。 2基准链接 标记是单标记，禁止使用结束标记，可以改变文件中所有链接标记的参数默认值。它只能位于文件的开头部分，即标记 与 之间。语法格式为： ,2.4.3 标记新窗口和基准链接,2.4 建立超链接,2.5 表格与框架,2.5.1 建立表格 2.5.2 表格属性 2.5.3 建立框架 2.5.4 框架属性

22、,表格标记有、和四个，他们的具体含义是： :定义表格,是表格必须的元素 ：定义标题单元格，在这个单元格中的文字将用粗体表示。 ：定义表格中的行。 ：定义单元格，使用标记一定要放在标记内部。 上述标记中，可以省略，其他三个是必须的。具体应用见例2.12。 标记中可以添加属性和参数，其中border，用于设置表格的边框宽度，值为大于等于“0”的整数，当值为“0”，在浏览器中显示无边框表格，无边框表格是网页布局最主要的手段。,2.5.1 建立表格,2.5 表格与框架,除了border外，常用的表格属性参数有： ：定义单元格之间的距离，值为大于等于“0”的整数，单位是像素，“0”表示没有间距。 ：定义

23、单元格内的文字或其他元素到边框的距离,值为大于等于“0”的整数，单位是像素，“0”表示没有距离。 ：定义表格的高度，值有两种单位，一是像素，表示表格高度为固定大小，一是百分比表示表格占据整个网页的高度百分比。 ：定义表格的宽度，与高度一样有像素和百分比两种单位。 ：定义表格边框的颜色。 ：定义表格的背景色,2.5.2 表格属性,2.5 表格与框架,1框架页的基本结构 ：标记一个普通的HTML文档，用于在不支持框架的浏览器中显示。 ：用于定义分割窗口，可以设置窗口的分割方式及是否显示框架边框等。 用于设置每个区域显示的内容，每个URL值指定一个事先己制作好的文件。,2.5.3 建立框架,2.5

24、表格与框架,2建立框架 （1）建立纵向框架 建立纵向框架的基本语法为： Cols：设置垂直分割窗口，用“，”分隔，它的值可以是像素值或者是百分比，代表对应的子窗体占屏幕窗口的大小。如要将屏幕分割成三个子窗口，其中两个都占整个窗口的30%，那么只给开始的两个窗口赋值。语句为，*代表框架剩余的部分分给最后一个子窗口，当然也可以写成。,2.5.3 建立框架,2.5 表格与框架,（2）建立横框架 建立横向框架的基本语法为： rows：这个参数用来水平分割窗口，它的值可以是数字或者是百分比，代表对应的子窗口的大小，使用方法与cols相同。 （3）嵌套框架 嵌套框架是在己有的框架中嵌入框架的结构，利用嵌套

25、框架可以实现窗口的横向与纵向的混合分割。嵌套框架的设置见例2.16.,2.5.3 建立框架,2.5 表格与框架,常用的框架属性有以下几种： 1：设置框架的边框。值为yes（或1）有边框或no（或0）无边框。 2：设置各窗口之间的空白区域大小。值是以像素为单位的数值。 3：设置边框的颜色。值可以是的英文或颜色代码。 4：设置框架是否显示滚动条。有三个值：yes表示有滚动条，no表示没有，auto表示根据内容的多少浏览器自动设置。 5：设置框架在浏览器中不能被调整。,2.5.4 框架属性,2.5 表格与框架,本章小结,第2章 HTML语言基础,$ 知识目标 认识Dreamweaver8操作界面 掌

26、握如何规划站点的结构 掌握网页文件的基本操作 8 能力目标 熟悉工作界面和使用各种面板 能够建立和管理本地站点 熟练网页文件的基本操作,第3章 Dream weaver基础,3.1 Dream weaver 8工作界面 3.2 规划与创建站点 3.3 网页文件的基本操作 本章小结,第3章 Dream weaver基础,3.1 Dream weaver 8工作界面,3.1.1 启动Dreamweaver8 3.1.2 Dreamweaver8操作界面,单击“开始”按钮，在开始菜单中依次选择“程序”“Macromedia”“Macromedia Dreamweaver8”，启动Dreamweave

27、r8程序。启动Dreamweaver8后出现开始界面。,3.1.1 启动和退出Dreamweaver8,3.1 Dream weaver 8工作界面,在Dreamweaver8的起始页中，单击“创建新项目”下的“HTML”，打开Dreamweaver8的工作界面。,3.1.2 Dreamweaver8操作界面,3.1 Dream weaver 8工作界面,3.1.2 Dreamweaver8操作界面,3.1 Dream weaver 8工作界面,文档工具栏,面板组和文件面板,3.2 规划与创建站点,3.2.1 规划网站的整体结构 3.2.2 建立本地站点 3.2.3 管理本地站点,规划网站的结

28、构要注意以下几个方面： 1文件及文件夹的命名要规范 2不要将所有文件存放在站点根目录下 3建立子文件夹对文件进行分类存放 4每个主栏目下都建立独立的Image目录 5模板（Library）和库(Templates)文件夹一定要位于站点根目录之下并不能被更名，否则在使用模板和库就会出错。,3.2.1 规划网站的整体结构,3.2 规划与创建站点,创建站点,1.本地站点 本地文件夹是我们在硬盘上建立的工作目录。Dreamweaver 将该文件夹作为“本地站点”。 2.远程站点 远程文件夹是存储文件的位置，Dreamweaver 该文件夹称为“远程站点”。一般说来，远程文件夹位于运行 Web 服务器的

29、计算机上。 3.测试服务器 测试服务器文件夹是 Dreamweaver 处理动态页的文件夹。,1 建议：使用英文小写字母命名站点中的文件夹和文件； 2 建议：文件名要易记，要统一命名。,站点结构规划,选择菜单“站点-管理站点”，打开编辑站点对话框。,站点维护操作,1 新建站点； 2 编辑站点； 3 复制站点； 4 删除站点； 5 导入和导出站点。,1在本地电脑硬盘上建立一个空的文件夹 2在Dreamweaver8中建立站点的操作： （1）单击菜单栏中“站点”|“新建站点”命令，打开“未命名站点1的站点定义为”对话框。,3.2.2 建立本地站点,3.2 规划与创建站点,（2）在“您打算为您的站点

30、起什么名字？”对话框中输入站点的名称，如我们在此输入“长春悠游网”。然后单击下一步。,3.2.2 建立本地站点,3.2 规划与创建站点,（3）在对话框中选择“否，我不想使用服务器技术”，单击“下一步”，打开对话框。,3.2.2 建立本地站点,3.2 规划与创建站点,（4）选择“编辑我的计算机上的本地副本，完成后再上传到服务（推荐）（E）”选项。 （5）单击“浏览”按钮 ，打开对话框，选择D盘上创建的“myweb1”文件夹为站点本地根文件夹。 （6）单击“下一步”打开对话框如下右图。,3.2.2 建立本地站点,3.2 规划与创建站点,（7）在“如何连接到远程服务器？”选项的下拉列表中选择“无”，

31、单击下一步，打开站点定义的“总结”对话框如左图。 （8）单击“完成”后，可以在“文件”面板中看到所设置的站点，如右图所示。,单击菜单栏中“站点”|“站点管理”命令,打开“站点管理”对话框。 （一）复制站点 1在“管理站点”对话框中，选择要复制的站点，如选择“依林小镇”。 2单击对话框中的“复制”按钮，即可复制出“依林小镇复制”的站点。,3.2.3 管理本地站点,3.2 规划与创建站点,（二）删除站点 1在“管理站点”对话框中，选择要删除的站点，如选择“依林小镇”。 2单击对话框中的“删除”按钮，弹出提示对话框，询问是否删除本地站点（如图所示），单击“是”，即可删除本地站点“依林小镇”。,3.2

32、.3 管理本地站点,3.2 规划与创建站点,（三）编辑站点：编辑站点是对己创建的本地站点进行修改和编辑。将“依林小镇复制”站点的名称改为“依林小镇”为例的操作为： 1在“管理站点”对话框中选择要编辑的站点“依林小镇复制”。 2单击对话框中的“编辑”按钮，打开“依林小镇复制的站点定义为对话框”，单击高级选项卡。 3.在站点名称对话框中，将“依林小镇复制”改为“依林小镇”，单击“确定”按钮即可。,3.2.3 管理本地站点,3.2 规划与创建站点,3.3 网页文件的基本操作,3.3.1 新建网页 3.3.2 保存网页 3.3.3 关闭网页 3.3.4 打开网页 3.3.5 预览网页,1执行以下操作之

33、一： 单击菜单栏中“文件”|“新建”命令。 单击标准工具栏上的 按钮。 2打开“新建文档”对话框。 3选择“基本页”选项中的“HTML”，单击“创建”按钮，即可新建一个空白的文档。,3.3.1 新建网页,3.3 网页文件的基本操作,1执行以下操作之一： 单击菜单栏中“文件”|“保存”命令 单击标准工具栏上的 按钮。 2打开“另存为”对话框。 3在“保存在”选项中选择网页的保存位置。在“文件名”文本框中的输入文件名。 4单击“保存”按钮，文件就保存到指定位置。,3.3.2 保存网页,3.3 网页文件的基本操作,单击菜单栏中“文件”|“关闭”或单击文档的窗口右上角的“关闭”即可。,3.3.3 关闭

34、网页,打开己保存的网页有以下三种方法 、通过文件菜单打开己有的网页： （1）执行以下操作之一： 单击菜单栏中的“文件”|“打开”命令。 或单击标准工具栏上的 。 （2）打开“打开”对话框。 （3）在查找范围下拉列表中选择网页所在的文件夹,选择要打开的文件,单击“打开”按钮,即可打开了文件 2、在“文件”面板中打开网页文件 在“文件”面板中,双击要打开的文件,即可打开网页 3、在资源管理器中打开网页文件 在资源管理器中，右击要打开的网页文件，在弹出的快捷菜单中选择“在Dreamweaver8”中编辑即可将文件在Dreamweaver8中打开。,3.3.4 打开网页,3.3 网页文件的基本操作,以

35、在Iexplore中预览为例，执行以下操作之一： 单击菜单栏中“文件”|“在浏览器中预览”|“Iexplore 6.0”命令。 使用快捷键为F12。 在文档工具栏中单击，选择在浏览器中预览，如图所示。,3.3.5 预览网页,3.3 网页文件的基本操作,本章小结,第3章 Dream weaver基础,$ 知识目标 掌握在网页中的文本和段落的设置方法 掌握图像的插入及其属性的设置的方法 熟悉页面属性的设置 熟悉各种超级链接及设置 8 能力目标 掌握文本和段落属性设置的操作 掌握图像的插入及图像属性设置的操作 掌握页面属性的设置操作 掌握各种超级链接的设置及编辑操作,第4章 网页中的基础元素,4.1

36、 在网页中插入文本 4.2 在网页插入图像 4.3 插入其他网页元素 4.4 设置网页的页面属性 4.5 设置超级链接 本章小结,第4章 网页中的基础元素,4.1 在网页中插入文本,4.1.1 插入文本 4.1.2 设置文本格式 4.1.3 段落格式的编辑 4.1.4 设置列表 4.1.5 简单的CSS样式应用,（一）插入普通文本:添加文本有以下三种方法： 1直接在文档窗口中输入文本。 2拷贝文本。 3从其他文档导入文本。 （二）插入特殊字符 1将光标定位在要插入特殊字符的位置。 2在“插入”栏的“文本”类别中，选择要插入的符号，如图。,4.1.1 插入文本,4.1 在网页中插入文本,1选择要

37、设置的文本。 2在“属性检查器” ，设置文本格式。,4.1.2 设置文本格式,4.1 在网页中插入文本,（一）应用己有的标题格式 （二）自定义设置段落格式 1设置对齐方式 2设置段落缩进,4.1.3 段落格式的编辑,4.1 在网页中插入文本,列表包括项目列表和编号列表两种。创建项目列表或编号列表的操作为： 1.选择要创建列表的文本。 2.在“属性检查器”中单击 按钮，可以创建项目列表；单击 按钮，可以创建编号列表。 3.单击“属性检查器”中的 按钮，以弹出的“列表属性”对话框中可以重新设置列表的属性。,4.1.4 设置列表,4.1 在网页中插入文本,CSS是Cascading Style Sh

38、eets（层叠样式表单）的简称。使用CSS样式改变行距的操作为： 1按组合键Shift+F11，打开CSS面板如所示。 2点击CSS面板上的 按钮，打开“新建CSS规则”对话框并设置如图右，单击确定。,4.1.5 简单的CSS样式应用,4.1 在网页中插入文本,单击“确定”按钮，打开“.hangju的CSS规则定义”对话框。设置如图，单击“确定”退出。,4.1.5 简单的CSS样式应用,4.1 在网页中插入文本,选择要应用样式的两段文本或光标定位在段落中，在“属性检查器”中“样式”下拉列表中，选择“hangju”，则文本的行距发生了改变，如图所示。,4.1.5 简单的CSS样式应用,4.1 在

39、网页中插入文本,4.2 在网页插入图像,4.2.1 插入图像 4.2.2 设置图像属性 4.2.3 编辑图像 4.2.4 图像外部编辑 4.2.5 鼠标经过图像 4.2.6 创建导航条,在网页中插入图像的操作为： 1.将光标定位在要插入图像的位置。 2.执行以下操作之一： 单击菜单栏中的“插入”|“图像”命令。 在“插入”栏的“常用”类别中，单击“图像”按钮 3打开“选择图像源文件”对话框，选择需要的文件名称。 6在“相对于”下拉列表中选择“站点”。 7单击“确定”按钮，图像则插入到网页中。,4.2.1 插入图像,4.2 在网页插入图像,在文档窗口选中图像时，在“属性检查器中就可以显示该图像的

40、属性，并可对其进行修改。 1设置图像大小：可以直接在“宽”和“高”两个文本框内输入新的数值即可。还可以直接用鼠标拖动来改变图像的大小。具体操作为： （1）选中要改变的图像，图像四周出现控制点。 （2）拖动任一个控制点则可改变图像大小,4.2.2 设置图像属性,4.2 在网页插入图像,3设置图像对齐方式 4其他图像属性 “源文件”：指定图像的源文件。单击“浏览”按钮 或者直接键入文件的路径，可以重新定义源文件。 “替代”：用于指定在图像不能正常显示时，显示的关于图像的文本提示信息。在某些浏览器中，当鼠标指针滑过图像时也会显示该文本。 “垂直边距和水平边距”：以像素为单位设定图像与周围的网页元素间

41、的距离。 “边框”：是以像素为单位的图像边框的宽度。默认为无边框。,4.2.2 设置图像属性,4.2 在网页插入图像,在Dreamweaver8中提供了基本图像编辑功能，各编辑按钮如下： 优化。单击此按钮可以打开“Fireworks”程序对图像进行优化。 裁剪。可让修剪图像的大小，从所选图像中删除不需要的区域。 重新取样。可对已调整大小的图像进行重新取样，提高图片在新尺寸和形状下的品质。 亮度和对比度。可让调整图像的亮度和对比度设置。 锐化可调整图像的清晰度。,4.2.3 编辑图像,4.2 在网页插入图像,启动外部图像编辑器执行以下操作之一： 双击要编辑的图像。 选择要编辑的图像，然后在属性检

42、查器中单击“编辑”。 在“站点”面板中双击图像文件，启动主图像编辑器。如果尚未指定图像编辑器，Dreamweaver8 将启动该文件类型的默认编辑器。,4.2.4 图像外部编辑,4.2 在网页插入图像,设置鼠标经过图像的操作为： 1在“文档”窗口中,将光标定位在要显示鼠标经过图像的位置。 2执行以下操作之一，打开插入鼠标经过图像对话框： 单击菜单栏中“插入|图像对象|鼠标经过图像”命令。 在“插入”栏的“常用”类别中，单击“图像”按钮右侧的箭头，在弹出的菜单中，选择“鼠标经过图像”，如图所示。,4.2.5 鼠标经过图像,4.2 在网页插入图像,3打开“鼠标经过图像”对话框。 4单击“确定”，在

43、网页中插入了鼠标经过图像。 5保存并在浏览器中预览网页。,4.2.5 鼠标经过图像,4.2 在网页插入图像,1准备好用于制作导航条的图像,这些图像最好大小尺寸一样。 2在文档窗口中，将光标定位在要显示导航条的位置。一般导航条位网页的顶部或两侧。 3单击菜单栏中“插入”|“图像对象”|“导航条”。 4打开对话框，在对话框中设置。 在导航条中，每一个项目都对应一个按钮，该按钮具有一组状态图像，最多可达四个。项目名称在“导航条项目”列表中显示。用箭头按钮排列项目在导航条中的位置。单击“+”按钮，添加另一个项目，单击“-”可以删除选中的项目。向上和向下的箭头按钮，用于调整项目在导航条中排序。,4.2.

44、6 创建导航条,4.2 在网页插入图像,5设置完成一个项目后，单击加号“+”按钮向导航条添加另一个项目，然后重复上述步骤定义该项目。 6完成设置后，单击“确定”按钮，在网页中插入了导航条。,4.2.6 创建导航条,4.2 在网页插入图像,4.3 插入其他网页元素,4.3.1 水平线 4.3.2 日期和时间,（一）插入水平线:在网页中插入水平线的操作为： 1在“文档”窗口中，将光标定位在要插入水平线的位置。 2执行下列操作之一： 单击菜单栏中 “插入”|“HTML”|“水平线”命令。 在“插入”栏的“HTML”类别中，单击“水平线”按钮，如图。 3水平线插入在网页中如图,4.3.1 水平线,4.

45、3 插入其他网页元素,（二）设置水平线属性： 1选择水平线 2打开“水平线属性”，如图所示。 “宽”：用于设置水平线的宽度。 “高”：以像素为单位，设置水平线的高度。 “对齐”：设置水平线的对齐方式（“默认”、“左对齐”、“居中对齐”或“右对齐”）。 “阴影”：指定绘制水平线时是否带阴影。取消选择此选项将使用纯色绘制水平线。,4.3.1 水平线,4.3 插入其他网页元素,（三）.增添颜色 1选择水平线 2在“属性检查器”上，单击 打开快速标签编辑器如图。 3插入color=？，颜色取值可以是英语（如yellow）也可用十六进制代码（如#FFFF00）.,4.3.1 水平线,4.3 插入其他网页

46、元素,（一）将当前日期插入到文档中 1 在“文档”窗口中，定位光标在要插入日期的位置。在图4.34的网页中的图像下面输入文本“本网页制作于：”。 2 执行下列操作之一： 单击菜单栏中“插入”|“日期”命令。 在“插入”栏的“常用”类别中，单击“日期”按钮 3打开“插入日期”对话框如图。,4.3.2 日期和时间,4.3 插入其他网页元素,4在对话框中，选择星期格式、日期格式和时间格式。 5如选择“储存时自动更新”，在每次保存文档时都会更新插入的日期。取消选择，日期在插入后变成纯文本并永远不自动更新。 6单击“确定”插入日期，效果如图所示。,4.3.2 日期和时间,4.3 插入其他网页元素,4.4

47、 设置网页的页面属性,4.4.1 打开页面属性对话框 4.4.2 设置网页的标题 4.4.3 设置网页的背景 4.4.4 设置网页的文本 4.4.5 设置网页的边界,1要打开页面属性对话框可以执行以下操作之一： 单击菜单栏中“修改”|“页面属性”命令。 单击文本“属性检查器”中的“页面属性”按钮。 2打开页面属性对话框，如图所示。,4.4.1 打开页面属性对话框,4.4 设置网页的页面属性,1在页面属性对话框中，选择“标题/编码”分类，如图所示。 2在“标题”文本框内输入网页的标题内容，如“长春游游网”。 3点击“确定”退出页面属性对话框。 4保存并在浏览器中预览网页,则标题出现在浏览器的左上

48、角,4.4.2 设置网页的标题,4.4 设置网页的页面属性,（一）设置网页的背景颜色 1在页面属性对话框中，选择“外观”分类。 2执行以下操作之一： 在“背景颜色”对话框中输入颜色的十六进制代码如“#66CCFF” 点背景颜色后的按钮 ，打开调色板选择颜色。 3点击“确定”退出页面属性对话框。 4保存并在浏览器中预览网页。,4.4.3设置网页的背景,4.4 设置网页的页面属性,（二）设置网页的背景图像 1在页面属性对话中，选择“外观”分类。 2点击“背景图像”后的“浏览”按钮，打开选择图像源对话框。 3查找并选择作为网页背景的图像，单击“确定”退出页面属性对话框。 4保存并在浏览器中预览网页。

49、 5.重复选项：确定是否以及如何重复背景图像。有四个选项：“不重复”只在开始处显示一次图像。“重复”在水平和垂直方向平铺图像。“横向重复”和“纵向重复”，分别在水平和垂直方向重复排列背景图像。,4.4.3设置网页的背景,4.4 设置网页的页面属性,在页面属性对话框架可以对网页的文本进行统一的字体、字号及文本颜色的设置 1在页面属性对话框中，选择“外观”分类。 2在“页面字体”的下拉菜单中，选择字体。 3在“大小”下拉菜单中，选择字号。 4单击“文本颜色”右侧的调色板，可以设置文本的颜色。,4.4.4 设置网页的文本,4.4 设置网页的页面属性,页面属性中“左边距”、“右边距”、“上边距”和“下

50、边距”四个选项，用于设置网页页面元素与页面边界的宽度或高度。其右侧下拉列表为宽度或高度的单位，默认为“像素”。,4.4.5 设置网页的边界,4.5 设置超级链接,4.5.1 超链接的路径 4.5.2 创建基本超链接 4.5.3 锚点链接 4.5.4 热区链接 4.5.5 电子邮件链接,绝对路径。是提供所链接文档的完整路径，且包含其应用协议（如http:/）。主要用于创建站外具有固定地址的链接，如要建立到中央电视台的链接就可以使用。 文档相对路径。是以当前文档所在位置为起点到被链接文档经由的路径，省略对于当前文档和所链接的文档都相同的绝对路径部分，而只提供不同的路径部分，如：gerenwenji

51、an/jiangli.html。具有可移植性，是网页制作的首选。 根目录相对路径（又称服务器路径）：使用多个服务器的大型站点会要用到这种文档路径。如：/image/button.gif”即是连接网络服务器根目录下的image文件夹中的button.gif文件，必须在网络环境之下才能使用这种路径。,4.5.1 超链接的路径,4.5 设置超级链接,1、在网页中，选择要超链接的载体（文字或者图）像，选择“净月潭国家森林公园”。 2在属性检查器中，单击“链接”后的“浏览” 按钮，打开“选择文件”对话框。 3选择链接的目标文件，单击“确认”按钮。 4在“属性检查器”中的“目标”下拉菜单中,选择目标文件打

52、开的位置,如图。 5保存并在浏览器中预览网页，建立了超链接的文字变为蓝色并带有下划线。 6单击创建超链接的文字，测试链接的完好性。,4.5.2 创建基本超链接,4.5 设置超级链接,1创建命名锚记 （1）光标定位在要创建命名锚记的位置，如在图4.49网页中的标题“长春介绍”前定位光标。 （2）执行以下操作之一： 单击菜单栏中的“插入”|“命名锚记”命令 在“插入”栏中的“常用”类别中，单击“命名锚记” 。 （3）打开“命名锚记”对话框，如图。,4.5.3 锚点链接,4.5 设置超级链接,（4）在“锚记名称”文本框中输入锚记名称，如“top”。 （5）单击“确定”按钮退出，则在文档的相应位置出现

53、一个 图标这就是命名锚记的符号。,4.5.3 锚点链接,4.5 设置超级链接,1、在网页中插入图片。 2单击选中图片，“属性检查器”出现热区工具按钮。 3单击“矩形”热区按钮 ，将光标移到图像上按下并拖动鼠标，绘制出一个浅蓝色带有黑色的边框的矩形区域。,4.5.4 热区链接,4.5 设置超级链接,4松开鼠标，“属性检查器”变为“热点属性”，如图所示。 设置链接。与文本或图像的超链接设置相同。 保存并在浏览器中预览网页，将光标指向热区位置时，出现手形图标，如图所示。,4.5.4 热区链接,4.5 设置超级链接,1在文档窗口中，选择链接载体，如选择“站长信箱”文本。 2执行以下操作之一： 单击菜单

54、栏“插入”|“电子邮件链接”命令。 在“插入”栏的“常用”类别中，单击“电子邮件链接”按钮 。 3打开“电子邮件链接”对话框. 4“文本”：显示己选中的文本，如没有选择文本，可在此直接输入作为链接的文本载体。 5“EMail”：输入电子邮件地址。 6保存并在浏览器中预览网页测试电子邮件链接。,4.5.5 电子邮件链接,4.5 设置超级链接,本章小结,第章 网页中的基础要素,$ 知识目标 掌握表格及单元格的创建和编辑 掌握通过表格来进行网页页面的布局方法 掌握建立框架网页及框架属性设置的方法 8 能力目标 熟练掌握表格的基本操作 熟练运用表格进行网页布局 熟练运用框架进行网页的布局,第5章 网页

55、页面布局,5.1 表格 5.2 表格布局 5.3 框架布局 本章小结,第5章 网页页面布局,5.1 表格,5.1.1插入表格 5.1.2添加内容 5.1.3 选择表格 5.1.4 设置表格属性 5.1.5 编辑表格的基本操作,在表格中横向为行，纵向为列。行列交叉部分就叫做单元格。单元格中的内容和边框之间的距离叫边距。单元格和单元格之间的距离叫间距。表格的边线叫做边框。,（一）插入表格 1定位光标在要插入表格的位置，然后执行以下操作之一： 单击菜单栏中的“插入”|“表格”命令。 在“插入”栏的“常用”类别中，单击 “表格”按钮。 2打开表格对话框。,5.1.1 插入表格,5.1 表格,5.1.1

56、 插入表格,5.1 表格,3单击“确定”创建表格插入 “4行5列”的表格。,（二）插入嵌套表格 1将光标定位在表格的一个单元格内。 2执行插入表格的操作，即可在表格内嵌套表格如图。,5.1.1 插入表格,5.1 表格,将插入点定位在表格内，即可输入文本、图像、动画等网页元素。,5.1.2 添加内容,5.1 表格,(一)选择整个表格 选择整个表格执行以下操作之一： 单击表格的左上角、右边或底部边缘的任意位置。 单击表格单元格，在菜单栏单击“修改”|“表格”|“选择表格”命令。 (二)选择行或列 1鼠标指向行的左边缘或列的上边缘，光标变为 或 。 2单击鼠标则选择鼠标指向的行或列。 3拖动鼠标，则

57、选择连续的多行或多列。 4按Ctrl同时单击鼠标，则可选择不连续的多行或多列。,5.1.3 选择表格,5.1 表格,(三)选择单元格 1.选择单个单元格，请执行以下操作之一： 单击单元格，然后在文档窗口左下角的标签选择器中选择标签. 在单元格内双击鼠标则可选择该单元格。 在单元格内单击，然后按组合键Ctrl+A。 2选择连续的多个单元格可以执行以下操作之一： 单击第一个单元格，按住Shift键的同时单击另一个单元格，两个单元格之间的矩形区域内所有的单元格均被选中。 在一个单元格中单击并拖动鼠标横向或纵向移动到其他一个单元格，然后松开鼠标则鼠标经过区域的单元格被选中。 3按Ctrl同时单击单元格

58、则可选择不相邻的多个单元格。,5.1.3 选择表格,5.1 表格,（一）表格属性 表格被选中之后，可以利用表格属性来设置或修改表格的属性。 （二）单元格属性 单元格被选中或光标定位在单元格中时，可以利用单元格属性，来设置或修改单元格的属性。,5.1.4 设置表格属性,5.1 表格,(一)调整表格的大小： 1选择整个表格，在表格的边缘出现3个黑色控制点。 2执行以下操作： 用鼠标拖动这些控制点则可改变表格的大小。在表格“属性检查器”中重新设置“高度”与“宽度”值，改变表格的大小。 （二）调整行高和列宽 1将鼠标移到要调整的行高或列宽的边框上，光标变为 或 。 2拖动鼠标即调整行高或列宽。,5.1

59、.5 编辑表格的基本操作,5.1 表格,（三）合并或折分单元格 1拆分单元格 （1）选择（或将光标定位在）要拆分的单元格。 （2）执行以下操作之一： 单击菜单栏中的“修改”|“表格”|“拆分单元格”命令。 在“属性检查器”中，单击“拆分单元格”的按钮 。 (3)打开拆分单元格对话框如图。 （4）在这可以选择拆分行还是拆分列，以及设置拆分的行数或列数。如设置拆分为“行”，行数为“2”。 （5）单击确定，单元格被拆分。,5.1.5 编辑表格的基本操作,5.1 表格,2合并单元格 （1）选择需要进行合并的两个以上单元格。 （2）执行以下操作之一： 单击菜单栏“修改”|“表格”|“合并单元格”命令 在“属性检查器”中，单击“合并单元格”按钮 。 （3）选的单元格被合并。,5.1.5 编辑表格的基本操作,5.1 表格,（四）插入和删除行或列 1插入单行或单列 在所选择的行、列或单元格的上面及左侧插入单行或单列，操作如下： （1）选择行、列或单元格。 （2）单击菜单栏中的“修改”|“表格”|“插入行”或“插入列”命令。 选择“插入列”命令：可以在所选列的左侧添加一列。 选择“插入行”命令：可以在所选行的上面添加一行。,5.1.5 编辑表格的基本操作,5.1 表格,2插入多行或多列 （1）选择行、列或单元格。 （2）单击菜单栏中