84_38_orПродолжаю делиться своим практическим опытом. Сегодня хочу рассказать про т.н. «метод перебора кода». Суть его в том, чтоб самостоятельно, ручками перебрать чужой код. По ходу дела понять ход мысли человека, делавшего этот код, поэкспериментировать, получить базовые практические навыки. По этому методу учился я сам и учил других людей.

Принцип метода очень простой: берете готовую верстку(более опытного человека), создаете свои пустые HTML/CSS документы и начинаете переносить по одному тегу HTML и по одному CSS свойству для этого тега. Папку с картинками копируете сразу, чтоб не мучаться с нарезкой.

Перенося кусочкам код, из готовой верстки в ваши пустые документы, вы проделаете практически все то, что делал человек до вас. Главное — поймете саму суть HTML верстки и возьмете на вооружение использованные приёмы.

Немного предыстории :)

Когда я только начинал заниматься кодингом, никто еще особо не слышал про дивную верстку. Я уже успел кое-как научиться верстать таблицами, сделал порядка 10 легких проектиков. В то время весь код был исключительно в HTML, в CSS выносили только свойства шрифтов :). Как всегда хотелось реальных проектов, и я начал искать подработку удаленно .

Так получилось, что я вышел на одного человека работавшего с западными заказчиками, они искали html кодеров. В качестве примера мне прислали архив с проектом сделанном чисто на DIV и CSS. Открыв файлы у меня был шок! Там было совсем не то, что я привык видеть! Я банально не понимал, что происходит и начал перебирать кусочками код. Открыл справочники и читал про встречавшиеся новые для меня HTML теги и CSS свойства. После одного перебора была понята суть бестабличного метода верстки, я изучил CSS свойства, реально поднял свой уровень.

Практическая часть

Во вложении есть архив с простым проектом(www.rar, 243.4 Кб), он самый простой начинайте тренироваться на нем. Пошагово это должно выглядеть примерно так:

  1. Создаем пустые HTML и CSS файлы в отдельной папке, копируем рядом папку с картинками
  2. Открываем HTML файл готовой работы
  3. Копируем код 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>
  4. Копируем свойства глобальных тегов в CSS /*—Global tags—*/
  5. Дальше в HTML уже по одному тегу, начиная с
    <div class="container"></div>
  6. Копируем CSS свойства для него
    .container {width:1000px; margin:0 auto;}

    Смотрим в браузере, что происходит на странице(F5 обновить страницу в браузере). Тут видно, что у блока появилась ширина 1000пх и он центрируется по ширине с помощью margin:0 auto;. Чтоб лучше было видно проиходящее в самом браузере, пользуйтесь либо Firebug либо задавайте блоку рамку в 1пх

    border:1px solid #000;
  7. HTML файл. Далее копируем внутрь контейнера шапку сайта
    <div class="container"> 
       <div class="header"></div>
    </div>
  8. CSS, копируем стиль для блока header .header {padding:23px 0 42px 0;} Видим, что появились верхний и нижний отступ внутри блока header, левый и правый равны нулю.
  9. HTML файл. Копируем блок logo и его CSS свойства. Смотрим что происходит в браузере.
  10. И так далее до конца :)

Метод очень простой, возник интуитивно. За часик вы переберете этот не сложный проект. По ходу дела можете играться с разными значениями в CSS свойствах. Если встречаете не знакомый для вас тег или css свойство, обязательно открывайте справочники и прочитайте про не него. Вам должно быть понятно все, что написано и почему именно так! Только тогда двигаетесь дальше.

Переберите пару тройку работ и у вас в голове будет четкая картина того, как делается верстка + реальные практические навыки. Дальше можно пытаться делать работы самостоятельно подглядывая в перебранные вами ранее работы для решения типовых задач.>

Про минимальный набор инструментов для HTML CSS верстки я писал раньше, полистайте.

Удачи и терпения вам! :)

UPD
Добавил еще пару версток по сложнее: Колизей и Web-silver. Архивы во вложенных файлах.
Тренькайтесь на здаровье! ;)

84_k_w

Прикрепленный файл: www.rar (243.36 Kb)

