Курс молодого верстальщика.

Курс молодого верстальщика., Верстать не так уж и страшно.

Опции

erderik

Topic Starter сообщение

12.12.2011, 18:46; Ответить: erderik

Сообщение #21

Новичок

Группа: User
Сообщений: 24
Регистрация: 10.3.2011
Из: Ростов-на-Дону
Поблагодарили: 30 раз
Репутация:

10

Добрый день.
Хочу поделиться своими навыками в html верстке.

Оглавление:
1. Софт
2. Подготовка
3. Смотрим макет (определяемся со структурой)
4. Определяемся с <!DOCTYPE> документа
5. Начинаем (общие правила и фишки)
6. Заканчиваем

Софт
Для последующей работы нам потребуются html-редактор (поддерживающий разные кодировки (cp-1251, utf-8) ), графический редактор (понимающий формат .psd) и любимый браузер (только не IE6

).
Из фришного можно использовать Notepad++ и GIMP, если есть деньги, то Dreamweawer и Photoshop.
Отличия первых от вторых очевидны - удобство, хотя тут на любителя. Например, в отличии от бесплатного Notepad++, у Dreamweawer есть функция автозаполнения тегов, что без сомнения, очень поможет начинающим верстальщикам, а Photoshop гораздо более удобен, логичен и дружествен к пользователю, нежели GIMP.
Также могу заметить, что у любого софта есть триальный (пробный) период, в течении которого можно опробовать тот или иной инструмент.
P.S. Хорошо это или нет, но замечу, что в нашей компании Photoshop и Dreamweawer лицензионные, хоть и покупались давно

P.S.P.S. Софт каждый желающий может использовать любой понравившийся, это не главное, не догма.

Подготовка
Итак, софт установлен, макет есть.
Включаем ненапряжную музыку, расслабляемся, курим, наливаем кофе (на выбор). Далее потребуется полная концентрация и понимание происходящего, желательно поменьше отвлекаться.
Создаем на винте папку mysite, в ней еще папку - images. Именно в папку images будем складывать наши нарезки изображений, которые будут использоваться нашей html-страничкой.
Далее переходим в html-редактор (далее показывать буду на примере Notepad++) и создаем новый документ Файл -> Новый или же просто Ctrl+N. Далее на подобных мелочах останавливаться не будем.
В Notepad++ есть хорошая функция подсветки синтаксиса для определенного языка, чем мы и воспользуемся Синтаксис -> H -> Html.

