第2章-网页设计基础ppt课件

.,第2章网页设计基础,初识DreamweaverCS3,2.1Dreamweaver简介,Dreamweaver主要特点和功能,所见即所得,将设计和代码编辑器和二为一,内置的图形编辑程序节省开发时间,界面操作方便、功能强大,完美的CSS支持,完整的集成开发环境,2.1Dreamweaver简介,Dreamweaver主要特点和功能,所见即所得,行为工具丰富,布局视图将表格和层结合实现页面排版,强大的网站管理功能,浏览器兼容检查,常见格式的外部文档、代码可以嵌入,.1.1DreamweaverCS3的安装与启动,DreamweaverCS3的安装DreamweaverCS3的启动方法：开始程序MicromediaDreamweaver8,初次启动,2、起始页,面板组,文件面板,文档编辑窗口,插入栏,文档工具栏,状态栏,属性面板,2.1.2Dreamweaver的工作界面,主菜单,2.1.2Dreamweaver的工作界面,1.标题栏显示“AdobeDreaweaverCS3”。如果新建或者打开网页，在其后面会加上该网页的文件名称。2.菜单栏DreaweaverCS3菜单有10项：文件、编辑、查看、插入、修改、文本、命令、站点、窗口和帮助。3.“插入”工具栏用于将各种“对象”（如图像、表格和层）插入到文档中。例如，单击“插入”栏中的“表格”按钮插入一个表格。也可以使用“插入”菜单插入对象。,2.1.2Dreamweaver的工作界面,“常用”：可以创建和插入最常用的对象，例如图像、表格、Flash动画、超级链接等网页元素。“布局”：可以插入表格、div标签、层和框架，主要是插入用于页面布局的网页元素。,4.文档工具栏,在文档的不同视图间快速切换；浏览编辑的文档；给文档设定标题。代码视图：在“文档”窗口中显示“代码”视图。设计视图：在“文档”窗口中显示“设计”视图。拆分视图：同时显示“代码”视图和“设计”视图。标题：为文档设定标题，它显示在浏览器的标题栏中。预览网页：在浏览器中预览正在编辑的文档。从弹出菜单中选择一个浏览器。,2.1.2Dreamweaver的工作界面,5.“文档编辑”窗口“文档”窗口用于显示当前创建和编辑的文档。,6.“属性”面板,对象：网页的内容形式多样，任何一种形式都可以称之为对象，比如：文字、图像、表格、菜单等。对象属性：网页中的对象都有属性，如文字的字体、颜色、字号等，图像的高、宽、链接，对象的名字等。作用：通过属性面板查看和更改所选对象的各种属性。属性面板的显示的项目会根据选取对象的不同而变化。,7.“浮动面板组”,浮动面板组”是相关面板的集合。节省屏幕空间。用鼠标单击面板组左边的小三角可以折叠或者展开一个浮动面板，如图所示。,8.状态栏,状态栏提供和创建文档有关的信息：显示标签选择器，选取按钮，缩放工具，文档大小，下载时间等。标签选择器显示当前选定内容的标签的层次结构，单击该层次结构中的任何标签以选择该标签及其全部内容。比如：单击可以选择文档的整个正文。,2.2网页文件的基本操作,2.2.1创建、打开和保存网页文件1.创建文档通过“文件”菜单创建新文档。执行以下操作：选择“文件”“新建”，即出现“新建文档”对话框。如图所示。从各种预先设计的页面类型与布局中选择一种。比如：选择“基本页”HTML，点击创建按钮。,2.2网页文件的基本操作,返回,2.2网页文件的基本操作,2.保存文档创建新文档后，需要保存文档。执行以下操作：（1）选择“文件”“保存”；（2）在出现的对话框中，选择用来保存文件的文件夹。（3）在“文件名称”文本框中，键入文件名。不要在文件名和文件夹名中使用空格和特殊字符：特殊字符（如￥）或标点符号（如冒号、斜杠或句号）；（4）单击“保存”。,2.2网页文件的基本操作,3.打开现有文档在Dreamweaver中可打开现有Web页或基于文本的文档，即使它们不是用Dreamweaver创建的。打开现有的文件，请执行以下操作：（1）选择“文件”“打开”，出现“打开”对话框。（2）定位到并选择要打开的文件。（3）单击“打开”按钮。,2.2网页文件的基本操作,2.2.2设置网页的页面属性打开“页面属性”对话框有三种方法：DreamweaverCS3的编辑窗口中，选择“修改”“页面属性”命令。在文档（设计）窗口右击，在弹出的快捷菜单中选择“页面属性”。在文档下方的属性面板中，单击“页面属性”按钮。,2.2网页文件的基本操作,“页面属性”对话框,2.2.2设置网页的页面属性,页面属性的分类与设置设置外观设置链接设置标题设置标题编码设置跟踪图像,2.2.2设置网页的页面属性,在“页面属性”对话框中，设置页面的“外观”,2.2.2设置网页的页面属性,定义默认文本颜色在“页面属性”对话框中为常规文本、链接、访问过的链接和活动链接定义默认颜色，若要定义默认文本颜色，执行下列操作：打开“页面属性”对话框，然后为“文本颜色”、“链接颜色”、“访问过的链接”和“活动链接”选项选择颜色。,2.2.3网页文本的编辑,1.插入文本在网页中插入文本有3种方法：直接输入文本复制粘贴导入已有的WORD文档：选择“文件”“导入”“WORD文档”命令，在弹出的导入WORD文档对话框中，选择要导入的WORD文档，如图所示。,导入已有的WORD文档,2.2.3网页文本的编辑,2.设置段落格式设置段落格式执行以下操作：将插入点放在段落中，或者选择段落中的一些文本。使用“文本”“段落格式”子菜单，；使用“属性”面板中的“格式”弹出式菜单选择某段落格式,2.2.3网页文本的编辑,2.设置段落格式,2.2.3网页文本的编辑,3.对齐文本若要对齐文本，执行以下操作：（1）选择要对齐的文本，或者只需将指针插入到文本开头。（2）单击“属性”面板中的对齐选项（“左对齐”、“右对齐”或“居中对齐”）,2.2.3网页文本的编辑,4.段落与换行需要添加段落时，可以按Enter键要添加换行符，按Shift+Enter键。,2.2.3网页文本的编辑,5.设置文本格式选择文本，执行以下操作：（1）若要更改字体，从“属性”面板选择字体。选择“默认”是对所选文本应用默认字体（2）若要更改字体样式，单击“属性”面板中的“粗体”或“斜体”，（3）若要更改字体大小，在“属性”面板“大小”的下拉列表框中选择字体大小或者任意输入大小（在后面的列表框中选择单位）。,2.2.4插入图像,图像是网页中最重要的元素之一，用来展示照片、图画或者修饰页面使得网页更美观。DreamweaverCS3可以很方便地将图像插入网页，也可以将图像作为超级链接、背景图像，还可以与Fireworks配合对图像进行简单的处理。网页制作中使用图像的格式有一定的要求，一般用于网页的图像有：GIFJPEG、JPGPNG,2.2.4插入图像,插入图像的步骤如下：使用菜单“插入”“图像”在网页中插入图像在打开的“选择图像源文件”对话框中择要插入的图像文件,2.2.4插入图像,设置图像的基本属性在编辑窗口中单击插入的图像，图像周围出现3个控制点，同时在属性面板中可以设置图像的各种属性,2.2.4插入图像,改变图像大小拖动图像上的3个控制点可以随意改变图像的大小通过属性面板改变图像的大小设置图像边框在边框栏输入一个数字可设置图像的边框，默认的边框值为0,2.2.4插入图像,图像占位符所谓图像占位符实质插入的并不是具体的一个图像文件，而只是为了先占用一定的页面空间，以备下一步在该位置载入图像时使用。选择“插入记录”“图像对象”“图像占位符”命令，打开“图像占位符”对话框，在其中进行相关设置,2.2.5插入表格,作用：表格主要是用来对页面进行布局，定位网页的元素对象。组成：表格由数个行与列组成的，行、列交叉组成表格的单元格，可以在表格的单元格内插入各种信息基本概念：行：横向贯穿表格的单元格组成表格的行列：纵向贯穿表格的单元格组成表格的行表头：表格的第一行又称为表格的“表头”单元格：表格的行与列的交叉就形成了表格的单元格，这是填写表格内容的位置。边框：表格和单元格四周的边线,2.2.5插入表格,新建表格在“插入”工具栏的“常用”选项卡中单击表格按钮，打开表格对话框，在表格对话框中设置表格的样式。,2.2.5插入表格,修改表格属性在编辑窗口中，单击表格的左上角或在边框线上的任意位置双击，即可选中表格，在属性面板中可进一步设置表格,2.2.5插入表格,设置单元格属性在一个单元格中单击，可设置此单元格。也可以选择多个单元格后设置他们的共同属性。,2.2.5插入表格,编辑表格实际应用的表格往往是结构不规则的表格，需要将规范的单元格通过单元格合并、拆分合并单元格使用菜单“修改”“表格”“合并单元格”拆分单元格使用菜单“修改”“表格”“拆分单元格”,编辑表格,插入或删除行、列使用菜单“修改”“表格”“插入行”可在单元格所在行上方插入一行。使用菜单“修改”“表格”“插入列”可在单元格所在行左边插入一列。使用菜单“修改”“表格”“删除行”可删除单元格所在行。使用菜单“修改”“表格”“删除列”可删除单元格所在列。使用菜单“修改”“表格”“插入行或列”，可打开插入行或列对话框。这里可设置插入的行或列的位置以及数目，适合一次插入多个行或列的情况。,导入表格数据,DreamweaverCS4可以将其他软件录入的数据导入到一个表格中。下面是一个导入Excel数据的实例：导出Excel数据为文本文件在Excel中使用菜单“文件”“另存为”打开另存为对话框，在“文件类型”中选择“文本文件（制表符分割）（*.txt）”导入为网页表格单击“插入”工具栏的“数据”选项卡，单击表格数据按钮，打开导入表格式数据对话框，选择数据文件为Excel导出的文本文件，单击“确定”，数据被导入为编辑窗口的一个表格。,导入表格数据,表格排序使用菜单“命令”“排序表格”，打开“排序表格”对话框，可对表格中的数据进行排序,2.2.3网页文本的编辑,5.插入水平线要创建水平线，执行以下操作：（1）在“文档”窗口中，将插入点放在要插入水平线的位置。（2）执行下列操作：选择“插入”菜单“HTML”“水平线”。要修改水平线，执行以下操作：（1）在“文档”窗口中，选择水平线。（2）选择“窗口”“属性”打开“属性”面板，如图2.35所示，然后根据需要对属性进行修改。,2.2.3网页文本的编辑,5.插入水平线,2.2.3网页文本的编辑,6.插入特殊字符若要将特殊字符插入到文档中，执行以下操作：（1）将插入点放在要插入特殊字符的位置。（2）执行下列操作：从“插入”“HTML”“特殊字符”子菜单中选择字符名称。7.在字符之间添加空格若要插入不换行空格，执行下列操作：按Ctrl+Shift+空格键启动一输入法切换为大写击空格键,2.4创建和编辑本地站点,站点概述站点：实质上是一个文件夹。文件夹中涵盖一系列文档，这些文档通过链接关联起来；利用浏览器就可以实现对整个网站的浏览。本地站点与远程站点本地主机与远程主机,本地站点,远程站点,远程主机,本地主机,2.4创建和编辑本地站点,1、创建本地站点（1）选择“站点”“新建站点”命令，打开“未命名站点的站点定义为”对话框，如图所示。,注意：站点的名称是站点的标识。站点名几乎可以由任何字符组成，但是不包括“/”、“”、“?”、“”、“”、“:”、“”、“”等字符。,2.4创建和编辑本地站点,1、创建本地站点,2.4创建和编辑本地站点,（2）单击“下一步”按钮，可以设置该站点需要用到的服务器技术，因为此时新建的是静态站点，应当选择“否，我不想使用服务器技术”，如图所示。,2.4创建和编辑本地站点,2.4创建和编辑本地站点,（3）单击“下一步”按钮,可以设置站点的编辑方式，如图所示。在对话框中选择“编辑我的计算机上的副本，完成后再上传到服务器”，在“您将文件存储在计算机上的什么位置？”文本框中设置本地站点文件夹的地址。,2.4创建和编辑本地站点,2.4创建和编辑本地站点,（4）单击“下一步”按钮，进入“站点定义”对话框设置远端站点，先选“无”，等网站建设完成后再进行设置。如图所示。,2.4创建和编辑本地站点,（5）单击“下一步”按钮，进入“站点定义”对话框的总结，如图2.13所示。该对话框列出了刚才设置的所有主要内容，如果发现有错误，可以单击“上一步”返回修改；如果没有问题，单击“完成”按钮，结束“站点定义”对话框的设置。,2.4创建和编辑本地站点,2.5制作网页的过程,制作一个网页包括：准备素材插入文字图像等元素建立超级链接在浏览器中预览网页文件管理等步骤。使用Dreamweaver的所见即所得编辑功能，可以很方便地制作一个网页，并可以在浏览器中预览所制作的网页。,2.5.1准备素材,网页制作的素材由三个来源：使用平时积累的素材。从网上获取。自己制作。,2.5.2制作网页,创建站点新建网页输入和编辑文字插入图像设置网页标题保存文件,2.5.3预览网页,预览网页一般有三种方法：按键盘上的F12键。单击标准工具栏上的预览按钮。使用菜单“文件”“在浏览器中预览”“IExplore”。,2.新建一个网页文件使用菜单“文件”“新建”或单击工具栏“标准”栏上的“新建”按钮，打开“新建文档”对话框。,1.准备在计算机上的目录下新建一个文件夹，命名为自己的网站名。例如：“学习网站”。,3.粗略布局，输入文字,4.插入图片在“插入”工具栏选择“常用”标签，在工具按钮的插入图像下拉式菜单中选择“图像”，打开“选择图像源文件”对话框。,2.5.4制作一个简单的网页,5.保存文件使用菜单“文件”“保存”或单击“标准”工具栏上的“保存”按钮。,6.在浏览器中预览网页单击标准工具栏上的预览按钮或按F12可在浏览器中预览所编辑的网页。,（1）申请域名和主页空间网站的发布首先要要申请域名和主页空间。（2）测试站点在将站点上传到服务器前，最好先在本地计算机上对其进行一下测试。（3）在服务器上发布站点在本地计算机上测试完站点后，就可以在服务器上正式发布精心制作的站点了。发布站点的方法有很多种，例如使用FTP上传,5发布站点,2.6网站的发布,EN