Сайт интернет агентства web-design-site-seo.ru: создание, продвижение и раскрутка интернет ресурсов наших клиентов.

Мы больше, чем просто сайт для создания сайтов!

Ваши интернет-проекты станут приносить Вам прибыль, благодаря нашим услугам:

создание сайтов на Joomla, веб-дизайн, SEO, аудит, продвижение  в  поисковых системах Гугл и Яндекс, раскрутка в Интернете и другие услуги

Николай Бобрицкий

Николай Бобрицкий

 

 

СВЯЖИТЕСЬ С НАМИ, ЕСЛИ ВАМ НУЖНЫ НАШИ УСЛУГИ:

+380 50 68 44 644

связаться по скайп с админом web-design-site-seo.ruMikola Bobritskiy

 Этот адрес электронной почты защищен от спам-ботов. У вас должен быть включен JavaScript для просмотра.

 

Шаблон сайта. Заказать шаблон сайта для CMS Joomla |

То, что делает Джумлу красивой или страшной

Оцените материал
(3 голосов)

шаблон сайта

 

Какой шаблон сайта - такая и Джумла.



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

Если Вы не умеете создавать шаблоны для CMS Joomla, то учитесь - пригодится.

Ну а если лень, то можете заказать шаблон сайта на Joomla у нас отдельной услугой за отдельную плату.

Форма подачи заявки справа, в сайдбаре →

Ниже, нами публикуется информация, которая может быть полезной для всех, у кого есть интерес узнать больше о шаблонах на CMS Joomla

 

Что такое шаблон для Joomla.



Шаблон сайта для CMS Joomla, которая используется нашим интернет агентством в качестве создания сайтов наших клиентов, представляет собой перечень описаний качеств, стилей и параметров, созданных на языке описания и форматирования текста HTML, а так же таблицы каскадных стилей CSS, оформленные в отдельные файлы и связанные между собой для отображения содержимого всего интернет ресурса в окне веб браузера.

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

Очевидно, что ни продвижение веб ресурса, ни его раскрутка на качественном уровне с таким дизайном не возможна.

шаблон сайта на Joomla по умолчаниюИзменить на свой вкус, а вернее на требования Заказчика, внешний вид веб ресурса на CMS Joomla и призван, создаваемый нами, шаблон.

Более детальное освещение этого вопроса приведено ниже.

Сейчас стоит чётко сформулировать, что же такое шаблон веб сайта на CMS (CMS - сокращённое от английского: content management system - система управления контентом) Joomla.


Шаблон сайта на Joomla - это надстройка над движком этой CMS, призванная для управления отображением интерфейса web-ресурса (его внешним видом в окне браузера), использующим для этого язык разметки HTML вместе со стилями отображения CSS, и состоящая из набора файлов, влияющих на то, какие элементы, где и каким образом, будут представлены на веб странице при её просмотре.


Для тех кто не понял зачем нужен шаблон.



Шаблон нужен для того, что бы привести внешний вид веб ресурса в соответствие с требованиями, которые выдвигает Заказчик, и которые отражены, в ранее разработанном, макете дизайна и описаны в техническом задании на его разработку.

Разработка дизайна, а позже создание и вёрстка его макета, всегда должны иметь вид завершённого товара с акцентом на уникальности.

Такие сайты наиболее запоминаемые.

Наличие оригинального решения внешнего вида дизайна, позволит такому веб ресурсу оставить по себе приятное впечатление пользователям интернет, впервые его посетившим, а поисковым машинам сформировать 100% представление о уникальности данного ресурса, повышая его позиции в результатах поисковой выдачи среди веб страниц других сайтов с примерно одинаковым их весом в глазах поисковиков.

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

 Какие бывают шаблоны.



На стадии разработки макета дизайна встаёт принципиально-важный вопрос: какой вид будет иметь сайт клиента, исходя из специфики деятельности его самого.

И здесь возможны два варианта: вебсайт может размещаться на весь экран монитора, или только строго фиксированную центральную его часть.

В первом случае, то есть, когда он размещается на весь экран, дизайн такого ресурса будет носить название "резиновый", а во втором - фиксированный.

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

Характеристика ширины файла прописывается в отдельном файле и её величина доступна корректировке.

Итак: шаблон может быть резиновым или фиксированным.

 Как создать шаблон для CMS Joomla с уникальным дизайном.



Как Вы уже поняли из представленного выше материала, для создание сайтов на Joomla нашим клиентам, нами создаются и используются в работе собственные шаблоны, не смотря на то, что во всемирной паутине www существует при огромнейшее множество классных шаблонов на всевозможные темы.

На вопрос: почему мы создаём сами шаблоны, если их полным-полно в Интернете, смотрите пункт "Зачем нужен шаблон". В этом же пункте мы поговорим о том, как же собственно создать шаблон для CMS Joomla.

Итак, приступим.

Но для начала следует заострить ещё раз внимание, что:

в основе создания шаблона для Joomla лежит обычная вёрстка на языке разметки HTML, совместно с созданием таблиц каскадных стилей CSS
(CSS - сокращённое от английского: Cascading Style Sheets).

После того, как разрабатываемая web страница будет свёрстана, её следует адаптировать под стандартизированные требования движка Joomla.

Итак, первым делом приступим к вёрстке, то есть создадим html-код будущей веб страницы, которая и станет позже основой для дальнейшей разработки шаблона.

На практике это будет выглядеть следующим образом.

На момент начала вёрстки шаблона, у нас уже есть завершённый макет его будущего дизайна, который был предварительно разработан и согласован с Заказчиком, как скажем в нашем случае (в нашем случае в качестве примера представлен макет, который мы сами и создавали для нашего интернет проекта), представленный ниже.

макет дизайна сайта для создания шаблона CMS JoomlaОпределение структуры шаблона.

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

Это нужно сделать для ясного понимания, где будет что размещаться.

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

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

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

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

Для этой цели будет создано порядка 2-3 вертикальных блока.

Завершением структурной схемы будет его подвал, куда будут вынесены счётчики посещаемости и авторские права веб разработчика.

схема структуры сайта при разработке шаблона сайта

HTML-вёрстка для создания шаблона под CMS Joomla.



  • Подготовительный этап.

Итак, мы приступаем к этапу html-вёрстки макета, что бы после создать на его основе шаблон, и дальше создать веб ресурс на движке Joomla.

Сразу же стоит оговориться, что осуществлять вёрстку мы будем через блочный тег языка разметки html <div>, не прибегая к помощи таблиц.

И ещё: тестирование результата написания html-кода мы выполняем на локальном сервере, предварительно установив его на компьютер.

Для работы нами использовался AppServ 2.5.10. Подробную информацию по установке и работе с виртуальным сервером Apache HTTP Server, можно буде найти в создаваемом разделе "Полезные статьи".

Создание файлов вёрстки было выполнено в программе Adobe Dreamweaver, а для создания и редактирование графических элементов дизайна использовался Adobe Photoshop.

  • Создание каркаса.

Запускаем программу Adobe Dreamweaver, и в открывшемся окне создания документа выбираем в "Тип страницы" строку HTML, а в "DocType:" - HTML 4.01, и создаём новый файл.

По умолчанию программа автоматически сгенерирует код документа, содержание которого представлено ниже.

Листинг 1: файл index.html при вёрстке шаблона сайта web-design-site-seo.ru.

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Документ без названия</title>
</head>

<body>
</body>

</html>


 На этом этапе вёрстки шаблона, созданный файл будем сохранять в виде index.html, а немного позже адаптируем его под расширение *.php,  на котором и работает движок Joomla.

