网页设计中教你如何选择图片格式

第一篇：网页设计中教你如何选择图片格式

网页设计中教你如何选择图片格式

深蓝网络http:///：

在网站建设中图像格式很有多种，但是大多数浏览器只能显示其中的一部分，最常用的格式是GIF、JPG和PNG格式，大多数网页设计人员都是采用这些格式。

这些图像格式的差异体现在以下那几个方面：

1、色彩深度：色彩深度越高(即，用于描述每个像素颜色的比较位数越多)，照片看起来就越真实。而绘画的时候就不存在所谓色彩深度的问题。真彩色的比较位数是24位，超出的比较位数通常用于进一步定义色彩(并不一定是为了网页浏览的需要)，或是设定特殊的图像属性，比如说透明度。

2、文件尺寸和压缩：图像文件的尺寸一般比较大，人们提出了各种压缩图像文件大小的方法。无损压缩(lossless compression)使文件变小而不损失图像的显示质量；有损压缩(lossy compression)缩减了图像文件的尺寸同时使图像质量受损。但是在计算机屏幕上显示图像时，这两种压缩方法显现的结果看起来差别很小。

3、动画：有些图像格式支持非常初级的动画，它们将不同变化的图像储存在一个单独的文件里面，让网页按照顺序循环显示这些图像。通常，网页中的那些简单动画都采用这种动画方式，而不是审批片段。

4、透明度：有些图像格式能够让图像的背景变为透明。在文档中放置图像时，文档的背景颜色会通过图像的透明度部分显示出来。你可以利用这一点创造出有趣的视觉效果。例如，当你放置具有透明背景在一个包含字符文本的文档中时，这些字符文本就会呈现出环绕图像的效果。你可以利用Photoshop或你能找到的其他图像编辑软件，观察不同的透明度所具有的效果。

文章原创，禁止转载，转载请注明出处

第二篇：在网页中插入图片教学设计

《在网页中插入图片》教学设计

执教：熊

恒

教学目标： 知识与技能：

会打开上次的网页；了解图片在网页中的作用；学会在网页中插入图片的方法。

过程与方法：

通过独立探究和小组探究的方法基本掌握在网页中插入图片。

情感态度与价值观：

培养学生的审美能力，形成与同学和谐相处、共同进步的精神。明白帮助他人的目的就是美化我们的心灵。

教学重难点：

重

点：了解图片在网页中的作用 难

点：能在网页中插入图片

教学时间：一课时

教学过程：

一、导入新课：

同学们，上节课我们学会了制作只有文字的网页。可是“咪咪豆网屋”的主页还有可爱的胖胖熊图片呢！它是怎么进来的？对于这个问题，我们来进行具体的研究。

揭示课题：在网页中插入图片

二、探究新知 任务一：了解图片在网页中的作用。

（1）、教师出示只有文字和带有图片的两个网页，提问：这两个网页哪一个好看呢？

（2）、引导学生观察，并说出为什么？指定学生回答（有图片的那一个）

（3）、小结：网页中的图片可以使网页更加美观漂亮。任务二：打开主页文件咪咪豆网屋index.htm（1）、师生复习启动frontpage 软件。（它是微软公司推出的一款优秀的网页制作软件）

（2）、学生试着打开主页文件咪咪豆网屋index.htm，老师巡视并校正。

操作步骤：网页制作软件——单击文件——打开文件——我的文档，找到主页文件咪咪豆网屋index.htm——再打开。

（3）、学生操作。

任务三：把“胖胖熊”请进来

（1）师生复习在word 中插入图片的方法，指名学生回答。教师小结：方法一：①、复制——粘贴；②、方法二：菜单——插入——图片——来自文件——选择图片单击插入。

（2）学生练习图片的插入，（3）学生探究把胖胖熊请进“咪咪豆网屋”主页中的的方法。

