创建站点与网页

nullDreamweaver8*Dreamweaver8创建站点与网页教学内容*教学内容Dreamweaver8简介 创建本地站点和站点中的文件夹 站点中存放文件 创建网页 创建格和编辑表格 网页中添加和设置文本 网页中添加图片Dreamweaver8简介*Dreamweaver8简介Dreamweaver8特点 可视化的网页编辑工具 可轻松完成丰富的静态网页 可编写基于ASP、JSP等服务器技术的动态网页 Dreamweaver8的操作界面 菜单栏 文件、编辑、查看、插入、修改、文本、命令、站点、窗口和帮助 插入工具栏(插入面板) 标签选择栏 文档窗口 属性面板 浮动面板组 设计、代码、应用程序、文件、答案Dreamweaver8操作界面*Dreamweaver8操作界面菜单栏插入工具栏工作窗口属性面板面板组Dreamweaver8基本操作*Dreamweaver8基本操作打开关闭工具栏 插入、文档、、样式呈现(按右键打开关闭工具栏) 插入 文档 标准 样式呈现 “历史记录”的使用 选择“窗口”菜单命令，打开“历史纪录”面板 通过“历史纪录”面板中滑块，回退历史操作 功能键 “F4”隐藏或打开面板 “F12”在浏览器中预览页面创建本地站点*创建本地站点创建本地站点基本步骤： 选择“站点/新建站点”命令 选择“高级”选项卡 设置“站点名称” 建立“本地根文件夹” 注意站点中文件夹或文件名用英文表示站点文件管理*站点文件管理站点中新建文件夹 打开“文件” 面板，选择需要新建文件夹的位置，按右键，选择“新建文件夹”命令 站点中新建文件(创建网页) 打开“文件” 面板，选择需要新建文件的位置，按右键，选择“新建文件”命令 站点中添加文件 打开“文件” 面板，在文件列表中选择需要添加的文件，然后通过拷贝粘贴，添加到站点指定文件夹中。 站点中文件管理 选中站点中文件或文件夹，按鼠标右键，选择“编辑”菜单，可进行复制、剪切、粘贴、删除和重命名等操作页面属性设置*页面属性设置页面属性包括： 外观设置：背景图像、颜色、文本 链接：链接文本和颜色 标题和编码 选择“修改/页面属性”，打开“页面属性”对话框设置 示例1_创建网站和网页*示例1_创建网站和网页创建站点(在C:\TEST文件夹下)和站点中文件夹 设置站点名称“Mysite” 建立本地根文件夹“C:\Test\Mysite” 建立新文件夹“SC1” 素材导入到站点文件夹中 将“SC”文件夹中素材文件导入站点“SC1”文件夹 注意复制文件时不能选“复制”命令，要用“拷贝”命令 创建网页 在站点中新建页main.html 将“SC1”文件夹中的bg.gif设置为网页背景网页布局_表格的应用*网页布局_表格的应用Dreamwaver8中创建表格的方法： 选择“插入/表格”菜单命令 或者单击“插入”工具栏中“常用”模式中的“表格”按钮 打开“表格”对话框，设置表格参数 表格宽度： “百分比”单位表示表格占整个网页宽度的百分比； “像素”单位表示表格固定宽度 边框粗细： 表格的边框的宽度 0表示不显示边框 单元格边距： 表格的单元格中内容和边框之间的距离 单元格间距： 单元格和单元格之间的距离 表格属性设置*表格属性设置建立表格后，选择整个表格，可以通过“属性”面板修改表格属性 表格的结构 表格的修饰 单元格属性设置*单元格属性设置选择表格中的单元格，通过“属性”面板设置单元格属性 单元格内容格式 单元格结构 单元格修饰 表格的编辑*表格的编辑选择表格和单元格 选择表格：点击单元格分隔线；或在表格中按右键，“表格/选择表格” 选择单元格：鼠标拖动 表格编辑 选择“修改/表格”菜单(或在表格中按右键，选择“表格”)，可以对表格进行编辑 插入行、列 在当前位置上插入行，当前位置前插入列 注意：如果选择“插入行或列”，可以选择插入行或列的位置 删除行、列 合并单元格 拆分单元格示例2_创建和编辑表格*示例2_创建和编辑表格在main.html中插入一个5行2列的表格，表格宽度为800像素，边框粗细为0，背景色为白色，并居中对齐，合并第4、5行单元格 在表格的第1行，第1列中再插入一个2行2列的表格，宽度为100%，边框粗细为0，并合并该表格的第1行网页中添加文本和格式设置*网页中添加文本和格式设置添加文本 直接在文档窗口中输入文本 通过复制/粘贴，输入文本 注意在Dreamweaver中粘贴文本时，将忽略原文本的格式 文本输入后，可通过“属性”面板或“文本”菜单来完成文本格式设置 包括字号、字体、颜色及文本对齐方式等 添加文本字体*设置文本字体时，需要添加字体 点击“属性”面板“字体”下拉列表框，选择“编辑字体列表” 在“编辑字体列表”对话框中“可用字体”栏中选择所需字体 点击“添加”按钮，添加到“选择字体”栏，加入“字体列表”添加文本字体示例3_添加文本和设置文本格式*示例3_添加文本和设置文本格式表格第4、5行中添加文本，文本在表格中居中对齐，文本内容见SC1文件夹中Txt.doc文件 将表格第4行单元格的背景颜色设置为#339900，文本设置为幼圆、大小14、颜色#FFFFFF网页中添加特殊文本元素*网页中添加特殊文本元素插入特殊字符 选择“插入工具栏”中“文本”选项卡，选择相应字符 插入日期 选择“插入工具栏”中“常用”选项卡 选择“日期”，打开“插入日期”对话框 选择日期格式 插入水平线 选择“插入工具栏”中“HTML”选项卡，选择“水平线” 同时在“属性”面板中对水平线的属性进行设置 示例4_添加特殊文本元素*示例4_添加特殊文本元素在“main.html”网页表格的第4、5行之间插入2行，并插入水平线和日期 水平线宽800像素、高5像素、颜色#339900 水平线颜色设置 选中水平线，按右键选择“编辑标签”，打开“标签编辑器” 选择“浏览器特定的”，设置颜色 日期自动更新包括日期和时间，居中对齐 注意：水平线的颜色只能在浏览器中才能看到文本的特殊操作*文本的特殊操作添加空格 (在Dreamweaver中是不能添加多余空格的) 切换到中文输入法，将标点状态设置为全角，可以随意输入空格 选择“插入工具栏”中“字符”选项卡，选择“不换行空格”，可以添加空格 文本换行 自动换行 使用“Enter”键强制换行 使用换行符(“Shift+Enter”换行不换段)网页中插入图像*网页中插入图像插入图像 确定插入图像位置 选择“插入/图像”菜单命令，打开“选择图像源”对话框 选择要插入的图像 注意 如果插入的图像不是保存在本地站点内，系统会提示将图像复制到本地站点内保存。否则，在其他计算机上或上传到远程服务器后就无法浏览网页。图像属性设置*图像属性设置选择图片，在“属性”面板中设置属性 “宽”和“高”设置图像大小 “源文件” 显示图像文件的路径，重新输入路径可以更换图像 “链接”设置图像超链接 “垂直、水平边距”设定图像顶底部和左右侧的空白边距 “边框”设定图像边框，默认为无边框 “重设大小”图像大小恢复原始大小示例5_插入图片*示例5_插入图片参考样张在表格中插入相应图片，所有图片居中对齐该图片垂直顶端对齐课堂练习*课堂练习完成课堂示例1-5 在“Mysite”站点中新建网页tk.html 网页内容见“sc1”文件夹中tk.doc 将正文标题“网上冲印店条款”设置字体华文新魏，大小24像素、颜色#003300，居中 将“SC1”文件夹中的bg.gif设置为网页背景 网页标题为“网上冲印店条款” 将正文中所有“网上冲印店”文字，替换为“E派网上冲印店” 通过“编辑”菜单中的“查找与替换”网页tk.html样张*网页tk.html样张课后练习*课后练习实验指导 P126：实验18，范例(Dreamweaver8环境) P135：实验19，范例(Dreamweaver8环境 ) 7、8为选做 下周教学内容*下周教学内容创建框架网页 创建各种超链接 网页中插入各种媒体