51自学网板书.docx

51自学网板书.docx

《51自学网板书.docx》由会员分享，可在线阅读，更多相关《51自学网板书.docx（58页珍藏版）》请在冰豆网上搜索。

51自学网板书

第一课：

网页设计基础

一、网站的概述

1、网页与网站

浏览网页时在浏览器中看到的一个个页面就是网页，而多个相关的网页的集合就构成了一个网站。

举例：

（搜狐网）（XX网）（优酷网）等等。

2、浏览网页的工具-浏览器

浏览器：

用于打开显示网页的软件。

最常见的是Windows系统自带的IE浏览器。

还有火狐Firefox、360安全浏览器、遨游、腾讯TT等等。

1）网址：

用于定位某个网站某个页面的一串字符，通常是这种格式

2）主页：

访问网站时，默认打开的第一个页面就是主页也叫首页。

3、认识网页的组成元素

文本

视频

网页标题

LOGO

导航栏

超级链接

表单

图片

二、初识Dreamweaver

1、制作网站的流程

规划网站类型及主题搜集资料素材使用软件进行网页制作测试及发布

2、认识Dreamweaver

是当前最流行、最方便的网页设计和网站开发工具软件。

Dreamweaver：

梦想编辑者。

通过这个工具，实现编辑网页的梦。

Dream：

梦想

weaver：

织布者，织工

早期是Macromedia公司推出的“网页三剑客”之一。

“网页三剑客”指的是Dreamweaver、Flash、Fireworks这三个软件，它们这三个集合起来，就像江湖中最厉害的剑客一样，成为了网站开发中的专用利器。

它集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别开发的可视化网页开发工具，前两年Macromedia公司被Adobe公司收购，DMCS5是最新推出的版本。

【操作演示】启动Dreamweaver

实例：

制作一个简单页面（两种方法对照）

三、Dreamweaver的用户界面

状态栏

浮动面板

文档工具栏

文档编辑窗口

属性面板

插入面板

菜单栏

提高：

工作窗口的设置、保存、恢复

【操作演示】关闭Dreamweaver

四、网页文件的基本操作

基本网页的文件类型为HTML文档，保存的文件扩展名为“.html”

1.创建网页文档（HTML文档）

•文件→新建→新建文档→常规→类别→基本页

2.保存指定文件（编辑中的文件如果文件名后面带有“*”号，表示未保存）

•文件→保存（或Ctrl+S）

•文件→另存为

•文件→保存全部

注意：

1、网页文件要用英文或数字进行命名，莫用中文。

2、基本网页的扩展名为.html

3.打开已建的HTML文档

•文件→打开

•右击文件，选择Dreamweaver打开。

•拖动到Dreamweaver

4.关闭文件

•文件→关闭

还未保存的网页（*），关闭时会提示你是否保存。

其他操作：

1）多个编辑文件的切换选择

2）预览编辑中的网页（快捷键F12）

五、设置网页外观属性

网页标题、页面默认字体、默认字体大小、背景颜色、背景图片、边距。

六、创建站点

1、什么是站点

Dreamweaver的站点是一种管理网站中所有相关联文件的工具。

通过站点可以对网站的相关页面及各类素材进行统一管理，还可以以使用站点管理实现将文件上传到网页服务器，测试网站。

站点简单的说就是一个文件夹。

在这个文件夹里包含了网站中所有用到的文件。

我们通过这个文件夹（站点），对我们的网站进行管理，有次序，一目了然。

2、创建站点

《我的足球网》站点根目录为D：

//jcwww

七、设置默认图像文件夹

八、管理站点

1、在“文件”面板中实现以下操作

▪选择编辑网页文件

▪创建文件或文件夹

▪剪切、粘贴、复制、删除、重命名文件或文件夹

2、站点管理

▪编辑站点

▪复制站点

▪删除站点

第二课：

制作网页的基本操作

一、在网页中添加文本

1）添加普通文本

方法：

A、直接输入

（1）用鼠标单击网页编辑窗口中的空白区域，窗口中随即出现闪动的光标，标识输入文字的起始位置。

（2）选择适当的输入法输入文字

B、复制和粘贴

C、从其他文件导入

2）添加空格

输入法切换到半角状态，按空格键只能输入一个空格。

如果需要输入多个连续的空格可以通过以下几种方法来实现：

