网页设计和制作策划书（定稿）

第一篇：网页设计和制作策划书（定稿）

网页设计和制作策划书

总体可以分为以下几点：

1、建设企业网站所遵循的一般原则

（1）完整性原则。企业网站是企业在互联网上的经营场所，应该为用户提供完整的信息和服务：网站的基本要素合理、完整；网站的内容全面、有效；网站的服务和功能适用、方便；网站建设与网站运营维护衔接并提供支持。

（2）系统性原则。同时提供设计方案。设计实施单位应充分了解企业文化和企业机构及管理信息等基本情况，对营销目标、行业竞争状况、产品特征、用户需求行为以及网站推广运营等基本问题等要素融入到网站建设方案中。

（3）简单性原则。在保证网站基本要素完整的前提下，尽可能减少不相关的内容、图片和多媒体文件等，使得用户以尽可能少的点击次数和尽可能短的时间获得需要的信息和服务。

（4）友好性原则。网站的友好性包括三个方面：对用户友好——满足用户需求、获得用户信任；对网络环境友好——适合搜索引擎检索、便于积累网络营销资源；对经营者友好——网站便于管理维护、提高工作效率。

（5）适应性原则。企业网站的功能、内容、服务和表现形式等需要适应不断变化的网络营销环境，网站应具有连续性和可扩展性。

2、网站优化

网站优化包括三个方面：对用户获取信息优化、搜索引擎优化、网站维护优化。

（1）网站栏目结构合理，栏目设置不要过于复杂；

（2）网站导航清晰且全站统一，通过任何一个网页可以逐级返回上一级栏目直到首页；

（3）网页布局设计合理，网站设计符合用户浏览习惯；

（4）重要文字信息尽可能出现在网页靠前位置；

（5）字体清晰，CSS风格协调一致；

（6）最多3次点击可到达产品详细内容页面；

（7）通过网站任何一个网页不超过3次点击可达到站内其他任何一个网页；

（8）遵照搜索引擎为管理员提供的网站优化指南，通过网站结构和内容等基本 要素的优化为搜索引擎检索信息提供方便，不采用任何被搜索引擎视为垃圾信息的方法和欺骗搜索引擎的方式（如堆积关键词、用户不可见文本、页面跳转、复制网页等等）；

（9）网站首页、栏目首页及产品内容页面均有一定的文字信息量；

（10）每个网页有独立的、可概括说明该网页核心内容的网页标题（而不是全站或者一个栏目共用一个网页标题）；

（11）每个网页有独立的、与该网页内容相关的META标签设计（包括description和keywords）；

（12）每个网页有独立的URL；

（13）产品内容页面URL尽可能简短且体现出产品属性；

（14）产品/企业新闻详细内容页面是独立网页不是弹出窗口；

（15）对于产品品种多的企业网站，要有合理的产品分页方式；

一网站名称

绿色的灵动

二主题思想：

让原创精神穿越人群，在绿色的灵动中寻找创意。

三个人分工

1、主页制作：（谢龙、李金洪、王海灏---环艺四班）

2、设计模板制作：谢龙 广告模板制作：李金洪摄影模板制作：王海灏

3、网页设计策划书：（谢龙、李金洪、王海灏---环艺四班）

四设计网页前的市场分析

1、原创作品的意思就是内容不是抄录别人的，而完全是自己创作的，包括原创文学、原创音乐等等。

原创作品是对既定参照物的怀疑与否定，是在刷新固有的经典界面之后呈现出破土而出的生命气息，是在展现某种被忽视的体验，并预设着新的可能性；原创是可经过、可停留、可发展的新的存在，是新的经典的原型，具有集体共识的社会价值。

原创作品不是对既定状态的完善与提升，也不是对已有的存在的另类注解；注解可以发展原创，但不产生原创。原创作品也不是形式的突围表演，不是先锋理念的夸张与变异；反叛的行为具有对既定秩序与价值的否定，但不指向原创以及原创作品。

通过我的创作活动产生的具有文学、艺术或科学性质而以一定物质形式表现出来的一切智力成果（即作品），并且内容不是抄录别人的，而完全是自己创作的称为原创作品。

2、人群分析：原创一直作为一种青年人群的喜爱，中年人和青年人也是原创产品的主要创作群体。绿色能给青少年儿童一种生机和活力，能为失落者带来新的希望，让原创精神穿越人群。

五、创新点——绿色与原创

分析：绿色为植物的色彩，绿色的明视度不高，刺激性不大，对生理作用和心理作用都极为温和，因此人对绿色的嗜好范围很大，给人以宁静、休息、使之精神不易疲劳。刚好也是大自然草木的色，所以绿色意味着自然、生命、生长，同时绿色也象征着和平。在交通信号中又象征着前进与安全。

原创作品是对在刷新固有的经典界面之后呈现出破土而出的生命气息，是在展现某种被忽视的体验，并预设着新的可能性；原创是可经过、可停留、可发展的新的存在，是新的经典的原型，具有集体共识的社会价值。

六、建设网页的目的及功能定位

1、建立网页是为了和大众共享自己的原创作品并开展业务，是个人市场开拓的延伸。

2、根据网页功能，确定网页能够达到宣传和让客户更好的了解原创的目的。

七、网页内容及实现方式

根据网页的目的确定网页的结构导航。

1、一般网页应该包括：首页、设计、摄影、广告、联系方式、在线留言等内容。内容包括：作品展示、视频、背景音乐及留言板块。

2、根据网页的目的及内容确定网页整合功能。

八、网页设计

布局简单合理，格调清新自然，有艺术感；整体美观协调；网页设计上有比较良好的用户界面，提倡原创，整体色彩和谐，符合美感，制作精美，个性鲜明；创造性：主题表达形式新颖，构思独特；作品具有想象力和个性表现力；内容、结构设计独到；作品创意独特

1、网页美术设计要求，网页美术设计一般要与企业整体形象一致，要符合企业CI规范。要注意网页色彩、图片的应用及版面策划，保持网页的整体一致性。

2、在新技术的采用上要考虑主要目标访问群体的分布地域、年龄阶层、网络速度、阅读习惯等。

（1）、在网站根目录中开设images common temp 三个子目录，根据需要再开设media 子目录，images目录中放不同栏目的页面都要用到的公共图片，例如公司的标志、banner 条、菜单、按钮等等；common 子目录中放css、js,、php、include 等公共文件；temp 子目录放客户提供的各种文字图片等等原始资料；media 子目录中放flash, avi, quick time 等多媒体文件。

（2）、在根目录中原则上应该按照首页的栏目结构，给每一个栏目开设一个目录，根据需要在每一个栏目的目录中开设一个images 和media 的子目录用以放置此栏目专有的图片和多媒体文件，如果这个栏目的内容特别多，又分出很多下级栏目，可以相应的再开设其他目录。3.temp 目录中的文件往往会比较多，建议以时间为名称开设目录，将客户陆续提供的资料归类整理。

（3）、除非有特殊情况，目录、文件的名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；目录的命名请尽量以英文为指导，不到万不得已不要以拼音作为目录名称，经验证明，用拼音命名的目录往往连一天后的自己都看不懂。

九、网页测试

网页发布前要进行细致周密的测试，以保证正常浏览和使用，主要测试内容：

1、服务器稳定性、安全性。

2、程序及数据库测试，网页兼容性测试，如浏览器、显示器。

3、文字、图片、连接是否有错误。

少采用大型图片，用户关心的信息在首页体现，不应多次点击；

•首页下载速度要快；

•首页有效信息量丰富；

•首页有标题；

•提供一种以上外语链接页面。

•主页布局比整洁，重要信息得以重点体现；

•打开网页不宜弹出多个窗口，影响正常浏览；

•不要刻意追求“创意”效果，以至于很难理解网站要表达的意思。

页面信息：

•重要信息完整，如联系方式和产品介绍等；

•页面信息足够，减少多次翻页；

•去除与企业形象、产品、促销等方面无关的信息；

•产品详细介绍内容过少；

•内容页面没有标题，或者全部使用公司名为标题；

•客户能够方便的及时维护补充，保持其时效性；

•不允许有无任何内容的栏目。

网页字体和美工：

•注重美术效果，但不必大量采用图片，影响网页下载速度；

•注重美观，但有些连基本信息内容都不可用图片格式，影响基本信息获取； •文字适中、颜色明晰、不影响正常视觉；

•页面不应过于花哨。

必须克服的问题：

（1）网站规划和栏目设置要合理：主要表现在栏目设置不应有重叠、交叉、或者栏目名称意义不明确，容易造成混淆，使得用户难以发现需要的信息，避免栏目过于繁多和杂乱、网站导航系统混乱；

（2）重要信息完整：企业介绍、联系方式、产品分类和详细介绍、产品促销等是企业网站最基本的信息，企业网站上这些重要信息完整；

（3）网页信息量足够：包括两种情况：一种页面上的内容，或者将本来一个网页可以发布的内容不可分为多个网页，而且各网页之间必须有相互链接，不需要再次点击主页；另一方面是尽管内容总量不少，但有用的信息少，笼统介绍的内容多；

（4）栏目层次过深。重要的信息应该出现在最容易被用户发现的位置，应尽可能缩短信息传递的渠道，以使企业信息更加有效地传递给用户；

（5）网站有利于促销：通过网站向访问者展示产品、对销售提供支持，有多种具体表现方式，如主要页面的产品图片、介绍、通过页面广告较好体现出企业形象或者新产品信息、列出销售机构联系方式、销售网店信息等，或者具有积累内部网络营销资源和拓展外部网络营销资源的作用。

1.XHTML 适应现在越多的网络设备和应用的需要 ；

2.XML是web发展的趋势。可以使web平滑的过渡到XML。

3.使用XHTML 严密。

4.XHTML 与其它基于XML的标记语言、应用程序及协议进行良好的交互工

第二篇：网页制作策划书

Game Studio-G

网

页

制

作

策

划

书

小组成员：王振宇、郭云慧、李勇、邹志远、赵永利

网页制作策划书

项目名称：

游戏生活

项目立项背景：

我小组是以近期为我系大学生所比较感兴趣的各种网络游戏为基础，根据各网络游戏的资料为本做出个适合我系普遍大学生游戏生活的网页，主要分为：游戏背景，游戏人物，角色技能，玩家攻略，玩家论坛五个主要栏目+音乐欣赏一个副页栏目。希望能为更多同学在游戏中带来方便，能让同学们在学习之余、游戏之余放松自己紧绷的神经，减缓自己的学习压力等。不期望我们做到最好，只希望我们能做到更好。

项目目标：

1.短期目标：

我小组在短期为同学们营造良好网络游戏环境，使同学们在游戏之余能放松一下自己的神经，减缓自己的心理压力 2.长期目标

我小组研究本项目是想通过网页的形式把近期大家比较喜欢的游戏总结归纳到一起，使同学们能在这里找到同学们所玩的游戏，找到同学们需要的资料。由于我们小组初学，不可能把网页做到那么完美，但是我们会更加努力。

项目目的：

我们小组的项目目的只有一个就是放松同学们的神经。

网页制作原则：

1、整体规划合理，主辅菜单明显，各栏目规划清晰。

2、网页导航明确，重点突出。

3、网页有良好的扩充性。

4、有安全的运行环境。

5、网页中各功能体现明显，各游戏资料齐全。

6、网页内容与主题相符，不提倡广告等附件。

7、以为大多数同学放松为目的，不提倡不良或非法网

络连接。

8、体现出网页的美感，让同学们能感到温馨，舒服。

网页结构：

网页设计：

1、网站首页

在网站首页我们设计了“游戏背景”，“游戏人物”，“角色技能”，“玩家攻略”，“玩家论坛”五个主要栏目及“音乐欣赏”一个副页栏目，当用户点击五个主要栏目（如游戏背景）时，（以游戏背景为例）我们会为其呈现出“游戏选择”附件，让用户选择自己喜欢的游戏，当用户选择一个游戏（如地下城与勇士）时，网页会出现游戏资料，游戏的背景故事以及发生的年代。以及各游戏的开发商、开发团队等。

2、游戏背景

在本页我们会通过收集资料来根据不同游戏来制作不同的游戏背景，使玩家了解游戏背后发生的故事，我们会根据资料整理出游戏年代里不同的年代发生不同的事迹，以及各人物（包括NPC，BOSS等）的不同事迹以及来历。

3、游戏人物

当用户点击本页时我们会根据用户点击的不同人物提供不同的人物（包括NPC，BOSS等）属性，以及能力值例：物理攻击力：物理防御力：魔法攻击力：魔法防御力：技能加成：

等各项指标以及根据各项指标的数值计算出各个角色的能力值。

4、角色技能

角色人物是游戏里必不可少的，当然在我们这个网页里也是不可或缺的，当然，如果没有技能我相信大家游戏（CF是特例）也没什么兴趣，在本页中，重点介绍游戏人物的技能，我们会将各个游戏里的人物技能呈现给用户，让用户了解各个人物的技能释放以及技能用法。在这里，主要有主动技能和被动技能两种，主动技能即在游戏中需要释放激活的技能，让玩家能攻击或者防御。被动技能主要是玩家在学到该技能后不需要释放激活也能给角色

状态加成或攻击、防御的技能。

5、玩家攻略

当用户了解各个人物（包括NPC，BOSS等）属性以及技能时需要的是如何将这些东西融合在一起，所以就有了“攻略”。我们会将官方攻略，玩家攻略以及一些名人堂的选手攻略（如技能加点，人物打法，任务获取，快速升级，武器装备等）发放到本页，使用户在玩游戏时更加畅快淋漓。

6、玩家论坛

有攻略就应该有交流，在玩家论坛里玩家可以和自己兴趣相投的玩家讨论游戏攻略，聊天交流，等等，在这里玩家可以畅所欲言（非法内容除外）。在本页中玩家注册登陆后可以尽情发言，上传照片（如玩家相册，游戏截图等）。

7、音乐欣赏

当用户玩游戏疲惫时，可以通过听音乐的方式来放松自己的神经，减轻自己的压力，使用户在身心方面都得到放松。在这里我们会根据用户的喜好通过选择方式让用户自己选择自己喜欢的音乐类型来欣赏自己喜欢的音乐。

注：由于我们能力有限也许音乐不够完全，希望能您能谅解。

本网页纯属业余制作，如果有不完善的地方，请多包涵。

小组成员：王振宇、郭云慧、李勇、邹志远、赵永利

第三篇：网页制作策划书

那你这样看是策划什么类型的网站了网站类型有多种：政府网站、商业网站、企业网站、个人网站等

以下是个人网站的策划：

1、网站作用：让别人了解我认识我2、网站规模：因为是个人网站一般由一二十个网页组成，所以规模不大

3、网站目标客户：同学，朋友，和广大青年朋友。

4、网站特色：我的这类网站受众一般为青年人，所以在色彩上和设计风格上追求青年人的口味，画面绚烂，在内容上的特色表现为：

（1）内容标准化与个性化（2）充分体现互动性（3）内容实用性（4）多媒体技术专业性（5）网站平台延展性

5.网站的宣传标语：展示自我，分享快乐。

一、网站的风格及配色方案

1、网站名称：意度空间

2、网站域名：

3、网站LOGO4、网站标准色：整个网站以橙黄色为主基色，配以黑白色,我认为配这种色代表年轻人的激情。

5、网站标准字体：在字体上我主张采用默认字体，因为这种字体无论在那种浏览器上都能正常显示。所以我采用系统默认字体。

二、网站的栏目设计（画出栏目结构图）

三、网站设计和制作中所采用的技术

1、Flash特效功能

2、图片展示功能

3、文章查询功能

4、相册功能

5、在线视听功能

6、我的QQ群功能

7、文件下载功能

8、在线留言功能

9、友情链接功能

10、时钟功能

11、电子邮件功能

12、点至通讯录

13、圈子（我的QQ空间）

14、网摘功能

15、新闻功能

