Продолжаю делиться своим практическим опытом. Сегодня хочу рассказать про т.н. «метод перебора кода». Суть его в том, чтоб самостоятельно, ручками перебрать чужой код. По ходу дела понять ход мысли человека, делавшего этот код, поэкспериментировать, получить базовые практические навыки. По этому методу учился я сам и учил других людей.
Принцип метода очень простой: берете готовую верстку(более опытного человека), создаете свои пустые HTML/CSS документы и начинаете переносить по одному тегу HTML и по одному CSS свойству для этого тега.
Перенося кусочкам код, из готовой верстки в ваши пустые документы, вы проделаете практически все то, что делал человек до вас. Главное — поймете саму суть HTML верстки и возьмете на вооружение использованные приёмы.
Немного предыстории :)
Когда я только начинал заниматься кодингом, никто еще особо не слышал про дивную верстку. Я уже успел кое-как научиться верстать таблицами, сделал порядка 10 легких проектиков. В то время весь код был исключительно в HTML, в CSS выносили только свойства шрифтов :). Как всегда хотелось реальных проектов, и я начал искать подработку удаленно .
Так получилось, что я вышел на одного человека работавшего с западными заказчиками, они искали html кодеров. В качестве примера мне прислали архив с проектом сделанном чисто на DIV и CSS. Открыв файлы у меня был шок! Там было совсем не то, что я привык видеть! Я банально не понимал, что происходит и начал перебирать кусочками код. Открыл справочники и читал про встречавшиеся новые для меня HTML теги и CSS свойства. После одного перебора была понята суть бестабличного метода верстки, я изучил CSS свойства, реально поднял свой уровень.
Практическая часть
Во вложении есть архив с простым проектом(www.rar, 243.4 Кб), он самый простой начинайте тренироваться на нем. Пошагово это должно выглядеть примерно так:
- Создаем пустые HTML и CSS файлы в отдельной папке, копируем рядом папку с картинками
- Открываем HTML файл готовой работы
- Копируем код HTML документа без самой верстки
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="https://www.w3.org/1999/xhtml"> <head> <title>Заголовок страницы</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251;" /> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> </body> </html>
- Копируем свойства глобальных тегов в CSS /*—Global tags—*/
- Дальше в HTML уже по одному тегу, начиная с
<div class="container"></div>
- Копируем CSS свойства для него
.container {width:1000px; margin:0 auto;}
Смотрим в браузере, что происходит на странице(F5 обновить страницу в браузере). Тут видно, что у блока появилась ширина 1000пх и он центрируется по ширине с помощью margin:0 auto;. Чтоб лучше было видно проиходящее в самом браузере, пользуйтесь либо Firebug либо задавайте блоку рамку в 1пх
border:1px solid #000;
- HTML файл. Далее копируем внутрь контейнера шапку сайта
<div class="container"> <div class="header"></div> </div>
- CSS, копируем стиль для блока header
.header {padding:23px 0 42px 0;}
Видим, что появились верхний и нижний отступ внутри блока header, левый и правый равны нулю. - HTML файл. Копируем блок logo и его CSS свойства. Смотрим что происходит в браузере.
- И так далее до конца :)
Метод очень простой, возник интуитивно. За часик вы переберете этот не сложный проект. По ходу дела можете играться с разными значениями в CSS свойствах. Если встречаете не знакомый для вас тег или css свойство, обязательно открывайте справочники и прочитайте про не него. Вам должно быть понятно все, что написано и почему именно так! Только тогда двигаетесь дальше.
Переберите пару тройку работ и у вас в голове будет четкая картина того, как делается верстка + реальные практические навыки. Дальше можно пытаться делать работы самостоятельно подглядывая в перебранные вами ранее работы для решения типовых задач.>
Про минимальный набор инструментов для HTML CSS верстки я писал раньше, полистайте.
Удачи и терпения вам! :)
UPD
Добавил еще пару версток по сложнее: Колизей и Web-silver. Архивы во вложенных файлах.
Тренькайтесь на здаровье! ;)
Прикрепленный файл: www.rar (243.36 Kb)
Прикрепленный файл: kolizey.rar (1.85 Mb)
Прикрепленный файл: websilver.rar (234.57 Kb)
Спасибо c удовольствием переверстала страничку, а продолжение будет?
Если людям интересно, то конечно будет и продолжение :)
Людям очень интересно :) С нетерпением ждем продолжения. Спасибо )
В контенте страницы текст относительно не ровный, могу ли я подровнять его с помощью text-align: justify или могут быть проблемы с этим выравниванием?
Что значит «относительно не ровный» ? ;)
С той страницей можете делать, что вам нравится. Главное что-то делать, тогда и навыки будут и в памяти отложится.
Дело в том что при чтении такой страницы с зазубренными краями чтение становится неприятным, и не всегда комфортным. Это создает не упорядоченность в чтении . Хотелось бы понять, какой оптимальный способ можно применять в выравнивании текста?
«зазубренными края» для веб страницы считается стандартом и нормой.
При желании конечно можете использовать text-align:justify.
По многочисленным заявкам читателей выложил еще архивы для тренировок ;)
(См. приложенные файлы к топику)
Спасибо!
Хочу поблагодарить Григория за выложенный материал. Полезная штука посмотреть как пишет другой верстальщик. Нашла полезные способы верстки для себя .Код можно писать чище, и быстрее. Многочисленные читатели благодарят;-}
Есть вопрос, в макете Web_Silver в классе
можно конкретнее: страница и куски кода?
Web_silver
index.html
divы без стилей какая у них функция?
Для чего к заголовкам h2 h1 применяются сразу два стиля 14px 18px
ответил тут
В макете Колизей используются хаки я практически не знакома с их применением, можно подробней объяснить их значение и в каких случаях их использовать?
Ответил тут ИЕ6 хаки, их значение
Подскажите Opera поддерживает префикс border-radius для background ? Сп.
Может быть бордер-радиус для блока, а не для бэграунда?
Такие мелочи учитесь смотреть самостоятельно в документации, пользуйтесь поисковиком
https://htmlbook.ru/css/border-radius
Opera использует border-radius без префиксов.
Спасибо за интересную методу.
Смотрю ваш код и возникает вопрос, почему у вас CSS свойства прописаны в строчку, чем это лучше когда в столбик?
спасибо.
Лично мне такой стиль написания больше нравится: код компактней, легче ориентироваться на странице, легче просматривать сложную вложенность.
Но это лично моё мнение, не все придерживаются его.
не работают ссылки на прикрепленные файлы, подкорректируйте для нуждающихся
не работают ссылки на прикрепленные файлы, подкорректируйте для нуждающихся
Ссылки на архивы починили. Прошу прощения за временные неудобства.
Нормуль! )
крутой ресурс