电子商务网页设计与作精致版.ppt

4．IFrame 框架（浮动框架） ①打开Dreamweaver 程序，新建HTML 网页并保存为“wy3-17.html”，输入文本并适当设置属性 ② 将光标定位于文件末尾， 执行“ 插入” 菜单下的“HTML” —“ 框架” —“IFrame”命令，或执行“插入”面板中的“IFRAME”命令，即可插入一个“IFRAME”框架 ③此时可用代码编写“IFRAME”属性，也可用“标签检查器”设置属性 ④设置完成后，用CSS 规则将其“居中对齐” ⑤新建链接 网页模板的创建、编辑与应用 1. 网页模板的创建 （1）创建网页模板 ①“新建文档”—“空白页”—“HTML 模板” ②在“资源”面板中创建模板 ③从现有文档中创建模板 2. 网页模板编辑与应用 （1）利用模板创建网页的操作步骤 “新建文档”—选“模板中的页”—“创建”—“模板”创建的页面 注意：只能在“可编辑区域”进行编辑，不能在“锁定”区域编辑，将网页内容稍作修改 库项目的创建、编辑与应用 1. 创建库项目 表单网页概述 表单是实现网页浏览者与服务器之间信息交互的一种页面元素，它被广泛用于各种信息的搜集和反馈。 表单在网页中主要用于填写用户信息，表单网页内部包括许多表单对象，所有这些表单对象的组合，称之为表单。 表单网页制作步骤 1. 新建表单 2. 插入表单域 3. 在表单域中插入定位表格 4. 插入单行文本域 5. 插入单选按钮 6. 插入单选按钮组 7. 插入列表和菜单 8. 插入复选框组 9. 插入多行文本区域 10. 插入表单按钮 11. 插入图像域 插入表单验证元素 2. 编辑XHTML 文档 打开DW, 新建HTML 文档，在“拆分视图”下，选择“插入”—“布局对象”—“DIV 标签”，在弹出的“插入DIV 标签”。 下拉及多级弹出式菜单 1.网页新建完成后，点击插入—Spry—Spry 菜单栏—在打开的Spry 菜单栏中选择水平—点击确定后插入， 2.修改菜单栏整体样式 表单设计 1. 改变输入框及文本域的样式 2. 改变单选或多选菜单样式 文字排版 图片基础控制 1.新建网页并保存为logo.html，在页面中插入一个h3 标题标签，并在h3标签内插入一个a 超链接标签 2.为h3 标签新建ID 为Logo 的样式，并设置背景图片，不重复，x、y 定位为0 ；然后根据图片的宽度和高度设置Logo 样式的width 和height 3.设置文本“hello world”为隐藏 表格样式控制 （1）Width 表格的宽度 （2）Border-collapse 表格的边框是否被合并为一个单一的边框 （3）Height 表格的高度 （4）Text-align 和Vertical-align 表格中文本对齐方式 （5）Padding 控制表格中内容与边框的距离 （6）Margin 表格外边框的属性 （7）border 或Color和Background-color 表格颜色 id 与 class 1.CSS 选择器概述 CSS 规则由两个主要的部分构成： 一是选择器， 二是一条或多条声明。 选择器通常是需要改变样式的HTML 元素，而每条声明由一个属性和一个值组成。属性（Property）是希望设置的样式属性（Style attribute）。 2. CSS 选择器的分类 （1）CSS 元素选择器。 （2）选择器分组。 （3）通配符选择器。 （4）类（class）选择器。 （5）ID 选择器。 DIV 与 span DIV 是一个块级元素，可以包含段落，表格等内容，用于放置不同的内容。一般我们在网页通过DIV 来布局定位网页中的每个区块。 CSS 样式缩写 1. 颜色 16 进制的色彩值，如果每两位的值相同，可以缩写一半，例如：#000000 可以缩写为#000 ；#336699 可以缩写为#369。 2. 盒尺寸 盒尺寸主要是指元素的margin（外边距）和padding（内边距）属性通常有下面四种书写方法。如下： （1）property:value1，表示所有边都是一个值value1 ；比如“margin ：10px”含义为 该元素的上、下、左、右外边距均为10 像素。 （2）property:value1 value2， 表示top 和bottom 的值是value1,right 和left 的值是 value2。比如，“padding ：10px 20px”含义为该元素的上下内边距为10px，左右内边距为20px。 （3）property:value1 value2 value3， 表示top 的值是value1，right 和left 的值是value2，bottom 的值是value3。 （4）property:value