新闻网站的设计与制作

新闻网站的设计与制作（精选9篇）

篇1：新闻网站的设计与制作

校园网站的设计与制作

“听者有心”的首页

创建背景

这个网页可以说是采用了二分栏结构，却有一些变化，包括网页上方占很大面积的Banner、栏目名称以及网页下方放置版权信息的区域，都为传统的二分栏结构注入了一些新的元素，让网页不那么规矩，更加迎合学生的品位。而背景对于这个网页来说也非常重要，用淡雅的蓝色与“听者有心”这个网页标题相呼应，使浏览者打开网页的一瞬间就有一种清新脱俗的感觉，进而产生亲切感。

1.打开Photoshop，按【Ctrl+N】，新建一个宽“760px”，高“900px”的文件，将它命2.按【Ctrl+A】进行全选，填充淡蓝色（R228，G246，B244）；新建图层，将其命名名为“听者有心”。

为“灰色”，在页面的上下分别创建高为“30px”和“100px”的矩形选区，填充上浅灰色（R236，G236，B236）。如图所示。

97298299300点。选择柔角的画笔，调整画笔的大小，在你认为合适的地方点缀出朦胧的圆点，把它调整到【听者有心】图层的下面，最终Banner的效果如图2-10所示。

图2-10 梦幻Banner最终效果图

制作信息面板

1.新建【信息面板】组，在组内新建图层，命名为“信息面板”。新建【路径5】，绘制如图3-1所示的路径，创建选区之后填充白色。

图12-3-1 绘制信息面板

2.双击【信息面板】图层的缩览图，在弹出的对话框中勾选【描边】复选框，做如图3-2所示的设置，其中【颜色】为灰色（R204，G204，B204）。

02303

图3-6 加上“more”按钮并作装饰

这样，信息面板就制作完成了，最后要做的是作整个页面的细节修饰。

进行细节修饰

1.在页面上部的浅灰色和白色横条都是用来放栏目文字的，如果两部分除了颜色没有任何差别，会让浏览者觉得乏味，所以我们要作一点小变动。首先，新建图层，命名为【白色条纹】，在页面右上角绘制如图4-1所示的宽“270px”的图形，其中2条间隙高“2px”，中间的白色细线高“1px”。

图4-1 绘制白色条纹

2.创建一个矩形选区，在选区内右击后选择【变换选区】，把选区的宽度改为“7px”

05306307308-

篇2：新闻网站的设计与制作

摘要：如今网络遍布世界各地，中国互联网经过10多年的发展，已经形成了一个巨大的产业。建立个人网站可以使更多地人展示自己的才能，更加的人性与多元化，因此越来越多的人选择建立自己的个人网站。学习好网站建设，不仅可以提高计算机的专业技术水平，更重要的是，今后对于网站的运用可以得心应手，方便交流，本网站设计主要应用了网页制作软件dreamreaver、flash、html技术。以静态网页为主，同时加入了部分的动态效果，包括简单的后台处理与内嵌网页技术。

关键词：个人网站；Dreamweaver；flash；html

中图分类号：TP393文献标识码：A文章编号：1009-304435-8096-02

1网站制作基本说明

1.1制作人员所需具备技能

静态网页设计与制作是网站建设与开发的重要步骤，如果要想制作出美观、实用的网页，需要制作人员需掌握网页设计基本工具的使用，首先，制作者要掌握HTML标签和语法规则，可以使用记事本等工具编写基本网页，还要掌握dreamweaver网页设计与制作软件，同时，网页设计与制作过程中还要对图片进行处理，所以制作人员需要熟练操作photoshop等图像处理软件。网站制作完成后，制作人员需要具备空间、域名申请和上传网站的能力。

1.2网站运行环境

硬件环境

CPU：主频在166MHz以上，Intel或AMD。

内存：容量在32MB以上。

硬盘：空间在1GB以上，转速在5400转/秒或者更高。

显示器：尺寸在15英寸以上，色彩为16位色以上，分辨率800*600，推荐使用1024*768。

显卡：VGA显卡，显存在1MB以上。

软件环境

操作系统：简体中文版WindowsXP。

浏览器：InternetExplorer4.0/5.0。

调试与运行辅助工具：InternetInformationServer。

2网站的总体规划

2.1网站总体规划

根据自己的思考和设计前的准备，将此个人生活网站分为“首页”、“日志”、“相册”、“个人档”、“音乐”、“收藏”这6个网站模块。总体结构图1所示。

2.2网站的风格

