前言：中文期刊网精心挑选了网页制作与设计范文供你参考和学习，希望我们的参考范文能激发你的文章创作灵感，欢迎阅读。
网页制作与设计范文1
中图分类号：TP393.092-4
准备建设的专题学习网站是基于网络资源的数字化学习平台，利用网络技术，创设主动学习情境，让学生在开放、互动的平台上去寻求《网页制作》专题资源，激发学生学习兴趣，让学生主动思考、主动探索、主动学习，实现高效课堂。让学生在建设网站的过程中，学习掌握提高《网页制作》的技能，体现“学中做，做中学”的教学理念。
《网页制作》是开设一学期的课程，主要内容包括网页的基础知识、网页布局和色彩搭配、HTML语言、JavaScript脚本语言、Dreamweaver软件使用、CSS层叠样式表、AJAX技术、jQuery技术、网站的创建与管理。还涉及到使用Photoshop软件对网页图像进行处理、使用Flash软件制作网页动画等其他相关课程。
在实际的教学过程中，往往需要使用大量的素材和学习视频教程。这些学习资源怎样能够方便快捷的分发到学生的计算机上，成为需要解决的问题。如果机房的计算机是通过网线连成小型局域网的，就可以先把工作页、资料包等学习资源先存储到一台学生机上，再利用windows自带的文件夹共享功能，将其共享，便于其他学生从这台计算机上下载资源。文件夹共享实现过程如下：
鼠标右击文件夹，在弹出的快捷菜单中，选“共享和安全”，选中在网络上共享这个文件夹。这时，其他用户就可以通过网络访问这个文件夹，下载其中的学习资源。
这样利用文件夹共享的方法实现资源下载，优点是操作简便。缺点是机房的计算机一般都带有C盘还原功能，往往一次共享完成后，下一次重新启动计算机后，还需要再次设置文件夹共享，十分麻烦。专题学习网站就可以实现简单的文件夹共享达不到的效果，可以使素材和教学资源分类存储在服务器上，以清晰明了的操作界面，便于学生在线学习和下载相应的网页制作素材。
1 《网页制作》专题学习网站的作用
专题学习网站为中等职业学校计算机专业学生《网页制作》课程的学习提供优质的数字化学习资源，为学生提供制作网页所需的丰富资源，搭建展示学生作品成果的平台。通过专题学习网站创设学生自主学习的情境，引导、激发学生学习《网页制作》课程的积极性，建立高效课堂，让学生更好的掌握网页制作的技能。
（1）研究中职学生特点，动手实践能力相对于理论知识学习能力强。
（2）分析《网页制作》课程，涉及内容广、技术多，实践性和技能性强。
（3）设计开发专题学习网站，探索基于专题学习网站的《网页制作》课程的教学模式。
给《网页制作》课程的教学提供教学资源，辅助学生进行自主学习。在课外时间里，对于学生的学习给予支持，帮助学生学习在课堂上没有完全掌握的知识。提供学生展示作品的平台，学生和老师在这里可以对学生的作品进行一系列的评价。提供一个在课外进行师生交流或生生交流的平台，学生可以在这里提问、交流学习心得等。
2 《网页制作》专题学习网站的设计
首先网站需要教学资源模块来进行教学的辅助，教学资源模块既能辅助课堂教学，也可以指导学生进行自主学习。其次作品展示模块，学生需要一个作品展示模块，首先通过展示学生自己的作品能够激发学生自己的兴趣，第二展示作品模块有助于学生进行自评互评。第三，讨论模块，既要有以班级为单位的讨论小组，也要有全校师生都能进行参与的大型讨论平台，使学生在学习中出现问题时，能够自主的进行讨论学习。
在建站之初，为网站以后继续完善（例如：开发手机客户端等），需要考虑给学生划定一块空间，让学生自己上传自己的网站作品。自己维护自己的网站，将网站交给学生自己运营。让学生发出自己的声音。
为了把建立网站的过程和学生的《网页制作》的学习过程相结合。主要是教学资源的共建共享，在课堂使用该网站的教学资源进行辅助教学，结合工作过程系统化的课程开发，结合工作页的素材的使用。通过上传网站网页给学生一个展示自己作品的机会。
可以让每一个班级在校园网上建立自己的班级网页，将校报办到网上去，网页上建立与中职学生相关的栏目，例如：求职、招聘信息等。组织学生自己定期更新常用工具软件的版本，交流专业课的学习体会。利用所学知识解决实际问题，活学活用，学生在使用专题学习网站中遇到了问题，通过小组讨论去寻找答案。将工作过程系统化课程学习情境实施的六个步骤：资讯、计划、决策、实施、检查、评价，充分运用到教学实践当中。达到学生越学越爱学，越学越想学的自主学习状态，真正实现专业课教学是以学生为主体，教师起到陪伴学生自主学习的作用。
3 《网页制作》专题学习网站的实现
网站开发中，数据库技术主要用来支持实现协作学习平台、专题研讨等动态网页部分数据的存取。常用的数据库有ACCESS、SQL Server、My SQL等。图像处理技术主要用来设计、生成网页背景图片，使网页更加美观，有利于创设“真实”的学习情境。常用的图像处理软件有Photoshop、Fireworks。
运用静态网页制作技术、动态网页制作技术、数据库技术、三层结构技术进行网站开发，编码实现网站的建设制作过程。《网页制作》专题学习网站的测试、评价和完善，专题学习网站建成完成后，依照专题学习网站各个功能模块的功能，在应用专题学习网站教学的过程中不断纠正和完善，通过问卷调查专题学习网站的应用效果，更全面的了解基于专题学习网站的教学模式的有效性。
通过校园网试运行《网页制作》专题学习网站，邀请网站设计与制作专家和学生使用专题学习网站，根据反馈意见，对网站进行修改和完善。
4 结束语
专题学习网站不仅为学生提供了丰富的专题学习资源，还为学生提供了功能强大的协作平台和专题研讨区，为学习者开展协作学习、交流和探讨相关问题、展示自己的学习成果提供了良好的舞台。利用专题学习网站进行课程教学，培养了学生自主学习、协作学习等综合能力，形成了一种崭新的数字化学习方式。
专题学习网站的资源要丰富，提供必要的演示视频录像，能够给学习者以足够的资源进行探究式的学习。教师博客、微博是教学的辅助平台.用以促进教学的交流。通过博客、微博叙事式的记录可以更好地了解教师的教学思想、研究成果和兴趣爱好.也可以进行教师之间的教学交流。学生可以发表自己的见解和想法。特别是作品创意，供其他同学学习和参考，以达到共同进步的目的。
运用教学设计思想对《网页制作》专题学习网站进行设计，主要包括需求分析与功能定位，中职学生特征分析，专题内容的选择，信息资源的选择与设计，自主学习的设计，学习评价系统的设计，学习情境创设等内容。通过专题学习网站创设学生自主学习的情境，引导、激发学生学习《网页制作》课程的积极性，建立高效课堂，让学生更好的掌握网页制作的技能。
参考文献：
[1]郝中超，金薇.Web3.0环境下运用专题学习网站实现学习资源共享建设的思考――运用专题学习网站实现学习资源共享的应用现状调查分析[J].中国教育信息化，2013（01）.
[2]张利桃，任改梅，李扬.基于专题学习网站的“WebQuest”学习过程设计[J].中国电化教育，2013（02）.
网页制作与设计范文2
【关键词】Web标准；电子商务网站；设计与制作策略；分析
前言
互联网技术的推广与发展进程不断加快，对人们的日常生活与工作各方面都产生了重要影响。网页的设计与制作随着网络技术、科技水平的发展受到人们的高度重视，其主要是将网络作为主要载体，将各种信息以更加快捷、方便的形式传达给人们。根据相关数据统计显示，从事网页设计制作的人员达到了300万之多，但在网页设计发展过程中还存在诸多问题，因此应突破网页结构单一、空洞等问题才能将网页的设计与制作水平进一步提升[1]。
1Web标准技术概述
1.1Web标准内涵
Web标准不仅仅作为标准，其主要是对一系列标准进行组合。一般的网页中主要由结构、行为、表现三部分共同组成，并与XML、XHTML相对应，表现对应的标准可以将其成为CSS。1.1.1结构在结构中主要的技术可包含拓展超文本标记语言与可拓展标记语言，在网站王者设计中主要将其应用在网页数据分类以及整合方面。在两个标准中，XML的表现形式为源语言，其主要是让用户字自身的语言进行标记与重新定义，具备较强的数据转换功能。1.1.2行为在Web标准的行为中，主要包含ECMAScript[2]与对象模型。其在网页设计与制作中主要可以应用在交互式的操作网页文档方面。其可以将界面上操作对象实施的交互操作有效实施，利用DOM可对对象有效定义与修改，还可将对象之间存在的各种关系有效处理。1.1.3表现其中最主要的技术便是CSS，通常人们将其成为层叠样式表，在网站网页设计中可应用改在控制浏览器的显示方面，其也是决定网页设计风格的主要因素。
1.2基于Web标准前提下的网页设计流程（略）
2基于Web标准标准的电子商务网页设计与制作流程
在基于Web标准进行电子商务网站网页设计的过程中，主要包含内容分析、结构设计、方案设计三部分。在进行布局设计的过程中，可利用XHTML与CSS对页面进行合理布局，可实现网页布局的目标。在进行设局实际过程中，可利用CSS与美工设计元素互相结合，将设计方法转化为最终的网页。
2.1内容分析
网页设计作为视觉语言的主要表达方式，应进行合理的编排与布局，从而确保网页的布局更加清晰、合理、内容充实。在进行网页版面布局的过程中，应将网页设计的更加醒目，使用户在使用过程中对各项功能一目了然，其他部分的版面设计应与主页的风格保持一致。较为常见的布局模式包括国字型、厂字型等。本文将以汽车用品为主的销售网站作为案例分析，由于汽车商品类型多样[3]，在设计网页过程中，应将商品的导航以及产品展示作为重点。案例中采用的网页布局为框架型布局方式，可将页面分成各种模块。在网页左边为纵向的导航栏，右边则为商品的展示栏。在网页底部呈现了网站的基本信息与商家的联系方式等信息。在网页模板的顶部与底部都会出现在每一个网页的同一位置中。
2.2结构设计策略
在对汽车销售网站进行网页开发过程中，可将其乘坐为模板，将其抽象地分为不同区块，其中包含核心流程业务模块、展示功能模块等。在将模块开发完成后便可投入使用。在用户浏览、操作网页的过程中，程序员可通过后台进行可视化的管理与操作，用户可以将不同的模块进行拖放配置，构建个性化的网页布局设计，方便用户的使用与浏览。用户在操作汽车销售网页过程中，其中的框架作为页面的骨架，决定了页面的整体布局与模块摆放区域。框架通常采用的是HTML文件，其主要为了将页面进行区分，还会在适当的位置对模块进行放置，可用<{widgets}>代码进行表示，方便用户在使用过程中利用可视化编辑将模块进行合理配置。对于板块区来说，其能将汽车销售网站最为个性的地方进行呈现，可利用模块内容将网页的更新实现，在网页页面中的各个模块都有指定的ID，模块的区域能呈现竖向摆放的形式，或呈现多个商品内容。模块为独立形态，可对不同的边框进行切换，从而将呈现样式进行改变。在网页模块的顶部与底部都会出现在各个网页中的同一个位置，对于任何电子商务网站来说，应将网站顶部合理设计，才能拥有功能完善、结构清晰的网站顶部，从而提升网站的效益。
3结语
基于Web标准对电子商务网站网页进行设计与制作，可促进电子商务网站的运作效率，为用户提供巨大的便利，从而促进网站的使用效率与综合收益，还可提升电子商务网站的运行效率与性能。
参考文献
[1]朱淑琴，魏威，张嘉萌.基于Web标准的电子商务网站网页设计与制作[J].计算机与现代化，2012，03：106~109.
[2]王亚辉.Web标准的电子商务网站网页设计研究[J].电子商务，2015，05：49+82.
网页制作与设计范文3
关键词：网页设计与制作 教学 改革
随着万维网的迅速发展，网页已经成为网络世界进行信息传播的最主要载体，网页设计与制作人才的培养成为当务之急。由于社会和专业的需求，《网页设计与制作》课程广泛受到各大中专学校学生的喜爱，下面就《网页设计与制作》课程的教学与大家进行探讨。
1、课程性质和特点
在中等职业学校，《网页设计与制作》课程是计算机应用技术和计算机网络技术等专业的必修课程。它是一门工具性和实用性都比较强的实践课；不仅涉及计算机图像处理、文字版面处理等相关知识，而且需要对相关课程有一定的基础；是一门集成了多种计算机知识和技术的综合，其本身具有很强的实践性，是网站建设的基础，而网页本身是当今社会网络世界传播信息的最主要的载体，同时网站又是企业向用户和网民提供信息（包括产品和服务）的一种方式、是企业开展电子商务的基础设施和信息平台。
2、课程教学目标
本课程的教学目标是使学生了解HTML语言的语法规则，掌握文本、链接、列表、表格、表单、图像、多媒体、框架元素标志及属性，了解HTML、JavaScript脚本编程语言的基本语法知识，能独立设计小型WEB站点。
3、课程教学内容
根据前面对《网页设计与制作》课程的性质和特点以及课程教学目标分析，在制定教学大纲时，不应该拘泥于某一本或者某几本特定的教材，应着眼于当前网页制作技术发展的现状。网页制作过程中必然涉及到图片的处理、动漫制作等，若能应用好Photoshop和Flash也是网页设计的关键，此部分在我校计算机应用技术和计算机网络技术专业在学业生入学第一学期已经开设《图形图像处理软件Photoshop》、第二学期《图形图像处理软件Photoshop实训》和《二维动画制作Flash》，第三学期开设《二维动画制作Flash实训》和《网页设计与制作》，因此教学内容设计时不再重复这部分内容。另外，Fireworks同样也是作为网页制作的辅助工具，若学生能掌握，对网页的设计开发将起到画龙点睛的作用，因此这部分也安排了相应的学时。
《网页设计与制作》课程体现了网页设计与网页制作是紧密联系的，是完成网页作品流程中的两个阶段，但这两个阶段之间并没有严格的界限，往往是迭代进行的。网页通常都是图文并茂的，对页面的美观有一定的要求。也就是说合格的网页作品，在技术上不仅要符合相关的制作规范，还应考虑页面布局、图片放置、色彩搭配、下载速度等因素，这些因素都与用户体验密切相关。因此，在学生掌握了基本网页制作后，笔者安排了网页设计方面的内容学习，主要包括色彩、图像、布局等。在讲授的过程中，还展示了部分网站（以电子商务网站为主），让学生去分析总结各个网站的特点，使得学生对网页制作的内涵有进一步的理解。
4、选择教材和教学模式
这门课程，仅仅通过在多媒体教室中讲解理论知识、操作步骤和做典型范例是远远不够的。那样，一堂课下来学生只会做教师教的，不会融会变通，学生的创新意识得不到培养。我们只有突破传统的教学模式，才能培养学生自我探索、独立研究能力与自主创新精神。如何突破，并且取得良好的教学效果呢？通过几年的教学探索和总结，笔者认为，可以从以下几个环节来进行把握。
4.1 优选教材
合理安排教学内容一本教材的编排质量如何，会在一定程度上影响学生的学习兴趣和教学效果，特别是针对中职生这样一个特殊群体，我们更应该优选教材。我们应该选用在内容编排上由浅入深、由易到难的教材。
4.2 精心设计网页制作课程的教学模式
掌握一定的理论知识是做好实践的基础和前提。所以老师决不能忽视课堂教学。我校该课程教学采取的是教学做一体化的教学模式，充分体现理论知识与实践操作相结合。教学设计可采用“课堂案例分析――软件功能解析――课堂练习――课后拓展――作品展示”这一思路进行精心编排。课堂教学的案例、课堂实践的案例、独立实验的案例不仅涵盖教材中的实例，还引用了大量企业中的真实案例。
5、教学方法与手段
5.1 教学方法的改进
在教学过程中，根据学校的培养目标和本课程特点，结合多年来实际的教学经验，对教学方法实施了以下几方面的改进。
（1）教师演示制作网页案例，传授本节课所需掌握的知识点为了能激发和调动学生学习的积极性，避免“满堂灌”的传统教学模式，在教学过程中采用案例教学法。根据教学进度和教学要求设计案例并充分备课，讲授并解析与案例相关的理论和技能，分析案例讨论中可能出现的任何问题，而且案例要具有典型性和针对性，从适合学生的接受能力来选择和设计。（2）教与学相结合教学模式。在教师通过案例教授相关理论和操作基础后，要求学生能够按照案例的要求，通过上机及时模仿制作和案例相似的实验，巩固和加强学生掌握的教学中的知识点。
5.2 教学手段的改革
《网页设计与制作》是一门实践性很强而且广泛应用的技术，为了说明网页设计中的原理及其在实际中的应用，实时展示非常重要，因此在网络课程中的授课中接入Internet，随时将讲述的相关知识通过实实在在地网络来说明和解释，这样学生就不觉得枯燥和乏味，使学生明白了学习网页设计的重要性和实用性。
6、考核方式
该课程的考核内容应以实践操作为主。因此将考核方式定为考查，给出一定范围的主题，留给学生足够的时间完成作品的设计和制作，最后上交制作好的作品即可。留给学生足够的时间和发挥空间，可以使学生充分发挥他们的想象力和所学知识。这样的一种考核方式经过几届学生的实践，受到同学的好评，并且出现了相当一部分好的作品。
网页制作与设计范文4
【关键词】计算机 中职学校 网页设计与制作 教学设计
中等职业学校培养目标是把学生培养成与我国社会主义现代化建设要求相适应，具有综合职业能力，在生产、服务一线工作的高素质劳动者和技能型人才。本文以《网页设计与制作》这门课程为例，浅谈有关这门课程的教学设计。
一、教材分析
我校目前使用的教材是人民邮电出版社出版的《Dreamweaver CS3 网页制作基础教程》。该教材主要采用项目教学法，通过大量精心编排的项目由浅入深、循序渐进地介绍网页制作的基础知识，章末还安排了习题，以帮助学生在课后及时巩固所学内容。
教材中采用的网页制作软件是Dreamweaver CS3。对于初学者来说，Dreamweaver 比较容易入门，具体表现在两个方面：一是静态页面的编排，这和Microsoft等可视化办公软件是类似的；二是交互式网页的制作，利用Dreamweaver可以比较容易地制作出交互式网页，且很容易链接到Access、SQL Sever等数据库。
二、学情分析
我的授课对象是职校计算机专业二年级的学生。
（一）思想观念方面：中专学生一般由基础薄弱、学习态度不端正的弱势群体组成，他们很少得到赏识，缺乏自信。
（二）现有知识水平方面：通过一年级的基础课程和部分专业课的学习，学生对计算机操作有了一定的了解和掌握，但对于学生刚接触一门新开设的专业课程，还是很陌生的，需要由浅入深逐步引导学生入门。
（三）专业能力需求方面：大部分学生毕业以后都直接走向社会的工作岗位，他们更需要坚实的专业能力和职业素养。
三、教学目标
（一）知识与技能：1.能熟练地建立站点，创建和设置文档。2.能在网页中使用图像和媒体，设置超级链接。3.能使用表格、框架和AP Div布局页面。4.能创建表单页面和使用行为。5.能使用库和模板制作网页。6.能使用时间轴制作动画。7.能使用CSS样式控制网页外观。8.能配置动态网站的运行环境。
（二）过程与方法：1.通过课堂教学过程中的观察对比、实践演练等形式，培养学生分析问题和解决问题的能力。2.采用任务驱动的方法，养成主动进行学习的习惯。3.采用项目教学法，培养学生的团队合作精神。
（三）情感态度与价值观：1.通过学生自主解决问题的过程，体会成就感，树立自信心，为自主学习、主动学习奠定基础。2.通过小组协作、任务驱动等形式，渗透团队合作精神及研究探索知识的意识。
四、教学重点难点
重点：学生能够熟练地使用Dreamweaver 这个软件来进行网页设计与制作。
难点：熟悉网站制作流程、分析网页的布局结构、网页色彩的搭配原理。
五、设计思想
（一）项目教学。为培养学生自主学习的能力，让学生成为课堂的主体，本门课程采用了项目教学法。在课堂中，教师只是 起组织、引导的作用。教师先提项目要求，然后学生进行分析、讨论，同时教师可以通过随机点名提问或者举手自荐的方法来总结学生遇到的问题，然后有针对性地进行理论知识和实际操作的讲解。
（二）任务驱动：1.创设情境，引出任务。首先使用与课程相关的动画短片、音乐、视频、图片等素材来创设情境，引出任务，然后提出任务的要求，目的是提供学生动手、动脑、参与的机会，明确任务。2.思考讨论，分析任务。通过思考、分析、讨论和教师的引导下，将任务细分为若干个小层次，逐个解决。这有利于提高学生的分析能力、思考能力。3.实施任务，完成任务。在思考、分析任务后接下来就是任务的实施阶段。在这个阶段，学生作为课堂的主体，通过自主探究、小组讨论等方式来分析问题和解决问题。而教师就扮演组织引导的角色，在课堂中巡回观察、指点学生更好、更快地完成任务。
六、考核方式的设计
《网页设计与制作》是一门实践性强的专业技能课程。为适应该课程培养学生自主学习能力、知识应用能力以及创新性专业人才的目标需要，在教学过程中，教师应重视理论与实践相结合，注重培养学生运用理论进行观察、分析和解决问题的能力。
为了能准确反映出课堂的教学效果，《网页设计与制作》课程主要以“项目考核制”为主，即学生个人独立完成项目作为该课程的一种考核方式。《网页设计与制作》课程的总评成绩应包括平时成绩、实训课成绩、项目考核成绩以及展示作品成绩。
对于一个整体项目，应从以下几方面进行评价：主页面的设计风格、子页面的制作、网页中的链接、页面布局方式以及整体效果。要求整体风格统一且有特色，主页面、子页布局完善且合理，文件夹组织有序、标准，文件命名正确、符合行业标准。评分时，教师应结合平时实训的操作情况以及展示作品时其他学生的评价给出一个综合分数。
总之，教无定法，贵在得法。以项目为载体、以任务为驱动的教学方法对中职学校的学生来说是一种能调动其学习积极性的行之有效的方法，能充分发挥教师的主导作用和学生的能动作用。学生在进行项目设计时，能充分发挥自己的想象，展示自己的设计思路，从而更主动地参与到教学活动中来，促使学生为完成项目而进行多渠道的自主学习，以扩大学生的知识面，实现个性化、层次化和弹性教学，提高学生解决问题和综合应用知识的能力，培养学生的创新意识，实现学生与工作岗位间的零距离接触，为以后走向社会打下了坚实的基础。
参考文献：
[1]黄世吉，梁元超，常春英.Dreamweaver 网页制作案例教程.北京：航空工业出版社，2010.
网页制作与设计范文5
关键词：实例教学；计算机网络；网页设计；动手能力
中图分类号：G434 文献标识码：A 文章编号：1674-7712 （2013） 02-0166-01
一、现实教学中存在的一些问题
通过教学过程中的不断摸索，我发现在以往网页设计课程的教学过程中，普遍存在以下现象：
1.学生们对于学到的知识，无法很好的掌握。学生对于课上学到的知识点，不能把知识点放大，跟现实网站联系起来，简言之，学生不能学以致用；
2.学生构建的网站结构不新颖，色彩搭配很乱，内容空洞，条理不清等。最严重的是一些同学根本体会不到网站构建的宗旨以及要领，随心所欲，没有一条主线，因而网站效果往往不尽人意；
3.教材的章节安排，对于学生的学习有一定局限性。由于课本上的书面内容对于讲解网页设计有局限，一些显示器上显示的东西很难通过课本完全展现给我们，也就注定了有很多东西是我们从课本上看不到，却又跟网页制作技术息息相关的。
二、根据现状调整教学
对于现实教学中存在的问题，综合之，学生没有足够的与实际接轨的空间，不知道最终要完成怎样的成品，而实际需要又有哪些，现实网络中都有哪些经典的案例。因此，根据这一现象，我采用实例教学，让学生能够学习最新的知识，练习最贴近需求的技术，掌握最重要的要领。具体实施过程如下：
（一）明确教学要点，激发学生学习能动性
在每堂课的教学中，有针对性的明确本次课的教学要点，即当堂课的知识点，并通过一些具有代表性的网站样品像大家演示效果，让同学们看到知识点在现实当中的体现，互相讨论和研究，这样才能让学生对知识要点产生兴趣，激发他们学习的能动性，从而也会调动课堂学习氛围，大家参与其中，动脑思考，一举多得。
在这个阶段中，我们要做到课程内容模块化，设计和解决难点，循序渐进：我们将整个课程内容合理的模块化，各模块之间既相互独立，也相互关联，同时也将课程难点分解到各个不同的模块中，简化了学生的学习进程。每个模块自成体系，学完每一个个模块就能获得一项知识、技能，前面的模块为后面模块做铺垫，后面的模块又强化前面模块的内容。这样可以让学生牢固地掌握《网页设计与制作》的核心。
（二）细化教学要点，逐步深入实践
在向学生灌输了初步知识要点以后，就要将各知识点更细节的问题一一讲解，从认识到熟悉再到应用，甚至对于遇到问题的各种情况以及解决方法，都逐步深入的加入，当然这种深入是离不开实践的。试着让大家围绕某一主题，例如美食、旅游景点、体育运动等，发挥自己的想象力，自己动手，利用课上学到的知识点，把各主题涉及到的图片信息、文字信息有规律有秩序的体现在网页当中。这样在实践中，教师协助学生及时发现问题解决问题，使同学们通过修改和总结，加深理解。
精心准备案例项目，从宏观上进行教学设计：将实际案例引入教材、教学体系中，每个重要知识点均与实际应用结合起来，融创新思维培养、团队学习方式、实践案例教学于课程教学中。经典赏析、知识讲授、课堂练习、实践辅导、创新操作等不同教学方法灵活运用，在充分利用现代多媒体教学、网上学习、交流沟通的基础上，采用第一课堂与第二课堂结合，学研相结合，将现代科学技术充分应用于教学改革之中。
（三）加强实例练习，提高学生创造性
对于网页设计的学习，为了使我们的学生操作比较熟练，又能制作出尽可能完美的作品，这就需要加强实例的练习，在摸索中寻求进步，在经验中总结提高，激发学生的创造性，能够打破固有的网页设计模式，有自己独特的色彩搭配、布局构造思想，这样才能让学生们适应千变万化的网络时代和人们对于网站产品的高要求。
在练习的过程中，讲究师生互动、生生互动，活跃课堂气氛：激发学习兴趣，提高学生分析问题、解决问题的实际能力，达到轻松学习、自主学习的目的；充分调动了学生的学习积极性和主动性，有效提高学生的学习能力、应用能力和创新能力。采用实例与基础知识紧密相结合的全新教学模式，一边讲授新知识、一边教师机演示、一边动手操作、讲与练相结合。
（四）课程改革的基础
根据教学条件，本课程主要讲述静态网页制作部分，对于动态网页、色彩搭配只作简单的介绍，在讲静态网页之前，加入flas、Photoshop图形图像处理技术的讲解，为静态网页设计做铺垫。《网页设计与制作》作为一门综合性的课程还涉及许多相关的课程，可以根据不同的培养目标开设不同的课程。
三、进行教学评估
在进行教学时，教师对每个学习情景都设计好案例，然后进行在上课的时候明确任务、教师演示、学生设计、展示评价等。而这几个过程中，展示评价是一个不可忽视的阶段。适当的教学评估，给大家一个互相交流经验的平台，不但能让大家发现自己在网页设计过程中的欠缺，还能从其他同学那里吸取好的方案和设计思想。
四、结束语
网页设计作为网络技术高速发展的衍生物，是一门应用性和实践性较强的课程，在教学的方法上区别于普通理论课的课程，我们力求通过实例教学，能够调动学生积极主动的动手能力，培养敢于尝试的心态，遇到困难勇于克服和解决的思想。这样的教学方法激发了很多同学学习的兴趣，端正了良好的学习态度，态度决定一切，因此在教学过程中取得了很好的教学效果。
参考文献：
[1]张伟娜.《网页设计与制作》课程教学的探讨与实践[J].教育信息化，2008，3.
[2]马强.Dreamweaver网页设计课程教学方法探讨[J].福建电脑，2008，4.
网页制作与设计范文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.
