网页设计论文模板(10篇)

导言：作为写作爱好者，不可错过为您精心挑选的10篇网页设计论文，它们将为您的写作提供全新的视角，我们衷心期待您的阅读，并希望这些内容能为您提供灵感和参考。

篇1

二、网页设计不应打破惯例

前面已经提到，网页是一个要求即看即用的特殊“产品”，也就是一看我们就要知道如何使用。我们虽然使用了若干手机，但我们购买了一款新的手机时，我们还是得阅读说明书后才能正常使用，网页确不需要。那如何才能达到即看即用呢？使用惯例就是最好的武器，这也是提高所有产品易用性的重要法宝。惯例就是我们已经习惯了的东西，我们一看就知道它的意思，就知道怎么去操作，因为惯例是我们日常生活中积累起来的，已经存入大脑的固有知识。唐纳德•A•诺曼在《设计心理学》中将知识分为了存储于外部的知识和存储于头脑内部的知识，使用存储于外部的知识不需要学习，但效率低；使用头脑内部的知识需要专门学习，但效率高。而惯例是已经存储在头脑内部的知识，具有外部知识的高易用性和头脑内部知识的高效率。在网页设计中有很多惯例是不能轻易去打破的，一是重要导航在页面的位置，按照惯例一般布置在页面的上部、左上部或右上部，首页的链接放置在最前面；二是网站的标识放置在页面的左上部，浏览者用其来判别是否到达了目标网站；三是文字链接要加下划线（也可以鼠标放上去才出现），浏览者用其来判断是否有超级链接；四是常用标识符号，如在多页文档中，代表向上翻页，代表向下翻页；在视频、音频播放中■代表停止，代表暂停，代表播放。这些标识符号在网页中已经具有特定的意义，是不能随意改变的。

三、设计层面之间的逻辑联系

在《用户体验的要素——以用户为中心的Web设计》一书中论述了网页设计的五个层面，包括战略层、范围层、结构层、框架层和表现层，并确定了自下而上的建设流程，规定了设计的程序。自下而上的各个层面，从抽象逐渐变成具体，并且包含着密切的逻辑联系。战略层确定的网站目标和用户需求，是整个网站设计的基石，其决定范围层的内容选择和功能设计；结构层是对范围层选择的内容进行分类和组织，形成信息架构，以及对确定的功能进行交互设计，确定交互的过程和交互行为；框架层是在结构层信息架构的基础上，根据完成任务的需要，利用超级链接设置来完成导航设计，以及规划信息架构在页面空间中的位置关系，形成布局框架；表现层是对框架层进行具体的视觉表现，包括图形设计、色彩设计、信息图表设计、动画设计、视频设计等。从上面的分析可以看出，下一层是上一层的设计依据或设计对象，上一层是下一层的进一步深化和具体，相邻层之间紧密联系，既不能交换，也不能跨越，更不能缺少，具有严格的秩序，形成了完整的逻辑链条，理性思维贯穿在整个设计过程之中。

篇2

1.讨论网站的主题。

网站整体规划是做网页的第一步也是制作网页最关键的一步它决定了你要表答的信息，因此我选择了我选择我最喜爱的服饰来为它做网页。在平时我也对服装的网页比较关心，无论是淘宝网上的衣店还是各种品牌装。这次我是为“易菲”服饰做的网页。

2.定位网站的CI形象。“易菲”植根中国文化之精髓，汲取自然禀赋之灵性，形成一个既有浓厚文化底蕴，又有现代自然人文气息的特色品牌。“易”即是容，是包容，是宽容，是五千年中华民族的文化精髓，是厚德载物，是对人性宽度的一种拓展。“菲”通非，是生机、是个性、是春意盎然、是自强不息，是对人性深度的一种挖掘。“生活如花，自在快乐”是YIFINI易菲的设计理念，倡导一种与自然和谐相处，如花儿绽放般美好舒适、自在快乐的生活方式。这也便是我网站的CI形象。

3.确定栏目和板块。

于时间的关系在本次我准备做四张网页：一张主页三张二级页面。分别设计了“时尚首页、时尚衣秀、推荐产品、潮流信息”等四个栏目。在这四张页面中我打算都用淡蓝色做背景颜色来映衬我网页的主打色绿色。

2.网站的整体风格和创意。

整个网站的创意就在于颜色的搭配，与各种图片的搭配，它们相互辉映，相互衬托。以便达到表现其品牌的和谐之美、自然之美。我踩用淡蓝色和绿色为我网站的主打色主要是因为我的产品特性。在设计上，YIEINI易菲推崇“自然美”，将带表女性气质的花卉和自然元素融入设计之中，充分体现设计师和顾客所追求的一种洒脱、舒适的生活氛围，力求表现悠闲、舒畅、自然的生活情趣。因此我用天空与自然的颜色来表达这张自然之美、和谐之美。

二、网页制作的前期策划与准备，在本阶级主要有两方面的工作。

1.资料的搜集。

在做网页我上网收集了许多方面的资料主要是有关网站的布局与服饰品牌方面的资料，我首先进它的企业网站找了一些关于“易菲”服饰的图片主要是一些代言形象还有代表其企业形象的图片。其次我去浏览了许多的网页观察其网页的布局、颜色搭配、栏目、板块等方面的内容，同时也搜集了一些对我有用的资料。在搜索资料最困难的便是动态图片的搜集，动态图片其gif格式的还是好保存，但是要搜集flash动态图片就相对较难了。我用了一天的时间来搜集我的flash都不太成功，不过还搜到了可以换自己图片的代码。在开始时我根本就不知道flash是怎样搜索，不过经过三次像老实询问我终于懂得一些关于代码的搜索。在搜集资料的过程之中我发现了自己的许多不足之处，最关键就是平时对知识的掌握不够，连最基本的资料搜寻都觉得困难。也是我平时不够认真和努力的表现。通过这次的教训在以后我一定会做得更好，争取不范类似错误。