（1）菜单“插入记录”->HTML->特殊字符->不换行空格

（2）直接按“Ctrl+Shift+Space”组合键

（3）设置软件首选参数-允许连续空格

3）添加日期时间

在文档的最后一行插入形式如“Friday,2006-07-149:

47AM”所示的日期，且要求每次保存网页时自动更新日期。

具体操作过程如下：

（1）切换到“常用”插入工具栏。

（2）按Enter键，添加一空行，将光标放置在空行与正文对齐的最左端。

（3）单击菜单【插入】→【日期】，或者单击“常用”插入栏的【日期】按钮，将弹出“插入日期”对话框。

（4）在“插入日期”对话框中，“星期格式”下拉表框中选取“Thursday,”，“日期格式”选取“1974-03-07”，在“时间格式”下拉列表框选取“10:

18PM”，选中“储存时自动更新”复选框，然后单击【确定】按钮，最后生成的日期效果为“Friday,2006-07-149:

47AM”的形式。

（5）保存插入的日期，且浏览网页。

4）插入水平线

（1）将“插入”工具栏切换到“HTML”类型。

（2）将光标放置到标题最后一个字符的右边。

（3）单击HTML插入工具栏的“水平线”按钮，即可向网页中标题与正文之间插入一条水平线。

5）添加特殊字符

（1）通过菜单【插入】→【HTML】→【特殊字符】插入

先将光标放置到需要插入特殊字符的位置，然后展开菜单【插入】→【HTML】→【特殊字符】，在【特殊字符】的级联菜单中选择需要插入的特殊字符。

（2）通过“文本”插入工具栏插入

先在Dreamweavercs5的“插入”工具栏中选择“文本”，显示“文本”插入工具栏。

将光标放置到需要插入特殊字符的位置，然后单击工具栏中的“文本”，单击所需插入的特殊字符即可插入到网页中。

二、编辑文本

1）网页中输入的文本可以像Word文档一样，进行编辑。

1.拖动鼠标选中一个或多个文字、一行或多行文本，也可以选中网页中的全部文本。

　2.按BackSpace键或Delete键实现删除文本操作。

　　3.实现复制、剪切、粘贴等操作。

　4.实现查找与替换操作。

　5.实现撤消或重做操作。

2）设置文本格式

字体（通用性问题）、大小、颜色、风格

注：

CSS（CascadingStyleSheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。

3）分段与换行

分段按Enter回车键（隔一行）、换行按Shift+Enter（不分段）

4）设置段落格式

a.对齐方式

b.列表编号

列表可以将文本段落用符号或序号标注起来，有两种类型：

项目列表和编号列表。

　设置项目列表的操作过程如下:

（1）选择要添加列表的若干文本段落

（2）单击属性检查器中的“项目列表”按钮或“编号列表”按钮

c.缩进

5）使用Html段落样式

三、在网页中添加图片

1）网页中常用的图片格式

使用图片的原则：

在保证画质的前提下尽可能使图片的数据量小一些，这样有利用户快速的浏览我们的网页。

.GIF格式

特点：

它的图片数据量小，可以带有动画信息，且可以透明背景显示，但最高只支持256种颜色。

用途：

大量用于网站的图标Logo、广告条Banner及网页背景图像。

但由于受到颜色的显示，不适合用于照片级的网页图像。

.JPEG格式

特点：

可以高效地压缩图片的数据量。

使图片文件变小的同时基本不丢失颜色画质。

用途：

通常用于显示照片等颜色丰富的精美图像。

.PNG格式

特点：

是一种逐步流行的网络图像格式。

既融合了GIF能做成透明背景的特点，又具有JPEG处理精美图像的优点。

用途：

常用于制作网页效果图。

2）如何获取网页图像

网上下载（我要素材网）、购买素材光盘、使用图像制作软件创作

3）插入图像

插入→图像

插入面板→常用→图像

直接将图像文件拖入编辑区

注意：

⏹在插入图像前应先将网页文件已保存，从而使所插图像引用正确。

⏹图像插入网页后，应确定图像文件已存入站点，否则在下次打开网页时，会出现看不到图像的情况。

技巧：

图像的位置、替换文字

4）设置图像的基本属性

图像→设置的名称

宽、高→可缩小和放大图片的显示尺寸。

源文件→图片的路径和名称。

