Логотип сайта поддержки пользователей САПРО сайте поддержки пользователей САПР Translate to:

Полезные советы по созданию WEB-сайтов

Ткаченко В.Б.
При копировании статьи
ссылка на источник обязательна.

С 1998 года я занимаюсь поддержкой своего сайта посвященного автоматизации проектирования - http://www.cad.dp.ua/ . Сайт в настоящее время является хорошо известным в кругах людей, интересующихся САПР. В данной статье я хочу дать несколько полезных советов по созданию WEB-сайтов на основании собственного опыта.

С чего начать

Прежде всего хочу сделать акцент на том, что если вы хотите чтобы ваш сайт выглядел не дилетантски, вам необходимо изучить язык HTML хотя-бы на уровне понимания принципов его работы. Простое использование для создания Web-страниц визуальных редакторов типа FrontPage не только сделает ваш сайт довольно громоздким (если убрать из страницы, сделанной в FrontPage избыточную информацию, ее размер уменьшится в 2-3 раза), но так же может привести к его некорректному отображению, причин которого вы не сможете понять. Литература по HTML широко доступна в Интернет, один из наиболее объемных ресурсов по этой тематике - сайт http://www.citforum.ru. Здесь вы можете найти полезные материалы не только по Web-программированию, но и по базам данных, локальным сетям, "классическим" языкам программирования, и многое другое. Так же нам понадобится специфический HTML-редактор, который бы позволил как редактировать HTML-код, так и просматривать результат, а так же осуществлять проверку правильности кода. В качестве такого редактора я бы порекомендовал Micromedia HomeSite (http://www.adobe.com/products/homesite/).

Основные принципы Web-дизайна

При разработке Web-сайтов на мой взгляд необходимо придерживаться следующих принципов:

Минимизация размера.

Желательно не перегружать страницы графикой - банерами, картинками, кнопками. Все это увеличивает время загрузки страницы, и пользователи имеющие плохую связь с вашим сайтом не смогут нормально его просматривать.

Совместимость с браузерами.

Во времена "войны броузеров", когда за звание эталонного броузера боролись Netscape Navigator и Internet Explorer эта проблема стояла довольно остро. Сайт, нормально просматриваемы в одном броузере мог быть абсолютно не читаем в другом (в частности из за наличия специфических HTML-директив, поддерживемых только определенными броузерами), что вынуждало Web-дизайнеров следовать спецификации HTML, поддерживаемой всеми броузерами. В настоящее время Internet Explorer одержал безусловную победу (в часности, на моем сайте 93% посещений приходится на IE, 2% на NN и оставшийся 1% на другие броузеры). Тем не менее не желательно пренебрегать этими 3%, почему я советую придерживаться общепринятой в настоящее время спецификации HTML 4.0

Простая, интуитивная навигация по сайту.

Важно, чтобы ища необходимую информацию посетители не заблудились на вашем сайте. Для этого я бы рекомендовал придерживаться иерархической организации сайта по модели: заглавная страница -> разделы сайта->подразделы, оставляя возможность в любом подразделе вернутся на заглавную страницу или переместится в другой раздел. Гипертекстовые ссылки также желательно делать в наиболее интуитивно понятных местах, и излишне не декорировать их.

Использование CSS (таблицы каскадных стилей)

Среди новшеств, которыми за последнее время обогатился HTML, таблицы каскадных стилей (далее CSS) занимают особое место. С помощью CSS можно описать внешний вид любого элемента Web-страницы, осуществить стандартизации дизайна группы страниц, а то и всего сайта, а так же реализовать некоторые дизайнерские приемы, не доступные в стандартном HTML. Существует три метода описания каскадных стилей:

Пример стиля, определенного в HTML-тэге:

<p style="color :red; text-align:center;"> Переопределенный стилем текст</p>

Данный метод действует только в приделах одного тэга, и как правило применяется если мы хотим применить к тэгу специфический стиль.

