При верстке нового сайта я руководствуюсь принципом – каждому девайсу свой вариант отображения странички. Имея один html-код мы можем совершенно по разному представить страницу на различныйх устройствах. В различных учебниках традиционно перечисляют типы устройств:

• all – Все типы. Это значение используется по умолчанию.
• aural – Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.
• braille – Устройства, основанные на системе Брайля, которые предназначены для слепых людей.
• handheld – Наладонные компьютеры и аналогичные им аппараты.
• print – Печатающие устройства вроде принтера.
• projection – Проектор.
• screen – Экран монитора.
• tv – Телевизор.

Обычно верстка очередного макета ограничивается записью:

1

<link rel="stylesheet" type="text/css" media="all" href="style.css" />

где media=«all» – это указание для всех девайсов использовать стить style.css. Немного реже можно увидеть где media=«print» для принтеров. Но мало кто из верстальщиков знают (или используют) всю мощь @media. Попробую на примерах показать некоторые «фишки».

Вчера на хабре появился конкурс, вот я, ниразу не дизайнер, и решил поучавствовать

Не очень то я умею писать красивые слова, поэтому напишу коротко.

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

Я поднял основу сайта на WordPress, сейчас занимаюсь настройкой функционала. Но я не смогу сделать хороший дизайн, тяжело будет продинуть сайт в массы, да и много чего предстоит сделать… Пока не хочу никого просить лично, если у кого-то есть желание помочь – буду очень благодарен, может быть полезен как совет, так и посильная помощь.

Сайт проекта: dari-dobro-detyam.ru

Заранее всем спасибо!

У меня комментариев нет! А у вас?

Сегодняшний день, 9 апреля 2010 года, известен многим web-разработчикам как CSS Naked Day. В этот день принято отключать CSS в своих сайтах, чтобы показать, насколько он важен. Вот и у меня сегодня не будет никакого лоска, наслаждайтесь HTML-версией сайта

Все условия для работы, лишь бы работал

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

Вольный перевод, источник – www.smashingmagazine.com

В некоторых последних проектах я использовал закругленные уголки у блоков без использования изображений, но с использованием jQuery
Подробнее Вы можете ознакомиться непосредственно на страничке с закруглёнными уголками

Я уже довольно-таки давно верстаю в Notepad++, пробовал и другие редакторы – не срослось. Основная причина, по которой мне нравился раньше этот редактор – подсветка кода. Видел. что есть много каких-то настроек, но небыло необходимости в них разбираться – ведь и так всё работает прекрасно.

Ситуация изменилась, когда объем работы вырос, и я физически не успевал верстать то, что вроде как должен успевать. Конечно, есть свои html и css заготовки, но копипастить их – сомнительный выигрыш во времени. Работа по FTP через Total Commander тоже не очень то удобна – много лишних телодвижений.

И вот я решил потратить время на настройку своего любимого Notepad++, слышал где-то что гибко он настраивается

(Описание скорее для тех разработчиков, которые не в курсе всех прелестей Notepad++, знающие могут дальше не читать).

С того момента, как я начал верстать, в моем арсенале уже была эта маленькая, но жутко удобная софтина, даже не знаю откуда я ее выкопал. В связи со сменой работы и по причине сбоев в своей памяти я оставил эту программульку дома, просто забыл кинуть на флешку. Когда обнаружил, что ее не хватает первым делом полез в поисковик. НО. Её нигде нет! Т.е. есть описание, ссылки на загрузку, но они все битые, т.к. сайт разработчика перестал существовать. С большим трудом я нашел ее на каком-то сервере, залил и решил выложить здесь, т.к. не знаю когда снова потеряю её. Да и остальным может пригодится…
Ниже краткое описание программы:

Для начинающего верстальщика всегда стоит наиважнейшая задача – впитать в себя как можно больше информации, не нахватавшись при этом «воды». Очень помогают в этом блоги и специализированные сайты, но не всегда постер описывает всё подробно, не разжовывает для новичка. Поэтому в начале советую почитать простые бумажные такие книжки, они еще продаются

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

Обманывать не хорошо, так в детстве мама говорила, но иногда без этого никак… В web-верстке тоже самое – нужен хак, и заказчик требует валидность, а еще и в портфолио потом работу выкладывать. Вот и приходится хитрить, хотя, по сути, верстка страничка всё равно невалидна, просто обманутый валидатор этого не замечает (да и не хочет он это замечать). Как бы не вопили противники хаков, от этого никуда не уйти.

Постараюсь максимально выложить всё что знаю по этой теме, а что сразу не вспомню (или пока не знаю) буду со временем дописывать…

Не всегда страничка должна иметь много контента (например страничка с сообщением об ошибке 404), а красивый подвал посреди экрана выглядит как-то неуместно. Надо бы его прижать

Логический алгоритм следующий:

1. Высоту странички body выставляем в 100% (минимум);
2. Основной слой (page), в котором будет шапка (header) и контент (content) так же растягиваем на 100% по высоте;
3. Подвал (footer) прижимаем книзу position:relative; bottom:0;
4. Т.к. подвал находится ниже 100% слоя page, то нужно его поднять на столько, сколько он сам имеет роста: margin-top:-50px;
5. Теперь страничка и без скрола, и подвал внизу, но при нынешнем состоянии контент будет залезать под подвал, применим-ка мы к нему pading-bottom:60px;

К сожалению, в стиле сайта нельзя назначить любой шрифт для текста (всякие хитроумные приемы и флеш в расчет не беру).  Браузеры используют ограниченное количество стандартных шрифтов, постараюсь показать то что есть…

Стандартные шрифты:

1. Arial

2. Verdana

3. Times

4. Times New Roman

5. Georgia

6. Trebuchet MS

7. Sans

8. Sans

9. Comic Sans MS

10. Courier New

11. Webdings

12. Garamond

13. Helvetica

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

К сожалению, CSS2 не поддерживает верстку колонками, а CSS3 только на подходе и еще точно не известно, как в нем будет организована эта функция. Да еще должно будет пройти некоторое время, прежде чем браузеры полноценно научатся обрабатывать CSS3. Поэтому попытаемся сверстать страничку двумя колонками в CSS2.