От автора: В этой обучающей статье мы собираемся проектировать и кодировать простую web-страницу блога. Мы обратим особое внимание на создание нашего дизайна, гибкого и доступного используя ясный и простой XHTML и CSS. Эта обучающая статья нацелена на новичков и для тех, кто желает улучшить доступность своего веб -дизайна.
Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.
Также скачайте исходники себе на компьютер!
От автора: Сегодня я проведу вас через весь процесс получения из Photoshop HTML. Мы собираемся построить из 4 PSD макетов веб-сайт, который в конечном итоге станет темой WordPress. Это большая статья, поэтому, если вы собираетесь идти до конца, убедитесь, что у вас есть несколько свободных часов!
Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.
Также скачайте исходники себе на компьютер!
Если Вы похожи на меня, Вам интересно посмотреть конечный результат перед началом. Вы можете увидеть четыре конечных файла HTML, следуя по этими ссылкам:
Дополнительно вы можете скачать файлы download the full HTML/CSS/Image source files here.
Из этого учебника мы узнаем, как легко можно создать привлекательный компактный обозреватель содержимого, который работает даже при отключенном JavaScript. Мы построим простое ядро семантического HTML , немного стилизуем его простым CSS, а затем используем jQuery для придания дальнейших усовершенствований в виде переходов анимации.
Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.
Также скачайте исходники себе на компьютер!
Добавочный штрих анимации способен оживить самый скучный интерфейс. Из этого учебника вы узнаете, как с помощью jQuery проделать это правильно.
Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.
Также скачайте исходники себе на компьютер!
Анимация: концепция, которая часто вызывает противоположные реакции людей. Некоторые хвалят ее полезность, в то время как прочие клянут за слишком частое применение. Тем не менее, правильно используемая анимация часто оживляет пользовательский интерфейс и делает его гораздо более привлекательным и аккуратным. В этом учебнике мы начнем с основ jQuery, затем узнаем, как создать свою первую анимацию, затем как построить эффекты и, наконец, разработаем нечто действительно высококлассное.
Заинтересованы? Давайте начнем прямо сейчас! Пожалуйста, заметьте, все адресовано исключительно новичкам, поэтому я буду заострять внимание на некоторых моментах. Шагайте вместе со мной. Если вам интересно, посмотрите в первой части демо-ролика простой эффект, который мы сегодня построим.
Анимация и визуальная обратная связь – прекрасные способы помочь пользователю в навигации и взаимодействии с веб-сайтом. Наряду с тем, что традиционно Adobe Flash был «безусловным переходом» для всей анимации, в наши дни при использовании волшебных возможностей javascript можно вообще обойтись без Flash’а. Сегодня мы создадим действительно классное анимированное навигационное меню, используя только CSS и jQuery.
Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.
Также скачайте исходники себе на компьютер!
На связи Андрей Бернацкий.
С данной статьей мы открываем новый раздел на нашем блоге. Данный раздел будет называться jQuery.
jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML.
Впрочем, без лишних слов начинаем рассматривать нашу первую статью по данной теме.
Перед тем, как мы приступим к практическим шагам, я Вам рекомендую скачать исходный код, чтоб он у Вас был под рукой.
Также результат того, что мы будем делать, Вы можете посмотреть здесь.
Для всех, кто имеет дело с длинными веб-страницами и кому необходимо прокрутить в верх страницы к меню, есть хорошая альтернатива: плавающее меню, которое перемещается при прокрутке страницы. Это делается с помощью HTML, CSS и JQuery, и полностью совместимо с W3C.
Привет, Уважаемые подписчики!
Только закончил работу над очередным проектом. В нем помимо основного меню, присутствовала так же и навигация. И я решил, что неплохо было бы показать вам, как подобные вещи делаются буквально в несколько строк кода. Причем делается это исключительно средствами html и css.
Web типографика довольно проста, но и для многих это является неизведанной тайной. Сегодня мы собираемся рассмотреть 6 способов, которые позволят разработчикам и веб-дизайнерам улучшить типографику своих проектов.
Типографика – это искусство рисования букв, слов, параграфов и их взаимодействие между собой. Многие дизайнеры и разработчики отождествляют типографику с выбором шрифтов, а другие просто забыли, что 95% веб-дизайна – это типографика. Очевидно, что если типографика – это 95% веб-дизайна, то она должна быть на переднем плане в сознании у каждого дизайнера и разработчика. Вот 6 способов улучшить свою веб типографику.
Буквально недавно я узнал тот факт, что один мой подписчик давненько увлекался веб-дизайном. И к моему удивлению он мне сообщил, что когда-то для своего племяша он создал html справочник для новичка в верстке.
Я попросил его поделиться с нами своим творением.
Поэтому предлагаю всем скачать данный справочник по ссылке:
Скачать справочник.
Справочник идеально подойдет всем, кто еще не совсем понимает, для чего нужен тег <p> или, к примеру, не знает, какие теги используются для форматирования изображений.
В данном спарвочнике аккуратно расписаны все html теги с их конкретными примерами в реальном применении.
Этот абсолютно бесплатный справочник Вы можете скачать себе на компьютер!
Теперь послушаем самого Дмитрия Есина по поводу его справочника:
В данной статье пойдет речь о простейших 30 принципах html верстки, которые направлена на то, чтобы помочь только-только начинающим верстальщикам и всем тем, кто хочет погрузиться в мир html.
Лично я, Бернацкий Андрей, когда переводил эту статью улыбался. Советы очень просты (лично мне так показалось), но вспомнив себя, когда я только начинал увлекаться всем этим делом, я осознал, что ценность этих советов не так уж и мала.
Я уверен, что в данной статье Вы найдете для себя массу полезной информации.
Заранее прошу прощения за где-то «кривоватый» перевод. Просто некоторые вещи тяжело преподнести для русскоязычного пользователя. Данную статью я старался по-максимуму оптимизировать под Вас, мои уважаемые подписчики и посетители сайта.
Авторам данной статьи является Jeffrey Way. Он же ведет англоязычный блог: http://net.tutsplus.com
Итак, начинаем…
Подпишитесь и получайте на свой e-mail 2 раза в месяц свежие уроки по сайтостроению.
Не теряйте ни минуты!
Продвинутые Основы Самостоятельного Сайтостроения
