Dreamweaver 8
Download
1 / 46

Dreamweaver 8 网页设计基础 - PowerPoint PPT Presentation


  • 188 Views
  • Uploaded on

Dreamweaver 8 网页设计基础. 主讲教师 : 刘梅. 授课大纲. HTML 语言简介 Dreamweaver 8 概述 创建文字及超链接 CSS 样式的建立及应用 插入图像与 flash 表格的操作 创建及管理站点 实例操作完成一个简单的网站建设. 1.1 HTML 语言简介. HTML 是 HeperText Markup language( 超文本标记语言 ) 的缩写。当你想把网页制作成某种模样时,需要使用一种编码向网络浏览器来进行解释,这种编码就称为 HTML 代码。 HTML 是网络的通用语言,一种简单、通用的全置标记语言。

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Dreamweaver 8 网页设计基础' - jenny


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Dreamweaver 8

Dreamweaver 8网页设计基础

主讲教师:刘梅


授课大纲

  • HTML语言简介

  • Dreamweaver 8概述

  • 创建文字及超链接

  • CSS样式的建立及应用

  • 插入图像与flash

  • 表格的操作

  • 创建及管理站点

  • 实例操作完成一个简单的网站建设


1 1 html
1.1 HTML语言简介

  • HTML是HeperText Markup language(超文本标记语言)的缩写。当你想把网页制作成某种模样时,需要使用一种编码向网络浏览器来进行解释,这种编码就称为HTML代码。HTML是网络的通用语言,一种简单、通用的全置标记语言。

  • HTML是网页主要的组成部分,基本上一个网页都是由HTML组成的,所以要想精通网页制作的话,必须对HTML语言有所的了解。


1 2 html
1.2 HTML文件的组成结构

1、头部:<head>头部的内容</head>

head是除文档标题外的不可见部分,文档标题出现在浏览器的窗口标题栏中,另外,还可以包含其他重要信息,如文档类型、语言编码、脚本程序、搜索引擎的关键字和内容指示器以及样式定义。

2、标题:<title>标题</title>

3、主体:<body>页面内容</body>

主体部分包含文本和图像等所有可见部分。


1.3网页的基本结构

<html>

<head>

<title>标题</title>

</head>

<body>

页面内容

</body>

</html>


1.4网页中使用的常用标记

  • <p></p>:分段标记

  • <br>:换行标记

  • &nbsp;是空格标记


实例1-使用标记在记事本完成如下网页布局


2 1 dreamweaver 8
2.1 Dreamweaver 8概述

Dreamweaver是由美国著名的软件开发商Macromedia公司推出的一个“所见即所得”的可视化网站开发工具;主要用于对Web站点、Web页和Web应用程序进行设计、维护、编码和开发。它以简洁的界面,强大的功能,成为众多专业网站和个人主页建站的首选软件。


2 2 dreamweaver 8
2.2 Dreamweaver 8的操作界面


2.3 添加文本

  • 在Dreamweaver 8中可以在页面内直接输入文本,也可以在表格、层、段落等容器类元素中输入文字。


2.4 设置字体

  • 设置的字体只是告诉浏览器如何显示字体,浏览器会根据网页中的字体设置信息来调用系统中的字体。


2.5 设置字号

  • 选择字体后,在【大小】下拉列表中可以选定需要的字体大小 。


2.6 设置文本颜色


2.7 加粗、倾斜


2.8 段落对齐

可以设置段落的对齐方式为:左对齐、居中对齐、右对齐和两端对齐。方法是:在选定需要对齐的文本块后,单击属性面板的对齐开关。


示例2-输入文字并实现如下样式


3.1 创建文字链接

常用的创建链接方法有:

(1)选定文本块后,在属性面板的【链接】文本框直接中输入URL。

(2)单击【链接】文本框旁的文件夹按钮查找链接的文件。


3.2 空链接