Ничего не изменилось, но это пока.
Теперь нам нужно задать кодировку документа, выберем UTF-8(без BOM), дабы русские символы на нашей страничке отображались нормально (http://clip2net.com/s/1oskK).
Далее сохраняем документ, чтобы более об этом не задумываться Ctrl + Alt + S . Обязательно имя файла index (это имя файла, являющееся первым, открывающееся по умолчанию на сервере), обязательно выбор данных расширений файлов.

Итак, начало положено.

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

, где
1 - логотип
2 - слоган
3 - контакты
4 - горизонтальное меню
5 - левый блок
6 - область контента
7 - правый блок
8 - футер, подвал
В данном макете специально не используется тест.
Для себя нужно изначально выявить группы блоков, чтобы легче было ориентироваться в струкуре кода и в самом макете. В данном примере можно увидеть, что 1,2 и 3 элементы будут относится к шапке документа, 4(меню) будет обособленным, 5,6 и 7 будут относиться к основному блоку и футер, также, как и меню будет сам по себе.
На этом пока все. Запомнили.

Определяемся с <!DOCTYPE> документа
Останавливаться на этом особо не буду, замечу только, что это очень важно. Если сказать простыми словами - это указание браузеру и валидатору как "понимать" наш код.
Использовать мы будем

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Такой доктайп даст нам большую свободу действий при верстке и валидации документа.
Более подробно тут и тут .
С этим все, продолжаем далее.

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    </head>
    <body>
    </body>
</html>

Итого, внутри тегов <html></html> лежат 2 блока, о которых мы говорили выше, это <head></head> (служебный блок) и <body></body> (контентый блок).
Заметили, что первой строкой идет доктайп, который мы разбирали выше, а тег html обзавелся дополнительными буквами? Про буквы рассказывать особо не буду, посмотрите тут, замечу только то, что в HTML нет, в XHTML обязательны, а мы как раз верстаем xhtml.
Далее добавим в <head></head> название нашей странички (title), кодировку и метатеги keywords и description (ключи и описание)

<title>Моя страница</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="ключевое слово1, ключевое слово2" />
<meta name="description" content="Описание страницы" />

В итоге должно получиться вот так

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Моя страница</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="ключевое слово1, ключевое слово2" />
<meta name="description" content="Описание страницы" />
</head>
<body>
</body>
</html>

Отлично, с шапкой документа мы разобрались, переходим непостредственно к разметке нашего документа.
Как видно на макете, наша станичка имеет фиксированную ширину контента и он расположен посередине.
Также мы видим, что есть черный фон,

который заполняет всю доступную ширину и высоту окна браузера (в будущем).
Далее верстать будем дивами и будем использовать такой термин как враперы (wrappers), оболочки.
Также будем использовать такие определения, как идентификаторы и классы (id и class). Они нужны чтобы задать определенное оформление тому или иному элементу на странице, будь это div, ссылка или ячейка таблицы. Основным отличием id от class является то, что одно имя id может быть ТОЛЬКО ОДНО на странице, в то время как class может повторяться несколько раз, а также свойства, указанные для id будут главнее, нежели для class.
Id и классы можно использовать вместе, что дает дополнительное удобство при верстке, например для id задаем ширину и высоту объекта, а для class - цвет и размер шрифта, который часто повторяется на странице.
Подробнее тут
Пример. Допустимая запись

Недопустимая запись

В id и class приветствуется использование понятных названий, например wrapper, left, footer, никак нельзя использовать русские символы, да и сами имена лучше называть логично, чтобы было легче разобраться потом самому или другому верстальщику, кто будет править Ваш код.

Создаем общую оболочку страницы и сразу присваиваем ей уникальный id wrapp, сразу же закрываем его (о парности и непарности тегов можно прочитать тут, о тегах вообще )

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

Все, структура нашего хедера готова, можно писать css

Два момента. Используйте табуляцию (отступы) для элементов, лежащих внутри других (родительских).
И появился <div class="clr"></div>, о котором расскажу немного позже.

Создаем наш файл css стилей. В Notepad++ Ctrl+N -> Синтаксис -> С -> CSS. Сохраняем его в ту же самую папку, где и index.html, даем название style и расширение .css
Теперь нужно указать нашему html-документу использовать этот лист стилей.
Так как он лежит в той же папке, что и сам index.html пишем в <head></head> следующую запись

Таким образом, получаем

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Моя страница</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="ключевое слово1, ключевое слово2" />
<meta name="description" content="Описание страницы" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapp">
    <div id="header">
        <div id="logo"></div>
        <div id="slogan"></div>
        <div id="contacts"></div>
        <div class="clr"></div>
    </div>
</div>
</body>
</html>

В css для обозначения id используется символ #, для class - . (точка).
Итак, в css файле зададим черный фон для общего тега body, зададим фиксированную ширину и выравнивание по центру для id="wrapp".

body {
background: #000000;
margin: 0;
padding: 0;
}
#wrapp {
width: 980px;
margin: 0 auto;
}

где, margin: 0 auto; - выравнивание по центру для id="wrapp", а margin: 0 и padding: 0 для body - это изначальное обнуление всех отступов на странице. Попробуйте убрать эти строки и посмотрите, что получится.
Подробно на значении тегов останавливаться не буду, так как на это уйдет много времени и букв.
Далее обверстываем остальные блоки в хедере.

