Золотое сечение веб-страницы: как создать разметку шаблона бесплатно

Золотое сечение - отношение двух величин, равное 1,618033988749895 ≈ 1,618, известное еще, как "божественная пропорция", по неизвестным науке причинам чрезвычайно часто встречается в живой природе, является по-существу одним из законов природы. Видимо поэтому золотое сечение с глубокой древности находит широкое применение в практической деятельности человека: золотое сечение - одна из простых математических закономерностей, которые являются признанными канонами в изобразительном искусстве, архитектуре, веб-дизайне. Лишним подтверждением сказанного являются закономерности в логотипе компании Apple, основанные на золотом сечении.

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

Известно, что по-настоящему наш взгляд радуют изображения, в основу геометрии которых положено золотое сечение. Значит, Вам нужно, как минимум, подобрать размеры сайта, который находятся в отношении "божественной пропорции". Для этого у Вас есть две возможности. Первая - возьмите калькулятор, с помощью которого сможете легко умножить или разделить данный размер на 1,618. Вторая - Вы можете воспользоваться бесплатными или платными (есть и такие!) инструментами, которые позволяют быстро вычислить "золотое сечение". Главное преимущество таких средств - наглядность результата.

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

Как бесплатно поставить на сайт форму обратной связи

Недавно в срочном порядке понадобилось поставить на один из своих сайтов форму обратной связи. Естественно, захотелось сделать это бесплатно. Поискал в Сети. Информация, как всегда, нашлась.

Как бесплатно поставить на сайт форму обратной связи? Думаю, что этот вопрос возникает не только у меня. Поэтому решил написать об этом пост для общей пользы. Итак, читаем дальше.

У тех, кто занимается сайтосотворением не профессионально, а так, когда-никогда, от случая к случаю, периодически возникает вопрос "Как поставить на HTML-сайт форму обратной связи?"

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

Возможны несколько вариантов.

Один из них - создание формы обратной связи при помощи Google Docs.

Вам понадобится аккаунт  Gmail. Если он у Вас уже есть, авторизуйтесь в сервисе  Google Docs. Там ищите, где написано "Новая форма". Идите по этой ссылке, и приступайте к созданию формы. Вверху увидите меню, где есть команда Форма, туда и идите.

Процедура создания и настройки формы в Google Docs достаточно простая. В конце Вам нужно будет скопировать HTML-код, который следует вставить в свою веб-страницу. Например, в Блоггере для этого служит специальный виджет для вставки HTML-кода. На Вашей странице появится контактная форма, а сообщения из нее будут приходить Ва на почту Gmail.

Кстати, для создания более привлекательной формы, чем может предложить Google Docs, можно воспользоваться бесплатным сервисом JotForm. Здесь можно легко создать форму любой сложности. Чтобы использовать полученную форму в  Google Docs  ее нужно сохранить в формате Сохранить форму можно в формате  таблиц Google. Hа сайте  JotForm имеются примеры, помощь, форум.

Как создать форму обратной связи с помощью JotForm показано в этом видеоуроке, взятом на skillopedia.ru

Если этот довольно сложный способ Вас не устраивает, можете попробовать более простые варианты. Эти сервисы позволяют бесплатно создать форму обратной связи и вставить ее на сайт:

masterform.info - для тех, кто совсем-совсем не хочет заморачиваться (на русском языке);
Visitor Contact - на испанском
Wufoo - на английском
Icebrrg - на английском
FormSpring - на английском
FormSite - на английском

Вот еще несколько бесплатных генераторов контактных форм:
main-ip.ru/genform/
formm.ru/forms/
ip-whois.net/forma-obratnoj-svyazi/

В общем, есть из чего выбирать. Лично я предпочитаю  kontactr.com.

Sprite Cow - создает CSS-правила для точного позиционирования фоновых изображений

Sprite Cow - это простой веб-инструмент для веб-дизайнера, который помогает в один клик получить аккуратный CSS-код для точного позиционирования фонового изображения.

Достаточно лишь загрузить на сервис выбранное изображение и кликнуть его один раз, и вы немедленно получите правило CSS, которое можно скопировать, отредактировать и загрузить на свой сайт:

Все о цвете - бесплатный ресурс, где есть все о цвете

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

Цветовой круг

Сегодня хочу обратить ваше внимание на один бесплатный ресурс полностью посвященный цвету. По адресу colory.ru находится веб-сайт, который так и называется - Все о цвете. Здесь вы найдете информацию о физике цвета, гармоничных сочетаниях цветов, ощущении глубины и эмоциональном восприятии, истории цвета.

Кроме того здесь вы найдете необходимые сведения по теории цветовых моделей и подробное объяснение понятия цветового круга. Но самое главное то, что этот ресурс содержит несколько полезных бесплатных инструментов, которые помогут вам легко решить проблему выбора цветовых сочетаний, особенно если вы работаете над дизайном электронного ресурса.

