Демо сайт рекламы


Полностью функциональная демо-адресу: http://69.24.73.172/demos/index.html

Обратите внимание, что в Firefox есть баг небольшой горизонтальной полосы прокрутки, которые я установил у себя дома.

HTML-код:

<!DOCTYPE html>
<html>  

<head>    
    <meta charset="UTF-8" />    
    <title>Welcome to Scirra.com</title>    
    <meta name="description" content="Construct 2, the HTML5 games creator." />    
    <link rel="stylesheet" href="css/default.css" type="text/css" />     
    <link rel="stylesheet" href="plugins/coin-slider/coin-slider-styles.css" type="text/css" />    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>    
    <script type="text/javascript" src="js/common.js"></script>    
    <script type="text/javascript" src="plugins/coin-slider/coin-slider.min.js"></script>    
    <script type="text/javascript" src="js/homepage.js"></script>    
</head>  

<body>   

<div class="topBar"></div>    
<div class="mainBox">    
    <div class="headWrapper">   
        <div class="searchWrapper">    
            <div class="searchBox">    
                <input type="text" id="SearchBox" />    
                <div class="s searchIco"></div>    
            </div>    
        </div>      
    </div>  


    <div class="topMenu">    
        <a href="#" class="topSelWrapper">Home</a>    
        <a href="#" class="topNormal">Forum</a>    
        <a href="#" class="topNormal">Contruct</a>    
        <a href="#" class="topNormal">Arcade</a>    
        <a href="#" class="topNormal">Manual</a>    
        <a href="#" class="topNormal">Support</a>    
        <a href="#" class="topNormal">Contact</a>    
    </div>

    <div class="subMenu">    
        <a href="#" class="subSelWrapper">Homepage</a>      
        <a href="#" class="subNormal">Construct</a>    
        <a href="#" class="subNormal">Products</a>    
        <a href="#" class="subNormal">Community Forum</a>    
        <a href="#" class="subNormal">Contact Us</a>    
    </div>



    <div class="contentWrapper">    
        <div class="wideCol">    
            <div id='coin-slider' class="slideShowWrapper">    
                <a href="#" target="_blank">    
                    <img src='images/screenshot1.jpg' >    
                    <span>    
                        Scirra software allows you to bring your imagination to life    
                    </span>    
                </a>    
                <a href="#">    
                    <img src='images/screenshot2.jpg' >    
                    <span>    
                        Export your creations to HTML5 pages    
                    </span>    
                </a>        
                <a href="#">    
                    <img src='images/screenshot3.jpg' >    
                    <span>    
                        Another description of some image    
                    </span>    
                </a>    
                <a href="#">    
                    <img src='images/screenshot4.jpg' >    
                    <span>    
                        Something motivational to tell people    
                    </span>    
                </a>    
            </div>      
            <div class="newsWrapper">    
                <h1>Latest from Twitter</h1>    
                <div id="twitterFeed">  
                <p>The news on the block is this.  Something has happened some news or something. <span class="smallDate">About 6 hours 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="smallDate">About 6 hours ago</span></p>    
                <p>Shocker!  Santa Claus is not real.  This is breaking news, we must spread it. <span class="smallDate">About 6 hours ago</span></p>   
                </div>    
            </div>    
        </div>    
        <div class="thinCol">    
            <h1>Main Heading</h1>    
            <p>Some paragraph goes here.  It tells you about the picture.  Cool!  Have you thought about downloading Construct 2?  Well you can download it with the link below.  This column will expand vertically.</p>    
            <h2>Help Me!</h2>    
            <p>This column will keep expanging and expanging.  It pads stuff out to make other things look good imo.</p>    
            <h2>Why Download?</h2>    
            <p>As well as other features, we also have some other features.  Check out our <a href="#">other features</a>.  Each of our other features is really cool and there to help everyone suceed.</p>
                <a href="#" class="s downloadBox">    
                <div class="downloadHead">Download</div>    
                <div class="downloadSize">24.5 MB</div>    
            </a>            
        </div>    
        <div class="clear"></div>      

        <h1>This Weeks Spotlight</h1>       
        <div class="halfColWrapper">    
            <img src="images/spotlight1.png" class="spotLightImg" />    
            <p>Our spotlight member this week is Pooh-Bah.  He writes good stuff.  Read it.</p>    
            <a class="moreInfoLink" href="#">Learn More</a>    
        </div>    
        <div class="halfColSpacer">&nbsp;</div>    
        <div class="halfColWrapper">    
            <img src="images/spotlight2.png" class="spotLightImg" />    
            <p>Killer Bears is a scary ass game from JimmyJones.  How many bears can you escape from?</p>    
            <a class="moreInfoLink" href="#">Learn More</a>    
        </div>    
        <div class="clear"></div>    
    </div>    