教师提问：能否把在word中插入图片的方法运用在frontpage 软件中呢？（指名学生回答：可以）学生动手操作：教师巡视，对不正确的地方进行校正。教师小结：

我们可以这样把胖胖熊请进“咪咪豆网屋”主页。操作步骤：

① 把光标移到第二行“咪咪豆网屋”的左边；

② 单击“插入”菜单；

③ 选图片来自文件→选C：“网页制作”文件夹→找到“胖胖熊1.gif” 文件并单击→单击“确定”。

（3）、学生操作，教师巡视指导

（4）、要求学生用同样的方法把胖胖熊放到“咪咪豆网屋”的右边。

任务四：保存网页

同学们，我们成功把胖胖熊请进“咪咪豆网屋”主页中，现在，我们要做的就把今天的作品保存起来！

学生试着保存：单击文件菜单——保存文件。

四、教师小结：今天同学们通过努力，基本掌握了在网页中插入和美化图片的方法，我们插入网页的目的是美化网页，帮助他人的目的是美化我们的心灵。

第三篇：教你学做网页设计大师

笔者曾经是一个网页设计的菜鸟，经过自己不断的摸索和实践，现在已经可以独立制作一个完整的静态站点，并且给学校的N?(N>5)?个部门、院系和外面的公司做网站，虽然不是一个完全意义上的Web Designer（网页设计师），但是完成一些不专业的要求，是可以的。所以自封为准Web Designer！循序渐进学知识先学一学HTML，找本自己能看懂的教材，浏览为主，不用记住所有的概念，只要记住使用原理就行了，这一阶段，估计三天就够了；然后用两天时间学CSS，方法同上；进而再花些时间了解一下JavaScript。然后就可以用记事本尝试写几个网页，记住这时千万不要用那些可视化工具，比如FrontPage、Dreamweaver（那些以后再学）。有一个提高自己“写网页”的捷径，就是上各大网站，把网页保存下来（什么？你说你不会保存网页？就是“文件→另存为”），然后打开保存下来的网页，点击右键→查看源文件，看看人家的网页是怎么写的，然后模仿他们的写法，不断规范自己的代码。接下来该学一下Fireworks了。建议一开始就到网上找些实例教程，这些实例教程一般都介绍得很详细，跟着它一步一步做下来，每学会一个实例就掌握了几项操作，而且也有了自己的作品，很有成就感的，长期积累下来对自己的提高很有帮助。这时还可以结合Dreamweaver进行学习，你就可以体会到Dreamweaver和Fireworks的无缝集成了。要是想让你的网页多一些炫目的效果，建议你学一下Flash，难度并不大，而且要是前面的JavaScript基础打得好的话，学到Flash中ActionScript时，就会简单很多。到这时，相信你就可以真正领会到“网页三剑客”的威力了。在实践中不断提高要是每天能拿出两个小时来学习，完成以上这些学习估计只要20天就差不多了。要是天赋高的话，那需要的时间就更少了。接下来该实习了，找个地方锻炼一下自己，比如可以去一些公司干干兼职，或是给自己的单位设计一下主页等。最好是能进入一个正规的开发团队，你就会学会如何以团队合作的方式开发网站，特别是怎样和程序组合作，把页面与后台程序数据库配合起来。我特别感谢我们学校的学生在线网站给了我一个机会。有一天正赶上应聘，我拿着自己做的两个Flash作品就去了，没想到面试还通过了，于是我就这样有了在专业开发团队中实践的机会，通过自己的不断努力以及向高手的不断提问，水平飞快提高，两三个月后，就可以独立完成一些站点了，当然只是静态的。到此，你就基本可以称作是一个“准Web Designer”了，不过要从根本上提高自己，最好去学学美术，这是当一个网页设计师的基本功。

第四篇：信息技术《在网页文档中添加图片》说课稿

2011春季学期公开课说课稿

《在网页文档中添加图片》说课稿

阳山中学 冯世良

尊敬的各位老师：

