《大学计算机基础》网页设计与制作.ppt

《《大学计算机基础》网页设计与制作.ppt》由会员分享，可在线阅读，更多相关《《大学计算机基础》网页设计与制作.ppt（71页珍藏版）》请在三一办公上搜索。

1、1,教学课件,北京航空航天大学,大学计算机基础,2,第9章 网页设计与制作,9.1 网站的建设与规划,9.2 使用FrontPage 2003制作网站,9.3 网站的发布和管理,3,本章重点,网站建设的基本过程及常用的网页制作工具 使用FrontPage 2003建立网站和编辑网页 级联样式表CSS 网页布局的方法 应用表单实现网页交互的方法,4,9.1 网站的建设与规划,9.1.1 网页基本知识 9.1.2 HTML语言简介 9.1.3 常用的网页制作工具,5,9.1.1 网页基本知识,WWW(World Wide Web)WWW是Internet上多媒体信息查询的工具。WEB由互相链接在一

2、起的网页构成，这些网页是由普通文本、超文本Hypertext，以及图表、图片等构成。URL（Uniform Resource Locator）URL（统一资源定位器）是指向网络服务器中某个资源的地址，用字符串来表示。其中包括协议、主机域名（或IP地址）、文件名等等。超级链接（Hyperlink）超级链接是包含在网页中指向其他网页的指针。超文本包含超链接的文本称为超文本。有时图像或图像的某部分也可以包含超链接。,6,网页基本知识,超媒体当超文本网页中包含声音、动画、视频等其它媒体时，网页被称为是超媒体的。浏览器一般通过外挂的帮助程序来显示这些超媒体信息。浏览器用户通过称为浏览器的软件来观看网页，

3、浏览器取回所请求的网页，解释其中所含的文本和格式命令，并正确的显示出来。网页与网站网页由超文本标记语言（HTML，HyperText Markup Language）写成，网页之间通过超链接相互组织成为反映某个主题的网站。,7,Web 工作模式,8,Web 工作模式,第一步：WEB浏览器向一个特定的服务器发送WEB页面请求。第二步：在每个WEB服务器上有一个服务进程在TCP的80端口上监听由浏览器发来的建立连接请求；在连接建立之后，寻找所请求的WEB页面，并将所请求的网页传送给浏览器。浏览器和服务器之间进行信息传输使用超文本传输协议HTTP协议。第三步：WEB浏览器接收到所请求的网页，并按照预

4、定的格式显示出来。,9,网站建设的基本过程,申请域名 有一个人们容易记住的域名，可以方便用户访问网站。域名是独一无二的，需要向网络信息中心申请。建立服务器主机 服务器主机应该能够提供7*24小时不间断联网服务，根据企业或个人的资金、网络维护能力等不同可以选择不同的服务方式。自己建立服务器主机 大的企业、学校、政府部门等，有专门的技术人员维护。主机托管模式 将服务器主机交给专门的网络运营部门管理。虚拟主机模式 租用网络运营商服务器主机的部分存储空间。设计网站 设计网站首先要确定网站的主题，围绕主题就可以确定网站的内容和网页的风格。确定了主题和风格后就需要组织文字、图片、声音等网页素材制作网页。制

5、作网页 网页是用HTML语言写出来的文档，是纯文本文档。,10,网页设计,确定网站主题主题确定网站主要传播哪些内容和提供哪些服务。确定网页风格(选择视觉外观)网页风格决定了网页的表现形式，决定于网站的主题和内容，以达到内容和形式的统一。设计有效的页面布局合理的网页布局可以使浏览者更加方便地浏览网页。组织素材确定了主题和风格后就需要组织文字、图片、声音等网页素材来表现主题。制作网页将各种网页素材组织到网页中,11,网页设计遵循的一般原则,主题鲜明一個主题鲜明、內容丰富具有特色的网站，通常要比什么都有的大杂烩式的网站更加吸引人。形式与內容统一网页的排版、布局、色彩、图形的运用要与网页中欲向网友传达

6、的有效信息相统一。风格要统一风格的选用要尽量突出自己的个性，让浏览者有一个独特的印象。栏目设计要合理倘若內容较多，栏目设计要合理、清晰，让浏览者容易找到所需的信息。导航清晰易懂一个清晰、容易理解的导航栏，可以使新手快速了解到网站的结构，便于转到其他的页面。时常更新內容经常更新网页内容，给网友提供最新的信息，才能使网站更有吸引力。,12,利用制作工具,编写HTML源代码,使用记事本等字处理软件直接编写代码，保存为.htm或.html的纯文本文件,使用所见即所得的可视化工具软件。,网页制作,网页文档中包含了网页元素及其显示格式，制作网页就是将网页元素按照风格所确定的显示格式写成HTML文档。,13

7、,9.1.2 HTML语言简介,HTML是一种简单的标记语言，它主要用于描述Web文档的结构，HTML代码描述超文本文档的格式。格式由浏览器解释和执行。标记的一般格式为：对象对象例如：我的主页 简介,14,超文本文档的结构,例：我的第一个主页 这是一个简单的例子,文档头部,文档体,文档头部定义网页的属性 文档体定义显示的文档内容和格式,15,图像的使用,网页上的图像用标记表示，src属性是必须的，其值说明图像的位置。例如：使用图像要考虑网络传输速度，大的图像文件需要相对长的网络传输时间。不同格式的图像文件压缩比不同，图像质量也不同，文件大小也不同。一般静态图像使用jpg格式，动态图像使用gif

8、格式。,16,9.1.3 常用网页制作工具,网页编写软件 Frontpage、Dreamwaver 图形/图像处理软件 Photoshop、Fireworks 网页动画制作软件 Flash常用网页脚本语言 Javascript、VbscriptJava applet小程序动态网页开发工具 Asp、Jsp、Php,原来制作网页不是很难啊！可是想做好也不简单！,17,9.2 使用FrontPage 2003制作网站,9.2.1 建立网站 9.2.2 编辑网页 9.2.3 编排网页格式 9.2.4 使用图像 9.2.5 保持网站的一致性外观 9.2.6 网页的布局 9.2.7 网页的动态效果 9.2

9、.8 应用表单实现交互功能,18,FrontPage 2003界面,设计网页,自动生成的HTML语句,预览网页效果,文件夹列表,19,9.2.1 建立网站,FrontPage 2003的网站管理功能强大，建立网站后，其中的文件被统一管理。使用模板建立网站 FrontPage 2003提供了多种网页模板和网站模板，用户可以很方便地建立自己的网站。自己设计网站 可以先建立一个空白网站或只有一个网页的网站，然后在网站中添加其他网页的方法自己设计。,20,使用模板,模板中预定义了网站的大致内容和布局，并使用某一种主题创建风格一致的网页。主题包含了采用某种配色方案的统一设计元素，包括字体、图形、背景、导

10、航栏、水平线及其他网页元素。,21,自己设计网页,如果从一个空白的网页开始设计，需要进行以下一项或多项操作：使用框架、表格布局或绝对定位工具来精确定位网页上的文本和图形。添加文本、图形、网页横幅、表格、表单、超链接等网页元素。添加Flash内容、视频、声音或GIF动画等动态元素。添加可以变化的内容或功能，如字幕、计数器、时间戳、网页过渡、交互式按钮以及使用动态HTML（DHTML）的表现方式。应用样式或使用样式表来设置文本格式。使用颜色或图像来设置网页背景。,22,向网站中添加网页,23,FrontPage 2003的视图,设计、拆分、代码和浏览等网页视图。文件夹、远程网站、报表、导航、超链接

11、和任务等网站视图。,24,网页视图,网页编辑的视图，负责网站内个别网页的编辑，它提供了4种显示方式。,网页设计视图,拆分视图,代码视图,预览视图,25,网站视图,以不同的视角来设计和观察网站并方便进行管理。,文件夹视图,导航视图,超链接视图,报表视图,26,9.2.2 编辑网页,插入网页元素网页元素包括文本、图形、声音、视频、动画，常用的网页元素还有水平线、书签、日期、艺术字、自选图形等等。设置网页属性包括网页保存位置、标题、背景音乐/颜色/图案、默认显示格式、语言、边距等等。建立超链接超链接可以是文本，也可以是图像或图像的一部分。,27,设置网页属性,使用背景音乐,背景颜色或图形,通过网页属

12、性的常规标签，可以制定网页的标题。也可以给网页加上背景音乐，并指定音乐播放次数。,通过网页属性的背景标签，可以设置网页的背景颜色或将图像作为网页的背景。,28,常用的网页元素,29,建立超链接,超链接的实现方法：将某个文本串或某幅图像和其他网页的地址（URL）联系在一起。我的童年时代,30,超链接到不同目标,插入书签 链接到同一文档中的某个位置 链接文本链接到同一主机的另一文档 链接文本链接到网络中的另一个主机 链接文本链接到一个电子邮件地址 链接文本链接到一个普通的文档 如：会议通知,31,9.2.3 编排网页格式,设置字符格式设置段落格式创建列表设置边框和阴影级联样式单 网页的特殊效果主题

13、的使用,32,在 FrontPage 中，可以像使用word的方式来设置文本格式，如更改字体、大小、样式、颜色、段落间距和文本的垂直位置，以及添加诸如下划线的效果。,段落的格式化方法与word类似。,设置文本格式,段落的格式化,文本及段落的格式化,项目符号和编号是组织数据的工具，它可以使数据层次分明、重点突出。,使用项目符号和编号,33,级联样式表CSS,Frontpage提供样式功能，用于对网页进行排版。为了将样式应用到站点的其他网页中，使网站的风格统一，需要创建级联样式单，定义应用到网页或网页元素的样式。样式单可以设定：改变文本行间距，字间距和字符间距设置元素的左右上下边距设置元素的缩进改

14、变元素中文本的字体大小、格式和其他属性设置元素边框，并指定边框的大小和各种属性设置元素的背景颜色和背景图案,这是保持站点外观统一的好方法！,34,在HTML文档中应用样式表的方法,链接到样式单文件 嵌入样式单 风格单的定义内容内联样式单 This is the red text 用标记符定义一个HTML文档块的样式单 css example This is a paragragh.It will look green in the browser,35,创建样式表,基本格式 h1color:red;font-size:12pt;text-line:center标记符的组合定义 H2,P,LIc

15、olor:blue在样式表中加注释 H1color:blue;font-size:18/*定义标题1字符的大小 bodymargin-left:1cm/*定义页面左边界*/h2font-size:15/*定义标题2的字符大小*/,36,9.2.4 使用图像,GIF JPEG PNG（图形交换格式）（联合图像专家组）（可移植网络图形）可用颜色数 16777216 16777216 16777216每幅图像的颜色 256 1677721616777216压缩 无损 有损 无损透明 单色 否 Alpha通道半透明 否 否 Alpha通道动画 是 否 否,FrontPage允许用户在网页中插入多种不同

16、类型的图片对象，显示效果可以有动态和静态两种。常用图片文件格式如下表所列。考虑到网页下载速度问题，一般静态图片使用jpg格式，动态图片使用gif格式。,37,图片的插入,HTML并不能包含图像，它只是包含图像文件的名称和相应的格式代码。,图片的插入 直接拖拽来改变图片的大小 使用图片属性对话框来设置 图片的替代文字、图片边框 使用图片工具栏编辑图片,38,图片文件的来源,当前站点中的图片来自磁盘上文件的图片插入其他网页中的图片插入扫描图片插入剪贴画插入视频,39,图片的基本操作,改变图片大小将图片转换成GIF、JPEG或PNG格式指定图片的低分辨率版本指定代替图片的显示文字设置图片的边框属性编

17、辑图片在图片上添加文本图片的定位保存图片对象,40,图片的特殊效果,创建图片的缩略图图片的翻转和旋转图片的亮度和对比度剪裁图片设置图片的透明色图片的颜色冲蚀图片的黑白模式添加凸凹边框效果重新取样图片,41,图像映射,图像映射就是包含超链接的图像。通过单击图像或图片的某个部分，链接到相应内容。创建图像映射的最常用方法就是在图片上放入热点。热点是一个不可见的区域，单击后可以将站点访问者带到用户定义的URL中。,设置图片的默认超链接创建热点创建文本热点编辑热点,创建热点,42,9.2.5 保持网站的一致性外观,43,主题,主题是一组可应用在网页上的设计元素和颜色方案，其中包括字体、图形、背景、导航栏

