Отправляет email-рассылки с помощью сервиса Sendsay

Создание WEB - сайтов

  Все выпуски  

Создание WEB - сайтов


Создание WEB - сайтов. Выпуск 1.

Приветствую Вас, мои подписчики! Я очень рад выпустить в свет первый номер моей рассылки "Создание WEB - сайтов. В рассылке будет уделено внимание проектированию сайтов, их созданию, реализации конкретных алгоритмов на языке PHP (например, создание системы авторизации или создание поиска по сайту), возможно также будет рассмотрена такая не менее полезная тема, как раскрутка и продвижение сайтов.

В течении нескольких номеров мы с вами будем создавать сайт, соблюдая все этапы разработки:

  •  анализ идей
  •  создание структуры сайта
  •  верстка сайта
  •  программирование сайта
  •  оформление сайта
  •  тестирование сайта

Разберем каждый этап подробнее:

Анализ идей

Я долго думал, созданием какого типа сайта нам с Вами заняться. Писать домашнюю страничку – слишком просто, начинать с портала – сложно. Поэтому я остановился на создании небольшого новостного сайта. Что же мы хотим на нем видеть?

При обсуждении идей насчет будущего сайта желательно отказаться от конкретных технических моментов типа: «для хранения новостей будем использовать три связанных таблицы MySQL». Данное предложение лучше будет переформулировать следующим образом: «на сайте должно быть предусмотрено долговременное хранение новостей».

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

Мне кажется разумным сделать так, чтобы к каждой новости зарегистрированный посетитель нашего сайта мог оставить комментарий, свое мнение. Поэтому также требуется создать систему регистрации и разделить всех посетителей на три типа – гость, зарегистрированный посетитель и администратор, обладающий наибольшими правами.

Для большей активности посетителей, думаю, стоит сделать систему баллов для каждого пользователя. Добавил комментарий – плюс один балл, оставил нецензурное сообщение – минус пять баллов. При этом на главной странице можно показывать рейтинг посетителей.

При большом количестве новостей на сайте будет трудно найти информацию о том или ином событии, не помня, когда оно произошло. Именно поэтому стоит реализовать поиск по ключевым словам. Допустим, введя слово «Россия», получим все новости, связанные с нашим государством. Очень удобно!

Еще сделаем раздел ссылок на другие новостные сайты – для пользователей, которым новости на нашем сайте показались неполными или некорректными.

Также я предлагаю для нашего сайта создать небольшую CMS - систему управления контентом сайта (читай – движок сайта), доступ к которой будут иметь только администраторы. В ней предусмотрим возможность добавления и удаления новостей, а также удаление нецензурных комментариев посетителей сайта.

Создание струтуры сайта

Структура сайта представляет собой перечень основных страниц, входящих в сайт. Давайте перечислим, какие страницы мы будем создавать:

  • index.php – Главная страница сайта. Здесь будут располагаться новости.
    • search.php – Страница поиска новостей.
    • registration.php – Страница для регистрации посетителей.
    • link.php – Страница со ссылками на другие новостные сайты.
  • admin.php – Страница для входа в CMS.
    • ind_admin.php – Главная страница CMS.
      • news.php – страница для работы с новостями
      • user.php – страница для работы с зарегистрированными пользователями, их удаление, поощрение или, наоборот, наказание в виде лишения определенного количества баллов.
Верстка сайта

Верстка сайта – процесс разбиения страницы на отдельные блоки, логическое разбиение страницы. Не стоит путать верстку с оформлением сайта. При верстке мы лишь формируем отдельные блоки и примерно описываем, каким образом должна выглядеть в них информация.

Для верстки нашей страницы мы будем применять связку xhtml + CSS (т.н. каскадные таблицы стилей). Я надеюсь, что вы знакомы с html, т.к. на его синтаксисе я акцентировать внимание не буду.

Существуют два основных типа верстки – это верстка при помощи таблиц (тегов <table>) и при помощи блоков (<div>). У каждого из этих методов есть свои плюсы и свои минусы. При табличной – более простой процесс верстки и хорошая поддержка браузерами, при этом большая загруженность кода и меньшая скорость отображения элеметов, нежели при верстке блоками. При блочной верстке – большая скорость загрузки страницы, лучшая структурированность кода, при этом плохая поддержка со стороны браузеров и более сложный процесс верстки.

Мы пойдем альтернативным путем: основной макет сверстаем при помощи таблиц, а потом, если понадобится, задействуем блочную верстку. Как мне кажется, это наиболее приемлемый вариант верстки.

Бытует такое мнение, что страницу следует верстать только в блокноте. Я не сторонник этого, считаю, что в блокноте сверстать сложную страницу практически невозможно, и поэтому использую различные редакторы. Могу посоветовать отличный редактор – Adobe Dreamweaver (в прошлом – Macromedia Dreamweaver) . В нем можно и верстать страницы при помощи html, и создавать CSS, и писать, хотя это не очень удобно, программную часть сайта на том же PHP.

Итак, приступим. Общий вид сайта я себе представляю примерно так:

  1. логотип сайта, слоган, название
  2. ссылки на страницы сайта
  3. TOP зарегистрированных пользователей
  4. основное содержимое
  5. реклама
  6. место для описания авторских прав, copyrigth

Сверстаем макет.

<!—Таким образом выделяются комментарии, которые не обрабатываются браузером -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<!—в charset устанавливаем необходимую нам кодировку -->

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

<!—title - заголовок страницы -->

<title>Новостной сайт</title>

</head>

<body>

<!—Задаем таблицу с шириной в 90% окна, выровненную по центру, без расстояния между ячейками, и без внешней границы -->

<table width="90%" align="center" cellpadding="0" cellspacing="0" border="0">

<!—tr - новая строка -->

<tr>

<!—td – новый столбец colspan – объединяет сразу три столбца в один -->

<td colspan="3">Здесь будет логотип</td>

</tr>

<tr>

<td colspan="3">Здесь будут ссылки</td>

</tr>

<tr>

<!—Задаем ширину в 20% от ширины всей таблицы -->

<td width="20%">TOP пользователей</td>

<td width="60%">Основной текст</td>

<td width="20%">Реклама</td>

</tr>

<tr>

<td colspan="3">copyrigth &copy;</td>

</tr>

<!—Конец таблицы -->

</table>

</body>

</html>

Послесловие

На этом первый номер выпуска подходит к концу. Я очень надеюсь на то, что из него вы узнали для себя много полезного и интересного. Если у Вас появились какие - либо вопросы ко мне, если Вам что - либо неясно из изложенного материала, пишите мне на e-mail.Также пишите, если вы хотите узнать о чем - нибудь, о чем я не сказал, возможно, в следующем номере я напишу про это.

Кстати, о следующем номере. Я постараюсь его выпустить через неделю. Если вдруг не успею, то через две недели новый номер появится точно!

Всего Вам доброго, мои читатели!


В избранное