网页制作与设计范文1

【关键词】课程定位 可持续发展能力 课程内容 项目化

一、课程现状分析

随着网络技术的不断发展，计算机网络应用日趋丰富，已经渗透到人类社会的各个角落，网络在人们生活的作用也越来越大，利用Internet足不出户就可以获取所需的信息，实现购物、炒股、旅游和学习等。网页和网站是Internet的重要组成部分，拥有一个自己的网站是政府机关、企业、个人的共同需要，制作出精美的网页来吸引浏览者的眼球，提高网站的知名度，是大家追求的共同目标，而这一切都依赖于网页的设计和制作技术的运用。

因此，该课程的课程设置必须符合教育教学规律和学生成长成才规律，符合专业人才培养要求。按照创新型人才培养模式重新构建课程建设平台，整体优化课程内容，重组课程结构，构建以能力为核心的课程体系，更有利于学生可持续发展能力的培养。

二、课程定位与课程目标

与高职“网页设计与制作”课程相关的职业岗位主要有：网页设计、网页设计与制作、网页美工、网页制作、网站管理、界面设计等。

目前，许多高等院校都开设了《网页设计与制作》课程，它已成为软件技术、计算机多媒体技术、计算机网络技术、信息技术、信息管理、电子商务、计算机应用专业公共的必修课程，也受到了其他专业学生的喜欢，成为一门选修人数最多的课程之一。

（1）对于多媒体专业。本课程与《图形图像处理》、《动画制作》等必修课程相结合，主要用于设计与制作网页，对网页中的文本、图像、动画进行加工处理。本课程作为多媒体专业的专业课程之一，是多媒体专业实践体系的基本技能模块之一。

（2）对于软件技术、计算机信息管理、计算机网络、电子商务等专业。本课程为后续课程提供静态网页设计与制作的理论基础和操作技能。本课程作为一门专业基础课，侧重于学习静态网页的设计与制作、HTML语言、CSS样式、JavaScript等知识。

（3）对于非计算机类的专业。《网页设计与制作》也是非计算机类专业学生最受欢迎的一门全院性选修课，通过该课程的学习，扩展知识面，了解网页设计与制作的一些基本知识和技能。

课程培养总体目标是通过4个项目（2个基础项目，1个提高项目，1个综合项目），使学生掌握网站开发的过程及网页的设计制作方法，能开发静态的中小型网站，通过多个网站的分级开发实施，不断强化学生的网页设计与制作技能，积累网页设计与制作经验，激发学生学习兴趣并形成持久的学习动力，提升学生自主学习能力，满足职业岗位需求。

根据高职学生的特点我们将人才培养目标定位于主要从事网站建设、网站维护等一线工作的高性能人才。考虑到计算机专业更新换代很快，学校教育不仅仅要教给学生技能，更重要的要教给学生一种学习的方法，以维持学生职业的可持续发展。我们在教学过程中采取项目化教学，以学生为主体，着重培养学生自主学习能力、创新能力，培养学生养成良好的学习习惯，以期学生在以后的工作中能够快速、高效的接受新知识，新方法。

三、课程内容的选取与序化

根据对职业岗位的需求调研分析，高职《网页设计与制作》这门课程的教学内容主要选取以下内容：HTML、CSS、JavaScript、网页制作基础知识、站点创建与管理、页面的整体控制、文本与图像操作、网页的布局、网页中的动感元素、超级链接与导航栏、表单网页、网页特效、网站规划与网页设计原理、网站测试、与维护。

充分考虑学生的认知水平和认知能力，把握学生的认知规律，合理地组织教学内容。按照由简单到复杂、由局部到整体、由易到难循序渐进地学习知识、训练技能。

高职学生对知识的认知有其自身规律，但高职学生认知规律与网站开发的工作过程存在不一致、不同步的问题。为了适应岗位工作需求，教学内容序化时应充分考虑企业开发网站的工作流程，以“网站开发工作过程”为导向，提高岗位的适应性。

综合考虑“网站开发工作过程”和“高职学生的认知规律”，将高职网页设计与制作教学内容划分为五个教学阶段：

第一阶段：欣赏优美网页，留下直观印象，激发学习网页设计的兴趣。

第二阶段：学习网页制作的基础知识，熟悉网页制作工具，训练创建站点、制作网页的操作技能，形成制作网页的感性认识。

第三阶段：学习HTML语言，掌握美化网页、制作网页特效的方法，进一步提高网页制作的技能，深入了解网页制作的编程技术。

第四阶段：学习网站规划与开发的流程，熟悉网页设计的原理与技巧，掌握网站测试与的方法。使用读者的网页制作水平由操作应用层提高到设计规划层，由感性认识提高到理性认识，由简单操作提高到综合设计。

第五阶段：按照企业开发网站的工作过程全面熟悉网站开发的全过程，将前面所学习的知识，所掌握的技能应用到实际网站开发的实践中。

经过对课程内容的选取和序化，教学内容的主线为：网站赏析-基础知识-站点创建-网页整体控制-文字操作-图像操作-网页布局-动感元素-超级链接-导航栏-表单网页-HTML语言-CSS样式-JavaScript技术-网页特效-网站规划与网页设计-网站测试、与维护-网站开发。

四、开发“项目化”的实践任务

“项目化”的实践任务具有工学结合、点线面结合等特点，训练网页制作、设计、开发的技能，达到学以致用、强化职业能力的目的。优选了5个有特色的网站让学生欣赏，开发5个真实网站，用于实践教学和技能训练。

