《主题网站设计与制作》课程设计探索

2023-02-05

初中信息技术《主题网站设计与制作》主要是关于主题网站的设计。初中阶段的主题网站属于静态网站, 使用的网页语言是HTML, 制作难度降低, 对于图片、动画、视频、色彩、布局等方面的知识储备还是必需的。下面, 就《主题网站设计与制作》课程设计做一探索。

一、准备阶段

(一) 疑问

1. 此时进行课程的调整课时足够吗?

2. 调整教学进度提前到初二上学期, 学生的知识储备能够应对Dreamweaver吗?

3. 如何学习html, 便于学生精准地控制页面效果。

4. 图片、动画、音视频的学习课时和内容如何安排?

(二) 工具准备

Dreamweaver、Photoshop、flash, 互联网访问

(三) 素材准备

1.7年级、8年级苏教版初中信息技术教材

2.“网页语言简介”、“网站目录结构”、“网站总体设计方案”、“网页制作须知”

3.《搜寻远去的乡音》 (网站)

二、实践阶段

按照主题网站制作的阶段开展课程设计。

(一) 主题网站的设计与规划

首先, 需要进行网站设计的规划, 要明确网站建设的目的;可行性分析;内容设计;表现形式设计, 版面布局、标志设计、图文排版等。在欣赏优秀网站《搜寻远去的乡音》时, 引领学生侧重于观察主题、色调、布局、素材等角度。

(二) 收集与整理资料

文字和图像素材主要的来源为网络下载, 搜索文字素材时, 建议学生主要参考百度百科, 进行阅读和筛选。图片素材借助百度图片搜索, 有几个注意点:1.图像质量高, 画面清晰无水印;2.图像大小适中, 以中尺寸图片为主;3.图片的色调应与网站色调统一。动画、声音、视频素材视网站主题内容选择, 可以直接下载, 如果没有符合网站内容的此类素材, 建议待网站所有页面整体完成后通过专业软件进行制作。

(三) 制作

(1) 布局结构。2015年版教材的第48页有简单结构、表格结构、框架结构和表单结构的网页设计结构图, 因为网页上的素材种类不一, 数量较多, 为了保证页面的紧凑整齐, 建议学生使用表格结构定位素材, 便于素材的摆放和调整。 (2) 首页制作。一是使用网页制作软件Dreamweaver, 是“布局表格”和“布局单元格”按钮绘制网页表格, 将按钮切换到布局模式即可使用。搭建好首页的表格框架后, 将素材依次放入相应单元格中。二是顶部动画可以用Flash文本特效动画制作软件SWFtext做出, 选择颜色或图片作为动画的背景, 编辑文字内容, 选择不同的文字效果和背景效果, 轻松制作swf动画。三是使用Dreamweaver里的“flash按钮”, 直接插入导航按钮。 (3) 素材编辑和加工。图片可能出现不符合网站的问题;色调、边缘太过生硬、剪除、拼接等。《图片加工与制作》对于没有任何图片编辑基础的学生, 可以使用“美图秀秀”对图片的亮度、对比度、色彩等一键操作, 裁剪图片直接拖曳区域选择即可, 学生完全可以独立完成。稍复杂的修图, 如曲线调整, 抠图, 羽化, 图层叠加等运用Photoshop可以解决。Photoshop的功能丰富, 界面稍复杂, 依照老师示范也可成功操作。有需要再学习。利用Flash软件可以制作矢量动画, 也可导入图片制作。学好Flash软件就是要建立时间轴、元件、图层的概念。2015年版的第7-8页“高速铁路”, 让学生制作出包含云朵飘动、小鸟飞行、火车前进的动画, 第17页的多图层动画“苹果园”又升级了动画的构成, 组合不同图层各自的动画。第14页提出了形状补件和动画补间, 扩充了学生可以制作出的动画效果。能够使用Flash软件后, 紧贴自己的网站主题, 结合准备的图片素材或是自己绘制, 学生就可以开始创作网页用的动画作品了。声音文件以背景音乐为主, 网络下载的格式一般为wma或mp3, 都是网页支持的格式, 如需转换格式, 可以借助于audioconverter、百度音乐等专业软件。音乐文件的编辑主要是删除片段、连接声音、添加特殊效果, 比如, 淡入淡出、减噪, 让背景音乐的出现更加自然, 2015年版7年级教材第117页“音频编辑”, 借助GoldWave, 实现常见的声音文件的编辑功能。网页中使用的视频来源有拍摄、下载和截取, 以fla、mp4格式居多。直接拍摄的视频需要经过格式转换, 格式工厂、狸窝全能视频转换器可以满足大部分常见的视频格式转换要求。网络下载的视频大部分可以不用转换格式。视频的编辑可以采用会声会影, 简单方便, 学生有了Flash的使用基础, 对视频进行截取、转场、添加滤镜、添加字幕、配以音乐等简单的编辑。 (4) 语言。网页采用超文本标识语言, 即HTML语言。由于直接用HTML语言编写网页比较麻烦不直观, 因此使用制作网页的专用软件, 可视化编程。然而语言的准确性不可替代, 在Dreamweaver设计模式下, 有些不可见不可调的情况, 如看不到的空白部分在预览模式中出现了, 或是单元格之间有缝隙, 无法调整, 这就需要在代码模式下, 找出相应部分的标记语言。教材的第49到50页, 标明了部分网页语句结构, 学生制作网页时, 切换到拆分模式, 同时看到设计和代码两种状态, 便于熟悉常见语句。颜色、对齐方式、宽度高度、图片来源和大小、表格等语句的使用, 随着制作过程的深入, 都会逐渐熟悉, 调整起来准确无误。

(四) 调试、发布与维护

所有页面完成后, 需要检查网页中有无错别字、图片是否可见、视频、动画、声音能否正常播放, 特别是超级链接有无错链、漏链等情况, 所有内容准确无误后, 建议学生要开展自评和他评, 完善网站, 此后方可发布网站。

三、反思阶段

经历了学生的课程实践, 解决了准备阶段的疑问, 形成了操作模式, 学生完整地制作出作品。但是也存在准备不足、思虑欠详等情况, 我会不断积累实践经验, 以学生为中心, 努力打造效率高效果好的信息技术课程。

摘要：主题网站制作的每一阶段都是信息技术知识和技能的综合应用, 教学实践中, 我不由得产生一个想法, 是否可以做一个课程内容调整的尝试, 为了使用而学习, 针对性更强, 让学生信息技能的形成过程更加牢固, 这种课程观突破了以往只注重知识、经验的积累的局限, 把积累、迁移、促进学生发展等多方面因素作为指标。

关键词：课程设计,主题网站,软件学习