Если вы используете бесплатный блогхостинг или решили применить готовый шаблон сайта или блога, то вопрос о цветовой гамме ресурса уже продуман дизайнерами, и вы можете просто выбрать приглянувшуюся вам цветовую схему. Но если вы хотите создать свой уникальный дизайн, то вам придется хорошо поразмыслить по поводу выбора цвета цвета фона, текста и других элементов оформления. И в этом вам помогут следующие инструменты сайта Все о цвете.

8 бесплатных CSS3-инструментов для начинающих веб-дизайнеров

1. CSS3 Generator - этот инструмент избавит вас от необходимости изучать премудрости CSS3: вы задаете параметры и сразу получаете готовый код. Также может служить наглядным пособием - тренажером для быстрого изучения CSS3 "методом тыка":

Изображение цветной ленты и тикета средствами чистого CSS3

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

Красивые ленты нравятся всем

Как получить такой эффект? Подробное описание вы найдете здесь.

24

Для создания изображения этого красивого тикета использована та же техника - чистый CSS, никаких картинок. Описание здесь.

3 бесплатных инструмента для подбора цвета в веб-дизайне

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

Первый сервис:



Colour Hunter - вы загружаете на сервис фото, а он выдает вам подходящую цветовую палитру с 16-ричными кодами цветов.



Второй сервис:



Colors Palette Generator на сайте CSS Drive действует аналогично предыдущему. 16-ричные коды цветов здесь можно просмотреть, если навести курсор мыши на нужный цвет. Цветовую палитру можно собрать "вручную", выбирая понравившиеся цвета двойным щелчком.



Кроме того, этот сервис по команде Save as CSS stylesheet (.css file) позволяет сгенерировать CSS-файл с полным набором кодов представленных цветов, например, такой как этот:

.color1 { color: #59a338}
.color2 { color: #36a4ca}
.color3 { color: #000000}
.color4 { color: #f6771a}
.color5 { color: #f78522}
.color6 { color: #aaabaa}
.color7 { color: #fdfdfd}
.color8 { color: #25526b}
.color9 { color: #676767}
.color10 { color: #1b83bd}
.color11 { color: #3c9236}
.color12 { color: #1891cc}
.color13 { color: #489636}
.color14 { color: #929292}
.color15 { color: #8a8a8a}
.color16 { color: #494949}
.color17 { color: #8e8d92}

Также по команде Save as Photoshop swatches (.aco file) сервис Colors Palette Generator выдаст вам цветовую палитру в формате Фотошоп.

Как создать флэш-эфект онлайн

Попробуйте использовать онлайновый Flash-генератор, который находится по адресу http://www.effectgenerator.com/.

Возможности сервиса видны невооруженным глазом, интерфейс интуитивный. Потому-то мне и непонятно, почему этот сервис у меня не сработал. Я пробовал его в последних версиях Google Chrome и Mozilla Firefox. Ничего не получилось. Может у вас получится.

Тем более что, по словам разработчиков ресурса, это довольно просто:



P.S. Уже после того, как я отправил этот пост, я вновь зашел на сервис http://www.effectgenerator.com/. И после того, как интерфейс сервиса полностью загрузился, я не стал закрывать стартовое окно, как сделал это ранее, а нажал кнопку Use Empty Effect. После этого веб-сервис заработал как часы!

CSS-генератор закругленных углов

Если вам нужно поместить контент веб-страницы в блок с красиво закругленными уголками, то совсем необязательно рисовать их, как это делали раньше. Те, кто дружат с CSS, могут воспользоваться бесплатным веб-сервисом border-radius.com by jacob bijani.

Что, собственно, может этот сервис? Он по вашему желанию генерирует CSS-код закругленных углов.
Задайте радиус углов (все четыре или по отдельности) и сразу же получите готовый CSS-код, который останется только вставить в таблицу стилей.

Никакой регистрации, рекламы и т.п. Все быстро и удобно.

Бесплатные шаблоны веб-страниц для Blogger

Где взять уникальные бесплатные шаблоны для Blogger или как легко создать их самому?

Вы блоггер? И ведёте свой блог на Blogger? Тогда, скорее всего, рано или поздно вы захотите создать свой собственный уникальный шаблон вашего блога, чтобы сделать его узнаваемым, и непохожим на другие блоги.

Что делать в этом случае? У Вас есть два прямых пути.

Первый путь, который я рекомендую, если вы - крутой спец по HTML или же просто мазохист, который получает своё удовольствие от вёрстки HTML. Обладая навыками HTML-вёрстки, Вы сможете воспользоваться рекомендуемой функцией Изменить HTML в настройках дизайна вашего блога. Конечно же, для тех, кто понимает в HTML и CSS, ничего супер сложного там нет. Но, как по мне, сама по себе процедура изменения HTML-шаблона вручную - занятие не из весёлых.

Поэтому, я от всего сердца (и без задних мыслей) рекомендую вам второй путь, который лежит на отличный бесплатный он-лайн генератор шаблонов для Blogger. Его веб-адрес - http://e-infotainment.com/trixapps/.

Здесь вы найдете генератор шаблонов Blogspot Template Generator TrixTG v2, который, кстати сказать, выдаёт конечный результат не только в формате Blogger, но и в обычном HTML (точная ссылка). Рекомендую взять этот ресурс на заметку! Ведь Blogspot Template Generator можно использовать не только для того, чтобы ваять шаблоны веб-страниц для Блоггера. Он также весьма пригоден, чтобы по-быстрому делать мини-сайты. Последнее обстоятельство, как я думаю, придётся весьма по вкусу начинающим манимейкерам-халявщикам. Кроме всего прочего, здесь же в изобилии имеются и готовые бесплатные шаблоны, которые, при желании, можно легко переделать на свой вкус... страх и риск.

Весьма вероятно, что вы ещё ленивее, чем я. Конечно, я вас совсем не знаю. Поэтому могу только предполагать такую возможность. То есть вы, возможно, настолько ленивы, что не хотите поиграться даже с этим замечательным сервисом. Или же, что тоже весьма вероятно, у вас туговато с английским. Тогда, специально для вас, существует третий путь. Идите прямо на... http://btemplate.ru/, и берите бесплатные готовые шаблоны для Блоггера там.

Сервисы для web-дизайнеров

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

• http://3d-pack.com/ - он-лайн генератор картинок объемных коробок (3d-коробка, коробка CD, CD и коробка, dvd-диск, книга), который по достоинству оценят манимейкеры - бесплатно и функционально;
• http://www.ajaxload.info/ - он-лайн генератор индикаторов загрузки страницы (чтобы серферу было нескучно ждать, пока загрузится Ваш суперсайт :)). Например, всего за два клика Вы сможете сгенерировать для своего сайта миленький индикатор;
• http://www.reflectionmaker.com/ - он-лайн генератор "отражений" - эффект "мокрого стола". Пригодится для создания логотипов, коробок для информационных продуктов и т.п. Можно попробовать скомбинировать с предыдущим сервисом.
  
• http://web2.0stylr.com/stylr.aspx - еще один генератор логотипов в стиле Веб 2.0. , который, к тому же (УР- РА-А-А!!!), поддерживает кириллицу;
• http://www.tabsgenerator.com/ - неплохой генератор изображений кнопок меню в форме ярлычка вкладки. Позволяет изменять размеры, толщину и цвет границы, радиус закругления углов, фон, стиль заливки, ориентацию;
• http://www.stripegenerator.com/ - еще один, довольно неплохой, генератор полосатых фонов. Стоит попробовать, сравнить и выбрать... этот.
  

Продолжение следует.

13 бесплатных сервисов для дизайнера

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

1. http://www.roundedcornr.com/ - генератор закругленных углов. Например, можно легко сгенерировать изображения кнопок со скругленными углами.
2. http://gridder.andreehansson.se/ - генератор шаблона разметки веб-сайта. Очень полезная вещь. Здесь можно взять специальный код, который внедряется в текст веб-страницы, и тогда его можно вызывать по мере надобности в процессе разработки. (Потом код следует удалить).
3. http://960.gs/ - сайт на ту же тему (похоже, что предыдущий использует его технологию), с хорошими примерами применения сервиса прямо на главной странице.
4. http://www.stripemania.com/ - генератор полосатых фонов.
5. http://www.websiteoutlook.com/ - сервис поможет оценить рыночную стоимость сайта, т.е. за сколько его реально можно продать (купить).
6. http://tinyurl.com/ - превращает длинные УРЛы в короткие, и, заодно, маскирует их. Например, http://metodichka.com.ua/index.php?productID=119 превращается в http://tinyurl.com/n5zv6p.
7. Кстати, http://anonymouse.org/ - этот полезный сервис сделает Ваш УРЛ анонимным.
8. http://www.simwebsol.com/ - генератор логотипов в стиле Веб 2.0.
9. http://creatr.cc/creatr/ -еще один он-лайн генератор логотипов. К сожалению, оба не поддерживают кириллицу.
10. http://creatr.cc/creatr/ - генератор официальных "печатей". Можно выбирать форму, изменять надписи, вставлять эмблему в центр печати.
    
11. http://www.web20badges.com/ - генератор Веб 2.0 - бейджиков. Пригодится манимейкерам.
12. http://en.web-graphics-maker.com/ - генератор разной графики для веб: фоны, линейки, кнопки.
13. http://freekeywords.wordtracker.com/ - помогает подбирать ключевые слова, поисковые запросы. Попробуйте сами.

Продолжение следует...