网页制作与设计范文2

关键词：网页设计与制作；课程标准化；实施方案；标准

1基于标准化的课程内容分析

1.1了解技术标准，锁定课程框架任何一门课程，都应该是基于某种需求而存在，这种需求必定有一个标准。而对于网站建设也是如此，W3C标准对建站相关内容都制定了成熟与完整的标准。《网页设计与制作》课程作为建站的主干课程，所有课程内容都应该来源于W3C标准框架之中。1.2深入行业调研，熟知技术要求标准一旦制定，便不会轻易改动，而课程的完整内容也不会有太大变化。但对于内容的理解和使用却是随着技术和行业的发展而变化。尤其对于网页设计，技术更新更是迅速，例如由原来的表格布局发展到现在的DIV布局，甚至将来可能的响应式布局、弹性布局、网格布局等等。内容还是这个内容，只是它的作用和用法发生了变化。而这些都是需要我们深入企业一线去调研才能知道的。1.3充分探讨沟通，完善课程内容一旦对技术标准和行业要求有了深入的认识之后，就要确定合理的安排课程内容，无论课程内容如何，重点是教授这门课程的老师。相关老师集中对内容进行讨论，不仅可以更好的对课程内容进行设置和安排，同时也是一个学习和提高的过程。

2构建标准化的课程内容

通过对标准的解读和行业的调研后得知，《网页设计与制作》这门课程大体可分为3大部分来构建：网页结构、网页表现与网页行为。2.1网页结构（HTML）此部分内容以HTML标签为核心内容，根据需要创建的内容，使用具有较强可读性和可识别性的标签来进行表示，例如要创建一个段落，我们可以使用<p>来表示，如果要创建一个章节，则可以使用<section>。这样不仅可以实现网页内容的创建，同时也完成了对网站结构的优化。通过W3CSchool和W3School的内容参照，可将HTML内容分为基础教程、高级教程、HTML媒体及XHTML等内容，由于目前最新推出了HT⁃ML5，在新旧技术的过渡时期，尽量将新旧知识点分开讲解，有利于更加清楚的分层。2.2网页表现（CSS）此部分内容为网页制作里面最重要的一个技术环节，用于网页布局与网页美化，CSS是网页课程里面的一项重要组成内容，同样分为两个版本，CSS2.0与CSS3.0，依据W3C标准，将选择器、属性、hacks、单位等等归纳完整，分类清楚。通过W3CSchool和W3School的内容参照，可将CSS内容划分为CSS基础教程、CSS样式、CSS框模型、CSS定位、CSS选择器及CSS高级教程。目前行业正处在新旧技术交替状态，因而在内容制定上也要分开制定，使得层次递进更加分明。2.3网页行为（javascript）此部分内容为实现网页交互，网页中使用的主要技术为javascript。而javascript是属于客户端脚本语言的一种，它也成为web前端技术里面的重要成员。目前很多非程序员都在使用它，可见javascript是一门相对容易上手的技术。原生的javascript对于一般人来说是有难度的，但是对于理解js（之后都用于javascript简写）是十分必要的，目前有很多基于js的框架，例如jQuery是一款非常优秀的js库，因为此部分内容可以设定为原生javascript与jQuery两个部分的内容。上述3个方面，按照W3C标准严格制订内容，便可基本全部涵盖课程所有内容。

3加强关联课程建设，做好课程衔接

仅仅依靠《网页设计与制作》课程内容是无法满足岗位与技术要求的，它需要大量其他课程内容的知识来支持，才能更好地学习和掌握，例如：网页美工，除了要求掌握网页结构、网页表现外，还要会使用设计软件先对效果图进行设计，甚至在目前已经越来越多的企业还要求网页美工掌握网页行为部分的知识技能，因而根据整个行业体系，可将建站内容分成3个阶段：3.1网页美工主要针对网页效果图，网页元素设计，可将此部分内容加入到平面设计课程中例如Photoshop、AI等，且平面课程一定要在网页课程之前开设完成。此阶段的课程内容必须要有针对性，要求对网页的构成元素的设计，网页的配色、网页的风格设计，以及客户需求的分析制定相关内容。此阶段将很大程度上影响到后续课程内容的学习的效果。通过个人实际的教学中发现，做出一个好的效果图作品，将会极大的促进学生的学习积极性，也会无形中使得学生学习更加主动和自信。3.2web前端此阶段是紧跟上一阶段的，当学习完网页美工，制作出最后的效果图后，紧接着就是将图片效果先实现成静态网站。这里存在一个重要的环节，那就是切图。许多人对于切图并不太重视，但实际情况是，切图的好坏，直接影响到整个建站的效率。切图不好也会造成流量浪费及网速变慢等后果，这就需要美工与前端人员之间能够很好地进行沟通和合作，因而这个阶段并不是完全的独立存在。3.3网站后台开发当静态网站建站完毕后，此时网站只具备在客户端电脑浏览的基本功能，人机之间无法实现数据的传输。例如当需要在网站留言，并马上显示在网站中时候，当需要对网页的数据进行及时的更新修改的时候，这都需要服务器端技术的支持。目前建站的服务器端技术主要有PHP、JSP、ASP等。从过程可以看出，此阶段是必须承接上一个阶段的才能继续实施的，如果更好的实现对接，这就要求前端或美工人员与后台人员之间进行详细的沟通。上述3.1和3.3是可选内容，各专业可根据自身需要选取开设。

4完善教学资源，规范教学内容

