Сайтостроительство (8)

PHP-кодинг (25)

Веб-дизайн (9)

DHTML/JavaScript (8)

Подкастинг (1)

Безопасность в PHP (3)

Секретный раздел

Карта блога

Регистрация пользователей на PHP+MySQL

Скрипт гостевой книги с красивым дизайном

Галерея на jQuery

Простая система регистрации пользователей на сессиях

Галерея на php+jquery

Форма обратной связи с защитой типа капча

Шаблоны запросов и placeholders

Быстрое перенаправление средствами php

Flash плеер для вашего сайта

Сортировка столбцов в таблице на php+mysql

История развития Всемирной паутины

Кэширование страничек на стороне сервера

Генератор паролей

DataLife Engine скачать

Ссылки для начинающих веб-разработчиков

За весь период

За 2010-11

За 2009-06

За 2009-05

За 2009-04

За 2009-03

За 2009-02

За 2008-08

Бегун контекстная реклама

Ruseller видеоуроки

Letitbit файлообменник

Tak.Ru $$$ вебмастеру

WMmail почтовые рассылки

WMlink продажа трафика

Sape.Ru продажа ссылок

Главная » Веб-дизайн

Практический пример - завершенный сайт

Демо версия находится здесь. А исходники можете скачать отсюда.

наш проект предполагает следующую логическую структуру:

  • Сайт о сайтах(index.html; главная страница)
    • Концепции(concept/index.html)
      • Критерии качества сайтов(concept/quality.html)
      • Технологическая цепочка создания сайтов(concept/stages.html)>
    • Технологии(tech/index.html)
      • Расширяемый язык разметки гипертекста XHTML(tech/xhtml.html)
      • Каскадные листы стилей CSS(tech/css.html)
    • Нюансы(nuances/index.html)
      • Организация пространства страницы(nuances/layout.html)
      • Проектирование систем навигации(nuances/nav.html)
    • О проекте(about/index.html)
    • Карта сайта(map/index.html)

Элементы второго уровня этого списка отражают "магистральные" разделы сайта, названия которых отражены в главном меню навигации.

За основу сайта взяли "резиновый" шаблон с фиксированным по ширине вертикально ориентированным навигационным блоком. Будем использовать "подложку" белого цвета для содержательной части страницы, а пустующую полоску окна браузера (возникающую в случае, когда все содержимое страницы умещается в окне без вертикальной прокрутки, и "подвал" не дотягивает до нижней границы окошка) заполним фоновой текстурой.

Лист стилей будет аппаратно-зависимым. Помимо экранной версии для настольных компьютеров и ноутбуков, мы реализуем варианты представления контента для "наладонников" и для вывода на печать. Для связи листа стилей с XHTML-документами мы будем использовать директиву @import.

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


