Шаблон веб-страницы


Я провожу много времени, работая над этим шаблоном, я хотел бы знать, если его в CSS/HTML-это хорошо, а в основном, если это быстро, чтобы загрузить, доступной, семантический и SEO дружественные.

Я его проверял в ИЕ7+, хром, ФФ и сафари, и я доволен выхода в каждом.

Рабочая URL-адрес

/* Main Layout Elements */
body{
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, Verdana;
    background: #EAFDE6 url(../images/background.png) repeat-x;
    color:#444;
}
label{
    cursor: pointer;
}
p {
    margin: 0 0 20px 8px;
    position:relative;
}
.news-wrapper p
{
    margin: 0 0 10px 8px;
}
a{
    color: #1B676B;
}
.time-ago{
    float:right;
    color: #1B676B;
}
.top-bar{
    position:absolute;
    top:0;
    left:0;
    background-color: #519548;
    height: 30px;
    border-bottom:2px solid #3E7236;
    width: 100%;
    z-index:1;
}
h1{
    margin:0;
    margin-bottom:5px;
    font-size:35px;
    color: #519548;
    font-weight:normal;
}
h2{
    margin:0;
    margin-bottom:5px;
    font-size:35px;
    color: #519548;
    font-weight:normal;
}
h3{
    margin:0 0 5px 0;
    font-size:22px;
    color: #519548;
    font-weight:normal;
}
h3 a
{
    color: #519548;
    text-decoration:underline;
}
h3 a:hover
{
    color: #1B676B;
    text-decoration:none;
}
h4{
    text-shadow: black 0.1em 0.1em 0.2em;
    text-transform: uppercase;
    font-size: 17px;
    font-weight: bold;
    margin-bottom: 3px;
    margin-top: 30px;
}
a.ralign{
    text-align:right;
    display: block;
}
.clear{
    clear:both;
}

/* Sprite definitions and positioning */
.s{
    background-image:url(../images/sprites.png);
    background-repeat:no-repeat;
}
.facebook{
    background-position: 0 0;
}
.twitter{
    background-position: 0 -40px;
}
.slideshow-wrapper{
    height:261px;
    overflow:hidden;
    -moz-box-shadow: 0px 0px 5px #555;
    -webkit-box-shadow: 0px 0px 5px #555;
    box-shadow: 0px 0px 5px #555;
}

.youtube{
    background-position: 0 -80px;
}

/* Main Wrappers */
.content-wrapper{
    width:750px;
    margin: 0 auto;
}
.head-wrapper{
    height: 120px;
    padding-left:11px;
}
.footer-wrapper{
    position:relative;
    z-index:1;
    top: -35px;
    height:155px;
    background-image: url(../images/background-footer.png);
    background-repeat:repeat-x;
    margin-bottom: -35px;
    overflow: hidden;
}
.main-wrapper{
    margin: 0 auto;
    width: 792px;
    background-image: url(../images/mainbox-background.png);
    z-index:2;
    position:relative;
    padding: 0 0 0px 0;
}
.main-end{
    width: 786px;
    background-image: url(../images/mainbox-background-bottom.png);
    background-color:transparent;
    height:32px;
    position:relative;
    z-index:2;
    margin: 0 auto;
    padding:0;
}

/* Footer */
.footer-inner-wrapper
{
    color: white;
    font-size: 13px;
    margin: 0 auto;
    width: 700px;
    margin-top:5px;
}
.footer-item{
    float: left;
    width: 33%;
}
.footer-item ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.footer-item p{
    padding: 0;
    margin: 0;
}
.footer-item a{
    font-size:13px;
    color:white;
}
.footer-item a:hover{
    color: #ffaa00;
}
.copyright
{
    color: #9FCAD5;
    text-align:center;
    background-color: #2A525A;
    background-image: url(../images/copyright-background.png);
    font-size: 14px;
    line-height:35px;
    height:35px;
    text-shadow: 0px 1px 1px #2A525A;
}
.social-icon{
    height: 40px;
    width: 32px;
    float: left;
    margin-top: 7px;
    position:relative;
    left: -4px;
    display:block;
}

