Этапы проектирования web-сайта

Первый этап проектирования сайта: определение требований к проекту. На данном этапе, предварительно получив тему на создание web-сайта, разработчик, анализируя данную информацию, предлагает, некоторый дизайн-проект на сайт.

Второй этап проектирования: На данном этапе разработчик формирует структуру сайта.

Третий этап проектирования: Программирование. На данном этапе производится, непосредственно, создание сайта, используя некоторое программное обеспечение, и заполнение разделов сайта информацией.

Четвертый этап проектирования: Отладка и исправление ошибок. На данном этапе разработчик отлаживает и исправляет ошибки web-сайта. Завершением этапа является полная отладка проекта и исправление ошибок в информации.

Понятие о тегах HTML и CSS

Простейшая web-страница.

название web-страницы.

содержание web-страницы, текста, графика и тд…

Форматирование текста.

полужирный шрифт

используется для вставки разрыва строки

курсив

монопишущий шрифт как у машинки подчеркивание

_{подстрочный текст}

_{^{надстрочный текст}}

_{^{перечеркнутый текст}}

_{^{Заголовки и название, параметры и строки, стили текста}}

_{^{Заголовок 1−6}}

_{^{вставка конца строки выравнивает компоненты по центру помещает горизонтальную полоску}}

_{^{устанавливает возможность обтекания текста}}

_{^{обозначает параграф определяет информацию об адресе конкретной цели авторстве}}

_{^{делает текста жирным, где он доступен устанавливает шрифт, используемый по умолчанию делает шрифт на один размер больше другого отступ в тексте вставляет код в виде текста с фиксированной шириной текста}}

_{^{определяет вид, размер и цвет шрифта текста}}

_{^{делает текст в курсив где это возможно используется для отображения текста на экране который должен вывести пользователь выводит текст зачеркнутым}}

_{^{выделяет текст жирным шрифтом заключает в себе страницу стилей}}

^{_{выделяет текст переводя его в нижний регистр}}

_{^{переводит текст в верхний регистр, как степень мелкий шрифт Таблицы:}}

5. CSS.

CSSнабор правил форматирования тегов на html. Примеры: основной текст с выравниваем по центру абзацный отступ 30, шрифт serif, размер шрифта 14.

Каскадные таблицы стилей или CSS-предоставляют возможность перейти на следующий уровень предоставления информации. Таблицы стилей позволяют разделить оформление и смысловое содержание страницы.

Внутренние таблицы стилей — таблицы стилей, заданная внутри ML-элементов при помощи атрибута STYLE, называется внутренней:

CSS (Cascading Style Sheets)

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

Встроенные таблицы стилей — встроенная таблица стилей добавляется в HTML-документ между тегами STYLE в секции HEAD. Действия встроенной таблицы стилей распространяются на всю страницу.

Например, чтобы сделать все заголовки первого уровня зеленым, можно написать следующую встроенную таблицу:

H1 {color:green;}.

CSS HTML 123

В результате для всех элементов hl, которые встретятся в данном XML-документе, будет применен зеленый цвет.

Внешние таблицы стилей — чтобы не дублировать таблицу стилей между тегами и на каждой странице, можно разместить в отдельный файл с расширением .css и при обходимости подключить к htmlдокументу. Такие таблицы стилей называется внешними и представляют собой отдельный файл с расширением .CSS, в котором размещаются все CSS-правила, но уже без HTMLтегов.

web каталог сайт гипертекстовый Преимущества таблиц стилей-таблицы стилей концентрируют команды, реализующие визуальные эффекты в одной доступной области. При этом открывается возможность легко применять набор стилей ко всем однотипным элементам, что позволяет группировать в ассоциативные стили или отдельные элементы и существенное сократить объем работы разработчика webстраниц.

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

Работая с html, можно поместить тег font в каждый заголовок:

Этот заголовок — красный

Эти действие должны быть проделаны для каждого заголовка второго уровня. Если в документе 100 заголовков, то необходимо вставить 100 элементов font, по одному для каждого заголовка.

Вместо этого намного лучше было иметь одно правильно:

H2{color:red;}.

Для того чтобы изменить цвет текста всех элементов h2, пример, на серебристый, необходимо просто изменить правило:

H2{color:silver;}.

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

Рассмотрим сайт, в котором все заголовки выделены серым шрифтом на белом фоне. Этот цвет они получают из таблицы стилей:

H1,h2,h3,h4,h5,h6{color:white; background: gray;}.

Каскадное включение-CSS так же поддерживает средства решение конфликтов правил, называемые каскадными включением. В дополнение к уже существующей таблице каскадным включением. В дополнение к уже существующей таблице Были разработаны следующие страницы каталога:

Рисунок 1 — Главная страница.

На странице товаров (рис. 2) изображена продукция предприятия «СВЯЗНОЙ» .

Рисунок 2 — Товары.

Можно выбирать модели телефона из списка «Категории» (рис. 3).

Рисунок 3 — Категории.

Можно посмотреть подробную информацию о каждом телефоне (рис. 4).

Рисунок 4 — Детали товара.

Так же можно просмотреть рекомендованные товары (рис. 5).

Рисунок 5 — Другие товары.