Вы здесь : Статьи HTML-верстка ведет к идеальному результату
 
 

HTML-верстка ведет к идеальному результату

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

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

Первым шагом, с чего начинают верстку, является, что может показаться странным, дизайн. До того, как будет проставлен первый тег в html-документе, верстальщик очень внимательно должен «прошерстить» представленные макеты дизайна от верха до низа, вдоль и поперек. Суть в том, что дизайнерское мышление и мышление верстальщика чаще всего различаются. Эти различия могут потом превратиться в весьма серьезные проблемы, для устранения которых потом понадобиться немало времени, денег и, конечно же, нервов. Лучше уж на начальном этапе предусмотреть все возможные в будущем неприятности.

Дизайнерская рука рисует «красивую картинку», чаще всего не задумываясь о возможности технически претворить ее в жизнь при помощи средств Интернет-сайтов. Задача верстальщика состоит в том, чтобы вовремя, то есть до начала процесса верстки, оценить соответствие дизайна тем задачам, которые были поставлены в техзадании, а также реальные реальности для воплощения дизайнерских задумок в html-коде.

Рассмотрим такой пример из практики. Техзадание прописывает, к примеру, «резиновую» ширину сайта. В таком случае  по ширине он занимает все окно браузера, растягиваясь или сужаясь автоматически в зависимости от его величины. Но в макете изображается фоновое изображение, строго фиксированное по ширине, либо могут отсутствовать детали оформления, которые позволяют для растягивания сайта «клонировать» их.

В макете может быть и текст блока, который обтекает по плавной дуге элемент оформления. Средства html-верстки позволяет сделать такой текст лишь в виде картинки. Это исключает его легкое изменение обычной печатью с помощью клавиатуры. Или, например, дизайнер представляет макет, имеющий широкое фоновое изображение, используемое «подложкой» сайта, однако не предусмотрел, как оно будет смотреться на большом мониторе, имеющем разрешением экрана 1600х1200 пикселей.

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

  1. во-первых, выявлять несоответствия,
  2. во-вторых, разрешить их тем либо иным способом, во избежание проблем на будущих этапах работы.

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

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

При просмотре и оценке дизайна рекомендуется еще один процесс, проведение которого надо осуществить до начала верстки. Следует продумать и построить основной каркас html-верстки разрабатываемого сайта: распределить содержимое сайта по блокам («шапка» и «подвал», левая колонка и основная часть), и прикинуть каким способом блоки будут сверстаны и как будут взаимодействовать между собой. Часто верстальщики в работу кидаются с размаха, словноныряльщик в холодное море. Онипроявляютв html-коде какую-то одну часть сайта, к примеру, так называемую шапку веб-сайта. После завершенияэтой части работы сталкиваются с «подводными камнями»: например, «подвал», по идее должен всегда быть привязанным к нижнему краю окна браузера, но при таком способе верстки оказывается в другом месте. Либо интерактивные окна, которые по макету всплывают за межами основных блоков, режутся версткой по границам блоков. Для исправления ситуации, горе-верстальщику приходится полностью менять принятую изначальную раскладку. Так теряется время и портится настроение.

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

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

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

Далее приступаем к основному этапу работы – непосредственно к html-верстке. Мы рекомендуем сначала верстать «голый скелет» сайта, который состоит из основных блоков без наполнения контентом. Это необходимо для уверенности в правильном поведении блоков. Далее приступаем к детальной проработке отдельных частей «каркаса». Это похоже на стройку дом: делается сначала грубая коробка этажей, панели и перекрытия, а потом осуществляется косметическая отделка каждой квартиры.

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

