网页设计与制作(第2版)-李显萍.ppt

网页设计与制作（第 2 版）;; 　　网页、网站的概念 　　构成网页的主要元素 　　各种网页制作工具;1.1 情境描述及任务分解 1.2 网页和网站 1.3 网页中的主要元素 任务1.1：分析不同类型的网站、网页 1.4 网页制作工具 1.5 网页设计的基本流程 任务1.2：网站制作流程调研 内容梳理 单元测试 单元实训 单元评估;1.1.1 情境描述 1.1.2 任务分解; 李明来到网络公司实习，被分配到公司的设计部，主要任务是学习和了解网页、网站的设计与制作的流程及方法。李明接到的第一个任务就是浏览各类网站及网页，图1-1、图1-2和图1-3是李明浏览不同类型网站页面截图。 ; 　　1．仔细观察上述网站页面。 　　2.掌握网页和网站的区别与联系 　　3.熟知当下网页制作的主要技术。 　　4.了解网站、网页的设计与制作流程 ;1.2.1网页 1.2.2网站 1.2.3网页的基本功能 ; 1．网页（WEB） 　　是用html语言编写的，通过www网传输，并被web浏览器翻译成可以显示出来的集合文本、图片、声音和动画等信息元素的页面文件。网页一般由文字、图片、超链接等元素组成，另外声音、视频、动画等多媒体元素可以为网页增添丰富的色彩和动感。 2．网页的类型 　　根据页面内容可以分为：首页、主页、专栏网页、内容网页和功能网页等类型；按制作技术分为：静态网页与动态网页。; 网站就是把包括网页在内的信息文件通过超链接的形式关联起来形成的信息文件的集合。 　　网站是一个文件夹，其中的文件不仅是网页还有网站所需的其他文件或文件夹。网页是一个页面文件，用来发布各种信息。网页是网站的构成要素，是网站信息发布与表现的一种主要形式；网站是网页通过超链接形成的信息文件集合。; 　　1、媒介的作用。使用者与信息之间的媒介。 　　2、互动的作用。浏览者与网页制作单位之间互动的窗口，可以单向或双向传递信息。 　　3、传输的作用。 ;1.3.1文本 1.3.2图像 1.3.3链接标志 1.3.4其他的基本要素 ; 　　是网页中最基本的元素。 　　1．字体的选择。 　　2．字号、行距的选择。 　　3．特殊字体的使用。 　??4．字体的颜色。; 图像是网页中仅次于文字的元素。 ?JPEG格式适合于照片，GIF格式适合于包含纯色的图像。 ?利用图像编辑软件来放大或缩小图像。 ?黑白图像格式。 ?如果设计的GIF格式图像包含了渐变和直线，应尽量使得它们水平，因为GIF格以每条水平线为基础来压缩。 ?尝试各种不同的JPEG压缩率。 ?使用合适的色彩模式。 ?慎用动画。; 　　链接也叫超链接（Hyperlink），是从一个网页指向另一个目的端的链接，是页面间的链接关系。 　　链接标志（载体）指的是网页中特殊的文本或图像，它们常常用不同的颜色和下划线来标识，在浏览器中，访问者可以用鼠标单击它们，能够从当前的网页转到链接的目的端位置。 　　超链接的标志一般有：文本、图像、热区三种。; 　　1．动画 　　目前网络上常用的动画类型有gif和Flash动画两种，可以采用专用的编辑工具进行编辑。 　　2．视频 　　是多媒体网页的一个重要组成部分，常用的视频格式有avi、mpeg和mov等。 　　3．音频;任务1.1：分析不同类型的网站、网页; 1.4.1网页编辑工具 1.4.2网页图像编辑工具 1.4.3动态网页技术; 　　1．超文本标识语言（HTML）：Hyper Text Markup Language，全称是超文本标记语言 　　2．FrontPage简介 　　3．Dreamweaver ; 　　1．Photoshop 　　2．Fireworks 　　3．Flash ; 　1．ASP(Active Server Pages) 　2．PHP(Hypertext Preprocessor) 　3．JSP(Java Server Pages) ; 1.5.1网站的设计流程 1.5.2网页的设计与制作 1.5.3网页的测试 1.5.4网页上传和发布;1.5.1网站的设计流程; 　　1．确定网页的版面布局 　　（1）平衡性。（2）对称性。（3）对比性。（4）疏密度。（5）比例。（6）韵律感。 　　2．网页设计与制作 　　（1）静态网页的设计与制作 　　（2）动态网页设计与制作 ; 　　1．浏览器兼容性测试。 　　2．平台的兼容性测试。 　　3．超链接完好性测试。 ; 　　网页设计好，必须把它发布到互联网上，否则网站形象仍然不能展现出去。发布的服务器可以是远程，也可以是本地。如果是发布到互联网上，要