2.熟悉制作软件。

做网页主要用的工具便是Dremweaver、Photoshop、Flash软件。在这些软件我对Dremweaver、Photoshop相对比较熟悉，因为在平时上课是老师带领我们运用过。所以我还可以正常的运用，但是出现的问题还是有很多。有很多不懂如何操作，只有通过在次去看书才能够了解，这也体现了我学习方面的缺点，它是我平时不够认真的具体表现。

三、网页制作，这便进入我该次的主题了具体制作流程如下。

1.构建站点框架。

在我打开Dremweaver后第一步便是新建站点，我把我的站点建立在F\仪下面。并将我搜集的全部资料都保存在其文件夹中，以便网页制作时可以方便的使用。

2.设计主页及二级页面。

在主页我设首页制作时，时刻考虑着网页的基本原则：统一，连贯，分割，对比及和谐的原则，内容统一，都是为了主题服务，美容美体，一个网站强调的就是一个整体，只有围绕一个统一的目标所做的设计才是成功的；连贯，页面之间关系连贯，统成一体；每版内容都自成一体，颜色各异，便于浏览；整个网页有动有静，色彩呼应，搭配协调，不呆板，富有生气；颜色各异，但又不同之中又相同，浑然一体。而且制作过程中，不忘以下原则：

简洁实用：这是非常重要的，网络特殊环境下，尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，所以要去掉所有的冗余的东西。使用方便：同第一个是相一致的，满足使用者的要求，网页做得越适合使用，就越显示出其功能美；页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，是网页富有可欣赏性，提高档次。当然雅俗共赏是人人都追求的。

交互式强：发挥网络的优势，是每个使用者都参与到其中来，这样的设计才能算成功的设计。这样的网页才算真正的美的设计。每个子页都设有上导航栏，便于浏览和跳转。3个二级网页制作时，使用的是表格，每一个页面都用表格为它布局好，然后在插入图片文字及其他，这样有一定的规划性，体现了连贯统一性，不同的内容根据各自的特色建立了不同的表格，突出各自的主题，增强了对比性。在做这些网页的时候我就进行了如上所述的方法。但我所以网页的背景颜色及主题颜色都是相同的以便突出我每一个网页都是为凸显我主题而服务。

3.实现网页间的链接。

我的链接按钮主要有四个“时尚首页、时尚衣秀、推荐产品、潮流信息”它分别链接到我所做的四个网页。链接的过程其实很简单，主要是把要链接的文字选择在选择工具栏的链接按钮最后选择自己要链接的网页单击确定便可以了。

4.向静太网页插入动态效果。

篇3

1.1案例教学法案

例教学法是一种具有启发性、实践性,能开发学生思维能力,提高学生判断能力、决策能力和综合素质的新型教学方——“分析案例”——“制作案例”的过程，培养学生分析问题，解决问题的能力，达到学习知识技能，灵活应用的目的。例如，在讲解ASP中的Request对象时,教师先展示一个表单提交的案例，然后引领学生分析我们在点击提交按钮后，如何在另外一个页面中，得到提交页面相应的属性值呢？学生在老师的启发下动脑思考，引出Request对象的作用，接着教师讲授Request对象的各种方法的使用。学生在深入理解后，运用知识制作此案例。

1.2任务驱动法

任务驱动法在课堂教学中，教师为学生布置上机操作任务，通过实际任务展开教学。学生通过亲自动手操作，主动建构探究，培养了学生创新精神和实践能力，提高了学生的综合运用知识的能力。例如在学习表单制作时，以现实生活中注册电子邮件为例，提出表单的概念，然后讲解其实现理论，接着布置实际任务——投票系统，让学生用知识去解决任务，进一步加深理解知识。

1.3分层教学法

成人的学习能力差异大，存在个体差异，因此，教学中采用分层教学法。在实际教学中，教师根据学生现有的知识、能力水平和潜力倾向把学生科学地分成水平各自相近的几组，如A、B、C三组，A组是按大纲基本要求进行教学的学生；B组是按略高于基本要求进行教学的学生；C组是按较高要求（能发挥学生数学特长）进行教学的学生。学生分组不是固定的，而是随着学习情况及时调整。每组布置知识程度不同的学习任务，并且在教师恰当的指导下，让全体学生从各自的层面体验成功的愉悦。

2模拟化网络教学

开放教育是传统教育与网络教学相互融合的产物。网络教学以其独特的魅力在开放教育中发挥着越来越重要的作用。学习已经不再局限于课堂，学生只要有上网条件，无论何时何地，都可以方便的学习，打破了时间和空间的限制，因此，网上资源的好坏直接影响学生的学习效果。因此，笔者充分利用网络资源，以教学大纲为依据，遵循厚基础、重能力的原则，开发了此门课的模拟化网络教学系统。此系统有“教学大纲”、“课程教案”、“模拟实验”、“经典案例”、“自我测试”、“课程讨论”等栏目。分层次，多模块，手段直观、丰富有趣的一系列实验教学单元。制作文字、图像、声音、动画于一体的丰富多彩的模拟实验教学内容。模拟实验教学的指导效率更高。使理论教学与实验教学、基础与前沿、经典与现代、实验内容与实际应用有机结合，更有利于学生学习，并且可以反复阅读，是面授课堂一种好的补充与强化手段。

