网站的规划与设计

1、南京市营防中学 钱峰一、情境导入一、情境导入讨论讨论1、我们一起来聊聊业余时间大家最爱做的事情？2、平时经常浏览的网站有哪些？3、欣赏学生作品: 音乐时空 （1）、网站是因特网上具有相似性质和共同内容的一组信息资源。（2）、一般静态网站的主页（英文表达：Home Page）名称默认为 （index.htm或者default.htm）4、基本概念：网站建设的主要过程：网站建设的主要过程：本节课的主要学习内容：本节课的主要学习内容：一、情境导入一、情境导入课题引入课题引入（1）网站的规划与设计（2）网站的制作（3）网站的编辑调试（4）网站的发布与评价网站的规划与设计网站的规划与设计 二、新课二、新

2、课确定主题及名称确定主题及名称 网站的规划是指建立网站前对网站需求分析或市网站的规划是指建立网站前对网站需求分析或市场分析，确定网站的目的和功能，并根据需要对网站场分析，确定网站的目的和功能，并根据需要对网站建设中的技术、内容、费用、测试、维护等工作做好建设中的技术、内容、费用、测试、维护等工作做好充分的考虑，网站的规划对网站建设起到计划和指导充分的考虑，网站的规划对网站建设起到计划和指导作用，对网站的内容和维护起到定位作用。作用，对网站的内容和维护起到定位作用。 网站的规划从哪里开始？网站的规划从哪里开始？给10秒钟时间，大家看以下九个网站的名字，看谁记得最多:游戏游戏一个别具一格、朗朗上口

3、的网站名称能令人印象深刻，不但能一个别具一格、朗朗上口的网站名称能令人印象深刻，不但能让用户了解网站的主题内容，而且还能吸引更多浏览者让用户了解网站的主题内容，而且还能吸引更多浏览者 。网站网站的规划从选择网站的主题开始。网站的选题，就是要根据网站的规划从选择网站的主题开始。网站的选题，就是要根据网站的开发目标和访问网站的用户群，确定网站的主题，并给网站的开发目标和访问网站的用户群，确定网站的主题，并给网站起一个简练响亮的名字。起一个简练响亮的名字。淘宝网 碧海银沙 蕃薯藤 红袖添香 榕树下 硅谷动力 问天网 网行天下音乐极限二、新课二、新课确定主题及名称确定主题及名称总结总结网站名称百度MP

4、3主题设置最新音乐资讯歌曲下载等二、新课二、新课确定主题及名称确定主题及名称网站名称主题设置肯德基官方网站网上订餐、打印优惠券等、二、新课二、新课确定主题及名称确定主题及名称 任务一：任务一： 请同桌一名同学负责完成网站的规划与设计任务单中的任务一，另一名同学负责完成老师发给你的导学案 （可以浏览并参考推荐网站）网站名称网站名称网站主题网站主题选择理由选择理由注意事项：注意事项：（1）主题内容积极向上。）主题内容积极向上。（2）名称要紧扣主题。）名称要紧扣主题。（3）可以参考老师提供的网站欣赏）可以参考老师提供的网站欣赏 二、新课二、新课确定主题及名称确定主题及名称 我们要把一个优秀的网站由蓝

5、图变为现实的第一个步骤就是网站设计，那到底如何进行设计呢？这就好比写一篇文章，首先要拟好提纲文章才能主题明确，层次清晰，所以，主题选好后，第一步要设置栏目。过过 渡渡栏目地理资讯地理资讯|-考古|-探奇|-图片地理论坛地理论坛行游天下行游天下|-路书|-攻略|-地图个人门户个人门户手机媒体手机媒体会员活动会员活动电子杂志电子杂志地理基金地理基金二、新课二、新课栏目设置栏目设置栏目栏目网站首页网站首页学校概况学校概况校园动态校园动态德育建设德育建设党团建设党团建设教育教学教育教学国防教育国防教育二、新课二、新课栏目设置栏目设置子栏目子栏目计划总结计划总结机构制度机构制度军校联系军校联系教育活动教

6、育活动任务二：任务二：各小组交流讨论，确定本小组主题网站的栏目，完成网站的规划与设计任务单中的任务二网站名称网站名称栏目栏目内容描述内容描述注意事项：注意事项：（1）要紧扣主题，尽可能删除与主题无关的栏目）要紧扣主题，尽可能删除与主题无关的栏目（2）尽可能将网站最有吸引力的内容列在栏目上）尽可能将网站最有吸引力的内容列在栏目上（3）尽可能方便访问者的浏览和查询。）尽可能方便访问者的浏览和查询。二、新课二、新课栏目设置栏目设置 网海茫茫，能够吸引我们眼球的只有那些有特色的网页，大量的网页引不起网民的兴趣，究其原因，站点内容是否丰富是其中一个方面，而网页的版面设计是否精美也是重要因素之一。过过 渡

7、渡常见样式常见样式“厂厂”字型字型页面顶部为主菜单以及横条网站标志+广告条，下方左面为主菜单，右面显示内容的布局特点特点优点优点：页面结构清晰， 主次分明；缺点缺点：呆板，如果细节色彩上不注意，容易“看之无味”网站标志网站标志 广告条广告条 主菜单主菜单 横条等横条等栏目栏目菜单菜单主要内容主要内容二、新课二、新课版面规划布局版面规划布局常见样式常见样式“口”字型页面一般上下各有一个广告条，左面是主菜单，右面放友情链接等，中间是主要内容特点特点优点优点：充分利用版面，信息量大，与其他页面的链接多，切换方便；缺点缺点：页面拥挤，不过灵活网站标志网站标志 广告条广告条 主菜单主菜单 横条等横条等广

8、告条广告条栏目栏目菜单菜单友情友情链接链接主要内容主要内容二、新课二、新课版面规划布局版面规划布局常见样式常见样式自由式：又称POP布局页面布局像一张宣传海报，以一张精美图片作为页面的设计中心，菜单栏目自由摆放特点特点优点优点：漂亮、吸引人，适宜于艺术类网站缺点缺点：显示速度慢，文字信息量少页面布局像一张宣传海报，以一张精美图片作为页面的设计中心，菜单栏目自由摆放。二、新课二、新课版面规划布局版面规划布局任务三：任务三：请参考常见的版面布局样式，为自己的某一张网页进行版面布局，有时间的同学可以选择多个样式设计多张网页。完成网站的规划与设计任务单中的任务二（请标注好每个版面的用途）示例示例主要内容主要内容标题图片标题图片栏目栏目其他其他二、新课二、新课版面规划布局版面规划布局三、课堂及课外拓展三、课堂及课外拓展1、网站标志、网站标志2、网站的风格及色调、网站的风格及色调3、围绕主题搜集和处理素材、围绕主题搜集和处理素材四、课堂总结四、课堂总结1、本节课我们了解了网站建设的几个主要过程：、本节课我们了解了网站建设的几个主要过程：2、我们主要学习了网站规划