верстка сайта


Css верстка: вопрос – ответ

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

Вопрос №1. Как центрировать сайт?

Если бы внимательно читали мои уроки по верстке, (продолжение обязательно будет) то вопрос сам бы собой отпал.

И так, создавай сайт мы создаем некий каркас. Обычно его называют #wrapper , #wrap и т. д. Блок идет обычно после тега body (тут все зависит от сложности сайта). В css файл прописываем ширину и внешние отступы:

#wrapper {
 width:1024px;
 margin:0px auto;
 }

Все ок. Ваш сайт будет центрирован.

Вопрос №2. Как зафиксировать фоновую картинку ?

Тут все проще чем кажется. Надо вначале определить блок, в который мы поместим наше изображение. Например, #main, а можно и в сам тег body. Css код выглядеть будет так:

 body {
 background: url(images/vasha_kartinkaa.jpg) fixed 0 0 no-repeat;
 }

Теперь фон будет стоять на месте, а контент прокручиваться.

Вопрос №3. Как уменьшить css файл?

Вопрос очень интересен. Что может сделать html верстальщик в таком случае? Писать проще и короче. Ведь чем меньше кода тем легче файл.
Можете посмотреть презентацию моих советов по html и css. Заменяйте и объединяйте селекторы, вместо:

.users {
 margin-top:5px;
 margin-bottom:10px;
 margin-right:0px;
 margin-left:0px;
 }

Лучше сделать так:

.users { margin:5px 0px 10px; }

Намного приятней удобней и короче, не так ли? Запомнить очень легко: сверху справа снизу слева, т. е. по часовой стрелке. Для свойства padding аналогично.

Также можно сжать css файл с помощью различных сервисов, но я вам особенно начинающим не рекомендую экспериментировать, т. к. затем редактировать такой файл крайне трудно.
Пройдите валидацию css, в предупреждениях Вы найдете все свои совпадения, которые проглядели. Снизу можно найти раздел Информация о корректном CSS, где Ваш css  уже исправленный ;) .

Все остальные вопросы можете также задавать в комментариях, либо отписаться мне. Не забываем кому я предоставляю бесплатные консультации. ;)

Как я ранее говорил Вам необходимо получше изучать css и html и никаких сложностей не возникнет ;)
Теперь маленький опрос:

Нужно ли Вам изучение практическое изучение css на моем блоге?

View Results

Загрузка ... Загрузка ...

с/у  УтБ

Постовой: Всем кто изучает Seo, облегчите себе жизнь, установите SEO плагин для FireFox

На десерт сегодня танцы первоклассника, не знаю как Вам, но я смеялся до слез :)

Шпаргалка верстальщика часть 1 или 11 полезных ресурсов для верстки сайта

Приветствую пользователей блога gtalk.kz. Открываю новую серию статей-шпаргалок для эффективной верстки сайтов. Данные статьи можно смело добавлять в закладки, т. к. полезной информации будет оочень много (по крайней мере я надеюсь :) ). А также не забывайте поделиться с друзьями.

Сегодня я расскажу об 11 полезных сервисах, цель которых облегчить жизнь верстальщика. Думаю, Вам они понравятся, а в конце поста найдете ссылку на 38 (!) способов, как сделать закругление углов и еще пару ссылок на интересные статьи по теме.

Как всегда, сразу возьмем быка за рога и начнем :)

генератор-html-+-css-шаблона

  1. Csstemplater.com – сервис «Генератор html + css шаблонов» от Dimox’a и molodoy по праву должен быть упомянут первым в списке, так как полезность его огромна. Данный ресурс позволяет сделать заготовку будущего шаблона, выбрав определенные опции — вуаля html + css готово и при чем в дивах. Внимание! Особо полезен ленивым :) Не советую пользоваться часто новичкам, привыкнуть очень легко. Настроек немного (doctype, сайдбары, высота header’a и footer’a, resert на выбор и т. д.), но их вполне хватает на заготовку шаблона/каркаса.песочница-html-+-css
  2. Cssdesk.com – песочница для html + css. Пишите html разметку и css и смотрите как это будет выглядеть. Очень удобно, можно потренироваться с написанием кода для начинающих.
    генератор-кросс-браузерных-правил-CSS3
  3. Генератор кросс-браузерных правил/стилей CSS 3  — используйте новые возможности Css 3, а данный ресурс Вам в этом поможет.
    Прокрутите вниз до класса matrix и можете настроить повороты под себя.генератор-кросс-браузерных-правил-CSS3-для-верстки-сайтов 
  4. Еще один генератор кросс-браузерных стилей Css 3, просто выбирайте необходимые настройки и смотрите пример. Можно делать в стиле 3D.генератор-css-3
  5. Ну, чтоб уже окончательно было понятно со стиля css 3 попробуйте поюзать сайт css3generator.com. Выберите стиль из выпадающего списка и пропишите параметры, скопируйте получившийся css код и радуйтесь ;)

  6. Ищете красивые кнопки для сайта? Зачем? Для этого существуют много сервисов. Например, cssbuttongenerator.com – самоназвание говорит за себя — Генератор css кнопок. Выбирайте настройки кнопки, ее будущий внешний вид и скачайте весь необходимый стиль.
  7. А Вы знаете, как посчитать, сколько пикселей в em? А в пунктах? Не знаете?)) А верстальщику надо бы знать. Спасибо, pxtoem.gamecoll.com, который с легкостью посчитает, сколько пикселей в Ems, пунктах и т. д. Хороший конвертор.
  8. Градиент, до эпохи ccs 3 верстальщикам снилось их простое использование :). Теперь это в прошлом, ведь благодаря такому ресурсу как www.colorzilla.com/gradient-editor можно с помощью css залить градиентом определенную область, а с хорошим знанием css можно и кнопку красивую написать ;). Интересно, что генерируется код не только в формате css, но и в SCSS.css-3-градиент-для-сайта
  9. Валидность сайта важная составляющая верстки. В курсе блочная верстка с нуля, я упоминал о важности соответствия стандартам кода. Поэтому сейчас просто даю ссылки на проверку html разметки validator.w3.org/  и проверка валидности css jigsaw.w3.org/css-validatorшрифтотренажер-ресур-для-верстальщика

  10. http://ft.vremenno.net/ – шрифтотренажер. Смотрим, как будет выглядеть тот или иной шрифт на вашем сайте, подбирайте шрифт удобный для глаз. ;) Используются стандартные шрифты.
  11. Мнемоника в html — также необходима при блочной верстки сайта, например, использование знака охраны авторского права и т. д. Подробнее можно почитать и взглянуть на википедии.

Не буду Вас томить по одному сервису. Если Вам интересно, Вы можете прочитать еще о дополнительных ресурсах (полезных не только для верстки) на хабрхабр
Корректное отображение стилей css 3 для IE – css3pie.com

Бонус: А также обещанный бонус 38 способов закругления углов, очень неплохая подборка. Не изобретайте велосипед, учитесь виртуозно кататься на нем ;)

с/у УтБ

Урок 5. Блочная верстка сайта: css файл.

Вот и подходим к финалу наших уроков по блочной верстке сайтов. Сегодня 11.11.11 г., время публикации статьи 11:11, думаю это счастливый знак для закрытия основных, базовых уроков по верстке :) . Мы прошли небольшой курс, и осталось совсем немного. Сегодня мы напишем css файл для сайта, подключим его и будем радоваться полученному результату ;).

Урок 4. Блочная верстка: html разметка.

Отлично, мы уже с Вами знаем что такое блочная верстка, как пользоваться фотошопом во время верстки, создали базовые элементы для дальнейшей верстки. Теперь же давайте перейдем непосредственно к html разметки нашей веб-страницы. Откройте файл, созданный нами во 2 уроке, а также Psd шаблон сайта в фотошопе и нажмите TAB. Отлично, поехали ;)

Урок 3. Верстка сайта: быстро вырезаем картинки в фотошопе.

Продолжаем наши уроки по верстки сайта с нуля. Рекомендую прочитать первые два урока: знакомство с версткой и тем, кто такой верстальщик и что такое блочная верстка, знакомство с сайтом.