Внесём первые изменения в созданный код, изменив в начале первые две строки, и изменив тег <title> на соответствующий требованиям поисковой оптимизации сайта, и имеющий следующий вид: "Сайт web-design-site-seo.ru: создание, продвижение, раскрутка | сайты". Ниже представлен вид изменённого нами кода, где жёлтым цветом выделены изменения.

Листинг 2: файл index.html при вёрстке шаблона для web-design-site-seo.ru.

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>                                                                                                                         <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru-ru">        
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Сайт web-design-site-seo.ru: создание, продвижение, раскрутка | сайты</title>
</head>

<body>
</body>
</html>


Далее в теле тега <body></body> создаём шапку, прописав её div-идентификаторы.

Поскольку наш интернет проект будет состоять в шапке из трёх вертикальных частей, то вид кода будет носить такой характер.

 Листинг 3: файл index.html при вёрстке шаблона сайта web-design-site-seo.ru.

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>                                                                                                                         <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru-ru">        
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Сайт web-design-site-seo.ru: создание, продвижение, раскрутка | сайты</title>
</head>

<body>
     <div id="draver">/*шапка сайта, состоящая из двух элементов: первый - слайдер, второй - слоган
         <div id="slider"></div>   
         <div id="slogan"></div>   
       
</div>
     <div id="top"></div>

</body>
</html>


Что бы увидеть результаты внесённых в код изменений, мы создаём в "Дримвьювере" CSS-файл с указанием стилей элементов "draver", сохраняем его в директорию с index.html, а после подключаем его к нашему файлу index.html, через ссылку <link rel="stylesheet" type="text/css" href="/style.css">, получив следующий его вид:

Листинг 4: файл index.html с подключением файла style.css для стилизации его элементов.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru-ru" lang="ru-ru">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Сайт web-design-site-seo.ru: создание, продвижение, раскрутка | сайты</title>
<link rel="stylesheet" type="text/css" href="/style.css">                                                                                  </head>
<body>
    <div id="draver">/*шапка сайта, состоящая из двух элементов: первый - слайдер, второй - слоган
        <div id="slider"></div>   
        <div id="slogan"></div>   
    </div>

    <div id="top"></div>                                                                                                                                                                     

</body>
</html>


Листинг 5: файл style.css с прописанными стилями для элемента draver файла index.htm, которые содержат универсальные стили Эрика Майера для различных современных браузеров.

@charset "utf-8";
/* CSS Document */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, addres, big, cite, code,
del, dfn, em, font, img, ins, kbd,q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, e, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoote, thead, tr, th, td {
    margin: 0;
    padding; 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-aling; baseline;
   background-color: #;
}
body {
    line-height: 1;
    background-color: #151515;
    height: 100%;
    min-width: 800px;
}
ol, ul {
   list-style: none;
}
blockquote, q {
    quotes: none;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
   border-collapse: collapse;
   border-spacing: 0;
}
/*--------------------------------*/

html{
    height:100%;}
/*----------------------------------*/
#wrapper{
    height:100%;}

/*----------------------------------*/

#draver{
    height: 600px;
/*высота элемента draver в пикселях
    width: 80%;/*ширина элемента draver в процентах
    background-color:#00FFCC;/*цвет элемента draver для предварительной компоновки
    margin: 0 auto;}/*внешний отступ выравнивающий элемент draver  строго по центру вертикали и горизонтали

#slider{
    height: 300px;
    width: 100%;
    background-color: #AA3F00;
    margin: 0 auto;}
             
#slogan{
    height: 300px;
    width: 100%;
    background-color: #55BF55;
    margin: 0 auto;}

#top{
    height: 35px;
    width: 80%;
    background-color: #FFFF55;
    margin: 0 auto;}                         

/*----------------------------------*/


После внесения изменений в файл index.html и style.css, внешний вид верстаемого шаблона сайта будет выглядеть именно так, как нам и нужно: три разных по цвету контейнера, находящиеся точно по центру окна браузера, один над другим в нужной нам последовательности (смотри вид ниже).

 шаблон сайта в окне браузера на стадии вёрстки элемента draver

