网页设计与制作教学.pptx

《网页设计与制作教学.pptx》由会员分享，可在线阅读，更多相关《网页设计与制作教学.pptx（31页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、会计学1网页设计与制作教学网页设计与制作教学1.1学习任务：网页和网站基本知识学习任务：网页和网站基本知识n n1.1.1网页和网站概述n n1.1.2 网页的主要元素n n1.1.3 网页类型n n1.1.4静态网页编辑软件n n1.1.5网页图像与网页动画制作软件第1页/共31页1.什么是什么是网页网页？n n浏览Web时所看到的文件称为Web页，又称为网页。网页可以将不同类型的多媒体信息（包括文字、图像、动画、声音、视频等）组合在一个文档中。由于这些文档是用超文本标记语言表示的，其文件名一般是以.html或.htm结尾，因此又称为HTML文档或超文本。第2页/共31页2.什么是什么是主页

2、主页？n n当我们浏览网站时看到的第一个页面。它是整个站点的入口和门面，通常这样命名：index.html。第3页/共31页3.什么是什么是超文本超文本？n n包含文字、图像、视频、声音等媒体的文本，网页就是一个超文本文件，并且可以实现链接操作。n n超文本可以给浏览者带来视觉和听觉的享受，所以Web技术又称为超媒体技术。第4页/共31页注意注意n n在网页上点击鼠标右键，选择“查看源文件”，就能很清楚地看到网页的代码结构。用户可以使用记事本对网页中的文字、图片、表格、多媒体等页面内容进行编辑，并通过标记语言HTML对这些元素进行描述和控制，最后由浏览器对这些标记进行解释并生成最终呈现在用户眼

3、前丰富多彩的网页。第5页/共31页4.什么是网站？什么是网站？n n根据提供服务的不同，通常把提供网页服务的服务器称为根据提供服务的不同，通常把提供网页服务的服务器称为WebWeb服务服务器，相关网站称为器，相关网站称为WebWeb站点站点。一个。一个WebWeb站点由一个或多个站点由一个或多个WebWeb页组页组成，这些成，这些WebWeb页相互连接在一起，存放在页相互连接在一起，存放在WebWeb服务器上，以供浏览服务器上，以供浏览者访问。者访问。n n网站是提供各种信息和服务的基地，如用户熟悉的搜狐、新浪、网站是提供各种信息和服务的基地，如用户熟悉的搜狐、新浪、雅虎等。网站是由很多网页链

4、接在一起组成的。用户浏览到一个雅虎等。网站是由很多网页链接在一起组成的。用户浏览到一个网站时看到的第一个页面叫做主页。从主页出发，可以访问到本网站时看到的第一个页面叫做主页。从主页出发，可以访问到本网站的每一个页面，也可以链接到其他网站，方便地共享网站资网站的每一个页面，也可以链接到其他网站，方便地共享网站资源。源。第6页/共31页注意注意n n网站由若干网页组合而成。实质上就是一个文件夹，用来存放站点相关信息资源的文件夹。第7页/共31页5.5.网页基本元素有哪些？都有什么作用？设计的时候要注意什么？网页基本元素有哪些？都有什么作用？设计的时候要注意什么？网页基本元素有哪些？都有什么作用？设

5、计的时候要注意什么？网页基本元素有哪些？都有什么作用？设计的时候要注意什么？n n网页包括的主要元素有：文本、图像、动画、导航栏、超链接、表格、表单等。第8页/共31页n n文本文本是人类最重要的信息载体和交流工具，网页的是人类最重要的信息载体和交流工具，网页的主体一般以文本为主。制作网页时，可以根据需要主体一般以文本为主。制作网页时，可以根据需要设置文本的字体、字号、颜色、样式等属性，风格设置文本的字体、字号、颜色、样式等属性，风格独特的网页文本设置会给浏览者赏心悦目的感觉。独特的网页文本设置会给浏览者赏心悦目的感觉。n n提示：在网页中应用了某种字体样式后，如果浏览者的提示：在网页中应用了

6、某种字体样式后，如果浏览者的计算机中没有安装该种样式的字体，字体就以计算机系统计算机中没有安装该种样式的字体，字体就以计算机系统默认的字体显示出来，此时就无法显示出网页的效果了。默认的字体显示出来，此时就无法显示出网页的效果了。第9页/共31页n n图像图像在网页中可以起到提供信息、展示作品、美化在网页中可以起到提供信息、展示作品、美化网页以及体现风格等功效。图像可以用作网页的标网页以及体现风格等功效。图像可以用作网页的标题、网站题、网站LogoLogo、网页背景、链接按钮、导航栏、网、网页背景、链接按钮、导航栏、网页主图等。图像给人的视觉效果要比文字强烈得多，页主图等。图像给人的视觉效果要比

7、文字强烈得多，在网页中灵活应用图像可以起到点缀的效果。虽然在网页中灵活应用图像可以起到点缀的效果。虽然图像在网页中不可或缺，但也不能太多，因为图像图像在网页中不可或缺，但也不能太多，因为图像的下载速度较慢，而且网页上如果放置了过多的图的下载速度较慢，而且网页上如果放置了过多的图片，会显得很乱，有喧宾夺主之势。片，会显得很乱，有喧宾夺主之势。n n网页上的图像文件大部分都是使用网页上的图像文件大部分都是使用JPGJPG和和GIFGIF格式，格式，因为，它们除了具有压缩比例高外，还具有跨平台因为，它们除了具有压缩比例高外，还具有跨平台特性。特性。第10页/共31页n n动画是网页上最活跃的元素，通

8、常制作优秀、创意出众的动画是吸引浏览者的最有效的方法。如果网页中存有太多的动画，会使浏览者眼花缭乱，无心细看。所以，对动画制作的要求越来越高。在网页中加入的动画一般是GIF格式的动画和Flash（.swf）动画等。第11页/共31页n n导航栏是网站设计者在规划网站结构时必须考虑的一个问题，站点的每个网页上均应设置导航栏，并且应将其放置在网页中比较明显的位置。设置导航栏的目的是使浏览者能够顺利地浏览网页，方便地返回主页或继续下一页的访问。导航栏可以是文本、按钮或图像的样式。第12页/共31页n n超链接超链接是网页中最为有用的功能之一。超链接是从一个网是网页中最为有用的功能之一。超链接是从一个

9、网页指向另一个网页的链接，该链接既可以指向本地网站的页指向另一个网页的链接，该链接既可以指向本地网站的另一个网页，也可以指向世界各地的其他网页。另一个网页，也可以指向世界各地的其他网页。n n无论是文本还是图像都可以加上超链接标记，当鼠标指上无论是文本还是图像都可以加上超链接标记，当鼠标指上超链接对象时会变成小手形状，单击鼠标左键即可链接到超链接对象时会变成小手形状，单击鼠标左键即可链接到相应地址（相应地址（URLURL）的网页。超链接包括站内链接和站外链）的网页。超链接包括站内链接和站外链接。接。n n站内链接站内链接：若网站规划了多个主题版块，需要给网站的首：若网站规划了多个主题版块，需要

10、给网站的首页加入超链接，让浏览者可以快速地转到感兴趣的页面。页加入超链接，让浏览者可以快速地转到感兴趣的页面。在各个子页面也要有超级链接，并设有能够回到主页的链在各个子页面也要有超级链接，并设有能够回到主页的链接。接。n n站外链接站外链接：在个人网站上放置一些与网站主题有关的对外：在个人网站上放置一些与网站主题有关的对外链接，不但可以把好的网站介绍给浏览者，而且能使浏览链接，不但可以把好的网站介绍给浏览者，而且能使浏览者乐意再度光临该网站。者乐意再度光临该网站。(友情链接友情链接)第13页/共31页n n表格表格是网页中的一种用于控制网页页面布局的有效是网页中的一种用于控制网页页面布局的有效

11、方法。为了达到理想的视觉效果，通常不显示表格方法。为了达到理想的视觉效果，通常不显示表格的边框。使用表格辅助布局，可以实现网页横竖分的边框。使用表格辅助布局，可以实现网页横竖分明的风格。明的风格。n n表单表单是一种特殊的网页元素，通常用于收集信息或是一种特殊的网页元素，通常用于收集信息或实现一些交互式的效果。表单的主要功能是接收浏实现一些交互式的效果。表单的主要功能是接收浏览者在浏览器的输入信息，然后将这些信息发送到览者在浏览器的输入信息，然后将这些信息发送到服务器端。服务器端。第14页/共31页6.动态网页和静态网页的区别动态网页和静态网页的区别n n在网站设计中，纯粹HTML格式的网页通

12、常称为“静态网页”，它运行于客户端，以.htm、.html、.shtml和.xml等为扩展名。静态网页的内容仅仅是标准的HTML代码，静态网页上也可以出现各种动态效果，如GIF格式的动画、Flash动画等，这些“动态效果”只是视觉上的，与下面将要介绍的动态网页是不同的概念。第15页/共31页n n采用了动态网页技术，在服务器端运行的网页和程序属于动态网页，它们会根据编写的程序访问数据库动态地生成页面。动态网页文件的后缀一般都是.asp、.aspx、.php、.jsp。动态网页的优点是效率高、更新快、移植性强，可以根据先前所制定好的程序页面，根据用户的不同请求返回其相应的数据，从而达到资源的最大

13、利用和节省服务器上的物理资源。第16页/共31页n n动态网页和静态网页不是从视觉上区分的，比如动画效果，网页中包含可以动的元素并不意味着就是动态网页，静态网页也可以有动画。n n请自行阅读课本中它们各自的特点第17页/共31页7.常用的网页设计软件有哪些？常用的网页设计软件有哪些？n nFrontPagen nDreamweaver 第18页/共31页8.网页图像与网页动画制作软件网页图像与网页动画制作软件 n nPhotoshopn nFireworks（.gif）n nFlash(.swf)第19页/共31页9.HTML的基本结构的基本结构：告诉浏览器：告诉浏览器HTML文档开文档开始和

14、结束的位置，其中包括始和结束的位置，其中包括head部分和部分和body部分。部分。HTML文档中所有的内容都应文档中所有的内容都应该在这两个标记之间，一个该在这两个标记之间，一个HTML文档总文档总是以是以开始，以开始，以结束。结束。：HTML文件的头部标记，头文件的头部标记，头部主要提供文档的描述信息，部主要提供文档的描述信息，head部分的所部分的所有内容都不会显示在浏览器窗口中，在其中有内容都不会显示在浏览器窗口中，在其中可以放置可以放置页面的标题页面的标题以及以及页面的类型页面的类型、使用、使用的字符集、链接的其它脚本或样式文件等内的字符集、链接的其它脚本或样式文件等内容容：用来指明

15、文档的主体区域，：用来指明文档的主体区域，网页所要显示的内容都放在这个标记内，其网页所要显示的内容都放在这个标记内，其结束标记结束标记指明主体区域的结束指明主体区域的结束 第20页/共31页10.如何使用如何使用HTML编写网页文件？编写网页文件？n n使用记事本，代码编好之后，保存时这样命名：文件名.html，保存类型选择：所有文件n n使用Dreamweaver新建一个html文件演示第21页/共31页11.标签标签n n标签是HTML文档中一些有特定意义的符号，这些符号指明内容的含义或结构。标签总是放在三角括号中，大多数标签都是成对出现的，表示开始和结束。标签的内容标签的内容/标签标签名

16、称名称起始标签起始标签结束标签结束标签第22页/共31页标签可以有属性，赋值的时候用标签可以有属性，赋值的时候用“=”，多个属性中间用空格隔开，多个属性中间用空格隔开属性要写在开始标签里，并且标签符号和属性要写在开始标签里，并且标签符号和中间不可以有空格，如中间不可以有空格，如是错误的是错误的结束的标签一定要加结束的标签一定要加“/”第23页/共31页12.body标签常见属性介绍标签常见属性介绍n nbgcolor属性：用于设置HTML网页的背景颜色，例如，表示背景颜色设置为红色。n nbackground属性：用于设置HTML网页的背景图片，例如，表示将图片tu.jpg设置为HTML网页的

17、背景。第24页/共31页n ntexttext属性：用于设置属性：用于设置HTMLHTML网页的文本颜色。使用网页的文本颜色。使用texttext定义的颜色将应用于整篇文档。例如，定义的颜色将应用于整篇文档。例如，body text=#FF0000表示文本颜色设置为红色。表示文本颜色设置为红色。n nlinklink、alinkalink、vlinkvlink属性：用于分别设置普通超链接、属性：用于分别设置普通超链接、当前活动的超链接、已访问的超链接文本的颜色。当前活动的超链接、已访问的超链接文本的颜色。例如，例如，body link=#ccddee vlink=#ff3366 alink=#

18、66cc77第25页/共31页n ntopmargin、leftmargin属性：用于设置网页主体内容与网页顶端、左端的距离。例如，。上机作业：完成 作业1.txt 中的操作第26页/共31页13.Dreamweaver CS4简介简介n n打开方法n n起始页n n工作界面介绍上机作业：完成 作业2.txt 中的操作第27页/共31页14.创建和管理本地站点创建和管理本地站点n n站点目录结构n n站点创建过程n n站点管理操作上机作业：完成 作业3.txt 中的操作第28页/共31页站点文件夹站点文件夹index.htmlindex.htmlimagesimagesflashflashsoundsound站点目录结构站点目录结构第29页/共31页n n实例演练：完成1.6 制作一个简单的网页n n实训操作：完成课本1.7实训操作本章完第30页/共31页