四、首页的设计简述为了使我的的首页美观生动，吸引人在我的首页我还添加了形象开头动画页面在页面上我首先映入你眼帘的是美丽的西京图片在它的上面我添加可透明的FLASH动画，这样会使网页具有动态美的感觉，加上合理浅淡桔黄色，动听的背景音乐，无论是从视觉，听觉还是感觉上都是一个不错的网站。

在网站的右上角我还插了滚动字幕，这样可以让浏览着第一时间了解我本站的最新动态。在网页的右下角是我的网站的名称，通过点击它就可以进入我的主页。

五、栏目页及内容页的设计构思我的个人网站大体上包括一下内容：我的圈子，我的相册，我的音乐，最新动态，项目互动，资源下载，六大模块这六大模块简介如下我的圈子简介：

（1）介绍我的班级和我班级里边的同学，把我班里边的同学加到我的网页中并对每个人做详细的介绍，形成一个同学录一样的页面，在这里边每个人可以都可以尽量书写个人的兴趣爱好。

（2）个人简历。首先是个人详细的自我介绍，然后加上个人的求职信个人简历，以便企业更深的了解我（3）因为只要有QQ号的几乎都有自己的空间所以我可以加个超连接，连接到我的QQ空间我的相册。

我的相册简介：

（1）设计个人的相册

（2）朋友的相册

（3）贴图，如果发现好的图片我收集起来可以和广大朋友共同分享。我的音乐简介：

这个模块主要包括：

（1）国内最新流行的音乐

（2）日韩最新流行的音乐

（3）欧美最新流行的音乐

最新动态简介：

（1）本站公告

（2）站内新闻

（3）最新游戏

（4）新款服饰

项目互动简介：

（1）请你留言，通过这个模块可以在线时时交流

（2）站内论坛

资源下载简介：

（1）原创作品；在这里可以写个人的个人日志，心得体会

（2）资源共享附栏目页或内容页模板图我的相册、我的音乐、你我互动、最新动态、资源下载

六、网站完成后的自查：网站在本地和上传到服务器中有无图片和动画无法显示或链接失效等情况通过反复的测试，在本地和上传到服务器中都没有发现图片和动画无法显示的或链接失效等情况。

七、网站完成后，你打算如何做进一步的推广，请写出网站推广的方案。（根据电子商务的知识写出较为详细推广方案）电子邮件推广电子邮件是最有效的网络许可营销方法之一。

分为：广告邮件、电子杂志两种。

前者通过广泛发布邮件信息获得第一注意力；后者通过用户许可，获得定期、定向宣传效果，起到事半功倍的效果；搜索引擎加注统计表明，50%以上的自发访问量来自于搜索引擎；有效加注搜索引擎是注意力推广的必备手段之一；加注搜

索引擎既要注意措辞和选这好引擎也要注意定期跟踪加注效果，并做出合理的修正或补充；广告策略广告是注意力营销和推广强有力的手段，包括网上广告和网下广告，网上包括付费广告，互换广告，友情连接等方法网下推广法网下推广方式多样，除广告外还包括：确定网站CI形象，宣传标识，口碑传递参加公益活动，活动赞助，派发小礼品、传单、作小型市场调查，相关单位机构合作等；雁过留声法大量访问同类网站或者人气旺盛的网络平台，发布留言和论坛信息（可用技术手段实现）内容主要有：本网站介绍或者本网站部分精品内容发布，吸引爱好者访问；整合营销与推广联盟策略首先实现同

以下是企业类型的网站策划：

1、建设企业网站所遵循的一般原则

（1）系统性原则。同时提供设计方案。设计实施单位应充分了解企业文化和企业机构及管理信息等基本情况，对营销目标、行业竞争状况、产品特征、用户需求行为以及网站推广运营等基本问题等要素融入到网站建设方案中。

（2）完整性原则。企业网站是企业在互联网上的经营场所，应该为用户提供完整的信息和服务：网站的基本要素合理、完整；网站的内容全面、有效；网站的服务和功能适用、方便；网站建设与网站运营维护衔接并提供支持。

（3）友好性原则。网站的友好性包括三个方面：对用户友好——满足用户需求、获得用户信任；对网络环境友好——适合搜索引擎检索、便于积累网络营销资源；对经营者友好——网站便于管理维护、提高工作效率。

（4）简单性原则。在保证网站基本要素完整的前提下，尽可能减少不相关的内容、图片和多媒体文件等，使得用户以尽可能少的点击次数和尽可能短的时间获得需要的信息和服务。

（5）适应性原则。企业网站的功能、内容、服务和表现形式等需要适应不断变化的网络营销环境，网站应具有连续性和可扩展性。

2、网站建设基本流程规范

企业网站建设（升级改版）包含下列基本流程：

（1）制定网站规划方案：包括网站预期目标、行业竞争状况分析、网站栏目结构、用户行为分析及内容规划、网页模版设计、网站服务器技术选型、网站运营维护规范等基本内容；

（2）网站技术开发、网页设计；

（3）网站测试；

（4）网站内容发布；

（5）网站维护及管理。

3、网站域名及网站技术规范

（1）采用基于XHTML的国际WEB标准（CSS+DIV）；

（2）网站首页为顶级域名而不是多级层次 ；

（3）网站首页及各栏目和内容页面均不采用网址跳转方式，不采用过渡页/桥页等网址重定向；

（4）合理应用静态网页与动态网页，网站栏目首页和其他重要页面采用静态网页；

（5）网页内容页面层次不宜过多，不超过四个层次；

（6）采用主流域名：.cn、.com.cn、.com等；

（7）一个网站对应一个主域名，现有多个域名需统一；

（8）网站链接错误率在一定范围之内，首页等重要页面无死链接；

（9）网站设计对不同浏览器具有兼容性。

4、企业网站的基本功能和内容

（1）与企业办公网实现无缝链接；

（2）具有信息发布、产品发布和管理功能；

（3）产品推荐/广告管理功能；

（4）详细的公司介绍；

（5）详细的联系方式；

（6）合理的产品分类/汇总/列表；

（7）详细的产品介绍内容；

（8）销售及售后服务相关的联系和服务信息；

5、网站优化

网站优化包括三个方面：对用户获取信息优化、搜索引擎优化、网站维护优化。

（1）网站栏目结构合理，栏目设置不要过于复杂；

（2）网站导航清晰且全站统一，通过任何一个网页可以逐级返回上一级栏目直到首页；

（3）网页布局设计合理，网站设计符合用户浏览习惯；

（4）重要文字信息尽可能出现在网页靠前位置；

（5）字体清晰，CSS风格协调一致；

6、网页模版设计

（1）重要信息尽可能出现在用户最关注的位置；

（2）网页宽度定位适应当前主流屏幕分辨率模式；

（3）保持整站CSS风格一致；

（4）超级链接有下划线或颜色的明显指示；

（5）整个网站中在新窗口打开或原窗口打开网页的规则一致；

（6）网站首页字节数不宜过大；

（7）多语言版本网站内容之间的切换方式设计合理。

7、企业网站可信度

（1）网站具有必须的法定证书；

（2）对企业基本状况的介绍真实可信；

（3）公布顾客服务/售后服务承诺；

（4）有必要的个人信息保护声明；

（5）网站公布的联系方式有效，尤其是地址、固定电话和Email地址；

（6）网站公布的Email地址与企业网站域名后缀一致而不是免费邮箱；

（7）网站主域名与企业名称/品牌/核心产品一致或相关；

8、网站运营维护

（1）建立网站内容发布审核机制，始终保持网站内容的合法性；

（2）保持网站服务器正常工作，对网站访问速度等进行日常跟踪管理；

（3）保持合理的网站内容更新频率；

（4）网站内容制作符合网站优化所必须具备的规范；

（5）重要信息（如数据库等、访问日志等）的备份机制；

第四篇：网页制作教学设计

网页制作教学设计

网页制作教学设计1

教学目标：

1、知识与技能

（1）了解超级链接的含义及链接源和链接目标的含义，掌握同一站点内以及不同站点间网页超级链接的创建方法。

（2）掌握网页内书签的作用及创建书签链接方法，掌握交互式按钮、框架网页内超级链接的设置方法。

（3）理解热区链接的含义及创建方法。

2、过程与方法

（1）通过创建网页超级链接的操作，使学生了解网页中创建超级链接的基本方法，破除对网页链接的神秘感。

（2）通过对不同对象设置超级链接的操作，使学生总结出操作的规律，培养学生自主学习与操作的能力。

（3）通过网页不同的超级链接方法，拓展学生思维，创建多种形式的网页链接。

3、情感态度与价值观

（1）通过链接我国主要自然保护区网页，激发学生热爱祖国、热爱自然、热爱生命的激情。

（2）完成超级链接，使学生感受成功的喜悦和快乐。

教学重、难点：

1、教学重点：

（1）超级链接的含义及链接源和链接目标的含义。

（2）超链接的制作方法——给文字、图片制作超链接，制作书签链接，给交互式按钮制作超链接，框架页面内的超链接，图片区域制作超链接等。

2、教学难点

（1）书签链接中名称及对应链接位置的设定。

（2）在框架页面中制作超链接时，目标对象所选择的显示窗口形式。

教学方法与教学手段：

任务驱动法、讨论探究法、讲解与演示法、类比知识迁移法。

教学准备：

“动物——人类的朋友”站点，包括未链接的网页，如欢迎页、表格页、框架页，表单页等。

教学过程：

1、引入

展示两个主页，一个已经创建了链接，一个没有创建链接，让学生进行比较并找出区别，引出本课课题——超级链接。

提出：我们在先前的学习中，哪个软件中的相关操作与它类似？什么是超级链接？找一个例子，分析链接源和链接目标分别是什么？

学生展开交流，通过对比找出不同点，并积极思考，回答老师的问题。

设计意图：通过对比操作、交流，再辅以知识迁移，明确本节课教学内容。

2、新授

（1）站内超级链接

引导学生回顾PowerPoint中超链接的制作方法（教师提示：右击链接源，利用快捷菜单制作超链接），辅以教材中的内容，让学生自行探究并完成以下操作：

任务1同一站点内不同页面之间的链接

○1制作首页（欢迎页）到表格页的超链接。

○2给表格页内交互式按钮设置超级链接，链接到相关页面。

○3给框架页内交互式按钮设置超级链接，链接到相关页面。

教师巡视，及时指导，安排学生示范操作并讲解如何制作超链接。

交互式按钮的超链接制作要求在框架网页中演示操作。老师可以提问学生：演示者操作的对吗？有没有问题？

引导学生发现问题：超链接制作完成后需要检验（保存后预览）。

教师讲解，突破难点，再交由学生操作。

以上是同一站点内不同网页之间的链接，有时一个页面中内容过多，需要不断拖动滚动条实现阅读，能否实现快速跳转呢？

任务2同一站点内同一页面内的跳转（链接）：在“动物趣闻”页面内制作书签链接。

教师讲解：由生活中的书签引入，介绍“书签链接”的概念，然后再演示如何操作。

提示：书签链接的双向性问题（返回）。

学生认真听讲后模仿制作，教师巡视进行指导并反馈学生的完成情况。

（2）站间超级链接

仅凭我们课堂上制作的这些页面还不足以详细介绍我们的主题，此时我们还可以借助超链接，链接到因特网上的其他网站，以丰富我们的内容。

任务3借助热区链接，为“友情链接”页面制作超链接，链接我国一些自然保护区网站。

有了以上基础，可安排学生自学教材中有关热区链接的相关内容，学生探究操作后教师再安排学生进行演示，辅助以提问的形式检验学生的自学情况。

3、总结与评价

开展同学间的互助，检验其链接完成情况，推荐优秀同学做展示。引导学生分类总结本节课的知识点。

网页制作教学设计2

教学目标：

1、让学生掌握在网页中插入表格的方法以及表格的修改

2、学会利用表格来规划网页

3、培养学生创新的能力以及动手操作的能力

教学重、难点：

利用表格来规划网页，从中培养学生的创新能力

教学过程：

一、情境导入

同学们你们善于观察吗？老师先考考你们，我们一起来看一组图片，你们看看在那里看过呢？学校缓台的窗台上。你们的观察能力真的很强啊，对，这些都是我们学校美术的特色作口，盘画。其实，我们做过很多作品：有手工作品，语文课中的作文、书法等都是作品，这节课我们以绘画作口品为例，做一个学习园地网页，把我们的作品展示到自己的班级网站中，以便我们更好的努力学习。现在我们就一起来制作吧！

二、新知探究

首先我们来打开上节课的班级网站，在这个网站中新建一个网页，并保存成“学习园地”。

教师讲解：如何制作学习园地网页。

1、制作网页的标题：输入文字，并设置文字的格式。

2、插入表格：单击“表格”中的“插入表格”并对表格属性进行设置。如：行、列的操作，对齐方式等。同时讲解什么是行，什么是列，以及单元格的概念。

3、修改表格：调整表格行高和列宽。

4、在学生学会插入表格的基础上，来设计网页，展示作品。并讲解在单元格中可以插入图片、文字。那我们就一起快快去做吧！插入图片，并在图片的上面或下面进行图片的注释。

5、进一步设置单元格的背景，来美化网页。

6、设置超链接：通过导航栏目，设置文字超链接。选中文字，点击右键选择超链接在列表中选择你要链接的网页，单击“确定”按钮。

7、学生在教师的讲解后，学生自己动手操作制作网页。教师进行指导。（伴随音乐）

三、作品评价

1、生评：从网页设计上，美观程度上，知识落实上重点评价。

2、师评：对学生作品进行评价，并对其它学生的评价加以更完整的解释。

四、总结

我们这节课主要是利用了表格来设计网页，以使来美化我们的网页，通过绘画作品的展示，学习更多的知识。

网页制作教学设计3

一、课程基本信息

课程编号：

中文名称：网页设计与制作

英文名称：Web Design and Production课程类别：选修课适用专业：所有专业

开课学期：20xx—20xx第2学期总学时：24学时总学分：1课程简介：

本课程突出网页设计与制作的现代特点，从Internet的基础知识入手，重点介绍HTML超文本标记语言，以及所见即所得的网页设计制作工具Dreamweaver的基本操作流程。从静态页面到动态页面由浅入深的介绍网页设计与制作全过程。采用案例分析和亲自实践的方式突出、突破课程的重点和难点。并指导每一名选课的同学为自己建一个博客网站，以此提高同学对网页设计与制作的兴趣和爱好。参考书：

1、网页设计与制作教程，熊前兴闵联营，科学出版社；

2、网站与网页设计，张贵明，清华大学出版社；

3、网页美术设计原理及实战策略，王晓峰焦燕，清华大学出版社；

4、网站建设典型案例，张枭，清华大学出版社；

二、课程教学目标：

网页和网站是Internet的重要组成部分，企业、公司和机构通过网站来宣传推介自己的技术和产品，个人发布主页展示自己的风采，人们从不同类型的网站来获取需要的信息。因此，设计与制作网页已经成为计算机应用技术的一个重要方面。本课程的主要教学目的是使学生掌握网页设计与制作的基础知识，能运用网页工具设计和制作常用网页。

三、理论教学内容与要求

第一章、网页的基础知识（1学时）

（1）Internet基础知识

（2）www简介

（3）网页制作的技术和工具介绍

第二章、超文本编辑语言HTML（8学时）

（1）HTML文件的基本结构

（2）文字和段落标记

（3）列表标记

（4）图片标记

（5）表格标记

（6）超链接标记

（7）表单标记

（8）框架标记

第三章、JavaScript语言（4学时）

（1）JavaScript语言简介

（2）JavaScript编程基础

（3）基于对象的JavaScript语言

（4）JavaScript程序实例

第四章、层叠样式表CSS（1学时）

（1）CSS概述

（2）CSS属性

第五章、可视化网页设计工具

（1）网页的基本操作

（2）图像、表格与超链接

（3）表单与框架

（4）添加网页元素

（5）发布站点

第六章、动态网页设计语言ASP（4学时）

（1）ASP简介

（2）VBScript脚本基础

（3）ASP的内置对象

（4）实用文件

第七章、利用AD0访问数据库（1学时）

（1）数据库的连接

（2）数据库的检索

（3）数据库的操作

总结复习（1学时）

四、实验教学内容与要求

五、作业

六、考核方式

期末考核每个同学为自己设计制作一个博客网站。

七、成绩评定

1、自制网站（80%）

2、平时考勤、作业（20%）平时成绩分配：

平时考勤5次，每次2分，共占10%作业5次，每次2分，共占10%

八、执行大纲时应注意的问题

根据学生对课程内容的掌握和理解程度会对进度做适当的调整。

网页制作教学设计4

一、学习内容分析

《H5快速制作网页》是苏教版《初中信息技术》8年级第3章《主题网站设计与制作》第2节《制作网页》中第1课时的内容。H5是指第5代HTML标记语言，其搭建的站点可方便地应用于PC、Android、iOS等多种平台，它为互联网内容的呈现提供了一种全新的框架和平台，包括免插件的音视频、图像、动画、本地存储以及更多酷炫的功能。通俗地说，H5是一种创建网页的方式，用H5创建的网页以文字、图片、动画、声音等相结合的富媒体出现，页面图文并茂、生动活泼、传达方便、易于推广。

二、学习者分析

本节课的学习对象是八年级的学生，处于这一年龄段的学生，思维活跃，具备一定的理解能力和较强的自学能力。通过前面的学习，学生已熟练使用WPS、Photoshop等软件，也掌握了规划设计主题网站的方法。本节课以iH5软件工具为平台，学习用H5快速制作网页。然而学生从未接触过iH5，对于陌生软件的学习，有些畏难情绪，觉得无从下手。但是在日常生活中，他们经常能接触到各种各样的手机H5网页，如企业宣传、个人简历、邀请函、纪念册等，这些H5网页给大家带来了全新的体验，技术本身带来的新奇感让学生心生向往。

三、学习目标

知识与技能：能列举H5网页的特点；掌握在iH5软件中添加和编辑文字、图片、动画等元素的方法以及设置对象属性的方法，理解舞台、页面、对象之间的层级关系。

过程与方法：通过制作校园文化艺术节邀请函，经历制作H5网页的基本过程。

情感态度及价值观：感悟网页制作并非难事，软件使用有共通之处。

四、教学过程

（一）创设情境，初认H5

以艺载德、以艺促智，一年一度的校园文化艺术节又开始了，同学们踊跃报名，比拼才艺。八年级将举行以“多彩校园，闪亮你我”为主题的汇报演出，充分展示八年级同学的青春活力和精神面貌。

思考：本次演出将要邀请家长参加，你会选择什么样的方式来做出邀请呢？（口头传达、短信、纸质邀请函等）

活动1：体验“校园文化艺术节邀请函H5”，初认H5。

（1）二人一组，一位同学在手机浏览器中打开；另一位同学在电脑浏览器中打开（网址：xxxxxx）。浏览后回答以下问题：

不同平台的浏览效果是否一致？为什么？

这支H5中具有哪些媒体元素？

用户能参与其中吗？

你会用什么方式推广这支H5？

小结：

（1）H5具有跨平台、支持多媒体、可交互、易推广等优势。以上特点使得H5可能成为我们发出邀请的首选。

（2）“校园文化艺术节邀请函H5”为何如此吸引人？观看视频，思考到底什么是H5？

小结：H5是指第5代HTML标记语言，也指用H5语言制作的一切数字产品。通俗地说，H5是一种创建网页的方式。用H5创建的网页图文并茂、生动活泼、传达方便、易于推广。

设计意图：与H5相关的概念性知识抽象、枯燥难懂，如果采用讲授法，学生并不容易理解。因此本节课创设了学生现实生活中的情境，以制作校园文化艺术节邀请函H5为主题，设计了4个问题，每个问题目标指向明确，容易引起学生的共鸣，激发学生的思考并得出结论。通过微视频用通俗易懂的语言帮助学生进一步认识H5，内化知识。

（二）根据需求，规划H5

凡事预则立，不预则废，要制作汇报演出邀请函，首先对每个页面的内容、素材等进行一个简单规划。

活动2：根据需求，选择素材，规划邀请函。

设计意图：学生已经学习过网站的规划，所以容易理解规划的重要性。教师通过搭建“规划表”这个支架，引导学生根据制作校园文化艺术节邀请函的需求，对所要制作的邀请函进行初步的规划，帮助学生理清楚每个页面的内容和所需添加的元素。

（三）知识迁移，制作H5

能够用于开发H5网页的工具很多，今天以iH5软件工具为平台，学习使用H5快速制作网页。

活动3：找“共性”，探“个性”，认识iH5软件。

（1）使用课前申请的账号，登录网址：，进入在线编辑平台。

（2）对比Photoshop界面，认识iH5界面，找出相同之处和不同之处。

小结：相同之处：_______________________（菜单栏、工具面板、编辑区）

不同之处：_______________________（对象树面板）

（3）比较PS中的图层面板和iH5中的对象树面板，思考对象树面板的作用。

小结：对象树面板可以用来管理舞台中的对象，对象树中的层级关系为：舞台→页面→文本、图片等素材，每个页面中的对象上层覆盖下层。

活动4：利用iH5软件，制作邀请函H5。

（1）观看操作指导微视频，自主探究页面的制作，完成以下问题：

设置背景：选中页面1，在属性面板中找到_____________选项，添加背景图片。

添加文字：选中页面1，在工具面板中选择_____________选项。

添加图片：选中页面1，在工具面板中选择_____________选项。

小结：添加文字、图片的一般步骤：选择位置—添加对象。

（2）展示学生作品，师生共同分析存在的问题，寻求解决方式。

问题1：首页、内容页都播放同一素材。

原因分析：素材全部都添加在了舞台之中，其层级关系在内容页和首页的上一级。

问题2：内容页没有显示内容。

原因分析：素材全部都添加在了首页之中，而不是对应的内容页中。

设计意图：迁移是人类认知的一个普遍特征，因为新的学习总是建立在原有学习基础之上。学生原有的知识是Photoshop软件使用，将Photoshop和iH5进行对比，引导学生发现界面组成的“共性”与“个性“，让学生初步认识对象树面板，学会利用对象树面板来管理素材。在制作H5时采用局部“翻转课堂”的形式，通过高效、简短的微视频和几个思考题，引导学生思考探究；在学生遇到问题和困难时，师生共同分析问题，解决问题。给学生“瑞士奶酪式”知识建构时间，使学生从规律的获得到知识的应用有一个过渡和渐进的过程。

（四）自主探究，美化H5

活动5：美化完善邀请函H5。

（1）邀请函中的标题、内容文字等选用什么样的字体、字号合适？如何设置？

（2）如何改变图片大小，修改图片的亮度、对比度等？

（3）如何设置元素的动态效果，使得网页更生动？

小结：

（1）选中文字或图片——属性面板——修改设置。“邀请函”等标题文字字号一般选用大些，宜用饱满的字体，以达到醒目的作用；内容用于提供具体信息，文字字号可以小些。

（2）图片选用要符合主题，色彩和谐。字体颜色与背景要有一定的对比度。（3）选择要添加动态效果的对象——选择动效命令。注意：设置合理、适度的动态效果，可以给观赏者带来较好的视觉体验。

设计意图：对邀请函的美化可分成两个部分：一是对邀请函中的文字、图片进行美化，二是合理设置动态效果。单从技术角度来讲，这些操作是比较简单的，只要学会设置属性面板即可。但是邀请函的美化不是天马行空，随心所欲，还需要一定的艺术欣赏能力。因此首先让学生带着问题思考如何设置文字、图片？设置动效时需要注意的问题？得出一定的结论后，让学生带着构思去美化邀请函，以减少学生操作的盲目性。

（五）作品展示，共析H5

活动6：发布和评价作品。

