Jump to content
  • 0

Этапы изучения верстки

Lisitsa

Asked by Lisitsa,

 Share

Question

Lisitsa Explorer

Lisitsa

Posted
Posted

Хотелось бы посоветоваться с форумчанами. Есть желание изучить верстку, прочитала несколько книг на эту тему, некоторая база уже есть. Но тут возник вопрос - а что делать дальше? Имею ввиду, что на данный момент существует некоторый "языковой барьер". Разобраться в коде могу, а сама написать - нет. Кроме того, существует множество вопросов о типах макета (фиксированный, резиновый...), хаках, дивах и других нюансах.

В сети много информации, но хотелось бы системности.

Буду рада, если дадите совет, как и куда двигаться дальше, чтоб это было максимально эффективно.

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

Спасибо за внимание и понимание.

Link to comment
Share on other sites

23 answers to this question

Recommended Posts

  • 0
psywalker Explorer

psywalker

Posted
Posted

Теория должна сопровождаться практикой, и чем жОстче, тем лучше. Бери готовые примеры и разбирай их, пытайся сделать сама тоже самое, т.е. сверстать один в один, пусть своими методами, но чтобы вышло тоже самое. Далее опять-же выкладывай свои работы или примеры, задавай вопросы, будем помогать, если сможем :)

Только не забывай о теории опять-же, всегда читай, учи, зубри, вникай, и не останавливайся!

Кстати помню, когда начинал, тоже задавался такими вопросами, но в итоге сутками напролёт сидел, изучал литературу, постоянно практиковался и т.д. А ещё у меня был учитель, профи в этом деле, вот он то меня и поднатоскал ещё ого-го. Хорошо-бы тебе найти такого, мне повезло просто. ;)

Link to comment
Share on other sites
  • 0
stars Explorer

stars

Posted
Posted

Интересует только верстка? Чего планирует в идеале достичь? И что конкретно вы изучаети\изучили?

Что косается верстки возьмите пару макетов сверстайте их целиком 2 раза 1 раз целиком из таблиц 2 раз целиком из блоков... Я начинал вот с таких элементов http://stars124.narod.ru/ собирал картинку и делал меню на ксс...

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
Интересует только верстка? Чего планирует в идеале достичь? И что конкретно вы изучаети\изучили?

Что косается верстки возьмите пару макетов сверстайте их целиком 2 раза 1 раз целиком из таблиц 2 раз целиком из блоков... Я начинал вот с таких элементов http://stars124.narod.ru/ собирал картинку и делал меню на ксс...

stars

Слушай дружище, я давно хотел у тебя попросить. Кинь пару своих работ посмотреть хоть, как верстают настоящие мужики ;)

psywalker, спасибо большое! Так и делаю сейчас :)

К сожалению, учителя найти не получается на данный момент :) С ним бы, конечно, дело намного быстрей пошлО.

Молодец, продолжай в том-же духе, а главное не сдавайся :)

Link to comment
Share on other sites
  • 0
maksimka Explorer

maksimka

Posted
Posted

Советую видео-уроки Морковина. Посмотрите с первого. Мне это очень помогло. Получил ответ на многие вопросы, освоил азы, узнал суть, хитрость вёрстки. Хотя хорошему мастеру этого мало. Но для начала очень сильно поможет.

Link to comment
Share on other sites
  • 0
Lisitsa Explorer

Lisitsa

Posted
  • Author
Posted
Интересует только верстка? Чего планирует в идеале достичь? И что конкретно вы изучаети\изучили?

Пока интересует только верстка. Я имею ввиду на данный момент. После достижения цели будем смотреть, куда дальше двигаться ;)

Изучаю (не могу сказать, что изучила, поскольку уверенные знания должны быть подкреплены уверенной практикой): базовые основы html, css, сейчас разбираюсь с дивной, табличной, версткой слоями. Пробовала верстать несколько несложных макетов, в том числе, когда для нескольких страниц сайта написан общий код css. Резала несколько макетов в фотошопе. После того, как был сверстан несложный макет, попыталась улучшить код.

Но все это я делала с подсказками. То есть такого, чтоб сначала до конца порезать-сверстать самой, без подсматривания, не было.

В идеале - планирую достичь уверенного владения приемами верстки.

Спасибо за совет посмотреть видеоуроки Морковкина. Он у меня есть в списке планируемого для изучения :)

Link to comment
Share on other sites
  • 0
stars Explorer

stars

Posted
Posted (edited)

Ну в плане верстки я бы посоветовал поэтапно освоить 3 вещи:

1) Скелет страницы. Имеется ввиду знать тэги <!DOCTYPE><html><head><body> и все что входит обычно пишут под тэг <head>. Это надо просто заучить.

2) Таблицы, блоки. Разобраться как строится сайт из таблиц и как из блоков. Как изменять их размеры как делать отступы как задавать им нужное положение и самое главное какие есть баги связанные с их использованием... Если освоить этот пункт то любой макет вы уже сможете написать...

3) такие элемент как <img><a><h1><p><span><lu><li> с ними конкретно надо разобраться какие у них есть атрибуты и почитать какие свойста им можно задавать...

Если написание сайтов у вас планирует стать профессией то помните о том что после вас код этого сайта может дописывать будет кто-то еще так что писать надо чисто и разборчиво )))) пользоваться отступами делать переносы строк для разных элементов и т.д.

Edited by stars
Link to comment
Share on other sites
  • 0
Vadym Explorer

Vadym

Posted
Posted

Хотелось бы добавить. Во всяком деле важна такая штука как - мотивация/смысл/интерес.

Как сказали выше, ОЧЕНЬ важно практиковаться и изучать теорию. Согласен на 100%, но это должно подкрепляться мотивацией.

Вы должны реально это хотеть, т.е. должна быть цель. Цель - что-то сделать конкретное, а знание и умение это лишь как инструмент.

Т.е. придумайте себе, какую нить страничку или для кого-то + ограничьте себя во времени. Хостинг/домен - сейчас стоит копейки. Ну или на крайний случай бесплатный.

Только так будет самое быстрое и эффективное, а главное, глубокое и основательное освоение и изучение.

Ну... можно долго и нудно набивать мяч, стукать об стену, а потом выйти на поле и понять, что так ничего и не умеешь.

Одним словом воображаемый противник (заказчик) это хорошо, но на самом начальном этапе. А далее очень быстро следует браться за что-то реальное.

Пусть без денег. Но потребность должна быть конкретная, а не надуманная.

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

Не надо ставить за цель просто зазубрить себе все теги и верстать с закрытыми глазами. Это придет с практикой.

Это тоже самое, что зубрить новые слова по словарю. Лучше обнаружить слово раз/другой в тексте и тогда оно начнет врастать в мозг и будут формироваться новые связи, аналогии и т.д.

Вы начнете это понимать так же, как понимаете свой родной язык.

Link to comment
Share on other sites
  • 0
121990 Explorer

121990

Posted
Posted (edited)

Уже посмотрел 3 части. Немного не то. Там уже готовый макет, и как его верстать. А я хочу сразу научится делать макеты, а потом верстать. Так-как выложеные тут шаблоны для меня пока сложные :ph34r:

Edited by 121990
Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
Кажысь время потерял изучаю шаг за шагом, читая книги. Практики 0

Потерял? Значит ты чего-то не понял. Ничего ты не терял, щас бери книжки, читай и практикуйся, начни верстать хотябы. Какие нафиг тебе макеты делать, ты дизайнер чтоли? Забудь.

Link to comment
Share on other sites
  • 0
121990 Explorer

121990

Posted
Posted
Потерял? Значит ты чего-то не понял. Ничего ты не терял, щас бери книжки, читай и практикуйся, начни верстать хотябы. Какие нафиг тебе макеты делать, ты дизайнер чтоли? Забудь.

Все я понял. Только уже забыл. Да я дизайнер. Верстать чужие макеты для меня бесмысленно, и верстать неумея делать макеты тоже бесмысленно. Давай ты мне скажешь, правильно ли я думаю. В фотошопе просто все разбить по слоям, сайтбар каждый пункт, фон, рисунки, и потом сохранить в псд, слои не сводить? Как дальше верстать? Я просто открыл в фотошопе http://forum.htmlbook.ru/index.php?showtopic=13276 этот макет и он разбит на какие-то синие полосы я так не умею.

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

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

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
Рикардо тебя тоже так посылали игрухами, когда ты учился/cпрашивал у кого? Кстате я тут http://torrents.by по игрухам загоняюсь, знаешь стоит на них!

А я смотрю, тебя затупило по твоим словам, вот думаю, что тебе для начала нужно отдохнуть, чтобы потом уже за дело взяться с новыми силами) У меня так тоже бывает, я обычно пойду прогуляюсь, очень помогает.

Link to comment
Share on other sites
  • 0
121990 Explorer

121990

Posted
Posted

Мне нескем и некуда прогуливатся. Нифига, буду начинать делать в фотошопе макет. Простой очень, но главное свой. Что получится незнаю, вот потом и начну верстать. А читать я больше не буду. Походу начну делать, может что получится :ph34r:

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept