第2章网页设计基础

1、.第第2 2章章 网页设计基础网页设计基础初识初识Dreamweaver Dreamweaver CS3CS32.1 Dreamweaver 简介简介 %DreamweaverDreamweaver主要特点和功能主要特点和功能所见即所得所见即所得将将设计设计和和代码代码编辑器和二为一编辑器和二为一内置的图形编辑程序节省开发时间内置的图形编辑程序节省开发时间界面操作方便、功能强大界面操作方便、功能强大完美的完美的CSSCSS支持支持完整的集成开发环境完整的集成开发环境2.1 Dreamweaver 简介 %DreamweaverDreamweaver主要特点和功能主要特点和功能所见即所得所见即所

2、得行为工具丰富行为工具丰富布局视图将表格和层结合实现页面排版布局视图将表格和层结合实现页面排版强大的网站管理功能强大的网站管理功能浏览器兼容检查浏览器兼容检查常见格式的外部文档、代码可以嵌入常见格式的外部文档、代码可以嵌入.1.1 .1.1 Dreamweaver Dreamweaver CS3 CS3 的安装与启动的安装与启动l Dreamweaver Dreamweaver CS3CS3的安装的安装l Dreamweaver Dreamweaver CS3CS3的启动方法：的启动方法： 开始开始程序程序 Micromedia Micromedia Dreamweaver 8 Dreamwe

3、aver 8初次启动初次启动2 2、起始页、起始页面板组文件面板文档编辑窗口插入栏文档工具栏状态栏属性面板2.1.2 Dreamweaver 的工作界面主菜单2.1.2 Dreamweaver 的工作界面l 1.1.标题栏标题栏 显示“Adobe Dreaweaver CS3”。如果新建或者打开网页，在其后面会加上该网页的文件名称。l 2.2.菜单栏菜单栏 Dreaweaver CS3菜单有10项：文件、编辑、查看、插入、修改、文本、命令、站点、窗口和帮助。l 3.“3.“插入插入”工具栏工具栏 用于将各种“对象”（如图像、表格和层）插入到文档中。例如，单击“插入”栏中的“表格”按钮插入一个表

4、格。也可以使用使用“插入插入”菜单菜单插入对象。2.1.2 Dreamweaver 的工作界面l “常用”：可以创建和插入最常用的对象，例如图像、 表格、 Flash 动画、超级链接等网页元素。l “布局”：可以插入表格、div 标签、层和框架，主要是插入用于页面布局的网页元素。4. 4. 文档工具栏文档工具栏l 在文档的不同视图间快速切换； 浏览编辑的文档； 给文档设定标题。F代码视图：在“文档”窗口中显示“代码”视图。F设计视图：在“文档”窗口中显示“设计”视图。F拆分视图：同时显示“代码”视图和“设计”视图。F标 题：为文档设定标题，它显示在浏览器的标题栏中。F预览网页：在浏览器中预览正

5、在编辑的文档。从弹出菜单中选择一个浏览器。2.1.2 Dreamweaver 的工作界面5.“5.“文档文档编辑编辑”窗口窗口 l “文档”窗口用于显示当前创建和编辑的文档。6.“6.“属性属性”面板面板l 对象：对象：网页的内容形式多样，任何一种形式都可以称之为对象，比如：文字、图像、表格、菜单等。l 对象属性：对象属性：网页中的对象都有属性，如文字的字体、颜色、字号等，图像的高、宽、链接，对象的名字等。l 作用：作用：通过属性面板查看和更改所选对象的各种属性。l 属性面板的显示的项目会根据选取对象的不同而变化。 7.“7.“浮动面板组浮动面板组”l 浮动面板组”是相关面板的集合。节省屏幕空

6、间。l 用鼠标单击面板组左边的小三角可以折叠或者展开一个浮动面板，如图所示。折叠按钮折叠按钮8. 8. 状态栏状态栏l 状态栏提供和创建文档有关的信息：显示标签选择器，选取按钮，缩放工具，文档大小，下载时间等。F标签选择器 显示当前选定内容的标签的层次结构，单击该层次结构中的任何标签以选择该标签及其全部内容。比如：单击 可以选择文档的整个正文。2.2.2 2 网页文件的基本操作网页文件的基本操作2.2.1 2.2.1 创建、打开和保存网页文件创建、打开和保存网页文件1 1. .创建文档创建文档l 通过“文件”菜单创建新文档。l 执行以下操作： 选择“文件”“新建”，即出现“新建文档”对话框。如

7、图所示。l 从各种预先设计的页面类型与布局中选择一种。比如：选择“基本页”HTML，点击创建按钮。2.2.2 2 网页文件的基本操作网页文件的基本操作返回返回2.2.2 2 网页文件的基本操作网页文件的基本操作2.2.保存文档保存文档l 创建新文档后，需要保存文档。执行以下操作：（1）选择“文件” “保存”；（2）在出现的对话框中，选择用来保存文件的文件夹。（3）在“文件名称”文本框中，键入文件名。 不要在文件名和文件夹名中使用空格和特殊字符：特 殊字符（如￥）或标点符号（如冒号、斜杠或句号）；（4）单击“保存”。2.2.2 2 网页文件的基本操作网页文件的基本操作3 3. .打开现有文档打开

8、现有文档l 在 Dreamweaver 中可打开现有 Web 页或基于文本的文档，即使它们不是用Dreamweaver 创建的。打开现有的文件，请执行以下操作：（1）选择“文件”“打开”，出现“打开”对话框。（2）定位到并选择要打开的文件。（3）单击“打开”按钮。2.2.2 2 网页文件的基本操作网页文件的基本操作2 2.2.2 .2.2 设置网页的页面属性设置网页的页面属性l打开“页面属性”对话框有三种方法： Dreamweaver CS3的编辑窗口中，选择“修改”“页面属性”命令。 在文档（设计）窗口右击，在弹出的快捷菜单中选择“页面属性”。 在文档下方的属性面板中，单击“页面属性”按钮。

9、2.2.2 2 网页文件的基本操作网页文件的基本操作l“页面属性”对话框2 2.2.2 .2.2 设置网页的页面属性设置网页的页面属性l 页面属性的分类与设置页面属性的分类与设置F设置外观F设置链接F设置标题F设置标题编码F设置跟踪图像2 2.2.2 .2.2 设置网页的页面属性设置网页的页面属性l在“页面属性”对话框中，设置页面的“外观”2 2.2.2 .2.2 设置网页的页面属性设置网页的页面属性l 定义默认文本颜色定义默认文本颜色F在“页面属性”对话框中为常规文本、链接、访问过的链接和活动链接定义默认颜色，F若要定义默认文本颜色，执行下列操作： 打开“页面属性”对话框，然后为“文本颜色”

10、、“链接颜色”、“访问过的链接”和“活动链接”选项选择颜色。2.2.3 2.2.3 网页文本的编辑网页文本的编辑1 1. .插入文本插入文本l 在网页中插入文本有在网页中插入文本有3 3种方法：种方法：F直接输入文本F复制粘贴F导入已有的WORD文档： 选择“文件”“导入” “WORD文档”命令，在弹出的导入WORD文档对话框中，选择要导入的WORD文档，如图所示。l导入已有的导入已有的WORDWORD文档文档2.2.3 2.2.3 网页文本的编辑网页文本的编辑2 2. .设置段落格式设置段落格式l 设置段落格式执行以下操作： 将插入点放在段落中，或者选择选择段落中的一些文本。 使用“文本”“

11、段落格式”子菜单，； 使用“属性”面板中的“格式”弹出式菜单选择某段落格式2.2.3 2.2.3 网页文本的编辑网页文本的编辑2 2. .设置段落格式设置段落格式2.2.3 2.2.3 网页文本的编辑网页文本的编辑3 3. .对齐文本对齐文本l 若要对齐文本，执行以下操作：若要对齐文本，执行以下操作：（1）选择要对齐的文本，或者只需将指针插入到文本开头。（2）单击“属性”面板中的对齐选项（“左对齐”、“右对齐”或“居中对齐”）2.2.3 2.2.3 网页文本的编辑网页文本的编辑4.4.段落与换行段落与换行l 需要添加段落时，可以按 Enter 键l 要添加换行符，按 Shift + Enter

12、 键。2.2.3 2.2.3 网页文本的编辑网页文本的编辑5 5. .设置文本格式设置文本格式l 选择文本，执行以下操作：（1）若要更改字体，从“属性”面板选择字体。选择“默 认”是对所选文本应用默认字体（2）若要更改字体样式，单击“属性”面板中的“粗体” 或“斜体”，（3）若要更改字体大小，在 “属性”面板“大小”的下拉 列表框中选择字体大小或者任意输入大小（在后面的 列表框中选择单位）。2.2.4 2.2.4 插入图像插入图像l 图像是网页中最重要的元素之一，用来展示照片、图画或者修饰页面使得网页更美观。l Dreamweaver CS3可以很方便地将图像插入网页，也可以将图像作为超级链接

13、、背景图像，还可以与Fireworks配合对图像进行简单的处理。l 网页制作中使用图像的格式有一定的要求，一般用于网页的图像有：FGIFFJPEG、JPGFPNG 2.2.4 2.2.4 插入图像插入图像l 插入图像的步骤如下：F使用菜单“插入”“图像”在网页中插入图像F在打开的“选择图像源文件”对话框中择要插入的图像文件 2.2.4 2.2.4 插入图像插入图像l 设置图像的基本属性设置图像的基本属性 F在编辑窗口中单击插入的图像，图像周围出现3个控制点，同时在属性面板中可以设置图像的各种属性 2.2.4 2.2.4 插入图像插入图像l 改变图像大小改变图像大小 F拖动图像上的3个控制点可以

14、随意改变图像的大小F通过属性面板改变图像的大小l 设置设置图像边框图像边框 F在边框栏输入一个数字可设置图像的边框，默认的边框值为0 2.2.4 2.2.4 插入图像插入图像l 图像占位符图像占位符 F所谓图像占位符实质插入的并不是具体的一个图像文件，而只是为了先占用一定的页面空间，以备下一步在该位置载入图像时使用。F选择“插入记录”“图像对象”“图像占位符”命令，打开“图像占位符”对话框，在其中进行相关设置 2.2.5 2.2.5 插入插入表格表格l 作用：表格作用：表格主要是用来对页面进行布局，定位网页的元素 对象。l 组成：组成：表格由数个行与列组成的，行、列交叉组成表格的 单元格，可以

15、在表格的单元格内插入各种信息 l 基本概念：基本概念：F行行：横向贯穿表格的单元格组成表格的行F列列：纵向贯穿表格的单元格组成表格的行F表头表头：表格的第一行又称为表格的“表头”F单元格单元格：表格的行与列的交叉就形成了表格的单元格，这是填写表格内容的位置。F边框边框：表格和单元格四周的边线2.2.5 2.2.5 插入插入表格表格l 新建表格新建表格 F在“插入”工具栏的“常用”选项卡中单击表格按钮，打开表格对话框，在表格对话框中设置表格的样式。 2.2.5 2.2.5 插入插入表格表格l 修改表格属性修改表格属性F在编辑窗口中，单击表格的左上角或在边框线上的任意位置双击，即可选中表格，在属性

16、面板中可进一步设置表格 2.2.5 2.2.5 插入插入表格表格l 设置单元格属性F在一个单元格中单击，可设置此单元格。也可以选择多个单元格后设置他们的共同属性。 2.2.5 2.2.5 插入插入表格表格l 编辑表格编辑表格l 实际应用的表格往往是结构不规则的表格，需要将规范的单元格通过单元格合并、拆分 l 合并单元格 F使用菜单“修改”“表格”“合并单元格” l 拆分单元格 F使用菜单“修改”“表格”“拆分单元格” 编辑表格编辑表格l 插入或删除行、列 F使用菜单“修改”“表格”“插入行”可在单元格所在行上方插入一行。使用菜单“修改”“表格”“插入列”可在单元格所在行左边插入一列。F使用菜单

17、“修改”“表格”“删除行”可删除单元格所在行。使用菜单“修改”“表格”“删除列”可删除单元格所在列。F使用菜单“修改”“表格”“插入行或列”，可打开插入行或列对话框。这里可设置插入的行或列的位置以及数目，适合一次插入多个行或列的情况。导入表格数据导入表格数据l Dreamweaver CS4可以将其他软件录入的数据导入到一个表格中。下面是一个导入Excel数据的实例：l导出Excel数据为文本文件 l在Excel中使用菜单“文件”“另存为”打开另存为对话框，在“文件类型”中选择“文本文件（制表符分割）（*.txt）” l导入为网页表格 l单击“插入”工具栏的“数据”选项卡，单击表格数据按钮，打

18、开导入表格式数据对话框，选择数据文件为Excel导出的文本文件，单击“确定”，数据被导入为编辑窗口的一个表格。 导入表格数据导入表格数据l 表格排序 l使用菜单“命令”“排序表格”，打开“排序表格”对话框，可对表格中的数据进行排序 2.2.3 2.2.3 网页文本的编辑网页文本的编辑5.5.插入插入水平线水平线l 要创建水平线，执行以下操作：（1）在“文档”窗口中，将插入点插入点放在要插入水平线的位置。（2）执行下列操作：F选择“插入”菜单 “HTML” “水平线”。l 要修改水平线，执行以下操作：（1）在“文档”窗口中，选择水平线。（2）选择“窗口” “属性”打开“属性”面板，如图2.35所

19、示，然后根据需要对属性进行修改。2.2.3 2.2.3 网页文本的编辑网页文本的编辑5.5.插入插入水平线水平线2.2.3 2.2.3 网页文本的编辑网页文本的编辑6 6. .插入特殊字符插入特殊字符l 若要将特殊字符插入到文档中，执行以下操作：（1）将插入点放在要插入特殊字符的位置。（2）执行下列操作：F从“插入” “HTML” “特殊字符”子菜单中选择字符名称。7 7. .在字符之间添加空格在字符之间添加空格l 若要插入不换行空格，执行下列操作：F按 Ctrl+Shift+空格键F启动一输入法切换为大写击空格键2.2.4 4 创建和编辑本地站点创建和编辑本地站点l 站点概述F站点：实质上是

20、一个文件夹。文件夹中涵盖一系列文档，这些文档通过链接关联起来；F利用浏览器就可以实现对整个网站的浏览。l 本地站点与远程站点l 本地主机与远程主机本地站点本地站点远程站点远程站点远程主机远程主机本地本地主机主机2.2.4 4 创建和编辑本地站点创建和编辑本地站点1 1、创建本地站点、创建本地站点（1）选择“站点”“新建站点”命令，打开“ 未命名站点的站点定义为”对话框，如图所示。注意注意：站点的名称是站点的标识。站点名几乎可以由任何字符组成，但是不包括“/”、“”、“?”、“”、“”、“:”、“”、“”等字符。2.2.4 4 创建和编辑本地站点创建和编辑本地站点1 1、创建本地站点、创建本地站

21、点2.2.4 4 创建和编辑本地站点创建和编辑本地站点（2）单击“下一步”按钮，可以设置该站点需要用到的服务器技术，因为此时新建的是静态站点静态站点，应当选择“否，我不想使用服务器技术”，如图所示。2.2.4 4 创建和编辑本地站点创建和编辑本地站点2.2.4 4 创建和编辑本地站点创建和编辑本地站点（3）单击“下一步”按钮,可以设置站点的编辑方式，如图所示。在对话框中选择“编辑我的计算机上的副本，完成后再上传到服务器”，在“您将文件存储存储在计算机上的什么位置？”文本框中设置本地站点文件夹的地址。2.2.4 4 创建和编辑本地站点创建和编辑本地站点2.2.4 4 创建和编辑本地站点创建和编辑

22、本地站点（4）单击“下一步”按钮，进入“站点定义”对话框设置远端站点，先选，先选“无无”，等网站建设完成后再进行设置。如图所示。2.2.4 4 创建和编辑本地站点创建和编辑本地站点（5）单击“下一步”按钮，进入“站点定义”对话框的总结，如图2.13所示。该对话框列出了刚才设置的所有主要内容主要内容，如果发现有错误，可以单击“上一步”返回修改；如果没有问题，单击“完成”按钮，结束“站点定义”对话框的设置。2.2.4 4 创建和编辑本地站点创建和编辑本地站点2.2.5 5 制作网页的过程制作网页的过程l 制作一个网页包括：F准备素材F插入文字图像等元素F建立超级链接F在浏览器中预览网页F文件管理等

23、步骤。l 使用Dreamweaver的所见即所得所见即所得编辑功能，可以很方便地制作一个网页，并可以在浏览器中预览所制作的网页。 2.2.5 5.1 .1 准备素材准备素材l 网页制作的素材由三个来源：F使用平时积累的素材。F从网上获取。F自己制作。 2.2.5 5.2 .2 制作网页制作网页l创建站点 l新建网页 l输入和编辑文字l插入图像l设置网页标题l保存文件 2.2.5 5.3 .3 预览网页预览网页l 预览网页一般有三种方法：F按键盘上的F12键。F单击标准工具栏上的预览按钮。F使用菜单“文件”“在浏览器中预览” “IExplore”。2.2.新建一个网页文件新建一个网页文件l使用菜

24、单“文件”“新建”或单击工具栏“标准”栏上的“新建”按钮 ，打开“新建文档”对话框。1.1.准备准备l在计算机上的目录下新建一个文件夹，命名为自己的网站名。例如：“学习网站”。3.3.粗略布局，粗略布局，输入文字输入文字4.4.插入图片插入图片l在“插入”工具栏选择“常用”标签，在工具按钮的插入图像下拉式菜单中选择“图像”，打开“选择图像源文件”对话框。2.5.4 制作一个简单的网页制作一个简单的网页5.5.保存文件保存文件l使用菜单“文件”“保存”或单击“标准”工具栏上的“保存”按钮。 6.6.在浏览器中预览网页在浏览器中预览网页l单击标准工具栏上的预览按钮或按F12可在浏览器中预览所编辑的

25、网页。 （1 1）申请域名和主页空间）申请域名和主页空间l网站的发布首先要要申请域名和主页空间。 （2 2）测试站点）测试站点l在将站点上传到服务器前，最好先在本地计算机上对其进行一下测试。 （3 3）在服务器上发布站点）在服务器上发布站点l在本地计算机上测试完站点后，就可以在服务器上正式发布精心制作的站点了。 l 发布站点的方法有很多种，例如使用FTP上传5 5发布站点发布站点 2.2.6 6 网站的发布网站的发布 ENDendend （3）测试站点 在将站点上传到服务器并宣布已经可供浏览之前，最好先在本地计算机上对其进行一下测试，因为在站点或者网页中可能会存在许多问题。 站点的测试主要包括：查看超链接、验证超链接、修复超链接、更新超链接及测试网络连接等。 （6 6）在服务器上发布站点）在服务器上发布站点 在本地计算机上设置完浏览器的兼容性、测试完站点后，就在本地计算机上设置完浏览器的兼容性、测试完站点后，就可以在服务器上正式发布精心制作的站点了。可以在服务器上正式发布精心制作的站点了。 发布站点的方法有很多种，例如发布站点的方法有很多种，例如FTPFTP上传或各大站点提供的上传或各大站点提供的文件管理器等。文件管理器等