Дальше будем создавать горизонтальное меню для сайта web-design-site-seo.ru, для чего в самом начале следует определиться с его габаритными размерами.

Для этого в программе Adobe Photoshop, предварительно открыв графический файл  макета, с помощью инструмента линейка меряем высоту горизонтального меню.

В нашем случае она составляет 35 пикселей. Длинна же нашего меню составляет 100%.

Имея эти значения, прописываем их в файле style.css элемента, а сам элемент создаём в файле index.htm внутри тегов <body></body>, присвоив ему имя "navigator".

Листинг 6: файл style.css с прописанными стилями для элемента navigator файла index.htm при вёрстке шаблона web-design-site-seo.ru.

@charset "utf-8";
/* CSS Document */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, addres, big, cite, code,
del, dfn, em, font, img, ins, kbd,q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, e, center,
dl, dt, dd, ol, ul, li,fieldset, form, label, legend,
table, caption, tbody, tfoote, thead, tr, th, td {
    margin: 0;
    padding; 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-aling; baseline;
   background-color: #;
}
body {
    line-height: 1;
    background-color: #151515;
    height: 100%;
    min-width: 800px;
}
ol, ul {
   list-style: none;
}
blockquote, q {
    quotes: none;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
   border-collapse: collapse;
   border-spacing: 0;
}
/*--------------------------------*/

html{
    height:100%;}
/*----------------------------------*/
#wrapper{
    height:100%;}

/*----------------------------------*/

#draver{
    height: 600px;/*высота элемента draver в пикселях
    width: 80%;/*ширина элемента draver в процентах
    background-color:#00FFCC;/*цвет элемента draver для предварительной компоновки
    margin: 0 auto;}/*внешний отступ выравнивающий элемент draver  строго по центру вертикали и горизонтали

#slider{
    height: 300px;
    width: 100%;
    background-color: #AA3F00;
    margin: 0 auto;}
             
#slogan{
    height: 300px;
    width: 100%;
    background-color: #55BF55;
    margin: 0 auto;}

#top{
    height: 35px;
    width: 80%;
    background-color: #FFFF55;
    margin: 0 auto;}                         

/*----------------------------------*/

#navigator{
    height: 35px;
    width: 100%;
    background-color: #FF9900;}


Листинг 7: файл index.html с прописанным элементом "navigator" при вёрстке шаблона для web-design-site-seo.ru.

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru-ru" lang="ru-ru">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Сайт web-design-site-seo.ru: создание, продвижение, раскрутка | сайты</title>
<link rel="stylesheet" type="text/css" href="/style.css">                                                                                  </head>
<body>
    <div id="draver">
        <div id="slider"></div>   
        <div id="slogan"></div>   
    </div>

    <div id="top"></div>

    <div id="navigator"></div>                                                                                                                                                             

</body>
</html>


Поскольку создаваемое нами горизонтальное меню с отдельными пунктами имеет определённые габариты, и не должно растягиваться на все 100%, вложим в созданный ранее контейнер navigator ещё один контейнер, но уже с ограниченными размерами меню в 79% от первоначального контейнера, и расположенное строго по центру, так что бы крайние пункты горизонтального меню "Главная" и Гостевая книга сайта находились в пределах размеров сайта, согласно макета.

Для этого в файле index.htm в <div id="navigator"></div> прописываем следующий код, размер которого взят специально сокращённым с позиции целесообразности.

Листинг 8: файл index.html с прописанным элементом "menu" при вёрстке шаблона.

    <div id="top"></div>
    <div id="navigator">
        <div id="menu"></div>
    </div>                                                                                                                                              


 Листинг 9: фрагмент файла style.css с прописанными стилями для элемента menu  при вёрстке шаблона web-design-site-seo.ru.

 /*----------------------------------*/        
        
#navigator{
    height: 35px;
    width: 100%;
    background-color: #FF9900;}    
  

