第2章静态网页的制作学习目标了解网页制作工具(Dreamweaver、Flash)的简单使用方法,用之制作静态网页;学会将Dre amweaver作为开发Web程序的平台;掌握超级链接的创建;学会利用表格和框架进行网页布局;学会使用HTML和XML语言编 制网页。目录Dreamweaver是一套专业化的网页创作工具,它采用“所见即所得”的可视化编辑方式,能 够快速高效地创建各种具有专业水平的网页,不需要编写任何代码。如果需要在代码界面进行工作,只需进入HTML代码窗口或源代码检视器中, 就能同步看到Dreamweaver生成的源代码。它支持最新的DHTML、CSS标准及分层技术,具有极好的兼容性,适用于各种平台和各 种浏览器。启动Dreamweaver程序在“开始”菜单的“所有程序”中找到“AdobeDreamweaverC S3”,并单击该命令。Dreamweaver将立即启动,在“文档”窗口内将打开一个空白文档,如下图所示。2.Dreamwea ver的用户界面Dreamweaver由页面编辑器和站点管理器两大部分组成。下图所示的是Dreamweaver的页面编辑 器,包括页面编辑窗口和各种浮动面板。(1)页面编辑窗口:页面编辑窗口由标题栏、菜单栏、工具栏、文档编辑区和状态栏 等基本部分组成,各部分的功能如下:①标题栏:显示当前页面的标题,括号中显示对应文档的路径和文件名。②菜单栏:包含所有的 操作命令。Dreamweaver共有10个系统菜单,分别为文件、编辑、查看、插入记录、修改、文本、命令、站点、窗口、帮助。单击系统 菜单,打开对应的下拉菜单,可选择下拉菜单中的操作命令。面板上的各个操作按钮基本上都有菜单操作命令与之相对应。③工具栏:放置常 用工具。如:左边第一个按钮用于切换到HTML代码窗口,第二个按钮切换到HTML代码视图和页面设计视图双状态同步窗口,第三个按钮则切 换到页面编辑窗口。④文档编辑区:编辑网页的区域。Dreamweaver启动后,自动创建一个空白的网页文档等待编辑。⑤状态 栏:显示当前网页的有关信息。在状态栏中从左到右依次为标签选择器、基本工具、窗口设置框和下载指示器。标签选择器:编辑网页时,利 用标签选择器可以显示和修改HTML标签,单击标签按钮可以选择网页中相应的编辑对象。基本工具:包括选取工具、手形工具、缩放工具和 选择缩放比例列表框。窗口设置框:设置显示窗口的大小,单击设置区右侧的小按钮,在打开的菜单中,可以根据显示器屏幕的分辨率选择不 同的显示尺寸。下载指示器:显示当前网页的文件量大小,以及网页被下载所需要的时间,单位是k/秒。(2)浮动面板: 页面编辑器中有2个常用的浮动面板:插入面板、属性面板,以及放置其他面板的浮动面板集。浮动面板是Dreamweaver的一大 特色。利用浮动面板对网页进行属性设计,在页面编辑窗口中可以直接看到操作结果,真正实现了“所见即所得”的编辑功能。浮动面板集也是 Dreamweaver的一大特色。设计者可以按自已的需要任意组合或拆分浮动面板集中的各种面板,也可以用鼠标拖拽浮动面板的标题栏来移 动浮动面板,用鼠标拖拽浮动面板的边框来改变浮动面板的大小。(3)站点管理器:站点管理器主要用于管理站点内的文件 和目录,可对站点内的文件进行改名、编辑和删除等基本操作,并可检验对象的链接情况,自动修改其他页面指向这个对象的链接。利用模板和库, 可以使站点内的部分页面应用相同的模板和库,从而使多个页面具有相同的风格,并且可以快速进行统一更新。管理器还自带FTP功能,能完成站 点内文件的上传和下载,进行站点的发布和远程管理。制作一个浏览效果如下图所示的简单网页。实现步骤如下:首先启动Dream weaver,打开前面所建立的本地站点,接着在页面中插入各种基本的网页元素。一、基本网页元素(文字、图像、水平线、日期和时间)的 插入1.在页面中添加和处理文字(1)在页面中输入文字,操作步骤如下:①在页面编辑区中,按照页面的设计内容输入文字,各段 文本的末尾按回车键,如下图所示;②按Ctrl+S键保存网页。第一次创建的网页可以作为首页index.htm文件保存,随后 该首页将得到进一步的扩充和完善。注意:书中所提到的“保存网页”都是指将网页保存到本地站点下。(2)将第一行“计算机工程系”作 为网页的标题文字,操作步骤如下:①选中“计算机工程系”,打开属性面板,如下图所示;②在“格式”下拉选项中选择最大标 题“标题1”以设置标题样式;③单击按钮将字体变粗,单击按钮将文字居中显示。(3)接着,设置中文字体。 在属性面板上单击字体按钮,打开字体下拉列表,选择想设置的字体。如果字体下拉列表中没有想设置的字体,如何添加中文字体呢?操作如下 :①打开“编辑字体列表”对话框,执行下列操作之一:在属性面板上单击字体按钮,打开字体下拉列表,选择“编辑字体列 表”选项,如下图所示;②在“编辑字体列表”对话框(如下图所示)中进行如下操作:②在“编辑字体列表”对话框中进行如下 操作:先在“字体列表”框中选定“在以下列表中添加字体”项;在“可用字体”框中选择一种字体(如隶书);单击方向按钮,选中的 字体添加到“选择的字体”框中,同时也出现在“字体列表”框中。如果还要加入第二种字体,则单击按钮,再重复上面的3步 即可。如果要删除某种字体,则在“字体列表”框中选定该字体,单击按钮。还可以单击按钮,将刚添加的字体上移,便于以后的使用。 ③单击“确定”按钮。此时,属性面板上的字体下拉列表中已经添加了“隶书”等字体。(4)将第一段文本的颜色设置为红色,将第三 段文本的颜色设置为十六进制代码#3333CC蓝色,将后面文本的颜色设置为十六进制代码#FF00FF的淡紫色。操作步骤如下:① 首先选中第一段文本;②单击属性面板上的字体颜色按钮,在“颜色”调色板中用吸管吸取红色即可,如下图所示。在网页中, 每种颜色都可用一个十六进制代码表示。如果知道颜色的代码,可直接在“颜色”文本框中输入该颜色的十六进制代码。③用相同的方法设 置下面文本的颜色。(5)将最后的5行文本组成一个项目列表,操作步骤如下:①首先选中最后5行文本;②打开 属性面板,单击按钮,则最后5行文字前便增加了圆点式的项目符号“·”,如下图所示。?(7)同时,还可以让“Welcom e”文本从左到右动起来,操作步骤如下:①首先选中“Welcome”文本;②在属性面板上单击按钮,打开快速标签编辑器; ③在光标处直接输入“marquee”,或稍等一会,在出现的下拉列表中选择“marquee”选项,然后按回车键。此时,状态 栏上已多了一项加粗显示的 |
|