网站整体运用格布做背景，格布上加入格布花、纽扣等进行点缀。风格上主要强调简洁、大方、布局简单的特点。主页由flash制作，通过div+css布局模式进行网站布局风格的`统一，同时利用CSS层叠样式表对网站的导航和字体大小以及版权信息进行统一的设计，使得网站的风格得到了统一。

3网站开发过程

3.1素材准备

素材的准备是制作网站的基本条件，只有准备好必备的素材，才能够快速的制作网站，而不会浪费不必要的时间和精力。

准备网站的素材不仅要从网站的各个栏目的规划考虑，也要考虑各个页面用到的图片、内容、特殊效果等等，具体的网站有：网页大宝库、懒人图库、素材精品屋等。

准备好素材以后，需要对文本、图片、样式、特效等进行基本的处理，同时还要将素材进行分类，具体分类文件夹如：images、flash、music、style。

3.2首页制作

首先把整理好的素材分别放在images、flash、music三个文件夹下。

建立站点

1）打开Dreamweaver软件。

2）单击“站点”菜单，进行“新建站点”操作。

3）在站点定义对话框中输入网站名称“mywebsite”，本地根目录文件夹”是指你网站保存的磁盘路径，选择d：＼myweb后，单击“确认”按钮。

4）经过以上基本操作，一个站点就建立好了。

5）把images、flash、music三个文件夹剪切到站点文件夹下，再新建html文件夹。

6）右键单击“站点”面板中根目录下的html文件夹，新建网页首页文件，命名为”index.html”。

7）打开首页文件index.html进入编辑状态。

8）建立表格，使表格居中对齐。

9）点击表格内部在执行菜单中，插入——媒体——flash。

10）同样的方法插入flash背景音乐文件未命名-5.swf。

11）点击修改——页面属性——外观——背景图像，单击浏览选择所需背景图片。

4模版的建立

1）首先建立一个大表格并且使表格居中，接着制作嵌套表格，使用插入表格命令，在大表格内插入所需行数和列数表格，设置宽度百分比“Percent”（百分比），在文本框中输入100，单击“OK”，所插入的表格刚好充满第一个单元，然后插入一行三列的表格，左右分别为100宽居中表格宽度为600，最后再居中嵌入一行七列的导航栏和一列的文本内容栏。

2）表格嵌套完成后开始编辑导航条，首先输入导航文字内容，给每栏文字分别添加链接为【#】点击导航条表格的，在属性菜单下编辑边框大小为3、颜色为#FFCC99。选择执行菜单中，页面属性——链接，设置文字链接，添加链接效果：链接颜色与已访问链接颜色为#ffcc99变换图像链接颜色为#ffff00，下划线样式为仅在变换图像是显示下划线。

3）添加网页背景图案，页面属性——外观——背景图像，选择好事先存放在images里的背景图案。

4）添加table中的背景图案，单击在属性中选择背景图像，添加图像，这样模板就完成了。

参考文献：

[1] 中文版Dreamweaver CS4案例教程（1CD）[M].北京：龙腾科技出版 ，.

篇3：新闻网站的设计与制作

专题学习网站是指在互联网络的环境下,围绕某门课程或多门课程密切相关的某一项或多项学习知识点,有机地结合起来形成专题,让学习者进行广泛深入研究的资源型学习网站。它可以用来存储传递加工和处理教学信息,能让学生进行自主学习和协作学习,并对学生的学习情况提供在线反馈。根据这些理论,专题学习网站主要包括专题结构化知识库、专题资源库、专题协作学习工具和专题学习评价四大部分内容[1]。

2 专题学习网站的需求分析

《网页设计与制作》在本校是大专学生比较感兴趣的学科,并且本学科具备操作性强、个性突出、资源广泛等特点,有利于引导学生的学习主导性和协作性。

2.1 专题功能需求分析

根据专题学习网站的总体要求和本学科的特点,本专题学习网站主要实现以下功能:

1)资源管理功能。按专题学习网站的理论要求和教学需要,资源管理功能必须能对资源进行查询、修改、删除、分类、整合等资源处理功能,同时还要提供资源的搜索和资源下载功能。2)交流讨论功能。向用户提供一个交流讨论的空间,可以对学习内容的交流讨论,也可以上传与学习相关知识或问题或作品进行交流讨论。3)评价展示功能。包括作业批改、作品展示、自我测试、竞赛投票等在线评价。4)用户管理功能。包括专题学习网站的资源管理用户、学习留言用户和专题论坛用户。根据不同的需要设置不同的权限,以使师生共同使用和合作管理。

2.2 专题角色需求分析

功能的需求主要来源于角色,不同的角色有着不同的需求。本专题学习网站的角色主要有两类:学习者和管理者。各类用户有自己相应的权限,登录后只能访问自己权限内的功能模块。

1)学习者的功能需求。学习者主要是利用专题网站进行学习活动,包括查看专题知识与相关资源、交流心得与讨论问题、提交作品与上传资源、测评反馈与投票评价。2)管理者的功能需求。管理者主要是利用专题网站向学习者提供学习的资源与协作的场景,包括资源管理、讨论管理、评价管理和用户管理。

3 专题学习网站的系统结构设计

3.1 专题学习网站系统框架设计

根据需求分析中的专题网站功能分析,可以把专题网站分为网页基础、动态技术、数据库、辅助工具、作品展示、专题论坛等模块,网站的框架结构设计如下:

1)专题结构化知识:网页基础、动态技术、数据库、辅助软件。2)专题资源库:拓展资源、相关链接、强化训练、素材集锦。3)专题协作学习工具:学习留言、专题论坛。4)专题学习评价:作业批改、自我测验、作品展示、竞赛投票。

3.2 专题学习网站系统程序流程设计

根据需求分析中的专题网站角色分析,可以把专题网站分为前台应用和后台管理两个模块,网站的程序流程图(如图1所示)如下。

3.3 专题学习网站体系结构设计

专题学习网站作为管理信息系统又称MIS(Management Information System)的一种,根据功能需要,主要包括前端应用程序以及后台数据库的建立和维护的后台管理。要把前端应用程序与后端的数据库联系起来,即给用户提供数据库相应信息和将用户相应信息存入数据库等,本专题学习网站基于面向互联网和用户机要求不高的基础上,采用的体系结构为B/S。B/S是Brower/Server的缩写,客户机上只要安装一个浏览器(Browser),服务器安装数据库。浏览器通过Web Server同数据库进行数据交互。那样通过用户的登录,以及相应的权限,就可以实现在远端对系统的浏览、查询和修改。基于B/S的体系结构得出专题网站运行模式包括有客户机、应用程序服务器、数据库服务器三部分[2],其各部分运行工作如下:

1)客户机:属于表示层,用于界面的入导,接受用户输入,然后向应用服务器部分发送服务请求,最后显示处理结果。2)应用程序服务器:属于业务逻辑层,执行业务逻辑,向数据库服务器发送请求。3)数据库服务器:属于数据存储层,执行数据逻辑,运行SQL式存储过程。

4 专题学习网站的功能设计

专题知识资源的输出应用,即前台显示主要是依托动态技术和数据库技术的结合,根据用户需求提供一定的参数,动态地从数据库提取数据,并自动整合为网页形式输出。而作为专题学习网站的管理部分,即后台管理则是通过管理平台与数据库联合起来实现的。

4.1 专题学习网站资源的形成

为了达到为师生提供结构化的专题知识的需要,必定要将学习内容相关的文本、图形、动画、视频等资源按一定的教学策略进行分类、组织、入库,以此达到知识结构化重组,形成了以网页形式的专题网络教学课件[3]。并且提供上传、下载、维护、搜索等资源管理与应用功能,以此形成专题资源库。除了设计组在初期完成的教师教学资料和收集的资源外,网站的管理员或授权的教师甚至学生根据教学的需要和使用的反馈信息,能不断地对专题知识或专题资源库更新、调整。这是一个不断循环、动态调节的资源生产过程。根据数据库设置的角色,用户可以拥有相应的添加、修改、删除、重组资源等权限。并且还设置了审核权,这个权限要赋予教学的专业教师负责,以确保资源的正确与有学习意义的发布。

4.2 专题知识的结构化重组

使用专题网站教学,既要学习专题知识,又要学习有关联且经过整合的拓展知识;既可以根据个人爱好或能力自主选取相应的其它知识学习,还可以进行相应专题的实践训练。基于这些目的,专题网站必须能够提供有针对性的自主探究学习,才能调动学生的主导性和能动性。由于本专题学习网站采取了网页设计的动态技术和数据库技术,所以除了对专题知识的查询、添加、修改等外,还可以对已有的资源进行重组整合。例如,在教学网页图片的应用时,给学生提供了Fireworks软件的拓展学习资源,那样除了可以根据教学进程发布Fireworks的教程外,在学习完Fireworks后,可以将发布的所有Fireworks教程,重组成一个资源。只需要将所有Fireworks教程根据教学顺序,将其超链接集合成一个新的资源发布到专题知识栏目,如此可以方便学生的学习。同样可以对各章节或各年级学习遇到的问题或教师一个阶段的教学心得等,进行结构化重组,有利于不同程度的或不同级别的学生学习和教师对教学的改进。

4.3 专题协作学习工具

专题学习网站为师生提供协作学习的空间,既利于学生之间的交流,共同学习相应内容,也利于学生对相应学习内容反馈问题和教师根据反馈进行调整或解决问题。同时,对学生以外的网页爱好者开放,更利于学生与互联网上的网页爱好者交流,以使知识面更广和交流更深刻。在本专题学习网站,专题协作学习工具主要包括有学习留言和专题论坛。学习留言主要是专题知识后的留言板,在每一个资源后都给学生提供留下学习心得或需求信息的空间,以便于其他学生的便捷认识或教师掌握教学程度。教师对学习留言拥有整理和回复权,以确保信息的有意义和回复相关问题。专题论坛主要为学习者之间或教与学之间进行讨论、问答、交流而进行的协作、探讨学习的交流工具。根据《网页设计与制作》学科特点,将论坛分为新手上路、CSS美化、图片加工、动画制作、数据库、动态技术、素材源码等栏目,可以让师生分享教程和学习心得,探讨相关问题。除专任教师要管理论坛外,还可以在各栏目设置学生版主,这样既让问题得到及时解决,也让资源得到及时更新,还可以加强资源审核。

4.4 专题学习评价

包括学生提交作品、教师评改作业、学生互评、学生自我测试、竞赛投票等功能,根据评价内容不同,有打分数等级的评价,也有详细评析的评价,也有公开投票的评价。主要是要实现到师生能进行评价、能看到评价、能交流评价、能反馈评价,只有这样才能达到评价的最终目的。首先,通过收集与学习专题相关的思考性问题和总结性考察的评测资料,学生完成相应专题或阶段或知识点后,可以进行自我测试,以检测个人掌握程度;其次,学生在此提交作业,教师对作业打分或评析;再次,学生通过网络提交作业或竞赛作品,教师对作业或竞赛作品进行展示,也给学生之间提供了比较和交流,从而进行他人评价和自我评价。

5 结束语

专题学习网站实际上就是一本拓展的课本和一个开放的课堂,有着多元的内容和多样的评价,既使师生学习的空间得到了拓展,也满足了学生因材施教的发展。但正因为如此,专题学习网站不能成为纯粹的资源收集网站,更应该达到鼓励和引导自主学习、协作学习、创新学习的目的。因为不管是教师在教的过程,还是学生在学的过程,都不仅是一种利用资源的过程,更是一种创新资源的过程。因此,专题学习网站的设计要遵循整合性、自主性、交互性、开放性等原则。在设计中注重把主动权交给用户,不要把学习的模式或内容固定,让用户在教与学的基础上,既能学习基础知识和拓展知识,又能讨论交流和相互评价,更能够在教学过程中创造资源。

摘要：信息技术的发展促进了教育信息化,而网络环境下教育资源的建设是教育信息化的重要内容,专题学习网站则是教育资源建设的重要表现方式。该文以茂名学院高州师范分院《网页设计与制作》学科专题为例,介绍专题学习网站的设计,主要阐述了专题学习网站的需求分析、系统设计和功能设计三大方面。

关键词：专题学习网站,网页设计与制作,设计

参考文献

[1]谢幼如,余红,尹睿.基于专题网站的开发性学习模式的效果分析[J].中国电化教育,2004,1.

[2]赵志升,李桂权.一种基于B/S结构与C/S结构结合的新体系结构[J].电子技术应用,2004,(8).

篇4：新闻网站的设计与制作

关键字：Flash技术；学习地图；网站设计

中国分类号：G218.7

1.引言

Flash动画操作简单、功能强大，占用存储空间小，交互性优势明显，可以很好地满足不同用户的需要，目前flash已经具备了后端开发和数据显示的能力，完全可以胜任中小型网站的开发。为了改进教学方法，提高学生的创新思维能力和动手能力，实现资源共享，结合教学实际，师生一起探讨，运用flash技术共同创建了课程网站，该课程网站作为传统教学的补充，大大提高了学习者兴趣和参与积极性，促进了课堂知识的有效迁移。

2.Flash课程网站的设计思路

为了满足学习者的个性化需求，网站分为“基本课程”和“定制课程”两个模块，即网站片头设置两个入口，学习者可以按需选择，基本模块设计依照传统课程设计模式，按照教学目标和知识体系，并列呈现知识内容，网站主界面包含基础知识、技能训练、课程录像、教学资源、案例集锦、讨论交流、作业与答疑等模块；“定制模块”以行业应用为导向，划分不同的案例分区，每个分区包含案例展示、资源下载（、学习地图、在线任务、论坛等模块。所选案例尽可能做到覆盖全面，特色鲜明，代表性强，学习地图包含flash几乎全部的基础知识和操作技能，并与基本课程模块进行关联，提供学习路径，便于学习者举一反三、融会贯通。

3.Flash课程学习地图设计

3.1 Flash课程知识模块设计

Flash课程知识分为三个部分：基础知识、技能训练和行业应用。基础知识包含“工作界面和功能”、“图形绘制与编辑”、“文本应用”、“素材与元件”、“帧、图层与场景应用”、“基本动画制作”、“ActionScript脚本”和“组件应用”；技能训练包含“逐帧动画”和“补间动画”、“引导动画与遮罩动画”、“时间轴特效和滤镜动画”、“脚本动画”和“交互組件”；行业应用包含“商业游戏”、“产品广告”、“网站片头”和“MTV动画”。

3.2 基于MindMap的学习路径绘制

MindMap是表达发射性思维的有效的图形思维工具，思维导图能够充分运用左右脑的机能，利用记忆、阅读、思维的规律，根据不同的学习需求，汇总所有的学习内容，用生动的图画、动画或多媒体等形式勾勒出上行知识和下行知识，形成知识的网状结构，有助于学习者发散性思维和知识的有效迁移。

学习路径的起始点为定制课程中的案例，案例中所涉及的知识技能等都会关联到基本课程模块中的知识资源。从而把整个知识资源通过路径串联成知识网络，指导学生有目的地进行学习。下面以“产品广告”模块中的”M族人”品牌广告为例说明学习地图的绘制。“M族人”制作思路为（1）制作动态背景，关联知识点为“基本课程”模块中的场景切换、逐帧动画和补间动画；（2）制作影片剪辑，关联知识点为元件、矩形绘制工具、线条工具和颜色模式；（3）制作文字动画，关联知识点为滤镜效果和时间轴动画；（4）制作图形元件，关联遮罩动画知识点；（5）为广告添加背景音乐和音效，关联素材导入知识点。

3.3 flash课程网站中学习地图的实现

学习地图的设计主要运用到flash中的ActionScript3.0，该脚本是一种完全的面向对象的编程语言，功能强大，类库丰富，语法类似JavaScript，多用于Flash互动性、娱乐性、实用性开发，网页制作和RIA应用程序开发。直观易理解，运用简单的“停止语句（stop）”、“跳转语句（goto、nextFrame、prevFrame）”、“条件语句（if、else、else if）”、“超链接语句（getURL）”和“循环语句（while、do while、for）”便可完成学习地图中几乎全部的跳转与链接。

4.高职flash课程网站实现与应用

4.1 高职flash课程网站的建设流程

（1）脚本设计阶段，先在word表格中进行，对每一帧进行编号，设计画面，注释画面声音（背景音乐、旁白、讲解语音）、跳转以及效果。由于学习地图是一个动态完善的过程，所以在写跳转脚本的时候尽量考虑到日后的改进，尽量描述相对地址。

（2）Graphic Design平面设计阶段，即元件、场景绘制、文字输入，对于网站片头动画、课件界面、习题界面、考试界面、论坛界面设计等，融入到课堂案例中去，让学生集思广益，挑选出最合适的作品运用到网站当中去。

（3）Flash Design动画制作阶段，录制声音、导入素材，写脚本，然后进行测试与发布，最后完成整个flash网站的制作。

4.2应用效果

由于课程网站是在教师指导下，学生小组协作共同完成的，所以网站形成之初，学生就积极地上传各种优秀的课程资源以及展示自己的作品，在论坛中积极交流心得体会，网站设计过程中有些很好的idea一时不知道该如何通过flash技术实现的，学生们课下会积极讨论，主动查阅书籍或是上网搜索信息，一个个攻克技术难关，在这个过程当中，网站不断完善，学生对flash基础知识的理解更加系统全面，创作出了很多优秀的作品。

5.小结

基于flash技术设计课程网站，教师和学生可以参与到课程网站设计全过程，很好地兼顾平台的人性化、个性化设计。创新性地将学习地图的概念引入课程网站，学生随机进入学习模块，便可完成所有知识节点的系统学习，是该课程网站的一大优势。由于学习地图的绘制是一个长期的不断更新完善的过程，所以课程网站有待于进一步改进和完善。

参考文献：

[1] 宋玉霞.柴华等.Flash CS3动画制作[M].机械工业出版社.2008

[2]高志清.Flash网站制作创意与表现[M].水利水电出版社.2005

篇5：新闻网站的设计与制作

一、课程情况

《网站设计与制作》也是计算机各专业学生学习后续课程的基础，比如学习基于网络编程的动态网页设计技术，学生毕业后可从事网络软件的设计与开发，进行商务网站的设计与制作，同时也可以考取网页设计师、网络软件工程师等相关国家职业资格证书。开设该课程是复合我校关于“高素质、技能型人才”培养目标的需求的，通过该课程的教学，可以培养出一批优秀的、能够在一线工作岗位上从事网页设计与制作、网站规划、管理与维护工作的专业人才。基于该课程的主要工作岗位有：网站管理与维护人员、网页设计与编辑人员、网站策划人员及网页美工人员等。

二、课程教学思路与教学方法改进

学生如果要很好得完成网站制作，所需的的知识体系非常庞杂，其中包括网络基础知识，网页制作技术，平面设计和动画制作等基本要素。具体涉及到网页制作软件，图像处理软件，动画软件，数据库知识，脚本语言动态服务器编程技术等。教学内容比较多，知识点比较分散，而学时仅为48个学时，学习内容多而课时少。经过多年的教学活动的开展和经验总结后，我们总结出一套适合高职学生教学方法，那就是使用任务驱动式的教学方法。我们以前的.教学设计思路是：讲授知识点———设计任务———监督学生完成———验收，现在的教学设计思路是这样的：实际工作任务导向———任务驱动———相关知识讲授。老师在此教学思路中的角色：给学生布置一项工作(实际工作任务导向)———将工作转变为一个任务(任务驱动)———通过任务引出知识点(知识学习)。学生在此教学思路中的角色：通过老师的引导，理解相关任务要求，继而产生强烈的学习相关知识的兴趣，在下一步的知识学习中就能很好地学习，掌握了相关知识后，马上运用于实践，完成老师布置的任务。通过该课程的教学，使学生最终能够自主开发一个完整的网站，毕业后能够直接从事企事业单位网站的开发设计与管理维护等工作。

三、课程体系内容重构

本课程性质是计算机系的基础必修课，教学对象是全系各专业的大一学生，因此教学内容定位于静态网页的制作，以Dreamweaver软件为主线，介绍静态网页设计和制作的基本技术,目前很多网页教材是基于网页三剑客的即Dreamweaver、photoshop和flash，然而当前课时条件和时间条件下，根本做不到三个软件都讲到位，事实上每个软件分开都可成为一门课程，而网页设计课程只能以网页制作软件Dreamweaver为主，其他软件为辅，并且其他软件制作的作品要与网页密切相关为了解决内容多学时少的矛盾，有利于教学的开展和培养学生的动手能力，为此我们对教学内容重新进行了重构，围绕Dreamweaver软件讲解网页制作的方法和技巧，只有在制作图像缩略图、切片、按钮、LOGO图片等时候，才辅助其他软件加工素材或者制作动画。教学内容分为9个模块:模块一、网页设计基础;模块二、页面的基本操作;模块三、简单网页的制作;模块四、网页的样式设计;模块五、实用HTML布局页面;模块六、实用DIV+CSS布局页面;模块七、制作多媒体页面;模块八、网页交互设计;模块九、网站的测试与管理。

四、总结

篇6：新闻网站的设计与制作

【教学分析】

一、教材分析

本教学内容为高中信息技术选修模块《网络技术应用》的重要部分，通过学习，学生能够根据任务需求，选择恰当的工具分析网页。在本章中，通过对一些网页的分析，让学生了解构成网页的各种要素，并了解万维网的基本架构，理解网页的作用。通过教学要学生了解并掌握网站的策划构思的过程，掌握素材收集整理的基本方法，学会最基本的网页制作工具软件的使用。

二、学生分析

学生是教学活动的主体，充分了解学生，是取得良好教学效果的必要条件。通过对学生平时上机情况的观察以及课下和学生的谈话交流，我了解到的学生的主要情况是：

1、高一年级学生经过初中阶段的学习，能够较好地运用搜索引擎、Word、PowerPoint 等常用信息技术工具。

2、具备了基本的网络水平。

3、已具备了初步的小组协作探究能力。

三、教学目标

1、知识目标：了解万维网的基本架构，理解网页的作用，掌握网页元素和网页构件的使用，学会使用常用的网页制作工具。

2、能力目标：通过网页作品的欣赏培养学生搜索、下载、处理和应用信息的能力，培养学生对信息技术的实践应用能力、协作能力和创新能力。通过本课的学习可以培养学生的辩证思维和发散思维的能力、逻辑思维能力及语言表达能力。

3、情感态度价值观目标：培养学生独立思考、自主学习、合作讨论的能力，通过自己探究问题，进一步树立学生学习信息技术的自信，提高学生学习网页制作的兴趣。

四、教学重、难点 1、网页设计的基本流程 2、网页的版面设计 3、网页的色彩搭配 【教学策略】

设计教法，培养学生的学习兴趣、培养学生分析问题、解决问题、综合运用信息技术的能力。设计教学方案，为层次稍低一点的学生创造学习的空间，并能使基础较好的学生有知识拓展的空间。

【教学设计理念】

以学生为中心，以任务为载体，以操作为手段，以发现为宗旨，以感悟为目的。【教学方法】

根据学生的特征，结合他们的认知水平，本节课采用以任务驱动法为主，以讲授法、演示法、讨论法为辅的教学方法。结合任务调动学生的自主探究和合作交流。

【课前准备】

分析教学内容，制订教学方案。采集教学过程中所要用到的文件。制作教学课件。

1、自制PowerPoint演示课件

2、多媒体电子网络教室（教师机、学生机、投影仪）

3、制作作品的各种素材。

【教学过程】 引入

打开几个不同类型的优秀网站，让学生欣赏，指出各网站的设计风格、整体规划、素材的运用、颜色的运用等特点，引发学生兴趣。这些网站都可以在我们的手中做出来。

新授

一、建立站点。

教师演示站点的建立。学生自主完成建立站点

教师结合学生演示,强调创建站点类型、站点保存位置及名称。

学生活动：学生尝试利用FrontPage创建站点，演示操作创建站点的过程和方法。

二、网站的设计

结构设计、版面设计、交互设计。

三、网页的制作

1、表格的建立。

2、强调“表格属性”窗口的设置，并请学生示范操作。

3、添加网页元素

4、进一步巩固消化网页元素——动画文件的添加方法。

5、教师根据学生实际操作状况，针对性地请学生进行操作示范，并归纳小结图片和动画文件的不同添加方法。

四、网页的保存

1、通过确定保存网页文件的文件名index.htm，引出首页的概念及默认文件名的含义。

2、特别指出图片和动画文件的保存方法，突出站点中images文件夹的作用。

五、小结

选取学生作品展开自评与互评，教师引导学生小结网站实现的基本过程。

六、作业

分小组完成，设计制作一简单小网站。【教学反思】

篇7：新闻网站的设计与制作

3、网页中滚动文本框常用来输入内容较多的文本，如用户意见、个人建议等。

4、指向书签的超链接，会在目标URL之前附加上+号。

5、单行文本框可以限定文本框输入的字符数，滚动文本框则无法限定，

6、当一个生产规模大、产品多样化的公司的某种产品有非常独特的个性，并拥有了相对较大的市场忠诚度时，最好采用分散域名策略。

7、网页设计时首先要考虑网页的美观性。

8、网站的维护费用不属于网站投资应考虑的范畴。

9、FrontPage提供了日期与时间的设置，可以让浏览者看到更改网页的时间与日期。

10、在HTML的文件中，无论你在文字或标记之间按下多少个空格，在浏览器中都只会显示一个空格。

篇8：新闻网站的设计与制作

当今发展越来越迅速的网络环境下, 学生对知识信息的需求表现的越来越个性化。这与学校一贯重视素质教育, 并提出相关建议是相同的。在教师指导下, 在素质教育要求下, 根据学生自身条件和兴趣爱好, 尽量自主选择学习方向与目标, 强调以学生为认知的主体。结合并利用校园网的开放性、交互性、资源共享等特点, 教学网站作为一种新的网络教学形态正在获得飞速发展。

2 教学网站设计思想

在教学网站中, 依照需求对各模块作用进行分析, 整个网站有两类用户:教师和学生。因此, 我们可将网站体系分为为不同的两个子系统, 即教师子系统和学生子系统。教师子系统主要内容是后台管理模块, 学生子系统是前台应用模块。网站整体结构如表一所示:

3 教学网站的实现

3.1 关键技术

本教学网站设计制作使用的主要技术是ASP.NET和ADO.NET技术。网站准备了齐全的功能, 其极具较强的交互性, 在网站页面设计制作中, 主要是通过ASP开发技术所形成的动态网站得以实现。因此, 在网页文件设计制作上, 主要以超文本标记语言 (HTML) 作为其基础性的语言, 并加入相对应的ASP程序代码, 再结合相关的、庞大的数据库技术, 从而实现了网站页面的完全交互性。

3.1.1 ASP.NET

ASP (Active Server Pages) , 即动态服务器页面, 是一种服务器端脚本技术, 由因特网服务器执行, 是可以使其嵌入网页中的脚本。它能够把相关程序嵌入HTML页面, 其主要是针对服务器端和客户端脚本命令、Active X组件、Java小程序等, 并创建了基于Web的应用程序和动态交互式Web页。ASP已有最新版本, 而ASP.NET就是这个新版本之一。在通用语言上, ASP.NET也是创建在这基础上的程序架构, 能够共用一台Web服务器运行网站, 还可以开设Web应用程序, 其功能和作用更是有力、强大。

在不同浏览器上, ASP.NET可任由执行编写代码。在服务器端, 一切脚本程序均将存在于HTML之中并被执行, 将执行结果通过服务器, 使客户浏览器得到反馈, 进一步减少了负担沉重的客户端浏览器, 提升其网站网页浏览的连接时速。通过对ASP.NET技术的应用, 可以完成相关实用性功能, 包括计数器、公告板、留言簿、聊天室等。通过采取种类繁多的构建组成, 还能使ASP.NET产生出更加强劲的作用。在File System Object使用时, 可通过服务器, 对其上面的文件进行相关操作, 还可进行浏览、复制、移动或删除等用途。ASP.NET被运用的最大优越点在于, 在对程序实行升级时, ASP.NET具有在服务器上修改文件的功能, 这样就不用对客户端程序进行修改了。

3.1.2 ADO.NET

ADO.NET (Active X Data Objects) , 由微软公司推出的技术, 是Web页面最新的数据库技术。在Internet数据库方面, 通过它能非常容易地得以获取, 在其用户端上, 还能实现随时随地更新的网上显示。通过ADO.NET数据库, 与Web页面进行相关联的模式, 可使Web站点和数据库联合, 不但方便监管和维护页面, 且还能做出更人性、更美观的Web外观页面, 以至能在Web页面的上面, 通过编辑数据库获得管理器界面, 以便在远程控制和存取方面获得实行。通过应用程序使用ADO.NET开发数据库时, 在Web页面方面, 可让其设计人员开发出真正网站, 并即时操作Web页面应用程序。

3.1.3 网络数据库技术

以后台数据库为根本, 网络数据库是通过前台一定程序, 运用浏览器达成数据存储、查询等操作功能的体系。以简单的方式说, 关于网络数据库, 就是用户利用浏览器, 作为输入接口, 输入所需数据, 而这些数据再通过浏览器, 传送到服务器网站, 通过传送到的这个网站, 再对这些数据进行接收和处理, 如把接收来的数据存进数据库, 或对数据库进行查询操作等, 最后, 将操作结果通过网站, 传回到浏览器, 再通过浏览器, 将结果告知给用户。

3.2 网站系统模型

系统结构 (如图一所示) , 一般情况下, 通过ASP.NET脚本程序, 在页面操作上, 可直接访问系统文件和数据库, 通过上传组件, 使部分ASP.NET可以访问数据库和文件系统。

以客户/服务器这种模式, 在Web服务器上, 与教师和学生之间, 建立了以ASP.NET应用为程序的通信连接。在服务器一方, 通过连接线程进行监听, 主要是负责监听关于HTTP的用户连接请求, 并在每一连接用户方上, 创建相对应的消息处理线程。这一线程主要是负责对应客户消息的接收, 在获得消息方面, 采用分析处理这一方法。

针对接收消息这一线程, 是学生方和教师方均各有一个, 负责接收消息, 主要是来自服务方的。采用对用户界面进行对象调用的方法, 把消息要求通过线程体现在用户界面上。对数据库实行操作命令时, 其ASP.NET脚本应含有这一命令, 服务器组建通过ADO.NET, 访问ODBC数据库, 并将其结果通过用户得以回馈。

3.3 数据库的设计与实现

监管和维护网站使用与运行, 是网站数据库的关键功能, 在网站内容方面, 还要对其采取实时更新, 它主要应完成任务是, 对相关信息进行更新和及时保存等, 其信息主要包括用户信息、公共信息、管理员信息、作业信息、答疑信息和课件查询信息。其数据构成与之相对应地, 还要涵盖公告信息表、答疑信息表、课件查询信息表、作业信息表、教师信息表和用户信息表等。

在其中具体内容方面:在公告信息表中, 始终在公告板中存有一定的相关数据。在教师信息表中, 提高全部存放记录的级别, 把用户数据变为老师级别, 并与注册用户区分, 以验证其相关合法性操作为目的。在用户信息表中, 老师和同学先通过注册中心进行注册, 再把相关数据以数据存储方式, 全部存放于其中。在管理员信息表中, 管理员存在于后台系统中, 以存放相关数据为主要工作, 并可同时存放多用户, 无论存放单一还是多个用户, 都可进行统一监管。在课件查询信息表中, 在课件中心层面, 主要是对全部教学资料进行相关数据存放。在作业信息表中, 主要是对有记录数据进行的一些存放, 其相关数据为老师布置作业方面的。在答疑信息表中, 在网上答疑这一部分, 主要是显示于前台部分相关数据的存放。

最后, 运用数据库向导, 可以创建数据库, 编写Access应用程序。通过ASP.NET这一程序运用, 编写数据库和前台页面间程序接口。由于新信息需经常被添加到站点中, 所以, 在ASP.NET接口编写时, 需要提供站点最终使用者, 即不同环境, 包括用户环境和管理者环境。在管理员进入环境时, 需要输入密码, 但从安全性角度来讲, 这也是必要的。

4 结语

伴随快速发展的网络时代, 网络早已成为教学主要补充途径, 对教学网站质量要求也逐渐提高, 设计高质量教学网站非常主要。它将有助于培育学生对学习产生兴趣, 推动教学品质不断提升, 并运用网络这一途径, 更好地为教学网站进行服务。

摘要：本文提出了一种教学网站的设计思路, 并利用.NET技术平台, 给出了具体实现办法。主要采用ASP.NET和ADO.NET技术, 结合网络数据库建立一个可以实时更新内容的网站。通过该网站, 教师可以在教学网站上发布共享教学资源、布置查看批改学生作业, 学生可以和老师实现在线交流、下载教学资源等。

篇9：新闻网站的设计与制作

关键字：高职教育；网站设计与制作；隐性分层教学法；

Abstract：Firstly， according to the characteristics of Higher Vocational College Students diversified， analyzes the necessity of the implementation of hierarchical teaching in the curriculum of Higher Vocational Education in web design and production. Then the effect of two kinds of implementation schemes comparison of hierarchical teaching， obtained covertly stratified teaching method is more conducive to play the potential of Higher Vocational students. Finally， combined with the project oriented teaching mode， expounds the application of covertly stratified teaching method in the curriculum of Higher Vocational Education in web design and production of large area， improve the quality of teaching has the maneuverability.

1、在高职网站设计与制作课程中实施分层教学的必要性

高职院校的学生来源多元化，既有从不同教育层次院校录取的学生，也有从不同生源地过来的学生。因此，这些学生无论是在思想心理、学习能力、行为习惯、家庭背景等方面，还是在计算机操作的能力方面，都有很大的差别。

首先，普通高中和职业院校在人才培养机制上的区别，造成来自这两类院校生源特点的差异：普通高中过来的学生，通常文化基础和理论知识方面会相对扎实，但在计算机专业技能的使用方面会差一些，也没有学过网站制作课程。相对应的，从中职院校录取的学生，其理论知识会差一些，但是在中职院校时就已经学习过网站制作课程，因此，这部分学生对网站制作技能方面会有一定的基础，比较容易上手。

其次，由于生源地的不同，大部分北京的学生或者其它较大城市来的学生，其家庭经济条件相对较好，电脑早就属于基本配备，因此，这些学生对计算机的基础使用是不成问题的。还有少部分从偏远地方来的学生，其家庭比较贫困，家里提供不了电脑，因此，这部分学生有可能连计算机的基础操作都不熟练，更谈不上专业技术方面的操作能力了。

在这种情况下，若无视学生的个体差异，依旧采取统一的授课标准和授课模式，必然会出现这样的问题：一方面，那些对计算机及网站制作技能较熟练的同学，就会觉得上课内容太浅，没什么可学的，对课程的兴趣肯定会慢慢消失殆尽。另一方面，那些基本没接触过计算机的同学，就会感觉学习起来太困难，跟不上进度，慢慢的也会丧失自信失去学习兴趣。鉴于上述原因，笔者认为，在高职网站设计与制作课程中，实行分层教学是非常有必要的。

2、分层教学两种实施方案的效果对比

分层教学的实施方案，通常有两种：第一种，是进行分班教学。第二种，是在班级内部实行隐性分层教学。

第一种方案，分班教学的实施，通常是在课程开始时，利用问卷调查、能力测验、学生自评、教师评价等各种方式，将学生划分到优等班、普通班分别进行教学。在不同等次的班级里，教师可以分别采取相应的教学内容、教学手段，以满足不同等次学生的技能需求。不可否认，分班教学方案便于教师按需要准备教学内容、控制教学进度，而且在很大程度上也确实提高了教学质量。但是同时，也应该注意到这种方案还是存在缺陷，而且这些缺陷可能会影响到学生日后的发展。由于现在孩子大多都是独生子女，自我意识强烈，而这种分班教学打破了原有的行政班级形式，因此在教学的组织和学生的管理方面都会相对困难，学生也更容易出现心理问题。对于普通班的一部分学生来说，分班教学在很大程度上伤害了他们的自尊心，有个别学生甚至会觉得丢脸不愿意去教室上课，直接破罐子破摔。而在优秀班的某些学生，可能会出现沾沾自喜，自以为是的情绪，觉得老师讲的自己都会，不再需要认真听讲了，反而造成学习成绩下降。

第二种方案，班内隐性分层教学的实施，学生依然按照原有的行政班级进行上课，教师只需要在教学过程中暗自给学生进行分层即可。这种方案的实施，不会给学校分课带来任何障碍，同时也避免了明显分层所产生的负面效应。 [1]班内隐性分层方案，可以让学生得到充分的理解和尊重，很大程度上会避免学生自卑或傲骄情绪的出现。由于学生的个体差异，随着教学的开展，每个学生的学情都会发生变化，可能有进有退，教师需要及时灵活的调整各个层次的学生组成，建立有效的激励机制，不断调整优化，尽可能让各个层次的学生都能发挥最大潜能。

3、隐性分层教学的具体实施

3.1、学生的分層

教师在教学过程中要多观察学生多了解学生，综合考量每个学生的智力水平、知识技能、学习态度、发展潜力等各方面情况，然后，在心目中将学生分成A、B、C、D四个层次。 [2]endprint

A层学生：基础扎实，智商高，思维活跃，对新事物的接受能力强，对计算机的操作熟练，有很强的求知欲，学习态度端正，学习方法得当，能够快速有效地完成教师分配的任务。

B层学生：知识、能力和智商都一般，但是有上进心、学习比较自觉，能够尽自己最大的努力完成教师分配的任务。

C层学生：知识、能力和智商均较差，学习积极性也不高，学习习惯不好，纯靠个人能力不太容易完成教师给定的任务。

D层学生：智商不见得真的低，但是学习态度不端正，没有上进心，基本处于自我放任状态。

3.2、培养目标的分层

教师在教学过程中，针对分层后的各个学生群体，也要相应制定不同的培养目标。[3]

A层学生的培养目标：该层次学生有很强的求知欲，接受新事物快，操作能力强，教师应该给他们创造更多的独立空间，重视其知识面的拓宽，对该层学生应该多激励，着重培养他们的创新思维、探索式学习能力，令其在现有水平上超越自我，达到更高层次。这个层次的学生在完成任务的同时，可以鼓励其帮助其它同学解决学习上的困难，增加同学间的感情交流。

B层学生的培养目标：该层次学生有学习热情，但是接受能力相对弱一些，教师应该在学习方法上给予正面引导，培养他们的独立思考、独立学习的能力。对该层学生应该多鼓励，让他们能够完全掌握课程内容，并尽量提高。

C层学生的培养目标：该层次学生学习积极性不高，学习习惯不好，教师要帮助他们逐步改良学习习惯，同时多多夸赞以激发其学习兴趣，培养他们独立完成实训的操作任务。

D层学生的培养目标：该层次学生是班里个别困难分子，可能头脑很灵活，只是不愿意用，非常不好调教，教师对这个层次的学生一定要有充分的耐心和爱心，寻找其闪光点大加赞赏，着重改变其思想状态，培养其社会责任心，并在力所能及的范围内完成最基本的学习任务。

4、隐性分层教学法与项目导向式教学模式的结合

随着高职院校教育教学改革进程的深入开展，项目导向式教学模式已经逐渐得到业界的广泛关注。在项目导向式教学模式中，课程学习的内容，从原先相对孤立的教学案例替换成了现在的仿真企业项目，这些项目通常会涉及到多门学科多种技能的综合应用。在项目导向式教学模式中，课程学习以分组方式进行，一般每组有3～5个学生。結合隐性分层教学法，教师在分组时，可以将不同等次的学生分配到同一组中。这样，在每个小组独立完成一个项目时，A层的学生可以承担项目中比较难的、有创造性的工作任务，同时，还可以帮助组内其它同学；B层的学生可以承担项目中相对复杂工作量大的任务，期间若有需要也可以帮助其它同学解决问题；C层的学生可以承担项目中相对较简单易实现的操作任务。D层的学生可以在其它同学的帮助下完成最基本的工作任务。实践证明，隐性分层教学法与项目导向式教学模式的结合，是一种有效的、切实可行的解决方案。

5、结束语

实践证明，在高职网站设计与制作课程中采用隐性分层教学法，能够充分保护学生的自尊心，重视学生的个体差异，满足学生的心理需求，让每个学生都尽可能的发挥自己的潜能，有利于强化学生的主体地位，能够发挥教师的主导作用。在实施过程中，对教师的专业素养和敬业精神方面都提出了更高的要求，对大面积提高教学质量具有可操作性。

参考文献：

[1]董乃谦.当前我国高职院校实施分层教学的思考[D].上海：华东师范大学，2006.

[2]袁莉.大学英语隐性分级教学模式[J].发展， 2009，（12）：113-113.

[3]张爱梅.试谈分层教学法在高职《中文速录》教学中的应用[J].职业， 2011，（3）：135-136.

作者简介：