#menu{
    height: 34px;
/*высота контейнера menu*/
    width: 79%;/*длинна контейнера menu в пределах габаритов сайта*/
    background-color: #2A1FFF;   
    margin: 0 auto;}
/*отступ сверху в пределах 0, и по горизонтали наш контейнер занимает положение строго по центру*/

/*----------------------------------*/  


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

шаблон сайта в окне браузера на стадии вёрстки элемента navigator и menu

Итак, создав блок под "шапку" и горизонтальное меню, мы подобрались к самому основному месту вёрстки, а именно - созданию блока под контент.

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

Что бы реализовать нашу задумку по созданию двух блоков под основной контент, вначале создадим блок content, прописав его в файле index.htm под элементом navigator (горизонтальное меню), присвоив ему <div id="content"></div>.

А в файле стилей CSS прописываем его свойства.

Поскольку <div id="content"></div> состоит из двух других, то с позиции seo сайта нам следует первым прописать тот, который главнее, то есть вначале "content-top", а за ним"sidebar".

Листинг 10: файл index.html с прописанным элементом "content" и двух вложенных элементах "content-top","sidebar" в теле <body></body> при вёрстке шаблона.

 <body>

<div id="draver">
    <div id="slider"></div>   
    <div id="slogan"></div>   
</div>

<div id="top"></div>

<div id="navigator">
     <div id="menu"></div>
</div>

<div id="content">
    <div id="content-top"></div>
    <div id="sidebar"></div>
</div>

</body>                                                                                                                                          


Листинг 11: фрагмент файла style.css с прописанными стилями для элемента content и вложенных в него элементов content-top и sidebar при вёрстке шаблона web-design-site-seo.ru

/*----------------------------------*/       
       
#navigator{
    height: 35px;
    width: 100%;
    background-color: #FF9900;}   

#menu{
    height: 34px;/*высота контейнера menu*/
    width: 79%;/*длинна контейнера menu в пределах габаритов сайта*/
    background-color: #2A1FFF;   
    margin: 0 auto;}/*отступ сверху в пределах 0, и по горизонтали наш контейнер занимает положение строго по центру*/

 /*----------------------------------*/   
           
#content{/*основной блок для размещения в нём content-top и sidebar*/
    height: 200px;/*условный размер основного контейнера по высоте, используемый на этапе вёрстки*/
    width: 80%;/*длинна области контейнера под контент, отвечающая длине элемента шапки draver*/
    background-color: #FF6699;
    margin: 0 auto;}
/*этим свойством блок content выводим для отображения в окне браузера точно по чентру*/
  
#content-top{
/*левый блок под публикуемый контент*/
    height: 150px;/*условная высота блока для визуального отображения при написании кода*/
    width: 100%;/*изменяемая величина, на которую растянется этот контейнер при отображении с различными разрешениями экрана*/
    background-color: #D49FAA;
    float:left;}
/*свойство обтекания контейнера слева (прижимается к content левой гранью)*/

#sidebar{
    height: 150px;
/* условная высота контейнера под блок сайд-бар*/
    width: 250px;/*фиксированная ширина контейнера для сайд-бара*/
    background-color: #FFDFAA;/*цвет заливки контейнера для наглядного восприятият на этапе компоновки основных блоков*/
    float:left;/*обтекает левой гранью своего контейнера >*/
    margin-left: -250px;}/*величина отступа контейнера влево относительно блока content*/

 /*----------------------------------*/     


 Результат выполненной работы по созданию блока content представлен на картинке.

шаблон сайта в окне браузера на стадии вёрстки элемента content

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

И тем не менее, существует неприятный момент: если поместить в контейнер content-top текстовую информацию, то её часть останется не воспринимаемой из-за того, что сверху она перекрывается блоком slider, поскольку она займёт 100% длинны блока content, как это видно со стилей.

