С чего начать изучение верстки?

Дата: 04.01.2010 | Автор: Игорь Квентор | Рубрика: Практика |

Тэги: css, html, Верстка, изучение верстки

Приветствую вас, друзья мои! Начиная с этого поста, я открываю новую рубрику на блоге Вебсовет под названием Webmaster alive или иначе — Жизненное. Суть данной рубрики — отнюдь не банальный лытдыбр, коего в миллионах жж-шечках и лирушечках и так хватает с избытком. Суть ее в жизнеописании моего собственного опыта становления в качестве действующего вебмастера, как все это начиналось, в каком русле продолжается и какие цели преследуются.

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

Enjoy! :)

Тема сегодняшнего поста: С чего начать изучение верстки? Вопрос этот далеко не праздный, и каждый для себя выбирает собственный путь. Я расскажу о том, как сам начинал это увлекательнейшее путешествие в мир HTML и CSS. Надеюсь, кому-либо из вас это станет если не путеводной звездой, то хотя бы наметками к цели.

Итак, верстка. Кто еще не в танке, слушайте: верстка в данном случае означает не набор свинцовыми буквами свежей статьи в газете “Искра”, а превращение рисованного в Photoshop макета сайта в непосредственно сам сайт. Если выразиться иначе, верстка — это кодирование, запись на языке HTML данных, которые любой уважающий себя браузер преобразует в красивый и понятный сайт. Для рядового посетителя сайта этот код так и останется невидимым, спрятанным за широкой спиной браузера. Однако это вовсе не означает, что он при этом может быть абы каким. Код должен быть красивым, удобным и правильным!

Так с чего же начать изучение HTML? Первое, что приходит на ум — это купить книгу. И чем толще, тем лучше. Возможно, кому-то это и пойдет на пользу. Но лично у меня после некоторого опыта общения с такими талмудами выработался четкий отталкивающий рефлекс. По той простой причине, что информация там подается в избыточном объеме. Помните школу? Среднестатистическому гражданину вовсе ни к чему знать химию, физику, анатомию и пр. в том объеме, который там пытаются заложить в моск. Так и здесь: в толстенной книге много лишнего, а когда его много, то оно затуманивает взор, навевает зевоту и превращает обучение в 2 – 3 дня мучений с последующим забрасыванием данной науки далеко в топку. И все.

Поэтому лично я пошел иным путем. Я таки купил книжицу. Совсем не толстую. И до сих пор не устаю ее рекомендовать своим ученикам, ибо актуальность книги все еще свежа и востребована. Автор книги Артемий Ломов, а называется она “HTML, CSS, скрипты: практика создания сайтов”. Издательство “БХВ-Петербург”. Но одной книги мало. Мой метод изучения отнюдь не нов, но вместе с тем весьма действенный. Нужна не одна книга, а несколько. Фишка здесь в том, что каждый автор пишет немного по-своему. Когда ты одну и ту же тему прочитаешь в разных вариациях, то общая картинка гораздо быстрее становится понятной и намного лучше запоминается. У меня второй такой книгой была электронная версия самоучителя по программе Dreamweaver от Macromedia под авторством Владимира Дронова.

Вообще для начала очень полезно обзавестись данной прогой. Dreamwiever — это визуальный редактор, позволяющий видеть одновременно внешнюю и внутреннюю сторону сайта. То есть, его внешнее представление как для посетителей, так и внутреннее — непосредственно код. Большой плюс данной проги — это возможность просмотреть (опять же в двойном режиме) любой существующий в сети сайт. К примеру приглянулся мне сайт с красивым и удобным размещением блоков, я сохранил целиком страницу с картинками в одной папке, а затем запустил эту страницу в Дриме. И вуаля! Все видно, где и что. Хотя по началу все не так очевидно, как хотелось бы. Вот как раз книга — просто отличный помощник здесь.

Конечно, я уже давно не пользуюсь никакими визуальными редакторами, а обхожусь простым текстовиком вроде PSPad. Но опыт был получен немалый. И самое главное — разносторонний. Отчего сам предмет легко и достаточно структурировано уложился в голове.

Кстати, структура — это наиболее важный фактор при изучении любого языка. А HTML — это тоже язык. И вот об этой структуре я расскажу в следующий раз. А пока вот вам картинка для медитации. Тоже по теме :)

Подпишитесь на RSS

Комментарии (19) на запись “С чего начать изучение верстки?”

Eremkin 04.01.2010 22:02

