Створення шапки за допомогою html коду:
Початок створення головної сторінки розпочинається зі створення шапки за допомогою css стилю та html коду.
Приклад:
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>САЙТ IT ТЕХНОЛОГІЙ</title>
<meta name="keywords" content="Student dominion" />
<meta name="description" content="Student dominion" />
Інформація про стилях може розташовуватися або в окремому файлі, або безпосередньо в коді Web-сторінки. Розташування опису стилів в окремому файлі має сенс у випадку, якщо планується застосувати стилі до більшого, ніж одна, кількості сторінок. Для цього створюється звичайний текстовий файл, описати за допомогою мови CSS необхідні стилі, а в коді Web-сторінок, які будуть використовувати стилі з цього файлу, потрібно буде зробити посилання на нього. Робиться це за допомогою тега <LINK>, розташовується всередині тега <BODY> ваших сторінок.
Приклад:
<link href="file:///F|/сайт дипломної роботи/style.css" rel="stylesheet" type="text/css" />
Перші два параметри цього тега є зарезервованими іменами, необхідними для того, щоб повідомити броузеру, що на цій сторінці буде використовуватися CSS. Третій параметр – HREF= «URL» – вказує на файл, який містить описи стилів. Цей параметр повинен містити відносний шлях до файлу – у разі, якщо він знаходиться на тому ж сервері, що і документ, з якого до нього звертаються – або повний URL («http://...») у випадку, якщо файл стилів знаходиться на іншому сервер.
Другий варіант, при якому опис стилів розташований у коді Web-сторінки, всередині тега <BODY>, в тегу <STYLE type="text/css">... </STYLE>. У цьому випадку ви можете використовувати ці стилі для елементів, розташованих у межах сторінки. Параметр type="text/css" є обов'язковим і служить для вказівки броузеру використовувати CSS.
Приклад:
<style type="text/css">
body,td,th {
color: #FF0;
}
#peregon_footer {
color: #999;
}
Псевдоклас :link застосовується до посилань, які ще не відвідувалися користувачем, і встановлює для них стильове оформлення.
Приклад:
a:link { /* Колір посилань */
color: #00CC00;
}
Застосовуємо псевдоклас :visited застосовується до посилань, вже відвіданих користувачем, і встановлює для них стильове оформлення.
Приклад:
a:visited { /* Колір відвіданих посилань */
color: #0099FF;
}
body {
background-image: url(images/fon.jpg); - задали фоновий малюнок
background-repeat: repeat-y;
}
</style>
</head>
<body text="#FFFFFF">
Тег <ul> встановлює маркірований список. Кожен елемент списку повинен починатися з тега <li>. Якщо до тегу <ul> застосовується таблиця стилів, то елементи <li> успадковують ці властивості.
Для того, щоб на кожній сторінці виділялися різні посилання встановлюємо "class="current"
Приклад:
<ul>
<li><a href="\сайт дипломної роботи\index.html" class="current">ГОЛОВНА</a></li> -
<li><a href="#">НОВИНИ</a></li>
<li><a href="#">ЗАВАНТАЖЕННЯ</a></li>
<li><a href="#">ПРО САЙТ</a></li>
</ul>
</div> <!-- end of menu -->
</body>
</html>
Далі створюємо стиль. Відкриваємо файл style.css і починаємо записувати параметри тексту записуючи наступний код стилю. Результат зображений на мал..2.1.4.
Приклад:
/*
CSS
*/
body {
margin: 0; /* Прибираємо відступи */
padding: 0; /* Поля навколо тексту */
line-height: 1.5em; /* устанавливает полуторный межстрочный интервал */
font-family: Arial, Helvetica, sans-serif; /* Встановлює сімейство шрифтів */
font-size: 12px; /* Розмір шрифту */
color: #FF0; /* Колір символу */
background: #272525 url(/fon.jpg) repeat-x; /* Колір фону, шлях до фонового зображення і повторення фону */
}
a:link, a:visited { color: #FFFFFF; text-decoration: none; font-weight: normal; }
a:active, a:hover { color: #99FF00; text-decoration: underline; }
p {
margin: 0px;
padding: 0px;
text-align: justify;
color: #FFF;
}
Мал.2.1.4.
Далі додається зображення для шапки сайту На якому розміщуємо головне меню для цього відкриваємо style.css файл і записуємо наступний код.
Приклад:
/* menu */
#peregon_menu {
clear: both; /*Означає, що ні зліва ні оточуючих*/
width: 500px; м /* Ширина блоку */
height: 65px; /* Висота блоку */
padding: 0 240px; /* Поля навколо тексту */
background: url(images/peregon_menu_bg.jpg) no-repeat;
}
Для відображення на головній сторінці зображення вставляється тег <div>в html документ в розділі <body> в якому здається імя селектора який написаний в css файлі.
Приклад:
<div id="peregon_menu">
Елемент <div> є блоковим елементом і призначений для виділення фрагмента документа з метою зміни виду вмісту. Як правило, вид блоку управляється за допомогою стилів. Щоб не описувати кожен раз стиль всередині тега, можна виділити стиль у зовнішню таблицю стилів, а для тега додати атрибут class або id з ім'ям селектора.
Як і при використанні інших блочних елементів, вміст тега <div> завжди починається з нового рядка. Після нього також додається перенесення рядка. Резултат на мал
Далі нам потрібно розмістити на зображенні посилання головного меню так щоб вони були розміщені по горизонталі на одній лінії та задати інший колір тому потрібно выідкрити файл style.css та дописати слідуюючий код с параметрами.
Приклад:
#peregon_menu ul {
width: 500px; /* Ширина блоку */
Встановлюєм величину відступу від кожного краю елемента. Відступом є простір від межі поточного елемента до внутрішньої межі його батьківського елементу.
Якщо у елемента немає батька, відступом буде відстань від краю елемента до краю вікна браузера з урахуванням того, що біля самого вікна теж встановлені відступи. Щоб від них позбутися, слід встановлювати значення margin для селектора <body> дорівнює нулю.
Властивість margin дозволяє задати величину відступу відразу для всіх сторін елемента або визначити її тільки для зазначених сторін.
margin: 0px; /* Відступи навколо */
Padding Встановлюєм значення поля навколо вмісту елемента. Полем називається відстань від внутрішнього краю рамки елемента до уявного прямокутника, що обмежує його вміст.
padding: 20px 0 0 15px; /* Поля навколо тексту */
list-style Універсальна властивість, що дозволяє одночасно визначити стиль маркера, його положення, а також зображення, яке буде використовуватися в якості маркера.
None — маркирация здійснюватися взагалі не буде.
list-style: none;
}
#peregon_menu ul li {
display: inline;
}
#peregon_menu ul li a {
float: left;
padding: 0 20px;
text-align: center;
font-size: 12px;
text-align: center;
text-decoration: none;
color: #999999;
font-weight: bold;
}
#peregon_menu li a:hover, #peregon_menu li .current {
color: #999999;
}
/* end of menu*/
Створення лівої навігації
Набираемо простий html код с назвами предметів
<ul>
<li><a href=" ">Графіка</a></li>
<li><a href="">ТОІ</a></li>
<li><a href="">ОС</a></li>
<li><a href="">З.К.І.С.</a></li>
<li><a href=" "</a></li>
</ul>
Результат:
Даємо назву списку за допомогою коду
<div class=" ">СПИСОК ПРЕДМЕТІВ</div>
Далі за допомогою мови створюється належній вигляд. Для цього відкривається style.css файл та записується наступний код.
Приклад:
.peregon_side_bar {
float: left;
width: 180px;
padding: 20px 19px 0 19px;
background: #1b1919;
border: 1px solid #363434;
}
Для активації стилю потрібно його встановити в index.html файл для цього записуємо наступний html код. Результат зображено на мал 2.1.5
<div class="peregon_side_bar ">
Мал.2.1.6
Далі вирівнюється текст та створюється стиль . Мал. 2.1.7
.peregon_side_bar ul {
margin: 0px;
padding: 0px;
}
Мал.2.1.7
Результат на мал.2.1.8
.peregon_side_bar ul li {
margin: 0px;
padding: 0 0 0 0;
margin-bottom: 5px;
border-left: 5px solid #0F0;
list-style: none;
}
Мал.2.1.8
Результат на мал.2.1.9
.peregon_side_bar ul li a {
display: block;
background: #242224;
padding: 5px 0 5px 10px;
color: #b5b1b1;
text-decoration: none;
}
Мал.2.1.10
Далі для того щоб посилання виділялись при наведенні курсору записується наступний код. Результат на мал.2.1.11
Приклад:
.peregon_side_bar ul li a:hover {
color: #ffffff;
background: #000;
}
.peregon_side_bar form {
margin: 0px;
padding: 0px;
}
Мал.2.1.11
Далі додасться рядок пошуку в даному розділі для цього пишемо наступний код . Результат на мал.2.1.12. Кінцевий
Приклад:
<div class="header_01">ПОШУК УРОКУ</div>
<form action="" method="post">
<input type="text" id="search_field" />
<input type="submit" value="" id="search_button" />
</form>
Створюється стиль
#search_field {
padding: 5px 0 0 0;
height: 20px;
width: 175px;
margin-bottom: 10px;
}
Мал.2.1.12
Додається кнопка пошуку в вигляді іконки
Приклад:
#search_button {
float: right;
width: 120px;
height: 30px;
padding: 0;
margin: 0;
cursor: pointer;
font-size: 12px;
text-align: center;
white-space: pre;
background: url(images/peregon_button_02.png) no-repeat;
color: #000000;
border: none;
}
Мал.2.1.13. Готова панель пошуку.
Створення контенту
Тепер переходимо до створення контенту по центру. Починається зі створення. Далі встановлюємо його в наш html документ.
Приклад :
.peregon_content {
float: left;
width: 460px;
padding: 20px 19px 0 19px;
background: #1b1919;
border: 1px solid #363434;
}
.content_section {
clear: both;
padding: 0 0 0 0;
}
.content_section p span {
color: #ffffff;
}
.margin_bottom Встановлює величину відступу від нижнього краю елемента. Відступом є відстань від зовнішнього краю нижньої межі поточного елемента до внутрішньої межі його батьківського елементу.
Добавляем в начале сss файла следующий код с параметрапи для контента
Приклад:
.margin_bottom_10 { clear: both; width: 100%; height: 10px; font-size: 1px; }
.margin_bottom_20 { clear: both; width: 100%; height: 20px; font-size: 1px; }
.margin_bottom_30 { clear: both; width: 100%; height: 30px; font-size: 1px; }
.margin_bottom_40 { clear: both; width: 100%; height: 40px; font-size: 1px; }
.margin_bottom_50 { clear: both; width: 100%; height: 50px; font-size: 1px; }
.margin_bottom_60 { clear: both; width: 100%; height: 60px; font-size: 1px; }
.margin_right_10 { margin-right: 10px; }
.margin_right_60 { margin-right: 60px; }
.horizontal_divider {
background: url(images/peregon_horizontal_divider.jpg) bottom repeat-x;
}
В html Файл Встановлюється створений стиль та добавляємо тег заголовка та параграфу для введення інформації
Приклад:
<div class="peregon_content margin_right_10">
<div class="content_section">
<div class="header_02"></div>
<h3 align="center"></h3>
<p align="center"></p>
</div>
<div class="margin_bottom_20 horizontal_divider"></div>
<div class="margin_bottom_20"></div>
<div class="margin_bottom_40"></div>
</div> <!-- end of content -->
Результат:
Створення навігації з права
Далі створюється навігація з правої сторони веб-сторінки для цього підключається в html файлі вже готову таблицю стилів.
Приклад:
<div class="peregon_side_bar">
<div class="header_01"></div>
<p>
</p>
<p></p>
</div>
При введенні інформації таблиця буде розширюватись.
Створення підвалу
Далі створюється підвал для сайту. Для цього створюється посилання на фоновий малюнок підвалу в таблиці стилів з заданими параметрами та підключається в html документі (мал
Приклад:
#peregon_footer {
clear: both;
width: 990px;
height: 40px;
margin: 0 auto;
padding: 20px 0 0 0;
text-align: center;
background: url(images/peregon_footer.jpg) no-repeat;
}
html Код:
<div id="peregon_footer">
© 2015</a> Атвор Сайту Перегон Сергій
</div> <!-- end of footer -->
</div>
Результат:
Форматування стилю
Далі відформатовується сторінка та текст тза допомогою css.
Приклад :
.header_01 {
padding: 0 0 5px 0;
margin: 0 0 10px 0;
font-size: 14px;
font-weight: bold;
color: #ffffff;
/*color: #e40b0b;*/
}
Html код:
<div id="peregon_content_wrapper">
<div class="peregon_side_bar">
<div class="header_01">СПИСОК ПРЕДМЕТІВ</div>
Html код:
<div class="header_01">ПОШУК УРОКУ</div>
Результат:(мал.1.1.1)
Втановлення в контент текстової інформації
Додамо на веб-сторінку «Вимоги та рекомендації до змісту дипломних робіт» с підключенням таблиці стилів
Приклад:
<div class="peregon_content margin_right_10">
<div class="content_section">
<div class="header_02"></div>
<h3 align="center">1. ВИМОГИ ТА РЕКОМЕНДАЦІЇ ДО ЗМІСТУ ДИПЛОМНИХ РОБІТ </h3>
<h3 align="center"><strong>1.1 ЗАГАЛЬНІ ВИМОГИ</strong></h3>
<p align="center">Написання та оформлення дипломної роботи повинно<br />
проводитись у суворій відповідності з вимогами оформлення<br />
документації ( з дотриманням основних положень Держстандарту).<br />
Загальними вимогами до роботи є:<br />
- чіткість і логічна послідовність викладення матеріалу;<br />
- точність формулювання, що виключає можливість<br />
неоднозначного розуміння;<br />
- конкретність викладення результатів роботи;<br />
- розробка практичної частини.<br />
Учням слід пам’ятати, що дипломна робота – це результат<br />
теоретичної та професійно-практичної підготовки, в якому мають бути<br />
зроблені конкретні висновки щодо розглянутих у роботі теоретичних<br />
відомостей та практичних завдань. Незалежно від поділу роботи на<br />
розділи та підрозділи, кожний з них повинен містити чітку інформацію<br/>
та мати практичне завдання.</p>
</div>
<div class="margin_bottom_20 horizontal_divider"></div>
<div class="margin_bottom_20"></div>
<div class="margin_bottom_40"></div>
</div>
Створення послання
Далі створюється посилання на уроки з предмету «Комп'ютерні мережі». Для цього створюється в папці сайту ще одну папку network. В цій же папці створюється html так як він містить навчальний матеріал першого уроку по комп’ютерним мережам дається назва документу leson1.html.
Далі записується в index.html тег <a href="> за допомогою нього робиться посилання на сторінку уроку.
Приклад:
<li><a href="network\leson1.html">КОМП’ЮТЕРНІ МЕРЕЖІ</a></li>
Далі копіюється html код головної сторінки та редагується вона а саме контент. На місті контенту знаходиться текстова інформація стосовно уроку. Вона розміщується так само як розміщується контент на головній сторінці «ВИМОГИ ТА РЕКОМЕНДАЦІЇЇ ДО ЗМІСТУ ДИПЛОМНИХ РОБІТ».
З правої сторони меню навігації розміщується посилання на інші уроки даного предмета які розроблюються по принципу першого уроку.
Приклад :
<div class="peregon_side_bar">
<div class="header_01">СПИСОК УРОКОІВ</div>
<div class="latest_news border_bottom">
<div class="header_03">
<p><a href="network\leson1.html">УРОК 1.</a> <strong>Комп’ютерні мережі - загальні поняття</strong></p>
<p></p>
<p><a href network\leson2.html ">УРОК 2</a></p>
<p></p>
<p><a href network\leson3.html ">УРОК 3</a></p>
З іншими посиланнями робиться аналогічно.