верстка — Страница 2 — Блог одной студии

Создание блога о Nintendo Wii. Часть 1

www.blogwii.ru — Создание сайта, верстка, поддержка.

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

Блог о Nintendo Wii — это авторский проект, который ведет один человек. Мы постарались максимально упростить ему работу по обновлению, как самого блога, так и внутренних модулей. Внедрили все самые новейшие технологии и сервисы.

Дизайн и верстка.
Дизайн выполнен в светлых тонах с минимумом элементов, это упрощает восприятие и поиск нужной информации, а еще гармонирует с современным дизайном консоли Wii, который так же выполнен в светлых тонах.

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

Верстка блочная, резиновая, что очень не типично для блогов. Основная, контентовая часть, состоит из трех блоков. Левая часть тянется, правая всегда остается на месте. Мы постарались подобрать такое сочетание размера шрифта, интрельяжа и межстрочных интервалов, которое способствовало максимально простому восприятию информации. Проще говоря, читать текст просто и он легко усваивается.
Мы постарались учесть все возможные разрешения экрана, в том числе, для широкоформатных мониторов. Протестировали верстку во всех современных браузерах, а так же на соответствие стандартам W3C. Была оптимизирована графика и код страницы.

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

Вывод последних комментариев

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

Опрос

Комментарии выводятся единым списком, с возможностью ответить на любой комментарий. Уровень вложенности больше 5.

Комментарии

На отдельной странице выводится карта сайта, которая создается автоматически. Так же на отдельных страницах показывается описание блога и информация о копирайтах.
В блог можно загружать все, что угодно — фотографии, видео, музыку, flash ролики, любые мультимедийные материалы. Запись редактируется как с помощью редактора, так и в ручную, что дает бесконечную свободу действий.

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

Читать вторую часть рассказа о создании блога blogwii.ru

Вторая версия сайта steklomed.ru

Редизайн сайта ООО «Стекломед». Фирма занимается производством покровных и предметных стекол, продукция применяется в больницах, лабораториях, учебных учреждениях. Первая версия сайта, создавалась в далеком 2002 году, неизвестно кем и неизвестно зачем. Мы решили это исправить, переделали сайт под соответствие новым стандартам и изменили стиль. Вся информация теперь размещена на одной странице, самое важное, прайс-лист с описанием, теперь можно скачать в формате Word и Excel, а так же распечатать, непосредственно с сайта. Появилась карта проезда и человеческое описание. Сайт стал более легким и понятным, убрано все лишнее.



Было	→	Стало

Верстка сайта и движок, для компании «Драйв»

Сделали верстку сайта, для компании «Драйв», а так же запустили на нашем движке. Блочная верстка соответствует стандартам W3C и одинаково смотрится во всех современных браузерах. Обновлять сайт легко, с помощью нашего движка, все элементы сайта редактируются и изменяются. Редактор может добавить фото, видео, любые текстовые материалы.
Сайт наполняется сотрудниками компании «Драйв»

Лишние отступы под картинками в IE 6 и 7

В Internet Explorer 6 и 7, есть много неприятных особенностей, одна из них — лишние отступы под картинками. Для ясности, приведу пример:

Будем использовать следующий html код:

<div class="kiski"> <img src="киски.jpg" width="192" height="150" alt="Киски" /> </div>

CSS для нашего кода:

.kiski { width: 192px; height: 150px; border: 4px solid #eca5a5; }

В данном примере, я использую блочную верстку, но проблема появится и при верстке таблицами.
Решение проблемы до смешного просто и объясняется тем, что в ie, по умолчанию, вертикальное выравнивание картинок имеет атрибут base-line. Достаточно поменять его, в CSS, на значение:

img { vertical-align: top; }

Это не единственное решение проблемы, есть еще несколько, достаточно интересных способов, о которых нужно знать.

Первый способ.
Убираем все пробелы, переносы строк и отступы в коде. Конечно, это не совсем валидно W3C, но работает. Для нашего примера, код будет выглядеть следующим образом:

<div class="kiski"><img src="киски.jpg" width="192" height="150" alt="Киски" /></div>

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

.kiski { width: 192px; height: 150px; border: 4px solid #eca5a5; font-size: 1px; }

Итак, мы выяснили причину нежелательных отступов в Internet Explorer 6 и 7, а также решение этой проблемы. Надеюсь, вам это помогло. Удачи!

Создание сайта doorstal.su. Часть 1

www.doorstal.su — Создание сайта, верстка, движок.

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

1. Предыстория.
Дверных фирм, так же, как и сайтов дверной тематики, очень много. В большинстве, такие сайты являются безыдейными, делаются для галочки, «чтобы было». Руководство таких дверных фирм, не видит перспективы в продажах через Интернет, не хочет прилагать к этому усилий. Мы решили сделать такой сайт, который бы не просто выделялся среди остальных, но и приносил внушительную прибыль. Идея была в создании логичного, простого и, в тоже время, функционального сайта. С возможностью размещения множества информации таким образом, чтобы человек, заходя на сайт, не потерялся. Чтобы можно было выбрать и заказать то, что понравится.

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

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

3. Функционал.
Выбирая дверь, с определенной отделкой, открывается страница, на которой видим фотографию двери, ее описание, цену, а так же цвет и варианты рисунка отделки:

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

Черный цвет отделки		Красный цвет отделки
Голубой цвет отделки		Белый цвет отделки

В форме обратной связи появился секретный код, для предотвращения спама:

На странице «Отзывы», можно оставить отзыв о сайте или фирме и ее услугах. Для предотвращения спама, также используется секретный код:

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

В следующей части я расскажу о редактировании сайта, добавлении новой информации, внутренней структуре и дополнительных модулях.
Читать вторую часть рассказа о создании сайта dorstal.su

Немного о верстке

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

Мы уделяем HTML-верстке особое внимание. В основном, верстаем таблицами, а css пишем в соответствии со стандартами. Все наши сайты одинаково отображаются во всех браузерах — Internet Explorer, Opera, Firefox, Safari и даже браузерах развлекательных систем PlayStation 3 и Wii.

Для верстки не используется специальных программ, все делается вручную. В основном, наши верстальщики используют программу Notepad++, которая прекрасно заменяет блокнот. Отличия — подсветка синтаксиса, простановка табулаторов, работа с несколькими документами, умный поиск, всевозможные плагины и многое другое. Вот так выглядит код нашего блога, в Notepad++:

Обычно, на верстку среднего сайта уходит 4-7 дней. Иногда, нас спрашивают, стоит ли работа таких усилий, ведь обычный человек не замечает этого, ему все равно как выглядит сайт в другом браузере и на разных разрешениях экрана. Отвечаем — безусловно, работа того стоит! К примеру, на сайт пришло 1000 человек, из них у 500 браузер Internet Explorer, у 100 Opera, еще у 300 Firefox и оставшуюся сотню делят люди с другими браузерами. Теперь допустим, что ваш сайт делал не опытный человек, отлаживая сайт, только для Internet Explorer. Результат — 500 человек (половина посетителей) видят сайт совершенно не в том виде, в каком он задумывался, а некоторые вообще не могут его загрузить. Ни один человек, не останется на таком сайте и тем более не будет ничего покупать у такой фирмы.

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

Сайт компании «Каскад»

Компания «Каскад», занимается продажей стальных дверей и прочих изделий из металла. Для их сайта www.dveri-kaskad.ru мы сделали HTML-верстку и запустили сайт на нашем движке.

Главная страница сайта в активном и не активном состоянии: