Какая верстка лучше – табличная или блочная?

Если коротко, то разницы для посетителя сайта между версткой, сделанной на основе вложенных таблиц (table) или верстка блоками (div, span) нет никакой. Верстка сайта не только не влияет на субъективное мнение посетителя, она не влияет и на отношение поисковых роботов.

Гуглу и Яндексу абсолютно все равно, как у вас сверстан сайт, если в нем закрыты теги и они используются в логичной последовательности. Например, теги заголовков второго уровня H2 не должны быть встречаться в коде раньше, чем теги заголовка первого уровня (H1), а выделение текста курсивом или полужирным стилем должно быть уместно и не избыточно.

Качественная верстка сайта

(далее…)

Как окружить фото текстом и задать отступы текста от картинки

Ничего сложного в том, чтобы сделать обтекание картинки текстом, нет. В то же время, вопрос какой код нужен для задания отступов текста от картинки или фотографии достаточно распространенный у новичков, которые только начали вести блог или постигать основы html+css. В этой статье я приведу пару типичных решений для создания отступа картинки от текста в виде кода html и css.

Способ 1: Вписываем код отступа текста для отдельной картинки или фотки

Простой способ задания обтекания картинки текстом, не требующий знаний html и css.

Задаем отступ текста для фото Чаще всего встречается задача, когда нужно расположить картинку слева и чтоб при этом ее сверху, справа и снизу окружал текст. Еще желательно, чтобы текст располагался не вплотную к вставленной в статью фотографии или схеме, а немного отступал от картинки. Как правило, большинство админок генерируют код для вставки изображения, при котором картинка располагается слева, а текст начинается не справа вверху от картинки, в справа внизу, что удобно для крохотных иконок, но не подходит для больших картинок. Чтобы сделать обтекание текстом для изображения, как в этом способе, при вставке картинки в статью нужно написать такой код:

1
2
3
4
<img src="здесь_веб-адрес_картинки" alt="" /> alt="Здесь_подсказка_если_картинка_не_загрузлась" title="Здесь_встплывающая_над_картинкой_подсказка" width="ширина_ картинки_в_точках_числом"
height="высота_ картинки_в_точках_числом"
align=”left”
style="margin: 3px 12px 0px 0px;>

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

1
2
3
4
5
<img src="https://www.web-article.com.ua/wp-content/uploads/2009/12/otstup-kartinka-tekst.jpg" alt="" /> alt="Задаем отступ текста для фото"
title="Задаем отступ текста для фото"
width="300" height="350"
align="left"
style="margin: 3px 12px 0px 0px;>

(далее…)

Почему я не люблю разбираться в чужом коде

Разбираться в чужом HTML коде

У каждого человека есть свой стиль верстки. Плохой или хороший – не важно, но он другой. Любой человек может писать как оригинальный оптимальный код в одном месте, так и непонятный избыточный в другом. Настроение у него было такое или пробелы в знаниях не позволяют одинаково легко делать выпадающие менюшки и правильно вставлять flash ролики. А комментировать свой код HTML утруждаются немногие.
(далее…)

Простая анимация CSS (спрайты)

Никого не удивляют акционные баннеры, иконки или графические меню, сделанные с помощью JavaScript, которые могут слегка меняться при наведении на них указателя мыши. Интерактивная анимация, которая состоит всего из двух кадров (активно/неактивно), имеет ряд преимуществ: она недорогая, легко создается, быстро загружается и при этом заметно оживляет сайт, делая его более дружественным для посетителя. Чаще всего такая двухкадровая css-анимация (также известная как спрайты css), реагирующая на действия пользователя, создается с помощью JavaScript или CSS. В этом уроке мы рассмотрим второй способ, т.к. анимация с помощью каскадных стилей имеет ряд преимуществ перед скриптовой анимацией.

Ярким примером использования возможностей CSS для реализации интерактивной двухкадровой анимации является сайт украинской художницы Елены Миросединой:

Пример анимации css

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

Бесплатно скачать коды урока интерактивной CSS-анимации

(далее…)

Код CSS, который понимает только Internet Explorer

Браузер Internet Explorer не всегда утруждает себя соблюдением всех стандартов верстки W3C. В свое время это было «фишкой» Microsoft, которая пользовалась своим монопольным положением на рынке ПО, чтобы еще больше его упрочить. А до этого «вольное трактование» языка разметки помогло победить Netscape. Впрочем, речь в этой статье пойдет не о погибшем браузере и даже не о его победителях.

IE против Mozilla

