В этой части публикаций по теме создания первого сайта с ноля или с чистого листа, я покажу как подключить файл с таблицами стилей css, предоставлю демо работы нашего сайта, создадим дополнительные страници. Сайт не может состоять из одной страници. Если вы решили сделать сайт, значит хотите что-то разместить на нем. Предлагаю для начала создадим сайт визитку. Давайте вспомним немного из предыдущей публикации, что мы уже умеим делать и сделали. Мы научились создавать шапку сайта, саму структуру страницы на новом html5, создали таблицу стилей для первой страници сайта index.php.
Подключам файл style.css к нашему первому сайту
Код CSS
<link href="style.css" rel="stylesheet" type="text/css">
Так можно подключить, прописав путь к файлу стилей можно в том случае если они находятся в одной директории, если нет то изменяем путь. Напомню, что подключать файл стилей необходимо между тегами head!
Просмотрели все работает, я специально создал в меню ссылки для примера там их 4. Давайте если - это у нас сайт визитка то создадим еще одну страницу с описанием автора или организации или что-то другое и назовем ее about.html. Открываем текстовый редактор, создаем новый файл, копируем макет из index.html, и вставляем код в about.html после чего можно сохранить в ту папку где находиться и первый файл нашего первого сайта. Следующим действием сделаем рабочим меню. Давайте для index.html сделаем так
Код HTML
<li><a href="index.html">Главная</a></li>
<li><a href="about.html">О нас</a></li>
<li><a href="contacts.html">Контакты</a></li>
<li><a href="gallery.html">Галерея</a></li>
Измените так в файле index и about. Создадите аналогично следующие contacts.html и gallery.html, сохраните файлы в ту папку где и все файлы нашего сайта.
Исходный код страници сейчас должен выглядеть так,
Код HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="jquery.js"></script>
</head>
<body>
<div class="container">
<header>
<a href="index.html"><img src="" alt="Место для логотипа" id="Insert_logo" style="background: #C6D580; display:block;" height="90" width="180"></a>
</header>
<div class="sidebar1">
<nav>
<ul>
<li><a href="index.html">Главная</a></li>
<li><a href="about.html">О нас</a></li>
<li><a href="contacts.html">Контакты</a></li>
<li><a href="gallery.html">Галерея</a></li>
</ul>
</nav>
<aside>
<h1>Левая колонка</h1>
</aside>
<!-- end .sidebar1 --></div>
<article class="content">
<h1>Центральная часть</h1>
<section>
</section>
<!-- end .content --></article>
<aside>
<h4>Правая колонка</h4>
</aside>
<footer>
<address>
Содержимое адреса
<a href="http://phpguru.com.ua">http://phpguru.com.ua</a>
</address>
</footer>
<!-- end .container --></div>
</body>
</html>
Далее уже можно попробовать перейти на наши страници сайта и просмотреть, протестировать работу ссылок на страници. Если все нормально, то значит все сделано правильно и можно начинать заполнять страници. Заполнив все страници, необходимым содержимым, давайте приступим к созданию галереи на html. Написать тексты, о том кто вы и контактные данные думаю труда не составит.
Создаем галерею
Для создании галереи изображений на нашем первом созданном лично сайте будим использовать фреймворк jquery. Начнем с подключения.
Код HTML
<script src="jquery.js"></script>
После подключения основной библиотеки найдем красивый плагин для фотогалереи на jquery их в интернете можно найти тысячи, и на официальном сайте в разделе плагины много таких примеров, можно выбрать на свой вкус какой угодно. Я не буду заморачиваться на этом, для решения задач создания фотогалереи. в будущем создам публикации на данную тему. Мы создаем первый сайт на html. Все, что необходимо прописать на страницах - это ваше решение и ваш проэкт. Я просто показал как создать саму структуру, переход по страницам сайта. Если вы уже все создали и все нормально работает, обязательно проверьте.
Для выделения сайта из серии других, как для каждого бренда или марки существует, торговый знак. Для сайтов - это логотип. Как создать логотип для сайта, я сейчас немного опишу. Основным принципом подбора содержимого логотипа есть тематика и напривленность сайта. Сам логотип - это небольшое изображение которое обычно вставляеться в левый верхний угол сайта, и символизирует его тематику или направление. Если у нас тема сайта - это сайт визитка. То можно использовать торговый знак вашей фирмы или вашего другого бренда. Просмотрев логотип сайта phpguru.com.ua - становится сразу понятно - что сайт о программировании. Сразу ясно, что это блог программиста. Следуя из этого и необходимо ориентироваться при создании логотипа.
Логотипы для сайтов обычно создаються в графичесских редакторах таких как фотошоп, можно заказать изготовление на бирже фрилансеров. Но поскольку мы делаем свой сайт бесплатно, то и логотип будим делать сами. Я предлагаю, для тех кто не знаком с фотошопом использовать AAA Logo - это бесплатная программа распространяется бесплатно в интернете. Просто найдите ее скачайте запустите и сразу все поймете. Программа создана только для изготовления логотипов, проста в использовании, удобна, быстра и не требует установки. С ней разберется даже школьник. На этом данную публикацию завершаю.