首页设计（精选十篇）
首页设计 篇1
首页也叫主页, 它是网站的形象页面, 是网站的“门面”, 故被称为“Home Page”, 它的设计好坏是一个网站成功与否的关键。一个网站主题的鲜明与否、版面精彩与否、立意新颖与否等将直接影响到浏览者是否愿意到该站点中漫游。是否能够吸引众多浏览者留在站点上, 是不是能够促使浏览者继续点击进入, 全凭首页设计的效果。所以, 首页设计对于任何网站都是至关重要的。因此, 网页设计人员对首页的设计和制作绝对要予以重视。
二、首页的设计原则
首页的设计应该遵循快速、简洁、引人、信息概括能力强、易于导航的原则, 同时应纳入企业CIS (企业形象识别系统) 计划, 与企业CIS的其他内容协调起来。在一个网站的开始就要将自己企业的强势直接道出, 所有绝活、高招、亮点等要立即用上, 首先对浏览者形成兴趣冲击力, 将其吸引住, 再让他的手指跟着栏目往下点。如耐克网站首页曾经是乔丹三分羞涩、七分谐谑的滑稽大面孔, 让人忍俊不禁;可口可乐是至少6幅以上爆笑画面, 首页走马灯似的转个不停, 让人总惦记着下次还会看到什么新花样;柯达每期首页出一帧摄影经典范例解析, 吊起各国摄影爱好者的胃口, 纷纷上网去探其精妙。这些首页都属非同凡响之作, 使人过目不忘。
三、首页的功能模块
首页的功能模块是指在首页上需要实现的主要内容及其功能, 在主页上必须清楚地列出3项要点:机构名称、提供的产品或服务以及主页内容。通常一个网站首页上应将网站的基本内容显示出来, 如图1所示。
1、页头
用来准确无误地标示该网站, 它应该能够体现出该网站的主题, 而该主题是与企业或机构的产品和服务紧密相关的。它应集中、概括地反映企业、机构或个人的经营理念和服务定位, 可以用机构或企业的名称、标语、徽号或图像来表示。《财富》500强网站都有明确的主题, 在首页之初就将其置于屏幕显著位置。如通用电气以“我们将美好的事物带给生活”为建站之铭;宝洁的旗号是“我们尽己所能, 使人们生活日胜一日”;3M称其使命是“让消费者生活更轻松、更美好”;联邦快递是“数百万的人以本公司的服务开始其一日之计”;通用汽车站名 为“人在旅途”;杜邦是“科学的奇迹”等等。
2、主菜单
它提供了对关键页面的简捷导航, 其超链接或图标应明确地表明网站上的其他页面上还载有什么样的信息, 用户能够根据这样一个简单的功能化的界面, 迅速地到达他们所需信息的其他页面上。
3、最新消息的传递
因特网上不断有新事物出现, 每天都有新花样。如果主页从不改变, 用户很快会厌倦。在主页上预告即将有新资料推出, 可吸引用户再来浏览。可以在页头以大字标题宣布新消息, 也可以定期改变主页上的图像或更改主页的式样。同样, 为保持新鲜感, 应时刻确保主页提供的是最新信息。将更新主页信息的工作纳入既定的公关及资料编制计划内, 亦即企业使用传统方法 (例如新闻稿) 传递的新信息应即时出现在主页上, 要确保链接畅通, 以免用户收到“无法查阅所需页面”的信息而大感没趣。
4、电子邮件地址
在页面的底部设计简单的电子邮件链接, 可使用户与负责因特网站点或负责网上反馈请求的有关人员迅速取得联系。这将为用户找人请教或讨论问题节省大量的搜索时间, 还能使网站创建者获得因特网站点外的信息反馈。
5、联络信息
列出通讯地址、公关或营业部门的电话号码等, 以便用户可以通过非E-mail的方式与相关人员获得联系。
6、版权信息
这是适用于首页内容的版权规定, 也可以在首页上标示一句简短的版权声明, 用链接方法带出另一个载有详细使用条款的页面, 这样可以避免首页显得乱糟糟。
7、其他信息
除了以上包括的信息以外, 一般的网站上还需要这样一些信息, 如广告条、搜索、友情链接、邮件列表、计数器等等。在首页上选择哪些信息, 实现哪些功能, 是否需要添加其他的信息, 都是首页设计者首先需要确定的。在首页设计时, 可以利用现有信息来制作首页, 不必从头做起, 因为有许多现成的文字、图画等资料可供网页设计人员使用。很多情况下, 只要用少许功夫就可把这些材料转到网页上使用。但应切记页面给人的第一观感最为重要, 在网上到处浏览的人很多, 如果首页没有吸引力, 很难令用户深人浏览。
四、首页的可视化设计
确定好首页的内容和功能后, 就可以设计首页的版面了。就像搭积木一样, 每个内容模块是一块积木, 如何拼搭出一座漂亮的房子, 就看设计者的创意和想象力了。国内许多网站的首页设计平庸, 既无特色又显呆板, 原因就是缺乏让人“神注其问”的视觉兴趣点。在图文类首页中, 通常以图像和标题为兴趣点, 由于图片通常较文字更能吸引人的注意力, 因此, 图片上的兴趣点就是首页的兴趣点。许多首页为集中观众的注意力, 将文字标题融合在画面中, 使两个兴趣点合为一体。
网站首页的设计形式主要有2种。一种是纯粹的形象展示型, 这种类型文字信息较少, 图像信息较多, 通过艺术造型和设计布局, 利用一系列与公司形象、产品和服务有关的图像、文字信息, 组成一幅生动的画面, 向浏览者展示一种形象、一个氛围, 从而吸引浏览者进入浏览。这需要设计者具有良好的设计基础和审美能力, 能够努力挖掘企业深层的内涵, 展示企业文化。这种类型的首页在设计过程中一定要明确要以设计为主导, 通过色彩、布局给访问者留下深刻的印象。在实际设计中, 应避免“封面”问题。封面是指没有具体内容, 只放一个标徽Lo Go点击进入, 或者只有简单的图像菜单的首页。除非是艺术性很强的站点, 或者确信内容独特足以吸引浏览者进一步点击进入的站点, 否则的话, 封面式的首页并不会给企业站点带来什么好处。用户上网浏览需要快速、有价值的信息, 如果等待若干分钟, 只显示一个粗劣的“进入”图标, 那么就没有人会再耐心地等待进入下一页。另一种是信息罗列型, 它是一般的大、中型企业网站和门户网站常用的方式, 即在首页中就罗列出网站的主要内容分类、重点信内容独特足以吸引浏览者进一步点击进入的站点, 否则的话, 封面式的首页并不会给企业站点带来什么好处。用户上网浏览需要快速、有价值的信息, 如果等待若干分钟, 只显示一个粗劣的“进入”图标, 那么就没有人会再耐心地等待进入下一页。另一种是信息罗列型, 它是一般的大、中型企业网站和门户网站常用的方式, 即在首页中就罗列出网站的主要内容分类、重点信息、网站导航、公司信息等等, 也就是上面所述的各种功能模块, 以展示信息为主, 在细微之处体现企业形象, 这种风格比较适合网站信息量大、内容丰富的网站。它要求设计人员了解企业的CIS, 熟悉企业标志、吉祥物、字体及用色标准, 在网站的局部将之体现出来, 往往平淡之中一个优美的符合企业特点的曲线就能够给人以深刻的印象, 从而将企业形象印在浏览者的脑海里。设计人员在设计过程中要注意使用这些语言符号来表达一种独特的企业信息。
五、首页设计的注意事项
从根本上来说, 首页就是全网站内容的目录, 也是一个索引。但只是罗列目录显然是不够的。在首页的设计中, 需要注意以下事项:
1、首页明确, 主题突出
要能使用户对首页扫一眼就能马上明白该网站是干什么的。要达到这个目的, 最好在文本或图像中设置阐明主题的句子———视觉兴趣点, 这一点对于绝大多数的企业或个人来说是很重要的。因此建议在站点主页显示的第一行列出本站点的主题。如柯达公司的主题句是“再拍一张”, 在其站点的首页的左上角以醒目的字体显示出来;而波音以“世界航天业领袖”为站点标题。
2、尽可能缩短下载时间
首页上包括许多图像, 如网站标志、有关产品的图像或着重标出的某些新产品或特殊产品、特殊服务的图像, 这些因素是导致首页下载时间延长的主要因素。主页的下载时问最长不宜超过30秒。主页上的图像应力求简朴, 避免耽搁用户的时间。图像愈大、颜色愈深, 传送页面的时间愈长。这并不是说要完全略去图像不用, 只是提醒网页设计人员要注意使用图像所带来的效果。页顶图像最好保持在大约10 KB以下, 可以考虑只用2~3幅短小精美的图像。主页整体上要能够迅速传送, 最好测试一下主页在稍差条件下的传送速率。
3、注意配合最低档的设备
例如标准的小型显示器。运用先进浏览软件所提供的一些尖端功能是可以的, 但应确保主页在较低版本的浏览软件上 (例如某些网上服务所提供的专用浏览软件) 仍可顺畅地显现。
六、结论
总之, 首页不仅扮演形象展示的作用, 更重要的是起到信息传递的作用。品牌企业网站的首页设计过于重视“形象展示”职能而忽略“信息传递”职能, 大量企业网站首页一律是全屏flash, 对用户快速获取信息造成阻碍, 因此, 网站首页设计要在传递品牌形象的同时, 让首次访问的用户在第一时间明白网站的内容、服务和功能, 同时, 通过首页, 能够快速直达所要找寻的目标页面。
参考文献
[1]袁应;杨磊.省级重点新闻网站首页设计对比分析[J].新闻世界.2010 (12) .
[2]王伟, 陈春蕾.对营销型网站首页设计的探讨[J].科技资讯.2009 (36) .
[3]尹卓.关于网站设计方法与理念的探讨[J].中国商界 (下半月) .2009 (11) .
网站首页设计诠释网页首页制作 篇2
展示哪些信息
页面的重要性是建立在它所呈现信息的基础之上，反过来说，页面要向用户展示哪些信息是决定其重要与否的首要指标。在网站页面中，网站标题、副标题、菜单(狭义上的导航，请参看《WEB导航设计》)、用户登录信息、关于、版权信息这几项是网站的基础信息，是一个网站身份的像征，承载着向用户表明网站立场、提供何种产品或劳务、网站自我介绍、如何联系网站的重要使命，在设计页面时，这些信息必不可少。
而网站的首页，除了需要显示以上这些基础信息之外，最重要的是还承担着网站转化率的重任，这也是所有类型的网站首页的最重要任务。如何让网站首页完成这项重要的任务呢?我的理解是把网站所提供的产品或劳务通过版式设计、文案设计、色彩设计之后，展示在首页适当的位置，并使其不受其它信息元素干扰，甚至使其它元素为它(产品或劳务)服务。
突出主题思想
知道了首页需要展示哪些信息，知道了信息之间的权重，如何把信息呈现得更符合信息本身，却不是一件容易的事，需要时间的磨练与经验的积累。就设计本身而言，是一件感性的事，不像数学公式，它缺乏严谨的理论做为指导，所以在工作中，经常出现与Boss、同事意见相左的情况。我个人的经验是在非重要信息的设计上使其具有普适性，在重要信息的设计上突出设计的主题思想，在与Boss、同事讨论时，尽量把讨论的重点放在主题思想的呈现方式与其对转化率(或市场目标)的作用之上。你可以说这是功利的设计，没错，所有的设计都是以商业利润为最终目的。
如何突出
在版式设计上，要求把信息分门别类，让用户在扫描(只为扫描而设计，请参考《Don’tMakeMeThink》)页面时保证视觉流的流畅性，在短时间内(3-5秒)发现首页包函哪些区域(如菜单、广告、注册、个人信息、链接、按钮等)，方便用户在第一时间内做出选择。在设计过程中，建议严格遵循四个排版的原则，即：对比、对齐、重复和亲密性(请参看《写给大家看的设计书》)，
如yahoo.com、renren.com、cnet.com的首页
在文案设计上，副标题的文案设计，要求文案简洁明了、开宗明义，语言、句 式的表达需符合网站的整体调性。如人人网的“因为真实，所以精彩”，阿里巴巴的“全求最大的采购批发市场”，babytree.com的“爱、交流、成 长”等等。在产品或劳务宣传的文案设计上，要求简短、易懂、描述要完整，语言要情感丰富，具有扇动性，吸引用户注意力，最终促使用户付出行动，这就达到了 目的(转化率或点击率)。显示的要素通常包括谁/什么、有多少、何时、何地、如何做、为什么这六大要素(请参看《餐巾纸的背面》)。如人人网、开心网首页的主题表现形式。这些应该是文案设计的工作，但现状是Boss不会专门聘用Copywriter，网页中的文案一般都是由交互设计师来完成，而小公司是由美工来完成。所以，了解一些文案设计知识是很有必要的。
在色彩的设计上，即要符合网站整体特征，又要适合所渲染信息的特征。一般采用同色系或相邻色系对网站基础信息进行渲染，对于突现主题的信息采用基础信息色彩的补色或对比色进行渲染，从视觉上体现信息的权重与逻辑关系，达到突出重要、弱化次要地目的。
西瓜、thindpad、iphone、百事可乐、著名作家、二战。当你 看到这些名词时，脑海里不由的浮现出它们的特征。比如你看到“著名作家”时，可能想到了鲁迅，而英国人看到“著名作家”时，很可能想到的是莎士比亚;再比 如看到“二战”这个名词，你可能想到了“ ”，而犹太人想到的可能是“希特勒”。这与用户的知识背景有很大的关系。在进行网站页面设计时，用户知识背 景也必须考虑其中，我曾见过一领导在与同事们讨论页面设计时，在白板上画分类列表，一直是把它画在左侧，并以列表式呈现。这个现象足以说明，他所接触到的 分类列表可能多数呈现在页面左侧，所以他无意识的也认为分类列表应该在左侧，换句话说，放在右侧或其它地方，就不是分类列表了。或许我定义得有些极端，但 这个现象确实能反应出知识背景对用户习惯的影响是不可估量的。
浅析新闻网站首页设计与编排艺术 篇3
新闻网站首页版面的设计与编排艺术是影响新闻网站宣传效果的关键因素之一。网站首页的设计应准确把握网民的新闻信息需求心理、阅读习惯和行为模式等，在此基础上结合网站自身的特点与优势进行目标定位和特色服务，有针对性地开展设计工作，因此新闻网站首页的设计理念和设计原则必须铭记在心。
新闻网站首页设计与编排理念
新闻网站的首页设计理念最主要的是要需要考虑两个“冲击力”。即色彩和布局的冲击力。
（一）色彩冲击力
由于网站本身具有视觉元素主导的地位，因此色彩是新闻网站首页必须要考虑的问题，而这一问题，也是当今新闻网站最易被忽略的问题之一。通常来讲政府网站是较为正规的门户网站，首页整体风格应该以沉稳、大方、厚重为主。那么在色彩上就要求颜色种类尽量单一，以单色调为主。而一些商业性网站，相对来讲色彩可以多彩斑澜，以亮色为主。此外个人网站一般要求设计较为简洁、淡雅、随和，而新闻网站，由于其新闻本身的特点应采用对比鲜明、冲击较强烈的色彩作为首页的主色调。另外由于主色的构成相对单一，类型较为简单，所以应该尽量选用较为浓烈的色彩来强化对人们视觉的冲击力，以此达到给网民留下深刻印象的效果。
（二）布局冲击力
局部的设计相对于色调的选择，改动选择余地就小了很多。由于受版面、内容等多种因素的影响，内容布局会受到这样或那样的限制，只能在网页本身所固定的框架内“戴着镣铐跳舞”。但是首页的内容布局并不是一味的翻新，在很多方面还是可以进行改造创新的，正所谓有束缚才会有创造，有创造就会显现出突破原有框架的魅力，进而带来新鲜感。根据历来新闻网站首页在设计、编排和改版过程中的一些规律，可以总结出内容布局方面具有“服务至上”、“一步到位”，“寸土寸金”三个重要特征。
新聞网站首页设计与编排原则
（一）整体设计简洁
新闻网站的核心竞争力就是为网民提供大量并且含金量高的新闻信息。据调查，大部分网民访问新闻网站的主要目的就是获得新闻信息。与传统媒体一样网络新闻信息自然也要以简洁为主，不能太过繁琐，应该使网民一眼就可以找到自己想要阅读的新闻信息。因此，在设计首页时，要力求整体简洁、过渡合理、字间距、行间距适度。
（二）栏目分类清晰
在某种程度上讲首页是对新闻网站整体信息的一个概述，是对所提供的新闻和服务的一个整体再现的载体。它在一定程度上可以显现出网站的精心设计与组合，因此为了方便网民查找访问，有必要对新闻信息及相关服务进行恰当的归类、分类。这样做不仅有利于页面整体上的美观。也可以使首页像菜单一样，可以引导网民轻松、快捷的查找到所需要的“那道菜”。另外，形成清晰、合理的栏目规划，可以对网站整体架构一览无遗，这样也利于网站制作者及时修改和更新。所以，网站首页设计一定要摒弃“首页是个框，新闻全部往里装”的不负责任的行为。如果不进行分类势必会造成网民不知道在哪里寻找自身需要的信息，这不仅会失掉众多的受众，还会影响网的经营和发展。
新闻网站首页设计与编排技巧
新闻网站首页的设计技巧多种多样，但是最难掌握的就是简洁，所以在这里笔者主要谈谈新闻网站的简洁的设计技巧。
（一）文字设计的简洁技巧
文字是互联网设计的最基本单位，要想达到整体简洁的效果就离不开简捷的文字设计。由于汉语本身具有博大精深的特点，我们在进行网络新闻报道时可以尽量选择那些简单易懂又字数较少的文字，要知道文字除了能传递信息，还可以增强视觉传达效果，因此文字在简洁的基础上决不能失掉本身所应具有的审美价值。在这方面做得最好的恐怕要数百度网站，它所其涉及的内容包罗万象，但是首页却极其简洁，因此点击率一直名列前茅，从中我们就可以看出首页简洁的文字设计的重要作用。
（二）图像、声音、动画、视频等元素的简洁技巧
虽然文字是网络设计的主要单位，但图像、声音、视频等合理搭配也是表达网络新闻不可忽略的形式和手段。通常来讲这些手段可以增强网站的特色，但如果过大过长就会使网友丧失兴趣。因此，视频、动画、音乐的使用要考虑多种因素，最主要的原则是“内容决定形式”，首页中图片、视频的运用要考虑到内容需要与否，不可随意增加或删除。另外，要做到不回行。视频、图片、动画的回行不仅会使网民看着不舒服。还可能影响它下面的新闻数量。
总之，要想在新闻网站首页设计方面取得独特的效果，就必须在掌握新闻网站首页的设计原则与设计理念的基础上，结合网络实际和网民阅读新闻的动机、心理等因素进行改革创新。只有将这些细致、协调的编排巧妙的结合起来，制作出既符合整体要求又不失丰富的新闻网站首页，才能取得成功。个性不一定是最好的，但是平庸一定是不好的，如果新闻网站首页的设计与编排过于粗浅或大众化，新闻网站首页的“招牌”作用与审美效果就会消失。
| 作者单位：西安科技大学
首页设计 篇4
动态网站之所以选择JSP语言, 是因为JSP是由Sun Microsystems公司倡导和许多公司参与共同创建的一种使软件开发者可以响应客户端请求, 而动态生成HTML、XML或其他格式文档的Web网页的技术标准[1]。JSP技术的设计目的是使得构造基于Web的应用程序更加容易和快捷, 而这些应用程序能够与各种Web服务器, 应用服务器, 浏览器和开发工具共同工作。
二、动态网站首页的设计
2.1 整个网站首部文件的设计。本系统将创建首部JSP文件, 该文件在系统中作为每个文件的首部存在, 这样其他页面只要包含本文件就可以实现所有页面的首部相同, 便于维护[2]。
2.1.1 首部LOGO的设计。LOGO将具体的事物、事件、场景和抽象的精神、理念、方向通过特殊的图形固定下来, 使人们在看到LOGO标志的同时, 自然的产生联想。LOGO设计要求简洁、新颖、富于创新, 不仅仅是一个图形或文字的组合, 更能体现课程的特点。
2.1.2 首部系统信息的设计。系统信息包括:时间信息、留言入口、管理入口等信息, 具体实现如下:
1. 时间显示当前的日期和时间:<%= (new java.util.Date () ) .to Locale String () %>
2. 留言入口:用户可以在网站上留言, 其中包括:用户名、留言信息、提交和重置按钮等, 留言信息的实现步骤如下:
1) 新建JSP页面, 命名为feedback.jsp。2) 新建servlet类, 命名为Survey Servlet.java, 放在包cn.zmx下, 同时需要配置部署描述文件web.xml。3) 在D盘根目录下新建一个文本文件data.txt用来存放用户提交信息。4) 在包cn.zmx下新建一个文件操作的Java Bean类, 命名为File Bean.java。
3. 管理入口。通过输入正确的用户名和密码信息才可以进入系统。页面包括:用户名文本框、密码框、登录按钮、重置按钮、下拉列表框等组件。
2.2 网站首页的设计。精品课程建设的内涵教育是艺术, 其生命在于创新, 教育是科学, 其价值在于求真, 创新的理念, 求真务实的态度是精品课程建设的思想保证。精品课程是指能体现现代性、科学性、先进性、有严正风范和鲜明特色, 并有示范和辐射作用的优秀课程。所以在整个页面设计时应合理设计各模块, 可将其分为首页、申报表、课程简介、教学团队、教学资源、课程改革、实验实训、教学视频、教学成果、课程评价、参考文献等模块。首页在设计时应突出亮点, 重点。可以借助FLASHPAPER软件, 将需要的文档通过简单的设置转换为SWF格式的Flash文件, 原文档的排版样式和字体显示不会受到影响, 这样做的好处是不论对方的平台和语言版本是什么, 都可以自由的观看你所制作的电子文档动画, 并可以进行自由的放大, 缩小和打印, 翻页等操作, 对文档的传播非常有好处, 而且Flash文件的在各大浏览器中的普及性和强大的可调节性。
2.3 整个网站底部文件的设计。本系统将创建底部JSP文件, 该文件在系统中作为每个文件的底部存在, 这样其他页面只要包含本文件就可以实现所有页面的底部相同, 便于维护与更新。底部文件包括地址、邮政编码、访问人数、友情链接、注销等信息。其中访问人数可以通过动态技术实现:String str Num = (String) application.get Attribute (“Num”) , 便于维护与更新。
三、总结
总之, 在设计动态网站时应创建首部和底部JSP文件, 该文件在系统中作为每个文件的首部或底部存在, 使用include指令可以把一个页面分成不同的部分, 最后再合成为一个完整的文件, 对于代码的管理及维护都将起到事半功倍的作用。这样其他页面只要包含相应文件就可以实现所有页面的首部或底部相同, 便于维护与更新。
参考文献
[1]郑宁.JSP编程及案例分析[M].北京:清华大学出版社, 2010.
制作网站首页教案设计 篇5
制作网站首页教案设计
教学课题：制作网站首页 教学背景：
网站首页是网站的“脸面”，学生通过学习设计网站首页，一方面培养他们为提高作品吸引力、展现自我而积极思考、探究、尝试的意识和态度，另一方面通过学习各种基本网页设计技术，亲历网页制作的一般过程，更好地为接下去几节课的学习和活动参与打下基本功。教学目标：
1、知识与技能：
（1）了解网页一般由哪些元素组成。（2）学会运用表格进行版面布局。（3）能够在网页中添加网页元素。（4）能在网页中设置超链接。
2、过程与方法：
（1）通过制作网站首页，掌握版面布局、添加网页元素和设置超链接的基本技术方法，达到举一反三的功效。
（2）通过学生动手设计网页的实践活动，使学生掌握对象属性的设置方法，为学生今后学习其他软件奠定基础。
3、情感态度与价值观：
（1）提高视觉素养，能根据网页主题确定恰当的网页风格并具有初步的创意。
制作网站首页教案设计
（2）通过运用表格布局网页对象活动，进一步掌握各种不同对象属性的设置方法和规律，提高学生学习信息技术的信心。
（3）在合作实践过程中，培养学生的审美能力和创造能力，在小组协作学习中，培养学生合作帮助、团结协作的良好品质。
（4）培养学生大胆构思、自我创新的精神，培养学生的美感及创作后的成就感。
（5）善于和老师、同伴一起分析讨论，在分析、探讨中学会欣赏，学会评价。
4、学情分析：
学生已经具备了计算机软件使用的基础，但学生在学习过程中往往会把注意力停留在技术实现的层面上，让学生认识和掌握制作网站首页的方法，故操作性强。在前面几节课学生初步确定了网站的主题，收集了部分资料。学生已经在word文档的学习中掌握在文档中插入图片、艺术字等素材方法，为制作网页中的添加素材这一环节打下基础，同时表格教学比较枯燥，表格嵌套、根据图片特点裁剪图片、设计制作表格等知识点更加枯燥乏味。图片处理操作水平的差异和教学内容的枯燥，可能会造成很多学生不愿动手、不会动手。在实际教学时，教师应该时刻给予学生恰当的引导，在调动学生学习兴趣方面下足功夫。
5、素质目标：
制作网页要应用到多方面的知识，培养学生的知识迁移能力，同时给学生提供了自由发挥的空间，学生可以充分发挥自身的创造力与想象力，培养学生综合运用知识的能力。教学重点难点：
1、教学重点：
（1）能用表格规划版面布局的方法与技巧。
制作网站首页教案设计
（2）恰当选取网页元素与设置。
2、教学难点：
（1）掌握超链接技术设置网站导航功能的方法。（2）掌握设置网页属性的一般方法。教材分析：
1、本节的作用和地位：
本节课侧重培养信息表达的能力，对于加强学生的信息意识，提高信息处理的能力有着重要的作用；网页的设计也给学生提供了展示个性、自主创新的机会，促使他们主动地学、创造性地学；网页的评价则能使学生了解内容编排的原则，页面布局的种类，色彩搭配的风格等，提高他们的艺术修养和审美情趣。
2、本节主要内容介绍：
课改后信息技术课已不再是单纯的计算机技能课，它强调以培养信息素养为目标，以任务驱动为模式，以应用软件为载体。只有在实际教学中突破以往的教学模式，才能培养出适应信息社会发展的有用人才。这节课的主要任务是使学生掌握在FrontPage用表格规划网页及在网页中插入图片、声音、水平线等相关知识与操作，并能合理、灵活地应用到网页制作中，美化自己的网页。教学方法：
1、先学后教，“兵”教“兵”
先学，就是让学生自学，尝试独立操作；后教，是根据学生自学效果，教师进行精讲、点评，并尽量让学生去“教”；“兵”教“兵”，就是让学生充当小教师的角色，自学得较好的学生操作给其他学生看，通过示范，在学生间起到相互促进，相互影响的作用，达到共同进步。
制作网站首页教案设计
2、任务驱动，小组竞赛法
根据学生不同的学习能力、知识储备、兴趣爱好，依据自愿组成原则，将全班分成若干个小组。通过网页教学课件的辅助，在教师的引导下，各小组按照自己规划出的网页设计方案，以任务驱动和分工合作形式制作网页。并通过自我评价、小组评价、师生互评相结合的评价方式使学生自主完成作业，由学生自己担任评委，评选出优秀网页，通过展示学生的优秀作品来激发学生对网页制作的兴趣。
由操作能力强的学生充当组长，带动其他成员完成网页制作，一来培养他们合作互助的关系，二来培养学生之间、师生之间的感情。
整节课教师只扮演一个组织者和提示者的角色，一步步引导学生完成本课的目标，让学生充分发挥自主性、协助性，培养他们合作、创新的能力。
3、提问引导法
根据学生已有的知识结构体系，采用提问的方式引出每个教学目标，中间穿插观察、自主探究、合作交流的方式加深学生的印象，培养学生的观察能力，动手能力和团结合作精神。让学生自觉主动地去分析问题、解决问题，学生在操作过程中不断发现问题、解决问题，使学生由学会知识变为会学知识。教学评价：
在教学过程中一方面要考查学生能否顺利掌握制作网页的基本技术方法，根据设计需求完成网站首页的制作，另一方面又要考查学生在作品中是否做了科学的布局规划、是否合理地运用了各种网页元素，作品是否具备表现力和较强的可读性。教学过程：
一、创设情景、引入课题、明确任务
制作网站首页教案设计
师：上节课我们已经规划了自己的网站，今天老师给大家带来了一个礼物，它是一个漂亮的网站，它就是“老师个人学校网站”，里面有许多关于同学们的内容，如：你们漂亮的生活相等，请同学们欣赏。
生：学生认真观看，自主互相讨论，畅谈想法及发表意见。
师：继网站筹划之后我们就要着手来进行网页的设计了，第一个要进行的当然是首页的制作。首页是网站的“脸面”，能不能吸引访问者的注意，它显得尤为重要，所以在设计制作首页时需要特别花心思。怎样设计一个好看的网页让网站第一时间抢占浏览者的眼球呢？再度打开网站的首页。生：仔细观察该首页的特点。并互相讨论，各抒已见。
师：上节课已经搜集了素材，这节课咱们来动手制作网站的首页。指导学生使用FrontPage打开范例“班级网站”的首页，让学生进行小组交流，回答以下几个问题：
1、你知道有哪些软件可以用来制作网页吗？
2、该网页包含了很多元素，它们是如何整齐有序地分布在网页中的？用什么可以分割网页的版面布局呢？
3、该首页包含了哪些元素？是否能很好地表达主题思想？结合小组收集到的素材，你认为在自己的网站首页中可以添加哪些网页元素？
4、导航栏是网站的“地图”，没有它，浏览者就会“迷路”。选定范例网站首页导航栏中的栏目文字，单击常用工具栏上的超链接按钮，看看会出现什么？ 生：观察思考、探究、小组合作交流，回答教师提出的几个问题，并确立自己将要开展的工作。
师：其实很多文字处理软件都可以设计网页，如Word中，利用“另存为web页”就可以将文档保存为网页，有些图像处理软件如PhotoShop也可以制作网页，制作网站首页教案设计
Windows“记事本”也可以制作网页等，不过FrontPage和Dreamweaver却是最方便的网页制作软件，因为它们不仅可以制作网页，而且能方便地设计和管理网站，很适合入门学习。
二、先学后教、任务驱动、自主学习
1、用表格进行版面布局
师：（1）提问学生都为他们的主页准备了哪些内容和素材（如文本、图片、动画、音频、视频）？
（2）引导学生阅读教材，然后动手实践。生：（1）学生回答老师的问题。（2）上网学习相关的技能技巧。
（3）小组合作自主探究，教师引导，并安排操作熟练的学生进行演示。师：（1）教师巡视课堂，做个别辅导。针对学生普遍存在的问题，教师做详细讲解。
（2）以前我们可以用表格来表示数据信息吗？表格还可以用来对网页版面实现分割吗？
（3）你打算怎样安排它们的具体位置才能使网页更加合理美观，方便访问者访问？
（4）让打开学生常去的网站，腾讯QQ网站，让学生观察并提问他们发现了什么，再逐一把表格中的各元素删除，使网页上只留下一个空表格结构。（5）提醒学生要在编辑窗口和预窗口之间切换观察，使表格结构调整得更加合理。
制作网站首页教案设计
（6）如何才能让表格不显示在我们的网页中呢？
生：思考回答问题，小组合作探究、交流，完成老师布置的任务。
师：（1）对比展示两张素材相同布局不同的网页。一个使用表格布局，但表格边框隐藏，其页面工整，文本、图片摆放对称，具有一定的规律；另一个不用表格布局则页面凌乱，图文混杂，摆放杂乱。（2）教师简单演示。
A：添加表格；B：表格属性设置面板中的几个常用设置选项说明。（3）指出学生易出错或难于处理的问题及学生可能遇到的问题。
生：（1）认真观看教师演示，归纳总结交流自己动手动实践过程中存在的问题和不足、成功的心得体会及改进思路等。
（2）互相找出易出错或难于处理的问题及学生可能遇到的问题，合作探究解决的办法。
2、添加网页元素
师：（1）要求学生把事先准备好的各种网页元素（如文本、图片、动画、音频、视频）添加到主页，也可使用教师机的共享资源库的素材。（2）把学生用到的技能要点发到学习网站上。
生：（1）小组合作交流，对之前收集到的素材进行选用，添加到网页中。（2）上网学习相关的技能技巧。（3）上网查找需补充的素材。
（4）学有余力的同学还可以尝试怎样让网页更加生动。如添加视频、背景音 7
制作网站首页教案设计
乐等。
师：（1）恰当地为学生提供方法，讲授经验心得。（2）解决学生提出的疑难问题。
（3）鼓励学生进行发现和尝试提高他们的动手能力。
（4）教师巡视课堂，做个别辅导。针对学生普遍存在的问题，教师做详细讲解。
师：（1）教师简单演示。
（2）指出学生易出错或难于处理的问题及学生可能遇到的问题。
生：认真观看教师演示，归纳总结交流自己动手动实践过程中存在的问题和不足、成功的心得体会及改进思路等。
3、设置超链接
师：（1）如何通过超链接技术实现网站的导航功能？
（2）再次提出导航栏是网站的“地图”，没有它，浏览者就会“迷路”。选定范例网站首页导航栏中的栏目文字，单击常用工具栏上的超链接按钮，看看会出现什么？
（3）你发现哪些地方需要设置超链接吗？试对它们进行设置。（4）如何检查各个链接目标是否设置正确？
生：动手尝试，通过自主探究、小组合作交流，回答老师的问题。师：教师简单演示。
三、课堂小结、作品展示、师生评价
制作网站首页教案设计
（1）教师引导学生进行总结，针对本节课的重点知识进行提问，了解学生对相关知识的掌握。
（2）学生相互欣赏作品，推荐优秀作品在全班进行展示。我们来评一评，哪个作品做得好，好在哪里？那个作品还存在不足之处，都有那些方面？师生共同评价，教师对完成情况好的学生和帮助他人的学生给与表扬。
四、教学反思
用你的收藏夹做首页 篇6
“收藏夹”还真是很方便，看到好的网站我们只要保存起来，下次点点鼠标就又找到了，但是对于“个性新人类”来讲，这还不够，因为我们要把收藏夹作为首页。
乍一想，这个想法有些不现实，但是我们要是换个思路，问题可能就没有那么复杂了。我们可以在收藏夹的功能上进一步开发出网页的功能，又或者在网页的功能中进一步开发收藏夹功能。而事实证明，这两种方式都是可行的，下面我们就分别来看看如何做。
把收藏夹变成网页
我的收藏夹里有一大堆网站链接，都是经典的东西，而且已经发展成3级目录结构了，用起来着实不太方便。
以前总是把收藏夹整个地压缩存放，后来发现IE可以把收藏夹导出成一个网页，而且能显示目录结构，很简洁，很方便。
方法如下：
打开IE→文件→导入和导出(图1)→下一步→选择“导出收藏夹”(图2)→下一步→选择“导出到文件或地址”(图3)→完成。
然后找到生成的文件，看看是什么样的效果(图4)，看到了吧，连目录中的网站都列出来了，条例十分清晰，只要把它设为自己浏览器的首页就可以了。
把网页变成收藏夹
上面的方法好是好，不过每次收藏一个新网站都要点一大堆的键，相反如果使用ASP和数据库，我们利用简单的数据库存储原理就可以把网页变成类似上面生成的收藏夹。
我们新建一个ACCESS数据库文件，其中只有一个表“home”(图5)，在这个表中建立三个字段，分别是ID、URL、WEB，其中1D的属性是自动编号，其他的都是文本(图6)。最后保存为a．mdb。
接着新建一个文本文件，我们的所有程序都将写在这里：
<％
url=request(“url”)／／取表单传递的变量
web＝request(“web”)／／取表单传递的变量
if web<>""then／／如果我们没有提交新的网站资料，就是正常访问这个网页。否则执行下面程序
set conn：server．CreateObject(“adodb．connection”)
DBPath；Server．MapPath(“a．mdb”)
conn．open“provider＝microsoft．jet．oledb．4．0；dataSOUrce=”&DBpath／／连接数据库
sql=“insertintohome(Uri,web)Values('"&url&"','"&web&"')"／／准备将上面取得的变量插入到url和web两个字段中
conn．execute(sql)／／执行end if
set conn=server．CreateObject("adodb．connection")
DBPath；Server．MapPath("a．mdb")
conn．open·provider=microsoft,jet．oledb．4．0；datasource="&DBpath
setrs=conn,execute(，selectUrI,webfromhomeorderby id asc")／／连接数据库rs.movefirSt
Str="
WORD-WRAP：break-word>，／／定义字符，一会儿用于输出，WORD-WRAP：break-word表示自动换行Whilenotrs．eof
UrI：rs("UrI")
web=rs("web")
Str=Str & ""
Str=Str&rS("web")
Str=Str&""
Str=Str&" ； ； ；"
RS．MoveNextWend//循环把所有数据库中的记录按照超链接的形式显示出来
Str=Str&""
Response．Write Strrs．close
conn．close//关闭连接％>