Баннер
Баннер
Баннер
Баннер
Баннер
Баннер
Баннер
Баннер


Как создать сайт портфолио


Создание картинной галереи

Как без знания языков программирования сделать себе на сайт простую и удобную для посетителя картинную галерею? Во-первых, это должно занимать немного времени, а вовторых, при просмотре не должно ничего мешать - будь то кнопки управления или какая то другая ерунда. Открываем программу "блокнот" и с чистого листа прямо сайчас мы с Вами научимся как бесплатно создадть сайт портфолио - картинную галерею.

Пишем:




<html>

<head>

<title></title>

</head>

<boby>

</body>

</html>


<html> - отвечает за начало и конец html кода

<head> - эти теги отвечают за заголовок

<title> - Отвечает за отображение текста заголовка, т.е. в браузере будет страница выдаваться с таким заголовком. И в поисковике тоже.

<body> - внутри этого тега будет находиться остальной код.


Продолжаем:


В заголовок введем:

"Картинная галерея художника такого то (или портфолио фотографа такогото)"


<html>

<head>

<title>Картинная галерея художника Василия Пупкина</title>

</head>

<boby>

</body>

</html>


Добавим на страницу текст и фото автора. Для этого нам нужна фотография размером, предположим 300x300 пикселей формата ".jpg". Название ее должно быть на английском языке, например, "foto.jpg".


Сжимайте фотографии перед публикацией в интернет. Сделать это можно при помощи Photoshop. Открываем фото, выбираем файл -> сохранить как -> тип файлов JPEG выбираем средний размер файла. Или еще лучше файл -> сохранить для web и устройств -> JPEG Hight.


Теперь у нас есть фото. Нужно написать информацию о себе - в какой области работаете, какой опыт, в каких событиях принимаете участие, немного биографии и т. п. В итоге мы хотим, чтобы получилось так: слева наше фото, справа немного о нас.


Для этого вставляем таблицу, в левой ячейке которой будет находиться фотография, а в правой - текст:


<html>

<head>

<title>Картинная галерея художника Василия Пупкина</title>

</head>

<boby>


<table width="100%" border="1">

  <tr>

    <td> </td>

    <td> </td>

  </tr>

</table>


</body>

</html>


<table> - означает начало и конец таблицы

width="100%" - ширина таблицы, в данном случае она заполняет всю ширину экрана

border="1" - ширина границы таблицы

<tr> - создание строки

<td> - создание столбца, в данном случае в одной строке создается два столбца.


Теперь поместим в левую часть таблицы фотографию. Для этого сохраним создаваемый нами файл в какой-нибудь папке следующим образом: файл -> сохранить как -> вводим название "index.html" - наш файл сохраняется как веб страница. Название index он должен иметь потому, что когда вы набираете в браузере название какого-либо сайта, в первую очередь он ищет файл index.html, потом index.htm, index.php и т. д. В той же папке, куда мы сохранили этот файл, мы создадим папку "images", в которой будем сохранять все наши изображения. В эту папку ("images") мы переместим нашу фотографию "foto.jpg".


Выводим изображение на экран браузера.


<html>

<head>

<title>Картинная галерея художника Василия Пупкина</title>

</head>

<boby>


<table width="100%" border="1">

  <tr>

    <td><img src="/images/foto.jpg"></td>

    <td> </td>

  </tr>

</table>


</body>

</html>


<img> означает вывод изображения

src="/images/foto.jpg" - путь к фотографии


Теперь необходимо вывести текст в правой части таблицы.


<html>

<head>

<title>Картинная галерея художника Василия Пупкина</title>

</head>

<boby>


<table width="100%" border="1">

  <tr>

    <td><img src="/images/foto.jpg"></td>

    <td><h1>Художник Василий Пупкин</h1>

    Моя биография... - сюда пишем текст о себе...

    </td>

  </tr>

</table>


</body>

</html>


