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

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

Опции

erderik

Topic Starter сообщение

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

Сообщение #1

Новичок

Группа: 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

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

metkram metkram 12.12.2011, 18:50; Сообщений: 1263 Поблагодарили: 364 раза Репутация: 38 Просмотр профиля	12.12.2011, 18:50; Ответить: metkram Сообщение #2
Старожил Группа: Active User Сообщений: 1263 Регистрация: 15.2.2010 Из: Украина Поблагодарили: 364 раза Репутация: 38	Я изучал верстку по другой методике, которая занимала больше места. А тут все очень кратко и понятно описано. Большое спасибо за труды -------------------- Купи и эту строчку Купи и эту строчку Комплексный прогон сайтов ru и en Поблагодарили: (1) erderik

rixter rixter 12.12.2011, 19:02; Сообщений: 23 Поблагодарили: 6 раз Репутация: 0 Просмотр профиля	12.12.2011, 19:02; Ответить: rixter Сообщение #3
Новичок Группа: User Сообщений: 23 Регистрация: 12.8.2010 Поблагодарили: 6 раз Репутация: 0	Быстрый старт для новичка. Очень порадовали ссылки на источники. htmlbook вообще "настольный" сайт, шпаргалка на все случаи. Поблагодарили: (1) erderik

dfyz dfyz 12.12.2011, 19:04; Сообщений: 1632 Поблагодарили: 249 раз Репутация: 39 Просмотр профиля	12.12.2011, 19:04; Ответить: dfyz Сообщение #4
SEO, Сервера, Сайтостроение... Группа: Banned Сообщений: 1632 Регистрация: 4.8.2008 Поблагодарили: 249 раз Репутация: 39	Давно хотел научиться верстать, обязательно прочту. Спасибо Поблагодарили: (2) erderik, lostprophet

h82w8 h82w8 12.12.2011, 19:27; Сообщений: 24 Поблагодарили: 3 раза Репутация: 0 Просмотр профиля	12.12.2011, 19:27; Ответить: h82w8 Сообщение #5
Новичок Группа: User Сообщений: 24 Регистрация: 3.12.2011 Поблагодарили: 3 раза Репутация: 0	Как то давно интересовался, как верстать шаблоны. И тут попалась на глаза статья, спасибо. Поблагодарили: (1) erderik

Незваный Незваный 12.12.2011, 19:31; Сообщений: 243 Поблагодарили: 40 раз Репутация: 5 Просмотр профиля	12.12.2011, 19:31; Ответить: Незваный Сообщение #6
Участник Группа: User Сообщений: 243 Регистрация: 23.10.2011 Поблагодарили: 40 раз Репутация: 5	Полезная статья, спасибо ТС! Поблагодарили: (1) erderik

Molderjkee Molderjkee 12.12.2011, 20:09; Сообщений: 1384 Поблагодарили: 294 раза Репутация: 69 Просмотр профиля	12.12.2011, 20:09; Ответить: Molderjkee Сообщение #7
Старожил Группа: Active User Сообщений: 1384 Регистрация: 22.10.2010 Из: Москвы Поблагодарили: 294 раза Репутация: 69	Интересная получилась статья. Буду пробовать.... Давно хотел научиться Сообщение отредактировал Molderjkee - 12.12.2011, 20:10 -------------------- CamelHost - лучший хостинг для СДЛ всего за $5 в месяц! Поблагодарили: (1) erderik

erderik Topic Starter erderikTopic Starter 12.12.2011, 20:14; Сообщений: 24 Поблагодарили: 30 раз Репутация: 10 Просмотр профиля	Topic Starter 12.12.2011, 20:14; Ответить: erderik Сообщение #8
Новичок Группа: User Сообщений: 24 Регистрация: 10.3.2011 Из: Ростов-на-Дону Поблагодарили: 30 раз Репутация: 10	Всем спасибо за комментарии и отзывы, буду рад если эта статья кому-то поможет начать!))

z17 z17 12.12.2011, 20:37; Сообщений: 348 Поблагодарили: 79 раз Репутация: 12 Просмотр профиля	12.12.2011, 20:37; Ответить: z17 Сообщение #9
Бывалый Группа: User Сообщений: 348 Регистрация: 2.5.2011 Из: Санкт-Петербург Поблагодарили: 79 раз Репутация: 12	никогда не понимал смысла таких статей. качественно начать по ним невозможно. начинать нужно с учебника по html и css и понимания общего принципа построения страниц. с того, почему одни теги парные, а другие нет. со знакомства со всеми основными тегами и понимание как верстать страницы придёт само, по мере изучения. зато к тому времени уже будет хоть какой-то опыт. -------------------- Мой блог Поблагодарили: (1) erderik

erderik Topic Starter erderikTopic Starter 12.12.2011, 20:58; Сообщений: 24 Поблагодарили: 30 раз Репутация: 10 Просмотр профиля	Topic Starter 12.12.2011, 20:58; Ответить: erderik Сообщение #10
Новичок Группа: User Сообщений: 24 Регистрация: 10.3.2011 Из: Ростов-на-Дону Поблагодарили: 30 раз Репутация: 10	z17, а никто не говорит о том, что по данной статье нужно или можно начинать. Статья рассчитана на тех, кто хочет начать, но боится или еще не готов. Она призвана простимулировать начать, показать, что это действительно несложно. Нужно только захотеть и немного попотеть ))))) А в конце статьи даны ссылки на базовые самоучители, для начала вполне хватит. Думаю, я Вас правильно понял и ответил на Ваш пост.

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

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

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

Похожие темы

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