网页设计与制作 教案_第1页
网页设计与制作 教案_第2页
网页设计与制作 教案_第3页
网页设计与制作 教案_第4页
网页设计与制作 教案_第5页
已阅读5页，还剩160页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

电子工程职业学院授课方案（教案）课程：网站设计开发 教师：班级：XXX班 编写时间：X年X月课题：Internet基础知识、网页和网站教学目的及要求：了解INTERNET的基础知识，掌握静态网页和动态网页的区别，了解网站的元素构成

教学重点：网页的类型和网站的元素教学难点：网站的元素一、回顾自己了解的网页相关的知识，了解我们平时上网的网站内容二、学习新课一、Internet基础知识 1、什么是Internet Internet是全球信息资源的代名词，它的信息量非常大。是一个全球互联的广域网络。Internet建立于70年代发展起来的计算机网络群之上。第一个网络由美国国防部资助的Arpanet网络，现在已经发展为Internet网络。2、URL和HTTP

1．URL在浏览器的地址栏里输入的网站地址叫做URL(UniformResourceLocator，统一资源定位符)。当我们在浏览器的地址框中输入一个URL或是单击一个超级链接时，URL就确定了要浏览的网页地址。浏览器通过超文本传输协议(HTTP)，将Web服务器上站点的网页代码提取出来，显示成网页。URL地址的组成简介如下：例如：。它的含义如下：（1）http://：代表超文本传输协议，一般默认省略（2）www：代表主机；（3）163.com/：代表域名2．HTTPHTTP协议(HyperTextTransferProtocol，超文本传输协议)是用于从WWW服务器传输超文本到本地浏览器的传送协议。它可以使浏览器更加高效，使网络传输减少。它不仅保证计算机正确快速地传输超文本文档，还确定传输文档中的哪一部分，以及哪部分内容首先显示(如文本先于图形)等。3、超文本与超媒体 超文本我们在上网浏览一个网站的页面时，打开的网页中的页面不只是普通的文字，还可能包含有普通链接。这些页面对应的文件不再是普通的“文本文件”，这些包含链接的文件被称为超文本文件。超文本文件要遵从一个严格的标准，这个标准就是超文本标记语言(HTML)。我们所有的网页都是可以用HTML来制作的。超媒体超媒体系统是超文本系统的扩展，其不同点仅在于文件内容的不同。超文本文件仅包含文本信息，而超媒体文件则包含各种媒体、多媒体或流媒体信息。4、Web浏览器 WorldWideWeb称为万维网，简称Web。它的基本结构是采用开放式的客户/服务器结构（Client/Server），分成服务器端、客户接收机及通讯协议三个部分。二、网页和网站（一）静态网页与动态网页的区分1.网页和网站网页，是网站中的一“页”，通常是HTML格式（文件扩展名为.html或.htm或.asp或.aspx或.php或.jsp等）。网页实际是一个文件，他存放在世界某个角落的的某一台计算机中，而这台计算机必须是与互联网相连的。网页经由网址（URL）来识别与存取。网站(英文名字为website)是指在因特网上，根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合。2.静态网页和动态网页网页包括静态网页和动态网页。静态网页用户基本上不能参与，只是网站页面的静态发布。静态网页是相对于动态网页而言，是指没有后台数据库、不含程序和不可交互的网页。如图1-1所示是一个静态网页：

图1-1静态网页

动态网页一般涉及数据库操作，如：注册、登录、查询、购物等，都需要设计强大的服务器端动态程序，并考虑各种可能出现的出错情况，以保证网站的交互性和安全性。图1-2所示是一个动态网页图1-2动态网页（二）网页中的常见元素要学习网页设计与制作，首先要认识网页，了解网页中的常见元素，只有这样才能更加合理地组织和安排网页内容。如图1-3所示。图1-3网页的元素图1-3所示是网易网站的首页，文字与图片是构成一个网页的两个最基本的元素。也可以简单的理解为：文字，就是网页的内容，图片，就是网页的美观。除此之外，网页的元素还包括动画、音乐、程序等等。下面分别介绍各个网页元素及其在网页中的作用。1.文本文本是最重要的信息载体与交流工具，是网页发布信息所用的主要形式。一个网页展现给用户的主要应该是文本信息内容。2.图形网页上的图形一般使用JPEG、GIF和PNG3种格式，其中使用最广泛的是JPEG和GIF格式，这两种格式具有跨平台的特性，可以在不同操作系统支持的浏览器上显示。通常图形在网页中有如下的应用。3.超链接超链接是网页中一种非常重要的功能，是网页中最重要、最根本的元素之一。4.表格表格用来控制网页中信息的布局方式。许多大型的网站（如搜狐、网易、新浪、雅虎等）都是使用表格来进行页面布局的。5.表单(1)网页区别于其他媒体的一个重要标志就是它的交互功能。例如:注册和留言功能(2)通常网页的交互功能都是利用表单来实现的。表单是网页中站点服务器处理的一组数据输入域，当访问者单击按钮或图形来提交表单后，数据就会传送到服务器上。6.声音和视频声音和视频也是多媒体网页的一个重要组成部分。例如：背景音乐，网页上嵌入的视频等。三、小结本节课我们学习了网页和网站的相关基础知识，要求能够理解四、作业：在网上找一个网页分析网站的类型和网站的元素旁批栏：电子工程职业学院授课方案（教案）课程：网站设计开发 教师：班级：XXX班 编写时间：X年X月课题：HTML简介教学目的及要求：了解HTML的基本语法和结构，能够编写基本的HTML网页。

教学重点：HTML的语法和结构教学难点：编写HTML的基本网页一、回顾上节内容二、学习新课一、常用网页制作工具1、网页制作软件网页设计师最常用到的软件是PS（photoshop）、dreamweaver、FLASH。PS：一款专业的图像处理软件，通过它可以制作网页的界面和按钮等。Dreamweaver:网页静态布局设计软件。FLASH：完成二维动画的软件，可以完成片头动画，或整个FLASH网站。2、HTML概念

Html是英文HyperTextMarkupLanguage的缩写，中文意思是“超文本标志语言”，用它编写的文件(文档)的扩展名是.html或.htm，它们是可供浏览器解释浏览的文件格式。您可以使用记事本、写字板或FrontPageEditor等编辑工具来编写Html文件。3、HTML基本结构HTML标记是由<和>所括住的指令，主要分为:单标记指令、双标记指令(由<起始标记>，</结束标记>所构成)。HTML网页文件保存格式是(以.htm或.html为文件后缀保存)将HTML网页文件由浏览器打开显示。HTML文件基本架构<HTML>文件开始<HEAD>标头区开始<TITLE>...</TITLE>标题区</HEAD>标头区结束<BODY>网页正文区开始网页正文区内容</BODY>网页正文区结束</HTML>文件结束<HTML>网页文件格式。<HEAD>标头区:记录文件基本资料，如作者、编写时间。<TITLE>标题区:文件标题须使用在标头区内，可以在浏览器最上面看到标题。<BODY>网页正文区:文件资料，即在浏览器上看到的网站内容。注意：通常一份HTML网页文件包含二个部份:<HEAD>...</HEAD>标头区、<BODY>...</BODY>网页正文区。而<HTML>和</HTML>代表网页文件格式。习惯上一个网站的首页名称通常订为index.htm或index.html这样只要浏览网站，浏览器便会自动的找出index.htm文件。4、HTML文字样式设置的基本标签—<font>设置字体样式的基本标签是<font></font>，被其包含的文本为样式作用区。1.设置文字的颜色color是<font></font>标签的属性之一，用于设置文字颜色。2.设置文字的尺寸size也是<font></font>标签的属性，用于设置文字大小。size的值为1-7，默认为3。我们可以size属性值之前加上“＋”、“－”字符，来指定相对于字号初始值的增量或减量。3.设置文字的字体face也是<font></font>标签的属性，用于设置文字字体（字型）。我们还可以设置其他文字效果。<i>这是斜体文字</i><em>这也是斜体文字</em>用双标签<b></b>可使被作用文字加粗，是文字更加醒目，例如文章的标题部分。<strong></strong>被称为特别强调标签，也是文字加粗4.给文字加下划线用双标签<u></u>可添加下划线到被作用文字。5.其他文字效果

<hn>...</hn>标题，设定标题字体大小，n=1(大)~6(小)会自动跳下一行。通常用在如章节、段落等标题上。5、HTML表格

表格是html的一项非常重要功能，利用其多种属性能够设计出多样化的表格。使用表格可以使你的页面有很多意想不到的效果，使页面更加整齐美观。1.<table>...</table>标记<table>...</table>表格指令。我们可以通过下面的属性对表格进行控制。·align设置对齐方式·bgcolor背景颜色·border边框·height高度·width宽度2.<caption>...</caption>表格标题相关属性:·align设置对齐方式3.<tr>...</tr>标记<tr>...</tr>表格列(</tr>可省略)相关属性:align设置对齐方式4.<th>...</th>标记<th>...</th>表格栏标题(表头)粗体字(</th>可省略)。相关属性:·align设置里面的内容对齐方式·colspan栏宽·rowspan栏高5.<td>...</td>标记<td>...</td>表格栏资料(储存格)(</td>可省略)。相关属性:·align设置列内容的对齐方式·bgcolor背景颜色·height高度·width宽度·colspan栏宽，就是跨几列·rowspan栏高，就是跨几行下面举例说明一下：如:(加强型)增加背景颜色、表格标题、栏标题、跨栏宽、跨栏高。<tableborder=1align=centerbgcolor=#ccccff><caption>表格标题</caption><tr><td><thcolspan=2>行标题1<thcolspan=2>行标题2<tr><throwspan=2>列标题1<td>a<td>a<td>a<td>a<tr><td>b<td>b<td>b<td>b<tr><throwspan=2>列标题2<td>c<td>c<td>c<td>c<tr><td>d<td>d<td>d<td>d</table>表格标题行标题1行标题2列标题1aaaabbbb列标题2ccccdddd显示效果如图1-9所示。6、HTML列表标记无序列表无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于<ul>标签。每个列表项始于<li>。<ul><li>Coffee</li><li>Milk</li></ul>浏览器显示如下：CoffeeMilk列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。有序列表同样，有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于<ol>标签。每个列表项始于<li>标签。<ol><li>Coffee</li><li>Milk</li></ol>浏览器显示如下：CoffeeMilk列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。定义列表自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以<dl>标签开始。每个自定义列表项以<dt>开始。每个自定义列表项的定义以<dd>开始。<dl><dt>Coffee</dt><dd>Blackhotdrink</dd><dt>Milk</dt><dd>Whitecolddrink</dd></dl>浏览器显示如下：CoffeeBlackhotdrinkMilkWhitecolddrink定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。7、HTML区段标记一个网站不仅要内容丰富外，也要有美观简洁的版面。html所提供的区段标记功能，如果可以好好的利用也会有相当不错的效果。1.<hr>水平线如:<hraling=certenwidth=90%>2.<br>换行3.<p>...</p>段落标记，跳下一行并加一行空白。(</p>可省略)4.<center>...</center>标记置中标记，如:<center>置中</center>5.<nobr>...</nobr>不跳下一行6.<pre>...</pre>以文件原始格式显示如:<pre>原始格式:文件</pre>8、HTML链接标记

链接可说是html中最重要的功能！因为html拥有链接的功能，使你能接上internet、www……享受多姿多彩的网络世界。1.链接分类外部链接——链接至网络的某个url网址或文件，可参考考网络链接方式。内部链接——链接html文件的某个区段。2.网络链接方式3.常用链接标记（1）<base>标记设定基本url位置或路径，以后只要设定文件名称即会自动加上位置或路径。相关属性:·href链接的url位址或文件·target指定链接到的url位址或文件显示于那一个视窗(可和<frame>视窗标记配合使用或开新的视窗)如:<basehref="http:///"><ahref="kk.htm">内容</a><basehref="http:///"target=frame1>（2）<a>...</a>链接指令相关属性:·href链接的url位址或文件·name名称·target指定链接到的url位址或文件显示于那一个视窗(可和<frame>视窗标记配合使用或开新的视窗)如:（3）外部链接<ahref="http:///">内容</a><ahref="http:///"target=frame1>内容</a>内部链接（相当于锚点）例如：ch1.htm文件<ahref=#a>内容</a>(欲链接至html文件a点)<aname=a>肉容</a>(html文件a点)ch2.htm文件<ahref=ch1.htm#a>内容</a>(欲链接至ch1.htm文件a点)"内容"表示链接点，可以是文字或图案。(即游标移到时，会变成手指形状的地方)<link>链接指令(用于head区，设定css文件)。（5）设定链接、未链接部份颜色设定链接、未链接部份颜色，用<body>...</body>标记。相关属性:·alink按下链接部份未放开时颜色·link未看过的链接部份颜色·vlink已看过的链接部份颜色如:<bodylink=#0000ffalink=#ff0000vlink=#00ff00>9、HTML设置图片