В результате отступления Майкрософта от некоторых стандартов HTML и CSS код может трактоваться по-разному браузером Internet Explorer и другими, «честными» браузерами (Firefox Mozilla, Opera, Safari и др.). Опытные веб-мастера и html-кодеры знают о нюансах создания качественного кроссбраузерного кода, но новички, у которых еще нет хорошего практического опыта верстки сайтов, часто набивают шишки и вспоминают родителей бывшего главы Microsoft. К сожалению, злость и обвинения – дело неконструктивное. Проблемы лучше решать, опираясь на опыт и шишки, желательно, чужие.

В этой статье я хотел бы рассказать об одной уловке при описании стилей CSS, позволяющей решить распространенную проблему: как сделать так, чтобы код верстки понимался только браузером Internet Explorer, но игнорировался всеми остальными «нормальными» браузерами. При этом JavaScript нам не понадобится, достаточно правок общего стиля CSS.
(далее…)

Заблуждения о бесплатном дизайне на шаблоне

 дизайне на шаблоне

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

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

Уточню, что не для всех сайтов шаблонный бесплатный дизайн подойдет. Если вы – гламурная девочка, зашли на этот сайт по вайфаю с модного бутика или топ-менеджер успешной корпорации, тогда вам, естественно, к Лебедеву. Остальным же советую почитать, подумать и выбрать. К счастью возможность выбора никто не отрицает.

Начнем анализировать популярные мифы о бесплатном шаблонном дизайне. Если что забыл, предлагаю дополнять в комментариях — обсудим.

(далее…)

С чего начать изучение веб-дизайна

Adobe Photoshop CS3

Пролог

Хотел бы рассказать небольшую историю, которая подойдет как эпиграф к этой статье. Года два назад я искал DVD диск на раскладках. Нужен был сборник дизайнерских программ, в котором, помимо Adobe Photoshop, Adobe Flash, Adobe Dreamweaver и Adobe Illustrator, были бы и CorelDraw, и несколько программ для создания иконок и скриншотов… Лень было искать и скачивать все по отдельности из интернета, а затем записывать на диск.

Объяснив продавцу, что мне нужен диск для веб-дизайнера, я получил несколько сборников DVD. Списки программ в описании дисков повторяли друг друга, наклейки только были разные. Составляли сборники далекие от веб-дизайна люди, потому ничего подходящего не было. Отдав продавцу диски и сказав «спасибо», я собирался уходить, но парень меня остановил. Вероятно, он подумал, что я просто компостирую ему мозги и решил вывести меня на чистую воду. Он спросил, что именно меня не устраивает во всех его дисках. На что я ему терпеливо объяснил, что на каждом диске есть только часть нужных мне программ, а «на этом нет даже Фотошопа».

И тут парень засиял. С чувством собственного достоинства и с высоты своего дизайнерского опыта, он мне объяснил, что профессионалы сайты делают в Дримвивере. А остальные программы нужны для понторезов вроде меня. Он был так счастлив от переполнявших его знаний, что мне даже жаль было его прерывать и сообщать, что HTML-верстка сайта в Dreamweaver’е – это всего лишь один из этапов разработки сайта, далеко не первый и не последний.

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

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

(далее…)

Код для вставки Flash в текст или шаблон блога

HTML код для вставки flash Казалось бы, тривиальная задача вставки flash-баннера или ролика в HTML-код своего сайта не заслуживает того, чтобы писать на эту тему целую статью. К сожалению, не все так просто. Существует множество вариантов кода для публикации Flash, при чем единственно правильного, однозначно понимаемого всеми браузерами и удовлетворяющего стандарты W3C, нет. И дело не только в том, что существует огромное количество вариантов того, в какой версии Flash создавался баннер, какие при этом использовались команды ActionScript, какой версией flash-плеера и в каком браузере будет просматриваться flash-анимация. Проблема еще и в том, что компания Microsoft при создании своего браузера Internet Explorer запретила реализовывать взаимодействие с интерактивным контентом, пока пользователь не активирует его сам. Примерно так же поступила и Opera. В результате появилось несколько десятков вариантов HTML-кода для вставки flash-роликов, у каждого из которого есть свои преимущества и недостатки.

Самым популярным и наиболее адекватным кодом для публикации flash на своем сайте является код, одновременно использующий элементы object и embed. В таком HTML-коде используется дублирующая запись вызова flash-ролика, зато вероятность правильной загрузки вашей анимации почти стопроцентная:

1
2
3
4
5
6
<object width="240" height="350"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
<param name="quality" value="high" /><param name="src" value="banner_name.swf" />
<embed type="application/x-shockwave-flash" width="240" height="350" src="banner_name.swf" quality="high"/>

</object>

Этот код HTML позволяет вставить на свою страницу баннер с именем banner_name.swf размером 240х350 и при этом достаточно flash-плеера 8й версии. Такой код генерировался средой разработки Macromedia Flash до выхода Adobe Flash 8.

(далее…)