网页设计与制作基础分析

网页设计与制作考核办法:期末考试：70%笔试机试课堂纪律平时成绩：30%考勤(迟到、早退）上机实验（任务完成、违纪）课后作业第一讲•课题：网页设计概述•目的及要求：熟练掌握网页的基本概念、网页构成的元素与分类、网站开发流程、了解HTML语言•教学重点：网页的基本概念•教学难点：HTML语言中的标记及其属性•教学课时：2课时•教学方法：提问与比较教学方式，激发学生兴趣；•教学内容与步骤：1.1认识网页1.1.1网页的概念网站：也称为站点，是包括主页在内的一个或多个网页的集合。根据内容可分为：门户网站、职能网站、专业网站、个人网站网页：网页是构成网站的基本元素，是承载各种网站应用的平台。网页中基本元素：文本、图像和动画、声音和视频、超链接、表格、表单、导航栏以及其他特殊效果。•网页的类型按位置分按表现形式分静态网页：以.htm、.html、.shtml、.xml等为后缀的动态网页：.asp、.jsp、.php、.perl、.cgi等形式为后缀主页内页1.2网页设计与制作流程1.2.1网页的系统分析1、项目立项2、客户需求说明书（网站的定位）1.2.2网页建设方案1、网页总体设计2、网页详细设计网站建设流程图网站的制作流程1、规划阶段（网站的策划）站点策划、构思草图2、设计阶段（页面美工）美工设计3、实施阶段（网页制作）图形制作、脚本编程、图形页面整合、测试发布等构思草图构思草图构思草图确定网站CI形象•所谓CI（CorporateIdentity，企业形象），是指通过强化视觉效果的手段来加深用户对企业形象的印象。在现实生活中，CI策划的例子比比皆是，例如，可口可乐公司拥有全球统一的标志、色彩和产品包装，给人们的印象极为深刻。•1．设计网站的标志（Logo）首先设计者需要设计一个网站的标志（Logo）。如同商标一样，Logo是站点特色和内涵的集中体现。Logo可以是中文、英文字母、符号或图案，也可以是动物或人物等。例如，新浪网用字母sina加眼睛作为Logo，体现网站的敏锐和动感的特色。Logo的设计创意一般来自网站的名称和内容。•2．设计网站的标准色彩网站给人的第一印象来自视觉的冲击，确定网站的标准色彩是相当重要的一步。不同的色彩搭配，将产生不同的效果，并可能影响到访问者的情绪。“标准色彩”是指能体现网站形象和延伸内涵的色彩。例如，IBM的深蓝色，肯德基的红色条纹，Windows的红、蓝、黄、绿色块，都使浏览者觉得很贴切，很和谐。一般来说，一个网站的标准色彩不宜超过3种，太多则让人眼花缭乱。标准色彩要用于网站的Logo、标题、主菜单和主色块，给人以整体统一的感觉。至于其他色彩也可以使用，只是作为点缀和衬托，绝不能喧宾夺主。•3．设计网站的标准字体标准字体是指用于Logo、标题和主菜单的特有字体。一般网页默认的字体是宋体。为了体现站点的特有风格，设计者可以根据需要选择一些特别字体。例如，为了体现专业性可以使用粗仿宋体，为了体现设计精美可以用广告体，为了体现亲切随意可以用手写体等。•4．设计网站的宣传标语网站的宣传标语也可以说是网站的精神、网站的目标，最好用一句话甚至一个词来高度概括。它类似于实际生活中的广告语句，例如，雀巢的“味道好极了”，Intel的“给你一颗奔腾的心”，给人们留下的印象都极为深刻。1.3网页开发工具简介1.3.1FrontPage•FrontPage，简称FP，是美国微软公司推出的一款网页设计、制作、发布、管理的软件，Office组件的一部分，网页制作入门级软件。FrontPage方便简单，会用Word就能做网页。如果是初学者，或对网页制作要求不高，选择FrontPage，用熟以后，也能做出很专业的网页。•FrontPage于2006年前停止提供，被两款专业的网页设计工具所取代，ExpressionWeb和SharepointDesigner。第1章网页设计概述1.3网页开发工具简介1.3.2Dreamweaver•Dreamweaver是集网页制作和管理网站于一身的所见即所得网页设计软件，它最初由美国Macromedia公司开发，是第一套针对专业网页设计师特别发展的视觉化网页开发工具，使用它可以轻松地制作出跨平台、跨浏览器的网页。•Dreamweaver与动画制作软件Flash、网页图像设计软件Fireworks，三者一起被Macromedia公司称为Dreamteam（梦之队），由于Adobe在2005年并购了Macromedia，所以此软件现在为Adobe旗下产品。1.3网页开发工具简介1.3.3Fireworks•Fireworks美国Macromedia开发的图像软件，它与Dreamweaver和Flash共同构成的开发套件可以让您轻松地创建并优化图像。利用可视化工具可制作出具有专业品质的网页图像和动画来。•在Macromedia2005年被Adobe并购以后，Adobe发布了FireworksCS，该软件不仅具备编辑矢量图形与位图图像的灵活性，还提供了一个预先构建资源的公用库，并可与AdobePhotoshopCS、AdobeIllustratorCS、AdobeDreamweaverCS和AdobeFlashCS软件集成。1.3网页开发工具简介1.3.4Photoshop•Photoshop是美国Adobe公司开发的图形处理软件，主要应用于在图像处理、广告设计的一款平面设计软件。最先它只是在Apple机（MAC）上使用，后来也开发出了windows的版本。•Photoshop不仅是一个非常实用的图像编辑软件，它的的应用领域很广泛，在图像、图形、文字、视频、出版各方面都有涉及。网络应用的普及是促使更多人去学习Photoshop的一个重要原因。因为在制作网页时Photoshop是必不可少的网页图像处理和界面软件。1.3网页开发工具简介1.3.5Flash•Flash英文含义为“闪光的”，它是风靡全球的计算机动画设计软件，也表示用该软件制作的动画作品。•Flash动画是Web交互式矢量图和动画标准，被大量应用于互联网网页的矢量动画文件格式。使用向量运算﹙VectorGraphics﹚的方式，产生出来的影片占用存储空间较小。•FLASH的前身叫做FutureSplash，被Macromedia收购后改名为FLASH1.0，在被Adobe收购之前的版本为Flash8.0，其后更名为AdobeFlash，由Adobe公司继续开发推出最新版AdobeFlashCS3。1.4HTML概述•HTML是（HyperTextMarkupLanguage）超文本标记语言的缩写，是网页主要的组成部分。•HTML语言是由一系列标记tag组成的，每一种标记向浏览器说明了一种页面元素。•标记是由起始标记tag和结束标记/tag组成的。起始标记表示一种功能的开始，结束标记表示一种功能的结束。•HTML语言是网页的基础，可以通过浏览器的“查看”--源代码看到该页的HTML代码。大家不必看到语言就感到害怕，HTML和C语言不一样，它只是一系列标记的组合。•在实际应用中，只需要掌握、记忆一些基本的、常用的HTML标记即可。HTML文档编写方法•HTML语言利用标记（tag）来描述网页的字体、大小、颜色及页面布局的语言，使用任何的文本编辑器都可以对它进行编辑。•1、手工直接编写：把标记写在记事本中，存盘时扩展名为.htm或.html。保存类型为文本文档。•在Internetexplorer中打开文件，查看源文件---修改---保存---刷新。•2、使用可视化HTML编辑器：如：FrontPage，Dreamweaver。•3、由WEB服务器上的程序（ASP，PHP，JSP）动态的生成。HTML文档的基本结构•网页的基本结构：•!html网页版本信息说明•htmlhead•!标题标记、属性及其内容（主题部分，一般来说是不可见的）/headbody•!主体标记、属性及其内容（正文部分，在浏览器中是可见的）/body/htmlHEAD头标记用于包含页面文件的基本信息。这些信息是供浏览器阅读和使用的，或是页面制作者用于保留信息的，并不在浏览器的页面区显示。TITLE标题标记格式：title文件标题/title作用：起始标记和结束标记之间的文字显示在游览器的标题栏上。是对整个文件内容的概括。要点title…/title标志对只能放在head…/head标志对之间。TITLE元素通常不被视为文本的—部分，其内容能够被显示，但会显示为文档标题或窗口标题。每个HTML只能有一个标题，也就是说，每个HTML文档的HEAD部分只能有—个TITLE元素。TITLE元素的起始标识和结束标识都是必需的。META元数据标记META标签用来描述一个HTML网页文档的属性，例如作者、日期和时间、网页描述、关键词、页面刷新等。HEAD头标记顶级标记构成HTML文档的主体部分，其内容是浏览器页面中显示的主体内容。这个标记组中除了html、头部标记和框架标记外，其他所有标记都可以在其中。Web页的所有内容，文字、图形、链接以及其他页面元素都包含在该标记内。在此标志对之间可包含p、/p、h1、/h1、br、hr等等众多的标志，它们所定义的文本、图像等将会在浏览器的框内显示出来。两个标志必须一块使用。Body体标记body.../body顶级标记属性用途示例bodybgcolor=#rrggbb设置背景颜色。默认是白色。bodybgcolor=red红色背景bodyBackground=#“设置背景图像。bodyBackground=Cat059.jpgbodytext=#rrggbb设置网页中不包含超链接文本的文本颜色。默认是黑色。bodytext=#0000ff蓝色文本bodylink=#rrggbb设置网页中超链接文字的颜色。默认是蓝色。bodylink=blue链接为蓝色bodyvlink=#rrggbb设置已使用的链接的颜色。默认是紫色。bodyvlink=#ff0000bodyalink=#rrggbb设置正在被击中的链接的颜色。默认是红色。bodyalink=yellowLeftmargin、Topmargin用于设置网页的左边距和上边框，单位为像素格式标记1.标题标记标题标记格式：Hn…/Hn（n=1，2，…6），这个标记组可以设置各种大小不同标题。例：H1…/H1第一级标题实例2.段落标记段落标记格式为：P…/P，里面包含文本和一些可以放置于内的标记。P标记的结尾标记是可以省略的。文本处理标记文本处理标记列表标记1.有序列表OLLItype=”A,a,I,i,1”内容/LILItype=”A,a,I,i,1”内容/LI/OL2.无序列表ULLItype=”disk,circle,square”…/LILItype=”disk,circle,square”…/LI/UL实例文本处理标记文本格式化标记1.字体设置标记字体设置标记格式为：FONT…/FONT2.字符修饰元素其他格式标记1.置中标记置中标记格式为：center页面元素/center2.预定义格式标记预定义格式标记格式为：PRE文本内容/PRE3.段内换行标记段内换行标记格式为：BR图像标记的格式：IMG/IMG，结尾标记可以省略。基本属性包括：Src通过URL给出图像来源的位置，不可缺省Width设置图像宽度Height设置图像高度Alt设置在图像未载入前图片位置显示的文字Border设置图像边框，缺省为0图像处理标记链接标记的格式为：a页面元素/a，页面元素一般为文本和图片。常用的属性为：Href链接目标的位置，一般是页面也可以是某一个文件Name锚点名Target设置显示链接的目标位置。值可