/* Правила для экранной версии представления данных */
@media screen {
  /* Общие установки для страницы */
  html, body {
    margin: 0px;
    padding: 0px;
    border: 0px;
  }
  body {
    color: #000;
    background: #999 url(images/bg_page.gif) scroll;
    font-family: Georgia, "Times New Roman", Times, serif;
  }

  /* "Подложка" для всей страницы */
  #carrier {
    width: 100%;
    background: #fff;
  }

  /* Шрифт для "шапки", меню навигации, заголовков второго уровня в основном тексте и "подвала" */
  #header, #menu, #text h2, #footer {
    font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  }

  /* Общие правила оформления "шапки" и "подвала" */
  #header, #footer p {
    color: #fff;
    background: #369;
    padding: 10px 20px;
    margin: 0px;
  }

  /* Представление "шапки" */
  #header {
    font-size: 250%;
    border-bottom: solid 5px #69c;
  }

  /* На внутренних страницах сайта титульная надпись в "шапке"
     выступает в качестве ссылки на главную страницу. Для этой
     ссылки задаются такие правила, чтобы она визуально была
     неотличима от заголовка без ссылки */
  #header a:link, #header a:visited, #header a:hover, #header a:active {
    color: #fff;
    text-decoration: none;
  }

  /* "Подложка" для навигационного меню. Ширина области навигации
      постоянна во всех браузерах и составляет 200 пикселей */
  #menucarrier
  {
    width: 200px;
    margin-bottom: 20px;
    float: left;
    background: #fff0cc url(images/bg_menu.gif) center repeat-y scroll;
  }

  /* Собственно блок навигации */
  #menu {
    font-size: 18px;
    text-align: center;
    padding: 10px 20px;
    border-style: none dotted dotted none;
    border-width: 0px 2px 2px 0px;
    border-color: #c00;
  }

  /* Хитрые игры со свойствами margin и padding имеют целью
     полную совместимость с IE5. Блок навигации отображается в IE5
     так же, как и в более современных браузерах. "Кнопки"
     навигационного меню расположены на расстоянии 20 пикселей
     друг от друга и от границ навигационного блока по вертикали */
  #menu p {
    padding: 10px 0px;
    margin: 0px;
  }

  /* При помощи свойства display мы превращаем гиперссылки и
     контейнер ..., размещенные в блоке навигации, из
     внутристрочных элементов в блочные, что дает нам возможность
     указать ширину при помощи свойства width */
  #menu a, #menu span
  {
    display: block;
    width: 154px;
    margin: auto;
  }

  /* Далее следуют правила представления "кнопок" навигационного меню.
     Их четыре вида: 1) обыкновенные; 2) выделенные при помощи курсора
     мыши; 3) соответствующие текущему "магистральному" разделу и
     предназначенные для его внутренних страниц - для таких "кнопок"
     назначен класс current; 4) соответствующие текущей
     странице и поэтому не являющиеся ссылками - этот вид "кнопок"
     представлен элементами ... */
  #menu a {
    color: #000;
    text-decoration: none;
  }
  #menu a:link, #menu a:visited {
    background: #fff0cc;
    border: solid 2px #fc9;
  }
  #menu a:hover, #menu a:active, #menu a.current:link, #menu a.current:visited, #menu span {
    border-style: solid dotted;
    border-width: 2px;
    border-color: #c00;
  }
  #menu a.current:link, #menu a.current:visited, #menu span {
    background: #fff;
  }
  #menu span
  {
    color: #999;
  }
  #menu a.current:hover, #menu a.current:active {
    background: #fff0cc;
  }


  /* Дальнейшие правила определяют оформление элементов области
     основного текстового содержания страницы */
  #text {
    margin-left: 200px;
    padding: 20px;
  }
  #text h2 {
    font-size: 120%;
    font-weight: normal;
    text-transform: uppercase;
    color: #369;
  }

  /* Псевдокласс first-child указывает на первый вложенный
     в блок #text заголовок 

...

. Для таких заголовков верхний вертикальный отступ устанавливается равным нулю. Впрочем, Internet Explorer не понимает этого псевдокласса, так что в браузере от Microsoft первый заголовок области основного текста будет расположен заметно дальше от "шапки", нежели в браузерах, относящихся к рекомендациям W3C более уважительно */ #text h2:first-child { margin-top: 0px; } /* Абзацы основного текста оформляются в соответствии с традициями русскоязычного текстового набора */ #text p { text-align: justify; text-indent: 1.5em; margin: 0px; } /* Класс абзацев, предназначенный для новостей сайта */ #text p.news { text-align: left; text-indent: 0pt; margin-top: .5em; margin-bottom: .5em; } /* Класс, позволяющий выделять полужирным начертанием даты свежих обновлений сайта */ .date { font-weight: bold; } /* Представление нумерованных и маркированных списков в основном тексте */ #text ul, text ol { margin-top: 0px; margin-bottom: 0px; } #text ul { list-style-type: square; } /* Оформление ссылок в основном тексте */ #text a { text-decoration: none; } #text a:link { color: #f60; } #text a:visited { color: #999; } #text a:hover { text-decoration: underline; } #text a:active { color: #f00; } /* Правила, определяющие представление "подвала" и содержащихся в нем элементов - абзацев и гипертекстовых ссылок */ #footer { width: 100%; clear: both; } #footer p { font-size: 70%; border-top: solid 5px #69c; } #footer a:link, #footer a:visited, #footer a:hover, #footer a:active { color: #fff; text-decoration: underline; } } /* Правила, определяющие версию представления данных для карманных компьютеров. Никак не взаимосвязаны с правилами, определенными для экранной версии представления. Перечисленные ниже конструкции очень простые, комментировать здесь почти нечего. Все блоки позиционированы согласно простейшей схеме static и следуют друг за другом в нормальном потоке. Размер шрифта для всего текста страницы задан в пикселях: 16 пикселей для заголовков первого уровня, 14 - для заголовков второго уровня и 12 - для всех остальных элементов */ @media handheld { html, body { margin: 0px; padding: 0px; border: 0px; } body { font: 12px Tahoma, Arial, Helvetica, sans-serif; color: #000; background: #fff; } #header, #menucarrier, #text, #footer { padding: 5px; } #header, #footer { background: #ccc; } #header { font-size: 16px; margin: 0px; } #menucarrier { background: #fff0cc; border-top: solid 1px #666; border-bottom: solid 1px #666; } #footer { border-top: solid 1px #666; } h2, p { margin: 5px 0px; } #text h2 { font-size: 14px; } ul { list-style: square inside; margin: 5px; padding: 0px; } li { margin: 0px; padding: 0px; } a:link { color: #00f; } a:visited { color: #609; } } /* Правила для печатной версии представления данных. Этот фрагмент листа стилей еще проще. При помощи свойства display со значением none мы скрываем все элементы, не требующиеся в печатной версии - "шапку", блок навигации и "подвал". Остается только область основного текста. Используем рубленый шрифт кегля 16 пунктов для заголовков, антикву кегля 12 пунктов для всего остального. Всему тексту, включая гиперссылки, назначаем черный цвет. */ @media print { body { color: #000; font: 12pt "Times New Roman", Times, serif; } #header, #menucarrier, #footer { display: none; } #text h2 { font: 16pt Arial, Helvetica, sans-serif; } #text a { color: #000; text-decoration: none; } }