3多样化互动教学

3.1课堂互动

成人有丰富的社会阅历和人生体验,有更为强烈的对话意识和平等意识，因此,师生活动主要体现在，放下身段，深入到学生们之中，和他们们交朋友，交流心得，平等对话，互相学习。鼓励学生大胆地表达自己的想法，畅所欲言，和学生共去探索知识的世界。所谓生生互动，就是学生和学生之间可以互相讨论，交流心得。在实际操作中将学生分组，合作学习，这样促使小组成员积极参与，培养学生团结合作意识，集体荣誉感。人机互动是学习《动态网页设计》这门课必不可少的环节。只懂理论，不会应用，犹如纸上谈兵，完全失去了学习的意义。所以，课上学生必须上机实践，在实践中掌握知识，消化知识，融会贯通。

篇4

商业网站是企业向用户和网民提品和服务的一种方式,是企业开展电子商务的基础设施和信息平台，其网页页面由具体的文字（标题、广告语、单位名称、Email地址等）、企业标志、商标、产品图形、和信息菜单等内容组成，这些内容又常常表现为点线面、色彩、动静、主次等视觉因素，这些因素的不同使用都会影响读者的视觉习惯和心理变化。

本文将试析商业网页设计视觉因素的心理规律，揭示商业网页设计如何通过视觉心理因素更有效、更合理的表现与传达信息。展现企业形象、介绍产品和服务、体现企业发展战略。

一、商业网页设计中点、线、面视觉心理因素的运用

点、线、面是商业网页设计基本的视觉元素，是表现视觉形象的基本设计语言。从视觉角度看网页设计主要是如何经营好三者的关系，因为不管是任何视觉形象或者版式构成，归结到底，都可以归纳为点、线和面。

1.网页设计造型要素中的点

商业网页设计中的点是构成网页的最基本单位，是指页面中具备点的视觉特点、体积较小的物象。相对于整体背景而言一个单独的点是相比较而言的；是有大小、形状和体积的。点的大小、形态、位置不同，所产生的视觉效果、心理作用也不同。一个网页往往需要有数量不等，形状各异的点来构成，可以是具体产品、商品标志等，也可以是感觉上的点。例如，天空中的飞鸟、沙滩上的脚印、花瓣上的蜜蜂等，在其周围背景衬托下，都给人以“点”的视觉心理感受。

点在设计中即可以起一种稳定造型的作用，亦可起到活泼生动、吸引视觉中心的作用，使用得当，甚至可以画龙点睛；点的形状、方向、大小、位置、聚集与发散，还能够给人带来不同的心理感受。

(1)单点的应用：点在人们的视觉中具有很强的吸引作用，如：点（商品）设计在网页的上方或左右位置，则给人不稳定感和相对的动感。

(2)多点的应用：两点（二商品）之间会产生心理连线的感觉，多点时则会出现不同排列，顺序的虚拟的面或形体。

2.网页设计造型要素中的线

点的延伸形成线。线在页面中的作用在于表示方向、位置、长短、宽度、形状、质量和情绪。线是分割页面的主要元素之一，是决定页面现象的基本要素。商业网页设计视觉因素中的线主要指文字的行线，商品图形、图象的轮廊线，各种装饰线。线的形态主要有直线和曲线两大类：

(1)直线给人一种紧张、锐利、简洁、刚直感，从心理或生理感觉来看具有男性特点。直线又有：细直线，给人纤细、敏锐的心理感觉；粗直线，给人豪爽、拙朴、厚重的感觉；垂直线，给人一种挺拔、庄严感；水平直线则给人方向感和强烈的动感。

(2)曲线表现出一种动态，活泼，轻快的意味，显示了女性美的特征，商业网页设计中运用文字行、图象轮廊线或装饰线的造型，创造一种女性化的审美感。自由曲线是最好的情感抒发手段。打破了水平线组成的庄严和单调，给商业网页增加了丰富、流畅、活泼的气氛。水平线和自由曲线的组合运用，形成新颖的形式和不同情感的对比。

3.网页设计造型要素中的面

线的推移形成面。面是无数点和线的组合。面具有一定的面积和质量，占据空间的位置更多，因而相比点和线来说视觉冲击力更大更强烈。面在网页设计中通常指各种图形、色块的形状设计，不同形状的面具有自己鲜明的个性和情感特征，能给人不同的心理感受，如方形的面具有沉着，稳重，厚实，坚强的男性特征；三角形、梯形面常给人一种稳定、端正之感；但如果将它们倒过来设计，则给人一种轻、不稳定的感觉。圆形充实、圆满、活泼的感觉，比较适合表现儿童产品或者女性用品。菱形或不规则形体则给人一种活泼、轻快之感。

在商业网页的视觉构成中，点、线、面既是最基本的造型元素，又是最重要的表现手段。在确定商业网页主体形象的位置、动态时，点线面将是需要最先考虑的因素。必须熟练掌握设计语言。要善于根据商业特性采用不同的组合去体现不同的情感诉求，达到推销、销售商品和服务的作用。只有合理的安排好点线面的互相关系，才能设计出具有最佳视觉效果的页面，充分的表达出商业网页最终的诉求！二、商业网页设计中色彩视觉心理因素的运用

商业网页设计中色彩是确立网站风格的灵魂。色彩能产生强烈的视觉效果，使页面更加生动。色彩设计的好坏直接影响阅读者的观赏兴趣与心理变化。因此，地位十分重要。商业网页的色彩设计应从以下几个方面把握和利用其心理特征：

首先，整个页面要确定一个主色调，其有利于体现网站主题。每一种色彩都具有它自身的性格，如：彩度高，明度高的色彩常给人一种华丽感，相反彩度低，低明度的色彩则给人一种朴实感。暖色系、高明度的色彩能给人一种面积大的前进感。冷色系、低明度的色彩则能给人一种面积小的后退感。每个人群对色彩的喜好也有所不同，如男性较喜欢冷色，女性则偏好暖色或高明度、高彩度的色彩，儿童喜好纯色，讨厌浊色，老人则偏好浊色，中年人或文化层次较高的人偏好冷灰色等。因此在设计中要考虑主要读者群的背景和构成以及如何与商品的属性相呼应。

其次，在主色调下的色调搭配。若页面空间整体、色彩和谐统一，则给人一种幽雅、宁静感；若以对比手法处理，图形文字色彩明快突出于背景色，则页面空间氛围会显得活跃而有生气。但是，要注意不能有强烈的色彩对比，因为过于丰富的背景色彩会影响前景商品图片和文字的取色，使文字溶于背景中，不易辨识。所以背景一般应以单纯为宜。

最后，作为设计师在考虑网页设计时，还应考虑到时代流行性色和企业标准色的问题。所谓流行色，是指在一定范围内和时间内，非常盛行并易为人们接受的某些式样或颜色。而标准色的运用在网上扩大了品牌效应，也是对公司整体形象的统一应用，从而构成了企业识别系统（CIS）的重要部分。

三、商业网页设计中动、静的视觉心理因素的运用

商业网页设计构成要素可分为两种状态：静态与动态。静态要素设计具体指静止的商品图形、文字、按纽等；动态要素，具体指动态按纽、按纽连接、网页动画和视频等，它们是丰富、生动网页、张显个性、突出主题重要手段。

动静以及不同的动静组合都可以反映不同的心理与性格，如，动大体上给人活泼、生动的印象，但极慢的动常给人忧虑感；迅速或突然的动常给人焦虑、惊慌感。另外，静也常给人宁静、沉闷两种感觉。

商业网页设计中要注意处理好动静的关系，要整体和谐统一，给人生动而不躁动或厌恶感。同时还要遵循动态性原则与交互性原则。

1.动态性原则，即要有四维空间或五维空间的运作观念。一件网页商品、图片不仅是二维的平面或三维的视觉，也要有时间与空间的变换，情感与思维认识的演变等多维因素。

2.交互性原则，即界面设计强调交互过程。一方面是物的信息传达，另一方面是人的接受与反馈，对任何物的信息都能动地认识与把握。

四、商业网页设计中视觉流程心理因素的运用

商业网页设计是通过视觉元素引起人注目而实现商品信息内容的传达，为了使网页获得最大的视觉传达功能，使网页真正成为可读强性而且新颖的媒体，必须适应人们视觉流程的心理和生理的特点。

视觉流程的形成是由人类的视觉特性所决定的。心理学家葛斯达认为：人们阅读时，版面的上部比下部的注目价值高，左侧比右侧的注目价值高。因此，版面的左上侧位置最为引人注目，因此，在网页设计中一些突出的商品信息，如主标题、每天更新的内容等通常都放在这个位置。以便于一开始就吸引受众的视线，诱导其由上到下，由左到右地移动。此位置也被称作视觉的最佳视域。也就是最优选的地方。当然视觉流程是一种感觉而非确切的数学公式，只要符合人们认识过程的心理顺序和思维发展的逻辑顺序，就可以更为灵活地运用。设计者可以利用视线移动规律，诱导读者的视线作左右流动、上下流动以及斜线的不稳定流动，通过编排设计，人为地产生最佳视域，突出主要商品，以达到一定的视觉效果，传递商品信息。

商业网页作为一种新的企业开展电子商务的基础设施和信息平台，它的发展虽然没有多长时间，却兼容了传统平面设计的特征，又具备其所没有的优势，成为今后商品信息交流的一个非常有影响的途径。其设计是一种综合性的设计，它所涉及的范围非常的广泛，包括消费者心理学、视觉设计美学、人机工程、哲学等诸多方面，而本文中只从视觉心理因素的角度进行了一些阐述与分析，仅作抛砖引玉之用。

参考文献:

[1]李彬彬:设计效果心理评价[M].北京:中国轻工出版社,2005.1

篇5

科技的发展，使视觉这门艺术不再仅仅局限于二维空间的发展，动画、视频等网页设计元素的运用，极大地丰富了网页的信息内容，这些元素成为网页设计中最生动、最活跃的因素，给受众带来试听方面的双重享受。动听的音乐，服饰的动态展示，给受众带来愉悦感的同时，像一种调剂一样平衡了视觉和心理上的感受，同时还留给了受众对服饰想象空间的延伸。在服饰网页设计中，通常用Flas的方式来展示服饰产品。当然，伴随着三维动画的运用，服饰网页的设计将会越来越科学和艺术。动画等视频艺术的运用，能够营造出受众者对服饰的一种情绪，一种感觉与情感。动画方式的服饰展示，不仅使人们的情感得到张扬，而且使人机对话的过程也变得更加生动有趣。其总的设计目标是营造出一种放松的气氛，使人们感到轻松、活泼与休闲，在阅读过程中，使受众者在视觉与心理上获取愉悦，产生消费的热情。

