ttttttt> tt> t> t> Создание сайта - Вёрстка</titlept> </head> <body > <div id="panel"></div> <div class="myheaderring" ></div> <div class="main"> <div class="myheader"></div> <div class="wrapper"> <div class="logo"> <p> <a href="/"><img src="/bitrix/templates/blackbutterfly/images/name.png" alt="blackbutterfly" /></a> </p> <div class="top_login" style="display: none;" > <!--'start_frame_cache_AQ1edm'--><a href="#zvonok" class="pleasecallmebackd7" >Заказать обратный звонок</a> <div style="display: none"> <div id="zvonok" class="recalme" > <div class="formsrecalme" > <form method="post" action="#"> <input type="hidden" id="zvonok_timezone" name="zvonok_timezone" > <p class="zagolovok">Обратный звонок</p> <hr /> <p> <span>Ваше имя</span> <span class="erors">Поле не должно быть пустым</span> <input id="zvonok_name" name="zvonok_name" type="text"> </p> <p> <span>Ваш номер телефона</span> <span class="erors">Поле не должно быть пустым</span> <input id="zvonok_phone" name="zvonok_phone" type="text"> </p> <p> <span>Комментарий к заявке</span> <textarea id="zvonok_comment" name="zvonok_comment" ></textarea> </p> <p> <span>Удобное время для звонка</span> </p> <div class="sl"> <input type="hidden" id="zvonok_time1" name="start" /> <input type="hidden" id="zvonok_time2" name="end" /> <div class="line"></div> <div class="left"><span></span></div> <div class="right"><span></span></div> <span>10:00</span> <span>12:00</span> <span>14:00</span> <span>16:00</span> <span>18:00</span> <span>20:00</span> </div> <a href="#" onclick="recalmemeform(this); return false;" ><img src="/bitrix/components/blackbutterfly/pleasecallmebackPRO/templates/.default/img/send.png"></a> </form> </div> </div> <div id="okeysendmessageformzvonok"> <div class="ramkamessage" > <div class="psevdoh2"></div> </div> </div> </divpt><!--'end_frame_cache_AQ1edm'--> </div> </div> <div class="topmenu" > <ul> <li class="one" ><a href="/">О Нас</a></li> <li class="two"><a href="/uslugi/">Наши услуги</a></li> <li class="three"><a href="/portfolio/">Портфолио</a></li> </ul> </div> <div class="rightmenu" > <ul> <li><a class="parenturl" href="/about/">О нас</a><ul> <li><a href="/about/advantage/">Наши преимущества</a></li> <li><a href="/about/modern/">В ногу со временем</a></li> <li><a href="/about/polezno/">Полезно знать</a></li> <li><a href="/about/contact/">Контакты</a></li> </ul> </li> <li><a class="parenturl" href="/uslugi/">Наши услуги</a><ul> <li><a href="/uslugi/desing/">Дизайн</a></li> <li><a href="/uslugi/verstka/">Верстка</a></li> <li><a href="/uslugi/programming/">Программирование</a></li> <li><a href="/uslugi/seo/">Продвижение</a></li> </ul> </li> <li><a class="parenturl" href="/youbitrix/">Bitrix</a><ul> <li><a href="/youbitrix/production/">Продукция</a></li> <li><a href="/youbitrix/resheniya/">Наши решения</a></li> <li><a href="/youbitrix/kompozitnyy-sayt/">Композитный сайт</a></li> <li><a href="/youbitrix/bitrix24/">Bitrix 24</a></li> </ul> </li> </ul> <div class="rightbloknagrady"> </div> </div> <div class="content" ><h1>Верстка</h1> <p>Верстка сайта – один из этапов создания веб-страниц, который заключается в грамотном расположении текстовых блоков и графических элементов страниц в соответствии с дизан-макетом. Верстка – непростая работа, ведь сайт очень часто имеет динамические элементы, а необходимость учитывать разные типы и версии браузеров, разрешения мониторов накладывает дополнительные сложности.</p> <p>Основная задача верстки – создание такого сайта, который будет одинаково смотреться при любых настройках монитора, при использовании любых бразуеров, и при этом не будет возникать проблем с заданными функционалом сайта.</p> <p>Различают два вида верстки, каждый из которых имеет свои плюсы при определенных условиях. Фиксированная верстка позволяет создавать сайт с фиксированными размерами элементов страниц, благодаря чему в любом браузере и на любом мониторе веб-страница будет выглядеть одинаково. Однако, например, на широком мониторе сайт, созданный для небольшого монитора, будет выглядеть как узкий столбик, прибитый к центру или левому край. Такой вид сайта не всегда удобен, да и свободное пространство можно использоваться гораздо эффективнее.</p> <p>Резиновая верстка не обладает этим недостатком – сайт будет выглядеть одинаково при любых условиях, однако такая технология накладывает свои ограничения, связанные с использованием разных приемов и не всегда является приемлемой.</p> <p>Качественная и умелая верстка является необходимой для обеспечения функциональности сайта, а также его «нормального» вида во всех браузерах (или по крайней мере наиболее часто используемых) и мониторах.</p> </div> </div> </div> <div class="footer"> <div class="copirate_seo"><br /><span style="float: left; margin-right: 10px;" >© 2009 - 2018</span> <span style="float: left; margin-top: -6px;" id="bx-composite-banner" ></span> </div> <div class="copirate"><a href="/"><span style="color: #eae9e9;">black</span><span style="color: #9b9797;">butterfly.ru</span></a></div> </div> <!-- Yandex.Metrika counter -pt> <noscript><div><img src="//mc.yandex.ru/watch/4510849" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <!-- /Yandex.Metrika counter --> <!--'start_frame_cache_F15QsB'--><!--'end_frame_cache_F15QsB'> <script type="text/javascript">if(!window.BX)window.BX={};if(!window.BX.message)window.BX.message=function(mess){if(typeof mess=='object') for(var i in mess) BX.message[i]=mess[i]; return true;};</scrip> <script type="text/javascript">(window.BX||top.BX).message({'JS_CORE_LOADING':'Загрузка...','JS_CORE_NO_DATA':'- Нет данных -','JS_CORE_WINDOW_CLOSE':'Закрыть','JS_CORE_WINDOW_EXPAND':'Развернуть','JS_CORE_WINDOW_NARROW':'Свернуть в окно','JS_CORE_WINDOW_SAVE':'Сохранить','JS_CORE_WINDOW_CANCEL':'Отменить','JS_CORE_WINDOW_CONTINUE':'Продолжить','JS_CORE_H':'ч','JS_CORE_M':'м','JS_CORE_S':'с','JSADM_AI_HIDE_EXTRA':'Скрыть лишние','JSADM_AI_ALL_NOTIF':'Показать все','JSADM_AUTH_REQ':'Требуется авторизация!','JS_CORE_WINDOW_AUTH':'Войти','JS_CORE_IMAGE_FULL':'Полный размер'});</scrip> <script type="text/javascript">(window.BX||top.BX).message({'LANGUAGE_ID':'ru','FORMAT_DATE':'DD.MM.YYYY','FORMAT_DATETIME':'DD.MM.YYYY HH:MI:SS','COOKIE_PREFIX':'BITRIX_SM','SERVER_TZ_OFFSET':'10800','SITE_ID':'s1','SITE_DIR':'/'});</scrip <script type="text/javascript" src="/bitrix/cache/js/s1/blackbutterfly/kernel_main/kernel_main.js?1515491976309163"></scrip> <script type="text/javascript" src="/bitrix/js/main/core/core_db.min.js?14981328528699"></scrip> <script type="text/javascript" src="/bitrix/js/main/core/core_frame_cache.min.js?146670354611191"></scrip> <script type="text/javascript" src="/bitrix/js/main/jquery/jquery-1.8.3.min.js?146541375193636"></scrip> <script type="text/javascript">BX.setJSList(['/bitrix/js/main/core/core.js','/bitrix/js/main/core/core_ajax.js','/bitrix/js/main/json/json2.min.js','/bitrix/js/main/core/core_ls.js','/bitrix/js/main/core/core_fx.js','/bitrix/js/main/session.js','/bitrix/js/main/core/core_window.js','/bitrix/js/main/core/core_popup.js','/bitrix/js/main/core/core_date.js','/bitrix/js/main/utils.js']); </scrip> <script type="text/javascript">BX.setCSSList(['/bitrix/js/main/core/css/core.css','/bitrix/js/main/core/css/core_popup.css','/bitrix/js/main/core/css/core_date.css']); </scrip> <script type="text/javascript"> (function () { "use strict"; var counter = function () { var cookie = (function (name) { var parts = ("; " + document.cookie).split("; " + name + "="); if (parts.length == 2) { try {return JSON.parse(decodeURIComponent(parts.pop().split(";").shift()));} catch (e) {} } })("BITRIX_CONVERSION_CONTEXT_s1"); if (cookie && cookie.EXPIRE >= BX.message("SERVER_TIME")) return; var request = new XMLHttpRequest(); request.open("POST", "/bitrix/tools/conversion/ajax_counter.php", true); request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); request.send( "SITE_ID="+encodeURIComponent("s1")+ "&sessid="+encodeURIComponent(BX.bitrix_sessid())+ "&HTTP_REFERER="+encodeURIComponent(document.referrer) ); }; if (window.frameRequestStart === true) BX.addCustomEvent("onFrameDataReceived", counter); else BX.ready(counter); })(); </scrip <script type="text/javascript" src="/bitrix/cache/js/s1/blackbutterfly/template_2ee3468a8dfb1339c5f5910abf3ab8f8/template_2ee3468a8dfb1339c5f5910abf3ab8f8.js?1502727763169741"></scrip> <script type="text/javascript">var _ba = _ba || []; _ba.push(["aid", "7f543aed615a653e6c0224595706d1c3"]); _ba.push(["host", "blackbutterfly.ru"]); (function() {var ba = document.createElement("script"); ba.type = "text/javascript"; ba.async = true;ba.src = (document.location.protocol == "https:" ? "https://" : "http://") + "bitrix.info/ba.js";var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(ba, s);})();</scrip <script type="text/javascript" src="/bitrix/templates/blackbutterfly/js/jquery.cookie.js"></scrip <script type="text/javascript" src="/bitrix/templates/blackbutterfly/js/public.js"></scrip> <script type="text/javascript" > $(function() { $(".youtube").each(function() { // Based on the YouTube ID, we can easily find the thumbnail image $(this).css('background-image', 'url(http://i.ytimg.com/vi/' + this.id + '/sddefault.jpg)'); // Overlay the Play icon to make it look like a video player $(this).append($('<div/>', {'class': 'play'})); $(document).delegate('#'+this.id, 'click', function() { // Create an iFrame with autoplay set to true var iframe_url = "https://www.youtube.com/embed/" + this.id + "?autoplay=1&autohide=1"; if ($(this).data('params')) iframe_url+='&'+$(this).data('params'); // The height and width of the iFrame should be the same as parent var iframe = $('<iframe/>', {'frameborder': '0', 'src': iframe_url, 'width': $(this).width(), 'height': $(this).height() }) // Replace the YouTube thumbnail with YouTube HTML5 Player $(this).replaceWith(iframe); }); }); }); </scri> <script type="text/javascript" > function clearparams() { user_name = $('.formsrecalme').find("[name='zvonok_name']"); user_phone = $('.formsrecalme').find("[name='zvonok_phone']"); user_comment = $('.formsrecalme').find("[name='zvonok_comment']"); user_name.parents("p").find('.erors').hide(); user_phone.parents("p").find('.erors').hide(); user_name.removeClass('poleeror'); user_phone.removeClass('poleeror'); user_name.val(''); user_phone.val(''); user_comment.val(''); } function recalmemeform(el) { eror = 0; user_name = $(el).parents('form').find("[name='zvonok_name']"); user_phone = $(el).parents('form').find("[name='zvonok_phone']"); user_name.parents("p").find('.erors').hide(); user_phone.parents("p").find('.erors').hide(); user_name.removeClass('poleeror'); user_phone.removeClass('poleeror'); if ( user_name.val() == '') { user_name.parents("p").find('.erors').show(); user_name.addClass('poleeror'); eror = 1; } if ( user_phone.val() == '' || user_phone.val().length < 6 ) { user_phone.parents("p").find('.erors').show(); user_phone.addClass('poleeror'); eror = 1; } if ( eror == 0 ) { str = $(el).parents('form').serialize(); BX.ajax.post( '/uslugi/verstka/?ajax_form=Y&pleasecallmebackd7=Y',str, DEMOResponse ); } } function DEMOResponse(data){ $.colorbox({href:"#okeysendmessageformzvonok",inline:true,onClosed:function(){ clearparams();}}); } </scri-> <script type="text/javascript"> (function (d, w, c) { (w[c] = w[c] || []).push(function() { try { w.yaCounter4510849 = new Ya.Metrika({id:4510849, webvisor:true, clickmap:true, trackLinks:true}); } catch(e) { } }); var n = d.getElementsByTagName("script")[0], s = d.createElement("script"), f = function () { n.parentNode.insertBefore(s, n); }; s.type = "text/javascript"; s.async = true; s.src = (d.location.protocol == "https:" ? "https:" : "http:") + "//mc.yandex.ru/metrika/watch.js"; if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); } })(document, window, "yandex_metrika_callbacks"); </scri--></body> </html><!--9e6afd080bec1efd0b7e638fd5fe1b49-->