#header {
width: 100%;
height: 263px;
background: #a5d357;
}
#logo, #slogan, #contacts {
float: left;
background: #57d397;
}
#logo {
width: 207px;
height: 160px;
margin: 20px 0 0 30px;
}
#slogan {
width: 400px;
height: 20px;
margin: 20px 0 0 50px;
}
#contacts {
width: 100px;
height: 100px;
margin: 20px 0 0 40px;
}
.clr {
clear: both;
}

Остановимся на нескольких моментах.
1) #header {width: 100%; - ширина слоя с id="header" - 100%, то есть займет 100% ширины родителя (#wrapp {width: 980px;), то есть 980пикселей.
2) #logo, #slogan, #contacts { - тут я сгруппировал повторяющиеся свойства для нескольких id, такие как фон и обтекание (что такое обтекание/float читайте тут (http://htmlbook.ru/css/float))
3) margin: 20px 0 0 40px; - обозначение данной записи можно расшифровать так: начиная с вернего края div, по часовой стрелке. Верх (20px), право (0), низ (0), левый край (40px)
Возможны записи margin-left(right, top, bottom): Xpx;
4) .clr - выше я писал о появлении в html записи <div class="clr"></div>. Так вот эта запись в css как-бы обнуляет обтекание предыдущих div-ов

Заканчиваем
В итоге, у нас должна получится шапка на черном фоне, 3-мя дивами, лежащими внутри неё.

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

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

Поблагодарили: (23)

admin, Electric, evegesh, helloff, idlerdog, Kinel, kronos, KS93, kstnews, Lampas, Max_Q, metkram, mr4q, Olezkaya, Raoli, rixter, serezka, su35, TashkentHomeless, un1name1d, vawsan, Незваный, Чеснок

34

Ответить с цитированием данного сообщения

Чеснок Чеснок 13.12.2011, 9:11; Сообщений: 3623 Поблагодарили: 1529 раз Репутация: 262 Просмотр профиля	13.12.2011, 9:11; Ответить: Чеснок Сообщение #22
мошенник Группа: Banned Сообщений: 3623 Регистрация: 9.12.2009 Из: СССР ☭ Поблагодарили: 1529 раз Репутация: 262	Как-раз фотошоп и дримвивер последние купил, пойду чёнть изобразить попытаюсь, может даже на продажу)) (надо же как-то затраты компенсировать) -------------------- Забанен за мошенничество Поблагодарили: (1) erderik

seowayder seowayder 13.12.2011, 9:22; Сообщений: 935 Поблагодарили: 226 раз Репутация: 42 Просмотр профиля	13.12.2011, 9:22; Ответить: seowayder Сообщение #23
Создание и поддержка сайтов Группа: Active User Сообщений: 935 Регистрация: 16.1.2010 Из: Yandex Поблагодарили: 226 раз Репутация: 42	Ещё бы описали работу с Firebug и показали бы там блочную модель - не было бы цены вам Чеснок, дримвийвер - он по-сути нафиг нужен... (z17 @ 12.12.2011, 19:37) качественно начать по ним невозможно. начинать нужно с учебника по html и css и понимания общего принципа построения страниц. с того, почему одни теги парные, а другие нет. со знакомства со всеми основными тегами и понимание как верстать страницы придёт само, по мере изучения. зато к тому времени уже будет хоть какой-то опыт. Полностью согласен, но "толчок" для желающих даст. А верстать нормально научится можно где-то за год учебы, по урокам, учебникам в сети. -------------------- Создание сайтов (визитки, магазины, блоги...) Редизайн, уникализация (редизайн шаблонов, натяжка на cms) Поблагодарили: (1) erderik

Olezkaya Olezkaya 21.12.2011, 20:38; Сообщений: 28 Поблагодарили: 12 раз Репутация: 3 Просмотр профиля	21.12.2011, 20:38; Ответить: Olezkaya Сообщение #24
Новичок Группа: User Сообщений: 28 Регистрация: 23.11.2011 Из: Питер Поблагодарили: 12 раз Репутация: 3	Для меня - человека, который только сегодня начал изучать это муторное дело с сайтами - статья оказалась настолько в кассу, что всё это уже не кажется муторным. Вселенная меня слышит, и подкидывает грамотные статейки! Большое спасибо автору за работу. Вам как раз удалось в сжатой форме донести до верстальщика-младенца некоторые основы, причём с психологическим эффектом "всё довольно просто, смотрите...". А ведь именно такая подача материала и нужна тем, кто делает первые, весьма робкие, шаги. Я даже забыла о том, что читаю конкурсную статью. Казалось, что открыла учебник по основам вёрстки. Ещё раз спасибо. Успехов в работе! Кстати, интересно - по каким критериям будут отбираться победители конкурса? Ведь есть отличные статьи моих коллег-копирайтеров, написанные в занятном стиле, с изрядной долей юмора и, при этом, содержащие реально полезные советы о том, как желательно вести себя на форуме. А есть статьи вроде этой, где всё предельно лаконично, по делу, и без литературных украшательств, которые в данном контексте только мешали бы. Вряд ли будет полезно и приятно читать текст о вёрстке, изрядно приправленный прикольчиками и шутками. Дилемма, однако. -------------------- Делаю интернет интересней icq 625-545-626 Поблагодарили: (1) erderik

vawsan vawsan 21.12.2011, 21:42; Сообщений: 951 Поблагодарили: 371 раз Репутация: 54 Просмотр профиля	21.12.2011, 21:42; Ответить: vawsan Сообщение #25
Trade the Forex! Группа: Active User Сообщений: 951 Регистрация: 20.10.2011 Из: Москва Поблагодарили: 371 раз Репутация: 54	Разобран не самый простой пример, но доступным языком. + -------------------- >> Пока что лучшие VPS << Скидка 5%: A258EX0 Даешь 50 руб --> получаешь 92 за пару минут! >Попробуй на ДЕМКЕ< Поблагодарили: (1) erderik

mafoznik mafoznik 29.12.2011, 17:37; Сообщений: 5 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	29.12.2011, 17:37; Ответить: mafoznik Сообщение #26
Новичок Группа: Viewer Сообщений: 5 Регистрация: 3.11.2010 Поблагодарили: 0 раз Репутация: 0	Не могу создавать пока тему, что бы спросить, поэтому спрашиваю тут. Верстаю сайт, вот такая структура: <body> <div id="wrap"> <div id="main"> <div id="header"> </div> <div id="container"> <div class="top-bg"></div> <div class="sidebar-left"> </div> <div class="sidebar-right"> </div> <div class="content"> </div> <br class="clearfloat"> <div class="bottom-bg"> </div> </div> </div> </div> <div id="footer"> </div> </body> Так вот, строка <div class="bottom-bg"> </div> отвечает за вывод в конце строки вот этой ленточки, которая призвана придать <div id="container"> вид нотной тетради. В общем она должна быть впритык. Естественно я ее подымаю с помощью несложной комбинации margin-top:-YYpx; и все прекрасно в мозиле и ослике ИЕ8. Но вот захожу в Оперу и что я вижу?.. да вот что... Получается в опере этот блок идет выше на пикселей 27. Почему так? я уже пробовал и без блока просто картинку добавить и еще много чего пробовал. Но не могу понять в чем причина. Сброс отступов стоит. Опытные верстальщики, прошу подскажите что делать? Заранее благодарен! Сообщение отредактировал mafoznik - 29.12.2011, 17:38

Мореход Мореход 29.12.2011, 17:52; Сообщений: 48 Поблагодарили: 12 раз Репутация: 1 Просмотр профиля	29.12.2011, 17:52; Ответить: Мореход Сообщение #27
Новичок Группа: User Сообщений: 48 Регистрация: 1.12.2011 Поблагодарили: 12 раз Репутация: 1	(Чеснок @ 13.12.2011, 8:11) Как-раз фотошоп и дримвивер последние купил, пойду чёнть изобразить попытаюсь, может даже на продажу ... Подскажите, с помощью посдеднего Dreamweaver можно делать шаблоны для DLE и WordPress? И какими еще программами вы пользуетесь создавая шаблоны DLE, WordPress? Сообщение отредактировал Мореход - 29.12.2011, 18:03