完备的教学资源是课程标准化建设不可或缺的一部分。制定完课程内容后，如何学习课程是至关重要的。由于师资不同、专业不同等原因，同一门课程，教学内容却相差甚远，应该针对具体的知识点，制定统一的基础案例，也就是必讲案例，不分专业，不分教师，凡涉及某知识点，此对应的基础案例为必讲内容，然后可在此案例基础上，自由增加其他案例。这次既可保证课程内容的标准化，又可灵活变通。必备的主要课程资源大致有以下几种：4.1标准化的教学大纲此标准化教学大纲是课程学习的指导性文件，应该是针对课程内容统一制定，不区分教师，不区分专业，对每一个知识点都提出达到的目标要求。教学大纲不易经常性变动，它是一个完整的指导纲领，只有当内容发送实质性变化时，才会做出改变，最后由各专业针对自身特点从此教学大纲中有选择性的执行。4.2标准化的实训大纲如果说教学大纲是一个指导性的文件，那实训大纲就是实实在在的执行方案，针对每一个知识点都应该设定一个独立的案例，有详细的实现步骤及过程，也要对每一个案例提出明确的实训目标。实训案例不仅仅要针对一个个小知识点，更要有完整的案例，通过小案例的叠加，并最终能实现一个覆盖全部环节的完整案例。4.3视频教程仅仅有文字性的指导文件不够，配套的视频教程是必不可少的。课程内容的制定向来都是开放的，课程的学习应该是不受时间和空间的约束。视频可以很方便地将知识点清楚的呈现。视频的制定应尽量碎片化，按知识小节进行准备，时长在20分钟以内比较适宜。有了视频，学习者就可以更加方便的自学了。4.4反馈系统课程的内容的完善和优化，需要不断地在实践过程中发现问题，总结问题，通过反馈系统，将各种建议和意见进行收集整理，查缺补漏，不断完善和改进，此反馈系统可以通过网络手段，通讯手段等方式实现。4.5网络平台如何将课程内容更好的呈现和管理也是课程标准化建设的一项重要任务。可以建立一个网络平台，如专门建设此课程的网站，与优质课程，共享课程，精品课程看齐，将反馈平台、视频案例、教学大纲和实训大纲有组织地结合在一起，并实现资源的共享。

5创新考核方式，将考核落在实处

对于操作性极强的课程，使用传统的考核方式效果并不理想，如何创新考核方式呢？这里有以下几点想法：5.1以赛代考以比赛成绩作为课程考核成绩。通过比赛提高学生学习积极性，并将课程所学知识运用到实际大赛中，这样既考查了学生的学习情况，也可进一步提高学生的学习能力。5.2以证代考可鼓励学生参加相应职业资格证书考试，以职业标准来考查学生学习情况，以考证成绩作为课程考核成绩。5.3答辩式通过对所做案例进行详细分析和讲解，由专业老师和同学进行提问的方式进行考核，这样不仅可以促进学生的学习积极性，也可以加强对学生监督考查。5.4自荐式一个班级的学生能力总是有差异的，有的学生学习能力较强，在课程中期便已经掌握课程要点，为了促进学生学习积极性，充分体现差异化的教学特色，可由学生自己申请考试，便在学期中期就完成考核，以便学生可以更加自由的利用和分配时间。无论采用哪种考核方式，只要真正地把考核落在实处就是好的考核方式。

6结束语

当前对于教育的创新和改革不断地深化，无论是教学方法的创新还是教学模式的改革，都必须立足于课程的建设，《网页设计与制作》课程标准化建设不仅是对课程内容的重新梳理，更是一个自我提高和学习的过程，对于提升教学质量，促进专业发展都是很有意义的！

参考文献：

[1]郑伟,薛岚.高职院校图形类专业实践教学研究[J].科技资讯,2010(12):248-248.

[2]郑伟.高职院校非图形类专业《网页设计与制作》课程教学改革的探讨[J].福建电脑,2011,27(1):205-206.

网页制作与设计范文3

在互联网蓬勃发展的大环境下，《网页设计与制作》已经成为众多高职院校中开设的课程，但是实际的教学效果往往差强人意。本文尝试从教学内容的角度对高职《网页设计与制作》教学提出一些看法，以期提高《网页设计与制作》课程的教学效果。

【关键词】

网页设计；高职；教学内容

随着互联网逐渐深入到经济生活的各个角落，涌现出越来越多的网站。相应的，各类单位、企业等用人单位对网页设计与制作人才的需求也开始变得普遍。而《网页设计与制作》也早已成为大多数高职院校普遍开设的课程，甚至在同一所高职院校中也有相当数量的专业开设了这一课程，这些现象都反映出了社会对网页设计与制作人才的需求。而互联网的不断发展也在推动着社会对网页设计与制作人才水平要求的不断提高，也对《网页设计与制作》的教学提出了新的挑战。

一、《网页设计与制作》教学内容存在的问题

1.教学内容与实际应用脱节。

