《网页设计与制作》电子教案课程课件PPT 第一章.ppt

第1章网页设计与制作基础,本章学习目标,网页设计与制作基础DreamweaverMX窗口介绍网页制作的一般流程,1.1网页设计与制作基础,1.1.1概述(1)网页也称为Web页或网页文件。它由超文本标记语言（HTML）的文件格式来构造。网页中包含了文本、图像、动画、声音以及其他信息。网页文件通常放在连接互联网的服务器上，采用超级连接的方式将他们组织在一起。,1.1.1概述(2)网页也称为Web页或网页文件。它由超文本标记语言（HTML）的文件格式来构造。网页中包含了文本、图像、动画、声音以及其他信息。网页文件通常放在连接互联网的服务器上，采用超级连接的方式将他们组织在一起。,1.1.2网页制作软件,网页通常包含这样一些对象:文本、图像、表格、框架、表单、组件、链接、文件、超链接、多媒体、各种插件等。由于网络的迅速发展，网页的需求量很大，网页的复杂性也越来越高，因此，软件生产商开发了许多专门用于网页制作的工具软件。这些软件多采用直观易用的图形界面，无需编辑程序代码，就可以轻松的制作出美观漂亮的网页。这类软件通常也称为所见即所得的网页编辑制作软件。,本书介绍的软件是Macromedia公司的DreamweaverMX网页设计制作软件。在DreamweaverMX启动时会弹出如下窗口为了方便读者与老版本衔接学习本书采用Dreamweaver4.0的经典样式。,1.2.3DreamweaverMX窗口介绍,DreamweaverMX经过安装并输入正确的序列号之后，用户就可以在Windows的启动菜单中找到DreamweaverMX的启动命令，点击该命令即可启动DreamweaverMX。启动后的窗口界面如图1-1所示。,图1-1DreamweaverMX窗口界面,1.2网页制作的一般流程,网页上的内容通常较为丰富，有文字、图片、线条、表格、链接等。因此，网页制作时需要作前期准备工作。,1.2.1站点的内容规划(1),在着手建立站点之前，需要做一些前期准备工作，通常称为规划站点。它包括站点的定位，考虑该站点的主要浏览对象的特点，如性别、年龄、职业等；站点提供的主要内容，如电脑、文学、科普等；在确定了浏览对象和网站的定位以后，还要搜集资料，凡是制作网页可能用到的文档、图片、声音、动画等，均应分门别类存储在磁盘上备用。,1.2.1站点的内容规划(2),制作网页时还要注意一些问题：第一，合理安排主页内容，主页应该简洁清晰、一目了然，重点突出，图文有序。第二，网页上要善用图片，色彩协调，格调一致，但又要注意图片不可过大，以免影响浏览时的下载速度。第三，要易于导航，尽量减少链接级数，尽快通过链接接触到实际内容，否则会使浏览者失去兴趣。第四，即要美观实用，又要有新颖的创意，网页上要有一些与众不同的闪光点。,1.2.2站点的定义(1),如果有了站点文件夹，必须先经过定义，将这个站点纳入到Dreamweaver的管理范围内。在Dreamweaver中可以定义多个站点，但只有一个站点是当前站点。,1.2.2站点的定义(2),1定义站点定义站点的具体操作步骤如下：（1）打开“站点”菜单，选择“定义站点”命令，出现“定义网站”对话框。如图1-4所示。（2）在“定义网站”对话框中，单击“新建”按钮，出现“站点定义”对话框。如图1-5所示。图1-5“站点定义”对话框（3）在“站点定义”对话框中输入站点名称和站点所在的路径，单击“确定”后返回“定义网站”对话框。,图1-4“定义网站”对话框,图1-5“站点定义”对话框,1.2.2站点的定义(3),（4）单击“定义网站”对话框中的“完成”按钮站点就定义好了，并且会自动打开站点文件窗口。“定义网站”的命令菜单如图1-6所示。定义好的站点如图1-7所示。,图1-6“打开站点”命令,图1-7新建并经过定义的站点,1.2.2站点的定义(4),2选择当前站点如果定义了多个站点，而要选择一个当前站点，具体的操作方法为：（1）打开“站点”菜单，选择“定义站点”命令，出现“定义网站”对话框。（2）在对话框中选择需要打开的网站，单击“完成”按钮，则该网站就成为当前站点。1.2.3在站点中定义网页或文件夹建立站点并定义为当前站点之后，就可以在站点中添加文件夹或网页了。,1.2.2站点的定义(5),1在站点中添加网页添加网页的具体操作方法如下：（1）打开“站点”菜单，选择“打开站点”命令，选择“网络安全”，即可出现图1-7的“站点文件视图”。（2）选中宿主文件夹（欲在其中建立网页的目标文件夹，如“站点留言板”），打开“文件”菜单，选择“新建文件夹”命令即可，如图1-8所示。,图1-8在DreamweaverMX中新建文件夹,添加文件夹的方法与此类似，只要选择“新建文件”命令即可。注意：在Dreamweaver中，无论是站点还是网页，在起名的时候不宜使用中文作为文件名。通常Index.htm文件作为一个站点的主页，其它的网页和文件夹可以在网页制作过程中逐步添加进去。,1.2.2站点的定义(6),1.2.2站点的定义(7),2网页的存取操作新建网页具体操作方法如下：打开“文件”菜单，选择“新建”命令，出现一个新的窗口，这就是一张空白网页。打开网页具体操作方法如下：（1）打开“文件”菜单，选择“打开”命令，出现“打开”对话框，在“打开”对话框中，列出了当前站点中的文件夹和文件。,1.2.2站点的定义(8),（2）寻找需要的文件夹或网页，然后单击对话框中的“打开”按钮即可。保存网页保存网页具体操作方法如下：打开“文件”菜单，选择“保存”命令，如果事先定义了当前站点，网页就会直接保存在当前站点文件夹