Самостійна робота №5 Порівняльний аналіз та вибір програм для створення сайтів Завдання

1. Відшукати у мережі інтернет програми для створення сайтів. Вибрати три програми для вивчення інтерфейсу, функціональних можливостей та порівняльного аналізу з можливістю установки цих програм на комп'ютер.

2. Зкачати та уcтановити програми на комп'ютер.

3. Вивчити особливості інтерфейсу та функціональні можливості програм:

• ступінь автоматизації увеження коду та візуальності;

• наявність готових шаблонів;

• наявність допомоги, підказок;

• зручність меню команд та панелей інструментів;

• підтримка Html, Css, Dhtml, Javascript, Flash, SQL, PHP, ASP тощо;

• сумісність з іншими прорамами;

• платний (ціна)/безкошиовний та інше.

4. Оцінити зручність створення веб-сторінки в кожному з редакторів.

5. Вибрати програму для подальшого використання, обгрунтувавши свій вибір.

Самостійна робота №6 Робота з колонками та списками на веб-сторінках Довідкові відомості

Двоколонні модульна сітка досить часто застосовується на сайтах, при цьому, як правило, в одній колонці розташовується основний матеріал (текст статті, наприклад), а в другій - посилання на розділи сайту і інша інформація. Для створення подібного макету таблиці досить зручні - кожна клітинка виступає в якості окремої колонки, що дозволяє легко регулювати різні параметри документа.

Ширина колонок

Для початку розглянемо найпростіший варіант, коли ширина лівої колонки жорстко задана в пікселах, а ширина правої колонки варіюється в залежності від розмірів вікна браузера. Для цього потрібно задати загальну ширину всієї таблиці у відсотках через атрибут width тега <table> і для першого осередку встановити її ширину в пікселах або відсотках також за допомогою атрибута width, але вже для тега <td>

Приклад. Ширина колонки в пикселах

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Две колонки</title>

</head>

<body>

<table width="100%" cellspacing="0" cellpadding="5">

<tr>

<td width="200" valign="top">Левая колонка</td><td valign="top">Правая колонка</td>

</tr>

</table>

</body>

</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Две колонки</title>

</head>

<body>

<table width="100%" cellspacing="0" cellpadding="5">

<tr>

<td width="200" valign="top">Левая колонка</td><td valign="top">Правая колонка</td>

</tr>

</table>

</body>

</html>

Списки надають зручну можливість представлення інформації в документах.

Елементи списків всіх типів мають відступ від лівої межі екрана.

Тип	Теги списку Теги елементів
Нумерований	<OL>…</OL>	<LI>…</LI> -	елемент списку
Маркірований	<UL>…</UL>	<LI>…</LI> -	елемент списку
Список описів	<DL>…</DL>	<DD>…</DD> -	назва терміну

<DT>…</DT>- визначення терміну

За замовчуванням елементи впорядкованого списку нумеруються цілими числами, починаючи з 1. До тега нумерованого списку <OL> існує атрибут TYPE. Встановлюючи TYPE рівним “ А”, “ а”, “ І”, “ і”, можна змінити схему нумерації на великі літери, малі літери, великі або малі римські цифри відповідно.

Атрибут START дозволяє задавати початкове значення для нумерації (за замовчуванням START=1, але можна вказати будь-яке додатне число).

Атрибут TYPE тега <UL> дозволяє змінювати вигляд маркера TYPE=disk - маркер має вигляд диска;

TYPE=circle - маркер має вигляд кола; TYPE=square - маркер має вигляд квадрата.

ПРИКЛАД (нумерований список)

Файл у форматі HTML:

<HTML>

<HEAD>

<TITLE>Моя перша HTML-сторінка</TITLE> </HEAD>

<BODY>

<P ALIGN=CENTER>

<B>УКРАЇНСЬКА МИНУВЩИНА </B><BR> <I>Етнографічний довідник </I><BR>

<OL>

<LI>ТРАДИЦІЙНЕ ЖИТЛО</LI> <LI>НАРОДНІ ЗАНЯТТЯ</LI> <LI>УКРАЇНСЬКА КУХНЯ</LI> <LI>НАЦІОНАЛЬНЕ ВБРАННЯ</LI>

</OL>

</P>

</BODY>

</HTML>

Відображення файла програмою-броузером:

ПРИКЛАД (маркерований список)

Файл у форматі HTML:

<HTML>

<HEAD>

<TITLE>Моя перша HTML-сторінка</TITLE> </HEAD>

<BODY>

<H1 ALIGN=CENTER>УКРАЇНСЬКА МИНУВЩИНА </H1><BR> <H2 ALIGN=CENTER> Етнографічний довідник </H2><BR>

<P ALIGN= CENTER><B>УКРАЇНСЬКА КУХНЯ </B> </P>

<UL>

<LI>ПОВСЯКДЕННА Й СВЯТКОВА ЇЖА ТА НАПОЇ</LI> <LI>РЕЖИМ І СЕЗОННІСТЬ ХАРЧУВАННЯ, ХАРЧОВІ ЗАБОРОНИ

</LI>

<LI>ОБРЯДОВА ЇЖА</LI> </UL>

</BODY>

</HTML>

Відображення файла програмою-броузером:

ПРИКЛАД (список описів):

Файл у форматі HTML:

<HTML>

<HEAD>

<TITLE>Моя перша HTML-сторінка</TITLE> </HEAD>

<BODY>

<H1 ALIGN=CENTER>УКРАЇНСЬКА МИНУВЩИНА

</H1><BR>

<H2 ALIGN=CENTER>Етнографічний довідник</H2><BR> <P ALIGN=CENTER><B> ОБРЯДОВА ЇЖА</B> </P>

<DL>

<DT><B>ПАСКА</B></DT>

<DD>весняний обрядовий хліб, який готували до Великодня. Дуже здобне вчинене тісто на яйцях, маслі, сметані, олії, цукрі добре вимішували і ставили у тепле місце сходити.</DD>

<DT><B>КУТЯ</B>

<DD>подається на стіл у Святий вечір, у переддень Різдва. На Правобережжі кутю готували з пшениці, а на сході - з ячменю і заправляли тертим маком, горіхами, медом і узваром. </DD>

</DL>

</BODY>

</HTML>

Відображення файла програмою-броузером: