Опубликован: 09.06.2009 | Доступ: свободный | Студентов: 6054 / 2777 | Оценка: 4.52 / 4.43 | Длительность: 05:45:00
Специальности: Менеджер
Лекция 3:

Создание сайта

Создание сайта

Вспоминаем, что на создаваемом сайте будут выложены фотографии. Сейчас на локальном компьютере есть папка, в которую помещены оригинальные фотографии. Их довольно много - больше 50. Для размещения их на сайте нужно уменьшить их размер, а также выбрать сохранения в формате для Интернета. Удобнее всего это сделать в программе Adobe Photoshop, используя пакетную обработку изображений. В результате получаем две папки - "images_full" с оригинальными снимками и "images", содержащую уменьшенные и оптимизированные изображения ( рис. 3.10):

Две папки с изображениями

увеличить изображение
Рис. 3.10. Две папки с изображениями

Лучше всего всем снимкам давать осмысленные названия. Далее мы будем размещать материалы всего сайта через FTP. Есть определенные правила, касающиеся названий файлов и их размеров:

Имена файлов, закачиваемых по FTP, могут содержать только буквы латинского алфавита, цифры и символы . (точка) и _ (подчеркивание). Имя файла не должно начинаться с точки.

Размер одного файла не должен превышать 5 МБ.

Поэтому будем изначально внимательны - еще на стадии подготовки фотографий. Например, если вы захотите в операционной системе Windows Vista переименовать сразу множество файлов, выделив их и введя название для одного, например, "kotenok", то полученная серия "kotenok-(2)", "kotenok-(3)" и т.д. будет содержать неподходящие названия. Придется или называть их в ручную, или использовать другие программы, например, Total Commander.

Для верстки веб-страниц удобнее всего использовать Adobe Dreamweaver. Этот комбайн для веб-мастеров генерирует хороший код при использовании визуальных средств и позволяет значительно ускорить работу ( рис. 3.11):

Верстка страниц сайта в Adobe Dreamweaver CS4

увеличить изображение
Рис. 3.11. Верстка страниц сайта в Adobe Dreamweaver CS4

Кодировка страниц должна быть Windows-1251. При этом не надо указывать тег charset. Нам придется поступить так - в программе Dreamweaver выбрать кодировку Windows-1251, после чего на странице появится следующая строка:

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

А потом мы просто удаляем тег charset:

<meta http-equiv="Content-Type" content="text/html" />

Дело в том, что сервер Народ.Ру способен перекодировать страницу, отдавая ее пользователю. По умолчанию все работает с кодировкой windows-1251, но если браузер посетителя сайта не поддерживает ее, то сервер позаботится о предоставлении страницы в нужном виде.

Все страницы, которые получились в результате работы, доступны на сайте http://v-rn.narod.ru. Дело в том, что к моменту написания этой Лекции у меня получился готовый сайт, последовательные шаги которого мы сейчас и рассматриваем. Все страницы содержат предельно простой HTML-код, вот пример одной из страниц:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html" />
<title>Парк Авиастроителей </title>
<meta name="keywords" content="Парк Авиастроителей, Воронеж, Фотографии парка Авиастроителей в Воронеже, 
   деревенные фигуры, деревянная скульптура." />
<meta name="description" content="Фотографии деревянных скульптур воронежского 
   парка Авиастроителей в высоком разрешении." />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="content">
Парк Авиастроителей - небольшой и уютный парк, в котором понадобилось однажды спилить старые деревья.
   Ничего необычного, стандартная задача.
<p><a href="images_full/park13.jpg"><img src="images/park13.jpg" width="806" height="1075" border="0px"/></a>
</p>
<p>Но как были спилены эти деревья! Теперь пеньки - немного доработанные скульпторами,
   стали совершенно самостоятельными украшениями парка.</p>
<p><a href="images_full/park14.jpg"><img src="images/park14.jpg" width="806" height="1075" border="0px"/></a></p>
<p>Их много и они разные. Сова и панда, который залез на дерево.</p>
<p><a href="images_full/muzey15.jpg"><img src="images/park15.jpg" width="1075" height="806" border="0px"/></a></p>

<p><a href="images_full/park10.jpg"><img src="images/park10.jpg" width="806" height="1075" border="0px"/></a></p>
<p>И панда, и дерево представляют собой один ствол.</p>
<p><a href="images_full/park11.JPG"><img src="images/park11.jpg" width="1075" height="806" border="0px"/></a></p>
<p><a href="images_full/park12.jpg"><img src="images/park12.jpg" width="806" height="1075" /></a></p>
<p>Небольшие пеньки.</p>
<p><a href="images_full/park16.JPG"><img src="images/park16.jpg" width="1075" height="806" border="0px"/></a></p>
<p>И большие.</p>
<p><a href="images_full/park17.jpg"><img src="images/park17.jpg" width="806" height="1075" border="0px"/></a></p>
<p>Знакомые персонажы знакомых сказок.</p>
<p><a href="images_full/park18.jpg"><img src="images/park18.jpg" width="806" height="1075" border="0px"/></a></p>
<p><a href="images_full/park19.jpg"><img src="images/park19.jpg" width="806" height="1075" border="0px"/></a></p>
<p><a href="images_full/park.JPG"><img src="images/park.jpg" width="1075" height="806" /></a></p>
<p><a href="images_full/park3.JPG"><img src="images/park3.jpg" width="1075" height="806" border="0px"/></a></p>
<p><a href="images_full/park8.jpg"><img src="images/park8.jpg" width="806" height="1075" border="0px"/></a></p>
<p><a href="images_full/park7.jpg"><img src="images/park7.jpg" width="806" height="1075" border="0px"/></a></p>
<p><a href="images_full/park2.jpg"><img src="images/park2.jpg" width="806" height="1075" border="0px"/></a></p>
<p><a href="images_full/park4.JPG"><img src="images/park4.jpg" width="1075" height="806" border="0px"/></a></p>
<p><a href="images_full/park5.jpg"><img src="images/park5.jpg" width="806" height="1075" border="0px"/></a></p>
<p><a href="images_full/park6.JPG"><img src="images/park6.jpg" width="1075" height="806" border="0px"/></a></p>
<p><a href="images_full/park9.jpg"><img src="images/park9.jpg" width="806" height="1075" border="0px"/></a></p>
<p>Более подробную информацию о парке Авиастроителей можно найти в Базе Знаний Черноземья <a 
href="http://www.chernozemye.ru/index.php5/Парк_Авиастроителей">http://www.chernozemye.ru/index.php5/Парк_Авиастроителей</a></p>
<p><a href="index.html">На главную</a></p>
</div>
</body>
</html>

Сейчас на нашем локальном компьютере, в папке лежат все материалы сайта ( рис. 3.12):

Материалы сайта

увеличить изображение
Рис. 3.12. Материалы сайта

Теперь перед нами возникает задача - переслать эти материалы на удаленный сервер.

Егор Скрипко
Егор Скрипко

К сожалению, многие фишки Ядекса перечисенные в этом курсе больше не поддерживаются. Курс морально устарел.

Анна Давыдько
Анна Давыдько

невозможно будет сдать тест,видимо данные устарели. яндес народ переехал на uCoz..там все платно и по-другому