Если стилевые элементы используется в HTML-документе неоднократно, их можно включить в заголовок документа, как это показано в примере ниже:

<head>
…
<style type="text/css">
<!--
.header { text-align:center; font-size:27pt;}
.red {color:red;}
-->
</style>
</head>

Теперь для того чтобы присвоить данные стили HTML-тэгу используется директива class:

<p class=header> Текст написан стилем Header</p>
<p class=red> Текст написан красным цветом</p>

Третий, и на мой взгляд наиболее удобный способ заключается в выносе всех определенных стилей во внешний файл (с расширением .CSS), на который делается ссылка в каждом HTML-документе, использующем эти стили:

<head>
…
<link rel="stylesheet" type="text/css" href="mystyle.css" title="Mystyle">
…
</style>
</head>

Данный метод позволяет назначать определенную группу стилей всему сайту, что позволяет не только стандартизировать его дизайн, но так же так же быстро его менять (естественно, что проще отредактировать один файл, чем несколько десятков). Файл описания стилей представляет собой простую совокупность определений стилей. Ниже перечислены основные способы их определения:

- простой (один HTML-тэг соответствует одному стилю):

H1 {color:red; size:20pt;}

В этом случае все элементы текста, помеченные тэгом H1 будут красного цвета, размером 20.

- методом определения класса (в этом случае стиль HTML-тэга зависит от класса, ему назначенного):

H1.red {color:red; size:20pt;}
H1.blue {color:blue; size:24pt;}

В этом случае все тэги <H1 class="red"> будут описывать текст красного цвета, размером 20, а тэги <H1 class="blue"> - синего, размером 24.

- методом контекстуальной зависимости (стиль назначается для определенного сочетания тэгов):

P EM {color:silver}

Если внутри тэга <P> встретится тэг <EM>, вложенный в него текст будет серебряного цвета.

Довольно важной стороной CSS является возможность определение псевдоклассов и псевдоэлементов. Псевдокласс представляет собой состояние тэга "ссылка" (<a href="">), возможными состояниями которого могут быть:

Определение псевдокласса позволяет установить дизайн ссылки в различных ее состояниях. Примеры:

a:link, a:visited {color:blue} 
a:active {color:red}
a:hover {text-decoration:none}

В приведенном примере все ссылки будут синими, при нажатии они становятся красными, при подведении курсора мыши к ссылке подчеркивание исчезнет.

Псевдоэлемент определяет состояние первой строки (first-line) или первого символа (first-letter) текста.

Рассмотрим теперь прикладное применение CSS. В примере ниже описано создание горизонтального меню сайта в виде таблицы, при наведении курсора на любую его ячейку она выделяется другим цветом и курсор принимает вид руки (режим ссылки):

Файл mysite.css (описание стилей для html-документов):


/* цвет фона для html-документа, описан с помощью класса ostov*/
body.ostov {
	background-color : #FFF5EE;
}

/* описание ячейки таблицы-меню - цвет фона, размер ячейки и выравнивание, описан с помощью класса menu_v */
td.menu_v { 
	background-color : White;
       height : 28px;
	width : 125px;
	text-align : center;
}

/* описание состояния ссылки с помощью класса button_s1 */
a.button_s1 {
width: 100%;
height : 100%;
	text-align : center;
	line-height : 28px;
	font-size : 60%;
}

/* описание стиля текста в ссылке методом контекстуальной зависимости */
td.menu_v a.button_s1 {
text-decoration : none;
	font-family : Arial;
	color : black;
	font-size : 60%;
}

/* описание состояния ссылки при наведении курсора, в случае применения класса button_s1 */
a.button_s1:hover {
	background-color : #FFE4C4;
    	cursor : hand;
}

Файл test.html (применение описания стилей в html-файле):


