Верстка сайта, интеграция в CMS

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

Верстка сайта на 5block отличается доступностью по цене и отличным качеством.

  • W3C Valid XHTML 1.0 Strict;
  • W3C Valid XHTML 1.0 Transitional;
  • CSS блочная верстка;
  • Кроссбраузерность:se-оптимизированная версткаустановка на CMSверстка под Google Chromeверстка быстро и недорогоУслуги верстка сайта

Выгоды сотрудничества

Предлагаем вашему вниманию следующие услуги:

  1. Кроссбраузерная, валидная, se-оптимизированная html верстка сайта;
  2. Интеграция верстки в CMS: Amiro, HostCMS, NetCat, Bitrix, UMI-CMS, Danneo, DLE, Joomla, WordPress, Magento, OsCommerce, CreLoaded, ZenCart.
Screenshot дизайн-макета
файл .png, .jpg, .bmp - не более 5 мб Техническое задание
Сроки Имя / Название компании E-mail

Условия сотрудничества:

1) Наличие дизайн-макета сайта, в формате psd,

2) Наличие технического задания на верстку,

3) 50% предоплата работы (минимальная предоплата 1000 р.).

Предлагаем вам предварительно оценить стоимость верстки вашего дизайн-макета, заполнив форму слева. Результат оценки будет выслан на ваш e-mail в течение суток.

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

Верстка сайтов. Основы

В наш информационный век для все большего и большего количества людей в их рабочее время (а нередко и в досуг) становится популярным занятием верстка сайта. Интернет все быстрее развивается по качественным показателям, а еще больше по количественным. Большинство людей просто заводят блоги и регистрируются в социальных сетях, но есть немало и тех, кто создает свои странички в глобальной сети, самостоятельно сверстав дизайн, выбрав собственную тему, преследуя свои цели. В основном, новоиспеченные веб-мастера делают сайты, используя специализированные программы, использующие технологию WYSIWYG (а расшифровывается это вот так - What You See Is What You Get). Она позволяет создавать страницы, без знаний HTML-кода, строя их лишь визуально, что значительно упрощает процесс. Но если вы хотите изучить основы сайтостроения более глубоко, изучить HTML, будет просто необходимо. Язык этот более чем прост, одного дня будет достаточно, чтобы просто понять, в чем его суть и узнать, что же такое - верстка сайтов. В дальнейшем, вы можете в любой момент заглянуть за подсказкой в любой справочник по языку, этим не брезгуют и профессиональные веб-мастера, все мы люди, и можем в любой момент забыть какую-нибудь мелочь.

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

Самой первой строкой, как правило, является декларация версии HTML, вот как она обычно выглядит:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">.

Без этой строки не обходится ни одна страница сайта, именно она указывает, что перед нами не просто текст, а HTML-страница. Далее, тэгами <HTML> и </HTML> указывается начало и конец страницы. Их совокупность, вместе с содержимым, называется контейнером. Внутри него уже лежат два других обязательных контейнера. Первый:

<head> [Текст и другие тэги] </ head >.

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

<title>[Название страницы]</title>
<link rel=stylesheet type="text/css" href=[Адрес таблицы стилей]>
< meta name="Description" content=[Описание сайта]>.

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

Далее следует основная часть страницы. Заключена она в контейнере:

<body>[Тело сайта]</body>.

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

<a href=[Адрес ссылки]>[Ссылка]</a>.

Внутри этого контейнера может быть форматированный текст или картинка.Одним из элементарных тэгов для форматирования текста является:

<font size=[Размер шрифта] face=[Шрифт] color=[Цвет]>[Текст]</font>.

Он может указываться где угодно в тексте, не разделяя его на абзацы. Если же вам нужно отделить один абзац от другого, следует применить тэги <div align="center"></div> или <p align="right"></p>, разделяющие не только текст, но и другие элементы страницы, с указанием прочих атрибутов.

Следующие на очереди - картинки на странице.

<img src=[Адрес картинки] width=[Ширина] height=[Высота] alt=[Альтернативный текст] hspace=[Расстояние от картинки до прочих элементов] align=[Горизонтальное расположение картинки]>

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

Этого может быть достаточно для простого сайта, со столь же простым дизайном. Но гораздо больше возможностей по усложнению и украшению страниц дают слои и таблицы. У обоих способов верстки дизайна есть свои недостатки, но с помощью таблиц сделать красивый и удобный дизайн проще. Все элементы можно легко упорядочить и проблем с отображением не возникнет. Таблицы создаются с помощью тэгов <table></table>. Внутри с помощью <tr></tr> и <td></td> указываются параметры и содержимое строк и колонок соответственно.

Простая таблица 2X2 может выглядеть, например, вот так:

<table border>
<tr>
<td>a1</td><td>b1</td>
</tr>
<tr>
<td>a2</td><td>b2</td>
</tr>
</table>

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

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

<!doctype html public "-//w3c//dtd html 3.2 final//en">
<html>
<head>
<title>Страница</title>
<meta name="Description" content=HTML-страница>
</head>
<!--Наша страница будет иметь почти белый фон, поверх которого фон будет заполнен картинкой в виде полупрозрачных полос-->
<body bgcolor="#f1f1f1" background="1.png">
<!--Все содержимое расположено по центру-->
<p align="center">
<font face="Courier new" size="6" color="blue">Главная</font>
<!--Под заголовком расположена таблица с основным содержимым-->
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#9fbdff" background="1.png">
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" width="800" height="400" bgcolor="#9fbdff" background="2.png">
<tr>
<td align="center">
<font face="Courier new" size="4" color="blue">Доброго времени суток!<br>Вы на главной странице сайта.</font>
</td>
</tr>
</table>
</td>
<td valign="top">
<!--В этой таблице находится панель навигации с ссылками-->
<table cellspacing="0" cellpadding="0" border="0" bgcolor="black">
<tr>
<td width="100" height="30" align="center"> <a href=1.html><font face="Courier new" size="2" color="white">Главная</font></a>

</td>
</tr>
<tr>
<td width="100" height="30" align="center"> <a href=2.html><font face="Courier new" size="2" color="white">Новости</font></a>
</td>
</tr>

<tr>
<td width="100" height="30" align="center"> <a href=3.html><font face="Courier new" size="2" color="white">Партнеры</font></a>
</td>
</tr>
<tr>
<td width="100" height="30" align="center">

<a href=4.html><font face="Courier new" size="2" color="white">Помощь</font></a>
</td>
</tr>
<tr>
<td width="100" height="30" align="center"> <a href=5.html><font face="Courier new" size="2" color="white">О нас</font></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</p>
</body>
</html>

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

пример табличной верстки

Подобная верстка сайтов довольно примитивна, и, думаю, вы без особого труда поймете то, что здесь изложено. Внутри тэгов <!-- --> находятся комментарии, на которые не обращает внимания браузер, и которые очень помогают верстальщику разобраться в коде. Иногда без них и собственноручно сверстанная страница кажется полной неразберихой. Путь к файлам (картинкам, таблицам стилей) можно указать как относительный, так и абсолютный.Не забывайте, что документ следует сохранять с расширением *.html или *.htm.

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