(2)整体色彩感。

网络媒体是一种非常特殊的媒体形式，通过光和色将要传递的信息展现在屏幕上，用于人们交流与沟通。因此，设计出符合人的心理与生理等要求的，合理的色彩搭配就显得尤为重要。在设置色彩的彩度及明度时要特别慎重，受众者的要求以及服饰品牌风格色调的和谐就需要得到综合全面地考虑。可以采用设置背景的方法，一来减少人们由于长时间注视亮背景所引起的神经疲劳以及心理上的厌烦感，二者烘托服饰风格，这样使网页的总体风格超越文字和图形的既定内涵，给受众者勾画出一个完整的审美意境。其次，还可以通过利用和谐的色彩搭配及色彩有规律的变化，营造视觉上的流动感，使受众者在获取信息的同时，也能够得到视觉和精神上的购物享受。

2服饰网页框架布局

网页的框架布局是网站视觉设计研究的重要环节之一，网页设计中把不同的设计要素进行有机整合，主要借助框架结构来完成。这种框架结构相当于普通页面的版式设计。常见的网页布局有层，还有表格定位的方式。在服饰网页设计中，通常两种定位方式同时采用，他们互相取长补短，相得益彰。由于服饰网站的特殊性质，受众浏览网站的目的、阅读信息的方式以及在站内逗留的时间的不同，在策划网页页面的编排创意时，采取“少则多”的设计原则，这样单个页面虽然容纳的信息量较少，但视觉表现力却比较集中。这种设计手法满足了受众者对服饰好奇、探求的欲望，为服饰网站的个性化风格营造了氛围;再者，人机对话的方式诱发了受众的活力与兴趣，增加了网络互动性，这样有利于消费者与设计师之间的沟通与交流。服饰网页页面编排时，还需要结合服装品牌的主题风格与素材，不断调整页面的均衡，在统一中寻求变化，获得秩序感，给受众者创造最佳的视觉效果，最终完成信息的传递。

篇6

1.1从编写代码到创建实际任务。传统的网页教学总是以编写HTML超文本标记语言、CSS层叠样式表文件、JavaScript为基础，通过Dreamweaver工具的拆分模式实现可视化的实际效果与基础理论的结合来展开。这样的教学方式与网页的实际应用联系较少。使得学生在学完网页之后难以解决具体的实际问题。采用任务驱动的教学方法，通过实际项目，引入真实情境，如玩具销售店、我的大学生活、学科资源网站等。让学们从单纯的学生角色转化为网站构建者，成为一个生产者。这样大大激发了学生的学习动力，并肩负责任感和成就感去学习。学生在构建实际网站过程中直接、频繁地接触计算思维的概念，如网页结构的搭建，样式美化的属性设置等，并不断提升系统性的思考能力和创意思维能力。构建网站时系统性的思考力是指学生需要在设计诸如导航条或链接中从设计网站、解决问题和理解用户需求的角度去“仔细思考用户与网站的互动方式以及根据意图实现功能的方式解决问题”[1]。构建网站中的创意思维是指学生可以把网页设计学习融入到创作具有实际意义和真实内容及富有个性的网站构建过程中，将学科学习与实际生活相统一。

1.2从独立开发到小组合作、组间协作。网页设计与网站开发的工作不是一个人独立完成的，而是需要团队的合作共同完成，当前的信息产业的工作都不是一个人独立能够完成的，而需要与他人合作完成。因此，独立思考和学习确实能促进学生知识掌握能力、而通过合作构建网站可以分解复杂任务。利用这种协作模式可以培养计算思维能力中除知识技能方面的其他方面——过程与方法、情感态度与价值观。

2考核评价

根据《网页设计与网站开发课程》的三维教学目标（知识技能、过程与方法、情感态度三方面）制定考核方法及评价标准。考核评价改变传统的单一的总结性评价的方法，采用平时的过程评价、阶段评价和综合评价相结合的评价方法。过程评价是指学生平时的学习过程，根据精心设计的学习情境对学生的学习过程进行记录和评分。这其中包括学生出勤情况、学习态度、单元情境的完成情况；阶段评价即是期中评价，通过期初时提出主题网站任务，学生在学习过程中着手规划、设计、实施并完成任务，在学期中期进行集中评价[2]，起到贯穿始终、承前启后的作用；期末考试采用上机考试，题型包括根据给定素材及代码截图拼出网页页面，根据给定模板和主题要求，在现有素材的基础上实现网站规划及网页设计。

篇7

首先，移动搜索具有可用性特点。移动设备可用性包括：界面可视性、导航、内容等。网页界面可用性表现为同一窗口中内容要精简，按内容的重要性排列显示；网页版面布局要方便用户更容易地接收信息等。其次，移动搜索具有可访问性特点。移动搜索用户与桌面搜索用户相比，对搜索结果的关注度更高。移动用户更多的是搜索能解决身边的问题，诸如餐饮、旅游、公交等，主要关注生活服务类、健康保健类、教育培训类这三类信息，因此移动SEO的需求主要是针对这些网站的搜索引擎优化。

2根据移动搜索特点的网页移动化策略网页移动化策略有两个

(1)响应式网页设计。

