Графика на веб-страницах

При наличии картинок веб-страницы будут наиболее привлекательными. 

Картинка не вставляется непосредственно в текст страницы. Браузеру ставится указание, где картинка расположена, как ее зовут и как ее на экране разместить.

Визуальные html-редакторы

Жизнь веб-мастерам облегчают HTML редакторы.

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

Слайдер для ЭОР

Для размещения на сайте различных картинок, фотографий удобно пользоваться слайд-шоу.

Слайд-шоу - это набор картинок с эффектными переходами между снимками.

Горизонтальное выпадающее меню. Как создать?

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

Навигация для моего веб-проекта

При взгляде на веб-проект посетитель с первого взгляда должен определить, как перемещаться по странице

Составляя любой веб- проект, разрабатываем удобную навигационную систему, которая позволяет удобно перемещаться по веб-проекту.

Навигация для моего веб-проекта «Все о капусте»:

Пример верстки сайта с помощью фреймов

Пример оформления главной страницы ЭОР «Все о капутсе» с помощью фреймов.

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

Способы создания сайта

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

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

В настоящее время можно выделить 4 способа верстки веб-страниц:

·         Прямая верстка

·         Табличная верстка

·         Фреймовая верстка

·         Блочная верстка

В своей работе я использовала сначала табличную верстку (пример «Что такое СПИД»),  затем фреймовую  верстку (пример «Все о капусте»), блочная верстка (пример «Мелиоративные машины»).

С чего начать создание веб-проекта?

Для  любого проекта нужна обложка. Обложка должна быть привлекательной, но главное – функциональной.

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

Можно ли обойтись без веб-программирования?

Можно! Но если вам нужно создать оригинальный HTML-проект, который не будет выглядеть как набившие оскомину интернетовские штампы, если вы хотите получить оптимальный код и добавить на страницу интерактивность за счет собственных скриптов и таблиц стилей, знания тегов и принципов построения HTML-кода просто необходимы.

HTML-код для веб-страницы "Схема строения вируса СПИДа"

Пример табличной верстки одной из страниц, выполненной в веб-проекте "СПИД Можно ли уберечься?"
HTML-код для веб-страницы "Что такое СПИД?" смотрите здесь

Табличная верстка веб-страниц

Пример табличной верстки одной из страниц, выполненной в веб-проекте "СПИД Можно ли уберечься?"
HTML-код для веб-страницы "Что такое СПИД?" смотрите здесь

Веб-конструирование во внеурочной деятельности

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