当前位置：文档之家 › 第一章 DreamWeaver网页设计与制作基础知识

第一章 DreamWeaver网页设计与制作基础知识

  • 格式：ppt
  • 大小：181.00 KB
  • 文档页数：13
第一章 DreamWeaver网页设计与制作基础知识

合集下载

Dreamweaver CS6网页设计与制作标准教程 (1)

Dreamweaver CS6网页设计与制作标准教程 (1)

网页是网站建设的基础，早期的网站一般都是由静态网页制作的。 静态网页是相对于动态网页而言，是指没有后台数据库、不含程序 和不可交互的网页。静态网页相对更新起来比较麻烦，适用于一般 更新较少的展示型网站。静态也不是完全静态，也可以出现各种动 态的效果，如GIF格式的动画、FLASH、滚动字幕等。
静态网页的主要特点如下：
据库与Web服务器的信息交互，由后台数据库提供实时数据更新 和数据查询服务。网页的后缀名一般根据不同的程序设计语言而有 所不同，如常见的有.asp、.jsp、.php、.perl、.cgi等。动态网页 能够根据不同时间和不同访问者而显示不同内容。如常见的BBS、 留言板和购物系统通常用动态网页实现。动态网页的制作比较复杂， 需要用到ASP、PHP、ISP和等专门的动态网页设计语言。
各种企业和业务信息。随着信息时代的到来，企业网站作为企业的
1.2 网站建设基本流程
前期准备工作 方案实施 后期工作
1.2.1 前期准备工作
在网站制作之前，需要对与项目相关的互联网市场进行调查 和分析，同时收集各种相关的信息和资料，为网站建设提供必要的
前期数据，为决策提供依据。
市场调研与分析
明确网站定位
收集信息和素材
1.2.2 方案实施
在方案实施过程中，根据前期准备工作，具体规划网站的栏 目和布局、页面设计风格和外观效果；确定网站所使用的各种技术，
议，即“超文本传输协议”，因此通常网页的地址都以“ http://”
开头。
路径结构图
1.1.3 服务器与浏览器
访问的具体过程简单来说，就是当访问网页的人的计算机连入
Internet 后，通过浏览器发出访问某个站点的请求，然后这个站点
的服务器就把信息传送到用户的浏览器上，也就是将文件下载到本 地的计算机，浏览器再显示出文件内容，这样用户就可以坐在家中 查询千里之外的信息了。
Dreamweaver网页设计-网页设计基础

Dreamweaver网页设计-网页设计基础

1.
例1-18运行效果 例1-19运行效果
本章习题 上机练习
练习1 编写HTML代码 练习 编写 代码
用记事本创建一个HTML文档，网页效果如图1-68所示。在Dreamweaver 中利用标签选择器创建HTML文档，完成同样的效果。
练习2 文件头标签的应用 练习
练习用“HTML”工具栏中的“文件头”按钮（如图1-69所示）进行网页 文件头的设计，包括设置网页关键字、设置页面自动切换等功能。
例1-3运行效果
5. <hr>水平线标记
例1-4运行效果
6. <pre>原文显示标记
例1-5运行效果
1.2.3页面布局综合实例
下面将介绍设计一个基本页面布局的综合实例，在这 个实例中综合运用了<hr>、<hn>、<br>、<p>、 <pre>等标记。注意这个实例中各种标记的使用情况， 并结合前面的介绍深入掌握它们的用法。
一个基本的网页表格通常由表格的标题、表栏、数据 项、数据等元素组成。 标题表示了这个表格的主要内容； 表栏是指表格中一个个小的矩形区域，它用来存放数 据等； 数据项，又称表头，表示数据项所对应的名称； 数据是指存放在表栏中的文字、数字等信息。
1.6.2简单表格 简单表格
<table>基本表格标记 2. <caption>表格标题标记 3. <tr>行标记 4. <td>单元格标记 <td>
1.1.2 课堂实例――创建和测试第一个网页 课堂实例――创建和测试第一个网页 ――
选择“开始”|“所有程序”|“附件”|“记事本”，运行“记事 本”程序。在“记事本”窗口中输入以下内容： <html> <head> <title>欢迎光临我的第一个网页</title> </head> <body> 这是第一个简单网页! </body> </html>
Dreamweaver 网页设计基础知识

