(共12张PPT)
站点规划与网页设计
教学目标
1．了解网站文件的存放结构
2. 了解主页版面设计构想
3．认识网页设计工具
4．理解网站设计中需要注意的问题
教学重难点
网站文件的存放结构
网站设计需要注意的问题
重点
如何合理的设计主页
难点
本地浏览器访问百度域名
http://www.
服务器返回
网站相关资源(图片 视频 网站页面)
网站是什么
网站存放于百度服务器中
修复被损坏的网站！
探究一
网站文件夹
网站利用文件夹来划分不同类型或者不同功能的资源
js/scripts
images
css
图像:网站的图像资源仓库
Javascript脚本:人机交互的管家。
层叠样式表:定义了网页的样式。例如大小，颜色，距离等
uploadFile
上传资源:后期上传的附件，附件大多用时间进行命名
…………
利用WORD来实现网站主页“构想”
探究二
网页设计注意事项
风格确立
色彩搭配
版面设计
1. 浏览器兼容性
2. 分辨率问题
3. 不同设备访问
设计层面
行为准则
技术层面
遵守法律
尊重版权
3. 道德准则
网页设计工具
WORD
手绘
原型设计工具 Axure Pro
切片技术 Photoshop FireWorks
http://www./
http://www./
http:///
优秀主页欣赏
小结站点规划与网页设计教案
教学目标
1．了解网站文件的存放结构
2. 了解主页版面设计构想
3．认识网页设计工具
4．理解网站设计中需要注意的问题
教学重难点
重点：1.网站文件的存放结构
2.网站设计需要注意的问题
难点：1.如何合理的设计首页
教学过程
一、引入 （3分钟）
师：这些年计算机变得越来越普及，我想请几个同学来谈谈你们都用计算机来做什么？
生：电视剧，游戏，查阅资料。。。
师：听了大家的感受，我突然有一种感觉，计算机与网络已经变得密不可分，而我们的生活与学习也与网络紧紧绑在了一起。既然网站已经与我们的生活和息息相关，那么网站究竟是什么？
二、学习 （37分钟）
师：带着这个疑惑，我们一起来看下PPT，当我们通过浏览器访问百度时浏览器就通过域名来找到百度所在的服务器，然后再访问相应的网站，然后网站再解析浏览器的请求，再把相应的文字，图片，视频以及网页资源返回给我们的浏览器。这么看，所谓网站其实就是一种存放在服务器中的软件罢了。那这个软件究竟长什么样子呢？为了探究这个问题，我特地从网络上找了一个公司的网站，我们来一探究竟。
(教师展示公司的网站)
师：看了这个网站，你有什么感受？
生：乱
师：没错，所以我们应该对这些文件做一个整理，如果是你，你准备怎么整理这些文件？
生：按照日期，大小，名称，文件的类型来整理。
师：你的想法非常的好，事实上专业的网站规划师也是这么考虑的，利用文件类型来区分各种网站资源，在大家正式对网站进行分类前，我们首先来了解下一些约定熟成的命名。
(教师展示PPT介绍几种常见的文件夹)
探究一：修复网站(10分钟)
（学生根据教师给出的提示，来进行文件的分类操作）师：通过刚才的修复， 许多同学都完成了网站的修复工作，看到了完整的网站，但是大家用的方式又各种各样，接下来，我们请一位同学来演示下他的方式。
（演示目的：1增强演示学生的自信2提示部分没有成功的同学3完成任务的方法与任务本身同等重要）
探究二：用word来创作主页构想(20分钟)
师:通过刚才的操作，网站成功的被我们修复了，但是有这么多的网页，究竟哪一个才是应该第一个打开的，我们不妨都打开看看。
(教师打开文件夹中的所有网页文件，让学生观察，并询问学生答案以及原由)
师:看来主页很重要，它往往是在搜索引擎中展示在最前方的页面（权重大），而且它还负责链接到其他的资源，是整个网站的桥梁和门面。既然它如此重要，今天我们就来好好的规划一番。在正式进行网页设计前，我们先来看看网页设计需要注意的方面（从三个层面九个注意点来阐述）今天这节课，我们就要着重从版面设计的角度来进行设计。
（学生利用WORD工具来设计主页版面，教师巡视交流）
（展示部分学生作品，并请学生分享他的设计理念）
师:网页设计的工具有很多，除了WORD之外，还可以通过手绘的形式进行展示，也可以利用一些原型设计工具，如axure pro，它们的好处在于很好的保留了人机交互的部分，如网站的跳转操作，还可以通过一些带有切片技术的工具，如photoshop或者fireworks等，它们的好处是可以近似等同于最后的网页形态，甚至可以直接用于网页的制作。
师:今天这节课我们很好的扮演了设计师的角色，接下来我们也来欣赏一下其他设计师设计的主页。
（欣赏一些高级网站，拓展学生视野）
三、小结：（5分钟）
1. 通过今天这节课，你们学到了什么？
2. 今天这节课，有什么收获和感想？
