dreamweavercs6教案

admin管理员组

文章数量:1532493

2024年1月20日发(作者：)

精品文档

dreamweavercs6教案

一、网页设计基础与制作流程

在网络高速发展的今天，网站已经成为一个自我展示和宣传的平台，一个网站是由多个相关联的网页构成的。一般网页上都会有文本和图像信息，复杂一些的网页上还会有声音、视频、动画、多媒体。要制作出精美的网页，不仅需要能够熟练的使用软件，还需要掌握一些网页制作的相关知识。

现在我们常用的浏览器有IE,火狐，欧朋，谷歌，搜狗，360，遨游，百度浏览器，hao123浏览器，腾讯TT。这些国产的浏览器大部分是以IE为内核的。因为浏览器的内核不同，所以同样的代码在浏览器上的显示可能不一样。如果制作页面的话，我建议用火狐或者IE。

二、Dreamweaver简介

Dreamweaver CS是一款由Adobe公司大力开发的专业HTML编辑器，用于对WEB站点，WEB页面和WEB应用程序进行设计、编码和开发。利用Dreamweaver中的可视化编辑功能，用户可以快速创建页面而无须编写任何代码。

三、表格的基本应用

表格是页面的重要元素，在DIV+CSS布局方式被广泛

运用之前，表格布局在很长一段时间中都是最重要的页面布局方式。在使用DIV+CSS布局中，也并不是完全不可2016

1 / 15

精品文档

以使用表格，而是将表格回归他本身的作用，用于显示表格式数据。

现在在一些的系统中，无论是后台使用java或是c#做的，在页面显示数据大部分使用到表格。这里的表格就类似于Excel表格，并且在项目中，通常可以使用表格导出Excel表或者是实现导入Excel表，这样在办公方面增加了用户体验。

插入表格及设置表格属性

1

、单击“插入”面板的“表格”按钮，弹出“表格”对话框，在该表格对话框中可以设置表格的行数、列数、表格的宽度、单元格间距、单元格边距、边框粗细等选项。

表格宽度：该选项用于设置表格的宽度，“宽度”的单位可以通过右边的下拉列表选择。如果以百分比定义的表格，会随着浏览器窗口大

小的改变而改变。

单元格边距：用于设置插入的表格中单元格内容和单元格之间的边框数。

单元格间距：用于设置插入的表格中相邻的表格单元格之间的像素数。

辅助功能：在该选项组定义与表格存储相关的参数，包括在“标题”文本框中定义表格标题，早“摘要”文本框2016

2 / 15

精品文档

中对标哥进行注释。

2、现在应用以下设置，单击确定按钮创建出一个表格。

3、执行“文件>打开”命令，打开第十二章的。将光标放置在单元格内，用鼠标单击表格上方，在弹出的菜单中选择“选择表格”选项即可

还可以在表格中单击鼠标右键，在弹出的快捷键菜单中选择“表格》选择表格”。

4、要选择单个单元格，将鼠标置于需要选择的单元格，在“状态”栏上的“标签选择器”中单击标签，如图

此时单元格已经被选中。

5、如果需要选择整行，只需要将鼠标移至选择的行左边，单击即可。

6、如果要选择连续的单元格，需要使鼠标从一个单元格上方开始向要连续选择单元格的方向按下左键后拖动，即可连续选择单元格。要选择不连续的几个单元格，则需在单击所选单元格的同时，按住Ctrl。

编辑表格

1、用户可以通过拖动选中表格时显示的3个选择柄来调整表格的大小。在水平方向调整表格大小，可拖动右边的选择柄。在垂直方向调整表哥的大小，可以拖动底部的选择柄。如果需要同时从两个方向调

2016

3 / 15

精品文档

整表格大小，可以拖动右下角的选择柄。

2、如果要改变某个列的宽度并保持其他列的大小不变，可以按住Shift键，然后拖动列的边框。在一种方法是在属性面板上设置宽和高文本框内的数值。

3，对表格的插入删除

选中要插入行或列的单元格，单击鼠标右键，在弹出的菜单中选择“表格>插入行”命令，就可以插入。如果要插入多行多列，选择“插入行或列”命令。

4，导入表格内容：执行“文件->打开”，打开12章的，执行“文件>导入>表格式数据”命令，弹出“导入表格式数据”对话框，将第12章关于我们.txt导入进去，单击确定。

重庆电讯职业学院

教 案

2013-2014学年第1学期

系

部计算机与传媒系

教研室 艺术设计 课 程 名 称Dreamweaver 授 课

班 级 12级计算机多媒体平面1班

主 讲 教 师 徐顺智

职

称

2016

4 / 15

精品文档

讲师

总课时

64

重庆电讯职业学院教务处制

教 学 进 度 计 划 表

前 言

Adobe DreamweaverCS6课程笔记

第一节、Dreamweaver CS6软件简介和安装

1、DreamweaverCS6是由美国Adobe公司最新开发的一款网页设计、网站管理为一体的专业软件。

2、为了保让能够正常安装，在安装时，请断开网络。

第二节、DWCS6软件界面的简介

一、软件界面组成

1、菜单栏

2、工作区

3、属性栏

4、浮动面板

二、界面的切换：为满足不同人群的需求。

三、界面的恢复：窗口——工作区——重置设计器

四、插入面板的调用。

第三节、网页相关知识

1、DreamweaverCS6是由美国Adobe公司最新开发的2016

5 / 15

精品文档

一款网页设计、网站管理为一体的专业软件。

2、什么是网页

在互联网上基于http协议传播信息的页面。

3、什么是网站

反应同一主题的多个网页的集合。

4、网页内容的组成

文字

图片

动画

多媒体

超链接

表单

网页特效

其它元素

第四节、网页制作方法与站点建立

1、网页的制作方法

代码法：html

软件制作：Dreamweaver 、frontpage。

2、制作网站前准备工作：建立站点。

3、站点：用来存放网站中所有元素的文件夹，为了制作方便需要将这个文件夹和制作软件相链接。

4、站点的建立

2016

6 / 15

精品文档

站点——建立

文件面板

应用程序栏

5、站点的分类

本地站点

远程站点

第五节、规划本地站点目录结构

1、规划本地站点目录结构

images

swf

css

scriptJS

other

2、网站主页名称

注：主页必须放在网站的根目录下面，同时名称也有特殊的要求。

第六、七节、网页中文字的输入1-2

1、网页的四个视图

2016

7 / 15

精品文档

设计视图

代码视图

拆分视图

实时视图

2、网页中的文字

文字直接输入就可以了。

回车表示换段。

shift+回车：表示换行。

输入空格时要在全角输入法状态下输入。

特殊字符的插入：“插入——html——特殊字符”

文字也可以从网站中复制，但是在复制时需要将网页中文字的格式去掉。

3、预览网页：文件——在浏览器中预览——IExplore

第八、九节、页面属性1-2

1、页面属性

修改——页面属性

或通过属性栏

2、属性

左边距、右边距、上边距、下边距。

文字字体、大小、颜色。

注：A、字体：选择常用字体。如：宋体

2016

8 / 15

精品文档

B、大小：正文文字一般设置为12-16px。

页面背景。

背景图片。

注：A、图片要放在站点内。。

B、图片名称不能为中文。

注：如果同时设置背景颜色和背景图片，以背景图片为准。

第十节、Html网页基本代码格式

1、网页基本代码

注：head：开头部分

title：标题

body：正文部分

2、常用代码

：换段

2016

9 / 15

精品文档

：换行

注：多数html代码都有对称性的特点。

第十一节、图片的插入

一、图片

1、图片格式

JPG：图片质量较高，一般用于较大的图片。如：人物、风景。

gif：用于制用按钮、动画、导航条等，图片较小，只有256种颜色。

png：兼有两种格式的特点。

注：图片的大小一般尽量控制在200K以下。

2、链接

_blank：在新的网页打工。

_self：在自身网页打开。

第十二节、图片热点

1、热点

矩形热点

圆形热点

多边形热点

注：编辑——首选参数——辅助功能——图像

2、替换

2016

10 / 15

精品文档

用于图片的注释。

当图片无法显示的时候用此内容代替。

3、宽度和高度的设置

4、相关html代码

Img：图片。

Src：位置。

热点：„„

第十三节、图片的编辑

一、裁剪、亮度对比度、锐化

注：使用Dreamweaver编辑图像是个不好的习惯，如果要编辑图像，最好使用专门的图像

编辑软件，编辑好了以后，再重新插入进来。

二、插入——图像对象——鼠标经过图像

三、水平线的插入

插入——html——水平线

四、背景颜色的代码：bgcolor

第十四节、超链接

一、超链接指的是通过点击一个对象可以链接打开另外一个对象。

二、链接的代码

内容

文字

2016

11 / 15

精品文档

三、超链接的状态

链接：链接默认颜色。

变换图像：鼠标移上去时的颜色。

已访问：访问以后链接的颜色。

活动：鼠标点下去时的颜色。

第十五节、超链接打开方式

一、链接页面打开的目标：

_blank：新窗口打开网页

New：新窗口打开网页

_parent：父窗口

_self：自身窗口、原窗口

_top：顶窗口

第十六、十七、十八、十九节、超链接对象 一、超链接的对象

文字

图片

热点

空链接

邮件链接：mailto：邮箱地址

下载链接

锚点链接

步骤：创建锚点制作链接

201612 / 15

精品文档

隐藏锚点：编辑——首选参数——不可见元素

注：锚点链接不但可以链接本页面中的锚点，也可以链接到其它页面中的锚点。

脚本链接

Javascript:——关闭窗口

Javascript:——打印文字

第二十节、表格

一、表格的作用

1、制作表格

2、定位布局

二、表格的建立

1、插入——表格

2、常用面板

三、表格的元素及代码

1、„..：单元格

2、„..：行

3、„..：表格

四、元素的选择

1、单元格

2、行

3、表格

第二十一节、表格属性

2016

13 / 15

精品文档

一 、表格参数

1、行数和列数

2、宽度

单位：象素表示绝对值。

用%表示相对值。

3、填充：单元格中的内容与边框的距离。

4、间距：表示单元格与单元格之间的距离。

5、边框：设置表格是否留有边线。

6、对齐

7、清除行高和列宽

8、将宽度转换为象素

9、将宽度转换为百分比

第二十二节、行和单元格属性

1、水平：单元格内容水平对齐方式。

2、垂直：单元格内容垂直对齐方式。

3、宽：单元格宽度。

4、高：单元格高度。

5、背景颜色：单元格背景颜色。

6、拆分和合并单元格。

注：在利用表格排版时网页中各种元素都是放入单元格内进行排版的。

第二十三节、网页布局和大小

2016

14 / 15

精品文档

一、网页布局分类

“同”字式

“厂”字式或反“厂”字式

二、网页大小

800*600分辨率宽度设为778象素

1024*768分辨率宽度设为950象素或1002象素

注：滚动条一般占有22个象素

第二十四、二十五、二十六节、实例——网页制作1

一、制作网站时的步骤：

1、设置页面边距即上、下、左、右边距都为0。

2、先整体后局部：先插入一个大表格用来定位和决定网页宽度，然后再插入小表格来定位每一个部分。

注：大表格尽量不拆分。

2016

15 / 15

本文标签： 表格网页插入设置链接