1 / 46

Dreamweaver 8 网页设计基础

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

jenny
Download Presentation

Dreamweaver 8 网页设计基础

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Dreamweaver 8网页设计基础 主讲教师:刘梅

  2. 授课大纲 • HTML语言简介 • Dreamweaver 8概述 • 创建文字及超链接 • CSS样式的建立及应用 • 插入图像与flash • 表格的操作 • 创建及管理站点 • 实例操作完成一个简单的网站建设

  3. 1.1 HTML语言简介 • HTML是HeperText Markup language(超文本标记语言)的缩写。当你想把网页制作成某种模样时，需要使用一种编码向网络浏览器来进行解释，这种编码就称为HTML代码。HTML是网络的通用语言，一种简单、通用的全置标记语言。 • HTML是网页主要的组成部分，基本上一个网页都是由HTML组成的，所以要想精通网页制作的话，必须对HTML语言有所的了解。

  4. 1.2 HTML文件的组成结构 1、头部：<head>头部的内容</head> head是除文档标题外的不可见部分，文档标题出现在浏览器的窗口标题栏中，另外，还可以包含其他重要信息，如文档类型、语言编码、脚本程序、搜索引擎的关键字和内容指示器以及样式定义。 2、标题:<title>标题</title> 3、主体:<body>页面内容</body> 主体部分包含文本和图像等所有可见部分。

  5. 1.3网页的基本结构 <html> <head> <title>标题</title> </head> <body> 页面内容 </body> </html>

  6. 1.4网页中使用的常用标记 • <p></p>:分段标记 • <br>:换行标记 • &nbsp;是空格标记

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

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

  9. 2.2 Dreamweaver 8的操作界面

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

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

  12. 2.5 设置字号 • 选择字体后，在【大小】下拉列表中可以选定需要的字体大小 。

  13. 2.6 设置文本颜色

  14. 2.7 加粗、倾斜

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

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

  17. 3.1 创建文字链接 常用的创建链接方法有： （1）选定文本块后，在属性面板的【链接】文本框直接中输入URL。 （2）单击【链接】文本框旁的文件夹按钮查找链接的文件。

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

  19. 示例3-实现如下超链接

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

  21. 4.2 CSS样式面板

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

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

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

  25. 5.1 插入图像 • 可以使用插入面板的插入图像按钮，插入图像; • 也可以通过”插入”菜单来实现.

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

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

  28. 5.4 设置图像对齐方式 • 图像的居中对齐

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

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

  31. 6.1 插入Flash影片 • 插入Flash影片的方法如下： • （1）打开或新建一个网页文件。 • （2）在编辑区域选取插入点。 • （3）打开插入面板的【常用】选项卡，单击插入Flash影片按钮，。 • （4）在弹出的“选择文件”对话框中选择要插入的Flash影片，单击【确定】按钮导入。

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

  33. 6.3 嵌套表格 • 表格中可以嵌套表格。

  34. 6.4 表格与单元格的属性 • 表格属性面板。可以修改表格的结构、背景颜色等。

  35. 6.5 表格与单元格的属性 • 如果选择的是表格中的一个或多个单元格，属性面板对应的是单元格的属性 。

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

  37. 6.7 调整表格的宽度和高度 • 拖动控制点调整表格的大小。

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

  39. 6.9 调整行与列的大小 • 拖动边框，调整列的宽度或行高度 。

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

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

  42. 7.1 如何建立站点 • 1.4.1 设置本地站点位置: • 首先应该先在硬盘内创建文件夹作为将要建立站点的存储位置 。 • 1.4.2 建立Dreamweaver 8本地站点 • 1.4.3 网站框架和站点文件夹 • 建立站内文件夹框架。新建立的站点可以进行文件夹的移动、修改和删除。 • 1.4.4 建立网页文件

  43. 7.2 设置网页外观参数 • 网页的外观属性定义了页面全局属性，例如页面文字的大小、文本颜色、背景图像以及页面边距等属性。

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

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

  46. 实例-第一个网站制作

More Related