第三章网页编辑.ppt

第3章 网页编辑 3.1 网页的基本操作 3.1.1 新建网页 Dreamweaver提供了多种创建网页的方法，下面分别介绍一下：（演示3-1） 1．如果Dreamweaver MX 2004 运行后显示起始页，则在起始页中直接选择“新建HTML文档”。 2．如果Dreamweaver MX 2004运行后不显示起始页，则在“文件”菜单选择“新建”命令，打开“新建文档”对话框。 3．在文档窗口中，也可以直接按Ctrl+N组合键，打开 “新建文档”对话框。 3.1 网页的基本操作 3.1.2 保存网页 （演示3-2） 1.新建一个文件后，选择菜单“文件”中的“保存”命令 。 2．在文档窗口中，也可以直接按Ctrl+S组合键。 3.需要将文件以不同路径或名称保存时，选择“文件”菜单中的“另存为”命令。 注意：网页的后缀必须为htm或html，否则上传到服务器之后，浏览器无法正常打开。通常网站首页名字是index.html或index.htm。 3.1 网页的基本操作 3.1.3 打开网页与关闭网页 （演示3-3） 1．启动Dreamweaver程序，在起始页面中显示了最近编辑过的文件，点击目标文件，即可打开。 2．选择“文件”菜单中“打开”命令（介绍下能打开的文件类型）。 3．在文档窗口中，也可以直接按Ctrl+O组合键，出现“打开”对话框。 4．通过“文件面板”打开文档。通过“文件面板”找到相应的文档，双击即可打开相应文件。 3.1 网页的基本操作 3.1.4 页面属性的设置 （演示3-4） 打开首页面，在编辑窗口下选择“修改”菜单中的“页面属性”，或在在工作区单击鼠标右键，在快捷菜单中选择“页面属性”，打开“页面属性”对话框。 “页面属性”对话框中的各选项含义（在标题栏课本上有一处错误，以帮助文档为准） 3.1 网页的基本操作 3.1.5 网页预览（演示3-5） 1．按F12键。 2．选择“文件”菜单中的子菜单“在浏览器中预览”下的“Iexplore”命令。 3．单击“文档”工具栏的“在浏览器中预览/调试”按钮，并在弹出的下拉菜单中选择“预览在iexplore”命令。 3.2 在网页中添加文本和图片 准备工作： 首先启动Dreamweaver，确保已经用站点管理器建立好了一个网站（根目录）。 为了制作方便，最好事先打开资源管理器，把要使用的图片收集到网站目录images文件夹内。 3.2 在网页中添加文本和图片 3.2.1 在网页中添加文本 1.添加文本 1）直接添加文本：（演示3-6） （1）输入过程中换行方法：自动换行（根据窗口宽度，英文不连续）：自动换行的好处在于不管浏览器窗口的大小，网页文字都将依照窗口大小自动换行，避免超出水平页面之外而需要移动滚动条浏览的情况。 利用Enter键换行（硬换行）：按Enter键，则另起一个段落，并且插入点移到隔了一个空白行的位置上。 利用Shift + Enter键换行（软换行）：如果想要将文字手动换行，中间又不出现空白行，可以按Shift + Enter键，其行距比直接按Enter键小。 3.2 在网页中添加文本和图片 3.2.1 在网页中添加文本 1.添加文本 1）直接添加文本：（演示3-6） （2）输入空格 Dreamweaver中，在文本开始处直接按空格键是不会输入空格的，在文字之间按空格键可以输入半个空格。如果要在网页中输入空格，可以采用如下三种方法： 按住“Ctrl+Shift”键，按一次空格键，键入半个空格。 将输入法由半角状态切换到在全角状态，按一次空格键，键入一个空格。 输入多个连续空格：编辑--?首选参数--? 常规 3.2 在网页中添加文本和图片 3.2.1 在网页中添加文本 1.添加文本 2）复制文本 打开字处理软件下含有文本的文档，如word文档，执行“编辑”菜单中的“复制”命令复制文本。然后在Dreamweaver文档窗口中，将插入点置于要添加文本的位置，执行“编辑”菜单中的“粘贴”命令，完成文本复制。 3.2 在网页中添加文本和图片 3.2.1 在网页中添加文本 1.添加文本 3）导入Word文档（演示3-7，第3章__网页编辑.doc） 选择“文件”菜单中的子菜单“导入”下的“Word文档”命令，从打开的“打开”对话框中选择需要导入到Dreamweaver的Word文档，选择完毕后单击“确定”按钮，即可完成Word文档的导入。 Dreamweaver“导入”功能除了能够导入Word文档外，还可以实现导入EXCEL文档、表格式数据及XML到模板等功能。 3.2 在网页中添加文本和图片 3.2.1 在网页中添加文本 2、格式化文本 在Dreamweaver中，可以使用文本的属性面板