На Главную
Статьи современных авторов
Художественные произведения
Библиотека
История Европы и Америки XIX-XX вв
Как мы делали этот сайт
Форум и Гостевая
Полезные ссылки
Статьи на заказ
|
Урок 24. Создание простейших фотоальбомов
Для того, чтобы разместить на своём сайте фотографии, можно пойти тремя путями.
1. Найти в сети Интернет готовый фотоальбом, скачать его и установить на своём сайте. Этот путь я не стану рассматривать.
2. Просто разместить фотографии и подписи к ним на своей html-странице, использовав теги для вставки изображения в текст, о которых Алла Михайловна вела речь в Уроке 20
3. Но допустим, вы не хотите, чтобы картинки просто торчали в тексте. Вы хотите, например, чтобы на странице стояли миниатюры, при нажатии на которые на отдельной странице открывалось бы полномасштабное изображение. Или вы хотите, чтобы у вас получилось слайд-шоу, когда картинки сменяются при нажатии на кнопку "Далее", без смены всей страницы. Я расскажу о трёх простейших вариантах создания таких фотоальбомов.
Первый вариант
Размещаем на странице миниатюры, при нажатии на которые в отдельном окне будет открываться полномасштабная картинка.
1) Подготавливаем страницу html, продумываем дизайн. Я возьму для примера простейший дизайн страницы, который стоит на моём сайте:
<html>
<head>
<LINK REL=STYLESHEET TYPE="text/css" HREF="http://dugward.ru/mystyle.css">
<title> Фотоальбом </title>
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<td align="center" WIDTH=599px> <a href="http://dugward.ru/"> <img src="http://dugward.ru/LM311.jpg" border="0"> </a> </td>
<td align="center" VALIGN=middle> <font color="#000000" stile=font-size:14pt"> <font face="arial"> <i> <b> Официальный сайт авторов книги<br> М.В.Гуминенко и А.М. Возлядовской </b> </i> </font> </font> </td>
<td align="center" width="20%">
<table width="100%" cellspacing="0" cellpadding="0" border="3" VALIGN=top>
<td>
<table width="100%" cellspacing="0" cellpadding="0" body bgcolor=#e5e5e7 border="0">
<tr>
<td align="center" WIDTH=19px> <a href="http://dugward.ru/Sod.html"> <img src="http://dugward.ru/pa1.jpg" border="0"> </a>
</td>
<td align="left"> <a href="http://dugward.ru/Sod.html"> Созвездие Близнецов </a> </td>
</tr>
<tr>
<td align="center" WIDTH=19px>
<a href="http://dugward.ru/novel/novel.html"> <img src="http://dugward.ru/pa1.jpg" border="0"> </a> </td>
<td align="left"> <a href="http://dugward.ru/novel/novel.html"> Зарисовки прошлого и настоящего </a> </td>
</tr>
</td> </table> </table>
</td>
</table>
<table align="center" width="70%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td align ="center" body bgcolor=#e5e5e7 VALIGN=top>
...
</td>
</tr>
</table>
</body>
</html>
|
Это - html-код моей страницы для фотоальбома. Выглядит она так: Пустая страница для фотоальбома Вы делаете такую страницу, какая нужна вам.
На место трёх точек, которые стоят в коде таблицы (70 %, бордер 0), обозначенной у меня красным цветом, мы будем вставлять наши фотографии.
2) Теперь нам нужно подобрать фотографии, которые мы будем загружать на нашу страницу. Они могут быть любого размера, какого хотите. Но желательно всё-таки, чтобы вы подготовили их, сохранив для web-страницы. чтобы они не весили слишком много. По традиции (почему-то очень часто для примера используют фото своих домашних питомцев), я возьму восемь фотографий со своей кошкой. Загружаем эти фотографии в нужную нам папку на наш хостинг и прописываем для каждой фотографии код вот такого вида:
<a href="http://dugward.ru/foto/Kosha1.jpg" target="_blank"> <img src="http://dugward.ru/foto/Kosha1.jpg" width="100" height="50"> </a>
Как вы можете увидеть, это код обычного баннера, в котором вместо ссылки прописан адрес нашей картинки: <a href="http://dugward.ru/foto/Kosha1.jpg" target="_blank">, а в коде картинке мы проставим размер миниатюры: <img src="http://dugward.ru/foto/Kosha1.jpg" width="100" height="50"> . Я поставила размер 100 на 50 рх.
И закроем эту конструкцию закрывающим тегом ссылки: </a>
Учитывайте то, что при таком способе установки на страницу миниатюрных изображений, они могут оказаться искажены, потому что я не уменьшала их пропорционально, а просто задала размер миниатюры, который поставит сам браузер. Если вы хотите, чтобы ваши картинки и на миниатюрах выглядели пропорционально, вам необходимо либо высчитать, какой размер нужно вписать в каждую картинку, чтобы она уменьшилась пропорционально, либо сделать к каждой картинке соответствующую миниатюру, например, в Photoshop или в программе Paint. Т.е. сделать отдельную картинку - маленькую копию той, что будет увеличиваться - и загрузить в папку с картинками не только фото, но и миниатюры к нему.
Например, я сделала миниатюру первой картинки и назвала её "Kosha1_min.jpg" (она у меня не 100 на 50, а 100 на 77 рх). Тогда мой код будет выглядеть следующим образом:
<a href="http://dugward.ru/foto/Kosha1.jpg" target="_blank"> <img src="http://dugward.ru/foto/Kosha1_min.jpg"> </a>
Размер картинки я убираю из тега, чтобы он не искажал мою картинку.
Итак, у меня в альбоме все миниатюры будут уменьшены до 100 на 50 рх, кроме первой, к которой я сделала отдельную миниатюру 100 на 77 рх и загрузила в папку отдельно. Теперь я вставляю все восемь картинок в табличку кода страницы, на подготовленное место (если помните, я там поставила три точки).
Весь код альбома вместе со страницей будет выглядеть так:
<html>
<head>
<LINK REL=STYLESHEET TYPE="text/css" HREF="http://dugward.ru/mystyle.css">
<title> Фотоальбом </title>
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<td align="center" WIDTH=599px> <a href="http://dugward.ru/"> <img src="http://dugward.ru/LM311.jpg" border="0"> </a> </td>
<td align="center" VALIGN=middle> <font color="#000000" stile=font-size:14pt"> <font face="arial"> <i> <b> Официальный сайт авторов книги<br> М.В.Гуминенко и А.М. Возлядовской </b> </i> </font> </font> </td>
<td align="center" width="20%">
<table width="100%" cellspacing="0" cellpadding="0" border="3" VALIGN=top>
<td>
<table width="100%" cellspacing="0" cellpadding="0" body bgcolor=#e5e5e7 border="0">
<tr>
<td align="center" WIDTH=19px> <a href="http://dugward.ru/Sod.html"> <img src="http://dugward.ru/pa1.jpg" border="0"> </a>
</td>
<td align="left"> <a href="http://dugward.ru/Sod.html"> Созвездие Близнецов </a> </td>
</tr>
<tr>
<td align="center" WIDTH=19px>
<a href="http://dugward.ru/novel/novel.html"> <img src="http://dugward.ru/pa1.jpg" border="0"> </a> </td>
<td align="left"> <a href="http://dugward.ru/novel/novel.html"> Зарисовки прошлого и настоящего </a> </td>
</tr>
</td> </table> </table>
</td>
</table>
<table align="center" width="70%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td align ="center" body bgcolor=#e5e5e7 VALIGN=top>
<a href="http://dugward.ru/foto/Kosha1.jpg" target="_blank"> <img src="http://dugward.ru/foto/Kosha1_min.jpg"> </a>
<a href="http://dugward.ru/foto/Kosha2.jpg" target="_blank"> <img src="http://dugward.ru/foto/Kosha2.jpg" width="100" height="50"> </a>
<a href="http://dugward.ru/foto/Kosha3.jpg" target="_blank"> <img src="http://dugward.ru/foto/Kosha3.jpg" width="100" height="50"> </a>
<a href="http://dugward.ru/foto/Kosha4.jpg" target="_blank"> <img src="http://dugward.ru/foto/Kosha4.jpg" width="100" height="50"> </a>
<a href="http://dugward.ru/foto/Kosha5.jpg" target="_blank"> <img src="http://dugward.ru/foto/Kosha5.jpg" width="100" height="50"> </a>
<a href="http://dugward.ru/foto/Kosha6.jpg" target="_blank"> <img src="http://dugward.ru/foto/Kosha6.jpg" width="100" height="50"> </a>
<a href="http://dugward.ru/foto/Kosha7.jpg" target="_blank"> <img src="http://dugward.ru/foto/Kosha7.jpg" width="100" height="50"> </a>
<a href="http://dugward.ru/foto/Kosha8.jpg" target="_blank"> <img src="http://dugward.ru/foto/Kosha8.jpg" width="100" height="50"> </a>
</td>
</tr>
</table>
</body>
</html>
|
Коды картинок я обозначила синим цветом. Теперь я загружаю всю страницу на хостинг и получается у меня вот такой фотоальбом: Фотоальбом
При нажатии на миниатюрную картинку вы каждый раз будете переходить на страницу с полномасштабным изображением.
Второй вариант
Но вполне вероятно, что вам захочется не просто фотоальбом, а небольшое слайд-шоу, в котором картинки буду сменяться при нажатии на кнопку или ссылку "Далее". Это делается при помощи JavaScript.
Для того, чтобы продемонстрировать этот фотоальбом, я возьму шесть картинок всё с той же Кляксой. Одна картинка у меня будет основная, которой открывается фотоальбом. Ссылки на изображения у меня прописаны полным адресом, потому что страница фотоальбома и сами картинки лежат в разных папках и из-за этого мне необходимо прописать их полный адрес.
Первая часть скрипта, которую вы должны будете поставить между тегами <head> и </head> выглядит так:
<SCRIPT LANGUAGE="JavaScript">
var num=1
img1 = new Image ()
img1.src = "http://dugward.ru/foto/Kosha2.jpg"
img2 = new Image ()
img2.src = "http://dugward.ru/foto/Kosha3.jpg"
img3 = new Image ()
img3.src = "http://dugward.ru/foto/Kosha4.jpg"
img4 = new Image ()
img4.src = "http://dugward.ru/foto/Kosha5.jpg"
img5 = new Image ()
img5.src = "http://dugward.ru/foto/Kosha6.jpg"
function slideshow()
{
num=num+1
if (num==4)
{num=1}
document.photos.src=eval("img"+num+".src")
}
</SCRIPT>
|
Как видите, в ней я поставила только три картинки, которые и будут сменять одна другую. Вы можете поставить столько картинок, сколько будет нужно вам.
Вторая часть скрипта, которую нужно вставить в любое место вашей страницы между <body> и </body>, выглядит так:
<IMG SRC="http://dugward.ru/foto/Kosha1.jpg" NAME="photos" BORDER=0>
<p>
<a href="JavaScript:slideshow()"> Следующая картинка </a>
|
Весь html-код страницы будет выглядеть так (красным я выделила собственно код, который приводила выше):
<HTML>
<HEAD>
<LINK REL=STYLESHEET TYPE="text/css" HREF="mystyle.css">
<SCRIPT LANGUAGE="JavaScript">
var num=1
img1 = new Image ()
img1.src = "http://dugward.ru/foto/Kosha2.jpg"
img2 = new Image ()
img2.src = "http://dugward.ru/foto/Kosha3.jpg"
img3 = new Image ()
img3.src = "http://dugward.ru/foto/Kosha4.jpg"
img4 = new Image ()
img4.src = "http://dugward.ru/foto/Kosha5.jpg"
img5 = new Image ()
img5.src = "http://dugward.ru/foto/Kosha6.jpg"
function slideshow()
{
num=num+1
if (num==4)
{num=1}
document.photos.src=eval("img"+num+".src")
}
</SCRIPT>
</HEAD>
<BODY>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<td align="center" WIDTH=599px> <img src="http://dugward.ru/LM311.jpg" border="0">
</td>
<td align="center" VALIGN=middle> <font color="#000000" stile=font-size:14pt"> <font face="arial"> <i> <b> Официальный сайт авторов книги <br> М.В.Гуминенко и А.М. Возлядовской </b> </i> </font> </font>
</td>
<td align="center" width="20%">
<table width="100%" cellspacing="0", cellpadding="0" border="3" VALIGN=top>
<td>
<table width="100%" body bgcolor=#e5e5e7 border="0">
<tr>
<td align="center" WIDTH=19px> <a href="http://dugward.ru/Sod.html"> <img src="http://dugward.ru/pa1.jpg" border="0"> </a>
</td>
<td align="left"><a href="http://dugward.ru/Sod.html">Созвездие Близнецов</a></td>
</tr>
<tr>
<td align="center" WIDTH=19px>
<a href="http://dugward.ru/novel/novel.html"> <img src="pa1.jpg" border="0"> </a>
</td>
<td align="left"> <a href="http://dugward.ru/novel/novel.html"> Зарисовки прошлого и настоящего </a>
</td>
</tr>
</td> </table> </table>
</td>
</table>
<table width="100%" cellspacing="0" cellpadding="0" border="0" VALIGN=top>
<td align="center" width="20%" VALIGN=top>
<table width="100%" cellspacing="0", cellpadding="0" border="3" VALIGN=top>
<td>
<table width="100%" body bgcolor=#e5e5e7 border="0">
<tr>
<td align="center" WIDTH=19px> <a href="http://dugward.ru/"> <img src="http://dugward.ru/pa1.jpg" border="0"> </a>
</td>
<td align="left" VALIGN=top> <a href="http://dugward.ru/"> На Главную </a>
</td>
</tr>
<tr>
<td align="center" WIDTH=19px>
<a href="http://dugward.ru/publ/publ.html"><img src="pa1.jpg" border="0"> </a>
</td>
<td align="left"> <a href="http://dugward.ru/publ/publ.html"> Статьи </a>
</td>
</tr>
<tr>
<td align="center" WIDTH=19px>
<a href="http://dugward.ru/library/sodlib.html"> <img src="pa1.jpg" border="0"> </a>
</td>
<td align="left"> <a href="http://dugward.ru/library/sodlib.html"> Библиотека </a>
</td>
</tr>
<tr>
<td align="center" WIDTH=19px> <a href="http://dugward.ru/history/SodHist.html"> <img src="pa1.jpg" border="0"> </a>
</td>
<td align="left" VALIGN=top> <a href="http://dugward.ru/history/SodHist.html ">История Европы и Америки XIX-XX вв </a>
</td>
</tr>
<tr>
<td align="center" WIDTH=19px> <a href="http://forum.dugward.ru"> <img src=" http://dugward.ru/pa1.jpg" border="0"> </a> </td>
<td align="left" VALIGN=top> <a href="http://forum.dugward.ru"> Форум </a>
</td>
</tr>
<tr>
<td align="center" WIDTH=19px> <a href="http://lezione.dugward.ru"> <img src="http://dugward.ru/pa1.jpg" border="0"> </a>
</td>
<td align="left" VALIGN=top> <a href="http://lezione.dugward.ru"> Как мы делали этот сайт </a>
</td>
</tr>
<tr>
<td align="center" WIDTH=19px> <a href="http://xbase.ru/?mcnamara"> <img src="http://dugward.ru/pa1.jpg" border="0"> </a>
</td>
<td align="left" VALIGN=top> <a href="http://xbase.ru/?mcnamara"> Гостевая книга </a>
</td>
</tr>
</table> </td> </table>
</td>
<td>
<table width="100%" cellspacing="0", cellpadding="0" border="3">
<td align="center" body bgcolor=#e5e5e7>
<table width="85%" border="0" VALIGN=top>
<td>
<IMG SRC="http://dugward.ru/foto/Kosha1.jpg" NAME="photos" BORDER=0>
<p>
<a href="JavaScript:slideshow()"> Следующая картинка </a>
</td> </table>
<br>
<hr>
Копирование материалов сайта возможно только в случае некоммерческого использования данных материалов, с сохранением личных неимущественных прав авторов (имя автора, название произведения и текст произведения без каких-либо изменений) и при обязательном наличии активной ссылки на данный сайт.
По вопросам коммерческого использования материалов обращайтесь к администратору сайта. Ваши предложения можете направлять в Гостевую книгу, форум или на e-mail владельца сайта.
</td> </table>
</td>
<td align="center" width="20%" VALIGN=top>
<table width="100%" body bgcolor=#e5e5e7 border="2">
<td VALIGN=top>
...
<br> <br>
</td> </table> </td>
</table>
</body>
</html>
|
Посмотреть то, что получилось, можно здесь: Фотоальбом
Недостатки данного способа: двигаемся мы по нашим фотографиям только вперёд, по кругу. Чтобы вернуться на первоначальную картинку - надо обновить страницу в браузере.
Третий вариант
Эту часть скрипта нужно поставить между <head> и </head> . Обратите внимание: фотографии у нас пронумерованы с цифры "1", а в этом скрипте обозначение меняющихся снимков ОБЯЗАТЕЛЬНО ДОЛЖНО с цифры "0". Поэтому у нас будет небольшое несовпадение: первый слайд будет пронумерован как нулевой, но фотографии все так и останутся пронумерованы с цифры "1". И записывая функцию, мы обозначаем, что у нас фотографий 9, а слайдов - тоже 9, но пронумерованы они с нуля, поэтому последнее число слайда - 8. Я обозначила эти цифры в функции красным цветом, для наглядности.
<script language = "JavaScript">
numimg=0
imgslide=new Array ()
imgslide[0]=new Image ()
imgslide[1]=new Image ()
imgslide[2]=new Image ()
imgslide[3]=new Image ()
imgslide[4]=new Image ()
imgslide[5]=new Image ()
imgslide[6]=new Image ()
imgslide[7]=new Image ()
imgslide[8]=new Image ()
imgslide[0].src ="http://dugward.ru/foto/Kosha1.jpg"
imgslide[1].src ="http://dugward.ru/foto/Kosha2.jpg"
imgslide[2].src ="http://dugward.ru/foto/Kosha3.jpg"
imgslide[3].src ="http://dugward.ru/foto/Kosha4.jpg"
imgslide[4].src ="http://dugward.ru/foto/Kosha5.jpg"
imgslide[5].src ="http://dugward.ru/foto/Kosha6.jpg"
imgslide[6].src ="http://dugward.ru/foto/Kosha7.jpg"
imgslide[7].src ="http://dugward.ru/foto/Kosha8.jpg"
imgslide[8].src ="http://dugward.ru/foto/Kosha9.jpg"
function dem(n)
{
if (n==1)
{ numimg++
if (numimg==9)
numimg=0;
}
else
{numimg--
if (numimg== -1)
numimg=8;
}
document.images [0].src=imgslide [numimg].src
}
</script>
|
Следующую часть скрипта и форму для "Вперёд" и "Назад" мы поставим в тело страницы, между <body> и </body> .
<img src="http://dugward.ru/foto/Kosha1.jpg">
<form name=form1>
<input type=button value=Назад onClick="dem(0)" >
<input type=button value=Вперед onClick="dem(1)" >
</form>
|
Эта часть у нас содержит в себе ссылку на первую картинку слайд-шоу и форму, которую браузер будет преобразовывать в кнопки "Назад" и "Вперёд". Теперь посмотрим, как будет выглядеть весь html-код страницы (скрипты фотоальбома выделены красным):
<html>
<head>
<LINK REL=STYLESHEET TYPE="text/css" HREF="mystyle.css">
<style type="text/css">
.p1
{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-indent: 1.5em;
text-align: justify;
}
</style>
<title> Фотоальбом Слайд-шоу </title>
<script language = "JavaScript">
numimg=0
imgslide=new Array ()
imgslide[0]=new Image ()
imgslide[1]=new Image ()
imgslide[2]=new Image ()
imgslide[3]=new Image ()
imgslide[4]=new Image ()
imgslide[5]=new Image ()
imgslide[6]=new Image ()
imgslide[7]=new Image ()
imgslide[8]=new Image ()
imgslide[0].src ="http://dugward.ru/foto/Kosha1.jpg"
imgslide[1].src ="http://dugward.ru/foto/Kosha2.jpg"
imgslide[2].src ="http://dugward.ru/foto/Kosha3.jpg"
imgslide[3].src ="http://dugward.ru/foto/Kosha4.jpg"
imgslide[4].src ="http://dugward.ru/foto/Kosha5.jpg"
imgslide[5].src ="http://dugward.ru/foto/Kosha6.jpg"
imgslide[6].src ="http://dugward.ru/foto/Kosha7.jpg"
imgslide[7].src ="http://dugward.ru/foto/Kosha8.jpg"
imgslide[8].src ="http://dugward.ru/foto/Kosha9.jpg"
function dem(n)
{
if (n==1)
{ numimg++
if (numimg==9)
numimg=0;
}
else
{numimg--
if (numimg== -1)
numimg=8;
}
document.images [0].src=imgslide [numimg].src
}
</script>
</head>
<body>
<table align="center" width="90%" cellspacing="5" cellpadding="5" border="3">
<td align ="center" body bgcolor=#e5e5e7 VALIGN=top>
<h1> Кошка по имени Клякса </h1>
<img src="http://dugward.ru/foto/Kosha1.jpg">
<form name=form1>
<input type=button value=Назад onClick="dem(0)" >
<input type=button value=Вперед onClick="dem(1)" >
</form>
<p class="p1"> Это просто фотоальбом, который расскажет об одной очень милой кошке. Ничего бессмертного в этих фотографиях нет. Но тем не менее, кому-нибудь они могут доставить радость. А хранить их у себя в компьютере - зачем тогда было фотографировать? </p>
</td>
</table>
</body>
</html>
|
Фотоальбом будет выглядеть так: Фотоальбом
Недостатки этого способа: если поставить на страницу перед картинкой фотоальбома ещё и логотип (то есть, воткнуть внутрь фотоальбома скрипта ещё одну не относящуюся к самому фотоальбому картинку), то при переключении туда-сюда логотип исчезает и наше слайд-шоу оказывается на его месте. Поэтому в таком фотоальбоме лучше не ставить логотип.
Я рассказала вам всего о трёх способах создания собственного фотоальбома. Их гораздо больше. Надеюсь, вы найдёте для себя то, что устроит именно вас.
Урок окончен.
Перейти к Уроку 25
© М.В. Гуминенко. 2008 г.
|