18、、水平线和其他网页元素。类似于powerpoint中的模板。在站点或网页中应用某个主题后，可以影响到网页外观的多个方面：,颜色：主题使用颜色方案设置正文、标题、超链接、网页横幅文本、导航览标签、表格边框以及网页背景的颜色。图形:主题使用图形作为网页元素，用户可以使用普通或动态图形集。样式:主题使用本身指定的样式作为文本或标题的样式。,44,应用主题,单击右侧选择主题窗格中的主题就可以应用选中的主题。,45,修改主题,修改主题的颜色,修改主题的样式,修改主题的图形,46,共享边框,共享边框是站点上一个或多个网页共享的区域。共享边框可以出现在一个网页的顶端（类似于网页页眉）、底端（类似于网页页脚）

19、、左边或右边的区域。在共享边框中只需修改一次内容，就可以将相同的内容放入多个网页中。,47,应用共享边框,设置共享边框后，用户可以添加如下内容：网页横幅公司徽标导航栏版权注意事项站点上一次修改或更新的日期和时间,48,链接栏,链接栏是一组文本或按钮超链接，通过它们浏览者可以到达站点中的某一个网页。放到共享边框中以后，每个页面都会有同样的链接信息。,链接栏,49,使用链接栏,典型的链接栏具有指向站点主页和主要上层网页的按钮。当我们在网页中添加一个链接栏时，FrontPage 将根据导航视图下设置的导航结构自动生成超链接，当然也可以自定义链接栏。,链接栏属性,50,9.2.6 网页的布局,表格在网

20、页制作中的作用已经超越了传统意义上的存放数据，表格已成为组织数据、排列网页元素空间位置最为灵活的方法。,表格和框架是网页布局的常用工具。,文字、图形、视频,框架也是一种常用的网页布局方法，它将浏览器窗口划分为功能独立的多个区域，每个框架显示一个网页内容，并且通过框架中的超链接可以更改显示在另一个框架中的网页文件。,51,两种常用布局方法,表格,框架,52,布局表格,布局表格和单元格共同表示用户可添加到网页的水平与垂直区域，这些区域可以为内容提供复杂的可视结构。我们可以选择预定义的布局表格模板，也可以创建自己的布局表格。,53,设置布局表格和单元格的属性,调整表格的大小对选中单元格的高度、宽度、

21、背景颜色、边框、边距等项进行相应的设置。添加圆角图片、设置阴影来修饰网页。,54,框架布局,框架是一种将浏览器窗口划分为功能独立的多个区域的常用方法。框架集定义每个框架的大小、位置、名称和初始网页，普通网页提供每个框架（子窗口）的内容。一个框架的超链接可以更改显示在另一个框架中的网页。框架集是一种特殊的网页，该网页定义了整体的框架布局，但不提供实际内容。,55,框架的创建和保存,新建框架网页,框架组成,在框架中加入网页,边框、滚动条、网页,1）建立新网页2）指定已经存在的网页,保存框架页,【文件】|【另存为】,【文件】|新建|【网页】，选择“框架网页”标签,56,框架属性设置,框架/框架属性,

22、网页名称初始网页框架大小,边距滚动条框架的可调整性间距,相对大小：3和7,57,框架之间的超链接,在框架网页中，单击某框架内网页上的超链接时，被超链接所指定的网页通常在另一个框架中打开，这个框架称为目标框架。,命名:链接:点击这里跳到main框架,58,嵌入式框架,在网页的内部也可以插入框架来显示单独的网页。,59,使用层来定位元素,层是一个可以应用CSS来进行绝对定位的工具。利用层的绝对定位功能，也可以实现网页的布局。,60,9.2.7 网页的动态效果,网页元素的动态效果可以将动态 HTML(DHTML)的动画效果应用到网页上的任何相关组件;例如文本、段落、图片、按钮和字幕等等，并将这些效果

23、链接到单击鼠标、鼠标悬停和加载网页等事件上。网页过渡的动态效果 网页过渡指进入网页或离开网页等触发事件发生时，网页从当前屏幕刷新到新的屏幕采取什么样的过渡效果。触发事件包括进入网页、离开网页、进入网站、离开网站等。,61,网页元素的动态效果,利用“DHTML”效果工具栏可以在网页的任何组件元素中添加动态效果，并将这些动态效果链接到鼠标的单击、双击、悬停或加载网页等事件上。,当鼠标指向图片时，会更换另一张图片。,DHTML动态效果工具栏,62,网页的过渡效果,网页过渡指进入网页或离开网页等触发事件发生时，网页从当前屏幕刷新到新的屏幕采取什么样的过渡效果。这就像幻灯片切换过程的过渡效果一样。,63

24、,每个网页可以包含一个或多个表单，每个表单占据网页中的一个特定区域。表单中必须有一个元素作为“提交”按钮。,9.2.8 创建交互式网页,收集站点访问者对站点的反馈意见（意见、浏览、订单等等）。网页中插入表单来收集访问者信息，利用表单我们还可以创建讨论组。,创建表单插入表单域讨论组的应用插入网页的高级内容,64,创建表单,创建表单页面单行文本框 text密码框 password多行文本框 textarea下拉列表框 select复选框 checkbox单选按钮 radio按钮 button表单的提交 submit,要掌握收集什么样的信息使用哪个表单域更合适！,65,表单的处理,一个表单必须有一个

25、提交按钮。单击提交按钮后，表单的结果l可以送到一个文件、电子邮件地址、数据库、表单处理程序以及自定义（ISAPI、CGI、ASP等）表单处理程序。,66,9.3 网站的发布和管理,发布一个站点就是要将站点上的网页及素材文件复制到一个公共的Web服务器。网站发布的步骤申请网页空间 上传网页及素材文件 更新网站 宣传网站,67,网站发布之前,站点分析 指出未链接的文件 找出慢速网页 找出没有连接到任何网页的超链接 检查断开的超链接 检查网页元素错误 检查未用主题的文件以及完成的任务网页测试测试超链接是否可用图片是否正常显示其他媒体素材是否正确播放,68,网上有一些免费的个人主页空间。要拥有自己的个

26、人主页，首先要到提供建立免费主页的站点注册成为会员。然后你就可以上传你的网页了。注意：并非所有的WWW服务器都支持Frontpage的组件。,申请主页空间,站点制作好了，就需要把它放到互联网上，让全世界的网络浏览者能够看到它。对于某个企业来说，拥有自己的域名、自己的主页是非常必要的。商标和公司名称应成为域名的首选。确定域名之后就需要选择网页服务方式了。,申请主页空间,69,发布站点,发布站点就是要把网页文件和所用到的素材文件拷贝到网络中的web服务器上。WEB管理方式登录服务商网站，根据提示选择本地网页上传到服务器主机。FTP上传方式 服务商提供FTP功能，使用浏览器或专用FTP工具（如：Cu

27、teftp等）上传网页。,70,宣传主页,与相关行业网站建立友情连接在报纸、电视和网络媒体上做广告在论坛上发贴子公告，给你的网友发邮件或在qq里发消息。注册到著名的搜索引擎，让用户找到你的网站在网站排行榜上登记,网站建立起来了，怎么才能让用户在茫茫的互联网络中访问到你的主页呢？这就要通过各种途径宣传了。宣传网站一般可以有：,71,思考题,什么是超连接？一幅图片的某个部分可以作为超连接吗？URL的作用是什么？网站建设的基本过程是什么？如果希望网页具有动态交互功能，可以使用哪些技术？使用FrontPage 2003建立网站可以有哪些方法？FrontPage 2003提供了哪些方便网站管理的视图？为什么我们把做好的网页移植到其他计算机或服务器中以后有些超链接会失效呢？外部CSS的作用是什么？常用的网页布局方法有几种？其中如何使用表格进行布局？对表单的处理方式有哪些？各适合于什么情况？发布做好的网站需要做哪些工作？,