图片增加了网站版面的美观，不过也不要放大量的图片，从而拖慢网站传输的效率有关设定图片的方法共有以下几种:设定html文件背景图片、背景颜色<body>...</body>标记中设置正文内容的背景图片，用background标记，bgcolor设置网页的背景颜色。如:<bodybackground=a.gif>...</body>或<bodybgcolor=#000000>...</body>2.设定图片。通过<img>标记来设置图片的路径3.设定地图。通过<map>...</map>标记来设置10、加入声音html不仅能插入图片，也可以载入midi音乐、wav音效喔！1.背景音乐标记<bgsound>用来设置网页的背景音乐、音效。相关属性:·loop循环,背景音乐播放次数·src文件或url位址(可为wav、midi格式)如:<bgsoundsrc=m-1.midloop=true>这个指明音乐的路径和循环播放。2.内嵌音乐插件<embed>...</embed>内嵌插件。相关属性:·height高度·width宽度(可设百分比%)·src设定内嵌物件的url位址·loop循环,背景音乐播放次数·autostart自动播放如:<embedsrc=m-1.midwidth=145height=60autostart=trueloop=true></embed>11、滚动条的实现这是由ie提供的滚动条。<marquee>...</marquee>文字卷动(滚动条)。三、小结本节课我们介绍了HTML的基本标记和结构，要求读者掌握基本的语法结构四、作业上机练习完成本节的例子，然后自己用HTML制作一个个人主页的首页或者其他网页的首页。旁批栏：电子工程职业学院授课方案（教案）课程：网站设计开发 教师：班级：XXX班 编写时间：X年X月课题：HTML5简介教学目的及要求：了解HTML5的新增标签。

掌握HTML5的结构教学重点：新增标签教学难点：HTML5的结构一、回顾上节内容二、学习新课一、HTML5的变化介绍如下：1.新的文档结构HTML5的DTD声明为:<!doctypehtml><!DOCTYPEhtml>等也是正确的，因为HTML语法是不区分大小写的。以上代码就表明是一个HTML5文档。2.新增的结构标签结构标签：(块状元素)有意义的div（就是后面介绍的盒子） <article> 标记定义一篇文章 <header> 标记定义一个页面或一个区域的头部 <nav> 标记定义导航链接 <section> 标记定义一个区域 <aside> 标记定义页面内容部分的侧边栏 <hgroup> 标记定义文件中一个区块的相关信息 <figure> 标记定义一组媒体内容以及它们的标题 <figcaption> 标签定义figure元素的标题。 <footer> 标记定义一个页面或一个区域的底部 <dialog> 标记定义一个对话框(会话框)类似微信新的结构标签带来的是网页布局的改变及提升对搜索引擎的友好。3.新增的多媒体标签多媒体交互标签如下： <video>标记定义一个视频 <audio>标记定义音频内容 <source>标记定义媒体资源 <canvas>标记定义图片 <embed>标记定义外部的可交互的内容或插件比如flashHTML5的多媒体标签的出现意味着富媒体的发展以及支持不使用插件的情况下即可操作媒体文件，极大地提升了用户体验。4.新增的Web应用标签5.新增的其他标签6.删除的标签7.重新定义的HTML标签8.崭新的页面布局重点介绍下布局的变化。如下所示。如图1-14是传统的DIV布局。图中的DIV是容器，ID是对元素进行标识。具体的知识可以参见第10章。读者可以在学习第10章后写出该布局的HTML代码，CSS代码。图1-14DIV+CSS布局图1-14中的是DIV嵌套DIV进行属性设置，然后进行布局。图1-15是HTML5标签进行的布局图1-15HTML5标签布局在图1-15中应用了HTML5的新标签，我们说明如下：<header>标记定义主体内容区的头部。用<nav>标记定义导航链接。用<section> 标记定义一个区域，再在左侧区域中再用<article>标记定义一篇文章的区域，再在里面用<header>定义文章区域的头部，用<footer> 标记定义文章区域的底部。<aside> 标记定义页面内容部分的侧边栏。用<footer> 标记定义主体内容区域的底部三、小结我们简要介绍了HTML5的特性及结构，重点在于如何应用新标签完成HTML5的结构布局四、作业尝试练习HTML5的页面布局代码编写旁批栏：电子工程职业学院授课方案（教案）课程：网站设计开发 教师：班级：XXX班 编写时间：X年X月课题：DreamweaverCC2017简介、站点的规划教学目的及要求：了解DreamweaverCC2017的操作界面；掌握站点的建立及规划。

教学重点：站点的建立及规划教学难点：站点的建立及规划一、回顾上节内容二、学习新课下面我们先对DreamweaverCC2017进行简介一、DreamweaverCC2017工作界面DreamweaverCC2017工作界面，如图2-1所示。图2-1DreamweaverCC2017工作界面DreamweaverCC2017的工作界面主要由最上面的菜单栏，中间的文档编辑窗口，右侧面板组几部分组成，下面对主要的部分进行讲解。二、文档工具栏该栏中放置了“文档”窗口视图（如设计视图、代码视图、拆分视图）按钮等按钮，如图2-2所示。图2-2文档工具栏上图中的几个按钮的切换，要注意，可以在代码下编写网页，也可以拆分，设计，制作的网页也可以实时显示。三、文档窗口该窗口中显示当前创建和编辑的文档，这是进行网页设计的主要工作窗口。可以在该窗口中设计网页的任意内容如文字、图片、表格、表单、动画等内容。四、属性面板的使用属性面板用于查看和更改所选对象的各种属性。注意：选取的对象不同，其属性面板的参数设置项目也不同。五、站点的规划与创建（一）站点的规划在开始使用Dreamweaver之前，一般应该先建立一个Web站点，才能够进行以后的操作。1.MacromediaDreamweaverCC2017的站点在MacromediaDreamweaverCC2017中提供了3类站点，即本地站点、远程站点和测试服务器文件夹。本地站点和远程站点使能够在本地磁盘和Web服务器之间传输文件，这使可以轻松管理Dreamweaver站点中的文件；而测试服务器文件夹则用于动态页面的调试。2.规划站点结构规划站点结构包括以下三方面内容：（1）归类站点内容首先需要整理一下自己站点页面的内容，然后对其进行分类。一般把相关的网页放在同一个文件夹中。（2）项目放置的位置站点中除了基本的网页文件外，通常还包括图像、动画、模板文件等许多资源，也应该对这些内容进行分类，并采用有效的方式进行存储，这样有利于更好的管理和使用资源。（3）本地站点与远程站点的统一为了便于对本地站点和远程站点的管理，应该将本地站点和远程站点的结构统一，即保持结构一致。当做好网站并上传到远程站点时，就能清楚地知道远程站点的结构，而不需要上网查询。3.导航草图设计经过以上的规划分类后，就可以根据上面的设置画出一个导航草图，比如举例如图2-7所示。图2-7导航设计这个图我们只是一个例子。（二）创建站点基本结构1.站点的创建站点的创建方法有多种。创建站点的具体操作步骤如下。（1）执行“站点”|“新建站点”命令，弹出“站点设置对象”对话框，在对话框中输入“第一个站点”。（2）在“本地站点根文件夹”后面的文本框，通过浏览按钮选择“本地站点”，如我们可以选择在硬盘上建立的网站文件夹，如“F:\DWCC2017\”，其中这个文件夹是我们在建立站点前，在硬盘上创建的。（3）单击左侧的“服务器”选项，在出现的对话框中单击“+”按钮。（4）在弹出的对话框中，服务器的名称，保持默认。在“连接方法”后面的下拉菜单中选择“本地网络”。（5）在“服务器文件夹”后面的文本框中，同样选择本地文件夹的路径如：“F:\DWCC2017\”，然后以上选择完成后，在“WebURL”后面的文本框中输入:99/，选择完成后的效果如图2-13所示。图2-13“服务器基本”设置注意：我们一般在“WebURL”后面的文本框中输入http://localhost/即本地主机，也可以输入/即本地网卡的网络地址，这样输入就需要我们安装并配置计算机本地的IIS程序（Internet信息服务），而此时在“WebURL”后面的文本框中输入:99/，是因为我们用了一个测试软件来替代IIS，这个替代软件可以用来测试ASP的脚本语言的动态网站，对于ASP.NET,JSP,PHP动态网站则不适用。（6）切换到“高级”选项，在“服务器模型”后面的下拉菜单中有可以选择的网站类型，我们可以选择ASPVBScript,ASP.NETC#,也可以选择JSP,PHPMySQL，这四种网站类型，要注意的是我们同一个网站在此处只需要选择一种类型即可。（7）设置完成后，我们单击“保存”，回到“站点设置”对话框，我们将替代IIS的测试软件放到“F:\DWCC2017\”的根目录下面，双击打开这个软件，会出现网页浏览界面如图2-16所示。图2-16网页浏览界面在上机的介绍中我们用到一个免IIS的ASP测试工具，对于做动态网页，可以用这个工具取代，但是只是对于ASP网页，对于其他网页还是需要安装相应的测试服务器。三、小结本节我们重点介绍了站点的规划与创建，请一定要掌握，多多练习四、作业完成一个站点的创建与规划，自己选择一个网站的主题进行网站的创建与规划旁批栏：电子工程职业学院授课方案（教案）课程：网站设计开发 教师：班级：XXX班 编写时间：X年X月课题：站点的管理，建立一般网页的方法教学目的及要求：了解网站管理的方法，掌握用DW制作一般网页的方法。

