dreamweaver_网页制作

《dreamweaver_网页制作》由会员分享，可在线阅读，更多相关《dreamweaver_网页制作（99页珍藏版）》请在金锄头文库上搜索。

1、问题：,同学们上网都做些什么？ 还能做些什么？,网页使用者,网页制作者,网页制作工具,Dreamweaver 网页制作,Dreamweaver,Dreamweaver 由Micromedia公司出品，是当今流行的专业网页设计、网站管理、网页可视化编程应用软件。主要用于制作网站的静态网页。具有跨平台、跨浏览器的特点。,静态网页、动态网页,静态网页: HTML格式的网页，只是在页面上显示一些文本图象等信息，通常被称为静态网页。 在HTML格式的网页上，也可以出现各种动态的效果，例如：GIF格式的动画，FLASH，滚动字幕等等。然而，这些“动态效果”只是视觉上的。 动态网页: 静态网页是相对于ASP

2、、JSP等数据库网页的，动态网页的页面上访问者可以与服务器进行数据交换。 静态网页制作工具主要有Dreamweaver, frontpage等，动态编程工具主要有ASP、JSP、PHP等。,目录,一、第一单元：创建个人网站 Dreamweaver 的窗口布局 建立站点 Mysite 建立站点文件夹结构 Dmysite index.html、 、,二、制作网页（重点） 1、首页：index.html 文本 图像简单处理 Css样式设置、应用 2、“作品展示”：works.html 表格 超链接 3、“心情日记”：diary.Html 框架、框架集 多媒体插件 4、“家乡山水”：travel.ht

3、ml 热点 锚记 层和行为（网页动态效果）,文本操作 图像操作 表格操作 超链接操作 表单的使用 层、时间轴、行为的使用 框架的使用 插入多媒体,一、窗口布局,菜单栏,文档窗口,文档栏,属性面板,状态栏,对象面板,面板组,标签选择器,2.文档栏 常用按钮： 视图按钮：用于切换三种编辑网页的视图。 文档标题：浏览器浏览网页时，标题栏中显示的内容。 浏览按钮：网页编辑完后，点击此按钮可以打开浏览器浏览网页效果。,HTML简介,Html （Hypertext Markup Language）是最基本的Web页面开发语言，称为超文本标记语言。 Html是纯文本文件，可采用Windows中的记事本或写字

4、板来编辑，也可以通过专用的网页设计程序编写，如Front Page、DreamWeaver等。,文档结构,HTML元素与标签 一个HTML文档是由一系列的标记组成. ：HTML文档开始。 ：文档头部开始。 ：文档标题开始。 ：文档标题结束。 ：文档头部结束。 ：文档主体开始。 ：文档主体结束。 ：HTML文档结束。,HTML语法非常简单，它通过各种标记来表示。 1. 实例代码 在记事本中输入以下代码（从开始到结束）： HTML基础 一个简单的网页 2. 保存文件 然后执行【文件】-【保存】命令，注意要选择“保存类型”为：【所有文件】。输入文件名：test.htm，单击“保存”按钮。 3. 在I

5、E浏览器查看所创建的文件,示例：一个简单的HTML网页,标记语法,1.单标记 语法： 例如：最常用的单标记是，换行 , 2.双标记 语法：内容 例如： ，强调（通常会以斜体显示） text to emphasize 3.标记属性 许多单标记和双标记的始标记内可以包含一些属性. 语法： 例如：,一、窗口布局,状态栏,一、窗口布局,面板组,4. 面板组 Dreamweaver 中的面板被组织到面板组中。 每个面板组都可以展开或折叠，并且可以和其它面板组停靠在一起或浮动。 文件、CSS、框架、层、行为（窗口菜单）,一、窗口布局,属性面板,5. 属性面板 属性面板用于显示和修改已选定对象的属性，可以对

6、文本、图像、表格、层等进行属性设置。不同的对像对应不同的属性面板。 打开“窗口”菜单选“属性”，可以显示或隐藏属性面板,二、创建和管理站点,Dreamweaver 站点用于组织所有与网站站点关联的文档（网页和其他对象）。 本地站点 和 远端站点： 本地站点：本地文件夹。一般位于本地计算机上 。 远端站点：远端文件夹。位于运行 Web 服务器的计算机上 。,1. 创建本地站点： 站点/新建站点 站点名称： 本地根文件夹,2. 管理站点 站点/管理站点 用户可以通过“管理站点”对话框完成对站点的新建、编辑、复制、删除、导出和导入操作,3.通过文件面板管理网站文件和文件夹： 操作： 新建 打开 更改

7、名称 移动 删除等,4. 制作网站的基本流程 新建本地站点 建立站点结构 创建网页 编辑网页 设置网页的页面属性 网页元素的插入并进行属性设置 保存和预览网页,目录,一、Dreamweaver 的窗口布局 二、创建和管理站点 三、制作网页 文本操作 图像操作 表格操作 超链接操作 表单的使用 层、时间轴、行为的使用 框架的使用 插入多媒体,文本的输入与编辑 换行：【Shift+回车】，其 HTML标记为“”。 分段：【回车】，其 HTML标记为“ 字符串” ，与前一段落之间多出一个空行。,1. 文本操作文本格式,在字符之间添加空格 在Dreamweaver 中缺省设置只允许字符之间包含一个空格

8、；要在文档中输入连续空格按 “ctrl+Shift+ 空格键”,其他文本 插入特殊字符 在字符之间添加空格 “ctrl+Shift+ 空格键” 插入时间 插入水平线 (html),设置段落格式 段落格式设置有“凸出”，“缩进”，“段落格式”，“对齐”，“列表” 使用属性面板中的相应操作 选择菜单”文本”,1. 文本操作段落格式,示例1插入水平线,水平线能将网页中不同功能的区域分割开来。 在页面单击鼠标确定水平线位置“插入”菜单“水平线”。 选中水平线在属性面板为水平线起名“line-1”。 宽度设为200像素，高度为10像素，若用“百分比”作宽度单位，表示宽度占浏览器窗口的百分比。设置水平线在

9、页面中的对齐方式为“居中对齐”。如图所示。,2. 图像操作,添加背景图像 在网页上添加图像 Web页图像的格式通常有三种：GIF 、JPEG、PNG。 插入图像 “常用/图像” “选择图像源文件” （“文件系统”用来选择图形文件，“数据源”用来选择动态图像源文件） 设置图像的对齐方式 创建鼠标经过图像 “插入”菜单“图像对象”“鼠标经过图像”,3. 表格操作,表格是用于在 HTML 页上显示表格式数据以及对文本和图形进行布局的强有力的工具。 表格基本概念： 行、列、单元格 表格宽度： 宽度单位(百分比，像素) 单元格边距： 单元格间距：,插入表格 方法： 插入/表格 工具栏的表格按钮,注意：如

10、果没有明确指定单元格间距和单元格边距的值，大多数浏览器按单元格边距都设置为 1，单元格间距设置为 2， 显示表格。 若要浏览器不显示表格中的边距和间距，必须在“单元格边距”和“单元格间距”设置为 0。,选中表格和表格元素（单元格、行、列、表格） 鼠标选择 表格元素： Ctrl+鼠标：不连续 拖动鼠标滑过：矩形区域 表格：鼠标点击表格边线 标签选择器：点击标签选择器中的标签 ：单元格 ：行 ：表格,设置表格、单元格、行和列的属性,修改表格结构 “属性”检查器 “修改”菜单,嵌套表格 光标置于表格的某个单元格内，然后插入表格，就会在该单元格中嵌套一个表格,示例,示例1像素边框的表格,操作步骤, 1

11、像素边框的表格 表格 边框:0 填充:0 间距:1 背景颜色：红色（#FF0000） 单元格：背景颜色:白色（#FFFFFF）,示例用表格制作论坛界面,操作步骤：,1.页面属性：字体大小12pix 2.建立表格： 5行3列、宽度700pix、边框粗细1、其他设置为0. 第一列宽度100pix、第三列宽度150pix 合并单元格、拆分单元格 第一行背景颜色蓝色（#698cc3） 整个表格边框颜色蓝色（#698cc3） 如图：,3.插入图片输入文字 4、表格背景颜色：#FFFFCC 5.按ctrl键，选中所需单元格，用背景颜色中吸管选取插入图片的底色，将所选单元格的背景色变成鼠标点击处的颜色。 6

12、.预览,4. 超链接操作,、超链接(hyperlink)： 超级链接简称链接。是指从一个网页到另一个网页对象的链接关系。为了把百万数量级的Internet站点上众多分散的网页联系起来，构成一个整体，就必须在网页上加入链接。链接并不仅仅是网页与网页的链接，它还包括到图片、电子邮件、文档、媒体等的链接。 类型：文本、图像超链接、锚记链接、电子邮件链接、空链接 每个网页都有一个 惟一的地址，称为 统一资源定位器 （URL）。,2、链接路径 的表示方法： 绝对路径：提供所链接文档的完整URL。 http:/ 文档相对路径：省略当前文档和所链接文档都相同的绝对URL部分，只提供不同的路径部分。 站点根目

13、录相对路径：提供从站点文件夹到文档的路径。 例如 /support/dreamweaver/contents.html,相对路径 比如E:eshopindex.html链接到E:eshopbmaboutus.htm，可以把E:eshop去掉，只用bbsabout.htm。 假设一个站点的结构如下：,图5-1 站点结构,当要链接到与当前文档处于同一文件夹中的文档时，只需输入文件名。 比如要从 aboutus.htm 链接到 yewu.htm（两个文件在同一文件夹“bm”中，且目录深度相同），则其相对路径为yewu.htm。 当要链接到当前文档所在文件夹的子文件夹文档时，先要有子文件夹名称，然后跟

14、符号“/”，在加文件名。 比如要从 index.html 链接到 yewu.htm（两个文件在同一文件夹“eshop”中，index.html处于父目录中，而yewu.htm处于子目录bm中），则其相对路径为bm/yewu.htm。 反过来，当要链接到当前文档所在文件夹的父文件夹的文档时，在文档名前要加“/”。 比如要从yewu.htm链接到index.html（两个文件在同一文件夹“eshop”中，index.html处于父目录中，而yewu.htm处于子目录bm中），则其相对路径为/ index.html。 当要链接到非同一目录的文档时，要先加“/”，后加文件夹名再加链接到的文件名。 比如

15、要从 tupian.htm 链接到 aboutus.htm（两个文件在不同的目录中，tupian.htm在“album”目录中，aboutus.htm在“bm”目录中），则其相对路径为/bm/ aboutus.htm。,3、创建文本、图像超链接 一个文本超级链接只分配一个目标URL地址。 图像超级链接可以用两种方式分配目标RUL： 整个图像作为一个超级链接。 图像分为多个热点，用热点作为图像上的超级链接区域。,例如：在文件1.html中创建文本链接到text文件夹下的2.html.,指向文件按钮： 浏览文件按钮： 目标列表框： _blank 将链接的文档载入一个新的、未命名的浏览器窗口。 _p

16、arent 将链接的文档载入该链接所在框架的父框架或父窗口。 _self 将链接的文档载入链接所在的同一框架或窗口。此目标是默认的，所以通常不需要指定它。 _top 将链接的文档载入整个浏览器窗口，从而删除所有框架。,指向文件,浏览文件,目标列表框,4、命名锚记链接 命名锚记用于在文档中设置标记，这些标记通常放在文档的特定主题处或顶部，然后创建到这些命名锚记的链接。 创建到命名锚记的连接过程分两步： 创建命名锚记：将插入点置于要放置锚记的位置“插入”菜单“命名锚记”在“锚记名称”框中输入锚记名字单击“确定”。在插入点即出现一个锚记。 创建锚记链接：选定要添加链接的文字属性面板的“链接”框中输入“#”和锚记名字回车确认。,命名锚记：1,锚记链接,