第2章网页设计基础

会计学1第2章网页设计基础第2章网页设计基础2.1Dreamweaver8简介2.2创建与编辑本地站点2.3网页文件的基本操作2.4简单网页的制作实例第1页/共39页Dreamweaver8是Macromedia公司的集网页设计、代码开发、网站创建和管理于一体的软件。它保留了Dreamweaver早期版本的各种优点，提供了可视化的布局工具、快速的Web应用程序开发以及广泛的代码编辑支持。它新增了对ASP、JSP、ASP.NET、PHP等动态网页的支持，可以实现完整的数据库的编写。Dreamweaver8不仅可以轻松设计网站前台的页面，而且也可以方便地实现网站后台的各种复杂功能。2.1Dreamweaver8简介第2页/共39页Dreamweaver8新的工作区环境比早期的版本更加灵活、方便、实用。工作区窗口由标题栏、菜单栏、工具栏、网页文件编辑区、状态栏和浮动面板组等基本部分组成，如下图所示。启动Dreamweaver8后，屏幕显示的是工作区窗口，此时系统打开一个名为Untitled的空白文档，在网页文件编辑区中，设计者可以完成网页的设计。工作区窗口各部分功能如下所述。2.1.1Dreamweaver8的工作环境第3页/共39页第4页/共39页1.标题栏标题栏是显示当前网页的标题信息，当前被编辑网页文件的路径和文件名会在括号里显示。用标题栏左边和右边的窗口控制按钮，可以对窗口完成【最大化】、【最小化】、【移动】、【还原】、【关闭】等操作。第5页/共39页2.菜单栏菜单栏是设计者选择操作命令的地方。菜单栏的选项依次为【文件】、【编辑】、【查看】、【插入】、【修改】、【文本】、【命令】、【站点】、【窗口】和【帮助】。浮动面板上的各项操作基本上都有菜单操作命令与之相对应，在以后的章节中会逐一介绍主要的菜单操作命令。第6页/共39页3.插入栏选择【窗口】|【插入】命令，可显示或隐藏插入栏，快捷键CTRL+F2是显示或隐藏插入栏的切换开关。插入栏默认的9个选项分别为：常用、布局、表单、文本、HTML、应用程序、Flash元素、收藏夹、显示为制表符。单击【显示为制表符】选项，可以改变插入栏的显示方式。第7页/共39页4.文档工具栏 在菜单栏的下面是文档工具栏。文档工具栏最左边的是代码视图和设计视图的切换按钮。利用切换按钮可在【代码】、【设计】、【代码和设计】的3种视图方式之间切换，改变网页的编辑方式。 第8页/共39页5.网页文件编辑区 网页文件的编辑区域是Dreamweaver8的主工作区。 启动Dreamweaver8时，就创建了一个空白的网页文件等待编辑，网页编辑区的大小可以通过用鼠标拖曳编辑区右面边框线来调整，或者单击编辑区右面边框线上的按钮，完成最大化或还原网页编辑区的操作。第9页/共39页6.状态栏 状态栏显示当前网页的有关信息。在状态栏中自左至右分别是：标签选择器（TagSelector）、页面信息栏（视窗设置框、页面信息框）、快速启动条，它们特点和功能如下所述。1)标签选择器 编辑网页时，将光标置于网页某个位置，便会在标签选择器中显示相应的HTML标签，单击HTML标签则可选择网页中相对应的编辑对象。右击某个HTML标签，选择快捷菜单中的相应命令，可对HTML标签做进一步的编辑。第10页/共39页2)