教学重点：DW建立网页教学难点：DW建立网页一、回顾上节内容二、学习新课上节介绍了建立站点的方法，本节将学习对站点进行管理和创建网页，我们先介绍管理站点的方法一、管理站点的使用管理站点的使用包括以下几点：利用Dreamweaver，可以轻松实现站点的设置、文件的上传下载以及文件的更新等。本节将介绍如何对站点进行管理及维护。（1）打开“管理站点”对话框。选择“站点”丨“管理站点”菜单项，打开“管理站点”对话框，在对话框中可以看到已创建的所有站点，如图2-17所示。图2-17已经有的站点（2）在图2-17中有我们用标记标出来的几个管理站点的选项，我们可以一个一个去操作。管理站点主要包含删除、编辑、复制、导出、导入站点，我们可以根据书中的提示和软件向导一步步完成二、站点窗口的使用使用站点窗口可以组织本地站点和远程站点上的文件，如创建新的HTML文档，查看、打开和移动文件，创建文件夹、删除项目等。同时，也可以使用站点窗口在本地站点和远程站点间传递文件，或使用站点地图放置站点导航条。1、打开站点窗口打开站点窗口的具体操作如下。（1）选择“窗口”｜“文件”菜单命令可打开“文件”面板，如图2-22所示。图2-22打开文件面板（2）在“文件”面板中单击“扩展/折叠”按钮，可打开站点窗口，如图2-22所示。2、认识站点窗口默认情况下，远程站点或站点地图显示在站点窗口的左侧，而本地站点显示在右侧，可以通过设置站点参数来更改它们的显示方式。3、站点工具栏使用站点窗口中的工具栏可以快速设置站点窗口的显示状态，也可以在本地站点和远程站点之间传递文件，站点窗口的工具栏如图2-23所示。图2-23站点工具栏站点窗口工具栏上各按钮的含义如下。：连接远程服务器按钮。：单击“站点文件”按钮可在站点窗口中显示本地站点和远程站点的文件结构。默认情况下显示的是本地站点文件视图。展开，可以显示远程服务器和本地文件，如图2-24所示。图2-24测试服务器：单击“同步”按钮可以刷新本地站点和远程站点的目录列表。：单击“获取文件”按钮可以将远程站点中的文件复制到本地站点中。：单击“上传文件”按钮可以将本地站点中的文件上传到远程站点中。4、在站点中添加新文件夹和文件在站点中添加新文件夹和文件的具体操作如下。（1）打开“文件”面板，选择要建立新文件夹或文件的根目录。（2）在根目录图标上单击鼠标右键，在弹出的快捷菜单中选择“新建文件”或“新建文件夹”命令，如图2-26所示。图2-26建立文件或文件夹（3）Dreamweaver会自动创建名为“untitled.htm”的新文件或名为“untitled”的文件夹，并自动设置为可改写状态，如图2-27所示。图2-27默认的新文件夹（4）直接输入新的名称即可，如liuy。5、重命名文件或文件夹要重命名文件或文件夹，只需在“文件”面板中要重命名的文件或文件夹的名称上单击鼠标即可进入可改写状态，重新输入新的名称即可。2.4.7删除文件或文件夹要删除文件或文件夹，首先选中它，然后按Delete键，在打开的确认对话框中单击“是”按钮即可。三、DreamweaverCC2017中建立一般网页的方法DreamweaverCC2017创建网页的步骤如下。（1）启动DreamweaverCC2017。选择“开始”“程序”再选择Macromedia，选择MacromediaDreamweaverCC2017菜单命令，打开起始页。（2）新建一个空白的HTML网页。在主菜单中选择“文件”｜“新建”在出现的“新建文档”的对话框中，左侧选择新建文档，中间选择“HTML”，右侧选择HTML5，如图2-28所示。图2-28创建网页（3）单击“创建”，Dreamweaver即会自动创建一个空白的HTML网页。（4）然后在工作区中输入内容。在工作窗口的“编辑窗口”中输入一些简单的句子，如“DreamweaverCC2017入门与提高”，如图2-29所示。图2-29工作区输入内容（4）浏览测试。在工作区中添加内容后需要对做好的网页进行浏览测试。浏览测试的方法有3种，第1种是直接按F12键，这是最快捷的方法，建议大家以后尽量采用这种方法。（5）保存网页。在浏览测试中，如果觉得比较满意，就可以保存当前网页了。保存的方法也有多种，一种是直接按Ctrl+S键；另外一种方法是选择“文件”“保存”菜单命令，在打开的“另存为”对话框中选择该网页的保存路径，然后单击“保存”按钮。三、小结本节我们介绍了站点的管理，请读者掌握，同时要练习用DW创建网页四、作业上机操作旁批栏：电子工程职业学院授课方案（教案）课程：网站设计开发 教师：班级：XXX班 编写时间：X年X月课题：在网页中使用文本教学目的及要求：了解在DW中使用文本的方法。教学重点：了解插入文本的方法教学难点：插入各种文本一、回顾上节内容二、学习新课一、插入普通文本DreamweaverCC2017允许通过以下方式在Web页中添加文本：直接将文本输入到页面中、从其他文档复制和粘贴文本或从其他应用程序中拖放文本。若要将Word或Excel文档的内容添加到新的或现有的Web页中，具体操作如下。（1）打开要将Word或Excel文件的内容复制到的目标Web页。（2）选择“文件”“导入”Word文档或“文件”“导入Excel文档”菜单命令。在打开的“打开”对话框中，选择要添加的文件，然后单击“打开”按钮，Word或Excel文档的内容将出现在页面中。二、插入特殊文本（1）将光标定位到插入特殊字符的位置。（2）单击“插入”|“HTML”|“字符”，然后在下面选择自己想要插入的特殊字符即可，如图3-4所示。图3-4选择“插入”｜“HTML”选项卡三、在字符之间添加空格DreamweaverCC2017的HTML代码只允许字符之间包含一个空格，若要在文档中添加其他空格，必须插入不换行空格，也可以设置一个在文档中自动添加不换行空格的参数选择。1.插入不换行空格插入不换行空格，可执行如下操作之一。（1）在“插入”｜“HTML”下面的“不换行空格”，即可插入不换行空格。（2）将输入法切换到全角状态再按空格键。以上方法都可以插入不换行空格。2.设置添加不换行空格的参数设置添加不换行空格的参数，具体操作如下。（1）选择“编辑”｜“首选项”菜单命令。（2）在“分类”列表的“常规”选项中选中“允许多个连续的空格”复选框，单击“确定”按钮保存即可。注意：经过设置后，则可以直接按空格键就可以插入连续的不换行空格四、插入水平线水平线对于信息的组织很有用。在页面上，可以使用一条或多条水平线以可视方式分隔文本和对象。1.插入水平线将光标放到要插入水平线的位置，然后执行“插入”｜“HTML”｜“水平线”菜单命令，便会在文档窗口中插入一条水平线，如图3-7所示。图3-7插入一条水平线五、插入日期Dreamweaver提供了一个方便的日期对象，该对象使可以以任何喜欢的格式插入当前日期（包含或不包含时间都可以），并在每次保存文件时都自动更新该日期。将当前日期插入到文档中的具体操作如下。（1）在“文档”窗口中将插入点放在要插入日期的位置。（2）选择“插入”｜“HTML”｜“日期”菜单命令。（3）在弹出的“插入日期”对话框中选择星期格式、日期格式和时间格式。（4）单击“确定”按钮即可插入日期，最终效果如图3-13所示。三、小结本节介绍了插入文本元素的方法，读者上机练习四、作业上机操作旁批栏：电子工程职业学院授课方案（教案）课程：网站设计开发 教师：班级：XXX班 编写时间：X年X月课题：插入文本教学目的及要求：掌握插入文本的方法，并且能够完成文本网页的制作。

教学重点：文本网页的制作教学难点：文本网页制作一、回顾上节内容二、学习新课在插入或者输入文本后，我们需要对文本进行格式设置，如设置字号，字体，颜色，对齐等，则需要格式化文本。一、格式化文本Dreamweaver中的文本格式设置与使用标准字处理程序类似。可以为文本块设置默认格式化样式（段落、标题1、标题2等），更改所选文本的字体、大小、颜色和对齐方式，或者应用文本样式（如粗体、斜体、等宽字体和下划线等）。下面对制作中最常用的“文本”属性面板法进行介绍。“文本”属性面板如图3-14所示。图3-14文本属性面板“文本”属性面板中各选项含义及设置方法如下。1．格式设置所选文本（一般是标题文本）的段落样式。“段落”是应用<p>标签的默认格式，“标题1”添加<H1>标签，各具体选项如图3-15所示，设置该选项可以将所选的文本设置成各种标题。标题号越小，字体越大。图3-15格式选项要设置字体的“格式”属性，只需在“格式”下拉列表中选择相应的选项即可，如选择各种标题的效果如图3-16所示。图3-16各种格式效果2．CSS样式显示当前应用于所选文本的类样式。如果没有对选定内容应用过任何样式，则样式菜单中显示“无”；如果已对选定内容应用了多个样式，则弹出式菜单为空。选择“CSS样式”将打开“样式”对话框。利用“CSS样式”对话框可以创建新样式、删除或编辑现有样式、附加外部样式表。关于样式可以参见后面CSS样式章节。3．粗体根据在“首选参数”对话框的“常规”选项中设置的样式参数选择，将<b>或<strong>标签应用于选定的文本，即对所选文本加粗。单击按钮即可设置“加粗”设置，再次单击按钮可取消“加粗”设置。4．斜体根据在“首选参数”对话框的“常规”选项中设置的样式参数选择，将<i>或<em>标签应用于选定的文本，即对所选文本进行倾斜设置。选中按钮即可将所选的文本应用“倾斜”。再次单击按钮可取消“倾斜”设置。5．字体在“字体”下拉列表框中可以对所选的文本进行字体设置，默认情况下中文字体是“宋体”。要设置文本的“字体”，只需单击“字体”下拉列表，然后在列表中选择一种字体即可，如图3-17所示。图3-17字体列表字体列表中每一选项中包括多种字体，各种字体之间用“，”将其分隔，其含义是浏览者的浏览器中如果没有这种字体，则用“，”后面的字体进行显示，以此类推。6.大小在“大小”下拉列表中选择相应的选项，在后面的“单位”下拉列表中选择相应的度量单位即可设置所选文本的字体大小，如图3-21所示。7.颜色通过单击按钮，在弹出的颜色调色板中可以设置所选文本的字体颜色，或直接在按钮后的文本框中输入颜色的英文名或“#00ff00”形式的颜色代码，也可以设置文本的颜色。“#00ff00”形式的颜色代码是RGB颜色，必须以“＃”字符开头。8.对齐方式下面对文本段落进行对齐设置。在DreamweaverCC2017的“文本”属性面板中提供了左对齐、居中对齐、右对齐和两端对齐4种对齐方式，其设置方法如下。（1）选中要进行对齐设置的文本。（2）单击“文本”属性面板中相应的对齐方式按钮，如图3-22所示。（3）再次单击相应按钮可以取消对齐方式的设置。（4）比如：我们在设置“网页入门与提高”文本对齐方式如图3-23所示图3-22设置文本对齐方式图3-23文本对齐示例注意：进行文本对齐设置时，只能对整个文本块设置对齐方式，而不能只对段落中的部分文本进行设置。9.链接除了上述的字体格式化外，还可以对所选的文本建立超级链接，具体操作如下。（1）选中要建立链接的文本。（2）单击“文本”属性面板“链接”文本框后的按钮，在打开的“选择新文件”对话框中选择要链接的文件即可，然后单击“确定”按钮。（3）单击“确定”按钮返回到Dreamweaver编辑窗口，新建链接地址出现在“链接”后的文本框中，同时，编辑窗口中的文本显示为蓝色，且加上了下划线，如图3-25所示。图3-25设置链接后的文本（4）按F12键在IE浏览器中浏览，当鼠标移动到该链接上面时，会变成手形，单击它则可以在当前窗口中打开该文本所链接的页面。二、创建列表这点与我们前面介绍的HTML列表标记类似，实现的效果是一样的。在文档窗口中，可以用现有文本或新文本创建有序列表（编号列表）、无序列表（项目列表）及定义列表。列表可以嵌套，嵌套列表是包含在其他列表中的列表。1.有序列表有序列表又称为编号列表，创建有序列表的具体操作如下。（1）在Dreamweaver文档中，将插入点放在要添加有序列表的位置。（2）单击属性面板中的“编号列表”按钮；（3）我们也可以输入列表项文本，然后按Enter键，下一个数字前导字符自动出现在新行的前面。2.无序列表无序列表又称为项目列表，创建无序列表的具体操作如下。（1）在Dreamweaver文档中，将插入点放在要添加无序列表的位置。（2）单击属性面板中的“项目列表”按钮；指定列表项的项目符号前导字符出现在文档窗口中。（3）我们也可以输入列表项文本，然后按Enter键，下一个项目前导字符自动出现在新行的前面。3.创建嵌套列表4.列表属性设置使用“列表属性”对话框可以设置整个列表或个别列表项的外观，如设置编号样式、重置计数、设置个别列表项或整个列表的项目符号样式选项。三、实例：制作列表网页本例首先要在网页文档中插入图像和输入文本，然后为文本设置下划线，最后综合使用项目列表与编号列表来进行制作，效果如图3-37所示。图3-37列表网页（1）新建一个网页文件，然后执行“插入”｜“Image”菜单命令，打开“选择图像源文件”对话框，在对话框中选择本例的素材图像，如图3-38所示。图3-38选择图象（2）完成后单击按钮，在网页中插入一幅图像，如图3-39所示。图3-39插入的图片（3）将光标放置于图像之后，按Enter键换行，然后在文档中输入文本。我们先输入完文本，然后进行格式设置。如图3-40所示。图3-40输入文本（4）下面我们进行格式的设置，每个问题的提问设置字体为粉红色，字号为16号字，粗体。首先我们用鼠标选择文字，然后在属性面板中设置字体的大小，如图3-41所示。图3-41设置字体大小（5）然后设置粗体，并设置字体颜色为粉红色（#C1256E），如图3-42所示。图3-42设置字体和颜色（6）设置字体颜色后，再选择字体设置样式为下划线，如图3-43所示。图3-43设置下划线（7）设置下划线后，我们再设置该文字的项目列表，如图3-44所示。图3-44设置项目列表（8）设置后的效果如图3-45所示。图3-45设置效果（9）我们再设置第一个问题的答案部分的格式，首先将文字选取，然后在属性面板选择“内缩区块”按钮，如图3-46所示。图3-46选择内缩区块（10）接下来我们设置第二个提问，方法同上面的介绍，设置的格式也一样。设置效果如图3-47所示。图3-47设置效果（11）然后我们设置下面的文字显示效果，我们选择文字，然后选择属性面板中的“编号列表”，如图3-48所示。图3-48选择编号列表（12）完成效果如图3-49所示。图3-49完成效果（13）我们继续设置后面的问答，设置过程我们不再多述，最后的显示效果如图3-50所示。图3-50网页显示效果三、小结本节我们介绍了文本格式化和列表标记，要求读者能够掌握，同时，能制作出文本网页四、作业上机完成文本网页旁批栏：电子工程职业学院授课方案（教案）课程：网站设计开发 教师：班级：XXX班 编写时间：X年X月课题：在网页中使用图像教学目的及要求：了解图像的格式，掌握插入图片的方法，能够设置图片的属性，能够设置图片的链接，能够插入图片，或背景图片。教学重点：插入图片或背景图片教学难点：插入图片或背景图片一、回顾上节内容二、学习新课一、图像的格式及来源1、图象的格式由于受网络速度等方面的影响，因此在网页的制作中图像的格式有一定的要求，一般用于网页的图像要求是GIF、JPEG或PNG3种格式中的一种。2、图像的来源图像的来源有多种方式，可以自己利用图像处理软件（如Photoshop、CorelDRAW、Fireworks等软件）制作，也可以到网上下载或购买一些网页素材光盘，进行加工后用在自己的网页中。二、插入图像图像既可插入到网页中作为网页的内容，也可作为网页背景。1、插入图象作为网页内容在DreamweaverCC2017中插入图像的方法主要有直接插入图象。 直接插入图像的具体操作如下。（1）将光标定位到要插入图像的位置（文本、层或表格中）。（2）执行如下操作之一：选择“插入”｜“Image”菜单命令，打开“选择图像源文件”对话框，如图4-1所示；按“Ctrl+Alt+I”键打开“选择图像源文件”对话框。（3）选择图像后，单击“确定”按钮，若所选择的图像文件不在定义的本地站点中，系统会打开如图4-2所示的询问对话框，询问是否保存到本地站点目录下。（4）在提示对话框中单击“是”按钮，打开“复制文件为”对话框，在该对话框中选择保存路径，并在“文件名”文本框中更改图像的名称即可保存在站点文件夹中。（5）如果图象文件本来就在站点文件夹中，则直接单击“确定”即可将将所选的图像插入到网页中指定的位置，如图4-3所示。图4-3插入的图象2、设置图片的属性插入图像后可根据网页页面的需要在“属性”面板中编辑图像的属性，具体操作如下。（1）选取要编辑的图像，展开“图像”属性面板，如图4-4所示。其左上角显示了选取图像的缩略图，“SRC”文本框中显示了插入图像的源位置。图4-4图象属性面板（2）在图4-4中的“ID”文本框中可设置图像的标签名称，以便在使用Dreamweaver行为（例如“交换图像”）或脚本语言（例如JavaScript或VBScript）时可以引用该图像。（3）在图4-4中的“宽”和“高”数值框中输入数值可以修改图像的大小。（4）在图4-4中的“Src”文本框中可修改图像的路径，也可单击其右侧的“浏览文件”按钮，在打开的“选择图像源文件”对话框中选择新的图像文件。（5）单击“编辑”栏中的“裁剪”按钮可以修剪图像的大小，从所选图像中删除不需要的区域。（6）单击“编辑”中的按钮可调整图片的明暗度。（7）单击“编辑”栏中的“锐化”按钮可对图片进行锐化处理。3、给插入图像加入链接除了对文本进行链接设置外，也可以为图像加入链接，具体操作如下。（1）选中要建立链接的图像。（2）单击“图像”属性面板，通过后面的浏览按钮可以选择链接文件。（3）按F12键在IE浏览器中浏览，当鼠标移动到该链接上面时，会变成手形，单击该链接则可以在当前窗口中打开该文本所链接的页面。三、插入图象背景我们除了将图象插入作为网页的内容外，还可以将插入的图象作为背景。插入图象背景的方法如下：（1）将光标定位在网页中，然后打开“属性面板”，在“属性面板”中选择“页面属性”按钮，如图4-14所示。图4-14选择页面属性按钮在“页面属性”面板中，选择“外观CSS”，“背景图象”后面的“浏览”按钮，选择需要作为该网页的背景图象，如图4-15所示。该图中的“背景图象”后面的文本框是我们已经选择了图象的显示结果。图4-15设置背景选择图像文件后，单击“确定”按钮，背景图象出现在背景文本栏内，如前面的图4-15所示。以下代码介绍的方法是设置某一个区域如表格的背景图像，而不是整个网页背景图像，要引起重视。注意：选择背景图像，可以设置整个网页的背景图像，通过“页面属性”设置，也可以设置某个表格的背景图像。设置表格的背景图象，不能通过“页面属性”来设置，我们可以通过源代码来进行设置。如图4-16所示。图4-16设置背景图象三、小结本节课重点介绍了图片的插入方法和属性设置方法，要求能够掌握四、作业上机操作图片的插入的三种情形旁批栏：电子工程职业学院授课方案（教案）课程：网站设计开发 教师：班级：XXX班 编写时间：X年X月课题：在网页中使用图像教学目的及要求：掌握鼠标经过图像的制作方法，掌握插入FLASH的方法，能够控制FLASH的播放。

