教科版（云南）信息技术八上 第九课 网站的规划与设计 课件（41张PPT）
文档属性
| 名称 | 教科版（云南）信息技术八上 第九课 网站的规划与设计 课件（41张PPT） |  | |
| 格式 | ppt | ||
| 文件大小 | 8.0MB | ||
| 资源类型 | 教案 | ||
| 版本资源 | 教科版 | ||
| 科目 | 信息技术（信息科技） | ||
| 更新时间 | 2020-10-12 16:51:56 | ||
图片预览
文档简介
网站的规划与设计
网站主题的确定
网站运行环境的确定
网页制作工具的选择
网站开发任务的管理
网站的规划
网站主题的确定
网站的规划从选择网站的主题开始。
网站的选题，就是要根据网站的开发目标和访问网站的用户群，确立网站的主题，并给网站起一个简练响亮的名字。
网站主题的确定
作为中学生，应选择贴近我们学习和生活实际的主题，这样容易入手，容易完成，也容易吸引同学，引起共鸣。
网站主题的确定
主题要小而精
诗歌鉴赏——水调歌头.明月几时有
Flowers——荷花
最后针对这一小的题目展开进行栏目的设计，简单,容易做出特色
网站名称
一个好的网站名称可以是朴实的或者是想象力丰富的、容易引起联想的，要避免使用过于生僻难懂的词汇。
网站主题的确定
一个别具一格、琅琅上口的网站名称能令人印象深刻，不但能让用户了解网站的主题内容，而且还能吸引更多的浏览者。
说说你记得哪些网站名称？
网站主题的确定
大家选题时可以参考P95 表4-2 主题网站类型及名称
主题类型
网站名称
活动
校园快车
我们班集体
学校舞蹈队
化学夏令营
观鸟一族
科学
草原馆
星空探秘
热带雨林
奇妙的力
数学天堂
历史
史海泛舟
看春秋
上下五千年
甲午战史
国史探微
音乐
“123”乐符
乡村音乐
天籁回寰
七弦琴沙龙
经典音乐堂
体育
奥运史话
篮球技巧
滑板公园
模型新天地
运动与健康
美术
美术走廊
山水画欣赏
西洋油画集
墨池笔冢
国画欣赏
环保
垃圾反击战
绿色家园
环保阵地
水资源长廊
濒危动物
电脑
素材精品
吉祥动画
仿真天地
动感特区
3D探索者
文学
爱莲书屋
文学长廊
伴月小筑
古诗词欣赏
名言宝录
家乡
客家文化探秘
瑶族风情
中山故居
井岗宝塔
韶山颂
?
网页制作工具的选择
制作网站的软件有很多，常见易学的制作软件有FrontPage和Dreamweaver。
网页制作工具的选择
当然要让网页有好的视觉效果，还必须要有图像处理软件来对图片进行处理，如Photoshop、Fireworks；
如果还需要动画效果，还需要运用动画制作软件，如Flash、Gif动画制作软件等。
网站的规划
网站的设计
网站设计的目的在于把需要表达的信息以恰当的方式组织并呈现在网上，设法吸引人们的关注，并为浏览者提供方便的访问。
网站的设计
设计是什么?
网站的结构设计
（栏目）
网站的设计
网页的版面设计
（风格和版面布局）
网页的交互设计（链接点 导航）
网站的结构设计
写一篇文章：拟好提纲，文章才能主题明确，层次清晰
造一座高楼：设计好框架图纸，才能使楼房结构合理
作文
一级栏目
二级栏目
网站的结构设计
制作网站前要设计好网站的栏目，网站的栏目可以有多层，但并不是层数越多越好，以能够恰当地体现网站主题为好。
让我们来看看教材上的这个网站，感受它的结构设计：
网站的结构设计
（栏目）
网站的设计
网页的版面设计
（风格和版面布局）
网页的交互设计（链接点 导航）
网页的版面设计
网页的版面效果在吸引访问者浏览网页中起了重要的作用
风格设计
版面布局设计
一个色彩搭配合理、版面布局清新的网站会让访问者留恋忘返。
风格设计
什么是风格？
风格是指网站的整体形象给浏览者的综合感受
严肃庄重 清爽温馨 深沉厚重
生动活泼 古朴典雅 豪迈奔放
风格设计
生动活泼
风格设计
观摩网站截图，思考：
网站主题和风格、色彩有什么关联？
风格设计
网站主题和风格、色彩有什么关联？
风格设计与主题是密不可分的，是为突出主题服务的。
风格设计
一种风格的形成需要从多方面着手设计，包括网页布局的整体造型、色彩的搭配、字体图片的样式设置、网站的标志设计等。
色彩的搭配
风格设计注意问题
同一个网站的各网页之间应保持风格一致。
网页要呈现的内容很多，概括起来可分为标题信息、栏目信息、内容信息、附加信息等，需要进行合理的放置，让人看起来井井有条，主次分明。
版面布局设计
一个网页的版面通常以屏幕中央最能引人注意，屏幕上方紧随其后，屏幕的左右侧通常放置不太重要或固定信息，附加信息（如版权信息）一般放在最下方。
版面布局设计
版面布局的整体造型和色彩搭配的灵活运用也会影响人们的注意力，产生不同的视觉效果。
版面布局设计
版面布局没有绝对统一的方法，应视需要而定，有创意的布局会给人以耳目一新的感觉。
版面布局设计
常见的网页布局结构
1．“国字”型布局
因布局结构与汉字“国”相似而得名。其页面的最上部分一般放置网站的标志和导航栏或Banner广告，页面中间主要放置网站的主要内容，最下部分一般放置网站的版权信息和联系方式等。
常见的网页布局结构
2．T型布局
布局结构与英文大写字母T相似而得名。其页面的顶部一般放置横网站的标志或Banner广告，下方左侧是导航栏菜单，下方右侧则用于放置网页正文等主要内容
3．标题正文型
布局结构一般用于显示文章页面、新闻页面和一些注册页面等。
常见的网页布局结构
4．左右框架型布局
一些大型论坛和企业经常使用的一种布局结构。其布局结构主要分为左右两侧的页面。左侧一般主要为导航栏链接，右侧则放置网站的主要内容
常见的网页布局结构
5．上下框架型
与前面的左右框架型布局类似。其区别仅在于是一种上下分为两页的框架。
常见的网页布局结构
6. 综合框架型
结合左右框架型布局和上下框架型布局的页面布局技术
常见的网页布局结构
7．POP布局
一种颇具艺术感和时尚感的网页布局方式。页面设计通常以一张精美的海报画面为布局的主体。
常见的网页布局结构
8．FLASH布局
指网页页面以一个或多个Flash作为页面主体的布局方式。在这种布局中，大部分甚至整个页面都是Flash。
常见的网页布局结构
网站的结构设计
（栏目）
网站的设计
网页的版面设计
（风格和版面布局）
网页的交互设计（链接点 导航）
网页的交互设计
网站它不是一个“被动”的媒体，需要我们用鼠标去点击。
浏览者点击连接，网页显示出需要的内容然后再传递给浏览者。这就是网页的交互性。
实践：网站的规划设计
在我的电脑地址栏输入ftp://10.1.159.100，访问网页规划与设计参考资源，观摩网站，查看资料，参考书本，规划设计自己的网站，填写学案的后半部分并上交学案。
根据学案搜集文字、图片等素材，上交素材文件夹
网站主题的确定
网站运行环境的确定
网页制作工具的选择
网站开发任务的管理
网站的规划
网站主题的确定
网站的规划从选择网站的主题开始。
网站的选题，就是要根据网站的开发目标和访问网站的用户群，确立网站的主题，并给网站起一个简练响亮的名字。
网站主题的确定
作为中学生，应选择贴近我们学习和生活实际的主题，这样容易入手，容易完成，也容易吸引同学，引起共鸣。
网站主题的确定
主题要小而精
诗歌鉴赏——水调歌头.明月几时有
Flowers——荷花
最后针对这一小的题目展开进行栏目的设计，简单,容易做出特色
网站名称
一个好的网站名称可以是朴实的或者是想象力丰富的、容易引起联想的，要避免使用过于生僻难懂的词汇。
网站主题的确定
一个别具一格、琅琅上口的网站名称能令人印象深刻，不但能让用户了解网站的主题内容，而且还能吸引更多的浏览者。
说说你记得哪些网站名称？
网站主题的确定
大家选题时可以参考P95 表4-2 主题网站类型及名称
主题类型
网站名称
活动
校园快车
我们班集体
学校舞蹈队
化学夏令营
观鸟一族
科学
草原馆
星空探秘
热带雨林
奇妙的力
数学天堂
历史
史海泛舟
看春秋
上下五千年
甲午战史
国史探微
音乐
“123”乐符
乡村音乐
天籁回寰
七弦琴沙龙
经典音乐堂
体育
奥运史话
篮球技巧
滑板公园
模型新天地
运动与健康
美术
美术走廊
山水画欣赏
西洋油画集
墨池笔冢
国画欣赏
环保
垃圾反击战
绿色家园
环保阵地
水资源长廊
濒危动物
电脑
素材精品
吉祥动画
仿真天地
动感特区
3D探索者
文学
爱莲书屋
文学长廊
伴月小筑
古诗词欣赏
名言宝录
家乡
客家文化探秘
瑶族风情
中山故居
井岗宝塔
韶山颂
?
网页制作工具的选择
制作网站的软件有很多，常见易学的制作软件有FrontPage和Dreamweaver。
网页制作工具的选择
当然要让网页有好的视觉效果，还必须要有图像处理软件来对图片进行处理，如Photoshop、Fireworks；
如果还需要动画效果，还需要运用动画制作软件，如Flash、Gif动画制作软件等。
网站的规划
网站的设计
网站设计的目的在于把需要表达的信息以恰当的方式组织并呈现在网上，设法吸引人们的关注，并为浏览者提供方便的访问。
网站的设计
设计是什么?
网站的结构设计
（栏目）
网站的设计
网页的版面设计
（风格和版面布局）
网页的交互设计（链接点 导航）
网站的结构设计
写一篇文章：拟好提纲，文章才能主题明确，层次清晰
造一座高楼：设计好框架图纸，才能使楼房结构合理
作文
一级栏目
二级栏目
网站的结构设计
制作网站前要设计好网站的栏目，网站的栏目可以有多层，但并不是层数越多越好，以能够恰当地体现网站主题为好。
让我们来看看教材上的这个网站，感受它的结构设计：
网站的结构设计
（栏目）
网站的设计
网页的版面设计
（风格和版面布局）
网页的交互设计（链接点 导航）
网页的版面设计
网页的版面效果在吸引访问者浏览网页中起了重要的作用
风格设计
版面布局设计
一个色彩搭配合理、版面布局清新的网站会让访问者留恋忘返。
风格设计
什么是风格？
风格是指网站的整体形象给浏览者的综合感受
严肃庄重 清爽温馨 深沉厚重
生动活泼 古朴典雅 豪迈奔放
风格设计
生动活泼
风格设计
观摩网站截图，思考：
网站主题和风格、色彩有什么关联？
风格设计
网站主题和风格、色彩有什么关联？
风格设计与主题是密不可分的，是为突出主题服务的。
风格设计
一种风格的形成需要从多方面着手设计，包括网页布局的整体造型、色彩的搭配、字体图片的样式设置、网站的标志设计等。
色彩的搭配
风格设计注意问题
同一个网站的各网页之间应保持风格一致。
网页要呈现的内容很多，概括起来可分为标题信息、栏目信息、内容信息、附加信息等，需要进行合理的放置，让人看起来井井有条，主次分明。
版面布局设计
一个网页的版面通常以屏幕中央最能引人注意，屏幕上方紧随其后，屏幕的左右侧通常放置不太重要或固定信息，附加信息（如版权信息）一般放在最下方。
版面布局设计
版面布局的整体造型和色彩搭配的灵活运用也会影响人们的注意力，产生不同的视觉效果。
版面布局设计
版面布局没有绝对统一的方法，应视需要而定，有创意的布局会给人以耳目一新的感觉。
版面布局设计
常见的网页布局结构
1．“国字”型布局
因布局结构与汉字“国”相似而得名。其页面的最上部分一般放置网站的标志和导航栏或Banner广告，页面中间主要放置网站的主要内容，最下部分一般放置网站的版权信息和联系方式等。
常见的网页布局结构
2．T型布局
布局结构与英文大写字母T相似而得名。其页面的顶部一般放置横网站的标志或Banner广告，下方左侧是导航栏菜单，下方右侧则用于放置网页正文等主要内容
3．标题正文型
布局结构一般用于显示文章页面、新闻页面和一些注册页面等。
常见的网页布局结构
4．左右框架型布局
一些大型论坛和企业经常使用的一种布局结构。其布局结构主要分为左右两侧的页面。左侧一般主要为导航栏链接，右侧则放置网站的主要内容
常见的网页布局结构
5．上下框架型
与前面的左右框架型布局类似。其区别仅在于是一种上下分为两页的框架。
常见的网页布局结构
6. 综合框架型
结合左右框架型布局和上下框架型布局的页面布局技术
常见的网页布局结构
7．POP布局
一种颇具艺术感和时尚感的网页布局方式。页面设计通常以一张精美的海报画面为布局的主体。
常见的网页布局结构
8．FLASH布局
指网页页面以一个或多个Flash作为页面主体的布局方式。在这种布局中，大部分甚至整个页面都是Flash。
常见的网页布局结构
网站的结构设计
（栏目）
网站的设计
网页的版面设计
（风格和版面布局）
网页的交互设计（链接点 导航）
网页的交互设计
网站它不是一个“被动”的媒体，需要我们用鼠标去点击。
浏览者点击连接，网页显示出需要的内容然后再传递给浏览者。这就是网页的交互性。
实践：网站的规划设计
在我的电脑地址栏输入ftp://10.1.159.100，访问网页规划与设计参考资源，观摩网站，查看资料，参考书本，规划设计自己的网站，填写学案的后半部分并上交学案。
根据学案搜集文字、图片等素材，上交素材文件夹