Решение этой сложности можно реализовать через создание дополнительного контейнера main-content в файле index.html и приданию ему стиля margin-right на величину размера сайдбара.

А после его создания, в этот контейнер можно помещать контент.


 

Листинг 12: обновлённый файл index.html и файл style.css при вёрстке шаблона.

<body>

<div id="draver">
    <div id="slider"></div>   
    <div id="slogan"></div>   
</div>

<div id="top">
       
</div>

    <div id="navigator">
      <div id="menu"></div>
    </div>

<div id="content">

    <div id="content-top">

        <div id="main-content"></div>

    </div>

    <div id="sidebar"></div>
</div>

</body>

/*----------------------------------*/
#content-top{
    height: 150px;
    width: 100%;
    background-color: #D49FAA;
    float:left;}

#main-content{
    margin-right: 250px;}

#sidebar{
    height: 150px;
    width: 250px;
    background-color: #FFDFAA;
    float:left;
    margin-left: -250px;}
/*----------------------------------*/   


После того как мы внесли изменения в файлы, включая помещение тестового текста, вид создаваемого шаблона будет следующим.

шаблон сайта в окне браузера на стадии вёрстки элемента main-content

Данное изображение наглядно демонстрирует, что помещённый в контейнер main-content и sidebar тестовый текст воспроизводится согласно наших требований, никоим образом не перекрываясь, как было до этого.

Создав основной блок под контент, можно теперь переходить к созданию специальных блоков, где будут размещаться окна модулей с формами обратной связи, для того что бы заинтересованные в определённой услуге пользователи, могли легко связаться и подать заявку на следующие услуги через этот сайт:

  1. заказать сайт в нашем интернет агентстве;
  2. заказать его продвижение;
  3. заказать раскрутку своего веб ресурса;
  4. заказать внутреннюю seo-оптимизацию;
  5. заказать перелинковку сайта;
  6. заказать семантическое ядро;
  7. заказать дизайн;
  8. заказать шаблон сайта (форма для подачи заявки на создание шаблона для вашего сайта на движке Joomla находится в правом сайдбаре);
  9. заказать уникальный контент;
  10. зарегистрировать дёшево доменное имя в зоне ru;
  11. прочее...

Как я уже заметил, перечисленные пункты с формами будут выводиться встроенным модулем Joomla.

Для реализации этого, на этапе вёрстки необходимо создать один контейнер content-bottom на ширину элемента content, и после вложить в него 4 одинаковых блока content-bottom-a, content-bottom-b, content-bottom-c, content-bottom-d.

Исходя из того, что ширина шаблона составляет 80% от ширины окна браузера, и у нас есть четыре одинаковых блока, задаём их длину равную 25%, применив к каждому свойство обтекания float:left.

Итак, в тело <body></body> прописываем следующее:


 

Листинг 13: фрагмент файла index.html с прописанным элементом "content-bottom" и его вложенными контейнерами "content-bottom-a", "content-bottom b", "content-bottom c", "content-bottom d".

<div id="content-bottom">
   <div id="content-bottom-a"></div>
   <div id="content-bottom-b"></div>
   <div id="content-bottom-c"></div>
   <div id="content-bottom-d"></div>          
                                                                                 


 Листинг 14: фрагмент файла style.css с прописанными стилями для элемента content-bottom-a, content-bottom-b, content-bottom-c, content-bottom-d.

 /*----------------------------------*/

#content-bottom{
    height: 300px;
    width: 80%;
    background-color:#D49FFF;
    margin: 0 auto;}

#content-bottom-a{
    height: 300px;
    width: 25%;
    background-color:#FFBF00;
    float:left;}
   
#content-bottom-b{
    height: 300px;
    width: 25%;
    background-color: #AA3F00;
    float:left;}

#content-bottom-c{
    height: 300px;
    width: 25%;
    background-color:#FF1FAA;
    float:left;}

#content-bottom-d{
    height: 300px;
    width: 25%;
    background-color:#D4BF00;
    float:left;}       

