网页设计基础最新课件.ppt

1、,课程要求：,期末考试成绩 = 期末卷面成绩(60%) + 平时成绩(40%) 平时成绩 = 平时上机作业(30%) + 课堂纪律(10%) 考勤要求：1、迟到一次期末最终成绩-2分 2、旷课一次期末最终成绩-8分，旷课3次取消本门课 程考试资格。,了解预备知识 明确网页设计的任务 了解网页设计的流程 掌握网页设计的基本原则 掌握常用网页设计软件,学习目标,基于工作过程的 网页设计与制作教学,第1章 网页设计基础,什么是网页和网站,1.1 预备知识,什么是网页,网页是由HTML（超级文本标识语言）或者其他语言编写的，通过IE浏览器编译后供用户获取信息的页面，它又称为Web页，其中可包含文字、图

2、像、表格、动画和超级链接等各种网页元素。,什么是网页和网站,1.1 预备知识,什么是网站,网站就是一个或多个网页的集合。这些网页以一定的形式链接在一起，成为一个整体。简单的说，网站就像布告栏一样，人们可以通过网站来发布（或浏览）想要公开（或查看）的资讯，或者利用网站提供相关的网络服务。 公司企业宣传、资讯发布 网上志愿填报及录取 电子商务网站 个人网站,1.1 预备知识,网页的分类,按所处位置分类 按表现形式分类,1.1 预备知识,按所处位置分类,按网页在网站中所处的位置可将网页分为主页和子页两类。,主页或首页（index、default）,子页或内页,按表现形式分类,按网页的表现形式可将网页

3、分为静态网页和动态网页。,按表现形式分类,按网页的表现形式可将网页分为静态网页和动态网页。,静态（.htm/.html）,动态(.asp/.php/.jsp),什么是HTML,是Hyper Text Markup Language的简写，即超文本标记语言，是用来描述Internet上超文本文件的语言,超级文本标记语言（HTML）,提示： 1、HTML并不是一种编程语言，而是一种页面描述性标记语言。它通过各种标记描述不同的内容，说明段落、标题、图像和字体等在浏览器中的显示效果。浏览器打开HTML文件时，将依据HTML标记去显示内容。 2、HTML文件独立于平台，对多平台兼容，通过网页浏览器能够在

4、任何平台上阅读。,HTML标记的一般格式如下： 内容 说明：标记符一般需要配对使用，之间的内容是被作用的对象。所有的标记都用一对尖括号（）括起来。,1）HTML编写方法 HTML文件是分层组织的，最外层是标记，在此标记内一般有两层：head层（文档头）和body层(文档体)。这两部分内容都包含在和之间 。在这些标记内可以嵌套其他标记。一般情况下文档头存储网页的信息，比如网页标题存放在标记中，网页关键字存放在标记中。文档体是网页内容的显示部分。主要由表格标记、段落标记、图像标记等组成。, 标题 文档主体部分 ,演示实例1：, 欢迎访问西安交通大学城市学院 这是我做的第一个网页 ,演示,HTML的

5、语法,HTML语法由标记（Tags）和属性（Attributes）组成。 （1）单标记：标记属性参数 例如：常见强制换行标签、分割线标签 （2）双标记： 标记属性参数内容 例如：这是我做的第一个网页 （3）标记属性：元素属性出现在标记的内，并且和标记名之间有一个空格分隔；属性值用可以用“”引起来，多属性间用空格分隔。 ,、文字标签属性,1.文字颜色 指定文字颜色: . #=RRGGBB-16进制数码或者颜色名 例：01.htm 2.文字字体 指定文字字体： . 例：02.htm,1、文字标签及属性,3.文字大小 . #=1, 2, 3, 4, 5, 6, 7 or +#, -# 例：03.ht

