Мои Конспекты
Главная | Обратная связь

...

Автомобили
Астрономия
Биология
География
Дом и сад
Другие языки
Другое
Информатика
История
Культура
Литература
Логика
Математика
Медицина
Металлургия
Механика
Образование
Охрана труда
Педагогика
Политика
Право
Психология
Религия
Риторика
Социология
Спорт
Строительство
Технология
Туризм
Физика
Философия
Финансы
Химия
Черчение
Экология
Экономика
Электроника

Подготовка к созданию сайта





Помощь в ✍️ написании работы
Поможем с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой

Итак, мы будем рассматривать способ, как бесплатно получить свой собственный сайт. Первое, что стоит сделать, это найти сайты конкурентов и выяснить, не будет ли создаваемый сайт стотысячным клоном, абсолютно идентичным и глубоко вторичным. Мы будем рассматривать создание что-то вроде краеведческой площадки, где будут размещаться фотографии Воронежа. Набираем в Яндексе "фотографии Воронежа" и смотрим результаты ( рис. 3.1):


увеличить изображение
Рис. 3.1.Результаты поиска по запросу "фотографии Воронежа"

Заметим, что на первом месте находятся результаты сайтов, размещенные именно на Народ.Ру. Это, конечно, не правило, но совпадение, которое говорит от том, что энтузиасты сделали настолько хорошие сайты, что они попали в топ результатов.

Внимательно изучив уже сделанные сайты, сформулируем ряд целей для своего сайта:

  1. Разместить фотографии интересных, необычных мест, а не просто памятников архитектуры. Не нужны стандартные памятники и строения, которые есть в любом российском городе (зачастую тем же самым людям и с теми же самыми названиями). Не нужны обычные скульптуры из гранита, чье достоинство заключено лишь в памяти и символизме. Только то, что обязательно захочется увидеть при посещении города.
  2. Выкладывать фотографии в разрешении, достаточном для комфортного просмотра. Никаких эскизов - сразу крупные изображения в виде одного полотна, сопровождаемого комментариями. В свою очередь, эти изображения будут гиперссылками на фотографии с разрешением исходных снимков. Такой подход позволит (кому угодно) печатать изображения в хорошем качестве. Все изображения будем выкладывать без уродливых водяных знаков и копирайтов - большое разрешение будет как бы намекать, что снимки можно печатать совершенно свободно. Конечно, при дублировании материала в сети хочется хотя бы ссылок на оригинал (исходное изображение) - это соответствует нормам авторского права, в некоммерческих проектах это льстит самолюбию, но явно писать про копирайты на сайте не будем.
  3. Сделать привязку к интерактивным Яндекс.Картам - чтобы сразу видеть, где расположен этот объект.

Если мы реализуем эти цели, то сайт будет отличаться от других, а значит, будет представлять определенную ценность. Приступим к созданию сайта. После авторизации на любом из сервисов Яндекса переходим по ссылке "Народ" и… оказывается, у нас уже есть страница вроде chkariev.narod.ru ( рис. 3.2):


увеличить изображение
Рис. 3.2.Переход к сервису "Народ" после авторизации

Это значит, что для получения доменного имени mysite.narod.ru достаточно зарегистрировать адрес электронной почты mysite@yandex.ru. Тогда идем на страницу почты, регистрируем ящик v-rn@yandex.ru и переходим к его настройкам. В поле "Ваше имя" укажем "Администрация V-rn.Narod.Ru", а для того чтобы домены сайта и почты совпадали, переключим отправку письма по умолчанию с ящика @narod.ru ( рис. 3.3):


увеличить изображение
Рис. 3.3.Настройки почтового ящика

Возвращаемся по ссылке "Народ" и нажимаем на кнопку "Создать" для перехода к созданию главной страницы сайта ( рис. 3.4):


Рис. 3.4.Создание сайта

Мы оказываемся в мастерской - административной части сайта. Это и есть та система управления сайтом, которую нужно было бы заказывать у специалистов для сайта, создаваемого с нуля. Нам нужно что-нибудь разместить на главной странице. Для этого щелкаем по соответствующей ссылке ( рис. 3.5):


увеличить изображение
Рис. 3.5.Переход по ссылке "Главная страница" в мастерской

Здесь нам предстоит выбрать один из готовых шаблонов дизайна. Мы остановимся на самом сложном - когда все придется проделывать самостоятельно ( рис. 3.6):


увеличить изображение
Рис. 3.6.Выбор шаблона дизайна

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


увеличить изображение
Рис. 3.7.Формирование главной страницы. Ввод краткого заголовка

Прокручиваем страницу настроек - далее вводим общую информацию ( рис. 3.8):


увеличить изображение
Рис. 3.8.Формирование главной страницы. Ввод общей информации

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

При нашем аскетичном оформлении готовая страничка будет довольно простой ( рис. 3.9):


увеличить изображение
Рис. 3.9.Готовая заглавная страница

Рекламный миниблок в верхнем левом углу браузера - это своеобразная плата за использование сервиса. Посетитель страницы видит его некоторое время, а потом он сворачивается. Впрочем, если нажать на кнопку с изображением треугольника, то эффект будет тот же. После сворачивания миниблок может быть вообще закрыт. По правилам сервиса на сайте должен присутствовать либо этот миниблок, либо обычный рекламный баннер Яндекса размером 468*60.

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

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

Вспоминаем, что на создаваемом сайте будут выложены фотографии. Сейчас на локальном компьютере есть папка, в которую помещены оригинальные фотографии. Их довольно много - больше 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):


увеличить изображение
Рис. 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.Материалы сайта

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

Доверь свою работу ✍️ кандидату наук!
Поможем с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой



Поиск по сайту:







©2015-2020 mykonspekts.ru Все права принадлежат авторам размещенных материалов.