在一些特殊的场合,例如需要触发一个客户端行为,就需要设置空链接。空链接并不指向任何具体的文件。选中需要设置空链接的对象,如文本,在属性面板的【链接】文本框之间直接输入#,该文本就设置成了一个空链接。


示例3-实现如下超链接


4 1 css
4.1 CSS样式

  • CSS(Cascading Style Sheet,层叠样式表)样式是控制显示很好的工具,利用CSS样式可以方便而精确控制显示网页乃至整个网站的显示风格。如字体,文字大小都是使用CSS样式来实现的。


4 2 css
4.2 CSS样式面板


4 3 css
4.3 创建CSS样式

创建CSS样式的工具是CSS样式面板。


4 4 css
4.4 定义CSS样式

  • CSS样式需要定义具体的属性才能起到控制显示的作用。CSS属性按类别划分为类型、背景、区块、方框、边框、列表、定位、扩展等8个项目。


4 css
示例4-用css样式表实现文字的样式


5.1 插入图像

  • 可以使用插入面板的插入图像按钮,插入图像;

  • 也可以通过”插入”菜单来实现.


5.2 调整图像大小

  • 拖动控制点来调整图像大小。


5.3 调整图像大小

  • 使用图像属性面板可以精确地调整图像大小。


5.4 设置图像对齐方式

  • 图像的居中对齐


5.5 设置图像链接与热点

  • 图像的热点指的是可以为图像的某一个区域设定链接。当用户单击该区域时将浏览器导航到该热点设置的网页文档。

图像热点设定工具


示例5-插入如下图片并实现链接


6 1 flash
6.1 插入Flash影片

  • 插入Flash影片的方法如下:

  • (1)打开或新建一个网页文件。

  • (2)在编辑区域选取插入点。

  • (3)打开插入面板的【常用】选项卡,单击插入Flash影片按钮,。

  • (4)在弹出的“选择文件”对话框中选择要插入的Flash影片,单击【确定】按钮导入。


6.2 创建表格

  • 表格是网页制作中一个很重要的功能。它能够准确地安排各种网页元素的布局。


6.3 嵌套表格

  • 表格中可以嵌套表格。


6.4 表格与单元格的属性

  • 表格属性面板。可以修改表格的结构、背景颜色等。


6.5 表格与单元格的属性

  • 如果选择的是表格中的一个或多个单元格,属性面板对应的是单元格的属性 。


6.6 调整行数与列数

  • 调整表格行数与列数的属性面板。


6.7 调整表格的宽度和高度

  • 拖动控制点调整表格的大小。


6.8 调整表格的宽度和高度

  • 在表格属性栏的【宽】和【高】文本框直接输入需要的表格大小值 。


6.9 调整行与列的大小

  • 拖动边框,调整列的宽度或行高度 。


6.10 合并与拆分单元格

  • 对于特殊结构的表格可以通过合并或者拆分单元格来实现。


示例6-用表格实现以下网页布局


7.1 如何建立站点

  • 1.4.1 设置本地站点位置:

  • 首先应该先在硬盘内创建文件夹作为将要建立站点的存储位置 。

  • 1.4.2 建立Dreamweaver 8本地站点

  • 1.4.3 网站框架和站点文件夹

  • 建立站内文件夹框架。新建立的站点可以进行文件夹的移动、修改和删除。

  • 1.4.4 建立网页文件


7.2 设置网页外观参数

  • 网页的外观属性定义了页面全局属性,例如页面文字的大小、文本颜色、背景图像以及页面边距等属性。


7.3 设置链接样式

  • 链接样式主要针对文本链接。通过设置其中的属性,可以改变链接的默认显示样式。


7.4 设置网页编码与标题

  • 文档编码指定网页文档中字符所用的编码。网页标题指的是显示在浏览器标题栏的文本内容。

  • 网页标题指的是显示在浏览器标题栏的文本内容。


实例-第一个网站制作


ad