大家好！今天我说课的题目是《在网页文档中添加图片》，它是粤教版的选修三《网络技术应用基础》中使用Dreamweaver制作网页的内容，教学的对象为高二级学生。本节课我将从以下八个方面加以说明：

一、说教材

（一）教材分析

本教材贯彻“以学生为主体，教师为主导”的方针，把提高学生的积极性，培养学生的创新能力作为教育的根本目标。本课所学的是“在网页文档中添加图片”，是网页页面美化的重点知识之一，是图片在网页上的应用、延伸和拓展。通过本课学习，使同学们了解到Dreamweaver作为一个优秀的网页制作软件，在网页上使用的元素里面除了文字外还可以插入图片、动画等等。学习Dreamweaver的灵活应用，是对学生掌握制作网页的能力训练与提高，激发学生自主创作出更加优秀的作品。

（二）教学目标分析

教师应特别注重培养学生如何获取信息、处理信息和应用信息的能力。在新课程理念指导下，我根据本节课教学内容制定了知识与技能、过程与方法以及情感态度价值观三个方面的教学目标。

1、知识与技能

（1）学生通过使用Dreamweaver在网页上插入图片操作练习，让学生熟悉在网页上使用图片的各种方法；

（2）通过练习操作调整图片、编辑图片，使学生熟练掌握在Dreamweaver中调整图片、编辑图片的技巧。

2、过程与方法

（1）通过教师引导，学生动脑思考、交流与实践操作的学习过程，体验和感悟探究的一般过程；

（2）学生通过自主、合作、探究学习的方式，提高获取信息、处理信息和应用信息的能力。

2011春季学期公开课说课稿

3、情感态度价值观

通过设计“美丽的九寨沟”这一页面，学习在网页文档中插入图片，提高自己的操作能力，激发学生学习计算机的兴趣，鼓励和培养学生自主创新的情感。

（三）教学重、难点分析

这节课的教学内容是在网页文档中插入图片，因此让学生掌握插入图片的方法是本节课的重点。对图片的调整和编辑的操作中学生容易出错，掌握起来还有一定的难度，因此我把图片的调整与编辑作为本节课的难点。

重点：通过本节课学习，熟练使用Dreamweaver在网页文档中插入图片的方法。

难点：学生通过交流与实践操作，熟悉插入图片的方法，掌握对图片的调整和编辑的技巧。

二、说教法

根据教学内容，本课采用的主要教学方法有“创设情境法”、“任务驱动法”、“自主探究法”、“分层教学法”。

信息技术教学大纲中明确指出：知识及技能的传授应以完成典型“任务”为主。为此在授课时，我先通过展示九寨沟美丽的风景图片，激发学生的兴趣，引出本节的主题任务——为九寨沟制作宣传网页，在完成这个主题任务过程中，再给出一个个小任务，让学生运用已学知识，自已动手，自主探究，以任务的方式再次激发学生兴趣，使教学内容合理流动。

三、说学法

在这节课中学生主要用到的学法是：接受任务——思考讨论——尝试操作——自主创造——作品展示。学生在完成每个任务的过程中，总是从思考讨论完成任务的办法开始，在对讨论的结果进行探究验证的基础上，完成任务，最后通过作品展示，让学生更多地体验一种成就感，进一步激发他们强烈的创造欲望。

四、说教学准备

1、带多媒体教学系统的网络教室；

2、多媒体教学课件；

3、学生预先分组，并选一个计算机水平较好，又比较负责任的学生担当小组长；

2011春季学期公开课说课稿

4、将九寨沟相关资料及图片存放在学生机上。

五、说教学过程

根据本课教学内容以及信息技术课程学科特点，结合高二级学生的实际认知水平，我设计了如下四个教学环节：

（一）情境激趣，引出主题

（二）任务驱动，自主探究

（三）实践运用，提高发展

（四）展示评价，归纳总结 第一环节：情景激趣，引出主题

