资源简介

名称
《6.2网站的制作与调试》
出版社
浙教版《网络技术基础》
章节
第六章 第二节
学段
高中一年级
学时
第一学时
背景分析
《6.2网站的制作与调试》是普通高中课程标准实验教科书浙江教育出版社选修3《网络技术基础》第六章第二节。主要向学生介绍了网站的规划、设计的步骤与方法、网站的制作与发布以及网站的管理与评估。本节课是将网站的基础理论学习与实践应用技能有机结合起来，激发同学们学习网络应用技术的兴趣，提高应用网络技术解决学习生活中实际问题的能力
教学目标
1、利用采集和制作的素材进行网页版面布局设计
2、能够选择合适的色彩，设计不同主题的类型网站
3、学会用Dreamweaver制作网站的首页
4、学生小组合作
重点、难点
规划网页的布局
学会用Dreamweaver制作网站首页
教学环境
多媒体计算机教室
教学环节
教学内容
学生活动
目标分析
前情回顾
上节课我们收集了大量关于网站中要使用的素材，也进行网站栏目的划分、网站站点目录的设计。这节课我们要将这些素材整合成布局合理、结构完整的网页。
观看展示各组整理素材和网站结构的规划
回顾上节课内容
引入
欣赏教师给出的网页，说说有什么感受？这些网站中的网页是如何表达的？这节课,我们主要的精力应放在利用采集和制作的素材进行页面的设计、制作与调试上,使规划和制作方案得以圆满实现。
对上面几个网站分析，同学们得出了如下的结论。
网站的制作：首页决定风格。功能模块决定内容。版式布局合理色彩风格统一。
为设计打下基础
新授
一、在设计好网站的栏目、链接结构和整体风格之后,就可以正式动手制作首页了。首页的设计是一个网站成功与否的关键。人们往往看到首页就已经对该站点有一个整体的感觉。是不是能够促使浏览者继续点击进入,是否能够吸引浏览者留在站点上，所以,必须十分重视首页的设计和制作。设计一个首页的一般步骤是:
1、确定首页的功能模块：指需要在首页上展示的功能,通常首页都需要这样一些模块。
2、设计首页的版面：在功能模块确定后,开始设计首页的版面。
3、处理技术上的细节。主页如何能在不同分辨率的显示模式下不变如何能在浏览器中看起来都不会太丑陋,如何设置字体和链接颜色等都是制作网站过程中经常遇到的问题。
二、版面布局形式
1、“同”字形结构
2、“口”字形布局
3、“三”字形布局
4、对称形布局
5、POP形布局
6、“川”字形布局
三、页面色彩的规划
不同主题类型的网站,常常有自己的个性特征。赏心悦目的网页,色彩往往和谐优美。在确定网站的题材后,到底哪些颜色适合哪些不适合这主要根据各人的审美习惯和站点的风格来确定。下面是色彩选择的一些。
1、首页的功能模块是:网站名称、广告条、主菜单、、索、友情链接、邮件列表、计数器、版权等。首页设计首先需要确定功能。
2、每个模块就是一个积木块。如何拼精出一座漂亮的造型就看构者的创意和想象力了设计版面的最好方法是,找一张白纸,一支笔,先将理想中的草图勾出来,然后再用网页制作软件实现。
常用颜色的象征意义和给人的心理感受。
黑色:代表深沉、宁静、悲凉
白色:代表纯洁、高贵、简单
蓝色:代表大海、蓝天、浪漫、清爽
红色:代表火热、警示、奔放、喜悦
绿色:代表生命、活力、树木
黄色:代表丰收、专业、富有
紫色:代表浪漫、爱情
灰色:代表中性、阴暗、消极
棕色:代表土地
通过对网页内容结构的学习画出设计草图。
实践体验
设计网站首页
1、设计首页结构。
2、制作页眉区。
3、主导航栏的制作。
4、添加文字和内容。
5、制作版权区
6、增加个性化代码。其他页面的制作。
学生在上机操作
1、运行 Dreamweaver ,打开网根目录中的 index. htn。单击“插入”→“表格”
2、“插入“图片”，可通过“属性”面板上的高度和宽度值来进行适当的调整,
3、表格的第二行中,单击“插入”→“表格”。在主导航栏中添加子导航栏。设置超链接。
4、页面中部正方形区内填写介绍网站主题和最新更新内容的文字。
5、页面布局表格的下面页脚处,插入一个两行一列的表格。写入内容。
6、其他页面的制作方法与首页类似,只是正文部分有所区别,可以采用略有不同的页面布局。
上机实践网页的制作过程。对Dreamweaver有初步的认识。
作品评价
展示学生作品，说说自己的设计想法。
对其他小组的作品的评价结果记录到学案中。
学会欣赏评价他人作品
学考链接
https://ks.wjx.top/jq/25737868.aspx
分析测试结果，讲解习题。
登陆网址回答下面的7个问题
利用问卷星，对学生这节课的内容进行测试。
总结
这节课我们学习了网站的设计制作过程
回顾
上交学案
主题：网站的设计与制作
要求：根据准备的资料和规划，以小组合作的方式按以下步骤制作一个主题网站。
操作步骤：
规划网站的页面布局（画出草图）；规划页面的各个功能模块，并列出页面各功能模块的详细内容。
版面布局形式（草图）
功能模块的名称
功能模块的内容
例：页面区
网站的LOGO，宣传口号：
根据列出的各功能模块，运用网页制作工具（如FrontPage或Dreamweaver）按预定规划制作出的网站。
根据本章列出来的网站调试方法，对网站进行优化和测试。
活动评价：填写下表
评价指标
自我评价
活动质量
制作主题网站，合理美观
6分
制作主题网站，布局合理
5分
制作主题网站，布局简单
3分
制作主题网站，还需规划
2分
https://ks.wjx.top/jq/25737868.aspx
学考习题
开发网站过程中,小组经历了以下阶段: ①发布与管理网站;②设计网站;③制作网站; ④规划网站。请写出正确的顺序 。
学习小组应选用 软件来开发网站(至少写一种)。
网站的第一个页面被称为主页,主页文件的名字是有约定的,您在设计网站时应该将主页文件命名为
A index.htm B index.web C website.Htm D web.index
在设计网页时,我们经常用 (填“表格”或“表单”)来划分网页区域,定位元素,从而设计出布局合理、结构协调、美观匀称的网页。
在制作网页过程中,使用表格布局网页为了浏览时不显示表格的边框,则要将表格 (选填“边框的颜色”“边框的粗细”成“背景的颜色”)设置为 。
该信息技术小组在访问世界杯的官方网站时,发现官网首页文件包含下列元素:(1)文字:(2)图片:(3)链接:(4)音频。将该网页以“文本文件”类型保存到本地磁盘,则保存下来的文件内容包含: A.(1)(2) B.(1) C.(1)(2)(3) D.(1)(2)(3)(4)
7、HTML的语句中标记是成对出现的般以<作为开始标记,以 作为结束标记。

展开更多......

收起↑