网页设计基础.ppt

第4章网页设计基础 一 网页基本操作二 表格应用三 层对象的使用四 框架的使用五 表单操作 一 网页基本操作 基本文件 文本操作图片操作链接操作网页文件头设置 基本文件 文本操作 文件的创建和保存操作如何在Dreamweaver中编辑文本网页标题 背景颜色和背景图片的设置 实例 我的主页 实例要求 完成以下网页效果 操作步骤 新建网页文件运行DreamweaverMX 系统将打开一个DreamweaverMX的网页编辑窗口 可以执行文件 新建命令 新建一个网页 输入文本内容新建好网页以后 就可以输入网页内容了 设定文本格式选定 我的主页 四个字 然后再属性面板中将格式设为标题1 即采用最大号的标题样式 对齐文本标题文本放在中间的位置 单击属性面板中的按钮 将标题文字的对齐方式设置为居中对齐 编辑字体列表当设置字体时 单击字体选框 就可以在列出的字体中选择了 但列表中没有所需字体 可以选择编辑字体列表 把自己机器上拥有的字体加进列表中 设置标题字体添加字体列表后 就可以选用设置好的字体来修饰标题 设置标题颜色单击属性面板上的颜色按钮 选择所需要的颜色 调整文字布局对说明性文字进行修饰 在第一句文本的后面加入一个回车 将文本调整为两行 设置说明行文字格式选定文字后 我们可以在属性面板上单击按钮 将其设置为斜体 颜色设置为蓝色 借用文本菜单样式选项 选择下划线 为文字加上下划线效果 设置网页属性在修改菜单中选择页面属性 也可以在网页的空白处单击鼠标右键 在弹出的快捷菜单中作同样的选择 设置网页标题当弹出网页属性对话框 可以在这里对网页的一些基本属性进行设置 首先设置网页标题 即将在网络浏览器的标题栏中显示出来的标题部分 在标题栏中输入 我的主页 四个字 选取网页背景颜色在背景栏可以直接输入颜色代码 也可以单击颜色按钮 在弹出的颜色列表中选择 背景图片的设置在背景图像栏中 可以直接输入背景图片的路径和名称 也可以单击 浏览 按钮 弹出选择图象源对话框中喜欢的背景图片文件 然后单击确定即可 保存文件打开文件菜单 单击保存选项 图片操作 如何向网页中加入图片图片属性的修改方法静态图片和动态图片的特点 实例2缤纷色彩 输入文本信息打开DreamweaverMX 先在网页编辑窗口中输入几段文字 插入图片文件插入深田恭子照片 从插入菜单中的图象选项调用此项功能 也可以直接单击插入面板上的图象按钮插入图片 此时DreamweaverMX将弹出选择图象源对话框 供选择图片文件 调整图片大小选中图片 图片四周将会出现拖动手柄 将鼠标放在手柄上时 鼠标指针将会变为双向尖头 此时可以拖动这些手柄来改变图片的大小了 设置图片对齐方式在属性面板上对齐选项中选择图片对齐方式为右对齐 使图片在网页的右半部分显示 移动图片用鼠标左键拽着图片拖动 移动到适当的位置后 放开鼠标左键即可把图片移动到适当的位置 设置图片信息在属性面板的替代栏中输入 深田恭子 四个字 设置后 用户使用网络浏览器浏览网页时 当图片未被完全加载或用户的鼠标停留在图片上时 这四个字将会显示出来 作为对图片包含信息的提示 设置图片边框在属性面板边框栏中输入 敲一下回车键 图片上就出现了一个浅浅的边框 插入另一幅图片在网页顶部插入一副装饰性的图片 选中图片 用鼠标拖动图片四周的拖动手柄 将图片的宽度调整到整个网页宽度 加入动态图片插