KS93 KS93 5.3.2012, 23:33; Сообщений: 99 Поблагодарили: 5 раз Репутация: 1 Просмотр профиля	5.3.2012, 23:33; Ответить: KS93 Сообщение #28
Частый гость Группа: User Сообщений: 99 Регистрация: 24.10.2011 Поблагодарили: 5 раз Репутация: 1	Отличная статья, спасибо ТС!) Хотел спросить,вот начал по http://htmlbook.ru изучать, вцелом там все кратко и понятно, но все же хотелось бы узнать: кто и как начинал изучение верстки7 Проще говоря с чего посоветуете начать?

oroom oroom 6.3.2012, 15:42; Сообщений: 300 Поблагодарили: 71 раз Репутация: 20 Просмотр профиля	6.3.2012, 15:42; Ответить: oroom Сообщение #29
Бывалый Группа: User Сообщений: 300 Регистрация: 1.4.2011 Из: Минск Поблагодарили: 71 раз Репутация: 20	(KS93 @ 5.3.2012, 22:33) Проще говоря с чего посоветуете начать? Если новые знания даются вам относительно легко - качаете любой бесплатный psd макет и верстаете. Сложности, возникающие по ходу верстки, решаете тем же htmlbook и googloм. После чего выкладываете свою верстку на обозрение (хотя бы даже и здесь) или показываете знакомым верстальщикам. Внимательно слушаете критику и продолжаете самосовершенствоваться. Сверстав, 5-10 реальных макетов (это займет у новичка месяца 2), а не учебных заданий, вы уже будете достаточно уверенно владеть версткой. Главное не забывайте уделять время и на чтение. Что-то вроде htmlbook и xiper для начала, потом можно найти неплохие топики на хабре. Ну и вот еще несколько примечательных статей: Черенкевич. Как я верстаю Виталий Харисов. Верстка независимыми блоками. Поблагодарили: (1) KS93

MadMax-vs MadMax-vs 8.3.2012, 20:59; Сообщений: 20 Поблагодарили: 4 раза Репутация: 2 Просмотр профиля	8.3.2012, 20:59; Ответить: MadMax-vs Сообщение #30
Новичок Группа: User Сообщений: 20 Регистрация: 3.11.2010 Поблагодарили: 4 раза Репутация: 2	Для получения фундаментальных знаний по верстке рекомендую почитать "CSS. Каскадные таблицы стилей. Подробное руководство" Эрика Мейера

Tolkon Tolkon 9.3.2012, 0:57; Сообщений: 39 Поблагодарили: 2 раза Репутация: 0 Просмотр профиля	9.3.2012, 0:57; Ответить: Tolkon Сообщение #31
Новичок Группа: User Сообщений: 39 Регистрация: 25.2.2012 Из: Беларусь Поблагодарили: 2 раза Репутация: 0	Большое спасибо за статью. Полезная информация для меня в данный момент.

« Предыдущая тема · Конкурсы на форуме · Следующая тема »

1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)

Пользователей: 0

Похожие темы

Тема	Ответов	Автор	Просмотров	Последний ответ
Продвижение молодого сайта	30	maxmer	6602	26.3.2024, 21:49 автор: c4p1t4l15t
Онлайн курс: 5 шагов к успеху за 1 месяц	28	Fubuki	7446	28.12.2020, 1:25 автор: adamsadriane
Обмен: Яндекс Деньги, Киви на ваши WMR, курс 1:1 (без комиссии)	41	Nonsys	22196	22.8.2020, 17:32 автор: Nonsys
Работа для верстальщика и программиста (backend) Нужен верстальщик и программист php	2	byleonid	1479	27.2.2020, 17:53 автор: WoWeb
Ищу помощника верстальщика новичка для сайтов HTML+CSS	2	Didkovsky_net	5190	4.10.2019, 16:53 автор: Didkovsky_net