替代→图像的说明文字

边框→图片是否要加边框

四、图文混排

垂直边距和水平边距→图片四周突出的尺寸

对齐→在一行中图形和文本的对齐方式

五、编辑图像

裁切

锐化

对比度/亮度

重新采样：

当图片的宽、高缩小后，重新生成更小的图片。

优化（为图片瘦身）

六、鼠标经过更换图片特效

1）概念：

是指在页面中先显示一张图像，当鼠标移动到该图像上时，图像切换成另一张图像。

2）步骤：

a将光标放到要插入图像的地方。

b单击菜单“插入记录”---->“图像对象”--“鼠标经过图像”，打开“插入鼠标经过图像对话框”。

c设置完成，单击确定。

第三章、创建超级链接

一、了解超链接

1）什么是超链接

所谓的超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。

二、创建超链接

1）到网站内页面的超链接――内部链接（网站内部页面之间创建相互链接关系）

步骤1　选中页面中的文字或图像，在属性面板中单击“链接”文本框右侧的文件夹图标，以通过浏览选择一个文件

步骤2　从“目标”下拉菜单中，选择文档的打开位置。

_self：

会在当前网页所在的窗口或框架中打开（默认方式）。

_blank:

每个链接会创建一下新的窗口。

_new：

会在同一个刚创建的窗口中打开。

_parent：

如果是嵌套的框架，则在父框架中打开。

_top：

会在完整的浏览器窗口中打开。

2）到网站外页面的超链接――外部链接

步骤1选中文字或图像之后，直接在属性面板的“链接”文本框中输入外部的链接地址，如

步骤2然后在“目标”下拉菜单中设置这个链接的目标窗口。

⏹内部链接　这种链接的目标点是同个网站中的其他网页（文档），称为内部链接

⏹外部链接　这种链接的目标点是不同站点或本站点以外的网页（文档），称为外部链接。

注意：

链接中使用完整的URL地址如：

http:

//（是浏览网页网络协议）（域名）

3）链接样式

链接颜色：

指定应用于链接文字的颜色

已访问链接：

指定链接被访问过的颜色

变换图像链接：

指定当鼠标位于链接上时的颜色。

活动链接：

指定但鼠标在链接上点击时的颜色。

4）到网页某一特定位置的超链接――锚点链接

⏹锚点链接　这种链接的目标端点是网页中的命名锚点，利用这种链接，可以跳转到当前网页中的某一指定位置上，也可以跳转到其他网页中的某一指定位置上。

步骤1创建命名锚记，就是在网页中设置位置标记，并给该位置一个名称，以便引用。

步骤2属性面板的链接栏中直接输入“#锚点名”

注意：

1）如果链接的目标锚点标记在当前页面即输入#锚点名；

2）如果链接的目标锚点标记在其他网页，即要输入目标网页的地址和名称，然后再输入“#锚点名”

5）其他一些链接。

A.创建E-mail电子邮件链接

⏹Email链接　单击这种链接，可以启动电子邮件程序（例如：

Offiece办公软件中的Outlook）书写邮件，并发送到指定的地址。

步骤1选中文本和图像

步骤2插入栏｜常用｜电子邮件链接｜输入邮件地址

或在属性面板的链接栏中直接输入“mailto:

邮件地址”

B.创建下载链接：

当被链接的文件是exe文件或zip、rar类型的文件时，浏览器无法直接打开，便会提示文件会被下载，这就是网上下载的方法。

C.创建空链接：

空链接用来激活页面中的对象或文本。

当文本或对象被激活后，可以为之添加行为。

⏹方法：

选中要制作空链接的对象，在链接文本框中直接输入＃。

⏹在一般站点首页的导航栏中的首页链接，就可以是一个空链接

三、图像热区链接

图像热区指在一幅图片上创建多个区域（热点），并可可以点击触发。

当用户单击某个热点时，会发生某种链接或行为。

步骤：

1.选中图像

2.在图像属性面板中，使用热区工具（矩形、椭圆、多边形），在图像上划分热区。

3.为绘制的每一个热区设置不同的链接地址和替代文字。

四、创建图像导航条

使用鼠标经过变换图像的特效，创建图像导航条

五、创建跳转菜单

跳转菜单是网页中的弹出式菜单，可以创建任何文件类型的链接。

步骤：

1、插入栏｜表单｜跳转菜单

2、在“插入跳转菜单”对话框中，单击＋号添加菜单项

3、在“选择时。

转到URL”文本框中，输入该文件的路径。

六、脚本链接

通过连接触发脚本命令

1.添加到收藏夹：

javascript:

window.external.addFavorite（'','我的足球网'）

2.表示关闭窗口：

javascript:

window.close（）

3.表示弹出一个提示对话框：

javascript:

alert（‘hello！

’）

4.设置为默认主页：

（需通过空链接#触发onClick事件）

onClick="this.style.behavior='url（#default#homepage）';this.setHomePage（'

七、超链接的管理

1、链接路径

对链接路径的正确理解是确保链接有效的先决条件。

链接的路径有3种表达方式

1）绝对路径：

如果在链接中使用完整的URL（统一资源定位符）地址，这种链接路径就称作绝对路径。

一般用于链接外部网站或外部文件资源时，例如：

2）相对于文档路径：

表述源端点与链接目标端点之间的相互位置。

一般我们默认使用这种方式链接同站点的不同文件。

用“../”上一层的文件夹

3）相对于站点根目录路径:

所有链接的路径都是从站点的根目录开始的。

“/”表示根目录。

2、自动更新链接

当文件的位置被改动时，自动的更新该网页中的链接路径，同时也自动更新其他网页链接到这个网页的路径。

3、检查链接

第四章、了解HTML超文本标记

1、什么是HTML？

超文本标记语言，用于编写网页。

HTML是一切网页实现的基础，在网络中浏览的网页都是一个个由HTML标记构成的文件。

一个HTML文件包含了很多HTML标记，用来告诉浏览器应该如何显示文本、图像以及网页的背景等等

2、HTML文件结构

开学了，第一天上课有点累呀！

！

以前我可是睡到中午才起床的！

HTML的文件结构相当简单，其主体结构主要由以下。

文件头信息

在浏览器中显示的HTML文件的正文

HTML文档通常分为文件头和正文两部分。

文件头用以纪录与网页相关的重要信息，例如标题、关键字等等，通常文件头部分不会在浏览器中显示，而正文部分，则是网页的主体内容，将在浏览器中显示。

3、常见HTML标记

段落标记

回车换行标记

网页标题标记

图像标记

超链接标记

4、小结

1）任何HTML标记都是由”<“和”>”号所括住，标记名不区分大小写，但建议用小写。

2）多数标记是成对出现。

3）少数标记单独出现。

如
、

4）部分标记可以拥有属性。

如颜色、大小等等

5、认识文件头信息

设置头部信息

网页头部信息的内容作为网页的一些辅助信息。

并不会直接在网页中显示。

1）插入“刷新”，可以定时的刷新网页。

2）插入“关键字”，有利于搜索引擎收集你的页面，关键字作为搜索的依据

3）插入“说明”对网页进行说明描述，同样会得到搜索引擎的收集。

第五章表格处理

1、表格的作用：

1）存放数据2）布局页面

2、插入表格

步骤：

1）单击网页中需要插入表格的地方

2）在菜单栏选择“插入记录”->“表格”命令，或者单击“常用”工具栏里的“表格”按钮

，或者运用组合键CTRL+ALT+T

3、设置表格大小

行数和列数：

表格宽度：

表示表格在页面中宽度的大小。

像素设置的是表哥宽度的实际值，

百分比设置的是表格与页面宽度的相对比值。

边框粗细：

设置表格边框的粗细效果。

单元格边距：

是指单元格中填充内容距离边框的距离大小。

单元格间距：

是指相邻单元格之间的距离。

概念：

单元格，指的是表格里的每一个格子，就叫做单元格。

理解表格边框、单元格边框、间距、填充（边距）

4、页眉与辅助功能

页眉：

用于设置表格的行或列的标题

无：

表示不设置表格的行或列的标题

左：

表示一行归为一类，可以为每行在第一栏设置一个标题

顶部：

表示一列归为一类，可以为每列在头一栏设置一个标题

两者：

表示可以同时输入“左”端和“顶部”的标题

标题：

设置表格的标题名称，默认会出现在表格的上方。

摘要：

为表格的备注，不会在网页中显示。

二、表格的设置

1实例一足球明星相册

要求：

1）标题“足球明星”设置字体：

