创建站点和组织站点结构.ppt

第2章DW基础知识 熟悉Dreamweaver8工作界面网站创建与管理网页文档的基本操作基本页面属性设置 2 1熟悉Dreamweaver8工作界面 2 1 1 插入 栏 插入 栏又叫插入对象面板 包含各种类型的对象按钮 如图像 表格和层等 通过单击这些按钮 可将相应的对象插入到文档中 2 1 2文档标签与 文档 工具栏 文档标签显示了网页文档名称 文档 工具栏用于切换网页视图 设置网页标题 检查浏览器支持等 2 1 3状态栏 状态栏位于文档编辑窗口底部 提供了标签选择器 也叫做标记符选择器 窗口尺寸 文件大小等网页信息 2 1 4属性面板与面板组 在DW中 大多数操作都是通过面板实现的 属性 面板位于文档窗口的下方 主要用于查看或编辑所选对象的属性 除 属性 面板外 DW还提供了众多面板 如 文件 面板 历史记录 面板等 如要打开或关闭某个面板 可单击 窗口 菜单下的相应选项 标记选择符 更正教材P20页错误 标签检查器对应的属性面板 2 1 5几个易混名词的区分 课堂练习1面板基本操作 在了解了面板的种类和作用后 本节来看看如何打开新的面板 隐藏面板 以及完全关闭面板等 2 2网站创建与管理 2 2 1站点的定义 组成和结构 1 站点的定义 是一组具有相关主题和类似设计的链接文档和资源 该术语可指网站 也可以指属于网站的文档的本地存储位置 站点上传到服务器上供浏览者点击查看 一般称之为网站 Dw站点是一种组织所有与网站关联的文档的方法 也可将它看作一个项目 需要为所开发的每个网站设置一个站点 2 站点的组成站点由以下 个部分组成 本地文件夹 即本地站点 它是工作目录 是站点文件的存储位置 要先建立本地文件夹才可以定义dw站点 远端文件夹 即远端站点 是用户存储用于进行测试 协作 生产和部署等的文件的位置 一般位于运行web服务器的计算机上 本地文件夹和远端文件夹使用户能够在本地磁盘和web服务器之间传输文件 测试服务器文件夹 是dw处理动态网页的文件夹 3 确定站点的目录结构 主要是在本地磁盘上创建用来保存网站内容的文件夹和子文件夹 以存放不同类型的文件 站点的层次结构 层次结构反映了站点的一个链接关系 即网页之间的链接关系 4 本地和远端文件夹的结构设置站点远端文件夹的访问权限时 必须确定远端文件夹的主机目录 指定的主机目录应该对应于 或者匹配 本地文件夹的根文件夹 2 2 2网页文档与文件夹命名规则 为便于维护和管理 网站中文件和文件夹的命名要遵循以下规则 Dw中文件和文件夹的命名规则 用英文或数字命名 但不能数字或运算符开头 若懂英文 建议采用汉语拼音命 但不能使用中文命名 不能使用空格 标点符号或特殊字符 尽量全命名使用小写 因为internet服务器采用Unix操作系统时 区分大小写 在大型网站中 分支页面的文件应放在单独的文件夹中 每个分支中涉及到的文件也应放在单独的文件夹中 静态的首页文件一般命名为 index html 或 index htm 动态的首页则命名为 index asp 2 2 3创建本地站点的步骤定义站点可以将本地磁盘中的站点通DW建立关联 可以使用DW上传或下载站点内容 执行 站点 管理站点 命令 设置站点名称 可以任意取 选择使用服务器技术 选择站点在本地计算机上的保存位置 这是很关键的一步 尽量选择英文命名的文件夹 选择服务器连接方式 系统总结出所有选项 完成FTP设置后 还会询问是否允许多人同时编辑同一文件 设置好后 系统总结出所有选项复查 复查无误后站点建设完成 2 2 4组织站点结构站点创建成功后接下来要组织站点的结构 即创建一个按字母顺序 包含站点所有文件的分类文件夹 不要用中文 不使用中文的原因 因为很多internet服务器使用的是英文操作系统 不能对中文文件名提供很好的支持 浏览网站的用户也可能使用英文操作系统 中文的文件名称同样可能导致浏览器错误或访问失败 建议使用applet html common images javascript library media software sound templates定义文件夹applet 存放java小程序html 存放html文档页面common 存放css样式表文件images 存放网站的图像文件javascript 存放java脚本library 存放库项目media 存放多媒体文件software 存放可下载的软件sound 存放声音文件templates 存放模板文件 2 3网页文档基本操作 1 新建文档 2 保存文档 需要保存到站点的html文件夹中 3 预览文档 在浏览器中预览其效果 4 打开和关闭文档 2 4基本页面属性设置2 4 1指定网页文档标题和边距 2 4 2指定网页背景颜色和背景图像 最好不要将图像设置为网页背景 因为背景图片会影响网页的下载速度 但不能设置网页背景图像的透明度 2 4 3为网页设置文本和链接属性2 4 4跟踪图像跟踪图像是放在 文档 窗口背景中的JPEG GIF或PNG图像 可以隐藏图像 设置跟踪图像的不透明度 2 4 5页面的使用的技巧 在文档窗口中选择元素 单击或拖动元素显示和隐藏不可见元素 查看 可视化助理 不可见元素可更改不可见元素的首选参数 编辑 首选参数放大 选择缩放图标单击或者ctrl 加号 只在设计视图中可用缩小 选择缩放图标按alt键单击ctrl 减号 文档 只在设计视图中可用 借助标尺设置页面的宽和高 不出现水平滚动条为宜 建议宽度设在850 950像素之间 高度任意 课堂练习5编写HTML代码 在Dreamweaver中利用标签选择器创建HTML文档 网页效果如下图所示