(2)搜索引擎开放适配服务，抓取移动资源。响应式网页设计(Responsivewebdesign)是一种网页设计的方法，该设计可使网站从桌面电脑显示器到移动设备上适合阅读和导航。响应式网页设计就是能够用一套样式，使网站的页面能够在不同分辨率的屏幕下都有很好的表现形式。百度的移动资源有两种抓取方式，一是通过传统的蜘蛛(spider)抓取，另一种是通过百度提供的“开放适配”服务。目前百度开放适配服务共提供三种方案：自主适配、标注Meta声明、提交对应关系Sitemap。按照百度官方的定义用“开放适配”的抓取速度会优于传统的网页抓取。

二移动端网站优化的规则和策略

1百度移动搜索结果的排名标准百度鼓励mobile资源，根据百度移动搜索结果的排名标准

(1)检索友好性，其友好性判断标准是网站有没有可以匹配移动设备的HTML5结构。

(2)有完整的功能/服务满足用户需求，保证内容/服务的稳定可用，保证访问速度及到达率。

(3)移动化交互体验，符合移动终端特性。

(4)使用规范的html5/xhtml协议语言。

2移动端搜索结果的排名策略

移动端网站优化打破传统网站的优化方式，移动端搜索结果的排名策略主要由基础相关性、资源质量、检索友好性三个部分组成。手机页面进行适配，移动网站的DOCTYPE声明有助于搜索引擎识别该页面是否适合手机浏览，mobile页面协议编写如果不规范，会造成百度无法正常识别。<!DOCTYPE>声明应该位于文档中的最前面的位置，处于<html>标签之前，其声明格式。

三基于移动搜索的网页优化

面对移动搜索市场，移动用户需求与标准的桌面搜索需求是不同的，移动用户更倾向于即时需求，移动搜索与桌面搜索相比，具有：

(1)在移动设备上的小屏幕，可能只能出现5个搜索结果。

(2)移动搜索查询往往极短，查询的关键词也比传统桌面搜索更少。

(3)移动搜索查询结果受到字数限制。例如，PC端和移动端搜索结果,PC端30多个中文汉字才截断，移动端不到20个字就截断。

1移动端网站样式表的优化

制作的一个移动样式表单，称之为“handheld.css”，这个CSS可以把传统网页格式化为移动设备可以浏览的网页。<linkrel="stylesheet"href="css/handheld.css"type="text/css"media="handheld"/>如果客户端是手机等移动设备时，就会载入这个css样式表。

2移动端网页标签的优化

(1)meta标签优化，使用标注meta声明开放适配协议。站长在站点PC页的源代码头部嵌入一行或多行Meta信息，由Meta信息来指明该PC页对应的手机页的URL。Meta声明的格式：<metahttp-equiv="mobile-agent"content="format=[wml|xhtml|html5];url=url">

(2)描述标签(description)的优化，使用description目的是用来说明页面的主体内容。描述标签也会被显示在搜索结果当中被用户所见。

(3)jquery标签的优化，提升移动用户的使用体验。例如，滑动切换图片相比于自动切换和点击切换，滑动切换增强了用户操作的主动性、隐藏标签和显示标签实现动画效果，同时提升了切换的便捷性。

3移动端页面结构的优化

使用三层的页面结构。由于移动端是直接用手指操作，需要响应元素点击区域要相对明显，布局上可以多上下排列。移动网站的页面加载速度要比普通网页加载速度慢，所以减少页面数量非常重要。用户是不会有耐心不断打开网页上的，所以尽可能简化网站的布局也是很重要。一个标准的移动站应该包含首页、列表页和详情页三种类型，页面类型及层级不超过三个，保证简单、高效的用户体验。使用尽量浅的页间结构，减少用户点击次数，提升浏览体验，

4移动端网页导航的优化

网页导航可用性表现为用户能快速地找到所需的信息，是用户体验的重要实现方式。移动网站可以采用的导航种类较PC端要少，按照范围的不同，可以分为三大类：结构性导航、关联性导航和公用程序导航，一般首页导航可以分为导航式和内容式两种，导航式因其风格简洁可起到快速传达品牌形象的作用；内容式因其丰富的内容，可快速传递信息，Fig.3Thehomepagenavigationandcontenttypestructure通过导航，用户可以知道所在页面在整个网站中的位置，在移动端导航中尽量使用文字链接，不要使用复杂的js或者flash。使用图片做导航时，可以使用Alt告诉搜索引擎所指向的网页内容。

5移动端网页屏幕分辨率的自适应

移动端网站的页面需做到以下三点：一是页面随屏幕宽度变化，无横向滚动条；二是屏幕不放大时，能清晰浏览内容，文字大小不低于12像素；三是屏幕不放大时，按钮、链接等点击方便，按钮尺寸不能过大或过小。

篇8

二、什么样的设计更适合web页面

1.慎用较“重”的图形元素这里图形元素的轻重不是色调的轻重，是形式的轻和重，形式的轻重和内容相呼应，网页设计的一大趋势就是越来越“轻”。除了对圆角效果和高光效果等效果的审美疲劳之外，网页设计师开始意识到好的网页设计更注重的是将网页内容与网页形式结合起来，而非形式的堆砌。所以设计师在应用那些较“重”的图形设计时，一定要慎重思考，考虑到该图形的应用是否有必要以及该设计是否与受众的气质相契合。

