使用HTML创建静态页面.pptVIP

网页编程 本章目标 会创建统一外观的字体文本 会创建无下划线的超连接样式 会创建个性化的表格 会创建个性化的表单 HTML标签的外观样式比较单一 颜色只有黑白 字体类型和大小无变化 样式表的作用相当于华丽的衣服 样式表能实现内容与样式的分离，方便团队开发 样式表的基本结构 如果希望其他的标签也能采用P标签的样式，怎么办？ 文本属性 背景属性 方框属性 要实现下图细边框的效果，该如何编写样式规则？ 特殊样式（超连接） a:link {color: #FF0000} /* 未被访问的链接 红色 */ a:visited {color: #00FF00} /* 已被访问过的链接 绿色 */ a:hover {color: #FFCC00} /* 鼠标悬浮在上的链接 橙色 */ a:active {color: #0000FF} /* 鼠标点中激活链接 蓝色 */ 内嵌样式表 内嵌样式表使用格式如下： 行内（嵌入）样式表 外部样式表文件 根据样式文件与网页的关联方式又分为： 链接（LINK ）外部样式表 导入（@import）外部样式表 使用LINK（链接）标签 : HEAD LINK href=newsyle.css rel=stylesheet type=text/css /HEAD 使用@import导入 ，语法： HEAD STYLE TYPE=text/css @ import newstyle.css; /STYLE /HEAD 本课目标 能使用网站设计流程分析简单网站的设计 能使用DIV层技术进行页面整体布局 能使用表格进行图文内容的布局 网站开发的4个步骤： 1、需求分析 2、网站制作 3、测试网页 4、发布网站 客户需求 业务背景 淘宝网提供了一个商品展示、在线购物、交互服务和管理的平台 设计风格 淘宝网具有鲜明、亮丽、明快、时尚的风格 网站内容 公司简介 、商品分类 、商品展示 、价格信息 、商品搜索 、网上订单 、会员注册 、客户服务等 确认需求 提供给客户一个前期静态的设计样板(可用photoshop制作) 使用Dreamweaver创建站点的步骤如下： 1、选择“新建站点”，然后为其命名 2、选择“是否”使用服务器技术 3、选择“编辑我的计算机上的本地副本…”选项 4、选择用于存储网站文件的文件夹 5、选择连接到远程服务器的选项 6、在“文件”面板中创建名为images文件夹 框架布局的优缺点和应用场合 表格布局的优缺点和应用场合 DIV元素是用来为HTML文档内大块的内容提供结构和背景的元素。 DIV布局的优缺点和应用场合 网站开发的流程介绍 客户需求 确认需求 业务背景 设计风格 网站内容 提供样板 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile . Copyright 2004-2011 Aspose Pty Ltd. 网站开发的流程介绍 保证让Internet Explorer和Mozilla Firefox浏览器能比较 好地展示你的作品 制作好的网站，经测试之后，就可以在服务器上发布，这 样，能让更多的人知道您的网站 创建站点 制作首页 制作模板 制作样式 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile . Copyright 2004-2011 Aspose Pty Ltd. 需求分析 大家想想淘宝网的业务背景 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile . Copyright 2004-2011 Aspose Pty Ltd. 创建站点 演示示例2：在 Dreamweaver 8中创建站点 用于存储网站文件的本地根目录 相关文件和文件夹的集合 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile . Copyright 2004-2011 Aspose Pty Ltd. 页面内容 导航部分 广告部分 商品分类部分 版权声明部分 如何实现这样的页面布局？ Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile . Copyright 2004-2011 Aspose Pty Ltd. 页面布局之框架布局 使用框架布局 如何实现这样的页面布局？ Evalu