6、m,2、段落标签 及属性,1.段落标签 . 在HTML文档中无法用多个回车、空格和Tab键来调整文档段落的格式，要用HTML标记来强制换行和分段。 是换行单标记，它的作用相当于回车符。 标记用于划分段落，可以单独使用，也可以成对作用于一段文字，每一个段落后面会自动空出一行； 例：05.htm 注意：标签与标签区别 结束会空一行； 结束不空行（仅换行），标记不是成对出现的。,HTML文档可以插入注释。注释内容不会在浏览器窗口显示 HTML注释的格式为： 例：10.htm,. (#=left, center, right) 例：11.htm,普通超级链接,超级链接是整个WWW应用的核心和基础。如果

7、没有超级链接的概念，那么，我们现在所有的WWW的应用将不复存在。所以，对超级链接的掌握具有特殊重要的意义。,普通超级链接,超级链接是用标记定义的 在标记下，有属性href,href的属性值为一个URL地址 如：指向学院的超级链接 如：普通超级链接 例：18.htm,新开链接窗口,开一个新的(浏览器)窗口 (Target Window) . target=“_self”,在当前页面打开网页 target=“_blank”,以新建页面的方式打开网页 例：20.htm,HTML对图片的控制,基本语法: 引用图片必须用标签。标签下的基本属性是src属性，src的属性值为所引用的图片的URL地址。 sr

8、c属性是必须的。Src的URL可以是绝对地址，也可以是相对地址 例：21.htm,HTML对图片的控制,所谓图片的替代文本，指图片不能显示时在图片所在位置显示的一段文本或当鼠标移到图片上时也会显示替代文本。 定义图片替代文本的方法是： 例：21.htm,图片的显示大小 我们可以指定一幅图片在浏览器窗口里的显示大小。定义图片的显示大小的方法是： width指定图片的宽度，height指定高度。它们的属性值可以是象素，也可以是%。 例：22.htm,HTML对图片的控制,图片的边框 我们可以为一幅图片加一个边框以突出显示： border的属性值为象素数 例：23.htm,HTML对图片的控制,图片

9、的对齐方式 图片可以相对于页面或单元格有一个对齐方式。 定义水平对齐方式的方法是： ,HTML对图片的控制,定义图片与左、右的文本之间的间距 图片在显示时，与左右的文本之间可以有一定的间距： hspace(horizontal)定义水平间距； vspace(vertical)定义垂直间距。单位都是象素数. 例：25.htm,HTML对图片的控制,表格(TABLE)标记, 标记：定义一个表格。每一个表格只有一对和，一张页面中可以有多个表格。 标记：定义表格的行，一个表格可以有多行，所以对于一个表格来说不是唯一的。 标记：定义表格的一个单元格。每行可以有不同数量的单元格，在和之间是单元格的具体内容

10、。 需要注意的是：上述的三个元素必须、而且只能够配对使用。缺少任何一个元素，都无法定义出一个表格。,表格的基本结构 -定义表格 -定义表头 -定义表行 -定义单元格 例：26.htm,表格的属性 width属性：指定表格或某一个表格单元格的宽度。单位可以是%或者象素。 height属性：指定表格或某一个表格单元格的高度。单位可以是%或者象素。 border属性：表格边线粗细 例27.htm,表格的属性 bgcolor属性：指定表格或某一个单元格的背景颜色。 background属性：指定表格或某一个单元格的背景图片。其属性值为一个URL地址。 例：28.htm,表格的属性 bordercolo

11、r属性：指定表格或某一个单元格的边框颜色。 例：29.htm align属性：指定表格或某一个单元格里的内容（文本、图片等）的对齐方式。 例：30.htm cellspacing属性：单元格间距。 例：31.htm,表格的属性 cellpadding属性：单元格边距。 例：32.htm,1.2.1 网页设计的任务,1.2 如何设计网页,站点的性质不同，设计的任务也不同。 1资讯类网站 如新浪、网易、搜狐等门户网站。这类站点一般会为访问者提供大量的信息，而且访问量较大。因此，应对这些信息进行合理的分类，将页面划分为多个栏目，页面结构要合理、美观，便于浏览者浏览。,新浪首页,网易首页,1.2.1

12、网页设计的任务,1.2 如何设计网页,2资讯与形象相结合的网站 如大型公司或高校的网站。这类网站在设计上要求较高，既要考虑到资讯类网站的各项指标（信息量大），同时又要突出企业、单位的形象。,国家电网 首页,腾讯首页,1.2.1 网页设计的任务,1.2 如何设计网页,3形象类网站 如一些中小型公司或单位的网站。这类网站一般较小，有的只有几页，需要实现的功能也比较简单，网页设计的主要任务是宣传企业形象。对于这类网站来说，版式、色彩、动画设计等是项目重点，一般对美工的要求较高。,长安汽车 首页,软件配合及制作流程,使用Dreamweaver编辑输出的静态网页,2,发布为Flash动画文件,3,4,5

13、,使用Flash制作Flash动画源文件,将Photoshop中制作好的页面效果图切片输出,使用Photoshop完成静态页面效果图的制作,1,网页流程制作,1.2 如何设计网页,1.2.3 网页设计的的基本原则,1.2 如何设计网页,1、明确内容: 明确网站功能和用户需求 2、色彩和谐统一: 遵循“总体协调，局部对比” 3、打开速度要快: 网页的大小应控制在50KB以内为宜，因此，需要在网页的设计过程中对图片进行优化，在图像质量与显示速度两方面取得一个平衡。 4、导航明朗: 导航项目5-9个为宜，若确实需要建立很多导航链接时，尽量采用分级目录的方式列出。 5、定期更新: 除了及时更新内容之外

14、，还需要每隔一定时间对版面、色彩进行改进，让浏览者对网站保持一种新鲜感，否则就会失去大量的浏览者。 6、平台的兼容性: 最好在不同的浏览器和分辨率下进行测试，基本原则是确保在IE5以上的版本中都有较好效果，在1024*768和800*600的分辨率下都能正常显示。,1网页编辑排版软件Dreamweaver,1.3 网页制作的常用软件,Dreamweaver是一款极为优秀的可视化网页设计制作工具和网站管理工具，支持当前最新的web技术，在编辑模式上允许用户选择可视化方式或源码编辑方式。借助Dreamweaver CS3软件，用户可以快速、轻松的完成设计、开发、维护网站和web应用程序设计的全过程。 Dreamweaver CS3新功能中包含了CSS工具，可用于构建动态用户界面的Ajax组件，以及与其他Adobe软件的智能集成。,2、网页动画制作软件Flash,1.3 网页制作的常用软件,Flash软件是一款多媒体动画制作软件。作为一种交互式动画设计工具，使用它可以将音乐、声效和动画融合在一起，制作出高品质的动画。 Flash采用的是矢量绘图技术，能将绘制的图像在质量无损的情况下放大，由于Flash动画是矢量图构成，大大减小了动画文件的大小，使在网络带宽局限的情况下，提升了网络传输速度，可以方便