网站首页制作实例 第1篇
关键词：网站前台；CSS；JavaScript；教学改革；情境教学
Situational Teaching Design on the Front End Website Making
SU Chen, GAO Fei, CHEN Mei
(Beijing Electronic Science and Technology Vocational College, Beijing 100016, China)
Abstracts: With the development of society and Network, the requirement of the people on the front end website is increasing. But the traditional teaching method makes the disjointedness between the teaching and the posts requirement. It is hard to meet the need of society in the relevant personnel. The article discusses the reform of teaching contents. It is primary to teach in a real situation based on working process. Two of the teaching situation is discussed as examples. The content design on teaching situation is analyzed emphatically. The learning ability and learning effect of the students are improved by the situational teaching based on work process. The goal will be attained that the students can be trained to work after graduated.
Key words: front end website; CSS; JavaScript; teaching reform; situational teaching
通俗的说，网站前台就是网站访问人员看到的内容和页面，用户可以通过对网站的访问来浏览公开的内容，如企业或公司概况介绍、新闻信息、产品信息、企业联系方式、提交留言等内容。而随着网络和信息的发展，社会对网站制作人员的需求量也越来越大。
对于传统的网页制作课程，教学方法比较单一，教师一般采取讲授知识与案例讲解相结合的方法来进行。虽然学生也能掌握其中的知识和技能，但是对网页制作的综合运用能力不足，不能实现毕业即能上岗的目标，学校的教学与社会岗位之间存在相脱节的现象。
为了使学生毕业后能直接上岗，对本课程进行了教学改革，摈弃了传统的教学模式，将真实的项目案例引入课堂，使用情境教学法，将所授内容融入其中，以实现相应的教学目标。
1 前期准备
网站前台制作是我校多媒体技术专业网页制作方面的主要课程，在对该课程的改革中，注重理论与实践相结合，注重基于工作过程的系统化学习领域设计。为此，教师进行了充分的前期准备工作：首先要深入公司企业进行调研，掌握在实践过程中网站前台的制作流程和行业规范，然后根据实践过程提炼出能融合到课程中的相关内容，最后将提炼出的内容整合到课程中，并结合相应的方法和手段加以实施。
2 教学内容的情境设计
教学情境设计原则
网站前台制作是一门实践性、操作性较强的课程，其主要内容为（X）HTML、CSS及JavaScript三大网页设计核心技术。由于该课程主要以代码的编写为主，对网页的排版布局和效果样式的实现主要是通过DIV+CSS来实现，所以用DIV+CSS思想来引导学生编写网页代码是非常重要的，其中最重要的是如何让学生对编写代码产生兴趣，并将这种兴趣保持下去。
情境内容的设计
在教学内容的设计方面，先根据专业课程培养体系的要求确定该课程的学习领域，然后根据真实项目和知识技能，具体设计6个教学情境，由浅入深的对该课程进行介绍。在对整个教学情境的实施过程中，让学生完成规定的可执行任务，通过对项目案例的实践操作，使学生掌握网站前台制作的工作流程以及代码的书写规范等内容，在实践操作中掌握相关的知识和技能。
在对6个教学情境的课程设计中，所用的项目案例全部采用公司的真实项目，并将教学目标分为能力目标和知识目标来进行细化描述，教学情境中又分解为多个小型任务，将知识点融入到每个小型任务中，通过对每个任务的实现，学生将其中所包含的知识点进行掌握和消化。并且这6个教学情境的设计按照由浅入深的原则来进行设计，从首页入手进行项目案例和知识点的融合，进而到二级页面的制作和美化，体现了由易到难的设计原则。教学情境的设计如表1所示。
前两个教学情境是针对网站规划和首页制作而设计的，这两个教学情境相对其他四个情境的设计来说是简单的。通过这两个教学情境，使学生能明确网站前台的制作流程和行业规范，掌握相关（X）HTML和CSS代码的编写和命名规范。
第三和第四个教学情境，主要是针对首页的美化和二级页面的制作和美化，这两个教学情境从内容方面难度有所提高，通过这两个教学情境，使学生能使用符合Web规范的CSS代码完成对相关页面的效果实现，主要通过DIV+CSS来完成。
最后两个学习情境是两个不同类型的网站制作，通过对两个网站的制作，使学生掌握不同类型网站的排版布局制作方法，并通过相应的CSS代码实现其布局和样式添加，同时通过学习JavaScript代码来实现相应的页面效果。
3 具体学习情境的设计分析
在每个学习情境的设计中，情境是作为一个完整的工作过程来实现的，其中包含了对每个子任务的描述、学生的行动内容以及要达到的知识目标和能力目标。
学习情境5的内容设计
下面以学习情境5为例来说明对该情境的设计完成过程。
首先，对学习情境5有一个整体任务描述，以说明整个工作任务，让学生明确本次的学习目的。对学习情境5的任务描述是：根据网站主题，对网站进行设计，使用图像处理软件做出页面效果图，掌握CSS排版布局中三列布局的模式，对整个页面实现1-3-1固定宽度布局，通过书写CSS代码，对整个首页和二级页面的内容进行实现和美化。
其次，对整个任务进行细化，分为6个子任务，对每个子任务进行任务描述，细化其中的知识点，并说明学生的行动内容。其中子任务1的任务描述是：使用图像处理软件制作页面效果图。在对子任务1的实施过程中，主要是通过图像处理软件Photoshop软件对页面效果图进行设计和制作，包括对Logo、Banner的制作以及对二级栏目标题、背景颜色、边框和各部分文字的添加等。学生的行动内容是通过对Photoshop的应用，制作出页面的效果图，这样既完成了相应的工作任务又加强了对Photoshop的理解和实际应用。在子任务2和子任务3中，引入JavaScript的应用。通过对JavaScript的学习，使学生明确和掌握了相关的基础知识，为以后各个子任务的进行打下良好基础。在子任务4和5中，重点介绍使用JavaScript进行动态效果的制作，这样能使学生对JavaScript的知识进行灵活应用。在子任务6中，主要使用HTML和CSS实现网站首页和各个二级页面内容以及相应的样式等等。在该子任务中，主要以学生作为行动的主体，按照任务的内容书写HTML，实现首页和各个二级页面的内容，书写CSS代码实现对页面内容样式的添加，并通过书写JavaScript代码来实现图片轮换效果。
最后，根据本次学习情境中各个任务的执行情况进行总结，布置同步练习作业，由学生代表发言总结自己所遇到的问题、解决方法及其收获。
通过学习情境5完成的网站部分内容如图1所示。
学习情境6的内容设计
虽然学习情境5和情境6均为综合网站的制作，但是两者在情境设计中的侧重点是不同的。
在学习情境6中，将整个任务划分成3个子任务。在整个任务的描述过程中，虽然也有“根据网站主题，对网站进行设计，使用图像处理软件做出页面效果图”之类的字眼，但是在执行相应的子任务1时，由于在学习情境5中已经对此知识内容进行了学习，所以在此不必进行知识的讲解和演示，直接让学生执行任务，完成对页面的效果绘制。
同理，在子任务2和3的执行过程中，对用到的旧知识点，主要让学生直接执行任务，不再进行另外的讲解，只有对新的知识点进行明确讲解。教师在课堂中的作用是一个组织者，导引者，而学生作为学习的主体被重点突出出来。
总之，在该课程的改革实施中，以学习情境作为设计单元，在学习情境中注重工作过程，并以公司的真实项目引入情境教学，所以通过本课程的学习，能使学生熟悉网站前台的制作流程和规范，了解相关的学习拓展领域，达到在企业中从事网站前台制作的从业要求。学生通过参与实际网站的建设、开发和制作，掌握相应的基本知识和技能，并在实践中发现问题、解决问题，职业素养和职业意识得到培养和提高，为日后的毕业即上岗做好充分地准备。
参考文献：
[1] 莫小梅.网页设计与编程课程网站开发与教学实例的结合初探[J].电脑知识与技术,2009,5(14):3829.
[2] 陈孟臻.基于标准化布局的网页制作课程教学探讨[J].科教导刊,2009(9):94.
[3] 林婷婷.以Div+CSS思想引导学生学习编写网页的新教法[J].科技信息,2009(11):68.
网站首页制作实例 第2篇
为更好贯彻落实区委、区政府工作要求，提高统计服务经济工作的精细化水平，提升基层统计业务能力，区_采用网格化管理方法，全体统计人员挂钩联系基层统计工作，用“网格化+铁脚板”的方式，推动统计部门在强化统计预警预测能力、提高统计数据质量、夯实基层统计基础等方面发挥更加积极作用，特制定本工作方案：
一、工作原则
坚持以“规范统计工作流程，加强统计业务指导，提高统计数据质量”为出发点和落脚点，以“创新统计管理，提升工作能力，夯实基层基础”为主要工作目标，强化统计工作“跨前一步”的意识，力促统计预警监测超前一步，下移服务重心、前置服务环节、提升服务质量。
二、组织分工
三、工作内容
1．聚焦区委政府的工作重点，结合统计工作实际，围绕统计业务培训、深入企业调查研究、组织重点行业（企业）生产经营情况座谈等方面，提升基层统计人员业务能力，强化依法统计意识，提高统计监测分析精准度。
2．围绕主要经济指标运行、省市区高质量发展绩效评价考核指标体系，充分发挥专业优势，指导讲解考核指标涵义、评价计算方法，帮助挂钩联系地区研究主要经济指标运行的短板弱项，分析推进高质量发展过程中存在的问题，提出符合地区实际解决问题的方法措施。
四、工作要求
1．按照“跨前一步”的要求，发扬“网格化+铁脚板”的精神，积极开展走访，实现联系地区全覆盖，不留业务死角。开展工作期间，党员干部应主动“亮身份、做示范”，促进业务工作与党建工作的深度融合。
2．带队领导要求每季度对挂钩联系地区开展走访不少于两次，其他人员对联系地区每月走访至少一次，走访调研情况作为平时绩效考核的重要内容。
网站首页制作实例 第3篇
关键词：网站制作；高等职业教育；项目教学
Realization of Projects Teaching Methods Realization in the Teaching of _Website Design_
Sun Xiaojuan
(Liaoning Forestry Vocational&Technical College,Shenyang110101,China)
Abstract:The application in the production of teaching in higher vocational colleges website project teaching,Liaoning Forestry Vocational and Technical College website for the project design course content,teaching methods and assessment methods throughout the professional positions as a guide,student-centered,professional competence,cultivate the core _of teaching basic philosophy,can not only improve the positive nature of student learning,and practical ability to solve problems and analyze the problem of capacity;at the same time,classroom teachers practice level and to solve practical problems ability has improved greatly.
Keywords:Website production;Higher vocational education;Project teaching
一、引言
近几年来，我国高度重视信息化产业和计算机行业，这就直接给高校的计算机毕业生提供了大量的就业机会，但实际调查数据表明高校计算机毕业生的就业情况并不理想。究其原因主要有以下几方面：首先，教师在教学过程中所举的例子大部分都是书上假象的例子而且没有贯穿性。学生在学习过程中总是按照固有的模式进行思维，这就抑制了学生的创新能力，使得学生进入企业后接受新技术的能力较慢，很难在短时间内适应企业工作。其次，学生所学的知识与企业的实际需求严重脱节。即使学生毕业后进入企业，也要花费大量的时间和金钱来重新学习，这就增加了企业负担。最后，学生在学校的学部分都是以理论学习为主，根本不清楚企业实际的工作流程，对工作无从下手，这样也不能给企业创造利润。通过以上的分析可知，要使我们的毕业生找到工作，走向成功，就必须对课程进行系统的改革，尽我们的能力缩小学校培养人才与企业需要人才间的差异。
二、网站制作课程改革的前期准备
（一）我们在对网站制作课程改革之前成立了课程改革团队
参与的教师具有Photoshop，色彩构成，网页制作，FLASH，ASP相关技术等不同专业领域背景，组成改革团队对课程定位，课程理念，课程目标，课程体系，课程内容，教学方法进行改革。
（二）进行调研确定课程所培养学生的能力
网站首页制作实例 第4篇
一、教学思路方法的完善
针对企业对于网页设计人才的要求，要提高网页设计教学水平是一定要执行的。本文针对之前提出的几点问题，对于完善教学思路方法提出几点意见：1.教师的专业实践水平需要提高，并改进原有的教学方法对于网页设计的教师而言，都是一定要关注网络应用的实际发展，要不断的更新自己的知识并且提高个人素质，校方可加强与企业的合作，帮助教师开拓视野，并从政策上指导和鼓励教师利用假期的时候到企业进行实践，深入的了解完整网站的建设过程（比如从素材的收集和整理、网站的规划、网站制作、网站维护等）。教师将企业中的项目带入至课堂中，让学生从完成的项目中明确了解自己学习网页设计课程后可以从事的工作，以及如何在工作中去应用在课堂中所学到的知识，而教师在教学的过程中需要灵活运用教学技巧，确保最好的教学质量。2.对于课时进行科学、合理的安排，多多增加实践方面的课程按照现有的中职生的学习特点来说，应该是采用四节课连上的方式，让学生有充足的时候把课堂所学到的知识运用至相关的实际操作中，完成之后可以让学生进行现场的交流和讨论，以便探索出更好的制作方法。在一个学期快要结束的时候，可以安排一定的时间进行综合的实操，布置综合实践的任务并给出主题，要求所有的学生选择一个主题来进行网站的设计，让学生根据具体的要求进行分析、网站规划、处理并收集素材，对自己的网站要做到风格与内容都完整独特，把页面的结构、链接方式的设置、图片位置的摆放等做到布局合理、统一，而且还要做到容易更新。之后，再让学生写一些关于实操的心得体会，并且把学生的成果公布，这样的综合性设计任务可以在很大程度上培养学生分析问题、解决问题的能力，同时可以提高学生的创新能力，让学生的模拟与实际工作有最大限度的接近，以此来达到教育培养的目的。
二、运用任务驱动、案例、项目教学法，以此来提高学生的积极性
（1）任务驱动法：运用任务驱动法教学，完成课本上的实例之后要尽可能的以当前最为热点的问题或是学生所关心的话题作为主题，来对网页进行设计，要让学生掌握好网页设计的基础内容，比如素材的处理、收集、网页设计等等，要求学生进行完整有效的设计，然后将自己的作品上交，并进行成果展示，只要有了任务这一动力学生就不会盲目，也不会对学习失去兴趣。（2）案例教学法：对于中职计算机网页设计而言，案例教学法是非常重要的，其要求学生可以作出具有高水准和高质量的网页。首先，要拓展学生的视野并开拓学生的思维，所以，教师在进行教学的过程中一定要精心的设计各种案例，而且这些案例应该是由易至难，不可以让学生产生害怕困难的心态而打击了积极性。（3）项目教学法：在设计项目的时候要注意学生的知识接受能力和特点，考虑学生的原有基础以及认知能力有限，在设计的过程当中要从学生的角度去思考，按照学生的实际水平设计每个模块，再针对不同程度学生设计不同的练习，把控好项目的层次性。比如：在学习表格的时候，有的学生是已了解一定的知识，但有的学生却从未接触过，如果单是传授，一些学生会对此失去兴趣。所以在设计项目的时候要针对不同层次的学生进行，设计出不同的子项目，精心组织教学的内容让所有学生都可以顺利完成。
三、考核的方式应该可以体现出设计的能力
中职网页课程的考核不能只是关注于设计软件的运用，更多的是应该掌握好主体性的原则，即在考核的每一个环节中，强调学生的创造性以及自主性，尽可能的让学生去思考、创造、研究，充分指导学生学会计划、设计、创新和创造。对网页课程进行阶段性的考核，积极的鼓励学生进行各种新思想和方法的探究，并且在考核的过程中制定出相应的激励方式，让学生可以有取得完成任务后的成就感。
四、结束语
网站首页制作实例 第5篇
1、网站的策划与设计
网站的整体策划是根据学校工会领导的综合部署下进行的，这里需要工会工作人员认真讨论研究后，给网站制作人员下达明确的任务说明，由于工会工作人员的精心准备，对网站的风格、网站的功能、网站的规模、网站的模块划分已经非常明确。经过工会工作人员和网站制作人员的共同探讨协商，整理出网站的初步风格、功能要求和模块设计。
参考其他学校的网页制作效果，使用美术基础和网页制作软件PS，设计出来3套网页效果图初稿，每套均有首页，二级页面、三级页面的具体效果，最终由领导确定了一套。在设计的过程中，参考美术老师的意见，借鉴加创新，结合网页的特点，如单位使用像素，宽度适合于800像素的显示器。导航栏的高度要适中，整体结合“块”结构，使用分栏设计，整体风格统一。定稿后，由网站制作人员对网页效果图进行切片处理，作为组装网页的原素材和参考图。根据网站的具体功能，将网站划分为模块：工会简介、工会文件、工会简讯、工会活动、女工园地、健康人生、法律法规、友情链接。其中有些模块只需要一个页面，更多的模块需要二级网页、三级网页的显示。多数模块的内容是需要存储在数据库中的，因此二级模块、三级模块的设计要用到数据库中的内容。
2、网站的制作
网站的制作使用DW软件完成，具体制作步骤是：首先创建站点，设置服务器，使用DIV+CSS方法创建各个模块的页面和框架，链接数据库，在各个页面设置绑定记录集，设置服务器行为。网页的制作是最为繁琐的工作，首先依据网页设计效果进行布局的设置，具体方法是使用DIV进行布局，然后使用CSS方法对各个DIV样式进行设置，在设置样式的时候，选择使用外部样式表的方法，因为外部样式表更易于管理。在设置背景图像时，使用PS的切片工具进行制作，切片工具有一个BUG，就是其存储名称不能修改，因此在切片时，最好的方法是先设置好切片的名称属性，在导出时就可以使用这个名称命名切片了，同时存储的格式最好是GIF格式，因为这个格式支持透明背景，并且在网页浏览器中支持渐变效果。网页特效的制作是很有意思的一件事情，这是需要使用JS代码，网上有很多JS代码的效果和原程序，但很麻烦的一件事情是如何读懂这些代码，把相应的内容替换成你所需要的内容，比如，图片说明文字，超链接等等，还有一件事情是，网上提供的JS效果并不是你所需要的尺寸和颜色，这也需要你读懂JS代码，同时把相应的样式修改成你所需要的样式。本网站使用的JS特效有一个新闻展示效果，具体制作方法是下载JS代码，修改JS代码，把JS特效嵌入到相应的DIV中，其中的制作难点是，网站要求新闻展示是随时间更新的，这就需要把静态的新闻换成动态的新闻，因此需要从后台数据库中提取相应的字段，同时在后台管理模块中，还要相应的模块处理新闻的增删改查。
网站后台内容管理是方便网站维护人员工作方便专门制作的，工会网站的维护工作是由工会工作人员远程进行管理的，因此就有必要制作一个专门方便工会工作人员管理网站内容的模块。其制作内容就设计到对后台数据库的增删改工作，由于在数据库设计过程中，没有考虑到后期的维护工作，因此在对新闻内容的增删改工作上，出现了需要给多个表进行增删改的要求，因此建议今后设计数据库时，将所有的新闻表重新整合，以类别区分各种信息。
3、网站的上传与更新