网页设计与制作-全套PPT课件.pptx

1第1章网页设计概述 2学习目标重点掌握网页的基本概念。熟悉网页构成的元素与分类。重点掌握如何用记事本编写简单的网页。了解网页技术的发展与未来。了解网页设计的概念，深入学习网页设计的具体步骤与方法。了解网页设计的常用工具。第1章 网页设计概述 31.1 认识网页1.1.1 网页的概念网页是构成网站的基本元素。网页实际上是一个文件，常见网页文件的扩展名有 html、htm、cgi、aspx、php、jsp等。构成网页的元素有很多，文字和图片是构成网页的两种基本元素。网页有多种分类，笼统意义上，我们可以将网页分为动态网页和静态网页两种。第1章 网页设计概述 41.1 认识网页1.1.2 最简单的网页第一步：新建一个文本文档，并命名为“index” 。第二步：打开文档index，并在文档中键入内容“这是一个最简单的网页！”，然后保存关闭该文档。第三步：更改扩展名index文件扩展名为.html。第1章 网页设计概述　　提示： 在windows系统默认情况下，文件扩展名是自动隐藏的。让系统显示出文件扩展名的方法是：首先在文件浏览窗口中单击菜单栏的“工具（T）”，然后选择“文件夹选项（O）”，在打开“文件夹选项”对话框后，可以看到顶部有四个选项卡“常规”、“查看”、“文件类型”和“脱机文件”，我们单击“查看”按钮选项卡，在“高级设置”中找到“隐藏已知文件类型的扩展名”，并将前面复选框中的对勾点掉，设置成“不选”状态，然后单击“确定”按钮退出。 51.1 认识网页1.1.3 网页发展的历史万维网之父：蒂姆·伯纳斯·李W3C组织（World Wide Web Consortium） 客户端技术：HTML语言、JavaScript与VBScript脚本语言 、CSS层叠样式表单、多媒体插件、开发库服务端技术：CGI技术、Perl语言、PHP、ASP、JSP语言。Web开发技术的未来。第1章 网页设计概述 61.2 网页设计与制作流程1.2.1 网页系统分析项目立项、客户需求说明书。1.2.2 网页建设方案网页总体设计、网页详细设计。1.2.3 网页设计制作整体形象设计、开发制作、调试完善、维护。第1章 网页设计概述 71.3 网页开发工具简介1.3.1 FrontPageFrontPage，简称FP，是美国微软公司推出的一款网页设计、制作、发布、管理的软件，Office组件的一部分，网页制作入门级软件。FrontPage方便简单，会用Word就能做网页。如果是初学者，或对网页制作要求不高，选择FrontPage，用熟以后，也能做出很专业的网页。 FrontPage于2006年前停止提供，被两款专业的网页设计工具所取代，Expression Web和Sharepoint Designer。第1章 网页设计概述 81.3 网页开发工具简介1.3.2 DreamweaverDreamweaver是集网页制作和管理网站于一身的所见即所得网页设计软件，它最初由美国Macromedia公司开发，是第一套针对专业网页设计师特别发展的视觉化网页开发工具，使用它可以轻松地制作出跨平台、跨浏览器的网页。Dreamweaver与动画制作软件Flash、网页图像设计软件Fireworks，三者一起被Macromedia公司称为Dreamteam（梦之队），由于Adobe在2005年并购了Macromedia，所以此软件现在为Adobe旗下产品。第1章 网页设计概述 91.3 网页开发工具简介1.3.3 Fireworks Fireworks美国Macromedia开发的图像软件，它与Dreamweaver和Flash共同构成的开发套件可以让您轻松地创建并优化图像。利用可视化工具可制作出具有专业品质的网页图像和动画来。在Macromedia2005年被Adobe并购以后，Adobe发布了Fireworks CS，该软件不仅具备编辑矢量图形与位图图像的灵活性，还提供了一个预先构建资源的公用库，并可与Adobe Photoshop CS、Adobe Illustrator CS、Adobe Dreamweaver CS和 Adobe Flash CS软件集成。第1章 网页设计概述 101.3 网页开发工具简介1.3.4 Photoshop Photoshop是美国Adobe公司开发的图形处理软件，主要应用于在图像处理、广告设计的一款平面设计软件。最先它只是在Apple机（MAC）上使用，后来也开发出了windows的版本。Photoshop不仅是一个非常实用的图像编辑软件，它的的应用领域很广泛，在图像、图形、文字、视频、出版各方面都有涉及。网络应用的普及是促使更多人去学习Photoshop的一个重要原因。因为在制作网页时Photo