图片网页设计论文

摘要:本节内容是DW中前期学习的基础，也是最常用的部分，它是教材关于前面基础知识的延伸，并且贯穿以后整个设计的教学，是学生能够顺利、操作使用网页制作软件的基础之一，也是形成学生“认识理解——掌握技巧——实际应用”这一合理知识链的必要环节。以下是小编精心整理的《图片网页设计论文(精选3篇)》，仅供参考，希望能够帮助到大家。

图片网页设计论文 篇1：

一个焦点图片浏览网页的设计

引言：同学们在学习html，css，javascritp基础知识之后，对大多数网站上焦点图片浏览，非常感兴趣，但又不知怎样设计，我依据这一学情，我在《网页设计》教学中，设计这样一个项目：“网站焦点图片网页设计“。效果图如下图所示：

一、功能分析与要求

（一）图片定时切换，如2秒切换一次，且切换时过渡效果，切换到哪张图片，下边对应的数字变色；

（二）单击下边的数字时，图片切换到相应的图片；

（三）鼠标在图片之上时，停止切换，鼠标离开之后，图换又开始切换，单击图片，跳转到所链接的页面。

设计思路：用html提供页面上的元素，css控制这些元素的显示，javascript书写人机交互代码。

二、设计步骤

依据设计思路，页面设计我们分三个步骤：html设计、css设计、javascript设计。

（一）html设计

把页的所有元素放在一个div里，在这div里有，有图像标记，有下边文字导航div，在文字导航div里导航文字标记a.

参考文献：

[1]吴丰、丁欣 Dreamwerver CS5 网页设计与制作茧自缚DIV+CSS 北京：清华大学出版式 2012年

[2] 刘智勇JavaScript开发技术大全[M] 北京： 清华大学出版社 2009

[3] （美） steve Suehring （译）梁春艳 javascript从入门到精通 北京：清华大学出版社 2011

[4] http：//www.w3school.com.cn/（w3c在线教程）

作者简介：

张树才 男 1966.7 贵州 本科 高校讲师 主要研究 前台网页设计

作者：张树才

图片网页设计论文 篇2：

《Ｄｒｅａｍｗｅａｖｅｒ网页制作—图片的应用》教学设计

摘要:本节内容是DW中前期学习的基础，也是最常用的部分，它是教材关于前面基础知识的延伸，并且贯穿以后整个设计的教学，是学生能够顺利、操作使用网页制作软件的基础之一，也是形成学生“认识理解——掌握技巧——实际应用”这一合理知识链的必要环节。

关键词:教材；教法；学法；课堂教学程序；设计理念

一、说教材

本课选自网页三剑客其中一个制作网页的软件，DREAMWEAVER，本课是根据网页制作流程设计到“图片的应用”部分而定的。教学对象是计算机专业三年级学生。本节课属于应用软件课型，目的是学习如何运用软伯件完成在网页中的图像的制作，将图片的使用编辑成符合网页的作品，让插入图像和设置图像灵活自如。本节内容是DW中前期学习的基础，也是最常用的部分，这个知识点掌握与否直接关系到今后单元的学习，所以应由浅入深，循序渐进的引导学生学习。它是教材关于前面基础知识的延伸，并且贯穿以后整个设计的教学，是学生能够顺利、操作使用网页制作软件的基础之一，也是形成学生“认识理解——掌握技巧——实际应用”这一合理知识链的必要环节。

观察网页布局和细节是学生们在接触到网页页面设计后最感兴趣的，它包含了许多科学与艺术、理智和情感、美感和实用的内容，丰富多样的设计既让人感受不同的美，又可以将它应用到实际中去。

基于以上的分析，我制定了如下几点：

（一）教学目标

让学生了解DW设计的基本要素和主要环节，了解DW设计中图片的使用方法，各种效果的应用。

这些效果包括图片插入后的位置、图片使用时如何控制需要的尺寸、图片与文字排版时，如何设定对齐方式，另外，图片的链接也可以起到广告宣传的效果作用于图像的设计中。

能力目标：培养学生如何获取素材、处理素材和应用素材的能力。培养学生自我探索、自主学习的能力和自我创新、团体协作的能力。

情感目标：让学生自我展示、自我激励，体验成功，在不断尝试中激发求知欲，在不断摸索中陶冶情操。

