Создание партнерского сайта.

Что нужно для создания своего собственного сайта? На самом деле не очень много. Данный сайт создан по готовому шаблону и был слегка видоизменен, были добавлены необходимые фото и видео материалы. Я расскажу Вам о том, какие изменения были выполнены, а Вы сделаете свои изменения на своём шаблоне. С некоторыми готовыми шаблонами сайтов Вы можете ознакомиться в блоке Шаблоны сайта (<< см. слева).

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

Надеюсь, Вы его благополучно скачали и сохранили на своём компьютере. Папка состоит из трёх частей: файла index.html, запускающего веб страницу, файла style.css, в котором прописаны все стили и папки images, где расположены картинки, загружаемые в файле index.html. Как Вы можете заметить, я изменил лишь цветовую гамму, картинки и тексты. Однако, этого достаточно, чтобы сайт выглядел совсем по другому.

Для изменения внешнего вида страницы, а именно файла index.html, нужно получить доступ к её коду. Как это сделать? Да очень просто - правый клик на файле index.html, в открывшемся списке Open With>Notepad и открывается необходимый нам код страницы в Блокноте.

Начал я редакцию с изменения заголовка страницы, необходимого, в первую очередь, поисковой системе, для идентификации данной страницы. Для изменения заголовка нам нужен тег title - делаем "Ctrl F" вводим в окно "title" и находим тег в тексте кода - видим фразу Website Design, заключенную в теги title. Это и есть заголовок страницы, меняем его на свой, в моём случае это "Вебдизайн. Создание партнерского сайта". Сохраняем - File>Save, открываем index.html и видим наш заголовок в самом верху окна браузера.

Далее, устанавливаем логотип в верхнем углу, слева. Вместо надписи Website Design Template (находим её в коде страницы делаем "Ctrl F" вводим в окно "Website Design Template"), я установил необходимый логотип. Как я это сделал? Картинка вводится на страницу тегом img, прописывая путь к картинке, в нашем случае это папка images (помните её?) - < img src="/images/logo.jpg" > (пробелы после и перед < и > не нужны). Т.е. я создал логотип logo.jpg, поместил в папку images и прописал путь к нему в теге img. Всё.

Продолжим замену картинок. Однако не все пути к картинкам находятся в коде страницы, некоторые их них прописаны в файле стилей. Вспомним про наш файл style.css - правый клик на файле, в открывшемся списке Open With>Notepad. Картинка, расположенная вверху справа - это header.jpg, находим её в коде файла style.css ("Ctrl F" вводим в окно "header.jpg" и заменяем название на название своей картинки, ну или просто заменяем файл header.jpg на свой с таким же названием). Ну а где должна находиться наша картинка, мы уже знаем. Это конечно же папка images.

Цвета также меняются в файле style.css, но об этом я постараюсь написать в дополнительных статьях.

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