Helpful hints for markup beginner (in Russian)

Вступление

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

Систематизация процесса

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

Собственно, перейдем к процессу верстки. Я всегда практиковал раздельное написание HTML и CSS. И не я один. По ситуации конечно, но если у вас не слишком сложный проект, то лучше сначала полностью прописать HTML, а потом уже браться за CSS. Для этого необходим уже некоторый опыт, зеленому верстальщику сложно будет сразу разложить все по полочкам, так сказать, порезать дизайн в голове. Но к этому необходимо стремится. Это не только упростит работу, но и ускорит ее. Я, к примеру, сначала вбиваю весь HTML, потом прописываю названия классов в CSS на основе готового HTML'a (чтоб ничего потом не пропустить), а потом методично заполняю CSS, попутно вырезая все нужные картинки из дизайна и просматривая всю эту радость в IE. Почему в IE думаю понятно не только верстальщикам, но даже людям далеким от верстки :)

Через некоторое время работы (буквально пару месяцев) вы обнаружите, что некоторые элементы вы просписываете практически идентично в каждом проекте. DOCTYPE, div id="header", логотип или фильтры png для IE6. И сразу возникает мысль: а на кой черт я, как папа карло, трачу свое время лишний раз? Или ситуация наподобие: надо сделать дроп-даун меню, где-то я уже это делал и скрипт переписывать впадлу и — пое-е-ехали рыскать по предыдущим проектам в поисках заветных 10 строчек javascript'a. Есть, как по мне, единственно верный способ сократить поиск нужных элементов до минимума — это набор заготовок (темплейтов). Заготовок кода всевозможных элементов, будь-то почти стандартный CSS для логотипа или lightbox на jquery. По мере продвижения работы вы сами поймете, какие элементы вам нужны. Не обязательно часто повторяющиеся. К примеру, когда у вас накопится 100 проектов, в следующем нужно будет сделать какой-нибудь аккордион и у вас он уже где-то был, но ёпт, где же?! Вот и темплейты вам в помощь. Самым главным темплейтом я считаю заготовку под пустую страницу, и вам рекомендую. Вот, например, мой темплейт CSS:

html{font-size:100.01%;}
body{
	margin:0;
}
/* GENERAL */
img{border:0; display:block;}
form{display:inline;}
.hidden{
	display:block;
	overflow:hidden;
	text-indent:-9999px;
}
p{
	margin:0;
	padding:0;
}
ul{
	margin:0;
	padding:0;
	list-style:none;
}
.float-left{float:left !important;}
.float-right{float:right !important;}
a:focus{outline:none;}
h1, h2, h3, h4, h5, h6{
	margin:0;
	padding:0;
}
/* MAIN */
#main{
	
}
/* HEADER */
#header{
	
}
/* CONTENT */
#content{
	
}
/* FOOTER */
#footer{
	
}

Стандартная раскладка блоков, некоторые часто используемые стили, как .hidden или просто .float-left, обнуление некоторых тегов (типа не рекомендуется, но я забиваю) и т.д. и т.п. Здесь лежит мой полный набор темплейтов. Но я думаю любой сможет сделать что-то свое, более ему подходящее.

Ну и естественно хоткеи. Куда ж без них. Ей богу, пока не открыл для себя хоткеи в Dreamweaver'e, вообще понятия не имел, как это — быстро работать. После проставления горячих клавиш на strong, a, ul, li, table, tr, td и прочие время работы сократилось в 2-3 раза. Тоже касается и Photoshop'a, хотя тут и так многое стоит по default'y, но кое-что все-таки добавить стоит. К примеру, «scale» и «canvas size». Главное только убедиться в удобности использования тех хоткеев, что вы проставили. Чтобы ради одного span'чика не надо было двумя руками обхватывать клавиатуру. Ну а так, в принципе, больше распинаться о преимуществах горячих клавиш нет смысла —они очевидны. Хоткеи нужны и это факт!

Самоанализ

Все, что я навоял выше, это конечно хорошо, упрощает и ускоряет работу, но это только вспомогательные вещи. Если у вас есть большой набор темплейтов и каждый тег оптимально прописан в хоткеях, это не значит, что вы в момент начнете клепать по 5 сайтов в день. Необходима некоторая база, а еще важнее периодически проводить анализ и пересмотр методов собственной верстки. Я, за время работы верстальщиком, кардинально менял стиль порезки раз в 3 месяца. В лучшую сторону, конечно :) Самоанализ — великая штука. Надоели float'ы — убейте их нафиг и сделайте по-человечески! И делайте код чище, чтоб еще кто-то кроме вас мог в нем разобраться. А в гавнокоде черти водятся.

Цели и стимулы

Начиная с некоторого момента, стимулы становятся чуть ли не главной двигательной силой всего рабочего процесса. Вначале они рождаются сами собой: новые знания, работа, впечатления. Но со временем приходится самому ставить перед собой всевозможные цели. И даже столь важно какие именно, будь то зарплата или просто «я хочу стать самым крутым перцем в этой фирме». Главное, чтоб они были и желательно несколько, чтоб при утрате одних стимулов еще оставалось парочку в запасе. Особенно это помогает в тяжелые моменты, вроде депрессняка или просто утром встали не с той ноги. Что мне еще часто помогало (но не всегда получалось) — это некая планка, ниже которой никогда нельзя опускаться. Это и самодисциплина, и некая стабильность, и, может быть, уважение начальника/клиента.

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

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

(Статья от 05.11.2008)