Dreamweaver制作网页.pptVIP

第一讲 网页 边耐政 湖南大学 软件学院 nbian@hnu.cn 主题 创建HTML页面 创建HTML页面元素 设定HTML的样式(CSS) 目的 利用Dreamweaver来可视化编辑HTML页面，并通过Dreamweaver来设定HTML的样式 1 新建HTML页面 新建页面（1） 1 新建HTML页面 进入页面（1） 1 新建HTML页面 进入页面（2） 2 建立HTML页面元素 建立表格（1） 2 建立HTML页面元素 建立表格（2） 2 建立HTML页面元素 建立表格（3） 2 建立HTML页面元素 建立表格（4） 2 建立HTML页面元素 添加表单对象（1）（插入/表单/文本域） 2 建立HTML页面元素 添加表单对象（2） 3 用CSS设定HTML的样式 创建自己的CSS（1） 3 用CSS设定HTML的样式 创建自己的CSS（2） 3 用CSS设定HTML的样式 创建自己的CSS（3） 3 用CSS设定HTML的样式 应用自己的CSS（1） 3 用CSS设定HTML的样式 应用自己的CSS（2） 3 用CSS设定HTML的样式 引用外部的CSS（3） 3 用CSS设定HTML的样式 引用外部的CSS（4） 4 Dreamweaver浏览网页 5小结 * * 点击HTML 页面图形化显示区域 页面属性编辑区域 快捷工具栏 模式切换按钮 页面显示区域 页面代码区域 单击插入/表格 选择属性 表格是HTML页面最重要的布局元素，其中对表格属性的处理尤为重要，如选择表格宽度时，我们可以选择像素来固定表格的宽度或选择百分比来按比例扩大表格宽度 设定表格的属性 自动生成的表格 对应表格的属性对话框 自动生成的代码 设定表格的属性 指定表格的背景颜色 自动生成的代码 指定表格的对齐方式 指定表格边框的属性 表格的代码结构非常重要，自动生成固然很好，但是弄清每段代码更为重要 编辑表格单元的属性 指定表格每行单元的背景颜色 设定表格对象为居中对齐 指定表单对象的属性 选择类型 设定相关对象的属性 添加文本域 添加单选按钮 添加按钮 添加密密码域 打开右边的快捷工具栏，点开CSS可以看到类似的目录结构 设定颜色为纯蓝 现有CSS列表，我这里新建了一个.STYLE2的样式表 .STYLE2下面的详细信息 设定字体大小为18个像素 CSS是设定页面样式的最好方式，这里只是介绍通过DW来创建自己的CSS样式，CSS的属性很多，这里只是简单的介绍一下 .STYLE2样式表定义区间 在你的HTML文件上部，会自动生成CSS样式表的相关代码， 当然如果你对CSS样式表的属性非常了解，你也可以自己手创作 属性定义区 选定要运用CSS样式的单元格(其它对象也可以) 在改单元格的属性对话栏上点击样式，找到你想用的样式名称即可 手工输入也可以自动调用自己已有的样式表 运用.STYLE2的效果 运用.STYLE3的效果 去掉原有的样式表引用外部样式表 Index.css样式表的内容 这里添加了一个新的CSS属性，即页面的背景图片 新的样式表里的样式和原有的样式一样 在样式表中所添加的背景 引用外部的CSS样式表非常重要，在开发时，页面设计者不必顾虑太多页面的样式，通过引用外部的样式表，我们可以简化开发流程，并能够使网站的风格能够保持一致。 单击此按钮，选择此浏览器 最后在浏览器中看到的画面 HTML中的表格和CSS是界面开发时最核心的东西，我们可以通过Dreamweaver轻松管理，大多数网站都可以通过table布局，通过调用外部的CSS来管理自己网站的风格，但是我们必须熟悉其中的基本元素，如table里的表格对象trtd和CSS里面的各种属性元素的含义等。我们只有熟悉了其基本的元素和属性，才能更加轻松灵活的开发我们的网站 *