Подякувати Студентському архіву довільною сумою
Admin
26.02.2023 12:38
Дякуємо, що користуєтесь нашим архівом!
Основи HTML та CSS
Інформація про навчальний заклад
ВУЗ:
Національний університет Львівська політехніка
Інститут:
ІКТА
Факультет:
РТ
Кафедра:
Не вказано
Інформація про роботу
Рік:
2014
Тип роботи:
Звіт до лабораторної роботи
Предмет:
Програмування
Частина тексту файла (без зображень, графіків і формул):
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
НАЦІОНАЛЬНИЙ УНІВЕРСИТЕТ «ЛЬВІВСЬКА ПОЛІТЕХНІКА»
ІКТА
кафедра БІТ
З В І Т
до лабораторної роботи №2
з курсу: “ Веб-програмування ”
на тему: “ Основи HTML та CSS ”
Варіант дизайну 1
Мета роботи
Ознайомлення з мовою розмітки гіпертексту HTML та стилями відображення гіпертексту CSS.
Скріншоти створених сторінок
Сторінка 1
/
/
/
/
/
Сторінка 2
/
Сторінка 3
/
Модифіковані файли index.htm та screen.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" xml:lang="en" lang="en">
<head>
<title>Six Oh Six</title>
<meta http-equiv="content-language" content="en-us" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="author" content="Six Oh Six" />
<meta name="design" content="Sadhana Ganapathiraju" />
<meta name="copyright" content="Copyright (c) 2006 Six Oh Six" />
<meta name="description" content="Description of the site goes here" />
<meta name="keywords" content="seo,rich,keywords,of,the,site,go,here" />
<link rel="stylesheet" type="text/css" media="screen" href="screen.css" />
<!--[if lt ie 7]>
<link rel="stylesheet" type="text/css" media="screen" href="ie-win.css" />
<![endif]-->
</head>
<body>
<div id="header">
<h1><a href="#">Лабораторна робота №2</a></h1></div>
<div id="navigation">
<ul>
<li class="active"><a href="#00">Home</a></li>
<li><a href="#01">Blog</a></li>
<li><a href="#02">Portfolio</a></li>
<li><a href="#03">Articles</a></li>
<li><a href="#04">About</a></li>
<li><a href="#05">Contact</a></li>
</ul>
</div>
<div id="wrapper">
<div id="content-wrapper">
<div id="content">
<div class="post-wrapper">
<h3 class="post-title"><a href="#21" rel="bookmark">Процес розробки Web-сайта</a></h3>
<div class="post">
<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>
</body>
</html>
screen.css
html
{
margin: 0;
padding: 0;
color: #999999;
background-color: #ebebeb;
border-top: 10px solid #cccc99;
font: normal 76% "Trebuchet MS", "Lucida Grande", Verdana, Georgia, Sans-Serif;
}
/* Links */
a:link { text-decoration: none; color: #68839e; }
a:visited { text-decoration: none; color: #97b6d7; }
a:hover, a:active { color: #d36800; }
/* Headings */
h1, h2, h3, h4, h5, h6 { font-weight: normal; margin: 20px 0 10px; }
h1 { font-size: 32px; }
h2 { font-size: 28px; }
h3 { font-size: 24px; }
h4, h5, h6 { font-size: 20px; }
/* Other Html Elements */
pre, blockquote
{
overflow: auto;
color: #779900;
padding: 0 10px;
margin: 20px 30px;
line-height: 1.8em;
background-color: #f5f5f5;
border: 1px solid #e0e0e0;
}
pre:hover, blockquote:hover
{
background-color: #f0f0f0;
border: 1px solid #d0d0d0;
}
pre { padding-top: 10px; padding-bottom: 10px; }
code { color: #779900; font-family: Consolas, Verdana, "Courier New", Sans-Serif; }
ul, ol { line-height: 2.0em; }
ul { list-style-image: url(images/bullet.gif); }
abbr, acronym { font-style: normal; border-bottom: 1px dotted #333333; cursor: help; }
del { text-decoration: line-through; color: #999999; }
ins { text-decoration: none; color: #009977; }
/* Structure */
body
{
width: 824px;
margin: 0 auto;
color: #222222;
}
#header
{
float: left;
width: 100%;
padding-bottom: 20px;
background: #ffffff url(images/bg.png) top left repeat-y;
}
#navigation
{
clear: both;
float: right;
width: 100%;
padding-bottom: 20px;
background: #ffffff url(images/bg.png) top left repeat-y;
}
#wrapper
{
clear: both;
float: left;
width: 100%;
color: #555555;
background: #ffffff url(images/bg.png) top left repeat-y;
}
#content-wrapper
{
width: 60%;
float: left;
}
#content
{
float: left;
padding: 0 10px 10px 30px;
}
#sidebar-wrapper
{
width: 40%;
float: right;
}
#sidebar
{
float: left;
padding: 20px 30px 10px 10px;
}
#footer
{
clear: both;
float: left;
width: 100%;
text-align: center;
background: #ffffff url(images/bg.png) top left repeat-y;
}
#extras
{
float: left;
width: 780px;
color: #444444;
text-align: left;
padding: 0 10px 10px;
margin: 10px 12px 20px;
background-color: #f5f5f5;
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
}
/* Header */
#header h1 { padding-left: 30px; }
/* Navigation */
#navigation ul { list-style-type: none; list-style-image: none; float: right; margin: 0; padding: 0 20px 0 0; }
#navigation li { float: left; }
#navigation li a:link,
#navigation li a:visited
{
float: left;
color: #000000;
display: block;
padding: 5px 10px;
margin-right: 10px;
background-color: #cccc99;
border: 1px solid #68840e;
}
#navigation li a:hover,
#navigation li a:active
{
background-color: #e0e8b9;
}
#navigation li.active a
{
color: #555555;
background-color: #ffffff;
}
/* Wrapper */
#wrapper a:link { font-weight: bold; border-bottom: 1px dotted #68839e; }
#wrapper a:visited { font-weight: bold; border-bottom: 1px dotted #97b6d7; }
#wrapper a:hover, #wrapper a:active { border-bottom: 1px solid #d36800; }
/* Content */
#content .post-title a { border-bottom-width: 0; }
#content .post p.img { float: left; margin: 0 15px 0 0; }
#content .post p.img img { padding: 8px; border: 1px solid #d0d0d0; background-color: #eeeeee; }
#content .post-footer
{
font-size: 90%;
color: #888888;
margin-bottom: 5px;
padding-bottom: 15px;
border-bottom: 1px dotted #999999;
}
/* Sidebar */
.sideblock
{
padding: 5px 20px;
margin-bottom: 20px;
background-color: #f5f5f5;
border: 1px solid #e0e0e0;
}
.sideblock ul { padding-left: 20px; }
.sideblock h3 { margin-top: 5px; font-size: 14px; text-transform: uppercase; }
#sidebar dt { margin: 0; padding-top: 5px; font-weight: bold; color: #666666; }
#sidebar dd { margin: 0 0 5px; padding-bottom: 5px; line-height: 1.8em; }
#sidebar dd a:link { border-bottom-width: 0; font-weight: normal; }
#sidebar dd a:visited { border-bottom-width: 0; font-weight: normal; }
#sidebar dd a:hover, #sidebar dd a:active { border-bottom: 1px solid #cfcfcf; }
/* Extras */
#extras h6 { font-size: 14px; text-transform: uppercase; color: #555555; }
#friends
{
float: left;
width: 150px;
margin-left: 20px;
margin-right: 10px;
}
#links
{
float: left;
width: 275px;
margin-right: 50px;
}
#about
{
float: left;
width: 250px;
margin-right: 20px;
}
#friends ul { padding-left: 20px; }
#links dl, #links dt, #links dd { margin: 0; padding: 0; }
#links dt { font-weight: bold; padding-top: 5px; }
#links dd { margin-bottom: 5px; padding-bottom: 5px; border-bottom: 1px dotted #999999; }
Висновок: під час виконання роботи ознайомився з мовою розмітки гіпертексту HTML та стилями відображення гіпертексту CSS. Самостійно створив макет сайта за допомогою HTML-редактора, а також закріпив навички роботи створення веб сторінки, здобутих під час виконання лабораторної роботи №1 (створення таблиці).
31.05.2014 13:05-
Ділись своїми роботами та отримуй миттєві бонуси!
0%
Оголошення від адміністратора