第1.2章网页设计基础及基本操作.doc

章节名称第1、2章网页设计基础及基本操作章节分析本次课重点介绍了在Dreamweaver8.0中创建站点及进行站点管理的方法，在网页中如何插入文本、图像，如何设置图文混排，如何设置页面属性，如何设置首选参数等内容。第一讲 一、网页设计基础（一）初识Dreamweaver 8.0Macromedia Dreamweaver 8.0 是构建网站和应用程序的专业化产品。它提供可视布局工具、应用程序开发功能、代码编辑支持的强大组合，使各个技术级别的开发者和设计者都能够快速创建可视化、吸引人的基于标准的站点和应用程序。从基于 CSS 设计的领先支持到手工编写的代码功能，Dreamweaver 提供在集成的、无缝的环境中所需的专业工具。Dreamweaver 支持所有主要服务器技术，如ColdFusion、PHP、ASP、ASP.NET以及JSP等，开发者可以选择将 Dreamweaver 与服务器技术结合使用，构建强大的 Internet 应用程序，该应用程序将用户连接到数据库、实时数据服务和原有系统。 1.Dreamweaver 8.0的启动“开始”“Macromedia”Dreamweaver 8”2. Dreamweaver 8的工作环境l 文档窗口l 状态栏l 插入栏l 属性检查器l 面板组（二）站点管理1Dreamweaver站点概述Web 站点是一组具有共享属性（如相关主题、类似的设计或共同目的）的链接文档。在 Dreamweaver 中，“站点”一词既表示Web站点，又表示属于Web 站点的文档的本地存储位置。在开始构建 Web 站点之前，必须要建立站点文档的本地存储位置。Dreamweaver 站点最多由三部分组成，即本地文件夹、远程文件夹和动态页文件夹，具体取决于所用的计算机环境和所开发的 Web 站点的类型。2.定义本地站点 为要定义的本地站点指定一个站点名，该站点名允许使用中文名称。 在本地磁盘建立存储站点文件的根文件夹，并在该文件夹中建立子文件夹，用于存放各类不同的文件。子文件夹的个数没有限制，但必须指定一个专门用于存储图像文件的文件夹。在命名文件夹时，不能使用中文名称。 使用Dreamweaver的站点管理功能定义站点。Dreamweaver 8.0菜单栏的“站点”命令和文件面板的“站点”命令都可以定义本地站点。3.管理本地站点（1）新建站点通过“站点定义向导”创建通过“高级”设置对话框创建（2）复制和编辑站点l 在菜单栏中选择【站点】【管理站点】命令，打开【管理站点】对话框 。l 在列表框中选中站点“renwu2”，然后单击复制按钮 。l 确认站点“renwu2复制”处于被选中状态，然后单击编辑按钮，打开【renwu2-1的站点定义为】对话框 。l 切换到【高级】选项卡，把【站点名称】修改为“renwu2-1”，【本地根文件夹】修改为“F:xiangmuji1”，【默认图像文件夹】修改为“F:xiangmuji1image1” l 其他参数设置保持不变，最后单击确定按钮，返回【管理站点】对话框。 （3）导出、删除和导入站点l 在【管理站点】对话框中选中站点“renwu2-1”，单击导出按钮，打开【导出站点】对话框，设置导出站点文件的路径和文件名称 l 单击保存按钮，保存导出的站点文件 。l 在【管理站点】对话框中仍然选中站点“renwu2-1”，然后单击删除按钮，这时将弹出提示对话框，单击是按钮将删除该站点 。l 在【管理站点】对话框中单击导入按钮，打开【导入站点】对话框，选中要导入的站点文件，单击打开按钮即可导入站点 。l 最后单击完成按钮或标题栏中的x图标，关闭【管理站点】对话框。 （4）在站点中选择多个文件（5）在本地站点中剪切、粘帖、复制、删除、重命名文件或文件夹（6）创建文件或文件夹（7）站点地图视图(三)网页文件的基本操作1.创建HTML文档l 文件新建新建文档常规类别基本页l 在文件面板中右击新建文件双击2.打开已建的HTML文档l 文件打开l 在文件面板中双击该文档3.保存指定文件l 文件保存（或Ctrl+S)l 文件另存为l 文件保存全部关于文档保存的说明l 文档的保存文件名在“文件名”对话框中指定，文档的默认文件名为Untitled-x.html，其中“x”是一个整数值，如1、2、3等。l HTML文档的默认扩展名，通常为“html”或“htm”，也可以使其他形式的扩展名，具体由Dreamweave的首选参数的设定值确定。l 不要在文件名和文件夹名中使用空格和特殊字符，文件名也不要以数字开头。关于文档默认扩展名的说明l 选择“编辑/首选参数”，打开“首选参数”对话框。l 在左侧的类别列表中单击“新建文档”，打开新建文档对话框。l 在“默认文档类型”中选择“HTML”。 l 在“默认扩展名”文本框中，指定Dreamweaver中新建HTML档的扩展名。在重新设置以前，该扩展名即为Dreamweaver默认的HTML档的扩展名。 4.关闭文件文件关闭5.Dreamweaver预览文档的常用方法l 文档在打开状态下，按F12功能键或使用文档工具中的预览按钮预览网页。l 在文件面板中直接预览文档。二、网页的基本操作（一）网页文本的输入和属性设置1.输入文本l 文件导入l 复制粘贴l 直接输入2.输入网页中的空格l 汉字输入状态下输入l 属性面板格式预先格式化的l Shift+Ctrl+空格l 编辑首选参数常规允许多个连续的空格3.文本换行l Enter分段（隔一行）l Shift+Enter换行（不分段）4.文本的格式设置（1）文本格式的编辑方法：l 使用文本属性检查器l 使用“文本”菜单（2）编辑字体列表l 向“字体列表”添加字体l 选择“文本/字体/编辑字体列表”菜单，弹出 “编辑字体列表”对话框。l 在“可用字体”列表中选中要添加到“字体列表”中的字体。l 按箭头按钮“”，将选中字体置于“选择的字体”框中。l 按窗口左上方的“+”按钮，所选字体即进入“字体列表”中。 l 从“字体列表”中移除字体（二）插入水平线l 选择“插入/HTML/水平线”。 l 在“插入”栏的“HTML”类别中，单击“水平线”按钮。 （三）插入图像 1.插入图像l 在“插入栏”的“常用”类别中，单击“图像”图标l 选择“插入/图像”菜单 l 通过文件面板直接将文件拖入编辑区注： u GIF对色彩要求不高的地方可使用u JPEG用于色彩丰富的图片u PNG保留所有原始层、矢量、颜色和效果信息。2.图像的属性：l 宽和高：以像素为单位指定图像的宽度和高度。l 源文件：指定图像的源文件。l 链接：指定图像的超级链接。l 对齐：对齐同一行上的图像和文本。l 替代：指定只代替图像显示的替代文本。l 垂直边距和水平边距：沿图像的边缘添加边距（像素）。l 低解析度源: 指定在载入主图像之前应该载入的图像。l 边框：以像素为单位的图像边框的宽度，默认为无边框。l 编辑：包括图像处理优化、裁剪、亮度和对比度、锐化等操作。l 缩略图下面的文本框：使用缩略图下面的文本框设置名称，以便在使用 Dreamweaver 行为或脚本撰写语言时可以引用该图像。 3.编辑图像（1） 调整图像大小（2） 裁剪图像（3）对齐图像对齐图像是指设置图像相对于同一段落或行中其他元素的对齐方式。可以将图像与同一行中的文本、另一个图像、插件或其他元素对齐；还可以使用对齐按钮（左对齐、右对齐、居中对齐）设置图像的水平对齐方式。对齐图像使用图像属性检查器实现，过程： 在“设计”视图中选择图像。 在属性检查器中设置该图像的对齐属性。 （四）创建鼠标经过图像 创建鼠标经过图像操作步骤： 1.在“文档”窗口中，将插入点放置在要显示鼠标经过图像的位置。2.使用以下任何一种方法操作后，打开 “插入鼠标经过图像”对话框，在对话框中设置相关参数后“确定”即可。（1）在“插入”栏中，选择“常用”标签，然后单击“鼠标经过图像”图标（2）选择“插入/交互式图像/鼠标经过图像”菜单 （五）插入图像占位符插入|图像对象|图像占位符（六）插入日期时间插入|日期（七）页面属性的设置在文档编辑状态下，通过属性检查器的“页面属性”按钮对页面属性进行设置。l 页面的外观l 页面链接l 页面标题l 页面标题/编码l 页面跟踪图像（八）设置首选参数 l 在菜单栏中选择【编辑】【首选参数】命令，打开【首选参数】对话框，选择【常规】分类，在【文档选项】中勾选【显示起始页】复选框，在【编辑选项】中勾选【允许多个连续的空格】和【使用CSS而不是HTML标签】复选框 l 切换到【不可见元素】分类，在此可以定义不可见元素是否显示，只需勾选相应的复选框即可，这里建议全部选择 l 切换到【复制/粘贴】分类，在此可以定义粘贴到Dreamweaver设计视图中的文本格式 l 切换到【新建文档】分类，在【默认文档】下拉列表中选择【HTML】选项，在【默认扩展名】文本框中输入扩展名格式，如“.html”或“.ht