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

通过网页的设计和制作，吕戈静，2016.10，教育目标，本章的学习，学生可以了解网站的设计和工作流程，掌握HTML的基本概念和结构，利用HTML制作网页，了解与DHTML/XML的区别。 利用Dreamweaver创建网页，利用Fireworks创建图像，利用Flash创建动画，可以有机地结合在一起创建美丽的页面。 第1章web设计概要第2章HTML语言基础第3章Dreamweaver基础第4章网页的基础要素第5章网页的布局第6章网页的层和时间轴第7章应用表单第8章网页上的行动第9章使用CSS样式第10章网页的多元化章模板和库第12章站点测试和发布第13章Flash8概述第14章Firew orks8概述、目录、第1章网页设计概述、$officename知识目标网页、网站、 掌握主页概念理解网页的主要要素的各种网页制作工具8能力目标各种网页制作工具的协作网站的整体计划网站的设计流程， 1.1网页和网站1.2网页的主要要素1.3网页制作工具1.4网页设计的基本流程本章总结第1章网页设计的概要、1.1网页和网站、1.1.1网页1.1.3网页的基本功能、1 :用html语言制作，通过www页面进行传送，翻译成汇集了可由web浏览器显示的文本、图像、声音、动画等信息要素的页面文件(网页示例)。 2 .页面的种类根据页面的内容分为主页、主页、列页、内容页和功能页等种类，根据制作技术分为静态页和动态页。 1.1.1网页、1.1网页和网站、网站是将几个网页等信息文件以超链接形式关联起来的信息文件的集合。 该信息可以是网页格式或其它文档格式。 网页和网站的区别和联系方式：网站是文件夹，其中的文件不仅是网页，还是网站所需的其他文件和文件夹。 网页是用于发布各种信息的页面文件。 web页面是web站点的构成要素，作为web站点的信息发布和表现的主要形式的web站点是web页面由超链接形成的集合。 1.1.2站点、1.1站点和站点、1 .媒体角色。 用户与信息之间的媒介。 一方面是发表者，功能是发表信息，另一方面是阅览者，功能提供阅览的信息，通过阅览网页来寻找必要的信息。 2 .互动作用。 在阅览者和web制作公司之间交换的窗口可以单向或双向传递信息。 3 .传输的作用。 为了传送各种电子文件和信息，例如下载说明书、更新文件、驱动程序等。1.2.3网页的基本功能、1.1网页和网站、1.2网页的主要要素、1.2.1文本1.2.2图像1.2.3链接标记1.2.4其他基本要素、网页的基本要素为文字、图像、动画和链接标记等，其他网页的双曲馀弦值。 网页上的文字的设计一般从1 .选择字体的角度考虑。 2 .尺寸、行距的选择。 3 .使用特殊字体。 4 .字体的颜色。 1.2.1文本、1.2网页的主要元素，以及网络中当前使用的大多数图像和图像都是gif、jpeg和png文件格式。 在网页上使用影像时的注意事项： JPEG格式适用于照片影像，GIF格式适用于插图或线条等单色影像。 利用图像编辑软件放大或缩小图像屏幕的显示图像的分辨率通常为72dpi。 创建图像时，不需要使用更高的分辨率。 1.2.2图像、1.2网页的主要要素，在制作的图像中只有黑和白的情况下，处理时可以以黑白图像形式保存，可以减少图像文件的尺寸。 如果设计的GIF格式图像包含渐变和线条，则GIF网格将按水平线进行压缩，因此应尽可能保持水平。 尝试各种JPEG压缩比适当的颜色模式。 慎重动画。1.2.2图像、1.2网页的主要要素，链接也称为超链接，是从一个网页到另一个目标的链接，是网页之间的链接关系。 链接标记(矢量)是指网页内的特殊文本或图像，通常用不同的颜色或下划线识别，在浏览器中访问者用鼠标点击，可以从当前网页移动到链接目的地。 超链接标志通常有文本、图像和热区三种。 另外，超链接的标志全部向读者清楚地表示，请一目了然。1.2.3链接标志、1.2网页的主要要素、上述几个要素以外，网页中经常使用的是动画、视频、声音等各种信息的形式。 1 .动画片。 现在互联网上常用的动画类型是gif和Flash动画。 2 .视频。 多媒体网页的重要组成部分，通常的视频格式是avi、mpeg、mov等，视频会大幅度增加网页的文件容量，访问速度受到影响，因此必须慎重使用。 3 .声音。 在网页中插入音频可以增强网页的生动性。 典型的音频格式包括rm(ram )、midi、wav和mp3。 请谨慎使用音频文件，因为它与视频文件一样会增加网页上的文件量。 1.2.4其他基本要素、1.2网页的主要要素、1.3网页制作工具、1.3.3网页编辑工具1 .超文本显示语言(HTML)2.FrontPage配置文件3.dreamweaver1.3.2web网页图像编辑工具1.3.3 是Adobe公司开发的目前最受欢迎的图形图像处理软件之一，可以实现各种专业的图像制作、处理、合成。 2.Fireworks。 Macromedia开发的图形处理工具，是第一个专为创建网页图形而设计的软件，它还提供专业的网页图形设计和创建解决方案。 3.Flash。 Macromedia公司生产的Flash是现在非常受欢迎的交互式Web矢量动画软件。 Dreamweaver和Flash、Fireworks这3个软件被称为“web三剑客”，是目前公认的比较标准的web制作工具。 1.3.2网页图像编辑工具，1.3网页制作工具，动态网页能够实现网页阅读者与网页设计者的对话，实现对话技术有两种：一种是客户端技术，例如常用的JavaScript和VBScript； 另一个是目前常用的服务器端技术，如ASP和PHP。 1.active server pages (ASP )2. hypertext preprocessor (PHP )3. JSP (Java server pages )、1.3.3动态网页技术、1.3网页制作工具、1.4网页设计基本流程， 1.4.1网页设计流程1.4.2设计和创建网页测试1.4.4上载和发布网页，1 .确定网站主题2 .确定网站整体结构3 .收集统一网页素材4 .确定网页布局。 5 .创建网页。 6 .添加web效果。 7 .网站测试和发布。 决定平衡1.4.1网站的设计流程、1.4网页设计的基本流程、1 .网页的布局。 (2)对称性。 (3)对比性。 (4)疏密度。 (五)比率。 (6)节奏感。 网页的布局是决定网站美的重要方面，通过合理创造性的布局，文字和图像等内容能够完美地展现在阅览者面前。 2 .网页的设计和制作网页的设计和制作一般分为静态网页的制作和动态网页的制作。 1.4.2网页设计和制作，1.4网页设计的基本流程，1 .浏览器兼容性测试。 现在的浏览器是InternetExplorer和Netscape这两个主要的浏览器，对HTML和CSS等语法的支持度不同。 Dreamweaver提供了检查网页是否包含无法识别浏览器版本的语法的功能，使设计者可以使用该语法进行检查。 2 .平台兼容性测试。 要为用户设计，必须至少在一台PC和一台Mac机上测试你的网站，检查兼容性3 .超链接运行状况测试。超链接是连接网页之间和网站之间的桥梁，阅览者不想访问经常发生“找不到网页”问题的网站。 作为设计者，必须检查超链接的健全性，保证链接的有效性，不要留下太差的链接。 1.4.3网页测试，1.4网页设计的基本流程，网页设计良好，必须向网络公开。 否则，网站形象仍无法表现。 发布的服务器可以是远程服务器或本地服务器。 如果要向互联网公开，请申请域名和主页空间，用专用软件(CuteFTP等)上传。 FTP有很多软件，最有名的是CuteFTP和LeapFTP，也可以用Dreamweaver内置的FTP上传。 1.4.4网页上传和发布，1.4网页设计的基本流程，本章总结、 第1章网页设计概要理解HTML文件的基本结构掌握HTML中的文本编辑和图像语法掌握设定HTML中的超链接的语法掌握HTML中的表和框的基本语法8能力目标 掌握进行文本和图像编辑的操作HTML文件中的表格和框架的使用简单的HTML页面，第2章HTML语言的基础2.1HTML概要2.2文本的编辑2.3图像编辑2.4超链接2.5表格和框架章的总结，第2章HTML语言基础，2.2 2.1.1HTML概述2.1.2HTML语法结构，HTML(HyperTextMarkupLanguage )又称超文本标记语言，是标志性语言，是web设计的第一种语言。 文件扩展名为：“html”或“htm”。 例2.1简单的HTML文件.长春欢迎您！ 这里是长春悠游网。 我带你去长春！ 由“”组成的是标记。 用HTML语言中标得分“单一标记”和“围栏标记”。 2.1.1HTML的概要、2.1HTML的概要、1 .块标签格式：2 .单标签格式：仅开始标签，没有结束标签。 最常见的单标记是表示段中的换行符。 3 .标签属性格式：各属性之间没有前后顺序，属性也可以省略，省略属性时采用标签的默认值。 2.1.1HTML的概要、2.1HTML的概要、HTML文档的基本结构：文件开始标头区域开始.标头区域结束文件主体内容开始文件主体内容文件主体内容结束文件结束的中间表示这是web文件，是必需标记2.1.2HTML语法结构，2.1HTML概述，2.2编辑文本，2.2.1段落标记2.2.2文本标记2.2.3标题显示级别2.2.4列表，1 .段落()基本语法格式如下： 参数align将段落的位置设置为左、右、中心。 默认值为左侧。除了对齐以外，还有类等参数。 class参数是可选的。 如果未显示为默认值，则为可选项。 2 .将换行标记置于一行的末尾，在一段内实现文本强制换行，并将标记后面的文本字符、图像、表等内容设置为显示在下一行中。 2.2.1段落标记、2.2文本的编辑、1 .字体标记的基本语法形式如下所示。 Size :设置字体的显示大小。 范围是1到7，其中3是默认值。 Color :设定文字的颜色。 值可以是颜色名称(红色为英文)或颜色的十六进制代码(#000000为黑色，#FFFFFF为白色)。 Face :设置文本显示的字体。 值是字体名称。 文本标记包括许多常用标记，例如字体效果的标记(黑体)、(斜体)和带下划线的标记。 2.2.2文本标记，2.2文本编辑，2 .特殊字符HTML除了我们学到的标记外，还有HTML语言中通用的特殊字符，例如“”，通用转义标记和特殊字符如下表：2.2.2文本标记，2.2文本编辑，3 .水平线标记水平线在网页上语法形式为Size。 设定水平线的高度(以像素为单位)。 Color :设定水平线的颜色。Width :将水平线的宽度设置为像素或百分比。 像素是绝对大小，不会随程序窗口的大小而变化。 百分比是程序窗口相对于水平线的比例，根据程序窗口的大小而变化。 对齐：设置水平线的对齐方式。 有三种对齐方式：左对齐、居中对齐和右对齐。 2.2.2文本标记、2.2文本编辑、语法格式：n :表示不同级别的标题，n的值可以是1到6之间的任意数字。 1表示标题字体最大。 也可以使用align属性设置对齐方式。 一般有三种对齐方式：左对齐、居中对齐和右对齐。 在2.2.3标题显示级别、2.2文本编辑和HTML中，列表最常用的是“顺序列表”和“顺序列表”。 1 .序列表的基本语法结构设定项目1项目2项目n、2.2.4列表、2.2文本的编辑、1 .序列表Type :列表的序号类型，常用序号如下： n=1:编号为序号。 n=A； 连号用大写字母。 n=a :使用小写字母作为序列号。 n=I :使用大写罗马数字作为序列号。 n=i :使用小写罗马数字作为序列号。 Start :用于设置序号起始值的可选参数。 如果不添加“开始”，请从每个类的序号的第一个序号开始。 2.2.4列表、2.2文本的编辑、2 .无序列表的基本语法结构，项目1项目2项目nType:设置符号形状，有实心圆、小正方形、实心圆三种。 具体地说，n=disk :符号为实心圆。 n=square :符号为正方形。 n=circle :符号为白色圆圈。 使用2.2.4列表、2.2文本编辑、2.3图像编辑、2.3.1插入图像2.3.2背景图像，我们可以在网页上仔细阅读图像，适当使用图像，提高网页的美观度。 网页最常用的是插入影像和设定背景影像。 1 .语法格式：单标记Src :指定要添加的图像的特定路径和文件名。 路径可以是相对路径或绝对路径。 例子。 绝对路径：描述文件位置的完整路径是绝对路径。 关于绝对路径，无需知道其他信息即可判断文件的位置。 相对路径：相对路径是指当前文档与目标的相对位置，如名称所示。 例如.2.3.1插入图像、编辑2.3图像、2 .图像的属性除了“src”以外还有属性，可以定义图像的排列方向、与周围要素的距离等，各属性和作用如表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新窗口和基准链接、创建超链接的标记是语法格式：哈超链接标志：链接到网页的向量，用户单击它可以跳转到页面元素，如文本或图片。 定义、