网页设计和制作教学省公共课一等奖全国赛课获奖课件.pptx

第1章 网页设计与制作基础第1页1.什么是网页？v浏览Web时所看到文件称为Web页，又称为网页。网页能够将不一样类型多媒体信息（包含文字、图像、动画、声音、视频等）组合在一个文档中。因为这些文档是用超文本标识语言表示，其文件名普通是以.html或.htm结尾，所以又称为HTML文档或超文本。第2页2.什么是主页？v当我们浏览网站时看到第一个页面。它是整个站点入口和门面，通常这么命名：index.html。第3页3.什么是超文本？v包含文字、图像、视频、声音等媒体文本，网页就是一个超文本文件，而且能够实现链接操作。v超文本能够给浏览者带来视觉和听觉享受，所以Web技术又称为超媒体技术。第4页注意v在网页上点击鼠标右键，选择“查看源文件”，就能很清楚地看到网页代码结构。用户能够使用记事本对网页中文字、图片、表格、多媒体等页面内容进行编辑，并经过标识语言HTML对这些元素进行描述和控制，最终由浏览器对这些标识进行解释并生成最终展现在用户眼前丰富多彩网页。第5页4.什么是网站？v依据提供服务不一样，通常把提供网页服务服务器称为Web服务器，相关网站称为Web站点。一个Web站点由一个或多个Web页组成，这些Web页相互连接在一起，存放在Web服务器上，以供浏览者访问。v网站是提供各种信息和服务基地，如用户熟悉搜狐、新浪、雅虎等。网站是由很多网页链接在一起组成。用户浏览到一个网站时看到第一个页面叫做主页。从主页出发，能够访问到本网站每一个页面，也能够链接到其它网站，方便地共享网站资源。第6页注意v网站由若干网页组合而成。实质上就是一个文件夹，用来存放站点相关信息资源文件夹。第7页5.网页基本元素有哪些？都有什么作用？设计时候要注意什么？v网页包含主要元素有：文本、图像、动画、导航栏、超链接、表格、表单等。第8页v文本是人类最主要信息载体和交流工具，网页主体普通以文本为主。制作网页时，能够依据需要设置文本字体、字号、颜色、样式等属性，格调独特网页文本设置会给浏览者赏心悦目标感觉。v提醒：在网页中应用了某种字体样式后，假如浏览者计算机中没有安装该种样式字体，字体就以计算机系统默认字体显示出来，此时就无法显示出网页效果了。第9页v图像在网页中能够起到提供信息、展示作品、美化网页以及表达格调等功效。图像能够用作网页标题、网站Logo、网页背景、链接按钮、导航栏、网页主图等。图像给人视觉效果要比文字强烈得多，在网页中灵活应用图像能够起到点缀效果。即使图像在网页中不可或缺，但也不能太多，因为图像下载速度较慢，而且网页上假如放置了过多图片，会显得很乱，有喧宾夺主之势。v网页上图像文件大部分都是使用JPG和GIF格式，因为，它们除了含有压缩百分比高外，还含有跨平台特征。第10页v动画是网页上最活跃元素，通常制作优异、创意出众动画是吸引浏览者最有效方法。假如网页中存有太多动画，会使浏览者眼花缭乱，无心细看。所以，对动画制作要求越来越高。在网页中加入动画普通是GIF格式动画和Flash（.swf）动画等。第11页v导航栏是网站设计者在规划网站结构时必须考虑一个问题，站点每个网页上均应设置导航栏，而且应将其放置在网页中比较显著位置。设置导航栏目标是使浏览者能够顺利地浏览网页，方便地返回主页或继续下一页访问。导航栏能够是文本、按钮或图像样式。第12页v超链接是网页中最为有用功效之一。超链接是从一个网页指向另一个网页链接，该链接既能够指向当地网站另一个网页，也能够指向世界各地其它网页。v不论是文本还是图像都能够加上超链接标识，当鼠标指上超链接对象时会变成小手形状，单击鼠标左键即可链接到对应地址（URL）网页。超链接包含站内链接和站外链接。v站内链接：若网站规划了多个主题版块，需要给网站首页加入超链接，让浏览者能够快速地转到感兴趣页面。在各个子页面也要有超级链接，并设有能够回到主页链接。v站外链接：在个人网站上放置一些与网站主题相关对外链接，不但能够把好网站介绍给浏览者，而且能使浏览者愿意再度光临该网站。(友情链接)第13页v表格是网页中一个用于控制网页页面布局有效方法。为了到达理想视觉效果，通常不显示表格边框。使用表格辅助布局，能够实现网页横竖分明格调。v表单是一个特殊网页元素，通惯用于搜集信息或实现一些交互式效果。表单主要功效是接收浏览者在浏览器输入信息，然后将这些信息发送到服务器端。第14页6.动态网页和静态网页区分v在网站设计中，纯粹HTML格式网页通常称为“静态网页”，它运行于客户端，以.htm、.html、.shtml和.xml等为扩展名。静态网页内容仅仅是标准HTML代码，静态网页上也能够出现各种动态效果，如GIF格式动画、Flash动画等，这些“动态效果”只是视觉上，与下面将要介绍动态网页是不一样概念。第15页v采取了动态网页技术，在服务器端运行网页和程序属于动态网页，它们会依据编写程序访问数据库动态地生成页面。动态网页文件后缀普通都是.asp、.aspx、.php、.jsp。动态网页优点是效率高、更新快、移植性强，能够依据先前所制订好程序页面，依据用户不一样请求返回其对应数据，从而到达资源最大利用和节约服务器上物理资源。第16页v动态网页和静态网页不是从视觉上区分，比如动画效果，网页中包含能够动元素并不意味着就是动态网页，静态网页也能够有动画。v请自行阅读书本中它们各自特点第17页7.惯用网页设计软件有哪些？vFrontPagevDreamweaver 第18页8.网页图像与网页动画制作软件 vPhotoshopvFireworks（.gif）vFlash(.swf)第19页9.HTML基本结构第20页9.HTML基本结构：告诉浏览器：告诉浏览器HTML文档开文档开始和结束位置，其中包含始和结束位置，其中包含head部分和部分和body部部分。分。HTML文档中全部内容都应该在这两个文档中全部内容都应该在这两个标识之间，一个标识之间，一个HTML文档总是以文档总是以开开始，以始，以结束。结束。：HTML文件头部标识，头部文件头部标识，头部主要提供文档描述信息，主要提供文档描述信息，head部分全部内容都部分全部内容都不会显示在浏览器窗口中，在其中能够放置不会显示在浏览器窗口中，在其中能够放置页页面标题面标题以及以及页面类型页面类型、使用字符集、链接其它、使用字符集、链接其它脚本或样式文件等内容脚本或样式文件等内容：用来指明文档主体区域，：用来指明文档主体区域，网页所要显示内容都放在这个标识内，其结网页所要显示内容都放在这个标识内，其结束标识束标识指明主体区域结束指明主体区域结束 第21页9.HTML基本结构：告诉浏览器：告诉浏览器HTML文档开文档开始和结束位置，其中包含始和结束位置，其中包含head部分和部分和body部部分。分。HTML文档中全部内容都应该在这两个文档中全部内容都应该在这两个标识之间，一个标识之间，一个HTML文档总是以文档总是以开开始，以始，以结束。结束。：HTML文件头部标识，头部文件头部标识，头部主要提供文档描述信息，主要提供文档描述信息，head部分全部内容都部分全部内容都不会显示在浏览器窗口中，在其中能够放置不会显示在浏览器窗口中，在其中能够放置页页面标题面标题以及以及页面类型页面类型、使用字符集、链接其它、使用字符集、链接其它脚本或样式文件等内容脚本或样式文件等内容：用来指明文档主体区域，：用来指明文档主体区域，网页所要显示内容都放在这个标识内，其结网页所要显示内容都放在这个标识内，其结束标识束标识指明主体区域结束指明主体区域结束 第22页9.HTML基本结构：告诉浏览器：告诉浏览器HTML文档开文档开始和结束位置，其中包含始和结束位置，其中包含head部分和部分和body部部分。分。HTML文档中全部内容都应该在这两个文档中全部内容都应该在这两个标识之间，一个标识之间，一个HTML文档总是以文档总是以开开始，以始，以结束。结束。：HTML文件头部标识，头部文件头部标识，头部主要提供文档描述信息，主要提供文档描述信息，head部分全部内容都部分全部内容都不会显示在浏览器窗口中，在其中能够放置不会显示在浏览器窗口中，在其中能够放置页页面标题面标题以及以及页面类型页面类型、使用字符集、链接其它、使用字符集、链接其它脚本或样式文件等内容脚本或样式文件等内容：用来指明文档主体区域，：用来指明文档主体区域，网页所要显示内容都放在这个标识内，其结网页所要显示内容都放在这个标识内，其结束标识束标识指明主体区域结束指明主体区域结束 第23页10.怎样使用HTML编写网页文件？v使用记事本，代码编好之后，保留时这么命名：文件名.html，保留类型选择：全部文件v使用Dreamweaver新建一个html文件演示第24页11.标签v标签是HTML文档中一些有特定意义符号，这些符号指明内容含义或结构。标签总是放在三角括号中，大多数标签都是成对出现，表示开始和结束。标签内容标签内容/标署名称起始标签起始标签结束标签结束标签第25页标签能够有属性，赋值时候用标签能够有属性，赋值时候用“=”=”，多个属性中间用空格隔开，多个属性中间用空格隔开属性要写在开始标签里，而且标签符号和属性要写在开始标签里，而且标签符号和中间不能够有空格，如中间不能够有空格，如是是错误错误结束标签一定要加结束标签一定要加“/”/”第26页12.body标签常见属性介绍vbgcolor属性：用于设置HTML网页背景颜色，比如，表示背景颜色设置为红色。vbackground属性：用于设置HTML网页背景图片，比如，表示将图片tu.jpg设置为HTML网页背景。第27页vtext属性：用于设置HTML网页文本颜色。使用text定义颜色将应用于整篇文档。比如，表示文本颜色设置为红色。vlink、alink、vlink属性：用于分别设置普通超链接、当前活动超链接、已访问超链接文本颜色。比如，第28页vtopmargin、leftmargin属性：用于设置网页主体内容与网页顶端、左端距离。比如，。上机作业：完成 作业1.txt 中操作第29页13.Dreamweaver CS4介绍v打开方法v起始页v工作界面介绍上机作业：完成 作业2.txt 中操作第30页14.创建和管理当地站点v站点目录结构v站点创建过程v站点管理操作上机作业：完成 作业3.txt 中操作第31页站点文件夹站点文件夹index.htmlindex.htmlimagesimagesflashflashsoundsound站点目录结构站点目录结构第32页