Картинка реально зачётная)))

Я помню, когда начинал, даже не знал как поставить ссылку, а чтоб сделать её target=”_blank”, это вообще “космос” для меня был ))
Ой, веселое время было) Но все же, потратив больше 9 месяцев, сделал свой первый сайт _http://pokernice.ru/
CSS Ninja 05.01.2010 01:54

Я учился по урокам Эрика Мейера (lynda.com) и скринкастам на сайте css-tricks.com, рекомендую.
Твипл 05.01.2010 11:40

Программка называется Dreamweaver, поправьтесь пожалста :)
bescom 05.01.2010 16:53

Эт что - я свой первый сайт в WORDe делал. :-) Вот где жесть-то…
ацкий Одмин 20.01.2010 16:05

Структура ХТМЛ - это здорово наверное, и очень нужно…только не самое сложное. В ней вообще все прозрачно, в сравнении с ПХП например. Про CSS вообще молчу.
Дримвивер - очень полезная штука(наверное все-же для начинающих, так?) Только жаль, что Адоб угробила его разработчика. Последняя родная версия(от Макромедиа, вроде 2004 или МХ) работала намного надежнее, чем нынешние от Адоба(или только у меня?).
Аффтар, все написанное замечательно и правильно. Но вот такой вопрос - совершенно нет в голове визуальной, четкой картины-представления, как располагаются блоки при блочной верстке. Что делать с этим? Дрим мне к сожалению, не помогает - с адобовским работать не могу, есть 8-й от Макромедиа, но он не все отображает корректно.
Пробовал Namo WebEditor 2008 - отличная штука, во многом может и лучше Дрима, но тоже не все корректно отображает.
А ты, аффтар, все так-же “привязан” к вордпресс?
Игорь Квентор 20.01.2010 19:47

Тезка, вы вот трудитесь в сфере образования, а такими словами отстойными пользуетесь. Не кошерно, ей богу!
Первое представление о блочной верстке и вполне доступное есть в моей книге одноименного названия, которую здесь можно скачать бесплатно.
Я ни к чему не привязан, но ВП уважаю и пользую его практически во всех своих текущих проектах.
ацкий Одмин 21.01.2010 18:15

Где некошерно? Перечитал свой коммент, нашел только одно некошерное слово - “угробила”.
Или вы, тезка, про мой бложек? Ну так извините, а что делать, если некоторые инсинуации “операционной” системы с позволения сказать Виндовз ХР вызывают именно такие слова(и это еще мягко сказано)? Вам никогда не доводилось включив компьютер, когда перед этим все нормально выключил, получать сообщение о том, что мол NTLDR not found, вот так, ни с того ни с сего? И как раз тогда, когда тебя душат - давай-давай, быстрее-быстрее? Впрочем, спасибо за науку. Поправлю на анатомический термин. Вы прав.
Весьма жаль, что используете только вордпресс, и так глобально. (((
Хочется обратить ваше внимание на очень достойную отечественную (в смысле, российскую) разработку ngcms (ngcms.ru). Если вы сравните даже только установки, то уже почувствуете разницу(хотя-бы - вводить требуемые параметры, залезши в код, или делать это прямо в инсталляторе).
Впрочем, не агитирую ниразу - хочется “воевать” с дырявым, штопаным-перештопаным монстром - извольте-с.
Игорь Квентор 21.01.2010 19:59

Нет, я имел в виду слово “аффтар”.

Про ngcms не слышал. Надо будет поковырять на досуге. Хотя в наметках уже был прицел на MaxSite. Говорят, тоже гораздо легче, чем ВП в плане нагрузки.
ацкий Одмин 21.01.2010 22:16

Ну вы меня поражаете, тезка. Неужели Ацкий Одмин не имеет права иногда вставлять словечки на олбанском? ))))
Да, знаю МакСайт. Не спорю, хорошая КМС. Есть пара моментов, по которым у меня с ней не срослось (пока). Самый главный - там надо не только очень хорошо знать верстку, но и достаточно разбираться в ПХП. Создалось впечатление, что Макс ее написал больше под себя, чем для сторонних пользователей(инсталлятор там аналогичный вп, это уже о многом говорит). И по шаблонизатору она курит в сравнении с NG в плане простоты. Так, не агитирую ниразу. Только голые факты: под НГ даже на раз переделываются шаблоны от ДЛЕ, не говоря уже о том, что очень легко натягивается любой хтмл-ный. Насчет нагрузки не знаю, но по тестам скорости генерации страниц Максайт у меня на локале NG-шечке все-же проигрывала(правда, версия была аж 0.32).Вполне допускаю, что Денвер - не тестовая площадка для таких тестов ни разу.
Впрочем если разобрался с шаблонами в вп, и его фокусами, то и Максайт будет за счастье - она вроде и правда понадежнее, не так часто обновления выходят. Но если будешь качать последнюю версию (0.37), обрати внимание -там в комментах чел написал про проблемы с XSS-уязвимостью. Макс ему ответил, что выложил обновление с исправлениями, но на сайте той указанной версии я не нашел. Странно как-то.
Игорь Квентор 22.01.2010 21:38

