X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

4 страниц V   1 2 3 4 >
Открыть тему
Тема закрыта
> Курс молодого верстальщика., Верстать не так уж и страшно.
erderik
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 smile.gif ).
Из фришного можно использовать Notepad++ и GIMP, если есть деньги, то Dreamweawer и Photoshop.
Отличия первых от вторых очевидны - удобство, хотя тут на любителя. Например, в отличии от бесплатного Notepad++, у Dreamweawer есть функция автозаполнения тегов, что без сомнения, очень поможет начинающим верстальщикам, а Photoshop гораздо более удобен, логичен и дружествен к пользователю, нежели GIMP.
Также могу заметить, что у любого софта есть триальный (пробный) период, в течении которого можно опробовать тот или иной инструмент.
P.S. Хорошо это или нет, но замечу, что в нашей компании Photoshop и Dreamweawer лицензионные, хоть и покупались давно smile.gif
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 - цвет и размер шрифта, который часто повторяется на странице.
Подробнее тут
Пример. Допустимая запись
<div id="myid1">
    <div id="myid2" class="class1"></div>
</div>

Недопустимая запись
<div id="myid1">
    <div id="myid1" class="class1"></div>
</div>

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

Создаем общую оболочку страницы и сразу присваиваем ей уникальный id wrapp, сразу же закрываем его (о парности и непарности тегов можно прочитать тут, о тегах вообще )
<div id="wrapp">
</div><!-- end wrapp -->
<!-- сразу комментируем окончание тега, чтоб самим видно было где и какой тег у нас закрылся -->
Этот div будет содержать всю страницу, являться оболочкой, задавать определенную ширину основному контенту сайта и выравнивать его по центру (об этом немного позже).
А далее, по логике
<div id="wrapp">
    <div id="header">
        <div id="logo"></div><!-- end logo -->
        <div id="slogan"></div><!-- end slogan -->
        <div id="contacts"></div><!-- end contacts -->
        <div class="clr"></div>
    </div><!-- end header -->
</div><!-- end wrapp -->

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

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

Таким образом, получаем
<!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><!-- end logo -->
        <div id="slogan"></div><!-- end slogan -->
        <div id="contacts"></div><!-- end contacts -->
        <div class="clr"></div>
    </div><!-- end header -->
</div><!-- end wrapp -->
</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
блочная модель

Статья написана в рамках конкурса "Новобранцы", прошу прощения за некую сумбурность, сложно систематизировать и упростить большой объем данных.
34
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
metkram
metkram
сообщение 12.12.2011, 18:50; Ответить: metkram
Сообщение #2


Старожил
******

Группа: Active User
Сообщений: 1123
Регистрация: 15.2.2010
Из: Украина
Поблагодарили: 364 раза
Репутация:   38  


Я изучал верстку по другой методике, которая занимала больше места. А тут все очень кратко и понятно описано. Большое спасибо за труды


--------------------
Купи и эту строчку
Купи и эту строчку
Комплексный прогон сайтов ru и en


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
rixter
rixter
сообщение 12.12.2011, 19:02; Ответить: rixter
Сообщение #3


Новичок
*

Группа: User
Сообщений: 23
Регистрация: 12.8.2010
Поблагодарили: 6 раз
Репутация:   0  


Быстрый старт для новичка. Очень порадовали ссылки на источники. htmlbook вообще "настольный" сайт, шпаргалка на все случаи.


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
dfyz
dfyz
сообщение 12.12.2011, 19:04; Ответить: dfyz
Сообщение #4


SEO, Сервера, Сайтостроение...
******


Группа: Banned
Сообщений: 1632
Регистрация: 4.8.2008
Поблагодарили: 248 раз
Репутация:   39  


Давно хотел научиться верстать, обязательно прочту. Спасибо smile.gif


Поблагодарили: (2)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
h82w8
h82w8
сообщение 12.12.2011, 19:27; Ответить: h82w8
Сообщение #5


Новичок
*

Группа: User
Сообщений: 24
Регистрация: 3.12.2011
Поблагодарили: 3 раза
Репутация:   0  


Как то давно интересовался, как верстать шаблоны. И тут попалась на глаза статья, спасибо.


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Незваный
Незваный
сообщение 12.12.2011, 19:31; Ответить: Незваный
Сообщение #6


Участник
***

Группа: User
Сообщений: 243
Регистрация: 23.10.2011
Поблагодарили: 39 раз
Репутация:   5  


Полезная статья, спасибо ТС!


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Molderjkee
Molderjkee
сообщение 12.12.2011, 20:09; Ответить: Molderjkee
Сообщение #7


Старожил
******

Группа: Active User
Сообщений: 1367
Регистрация: 22.10.2010
Из: Москвы
Поблагодарили: 291 раз
Репутация:   67  


Интересная получилась статья. Буду пробовать....
Давно хотел научиться

Сообщение отредактировал Molderjkee - 12.12.2011, 20:10


--------------------


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
erderik
erderik
Topic Starter сообщение 12.12.2011, 20:14; Ответить: erderik
Сообщение #8


Новичок
*

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


Всем спасибо за комментарии и отзывы, буду рад если эта статья кому-то поможет начать!))
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
z17
z17
сообщение 12.12.2011, 20:37; Ответить: z17
Сообщение #9


Бывалый
****

Группа: User
Сообщений: 348
Регистрация: 2.5.2011
Из: Санкт-Петербург
Поблагодарили: 79 раз
Репутация:   12  


никогда не понимал смысла таких статей.
качественно начать по ним невозможно.

начинать нужно с учебника по html и css и понимания общего принципа построения страниц. с того, почему одни теги парные, а другие нет.
со знакомства со всеми основными тегами
и понимание как верстать страницы придёт само, по мере изучения. зато к тому времени уже будет хоть какой-то опыт.


--------------------
PHP-разработчик
Мой блог


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
erderik
erderik
Topic Starter сообщение 12.12.2011, 20:58; Ответить: erderik
Сообщение #10


Новичок
*

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


z17, а никто не говорит о том, что по данной статье нужно или можно начинать.
Статья рассчитана на тех, кто хочет начать, но боится или еще не готов. Она призвана простимулировать начать, показать, что это действительно несложно.
Нужно только захотеть и немного попотеть )))))
А в конце статьи даны ссылки на базовые самоучители, для начала вполне хватит.
Думаю, я Вас правильно понял и ответил на Ваш пост.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
4 страниц V   1 2 3 4 >
Открыть тему
Тема закрыта
2 чел. читают эту тему (гостей: 2, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) iPay24.org - автоматический обмен, лучший курс | Bitcoin, QIWI, EXMO, Yandex Money, Perfect Money
22 iPay24 4012 Вчера, 10:02
автор: iPay24
Открытая тема (нет новых ответов) Обмен, Яндекс Деньги на ваши WMR, курс 1:1
18 Nonsys 3883 4.12.2017, 22:00
автор: EvilGomel
Открытая тема (нет новых ответов) [Срочно] Ищу верстальщика Wordpress
поправить готовый шаблон
3 frion-seo 574 29.11.2017, 20:06
автор: frion-seo
Открытая тема (нет новых ответов) Допилить курс валют 600 рублей
PHP, xml,join,ajax
2 devvver 617 10.11.2017, 16:55
автор: devvver
Открытая тема (нет новых ответов) Качественные тексты от молодого и энергичного исполнителя
2 jgor32 527 9.10.2017, 20:13
автор: skair


 



RSS Текстовая версия Сейчас: 16.12.2017, 14:57
Дизайн