Створення найпростіших фотоальбомів
Для того, щоб розмістити на своєму сайті фотографії, можна піти трьома шляхами.
1. Знайти в мережі Інтернет готовий фотоальбом, скачати його і встановити на своєму сайті. Цей шлях я не стану розглядати.
2. Просто розмістити фотографії та підписи до них на своїй html-сторінці, використавши теги для вставки зображення в текст, про яких Алла Михайлівна вела мову в Уроці 20
3. Але припустимо, ви не хочете, щоб картинки просто стирчали в тексті. Ви хочете, наприклад, щоб на сторінці стояли мініатюри, при натисканні на які на окремій сторінці відкривалося б повномасштабне зображення. Або ви хочете, щоб у вас вийшло слайд-шоу, коли картинки змінюються при натисканні на кнопку "Далі", без зміни всієї сторінки. Я розповім про трьох найпростіших варіантах створення таких фотоальбомів.
Розміщуємо на сторінці мініатюри, при натисканні на які в окремому вікні буде відкриватися повномасштабна картинка.
1) Готуємо сторінку html, продумуємо дизайн. Я візьму для прикладу найпростіший дизайн сторінки, який стоїть на моєму сайті:
|
Це - html-код моєї сторінки для фотоальбому. Виглядає вона так: Порожня сторінка для фотоальбому Ви робите таку сторінку, яка потрібна вам. На місце трьох точок, які стоять в коді таблиці (70%, бордер 0), позначеної у мене червоним кольором, ми будемо вставляти мої фотографії. 2) Тепер нам потрібно підібрати фотографії, які ми будемо завантажувати на нашу сторінку. Вони можуть бути будь-якого розміру, якого хочете. Але бажано все-таки, щоб ви підготували їх, зберігши для web-сторінки. щоб вони не важили надто багато. За традицією (чомусь дуже часто для прикладу використовують фото своїх домашніх вихованців), я візьму вісім фотографій зі своєю кішкою. Завантажуємо ці фотографії в потрібну нам папку на наш хостинг і прописуємо для кожної фотографії код ось такого виду: Зважайте на те, що при такому способі установки на сторінку мініатюрних зображень, вони можуть виявитися спотворені, тому що я не зменшувала їх пропорційно, а просто задала розмір мініатюри, який поставить сам браузер. Якщо ви хочете, щоб ваші картинки і на мініатюрах виглядали пропорційно, вам необхідно або вирахувати, який розмір потрібно вписати в кожну картинку, щоб вона зменшилася пропорційно, або зробити до кожної картинки відповідну мініатюру, наприклад, в Photoshop або в програмі Paint. Тобто зробити окрему картинку - маленьку копію тієї, що буде збільшуватися - і завантажити в папку з картинками не тільки фото, але і мініатюри до нього. Наприклад, я зробила мініатюру першої картинки і назвала її "Kosha1_min.jpg" (вона у мене не 100 на 50, а 100 на 77 рх). Тоді мій код буде виглядати наступним чином: Розмір картинки я прибираю з тега, щоб він не спотворював мою картинку. Отже, у мене в альбомі все мініатюри будуть зменшені до 100 на 50 рх, крім першої, до якої я зробила окрему мініатюру 100 на 77 рх і завантажила в папку окремо. Тепер я вставляю всі вісім картинок в табличку коду сторінки, на підготовлене місце (якщо пам'ятаєте, я там поставила три крапки). Весь код альбому разом зі сторінкою буде виглядати так:
|