（1）对于制作好的作品，将其发布到网上，这样其他人就可以通过电脑和手机访问你的作品。请保存当前的网页并发布到网上。

（2）同桌之间用发布的网址或二维码相互访问对方的作品。

（3）根据评价表对同桌的作品进行评价。

（4）根据同伴及老师意见进一步修改作品。

设计意图：学生在制作完成邀请函后，进行保存，发布就可以浏览到自己的成品，极大地提高了学生的学习兴趣。将学生的作品进行展示，师生共同赏析作品，根据评价表进行点评，给出建议，然后进一步完善作品。

（六）知识梳理，展望H5

展示思维导图，梳理本节课内容：

总结利用iH5制作网页的基本过程：

观看视频，结束本课：随着信息技术的高速发展，H5可谓是无处不在。H5可以是各种宣传网页、在线游戏，甚至户外大屏中的互动也是H5。在未来5-内，H5或将会成为移动互联网领域的主宰者。

设计意图：借助思维导图，将关键知识点结构化，清晰形象地呈现出各知识点的脉络关系，有助于学生从整体上把握知识，完成知识的建构。最后观看H5应用视频，了解H5的日常应用，对未来展望，进行情感升华。

网页制作教学设计5

1、教学目标知识与技能：灵活运用添加超链接和在网页中插入表格方法，根据网页内容进行页面布局，完善网页,掌握网页布局的技能和技巧。

过程与方法：培养学生加工信息和应用信息的能力及培养学生思维能力，规划能力、创新能力、及合作能力。

情感与态度：使学生感受中国源远流长的历史文明，并通过网页传递给世界；帮助学生树立良好的信息道德意识；让学生享受成就感，树立自信心。

2、学生分析初中二年级学生感知能力较强,理解能力和抽象思维较弱;学生基本学会使用在网页中插入表格的方法，但分析信息、处理信息和应用信息能力较弱;对教学内容的了解程度较强。

3、内容分析

教学重点：利用表格对网页页面进行布局。

教学难点：怎样合理、美观地设计网页页面布局。

此部分教学内容在整个网页设计知识体系中处于综合处理信息的重要部分。

4、教学策略设计

（1）．教学方法设计

我根据教学主题及其教学目标确定的教学指导思想是以学生为主体，以学生自己的亲身体验展开探究式小组合作学习。本节课采用研究体验式教学法,建构主义模式下的任务驱动式教学法组织教学。首先设计“总任务”，再细分成若干“小任务”，实现教学目标。

（2）．教-学流程和教-学活动的设计思路

整个教学活动，尤其是学习活动，我采用探究式学习法，又称研究性学习，我强调的是学生在教师指导下，根据各自的兴趣、爱好和条件，再结合与自己有相同或相近的兴趣、爱好的同学组成合作伙伴，共同选择西安不同的旅游景点，确定研究课题，借助“表格布局”功能规划七天的旅游行程，独立自主结合小组合作开展研究，进行合理的网页布局设计，达到从中培养创新精神和创造能力及审美能力的一种学习方式，实现“双赢”。建构主义学习理论认为，学习过程不是学习者被动地接受知识，而是积极地建构知识的过程，把学过的网页设计知识综合应用起来，由于建构主义学习活动是以学习者为中心，而且是真实的，并且以完成特定的任务为动力，因而学习者就更具有兴趣和动机，能够鼓励学习者进行批判型思维，能够更易于提供个体的学习风格，展现自己的独特思维，不受现有网页模式的拘束。基于构建主义的探究性学习模式，我的设想是整个教学过程是动态的，学生是学习的主体，教师是学生学习环境的创设者、学习动力的激发者、学习过程的指引者和学生学习的协作者。

（3）．应用信息技术的依据或考虑

信息技术在本次教-学活动有不可替代的功能。利用信息技术中计算机技术进行网页设计，实现教学目标，完成让世界各地的人实现“网上游古都”。在教学中计划通过探究式教学方式，小组合作学习方式和“任务驱动式”教学策略，自主设计网页，发布网页，运用网络使信息技术的这些潜在优势发挥作用并真正促进学生能够结合实际应用，通过自主实践，完成“网上游古都”任务，并同时完成了学习任务，进一步建构了自己的知识体系，并实时地享受到巨大的成就感。

（三）、教与学的过程

1．教与学的过程

活动内容

教师活动

学生活动

设计意图

创设情境

激发兴趣

［创设情境］

“要想了解中国上下五千年文明历史，请到西安来！”近几年，越来越多的外地游客涌向西安。“十一黄金周”即将来临，大家想不想用网页形式向外地游客介绍宣传西安，让更多的人来西安，领略其古老的魅力！我们上节课把利用搜索引擎找到的有关西安的历史文物古迹的文字信息和图片信息整理制作成有关不同景点的网页，但信息是否显得很零散？怎样把景点信息整合规划，让人们先在网上一饱眼福，轻松网上游古都？

设计一个含有指向各旅游景点网页的超链接的主页。

提供信息活条件，激发起学生的兴趣。

［导语］

我们可在主页中制作一个西安旅游景点导航栏，但怎样合理规划各旅游景点，并且使页面布局美观，整洁，分类清晰？

利用“表格”。

为细化任务埋下伏笔;并且激发学生的认知冲突。

［出示课题］

今天我们就围绕“西安七日游”，在主页中利用表格规划设计旅游行程，本节课的课题是《“黄金周”—规划网上西安七日游》

学生明确本节课课题，初步了解任务。

出示课题，介绍总任务。

［分组方法］

根据对各旅游景点的兴趣及当初搜索信息的分工情况及本节课任务分工，四人一小组。

学生进行分组

为细化任务做准备

出示任务

明确分工

［出示总任务］

每个组围绕主题，利用表格规划设计旅游行程，并建立好超链接，利用主页展示出来。

学生明确任务

明确总任务

［作品形式及分工参考］

形式：创建并完善主页，并展示整个网站。

分工参考：

内容版式规划

整理七个旅游景点网页

超链接的建立与维护

作品演示解说

学生明确汇报形式，分工参考。

使学生明确各自任务后，通过研究，探讨，操作，通过电脑媒体来完成任务。

活动内容

教师活动

学生活动

设计意图

出示任务

明确分工

[角色分工]

学生自由分组后,共同研究选组长，组长进行给组员分配任务。

学生共同研究选组长,并协调分配好任务.

锻炼学生自主协调分工能力。

［出示作品评价标准］

教师出示作品评价标准：

作品内容：设计含有七个链接网页的主页，资料丰富，内容准确。

技术表现：页面布局设计合理，颜色搭配和谐，主题突出，作品演示运行正常，操作熟练。

创新特色：作品布局规划有独特之处，有新意。

提示学生有三条帮助热线：

1、组长2、邻座学习伙伴3、教师4、自学课件

学生明确要求。

培养学生的创新能力，规划能力，思维能力和合作能力。

学生研究探索合作交流创作作品

［创作作品］

播放舒缓音乐，为学生营造自由和谐气氛。

（提示学生利用网上邻居把各组员的作品组合在一起，共同完成此任务。）

学生根据角色分工，按小组形式开始完善网站。

学生体会了超链接的作用，练习了超链接的使用，理解了表格强大的页面布局功能；培养学生处理信息和应用信息的能力；通过学生间交流合作，老师及时点拨与指导，培养学生发现问题和解决问题的能力。

［展示作品］

下面请各组派代表，到教师机前展示以下你们的旅游行程。其他同学观察后，可提意见或建议。

由小组代表展示组内作品，并详细说明旅游景点规划的呈现形式，内容选择及整体构思。

锻炼学生口语表达能力和分析说明问题能力。

合作成功展示作品成果汇报交流探讨

［交流探讨］

教师引导学生探讨页面布局的方法和技巧；谈看完作品后，对其改进意见；进行组间互评和组内自评。

评出“最受欢迎奖”（即如果此网站上传到网上，点击率最高），“最具创意奖”“最佳布局奖”作品。

学生间相互交流探讨。

培养学生合作交流能力。

［教师点评及检测］

教师从页面布局，整体规划合理性，创意等几方面进行点评。

学生思考，怎样完善作品。

教师鼓励学生发展创新思维，页面布局规划能力，逻辑思维能力及合作能力。

教师或其他同学提问页面布局的方法。

学生代表演示

及时检测学生对表格的掌握情况。

你受到的最大启示和收到的最大收获？成功经验和失败教训？

学生回答

巩固知识，培养情感

[完成旅游规划，培养情感]

同学们已熟练掌握表格的使用方法，并且加工和应用信息的能力增强。

悠久的历史积淀和丰富的人文资源，使西安居中国六大古都之首，是世界四大文明古都之一，著名的旅游中心城市。希望你们热爱中国博大精深的历史，感受西安古老的魅力！

学生感悟。

全课总结，培养道德情感。

全课总结知识延伸

［达到目标，知识延伸］

网站制作好了，怎样让世界各地的人都看到你们的网站呢？

想当我们的故乡—大庆的小导游吗？赶快制作一个“铁人故乡—大庆”的网站吧！

学生思考。

学生课后实践。

为激发下一节课内容（上传主页）的兴趣奠定基础。

让学生可把本课内容应用到实际生活中去。

培养学生自发探究能力。

2．关键环节提炼

利用信息技术创设情境，播放一段自拍的录像，内容大体是：一位外国友人，想要来中国四大古都之一“西安”旅游，但想要自助游，想借助因特网，先在网上了解一下西安，并参考一下旅游行程。通过此录像激发学生兴趣并利用信息技术呈现问题，使学生产生认知冲突，培养学生发现问题、分析问题、解决问题的能力。我通过学生利用信息技术完成此项任务，促进学生对基础知识、基本技能的学习。我利用信息技术，尤其是网络提供的有关“西安”丰富的旅游景点介绍资源，帮助和拓展学生的学习。让学生借助信息技术手段开展探索、总结并进行创作。我利用信息技术展示学生自评，学生互评，教师评价的评价表，为学生的学习提供评价、反馈和矫正。我利用网页自学课件和网络教室教学广播系统支持师生间、生生间的交流对话。

3.教学反思

本节课主题明确、集中，让学生分成小组，合作探究学习，给出特定的总任务，有利于学习效果评判的可比较性，也便于学生之间的广泛交流和良性竞争。通过利用信息技术规划规划网上西安七日游，对西安七个主要景点的介绍，让世界了解西安，每个学生在共同完成“网上游古都”网站作品后，让每个学生都有完成任务和宣传中国源远流长的文明历史的成就感，并感到自豪。

本节课，在小组合作学习过程中，学生之间互学互教，彼此交流探讨，经历了提出问题、分析问题和解决问题过程，每个学生都承担一定学习任务，防止滥竽充数，促进了学生的参与程度、认知深度，高质量地实现了课程的目标，增强学生的责任感。但个别学生没有认识到合作学习的重要意义，自主探究能力较弱，容易丧失信心。

教学实际实施过程，有学生提出：我对中国的少数民族文化感兴趣，能否制作一个宣传中国五十六个少数民族文化的特色网站？于是我了解到学生对中国的不同文化感兴趣，可在课外活动小组完成此任务或作为课外自主探究性学习课题来探究。

本节课让学生掌握了“表格”的妙用，还提高了加工信息和应用信息的能力，而且使学生感悟到了中国上下五千年的博大精深，对祖国更加热爱。

（四）、教学评析：

在新课程标准的理念中，明确提出要关注全体学生，建设有特色的信息技术课程。在教材因篇幅的限制，提供给学生感知的背景材料极其有限，“信息”且都处于“静止、储存”状态，不利于学生的感知和抽象概括。因此，允许教师在不改变教材内容、体系、结构的前提下，经教学法的加工，营造引入新课的“情境问题”的氛围。学生在积极的参与、体验、研究并在已有知识经验的支持下，自主能动地探索，实现知识的再创造。