页面编辑工具选取工具：单击该工具后，可以用鼠标选取网页文档中的元素。手形工具：单击该工具后，可以在【文档】窗口中移动当前文档。缩放工具：该工具与【设置显示比例】弹出式菜单可以缩放文档的显示比例。第11页/共39页3)视窗设置框 在视窗设置框中显示的当前文档窗口的大小都是以像素为单位的。这个窗口尺寸是动态显示的，用鼠标拖动文档窗口边框改变窗口大小时，显示的窗口尺寸也会随之改变。单击视窗设置框右边的小按钮，在弹出的快捷菜单中选择【编辑大小】命令，可以定制窗口的大小尺寸。第12页/共39页4)网页信息框 网页信息框显示网页容量、传输速率和该网页在Internet上完全下载的时间（系统默认的连接速度为56.0Kbps）。 例如表示当前网页文档大小为25KB，下载时间约为4秒。将连接速度改为当前主流产品的速度56Kbps，便可关注当前正在编辑的网页下载所需的时间。第13页/共39页7.浮动面板和浮动面板组 Dreamweaver8的浮动面板是该软件的一个特色，它不同于对话框。用对话框来设置对象的各种属性后，必须关闭对话框才能看到设置的效果。利用浮动面板对网页对象进行属性设置，在网页编辑窗口中可以直接看到操作的结果，从而避免了属性设置的盲目性，真正实现了“所见即所得”的实时编辑功能。 浮动面板组也是Dreamweaver8的一个特色。设计者可以按自己的需要组合或拆分浮动面板组中的浮动面板。第14页/共39页Dreamweaver8默认的浮动面板组有以下5个。(1)【CSS】浮动面板组包含【CSS样式】、【层】2个浮动面板，主要提供网页设计和网页格式化的工具。(2)【应用程序】浮动面板组包含【数据库】、【绑定】、【服务器行为】、【组件】4个浮动面板，主要提供动态网页设计和数据库管理的工具。(3)【标签检查器】浮动面板组包含【属性】、【行为】2个浮动面板，主要提供方便手编代码的调试工具。第15页/共39页(4)【文件】浮动面板组包含【站点】、【资源】、【代码片段】3个浮动面板，主要提供管理站点的各种资源。第16页/共39页8.【属性】面板 【属性】面板位于网页文件编辑区下方，是用来显示、设置和修改网页中当前选中对象的属性的重要工具。选择【窗口】｜【属性】命令可显示或隐藏【属性】面板，Ctrl+F3快捷键是显示或隐藏【属性】面板的切换开关。 当某个页面对象的属性被修改后，可以直接在编辑窗口中预览到对象被修改后的结果，真正实现了交互式面对面地修改网页对象功能。第17页/共39页对于选择文字、表格、层、表单等不同的对象，【属性】面板的设置内容也会相应有所不同。另外，为了不过多地遮挡网页编辑窗口，设计者还可根据需要单击【属性】面板右下角的三角形按钮，展开和折叠【属性】面板。如图3-10所示的是图像【属性】面板（折叠），如图3-11所示的是表格【属性】面板（展开）。关于【属性】面板的具体使用方法将在后面章节逐一介绍。第18页/共39页图2-10图像【属性】面板（折叠）图2-11表格【属性】面板（展开）第19页/共39页 一个网站主页可以看成是一系列相关文档的集合，设计者在制作一个网站的主页时，实际上是将这些相关文档通过各种超链接把它们联系在一起。浏览者通过浏览器程序从一个网页转跳到另一个网页，从而对整个网站的主页进行访问。一般情况下应先建立本地站点，这样既可以从全局上控制网站的结构，完成对网页的编辑调试工作，又可以提高效率、降低成本。2.2创建新站点第20页/共39页创建网站一般有以下几个步骤。(1)规划站点：了解建站的目的，确定站点的主题、风格、网站要提供的服务和网页要表达的主要内容。收集和处理各种有关的资料。(2)创建站点的基本结构：在计算机中创建本地站点的根文件夹以及存放各种资料的子文件夹，配置好所有系统的参数和站点测试路径。(3)网页设计：充分利用收集到的数据资料，合理地运用Dreamweaver8提供的技术，最完美地设计出能表达网站中心思想的Web页面。第21页/共39页所谓本地站点即在本地计算机的硬盘上创建一个文件夹，并把这个文件夹设置为本地站点的根文件夹。在网页制作中将会使用大量的图片、照片、动画文件和文本文件。一个比较成熟的网站会有很多各种类型的文件。为了便于管理，可在本地站点的根文件夹中分门别类地建立子文件夹，然后按类型把不同的文件存放在不同的子文件夹中，以便使站点结构清晰明了，文件管理更加方便。2.2.1创建本地站点第22页/共39页注意：(1)在网页设计中，最好不要用中文作为文件名或文件夹名；(2)在本地计算机上制作网页时，应先规划好存放文件的文件夹，建立好本地站点;(3)把网页中用到的素材文件和文档资料复制到规划好的本地站点的文件夹内。制作好的网页也必须放在本地站点中。(4)每次制作网页前，必须先设置好本地站点。第23页/共39页

