Погружение в базы данных PostgreSQL

Данный курс является консолидацией теоретических основ и практических примеров, которые демонстрируют работу операторов и функций SQL в системе управления базами данных PostgreSQL.

Промокод на скидку: SALE_202411

Подробнее

Регулярные выражения в Python

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

Пройти курс

Модуль psycopg2 в Python

Модуль psycopg2 позволяет взаимодействовать с базами данных PostgreSQL в скриптах Python.

Пройти курс

Модуль SQLite3 в Python

Встроенный модуль SQLite3 позволяет работать с базами данных SQLite в ваших приложениях, которые написаны на языке программирования Python.

Пройти курс

Погружение в базы данных Oracle

Данная книга является руководством для начинающих специалистов в области анализа и обработки данных. В книге рассматривается язык SQL и его процедурное расширение PL/SQL от компании Oracle.

Купить книгу

SQL без слёз

Цель книги заключается в том, чтобы научить любого человека работать с реляционными базами данных и получать из них необходимую информацию посредством выполнения SQL-запросов.

Скачать книгу

 ›  ›  ›  › Урок #3. Дизайн для темы Wordpress в Adobe Photoshop.

Урок #3. Дизайн для темы WordPress в Adobe Photoshop.

Рисуем дизайн для темы WordPress по готовому макету Balsamiq Mockups
Макет для темы WordPress мы разработали в прошлом уроке, а сейчас займемся созданием дизайна будущей темы в программе Adobe Photoshop. Если вы еще не знакомы с Adobe Photoshop, начните изучать базовые возможности и инструменты, чтобы вы могли продолжить работу.

Небольшое отступление: рассказывать как рисовать дизайн сайта в Adobe Photoshop я не буду, это совершенно другая тема. Но, чтобы вам было легче ориентироваться по готовому дизайн,  буду указывать только название блока, ширину, высоту и отступы.

Дизайн главной страницы — index.php

Начинаем рисовать дизайн с главной страницы сайта, которая будет состоять из нескольких блоков:

  • шапка (ширина — 1000 пикселей, высота 140 пикселей);
  • вывод новостей (ширина — 670 пикселей, высота — динамическая, отступ сверху — 30 пикселей, отступ справа — 30 пикселей, отступ снизу — 30 пикселей, отступ слева — 30 пикселей);
  • боковая колонка (ширина — 240 пикселей, высота — динамическая, отступ сверху — 30 пикселей, отступ справа — 30 пикселей, отступ снизу — 30 пикселей, отступ слева — 0 пикселей);
  • постраничная навигация (ширина — 670 пикселей, высота — динамическая, отступ сверху — 30 пикселей, отступ справа — 30 пикселей, отступ снизу — 30 пикселей, отступ слева — 30 пикселей);
  • подвал (ширина — 1000 пикселей, высота — динамическая).

Дизайн главной страницы для темы WordPress в Adobe Photoshop

Дизайн страницы — page.php

Страница состоит из четырёх блоков:

  • шапка (ширина — 1000 пикселей, высота 140 пикселей);
  • вывод текста страницы (ширина — 670 пикселей, высота — динамическая, отступ сверху — 30 пикселей, отступ справа — 30 пикселей, отступ снизу — 30 пикселей, отступ слева — 30 пикселей);
  • боковая колонка (ширина — 240 пикселей, высота — динамическая, отступ сверху — 30 пикселей, отступ справа — 30 пикселей, отступ снизу — 30 пикселей, отступ слева — 0 пикселей);
  • подвал (ширина — 1000 пикселей, высота — динамическая).

Дизайн страницы -page, для темы WordPress в Adobe Photoshop

Дизайн записи — single.php

Страница записи состоит из шести блоков:

  • шапка (ширина — 1000 пикселей, высота 140 пикселей);
  • вывод текста записи (ширина — 670 пикселей, высота — динамическая, отступ сверху — 30 пикселей, отступ справа — 30 пикселей, отступ снизу — 30 пикселей, отступ слева — 30 пикселей);
  • записи по теме (ширина — 670 пикселей, высота — динамическая, отступ сверху — 0 пикселей, отступ справа — 30 пикселей, отступ слева — 30 пикселей, отступ снизу — 30 пикселей);
  • форма комментариев (ширина — 670 пикселей, высота — динамическая, отступ сверху — 0 пикселей, отступ справа — 30 пикселей, отступ слева — 30 пикселей, отступ снизу — 30 пикселей);
  • боковая колонка (ширина — 240 пикселей, высота — динамическая, отступ сверху — 30 пикселей, отступ справа — 30 пикселей, отступ снизу — 30 пикселей, отступ слева — 0 пикселей);
  • подвал (ширина — 1000 пикселей, высота — динамическая).