<html>
<head>
<title>Тестовый сайт</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">
<link rel="stylesheet" type="text/css" href="mysite.css">
<!-ссылка на файл описания стилей -->
</head>
<body class="ostov">
<!- указан цвет фона -->
<table align="center" cellspacing="0" cellpadding="0" border="1" width="750">
<tr>
<td class="menu_v"><a href="about.php" class="button_s1">О сайте</a></td>
<!- применение классов menu_v и button_s1 для создания меню сайта -->
<td class="menu_v"><a href="news.php" class="button_s1">Новое на сайте</a></td>
    <td class="menu_v"><a href="program.php" class="button_s1">Мои программы</a></td>
    <td class="menu_v"><a href="doc.php" class="button_s1">Моя документация</a></td>
    <td class="menu_v"><a href="links.php" class="button_s1">Мои ссылки </a></td>
    <td class="menu_v"><a href="guestbook.php" class="button_s1">Гостевая кника</a></td>
</tr>
</table>

</body>
</html>

Получившиеся меню сайта, с выбранным мышью пунктом показано на рисунке ниже:

Как и в случае с HTML, документацию по CSS можно найти на сайте http://www.citforum.ru , кроме этого я бы порекомендовал редактор для стилей - TopStyle (http://www.newsgator.com/). Его использование позволяет ограничится базовыми знаниями CSS (к примеру, в объемах описанных выше). Редактор сам предлагает варианты возможных свойств для каждого стиля, а так же позволяет просмотреть результат в окне просмотра. TopStyle Lite входит в стандартную поставку HTML-редактора Macromedia HomeSite.

Использование PHP

PHP или иными словами PHP hypertext processor - встраиваемый в html язык сценариев, существенно расширяющий возможности стандартного html. К возможностям, предоставляемым PHP прежде всего можно отнести возможность динамической генерации страниц, что удобно, к примеру при создании собственной гостевой книги или генерации сайта по готовому шаблон, или для обработки форм. Преимуществом PHP по сравнению с другими существующими языками сценариев - к примеру, Perl или CGI является простота и доступность. Кроме этого не все провайдеры разрешают своим пользователям доступ к Perl или CGI, в отличии от возможность запуска PHP-сценариев. Существует так же возможность использования сценариев написанных на языке Java, но так как эти сценарии должны выполняться на компьютере клиента, их надежность значительно ниже (нет 100% уверенности, что Java на компьютере клиента настроена правильно).

Описание всех возможностей PHP из-за своего объема выходит за рамки данной статьи, я дам только несколько примеров использования возможностей PHP в Web-дизайне, а также описания средств отладки и тестирования PHP-сценариев.

Документацию по PHP можно загрузить в Интернет с уже упоминавшегося сайта http://www.citforum.ru , кроме этого я бы порекомендовал специальный PHP-редактор DzSoft PHP Editor, который можно загрузить с сайта http://www.dzsoft.com/ , кроме этого вам понадобится PHP-среда для Windows, что позволит вам тестировать PHP-приложения прямо на вашем компьютере. PHP-среду можно загрузить с сайта http://www.php.net/ .

Прежде всего следует проверить, работает ли на вашем сайте PHP. Создадим файл test.php со следующим содержанием:

<html>
<title>
PHP test
</title>
<body>
<?php  print "Hello word!";?>
</body>
</html>

Загрузим его на сайт и наберем ссылку на него в окне браузера. Если у нас отобразится экран с надписью Hello word! , значит PHP на сервере установлен.

С описанного выше примера начнем знакомство с PHP. Файлы с PHP-сценариями должны иметь расширение .php . Сами php-сценарии должны выделяться директивами <?php (начало сценария) и ?> (конец сценария). Помимо самих сценариев .php могут включать стандартные html - директивы. Ниже рассмотрим несколько простых примеров использования PHP:

Вывод даты и времени в заголовке html-страницы.

Еще один простой пример использования PHP, также показывает использование переменных.


<?php
//Присвоения названия странице
$site_title = "test site";
//Получение текущей даты в формате "месяц, день, год"
$current_date = (date("F d, Y"));
?>
<html>
<head>
  <!-Вывод названия страницы и текущей даты в заголовке -->
<title>
<?php print $site_title; print " "; print $current_date; ?>
</title>
</head>
<body>

любой html-код

</body>
</html>

Результат можно посмотреть на рисунке ниже:

Генерация HTML-страниц по заданному шаблону.

Одной из важных возможностей, которые предлагает PHP, является возможность динамической генерации html-страниц по заданному шаблону. К примеру, у нас есть определенный заголовок, который должен присутствовать на всех страницах сайт, и определенная завершающая часть. Чтобы не копировать его во все страницы сайта, мы можем создать файл шаблонов, и с помощью средств PHP собирать страницы из заголовка, соответствующего содержания и завершающей части по мере обращения пользователей. Для этого создадим файл template.tpl , где будут храниться наши шаблоны. Каждый из шаблонов оформим в виде функции PHP, как показано ниже (в качестве основы возьмем описанный выше файл test.html):

<?php
// Файл template.tpl

function show_header() { 
// заголовок html-файла
?>
<html>
<head>
<title>Тестовый сайт</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">
<link rel="stylesheet" type="text/css" href="mysite.css">
<!-ссылка на файл описания стилей -->
</head>
<body class="ostov">

<?php

}

function show_menu() {
// CSS-меню
?>
<table align="center" cellspacing="0" cellpadding="0" border="1" width="750">
<tr>
<td class="menu_v"><a href="about.php" class="button_s1">О сайте</a></td>
<!- применение классов menu_v и button_s1 для создания меню сайта -->
<td class="menu_v"><a href="news.php" class="button_s1">Новое на сайте</a></td>
    <td class="menu_v"><a href="program.php" class="button_s1">Мои программы</a></td>
    <td class="menu_v"><a href="doc.php" class="button_s1">Моя документация</a></td>
    <td class="menu_v"><a href="links.php" class="button_s1">Мои ссылки </a></td>
    <td class="menu_v"><a href="guestbook.php" class="button_s1">Гостевая кника</a></td>
</tr>
</table>

<?php

}

function show_end() {
// Копирайт страницы
?>
<hr>
<I> Copyright by Victor B. Tkachenko, 2003</I>
<hr>
</body>
</html>
<?php 
}
?>

Обратите внимание на то, что указатели на сценарий <?php и ?> ставятся не включая html-код.

Теперь создадим файл, который будет использовать наш шаблон и назовем его test.php :

<?php
// загрузить функции
include("template.tpl");

// вывести заголовок
show_header();

// вывести меню сайта
show_menu();
?>

<!- Здесь можно разместить html-код, соответствующий данной странице -->

<?php
// вывести копирайт
show_end();
?>

Выложим оба файла на сервер и откроем test.php в Internet Explorer, а затем просмотрим его в виде HTML (меню "Вид", пункт "В виде HTML"). HTML-код страницы будет содержать все определенные нами включения и выглядеть как обычный HTML-документ.

Загрузка HTML-файла по значению переменной.

Предположим нам нужно выводить определенный текст в зависимости от того, какой сейчас месяц (к примеру, Гороскоп). Модифицируем немного предыдущий код, введя получение названия текущего месяца, и функцию включения html-файла, с именем, соответствующем текущему месяцу:

<?php
// загрузить функции
include("template.tpl");

// вывести заголовок
show_header();

// вывести меню сайта
show_menu();
?>

<H1>Гороскоп на месяц:</H1>

<?php

// получит текущую дату
$current_m = date("F");

//вклчить html с именем текущего месяца
include($current_m.".html");

// вывести копирайт
show_end();
?>

Ниже показана сгенерированная этим скриптом страница.

Я надеюсь, что описанные выше рекомендации по созданию сайтов, а так же примеры использования новых Web-технологий помогут вам при создании собственных страниц в Интернет.



Copyright © Сайт поддержки пользователей САПР by Victor Tkachenko