首先，我展示九寨沟风景图片，同学们一定会被眼前美丽的风景所打动。此时，问道：多么美丽的风景啊，你们想不想让外面更多的人了解美丽的九寨沟，让更多的人到九寨沟旅游观光呢？那么，今天我就让大家当一回设计师，用我们所学的Dreamweaver软件为九寨沟的旅游事业设计一个网页，让更多的人来了解九寨沟！好不好？

同学们的激情一下了被调动起来，使新知识的学习成了学生内心的需要，从而使这节课有了一个良好的开端。

第二环节：任务驱动，自主探究

同学们的激情被调动起来后，个个跃跃欲试，紧接着有一些同学会由喜悦转为疑惑：怎样为九寨沟作宣传呢？

这时，打开两个文档：看，这是老师为九寨沟设计的两份宣传页面，你们觉得哪份宣传效果更加形象生动，更能起到很好的宣传效果呢？

学生的回答肯定是带图片的那份，我趁热打铁提出第一个任务。任务一：同学们先自已动手试一试，如何在网页中插入图片？

任务提出后，同学们思考讨论，然后我提示学生插入图片要使用插入菜单，让学生自已动手实践，看看谁最先找到插入图片的方法，这样意在培养学生主动探索的学习习惯。

在动手实践过程中，学生的水平不一，有些同学不仅很快就找到了插入图片的方法，还找到了其他插入图片的方法。但是，也有少数学生找不到，这时，我

2011春季学期公开课说课稿

请已学会的学生担任小老师，指导其他同学，并鼓励学生走上讲台为大家分别演示插入图片的方法，给学生提供一个展示才能的机会。

然后，我利用事先做好的课件，演示操作步骤，归纳操作方法。这样做，既突出了本节课的重点，又强化了学生对重点知识的掌握。

通过学生的演示，教师的归纳，学生们都能将图片插入到网页。紧接着我找出几份具有代表性的学生作品，利用多媒体网络教室广播软件进行展示，我首先对这些作品给予充分肯定的同时，请同学们议一议如何使这些作品更加完美，同学们畅所欲言，对于学生们提出的建议，我归纳成3个有待解决的问题：

问题1：如何改变图片的大小？ 问题2：如何移动图片的位置？

问题3：如何调整图片和文字之间的位置关系？

这3个问题转变成为3个新的任务摆在了学生们的面前，我让学生根据自已能力的高低选择1个或多个任务进行探究，并尝试操作。这样采用分层教学的方法，既让能力高的学生充分展示自已的才华，也能让能力较低的学生品尝到成功的喜悦，使得全体学生都得到最大程度的发展。

同学们在操作前，我这样提示大家：如果遇到解决不了的问题，可通过教材的阅读或网络搜索解决方法的方式来完成。

教师巡回指导，对于个别学生遇到的问题，可以让小组中会操作的学生传授方法，开展合作学习。对于大部分同学都解决不了的问题，则进行启发引导。

然后选几位学生将屏幕上的几幅作品进行完善，最后教师进行归纳总结，并对操作过程中容易出现的问题进一步强调。通过生生互动，师生互动，突破了对图片进行调整编辑这个难点。

在这一环节，同学们在任务的驱动下，自主探究，动手实践，解决了问题，学生的角色从“让我学”变成“我要学”，学习的兴趣在不断提高，好奇心也随之得到满足。动手实践的得与失，不再是作品的好坏，而是“自主学习”的成功体验。

第三个环节：实践运用，提高发展

在学生掌握新知后，我设计了一个以小组为单位来为九寨沟设计一宣传网站的比赛，在制定比赛规则后，给学生留下自由发挥的空间，鼓励学生自主创造，2011春季学期公开课说课稿

充分发挥自已的灵感和特长，以小组合作的形式，让学生体验团结协作的力量，以比赛的方式，使学生的兴奋点再次激起高潮，不知不觉中使知识得到了巩固。

第四个环节：展示评价，归纳总结