Dreamweaver 网页设计基础知识

● ASP的特点 ASP的特点
（1）使用VBScript、Jscript等简单易懂的脚本语言。 使用VBScript、Jscript等简单易懂的脚本语言 等简单易懂的脚本语言。 （2）ASP应用程序既可以手工编码制作，又可以通过 ASP应用程序既可以手工编码制作 应用程序既可以手工编码制作， Dreamweaver等可视化工具创作生成 Dreamweaver等可视化工具创作生成。 等可视化工具创作生成。 （3）无需编译，容易编写，并且与浏览器无关。 无需编译，容易编写，并且与浏览器无关。 （4）可以通过察见的方式，使用由第三方提供的其他脚本语言。 可以通过察见的方式，使用由第三方提供的其他脚本语言。 （5）具有无限可扩充性。 具有无限可扩充性。 （6）ASP的源程序不会被传到客户浏览器，提高了安全性。 ASP的源程序不会被传到客户浏览器 提高了安全性。 的源程序不会被传到客户浏览器，
● Freehand
Freehand提供了一系列完整的绘图工具， Freehand提供了一系列完整的绘图工具，可制作出细致的美术图 提供了一系列完整的绘图工具 工业绘图。 形、工业绘图。
1.3.3 网页动画制作工具
●
Flash Flash是一种矢量图形编辑和交互动画创作的专业软件， Flash是一种矢量图形编辑和交互动画创作的专业软件，主要应用 是一种矢量图形编辑和交互动画创作的专业软件 于网页设计和多媒体动画创作等领域，功能十分强大。Flash制作 于网页设计和多媒体动画创作等领域，功能十分强大。Flash制作 的动画不仅容量小、动画效果好，还有很强的交互性、兼容性，而 的动画不仅容量小、动画效果好，还有很强的交互性、兼容性， 且可以通过HTML语言嵌入网页中 增强网页的动感效果。 语言嵌入网页中， 且可以通过HTML语言嵌入网页中，增强网页的动感效果。
Dreamweaver—基础知识一

Dreamweaver—基础知识一

第一部分：基础知识一、Dreamweaver 界面介绍二、文本的基本设置三、文本插入栏的使用四、建立超链接1．为文本添加链接和设置链接2．制作电子邮件链接3．下载链接五、插入图像⑴插入图片的两种方法（从设计视图和资源面板）、编辑图像⑵插入GIF透明图片⑶背景图像的设置⑷插入图像占位符⑸制作光标经过图像⑹插入图片（使用热区）⑺制作导航条六、插入Flash对象第二部分：网页布局表格⑴插入表格⑵表格标记<table></table> <tr></tr> <td></td>⑶选择表格①选择整个表格●把光标移到表格的左上角、上边框或下边框之外的附近区域●在表格中单击任意一个位置，然后单击该表格对应的<table>标记。

●在表格中单击任意一个位置，按下两次“Ctrl+A”②选择表格的行③选择表格的列④选择单元格⑷设置表格属性及格式化表格通过属性检查器来选择⑸编辑表格①在表格内移动②剪切、复制和粘贴表格③合并和拆分单元格执行菜单：命令 排序表格举例：制作一个文学页面一、使用表格布局页面1．插入1行1列的表格，如下图所示：2．设置表格边框颜色。

在标签选择器中单击<table>标签，然后在属性面板中设置边框颜色设置为“#999900”，并在“垂直”下拉列表中选择“顶端”。

如下图所示：3．插入4行1列的嵌套表格二。

将光标定位在表格一中，然后执行插入表格命令，如下图所示：在“属性”面板中将第二行和第四行的“背景颜色”设置为“#999900”。

4．插入1行2列嵌套表格三。

将表格二适当拉大后，在第三行单元格单击，在其“属性”面板“垂直”下拉列表中选择“顶端”选项。

然后执行插入表格，如下图所示：5.插入4行2列嵌套表格四。

将表格三适当拉大后，在左侧单元格中单元，然后执行插入表格，如下图所示：得到如下图所示的效果：5．插入2行1列嵌套表格五。