（中职）网页设计与制作教程2.pptVIP

图２ －１２　插入导航图片 返回 图２ －１３　表格布局效果 返回 YCF 正版可修改PPT （中职）网页设计与制作教程2 项目活动二　健康美丽网站设计:Dreamweaver CS６入门 任务一　创建本地站点及文件操作 任务二　页面布局 任务三　页面属性及网页文件头设置 返回 任务一　创建本地站点及文件操作　 一、站点目录结构及本地站点的创建 创建网站的第一步是确定本地站点的目录结构, 并准备好相应的素材文件, 然后在Ｄｒｅａｍｗｅａｖｅｒ 中定义站点并创建网页, 下面将介绍健康美丽网站的目录结构及创建本地站点的方法. １) 打开“我的电脑”, 任意选择一个本地磁盘, 如Ｄ 盘, 在Ｄ 盘中新建文件夹, 并将其命名为“ｂｅａｕｔｉｆｕｌｈｅａｌｔｈ”. 打开新建的“ｂｅａｕｔｉｆｕｌｈｅａｌｔｈ” 文件夹, 在里面分别新建“ｐｉｃ” “ｃｓｓ” 和“ｆｌａｓｈ” 文件夹(这是制作网站的常用操作, 便于分门别类地管理站点文件及文件夹, 其中“ｐｉｃ” 文件夹用于存放网页中用到的图像文件, “ｃｓｓ” 文件夹用于存放网页的样式文件, “ｆｌａｓｈ” 文件夹用于存放Ｆｌａｓｈ 动画). 下一页 返回 任务一　创建本地站点及文件操作　 ２) 启动Ｄｒｅａｍｗｅａｖｅｒ ＣＳ６, 在菜单栏中单击“站点”, 选择“新建站点” 命令, 弹出如图２ －１ 所示的“站点设置对象” 对话框. ３) 在“站点名称” 文本框中填写站点名称“ｂｅａｕｔｉｆｕｌｈｅａｌｔｈ”, 这里的名称可以是中文名称. ４) 单击“本地站点文件夹” 文本框右侧的文件夹图标, 弹出“选择根文件夹” 对话框, 如图２ － ２ 所示. 选择Ｄ 盘中新建的文件夹“ｂｅａｕｔｉｆｕｌｈｅａｌｔｈ”, 单击“打开” 按钮,再继续单击“选择” 按钮, 选择本地根文件夹, 效果如图２ －３ 所示. ５) 单击“站点设置对象” 对话框左侧的“高级设置” 选项, 选择“本地信息”, 单击“默认图像文件夹” 文本框右侧的文件夹图标, 选择Ｄ 盘中新建的“ｂｅａｕｔｉｆｕｌｈｅａｌｔｈ”文件夹下的“ｐｉｃ” 文件夹, 单击“选择” 按钮, 选择默认图像文件夹, 如图２ －４ 所示. 上一页 下一页 返回 任务一　创建本地站点及文件操作　 ６) 单击“保存” 按钮, 即完成站点的创建, 此时在Ｄｒｅａｍｗｅａｖｅｒ 主窗口的右侧会显示“文件” 面板, 如图２ －５ 所示. 二、新建网页 １) 打开“文件” 面板, 单击“文件” 面板上的 按钮, 选择“文件” → “新建文件” 命令, 如图２ －６ 所示, 即可新建一个空白的网页文件. 此时新建文件的名称处于可编辑状态, 默认为ｕｎｔｉｔｌｅｄ.ｈｔｍｌ, 一般需要将第一个文件作为主页并重新命名为ｉｎｄｅｘ.ｈｔｍｌ, 如图２ －７ 所示. ２) 双击ｉｎｄｅｘ.ｈｔｍｌ 文件, 进入此文件的网页编辑状态, 可以编辑网页效果. 上一页 返回 任务二　页面布局　 一、常见网页布局结构 １.“Ｔ” 型布局 所谓“Ｔ” 型布局就是指页面顶部为横条网站标志和广告条, 下方左面为主菜单, 右面显示内容的布局. 因为菜单背景颜色较深, 整体效果类似英文字母“Ｔ”, 所以称之为“Ｔ” 型布局. 这是网页设计中用得最广泛的一种布局方式. 这种布局的优点是页面结构清晰、主次分明, 是初学者最容易上手的布局方法. 缺点是形式太过规矩呆板, 如果细节色彩上不注意, 很容易让人产生审美疲劳. ２.“口” 型布局 这是一个象形的说法. 一般页面上下各有一个广告条, 左面是主菜单, 右面是友情链接等, 中间是主要内容, 整体效果类似于“口” 字, 所以称之为“口” 型布局. 这种布局的优点是充分利用版面, 信息量大. 下一页 返回 任务二　页面布局　 缺点是页面拥挤, 不够灵活. 也有将四边空出, 只用中间的窗口型设计. ３.“三” 型布局 这种布局多用于国外站点, 国内使用的不多. 特点是页面上横向两条色块, 将页面整体分割为四部分, 色块中大多放广告条. ４.对称对比布局 顾名思义, 采取左右或者上下对称的布局, 一半深色, 一半浅色, 一般用于设计型站点. 优点是视觉冲击力强, 缺点是实现左右或上下两部分的有机结合比较困难. ５.ＰＯＰ 布局 ＰＯＰ 引自广告术语, 就是指页面布局像一张宣传海报, 以一张精美图片作为页面的设计中心, 常见于时尚类站点. 优点显而易见是漂亮且引人注目, 缺点是速度慢, 但作为版面布局还是值得借鉴的. 上一页 下一页 返回 任务二　页面布局　 二、健康美丽网站页面布局制作 制作网页之前要对网页的风格、网页的布局、内容的呈现进行构思与设计, 确定网页的布局. 其中标题部分显示健康美丽网站的名称, 一般用较大的字体或图片制