/*----------------------------------*/  


Итог проделанной работы представлен ниже.

шаблон сайта в окне браузера на стадии вёрстки элемента content-bottom

Подобным образом создадим ещё 2 горизонтальных блока "mainbottom" и "bottom" с четырьмя одинаковыми ячейками в строке для создания и вывода дополнительных модулей, после того, как сверстаем шаблон сайта под Joomla.

В целях рациональности я не стану публиковать код, а ограничусь только картинкой, в качестве показателя результата.

шаблон сайта в окне браузера на стадии вёрстки элемента content-bottom, mainbottom, bottom

Вот мы в плотную и подошли к созданию последнего элемента структуры шаблона - к его подвалу.

Согласно существующего макета, подвал на сайте, или по другому "footer", состоит из трёх горизонтальных элементов: "copyright", "debug" и "analytics".

Составим код нашего футера, прописав его ниже перед закрывающим тегом </body>, состоящий из основного контейнера, и трёх вложенных в него по вертикали, а также пропишем для них стили в файле style.css.


 

Листинг 15: фрагмент файла index.html с элементом "footer" и его вложенными контейнерами copyright, debug, analytics.

<div id="footer">  
   <div id="copyright">
   </div>
   <div id="debug">
   </div>
   <div id="analytics">
   </div>

</div>

</body>
</html>                                                                    


 Листинг 16: фрагмент файла style.css с прописанными стилями для элементов copyright, debug, analytics при вёрстке шаблона сайта web-design-site-seo.ru

 /*----------------------------------*/

#footer{
    height: 200px;
    width: 80%;
    background-color: #009F55;
    margin: 0 auto;}
   
#copyright{
    height: 90px;
    width: 100%;
    background-color: #AA5F00;
    margin: 0 auto;}
             
#debug{
    height: 50px;
    width: 100%;
    background-color: #00DFAA;
    margin: 0 auto;}
                         
   
#analytics{
    height: 60px;
    width: 100%;
    background-color: #FFBFAA;
    margin: 0 auto;}

/*----------------------------------*/  


Как видим из картинки, все элементы корректно отображаются в окне браузера.

шаблон сайта в окне браузера на стадии вёрстки элемента footer

На этом первый этап вёрстки шаблона заканчивается, и дальше будем детальней прорабатывать все его элементы. Для этой цели будет создана и опубликована отдельная статья "Создание шаблона сайта для Joomla".

А теперь подведём некоторые итоги по выполненной работе.

В процессе создания шаблона, нами свёрстан html-код, в котором скомпонованы основные элементы будущего web сайта. Вид кода на данном этапе имеет следующую структуру:


 

Листинг 17: завершённый вид файла index.html при вёрстке шаблона web-design-site-seo.ru

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru-ru" lang="ru-ru">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Сайт web-design-site-seo.ru: создание, продвижение, раскрутка | сайты</title>
<link rel="stylesheet" type="text/css" href="/style.css">
<style type="text/css">
</style>
</head>

<body>

<div id="draver">
    <div id="slider"></div>   
    <div id="slogan"></div>   
</div>

<div id="top">
       
</div>

    <div id="navigator">
      <div id="menu"></div>
    </div>

<div id="content">
    <div id="content-top">
        <div id="main-content">
         </div>
     </div>
      
       <div id="sidebar">
       </div>
    </div>
  
</div>

<div id="content-bottom">
   <div id="content-bottom-a">
   </div>
   <div id="content-bottom-b">
   </div>
   <div id="content-bottom-c">
   </div>
   <div id="content-bottom-d">
   </div>   
</div>

<div id="mainbottom">
   <div id="mainbottom-a">
   </div>
   <div id="mainbottom-b">
   </div>
   <div id="mainbottom-c">
   </div>
   <div id="mainbottom-d">
   </div>
</div>