Наш сайт включает в себя 3 вида страниц. Это главная страница; страницы оглавлений "магистральных" разделов; и, наконец, страницы третьего уровня вложенности, т.е. внутренние страницы разделов.

Категории документов отличаются друг от друга, во-первых, структурой содержания элемента <title>...</title>, во-вторых, тем, что титульная надпись в "шапке" всякой страницы, за исключением главной, является ссылкой на последнюю, и в-третьих, устройством навигационного блока.

HTML-разметка гораздо проще листа стилей, поэтому приведу лишь код главной страницы. Комментировать ничего не буду - предлагаю провести смостоятельный анализ "найдите 10 отличий!"


<!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" lang="ru" xml:lang="ru">
<head>
<title>Сайт о сайтах: концепции, технологии, нюансы веб-разработки</title>
<style type="text/css">
<!--
@import url(style.css);
-->
</style>
</head>
<body>
<div id="carrier">
<h1 id="header">Сайт о сайтах</h1>
<div id="menucarrier">
<div id="menu">
<p><a href="concept/index.html">Концепции</a></p>
<p><a href="tech/index.html">Технологии</a></p>
<p><a href="nuances/index.html">Нюансы</a></p>
<p><a href="about/index.html">О&nbsp;проекте</a></p>
<p><a href="map/index.html">Карта сайта</a></p>
</div>
</div>
<div id="text">
<h2>Создавайте правильные сайты!</h2>
<p>Мы призываем всех веб-разработчиков помнить, что создание сайтов&nbsp;&mdash; это нелегкий труд, требующий аккуратности и ответственности, глубокого знания многих принципов и <a href="concept/index.html">концепций</a>, уважительного отношения к <a href="tech/index.html">технологическим стандартам</a>, учета бесчисленного множества <a href="nuances/index.html">нюансов</a>. Этот проект ставит своей целью популяризацию грамотной веб-разработки в Рунете.</p>
<h2>Последние обновления</h2>
<p class="news"><span class="date">30.03.2005.</span> В разделе <a href="tech/index.html">&laquo;Технологии&raquo;</a> открыта страница, посвященная <a href="tech/css.html">каскадным листам стилей CSS</a>.</p>
<p class="news"><span class="date">28.03.2005.</span> Открыт раздел <a href="nuances/index.html">&laquo;Нюансы&raquo;</a>, посвященный правилам хорошего тона, принятым в веб-разработке, грамотным подходам к использованию веб-технологий.</p>
<p class="news"><span class="date">25.03.2005.</span> Сайт введен в эксплуатацию. Приглашаем практикующих веб-разработчиков, которым не все равно, как будет развиваться Рунет, к сотрудничеству.</p>
</div>
<div id="footer">
<p>&copy;&nbsp;<a href="/wrn.php?www.lomov.ru/">Артемий Ломов</a>, 2005.<br />Пишите письма: <a href="mailto:artemy@lomov.ru">artemy@lomov.ru</a>.</p>
</div>
</div>
</body>
</html>

Относительные ссылки с использованием двух точек ("..") для обозначения вышележащего каталога, приведенные в листингах данного сайта, не слишком удобны и в реальных проектах встречаются доаольно редко. Обычно используют URL, начинающиеся с символа "/" и определяющие местонахождение той или иной страницы относительно корня документа веб-сервера.

Преимущество ссылки вида <a href="/index.html">...</a> перед <a href="../index.html">...</a> состоит в том, что первая указывает на главную страницу сайта всегда, на какой бы сколь угодно глубоко запрятанной странице такая ссылка не находилась. Вторая же ссылка подразумевает, что индексная страница сайта расположена в родительском каталоге. Тем не менее ссылки такого вот "непрофессионального" вида обеспечивают безболезненный просмотр сайта на локальной машине без использования веб-сервера.

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

На этом пожалуй всё. Верстайте правильно!
Желаю Вам удачи! =)

Источник для написания урока - учебное пособие:
Ломов А.Ю. HTML, CSS, скрипты: практика создания сайтов. - СПб.:БХВ-Петербург, 2007. - 416с.: ил.
© lomov.ru

Комментировать

Автор: admin | Добавлена: 22.04.2009 | Просмотров: 5736
Рейтинг: 18 | Голосов: 5

Оцените заметку: 1 2 3 4 5

Последние обновления в категории: Веб-дизайн

Комментарии (0)

Комментариев пока нет!

Только авторизованные пользователи могут добавлять комментарии. Зарегистрироваться.

Логин:
Пароль:
 

Регистрация

: Тема:

Заметок в базе: 56
Комментариев: 0
Всего юзеров: 114
Сейчас онлайн: 1