目前，《网页设计与制作》的教学内容大致分为：网页设计基础知识、HTML语言基础、CSS样式基础、网页文本和图像、超链接、表格、框架、Div、多媒体网页、模板和库、站点管理维护。不同院校、不同专业在具体内容的选择上可能会有所差异，但大致都包括了这些内容。首先，在《网页设计与制作》教学中，往往会以Dreamweaver这一网页制作软件的使用作为主要内容，所有的操作都依赖于Dreamweaver，很少涉及对HTML代码的讲解，这导致学生无法熟练的查看、修改HTML代码，一旦离开了Dreamweaver，学生将无法制作、修改网页。而在实际应用中，HTML代码是在进行网页设计时无法绕过的一个知识点。因为在Dreamweaver的设计视图下操作是不能解决所有问题的，很多网页设计中出现的问题只有通过查看HTML代码才能发现并解决。此外，Dreamweaver也并不是计算机上的常用软件，学生应该具备在脱离Dreamweaver的环境中进行简单网页制作、修改的能力。其次，早期的页面布局以表格布局为主，但随着互联网技术与网页设计标准的不断发展，表格布局技术已经不再是主流，取而代之的是Div+CSS布局，也是所谓的内容与形式分开的布局方式。在这种布局方式下，页面元素的布局更加灵活、页面代码更加简洁。而更重要的是，采用这种布局方式的网站在整体风格的管理和后期维护上更加方便、效率更高。因此，《网页设计与制作》的教学内容应当给予Div+CSS足够的重视，加大其在教学内容中的比重，以增强与实际应用联系的紧密程度。再次，随着移动互联网的兴起，通过手机等移动终端访问互联网的用户数量已经超过了传统的通过PC访问互联网的用户数量，如何设计适合于移动终端浏览的页面，也应该作为《网页设计与制作》教学内容的一部分。

2.只重视“制作”忽略“设计”。

不同院校、不同专业对《网页设计与制作》课程的命名不尽相同，但大多带有“设计”二字。而在实际的教学内容安排中，却往往没有体现出“设计”的部分。网页设计是一门典型的交叉课程，既有计算机科学知识，又有人文社会科学知识。网页设计虽较多的依赖技术性手段，但并不代表在教学内容的安排上就要以技术为主导。学习Dreamweaver也是只是为了掌握一种工具而不是最终目的，成功的网页设计作品还要有美观的布局、配色和人性化的信息导航。

二、确定合理的《网页设计与制作》教学内容

1.加强对HTML基础的教学。

虽然Dreamweaver作为主流的“所见即所是”编辑工具，可以让使用者不接触HTML代码就能完成大部分网页制作的工作，但是只有真正理解HTML语言，才能理解网页工作的原理，才能真正深入到网页设计的核心，才能学习到其他优秀网页设计作品的内涵，为将来的能力提升铺平道路。

2.加强对Div+CSS内容的教学。

Div+CSS布局已经是成熟的主流网页布局技术，《网页设计与制作》的教学应该突出对该技术的侧重，将已经被淘汰的表格布局作为辅助。同时，对CSS的教学内容应该贯穿始终，因为CSS可以说是控制网页元素表现形式的关键，掌握了CSS就能根据需要轻松的设置页面元素的各种效果，从而为整个页面增色。

3.增加对艺术设计的教学。

目前网页设计行业内最缺乏的是具备优秀设计能力的高端网页设计人才，而目前《网页设计与制作》教学中最欠缺的就是对设计能力的培养，导致学生在学完课程后也只能进行简单的模仿和重复，无法进行有效的创新和设计。因此网页设计课程的教学应该以艺术设计为出发点，增加对传统艺术设计方面的教学内容，如构图、色彩、设计思维等知识，并进行相应的实践练习，以此培养学生基本的审美能力和在设计上的创新能力，这样才能让网页制作技术服务于网页设计，从而真正体现出“设计”，避免舍本逐末。

4.补充对主流技术的教学。

互联网的发展日新月异，新的技术不断涌现，作为《网页设计与制作》的任课教师，应该具备一定的判断能力，将未来网页设计技术发展的新趋势呈现给学生，帮助他们紧跟行业动态，为将来就业打下良好基础。

三、结束语

《网页设计与制作》作为一门开设多年的课程，在教学内容的设计上必须要关注行业的最新动态，同时明确课程的核心内容，才能培养出社会所需要的网页设计人才。

作者：韦喆哲 单位：广西经济管理干部学院信息管理系

参考文献：

网页制作与设计范文4

分析了传统教学模式与培养应用型人才模式对网页设计与制作的教学改革的影响，提出为培养应用型人才的改革方向，并以两个专业、四个班的学生做为实验样本，对本年度教学内容做出了一些改革，得出了在培养应用型人才时该课程内容的改革方案和注意事项，指出为培养服务地方应用型人才，网页设计与制作的课程改革势在必行。

关键词：

传统教学；学即能用；CSS

互联移动终端的大面积推广，使得掌握网页制作技术的人才在各个行业里都成为必不可少的需求；同时，地方普通高校为社会服务的使命感在不断增强，如何培养出“学即能用”的人才，使之在短时间内掌握主流的网页设计技术，提高站点访问量，是这门课程课堂教学效果进步的体现。

一、技术背景与课堂教学要求

（一）Internet发展历程Internet经历了从Web1.0到Web3.0的迅猛发展。Web1.0是静止、单向、被动的；Web2.0则为用户开设了主动权，使得用户和网站可进行双向信息互动；Web3.0提升了用户的主动权，用户可对页面的多种元素（显示、色彩、像素、框架等）按需设置，订制专属的功能模块，整合数据资源，适用于电脑、手机、PDA等多终端平台定制。

