5.1 Початок створення WEB-сторінки
Для створення Web- сторінки потрібно в ОС Windows 8 здійснити ПКМ/Создать/Папку.
Мал.2.1.1. Створення текстового документу.
З’являється вікно в якому задаємо місце розташування та ім’я файлу: index.html (Мал.2.1.2.). В цьому файлі буде записуватись html код головної сторінки веб-сайту.
Мал.2.1.2. Ім’я html файлу
Далі аналогічно створюється файл.css та надаємо йому ім’я style.css (Мал. 2.1.3.). В цьому файлі буде записуватись дизайн сайту під час написання html коду будемо встановлювати уже створений стиль.
Мал.2.1.3. Ім’я css файлу
Далі створюється папка з назвою «images». В цій папці будуть збережені малюнки для створення стилю. Спеціальні малюнки можна закачати з мережі Інтернет та при необхідності редагувати в редакторі Fotoshop. Набір малюнків підготовленій до роботи.
1. Створення шапки за допомогою 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. Готова панель пошуку.
Дата добавления: 2015-07-11; просмотров: 216 | Нарушение авторских прав
| <== предыдущая страница | | | следующая страница ==> |
| Правила запису посилань | | | Створення контенту |