北京邮电大学世纪学院信息门户.DOCVIP

北京邮电大学世纪学院 教 案 2017～2018学年第1学期 所在系部 艺术与传媒学院 课 程 名 称 网页设计技术 授 课 班 级 15级数媒艺术4、5班 主 讲 教 师 孙丽娜 使 用 教 材 《网页设计技术》 北京邮电大学世纪学院教务处制 《网页设计技术》课程教案 课程 网页设计技术 授课班级15级数媒艺术4、5班 15级艺术4班：2017年8月21、25、28（下午），9月1、4、8、11、15（下午），第1-4周 15级艺术5班：2017年8月21、25、28（上午），9月1、4、8、11、15（上午），第1-4周 章节名称 第一部分 CSS+DIV网页样式基础 授课方式 理论课+实践课 教学目的 与要求 通过本章的学习，了解基本的网页设计技术：HTML、CSS和JavaScript；掌握HTML和CSS的基础知识和高级应用。系统的学习HTMl和CSS最基本、最重要的标签和属性，最终掌握将Web内容建立成骨架式HTML模板的技术和使用CSS层级样式表微调Web内容的显示技术。 教 学 内 容 理论教学内容（10学时） HTML、CSS和JavaScript网页设计技术概述； HTML和CSS基本标签、属性； 建立骨架式HTML模板技术和使用CSS微调技术。 实践教学内容（22学时） 列表、表格、链接样式； 处理边距、填充、对齐、浮动； CSS盒模型和定位； CSS对HTML具体标签的控制； CSS对HTML布局的控制； 常见CSS问题； 课堂实践：HTML和CSS设计技术实践练习与指导。 重 点 HTML处理字体、文本块、列表、表格显示信息、内外部链接、演示、图像、多媒体、边距、填充等，掌握这些HTM和CSS最基本、最重要的标签和属性是本章的重点。 难 点 单独的标签和属性应用较简单，长篇幅的代码，既综合应用HTML和CSS标签、属性，建立骨架式HTML模板和使用CSS微调技术是本章的难点。 作 业 学习HTML和CSS技术手册，补充学习课上未涉及的标签和属性，尽可能的熟悉HTML和CSS能够实现的效果。 辅导、答疑 一、讲解Web、html、xhtml、html5、CSS、JavaScript网页设计技术的基本情况。 在学习HTML、CSS和JavaScript的复杂知识之前，获得对一些技术的稳固理解很重要。了解万维网的历史、Web的一些术语、Web浏览器、FTP文件传输、Web服务器等相关知识有助于更好的认识使用HTML标记文本文件以制作Web内容的概念。 网页设计技术属于计算机专业技术，数字媒体艺术专业的学生在学习此类知识的过程中需要面临很多基础性的问题，怎样利用HTML创建简单的Web页面？怎样包括进媒体Web界面都必须具有的所有HTML标签？怎样利用段落和换行符组织页面？怎样利用标题组织内容？怎样验证Web内容？怎样区分HTML、XML、XHTML和HTML5？怎样创建基本的样式表？怎样使用样式类？怎样使用样式ID？怎样构造内部样式表和内联样式？这些既包含了概况性的信息，又包含了重要的标签和属性，是作为网页设计技术根基的存在。在了解基本技术信息的基础上，具体的学习HTML和CSS技术语言的标签和属性，在进一步的掌握各标签和属性的表现效果和功能，才能为综合应用实践打下基础，就像英语一样，掌握了单词和语法才能进行造句，这是一项基本的学习过程。 HTML的英语意思是：Hypertext Marked Language，即超文本标记语言,是一种用来制作超文本文档的简单标记语言。超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。HTTP协议的制定使浏览器在运行超文本时有了统一的规则和标准。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台，自1990年以来HTML就一直被用作ＷＷＷ（是World Wide Web的缩写，也可简写WEB、中文叫做万维网）的信息表示语言，使用HTML语言描述的文件，需要通过WEB浏览器显示出效果。 所谓超文本，是因为它可以加入图片、声音、动画、影视等内容，HTML并不是一种程序语言，它只是一种排版网页中资料显示的结构语言，易学易懂，非常简单。HTML的普遍应用就是带来了超文本的技术----通过单击鼠标从一个主题跳转到另一个主题，与世界各地主机的文件链接。直接获取相关的主题。如下所示： 通过HTML可以表现出丰富多彩的设计风格： 图片调用：IMG SRC=文件名 文字格式：FONT SIZE=+5 COLOR=#00FFFF文字/FONT 通过HTML可以实现页面之间的跳转： 页面跳转：A HREF=文件路径/文件名/A 通过HTML可以展现多媒体的效果： 声频：EMBED SRC=音乐地址 AUTOSTART=tr