（二）传统的网页设计与制作课程内容一般情况下，高校开设的网页设计课程从教学内容上可划分为两大块：1.相关知识介绍。网站的概念、基本元素及页面等相关知识的介绍。2.应用软件的使用。介绍使用最多的Dreamweaver系列网页制作工具，使学生掌握布局（表格、层、框架、模板等）、超级链接、表单和几种特效。随着互联网的全面推广和“学即能用”的需求，以上内容已不能满足互联网时代与时俱进的特点。最关键的问题在于：课堂学到的知识是否马上就能得到应用，是否与目前社会上专业的网页制作公司的技术规格保持一致。因此，本门课程的改革势在必行。

二“、服务于地方”教学内容的改革

（一）教学内容改革内容改革是课程改革的首要环节。关于什么是关键内容，什么是次要内容，笔者走访了本地专业网页设计公司中企动力的设计总监马女士，通过对她的访谈，了解到时下主流的网页设计公司所涉及到的技术规范，对本校现阶段的教学内容做了必要的调整，简化了表格布局页面、框架设计等已被淘汰的陈旧技术的授课内容，有选择地介绍了网页交互特效及表单的应用，加强了网页美化工具、HTML语言及CSS的学习内容。改革后的课程主要分为六大模块：网页和网站的基础知识、网页美化工具（Photoshop或者Fireworks）、HTML语言、网页开发工具的介绍、DIV+CSS、动态网页技术。首先，通过具体的例子阐明网页、网站的定义，页面的布局类型（主要是盒模型）、整体造型及配色方案的相关知识；其次，介绍网页美化工具图片处理工具（Photoshop或Fireworks）的使用，学生可用其设计页面元素，加强页面的视觉效果与美观性，提升站点的专业度；再次，介绍HTML的基本语法结构和语句，使学生熟练掌握其主要标签的使用（传统的教学模式对这一部分的内容有所忽略）。实践证明，学生若不熟悉HTML的语法构成，学习DIV+CSS这一主流的网页布局模式就会相当吃力。当然，对于非专业学生而言，学习一门语言，即便是文本标记语言，由于其本身对计算机系统相关知识的欠缺，授课会比较困难，学生也学得辛苦，但这又是一个必要的过程，其所占用的时间比较长，需要设计大量实例，反复练习才能掌握。之后介绍开发工具，重点是要理解页面的代码模式和设计模式，而DIV+CSS则是本门课程的重头戏，由于学生对代码有种天生的恐惧，所以，在建立CSS时又以开发工具建立为主，修改程序为辅。最后简单提及动态网页技术。由于课时限制（32节），本课程主要讲授静态网页制作。静态网页技术分为传统技术和新技术。传统课堂教学内容重点是布局表格、框架、模板等，而目前主流的网页制作公司则主要应用DIV+CSS。所以，对于陈旧的技术简单介绍即可，而把DIV+CSS作为布局的主要技术进行讲解。由于这些内容需要学生对代码部分比较熟悉，所以，在课时中增加了相应的HTML的基本语法结构和语句的介绍，并对主要标签的使用熟练掌握。

（二）实际授课效果笔者今年为设计和思政两个专业的学生授课。设计专业的学生已经开设了PS，有一定的设计基础，所以，课程内容改革中的第一部分可以省略；思政专业的学生没有图片处理基础，笔者在授课过程中有意加强了这部分内容，讲授简单的图片处理方法和文字特效工具。实践证明，学生有追求新知识的欲望，基本能做到学以致用，并反馈到最终的作品中。往届学生的作品更像电子小报，而今年通过课程内容改革的学生作品虽不完美，但在形式内容上更接近Internet的正规网站，教学效果良好。针对我校提出建立培养服务于地方应用型人才的本科院校，传统的网页设计与制作课程必须响应时代号召，更新教学内容与方法。本文仅供从事该课程教学的教师参考。

参考文献：

网页制作与设计范文5

Photoshop在图片处理上具有强大的功能，尤其是对图像进行精细化操作，更是奠定了其在广告设计及美术创作中的坚实地位。当然，在网页制作模型设计上，Photoshop依然可以凭借其精细化、功能化优势来实现美轮美奂的网页规划效果。

【关键词】Photoshop 网页制作 模型设计 实现方法

1 引言

现代网络技术的发展，对网页制作提出越来越高的要求。Photoshop作为功能强大的图像处理软件，同样在网页制作设计中不容小觑。如在不同格式文件上兼容性强，图像处理精度高、误差少、视觉效果显著，更成为网页图像、动画、基于Web页面设计领域的优秀工具。

2 Photoshop在网页建模的独特优势

2.1 页面布局功能的灵活性

利用Photoshop来进行网页设计，主要是利用图层的特色功效，可以实现不同层次上不同元素的放置，且在进行移动时不会影响其他元素及整体视觉效果。当然，对于图层空间不仅可以放置单独页面要素，还可以放置链接，还可以进行叠加，确保不同图层上不同要素的色彩、亮度、大小等不会出现偏差。由此以来，在进行网页要素规划及布局上，可以依照设计者的思维进行灵活操作，增强了设计自由度。

2.2 修改功能的便捷性

由于网站在设计过程中因客户的要求而进行修改是常有的，而Photoshop因其便捷的修改功能，可以先通过Photoshop设计出效果图，然而结合需求变化来优化，最终获得客户的满意。对于其他软件则无法实现自由、从容的修改。

2.3 网页浏览的快速性

网页制作的目的在于浏览，而浏览体验不仅需要美观和规范的视觉效果，还要具有良好的网站交互能力。特别是对于大型网页架构，因加载项目过多，对网速要求过高。但对于Photoshop制作的网页，多采用裁切体积及文件格式转换，对系统资源占用率较低，从而能够保障快速的反应速度，提升浏览的流畅度。

