Твит

Заработок верстальщика, во многом зависит от того как быстро он работает, думаю, это утверждение не нужно доказывать, все и так понятно. Поэтому, вполне логично, что многие, теми, или иными способами, пытаются себя ускорить, и сегодня я расскажу о Emmet –плагине для текстовых редакторов, который позволяет вбивать HTML и CSS c огромной скоростью.

Как это работает?

Очень просто, вместо стандартного HTML и CSS, вы вбиваете заранее заданные сокращения, например, вместо нудного прописывания HTML- списка с ссылками из 10 элементов, вам нужно написать:

ul>li*10>a{item$}

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

Твит

Любой блоггер должен уметь вставлять таблицу в блог, на сайт или любую другую вебстраничку. Однако, даже если вы умеете это делать, то при составлении сложных, а особенно оформленных стилями таблиц могут возникнуть некоторые сложности. В текстовом редакторе можно запутаться в столбцах и строчках.
Существует множество генераторов таблиц html, но я поделюсь своей самой дорогой находкой. Теперь составить таблицу превратится для вас в удовольствие!

Твит

Большинство пользователей, даже считающие себя продвинутыми, не подозревают о некоторых возможностях, входящих в состав рабочих функций и скрытых утилит Windows 7. К ним относится очень удобная крохотная утилита Problem Steps Recorder, она записывает все действия, которые выполняет пользователь на компьютере в файл HTML формата. При этом можно давать текстовые пояснения и скриншоты того, что ты делаешь.

Твит

Какова структура HTML документа, какие бывают теги и для чего они служат. Простейший редактор HTML, описание его работы и верстка первой HTML страницы. Доступные справочники HTML и CSS в сети. Составление правильного доктайпа. Зачем нужны метатеги, написание в метатегах ключевых слов к сайту. Для чего служат теги div, span и hr, применение этих тегов в CSS.

Порядок уроков:
1. Структура HTML документа.
2. Работа с текстом

Твит

Как задать div'у позицию чтобы он во всех браузерах был на одном и том же месте?

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



почему так то? как сделать чтобы он во всех браузерах занимал одно и тоже место.

В лисе например изза плагинов увеличилась верхнее меню, и паходу он считает от него...

Твит

Как задать div'у позицию чтобы он во всех браузерах был на одном и том же месте?

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



почему так то? как сделать чтобы он во всех браузерах занимал одно и тоже место.

В лисе например изза плагинов увеличилась верхнее меню, и паходу он считает от него...

Твит

Всю магию drop-down меню можно описать при помощи трёх строк.
1. Скрываем вложенные пункты используя свойство display:none
2. Показываем скрытые пункты при наведения на родителя использую псевдоклас :hover и знакомое уже свойство Display:block.
3. Распологаем открывшиеся вложенные пункты в нужном месте используя позиционирование.
Дальше идут мелкие доработки, которые зависят от вида меню. Самое простое на мой взгляд это вертиальное меню. Распологается в левом или правом сайдбаре. Имеет чётко определённую ширину, что облегчает нам позиционирование.
Горизонтальное меню нужно прежде всего сделать горизонтальным float:left. Дальнейше действия зависят от количества уровней вложенности.

Твит

От юзабилити сайта напрямую зависит его ранжирование в Яндексе.
Во всяком случае об этом написано в основном блоге Яндекса, где даны конкретные рекомендации по улучшению юзабилити сайта.
Основным параметром юзабилити является хорошая навигация по сайту, к которой можно отнести наличие кнопок вверх и вниз.
На днях я решил разработать две кнопки вверх и вниз для своего сайта на WordPress без плагинов, разумеется.
Но они легко интегрируются в любую CMS, и я часто их использую для самописных сайтов.
В качестве альтернативы я создал три варианта кнопок вверх и вниз.
Первый работает на чистом Html, второй на javascript, третий использует JQuery, скачать исходники кнопок и подробные пояснения можно в архиве в самом конце статьи.

Твит

При создании сайта возникает вопрос как именно будет выглядеть ваш сайт, точнее как именно должно оно выглядеть. Ошибкой многих начинающих веб-дизайнеров является такое понятие как "мощная графика", т.е такое понятие чем больше графики тем лучше. На одной графике не останавливаются подключают всякие jQuery и Ajax библиотеки. Нагруженность такой графики плохо сказывается на ваш сайт, страницы грузятся долго что приводит к потере посетителя еще и поисковики тоже недолюбливают такие сайты. Вернемся к макету сайта. Макет — это разметка документа, характеризующая его структуру, т.е. скелет дизайна сайта. Ещё проще говоря это то как будет выглядит ваш сайт.

Для того чтобы нарисовать макет сайта необходимо разобраться с типом сайта.

Твит

Один из важнейших элементов кода web-страницы - теги заголовков. Есть вероятность (особенно у начинающих блогеров), что теги H1-H6 будут применяться неправильно. А это не нравится поисковым роботам. Теги h1-h6 не просто элементы оформления текста. Это, прежде всего, инструменты html структурирования текста, правильной расстановки смысловых акцентов и приоритетов. Существуют ли какие-то правила использования тегов заголовков и подзаголовков? Конечно, да. А вот какие – мы разберем в статье.

Твит

Доброго времени суток, читатель нашего блога! Буквально месяца два назад я начал учить javascript и не безуспешно, я вам скажу=) Когда я начал осваивать этот язык, моей целью было - научиться создавать всплывающий контент поверх страницы сайта, уж очень было интересно, как это делается, и вот сейчас я догадался, как это можно реализовать! Это мой Win! Как же приятно осознавать, что ты учишься чему-то новому. Ну перейдем к сути дела, не пугайтесь по поводу javascript, его всего будет две строчки, больше места занимает CSS. Наша задача - по клику на какой-то объект, должна сработать команда, присваивающая нашему popup-окну свойство "visibility: hidden;", то есть просто его скрыть, да, мы изначально его сделаем видимым, а потом скроем, в этом вся простота...