Ш аблоны позволяют настраивать все необходимые параметры, которые Вы хотите предварительно применить к макету документов, стилям, форматированию, вкладкам, шаблону текста и т.д. Затем Вы можете легко создать новый документ на основе этого шаблона.
Когда Вы сохраняете документ в качестве шаблона, Вы можете использовать этот шаблон для создания новых документов. Эти новые документы содержат весь текст (и изображения и другой контент), которые содержит шаблон. Они также имеют одинаковые настройки, разделы и стили макета страницы в качестве шаблона. Шаблоны могут сэкономить Вам много времени, когда Вы создаете несколько документов, которые должны иметь согласованный макет, формат и некоторый текст шаблона.
Как сохранить документ в качестве шаблона
Первое, что Вам нужно сделать, — это создать свой документ так, как Вы хотите, чтобы выглядели новые документы. Разделите текст (и изображения и т. д.) вплоть до материала шаблона, который Вы хотите отображать в новых документах. Дальше настраивайте макет страницы (поля, разделы, столбцы и т. д.), а также любые форматирование и стили, которые Вы хотите использовать.
Когда у Вас есть документ, который Вам нужен, пришло время сохранить его в качестве шаблона. Откройте меню «Файл», а затем нажмите «Сохранить как».
После ввода имени для своего шаблона откройте раскрывающееся меню полем полем имени, а затем выберите параметр «Word Template (* .dotx)».
Вы сохранили свой собственный шаблон Word.
Как создать новый документ на основе шаблона
После того как Вы сохранили свой собственный шаблон, Вы можете создать на его основе новые документы. Самый простой способ сделать это — просто запустить Word.
Его всплывающий экран показывает кучу шаблонов, которые являются встроенными или загружаемыми. В верхней части окна нажмите ссылку «ЛИЧНЫЕ», чтобы отобразить Ваши собственные шаблоны. Затем все, что Вам нужно сделать, это щелкнуть по нужному шаблону, и Word создает на его основе новый документ.
По умолчанию Word любит сохранять шаблоны в Documents\Custom Office Templates, где они будут отображаться вместе с шаблонами, которые Вы создаете в любом другом приложении Office.
Когда Вы сохраняете шаблон, Вы можете выбрать другое местоположение, если хотите. Проблема в том, что если Вы сохраните его в другом месте, Word, возможно, не сможет его увидеть и отобразить на заставке в качестве опции. Если Вам это не очень важно, сохраните их в любом месте. Вы можете создать новый документ на основе шаблона, просто дважды щелкнув файл шаблона.
Вы также можете открыть шаблон в Word, чтобы его можно было отредактировать, щелкнув правой кнопкой мыши файл, а затем выбрав команду «Открыть» из контекстного меню.
Если Вам нужен еще более организованный подход, Вы можете изменить местоположение по умолчанию. Это позволяет сохранять шаблоны там, где Вы хотите (хотя они все еще должны находиться в одном месте) и иметь доступ к ним на заставке Word.
В меню «Файл» выберите команду «Параметры». В окне «Параметры Word» выберите категорию «Сохранение» слева. Справа введите путь, в котором Вы хотите сохранить шаблоны в поле «Расположение личных шаблонов по умолчанию». Нажмите «ОК», когда закончите.
В конце концов, шаблоны Word функционально похожи на обычные документы Word. Большая разница заключается в том, как Word обрабатывает эти файлы, что упрощает создание на их основе новых документов.
Как я уже сообщал, эта статья впервые была напечатана на сайте Компьютерра-Онлайн 26 июля 2006 года. Теперь есть возможность разместить ее и на родном сайте.
Читайте, пробуйте, а если возникнут вопросы - задавайте в комментариях. И, конечно же, критикуйте и/или дополняйте.
Достаточно часто в процессе своей деятельности мы создаем однотипные документы: акты, приказы, письма, договора, курсовые работы... Все эти документы, как правило, содержат некие текстовые или графические элементы: заголовки, реквизиты, логотипы и т.п., повторяющиеся в каждом документе.
Неопытный пользователь, создавая очередной документ, либо вынужден использовать и править уже существующий и содержащий в себе эти элементы документ, либо просто копировать в новый документ те или иные элементы, опять же, из старого файла. Притом осознавая, что и в этом случае редактирование неизбежно.
Шаблон определяет основную структуру документа и содержит настройки документа, такие как элементы автотекста, шрифты, назначенные сочетания клавиш, макросы, меню, параметры страницы, форматирование и стили.
(Из справки Word)
Эта рутина может быть сокращена до минимума, если создавать документ на основе шаблона. Иногда еще шаблоны называют "рыбами". Впрочем, как ни называй, а шаблоны действительно позволяют в разы увеличить эффективность работы.
Шаблон можно создать двумя способами: взяв за основу какой-либо документ со всеми присутствующими элементами, или начав с чистого листа, самостоятельно включая в него необходимые элементы.
Я расскажу как создавать шаблон с чистого листа, поскольку таким образом будет легче понять весь процесс, нежели модифицировать имеющийся файл. Для примера мы создадим простой шаблон официального письма.
Итак, приступим.
- Создадим пустой документ.
- Сразу же сохраним его. Зайдем в меню Файл (File) и выберем команду Сохранить как... (Save as...). Откроется диалоговое окно Сохранение документа, в котором нам надо выбрать в поле Тип файла (Save as type) тип Шаблон документа (*.dot) (Document Template (*.dot).
- Определяем, какие элементы (текст и графика) и где именно будут располагаться в документе.
По умолчанию будет открыта папка Шаблоны, в которой сохраняются все шаблоны. Присвойте файлу имя и нажмите кнопку Сохранить.
Как правило, все официальные письма содержат такие элементы, как: название организации, логотип, реквизиты. В самом тексте письма может быть вежливое обращение к получателю письма и, собственно, сам текст письма. В конце письма приводится наименование должности руководителя организации с его подписью.
Возьмем за основу подобную структуру письма.
Название организации мы разместим в верхней части документа по центру. Для этого:
Таким образом мы создали постоянную (неизменяемую) часть нашего шаблона, так называемую "шапку". Теперь двинемся дальше и создадим поля, в которые позже вы будете подставлять свои данные.
В левой части шаблона под "шапкой" дважды щелкаем мышой и печатаем название вашего города, например так: г.Москва. Затем в противоположной (правой) части шаблона опять дважды щелкаем мышью и в месте мигания курсора вставляем дату. Для этого:
Если у вас данный текст (читай: поле) отображается как обычный текст без затенения, то я рекомендую сделать такое затенение. Это позволит вам впоследствии легко определять в документе нужные поля для ввода ваших данных.
Для этого зайдите в меню Сервис (Tools) и выберите команду Параметры (Options) и на вкладке Вид (View) в группе Показывать (Show) выберите из списка затенение полей (Field shading) опцию всегда (Always).
Ниже можно дополнительно вставить аналогичное поле адреса получателя и его должности.
У нас осталось вставить приветственное обращение к получателю данного письма, сам текст обращения и подпись отправителя внизу.
Попробуйте самостоятельно вставить в ваш шаблон эти поля, опираясь на те инструкции, которые приведены выше.
Для примера вы можете взглянуть на скриншот шаблона, который получился у меня.
Теперь, чтобы воспользоваться этим шаблоном для создания письма, вам надо зайти в меню Файл (File) и выбрать команду Создать (New). Справа появится Область задач, в которой надо выбрать опцию Общие шаблоны (On my computer). Откроется окно с доступными шаблонами. Выбираете ваш шаблон и нажимаете OK. Новый документ на основе вашего шаблона будет загружен в Word. Добавляйте свои данные в поля и наслаждайтесь автоматизацией.
А если у вас есть вопросы, то задавайте. Я постараюсь ответить на них.
Являются самым широким полем деятельности для разработчиков. Изначально WordPress включает в себя 5 основных типов постов: запись, страница, вложение, ревизия и навигационное меню.
Записи и страницы являются основными типами постов для размещения контента на сайте. И между ними есть несколько отличий.
Записи , как правило, отображаются в обратном порядке на главной странице блога, а страницы отображаются без даты публикации. Категории и тэги также могут быть привязаны к записям, а к страницам нет (хоть и это можно сделать в настройках).
Страницы можно структурировать по порядку. Это особо полезно для организации контента для владельцев сайта и посетителей.
Дизайн страниц так же легко можно изменить, если использовать различные шаблоны страниц. Они позволят изменить стиль любой страницы на вашем сайте.
Давайте рассмотрим более детально, какие шаблоны страниц существуют, и как их можно использовать для сайта.
Почему бы не использовать разные шаблоны страниц?
В темах WordPress обычно используется шаблон page.php , который определяет стиль всех страниц сайта. Большинство разработчиков тем создают шаблон начальной страницы по такому же принципу. В этом шаблоне отображается контент страницы и по умолчанию определяется, какие элементы дизайна будут на ней присутствовать (например, шапка, сайдбар, футер, прочее).
По умолчанию шаблон страницы (page.php) настроен таким образом, что весь необходимый контент отображается на странице.
Создание уникального шаблона страницы позволяет выйти за рамки стандартов WordPress и изменить отображение содержимого на сайте на свое усмотрение. Например, вы могли бы изменить дизайн страниц, удалив сайдбар. Также можно изменить привычный шрифт и использовать другую шапку, а не ту, которую предлагает домашняя страница.
Наиболее известный пользовательский шаблон страницы - это Archive (шаблон архивной страницы archive.php ). Он есть во многих темах WordPress и содержит весь контент сайта, который разделен на страницы, категории, тэги, даты архивов, авторские архивы.
Многие шаблоны архивов также отображают полный список записей в блоге и поле для поиска записей на сайте. По сути, шаблон архива - это карта сайта, с помощью которой пользователь может найти то, что ищет.
В темах можно найти и другие типы шаблонов страниц, как например:
- Контактную форму
- Страницы без сайдбара (боковой панели)
- Лендинговую страницу (посадочную страницу)
- Индекс блога
Возможности шаблонов страниц безграничны. Все зависит от того, насколько удобным вы хотите сделать свой сайт для конечного пользователя.
Как выбрать шаблон для страницы?
Добавить шаблон для страницы очень просто. В редакторе страницы справа вы увидите окошко (виджет) под названием «Атрибуты страницы ». Оно размещено под окошком «Опубликовать ».
В атрибутах страницы можно выбрать родительскую страницу и порядок ее размещения на сайте в соответствующем поле. А опция между ними позволяет изменить шаблон. Все что нужно сделать - это выбрать шаблон для страницы и обновить ее.
Шаблон также можно изменить другим способом - через список всех страниц. Нужно только нажать на «Свойства ».
Затем изменить шаблон в опциях меню справа.
Опции шаблона не будут отображаться, если в вашей теме используется только стандартный шаблон страницы.
Создаем базовый шаблон страницы для сайта
Создать новый шаблон страницы для вашего сайта на WordPress легче, чем вы думаете. Для этого не нужно иметь опыт в разработке и создании тем или плагинов.
Нужно только использовать код page.php уже существующего шаблона темы в качестве основы для нового шаблона страницы. К примеру, вы используете старую стандартную тему Twenty Twelve . Файл page.php имеет следующий код:
Можно использовать этот код для создания шаблона новой страницы. Для этого нужно только убедиться, что комментарий к коду размещен вверху нового файла. Это определит данный файл как шаблон страницы:
/* Template Name: My Custom Page Template */
Шаблон вашей страницы будет выглядеть следующим образом:
Давайте рассмотрим процесс создания базового шаблона страницы и попробуем создать шаблон страницы в полную ширину без использования сайдбара . Тема Twenty Twelve изначально включает в себя шаблон в полную ширину, но мы сделаем вид, что это не так, потому что нам это нужно для нашего обучения.
В стандартном шаблоне сайдбар страницы отображается с правой стороны:
Стандартный шаблон страницы в теме Twenty Twelve
Создать шаблон новой страницы без сайдбара просто.
Для начала нужно создать новый файл, используя любой текстовый редактор (Блокнот или Notepad++ подойдет). Его можно назвать как-то по-простому, например, nosidebar-page.php или full-page.php (о названиях файлов поговорим немного позже). Затем загрузите файл на ваш сайт таким образом, чтобы он находился рядом с файлом page.php.
По сути, наш шаблон - это шаблон от page.php темы Twenty Twelve, только с удаленным кодом .
Он выглядит так:
После загрузки файла шаблона в вашу тему его можно использовать для всех страниц. Можно также привязать страницу к этому шаблону, чтоб удалить ее сайдбар.
Но это еще не все. Пока мы только удалили сайдбар. Нам нужно сделать так, чтоб контент размещался по всей ширине страницы . А пока он занимает только две третьих страницы:
Если вы посмотрите на код нашего шаблона, то увидите, что основная часть контента находится под действием определенного класса CSS:
За стиль основной части контента отвечает вторая часть class="site-content" . Если проверить файл стилей (style.css ) темы, то можно заметить, что этот класс находится почти в самом низу:
Site-content { float: left; width: 65.104166667%; }
Для того чтобы расширить контент на всю страницу, нам нужно изменить ширину области контента с 65% на 100% . Но не нужно изменять класс контента сайта, т.к. он по-прежнему используется в других шаблонах, как например, стандартная страница page.php и шаблон записей single.php . Изменение цифры процента для контента сайта повлияет на все записи и страницы на вашем сайте, которые занимают всю ширину страницы.
Поэтому нам нужно создать новый класс, который употребляется специально для страниц с полной шириной:
Site-content-fullwidth { float: left; width: 100%; }
После обновления файла style.css с вышеуказанным классом нам нужно изменить наш шаблон с полной шириной страницы и быть уверенными, что мы создали ссылку на класс CSS с шириной в 100%:
Наш финальный шаблон будет выглядеть так:
Этот обновленный шаблон подтверждает, что контент на нашем сайте будет отображаться на всю страницу:
Теперь контент на сайте отображается по всей странице
Все, что указано выше, можно сделать в любой теме WordPress. Для этого удалите сайдбар из созданного шаблона страницы и убедитесь, что вы меняете нужный класс таблицы стилей.
Как называть шаблоны страниц
Согласно WordPress Template Hierarchy , для страницы в следующем порядке:
- Пользовательский шаблон (Custom Template)
- page-{slug}.php
- page-{id}.php
- page.php
- index.php
Вам будет проще, если вы будете иметь представление о порядке этих шаблонов, потому что так вы поймете, почему страница оформлена тем или иным образом.
Этот порядок означает, что на WordPress всегда будет отображаться шаблон для страницы, если он был прикреплен к ней. Если к странице не был добавлен ни один из шаблонов, то WordPress будет искать page-{slug}.php.
Если шаблон page-{slug}.php не найден, WordPress ищет шаблон по ID страницы. К примеру, если ID страницы = 15, то WordPress будет искать шаблон страницы с названием 15.php.
Если шаблон не привязан к странице и нет совпадений с ID страницы, то WordPress ищет по стандартному шаблону страницы page.php. И если страницы шаблона page.php не существует, то для поиска используется index.php.
Многие разработчики называют свои шаблоны тем, используя формат page-name.php. К примеру, шаблон страницы контактов называют page-contact.php. По большому счету вы можете давать шаблонам названия на свое усмотрение и использовать любые конфигурации, будь то page-name.php, name-page.php или name.php. В любом случае, в будущем вы сможете эти названия изменить.
По многочисленным просьбам читателей, мы сегодня будем делать дизайн, вернее макет сайта в Photoshop. Конечно если с этим никогда не сталкивался, сделать его довольно не просто, возникает множество вопросов, на которые я сегодня постараюсь ответить. Как оказывается, что материала по этому поводу в интернете не так уж и много. Дизайнеров куча, а как сделать макет сайта никто не рассказывает. Может быть я просто плохо искал? :)
Продолжение
В общем давайте уже делать.
Для начала я подготовил не сложный макет, который мы будем полностью с Вами разбирать. Вот как он выглядит:
Как видите, что шаблон получился не сложный, естественно это блоговый шаблон, который позже мы будем верстать в HTML. Ну а пока что только будем рисовать. Ну а теперь поехали.
Программное обеспечение
Первое, что Вам нужно это Photoshop. Если у Вас его нет, покупайте:-)
Создание и размеры документа
Чтобы создать новый документ в Фотошопе нужно зайти в «Файл» и кликнуть «Создать», затем появится окно, в котором нужно задать соответствующие размеры.
Размеры зависят от того какой ширины будет Ваш будущий сайт. Вот например, Вы решили, что готовый сайт будет иметь ширину 1000 рх, следовательно размер документа нужно сделать немного больше где то 1200 рх. Это делается в первую очередь для удобства, что бы Ваш макет смотрелся так же как в браузере.
По поводу высоты, выставляется размер от тематики шаблона. Но желательно делайте больше, 4000 рх думаю хватит. Это делается для того, чтобы в дальнейшем все элементы влезли. Потому что я как то сделал маленькую высоту, и мне пришлось потом переносить всё в новый документ.
В моём случае сайт будет иметь ширину в 1200рх. Таким образом я сделал документ шириной в 1300 рх и высотой в 4000 рх. Остальные настройки оставьте как есть.
Фон шаблона сайта
После того как мы создали документ, в первую очередь сделайте фон для сайта. Не важно, что это будет цвет или картинка но сделайте его. В моём случае это просто белый фон. Выбираем инструмент «Заливка» в палитре цветов выбираем белый цвет, затем просто кликаем по фону.
Ширина будущего сайта в 1200 рх
Теперь нам нужно выставить размер будущего сайта, чтобы он выглядел так же как будет смотреться в браузере. Делать мы будем это с помощью линейки. Если она у Вас не активна, нужно зайти в «Просмотр» и поставить галочку на против «Линейка». Затем она должна появиться у Вас в окне просмотра.
А вот как она выглядит:
Выделяем наш слой, нужно просто один раз кликнуть на него:
А сейчас нужно поставить линейку по центру нашего документа, вернее найти центр. Для этого наводим курсор на линейку на ней же зажимаем левую кнопку мыши и вытягиваем линию на наш документ. Тянем примерно на середину, линейка сама найдёт центр.
После того как мы нашли центр, нужно поместить наш сайт шириной в 1200 рх в центр документа который имеет размер в 1300 рх. Для этого выбираем инструмент «Прямоугольная область», сверху устанавливаем Стиль на Заданный размер, куда пишем вот такие значения: ширина — 1200рх, высота 400рх. Далее просто кликаем по нашему белому фону и у нас появится выделенная область той ширины которая нам нужна.
Теперь нашу выделенную область помещаем с помощью мышки по центру, она найдёт центр сама. Затем нужно вытащить ещё 2 линейки и установить их по обе стороны выделенной области. Таким образом мы обозначаем границы нашего будущего сайта, который будет иметь ширину в 1200 рх. Так же по этим линейка будет проще подгонять элементы дизайна. Если Вам не понятно сделайте так же как на рисунке ниже.
Линейку мы будем использовать и в дальнейшем, так как без неё здесь не обойтись, она позволяет выставить всё ровно.
Теперь мы практически полностью подготовили наш документ. Мы узнали середину, а так же обозначили точный размер за который не нужно вылазить. Теперь переходим к самому интересному, а именно к созданию дизайна сайта (макета).
Создание дизайна или макета сайта
Важно!
Всегда создавайте группы для слоёв и давайте им названия. Потому что в дальнейшем точно запутаетесь!
Группы
Создаём группу, и называем её «Хидер» (Шапка) в ней же создаём под группу «Верхнее меню» так как будем начинать именно с него. В группе создаём новый слой и называем его «фон». Это будет фон нашего верхнего меню.
Вот что должно получиться:
Верхнее меню
Опять вытягиваем линейку и выставляем её как на рисунке:
Выбираем инструмент «Прямоугольная область» и выделяем вдоль горизонтальной линейки:
В палитре цветов вбиваем вот этот цвет #0dbfe5, выбираем инструмент «Заливка» и заливаем выделенную область, затем нужно отменить выделение во вкладке «Выделение» нажмите на «Отменить выделение»:
Кликаем на инструмент «Горизонтальный текст». Сверху в панели выбираем шрифт «Segoe UI». Теперь кликаем на голубом фоне меню и пишем название наших страниц. Потом Вы можете переместить текст куда Вам нужно.
Теперь создаём разделители между страницами. И сделаем им небольшой эффект вдавленности. Создаём новый слой, выбираем инструмент «Линия». Затем зажимаем Shift и рисуем вертикальную линию через весь голубой фон нашего меню.
По слою с фигурой нажимаем два раза мышкой, откроется окно со стилем слоя. Ставим галочки на против «Наложение цвета» И вбиваем туда вот этот цвет #0aaacc.
Переходим в пункт «Тень» и задаём следующие параметры:
Вот, что должно получиться:
После этого просто копируем слой с нашей линией и выставляем после каждого слова. Вот что у меня получилось:
Иконки социальных закладок
Здесь же в меню только с правой стороны мы добавим иконки закладок. В моём случае это , но можно поставить и обычные скачанные иконки. Скачать можете вот .
Для начала с помощью линейки нужно выставить высоту наших иконок, что бы они были ровными. Вот, что нужно сделать:
Потом создаём группу, называем её «Социальные закладки», создаём в ней новый слой. Теперь кликаем по инструменту «Произвольная фигура» выбираем нужную фигуру:
Наводим курсор в то место где будет иконка, зажимаем Shift, (для того чтобы иконка появилась ровная) и растягиваем до нужных размеров. И такой же процесс повторяем со следующими фигурами. В конечном итоге вот что должно получиться:
Переходим к логотипу. Опять же создаём отдельную группу для логотипа и в новый слой.
Логотип
Переходим на этот сайт и качаем шрифт. Выбираем инструмент «Горизонтальный текст». Ищем в поле со шрифтами название нашего шрифта Olivier. Кликаем на то место где будет располагаться лого и пишем название на Английском, потому что этот шрифт не поддерживает кириллицу. Вот что должно получиться:
Создаём группу «Нижнее меню» и новый слой.
Нижнее меню (Главное)
Выставляем линейки как на рисунке:
Выбираем инструмент «Прямоугольная область» и выделяем. Затем выделенную область заливаем вот этим цветом #303030. Вот что должно получиться:
Отменяем выделение во вкладке «Выделение». Теперь идём во вкладку Фильтры — Шум и выбираем Добавить шум. Потом выставляем такие значения:
Добавляем линии. Делаются они так же как и в верхнем меню только изменён сам цвет линии. Думаю, что вы справитесь, и должно получиться вот что:
Сейчас переходим к панели с информацией, которая будет говорить пользователю где он находится на сайте.
Как обычно в группе «Хидер» создаём группу «Инфо панель» с новым слоем.
Панель с информацией
Для начала добавляем полосы с линейки как на рисунке ниже:
Выбираем инструмент «Прямоугольная область» и выделяем область прям под меню, и заливаем её чёрным цветом #000000
Отменяем выделение, берём «Горизонтальный текст» изменяем размер шрифта на 48 пт и цвет #a4a4a4. Пишем «Последние Записи». Вот, что у Вас должно получиться в итоге:
Контент
Переходим к разметке середины нашего будущего сайта. Нам нужно с помощью линейки разметить где будут находиться блоки постов и блок сайтбара (Правой колонки).
Сразу же нужно создать 2 отдельных группы:
- Метки — в эту группу мы будем добавлять текст с размером наших колонок.
- Контент — группа где будет находиться вся наша середина сайта.
В группе контент создаём под группу «Левый», в которой будут находиться наши блоки с записями.
Выбираем инструмент «прямоугольная область», задаём ей стиль «заданный размер» и выставляем ширину 800рх высоту 100рх. Вот итог:
Добавляем линии с линейки как на рисунке, и отменяем выделение:
В группе «Контент» делаем под группу с названием «Правый» (Сайтбар). Будем размечать место для правой колонки сайта.
Опять берём «прямоугольная область», а вот в стиле области задаём немного меньший размер в ширину 350рх высоту оставим ту же в 100рх. И далее делаем всё как на рисунке:
Вот теперь мы точно знаем где будут блоки с записями и сайтбар. И всё будет ровно.
Помните мы создали группу метки? Там просто создайте слой с надписями размеров блоков, вот как у меня:
Эти метки очень помогут при вёрстке. Не нужно будет вспоминать размеры.
Блоки с записями
Начнём мы пожалуй с блоков с записями, делаются они в данном случае очень просто.
В группе «Левый» создаём подгруппу «блок» и новый слой.
Опять выбираем инструмент «Прямоугольная область». В стиле задаём размеры 800 х 300. Подгоняем под линии. Потом заливаем вот этим цветом #d9d9d9. Это у нас получилась миниатюра.
В той же группе добавьте метку с помощью текста как у меня на рисунке выше.
Теперь давайте добавим заголовок к записи. Берём «Горизонтальный текст» ставим размер в 35 пт и цвет чёрный. Добавляем прям под миниатюрой:
Добавляем информацию к посту. Ставим размер шрифта в 14 пт и цвет ближе к серому:
И описание к посту:
Теперь добавляем текст и смотрим, что у нас получилось:
Чтобы записи хоть не много разделить, давайте создадим простой разделитель из кругов.
Создаём группу «Разделитель», выбираем «Овальная область» создаём слой. И под блоком записей зажимая Shift рисуем круг, затем заливаем его вот этим цветом #efefef.
Отменяем выделение и ищем середину круга с помощью линейки
Выбираем слой с нашим кружком на нём же нажимаем правую кнопку мыши и выбираем «Создать дубликат слоя». Перетащите его немного влево.
В верхней панели заходи во вкладку «Редактирование» — Трансформирование и выбираем Масштабирование. И делаем круг немного меньше первого, при этом зажимая Shift чтобы круг получился ровным.
Вот что должно получиться:
Копируем слой этого маленького круга опять перемещаем его влево. Так же точно уменьшаем его размер как написано выше, чтобы получилось вот так:
Сейчас Вам нужно создать дубликат среднего круга и переместить его вправо, и тоже самое сделать с маленьким кругом. Чтобы было понятнее сделайте как на рисунке:
А вот что получилось только в нормальном размере:
Сейчас размещаем блок записей под блоком. Создаём дубликат нашей группы «Блок» На панели инструментов выбираем курсор (самый верхний). И перетаскиваем наш блок записей вниз. и так делаем раз 5.
Сайдбар (правая колонка)
Находим нашу группу «Сайдбар», и создаём в ней подгруппу «Поиск». С помощью линии делаем вот так:
Выбираем инструмент «Прямоугольная область» и выделяем поле для поиска, затем заливаем его вот этим цветом #eeeeee
Не забываем отменить выделение, кликаем на инструмент «Горизонтальный текст» и в сером поле пишем слово Поиск
Слева выбираем инструмент «Произвольная фигура» и сверху ищем фигуру лупы. Она есть в стандартных фигурах. Создаём слой в группе «Поиск» наводим на поле и рисуем нашу фигуру удерживая Shift.
Поле поиска готово. Теперь переходим к виджетам.
Создаём группу «виджет» и новый слой в ней. Затем добавляем линий как на рисунке. Это будет фон нашего заголовка, и заливаем его эти цветом #eeeeee
В наш заголовок теперь нужно добавить сам заголовок, делаем это с помощью текста. А ещё добавим иконку к заголовку. Для этого нужно выбрать любую фигуру которая по душе, и которая по смыслу подходит:) Не забываем зажимать Shift когда добавляем фигуру. И залейте её вот этим цветом #0dbfe5
И конечно же нужно добавить записи к нашим виджетам. Нужно выбрать инструмент «горизонтальный текст», затем установить размер в 16 пт. И сделать ка на рисунке ниже
Затем просто создаём дубликат группы и перетаскиваем виджет вниз. Делаем то же самое что и с постами.
Вот теперь мы можем наблюдать почти готовый и простой макет для нашего будущего сайта.
Футер (Низ сайта)
Ну как же без него. В этом шаблоне он тоже не сильно сложный.
Всё как обычно создаём группу «Футер» и слой в ней. И размечаем его с помощью линейки, выбираем наш уже любимый инструмент «прямоугольная область» выделяем его и заливаем #0dbfe5
Отменяем выделение. Берём «Горизонтальный текст» находим тот шрифт, который мы скачали (Olivier), и вписываем наш логотип, только цвет текста делаем чуть темнее.
А с правой стороны нашего футера добавляем меню такое же как сверху только без линии. Его даже можно просто скопировать и переместить вниз.
Вот и всё, друзья, у нс готовый макет, который уже можно верстать:)
Ещё, вот Вам его PSD файл. Скачивайте, и смотрите если что то не поняли.
Друзья, если Вам что нибудь будет не понятно, обязательно спрашивайте в комментариях.
До скорых встреч.
Очень часто при работе на компьютере, а это может быть в принципе вообще любая работа, мы используем какие-то повторяющиеся тексты, которыми регулярно пользуемся. Это могут быть, например, шаблонные ответы кому-то из клиентов, какие-то шаблоны кодов для сайта, готовые заготовки текстов для составляемых документов и многое другое.
Кто-то хранит нужные шаблоны в отдельных текстовых документах (например, в документе программы «Блокнот», в документе Microsoft Word и др.), кто-то в специальных программах, ну а те, у кого опыта меньше, вероятно, вовсе ничего не сохраняют и при необходимости набирают на компьютере одно и то же всё время заново.
Хранить нужные шаблоны в текстовых документах - вариант, честно говоря, неудобный. Не хранить шаблоны вовсе - это уже совсем не правильно, это постоянная потеря времени на ввод одного и того же. И, надеюсь, хотя бы эта моя статья позволит понять, как удобно можно сохранять шаблоны и как легко их потом можно находить и быстро копировать для нужных целей!
Шаблоны удобнее всего хранить в специализированных программах. Я для этого дела пользовался сначала Evernote , а затем понял, что это не так удобно как хранить шаблоны в специальном менеджере буфера обмена Clipdiary.
Об этой программе я уже упоминал ранее и тогда показывал её функционал именно как менеджера буфера обмена, т.е. как в ней сохранять всё что вы копируете известными клавишами Ctrl+C (либо обычной опцией «Копировать»).
Как и где скачать программу, как её установить на компьютер, а также о работе через неё с буфером обмена, вы можете прочитать
А теперь я покажу как этой же программой пользоваться ещё и для очень удобного хранения шаблонов.
Как перейти к созданию шаблонов в Clipdiary
Открыв программу Clipdiary, отобразится 2 вкладки:
Вам понадобится именно вкладка «Шаблоны». Удалите изначально из неё все демо-шаблоны. Для этого либо кликаете правой кнопкой мыши (далее «ПКМ») отдельно по каждому и выбираете «Удалить», либо нажимаете кнопку удаления на панельке вверху.
Чтобы удалить сразу все шаблоны, которые сгруппированы в папке, вам нужно удалить лишь папку и тогда удалится сразу и всё, что в ней было.
Если вы любите всё делать более быстро и пользуетесь горячими клавишами, то для удаления в ClipDiary используется сочетание Ctrl+Del .
После того как всё ненужное из вкладки «Шаблоны» удалено, можно приступать к созданию своих шаблонов и ниже рассмотрим как это делается...
Создание шаблонов
Для создания нового шаблона, нажмите кнопку добавления на панели вверху.
Появится окно с 3 вариантами добавления:
Вверху указывается заголовок добавляемого объекта, ниже выбирается тип создаваемого объекта (см. ниже подробнее). Опция «Дочерняя» , если включена, означает, что создаваемый объект (например, шаблон) будет помещён в папку, которая была на данный момент выделена в окне.
Типы создаваемых объектов:
Как пользоваться сохранёнными шаблонами
Если вам нужно быстро скопировать текст или какую-то другую заготовку из созданного в Clipdiary шаблона, нужно перейти на вкладку «Шаблоны», найти нужный шаблон, кликнуть по нему и нажать комбинацию клавиш Ctrl+C (клавиши для быстрого копирования). Шаблон будет скопирован.
Вы можете ознакомиться с другими полезными горячими клавишами Windows в отдельной статье: прочитать »
Можно выполнить копирование и обычным образом, кликнув ПКМ по нужному шаблону и выбрав «Копировать». Но для ускорения работы рекомендую всем применять горячие клавиши, хотя бы самые основные (для тех действий, которые применяются постоянно).
Можно быстро посмотреть, что содержится в созданном шаблоне, не открывая его. Для этого достаточно навести на него курсор мыши и слева в окошке появится текст, который вы вносили в шаблон:
После копирования шаблона его остаётся только вставить туда, куда вам нужно. Вот и весь процесс!
Если шаблонов и папок создано очень много, то чтобы не листать список в поисках нужного шаблона, можно воспользоваться поиском. Поисковая строка расположена внизу окна «Шаблоны». Просто введите туда ключевое слово из заголовка шаблона, который ищите и программа оставит в списке только подходящие. Например, создано несколько шаблонов, связанных с созданием скриншотов и слово «скриншот» есть в их заголовках. В таком случае в поиск вводим «скриншот» и программа покажет нужные шаблоны :
Заключение
Если у вас много повторяющихся одних и тех же текстов или даже одинаковых файлов, которые вы постоянно куда-то копируете, то возможность создавать и удобно упорядочивать всё это как шаблоны в программе ClipDiary - вам будет очень кстати. Рекомендую! Если всем этим грамотно пользоваться, группировать всё по папкам, то многое в работе реально упрощается.
А вы пользуетесь шаблонами для чего-либо на компьютере? Как и где их храните, если пользуетесь? :) Поделитесь в комментариях к статье, очень интересно узнать ещё варианты и подытожить, что полезнее и удобнее:)
