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

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

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