湖南大众传媒职业技术学院网页设计教案

湖南大众传媒职业技术学院网页设计教案内容摘要：

的图片。 （ 2）定义站点：设置 站点名称 ，命名为 我的网站。 设置本地根文件夹 ,指定为 E盘下的 root文件夹。 设置 HTTP地址 为 localhost。 （ 3） 创建与设置文档的页面属性： 新建一个页面，设置文档页面属性：标题设置为 我的班级 ，背景 图像设置为 image\ 图像，左边界、边界宽带、顶部边界以及边界高度分别设置为 20。 （ 4） 设置页面中文字的字体、字体大小：选择文字部分，在属性面板设置字体及字体的大小。 （ 5） 添加背景音乐：为整个页面添加一个背景音乐。 在代码视图下在body和 /body之间如下添加代码： embed src= hidden=true autostart=true。 （ 6） 保存文件，预览文件效果。 实训过程注意事项 ： 在创建站点的过程中注意建立本地文件夹，文件夹命名最好为英文；网站中所有 的文件最好取名为英文；注意文件的路径；所有的图片文件单独放在 image 文件夹内。 背景音乐必须放在站点文件内。 学生完成实训任务，老师现场指导、答疑。 对学生实训完成情况进行阶段性讲解、说明共性问题的解决方法。 20 分钟 教学小结 本次课 重点学习了如何创建站点和管理站 点，同时也分析了网页文档的基本操作和“资源”面板、“文件”面板的使用方法。 这些操作都是最基本的操作，熟练掌握将会有助于以后网页的制作。 通过学习设置首选参数、页面属性、文件头内容，辅助工具的使用。 掌握从外观上对页面进行有效控制，方便网页的制作和浏览。 页面整体控制的方法，除了设置常规的背景颜色、背景图片等属性之外， Dreamweaver 8 还有辅助线、缩放等常用且必备的功能，掌握好这些基本工具的使用，有助于我们更好的制作网页。 作 业 课堂作业： 填空、判断与选择（做在书上） 第 4次课 文本和图像操作 本次课标题：文本和图像操作 授课班级 电广系网络新闻 0601/2/3/4/5/6 电广系技术 051(五年制 ) 上课时间 2 课时 上课地点 实验楼 503 教 学 目 标 能力 (技能 )目标 知识目标 能在网页中进行文本的各项操作 ： 输入和编辑文本、输入空格、文本换行、插入水平线、插入日期； 能对网页文本进行格式化； 能 插入图像、设置图像属性； 能进行图像与文本混合编排。 掌握 在网页中 文本和图像操作的基本方法； 了解插入 图像占位符的方法。 能力训 练任务 及案例 任务 1：在网页中输入、编辑文本 任务 2：在网页中输入、编辑图像 任务 3：制作文本和图片混排的网页 教学方法 采用任务分解和边讲边练的方法 参考资料 《网页设计三合一教程与上机实训》 网上素材 教学过程 课程导入 复习提问 怎样设置一图片作网页背景。 新课引入，明确本次课的任务 通过复习上次课内容“页面的整体控制”，引入本次课要 学习 的内容。 知识技能目标说明： 介绍本次课要掌握的知识能力目标。 一、任务 1：在网页中输入、编辑文本 网页上的信息大多都是通过文字来表达的，文字是网页的主体和构成网页最基本的元素，它具有准确快捷地传递信息、存储空间小、易复制、易保存、易打印等优点，其优势很难被其他元素所取代，制作网页时，文本的输入与编辑占了制作工作的很大部分。 通过编辑网页文本、对网页文本进行格式化处理，使网页内容更加丰富，网页布局更加美观。 基本操作 演示 ： （ 1）网页中输入文本：输入文字，输入文本空格，实现文本换行 （ 2）网页中编辑文本：网页中输入的文本与 Word 一样，也能进行编辑。 （ 3）插入相关文本要素：特殊字符、文本列表、水平线、时间、注释。 （ 4）文本的格式化：用文本属性面板设置网页中文本的格式 学生实训 （ 1）输入文本：在“旅游网站”网站中新建文件夹“文本操作”，在其中新建网页文档“ ”，输入标题“南岳衡山”，然后输入正文内容。 文字内容 附后。 （ 2）在介绍文字下插入一条“水平线”和日期，日期格式用“ xxxx年 xx 月 xx 日 ”。 （ 3）设置“主要景点”为列表格式。 （ 4）设置文本格式： 将网页 中标题“南岳衡山”格式设置为“标题 1” ，字体设置为“隶书”，大小设置为“ 36” ，文字颜色设置为“ aqua” ，水平居中。 将网页中标题以下的正文，字体设置为“宋体”，大小设置为“ 16”。 插入的日期字体设置为“楷体 _GB2321” ，大小设置为“ 18” ，文字颜色设置为“ FF6600” ，水平居中。 文字内容： 南岳衡山 （此处空两行） 南岳衡山还有许多名胜古迹和神话传说，吸引了历代各种人物，形成丰富多彩的文化沉积，宛如 一个辽阔的人文与山水文化和谐统一、水乳交融的巨型公园。 1982 年，衡山作为我国著名的自然景观和人文景观，以湖南衡山风景名胜区的名义，被国务院批准列入第一批国家级风景名胜区名单。 2020 年 8 月 1 日，南岳衡山经国务院批准列为国家级自然保护区。 衡山又名南岳，是我国五岳之一，位于湖南省衡阳市南岳区。 由于气候条件较其他四岳为好，处处是茂林修竹，终年翠绿；奇花异草，四时放香，自然景色十分秀丽，因而又有“南岳独秀”的美称。 清人魏源《衡岳吟》中说：“恒山如行，岱山如坐，华山如立，嵩山如卧，惟有南岳独如飞。 ”这是对衡山的赞 美。 10 分钟 15 分钟 结构“青天七十二芙蓉”，衡山由包括长沙岳麓山、衡阳回雁峰在内，巍然耸立着的 72 座山峰组成。 南岳的首峰就在衡阳市中心的南门口 —— 回雁峰，从“天下南岳第一峰”向北出发，沿蒸湘北路乘汽车行驶一个多小时，从眼前闪过几十座像芙蓉般婀娜多姿的山峰，就进入了南岳胜景。 如果人们从京广铁路乘火车，则于衡山站下车，再转乘汽车，只有 15 千米的路程，便可以饱览南岳的风光。 南岳还是著名的佛教圣地。 环山数百里，有寺、庙、庵、观等 200 多处。 位于南岳古镇的南岳大庙，是中国江南最大的古建筑群，占地 9800多平方米，仿北京故宫形 制，依次九进。 大庙坐北朝南，四周围以红墙，角楼高耸。 寿涧山泉，绕墙流注。 庙内，东侧有 8 个道观，西侧有 8 个佛寺，以示南岳佛道平等并存。 南岳大庙，是一件有历史意义和艺术价值的珍品， 其 规模之宏大，建筑之精美，结构之完整，布局之周密，实属罕见。 在南岳古镇，还有一座佛教古寺 —— 祝圣寺。 它位于镇的东街，与山上的南台寺、福严寺、上封寺和衡山城外的清凉寺等，合称为南岳六大佛教丛林。 相传大禹治水时曾经来到这里，并在这里建立清冷宫佘礼舜帝。 清康熙年间作为皇帝的行宫进行大规模改建，并更名祝圣寺。 现在寺的四周古木苍翠，寺内香烟 缭绕，木鱼钟磬之声，不绝于耳，佛图佛像满目，有兴趣者，还可入内与法师交谈，品尝一下南岳著名的素餐斋席。 其它如广浏寺、湘南寺、丹霞寺、铁佛寺、方广寺及传法院、黄庭观等，都是明代以前的古镡，规模大小虽不相同，但也各有佳趣。 衡山还是著名的道教名山，汉武帝以南岳名安徽霍山 ﹐ 隋文帝复以衡山为南岳。 道教称第三小洞天，名其岳神为司天王。 山有七十二峰，以祝融 ﹑ 紫盖 ﹑ 芙蓉 ﹑ 石廪 ﹑ 天柱五峰为著，祝融又为之冠。 有黄庭观，传为晋天师道女祭酒魏华存修道处。 上清宫乃晋道士徐灵期修行处。 降真观，旧名白云庵，乃唐司马承祯修道处。 九真观西 有白云先生（司马承祯）药岩。 五代道士聂师道亦修道於此。 （此处插入一条“水平线”和日期，日期格式用“ xxxx 年 xx 月 xx 日” 主要景点 祝融峰 藏经殿 方广寺 会仙桥 水帘洞 特产 南岳云雾茶 观音笋 广柑 蜜桔 猕猴桃 雁鹅菌 思考： （ 1）按 Enter 键换行与按 Shift+Enter 组合键换行时，设置文本居中对齐的效果有何不同。 （ 2）输入法为“半角”状态时，直接按空格键是否也能连续输入多个 5 分钟 空格。 二、任务 2：在网页中输入、编辑图像 图像也是网页中主要元素之一，图像不但能美化网页，与文本相比能够更直 观地表达信息。 在页面中恰到好处地使用图像能使网页更加地生动、形象和美观。 基本操作演示 （ 1）图像操作：插入图像，设置图像属性，编辑图像 （ 2）插入相关图像元素 ：插入导航条 学生实训 在“旅游网站”网站中创建文件夹“图像操作”，在该文件夹下创建网页文档“ ”，在网上找 4 张 jpg 格式的衡山景点图片 存到 该文件夹下。 然后在网页中插入这四幅图像，具体操作要求如下： （ 1）所有图片的“替换文本”分别为“衡山景观之一”，“衡山景观之二”，“衡山景观之三”，“衡山景观之四”。 （ 2）第四幅链接为“ ”。 （ 3）所有图像的“宽度”和“高度”都为“ 128”，“水平边距”都为“ 10”，边框都为“ 2”，“对齐”都为“默认值”。 对学生实训完成情况进行点评、讲解，说明共性问题的解决方法。 思考 （ 1）网页中的图文混排时，如何调整图像与文字之间的间距。 （ 1）网页中图文混排时，如何创建文字环绕图像的效果。 三、任务 3：制作文本和图片混排的网页 要求学生通过分解任务的学习，来制作 文本和图像混排的网页，进一步掌握 在网页中输入文本、空格等，实现文本换行和编辑文本 ，如何在网页中插入水平线和日期 ， 对文本进 行格式化处理 ， 在网页中插入图片，设置图片属性。 在旅游网站下新建网页，在 满足 下列要求 的 基础上自由发挥： （ 1）管理本地站点，设置网页的整体属性 ，插入的图像必须放在站点文件夹下的 image 文件夹内。 （ 2） 在网页适当位置中包含：不同字体、大小、颜色的 文本，入水平线 ， 日期，图像（在一行中插入至少两张图片，且要求图片相距一定的距离），设置图像属性。 （ 3）网页中有几种方式的换行：自行换行；按 ENTER 强行换行；按 SHIFT+ENTER 换行操作。 10 分钟 15 分钟 10 分钟 5 分钟 20 分钟 教学小结 通过本次课的学习，我们要熟练掌握键入普通文本、特殊字符和插入日期的方法；了解项目列表和编号列表，并能更改列表属性，熟练掌握对文本属性和段落属性的设置，掌握在页面上插入普通图像、设置图像的属性、调整图像的位置及大小，尤其是在图文混排时，要能够很好地将它们对齐。 在今后的网页制作过程中，要能够灵 活地运用图像来为自己的网页增添各种效果，可以使网页更加丰富、祥实、美观。 作 业 继续美化完成文本和图片混排的网页 第 5次课 使用表格布局网页 本次课标题： 使用表格布局网页 授课班级 电广系网络新闻 0601/2/3/4/5/6 电广系技术 051(五年制 ) 上课时间 2 课时 上课地点 实验楼 503 教 学 目 标 能力 (技能 )目标 知识目标 熟练 运用 用表格布局网页。 添加表格 、设置表格属性； 设置表格中行和列属性的方法 ； 拆分单元格，合并单元 格的方法 ； 在表格中输入文字并定位的方法 ； 在表。