《网页设计与制作》课程 讲 稿 教师姓名 李伟 所在系 计算机科学与技术 授课专业 信管08 课程代码 总学时 36 学分 2 教材名称《网页设计与制作》 (以2课时为单元)
《网页设计与制作》课程 讲 稿 教师姓名 李 伟 所在系 计算机科学与技术 授课专业 信管 08 课程代码 总 学 时 36 学分 2 教材名称 《网页设计与制作》 （以 2 课时为单元）
课序：1 第二章_第1一2节第二章第1一2节 目的要求： 通过此节的学习，读者应掌握网络相关的基础知识，了解网页制作工具，掌 握HTML语言，学握dreamwever工具的使用，掌握站点创建方法，掌握简单网 页的制作。 教学内容： l.internet基础 2.网页制作工具 3.HTML语言的语法结构 4 利用HTML语言制作简单网页 Dreamweaver 具界面 6.了解并掌握站点的创建 7.掌握简单网页的制作 重点与难点： 重点：HTML语言和站点的创建 难点：HTML语言 教学方法：多煤体教学 手段：课程讲授为主，学生讨论练习为辅。 教学步骤： 1.首先介绍当前internet发展情况，然后导入wwW、IP及域名、网页及网站 的概念。 2.首先介绍dreamweaver工具，然后讲解站点的创建和简单网页的制作。 复习提问： 作业题目： 习题1-2 预习内容：浏览网站，分析网站结构特点及配色特点。 课时分配： 「教学环节复习提问新课讲解课堂讨论小节 作业布置 时间分配■0 85 10 3 2 第1章网页设计基础知识 本章主要介绍了网页设计前需要了解的准备知识，如网络基础知识、网页制作工具以及
课序：1 第一章 第 1—2 节 第二章 第 1—2 节 目的要求： 通过此节的学习，读者应掌握网络相关的基础知识，了解网页制作工具，掌 握 HTML 语言，掌握 dreamwever 工具的使用，掌握站点创建方法，掌握简单网 页的制作。 教学内容： 1. internet 基础 2. 网页制作工具 3. HTML 语言的语法结构 4. 利用 HTML 语言制作简单网页 5. Dreamweaver 工具界面 6. 了解并掌握站点的创建 7. 掌握简单网页的制作 重点与难点： 重点：HTML 语言和站点的创建 难点：HTML 语言 教学方法： 多媒体教学 手段：课程讲授为主，学生讨论练习为辅。 教学步骤： 1. 首先介绍当前 internet 发展情况，然后导入 WWW、IP 及域名、网页及网站 的概念。 2. 首先介绍 dreamweaver 工具，然后讲解站点的创建和简单网页的制作。 复习提问： 作业题目： 习题 1-2 预习内容：浏览网站，分析网站结构特点及配色特点。 课时分配： 教学环节 复习提问 新课讲解 课堂讨论 小节 作业布置 时间分配 0 85 10 3 2 第1章 网页设计基础知识 本章主要介绍了网页设计前需要了解的准备知识，如网络基础知识、网页制作工具以及
HTML语言等。 【本音学习日的】 通过本章的学习，读者应了解与网络相关的基础知识，了解网页制作工具，掌握T 语言 一、Internet基础 Internet是相互连接的网络集合。网络协议是网络中的设备进行通信时共同遵循的 套规则，即以何种方法获得所需的信息。 Internet所提供的服务主要是WWW、E-mail、FTP、网上传呼、在线聊天、网上购物等 等，而其中WWW和E-mail是最常用的服务。 2、ww WWW(World Wide Web)荷称为万维网，客户端只要通过“浏览器”(Browser)就可以 非常方便地访问internet上的服务器端，迅速地获得所需的信息。 3、网页与网站 什么是网页？什么是网站？两者有什么样的联系与区别呢？ 构建WWW的基本单位是网页。网页中句含所谓的“招链接”，师讨己经定义好的关排 字和图形，只要用鼠标轻轻一点，就可以自动跳转到相应的其它文件，获得相应的信息，从 而实现网页之间的链接，从而构成了WWW的纵横交织的网状结构。 通过超链接连接起来的一系列逻辑上可以视为一个整体的页面，则叫做网站 4、域名与P地址 在Internet上的每台网络设备都要有一个唯一的地址才能被访问到，这个地址就是P 地址 P地址是由32位的二进制数值构成，分成4组，转化为十进制用点分隔，比如： 202.100.4.11. 域名系统是一个分层的树状结构组织。最上面是一个无名的根域，下层为顶级域名，接 若是二级 顶级域名的分类：从组织上和地理上分类，顶级域名的管理和分配由internet网络信息 中心控制，网址为：www.internic.com。 美国采用的组织分类形式，而其它国家采用的是地理上分类，用代表国家或地区的顶级 域名，中国国内域名由中国互联网信总中心控制，网址为：www.cnnic.net.cn。 域名的书写格式为：叶节点名.二级域名.顶级域名 例如：www.sohu.com,www:web服务器名，sOhu:企业名称，com:顶级域名。 二、网页制作工具 目前网页制作工具较多，大多数网页的制作都是通过“所见即所得”的编辑工具完成的， 在网页制作过程，还需要进行素材的创作和加工，即图形和动画制作工具。 1、网页编辑工具 网页编辑工具主要分为标记型和所见即所得型。 所见即所得型的编辑软件主要有：微软的Frontpage和Dreamweaver。其中Frontpage 继承了OFFICE系列软件的界面通用、操作简单的特点，十分适合初学者使用。 但Frontpage与MacroMedia公司的Dreamweaver相比，在HTML源代码的桔确性、实
HTML 语言等。 【本章学习目的】 通过本章的学习，读者应了解与网络相关的基础知识，了解网页制作工具，掌握 HTML 语言。 一、Internet 基础 1、Internet 概述 Internet 是相互连接的网络集合。网络协议是网络中的设备进行通信时共同遵循的一 套规则，即以何种方法获得所需的信息。 Internet 所提供的服务主要是 WWW、E-mail、FTP、网上传呼、在线聊天、网上购物等 等，而其中 WWW 和 E-mail 是最常用的服务。 2、 WWW WWW(World Wide Web)简称为万维网，客户端只要通过“浏览器”（Browser）就可以 非常方便地访问 internet 上的服务器端，迅速地获得所需的信息。 3、 网页与网站 什么是网页？什么是网站？两者有什么样的联系与区别呢？ 构建 WWW 的基本单位是网页。网页中包含所谓的“超链接”，通过已经定义好的关键 字和图形，只要用鼠标轻轻一点，就可以自动跳转到相应的其它文件，获得相应的信息，从 而实现网页之间的链接，从而构成了 WWW 的纵横交织的网状结构。 通过超链接连接起来的一系列逻辑上可以视为一个整体的页面，则叫做网站。 4、 域名与 IP 地址 在 Internet 上的每台网络设备都要有一个唯一的地址才能被访问到，这个地址就是 IP 地址。 IP 地址是由 32 位的二进制数值构成，分成 4 组，转化为十进制用点分隔，比如： 202.100.4.11。 域名系统是一个分层的树状结构组织。最上面是一个无名的根域，下层为顶级域名，接 着是二级. 顶级域名的分类：从组织上和地理上分类，顶级域名的管理和分配由 internet 网络信息 中心控制，网址为：www.internic.com。 美国采用的组织分类形式，而其它国家采用的是地理上分类，用代表国家或地区的顶级 域名，中国国内域名由中国互联网信息中心控制，网址为：www.cnnic.net.cn。 域名的书写格式为：叶节点名.二级域名.顶级域名 例如：www.sohu.com，www：web 服务器名，sohu：企业名称，com：顶级域名。 二、网页制作工具 目前网页制作工具较多，大多数网页的制作都是通过“所见即所得”的编辑工具完成的， 在网页制作过程，还需要进行素材的创作和加工，即图形和动画制作工具。 1、 网页编辑工具 网页编辑工具主要分为标记型和所见即所得型。 所见即所得型的编辑软件主要有：微软的 Frontpage 和 Dreamweaver。其中 Frontpage 继承了 OFFICE 系列软件的界面通用、操作简单的特点，十分适合初学者使用。 但 Frontpage 与 MacroMedia 公司的 Dreamweaver 相比，在 HTML 源代码的精确性、实
用性以及对各种新技术的支特上都路逊一筹，本教材主要介绍的网页编辑工具是 Dreamwe 2、图形和图像处理工具 目前常用的图形和图像处理工具主要是Adobe公司出品的著名的图形图像处理软件： Photoshop和MacroMedia公司推出的Fireworks(MacroMedia公司也已被Adobe公司收购)。 Photoshop的功能十分强大，是目前最为广泛的专业图形图像处理软件之一，它捆绑了 mage 能够实现各种专业化的图像处理、动画的制作等。有兴趣的读者可查阅相关 的参考书研究和学习 Fireworks是由MacroMedia公司出品的首选WEB图形图像处理软件。它的独特之处在 于其能够优化处理大图片、切割图片、为图片加入特殊效果、制作网页的动态行为等，可以 生成Fireworks HTML,直接导入到网页中，使用非常方便。本教材将在以后的章节做详细 的介绍。 动画制作工具 Fsh是目前网页制作中最为出色的动画制作软件，它是一种交互式动画设计工具，用 它可以将音乐、声效、动画以及富有新意的界面融合在一起，以制作出高品质的网页动态效 果。F1ash所使用的图形是压缩的矢量图形，采用了网络流式媒体技术，突破了网络带宽的 限制，可以边下载边播放，这样避免用户长时间的等待，设计者可以随心所欲地设计出高品 质的动画，Flsh己经慢慢成为网页动画的标准，成为一种新兴的技术发展方向。 三、HTML语言 网页的本质是HmML,HTML即为超文本标记语言，超文本使网页之间具有跳转能力， 使浏览者可以选择阅读路径。 使用HML编写的WEB页面称之为HML文件，这种文件一般以“html”或者“htm 为扩展名，使用网页编辑工具创建HML文件。 1、HTML语法结构 HTML文件的所有控制语句称为标签，标签在一对尖括号之间，格式如下： ML语言元素 标签分为成对标签和非成对标签，比如： ,而等属于非成 对标签。标签忽略大小写，书写格式非常灵活。可使用标签的属性来进 步限定标签， 标签可以有多个属性项，各属性项的次序不限定，各属性项之间用空格来进行分隔。例如： HML中使用的注释语句为，注释内容可插入文本中任何位置，注释内 容不会显示在网页中。例如：. 2.. ● 3
用性以及对各种新技术的支持上都略逊一筹，本教材主要介绍的网页编辑工具是 Dreamweaver。 2、 图形和图像处理工具 目前常用的图形和图像处理工具主要是 Adobe 公司出品的著名的图形图像处理软件： Photoshop 和 MacroMedia 公司推出的 Fireworks（MacroMedia 公司也已被 Adobe 公司收购）。 Photoshop 的功能十分强大，是目前最为广泛的专业图形图像处理软件之一，它捆绑了 Image Ready，能够实现各种专业化的图像处理、动画的制作等。有兴趣的读者可查阅相关 的参考书研究和学习。 Fireworks 是由 MacroMedia 公司出品的首选 WEB 图形图像处理软件。它的独特之处在 于其能够优化处理大图片、切割图片、为图片加入特殊效果、制作网页的动态行为等，可以 生成 Fireworks HTML，直接导入到网页中，使用非常方便。本教材将在以后的章节做详细 的介绍。 3、 动画制作工具 Flash 是目前网页制作中最为出色的动画制作软件，它是一种交互式动画设计工具，用 它可以将音乐、声效、动画以及富有新意的界面融合在一起，以制作出高品质的网页动态效 果。Flash 所使用的图形是压缩的矢量图形，采用了网络流式媒体技术，突破了网络带宽的 限制，可以边下载边播放，这样避免用户长时间的等待，设计者可以随心所欲地设计出高品 质的动画，Flash 已经慢慢成为网页动画的标准，成为一种新兴的技术发展方向。 三、HTML 语言 网页的本质是 HTML，HTML 即为超文本标记语言，超文本使网页之间具有跳转能力， 使浏览者可以选择阅读路径。 使用 HTML 编写的 WEB 页面称之为 HTML 文件，这种文件一般以“html”或者“htm” 为扩展名，使用网页编辑工具创建 HTML 文件。 1、 HTML 语法结构 HTML 文件的所有控制语句称为标签，标签在一对尖括号之间，格式如下： HTML 语言元素 标签分为成对标签和非成对标签，比如： .，而、等属于非成 对标签。标签忽略大小写，书写格式非常灵活。可使用标签的属性来进一步限定标签，一个 标签可以有多个属性项，各属性项的次序不限定，各属性项之间用空格来进行分隔。例如： 。 HTML 中使用的注释语句为，注释内容可插入文本中任何位置，注释内 容不会显示在网页中。例如： 2、 常见的 HTML 标签 1. . 2. . ⚫ . ⚫ 3.
(1). (2).. ·.表格标趣标签，定义表格的标题。 ●.<>表格的行标签，定义表格中的一行。 <表格的单元格标签，定义表格行中的一个单元格。 第2章创建站点 本章主要介绍了Dreamweaver8的主要功能、工作界面及各个面板的用途等。 【本章学习目的】 木重点讲解 reamweaver8工作界面的组成、常用的工具面板和工具栏的功能等 通过学习，读者应了解Dreamweaver8功能以及面板的使用方法，掌握创建站点的方法。 一、Dreamweaver MX8工作界面 Dreamweaver是集网页制作和网站管理于一身的网页制作软件，它是专门为网页设计师 量身定制的可视化网页制作软件，利用它可以方便、快捷地制作跨平台和跨浏览器的动感网 页。 Dreamweaver&是Dreamweaver系列产品的最新版本，它在原来版本的功能基础之上进行了 改进和升级，功能更加强大，而且界面更美观、操作更方便，也更适于网页制作和网站管理。 二、定义本地站点 在Dreamweaver中，“站点”一词既表示Web站点，又表示属于Web站点的文档的本 地存储位置。在开始构建Web站点之前，您需要建立站点文档的本地存储位置。Dreamweaver 点可组织与Wb钻点相关的所有文档，跟踪和维护链接、管理文件、共文件以及将站 点文件传输到Web服务器上 要制作一个能够被大家浏览的网站，首先需要在本地磁盘上制作，放置在本地磁盘上的 网站被称为本地站点，传输到位于互联网web服务器里的网站被称为远程站点.Dreamweaver 8提供了对本地站点和远程站点强大的管理功能。 因而应用Dreamweaver8不仅可以创建单独的文档，还可以创建完整的Web站点。 1、创建站点 在Dreamweaver8中可以有效的建立并管理多个站点。创建站点有两种方法，一是利用 向导完成，二是利用高级设定来完成。 2、管理站点 单击“站点”菜单丨“管理站点”命令，弹出“管理站点”对话框，进行新建、编辑、 删除、复制站点等操作。 3、创建网页 在建好站点之后，就是创建网页。 ·新建网页
(1) . (2) . (3) (4) (5) . ⚫ .表格标题标签，定义表格的标题。 ⚫ .表格的行标签，定义表格中的一行。 ⚫ .表格的单元格标签，定义表格行中的一个单元格。 第2章 创建站点 本章主要介绍了 Dreamweaver 8 的主要功能、工作界面及各个面板的用途等。 【本章学习目的】 本章重点讲解了 Dreamweaver 8 工作界面的组成、常用的工具面板和工具栏的功能等， 通过学习，读者应了解 Dreamweaver 8 功能以及面板的使用方法，掌握创建站点的方法。 一、Dreamweaver MX 8 工作界面 Dreamweaver 是集网页制作和网站管理于一身的网页制作软件，它是专门为网页设计师 量身定制的可视化网页制作软件，利用它可以方便、快捷地制作跨平台和跨浏览器的动感网 页。 Dreamweaver 8 是 Dreamweaver 系列产品的最新版本，它在原来版本的功能基础之上进行了 改进和升级，功能更加强大，而且界面更美观、操作更方便，也更适于网页制作和网站管理。 二、定义本地站点 在 Dreamweaver 中，“站点”一词既表示 Web 站点，又表示属于 Web 站点的文档的本 地存储位置。在开始构建 Web 站点之前，您需要建立站点文档的本地存储位置。Dreamweaver 站点可组织与 Web 站点相关的所有文档，跟踪和维护链接、管理文件、共享文件以及将站 点文件传输到 Web 服务器上。 要制作一个能够被大家浏览的网站，首先需要在本地磁盘上制作，放置在本地磁盘上的 网站被称为本地站点，传输到位于互联网web服务器里的网站被称为远程站点。Dreamweaver 8 提供了对本地站点和远程站点强大的管理功能。 因而应用 Dreamweaver 8 不仅可以创建单独的文档，还可以创建完整的 Web 站点。 1、 创建站点 在 Dreamweaver 8 中可以有效的建立并管理多个站点。创建站点有两种方法，一是利用 向导完成，二是利用高级设定来完成。 2、管理站点 单击“站点”菜单｜“管理站点”命令，弹出“管理站点”对话框，进行新建、编辑、 删除、复制站点等操作。 3、创建网页 在建好站点之后，就是创建网页。 ⚫ 新建网页
·保存网页 ·网页制作过程 第一步，在“文档”工具栏中输入网页标题，将在浏览器的标题栏中显示。 第二步，添加背景图像。单击“属性”面板中的“页面属性”按钮，弹出“页面属性” 对话框，选择“外观”选项，设置背景图像。 第三步，输入文字，居中对齐。 第四步，插入FLASH动画· 第五步，插入图像
⚫ 保存网页 ⚫ 网页制作过程 第一步，在“文档”工具栏中输入网页标题，将在浏览器的标题栏中显示。 第二步，添加背景图像。单击“属性”面板中的“页面属性”按钮，弹出“页面属性” 对话框，选择“外观”选项，设置背景图像。 第三步，输入文字，居中对齐。 第四步，插入 FLASH 动画。 第五步，插入图像
首页 (以2课时为单元) 课序：2 第二章第1一2节第二章第1一2节 目的要求： 通过此节的学习，读者应掌握网络相关的基础知识，了解网页制作工具，掌 握HTML语言，学握dreamwever工具的使用，握站点创建方法，掌握简单网 页的制作。 教学内容： L.internet基础 2. 网页制作工具 HTML语言的语法结构 4. 利用HTML语言制作简单网页 5.Dreamweaver工具界[面 6 了解并掌握站点的创建 > 堂据简单网而的生作 教学内容： l.internet的概述 2.HTML语言 3.如何创建站点： 4掌握简单网页的制作 5.掌握站点的测试与发布 重点与难点： 重点：HTML语言和站点的创建 难点：站点的创建 教学方法： 上机实训 手段：学生实操为主，教师辅导为辅。 教学步骤： HT和.语言简介 创建站点和制作简单的制作 复习提问： 作业题目： 顶习内容： 网页更深层次的编辑 课时分配： 数学环节复习提问新课讲翠课堂讨论小节 作业布置 时间分配
首页 （以 2 课时为单元） 课序：2 第一章 第 1—2 节 第二章 第 1—2 节 目的要求： 通过此节的学习，读者应掌握网络相关的基础知识，了解网页制作工具，掌 握 HTML 语言，掌握 dreamwever 工具的使用，掌握站点创建方法，掌握简单网 页的制作。 教学内容： 1. internet 基础 2. 网页制作工具 3. HTML 语言的语法结构 4. 利用 HTML 语言制作简单网页 5. Dreamweaver 工具界面 6. 了解并掌握站点的创建 7. 掌握简单网页的制作 教学内容： 1. internet 的概述 2.HTML 语言 3.如何创建站点； 4.掌握简单网页的制作 5.掌握站点的测试与发布 重点与难点： 重点：HTML 语言和站点的创建 难点：站点的创建 教学方法： 上机实训 手段： 学生实操为主，教师辅导为辅。 教学步骤： HTML 语言简介； 创建站点和制作简单的制作。 复习提问： 作业题目： 预习内容： 网页更深层次的编辑 课时分配： 教学环节 复习提问 新课讲解 课堂讨论 小节 作业布置 时间分配
上机实训 1.背景知识 根据己经掌握的网络知识和本章学习的tml语言的知识，编写简单网页的源代码：浏 览网站，分析网站的特点。 根据本章所学的内容，创建站点和创建网页。 2.实训准备工作 保证internet连接畅通，学生主机安装相应的网页设计与制作软件：dreamweaver、 fireworks、flash、photoshop等。 在本地硬盘创 一个空文件夹yeb,并建一个子文件夹imakes。 3.实训腰求 ()打开浏览器，测览某个网页，查看其源代码，了解HTML代码的含义。 (2)打开记事本，试用HML语言编写一个简单的网页，网页中要包含以下内容：网 页标题、文字、图像、超链接等 ③)上网测览不同的电子商务网站，比如：淘宝、联想等，分析站点结构、站点风格及 网页配色等，写出分析报告。 (4)创建站点和创建网页要求：定义本地站点和新建一个网页并进行编辑。 4.课时安排：2课时 5.实训指导 (①)如何查看网页源代码？ 打开浏览器，点击“查看”菜单|“源文件”命令。 (2)知何编写HTL代码？ 打开记事本，手工编写TL代码，注意T代码的编写顺序及网页元素对应的标签。 保存网页时，网页的后缀名为html或htm。 (3)略 (4)创建站点和制作简单网页 步骤1定义本地站点，新建若干文件夹，如：i园ges、flash、templates等，有些文件 夹暂时为空，以备将来存放设定的内容。 步骤2 在定义好的站点 新建 个网页，第一个网页为index.htm或是index.html,输 入文本，插入Flash动画和图像
上 机 实 训 1. 背景知识 根据已经掌握的网络知识和本章学习的 html 语言的知识，编写简单网页的源代码；浏 览网站，分析网站的特点。 根据本章所学的内容，创建站点和创建网页。 2. 实训准备工作 保证 internet 连接畅通，学生主机安装相应的网页设计与制作软件：dreamweaver、 fireworks、flash、photoshop 等。 在本地硬盘创建一个空文件夹 myweb，并建一个子文件夹 images。 3. 实训要求 (1) 打开浏览器，浏览某个网页，查看其源代码，了解 HTML 代码的含义。 (2) 打开记事本，试用 HTML 语言编写一个简单的网页，网页中要包含以下内容：网 页标题、文字、图像、超链接等。 (3) 上网浏览不同的电子商务网站，比如：淘宝、联想等，分析站点结构、站点风格及 网页配色等，写出分析报告。 (4) 创建站点和创建网页 要求：定义本地站点和新建一个网页并进行编辑。 4. 课时安排：2 课时 5. 实训指导 (1) 如何查看网页源代码？ 打开浏览器，点击“查看”菜单｜“源文件”命令。 (2) 如何编写 HTML 代码？ 打开记事本，手工编写 HTML 代码，注意 HTML 代码的编写顺序及网页元素对应的标签。 保存网页时，网页的后缀名为 html 或 htm。 (3) 略 (4) 创建站点和制作简单网页 步骤 1 定义本地站点，新建若干文件夹，如：images、flash、templates 等，有些文件 夹可暂时为空，以备将来存放设定的内容。 步骤 2 在定义好的站点下新建一个网页，第一个网页为 index.htm 或是 index.html，输 入文本，插入 Flash 动画和图像