大学计算机基础应用教程 孙连科主编 第6章网页设计基础.ppt

第6章 网页设计基础 近年来，随着计算机网络技术的发展，在网络上发布的媒体信息越来越多，这需要我们掌握最基本的一些网页设计技术。本章通过对Dreamweaver MX、Photoshop CS和Flash MX这三个软件的简单介绍，帮助初级读者入门。 本章要点： （1）网站建设软件Dreamweaver MX简介 （2）图片图像处理软件Photoshop CS简介。 （3）平面动画制作软件Flash MX简介 6.1 Dreamweaver MX简介 6.1.1 首次启动Dreamweaver时，会出现一个如图所示的工作区域设置对话框，在该参数设置对话框中，你可以选择“Dreamweaver MX工作区”或“Dreamweaver 4工作区”。 选择“Dreamweaver MX工作区”后，界面如图所示。 1.文档窗口 文档窗口是用来显示当前的文档，基本上可看成是所见即所得，它有三种视图模式。如图所示。 “代码”视图模式，这是用于编写和编辑HTML、JavaScript、服务器语言代码（如Microsoft Active Server Page(ASP)或ColdFusion标记语言）以及任何其他类型代码的手工编码环境。 “拆分”视图模式，可以在单个窗口中同时看到同一文档的“代码”视图和“设计”视图。 “设计”视图模式，这是一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。在该视图中，Dreamweaver显示文档的完全可编辑的可视化表示形式，类似于在浏览器中查看页面时看到的内容。 2.属性窗口 属性窗口是修改当前选定页面元素（如文本、图像和各种插入对象）的属性的工具。对于不同的页面元素，它们的属性是不一样的，属性面板的界面也是不一样的。 3.插入工具栏 插入工具栏是向网页页面中插入各种元素及对象的工具集合。如插入图像，动画，表格等等。如图所示。 4.面板组 各种面板按组分类，提供各种功能 6.1.2 建立站点 想要建立一个网站，首先要建立一个站点。下面我们来介绍一下如何建立一个本地站点。 首先在硬盘上建立一个文件夹，以后我们建立网站所有的文件都放在这个文件夹里。 单击“站点”下拉菜单，选择“新建站点”。 在弹出的对话框中给自己的站点命名一个名字。如图所示。 4．命名好之后，单击“下一步”，设置是否使用服务器技术，如图所示。 5．单击“下一步”后，选择第二项“在本地进行编辑，然后上传到远程测试服务器”，同时单击右下角的文件夹图标，把路径设置成你在硬盘上新建的文件夹内。如图所示。 6．单击“下一步”后，再次文件夹图标，把复制文件夹也设置成你新建的站点文件夹内。如图所示。 7．单击“下一步”后，设置URL路径。如图所示。 8．单击“下一步”后，选择第二项“否，不使用存回和取出”，如图所示。 9．单击“下一步”之后，可以看到设置的站点信息，单击完成按钮。如图所示。 10．在右边的站点窗口中，设置成“本地视图”，如图所示，结束本地站点设置的过程。 通过以上操作，我们建立了一个本地站点，叫做“我的第一网站”。以后我们所建立的所有包含在这个站点中的文件都会存储到它所对应的文件夹中，就是D:\Myhome这个文件夹，这个是我们自己设置的，随时可以更改。这个站点和这个文件夹现在就建立了关联，我们在站点中新建文件就想当于在我的电脑中那个文件夹中新建文件，反过来在我的电脑中D:\Myhome这个文件夹中新建文件或文件夹，在Dreamweaver这个站点中也会体现出来。 6.1.3 在网站中新建网页 上面的操作中我们建立了自己的本地站点，但这个站点是空的，里面没有任何文件，现在我们就来建立我们这个网站的首页。 1．在右边的站点中，右键点击绿色的文件夹图标那一行“站点－我的第一网站”，选择“新建文件”，同时把名字命名成index.htm（注意扩展名.htm必须要有）。这个index.htm就是我们整个网站的首页文件。如图所示。 2．双击index.htm开始编辑首页文件。如图所示。 3．按快捷键ctrl+J键或单击“修改”下拉菜单选择“页面属性”，可以调出页面属性设置对话框，对页面进行常规选项的设置。如图所示。 4．将标题改成“欢迎光临我的个人网站”。 在这里可以单击“浏览”按钮设置整个网页的背景图片，也可以单击“背景”右边的颜色设置框，设置网页背景为单一颜色，另外还可以设置文本颜色，链接颜色，访问过的链接颜色等等。 5．单击确定按钮后，回到文档窗口中，单击属性窗口中的“居中”按钮。设置光标居中。输入文本“欢迎光临我的个人网站”。选中文字后，在属性窗口中设置“大小”为6、