Пред теб стои вълнуващото предизвикателство да създадеш галерийна изглед за твоето уеб приложение. В този туториал ще ти покажа как да вземеш дизайна от шаблон, да го адаптираш и да го интегрираш в твоята PHP приложение. Нека да предприемем стъпка по стъпка, за да се уверим, че си на правия път.
Най-важни открития
- Свали необходимите допълнителни материали, включително файловете с лога и PSD шаблона.
- Увери се, че спазваш правните разпоредби за използването на изображенията.
- Разбери основната структура на галерийната страница и интеграцията на CSS и JavaScript.
- Настрой директория за статични файлове, за да подобриш организацията на проекта си.
Стъпка по стъпка ръководство
Влез в вълнуващия свят на уеб разработката, като първо свалиш необходимите допълнителни материали. Това включва директория за логото, в която ще намериш редактирана версия на логото, както и PSD шаблона за целия галерен проект. Всеки може да използва тези файлове, но трябва да внимаваш, че изображенията, които са предоставени, са макети и правата за допълнителна употреба в мрежата не са предоставени. Замени тези изображения с твоите собствени.
След това отвори файла galerie_index, за да видиш основната версия на твоята HTML и CSS реализация. Дизайнът включва различни елементи, като странична навигационна лента и област за съдържание с изображения. Тези елементи са важни, за да можем да представим нашата финална галерия. В горната лента ще намериш бутони, които вече познаваш от демото. Обаче обърни внимание, че има допълнителни елементи, които няма да използваме в тази реализация.
Копирай изходния код на страницата, за да го поставиш във файла bilder.phtml. Преди това премахни цикъла foreach и съществуващия документ, тъй като ще работим с друга структура. В кода ще има два JavaScript файла: библиотеката jQuery и твоята собствена JS функция. Освен това ще ти трябва CSS файл, отговорен за стилизирането. Помни, че трябва да добавиш CSS инструкции за Internet Explorer.
Когато разгледаме кода по-нататък, ще видим черната лента с инструменти и страничната лента. Страницата съдържа различни аватари и може би и поток с последни събития. В този момент обаче не е необходимо да интегрираш страничната лента. За сега се концентрирай върху основната част на галерията.
Ключовият момент е списъкът със снимки, който трябва да бъде подреден в неструктуриран списък (UL) в галерията. Този списък е нашият централен обект, върху който ще работим. Има различни елементи на списъка (LI), на които ще базираме, и ще адаптираме съдържанието веднага. Останалите изображения, използвани за оригиналния дизайн, могат да бъдат премахнати тук.
За да покажем изображенията динамично, идва на ред цикъла foreach. Постави цикъла около елемента на списъка и замени съществуващия таг image с динамичното изображение, което искаш да извлечеш от базата данни.
Форматирай index.php, като добавиш необходимите CSS и JS файлове в заглавката. В момента няма достъп до тези файлове, затова добави наклонена черта и създай директория skin, за да организираш статичните файлове.
Създай директорията skin и постави всички файлове от шаблона там. По този начин проектът ти ще получи по-добра структура, и ще бъде по-лесно да се правят промени. Директорията skin трябва да включва всички необходимите ресурси, отговорни за външния стил.
Ако всичко е настроено правилно, опресни страницата. Сега би трябвало да видиш първите изображения, които се зареждат от неструктурирания ти списък. Може би ще трябва да почистиш и адаптираш някои елементи, като например пагинацията и опциите за "харесване" – тези в момента не са ни нужни.
Сега, след като основният дизайн е готов, можеш да планираш допълнителни функции, като функции за качване и вход. В следващата стъпка ще се погрижим за навигацията и динамичното регулиране на основните URL адреси, за да подобрим проекта ти допълнително.
Резюме – Ефективно проектиране на галерийната изглед в PHP
В това ръководство научи стъпка по стъпка как да създадеш дизайн за галерийна изглед с PHP. Сега разбираш необходимите стъпки, за да започнеш с определен набор от начални операции, включително обработката на директории и CSS файлове.
Често задавани въпроси
Как да сваля необходимия шаблон?Можеш да свалиш шаблона от посочения източник на страницата на туториала.
Как мога да заменя изображенията в галерията?Замени изображенията-подменители със собствените си изображения, за да индивидуализираш галерията.
Мога ли да настроя страничната лента?Да, можеш да настроиш страничната лента, но в текущата стъпка това не е необходимо.
Каква е целта на директорията skin?Директорията skin служи за организация на всички статични файлове, които влияят на дизайна на приложението ти.
Нуждая ли се от jQuery за проекта си?Да, jQuery се изисква за определени функции в галерията, затова е важно библиотеката да бъде правилно интегрирана.