教学重点：鼠标图像的制作方法、FLASH的播放控制教学难点：同上一、回顾上节内容二、学习新课一、鼠标经过图像设置插入鼠标经过图像的具体操作如下。（1）在“文档”窗口中，将插入点放置在要显示鼠标经过图像的位置。（2）选择“插入”｜“HTML”|“鼠标经过图像”菜单命令，如图4-17所示。执行以上操作后将打开“插入鼠标经过图像”对话框，在该对话框中完成各项参数的设置操作，如图4-18所示。（4）设置完成后，单击“确定”按钮关闭“插入鼠标经过图像”对话框。（5）按F12键在IE浏览器中预览。当鼠标指针移过原始图像时将显示鼠标经过图像，具体实例见后面的介绍。注意：这个功能，可以实现导航条的动态变化，详细内容可以见我们书中的介绍，上机操作时也需要练习二、插入Flash对象Flash是Macromedia公司推出的动画制作软件，可以制作出文件较小且效果精彩的功画。目前FlasH动画是网上最为流行的动画格式，被大量应用到网页设计中。本节就介绍在页面中插入插入Flash对象的方法。1、插入Flash动画将光标置于要插入Flash的位置，执行“插入”丨“HTML” |“FlashSWF”命令，通过这个命令即可插入FLASH。在DreamweaverCC2017中可以很方便地插入Flash动画。单击选中插入的Flash,打开Flash属性面板，如图4-31所示，在属性面板中可以设置插入Flash的属性。图4-31面板属性2、插入Flash视频插入方法如下：（1）将光标置于要插入视频的位置，执行“插入记录”丨“HTML” “FlashVideo”命令。（2）弹出“插入FLV”对话框，在对话框中的URL文本框中选择视频文件的路径,并设置好宽度和高度。3、控制Flash播放在网上欣赏Flash动画时，对Flash动画进行播放控制(如转到第几帧)是有必要的。本例将介绍如何对Flash动画进行控制。（1）插入一个FLASH动画。（2）插入按钮。通过“插入”｜“表单”｜“按钮”命令，在Flash动画的下方插入两个按钮，将两个按钮的“值”设置为“播放”和“停止”，如图4-41、4-42所示。(3)添加行为。选中“播放”按钮，通过“窗口”｜“行为”，打开“行为”面板，如图4-43所示。图4-43控制ShockwaveFlash参数(7)在“行为”面板中单击“+”按钮，在弹出的下拉菜单中在左侧选择“onClick”选项，在右侧栏中输入“MM_controlShockwave('flash','','Play')”，如图4-44所示。图4-44选择事件(8)添加行为。选中“停止”按钮，在“行为”面板中单击“+“按钮，在弹出的下拉菜单中选择在弹出的下拉菜单中在左侧选择“onClick”选项，在右侧栏中输入“MM_controlShockwave('flash','','StopPlay')。(10)在IE中浏览效果。设置完成后保存页面，在IE中浏览效果，单击页面中的“播放”和“停止”按钮可以控制Flash的播放或停止，如图4-45所示。图4-45页面最终效果三、鼠标经过图像的上机练习就是导航条的制作见教材三、小结本节我们学习了鼠标经过图像的插入，也介绍了FLASH的插入，要求掌握四、作业上机操作旁批栏：工程职业学院授课方案（教案）课程：网站设计开发 教师：班级：XXX班 编写时间：X年X月课题：在网页中使用表格教学目的及要求：掌握表格的插入方法，掌握表格的操作

教学重点：表格的操作教学难点：表格的操作，单元格的操作一、回顾上节内容二、学习新课一、表格的作用在网页设计中，页面布局是一个重要的部分。DreamweaverCC2017可以用表格来布局网页。二、插入表格插入表格的具体操作如下。（1）我们新建一个网页，然后进行表格的插入操作。（2）执行下列操作之一打开“表格”对话框，如图5-1所示。选择“插入”｜“Table”菜单命令；按Ctrl+Alt+T键。图5-1表格插入在“表格”对话框中可对各项参数进行设置。可以注意几个重要的参数如：行数、列数、表格宽度、边框粗细、单元格间距。完成设置后的“表格”对话框如图5-1所示。单击“确定”按钮完成表格的创建，效果如图5-2所示。图5-2完成的表格三、在表格中添加内容向表格中添加内容的方法很简单，只需将光标定位到要输入内容的单元格，再输入文本或在“插入栏”的“常用”选项卡中单击“文本”按钮即可，我们也可以从其他文档导入表格。我们也可以在表格中插入图片，我们还可以设置表格的背景图像。四、嵌套表格嵌套表格是表格布局中一个十分重要的环节。嵌套表格是指在一个表格的单元格中再插入一个表格。嵌套表格的具体操作如下。（1）将光标定位到要插入表格的单元格中。（2）在“插入栏”的“常用”选项卡中单击按钮，打开“插入表格”对话框。（3）根据实际需要分别在行数、列数、宽度和边框等项中指定嵌套表格的属性。（4）设置完成后单击“确定”按钮即可。（5）如图5-7是“2行1列”的表格，然后再在第1行中嵌套一个“2行1列”的表格。图5-7嵌套表格一、表格基本操作表格创建完成后，我们可以对表格进行基本操作1、选定操作表格的选取是编辑表格的前提，要在表格中进行任何操作都离不开选取表格。（1）整个表格的选择●将鼠标光标定位到表格中，然后单击鼠标右键，选择“表格”｜“选择表格”命令，如图所示，执行后，即可选择该行所在的整个表格，如图5-9所示。。图5-9选取表格(2)整行或整列的选择将鼠标移到要选取行的左侧，当所选行的边框线变为红色时单击鼠标左键即可。行的选取有外层表格的行和嵌套表格的行的选取。图5-10所示为外层表格行的选取，图5-11所示为嵌套表格行的选取。图5-10外层表格行的选取图5-11嵌套表格行的选取2、单元格操作(1)单元格的选取单元格的选取分为单个单元格的选取和单元格区域的选取两种情况。单个单元格的选取方法很简单，只需将光标定位到要选取的单元格中即可。(2)单元格的合并及拆分单元格的合并与拆分是网页设计中经常用到的。合并单元格的具体操作如下。选取要合并的单元格区域。单击“属性”面板左下角的按钮，合并后的效果如图5-13所示。图5-13合并单元格拆分单元格时，可以将单元格拆分成几行，也可将单元格拆分成几列，其拆分方法相同。3、插入或删除行或列用表格设计网页时行列的插入是最常用的，下面学习如何在表格中插入行或列。（1）插入单行或单列以及删除单行或单列（2）添加多行或多列三、小结本节我们介绍了表格的基本操作，要求上机练习四、作业完成表格的创建，表格的合并，拆分等操作旁批栏：电子工程职业学院授课方案（教案）课程：网站设计开发 教师：班级：XXX班 编写时间：X年X月课题：在网页中使用表格教学目的及要求：掌握在网页中使用表格布局的方法。