/* Search */
.search-wrapper{
    background-position: -46px -70px;
    width: 259px;
    height:62px;
    position:absolute;
    right: -50px;
    top: 0;
    text-align:center;
    line-height:50px;   
}
.search-wrapper input{
    height:24px;
    padding-left:15px;
    color: #c0c0c0;
    line-height:24px;
    padding-right:25px;
    border: 0;
    position:absolute;
    top: 15px;
    left:30px;
}
.search-icon{
    height: 37px;
    width: 36px;
    background-position: -40px 0;
    position:absolute;
    left:205px;
    top:13px;
}

/* Menus */
.menu-main{
    height:38px;
    background-color: #88C425;
    font-size: 15px;
    font-weight: bold;
    line-height:38px;
    margin:0;
    padding: 0;
    padding-left: 20px;
}
.menu-wrapper{
    width: 770px;
    padding-left:11px;
    margin-bottom:10px;
}
.menu-main li{
    margin: 0;
    list-style-type: none;
    float:left; 
}
.menu-main a{
    text-shadow: #114400 1px 1px 1px;
    display: block;
    padding-left: 20px;
    padding-right: 20px;
    color:white;
    text-decoration: none;
}
.menu-main a:hover{
    background-color:#3E7236;
}
a.main-item-selected{
    background-color:#519548;
}
.main-item-selected a:hover{
    background-color:#519548 !important;    /* Stupid firefox bug */
}
.mainSelLPan{
    float:left;
    width:11px;
    height:33px;
    background-position: -105px 0;
    margin-left: -11px;
}
.mainSelPos{
    position:relative;
    top: 5px;
}
.mainSelRPan{
    float:left;
    width:11px;
    height:33px;
    background-repeat:no-repeat;
    background-position: -116px 0;
    margin-right: -11px;
}
.mainSelTxt{
    float:left;
    background-color:#519548;
    height:33px;
    line-height:33px;
}
.sub-menu{
    height: 33px;
    background-color: #519548;
    font-size: 13px;
    line-height:33px;
    margin: 0;
    padding: 0;
    padding-left:20px;
}
.sub-menu li{
    margin: 0;
    list-style-type: none;
    float:left;
}
.sub-menu a{
    display: block;
    padding-left: 20px;
    padding-right: 20px;
    color:white;
    text-decoration: none;
}
a.sub-item-selected{
    background-color:#3E7236;
    color: white !important;
}
.sub-menu a:hover{
    background-color:#3E7236;
}
.underSelLPan{
    float:left;
    width:11px;
    height:33px;
    background-position: -78px 0;
    margin-left: -11px;
}
.underSelPos{
    position:relative;
    top: 6px;
}
.underSelRPan{
    float:left;
    width:11px;
    height:23px;
    background-repeat:no-repeat;
    background-position: -91px 0;
    margin-right: -11px;
}
.underSelTxt{
    float:left;
    background-color:#3E7236;
    height:22px;
    line-height:22px;
}

/* Download box link */
.download{
    display: block;
    background-position: -134px 0;
    width: 215px;
    height: 55px;
    margin: 0 auto;
    text-align:right;
    color:white;
    text-transform: uppercase;
    text-decoration: none;
}
.download-title{
    font-weight:bold;
    font-size:17px;
    padding-top:14px;
    padding-right: 15px;
}
.download-size{
    padding-right: 15px;
    font-size:14px;
    margin-top: -3px;
}

/* Other */
.moreInfoLink{
    display:block;
    color:white;
    font-size:12px;
    font-weight:bold;
    text-decoration: none;
    float:right;
    height:17px;
    background-color:#1B676B;
    text-align:center;
    padding:0 12px 0 12px;
    line-height:17px;
    min-width:100px;
    -moz-border-radius: 10px;
    border-radius:  10px;
    position:absolute;
    bottom: 0;
    right: 0;
}
.moreInfoLink:hover{
    text-decoration:underline;
    background-color: #23868B;
}
.column-thin{
    float:left;
    width:270px;
}
.column-wide{
    float:left;
    margin-right:10px;
    width:470px;
}
.news-wrapper{
    position:relative;
    top: -25px;
    margin-bottom:-25px;
}
.column-half{
    float:left;
    width:48%;  
    position:relative;
}
.r{
    float:right;
}
.spotlight{
    float:left;
    margin-right:15px;
    width: 90px;
    height: 90px;
    position:relative;  
}
.spotlight img{
    position:absolute;
}
.slideshow-wrapper img{
    width:470px;
    height: 261px;
    border: 0;
}
.slideshow-wrapper a{
    text-decoration: none;
}
<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Make Games with Scirra Software</title>
    <meta name="description" content="Game making with Construct." />
    <meta name="keywords" content="game maker, game builder, html5, create games, games creator" />
    <link rel="stylesheet" href="css/default.css" /> 
    <link rel="stylesheet" href="plugins/coin-slider/coin-slider-styles.css" />
    <link rel="shortcut icon" href="images/favicon.ico" />
    <link rel="apple-touch-icon" href="images/favicon_apple.png" />
    <script src="js/googleAnalytics.js"></script>