Прикрепленный файл: kolizey.rar (1.85 Mb)

Прикрепленный файл: websilver.rar (234.57 Kb)

Оценить:|1
  
Комментировать
Раздел: Обучение    
Просмотров: 11014
Комментариев (26)
  1. inno1876
    Балицкая Татьяна [inno1876]
    29.10.2011 в 21:27

    Спасибо c удовольствием переверстала страничку, а продолжение будет?

  2. inno1876
    Балицкая Татьяна [inno1876]
    30.10.2011 в 00:26

    В контенте страницы текст относительно не ровный, могу ли я подровнять его с помощью text-align: justify или могут быть проблемы с этим выравниванием?

  3. inno1876
    Балицкая Татьяна [inno1876]
    30.10.2011 в 12:51

    Дело в том что при чтении такой страницы с зазубренными краями чтение становится неприятным, и не всегда комфортным. Это создает не упорядоченность в чтении . Хотелось бы понять, какой оптимальный способ можно применять в выравнивании текста?

  4. Greg
    Григорий Кочнев [Greg]
    03.11.2011 в 11:01

    По многочисленным заявкам читателей выложил еще архивы для тренировок ;)
    (См. приложенные файлы к топику)

  5. inno1876
    Балицкая Татьяна [inno1876]
    04.11.2011 в 01:50

    Хочу поблагодарить Григория за выложенный материал. Полезная штука посмотреть как пишет другой верстальщик. Нашла полезные способы верстки для себя .Код можно писать чище, и быстрее. Многочисленные читатели благодарят;-}

  6. inno1876
    Балицкая Татьяна [inno1876]
    10.11.2011 в 00:08

    Есть вопрос, в макете Web_Silver в классе

  7. inno1876
    Балицкая Татьяна [inno1876]
    10.11.2011 в 11:55

    Web_silver

    index.html
    divы без стилей какая у них функция?

    <div class="f_links">
    	<div><a href="#">Cделаю дизайн сайта бесплатно</a></div>
    	<div><a href="#">Хостинг по низким ценам</a></div>
    	<div><a href="#">Что случилось со счетчиком mail.ru?</a></div>
    	<div><a href="#">Перед закрытием</a></div>
    	<div><a href="#">Новый вариант сайта</a></div>
    </div>

    Для чего к заголовкам h2 h1 применяются сразу два стиля 14px 18px

    h1 {
        padding: 0px 0 0px 0;
        margin:0 0 4px 0;
        color:#00A0C6;
        font-size:14px;
        font-weight:normal;
        font-size:18px;
        }
  8. inno1876
    Балицкая Татьяна [inno1876]
    20.11.2011 в 20:16

    В макете Колизей используются хаки я практически не знакома с их применением, можно подробней объяснить их значение и в каких случаях их использовать?

  9. inno1876
    Балицкая Татьяна [inno1876]
    26.12.2011 в 17:09

    Подскажите Opera поддерживает префикс border-radius для background ? Сп.

  10. IgorQ.WRD
    09.07.2012 в 18:42

    Спасибо за интересную методу.
    Смотрю ваш код и возникает вопрос, почему у вас CSS свойства прописаны в строчку, чем это лучше когда в столбик?
    спасибо.

    • Greg
      Григорий Кочнев [Greg]
      09.07.2012 в 19:55

      Лично мне такой стиль написания больше нравится: код компактней, легче ориентироваться на странице, легче просматривать сложную вложенность.
      Но это лично моё мнение, не все придерживаются его.

  11. staxon9
    04.11.2014 в 09:38

    не работают ссылки на прикрепленные файлы, подкорректируйте для нуждающихся

  12. staxon9
    04.11.2014 в 09:39

    не работают ссылки на прикрепленные файлы, подкорректируйте для нуждающихся

  13. Admin
    Admin [Admin]
    04.12.2014 в 13:43

    Ссылки на архивы починили. Прошу прощения за временные неудобства.

  14. Greg
    Григорий Кочнев [Greg]
    03.01.2013 в 22:51

    Нормуль! )

  15. arskid
    arskid
    23.03.2013 в 15:46

    крутой ресурс

Оставить комментарий