教学重点：网页的表格布局教学难点：网页的表格布局一、回顾上节内容二、学习新课一、表格属性设置为了使表格更具特色，需要在“表格”属性面板中对表格线的颜色、表格或单元格的背景、边框等进行设置。1、表格属性的设置设置表格属性的具体操作如下。重点是设置行、列、宽、align几个参数。2、单元格属性设置重点是设置水平、垂直、宽、高、链接、背景颜色等参数。图5-20单元格属性面板二、表格高级操作除了对表格进行以上基本操作外，还可以对表格整列内容进行位置移动、对表格内容排序、导入/导出表格数据等高级操作，下面具体讲解。表格布局网页练习用表格布局网页和细线表格的制作三、小结本节我们学习了表格的网布布局和细线表格的制作，要求能够上机操作四、作业上机操作表格布局和细线表格的制作旁批栏：电子工程职业学院授课方案（教案）课程：网站设计开发 教师：班级：XXX班 编写时间：X年X月课题：文本图像链接教学目的及要求：了解网页链接的类型，能够制作网页中的文本图像的链接。

教学重点：文本图像的链接教学难点：文本图像的链接一、回顾上节内容二、学习新课网页中的内容必须有链接，才能实现页面的跳转，如果没有链接，则整个网站就只能有一个页面。一、文本链接文本链接的实现步骤如下:（1）新建一个网页文件。本处可以用DreamweaverCC2017打开源文件中的第6章第1节中的文本链接的模板文件。（2）如打开“left5”中的“index.html”。（3）我们对导航区域中的文本设置链接,设置文本链接可以选择要设置链接的文本,然后按照以下两种方法设置链接:一是在属性窗口的链接栏内,直接输入文本的链接网页文件路径和文件名;二是通过链接栏后面的浏览图标,浏览选择文本的链接目标。图6-2属性窗口（4）设置好链接后,可以按F12浏览,单击链接的文本将会转到目标页面。注意:在设置文本链接时,如果文本的链接是指向其他网站,则可以直接在属性栏内的链接中输入目标网站的网址,如在网页中有一个指向网页的链接,则可以直接在属性的链接栏内输入/,如图6-3所示。图6-3设置文本的网站链接二、图像超级链接1、创建图象链接设置图象链接同样可以实现文本一样的效果,同时还可以起到美化页面的作用。（1）选择图片，在图片的属性对话框中的链接内选择链接文件或者输入链接文件即可。图6-4设置图片链接参数(2)浏览页面效果。设置完毕后，在IE中浏览，单击已经设置了链接的图片按钮时，将会出现目标网页。2、创建热点区域在一张图片上，选择一些区域，可以设置这些区域的链接，这就是热点区域，设置方法如下：（1）用鼠标单击整个图片，然后出现图片属性框，如图6-10所示。图6-10图片属性（2）在图片属性面板中的左下角有几个图标就是设置热点区域的按钮，其中有矩形热点工具、圆形热点工具、多边形热点工具，此处我们选择矩形热点工具，如选择“重庆”，如图6-11所示。图6-11选择重庆的热点区域（3）选择热点区域后，图片的属性面板如图6-12所示。图6-12图片的属性面板（4）在链接栏内输入链接的网页文件或其他链接目标，也可以通过链接后的浏览图标浏览选择链接目标。注意：如果知道链接目标的名称和路径，可以直接输入，此时链接文件此时可以是不存在的，后面再建立即可，如果是浏览选择的方法来创建链接目标，则链接文件必须是已经存在的。（5）依次设置其他热点区域，并为各个热点区域设置好链接。（6）按F12在IE中浏览，单击各个热点，即可打开其链接文件。三、小结本节我们介绍了文本和图片的链接，要求能够上机操作四、作业上机操作旁批栏：电子工程职业学院授课方案（教案）课程：网站设计开发 教师：班级：XXX班 编写时间：X年X月课题：其他链接教学目的及要求：掌握网页中其他链接的设置方法教学重点：其他链接设置教学难点：其他链接设置如MP3下载，锚点、小图浏览一、回顾上节内容二、学习新课一、MP3下载超级链接经常上网的人，免不了在网上下载音乐、游戏或者软件工具等。本例将介绍制作MP3下载页面的过程。(1)新建页面。在“文件”面板中站点目录下新建文件，并将新建的文件打开。(2)设置页面属性。(3)插入表格。(5)在表格中插入图片。图6-15表格中插入图片(6)嵌套表格。设置后的效果如图6-18所示。图6-18插入嵌套表格后的表格(7)输入文本。(8)设置下载超级链接。注意:要想MP3被下载,只有设置的歌曲路径是非网页文件时,才能实现下载,如果是网页文件（.html）,则只会打开网页,而不能下载。当打开此类mp3下载时,会打开一个对话框,提示用户是保存文件,还是打开文件.（9）按F12浏览,并单击下载链接,会弹出下载对话框，如果安装了音乐播放器，则会直接播放。二、锚点链接锚点链接是一般是指链接到同一个网页的不同位置,一般适合于页面较长的网页和左右框架式网页。锚点链接的设计步骤及方法如下:（1）打开源文件锚点链接index.html。（2）在网页的主体内容部分,在中国地图上设置各个热点区域。（3）单击图片,出现图片属性面板。（4）单击圆形图片热区域工具按钮,在中国地图的每个小圆球上用鼠标拖动设置热点区域,如图6-26所示,热点区域设置后,图片属性面板的链接栏内有一个“#

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论