在这个环节里，利作多媒体网络教室的优势，将小组中的优秀作品传送到教师机，我利用广播教学让学生欣赏。学生在欣赏的过程中，既可以相互学习，交流心得，锻炼口头表达能力和评价能力，又可以使学生获得成功的兴奋，被认可的满足，品尝到学习的快乐。

六、布置作业

在我结束本节课的教学活动时，我将请同学们对这节课谈谈自已的收获，目的在于让同学人回顾教学过程，对知识进行系统化的梳理，加深对本课重难点的理解。最后，我会说：今天大家已经成功地为网页添加图片，但是网页还不够完美，比如动态元素的使用，背景的设置等，这些知识我们将在下节课继续学习。然后，布置作业：预习在网页文档中设置动态元素的方法，并尝试着操作练习，这样给学生造成学习的期待心理，激发他们下阶段的学习热情。

七、评价分析

本节课以任务为主线，有意识地留给学生适度的思维空间，使传授知识与培养能力容为一体。鼓励学生大胆上台演示，让学生暴露思维过程，教师将从多方面给予评价，同时，通过作品展示，让学生自评，互评，从而体现评价主体的多元化，评价方式的多样化。

八、板书设计（略）

我的说课到此结束，敬请各位评委老师指正，谢谢！

第五篇：教你怎么制作个人网页

教你怎么制作个人网页

从这儿开始

如果你对于个人网页很陌生，不知道该从哪里开始着手去做，那么就请按照下面所说的去做，你不需要具备网站建设知识，甚至不需要了解或使用任何编码，就能够创建属于你自己的个人网页。

把你的站点发布到网上

简易的站点主机——网上有一些免费的网络主机服务，它们能为你提供一种简单的方式，使你利用在线的简单的设计编辑器或使用模板来制作一个个人网站。你所要做的全部内容就是撰写你的网页内容，而不需要编码。

博客主机——如果你想要创建一个博客，那么有一些站点是你应该考虑的。它们很容易学会，也不需要任何技术性的知识。

除了网页和博客以外

档案站点——像MySpace这样的网站，可以让你创建一个在线的个人空间，你可以在这个空间内和互联网上的其它人进行交流。

你可以添加几张照片，告诉别人关于你自己的事情。

在线相簿——把你的数码相片放到网上，创建你自己的个人在线相簿。

Wiki——另一种形式的网站。Wiki是一个既允许你，也允许你的访客更新你的站点的网站。你来选择主题，他们帮你写内容。

制作在线网页 网站制作程序——当你想要制作你的网站的时候，你可以使用一个与你的网络主机服务一起供给的在线编辑器，或者你可以买一个你自己的程序来在你的电脑上设计网页。如果你想要创建属于自己的网页，那么互联网上有许多这样的程序可供选择。

上传网页——如果你决定在你的电脑上制作而不是在线制作你的网页的话，那么，在完成制作后你需要使用某种方法把你的网页上传到你的网络主机服务器上去。许多主机服务提供给你了这样的程序，来帮你实现这一点，但是有的却没有。如果你的主机服务提供商没有给你提供这种程序的话，你会需要一个这样的程序。

图形

所有关于添加图形的事情——这里有你所需要知道的如何开始向网页中添加图形的全部内容。了解如何链接到你的图形，如何把它们从网络上下载下来，如何从你的网站上把它们上传上去以及其它。

免费在线剪辑艺术——你可以在你的个人网站上免费使用的图形。下载这些图形，把它们添加到你的网页上，来营造一个更加个性化的网站外观。

模板和娱乐

复制/粘贴模板——如果你想让你的网页看上去是某一样子的你可以利用模板来设计它。拷贝下代码，把它粘贴到你的HTML编辑器中。然后在空白处填上你自己的个人网页上想要的内容。

添加在线挂件/附件——如果你想要在你的网站上添加些有趣的东西，试试这些。天气预报，游戏，占星，地图等许多东西你都可以尝试下。