教学活动在面向全体的同时更注重学生情感的`交流协作意识与因材施教。更注重学生个性培养和创新智能的开发。

学生自主性学习，需要有一个适应的过程，开始阶段，布置任务要明确具体。

学生之间的交流和帮助比较少，自主学习的能力还要不断提高等。

附：学生学习过程及典型成果

另附：小组成员分工表

第________组组长________作品题目______________

小组成员

主要负责工作

网页制作教学设计6

一、教学目标：

1、知识与技能：

（1）、了解框架结构网页的概念及在网页中的作用，了解它与表格网页的区别。

（2）、掌握框架结构网页的建立、框架结构的拆分、框架的删除等。

（3）、掌握框架中页面设置及保存的方法，如设置初始网页按钮、新建网页按钮等。

2、过程与方法：

（1）、能够区分框架结构属性设置与网页属性设置的不同点。

（2）、通过框架结构网页设计，使学生对网页的整体结构有更进一步的认识。

3、情感态度与价值观：

（1）、能够将表格与框架结构网页结合使用，在创作中体验乐趣。

（2）、培养学生网页设计的审美意识、创新意识。

二、教学重点难点：

1、教学重点：

（1）、框架网页的作用和功能，框架的建立与属性设置。

（2）、框架中各个页面之间的关联，每个框中页面的设置方法。

（3）、框架网页的保存方法。

2、教学难点：

（1）、框架结构网页中框架属性与页面属性的设置方法。

（2）、理解框架结构的多页面存储方法及各页面之间的关联。

三、教学过程：

1、创设情境、导入新课

（1）、教师展示一组表格制作的网页，引导学生找出它们的共同特点。并提问如何快捷地制作这种网页（学生回答：使用复制、粘贴快捷地制作）。

（2）、教师又提问：有没有更好的方法呢？相同的区域我们能否只做一遍呢？从而导入新课——框架网页的制作。

设计意图：通过对比、比较，引导学生思考，激发学生学习的乐趣。

2、任务驱动、自主学习

（1）、教师展示一个框架网页，引导学生理解框架网页的概念。

（2）、出示任务一：框架网页的新建与保存。教师要求学生先阅读教材中的操作步骤，再尝试完成书本第227页的实践学习。

（3）、教师讲解框架结构中的每个框都是一个独立的选项文件，即网页文件，因此当框架确定之后，需要为每个框分别指定其网页文件的来源，可以通过每个框中的“新建网页”按钮和“设置初始网页”按钮进行选择。

（4）、学生理解框架网页的概念，通过阅读教材中的内容，自学新建框架网页的操作，初步了解“新建网页”和“设置初始网页”两个按钮的不同，并认真聆听教师的讲解，注意观察，按要求模仿操作。

（5）、出示任务二：相关页面的制作与设置。教师要求学生先阅读教材中的操作步骤，再尝试完成书本第228、229页的实践学习。

（6）、学生制作相关页面，同时也是对前面所学内容的复习和回顾。教师反馈学生的操作情况，开展评比活动，对表现好的学生给与表扬。

（7）、出示任务三：框架网页属性的设置。学生自主探究学习，有问题可向教师寻求帮助。教师基础扎实的同学完成任务后可进行拓展学习。

（8）、教师请学生示范操作，并说明自己设置的方法和原因。同时鼓励做的比较好的学生。

设计意图：培养学生的自主学习能力，对于课堂教学难点，学生在教师的讲解后模仿操作，有效突破难点。

3、展示作品、课堂小结

（1）、教师给出一些常见的框架结构应用界面，如Web邮箱页面等，引导学生总结本课内容，并让学生分组，推进一些优秀作品在全班展示。

（2）、教师点评，并鼓励完成作品比较好的学生。

设计意图：拓展学生的视野，使学生了解框架的应用方法。展示优秀作品鼓励学生，激发学生的创作欲望。

四、教学反思：

1、本节课是在学习完简单网页、表格布局网页、交互式网页的基础上，进一步页的设计方法。由于学生已经具备了一定的网页设计基础知识与技能，所以教师可以根据学生的实际情况，采用更灵活

的教学方法。教师可以简单介绍框架结构网页的功能及框架的建立与编辑方法，以及框架属性设置与网页属性设置的方法与区别。然后由学生根据教师提供的学案及演示动画，完成框架网页设计任务。

网页制作教学设计7

教学目标：

1、知识与技能：

（1）理解框架的概念及用途。

（2）掌握框架网页的新建、制作、编辑与保存，了解框架的拆分方法。

（3）初步掌握将框架结构与表格布局结合使用来制作网页。

2、过程与方法：

（1）通过对表格网页的分析，体验新知识（框架结构网页）的优点，从而促进其学习新知识。

（2）理解框架的概念与组成，学会分析网站的结构。

3、情感态度与价值观：

（1）通过以“人与动物”为主题的框架结构网页制作活动，了解更多有关人与动物和谐相处的知识，通过故事趣闻，增强学生关注动物的兴趣和意识。

（2）能够将表格与框架结构网页结合使用，在创作中体验乐趣。

教学重、难点：

1、重点：框架的概念、用途， 创建、编辑与保存框架网页的方法。

2、难点：框架的拆分。

教学方法：

对比教学法、探究学习法、模仿学习法。

教学准备：

整理、归类相关素材，并按要求摆放。

教学过程：

1、引入

老师展示一组利用表格制作的网页，要求学生仔细观察，找出它们的一个共同特点（学生答：网页上方和左侧内容都是相同的，仅右下部分内容不一样），并提问如何快捷地制作这种网页？（学生答：使用复制粘贴快捷地制作）

尽管复制、粘贴能为我们节省时间，但有没有更好的方法呢？相同的区域我们能否只做一遍呢？今天我们要学习的内容——框架网页制作，就能给我们带来更多便捷。（让学生明确框架网页使用的场合）

2、新授

（1）框架网页概念

由以上例子入手，再展示一个框架网页，教师引导学生理解框架网页的概念

（2）框架网页的新建与保存

教师要求学生先阅读教材中的操作步骤，再尝试进行探究操作。

任务1 创建“横幅和目录”结构的框架网页，新建top和left页面，并学会保存。

框架结构中的每个框都是一个独立的选项文件，即网页文件，因此当框架确定之后，需要为每个框分别指定其网页文件的来源，可以通过每个框中的“新建网页”按钮和“设置初始网页”按钮进行选择。在top和left页面中，单击“保存”按钮，随即开始保存。

此处为教学难点，可先由框架的概念入手，再针对保存页面中的蓝色部分，教师进行讲解，教会学生注意观察。

学生要理解框架网页的概念，通过阅读教材中的内容，自学新建框架网页的操作，初步了解“新建网页”和“设置初始网页”两个按钮的不同，并认真聆听教师的讲解，注意观察，按要求模仿操作。

设计意图：培养学生自主

学习能力，课堂教学难点在教师的讲解后模仿操作，有效突破难点。

（3）相关页面的制作与设置

框架网页中相关页面的制作，需要结合表格来布局，插入文字、图片和交互式按钮。

任务2 top和left页面的制作。

要求：

○1top页面内插入1行2列的表格，左边单元格插入logo图片，右边单元格插入banner图片。

○2 left页面内插入5行1列的表格，在每个单元格内依次插入交互式按钮（共4个），交互式按钮文字为展示介绍的相关内容概括，在第5个单元格内插入一个邮箱指示的图片。

○3调整表格边框的粗细。

○4为main区域设置初始页面。（该网页由教师提供现成的）

学生制作相关页面，同时也是对前面所学内容的复习和回顾。老师反馈学生的操作情况，开展比一比、评一评活动，对表现好的学生给予表扬。

（4）框架网页属性的设置

创建好框架网页后，可以根据实际需要改变框架的属性。

任务3 调整框架的大小、设置框架的边框、设置框架窗口中的滚动条等。

提高任务：框架的拆分。

学生自主探究学习，可向老师寻求帮助。完成设置后请同学示范操作，并说明自己设置的方法和原因。操作基础扎实的同学完成任务后可进行扩展学习。

3、总结与评价

老师可以给出一些常见的框架结构应用界面，如Web邮箱页面等，引导学生总结本课内容，梳理课堂知识，并让学生分组，推荐一些优秀作品进行全班展示。

设计意图：开拓学生的视野，使学生了解框架的应用，教会学生要善于总结，要学会学习的方法。

第五篇：网页设计策划书

网站名称：獭兔啃书娱乐

本站经由Dreamweaver CS4排版、PS进行图像处理制作而成，对网下载的素材进行了再次处理深加工，并参照了部分网站设计优点，这是我第一次独立完成一个网站，有许多不足之处，请各位朋友浏览本站后，不吝赐教，谢谢！

设 计 理 念

⑴ 内容决定形式我做的是小说推荐网，因此去看过许多小说网站的排版与布局，许多的网站都是长度很长，我个人并不喜欢这样的风格，因此决定采用1002*768的版面，同时我个人的经验，希望能把小说分成不同的类型，因此采用了三个小方面进行（现代都市、古代情愫、作家专栏），同时想将一些优秀的小说网站介绍给读者，于是又开辟了小说站，于是分区完成。⑵ 先整体，后局部，最后回归到整体。

全局考虑，把能填上的都填上，占位置。然后定基调，分模块设计。最后调整不满意的几个局部细节。

设 计 工 具

本网站是结合 Dreamwaver CS4和 Photoshop 来制作的。

制 作 流 程

一、制作前的准备

我知道制作网页效果图之前，首先需要进行相应的准备，而不是打开软件上来就进行制作，首先要分清你要什么，你有什么。

（一）、网站的策划阶段

1.所要设计网站的类型。（我所做的这个网站是小说推荐网，它的类型属于使用者通过浏览器就可以获得网站所提供的信息与服务，我是信息的收罗者和部分信息的提供者）。

2.网页的构成。（我知道不同性质和类别的网站，页面的内容安排是不同的。我所做的这个网站主页的基本内容包括标题、导航、主体内容等，其他页面相对简单。）

3.页面的安全尺度。（建议分辨率为1002*768）

4.页面功能设计。（一个好网站的要时时与浏览者互动，沟通，于是加入了E-MAIL和QQ联系方式，同时我希望浏览者在一个有美妙音乐的环境中浏览我的网站，因此在首页中加入即开即停的音乐播放器。

5.素材的收集和整理。（由于前面已经把网页的类型，内容和功能确定了，接下来就可以根据确定好的内容和类型来收集素材，素材包括文字和图像，在我的网站中所涉及的图片大多是一般网络上可以找到的。它们只是被我拿过来进行了一点点加工和处理。

（二）、网页的版式布局阶段

我的网站中的版式布局大致使用的是水平分割，灵活部局的方式。

（三）网页的配色阶段

通过对图片进行PS，在PS中进行了配色，决定采用与顶端图像相似的颜色，同时不加入背景，以防止背景图像对页面的干扰。

二、效果图的设计（略写）

由于我所做的是小说推荐网站，不需要太多的修饰与华丽的布局，所以采用了对称性设计这一理念，显得结构严谨而整洁。

三、网站页面的生成（略写）

创建Web站点——制作形象首页——使用Photoshop进行切片并保存——使用Dreamwaver CS4进行调整并编缉——形象首页完成这次的设计主要以表单为主进行的设计，再在单元格中加入所需元素，除首页以外的其它页面大致设计过程一样，同时为了增强条理性，相同类型的分页面格式一样。

网页设计技巧

一、首页设计技巧

在此次的网页设计中，我将首页制作成纯粹的形象展示型，这种类型文字信息较少，图像信息较多，对图像等进行了不同的链接，从而避免过多文字造成浏览者的视觉疲劳，同时又让必要的信息传递给他们。

二、风格保持一致——内页设计技巧

利用导航取得统一：导航是网站的一项重要组成部分，一个出色的导航将会给人留下深刻的印象。

三、色彩搭配

我的页面顶部有一点朴素沉闷，这与我想突出文字的沉韵气质有关，但这样为免让人压抑，于是在首页中用了大篇幅的粉色系图案来减轻这种沉闷，同时又使用了含金属光泽的边框来给人干净理性的感觉。

设 计 结 构 图

↙↘

(xijuanfeiwosc)