- •Разработка web-узла для электронного бизнеса
- •Москва 2004
- •Глава_1. Установка и настройка Web-сервера под Windows 2000
- •Назначение iis
- •2. Установка iis
- •1.3. Настройка iis (Администрирование служб iis)
- •Определения
- •2.2. Простая Web-страница
- •2.3. Простой Web-узел
- •2.4. Дизайн Web-страниц
- •2.5. Интерактивный Web-узел
- •Глава_3. Технология организации электронного магазина
- •3.1. Схема данных.
- •3.2. Коды Web-страниц
- •Глава 4. Оценка эффективности проекта Web-узла
- •1.1. Назначение iis ……………………………………………………………………. 3
2.4. Дизайн Web-страниц
Для лучшей привлекательности Web-страниц тщательно продумывается вид, расположение и цветовая палитра деталей страниц (текста, линий, рисунков, таблиц, клипов и др.). В языке HTML имеются для этого разнообразные средства. Рассмотрим некоторые из них.
<font> тег, управляет гарнитурой, размером и цветом шрифта; главные атрибуты
тега: color, size;
<center > тег, выравнивает по центру текст или другую информацию;
<table> тег, определяет таблицу; имеет атрибуты: align, background, bgcolor,
border, bordercolor, cellpadding, cellcpacing, height, width и др.;
<th> тег, определяет шапку таблицы;
<tr> тег, определяет строку в таблице;
<td> тег, определяет ячейку данных в таблице;
<font> тег, выделяет раздел HTML-документа, предназначенный для получения
информации от пользователя через формы; имеет атрибуты: action, method
(get или post), name и др.;
<input> тег, создает объект ввода, используемые в форме, имеет атрибуты: align,
bottom, name, size, type, value;
<frame> тег, содержит имя файла, применяемого для заполнения фрейма (кадра);
атрибуты: src, name, scrolling.
После добавления элементов Web-дизайна страницы index1.htm и hobby.htm принимают следующий вид.
Страница index1.htm
<html>
<head>
<title> Страница index1.htm </title>
</head>
<body background="images/j0143751.gif">
<h1> Web-узел Сидорова С. </h1>
<p><font FASE="Arial" COLOR="Red" SIZE="6"><i>
<b>Обещаю учиться на отлично!</b></i></font></p><BR>
<A href="hobby.htm">
<img src="turqball.gif" border=0
alt="hobby" width="12" height="16">
Мои увлечения</A>
</body>
</html>
Страница hobby.htm
<html>
<head>
<title> Страница hobby.htm </title>
</head>
<body background="images/j0143751.gif">
<h1> Web-узел Сидорова С. </h1>
<h2> Мои увлечения <img border="0"
src="images/bd05680.gif" width="79" height="60">
</h2><BR>
<table background="woodgran.gif" bordercolor="#0000FF"
border="5" cellpadding="6">
<tr bgcolor="Yellow">
<td><b>Номер</b></td>
<td><p align="center"><b>Название</b></p></td>
</tr>
<tr>
<td><p align="center"><b>1</b></p>
</td>
<td><b>Путешествия</b></td>
</tr>
<tr>
<td align="center"><b>2</b></td>
<td><b> Web-design </b></td>
</tr>
<tr>
<td align="center"><b>3</b></td>
<td><b>Футбол </b></td>
</tr>
</table><BR>
<A href="index.htm">
<img src="homeoff.gif"
alt="На страницу index1.htm" border="0"
width="67" height="23">Назад</A>
</table>
</body>
</html>
Пояснения:
<body background="images/j0143751.gif"> строка устанавливает с помощью файла j0143751.gif рисунок фона страницы;
<p><font FASE="Arial" COLOR="Red" SIZE="6"><i><b>Обещаю учиться на отлично!</b></i></font></p><BR> эта запись определяет вид штифта;
<table background="woodgran.gif" bordercolor="#0000FF"
border="5" cellpadding="6"> эта запись определяет цвет фона таблицы, цвет рамки, ширину рамки (5 пунктов) и расстояние содержимого ячеек от границ рамки (6 пунктов).
Цвет фона страницы, рамки и других элементов может быть задан его наименованием (например, Red) или группой шестнадцатеричных цифр (по две цифры для обозначения интенсивности каждого основного цвета: красного, зеленого и синего); смешение основных цветов в разной их насыщенности дает все остальные цвета.
Примеры задания цветов.
#FF0000 Red – красный,
#00FF00 Green – зеленый,
#0000FF Blue – синий,
#FFFFFF White – белый,
#000000 Black – черный,
#FF00FF Magenta – лиловый,
#FFFF00 Yellow – желтый,
#00FFFF Cyan – светло-голубой,
#FF7F00 Orange – оранжевый,
#2F4F2F Dark Green – темно-зеленый,
#C0C0C0 Gray – серый,
#CD7F32 Gold – золотой.
Результаты просмотра в браузере страниц index1.htm и hobby.htm (в окончательной редакции) приведены на рис. 2.5.3 и рис. 2.5.4 соответственно.