第四章网页设计基础.ppt

第四章 网页设计基础 4.1 目标——个人网站 4.1.1 目标网站的内容 4.1.2 目标网站的结构 站点结构布局工具——站点地图 如何创建站点地图？ 建立站点 设置新站点 新站点 建立新文件：一般是网页文档 新建一个标题为“主页”的网页 主页文档index.html 双击站点下拉菜单中的站点设置站点地图布局 设置完站点地图可选择“地图视图” 显示地图视图 右键单击主页图标 选“链接到新文件”进行设置 建立同层网页 建立第二层网页 命名 建立第三层网页 展开地图视图 保存站点地图 命名站点地图 保存站点地图图片 4.2 网页设计的基本要求 4.2.1 页面版面布局 4.2.2 网页的色彩、文字和表格应用 1. 网页的色彩 色彩搭配的技巧 用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，(说得通俗些就是将色彩变淡或则加深)，产生新的色彩，用于网页。这样的页面看起来色彩统一，有层次感。 用两种色彩。先选定一种色彩，然后选择它的对比色。如黄色和蓝色。整个页面色彩丰富但不花稍。 用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。 用黑色和一种彩色。比如大红的字体配黑色的边框感觉很跳。 2. 网页的文字 基本原则：默认字体：中文宋体，英文Times New Roman 字体≤3种 不用太大的字 不用闪烁不停的字 标题字体比正文稍大，颜色有区别 3.网页中的表格 布置网页版面 4.3网页布局 4.3.1使用布局视图 可用表格法，也可用布局视图 注意：先画布局表格，再画布局单元格 选择插入栏的布局进入布局视图 布局模式 绘制布局表格和布局单元格 布局效果 4.3.2使用框架 见P71-72 建立方法: 文件→新建→类别→框架集→上方固定,左侧嵌套→点击创建按钮完成 4.4 文本编辑 4.4.1 输入文字 4.4.2 编辑文本 4.5 设置超级链接 4.5.1文字链接 定义本页内的链接: 锚记 定义空的链接: 链接栏输入”#” target 属性: 用于指定所链接的文档出现在当前窗口或框架以外的其他位置 _blank 在一个未命名的新浏览器窗口中载入所链接的文档 _parent 在该链接所在框架的父框架或父窗口中载入所链接的文档 _self 在链接所在的同一框架或窗口中载入所链接的文档 _top 在整个浏览器窗口中载入所链接的文档,会删除所有的框架 4.5.2图像链接 操作与文字链接相类似 先选中图像,然后在链接栏输入链接地址 文字与图像链接实质上就是编码: a href=“url信息”超链接文本及图像/a 4.5.3电子邮件链接 电子邮件链接是一种特殊的链接,它的链接目标不是一个网页地址,而是一个电子邮件地址.当在浏览器中点击电子邮件链接后,会打开浏览器默认的收发电子邮件程序,如outlook,而且收件人的地址已经自动填上电子邮件链接中指定的地址 链接格式: mailto: 目标邮件地址,如:mailto: dianda@21 4.6编辑图像 4.6.1在网页中插入图像 4.6.2 创建图像地图 图像地图是指包含有多个”热点”区域的图像,当用户单击某个热点时,会产生某种操作,如打开一个文件等.分客户端图像地图和服务器端图像地图. 图像地图代码 map name=Map id=Map area shape=poly coords=181,71,138,126,136,262,221,259,232,266,239,257,226,115 href=person3.htm target=_blank alt=个人简介 / /mapnbsp;/p 注:一个网页中有多个图像地图时必须有不同的图像地图名称 4.7使用表格 4.7.1插入表格 4.7.2改变表格的外观和结构 增加行 增加列 删除行 删除列 合并单元格 拆分单元格 4.7.3改变单元格的属性 4.8使用层对象 4.8.1层的作用及属性 4.8.2 使用层对象 4.9设置网页属性 标题 背景图像 文本 访问过的链接 链接 活动链接 左边界 顶部边界 边界高度 边界宽度 文档编码 跟踪图像 图像透明度 文件文件夹 站点文件夹 小结 在Dreamweaver MX中进行页面设计的基本方法 选中文字 选择链接文件 变为默认的蓝色加下划线 选择图像按钮 点击上面的图像选项后出现 选择好要插入的图像 可以预览