Окей! Спасибо за инфу! :)
Олег 27.01.2010 10:59

Добрый день!
Сори, если не в тему.
Столкнулся с ситуацией при переводе шаблона: мигает и исчезает заголовок в четырех виджетах шаблона.
Все виджеты самописные автора
Стоят в подвале.
Вот ссылка на авторский демо: http://www.woothemes.com/demo/object/
Вот - на мою демку с переводом: http://www.bestwordpress.org.ua/demo/
Мигание заголовков хорошо видно из Оперы.
Нашел место в файле стилей которое отвечает за вывод заголовка
Нашел место в файле пхп которое выводит каждый из виджетов
Не могу понять - почему мигает и исчезает.
Есть подсказка?
Еще раз, сори за кучу ссылок.
Дам последнюю: я запостил этот вопрос на форуме русского wordpress - http://mywordpress.ru/support/viewtopic.php?id=13677
Игорь Квентор 27.01.2010 13:11

Здравствуйте, Олег! В коде есть странное включение вида:

<canvas width="25" height="17" style="top: -2px; left: -2px;"/>

У меня в Опере страница вообще открылась наполовину, как раз до этих блоков с виджетами. Если убрать указанную строку (в трех местах), то все работает исправно.
Олег 27.01.2010 14:23

Игорь, это странное включение появилось после ответа мне на форуме русского вордпресс (ссылку я писал).
когда поставил код - заработало во всех браузерах кроме Оперы, у Оперы как раз “захлопнулоьсь” все, включая подвал со ссылками. Спасибо за варинт решения, сейчас попробую удалить эту часть кода.
Олег 27.01.2010 14:54

Спасибо, Игорь, ваша помощь оказалась самой верной.
Если бы вы нашли время объяснить начинающему - почему этот код помог устранить “баг” с миганием заголовков, наверное, было бы интересно не только мне.
Сейчас с интересом читаю ваши книги. Лучшего еще в Сети не видел.
Удачи вам!
Олег 27.01.2010 19:18

Игорь, если не сильно надоел… на форуме в той же ветке продолжение проблемы с миганием, только теперь на страницах, которые автор сделал как дополнения - Архив и Карта, я на форуме описал проблему, по моей ссылке что вверху - страницы активны….
С уважением,
Олег
Игорь Квентор 27.01.2010 19:56

Олег, как я уже и показал - ошибка в использованных тэгах. Совершенно непонятно, для чего используется такая сложная конструкция со span и совершенно левым тэгом canvas, который входит в спецификацию HTML5 и поддерживается пока что далеко не всеми браузерами. Мой вам совет: выбросите все эти навороты и пропишите прямо в файлах темы необходимые заголовки, используя простейшую конструкция <h3></h3>
Олег 27.01.2010 20:07

Игорь, не стал бы лезть к вам и отвлекать, но я так и делал с самого начала, пытался заменить простыми и понятными даже мне конструкциями… Но.
Увидел подобие на шаблонах страниц, стал смотреть код, и увидел, что какая-то проблема связана с моей попыткой перевести шаблон на русский. Вернул в тэги английский текст, все работает, вставляю русский - только мигает…
Согласитесь, что здесь что-то другое.
А вот та утренняя проблема со сложным и запутанным спаном помогла мне и мигание прекратилось… Значит, что-то в этом есть?
Единственное, что после вашего совета убрал кусок кода спан, т.к. свойство нормально работало во всех браузерах, кроме Оперы.
Игорь Квентор 27.01.2010 21:52

Олег, вы меня не отвлекаете :) Просто мой этот пост совсем на другую тему, поэтому не хотелось бы в комментариях уходить от тематики.
Олег 27.01.2010 22:32

Я извинялся вначале.
Поэтому и запостил на форуме :)