3 Photoshop网页制作模型的设计与应用

3.1 Photoshop新建图像文件

根据网页设计模型基本框架要求，首先需要新建图像文件，以常规1280*800像素为例，可以设置浏览器的图像宽度、高度为1260*780，选择RGB色彩模式，便于在Photoshop中利用色彩的叠加营造五彩缤纷的视觉效果。

3.2 Photoshop设计网页布局

针对不同功能、不同用途的网站，其页面框架结构也不尽相同。通常情况下，对于视觉的热点效应多聚焦于左上角。在进行网页浏览时，左上部及上部为视觉中心，其后往下阅读，呈现出“F”形特征。因此，在页面布局上，围绕网站标识、站名、导航条、热点栏目、头条等页面布局要素，来重点优化左上部区域。如对于综合性网站，通常采用“国”字型页面布局，最上面为标示栏及广告条，其次为网站的主体内容，再次左右各一列小字号标题栏目，中间侧重于图文并茂的内容，最下面为基本信息，包括版权、联系方式等说明。因此，在设计上，利用Photoshop在页面上设置“T”型字，形成三块空间，最上面为标识、广告条等；左侧为导航栏，右侧为网站主体内容；接下来设置不同的页面图层，并在不同图层上进行绘制，结合Photoshop的图形、渲染功能来完成。

3.3 Photoshop网页模型集成

完整的网站需要具备Logo、广告栏Gif动画，背景底纹及导航按钮等。对于网站Logo，利用Photoshop丰富的图像设计功能来设计独特的富有个性的标识。如新浪网标识中的“i”通过进行艺术化处理，将之转换为活灵活现的眼睛，正是传达“世界在你眼中”的设计理念，增强了视觉动感；再如人人网的标识，利用对“人”字的抽象变形，代表每一个人；辅以圆圈，寓意人际圈，其共同的交集则象征着人与人的协作、分享、沟通。可见，对于标志的设计，既要从视觉审美上来表达生动的效果，还要从文化内涵彰显丰富的意蕴。Photoshop可以实现对矢量图形的任意变形而不失真，从而为我们进行自由创作和设计提供了无与伦比的设计环境。如可以利用钢笔工具来绘制矢量图，保存为JPG格式占用空间小，带来较快的响应速度。

广告栏多采用GIF动画，位置多居于网页的最醒目中间靠上，在动画内容上可以是企业精神、也可以是产品介绍，以图像自动切换等方式来呈现。利用Photoshop和ImageReady可以制作出简单、易用、低系统占用率的GIF动画，避免了传统SWF动画设计对插件的要求。举例来说明，以600*200像素广告栏为例，其操作过程如下：首先新建600*200像素文件，分别插入四张不同的图片到1，2，3，4个图层里，调整各图层中图形尺寸，使其保持和谐度；分别在4个图层新建文本图层，并打出不同的广告语，与相应图层进行合并；利用ImageReady，打开后点击“动画”面板，复制当前帧，连点3下，使帧数为4；分别对各帧进行操作，每一帧显示一个图层的内容；设置动画延时数值；转存为GIF动画格式，预览效果。

3.4 Photoshop设计底纹背景

在利用Photoshop进行背景设计时，可以利用无限填充功能，只要设计一个背景元素，将之无缝连接并填充整个背景页面即可。如可以设计一个1*2像素的条形状背景图，保存为JPG格式，并填充整个背景，而这个背景文件却仅有几k的大小。

3.5 Photoshop设计网页按钮

按钮是网页制作模型中的必要内容，在设计上要注意几点：一是大小尺寸要以像素为单位，避免图像失真；二是保存为JPG格式，对于有透明像素的需要改为GIF格式；三是利用Photoshop处理过的源文件要另存为PSD格式，便于后期修改；四是利用切片工具进行切割时要依靠参考线，保持页面布局一致性，避免爆边。

4 结语

总之，利用Photoshop进行网页制作模型设计，要从网页整体功能及展示特性上，积极挖掘Photoshop在网页图像、动画、WEB化页面设计中的优势，提升网页制作的应用效率。

参考文献

[1]王春艳，张彦芳.Photoshop在网页制作中的应用[J].电子制作，2014（02）.

[2]邓美玲.浅谈Photoshop在网页制作中的应用[J].无线互联科技，2015（01）.

网页制作与设计范文6

关键词:网页设计;网页制作;网页设计原则;网页体系结构

中图分类号:TP393文献标识码:A文章编号:1009-3044(2009)26-7376-03

Disscussion on the Website Design and Production Technology

ZHOU Qi

(Computer Network Management Center of Chinese People's Armed Police Force, Beijing 100089, China)

Abstract: The web design and production have their own principle and methods.According to the Specificity of web design and the actual experience of building network, this article draw forthes a web interface design principles.Besides,this article introduces the Website production technology from the Web interface architecture and page layout.At last,this article analyzes the Unified layout techniques of website, page element positioning technology and technology interoperability.

Key words: website design; website production; web design principles; page architecture

网页设计与制作的用户界面作为与用户打交道的门面,它在网站开发平台中占有非常重要的地位,因为它直接面对的是广大浏览用户。由于网页设计是计算机科学的一个专门研究方向,有其自身的原则、标准和方法,本章从简要介绍网页的一般设计原则和方法出发,结合网页开发的特殊性,系统阐述网页开发平台界面的开发和实现。

1 网页的设计原则

网页的设计除了要掌握页面设计的一般原则外,还要把握其特殊性,因为网页的主要功能是向浏览者提供信息,所以网页设计和其它应用软件设计存在一定的差异。总的来说,网页设计是一项既简单又复杂的工作。说其简单,是因为设计者只要遵守一项原则就行,那就是:设计者的设计应该增强而不是减弱网页所要提供的信息,不可喧宾夺主。说其复杂,是因为网页设计要考虑到很多问题的方方面面,需要有许多灵感和技巧在其中。

下面根据页面设计的一般原则,结合网页开发平台的实际情况,认为网页开发设计应遵循以下基本原则:

1) 统一的风格