В сегодняшнем уроке мы вырежим из psd шаблона необходимые материалы для работы. Т.е. сегодня достаточно большой объем работы, так что не забудьте взять чашку чая ;)

Урок 2. Блочная верстка сайта

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

Ну-с, не будем тянуть резину. Начнем, не забудьте взять чашку кофе и печенек ;-)

Верстка сайта. Урок 1

Вот я снова с Вами. Немного затянул с последними выходами статей. Ну, да ладно, хватит отступлений, давайте ближе к теме.

По текущей работе мне приходится сталкиваться с версткой сайтов, в принципе сейчас я этим и занимаюсь. Поэтому Вас ожидает небольшая «Санта-Барбара» :) на тему верстка сайта, CSS и html, кроссбраузерности и многое другое не менее интересное.

Если Вас заинтересовали эти слова, милости просим. Данная статья первая из серии, поэтому начнем с общего. Все это время мы с Вами будем начинающими верстальщиками ;)

При создании сайтов в идеале участвуют 3 человека. Веб-дизайнер — рисует сайт, человек с фантазией и со знанием фотошопа и т. д. Мне не дано стать дизайнером это точно.

Верстальщик следующий человек с меньшим багажом знаний фотошопа и фантазии. Отлично знает html, css, javascript и т. д.

Веб-разработчик/Веб-программист — человек с отсутствием фантазии и фотошопа))

Вот моя таблица — участника создания полноценного сайта

Веб-дизайнер

Верстальщик

Веб-программист

Знает фотошоп

+

+

-

Есть фантазия

+

±

-

Знает языки разметки

-

+

+

Знает языки программирования

-

±

+

Как мы видим из моей придуманной таблицы верстальщик универсальный человек.

Теперь давайте о необходимых знаниях, софте и т. д.

Минимум знаний для начинающего верстальщика:

  • основы html и css – так как мы только начинаем, то базового уровня должно Вам хватить. (Мы будем рассматривать язык разметки HTML!)

  • Базовое знакомство с фотошопом/photoshop’oм — так как придется смотреть на задумки веб-дизайнера и воплощать в коде.

  • Желание и упорство — главное все делать с душой. Под плеткой никто не чему не научится.

Мой софт верстальщика

Еще один важный момент верстальщика — его софт/программы.

  • Фотошоп/photoshop — отличный графический редактор, используемый веб-дизайнером, поэтому и верстальщик должен иметь данную программу для просмотра и использования частей сайта. Программа платная.

    Для отличного процесса формирования веб-страниц нам необходим редактор, где мы будем писать разметку и css файлы. Здесь выбор велик, и обычно каждый выбирает, то что ему по душе, подойдет и самый простой Блокнот (но не вздумайте его использовать!)

  • Notepad++  по-моему лучшая альтернатива Notepad – Блокноту. Для начинающих особо рекомендую: помогает набить руки для набора и для быстрого набора. Программа бесплатна. Я проводил сравнения Notepad и  Sublime text, сейчас пользуюсь последним.

    Notepad++

  • phpDesigner (любая другая IDE, например, webStorm) – платная программа для программирования, отлично подойдет для верстки сайтов. Основные плюсы- это удобность использования, много настроек и функций, а также подсветка кода: ошибок, выделение текущего фрагмента и т. д. Программа платная.phpdesigner программа верстки сайта

  • Еще сотни других программ о которых в принципе говорит не стоит, так как каждый выбирает для себя. Посмотрите в гугл по фразе «Текстовый редактор», «html/css/php редакторы» и т. д.

  • А также оочень важный момент — актуальные браузеры. По этой теме будет отдельная статья плюс расскажу о софте для браузеров.

Ну и на последок, хорошие ресурсы по данной теме.

Htmlbook.ru – наверное самый/один из самых полезных ресурсов по html и css. Если Вы начинаете, то однозначно необходимо начинать с этого ресурса.

validator.w3.org сервис проверки Валидности html кода.

jigsaw.w3.org/css-validator css валидатор.

Что и где читать будет в отдельном посте.

И в принципе, никто google и yandex не отменял ;)

с/у  УтБ

На десерт видео – примерно так я устаю от верстки:)