После завершения верстки раскладка сайта надо приступать к детальной проработке каждого блока, планомерно и тщательно перенося детали дизайна в код. Здесь, как и при верстке раскладки, надо соблюдать такие правила:

  • Стили переносятся из кода страниц в специально предназначенные для них таблицы стилей. этим облегчаем код и к более быстро его загружаем, а также в будущем облегчаем работу по внесению на сайт изменений. После внесения всех стилей по максимуму в таблицу стилей, достаточно в ней лишь изменить нужные строки, и исчезнет необходимость «шариться» по различным php-шаблонам, чтобы разыскать кусок кода, требующего изменения. На практике замечено неоднократно, что при несоблюдении этого правила при работе с осуществленной другими верстальщиками версткой работа существенно усложняется.
  • Html-верстка проверяется во всех браузерах: Интернет Эксплорер 6, 7 и 8, Opera, Firefox, Google Chrome, Safari. Результат - кроссбраузерная верстка, то правильное отображение кода сайта, независимо от установленного браузера на компьютере пользователя. Этот факт является основой основ верстки, однако, к сожалению, на чужой верстке сайтов убеждаешься в игнорировании некоторыми верстальщиками отдельными видами браузеров, или некоторыми версиями определенных браузеров.
  • Каждый структурный элемент верстки, вносимый в код, проверяется в каждом из отдельных браузеров. Осуществили прописку блока с логотипом -  посмотрели его во всех браузерах, сделали прописку рядом с логотипом блока текстового описания - опять посмотрели везде, проверили, протестировали. И так - для каждого кусочка пишущегося кода. Внимательно, педантично и аккуратно. Это несколько замедлит работу, но позволит четко отследить взаимодействие частей кода. Если верстальщик тестирует работоспособность всего сайта лишь в одном либо нескольких браузерах, а в остальных браузерах проверяет код после завершения работы, возникают проблемы. Например, если сайт «плывет», сложно понять, какой именного участок кода влияет на его не корректное отображение. При поэтапной и частой проверке такие проблемы не возникают.
  • Соблюдение структурной четкости кода: наличие обязательных одинарных пробелов между элементами стилей; обязательными являются закрывающиеся точки с запятой у свойств стилей; обязательно отделять пробелами вложенных элементов, которые создают визуальную наглядность «дерева» кода; условные комментарии, которые указывают начало и конец структурных блоков; каждый тег html начинается с новой строки. Может эти требования и покажутся излишними, но скрупулезное и четкое внимание ко всем знакам кода сводит ошибки к минимуму, упрощает код максимально и делает его красивым, чистым и легко читаемым. Когда возникают ошибки - полностью их ведь избежать не удается, людям свойственно также ошибаться – подобное отношение позволяет их легко найти и исправить быстро, потратив для этого минимум сил и времени.

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

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

 
 
 
 
 
 
  • Сайт визитка

  • Сайт стандарт

  • Сайт каталог

  • Интернет магазин

  • Замена CMS

  • Контекстная реклама

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

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

Целевой аудиторией «Сайта-Каталог» является средний класс. На сайте заказчика размещается полная информация о его деятельности, товарах и услугах, снабженная элементами интерактивности. Также существует возможность обновлять ленту новостей, быстро изменять данные, например, цены в прайс-листе, проводить социологический опрос. На «Сайте-Каталог» находится гостевая книга и доска объявлений, с помощью которых владелец сайта сможет всегда прочитать мнение посетителей о сайте, товарах и услугах, ответить на заданные вопросы. Разработка сайтов Клин.

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

Создание сайтов - замена CMSЕсли Вас не устраивает Ваша CMS (система управления сайтом) мы можем ее заменить. При этом все текстовые и фотоматериалы на Вашем сайте сохранятся.
Выбор системы управления сайтом может оказаться делом весьма не простым. Прежде всего нужно сформулировать набор требований и определить какими функциональными возможностями должна обладать система чтобы решать ваши задачи! Конечно можно поставить самую дорогую версию CMS где "всё включено" но зачем переплачивать за функциональные возможности, которые Вам никогда не понадобятся.

Создание сайтов - Контекстная рекламаПреимуществом контекстной рекламы является то, что она размещается на самых посещаемых Интернет-ресурсах – в поисковых системах.
Мы размещаем рекламу в самых известных поисковиках— в России это Яндекс, Mail.ru, Google, Рамблер, Aport, основные мировые площадки – Google и Yahoo. Ежедневно на эти сайты приходят множество людей в поисках нужного товара или услуги.Мы подбираем ключевые слова, соответствующие Вашей рекламной кампании по тематике, и покупаем по ним рекламу у поисковых систем. Посетители, которые вводят эти слова в строке поисковика, видят Вашу рекламу. Например, если пользователь ввел слова «сдать квартиру» или «купить недвижимость», в результатах поиска он получит контекстную рекламу, размещенную агентствами недвижимости.