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

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

Опции

erderik

Topic Starter сообщение

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

Сообщение #11

Новичок

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

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

oldman oldman 12.12.2011, 21:04; Сообщений: 39 Поблагодарили: 6 раз Репутация: 3 Просмотр профиля	12.12.2011, 21:04; Ответить: oldman Сообщение #12
Новичок Группа: User Сообщений: 39 Регистрация: 1.12.2010 Из: Omsk Поблагодарили: 6 раз Репутация: 3	Может ответите заодно чем вызван выбор именно синтаксиса xhtml? Про transitional я уж промолчу. -------------------- не все валидно, что не видно

erderik Topic Starter erderikTopic Starter 12.12.2011, 21:11; Сообщений: 24 Поблагодарили: 30 раз Репутация: 10 Просмотр профиля	Topic Starter 12.12.2011, 21:11; Ответить: erderik Сообщение #13
Новичок Группа: User Сообщений: 24 Регистрация: 10.3.2011 Из: Ростов-на-Дону Поблагодарили: 30 раз Репутация: 10	oldman, если в двух словах xhtml transitional менее строг при валидации и позволяет гораздо больше чем строгий html. По крайней мере так понял я, если я в чем-то не прав буду рад правкам.

oldman oldman 12.12.2011, 21:18; Сообщений: 39 Поблагодарили: 6 раз Репутация: 3 Просмотр профиля	12.12.2011, 21:18; Ответить: oldman Сообщение #14
Новичок Группа: User Сообщений: 39 Регистрация: 1.12.2010 Из: Omsk Поблагодарили: 6 раз Репутация: 3	Вопрос был про синтаксис xhtml, если вы не поняли. и я ведь уже сказал, что Про transitional я уж промолчу. -------------------- не все валидно, что не видно

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

oldman oldman 12.12.2011, 21:44; Сообщений: 39 Поблагодарили: 6 раз Репутация: 3 Просмотр профиля	12.12.2011, 21:44; Ответить: oldman Сообщение #16
Новичок Группа: User Сообщений: 39 Регистрация: 1.12.2010 Из: Omsk Поблагодарили: 6 раз Репутация: 3	Во-первых: XHTML – это одно из XML-приложений, но никак не последняя версия html, коей является html 4.01 Во-вторых, xhtml сохраняет все особенности html, но привносит более строгие правила в создание страниц, что позволяет приблизится к "идеальному коду" - что мешает приблизиться к идеальному коду в html 4.01, и, раз уж вы заговорили об идеальности - то в Strict, и как это сопоставить с если в двух словах xhtml transitional менее строг при валидации и позволяет гораздо больше чем строгий html ? -------------------- не все валидно, что не видно

TMechanic TMechanic 12.12.2011, 23:28; Сообщений: 43 Поблагодарили: 6 раз Репутация: 0 Просмотр профиля	12.12.2011, 23:28; Ответить: TMechanic Сообщение #17
Новичок Группа: User Сообщений: 43 Регистрация: 13.11.2011 Поблагодарили: 6 раз Репутация: 0	(oldman @ 12.12.2011, 20:04) Может ответите заодно чем вызван выбор именно синтаксиса xhtml (oldman @ 12.12.2011, 20:44) но никак не последняя версия html XHTML 1.0 - это переформулировка стандарта HTML 4.01 в соответствии с правилами XML 1.0, практически в точности повторяет функциональность HTML 4.01, но представляя собой компактное подмножество SGML (HTML - тип документа SGML), отличается более строгими и однозначными правилами XHTML включает три типа документов, как и HTML 4: Strict (четкое соблюдение разметки), Transitional (более либеральный, больше возможностей для визуального представления данных) и Frameset По моему мнению XHTML практичнее Поблагодарили: (2) erderik, lostprophet

lostprophet lostprophet 13.12.2011, 2:01; Сообщений: 2623 Поблагодарили: 3367 раз Репутация: 298 Просмотр профиля	13.12.2011, 2:01; Ответить: lostprophet Сообщение #18
Squares are loaded Группа: Super Moderator Сообщений: 2623 Регистрация: 18.11.2008 Из: Ростов-на-Дону Поблагодарили: 3367 раз Репутация: 298	oldman, вот взяли бы и рассказали, чем одно от другого объясняется. Или в ЛС с ТС потолковали бы. -------------------- Верстка, Joomla \| Более 7-ми лет пользуюсь этим хостингом Поблагодарили: (1) erderik

LeeRon LeeRon 13.12.2011, 2:26; Сообщений: 253 Поблагодарили: 70 раз Репутация: 16 Просмотр профиля	13.12.2011, 2:26; Ответить: LeeRon Сообщение #19
Бывалый Группа: User Сообщений: 253 Регистрация: 6.12.2009 Поблагодарили: 70 раз Репутация: 16	спасибо за статью, ничего нового не узнал но повторение мать учения =) -------------------- Портфолио \| HTML+CSS верстка \| icq#454 400 082 Поблагодарили: (1) erderik

oldman oldman 13.12.2011, 5:44; Сообщений: 39 Поблагодарили: 6 раз Репутация: 3 Просмотр профиля	13.12.2011, 5:44; Ответить: oldman Сообщение #20
Новичок Группа: User Сообщений: 39 Регистрация: 1.12.2010 Из: Omsk Поблагодарили: 6 раз Репутация: 3	(lostprophet @ 13.12.2011, 4:01) oldman, вот взяли бы и рассказали, чем одно от другого объясняется. Или в ЛС с ТС потолковали бы. сам не стану, т.к. лучше чем уже истолковано, еще в январе 2008 года Константином Ефимовым у меня врядли получится. Наберитесь терпения и почитайте, если вас действительно интересует вопрос. (TMechanic @ 13.12.2011, 1:28) По моему мнению XHTML практичнее - чем? И для каких задач? Для подавляющего большинства сайтов, а это и ГС, и доры, и дорвеи, да и СДЛ применение этого синтаксиса не оправдано и сводится вся практичность к закрыванию "пустых" элементов. И именно это не следует подавать новичку, для коего рассчитана статья, дабы не затуманивать неокрепшие головы призрачной "практичностью". -------------------- не все валидно, что не видно Поблагодарили: (1) erderik

winstonby winstonby 13.12.2011, 8:45; Сообщений: 41 Поблагодарили: 6 раз Репутация: 2 Просмотр профиля	13.12.2011, 8:45; Ответить: winstonby Сообщение #21
Новичок Группа: User Сообщений: 41 Регистрация: 6.7.2011 Поблагодарили: 6 раз Репутация: 2	статья впринципе для новичков полезная. но в добавок к ней следовало бы заикнуться и об html5. тем более там и не особо много нововведений -------------------- Услуги fl.ru freelance.ru. Сервис uslugi.click Поблагодарили: (1) erderik

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

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

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

Похожие темы

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