Создание сайта в формате веб фотоальбома за несколько минут
Автор: Кузнецов Владимир Георгиевич, доцент кафедры ТиМЕМО и ИКТ ОГБОУ ДПО "РИРО"Для учителей информатики и старшеклассников.
1. Создание веб фотоальбома с помощью PhotoShop
Создаем подборку картинок для веб фотоальбома с одинаковыми размерами (например, 260 х 320 пикселов). Пусть, для определенности, это будет подборка фотографий "Мите исполнилось 3 года!". Скопируйте картинки в одну папку (пусть это будет папка с именем Portraits). Создаем также папку для размещения в ней создаваемой веб-галереи (например, папку с именем Р3).
В рабочем окне программы PhotoShop командой "Файл – Автоматизацмия – Фотогалерея Web" открываем окно диалога "Web Photo Gallery". В этом окне диалога в раскрывающемся списке "Styles" (Стили) выбираем нужный нам вариант оформления веб-фотоальбома. При этом в правой части окна диалога в специальном окошке просмотра можно увидеть, как будет выглядеть создаваемый веб-фотоальбом с выбранным стилем в окне браузера.
Например, выберите в этом списке вариант "Centered Frame 1 - Basic" (Рамка по центру 1 – Основной вид). В разделе "Source Images" (Исходные изображения) нажмите кнопку "Browse" (Обзор) и в появившемся диалоге выберите папку с исходными рисунками (папку Portraits). Затем щелкните кнопку "Destination" (Назначение) и в открывшемся диалоге выберите папку назначения для помещения создаваемого веб-фотоальбома (в нашем случае, папку P3). В раскрывающемся списке "Options" (Параметры) выберите элемент "Banner" (Баннер) и в открывшейся панели "Options Banner" (Параметры баннера) введите в поле "Site Name" (Название сайта) имя нашего фотоальбома – Мите Волоскову 3 года. Заполните остальные поля информацией о себе и о дате размещения материалов. Выберите в списке "Options" (Параметры) вариант "Large Images" (Большие изображения) и настройте параметры оптимизации изображений. Если вы хотите, чтобы программа изменила размер исходных изображений, установите флажок "Resize Images" (Изменить размер) и выберите нужный размер в соответствующем списке.
Можно настроить и параметры миниатюр, образующих список изображений в галереи, но можно этого и не делать. Остальные параметры оставьте по умолчанию. Нажмите кнопку "ОК", веб фотоальбом будет сформирован, и его можно "полистать" в окне браузера. PhotoShop сформирует автоматически в папке назначения с именем Р3 все необходимые материалы для рассматриваемого веб-сайта с запускающим файлом index.htm.
2. Создание сайта фотоальбома в текстовом редакторе
PhotoShop - коммерческая программа, и не у каждого она установлена на компьютере. Но это не беда! Сайт в формате веб фотоальбома можно создать и в любом текстовом редакторе. Правда, в этом случае нужно освоить специальный язык гипертекстовой разметки документа html 5. Покажем вам, как, не зная этого языка, мы все-таки сможем создать, как говорят, по образу и подобию сайт с веб фотоальбомом.
Создаем папку для будущего сайта. Пусть это будет папка с именем Р5. В этой папке создаем две вложенные папки. Одной из них даем имя Portraits, другой - Thumbs.
В папку Portraits заносим файлы тех 8 своих картинок (фотографий), которые мы будем просматривать в веб фотоальбоме. Файлам этих картинок присвоим имена - 1.jpg, 2.jpg, ... 8.jpg. Всем файлам задаем одинаковый размер. Например, 260 х 320 пикселов.
В папку Thumbs записываем уменьшенные копии тех же рисунков (с размером например, 63 х 74, и даем этим файлам имена thumb1.jpg, thumb2.jpg, ... thumb8.jpg.
Наконец, открываем любой текстовый редактор. Например редактор Блокнот, входящий в состав операционной системы Windows и в окне документа этой программы набираем с клавиатуры следующий html-код веб-сайта:
<!DOCTYPE HTML>
<html lang="ru">
<head>
<style type="text/css">
/*F2CF8D,401E01,F2AA6B,8C3503,F28D52*/
body {
font-family:Verdana, Geneva, sans-serif;
background-color:#F2CF8D;
color:#401E01;
font-size:11px;
}
h1 {
font-family:"Monotype Corsiva";
font-size:42px;
color:#8C3503;
margin-left:10px;
}
h4 {
font-family:"Arial Black", Gadget, sans-serif;
color:#8C3503;
margin-left:86px;
}
aside {
margin-left:10px;
}
h5 {
margin-right:40px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Навигация между фреймами Iframe </title>
</head>
<body>
<!DOCTYPE HTML>
<html>
<body>
<article>
<header>
<h1>Дима Волосков</h1>
</header>
<aside>
<iframe name="fullSize" width="250", height="312" seamless src="portraits/7.jpg"></iframe>
</aside>
<section>
<nav> <a href="portraits/7.jpg" target="fullSize">
<img src="thumbs/thumb7.jpg"></a> <a href="portraits/8.jpg" target="fullSize"><img src="thumbs/thumb8.jpg"></a> <a href="portraits/5.jpg" target="fullSize"><img src="thumbs/thumb5.jpg"></a> <a href="portraits/6.jpg" target="fullSize"><img src="thumbs/thumb6.jpg"></a>
<nav> <a href="portraits/1.jpg" target="fullSize">
<img src="thumbs/thumb1.jpg"></a> <a href="portraits/2.jpg" target="fullSize"><img src="thumbs/thumb2.jpg"></a> <a href="portraits/3.jpg" target="fullSize"><img src="thumbs/thumb3.jpg"></a> <a href="portraits/4.jpg" target="fullSize"><img src="thumbs/thumb4.jpg"></a>
</nav> </section></article></body></html>
После окончания ввода html-кода в окне Блокнота задаем команду "Файл - Сохранить как".
В открывшемся окне диалога "Сохранить как" указываем папку назначения Р5, в раскрывающемся списке "Кодировка" выбираем вариант "UTF-8", а в раскрывающемся списке "Тип файла" - "Все файлы (*.*)". В поле ввода "Имя файла" вводим имя файла index.html и щелкаем по кнопке "Сохранить".
В результате в нашей папке Р5 окажутся две вложенные папки с именами Portraits и Thumbs, а также файл для открытия веб-сайта с именем index.html.
Выполнив двойной щелчок мышью на файле index.html, мы увидим как будет выглядеть наш веб-сайт в окне браузера (например, в окне браузера Internet Explorer).
Несколько слов о языке html5.
Рабочий проект HTML5 был впервые опубликовал в 2008 году Консорциумом World-Wide Web (W3C).
В 2009 году появилась бета-версия браузера, поддерживающего стандарт HTML5 или, по крайней мере, отдельные его функции. К 2010 году некоторые браузеры, включая браузеры для мобильных устройств, уже поддерживали этот стандарт.
Так или иначе, стандарт HTML5 вышел на арену. Началась гонка за создание браузеров, поддерживающих язык HTML5. Мы вступили в эпоху ренессанса языка HTML. Считается, что в окончательном виде HTML5 сформировался в 2014 году.
По сути, HTML5 - широкий термин, описывающий набор спецификаций HTML, CSS, JavaScript, PHP, разработанных для создания веб-сайтов и приложений нового поколения.
Кафедра ТиМЕМО и ИКТ РИРО подготовила к изданию учебное пособие по HTML5 и планирует, начиная с 2015/2016 учебного года, проводить курсы повышения квалификации по освоению этого перспективного языка веб-программирования. Записывайтесь на эти курсы!
Полный вариант статьи с рисунками во вложении (doc, 1.4MB)
Создаем подборку картинок для веб фотоальбома с одинаковыми размерами (например, 260 х 320 пикселов). Пусть, для определенности, это будет подборка фотографий "Мите исполнилось 3 года!". Скопируйте картинки в одну папку (пусть это будет папка с именем Portraits). Создаем также папку для размещения в ней создаваемой веб-галереи (например, папку с именем Р3).
В рабочем окне программы PhotoShop командой "Файл – Автоматизацмия – Фотогалерея Web" открываем окно диалога "Web Photo Gallery". В этом окне диалога в раскрывающемся списке "Styles" (Стили) выбираем нужный нам вариант оформления веб-фотоальбома. При этом в правой части окна диалога в специальном окошке просмотра можно увидеть, как будет выглядеть создаваемый веб-фотоальбом с выбранным стилем в окне браузера.
Например, выберите в этом списке вариант "Centered Frame 1 - Basic" (Рамка по центру 1 – Основной вид). В разделе "Source Images" (Исходные изображения) нажмите кнопку "Browse" (Обзор) и в появившемся диалоге выберите папку с исходными рисунками (папку Portraits). Затем щелкните кнопку "Destination" (Назначение) и в открывшемся диалоге выберите папку назначения для помещения создаваемого веб-фотоальбома (в нашем случае, папку P3). В раскрывающемся списке "Options" (Параметры) выберите элемент "Banner" (Баннер) и в открывшейся панели "Options Banner" (Параметры баннера) введите в поле "Site Name" (Название сайта) имя нашего фотоальбома – Мите Волоскову 3 года. Заполните остальные поля информацией о себе и о дате размещения материалов. Выберите в списке "Options" (Параметры) вариант "Large Images" (Большие изображения) и настройте параметры оптимизации изображений. Если вы хотите, чтобы программа изменила размер исходных изображений, установите флажок "Resize Images" (Изменить размер) и выберите нужный размер в соответствующем списке.
Можно настроить и параметры миниатюр, образующих список изображений в галереи, но можно этого и не делать. Остальные параметры оставьте по умолчанию. Нажмите кнопку "ОК", веб фотоальбом будет сформирован, и его можно "полистать" в окне браузера. PhotoShop сформирует автоматически в папке назначения с именем Р3 все необходимые материалы для рассматриваемого веб-сайта с запускающим файлом index.htm.
2. Создание сайта фотоальбома в текстовом редакторе
PhotoShop - коммерческая программа, и не у каждого она установлена на компьютере. Но это не беда! Сайт в формате веб фотоальбома можно создать и в любом текстовом редакторе. Правда, в этом случае нужно освоить специальный язык гипертекстовой разметки документа html 5. Покажем вам, как, не зная этого языка, мы все-таки сможем создать, как говорят, по образу и подобию сайт с веб фотоальбомом.
Создаем папку для будущего сайта. Пусть это будет папка с именем Р5. В этой папке создаем две вложенные папки. Одной из них даем имя Portraits, другой - Thumbs.
В папку Portraits заносим файлы тех 8 своих картинок (фотографий), которые мы будем просматривать в веб фотоальбоме. Файлам этих картинок присвоим имена - 1.jpg, 2.jpg, ... 8.jpg. Всем файлам задаем одинаковый размер. Например, 260 х 320 пикселов.
В папку Thumbs записываем уменьшенные копии тех же рисунков (с размером например, 63 х 74, и даем этим файлам имена thumb1.jpg, thumb2.jpg, ... thumb8.jpg.
Наконец, открываем любой текстовый редактор. Например редактор Блокнот, входящий в состав операционной системы Windows и в окне документа этой программы набираем с клавиатуры следующий html-код веб-сайта:
<!DOCTYPE HTML>
<html lang="ru">
<head>
<style type="text/css">
/*F2CF8D,401E01,F2AA6B,8C3503,F28D52*/
body {
font-family:Verdana, Geneva, sans-serif;
background-color:#F2CF8D;
color:#401E01;
font-size:11px;
}
h1 {
font-family:"Monotype Corsiva";
font-size:42px;
color:#8C3503;
margin-left:10px;
}
h4 {
font-family:"Arial Black", Gadget, sans-serif;
color:#8C3503;
margin-left:86px;
}
aside {
margin-left:10px;
}
h5 {
margin-right:40px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Навигация между фреймами Iframe </title>
</head>
<body>
<!DOCTYPE HTML>
<html>
<body>
<article>
<header>
<h1>Дима Волосков</h1>
</header>
<aside>
<iframe name="fullSize" width="250", height="312" seamless src="portraits/7.jpg"></iframe>
</aside>
<section>
<nav> <a href="portraits/7.jpg" target="fullSize">
<img src="thumbs/thumb7.jpg"></a> <a href="portraits/8.jpg" target="fullSize"><img src="thumbs/thumb8.jpg"></a> <a href="portraits/5.jpg" target="fullSize"><img src="thumbs/thumb5.jpg"></a> <a href="portraits/6.jpg" target="fullSize"><img src="thumbs/thumb6.jpg"></a>
<nav> <a href="portraits/1.jpg" target="fullSize">
<img src="thumbs/thumb1.jpg"></a> <a href="portraits/2.jpg" target="fullSize"><img src="thumbs/thumb2.jpg"></a> <a href="portraits/3.jpg" target="fullSize"><img src="thumbs/thumb3.jpg"></a> <a href="portraits/4.jpg" target="fullSize"><img src="thumbs/thumb4.jpg"></a>
</nav> </section></article></body></html>
После окончания ввода html-кода в окне Блокнота задаем команду "Файл - Сохранить как".
В открывшемся окне диалога "Сохранить как" указываем папку назначения Р5, в раскрывающемся списке "Кодировка" выбираем вариант "UTF-8", а в раскрывающемся списке "Тип файла" - "Все файлы (*.*)". В поле ввода "Имя файла" вводим имя файла index.html и щелкаем по кнопке "Сохранить".
В результате в нашей папке Р5 окажутся две вложенные папки с именами Portraits и Thumbs, а также файл для открытия веб-сайта с именем index.html.
Выполнив двойной щелчок мышью на файле index.html, мы увидим как будет выглядеть наш веб-сайт в окне браузера (например, в окне браузера Internet Explorer).
Несколько слов о языке html5.
Рабочий проект HTML5 был впервые опубликовал в 2008 году Консорциумом World-Wide Web (W3C).
В 2009 году появилась бета-версия браузера, поддерживающего стандарт HTML5 или, по крайней мере, отдельные его функции. К 2010 году некоторые браузеры, включая браузеры для мобильных устройств, уже поддерживали этот стандарт.
Так или иначе, стандарт HTML5 вышел на арену. Началась гонка за создание браузеров, поддерживающих язык HTML5. Мы вступили в эпоху ренессанса языка HTML. Считается, что в окончательном виде HTML5 сформировался в 2014 году.
По сути, HTML5 - широкий термин, описывающий набор спецификаций HTML, CSS, JavaScript, PHP, разработанных для создания веб-сайтов и приложений нового поколения.
Кафедра ТиМЕМО и ИКТ РИРО подготовила к изданию учебное пособие по HTML5 и планирует, начиная с 2015/2016 учебного года, проводить курсы повышения квалификации по освоению этого перспективного языка веб-программирования. Записывайтесь на эти курсы!
Полный вариант статьи с рисунками во вложении (doc, 1.4MB)
Скачать вложение