下载文档原格式
网站主页结构图网站具体页面及栏目设置通过以上探讨对网站形成了一个全面的栏目及相应内容设置，具体页面设置如下：根据网站性质以及网站运行以来经验总结，结合当前网站信息采集情况以及部门间共同研讨制定，网站栏目列为：首页、交易中心、中心公告、价格、统计、图表、分析、融资物流、产业资讯、行业论坛、会员服务十二个板块。
网站首页分外头部、内容部、尾部三大项。
头部头部内容为网站的常规设置，包括：第一排：设为首页、加入收藏、关于我们（介绍网站、学会的相关信息）、网站地图（网站主要栏目结构图，以最简单的方式显示网站的主要内容）、联系我们（学会与网站的联系方式）、展会信息（学会举办的会议等活动信息）等链接。
第二排是学会Logo标志，学会标志后面可以划分两个广告栏，平时隐藏，学会有重要活动时可以在此显示，吸引客户注意。
第三排是网站栏目导航栏，分为首页、交易中心、中心公告、价格、统计、图表、分析、融资物流、产业资讯、行业论坛、会员服务十二个板块。
导航栏下面是搜索栏，客户在此可以通过填入关键词搜索相关内容的信息。
内容部内容部按照实际情况作如下划分：图文新闻：发布重要新闻的图片信息，客户可以通过点击图片页面进入相关内容页。
新闻热点：发布国内外每天发生的重要事件，内容为政治、社会、自然灾害等最新重大新闻。
财经资讯：发布每天最新的国内外重要财经类资讯，内容可以调用综合资讯版块中的财经信息。
会员登录框：已注册的会员可以从此登录网站会员中心，按照会员等级查看网站内容。
未注册的会员可以从此点击注册，进入注册页面填写注册信息，注册网站会员。
交易平台下载：客户可以通过点击平台下载图片，下载交易平台客户端。
交易实时行情图、产品日行情图、K线图、现货行情图：以上图示是交易结算提出的现货及中远期行情相关图示。
产业资讯：财经资讯、国内资讯、国际资讯、进出口资讯、企业动态、节能减排、政策资讯。
融资物流：包含相应服务条款及物流运输等相关信息。
展会信息：及时展现本学会、国家或其他地区举行的焦化、钢铁类展会信息以及会议成果。
定位页面元素的几种方法
定位页面元素有多种方法，常见的包括使用标签名、类名、ID、XPath、CSS选择器和链接文本等。
下面我会逐一介绍这些方法。
1. 标签名定位，可以通过元素的标签名来定位元素，例如通过
`<div>`、`<input>`等标签名来定位页面元素。
2. 类名定位，HTML元素可以通过class属性进行分类，通过class名来定位元素，例如通过`.class_name`来定位元素。
3. ID定位，ID是页面元素的唯一标识符，可以通过
`#id_name`来定位元素，ID定位是最快速和最准确的定位方式。
4. XPath定位，XPath是一种在XML文档中定位节点的语言，
可以通过元素的层级关系、属性等来定位元素，XPath定位比较灵活，但是语法相对复杂。
5. CSS选择器定位，通过CSS选择器语法来定位元素，可以通
过元素的属性、层级关系等来定位元素，CSS选择器定位也是一种
常用的定位方式。
6. 链接文本定位，可以通过链接的文本内容来定位元素，特别适用于定位链接。
除了上述方法，还有一些其他的定位方法，如基于元素的相对位置、基于元素的属性等。
在实际应用中，根据页面的具体情况和定位的需求，可以灵活运用这些方法来定位页面元素。
综上所述，定位页面元素的方法有多种多样，可以根据实际情况选择最合适的方法来进行定位。
第6章浮动与定位《HTML5+CSS3网站设计基础教程》学习目地/Target理解元素地浮动,能够为元素设置浮动样式。
熟悉清除浮动地方法,可以使用不同方法清除浮动。
掌握元素地定位,能够为元素设置常见地定位模式。
章节概述/Summary默认情况下,网页地元素会按照从上到下或从左到右地顺序一一罗列,如果按照这种默认地方式进行排版,网页将会单调,混乱。
为了使网页地排版更加丰富,合理,在CSS可以对元素设置浮动与定位样式。
本章将对元素地浮动与定位进行详细讲解。
目录/Contents01元素地浮动02元素地定位03元素地类型与转换04阶段案例—制作网页焦点图01元素地浮动初学者在设计一个页面时,通常会按照默认地排版方式,将页面地元素从上到下一一罗列。
这样地布局看起来呆板,不美观,那么,如何对页面重新排版,使页面变得整齐,有序呢？这就需要为元素设置浮动。
本节将对元素地浮动进行详细讲解。
掌握元素地浮动属性float地用法,能够设置元素地浮动。
学习目地1.元素地浮动属性float1.元素地浮动属性float究竟是什么是浮动？应用排列图文排列论坛分享说到浮动,其实大家并不陌生1.元素地浮动属性float浮动属性作为CSS地重要属性,在网页布局至关重要。
在CSS,通过float属性来定义浮动,所谓元素地浮动是指设置了浮动属性地元素会脱离标准文档流地控制,移动到其父元素指定位置地过程。
选择器{float:属性值;}属性值描述left元素向左浮动right元素向右浮动none元素不浮动（默认值）掌握清除浮动地方法,能够为元素清除浮动。
学习目地2.清除浮动2.清除浮动2.清除浮动由于浮动元素不再占用原文档流地位置,所以会对页面其它元素地排版产生影响,如果要避免这种影响,就需要对元素清除浮动。
2.清除浮动在CSS,使用clear属性清除浮动。
选择器{clear:属性值;}属性值描述left不允许左侧有浮动元素（清除左侧浮动地影响）right不允许右侧有浮动元素（清除右侧浮动地影响）both同时清除左右两侧浮动地影响2.清除浮动运用clear属性只能清除元素左右两侧浮动地影响。
《网页设计与制作(HTML+CSS)》教学设计(教案)课程名称：网页设计与制作(HTML+CSS) 授课年级：XX年级授课学期：XX学年第一学期教师姓名：某某老师XX年XX月XX日课题名称第7章浮动与定位计划学时6 课时内容分析默认情况下，网页中的元素会在浏览器窗口中从上到下或从左到右一一罗列。
如果仅仅按照这种默认的方式进行排版，网页将会单调、混乱。
为了使网页的排版更加丰富、合理，在CSS中可以对元素设置浮动和定位样式。
本课程将对元素的浮动和定位进行详细讲解。
教学目标及基本要求要求学生初学者能够熟练地运用浮动和定位进行网页布局，掌握清除浮动的几种常用方法，为后面学习网页布局打下良好的基础。
重点及措施教学重点：清除浮动的几种方法、overflow属性、相对定位和绝对定位的应用。
难点及措施教学难点：当浮动元素对周围其他元素产生影响时，如何选择恰当的方法清除浮动。
教学方式教学采用教师课堂讲授为主，使用教学PPT讲解教学过程第一课时（认识浮动、元素的浮动属性float）认识浮动初学者在设计一个页面时，通常会按照默认的排版方式，将页面中的元素从上到下一一罗列，如下图所示。
通过这样的布局制作出来的页面看起来呆板、不美观，然而大家在浏览网页时，会发现页面中的元素通常会按照左、中、右的结构进行排版，如下图所示。
通过这样的布局，页面会变得整齐、有节奏。
想要实现第二张图所示的效果，就需要为元素设置浮动。
所谓元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制，移动到其父元素中指定位置的过程。
元素的浮动属性float定义浮动在CSS中，通过float属性来定义浮动，其基本语法格式如下：选择器{float:属性值;}在上面的语法中，常用的float属性值有三个，分别表示不同的含义，具体如下：●left：元素向左浮动●right:元素向右浮动●none:元素不浮动（默认值）✧不设置浮动当对页面中的所有元素均不应用float属性，也就是说元素的float属性值都为其默认值none。
