DIVCSS视频教程DIVCSS开发实例-实战DIVCSS网站首页制作.pptVIP

阶段项目：实战DIV+CSS网站首页制作 目录 1、首页结构分析 2、搭页面结构(5步) 3、CSS样式设计 4、CSS定位扩展页面 5、CSS Hack 【第一步】 首先我们需要对页面进行分块，由几大块组成，从效果图上不难看出，由四大块组成“头部版块、广告版块、内容版块、页底版块”，分别给他们起个名字如下： 头部版块：header 广告版块：banner 内容版块：content 页底版块：footer HTML代码： div id=header/div div id=banner/div div id=content/div div id=footer/div 【第二步】 头部版块有两部分组成，左侧的logo和右侧的寻航条 1）网站logo一般是张图片，而且是可以点击癿，点击后回到首页，所以logo部分的结构为： div id=logo a href= img src=images/logo.png / /a /div 2）导航我们肯定要用标签ul和li，而li里面内容又是链接，在加上真实的链接信息后，导航条部分的结构如下： ul id=“nav” lia href=首 页/a/li lia href=/course.aspx培训课程/a/li lia href=/students.aspx优秀学员/a/li lia href=/faq.aspx课程疑问/a/li lia href=/career.aspx职业生涯/a/li lia href=/学员社区/a/li lia href=/官斱博客/a/li lia href=/address.aspx学院地址/a/li /ul 【第三步】 Banner部分在设计中是一个图片放在此处就可以，因为广告也是可以点击的，所以就需要在图片外面加上链接，代码如下： div id=banner a href=img src=images/banner.jpg //a /div 【第四步】 内容content版块呢，是有左右两部分组成,左边叫“leftArticle”，右边叫“rightInfo” 代码如下： div id=content div id=leftArticle/div div id=rightInfo/div /div 1）左侧的文章版块，分“文章图片，文章标题和文章内容”三部分 文章图片：仍功能上来说文章顶部图片应该是可以点击的，点击后进入文章详情，所以图片外面还是要被链接a包围的； a href=/?p=5 img src=images/articleBanner.jpg / /a 文章标题：文章标题就是文章内容的总结，对有哪些信誉好的足球投注网站引擎来说文章标题的权重要比内容要高，怎么才能让有哪些信誉好的足球投注网站引擎知道返里是标题呢，当然是用标题标签h1~h6标签了，这里我们选用h1，还有一点不要忘记标题也是可以点击的，所以也要用a进行包围， h1 a href=/?p=5Web前端开収工程师好找工作吗？/a /h1 文章内容:既然是内容，肯定就少不了段落标签p了，有几段文字就用几个“p/p”,这样文章部分的结构，就逐渐清晰明朗 p据09年全国Web前端开发行业调查统计显示，09年大型企业对于Web前端开发人才需求紧缺。 Web前端开发目前是一种新兴职业，专业的前端开发人员绝大部分存在于大型企业中，如腾讯、百度等，换种说法就是：选择从事Web前端开发就等于你的一只脚已经迈进了腾讯、百度等高薪企业。/p p随着Web2.0的大潮席卷而来，2010年互联网发展速度空前，互联网向标准化、专业化、精细化方向发展，导致Web开发职位进一步细分，Web前端开发工程师、Web页面重构师等这些高薪职业相继诞生。如今流行的浏览器有十几种，不同的浏览器对页面的解析不同，导致相同的页面在不同的浏览器内显示效果不同，不能兼容多种浏览器，用户体验降低，有哪些信誉好的足球投注网站引擎抓取率低，加载速度慢等影响页面整体质量的因素产生，所以对页面制作要求越来越高，致使许多公司急需提供制作标准页面服务的技术人员。/p p现在YAHOO、MSN等国际门户网站，网易、新浪等国内门户网站，和主流的Web2.0网站，均采用xHTML(DIV)＋CSS的框架模式，更加印证了xHTML(DIV)＋CSS是大势所趋。/p p正因为如此Web前端开发人员成为市场上紧缺的人才，同时也成为一个新兴的高薪职业。/p 目前代码结构为： div id=content div id=leftArticle a id=articlePicA href=/?p=5img src=images/articleBanner.jpg / /a h1a href=/