电子商务网页设计与制作（第二版）课件：设置DIV+CSS布局.ppt

项目任务分析—任务一DIV网页整体布局4.调整DIV的大小由于浮动DIV块的原因，在块内部内容填充过程中经常会发现块之间相互交叉，使内容显示错乱，上述任务中就出现了这样的现象，在填充SideBar块内容时出现了占据整个页面宽度的现象，可以通过width的方法来解决。从这里还得到了一个启示：采用DIV布局时，如果块的大小不确定并存在着浮动的块，那么需要对这些块进行内容填充和检测，调整块的显示大小，从而达到理想的布局效果。5.清除Float清除（clear）是浮动（float）的相关属性。在浮动元素与非浮动元素之间应该声明上面的浮动作用结束，这就需要用到clear，一个设置了清除Float的元素不会如浮动所设置的一样，向上移动到Float元素的边界，而是会忽视浮动向下移动。自学与拓展—任务一DIV网页整体布局1.网站设计与制作的三个阶段第一阶段，网站规划。主要包含确定网站主题、搜集网站材料和规划网站架构。第二阶段，网站制作。主要包含网站制作过程、测试评估以及将网站正式上传。第三阶段，后期维护。主要包含网站的推广和营销，以及对网站的维护和内容的更新。2.贸易公司网站的分析对“浙江物产国际贸易有限公司”的网站进行分析，网址为“http://***”，主页效果如图1-X所示。同时分别指出所用的网页基本元素。自学与拓展—任务一DIV网页整体布局利用空DIV和float属性来完成文字能够沿着图片的不规则边缘进行环绕的效果。前面利用浮动实现了块的布局，现在假设主内容中存在着不规则图片，而又希望文字卡可以围绕在图片周围，怎么实现这个效果呢？在印刷业中，有一种特殊的文字环绕排版方式，即文字能够沿着图片的不规则边缘进行环绕，使得设计的网页更加美观，常用的文字图片混搭的排版法被延伸到了Web视觉设计中，面对方形的DIV和IMG标签和无法识别图片边缘的浏览器，应该如何来完成呢？思考下，如果希望产生不规则的文字环绕效果，那么单独插入图片在段落中是不可行的。那么逆向思维下，这里是不是可以把图片设置为背景，来确保文字和图片不会相互影响？沿着这条思路，巧妙的利用了空DIV和float属性来完成这个效果。项目任务引导—任务二DIV+CSS页面美化本任务目标是在任务一的基础上采用CSS（CascadingStyleSheet，层叠样式表）完成对浙江内利信息技术公司电子商务网站首页的页面美化。在DIV网页布局中，页面制作采用CSS可以高效精确的控制页面的布局、字体、颜色、超链接样式等网页效果，同时能够大大简化网页的格式代码，可以取代原HTML布局中内部结构混乱，大量为控制页面元素位置而设置的各种嵌套表格。项目任务实施—任务二DIV+CSS页面美化本任务目标是在任务一的基础上采用CSS（CascadingStyleSheet，层叠样式表）完成对浙江内利信息技术公司电子商务网站首页的页面美化。在DIV网页布局中，页面制作采用CSS可以高效精确的控制页面的布局、字体、颜色、超链接样式等网页效果，同时能够大大简化网页的格式代码，可以取代原HTML布局中内部结构混乱，大量为控制页面元素位置而设置的各种嵌套表格。项目任务实施—任务二DIV+CSS页面美化1.内部DIV布局根据网站页面规划，header块将分为两个部分，分别存放logo和导航栏，因此又将header块分成logo和navigate两个块。在index.html文件中更新header块的内容，代码如下： divid=header divid=logoLogo/divdivid=navigateNavigator /div /div然后在page.css文件中添加logo和navigate两个样式,设置它们的高度，并用不同的背景颜色区分这两个块，写入代码如下： #header#logo{ background:#FF0033; height:48px; } #header#navigate{ background:#0033FF; height:42px; }项目任务实施—任务二DIV+CSS页面美化同样sidebar块也需要进行细分，将其分成登录块（login）和产品展示块（products）两个块，在index.html文件中更新sidebar块的内容，代码如下： divid=sidebar divid=loginLogin/div divid=productsProducts/div /div然后在page.cs