（二）教学重点与难点

重点：让学生认识、理解处理图像的几项内容（插入新图片，图片插入的位置，相对于文字左侧……）。

难点：在于各代码语法的混合运用。综合运用知识，创建多样式的页面(是把握各种效果处理的技巧与原则，形成恰当的画面点缀、合理展现作品主题。)

二、说教法

本课采用的主要教学方法有“任务驱动法”、“创设情境法”等。 电脑教学理念指出：知识及技能的传授应以完成典型"任务"为主。因此本課采用建构主义理论指导下的主体式教学模式。通过学生已经受过的美术教育和信息技术教育（课程整合），创设一个动画中场景的情境（创设情境法），设置一个任务，让学生运用已学知识，自己动手，有机结合DW的各种操作（任务驱动法），以任务驱动的方式查漏补缺，使教学内容合理流动，水到渠成。教学中，启发、诱导贯穿始终，充分调动学生的学习积极性，注意调节课堂教学气氛，使学生变被动学习为主动愉快的学习，使课堂能在生动、有趣、高效中进行。

三、说学法

本课教给学生的学法是“巩固掌握——接受任务——思考讨论——合作操练”。 建构主义学习理论强调以学生为中心，要求学生由知识的灌输对象转变为信息加工的主体。故此本课教学过程中，根据一年级学生对电脑绘画、电脑设计的新奇感，进行巧妙设计，让学生带着一个个任务通过课堂讨论、相互合作、实际操作等方式，让学生从中获得成就感和自信，由此自我探索，自主学习，使学生在完成任务的过程中不知不觉实现知识的传递、迁移和融合。 为了给学生学习提供好的教学环境，我特地准备了一些资源，如“千年图库”和“中国设计网”、等网络资源，学生从中获取多方面的技术帮助，如获取素材、作品上传和学习交流等。

四、说课堂教学程序

根据本课教学内容以及计算机课程学科特点，结合三年级学生的实际认知水平和生活情感，设计教学流程如下：

（一）复习后导入新课

首先复习一下前面课中学习过的，如何给文件加背景。如何设置字体的颜色，如何定义超链接等等。学生通过前面的学习，已经掌握了一些基本设计能力，这时教师抓住时机提出任务：学生自己设计场景，要求注意空间、文字、图片、色彩和装饰元素等各方面的搭配排版。 此环节设计目的是创设和谐实在的学习情境，调动学生的积极性，激发学生的学习兴趣，使学生在情景中主动、积极地接受任务，从而乐于学习。同时复习已经掌握的操作技巧，为后面的教学做好铺垫。

（二）步步为营，渐进达标

本环节分三个层次展开： 第一层次：1、学生学习如何在网页页面中插入图片，给网页页面填加效果。 2、学生练习，学生交流操作出现的问题，教师肯定评价学生的讨论结果，小结归纳。第二层次： 1、选择素材设计一个场景，进行图文混合排版，教师巡回指导版面设计。 2、流动评价学生作品，教师肯定学生的成绩，小结过渡。 第三层次：引导拓展“做个网页平面设计师”的实际意义——网页平面设计不仅在平面介质上展现美感，还可通过作品实际展现设计者丰富的想象力。鼓励学生大胆的想象，想象无极限。２、学生自我创作，教师巡回指导。（为照顾学生的个体差异性，采用分层教学：操作技能比较熟练的学生为A等，操作基础薄弱者为B等，A等学生可让其充分自主学习，B等学生教师可适当进行个别指导。）３、集体讨论交流、评价，优秀作者提出表扬。 这一环节是课堂重点部分，因此，（1）我以任务驱动的方式来整合美术、平面设计两大学科。任务是课堂的"导火线"，教师通过课程整合后的优点，抛出一个个任务，激发学生的创作欲望，从而促使学生去自我探索、自主学习和团体协作、自我创新，达到掌握操作和设计的目的。这种有效的激励方式，激发了学生的学习热情和创作积极性。（2）分层教学的运用，使全体学生得到发展，提高自身操作设计水平。（即分层教学的策略和效果）

（三）归纳总结，完成建构

教师帮助学生梳理知识，归纳总结。 为了检验和促进每个学生达到预期的目标，发现教学中的问题，对学生的学习效果进行评价是必须的，也是有效的。目的在于加深学生对知识的记忆、理解，完成真正意义上的知识建构。

五、说设计理念

在设计这节课的时候，我注重体现以下几个思想：（一）学科的整合。本课整合了网页制作、平面设计两大学科。（二）讲与练的结合。对已掌握了一定网页三剑软件之一firework操作技能的学生来说并不难，而且也是学生非常感兴趣的东西，因此在课堂上只需坚持精讲多练的原则。（三）改变学生学习方式。变被动学习为主动愉快的学习，并且通过多种学习方式（如自主学习、协作学习、自我创新、利用网络学习等）掌握知识技能。（四）情景与任务驱动的融合。在每一个任务抛出的时候，都创设了许多适当的情景，以此让学生在不知不觉在情景中积极主动地接受任务。（五）分层教学的实施。照顾到学生个体差异性，使得每一位学生在教学活动中都获得个体的发展。（不同教学对象做到有针对性）

作者：韩绍鑫

图片网页设计论文 篇3：

CSS Sprites提升网页加载速度的应用研究

摘要：在使用相同图片数量的网页中，与传统多张图片加载的方法相比，利用CSS多张图像拼合技术，可以减少浏览器对服务端的请求次数，从而有效的提升网页加载速度。对HTTP工作过程进行分析，使用实验和比较的方法，分析得出网页加载速度与HTTP请求次数之间的关系。结合CSS Sprites原理和实现过程，比较CSS Sprites的优缺点，呈现出CSS Sprites在网页应用中出色的性能和广阔的应用前景。

关键词：CSS Sprite；HTTP；图像拼合；网页加载

Improvement of Webpage Loading Speed by CSS Sprites

QIN Qiu-mi, WEI Yong-jun, JIANG Jia-bin

(Liuzhou Railway Vocational Technical College, Liuzhou 545007, China)

Key words: CSS Sprite; HTTP; image mosaic; webpage loading

瀏览网页时，浏览器状态栏的进度条反映网页加载的速度，在该等待过程中客户端向Web服务器发送HTTP请求，HTTP请求的次数与网页中图片数量密切相关，即每加载一张图片都会产生一个HTTP请求。因此，减少HTTP的请求次数，可以提升网页加载的速度，减少HTTP的请求次数关键是减少网页图片数量。在不影响网页效果的情况下，把多张图片拼合成一张图片，分别控制图片的显示和遮挡部分，当网页加载时一次加载整个组合图片，减少了HTTP请求的次数，从而加快页面加载速度，这就是CSS Sprites技术所在。本文通过分析HTTP的工作过程、剖析CSS Sprites的原理等说明了CSS Sprites能够提升网页加载速度。

1 HTTP工作过程

网页是Internet上展示信息最常用的方式，网页的内容由图片、文本、多媒体信息等组成，图片作为网页美观和布局的重要元素，使用率非常高。网页浏览使用HTTP(Hypenext Transfer Protocol)超文本传输协议，它是专门为Web设计的一种网络协议，在TCP/IP体系结构中属于应用层协议，它定义了Web的通信交换机制、请求及响应消息的格式等，HTTP工作过程如图1所示。

首先，客户端根据某资源的URL向WEB服务器提出请求，WEB服务器的HTTP Daemon(守护进程)将此请求的参数通过标准输入stdin和环境变量(Environment Variable)传递给指定的处理程序，并启动此应用程序进行处理，处理结果通过标准输出stdout返回给HTTP Daemon进程，再由HTTP Daemon进程返回给客户端，由浏览器负责解释执行，将最终结果显示在用户面前。以上只是一次HTTP请求的过程，实际浏览网页时，会发生多次HTTP请求，比如网页中的每1张图片都会发生一次HTTP GET请求，如图2的IIS日志所示。

由图2发现，显示每张图片都产生一个HTTP GET请求，每发次一次HTTP请求都会执行一次如图1所示的流程，花费较大的时间在HTTP请求的过程，且等待的时候与图片数量成正比，因此，减少HTTP的请求是有效提高网页加载速度的有效方法。