风格有三大特点:抽象性、独特性、人性化。

抽象性指网页的整体形象给浏览者的综合感受。这个“整体形象”包括站点的CI(标志,色彩,字体,标语)、版面布局、浏览方式、交互性、文字、语气、内容价值、存在意义和站点荣誉等等诸多因素。

独特性指本网页不同与其他网页的地方。或者色彩,或者技术,或者是交互方式,能让浏览者明确分辨出这是你的网页所独有的。例如新世纪网络的网页是黑白色的,网易壁纸站的特有框架,即使你只看到其中一页,也可以分辨出是哪个网站的网页。

人性化是通过网页的外表、内容、文字、交流可以概括出一个站点的个性、情操,可以用人的性格来比喻网页。

2) 良好的交互

在网页设计中,用户通常根据所提供的交互方式进行浏览或操作,设计者在设计网页的页面时,应始终考虑如何提供良好的交互性:如主页的界面设计对浏览者来说是否具有吸引力;是否可以更好地引导浏览者访问站点;是否能保证用户简便、快捷、准确地操作网页;是否能为用户提供有效的帮助和出错信息;所创建的网页是否更加符合浏览者的需要。网页的交互操作主要集中在网页的多维超链接空间和网页的提交操作中。

3) 视觉效果

视觉效果指用户在开始打开网页时的第一印象,好的网页能让浏览者产生强烈的视觉冲击,给浏览者留下深刻的印象。所以对于网页来说视觉效果是相当重要的,它主要体现在网页的色彩搭配、字体设置和排版结构上。

第一,网页的色彩具有精神价值,对人的心理影晌有时是直接刺激,有时是间接联想。设计者做到有针对性合理的用色,来体现网站适应人的心理需求和特色十分重要。那么如何搭配色彩来表达网站的内涵?色彩总的应用原则应该是“总体协调,局部对比”。也就是说网页的整体色彩效果应该是和谐的,只的局部小范围可以有一些强烈色彩对比,它包括网页的背景、文字、图标、边框、超链接等。首先,网页要有主色调,以确定网站的总体基调,充分利用色彩的象征性、职业的标志色、冷暖的感觉和时退的效果来展示网站的艺术内涵和文化品位。其次,网页的颜色搭配最好不要超过3-5种,网页的前文和背景的色彩对比要尽量大,特别不要采用花纹繁杂的图案作背景以便突出主要文字的内容。

第二,网页的字体设置包括字体的样式、效果和大小。选择贴切的字体有助于表达网页的内涵。对于网页的字体设置通常归纳以下几点内容:一是不要使用超过3种以上的字体。字体太多则显得杂乱,没有主题。二是不要用太大的字。因为版面是宝贵有限的,粗陋的大字体不能带给访问者更多信息。三是不要使用不停闪烁的文字。四是原则上标题的字体较正文大,颜色也应有所区别。

第三,网页的排版结构即网页的版面布局。版面是浏览器看到的完整页面,而布局指以最适合浏览的方式将图片和文字等内容排放在页面的不同位置。目前网页版面布局主要有:“T”结构布局、“口” 型布局、“三”型布局、对称对比布局和POP布局。经分析、比较这些布局,得出在除了网页标题部分和结尾部分,网页中间的主体部分一般采用1: 2、2: 1或1: 2: 1的结构,这些结构都方便地、有条理地组织了网页的信息。当然,这并不意味着一定要采取这些组织结构,只要能够合理地组织信息、便于交流,采用其他更为灵活的结构方式也是可以的。

2 网页体系结构的设计

网页设计平台可以运行于任何的浏览器。相应的用户界面需要同时考虑微软的IE浏览器和网景的Netscape浏览器,同时用户界面也需要符合这些浏览器的标准。从设计的角度,把网页开发平台用户界面划分为两个层次:用户界面元素的设计和交互操作的设计。

2.1 用户界面元素的设计

用户界面元素是指一些具有特定功能和操作方式的可视化图形对象。在不同的应用系统中,有不同的用户界面元素。在浏览器中,用户界面元素包括:浏览窗口、图形图像、表格、链接、框架、表单、按钮、对话框等。用户界面元素设计的内容包括采用哪些界面元素、界面元素的定制、界面元素的如何布局以及界面元素的管理等。

2.2 交互操作的设计

交互操作设计是指用户如何通过输入设备和各种界面元素,实现人机交流信息的目的。由于网页开发平台是在WWW浏览器下运行的,交互的过程是通过表单块提交操作或链接方式来完成的,即用户通过鼠标和键盘在界面元素上触发相应的事件,软件接收到事件后,作相应的处理,然后将结果通过界面元素或其他途径反馈给用户。交互设计的关键在于如何利用各种界面元素,定义自己的交互操作规范并进行管理。

2.3 网页布局的设计

网页开发平台的页面布局总体上遵循了上面所介绍的设计原则。通常情况下,根据网页开发平台的整体组织结构,可以分四类页面:首页的页面布局、后台管理页面布局、导航主题页面布局和一般消息页面布局。下面以个人网站为例,分析各类页面的布局设计:

1) 首页布局

首页的整个布局可以采用“三型”结构,而中间的主体部分可以考虑采用比较清晰简洁的结构。网页主色调则根据网站的内容,选择合适的颜色,不易采用太过于鲜艳的色调。此外,任何网页均有标志图片log,可放在左上角,右上角则放置整个网站的导航栏,版权信息通常放置在首页的底部。

2) 后台管理布局

后台管理的页面布局可以采用“T型”结构,用框架把整个浏览窗口分割成三部分,上面是后台管理的标题及标志图片,下面的左边是后台管理的集中菜单,采用outLook风格,右面显示的是各菜单要完成的任务。

3) 导航主题布局

导航主题页面的布局可以采用与后台管理页面类似的“T型”布局,用框架把整个浏览窗口分割成三个部分,上面为导航栏和网站登录模块,下面左边为所选择导航主题的第二层主题或内容列表,右边为相应的网页内容。导航主题页面的结构可以采用树型的分层次结构模型,不但有利于动态管理,而且也有利于浏览者对各种主题内容的访问。

4) 消息页面布局

消息页面布局通常比较简法,由上、中、下三部分组成,即采用“三型”结构,首部是网站的标志图,中部是消息的主体,包括导航条、标题和内容,标题的颜色可以选择采用棕红色的大字体,起到醒目作用,正文采用默认的黑色小字体,尾部是版权。

3 网页的制作技术

3.1 网页统一版面技术

由于网站中的网页要求有统一的风格和良好的视觉效果,即要求网页有统一的版面,由于级联格式页(CSS)技术能集中管理WEB站点的格式元素(字体、背景、文本、边界和清单)和定义全局的版面格式,所以在我们的网站设计中大量地应用了该种技术。

为使网页开发平台利用CSS技术统一风格,实现版面设计,在页面套用CSS技术不是用直接法或导入法,而是用了链接CSS文件法。其方法如下:当多个网页页面采用统一的风格需要套用CSS文件时,首先需要建立CSS格式页。CSS格式页文件的内容与普通的HTML文件相同,都是一般的文本文件,只是扩展名为CSS,在CSS格式文件中,不需要用标记来限定。

3.2 界面元素定位技术

界面元素定位是网页布局的重要内容之一。要使网页的界面布局具备报纸、杂志等漂亮的布局,必须要对页面的界面元素进行定位。在网页开发平台中采用了以下几种界面元素的定位技术:表格定位、块表示符和定位,下面分别进行讨论:

1) 表格定位

由于所有的浏览器都支持表格技术,所以表格定位是用得最为广泛的一种定位方式,表格是由行和列组成,允许加入文本和图形,可以通过设置表格的属性来定位页面元素。有效地使用表格技术,使页面组织合理、条理清楚。

在网页开发平台中表格主要起两类作用:整体规划页面布局和列表显示信息,当整体规划页面布局时,采用线宽为零的隐式表格,列表显示时采用显式表格。

2) 块表示符和定位

用块表示符 (DIV )和 定位界面元素灵活性较大,它们有两种定位方式:绝对定位和相对定位,绝对定位使界面放置在网页上准确的位置,相对定位是相对于其它界面元素而定位的,此时对其它元素进行变动后,都会保持定位的完整性。块表示符通过其定位属性Top、Left和Position来实现界面元素的定位。

3.3 网页交互操作技术

交互操作也称为人机对话,是人和计算机之间的信息通讯过程。交互操作是网页设计的一个很重要的方面。在网页开发平台中,交互操作主要包括表单提交操作和超链接操作两种。

1) 表单

表单是提供给用户输入信息的区域,它是使web页面具有交互性特征的关键,用户将查询或填入表单的数据转送给服务器的ASP处理程序,服务器使用这些处理程序来处理用户的请求,并动态地产生HTML文件,最终对用户的请求作出响应,表单的工作过程是:用户在客户浏览器根据URL地址或链接向服务器发送用户的请求,服务器接受用户的请求,调出相应表单页面,并返回给浏览器;用户填写表单,提交给服务器,服务器执行ASP文件,取出用户提交信息;应用程序与数据库通过ODBC建立联系,存取数据库中的数据;将数据填回表单,结果以HTML页面送给客户浏览器。

表单处理程序根据用户提交的信息,用POST和GET方法将所有的提交数据封装到对象Request中,再用Request Form方法得到表单提交的数据,然后对数据处理。

2) 超链接

链接是提供给用户链接页面信息的接入点,链接可以分为一般链接和带参数型的链接。一般链接在静态页面和动态页面中广泛存在,它的交互性只局限于页面间的信息传递,向服务器请求已固定化的页面,然而,利用带参数的链接,可以实现复杂的交互动作,用户将参数转送至服务器的ASP处理程序,服务器使用这些处理程序完成用户的请求,并动态产生HTML文件。

4 小结

总之,网页的设计与制作有自身的原理和方法,应该从用户为中心出发。而且在网页设计与制作的过程中,会牵扯到对多种软件、多种知识的学习和应用,以及个人的审美观等等。所以要想制作出漂亮的网页,需要一个逐步学习和经验积累的过程。

参考文献:

[1] 胡珊.浅谈个人网页的制作[J].经营管理者,2008(9):25-27.