关于HTML5的网页设计与实现学年论文
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
滨江学院
学年论文题目关于HTML5的网页设计与实现
院系滨江学院
专业软件工程
学生姓名胡飞
学号 ***********
指导教师郑关胜
职称副教授
二O一一年十二月五日
目录
一引言 (2)
二网站建设的流程 (2)
三网页制作 (3)
(一)制作步骤 (3)
(二)常用参数 (3)
(三)网页布局 (4)
(四)网页色彩 (5)
(五)细节的把握 (6)
(六)常用工具介绍 (7)
四 HTML5的改进特性 (7)
(二)程序接口 (8)
(三)元素变化 (9)
(四)异常处理 (9)
五结束语 (11)
关于HTML5的网页设计与实现
胡飞
南京信息工程大学滨江学院软件工程专业南京 210044
摘要:
关键字:
一引言
随着Internet的诞生和发展,许多人不再仅仅局限于网上冲浪,而是参与到网站建设中。企业建站相当于在网上建立一个家,你就可以在这里向客户介绍你的企业,展示你的实力,推销你的产品,网页制作作为网站制作中一个重要的环节,相对于传统的平面设计而言,网页设计具有更多的新颖性,更多可以表现的手法。结合本人的实习过程,现就网站建设与管理过程中,网页设计与制作的具体经历,包括:网页设计与制作过程中的网页布局、色彩构置,框架结构等相关事项做以下论述。
什么是HTML5?
HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。
HTML 的上一个版本诞生于 1999 年。自从那以后,Web 世界已经经历了巨变。
HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。
HTML5 是如何起步的?
HTML5 是 W3C 与 WHATWG 合作的结果。
W3C 指 World Wide Web Consortium,万维网联盟。
WHATWG 指 Web Hypertext Application Technology Working Group。
WHATWG 致力于 web 表单和应用程序,而 W3C 专注于 XHTML 2.0。在 2006 年,双方决定进行合作,来创建一个新版本的 HTML。
二网站建设的流程
1.定义合适的域名。由域名构成的网址会像商标一样,有助于将来塑造网上的形象。域名除了要符合公司的性质以及信息内容的特征外,还要具有简洁、易记、具有冲击力的特点。
2.租用虚拟服务器。有了域名后,就需要一个空间存放网站,这个空间就是Internet 上的服务器。一般虚拟主机提供商都能向用户提供大容量、高速度的服务器,用户可根据网站的内容设置及其发展前景来选择。
3.设计网页。网页的设计制作可以自己完成,也可以通过虚拟主机提供商或专业的网页设计制作商来完成。设计网页前要收集所有需要放在网站上的文本资料、图片等,并尽量用文字详细说明制作的框架结构,将收集的材料提供给网页设计者。
4.ICP备案。网站备案的目的就是为了防止在网上从事非法的网站经营活动,打击不良互联网信息的传播,如果网站不备案的话,很有可能被查处以后关停。ICP备案可以自主通过官方备案网站 在线备案或者通过当地电信部门两种方式来进行备案。
三网页制作
(一)制作步骤
网站是网页的集合,一个站点用的所有网页构成一个网站,网页是网站的表现形式,网页设计是指对网站整体页面的设计,包括页面风格、配色、布局、内容等。网页设计包含的内容非常多,大体分为两个方面:一方面是纯网站本身的设计,如文字、排版、图片制作、平面设计、静态图文和动态声音、影像等;另一方面是网站的延伸设计,包括网站主题、浏览群的定位、智能交互、制作策划、形象包装和宣传营销等。
设计页面的第一步就是设计片面布局,就像报刊杂志版面设计一样,我们可以看作一张报约或者一份杂志来进行排版布局。
1. 草稿新页面就像一张白纸,没有任何的约定俗成的东西,可以尽可能地发挥想象力、创造力,将想象的布局到上面去。这是原创阶段,你不必讲究细腻工整,你也可在草稿本上先画出整个布局框架,把多个版块的位置先粗略的布置上去以往下一步工作的展示,这一步也可以借住PHOTOSHOP或其他工具软件来完成。
2. 粗略布局在草稿的基础上,将需要的功能模块放到页面上去,这时要遵循突出重点、整体协调的原则,首先将网站标志、导航条、广告条等最主要的模块放在最突出位置,然后考虑其他模块的布局。
3. 定稿定稿即将粗略布局精细化、具体化,完成整个页面的设计。
页面的制作,首先在根据客户的要求下,完成首页的制作,在经客户确定后,再制作其他的页面,制作完成后,交给客户验收,然后发给客户确定,待所有的页面的都经客户确定后,完成网页的制作进程,交给程序员添加程序。
(二)常用参数
图片质量与下载速度
由于网络速度问题,我们要考虑图片的大小对传输速度的影响,如果图片太大就会影响浏览速度,访问者很快就对这个网站失去了兴趣,只有充分了解图片质量与下载速度的关系,并了解不同的文件格式,才能更有效的表达内容。
1. 分辨率
理解图像分辨率可以直接控制文件大小和下载速度,进而影响访问者的人数,创建WEB 图片的要求是小、快、好。显示器的分辨率起决定性的作用,大多数显示器使用的是1024*768的分辨率,因为要通过显示器页面,所以用高分辨率并不会增加图片质量相反还会降低图片的下载速度。
2. 位图
习惯性称为图像,而将矢量图称为图形,位图是位映射图像的简称,也可叫栅格图。它将一幅图像分成许多栅格,栅格的每一个点就是图像的像素,其值就是像素的亮度和色彩度,扩大位图尺寸的效果是增多像素,从而将使线条和形状显得的参次不齐,位图的与其分辨率密切相关,因此在处理位图图像时,必须设置合适的图像分辨率,否则输出图像时会遗漏细节,使图像模糊。
3. 矢量
矢量图也称为面向对像的图像或绘图图像,它使用一组线段造型描述一段图像,图像中包含的直线,弧线和造型的设置与开关是由指令描述的,矢量图适用于描述色彩简单的图像,矢量文件中的图像元素称为对象,每一个对象都是一个自成一体的主体,它具有形状、轮廓、大小和屏幕位置等属性。放大位图会失真,但放大矢量图不会失真。
4.图片格式
制作好的效果图可以保存为各种格式,包括GIF格式,JPEG格式和PNG格式等各个图片格式之间的区别为:GIF格式即图形交换格式;GIF格式的图片只能使用256种颜色,不适合显示色彩丰富的图像内容。其特点是1.采用隔行扫描的显示方式;2.可以设置背景透明;3.可以制作简单的动画。JPEG格式可以显示颜色复杂的图片,但是在处理大面积的颜色块时可能会出现明显的压缩痕迹。PNG格式的图片兼有GIF和JPEG的优点。
(三)网页布局
常见网页版式布局结构有以下几种:
两栏式结构,即页面顶部为网站标志或广告条,下面分为左右两栏,一般左栏式导航或分类信息,右栏为主要内容,这种布局很容易掌握,但如果在色彩上不加以注意的,很容易给人一种“乏味”的感觉。三栏式结构是一些大型网站常用的布局结构,一般为上面是横幅的广告条,下面分为三竖栏,中间较大,是主要的信息,左右是小条内容或者广告条。三栏式给人一种充实的感觉,但页面拥挤,不够灵活,是网站常用的一种布局形式。“三”型结构,这种结构多用于国外网站或者视频类网站,其特点是分类清晰,展示方便。左右框架型,是企业网站或论坛常用的布局,页面分为左右两部分,左边一般为导航部分,右边是与导航相对应的内容。左右框架型的结果非常清晰,内容一目了然,便于信息的查询。上下框架型与左右框架型类似,其区别仅仅在于形式。页面整体为横向分布,上面为导航,中间的大展式窗口很突出,整个网站显得简洁明亮,这种结构适合于信息量不大,主要靠图片展示内容