<div id="bottom">
   <div id="bottom-a">
   </div>
   <div id="bottom-b">
   </div>
   <div id="bottom-c">
   </div>
   <div id="bottom-d">
   </div>
</div>

<div id="footer">  
   <div id="copyright">
   </div>
   <div id="debug">
   </div>
   <div id="analytics">
   </div>

</div>

</body>
</html>


 Стоимость шаблона сайта для Joomla.



Стоимость создания шаблона для CMS Joomla зависит от различных факторов.

Средняя цена вёрстки макета для создания уникального шаблона под CMS Joomla составляет в пределах $100.

Если сравнить эту цену с ценой по созданию веб ресурса в целом, то это почти пол цены за уже созданный и запущенный интернет проект с уникальным дизайном, заложенным в свёрстанный шаблон, а так же уже оптимизированный под поисковые системы Рунета Яндекс и Гугл.

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

Если же Вы всё же решили, что Ваш website нуждается, просто в современном внешним виде, и Вам нужен для реализации своих планов только шаблон, то мы готовы к такому совместному сотрудничеству.

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

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

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

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

В форме следует обязательно указать Вашу контактную информацию.

В самое ближайшее время мы свяжемся с Вами и обсудим совместную стратегию дальнейшего сотрудничества.

Чтобы мы приступили к выполнению работы по созданию шаблона, Вам следует предоставить нам готовый макет (дизайн) будущего интернет проекта в формате PSD.

Проанализировав макет и определив степень сложности вёрстки, мы сможем дать точную стоимость работ и указать её сроки выполнения.

После этого идёт 100% предоплата наших услуг заказчиком, и только после неё мы приступаем к работе, гарантируя результат в оговоренные с ним сроки выполнения заказа.

Результат работы мы предоставляем на нашем демо-сайте, где Заказчик может сам всё посмотреть, и внести при необходимости замечания.

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

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

Стоимость установки шаблона сайта на Joomla составляет $10.

Обращайтесь - цены ориентировочные, и мы всегда сможем договориться.

Представленной информацией Вы можете поделиться со своими друзьями.

Чтобы рассказать друзьям, нажмите на нужную кнопку той соц. сети, где они зарегистрированы.

нажми на кнопочки, что внизу

Спасибо!

По всем возникшим вопросам Вы можете обращаться к нам через раздел наши контакты.

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

А если ваше время не лимитировано, можете просмотреть тематическое коротенькое видео о том, что такое шаблон сайта для CMS Joomla.

Если захотите высказать своё мнение о представленном видео, для этого существуют комментарии сразу под статьёй.

Спасибо, что прочитали эту статью, надеюсь я не зря её писал, и она будет кому то полезной, как и сам наш ресурс web-design-site-seo.ru.

По этому поводу хочу попросить оставить Вас своё мнение о нас, пройдя по ссылке оставить своё мнение в гостевой книге.


Всегда Ваш, Бобрицкий Николай - автор статьи "То, что делает Джумлу красивой или страшной" и проекта web-design-site-seo.ru.

Оставить комментарий

Убедитесь, что вы вводите (*) необходимую информацию, где нужно
HTML-коды запрещены

Нажми на кнопку, если нравится web-design-site-seo.ru

заказать на сайте

Заказать шаблон сайта для CMS Joomla

gKi34HvVW7ss
Email:*
Имя:*
Заполните форму:*
Введите символы, что находятся над строкой ввода почтового ящика, если Вы хотите подать заявку на создание шаблона сайта

Смотрите ещё услугу(и) по небольшой цене

Copyrights © 2012-2013. Сайт web-design-sit-seo.ru - интернет агентство по созданию сайтов на Joomla, дизайну сайтов, seo оптимизации, продвижению сайтов в ТОП 10 поисковых сайтов Гугл и Яндекс и раскрутке сайтов в интернете.
логотип web-design-site-seo.ru

Интернет агентство web-design-site-seo.ru

Автор проекта
Protected by Copyscape Online Plagiarism Tool