黑体、大小：

36像素、颜色：

#FFCC33、居中对齐

2）创建导航位置的表格1行5列、表格宽度700像素、边框为0、填充3、间距0、背景颜色为：

#FF99CC、每个单元格必须一样宽，且里面的文字居中对齐。

3）设置网页背景颜色为：

#009900，设置导航链接

4）创建图像展示表格3行4列。

宽度

700像素

边框粗细

1像素

边框颜色

#003333

单元格边距

10像素

单元格间距

10像素

表格背景颜色

#006600

第一行背景颜色

#66FFCC

第二行背景颜色

#FFFF66

第三行背景颜色

#66FF00

知识点：

1）选定表格和单元格

表格包括行、列、单元格3个组成部分。

A、选定整个表格

B、选定行或列

C、选定单元格

2）设置表格和单元格的属性

3）调整表格的尺寸

选定表格→鼠标拖动

设置属性值

调整行和列的宽度

2、实例二、制作课程表

步骤一：

插入5行6列的表格，宽度为500像素，边框、填充、间距各为1；并调整表格录入文字如下图所示：

知识点：

1）添加/删除行列

通过表格【属性】面板增加与删除表格的行和列

通过【修改】菜单完成增加与删除表格的行和列

2）单元格的合并和拆分

3）单元格的复制、粘贴、移动和清除

　在网页编辑窗口中选中要复制的对象

1.复制－－按Ctrl+C，或【编辑】｜【复制】命令。

2.移动－－按Ctrl+X，或【编辑】｜【剪切】]命令。

3.粘贴－－按Ctrl+V，或【编辑】｜【粘贴】命令。

4.拖动－－按住Ctrl＋拖，则完成复制操作。

直接拖曳可完成对象的操作。

5.清除－－按Delete，或【编辑】｜【清除】命令。

步骤二：

在步骤一的基础上，设置表格属性，如下图所示效果：

表格属性参数：

宽度

500像素

边框粗细

1像素

边距

1像素

间距

1像素

表格背景颜色

#D2E2EF

表格边框颜色

#B6C9D7

对齐

居中对齐

步骤三：

设置单元格属性，完成课程表。

如下图所示：

要求：

1）所有单元格居中对齐，字体大小为12px

2）第一列和第二行字体加粗

3）第二行背景颜色设置为：

#B6C9D7；填写科目的单元格设置背景颜色：

#E9F1F8

4）最上一行字体：

隶书36px红色；设置行高70像素；背景图片：

bg.gif

5）左上角单元格，插入图片logo.gif，设置图片宽和高为60,并设置图片在单元格的顶部对齐。

6）最下一行设置行高20像素；背景颜色：

#B6C9D7，边框颜色：

#FF0000

3、表格的html标记

表格的标签：

行标记

单元格标记

 空格

三、表格嵌套

1．概念：

就是在表格的单元格中再插入表格，形成嵌套的结构。

或者就是说在已有的表格中再创建表格。

2．步骤

A：

光标定位到需要插入嵌套表格的单元格里

B：

按照插入表格的方式，插入新的表格

实例一：

下载页面

要求：

1、背景图片为bg.gif

2.单元格颜色#33B3F0和#C8EAFB

实例二个人简历

四、应用表格布局页面

1）、类型：

网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型。

A、国字型

B拐角型

C正文型

D左右框架型

EFlash型

2、页面的构成

1）网页尺寸

根据屏幕分辨率的大小设计网页的宽度。

一般如果屏幕分辨率为800*600那么设计网页的尺寸为780*428，如果屏幕分辨率为1024*768，那么设计页面尺寸为980*600

2）页头（页眉）

通常放置logo（网站标志）和banner（广告条）

3）页脚

放置版权信息、联系电话、网站介绍、备案信息等等。

4）导航栏

实例：

国字型网页制作

第6章框架

一、什么是框架？

一个框架就是一个区域，可以单独打开一个HTML文档。

多个框架就把浏览器窗口分成不同的区域，每个区域显示不同的HTML文档。

多个框架就组成一个框架集。

这是一个左右结构的框架。

事实上这样的一个结构是由三个网页文件组成的。

首先外部的框架集是一个文件，图中我们用index.htm命名。

框架中左边命名为L，指向的是一个网页A.htm。

右边命名为R，指向的是一个网页B.htm。