</head>

<body>


<div class="top-bar"></div>
<div class="main-wrapper">
    <header>
        <div class="head-wrapper">      
            <div class="s search-wrapper">
                <input type="text" name="SearchBox" id="SearchBox" tabindex="1" />
                <div class="s search-icon" title="Search Scirra"></div>
            </div>
            <!-- Logo placeholder -->       
        </div>      
        <div class="menu-wrapper">
            <nav>
                <ul class="menu-main">
                    <li><a href="#" class="main-item-selected">Home</a></li>
                    <li><a href="#">Forum</a></li>
                    <li><a href="#">Construct</a></li>
                    <li><a href="#">Arcade</a></li>
                    <li><a href="#">Manual</a></li>
                </ul>
                <ul class="sub-menu">
                    <li><a href="#">Homepage</a></li>   
                    <li><a href="#" class="sub-item-selected">Construct</a></li>
                    <li><a href="#">Products</a></li>
                    <li><a href="#">Community Forum</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <div class="content-wrapper">
        <div class="column-wide">
            <div id="coin-slider" class="slideshow-wrapper">
                <a href="#" title="Features for making your games" target="_blank">
                    <img src="images/screenshot1.jpg" alt="Features to help you make your games" />
                    <span>
                        Packed with hundreds of exciting features
                    </span>
                </a>
                <a href="#" title="Functional and intuitive games editor">
                    <img src="images/screenshot2.jpg" alt="Games editing has never been easier" />
                    <span>
                        Construct's intuitive editor means it's never been easier to create
                    </span>
                </a>    
                <a href="#" title="High performance optimised games">
                    <img src="images/screenshot3.jpg" alt="Screenshot" alt="Optimised for performance" />
                    <span>
                        Squeeze every drop of performance from your platforms
                    </span>
                </a>
                <a href="#" title="Professional and stunning game making">
                    <img src="images/screenshot4.jpg" alt="Make stunning professionally finished games" />
                    <span>
                        Design stunning and professionally finished games
                    </span>
                </a>
            </div>  
            <div class="news-wrapper">
                <h2>Latest from Scirra</h2>
                <section>
                    <h3>New from our <a href="http://twitter.com/Scirra" title="Construct game making on Twitter">Twitter</a> feed</h3> 
                    <p>The news on the block is this.  Something has happened some news or something. <span class="time-ago">About 1 hour ago</span></p>
                    <p>Another thing has happened lets tell the world some news or something. Lots to think about.  Lots to do.<span class="time-ago">About 6 hours ago</span></p>
                </section>
                <section>
                    <h3>Scirra's <a href="#" title="Developement blog">Developer Blog</a></h3>
                    <p>Tom describes why he thinks Adobe Flash is on the out, and HTML5 is going to take over the web.<span class="time-ago">About 1 day ago</span></p>
                </section>
            </div>
        </div>
        <div class="column-thin">
            <h1>Make Games</h1>
            <p>Game making has never been easier with <a href="#" title="Make games with Construct">Construct</a>.  Design unique worlds where only your imagination is the limit.  Want to get more involved?  Visit our <a href="#" title="Plugins for Construct">plugin library</a>, and throw yourself into our active <a href="#" title="Visit the helpful Scirra community">community</a></p>
            <h3>Export in Multiple Formats</h3>
            <p>The <a href="#" title="Alternative to Flash">HTML5 Exporter</a> allows you to export your games to a web page, a truly multi platform solution.  With an <a href="#" "Construct executable exporter">EXE Exporter</a> and <a href="#" title="Construct mobile phone exporter">Mobile Exporters</a> planned you will soon be able to save your games for the mobile and desktop platforms.  <a class="moreInfoLink" href="#" title="Exporting your games">Learn More</a></p>
            <h3>Packed with Features</h3>
            <p>Hundreds of exciting <a href="#" title="Features of game making in Construct">features</a>, designed to aid you in every way as you make your games and develop your projects.  Get involved today.</p>
            <a href="#" class="s download" title="Download Construct 2 Now">
                <div class="download-title">Download</div>
                <div class="download-size">24.5 MB</div>
            </a>            
        </div>
        <div class="clear"></div>   

        <section>
            <h2>This Weeks Spotlight</h2>   
            <div class="column-half">
                <div class="spotlight"><img src="images/spotlight1.png" alt="Spotlight member" /><img src="images/spotlight-mask.png" alt="Mask" /></div>
                <p>Our spotlight member this week is Pooh-Bah.  He writes good stuff.  Read it. <a class="moreInfoLink" href="#">Learn More</a></p>
            </div>
            <div class="column-half r">
                <div class="spotlight"><img src="images/spotlight2.png" alt="Spotlight game" /><img src="images/spotlight-mask.png" alt="Mask" /></div>
                <p>Killer Bears is a scary ass game from JimmyJones.  Escape is mandatory! <a class="moreInfoLink" href="#">Learn More</a></p>
            </div>
        </section>
        <div class="clear"></div>
    </div>
</div>
<div class="main-end"></div>    

<footer>
    <div class="footer-wrapper">
        <div class="footer-inner-wrapper">  
            <div class="footer-item">
                <h4>Community</h4>
                <ul>
                    <li><a href="#" title="Scirra developers blog">The Blog</a></li>
                    <li><a href="#" title="Game making community">Community Forum</a></li>
                    <li><a href="#" title="Scirra's available RSS feeds">RSS Feeds</a></li>
                    <li>
                        <a class="s social-icon facebook" href="http://www.facebook.com/ScirraOfficial" target="_blank" title="Visit Scirra on Facebook"></a>
                        <a class="s social-icon twitter" href="http://twitter.com/Scirra" target="_blank" title="Follow Scirra on Twitter"></a>
                        <a class="s social-icon youtube" href="http://www.youtube.com/user/ScirraVideos" target="_blank" title="Visit Scirra on Youtube"></a>
                    </li>
                </ul>
            </div>
            <div class="footer-item">
                <h4>About Us</h4>           
                <ul>
                    <li><a href="#" title="Contact Scirra">Contact Information</a></li>
                    <li><a href="#" title="Advertise on Scirra">Advertising</a></li>
                    <li><a href="#" title="Scirra's History">History</a></li>
                    <li><a href="#" title="Scirra's Privacy Policies">Privacy Policy</a></li>
                    <li><a href="#" title="Scirra's Terms and Conditions">Terms and Conditions</a></li>
                </ul>       
            </div>
            <div class="footer-item">
                <h4>Want to Help?</h4>
                <p>You can contribute to the community <a href="#" title="Ways to contribute">in lots of ways</a>.  We have a large active friendly community, and there are lots of ways to join in!</p>
                <a href="#" class="ralign" title="Involve yourself in the game making community"><strong>Learn More</strong></a>
            </div>
            <div class="clear"></div>   
        </div>
    </div>
    <div class="copyright">
        Copyright &copy; 2011 Scirra.com.  All rights reserved.
    </div>
</footer>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="js/common.js"></script>
<script src="plugins/coin-slider/coin-slider.min.js"></script>
<script src="js/homepage.js"></script>

</body>

</html>



650
6
задан 5 марта 2011 в 04:03 Источник Поделиться
Комментарии
1 ответ

Мой первый тезис заключается в том, что у вас нет :фокус стиль для вашей ссылки. Если вы перейдете на страницу с клавиатурой, что бы действительно помочь много, чтобы увидеть, где вы находитесь. Возьмите это правило на примере:

h3 a:hover
{
color: #1B676B;
text-decoration:none;
}

Просто добавить:

h3 a:hover, h3 a:focus
{
color: #1B676B;
text-decoration:none;
}

Другое дело, что это приятно делать для людей, навигация с помощью клавиатуры, чтобы разместить скрытую ссылку с текстом, похожие на "пропустить" или что-то подобное близко к вершине. Эта ссылка должна быть ярлык на контент, а только показать :фокус. Причина в том, что это занимает много нашив получить через меню иначе.

Еще один совет, что не надо делать с этим вопросом, что по вертикали, выравнивая ваш контент часто создает более resful опыт чтения. Отступы абзацев сделать его более хаотичной тогда бы они были выровнены.

5
ответ дан 6 марта 2011 в 06:03 Источник Поделиться