2.内容和形式的分离对于一些比较强调视觉效果的特殊产品，也可以利用图片格式和一些前端知识对网页设计进行优化，比如内容和形式的分离。一些国外比较流行的设计风格都是通过大幅的背景图进行气氛的渲染和意境的传达。这样做的一个好处就是能把需要用到图片的视觉元素进行集中的压缩优化，同时因为前端实现时一般会用相近的背景色先进行填充，然后在逐步显示背景图，就不会因为加载太慢而拖慢用户的访问速度。

3.通过较小的视觉牺牲换取较大的性能提升有时候为了提升页面的加载速度达到更好的用户体验，不得不对设计进行优化，这个时候就需要牺牲一部分视觉效果利用网页设计师掌握的图片格式知识更有目的性的优化设计网页。例如著名的淘宝“双十一”大促销活动的宣传网页网页，由于双十一期间，该网页的访问量非常大并且为了配合商家的宣传活动需要在网页上加载非常多的商品图片，这时候就需要网页设计师对双十一的促销活动网页的图形进行优化以达到提升网页性能的目的。网页设计师可以去掉一些不太重要的高光、渐变和阴影效果，从而降低图片文件的大小，提高图片文件的加载速度。

4.图形艺术的界面处理新颖的网页图形艺术设计可以牢牢地吸引住浏览者的注意力，设计具有创意、布局合理、设计规范的网页也是提高网页浏览量的的重中之重。一个图形运用恰当、设计人性化的网页可以让浏览者对网站心生好感，极大地提高浏览者浏览该网页的欲望。所以，网页设计者要注重运用一切科学技术手段来设计图形艺术，保证页面效果给人以眼前一亮或是舒适的感觉，让图形首先在视觉上给予客户一种冲击，给客户一个良好的第一印象。

篇9

最原始的方法是按下键盘上的<PrintScreen>键，将当前屏幕复制到剪贴板上，再通过其他图片处理软件进行加工；也可通过相应的屏幕截取软件工具进行屏幕采集如HyperSnapDX、SnagIt等。

2从网上下载

网络资源异常丰富，在Internet上可供选择的素材很多，可以直接访问网页，从网上搜集我们需要的图片，并通过保存图片或者通过电子邮件、网际快车等形式下载相关的资料素材。

3用扫描仪采集图像

可通过彩色扫描仪将报纸图书等纸质的图片素材进行扫描，把各种印刷品及彩色照片数字化后在计算机中存储起来供使用。

4使用数码相机及数码摄像机采集图像

可使用数码相机和数码摄像机进行图片的拍摄和录取，然后将相关图像信息存储到计算机中进行处理，这应用的非常普遍。

5通过计算机软件进行绘制

可通过各种绘图软件进行绘制。如使用AdobePhotoshop、AdobeIllustrator、Paintor、Coreldraw、Freehand、Flash等。这些工具软件在图形图像的处理方面功能很强大，不但可以很方便的处理图形图像，还可以优化图片的质量，提高网页的下载速度和制作效率。

二图片在网页应用中的处理方法

1退底处理

可以形成生动的边缘效果，使画面更具活力。有时也为了去除图片中繁杂的背景，使图片主体更简洁醒目。

2虚实处理

通过对图片进行虚实处理，也可使主体更突出，增强网页的空间与层次感。同时通过虚实的对比，使画面形成张弛有度的关系，其虚的部分可激发人们的想象力，有助于产生联想。

3影调处理

通过各种图形图像处理软件，对图片的色度、饱和度、明度、纯度等进行调整，可以制作出各种色调的图片效果，从而大大增强图片的感染力。如将整张图片进行去色处理、产生单一色调效果或突出某一主要色调等

4质感处理

通过对图片的质感处理，可以激发人们的联想与情感投入。如粗糙的表面效果，可以带给人们的质朴的感受；对图片进行残缺处理和作旧处理，可以带来一种沧桑感等。利用Photoshop图层和滤镜等相关功能，可以制作出不同质感的图像效果。

5局部与特写

有时为了突出某一特定部位，或获得某种特别的视角，需要对图片的局部进行特写处理，通过对图片的重新剪裁而获得一种特别的视觉感受。

6综合处理

在很多时候，为了某种表现效果，需将各种方式综合利用，以达到设计的目的。例如，对图片进行重新分割与组合、混合等。

篇10

2选择适合高职院校学生特点的教材

我院具有所有高职院校所共有的职业特点，但又有着我们自身更为突出的特点，要以“面向高职学生以应用”为目的的思想为指导，以能力为本位，适应社会的需要，这就要求我们在选择教材时一定要准确实用，我院幼儿教育系选用的是由清华大学出版社出版的第二版《Dreamweaver网页制作实用教程》，本教材以“实例+知识点”的结构构建内容，采用“任务驱动教学法”让学生边做边学，并配以相应的光盘，生动直观，能够让学生在短时间内迅速掌握所学知识，是一本符合培养高职院校学生技能的好教材。

3遵循高职教学规律，加强和改进教学工作

高职院校不同于其他高校的地方就是它是以实践操作能力的培养为主导，理论知识的学习为辅的教学指导方针进行教学，对于网页设计与制作这门实践性很强的课程来说更是如此。想要教好这门课程，教师就必须在教学过程中进行一系列的教学设计才能达到较好的效果，如何组织好这门课对于教学工作和效果尤为重要。

3．1网页设计与制作课程的教学思路

首先，要上好第一堂课。教师要在课前做好充分的准备工作，要利用第一堂课想办法牢牢抓住学生的心，让学生真正认识到学习网页设计课程的重要性和必要性，不能让学生有沉闷和枯燥的感觉。所谓万事开头难，好的开始必定能为之后的教学打下一个坚实而良好的基础，但好的开始并不意味着之后的教学就会一帆风顺的进行，之后的教学务必要在多媒体课件上下工夫。多媒体课件是教学的灵魂，它不是文字、图象、音频、视频和动画信息等各种元素的堆砌，而是它们的完美融合，利用它们使课堂变得更加生动和精彩，从而尽可能的提高学生的学习兴趣。

3．2网页设计与制作课程的教学方法

用实例作为课堂切入点，让学生先看到实际效果，首先启发学生思考用之前学到的知识和技巧能否做出此种效果，然后再由教师演示实例，在演示实例的过程中引出新的知识点，将知识点融入到具体实例中。比如，在表格布局和内嵌框架的教学模块中，我们采用任务驱动教学内容。教学目标是用布局表格设计网站主页，在演示此实例之前，让学生先利用之前学习的表格知识设计此网站主页，目的一是巩固前面章节所学知识和操作技巧，目的二是为接下来的布局表格设计做好充分的铺垫，让学生从内心有所比较，哪种方法更适合用来设计网站主页，在教师演示实例过程中可以更好地抓住学生的注意力和调动学习的积极性。演示案例制作一个介绍“学习教程”的站点，主要包含六个模块，包括“我的主页”LOGO、“导航”、“网站信息”、“教程热点”、“热门下载”、“最新教程”、“最新软件”等等。基本要求是在此实例中，添加“左上角三叠图”和“最下面友情链接”，资料在网络中获取，合理设置网页的背景以及图片和文本的属性，页面美观大方。较高要求是用此站点结构制作一个介绍自己的个人站点，要求除基本要求外，要有六处超级链接，且六处链接页面要有一致的框架结构，站点中导航清晰，布局合理，配色美观大方。

3．3教学过程中因时因人改进教学手段和方法

高职具有较强的职业特色，而学生水平存在着个体差异，故不能进行一成不变的教学方法。在课程进行到中期的时候，学生对课程知识的索求和动手实践的欲望会渐渐减弱，他们的厌学情绪越来越重，或者总是出现眼高手低的现象。在这个阶段学生已经掌握了一定的网页设计与制作的知识和技能，教师可以放手给学生，在授课过程中可以由主动变为被动，让学生由被动变为主动，譬如找某位学生来演示课堂实例，教师在旁指导，把学生的注意力拉回课堂，以此来推动教学进度顺利高效的向前进行。

4明确教学目标，把握教学内容

4．1选择合适的网页制作工具

目前最好的网页制作与设计软件工具是Dre-amweaver。它一直以来作为可视网页编辑工作的标准，在代码编辑和应用程序开发方面的功能比较强大，更重要的是它是所见即所得类型的网页设计软件，对高职院校非计算机专业的学生来将非常适合。同时，可以选择Flash制作网页中的动画素材，选择photoshop处理和制作网页中的图片素材。

4．2要求学生能够利用Dreamweaver设计各种网页，开发初具规模的网站

我系课程方案中要求采用以Dreamweaver为主导，逐步讲解网页设计的基础知识，初步了解HTML语言、简单认识CSS网页设计的基础知识。这里需要特别说明的一点是，首先，对HTML的教学，有些人认为对于高职非计算机专业的学生来说，不用学习太多语言，其实不然，HTML可以说是网页的灵魂，它不像C语言那样生涩难懂，高职非计算机专业的学生完全有能力学会和掌握。其次，要掌握CSS的基本使用方法，CSS是英文单词CascadingStyleSheets缩写，翻译为“层叠样式表”。通俗讲CSS是控制网页中内容的颜色、字体、文字大小和宽度、边框、背景及浮动等样式来实现各式各样、花样百出的网页样式的统称。由于允许同时控制多重页面的样式和布局，CSS可以称得上网页设计领域的一个突破，作为网站开发者、设计者能够为每个HTML元素定义样式，并将之应用到希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。

5考核方式

根据高职院校学生的实际能力水平和课程教学质量基本要求，传统理论考试已不适宜于网页设计和制作课程，网页设计和制作课程采用的是考查的考核形式。这种考核方式更适合网页设计课程的特点，更加强调学生学习的灵活多样性。期末总评学习成绩可由三部分组成:课程考核(平时到课考勤、课堂上的表现、课堂实训作业和)占30%、小结考核(阶段测验作品)占30%和期末考核(期末综合作品)占40%。这种考核方式注重实际操作能力和灵活应用能力的培养，可尽可能地调动学生的学习兴趣，发挥学生的学习积极性和主动性。期末考试要求学生在教师规定的时间内完成一整个网站项目的设计与制作，项目中包含一个学期中所学过的全部知识点和技能点。《网页设计与制作》课程是当下一种全新的教学内容，教师在教学中应将自己独特的教学理念运用于教学方法中，即让学生轻松愉快地学会制作网页的方法和技巧，又能在建立网站的过程中充分发挥自己的想象力和创造力，从而能培养更多适应信息化社会的综合型网页设计人才。

6社会实践

如果说课堂考核方式是检测和巩固学生设计网页能力最有效的方法，那么课外的实践则是拓展和提高学生设计网站能力最有效的渠道。可以组织学生进行学院网页设计的比赛，也可以走出校园去参加社会团体组织的设计大赛，或者进行一段时间的顶岗实习，这样可以最大程度的提高他们对此课程的学习积极性，也可以让学生找到差距，激励他们更加努力，不断完善和提高自己设计网页的水平。