Дизайн страницы с записью - single, для темы WordPress в Adobe Photoshop

Дизайн категории — category.php

Страница категории состоит из шести блоков:

  • шапка (ширина — 1000 пикселей, высота 140 пикселей);
  • вывод заголовка и описания категории (ширина — 670 пикселей, высота — динамическая, отступ сверху — 30 пикселей, отступ справа — 30 пикселей, отступ снизу — 50 пикселей, отступ слева — 30 пикселей);
  • вывод записей категории (ширина — 670 пикселей, высота — динамическая, отступ сверху — 0 пикселей, отступ справа — 30 пикселей, отступ слева — 30 пикселей, отступ снизу — 30 пикселей);
  • постраничная навигация (ширина — 670 пикселей, высота — динамическая, отступ сверху — 30 пикселей, отступ справа — 30 пикселей, отступ снизу — 30 пикселей, отступ слева — 30 пикселей);
  • боковая колонка (ширина — 240 пикселей, высота — динамическая, отступ сверху — 30 пикселей, отступ справа — 30 пикселей, отступ снизу — 30 пикселей, отступ слева — 0 пикселей);
  • подвал (ширина — 1000 пикселей, высота — динамическая).

Дизайн категории для темы WordPress в Adobe Photoshop

Дизайн страницы — результаты поиска (search.php)

Страница результатов поиска состоит из шести блоков:

  • шапка (ширина — 1000 пикселей, высота 140 пикселей);
  • вывод заголовка и результатов поиска (ширина — 670 пикселей, высота — динамическая, отступ сверху — 30 пикселей, отступ справа — 30 пикселей, отступ снизу — 50 пикселей, отступ слева — 30 пикселей);
  • вывод найденных записей (ширина — 670 пикселей, высота — динамическая, отступ сверху — 0 пикселей, отступ справа — 30 пикселей, отступ слева — 30 пикселей, отступ снизу — 30 пикселей);
  • постраничная навигация (ширина — 670 пикселей, высота — динамическая, отступ сверху — 30 пикселей, отступ справа — 30 пикселей, отступ снизу — 30 пикселей, отступ слева — 30 пикселей);
  • боковая колонка (ширина — 240 пикселей, высота — динамическая, отступ сверху — 30 пикселей, отступ справа — 30 пикселей, отступ снизу — 30 пикселей, отступ слева — 0 пикселей);
  • подвал (ширина — 1000 пикселей, высота — динамическая).

Дизайн страницы с результатами поиска для темы WordPress в Adobe Photoshop

Дизайн страницы 404 — 404.php

Страница об ошибке #404 состоит из четырёх блоков:

  • шапка (ширина — 1000 пикселей, высота 140 пикселей);
  • вывод текста страницы (ширина — 670 пикселей, высота — динамическая, отступ сверху — 30 пикселей, отступ справа — 30 пикселей, отступ слева — 30 пикселей, отступ снизу — 30 пикселей);
  • боковая колонка (ширина — 240 пикселей, высота — динамическая, отступ сверху — 30 пикселей, отступ справа — 30 пикселей, отступ снизу — 30 пикселей, отступ слева — 0 пикселей);
  • подвал (ширина — 1000 пикселей, высота — динамическая).

Дизайн страницы 404 (ничего не найдено) для темы WordPress в Adobe Photoshop
Вывод

Вот мы и закончили рисовать дизайн шаблона (темы) для WordPress. Всего мы нарисовали 6 страниц — index.php, page.php, single.php, category.php, search.php и 404.php. Теперь у нас появилась новая задача — вёрстка страниц, и начнем мы с вёрстки главной страницы темы WordPress.

С уважением, Артём Санников

Сайт: ArtemSannikov.ru

Метки: , .

Записи по теме

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *