Блиц-опрос

Ваше мнение очень важно для автора сайта! Оцените дизайн и контент сайта:

Круто - 50%
Нормалёк - 18.8%
И так сойдет - 18.8%
Полный отстой - 12.5%

Проголосовали: 16
Голосование для этого опроса закончилось on: 31 Дек 2017 - 00:00

Создаем сайт — окончание

1

В статье выше мы создали мекет сайта. Теперь попытаемся создать пробный сайт и опубликовать его в интернете. Итак мои следующие действия:

  • в интернете нахожу картинку для логотипа сайта и уникализирую ее — очищаю фон, меняю размер, формат и проч. (файл gor.png);

  • на своем жестком диске нахожу фотографию цветущего абрикоса, подправляю ее немного в Фотошопе (файл sakura.gif);

  • копирую файлы  gor.png и sakura.gif в папку [Images] пробного сайта;

  • копирую файл HTML-book.zip (заархивированный учебник по HTML) в папку [Files] пробного сайта.

Теперь буду вносить изменения в код сайта. Открываю в редакторе Notepad++ файл index.html. Во-первых убрал границы таблицы. Далее вставил свой логотип — просто заменил первый красный фрагмент кода на следующий:

 <img alt="Логотип" src="/images/gor.png" border="0" align="left" Width="150" Height="128">

Теперь вместо фразы Здесь будет название сайта просто набиваю [Не боги горшки обжигают]. Далее вместо третьего фрагмента кода, выделенного красным цветом (там где фраза Здесь будет меню сайта), вставляю следующий фрагмент:

<p align="center"><font face="Verdana, Arial, Helvetica, sans-serif" size="3" color="#000000">
      Меню сайта</font></p>
      <p align="center"><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#000000">
      <a href="/2page.html" title="Другая страница">Другая страница</a></font></p>

Как видите, я прописал относительную ссылку на другую (вторую) страницу сайта, которой еще нет, но которую я скоро создам. Теперь осталось вставить текст на главной странице пробного сайта. Вместо фразы Здесь будет контент сайта я просто вставляю фрагмент текста, который используют все веб-мастера, так называемую «рыбу». Ну и еще вставлю картинку в начале текста — то есть перед первым словом вставленного текста (также с прописанным путем к источнику картинки):

<img alt="Фото абрикоса" src="/images/sakura.gif" border="1" align="left" Width="220" Height="130">

Сохраняем файл index.html. Похоже, мы сделали главную страницу нашего пробного сайта. Теперь открою этот файл в браузере и посмотрю, как это все выглядит:

 

Итак, все работает. Тепернь нужно сделать вторую (другую) страницу сайта с именем 2page.html. Имя могло быть и другим, главное, чтобы файл имел расширение [.html]. Просто я прописал в меню ссылку на файл именно с таким именем. Открываю в редакторе Notepad++ файл index.html и сохраняю его как 2page.html. Теперь придется внести изменение в HTML код. Меняю текст главной страницы на другой — произвольный. Вношу изменение в меню — меняю ссылку. В конце текста второй страницы прописываю ссылку на скачивание учебника по HTML, то есть просто вставляю фрагмент кода:

<p align="left"><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#000000">
Старый — престарый учебник по HTML:
<a href="/files/HTML-book.zip" title="Скачать книгу"><br><br>Скачайте книгу бесплатно!</a>
</font></p>

 Смотрю в браузере, что получилось:

Все работает, появилась ссылка на скачивание книги, меню то же работает. Конечно же, в меню должно быть две ссылки. но я ограничился одной, чтобы не давать пояснения, что такое наведенна, активная, посященная ссылки и проч.

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

Настоящую статью я подготовил для публикации за два полных рабочих дня (причем текстовая часть была до этого вчерне готова, и скриншоты — то же!). Вот уж действительно, многие вещи проще сделать, чем описывать процесс их «делания». Как говориться — почувствуйте разницу!

А теперь перенесем сайт на удаленный сервер

В итоге проделанной работы я имею папки и файлы пробного сайта (они находятся в папке [Пробный сайт]). То, что выдите на картинке — это структура сайта или конструкция или состав, или попросту — сайт. Еще раз оговорюсь, что файл robots.txt нужен лишь на удаленном сервере, в процессе создания сайта на жестком диске вашего компьютера он не нужен.

состав сайта

Чтобы перенести сайт на сервер конкретного хостера, нужно иметь аккаунт в этой хостинговой компании, ну и домен, естесственно. Мне, конечно же, пришлось проверить, как созданный пробный сайт будет работать на серевере хостера. Я сделал просто — создал на сервере своего хостера поддомен, с помошью программы FTP-клиент (я использовал Filezilla) закачал эти папки и файлы на удаленный сервер. Затем в адресной строке браузере набрал путь к моему поддомену и увидел пробный сайт точно в таком же виде, как на скриншотах выше. Проверил — все работает!

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

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

Поделитесь с друзьями!

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