网页设计与制作基础

1、网页设计与制作考核办法: 期末考试：70% 笔试 机试 课堂纪律平时成绩：30% 考勤(迟到、早退） 上机实验（任务完成、违 纪） 课后作业 第一讲 课 题：网页设计概述 目的及要求：熟练掌握网页的基本概念、网页构成的元素与分类、网站开发流程、了解HTML语言 教学重点：网页的基本概念 教学难点： HTML语言中的标记及其属性 教学课时：2课时 教学方法：提问与比较教学方式，激发学生兴趣； 教学内容与步骤：1.1认识网页1.1.1网页的概念网页的概念网站：也称为站点，是包括主页在内的一个或多个网页的网站：也称为站点，是包括主页在内的一个或多个网页的集合。集合。根据内容可分为：门户网站、职能网站

2、、专业网站、个人根据内容可分为：门户网站、职能网站、专业网站、个人网站网站网页：网页是构成网站的基本元素，是承载各种网站应网页：网页是构成网站的基本元素，是承载各种网站应 用的用的 平台。平台。 网页的类型按位置分按表现形式分静态网页：以.htm、.html、.shtml、.xml等为后缀的 动态网页：.asp、.jsp、.php、.perl、.cgi等形式为后缀 主页内页1.2网页设计与制作流程1.2.1网页的系统分析1、 项目立项2、客户需求说明书（网站的定位）1.2.2 网页建设方案1、网页总体设计2、网页详细设计网站建设流程图网站建设流程图网站的制作流程1、规划阶段（网站的策划） 站点

3、策划 、构思草图2、设计阶段（页面美工） 美工设计3、实施阶段（网页制作） 图形制作、脚本编程、图形页面整合、测试发布等构思草图构思草图构思草图 所谓所谓CI（Corporate Identity，企业形象），是指通过强，企业形象），是指通过强化视觉效果的手段来加深用户对企业形象的印象。在现实化视觉效果的手段来加深用户对企业形象的印象。在现实生活中，生活中，CI策划的例子比比皆是，例如，可口可乐公司拥策划的例子比比皆是，例如，可口可乐公司拥有全球统一的标志、色彩和产品包装，给人们的印象极为有全球统一的标志、色彩和产品包装，给人们的印象极为深刻。深刻。 1设计网站的标志（设计网站的标志（Logo

4、） 首先设计者需要设计一个网站的标志（首先设计者需要设计一个网站的标志（Logo）。如同商）。如同商标一样，标一样，Logo是站点特色和内涵的集中体现。是站点特色和内涵的集中体现。 Logo可以是中文、英文字母、符号或图案，也可以是动可以是中文、英文字母、符号或图案，也可以是动物或人物等。例如，新浪网用字母物或人物等。例如，新浪网用字母sina加眼睛作为加眼睛作为Logo，体现网站的敏锐和动感的特色。体现网站的敏锐和动感的特色。Logo的设计创意一般来的设计创意一般来自网站的名称和内容。自网站的名称和内容。 2设计网站的标准色彩设计网站的标准色彩 网站给人的第一印象来自视觉的冲击，确定网站的标

5、准色网站给人的第一印象来自视觉的冲击，确定网站的标准色彩是相当重要的一步。不同的色彩搭配，将产生不同的效彩是相当重要的一步。不同的色彩搭配，将产生不同的效果，并可能影响到访问者的情绪。果，并可能影响到访问者的情绪。 “标准色彩标准色彩”是指能体现网站形象和延伸内涵的色彩。例是指能体现网站形象和延伸内涵的色彩。例如，如，IBM的深蓝色，肯德基的红色条纹，的深蓝色，肯德基的红色条纹，Windows的红、的红、蓝、黄、绿色块，都使浏览者觉得很贴切，很和谐。蓝、黄、绿色块，都使浏览者觉得很贴切，很和谐。 一般来说，一个网站的标准色彩不宜超过一般来说，一个网站的标准色彩不宜超过3种，太多则让种，太多则让

6、人眼花缭乱。标准色彩要用于网站的人眼花缭乱。标准色彩要用于网站的Logo、标题、主菜、标题、主菜单和主色块，给人以整体统一的感觉。至于其他色彩也可单和主色块，给人以整体统一的感觉。至于其他色彩也可以使用，只是作为点缀和衬托，绝不能喧宾夺主。以使用，只是作为点缀和衬托，绝不能喧宾夺主。 3设计网站的标准字体设计网站的标准字体 标准字体是指用于标准字体是指用于Logo、标题和主菜单的特有字体。一般、标题和主菜单的特有字体。一般网页默认的字体是宋体。为了体现站点的特有风格，设计网页默认的字体是宋体。为了体现站点的特有风格，设计者可以根据需要选择一些特别字体。例如，为了体现专业者可以根据需要选择一些特

7、别字体。例如，为了体现专业性可以使用粗仿宋体，为了体现设计精美可以用广告体，性可以使用粗仿宋体，为了体现设计精美可以用广告体，为了体现亲切随意可以用手写体等。为了体现亲切随意可以用手写体等。 4设计网站的宣传标语设计网站的宣传标语 网站的宣传标语也可以说是网站的精神、网站的目标，最网站的宣传标语也可以说是网站的精神、网站的目标，最好用一句话甚至一个词来高度概括。它类似于实际生活中好用一句话甚至一个词来高度概括。它类似于实际生活中的广告语句，例如，雀巢的的广告语句，例如，雀巢的“味道好极了味道好极了”，Intel的的“给你给你一颗奔腾的心一颗奔腾的心”，给人们留下的印象都极为深刻，给人们留下的印

8、象都极为深刻。1.3 网页开发工具简介1.3.1 FrontPage FrontPage，简称FP，是美国微软公司推出的一款网页设计、制作、发布、管理的软件，Office组件的一部分，网页制作入门级软件。FrontPage方便简单，会用Word就能做网页。如果是初学者，或对网页制作要求不高，选择FrontPage，用熟以后，也能做出很专业的网页。 FrontPage于2006年前停止提供，被两款专业的网页设计工具所取代，Expression Web和Sharepoint Designer。第第1章章 网页设计概述网页设计概述1.3 网页开发工具简介1.3.2 Dreamweaver Dream

9、weaver是集网页制作和管理网站于一身的所是集网页制作和管理网站于一身的所见即所得网页设计软件，它最初由美国见即所得网页设计软件，它最初由美国Macromedia公司开发，是第一套针对专业网页设公司开发，是第一套针对专业网页设计师特别发展的视觉化网页开发工具，使用它可以计师特别发展的视觉化网页开发工具，使用它可以轻松地制作出跨平台、跨浏览器的网页。轻松地制作出跨平台、跨浏览器的网页。 Dreamweaver与动画制作软件与动画制作软件Flash、网页图像设、网页图像设计软件计软件Fireworks，三者一起被，三者一起被Macromedia公司公司称为称为Dreamteam（梦之队），由于（

10、梦之队），由于Adobe在在2005年并购了年并购了Macromedia，所以此软件现在为，所以此软件现在为Adobe旗下产品。旗下产品。1.3 网页开发工具简介1.3.3 Fireworks Fireworks美国美国Macromedia开发的图像软件，开发的图像软件，它与它与Dreamweaver和和Flash共同构成的开发套件可共同构成的开发套件可以让您轻松地创建并优化图像。利用可视化工具可以让您轻松地创建并优化图像。利用可视化工具可制作出具有专业品质的网页图像和动画来。制作出具有专业品质的网页图像和动画来。 在在Macromedia2005年被年被Adobe并购以后，并购以后，Adob

11、e发布了发布了Fireworks CS，该软件不仅具备编辑矢量图，该软件不仅具备编辑矢量图形与位图图像的灵活性，还提供了一个预先构建资形与位图图像的灵活性，还提供了一个预先构建资源的公用库，并可与源的公用库，并可与Adobe Photoshop CS、Adobe Illustrator CS、Adobe Dreamweaver CS和和 Adobe Flash CS软件集成。软件集成。1.3 网页开发工具简介1.3.4 Photoshop Photoshop是美国是美国Adobe公司开发的图形处理软件，公司开发的图形处理软件，主要应用于在图像处理、广告设计的一款平面设计主要应用于在图像处理、广

12、告设计的一款平面设计软件。最先它只是在软件。最先它只是在Apple机（机（MAC）上使用，后）上使用，后来也开发出了来也开发出了windows的版本。的版本。 Photoshop不仅是一个非常实用的图像编辑软件，不仅是一个非常实用的图像编辑软件，它的的应用领域很广泛，在图像、图形、文字、视它的的应用领域很广泛，在图像、图形、文字、视频、出版各方面都有涉及。网络应用的普及是促使频、出版各方面都有涉及。网络应用的普及是促使更多人去学习更多人去学习Photoshop的一个重要原因。因为在的一个重要原因。因为在制作网页时制作网页时Photoshop是是必不可少的网页图像处理和界面软件。1.3 网页开发

13、工具简介1.3.5 Flash Flash英文含义为英文含义为“闪光的闪光的”，它是风靡全球的计，它是风靡全球的计算机动画设计软件，也表示用该软件制作的动画作算机动画设计软件，也表示用该软件制作的动画作品。品。 Flash动画是动画是Web交互式矢量图和动画标准，被大交互式矢量图和动画标准，被大量应用于互联网网页的矢量动画文件格式。使用向量应用于互联网网页的矢量动画文件格式。使用向量运算量运算Vector Graphics的方式，产生出来的的方式，产生出来的影片占用存储空间较小。影片占用存储空间较小。 FLASH的前身叫做的前身叫做Future Splash，被，被Macromedia收购后改

14、名为收购后改名为FLASH 1.0，在被，在被Adobe收购之前的版本为收购之前的版本为Flash 8.0，其后更名为，其后更名为Adobe Flash，由，由Adobe公司继续开发推出最新版公司继续开发推出最新版Adobe Flash CS3。语言是网页的基础，可以通过浏览器的语言是网页的基础，可以通过浏览器的“查看查看” -源代码源代码看到该页的看到该页的代码。大家不必看到语代码。大家不必看到语言就感到害怕，言就感到害怕， 和和C语言不一样，它只是一系语言不一样，它只是一系列标记的组合。列标记的组合。 在实际应用中，只需要掌握、记忆一些基本的、常在实际应用中，只需要掌握、记忆一些基本的、常

15、用的用的标记即可。标记即可。 HTML语言利用标记（tag）来描述网页的字体、大小、颜色及页面布局的语言，使用任何的文本编辑器都可以对它进行编辑。把标记写在记事本中，存盘时扩展名为.htm 或.html。保存类型为文本文档。 在Internet explorer中打开文件，查看源文件-修改-保存-刷新。如：FrontPage，Dreamweaver。（ASP，PHP，JSP）动态的生成。 （主题部分，一般来说是不（主题部分，一般来说是不可见的）可见的） （正文部分，在浏览器中是（正文部分，在浏览器中是可见的）可见的） 构成构成HTML文档的主体部分，其内容是浏览器页文档的主体部分，其内容是浏览

16、器页面中显示的主体内容。面中显示的主体内容。 Web页的所有内容，文字、图形、链接以页的所有内容，文字、图形、链接以及其他页面元素都包含在该标记内。在此标志对及其他页面元素都包含在该标记内。在此标志对之间可包含之间可包含、等等众多的标志，它们所定义的文本、图像等等众多的标志，它们所定义的文本、图像等将会在浏览器的框内显示出来。两个标志必须等将会在浏览器的框内显示出来。两个标志必须一块使用。一块使用。 . 属性属性用途用途示例示例body 设置背景颜色。默认是白色。设置背景颜色。默认是白色。 红色背景红色背景body Background= 设置背景图像。设置背景图像。body Background=Cat059.jpgbody Background=Cat059.jpgbody 设置网页中不包含超链接文设置网页中不包含超链接文本的文本