Отправляет email-рассылки с помощью сервиса Sendsay
  Все выпуски  

Начинающему веб-мастеру посвящается


Рассылка Начинающему веб-мастеру посвящается

Приветствую вас, уважаемый подписчик! Вы читаете второй выпуск рассылки сайта SdelaySite.com.

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

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

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

Содержание, которое я написал, это не просто перечень постов моего блога для начинающего веб-мастера; это статья, в которой обозначены все этапы работы над созданием мощного интернет-проекта. Детальное понимание и правильная реализация каждого этапа работ приведет к успеху в веб-строительстве. Кроме того, в статье описаны тематические рамки, в которых будет происходить наше с вами обучение от уровня новичка в области веб-строительства, до сложившегося специалиста с достаточным багажом знаний. Приглашаю вас познакомится с содержанием (в комментариях можно предлагать дополнительные темы для изучения, которые вас интересуют).

 


Верстка сайта

Верстка сайта

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

Что же такое верстка сайта и что от нее зависит.

Верстка сайта - это процесс преобразования дизайна в HTML и CSS код, который интерпретируется браузером.

Под дизайном здесь я понимаю изображение, имеющее, в большинстве случаев, формат Photoshop, расширение *.psd.

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

Еще несколько лет назад все сайты верстались таблицами. Это был единственный инструмент, позволявший позиционировать блоки на странице. Поскольку таблица не предназначена для позиционирования блоков, то такой подход к верстке имеет ряд минусов:

  • Для того, чтобы обозначить один блок кода необходимо применить вот такую конструкцию: <table><tr><td>Содержимое блока</td></tr></table>.
  • В случае верстки сложного макета, приходится использовать таблицы, вложенные одна в другую. Это приводит к значительному усложнению HTML-кода. И для того, чтобы что-то поправить, приходится проводить не один десяток минут в раздумьях.
  • Из-за большого количества дополнительных тегов серьезно увеличивается вес загружаемой страницы.

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

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

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

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

И так, приглашаю вас приступить к изучению материала: базовый видеокурс Верстка сайта (блочный подход, div верстка).

 

С уважением, Андрей Морковин.

До встречи в следующих выпусках.


В избранное