</div>       

<div class="footerWrapper">    
    <div class="footerBox">     
        <div class="footerItem">    
            <h3>Community</h3>    
            <a href="#">The Blog</a><br />    
            <a href="#">Community Forum</a><br />    
            <a href="#">RSS Feed</a><br />    
            <a class="s footIco facebook" href="http://www.facebook.com/ScirraOfficial" target="_blank"></a>    
            <a class="s footIco twitter" href="http://twitter.com/Scirra" target="_blank"></a>    
            <a class="s footIco youtube" href="http://www.youtube.com/user/ScirraVideos" target="_blank"></a>    
        </div>    
        <div class="footerItem">    
            <h3>About Us</h3>    
            <a href="#">Contact Information</a><br />    
            <a href="#">Advertising</a><br />    
            <a href="#">History</a><br />    
            <a href="#">Privacy Policy</a><br />    
            <a href="#">Terms and Conditions</a>    
        </div>

        <div class="footerItem">    
            <h3>Want to Help?</h3>    
            You can contribute to the community <a href="#">in lots of ways</a>.  We have a large active friendly community, and there are lots of ways to join in!<br />    
            <div class="ralign">    
            <a href="#"><strong>Learn More</strong></a>    
            </div>    
        </div>    
        <div class="clear"></div>       
    </div>    
</div>

<div class="copyright">    
    Copyright &copy; 2011 Scirra.com.  All rights reserved.    
</div>   

</body>

</html>

(Примечание глава обрамляющий блок пустой на данный момент, это будет иметь логотип на более позднюю дату).

Усс:

    /* Main Layout Elements */
    body{
        margin: 0;
        padding: 0;
        font-family: Arial, Helvetica, Verdana;
        background: #fff url(../images/background.png) repeat-x;
        color:#444;
    }
    p {
        margin: 0 0 20px 8px;
    }
    a{
        color: #0066FF;
    }
    .smallDate{
        float:right;
        color: #339900;
    }
    .topBar{
        position:absolute;
        background-color: #339900;
        height: 30px;
        border-bottom:2px solid #3FBF00;
        width: 100%;
        z-index:1;
        -moz-box-shadow: 0px 0px 5px #555;
        -webkit-box-shadow: 0px 0px 5px #555;
        box-shadow: 0px 0px 5px #555;
    }
    h1{
        margin:0;
        margin-bottom:5px;
        font-size:35px;
        color: #339900;
        font-weight:normal;
    }
    h2{


margin:0 0 5px 0;
    font-size:22px;
    color: #339900;
    font-weight:normal;
}
h3{
    text-shadow: black 0.1em 0.1em 0.2em;
    text-transform: uppercase;
    font-size: 17px;
    font-weight: bold;
    margin-bottom: 3px;
}
.ralign{
    text-align:right;
}
.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;
}
.slideShowWrapper{
    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 */
.contentWrapper{
    padding: 10px;
}
.headWrapper{
    height: 120px;
}
.footerWrapper{
    position:relative;
    z-index:1;
    top: -20px;
    height:155px;
    padding-top: 15px;
    background-image: url(../images/background-footer.png);
    background-repeat:repeat-x;
    margin-bottom: -20px;
overflow: hidden;
}
.mainBox{
    -moz-box-shadow: 0px 0px 12px #444;
    -webkit-box-shadow: 0px -20px 28px #c0c0c0;
    box-shadow: 0px 0px 12px #444;
    margin: 0 auto;
    width: 770px;
    border:0;
    z-index:2;
    position:relative;
    background-color: #ffffff;
    -moz-border-radius-bottomright: 10px;
    border-bottom-right-radius:  10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-left-radius:  10px;
}

/* Footer */
.footerBox
{
    color: white;
    font-size: 13px;
    margin: 0 auto;
    width: 700px;
    margin-top:5px;
}
.footerItem{
    float: left;
    width: 33%;
}
.footerItem a{
    font-size:13px;
    color:white;
}
.footerItem a:hover{
    color: #ffaa00;
}
.copyright
{
    color: white;
    text-align:center;
    background-color: #000000;
    font-size: 12px;
    padding: 3px;
}
.footIco{
    height: 40px;
    width: 32px;
    float: left;
    margin-top: 7px;
    position:relative;
    left: -4px;
    display:block;
}

/* Search */
.searchWrapper{
    float:right;
    background-color: #339900;
    width: 250px;
    height:53px;
    position:relative;
    left: 50px;
    -moz-border-radius-bottomright: 10px;
    border-bottom-right-radius:  10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-left-radius:  10px;
    text-align:center;
    line-height:50px;   
}
.searchBox{
    position:Relative;
    left:12px;
}
.searchBox input{
    height:20px;
    padding-left:10px;
    color: #c0c0c0;
    line-height:20px;
    padding-right:25px;
}
.searchIco{
    height: 37px;
    width: 36px;
    float: right;
    background-position: -40px 0;
    position:relative;
    left:-33px;
    top:11px;
}

/* Menus */
.topMenu{
    height:38px;
    background-color: #339900;
    font-size: 15px;
    font-weight: bold;
    line-height:38px;
}
.topMenu a{
    text-shadow: #114400 1px 1px 1px;
    display: block;
    float:left;
    padding-left: 8px;
    padding-right: 8px;
    color:white;
}
.subMenu{
    height: 33px;
    background-color: #1B5300;
    font-size: 13px;
    line-height:33px;
}
.subMenu a{
    display: block;
    float:left;
    padding-left: 8px;
    padding-right: 8px;
    color:white;
    text-decoration: none;
}
.subLinkLImg{
    float:left;
    width:11px;
    height:23px;
    background-position: -80px 0;
}
.subLinkSelected{
    background-color:#123700;
    float:left;
    height:22px;
    line-height:22px;
}
.subSelWrapper{
    text-decoration: none;
    margin-right: -20px;
    margin-left: 5px;
}
.subNormal{
    margin-left: 25px;
}   
.subNormal:hover{
    background-color:#123700;
    text-decoration: none;
}   
.ssOrient{
    position:relative;
    top:6px;
}
.subLinkRImg{
    float:right;
    width:11px;
    height:23px;
    background-repeat:no-repeat;
    background-position: -91px 0;
}
.topSelWrapper{
    text-decoration: none;
    margin-right: -20px;
    margin-left: 5px;
}
.topLinkLImg{
    float:left;
    width:11px;
    height:33px;
    background-position: -105px 0;
}
.topLinkRImg{
    float:right;
    width:11px;
    height:33px;
    background-position: -116px 0;
}
.topLinkSelected{
    background-color:#1B5300;
    float:left;
    height:33px;
    line-height:33px;
}
.tlOrient{
    position:relative;
    top:5px;
}
.topNormal{
    margin-left: 25px;
    text-decoration: none;
}
.topNormal:hover{
    background-color:#2B8200;
}

/* Download box link */
.downloadBox{
    display: block;
    background-position: -134px 0;
    width: 215px;
    height: 55px;
    margin: 0 auto;
    text-align:right;
    color:white;
    text-transform: uppercase;
    text-decoration: none;
}
.downloadHead{
    font-weight:bold;
    font-size:17px;
    padding-top:14px;
    padding-right: 15px;
}
.downloadSize{
    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:#3366CC;
    text-align:center;
    padding:0 12px 0 12px;
    line-height:17px;
    min-width:100px;
    -moz-border-radius: 10px;
    border-radius:  10px;
    margin-top:-12px;
    margin-bottom:10px;
    clear:both;
}
.moreInfoLink:hover{
    text-decoration:underline;
    background-color: #537DD5;
}
.thinCol{
    float:left;
    width:270px;
}
.wideCol{
    float:left;
    margin-right:10px;
    width:470px;
}
.newsWrapper{
    position:relative;
    top: 5px;
}
.halfColSpacer{
    width:4%;
    float:left;
}
.halfColWrapper{
    float:left;
    width:48%;  
}
.spotLightImg{
    float:left;
    margin-right:15px;
    -moz-border-radius: 10px;
    border-radius:  10px;
    -moz-box-shadow: 3px 3px 3px #444;
    -webkit-box-shadow: 3px 3px 3px #444;
    box-shadow: 3px 3px 3px #444;
    width: 90px;
    height: 90px;
}
.slideShowWrapper img{
    width:470px;
    height: 261px;
    border: 0;
}
.slideShowWrapper a{
    text-decoration: none;
}

Я очень старался, чтобы дизайн этого с постепенного усовершенствования в разум, так что я думаю, что она деградирует довольно красиво.

IE7 и ниже не поддерживаются. Я полностью с этим решением. Я рассматриваю добавив хоть какое-то уведомление.

Он испытан в сафари, ФФ, ИЕ8 и хром.

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

Комментарии на CSS/HTML и JS все добро пожаловать. Я действительно хочу, чтобы ноготь это как можно ближе к идеальным. Основные направления важными являются:

  • SEO дружественных
  • Быстрый и отзывчивый
  • Можно


567
8
задан 2 марта 2011 в 09:03 Источник Поделиться
Комментарии
2 ответа

Я не посмотрю подробно, но некоторые идеи/замечания/замечания:


  • Вы можете сэкономить див элементов с помощью поплавка стиль (особенно в заголовке). Старайтесь избегать использования дивS для укладки и использовать логическое соответствующих тегов (например в
    Скачать
    ).

  • Меню должны быть перечислены (
  • ) с логической точки зрения (например, как здесь)

  • Попробуйте поставить все JavaScript включает в конце, где это возможно (это имеет некоторые недостатки, хотя, (одна из многих дискуссий по этой теме))

  • Пока код не станет сложнее, это нужно сделать быстро. Я думаю, что ваша самая большая проблема будет в базовых приложений (если сайт не статический). Компания Yahoo имеет некоторые большие рекомендации о том, как ускорить веб-сайтов.

  • Для инвалидных колясок: ты теряешь большое название и альт - теги, которые особенно важны для скрин-ридеры (они также требуют элементы, которые должны быть в логическом порядке, как оптимизировать сайт для них в этом разделе не рассматриваются).

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

Что касается скорости, я не думаю, что у вас есть о чем беспокоиться. Как @ФГО отметить, что, как правило, имеет больше общего с вашим приложением - не статических страниц (если они не огромные с кучей картинок и т. п.).

Когда вы говорите о SEO и доступность, это действительно две стороны одной медали. Важно знать как ваш сайт будет выглядеть в текстовом браузере. Ваша страница будет полезная, но немного запутанным, без изображения или макета теги.

Во-первых, только один

должен появиться на какой-то одной странице. Он также должен как правило, быть похожими на заголовок страницы. Я тоже заметила, что тебя нет тег (важно). Кроме того, я обычно люблю включить моих

и главная моя страница и самое главное сразу после открытия тег. Оберните это в
и вы можете поместить его там, где вы хотите позже.

@ФГО рекомендуется, что вы должны разместить ваш меню в

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

    4
    ответ дан 2 марта 2011 в 01:03 Источник Поделиться