Высококачественный безгонорарный контент. Начало работы: выяснение нюансов
Карта сайта WordPress это важнейший инструмент ускоряющий индексацию страниц сайта. При помощи различных плагинов WordPress можно создать карту сайта различных форматов (XML, HTML, CVS). Для поисковиков важен формат XML. При этом нужно помнить, что карта сайта в формате XML не видна посетителям. Для посетителей карту сайта можно создать при помощи специальных плагинов. В этой статье я приведу три плагина для создания карты сайта, как для поисковиков, так и для посетителей.
Карта сайта WordPress для посетителей — Плагин WP Realtime Sitemap
Плагин позволяет отображать на сайте сформированную им же карту сайта. Этот плагин не создает карту сайта в формате XML и не передает поисковикам созданную карту сайта. Плагин WP Realtime Sitemap создает карту сайта для внутреннего пользования и может отображать карту сайта в любом месте сайта WP.
Установка плагина WP Realtime Sitemap
Устанавливается плагин любым из трех стандартных способов (Подробно об установке плагинов читать ).
- Скачиваем zip архив плагина (ссылка выше) и устанавливаем на сайт при помощи загрузчика в административной панели;
- Ищем плагин на вкладке «Плагины» в окне «Поиск» и затем устанавливаем автоматически;
- Закачиваем распакованный архив плагина по FTP в каталог сайта.
Отображение карты сайта на сайте WordPress
Для вставки карты сайта на страницы сайта нужно в визуальном редакторе добавить строку: wp-realtime-sitemap, в квадратных скобках при написании статьи.
Для вывода карты сайта в меню сайта, нужно создать Страницу на вкладке Консоль→Страницы→Создать новую. Дать странице имя, например, карта-сайта. В окне визуального редактора ввести код:
Wp-realtime-sitemap
Поместить сделанную страницу в любое созданное меню сайта (Консоль→ Внешний вид → Меню ).
Настройки плагина WP Realtime Sitemap
Заходим по адресу: Консоль→Параметры→WP Realtime Sitemap .
В открывшемся окне настройки плагина WP Realtime Sitemap заполняете нужные пункты. Вот несколько принципиальных настроек:
Можно включить/выключить показ страниц, категорий, сообщений и архивов на катре сайта.
При включении этих пунктов можно убрать из показа отдельную информацию, указав ID (идентификационный номер) ненужных к отражению материалов.
В настройках WP Realtime Sitemap можно включить показ категорий и мета тегов в виде облака. Выбрать можно либо показ облаком, либо списком.
В настройках плагина можно изменить заголовки всех элементов карты сайта: сообщения, страницы, меню, архивы, категории, теги.
Также можно поменять все пункты меню местами.
По умолчанию иерархия карты сайта следующая:
- Меню;
- Страницы;
- Сообщения;
- Пользовательские типы сообщений;
- Архивы;
- Категории;
- Теги.
Плагин Google XML Sitemaps: карта сайта Wordpres для поисковиков
Прежде всего, не путайте плагин с плагином Google XML Sitemap. Здесь речь пойдет о плагине Google XML Sitemaps.
В отличие от плагина WP Realtime Sitemap плагин Google XML Sitemaps при установке генерирует специальную карту сайта в формате XML и информирует поисковые машины Google, Bing, Yahoo о созданной карте сайта. Этот плагин работает в режиме on-line. Карта сайта WordPress постоянно пополняется и отправляется поисковым машинам по мере публикации материала на сайте. Настройка плагина делается один раз при установке плагина.
Настройка плагина Google XML Sitemaps
После установки плагина Google XML Sitemaps в меню «Параметры» появиться новый пункт «XML Sitemap». Это пункт настройки плагина Google XML Sitemaps.Открываем его.
В первой строке настройки видим запись с предложением, создать карту сайта в первый раз. Не спешите нажимать эту кнопку. Ознакомьтесь со всеми настройками плагина по умолчанию.
Сейчас нас интересует пункт «Расположение Вашего файла с картой сайта».
В настройке можно указать плагину, где расположена карта сайта XML. Возможны два варианта расположения карты сайта WordPress для плагина Google XML Sitemaps.
Примечание : Права доступа CHMOD меняются в FTP клиенте. Для этого кликните правой кнопкой по файлу и в строке «Права доступа к файлу» изменить права доступа CHMOD.
Определитесь с содержанием карты сайта
В настройках Google XML Sitemaps можно изменить частоту отправки карты поисковикам. Этот пункт настройки не является командой, а носит только рекомендательный характер.
В пункте «Постройте карту сайта заново при обновлении дневника» должна стоять галочка.
Поставьте галочки в двух пунктах. Записывать карту как обычный файл XML и записывать карту как упакованный файл . Упакованный файл немного снижает нагрузку на сервер.
После заполнения этого пункта, не трогая остальные можно нажимать «Создать карту сайта первый раз».
Больше трогать ничего не нужно. Нужно запастись терпением и ждать итогов работ плагина Google XML Sitemaps. Если все нормально плагин сообщит, что карта сайта создана, покажется число создания и в настройках будет указан адрес, где карта сайта расположена.
Плагин Google XML Sitemaps создает карту сайта по адресу: Ваш_сайт/sitemap.xml . Кликнув по адресу можно посмотреть, как ваша карта выглядит. После создания карт сайта можно добавить их размещение в файл .
Можно создать дополнительную карту-сайта при помощи плагина Sitemap Generator
Устанавливаете плагин Sitemap Generator одним из удобных способов. В меню консоли появляется пункт «Sitemap Generator». Этот плагин создает карту-сайта в трех форматах: XML,HTML,CVS. Для поисковиков важен формат XML. При открытии пункта меню Sitemap Generator → Generator вы можете увидеть фактические адреса созданных карт.
Также можно настроить содержание карты расставив приоритеты в настройках. Значение «0» исключит пункт из карты сайта. Нормальный приоритет 0.5.
Этот плагин (Sitemap Generator) только создает карты сайта, но не поддерживает связи с поисковиками. URL карты сайта XML можно и нужно отправлять в веб-инструменты Google WebMasters и Яндекс Вебмастер вручную.
Подведем итог выше изложенного
- WordPress предлагает массу инструментов для создания карты сайта. Для поисковых машин важны карты сайта в формате xml и xml.gz .
- При добавлении материала на сайт карта сайта должна обновляться. Чтобы не делать это вручную, лучше установить плагин с автоматическим обновлением карты сайта Google XML Sitemaps.
- Карта сайта WordPress для посетителей создается при помощи сторонних плагинов. В статье предложен плагин WP Realtime Sitemap. Я использую плагин: SEO HTML Sitemap .
Вот такие три плагина карта сайта WordPress! Успехов в изучении WordPress.
Доброго времени суток.
Продолжаем описание плагинов для CMS WordPress из и сегодня мы поговорим о том как создать xml карту сайта с помощью плагина Google XML Sitemaps — мое мнение — его нужно устанавливать на каждый сайт в обязательном порядке. Затронем тему онлайн генераторов файла sitemap.xml а также что делать с картой сайта после ее создания.
Давайте сперва разберемся, что такое xml sitemap и для чего это вообще нужно:
XML Sitemap – это некая карта сайта, специально «подточенная» для поисковых систем как Google так и Яндекс и другие, не менее важные поисковики. Расширение этой карты — .xml – сделанное специально для того что бы поисковики смогли прочесть находящиеся там информацию. А находятся там все ссылки Вашего сайта, которые Вы допустили к индексации.
Из этого и следует предназначение xml карты сайта – создавать ее нужно для того что бы поисковики смогли быстрее проиндексировать нужные Вам страницы и материалы на сайте.
Для того что бы удалить ненужные Вам страницы как метки, рубрики и т.д. (то есть все то что приводит к дублированию контента) из индекса поисковиков – Вы должны настроить свой файл robots.txt , но об этом в других статьях.
Возвращаясь к наше теме, хочется обратить Ваше внимание на то что, как правило, карта сайта в формате «XML » создается для поисковых систем , «HTML » карта сайта – для Ваших посетителей . Пожалуйста не путайте эти 2 «понятия ».
Если хотите сделать карту сайта в html формате (это карта для Ваших посетителей), ознакомьтесь с описанием лучшего WordPress плагина для этой цели – – посмотрите на страницу «Все статьи блога » — моего сайта.
Если Вы не знаете как найти ID страниц, записей, категорий и т.д., которые Вам могут понадобиться для настройки плагинов DDSitemapGen, Google XML Sitemaps и т.д. – почитайте про плагин - .
Отвечу на, возможный, вопрос – «Какую из них создавать, xml или html карту сайт? »
Ответ – обе карты нужны, по вышеизложенным причинам.
Хочется отметить, что после создания именно xml карты своего сайта, и правильной настройки robots.txt , было замечено сокращение времени попадания новых статей в индекс Google и Яндекса.
И на последок, хочу привести пример некоторых исследований в сфере сайто-продвижения, которые явно показывают, что отсутствие xml карты сайта существенно влияет на индексирование и соответственно, попадание страниц ресурса в поисковых выдачах. Смотрите скриншот ниже:
Разбиваю статью на 3 части:
1. Как создать и настроить xml карту сайта с помощью плагина Google XML Sitemaps для сайтов на WordPress.
2. Онлайн генераторы файла sitemap.xml
3. Что делать после создания файла sitemap.xml
1. Google XML Sitemaps – WordPress плагин для создания карты сайта sitemap.xml
Изменить частоты:
Этот параметр позволяет настроить частоту посещения робота поисковых систем на Ваш сайт. Почитайте внимательно вложенную информацию, и, как вариант можете настроить как на скриншоте:
Приоритеты:
Настраивайте приоритеты для каждой страницы по желанию, можете оставить настройки по умолчанию. Главное не понижать приоритет главной страницы по отношению к другим страницам на сайте.
Все! На этом заканчивается настройка WordPress плагина Google XML Sitemaps. Не забудьте сохранить все выбранные настройки путем нажатия на соответствующую кнопку.
Проверить, создалась ли xml карта Вашего сайта можно написав в строке Вашего браузера следующее: «http://ваш_сайт.ru/sitemap.xml ». XML карта должна примерно выглядеть как на картинке ниже:
Напишите в комментариях, какие еще настройки Вы используете для создания xml sitemap , может я что пропустил…
2. Онлайн генераторы Sitemap XML
Ниже представлен список онлайн сервисов для генерации файла sitemap.xml :
- — простой, на первый взгляд онлайн генератор XML карты сайта, но обратите внимание на структуру полученной карты – могут попасть ссылки на картинки или ненужные страницы.
- - этот онлайн генератор, при создании карты, учитывает тег «noindex ». Можно указать ссылки на страницы которые Вы не хотите индексировать. Опять же, в структуру могут попасть и ссылки на картинки и т.д.
- - это более удачный сервис для нашего дела. Учитывает запреты указанные в файле robots.txt , тег «noindex ». Можете воспользоваться платным и бесплатным вариантом. Для бесплатного — стоит ограничение в генерации 3 XML карт в день и не позволяет загружать более 500 страниц. Можете настроить определенный фильтр и исключать ссылки которые содержат картинки. В платной версии – фильтров по больше.
Можете ознакомиться с этими сервисами и узнать более детальную информацию на их страницах.
Совет! Старайтесь создать файл sitemap.xml с помощью плагина Google XML Sitemaps, если не получится можете пользоваться онлайн генераторами или задать вопрос в комментариях .
3. Что делать после создания файла sitemap.xml
Если Вы запомнили то что написано выше, значит уже знаете что карту нужно показать основным поисковым системам для того что бы они смогли корректно отсканировать Ваш сайт.
Для начала, Вы должны зарегистрировать свой сайт в эти самые поисковики: и <<< почитайте подробные статьи о том как это сделать.
Как добавить карту сайта sitemap.xml в Google
Зайдите в свой аккаунт для вебмастеров гугл -> Сканирование -> Файлы Sitemap -> красная кнопка «Добавление/Проверка Файла Sitemap ».
В нужном поле записываем название файла, не забываем указывать расширение .xml .
Как добавить карту сайта sitemap.xml в Яндекс
Выполняем вход в свой аккаунт Яндекс.Вебмастер -> Настройка Индексирования -> Файлы Sitemap .
Сперва проверьте файл карты на наличие ошибок. Сделать это можно по ссылке которую Вы там найдете — «Валидатор »
Если ошибок не найдено, возвращаемся на страничку добавления карты, в аккаунте вебмастера.
По новой вводим адрес карты и нажимаем «Добавить ».
Учтите что Яндекс делает обход по Вашей карте раз в две недели – по официальным данным.
Следите за новостями блога и узнаете как правильно создать и настроить этот файл для правильного индексирования Вашего сайта поисковыми роботами.
На последок, хочется сказать то, что хоть и наличие файла sitemap.xml на сайте – сильно не влияет на индексирование сайта и его попадание в поисковую выдачу, но значительно помогает в этом. Не ленитесь, сделайте свою карту и забудьте о ней.
С надеждой на то что Вам помогла эта статья в решении своих задач, позвольте закончить ее, напоминая что вопросы можно задать в комментариях и кнопки соц.сетей находятся ниже.
Меня иногда спрашивают: “Как и в какой программе создается дизайн сайтов?” Ответить однозначно на этот вопрос сложно, потому что при создании дизайна сайта лично я использую множество различных приемов и программ. В настоящее время абсолютное большинство web-верстальщиков работают с макетами, созданными в программе Photoshop. Изначально созданная и предназначенная для обработки фотографий эта программа сейчас аккумулировала в себе столько различных функций (в том числе и работу с векторной графикой), что используется где угодно, в том числе и в веб-дизайне. Но при рисовании макета сайта иногда требуется иной функционал, который не может обеспечить даже всесильный фотошоп. Речь идет о векторе.
Начало работы: выяснение нюансов
Рисование сайта начинается с выяснения и согласования нюансов. Сайт может быть “резиновым”, а может быть фиксированной ширины. От этого может зависеть, например, внешний вид шапки сайта – хедера, или колонок – сайдбаров. В зависимости от назначения сайта продумывается структура веб-интерфейса. Например интернет-магазины гораздо лучше выглядят в фиксированном дизайне до 1000 пикселей ширины с одним сайдбаром слева. В сайдбаре располагается меню каталога товаров. Данный вариант прочно закрепился на просторах интернета, и довольно сложно сейчас найти магазин, отличный от этой схемы расположения элементов. Другая ситуация у информационных сайтов с тоннами текстовой информации. Если текста на сайте больше чем графики, то при фиксированной ширине сайта на широком экране пустые поля по бокам будут нерациональны. При резиновом же дизайне текст будет равномерно заполнять весь экран, что позволит избежать частой вертикальной прокрутки (всякие википедии и ей подобные энциклопедии).
Допустим нам нужно разработать дизайн корпоративного сайта фирме, торгующей электроникой, с разделом “интернет-магазин”. Сразу обозначаем:
- фиксированный дизайн 1000 px;
- форматы файлов – psd (для программиста-верстальщика) и jpg (для согласования с клиентом);
- стиль дизайна (например “минимализм” – белый фон, минимум цветных навязчивых графических элементов, либо в соответствии с требованиями корпоративного стиля);
- нужен логотип в векторном формате.
Если согласие с заказчиком по этим вопросам достигнуто, то можно переходить к наброскам. Если достигнуто во всем, кроме пункта 1 , то можно аргументировать чем-то вроде:
“Фиксированный дизайн позволяет создать единообразие в отображении сайта. При любом разрешении все элементы будут оставаться на своих местах, там, где их заверстал разработчик, в то время как при “резиновых” дизайнах при разном разрешении элементы сдвигаются-раздвигаются в стороны, что при дальнейшем самостоятельном наполнении сайта клиентом может привести к вариантам отображения, не предусмотренным при первоначальной разработке. Фиксированный дизайн 1000 px (от 920 до 1000px) на сегодняшний день считается стандартом для корпоративных сайтов и интернет-магазинов продиктованной статистикой (т.к. по статистике количество пользователей с экранами свыше 1000 px по ширине составляет большинство).”
Создание макета
Теперь самое время начать создавать наброски макета. Так как данная статья – не урок, здесь я описываю только основные принципы создания дизайна сайтов. В CorelDraw я делаю рабочую область с шириной 1920 px, высоту делаю не меньше, в процессе разработки ее можно будет подкорректировать. Дальше включается творческая фантазия, ограниченная только рамками здравого смысла и пониманием технических возможностей верстки. Рисую хедер, сайдбар, зону контента и футер, все в пределах ширины сайта – 1000 px. Для интернет магазина неплохо нарисовать пару-тройку слайдов для слайдера картинок. Обычно такими слайдами информируют посетителей о новых коллекциях, поступлениях товара или о грандиозных скидках. Но пока на этапе наброска рисую просто область слайдера и элементы управления им.
Для статьи без особых изысков накидал набросок макета:
Далее нужно заполнить этот макет информацией. Сразу добавляю логотип, меню и поле ввода поиска. Пункты меню и текст главной страницы заполняю произвольно, можно взять с того сайта, который клиент указал в качестве “хочу лучше”. Главное – показать страницу так, как она могла бы выглядеть в реальности. Экспериментирую с цветовой гаммой, обозначаю ссылки внутри текста во всех трех состояниях – ссылка, наведенная ссылка, посещенная ссылка. Тоже самое с пунктами меню: рисую все состояния элементов меню – пункт, наведенный пункт, раскрытое меню, пункты подменю и т.д. Не упускаю ни одной мелочи, так как от того, как подробно нарисую я дизайн, зависит окончательный вид сверстанного сайта.
Вот так выглядит страница, заполненная информацией и элементами интерфейса, которую можно уже отправлять на согласование клиенту:
При согласовании макета бывает много правок, клиенту может не понравиться цветовое оформление или расположение элементов интерфейса на странице. При разработке в программе CorelDraw все эти исправления делаются очень быстро. В принципе наша цель сейчас – это получить согласие клиента на внешний вид страницы, а все технические нюансы по подготовке файлов к верстке можно оставить на потом.
Есть несколько основных моментов, на которые стоит обращать особое внимание при разработке дизайна сайтов в CorelDraw:
Типографика сайта
Шрифт при создании макета нужно подбирать сразу тот, что будет использоваться на сайте. В моем примере использован Arial, но есть множество других шрифтов, которые можно использовать при создании сайта. При сдаче макета верстальщику, обязательно уведомить его о выбранном и согласованном наборе шрифтов, а также о размерах, цвете, вариантах начертания и т.д. Это нужно потому, что при создании графического макета легко вообще не учесть такого важного в веб-дизайне момента, как типографика. К тому же есть такие клиенты, у которых в фирменном стиле компании предусмотрен корпоративный шрифт. Хорошо, если этот шрифт стандартный (тот же Arial к примеру), если нет – то нужно узнать у клиента (или изучить бренд-бук), предусмотрен ли вариант фирменного шрифта для создания сайтов компании. Если нет, то компетентно пояснить клиенту, что встраивание нестандартных шрифтов в сайт сопряжено с большими трудностями. Поэтому бренд-бук должен содержать наименование шрифта, который будет возможно максимально близок по внешнему виду к корпоративному, но все же являться стандартным. Только в этом случае можно обеспечить максимальное единообразие отображения сайта на устройствах пользователей.
Рисовать сайт “в пикселях”
Макет нужно рисовать сразу в пикселях, никаких миллиметров, дюймов и ярдов. Все что мы делаем в веб-дизайне – считается в пикселях, либо – если речь идет о “резиновом” дизайне – в процентах, относительно ширины или высоты экрана пользователя. Тот макет, что мы отправляем клиенту, должен иметь оригинальный размер. Развернув его на полный экран, клиент сможет правильно оценить внешний вид будущего сайта.
Делать несколько макетов сайта
Мало какой современный сайт имеет вид внутренних страниц идентичный главной странице. И поэтому неверно делать дизайн только одной страницы. К тому же на внутренних страницах появляются элементы, которых нет на главной. Например “хлебные крошки”, дополнительные меню, каталог товаров, и множество элементов, связанных с каталогом (кнопочки “купить”, “сравнить” и т.д.). Поэтому если серьезно подходить к работе, нужно выдать клиенту как минимум 3-5 страниц сайта.
Узнать заранее на какой CMS будет сделан сайт
Очень важный момент! От того, на какой CMS будет строиться сайт зависит работа дизайнера. Хорош тот дизайнер, который знает хотя бы примерно популярные системы управления, и основные особенности этих систем. Поэтому будет проще и быстрее нарисовать дизайн под конкретную CMS, чем потом получать от верстальщика вопросы, типа “вы рисовали под Bitrix или WordPress?” Вообще профессиональная разработка веб-интерфейсов, где продумывается действие каждого элемента, предполагает наличие отличных знаний конкретной системы управления сайтом. Поэтому изучать CMS нужно и важно.
Подготовка файлов к верстке
Когда макет утвержден заказчиком, наступает важный момент по подготовке файлов для верстки. От того, как грамотно подготовлены файлы зависит то, как быстро сверстает шаблон верстальщик.
Верстальщики работают с файлами .psd , значит весь дизайн перенесем в программу Photoshop. Каждый элемент макета, будь то логотип или разделительная линия в меню, должны располагаться в отдельном слое. Слои нужно объединять в группы.
Но не только файл .psd нужен верстальщику. Например спрайты можно сделать заранее, да и сами элементы дизайна, если они есть в файлах и уже годятся для размещения в шаблоне – верстальщику от этого только легче. Поэтому все элементы я сначала сохраняю в файлы .png и раскладываю их по тематическим папкам. Обычно у меня получается 5 основных папок с именами:
“HEADER”, “SLIDER”, “SIDEBAR”, “CONTENT” и “FOOTER”.
Внутри этих папок размещаются другие папки, названные соответственно своему назначению. Например в папке “HEADER” есть такие папки, как “Search” (поиск) с элементами, относящимися только к блоку поиска, “Top-menu” (верхнее меню) с элементами меню, “Logo” – с логотипом. Элементы внутри этих папок названы так, чтобы верстальщик сразу понял для чего конкретный элемент предназначен. Например для полоски меню будет несколько файлов с именами:
top-menu-bg.png (фон меню), top-menu-shadow.png (тень, отбрасываемая меню), top-menu-separator.png (разделительная линия в меню), top-menu-hover-active (элемент меню, меняющийся при наведении либо в активном состоянии).
Получив такой набор готовых файлов, верстальщики могут работать только с ним. Но на всякий случай можно сделать и привычную .psd шку. Для этого надо просто создать группы и слои с такими-же именами и все расположить в соответствии с макетом.
На этой странице я расскажу о приемах работы в редакторе векторной графики Corel Draw. Они были разработаны после вопросов нескольких знакомых дизайнеров, не имевших опыта разработки web-сайтов, и взявшихся делать только графический макет страницы. Вопросы были сформулированы так: «А какими размерами ограничено поле моего рисования?» и «Все ли я могу рисовать?». Все нижеописанные действия отнимут около минуты времени и позволят раз и навсегда снять вопрос о размерах. Работы велись в Corel Draw X4, поэтому названия некоторых меню могут отличаться от других версий программы.
Итак, начинаем. Прежде всего, откроем Internet Explorer и развернем его во весь экран. Не загружая никакого сайта - окно браузера должно быть чистым - нажимаем клавишу Print Screen. Иногда может потребоваться нажать Print Screen 2 раза подряд. Мы получаем снимок экрана (скриншот) с браузером, который находится в буфере обмена компьютера. Открываем Corel, создаем новый файл. Затем нужно щелкнуть 2 раза правой кнопкой на линейке, в появившемся меню Ruler выбрать в качестве единиц измерения Points . Вставляем наш снимок (Shift+Insert) из буфера обмена. Размеры вставленного изображения, если все вышло верно, должны соответствовать разрешению вашего монитора. Таких же размеров делаем и нашу страницу. Снова выделяем изображение и выравниваем его по центру страницы (Arrange > Align and distribute > Center of page либо просто нажать клавишу «P»). Не снимая выделения нажимаем правую кнопку мыши и закрепляем объект (в выпавшем меню выбираем Lock Object ). Вместо блокировки объекта можно поместить его на новый слой и заблокировать сам слой - главное, что изображение не мешало работать.
Теперь определимся с полем для рисования. Несмотря на то, что оно вроде бы четко обозначено белым полем браузера нашего снимка, следует помнить, что у потенциального посетителя вашего будущего сайта может быть монитор с другими размерами - больше или меньше. Если вы работаете на 21-дюймовом мониторе и заполните все пространство скриншота браузера не оставив дополнительных пространств по краям, то пользователь с 17-дюймовым монитором всего не увидит - часть сайта будет срезана, появятся полосы прокрутки. Если вертикальные - не страшно. Но появление горизонтальных было бы не желательным. Нужно искать компромиссный размер. Учитывая, что 17-дюймовых мониторов становится все меньше, за основу размеров поля рисования я бы взял стандартное разрешение 19-дюймового монитора - 1280х1024 пикселей минус размеры панели задач рабочего стола и всех панелей браузера. Точно подобрать размеры невозможно - у одного пользователя панель задач сбоку, у другого - сверху. Да и количество рядов иконок бывает разным. Размеры различных панелей и кнопок у разных браузеров тоже разные... Я в своей работе ориентируюсь на такие размеры поля рисования: ширина - 1280 минус 30 пикселей, отнимаемых полосой прокрутки; высота - 1024 минус 132 пикселя панели задач и различных панелей браузера, и минус 32 пикселя, отнимаемые строкой состояния внизу. Итого получается 1250х860. Что говорят нам эти цифры? Что на 17-дюймовом мониторе всё не поместится - появятся горизонтальные полосы прокрутки, а на 21-дюмовом и более с краев появятся свободные пространства. Таким образом, если у вас именно 19-дюймовый монитор и вы ориентируете свой сайт именно на такие мониторы - смело работайте во всем белом поле браузера. Если же ваш монитор больше - нарисуйте прямоугольник с размерами 1250х860 пикселей и выставьте его по центру белого поля снимка браузера. По бокам сразу появятся эти самые пустые пространства, которые вполне могут быть закрашены цветом или фоном, но в которых не должно быть текстов, баннеров, таблиц и других элементов страницы. Затем нужно совместить верхнюю границу прямоугольника с верхней границей белого поля и, вытянув 3 направляющие линии, совместить их со сторонами прямоугольника (двумя боковыми и нижней), а сам прямоугольник можно стереть. Этими направляющими и ограничено поле рисования. Повторюсь, что размеры поля рисования относительны, и могут быть меньше, если у пользователя, например, панель задач имеет 4 ряда иконок, а не один, как у меня. Будем считать, что рабочее поле у нас есть, можно работать. Целесообразно сохранить такой файл в качестве шаблона - начинаешь делать новый сайт - открыл его и сразу работаешь, не высчитывая никаких размеров.
Теперь об одной интересной возможности Corel Draw. Перед этим нужно убедиться, что не нет никаких объектов, выступающих либо находящихся за пределами рабочего поля страницы и открытых дополнительных панелей-докеров. Нажимаем F4 (либо в выпадающем окошке масштабирования Zoom Level выбираем To Fit ).
Затем F9 (полноэкранный просмотр). Мы получили несколько увеличенное изображение нашего браузера. Следующий шаг - в Zoom Level вводим новое значение масштаба - немного больше предыдущего, и после его изменения снова нажимаем F9 . Так нужно сделать несколько раз, и меняя масштаб добиться того, что снимок после нажатия клавиши F9 занимал весь экран, то есть визуально скриншот выглядел также, как и наш открытый браузер. Когда это случится, нужно запомнить значение масштаба. Зачем все это? Рано или поздно возникнет необходимость показать кому-нибудь нарисованный макет без объяснений, вроде: «Здесь будет так, а весь сайт будет выглядеть вот так» и т.п. Вместо этих объяснений нажимаем F4 , в Zoom Level ставим запомненное ранее значение масштаба, нажимаем F9 и видим перед собой наш макет, неотличимый от настоящего открытого браузера, причем конечный результат будет выглядеть именно так, каким вы его видите сейчас. Здорово, не так ли! Следует помнить о выступающих объектах и докерах, иначе изображение в полноэкранном просмотре будет смещено в сторону. Таким образом мы получили возможность показать в любой момент реальную страницу сайта, минуя последующие трудоемкие стадии - обработку графики, ее резку с оптимизацией и html-кодирование.
Работая над макетом в Corel Draw вы должны быть уверены, что работаете в цветовой модели RGB, то есть все цвета должны быть именно в ней, а не в SMYK или LAB. В противном случае у вас при дальнейшем переводе в RGB изменятся цвета, которые были не в этой модели. С дизайнерской точки зрения работа не ограничена ничем - можно рисовать все, что вздумается и применять все эффекты, доступные в этой программе. Очень эффектно выглядит комбинация растровой и векторной графики. Учитывая, что в Corel можно импортировать файлы программы Photoshop и при этом поддерживаются слои, сделать это несложно. Для этого в Photoshop мы делаем все необходимые действия, например, производим сложную фигурную вырезку, через которую будет просвечивать векторная графика, нарисованная в Corel, и сохраняем файл с расширением.psd. Затем в Corel"е импортируем его (File > Import) , где наша вырезка будет представлена в виде отдельного графического объекта, а если слоев в Photoshop было несколько - то в виде группы объектов. Если предполагается регистрация сайта в баннерных сетях, не лишним будет подумать о размещении баннеров заранее и оставить для них место. Лучший вариант - выйти в интернет и сохранить парочку себе на диск, поместив их затем на своем макете в нужном месте. Если же предполагается размещение контекстной рекламы, то для нее также необходимо предусмотреть место.
Основным критерием работы является чувство меры - каждый графический элемент замедляет загрузку страницы пропорционально своим размерам. Трудно сразу научиться навскидку определять приблизительный размер всей страницы, поэтому, на мой взгляд, лучше нарисовать чуть меньше, чем чуть больше. В своих работах я всегда стараюсь, чтобы размер графики главной страницы не превышал 40-50 килобайт, кроме тех случаев, когда заказчик выдвигает свои требования.
Несмотря на то, что в Corel"e есть свои средства оптимизации изображений, дальнейшую обработку будем производить в программе Photoshop. Под дальнейшей обработкой подразумеваются небольшие доводки и подправления, если таковые имеются. Кроме того, иногда некоторые вещи просто удобнее и легче доделать в Photoshop. Для этого экспортируем наш макет в формат Tiff Bitmap . Порядок действий таков: (File > Export) , в Files of type выбираем «Tiff Bitmap» , в «File name» вводим имя файла и нажимаем «Export» . В открывшемся окошке «Convert to Bitmap» выбираем:
Размеры изображения (Image Size) должны соответствовать в пикселях размерам скриншота или, говоря другими словами, разрешению вашего монитора (на рисунке размеры 19-дюймового монитора). Соответственно в процентах - всё по 100%. Нажимаем ОК . Происходит експорт в Tiff Bitmap всего макета, включая скриншот. Если же требуется конвертировать в Tiff без скриншота и с прозрачным фоном, то необходимо разлочить его и удалить (если скриншот на отдельном слое - просто сделать слой невидимым), а опциях конвертирования отметить чекбокс «Transparent background». В полях размеров значения в пикселях изменятся, но в процентах значения ширины и высоты должны все равно быть по 100%. Всё. На выходе имеем Tiff Bitmap с разрешением 72 ppi в RGB, готовый к оптимизации и резке.