CSS Sprites(CSS图像拼合技术)是将许多图片组合到一个网格上，然后通过程序将每个网格的内容定位到界面上，网页是使用CSS（Cascading Style Sheet：层叠样式表）定义背景属性，来控制图片的显示位置和方式。当页面加载时，不是加载每个单独图片，而是一次加载整个组合图片，它大大减少了HTTP请求的次数，从而加快页面加载速度，同时缩短了悬停加载图片所需要的时间延迟，使效果更流畅，不会停顿。

2 CSS Sprites原理

其基本思路是通过CSS属性background-image（背景图片路径）组合background-repeat（背景重复选项），background-position（背景位置）等来实现，通过调整background-position的X和Y坐标的数值，背景图片就能以不同的面貌出现在你眼前。其实图片整体面貌没有变，由于图片位置的改变，在容器中显示该显示的部分，容器之外的图片区域被遮挡，网页中的容器一般是用DIV标记来实现。根据CSS规范，background-position属性包含了两个(可选的)变量：水平位置(horizontal)和垂直位置(vertical)，语法如下：

.classname{

background-image: url(bg.gif);

background-position: [horizontal position] [vertical position];

}

使用这个属性，可以定义块级元素的背景图像位置，可以使用%百分比或px像素为单位来定义图像开始的位置，也可以使用关键字：top，left, center， right, bottom。在“ background-position: x% y%;”这样一个语句中，x%指水平偏移，y%指垂直偏移，左上角是：0%,0%，右下角是：100%,100%，默认的是50%。

如图3background-position坐标所示，图像的左上角为原点，X轴向右是负坐标，Y轴向下是负坐标，图像Image由A,B,C三张图拼合而成，分辨率为200×150像素。在默认情况下，Image是原点在左上角、自动水平和垂直重复。① 显示A图像，容器应该为A的区域大小100×50像素，position为0 0，因为A的原点与Image的原点重合，都为0；② 显示B图像，容器为25×50像素，position为-25px -75px，即Image从该点开始显示，且B图像与容器大小相同，能完整显示B图像，而Image的其它区域被遮挡。因为B图像的底与Image的底重合，因此该处也可写成position：-25px bottom。应用CSS Sprites需要注意三问题：

1) 正坐标问题

如设置position为25px 50px，表示Image的原点X轴向右移动25像素，Y轴向上移动了50像素，在容器中显示的时，Image的左边和上边分别留空了25像素和50像素。

2) 重复边缘问题

例如设置容器的大小为175×75像素，background-repeat为默认开启填充背景，position为-125px -25px，那么Image又是如何填充容器？首先把Image的原点定位到Image中C图像的左上角，用C图像开始填充容器，从C图像直到Image的右边缘只有75像素，容器宽175-75=100像素，从Iamge图像左上（注意不是从-125px -25px）开始继续填充直至充满整个容器；如果background-repeat为repeat-x水平填充，则从Image的0 -25px(垂直方向下移25个像素)；background-repeat为repeat-y垂直填充，则从Image的-75px 0px(水平方向右移75个像素)。

3) 超出图像问题

position值大于图像分辨率时使用空白填充。用一句话来概括position定位：负坐标向右下移动原点，正坐标向左上移动原点。

3 CSS Sprites应用

CSS导航是一种常见的技术，为了给用户良好的体验，在大多数网站的导航都有图片和文字相结合，一个有9个栏目的导航要9张图片，缺点是网速较慢时加载有轻微延迟。把这些图像拼合到单个Sprite文件，这个有效解决这个问题。

1) 拼合图像

打开Photoshop或Fireworks图像设计软件，新建空白透明画布，把准备拼合的每个图像放到画布中，并且图与图之间用合适的空白间隔，如图4所示，保存图像时选择GIF或PNG格式保存图像，这两种格式均支持画布背景透明，便于网页布局。实践证明，存储相同的拼合图像时，在Fireworks中比Photoshop占用空间还要小。

2) 网页布局

使用ul标签来布局导航的主要HTML如下：

• 文件管理
• 添加文件
• 刪除文件

……

• 友好链接

span标签作为显示背景图像的容器，对于每一个导航按钮所显示的图像则用样式类(nv1,nv2,…,nv9)来控制。

3) CSS给背景定位

定义nv1的CSS样式如下：

.nv1{

background-image: url(sprites.gif);

background-position:-23px -14px;

}

可简写成：

.nv1{ background:url (sprites.gif) -23px -14px;}

