本论文主题涵盖三篇精品范文，主要包括《图片网页设计论文(精选3篇)》相关资料，欢迎阅读！引言：同学们在学习html，css，javascritp基础知识之后，对大多数网站上焦点图片浏览，非常感兴趣，但又不知怎样设计，我依据这一学情，我在《网页设计》教学中，设计这样一个项目：“网站焦点图片网页设计“。
图片网页设计论文 篇1：
《在网页中插入图片》教学设计
【设计理念】学习总是与一定的情境相联系的，切合教学内容的情景创设，可以为学生的自主探究提供一个良好的空间，又可以激发学生自主探究的动力。本课主要采用“任务驱动”教学法来实施教学。
【学情分析】学生已经学会了新建网页，在网页中输入文字。学生就有“为网页添加图片信息”的欲望，结合因特网知识让学生为自己创建的网页添加图片的信息，添加图片的技能学生已经在word文字处理软件中学习过，因此本节课知识，学生可以自主学习。
【教学目标】
1、知识目标
在网页中插入图片。
对图片进行编辑。
设置网页背景图片。
2、能力目标：利用插入图片知识，培养学生的图文并茂整体布局网页的综合信息素养能力。
3、情感目标：通过作品展示和评价是让学生体验成功的喜悦，激发学生的创造热情。
【教学重点】在网页中插入图片。
【教学难点】设置网页的背景图片。
【教学方法】情景导入法、任务驱动法
【课前准备】FrotntPage2000软件多媒体教学网络系统
【教学过程】
一、创设情景激发兴趣
【教师活动]利用多媒体教学广播系统展示两组图片(“自然美图片”和“灾难图片”)。两组截然不同的图片，看过后，有什么感受呢?
学生：学生欣赏两组图片并谈感受。
教师：同学们都知道，地球是我们的“生命之舟”。可是我们人类却因为个人的利益，人为的破坏她，导致了各种灾难的发生。环境污染是我们人类面临的一个严峻问题。所以同学们我们应该带头保护环境，来宣传爱护环境的重要性。学生倾听受教育。
教学意图：通过欣赏两组对比图片，宣传环境保护的重要性，对学生进行情感教育，来激发学生学习的兴趣。
二、导入主题欣赏范作
教师：同学们想一想，我们可以通过什么途径来宣传爱护环境呢?
学生：写作文、画画、制作手抄报、做一个网页……
教师：同学们的办法可真多啊!我们可以用这个学期所学的电脑知道来制作网页，宣传“爱护环境”。
教师：回忆：组成网页的两大主要元素是什么?
学生：文字和图片。
教师：利用多媒体教学广播系统展示几张“插人图片的网页”。
学生：学生欣赏网页。
教师：同学们想不想也制作“插入图片”的漂亮网页呢?
学生：想。
教师：先了解“网页中图片的作用”。出示幻灯片：图片往往比大量的文字讲述更具吸引力和说服力，在网页面中适当地添加图片会使网页丰富多彩、起到美化网页的作用。图片可以使网页图文并茂，更具有感染力。
学生：学生阅读、了解。
教学意图：通过前面的情景创设，引入了本节课的制作主题。学生明确了本节课的学习内容。
三、出示任务自主探究
[教师活动]明确本节课的学习任务。带着这三个任务，同学们阅读书中第23页和24页的内容，自学完成。出示幻灯片：任务一：建立一个只有一个网页的网站；在主页中插入图片(图片位置：F：＼环保资源)：任务二：对图片进行设置(大小、位置、删除)(提示：单击鼠标右键一图片属性一外观)：任务三：给网页设置背景颜色或背景图片f提示：单击鼠标右键一网页属性一格式)
学生：明确任务。边看书边实践……
教师：巡视、辅导
教师：分别请三位学生操作演示三个学习任务。
教学意图：使学生在完成任务的过程中通过实践和探索逐步实现学习目标。
三、拓展思维自由创作
教师：同学们的三个任务完成的都很出色。同学们想一想，我们能不能把文字和图片同时都应用到网页中?制作一个完整的网页呢?
学生：能。
教师：自由创作。出示幻灯片：请同学们利用素材库中的文字和图片信息，制作出一页以“爱护环境”为主题的网页，增强环保意识，增加环保知识。(素材地址：F：＼环保资源)页面要求：网页中有文字和图片网页布局合理、结构协调、美观匀称
教师：以每台电脑为一小组，小组同学间可以进行合作交流。同学们，发挥你们的聪明才智，相信一定能创作出很有创意的网页，开始创作吧!(激励性语言)
学生：明确创作要求。实践操作……
教师：巡视、辅导
教学意图：引导学生使用已知的技能来修饰自己的网页，培养学生对知识的综合运用的能力和完整性，培养学生的审美能力和设计能力，培养学生的开拓思维能力。
五、作品评价感受收获
教师：同学们的作品都很漂亮，哪个小组愿意把你们的作品和大家一起分享呢?
(利用多媒体教学广播系统展示学生作品。)
看到这副作品，你觉得怎么样?
学生：欣赏并互相评价作品的优缺点。
教师：这节课你有哪些收获呢?进行“自我学习评价”每做好一项得一颗星星。
出示幻灯片：★我能够顺利地在网页中插入图片吗?
★我能够改变网页中图片的大小和位置吗?
★我能够给网页设置背景图片和背景色吗?
★我增长了一些环保知识吗?
★我对创作的网页满意吗?
★本节课我很有成就感吗?
学生：学生自己评价本节课学会了什么?
教师：统计学生学习成果。
学生：汇报学习成果。
教学意图：通过学生间的互评，可以取长补短，培养学生的审美能力。
学生的自我评价，可以让学生了解对知识的掌握情况。让学生体验成功的喜悦。教师的统计，可以掌握学生本节课的学习成果如何。
六、情感升华提出希望
教师结束语：地球是我们生活的家园。为了我们子孙后代能有一片纯净的生活空间，希望同学们，行动起来，爱护环境。从自我做起，以实际行动保护我们唯一的地球家园。
学生：情感教育。
教学意图：通过对学生进行“环保”的教育，可以升华学生的情感。
作者：朱琳琳
图片网页设计论文 篇2：
一个焦点图片浏览网页的设计
引言：同学们在学习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 贵州 本科 高校讲师 主要研究 前台网页设计
作者：张树才
图片网页设计论文 篇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.
作者：覃秋密,韦永军,蒋家斌