Не забываем сохраняться. Одно из правил программиста: "Сохраняться почаще". Теперь у нас получилась страничка с краткой информацией об авторе. Дбавим на эту страницу картинную галерею. Т. к. Цель данной статьи научить Вас создавать сайты без знания языков программирования - обойдемся простым HTML для реализации простейшей галереи. Даже применяя тот простой метод, о котором будет рассказано далее, Вы сможете сделать хорошую галерею для Вашего портфолио.


После описания автора страницы добавим еще одну таблицу. Причем в ней будет один столбец и множество строк. В каждой строке будет распологаться картина, а снизу под ней описание. Добавим страницу с тремя строками:


<html>

<head>

<title>Картинная галерея художника Василия Пупкина</title>

</head>

<boby>


<table width="100%" border="1">

  <tr>

    <td><img src="/images/foto.jpg"></td>

    <td><h1>Художник Василий Пупкин</h1>

    Моя биография... - сюда пишем текст о себе...

    </td>

  </tr>

</table>


<br /><br />


<table width="100%" border="0" cellspacing="15">

  <tr>

    <td>Строка 1</td>

  </tr>

  <tr>

    <td>Строка 2</td>

  </tr>

  <tr>

    <td>Строка 3</td>

  </tr>

</table>


</body>

</html>


Тег <br /> означает перенос на новую строку. Т. е. Текст после этого тега будет выводиться на новой строке


Свойство cellspacing определяет расстояние между ячейками таблицы. Оно нам нужно для того, чтобы изображения и текст не сливались в общую массу.


Вместо текста "Строка 1" нужно вставить нашу первую фотографию. Я надеюсь, мы ее уже приготовили и поместили в папку images корневой папки, где находится наш сайт. Назовем ее pic_1.jpg


- В названиях файлов нельзя употреблять пробелы, поэтому мы укажем знак "_" нижнее подчеркивание, или "-" минус.


Земеним текст "Строка 1" на <img src="/images/pic_1.jpg" alt="Фото природы" title ="Фото природы">


В этом выражении alt означает альтернативный текст, т. е. Тот, который будет отображаться вместо картинки, если в браузере посетителя сайта выключено отображение изображений.

Тег title отвечает за вывод подсказки при наведении мышки на картинку.


Еще можно указать название изображения под картинкой. для этого послес трочки вывода изображения поставим <br /> для перехода на новую строку и напишем текст "Фото природы".


Поясню, зачем мы провели все эти действия: Поисковые системы для поиска фотографий используют тэги описания изображения. А если рядом с фото будет стоять текст, соответствующий описанию фотографии, поисковая система сочтет данный рисунок релевантным запросу, содержащим описание фотографии, что поможет в продвижении сайта в топ выдачи поисковых систем. Кроме того, можно попасть в топ поиска по изображениям, что позволит привлечь дополнительный трафик.


- Интересный совет: используйте как минимум три изображения с подписями на страницах сайта. Изображения обязательно должны соответствовать тематике содержимого текста. Современные поисковые системы достаточно умны. В поиске изображений отображается ссылка на Ваш сайт, соответственно, люди могут заинтересоваться этим и перейти к Вам. Благодаря этому можно хорошо продвигать товары в интернет магазине. Хорошее детальное описание фотографии, состоящее из ключевых поисковых запросов, по которым люди должны находить Ваш товар - например, "Фиолетовый холодильник" или "Платье в горошек", или "свадебные букеты".


- Важный совет: используйте защиту фотографий от копирования с умом для раскрутки своего сайта. Размещайте на фотографиях "Водяной знак", ссылку на источник фотографии контрастным к изображению текстом или делайте другую подобную защиту. Это позволит доказать авторское право на изображение, а так же увеличит посещаемость сайта, если люди увидят ссылку на автора фотографии где-нибудь еще.


Вернемся к редактированию текста. Сохраним HTML код и проверим, как все это отображается в браузере.


Теперь мы видим, что появилось изображение нашей первой фотографии.


- Рекомендуется указывать размер фотографии в пикселях, что поможет браузеру точно размечать страницу и изображения никогда не будут выходить за заданные параметры. Для этого добавим к тэгу <img> атрибуты:


height=" " - высота в пикселях и

width=" " - ширина в пикселях.


Укажем ширину нашего заранее подготовленного такой, какая она есть. Пусть, в нашем примере изображение будет размером 300 по ширине и 200 по высоте.


Соответственно укажем:


<html>

<head>

<title>Картинная галерея художника Василия Пупкина</title>

</head>

<boby>


<table width="100%" border="1">

  <tr>

    <td><img src="/images/foto.jpg"></td>

    <td><h1>Художник Василий Пупкин</h1>

    Моя биография... - сюда пишем текст о себе...

    </td>

  </tr>

</table>


<br /><br />


<table width="100%" border="0" cellspacing="15">

  <tr>

    <td><img src="/images/pic_1.jpg" alt="Фото природы" title ="Фото природы" height="200" width="300"><br />

Фото природы

    </td>

  </tr>

  <tr>

    <td>Строка 2</td>

  </tr>

  <tr>

    <td>Строка 3</td>

  </tr>

</table>


</body>

</html>


Посмотрим, как измениться фотография, меняя эти размеры, например, ширину 300 поменяем на 500. Вотография растянется по ширине. Благодаря этим приемам - изменению масштабов фото мы можем выводить большие изображения в меньшем размере в окне браузера.


- Если необходимо сделать область одного цвета, или градиентный фон, можно растянуть рисунок, например, шириной 1 пиксель и высотой 20, на нужную величину используя атрибут width. Это может применяться для ускорения загрузки страницы, нет необходимости вставлять дополнительный рисунок.


Теперь добавим другие фотографии подобным образом в наш код.


Мы получили простую галерею изображений. Добавим теперь свои контакты для того чтобы посетители сайта могли связаться с нами. Воспользуемся ссылкой на электронную поту. Для того чтобы вставить ссылку на e-mail пишем следующий код: <a href="mailto: Этот e-mail адрес защищен от спам-ботов, для его просмотра у Вас должен быть включен Javascript " title="Написать письмо"> Этот e-mail адрес защищен от спам-ботов, для его просмотра у Вас должен быть включен Javascript </a>

 - в этом выражении <a> означает открытие тега ссылки, затем идет href="/ " - адрес ссылки, тег title=" " означает надпись, появляющуюся при наведении на ссылку мыши.


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


<html>

<head>

<title>Картинная галерея художника Василия Пупкина</title>

</head>

<boby>


<table width="100%" border="1">

  <tr>

    <td><img src="/images/foto.jpg"></td>

    <td><h1>Художник Василий Пупкин</h1>

    Моя биография... - сюда пишем текст о себе...

    </td>

  </tr>

</table>


<br /><br />


<table width="100%" border="0" cellspacing="15">

  <tr>

    <td><img src="/images/pic_1.jpg" alt="Фото природы" title ="Фото природы" height="200" width="300"><br />

Фото природы

    </td>

  </tr>

  <tr>

    <td>Строка 2</td>

  </tr>

  <tr>

    <td>Строка 3</td>

  </tr>

</table>


<p>

<a href="mailto: Этот e-mail адрес защищен от спам-ботов, для его просмотра у Вас должен быть включен Javascript " title="Написать письмо"> Этот e-mail адрес защищен от спам-ботов, для его просмотра у Вас должен быть включен Javascript </a>

<br />

Звоните: 77-888-999

</p>


</body>

</html>


Сохраняем, проверяем. У нас получился простейший одностраничный сайт портфолио с нашими работами. Для того, чтобы его могли увидеть люди, нам необходимо выложить его на хостинг.

© Дмитрий Парыгин, www.itsait.com

Комментарии  

 
0 #1 Дима 02.04.2017 18:59
Конструкторов сейчас очень много, так что проблем с сайтостроением точно нет!
Цитировать
 
 
0 #2 Парыгин Дмитрий 15.12.2017 11:17
Дима, Вы совершенно правы. Современные сайты почти все снабжаются системами управления. Но никто не запрещает сделать сайт в виде одной простой страницы с фотографиями, и телефоном. А для каких целей он будет использоваться - это уже дело владельца сайта.
Цитировать
 

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


Защитный код
Обновить

You are here Статьи Как создать сайт портфолио