(5)每个网站都有而且只有一个首页，浏览者在访问该站点时首先访问这个文件，首页文件的名字一般可命名为index.html，首页文件index.html应该放在站点的根文件夹下。 (6)网页中用到的元素必须用相对路径插入，所以新建页面后，可先将网页保存在本地站点中。以后在网页上插入的元素就自动以相对路径插入。第24页/共39页 选择【站点】｜【站点文件】命令，可以按文件列表的形式查看本地站点，选择、添加新文件和文件夹，剪切、粘贴、复制、删除、重命名文件，具体操作方法如下所述。2.2.2站点中的文件操作第25页/共39页1.在本地站点中新建文件夹要在本地站点中新建文件夹可打开【站点】浮动面板，选择【文件】｜【新建文件夹】命令，然后在本地文件列表中命名新建的文件夹。或者，在【站点文件】视图的某个文件夹上右击，并选择快捷菜单中的【新建文件夹】命令，便可完成新建子文件夹的操作。第26页/共39页2.在本地站点中新建文件与在本地站点中新建文件夹一样，若要在站点中新建文件，可打开【站点】浮动面板，选择【文件】｜【新建文件】命令，然后在本地文件列表中命名新建的文件。或者，在【站点文件】视图的根文件夹上右击，并选择快捷菜单中的【新建文件】命令，便可完成新文件的创建。第27页/共39页3.在站点中选择多个文件在【站点文件】视图中选择多个文件可用以下操作方法：(1)单击第一个文件，按住Shift键，然后单击最后一个要选择的文件，可选择一组连续的文件。(2)按住Ctrl键，然后单击要选择的文件，可选择一组不连续的文件。第28页/共39页4.在本地站点中剪切、粘贴、复制、删除、重命名在【站点文件】视图中对文件的剪切、粘贴、复制、删除、重命名操作可先选中要操作的文件，右击选中的对象，在快捷菜单中选择相应的命令或按相应的快捷键便可完成相应的文件操作。第29页/共39页2.3.1创建、打开和保存网页文件

1.创建HTML文档2.打开已建的HTML文档3.保存指定文件4.关闭文件2.3网页文件的基本操作第30页/共39页在创建新网页时，默认的页面总是以白色为背景，没有背景图像和标题。制作一个页面时，一般需要先设置网页的页面标题、背景图像和颜色，文本和超链接的颜色，文档编码方式，文档中各元素的颜色等属性。选择【修改】｜【页面属性】命令，系统将打开【页面属性】对话框。设计者可对页面的各项参数进行设置，以下主要介绍对【外观】的设置，其他各项参数设置见教材。3.3.2设置网页的页面属性第31页/共39页图2-15【页面属性】对话框第32页/共39页1.网页中文本输入2.设置汉字的字体列表3.输入网页中的空格4.文本换行5.文本的属性设置2.3.3网页文本的编辑第33页/共39页1.网页图像格式简介(1)GIF（GraphicsInterchangeFormat）(2)JPEG（JointPhotographicExpertsGroup）(3)PNG（PortableNetworkGraphic）2.插入网页图像的方法注意：应先将该网页文档保存在本地站点中，然后再将该网页文档打开后插入图像文件，此时图像文件以相对路径插入。图像文件不要以URL的绝对路径插入，否则会导致图像不能显示。2.3.4网页图像的编辑

第34页/共39页例：制作如图显示的网页。2.4简单网页的制作实例第35页/共39页本例的制作要求如下：（1）页面的背景图片为bg0000.jpg；（2）在合适的位置插入图片earth.gif；（3）在网