Подякувати Студентському архіву довільною сумою
Admin
26.02.2023 12:38
Дякуємо, що користуєтесь нашим архівом!
Основи HTML та CSS
Інформація про навчальний заклад
ВУЗ:
Національний університет Львівська політехніка
Інститут:
ІКТА
Факультет:
РТ
Кафедра:
Не вказано
Інформація про роботу
Рік:
2013
Тип роботи:
Звіт до лабораторної роботи
Предмет:
Програмування
Частина тексту файла (без зображень, графіків і формул):
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
НАЦІОНАЛЬНИЙ УНІВЕРСИТЕТ «ЛЬВІВСЬКА ПОЛІТЕХНІКА»
ІКТА
кафедра БІТ
З В І Т
до лабораторної роботи №2
з курсу: “ Веб-програмування ”
на тему: “ Основи HTML та CSS ”
Львів – 2013 р.
Мета роботи
Ознайомлення з мовою розмітки гіпертексту HTML та стилями відображення гіпертексту CSS.
Скріншоти створених сторінок
Сторінка 1
Сторінка 2
Сторінка 3
Модифіковані файли index.htm та style.css
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Головна сторінка мого сайта</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="webmasterneo" />
<meta name="description" content="Functional and affordable Web Design Solutions for Individuals and Small Businesses" />
<link rel="stylesheet" href="style.css" type="text/css" />
<style type="text/css">
<!--
.стиль1 { font-size: 16px
}
.стиль2 { font-size: 14px;
font-weight: bold;
}
-->
</style>
</head>
<body>
<div id="header">
<div class="logo"> MLP Design Template Ver 2.0<br /><img class="img" src="images/logo.gif" alt="Your Logo" /></div>
<div class="menu"><span id="result_box" lang="uk" xml:lang="uk"><a href="../../../index1.html">Головна</a></span> | <a href="http://catalog.i.ua/catalog/13/?r=10000">Робота</a><a href="#" title="Services"></a> |<a href="http://catalog.i.ua/catalog/15/?r=10000">Спорт</a>| <a href="http://vk.com/" title="Contact"><span id="result_box3" lang="uk" xml:lang="uk">Контакти</span></a></div>
</div>
<div id="main">
<div id="content">
<div class="navitem">
<h2><a href="3.html">Процес розробки Web-сайта
</p>
</a> </h2>
<h2><a href="5.html">1.Плануванняінформаційного потоку.</a></h2>
<h2><a href="3.html">2. Чітко сформулюйте призначення вашого сайту.</a></h2>
<h2><a href="5.html">3. Обов'язково думайте про свою аудиторію.</a></h2>
<h2><a href="3.html">4. Використовуйте швидко завантажувані елементи.</a></h2>
<h2><a href="5.html">5. Зробіть ваш сайт візуально привабливим.</a></h2>
<h2><a href="3.html">6. Не намагайтеся розмістити все на одній сторінці.</a></h2>
<h2><a href="5.html">7. Розумно організовуйте вміст. </a></h2>
<h2><a href="3.html">8. Передбачте на сайті кнопки навігації.</a></h2>
<h2><a href="5.html">9. Ретельно протестуйте свій сайт.</a></h2>
</div>
<p> </p>
<h2 align="center">Процес розробки Web-сайта</h2>
<p align="justify">Сьогодні, подорожуючи по Internet, можна знайти багато дуже добре виконаних сайтів які швидко завантажуються, привабливі на вигляд, мають чітко роподілену по розділам інформацію і зручні функції навігації.</p>
<p align="justify">Якщо ви затримуєтеся на якому-небудь сайті на довгий час і навіть не усвідомлюєте цього, то, видно, такий сайт дуже добре продуманий. Поверніться назад і спробуйте осмислити повну картину. Чи можете ви побачити структуру, організацію? </p>
<p align="justify">Чи легко сприймається інформація? Розуміння руху інформаційних потоків - це перший крок в створенні функціонального, зручного в роботі сайту. Якщо ви зрозумієте, як працює ця концепція, і застосуєте її при створенні власного сайту, то ви вже тим самим випередите більшість інших розробників.</p>
<p align="justify">Самі кращі Web-сайти - це ті, які привабливо виглядають, ємко виражають основну ідею і не заставляють користувачів чекати отримання інформації на їх екранах дуже довго. Ось декілька порад із створення успішного сайту</p>
<div class="left">
<h2 align="center">1. Планування інформаційного потоку
</p>
</h2>
<p>Багато Web-мастерів не витрачають часу на те, аби продумати інформаційний потік, а обмежуються лише розміщенням тексту і зображень на сторінці. Хоча на багатьох сайтах ви можете зустріти хвалькуваті запевнення, що у них значно більше відвідувачів ніж у конкурентів, проте це не самий кращий індикатор якості виконання. Кращим показником є час: якщо користувачі залишаються на вашому сайті досить довго для того, щоб пройти по різних його рівнях і розділах, то ви маєте право бути упевненими в добре виконаній роботі. Це означає, що вони можуть знайти те, що їм потрібно, оглянути останнє і без особливих зусиль повернутися назад. Аби зробити свій сайт ефективним, ви повинні візуалізувати потік інформації і вибрані користувачем шляхи. Іншими словами, ви повинні бачити свій сайт з точки зору користувача. Процес планування може вимагати великих затрат праці проте якщо він приносить вам задоволення, то цілком імовірно, що ваш сайт буде чудовий.</p>
<p>З таким інструментом в руках, як Frontpage, ви маєте всі можливості для створення самого відвідуваного сайту. Як виглядатиме ваш сайт і яку інформацію ви на нім розмістите, багато в чому залежить від вашої потенційної аудиторії.</p>
<h2 align="center">2. Чітко сформулюйте призначення вашого сайту.</h2>
<p>Які ваші цілі? Лише присутність в Internet? Якщо так, то не дивуйтеся, що ваш сайт, як і багато інших, спіткає доля більшості. Прагніть формулювати ваші цілі настільки чітко, наскільки це можливо. Можливо, ви хочете, аби сайт представляв продукцію вашої компанії. Це добре, але ви повинні задуматися про те як ви збираєтеся представляти ці продукти. Як ви хочете позиціювати ваші продукти на мережевому ринку? Глибоке з'ясування цих питань допоможе вам чітко сформулювати мету. Без чітко певної мети ваше дітище буде приречено на забуття десь на задвірках Усесвітньої Павутини. </p>
<h2 align="center">3. Обов'язково думайте про свою аудиторію.</h2>
<p>Хто буде основною (і вторинною) аудиторією вашого сайту? Якого вони віку? Чим вони займаються? Скільки часу вони проводять на вашому сайті? Відносно кожної порції інформації, кожної картинки і кожної деталі запитаєте себе, як відреагує на це ваша аудиторія.</p>
</div>
<div class="mid">
<h2 align="center">4. Використовуйте швидко завантажувані елементи.
</p>
</h2>
<p>Причина номер один, чому люди швидко вирушають з сайту (або не відвідують його зовсім) - дуже довге завантаження інформації. Великий об'єм графічних файлів викликає бажання якось вплинути на хід подій, і найпростіше - це натискувати на кнопку Stop зупинивши завантаження.<br />
</p>
<h2 align="center">5. Зробіть ваш сайт візуально привабливим. </h2>
<p>Ви, поза сумнівом, бачили в Internet немало нудних сайтів. Що ж робить їх нецікавими? Можливо, недолік кольору і різноманітності тексту, заголовків. Ви ймовірно, бачили також безладні сайти, в яких використовується надто багато шрифтів різних розмірів або надто багато кольорів. Створюючи свій власний сайт, пам'ятаєте, що продумане форматуван--ня сторінок наблизить вас ще на один крок до заповітної мети. </p>
<h2 align="center">6. Не намагайтеся розмістити все на одній сторінці.</h2>
<p>Будьте уважні, не перенавантажуйте свої сторінки дуже великою кількістю інформації. Всі ми знаємо, що письменники люблять писати, а дизайнери-графіки - малювати ефектні картинки. Ваше завдання як розробника сайту - створити тонку гармонію між цими двома дуже різними групами людей. Постарайтеся встановити рівновагу між текстовою і графічною інформацією. Думайте про тих, хто буде читати ваші сторінки; думайте про те, як важко сприймається велика кількість тексту на екрані комп'ютера, і наповнюйте ваші сторінки вмістом відповідно до цього. Спробуйте додати порожній простір, збільшуючи поля сторінки, або використовувати табличне розміщення тексту. Розміщуючи на сторінках графіку, майте на увазі її реальне значення: чи служить вона основній меті, або працює лише як прикраса? Але при цьому не забувайте, що інколи красива графіка сама по собі може бути метою. В ідеалі кожен Web-сайт повинен добре виглядати, містити корисну інформацію і бути зручним для перегляду. Порада: Ми схильні думати, що наш сайт обов'язково буде відмічений тією аудиторією якій він адресований; проте тут дуже легко промахнутися. Аби уникнути цього будьте скромнішими і постарайтеся заздалегідь показати план і вміст вашого сайту як можна більшій кількості людей, особливо потенційним членам вашої аудиторії. Цей дуже важливий крок часто ігнорують.</p>
</div>
<h2 align="center">7. Розумно організовуйте вміст. </h2>
<p align="justify">Можливо, вам знайоме твердження, що вміст первинний, а форма вторинна? І це правда, але форма подачі вмісту теж важлива. Скільки разів при відвідинах чергового сайту ви говорили собі: "Тут немає нічого цікавого"? Можливо, десь глибоко усередині і поховано щось коштовне, але відкопати це щось можна, лише випадково на нього натрапивши. Якщо у вас є інформація, яку, як ви вважаєте, ваші відвідувачі повинні побачити, не ховайте її углиб сайту. Зробіть важливу інформацію настільки легко доступною, наскільки це можливо. Не забувайте, що ваш сайт матиме, по всій видимості, не один рівень вкладеності. Вторинний матеріал упорядковуйте по групах взаємозв'язаної інформації. Передбачимо, наприклад, що ви створюєте інтерактивний каталог музичного магазину. Ви б помістили в один список і джазові компакт-диски, і записи рок-груп? Зрозуміло, ні. Це, звичайно, дуже простий приклад, його сенс в тому, що, розглядаючи всю вашу інформацію в термінах відповідних категорій, ви набагато краще зможете організувати свій сайт.</p>
<h2 align="center">8. Передбачте на сайті кнопки навігації. </h2>
<p align="justify">Більшість розробників використовують кнопки, що адресують до різних розділів сайту. Ці кнопки, як правило, присутні на всіх сторінках сайту і зазвичай розташовані щільною групою в одному і тому ж місці сторінки. Одноманітність і компактність їх розташування істотно спрощують перегляд вашого сайту. Користувачеві досить просто натискувати кнопку, аби перейти в інший розділ сайту. Нижче перераховані деякі рекомендації, що стосуються планування кнопок навігація: <br />
<p>- Обов'язково має бути кнопка, за допомогою якої користувачі могли б повернутися назад до початкової сторінки. Якщо ваш користувач забрався на п'ять рівнів углиб, то треба надати йому можливість одним натисненням кнопки повернутися на першу сторінку. А якщо він зав'язне, натискуючи кнопку Back в своєму браузері, то, швидше за все, він дуже швидко піде з вашого сайту і більше ніколи не повернеться. Іншими словами, не покладайтеся на навігаційні здібності браузеру користувача, обов'язково додайте ці можливості на свій сайт. </p>
<p>- Будьте готові до того, що у деяких відвідувачів вашого сайту відключений перегляд графіки в браузері. Дуже корисно разом з графічними кнопками навігації мати і їх текстову версію. Тим самим для перегляду вашого сайту користувач зможе вибрати зручний для нього варіант. Не сумнівайтеся: пройдет ще немало часу, поки на Web-сторінках залишаться лише графічні кнопки. Отже, постарайтеся максимально спростити переміщення по вашому сайту. Розробляючи сайт, запитаєте себе, між якими точками слід навести мости. Від відповіді на це запитання багато в чому залежатиме, наскільки легкою і захоплюючою буде подорож по вашому сайту. <br />
</p>
<h2 align="center">9. Ретельно протестуйте свій сайт. <br />
</h2>
<p align="justify">Існує цілий ряд різних браузерів, і в кожному з них ваш сайт може виглядати по-різному. Перевірте роботу вашого сайту, використовуючи якомога більше різних браузерів, при цьому на різних платформах (як мінімум, Windows 95 Windows NT, UNIX і Macintosh) і при різних швидкостях модему. Незрідка кнопка навігація, поміщена вами в кут сторінки, в якому-небудь браузері опиняється посеред вікна; такі речі трапляються часто-густо. Досвідчені Web-дизайнери перевіряють в своїх сайтах кожну сторінку і кожне посилання в декількох різних браузерах. Всі зв'язки усередині вашого сайту ви зможете легко перевірити з допомогою команди Verify Hyperlinks (Перевірити гіперпосилання) або протоколу стану гіперпосилань (Hyperlink Status View) Провідника. Інший хороший спосіб перевірки вашого сайту - це операція Preview In Browser (Попередній перегляд в браузері) у Редакторі. Вона дозволить вам візуально досліджувати вашу сторінку в будь-якому браузері, встановленому на вашому комп'ютері і при різних розмірах вікна. Наприклад, якщо ви зазвичай працюєте в дозволі 1024х768, то ви зможете своїми очима поглянути, як ваша сторінка виглядатиме в дозволі 640х480.</p>
</div>
<div id="nav">
<div class="navhead">
<h2 align="center">НОВИНИ І ОНОВЛЕННЯ</h2>
</div>
<div class="navitem">
<div align="center">
<h3><span class="стиль2">Погода у Львові</span></h3>
<h3>+11° сьогодня</h3>
<h3>-2…+11° завтра</h3>
<h3>+6…+13°</h3>
<h3 class="стиль1">Курси валют станом на 20.10.2013 </h3>
</div>
<table width="136" height="96" align="center" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
<td>покупка</td>
<td colspan="2">продаж</td>
</tr>
<tr>
<td><div><a href="http://news.yandex.ua/quotes/20529/40043.html" title="undefined">USD грн.</a></div></td>
<td>8,17</td>
<td>8,20</td>
</tr>
<tr>
<td><div><a href="http://news.yandex.ua/quotes/20529/40042.html" title="undefined">EUR грн.</a></div></td>
<td>11,12</td>
<td>11,24</td>
</tr>
<tr>
<td><div><a href="http://news.yandex.ua/quotes/20529/40010.html" title="undefined">RUB грн.</a></div></td>
<td>2,53</td>
<td>2,58</td>
</tr>
<tr>
<td><div><a href="http://news.yandex.ua/quotes/20529/40001.html" title="undefined">GBP грн.</a></div></td>
<td>13,07</td>
<td>13,26</td>
</tr>
</table>
</div>
<p></p>
<div class="navhead">
<h2 align="center">Відомості про об'єкт</h2>
</div>
<div class="navitem"><ul><li>Прохання зберегти "Сайт з MLP Design" теги і посилання при використанні цього шаблону. Спасибо.</li></ul>
</div>
</div>
<div class="footer"></div>
</div>
<div id="footer">Мій <a href="http://vk.com/svinarjov">сайт</a> всі права захищені</div>
</body>
</html>
stil.css
body
{ background: #eee url(images/bg.gif) top left no-repeat;
font-family: Arial,Verdana,Sans-serif;
color: #999;
font-size: 8pt;
text-align:center;}
h1
{ background-color: #FFF;
color:#FF9900;
font-size:12pt;
font-weight:bold;
margin-top:0;
margin-bottom:10px;}
h2
{ background-color: #fff;
color:#FF9900;
font-size:10pt;
font-weight:normal;
margin-top:0;
margin-bottom:0;}
ul
{ list-style:none;
margin:0 5px;
padding:0;}
li
{ padding:0 4px 8px 10px;
background: url(images/arw.gif) 0 3px no-repeat;}
a:link, a:visited, a:active
{ background-color: #fff; text-decoration: none; color:#FF9900;}
a:hover
{ background-color: #fff; text-decoration: underline; color:#FFCC99;}
#header
{ height:100px;
width:750px;
margin-left:auto;
margin-right:auto;
border:#CCC 1px solid;
background-color:#FFF;
color:#FF9900;}
#main
{ width: 750px;
margin-top:20px;
margin-left:auto;
margin-right:auto;
border:#CCC 1px solid;
background-color: #FFF;
font-size:9pt;
color:#666;}
#content
{ width:510px;
float:left;
padding:20px;
text-align:justify;}
#nav
{ width:180px;
float:left;
margin-right:5px;
margin-top:20px;}
#footer
{ height:30px;
width:750px;
margin-top:20px;
margin-left:auto;
margin-right:auto;
padding:10px 0;
border:#ccc 1px solid;
background-color: #fff;
font-size:8pt;
color:#999;
text-align:center;}
#footer a:link, #footer a:visited, #footer a:active
{ background-color: #fff; text-decoration: none; color:#999;}
#footer A:hover
{ background-color: #fff; text-decoration: none; color:#ff9900;}
.footer
{ clear: both;
background:#fff;
color:inherit;
height:1px;}
.logo
{ width:200px;
float:left;
text-align:left;
padding:15px 0 10px 15px;
overflow: hidden;}
.menu
{ width:auto;
text-align:right;
font-weight:bold;
font-size:12pt;
padding:35px 15px 0 0;
float: right;
overflow: hidden;}
.left
{ width:250px;
float:left;
margin:10px 15px 10px 0;
text-align:justify;
overflow: hidden;}
.mid
{ width:auto;
padding:10px 0 0 10px;
margin-left:auto;
margin-top:0;
overflow: hidden;}
.navhead
{ width:170px;
height:18px;
padding: 3px 3px 0 5px;
border:#ddd 1px solid;
text-align: left;
font-size:8pt;
background-color:#eee;
color:#666;}
.navitem
{ width:172px;
padding: 15px 3px 0 3px;
border-bottom:#ddd 1px solid;
border-right:#ddd 1px solid;
border-left:#ddd 1px solid;
font-size:8pt;
font-weight: normal;
text-align:justify;}
.img
{ border:0;}
Висновок: під час виконання роботи ознайомився з мовою розмітки гіпертексту HTML та стилями відображення гіпертексту CSS. Самостійно створив макет сайта за допомогою HTML-редактора.
12.06.2015 19:06-
Ділись своїми роботами та отримуй миттєві бонуси!
0%
Оголошення від адміністратора