注意单位px不能缺少，否则定位无效。position 的值可在图像设计软件中测量得到，其它的样式只需要改变相应的position位置即可。更简洁的方法是使用JQuery遍历添加样式。其它样式nv2,nv3，……,nv9相应把position坐标改变即可。把网页保存后，发布到IIS站点，浏览网页后观察IIS日志，只有一条HTTP请求sprites.gif图像的日志。再测试分别把每个图像单独应导航上的网页，有9条HTTP请求图像的日志。两种方式的比较如图4所示，并且拼合的图像占用的存储空间也较小。使用Windows性能计数器监视CPU占用情况实时分布如图5所示，使用CSS Sprite拼合图片的页面主要是在第一次加载图片时CPU开销较大，再次使用时从缓存中读取，CPU开销逐步减少。单独图片的页面，每遇到图片都必须向服务器请求、加载，CPU开销和加载图片的大小成正比关系。比较得出使用CSS Sprites能较好的提升网页的性能。

4 CSS Sprites分析

目前一些大型门户网站已经使用了CSS Sprites技术,最著名的例子莫过于谷歌网下方的那几个动画；苹果网站使用CSS Sprites来制作导航菜单的鼠标悬停效果；网易邮箱的切换按钮的CSS Sprites效果等。利用CSS Sprites能很好地减少了网页的HTTP请求，从而大大的提高了页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；CSS Sprites除了减轻服务器器的负担，还能较快捷实现一些客户端动态效果，但它存的一些问题也不能忽视。

4.1 CSS Sprite的缺点

1) 降低图片的可维护性。页面背景有少许改动，一般就要改动整张合并的图片，如果改动到原布局的图片，还必须改动相应的css样式；如果在原位置容纳不放图片，就得往下加图像，这样图片的字节就增加了，每次的图片改动都得往这个图片删除或添加内容，重新算图片的位置，都显得比较繁琐。

2) 减少图片的灵活性。由于图片的位置需要固定为某个绝对数值，这就失去了诸如center定位之类的灵活性。

3) 图片溢出问题。容器必须定义了宽度和高度，否则图片可能溢出或者显示不全；在宽屏的高分辨率的屏幕下的自适应的页面，如果图片不够宽，很容易出现背景断裂。

4.2 图片拼合注意的问题

1) CSS Sprites图片顺序合图片由上至下、左至右添加。而background-position一般采用数字组合形式定位，这样能减少维护带来的不必要麻烦；

2) 为每张图片留出足够空隙：预留足够的空白，在容器大小发生变化时，可以避免其他的图片显示出来；

3) CSS Sprites图片中把颜色较近或相同的组合在一起可以降低颜色数，因为少色数的图片文件体积会相对的小；

4) 在size相同的CSS Sprites图片中，垂直排列的图片会比水平排列的文件体积要大；

5) 在CSS Sprites图片中，水平排列的图片会比垂直排列的文件体积要大；

6) 图片对等合并：应用CSS Sprites图片时，适当地把对等相同的图像合并，以节省空间及减少体积；

7) 区分开不需要合并的图像：如当前用户确定只显示一种状态或一个级别时，不必要把其他的级别或状态的图片合并；

8) 黄金切割位：在CSS Sprites图片的最右或左边为最灵活动位置最适宜摆放文本前的icon，因此不会受到其它CSS Sprites图片干预，也不需要预留一定的行宽。

5 结论

通过以上分析得出，使用CSS Sprites把图片拼合之后，可以减少客户端向WEB服务器的HTTP请求数，从页提升网页加载的速度，提高的网页的性能。虽然CSS Sprites也带来不便于维护的问题，但是在性能的优先的情况下，这些都是可以克服的，特别当前互联网的连接速度没有质的提高之前，CSS Sprites更体现了它的高性能和广阔的应用前景。

参考文献：

[1] 陆凌牛.HTML5与CSS3权威指南[M].北京:机械工业出版社,2011:365-371.

[2] 曾顺.精通CSS+DIV网页样式与布局[M].北京:人民邮电出版社,2008:107-110.

[3] 李烨.别具光芒DIV+CSS网页布局与美化[M].北京:人民邮电出版社,2008:52-55.

作者：覃秋密,韦永军,蒋家斌