Ключевые слова:
структура сайта
навигация
оформление сайта
шаблон страницы сайта
хостинг
Технологии создания сайта
Существуют несколько способов создания сайтов.
Во-первых, сайт можно создать, воспользовавшись языком разметки гипертекста HTML (Hyper Text Markup Language).
В этом случае в текстовом редакторе (например, в Блокноте) текст, который хотят разместить на страницах сайта, размечают специальными метками, называемыми тегами. Теги содержат указания о том, как должен выглядеть текст. Чтобы отличать теги от текста, их заключают в угловые скобки.
Во-вторых, можно документ, подготовленный в текстовом процессоре (Microsoft Word, Writer), сохранить как Web-страницу (в формате HTML).
В-третьих, можно воспользоваться специальным программным обеспечением — визуальными HTML-редакторами (Adobe Dreamweaver, Microsoft FrontPage, Nvu) или конструкторами сайтов (uCoz, Сайткрафт, Конструктор школьных сайтов).
Web-дизайнер — специалист, проектирующий структуру Web-сайта, а также подбирающий способы подачи информации и выполняющий художественное оформление Web-проекта. Web-дизайнер должен знать современные Web-технологии и иметь художественное образование.
Вы можете попытаться освоить основы Web-дизайна самостоятельно, пройдя дистанционный курс «Web-конструирование» А. А. Дуванова в Роботландском университете (http://www.botik.ru/~robot/ru/).
Практическая работа
Средства создания и сопровождения сайта
Цель работы:
1. сформировать навыки создания шаблона web- страницы;
2. научиться создавать заголовки разного уровня;
3. овладеть технологией форматирования линий;
4. получить представление, как оформляется текст на web- странице;
Ход выполнения работы
1. Создание шаблона web- страницы. HTML- документ ( простой текстовый файл, содержащий текст и текстовые HTML – теги) всегда должен начинаться с открывающего тега <HTML> и заканчиваться закрывающим тегом </HTML>. Внутри документа выделяют два раздела: раздел заголовков и тело документа. Раздел заголовков содержит информацию, описывающую документ в целом, и ограничивается тегами <HEAD> и </ HEAD>. Этот раздел должен включать в себя контейнер общего документа < TITLE> … </TITLE>. Содержимое web- страницы размещается в теле документа, которое ограничивается тегами <BODY> и </ BODY>.
Создайте шаблон web- страницы. Для этого выполните следующие действия:
· создайте папку Страница на Рабочем столе. Все последующие файлы сохраняйте в данной папке;
· откройте текстовый редактор Блокнот;
· напечатайте команды в текством редакторе для создания web- страницы:
<html>
<head>
<title> Заголовок web - документа </title>
</ head>
<body> содержимое web- страницы ( тело документа)
<!—Комментарии, которые не отображаются на web- странице -- >
</ body>
</ html>
· сохраните готовый шаблон под именем шаблон. html в папку Страница на своем компьютере;
· закройте текстовый редактор;
· просмотрите файл шаблон.html;
· откройте файл шаблон.html с помощью редактора Блокнот;
· внесите изменения : заголовок « Дизайн отделка» и в тело документа введите текст « Первая web- страница будет посвящена стилям оформления квартир”;
· сохраните получившийся файл под именем index.html в папке Страница (index.html – это стандартное имя головного документа, с которого начинается загрузка сайта);
· просмотрите результат работы в браузере.
2. Создание заголовков разных уровней. В HTML предусмотрено шесть уровней заголовков, которые задаются с помощью парных тегов <H1> …<H6> ( первый заголовок самый крупный, а остальные мельче). По умолчанию заголовки выравниваются по левому краю ( Left), также возможно выравнивание по центру ( Center) и правому краю ( Align).
· откройте программу Блокнот, в котором запишите теги первого, второго, третьего и четвертого уровня в заголовках (текст в заголовках может быть любой):
- заголовок первого уровня ( выравнивание по центру)
< H1 Align =Center> Первая web- страница будет посвящена стилям оформления квартир ! < /H1>
- заголовок второго уровня ( выравнивание по левому краю)
< H2 Align = Left > Заголовок второго уровня < /H2>
- заголовок третьего уровня ( выравнивание по правому краю)
< H3 Align = Right > Заголовок третьего уровня < /H3>
- заголовок четвертого уровня ( выравнивание по центру)
< H4 Align =Center> Заголовок четвертого уровня < /H4>
- заголовок пятого уровня ( выравнивание по левому краю)
< H5 Align = Left > Заголовок пятого уровня < /H5>
- заголовок шестого уровня ( выравнивание по центру)
< H6 Align = Right > Заголовок шестого уровня < /H6>.
· сохраните изменения;
· просмотрите результат работы в браузере
3. Формирование линий. Длину, ширину, цвет и расположение горизонтальных линий ( тег <HR>) можно задавать с помощью дополнительных атрибутов.
Атрибут выравнивания (Align ) - записываются так-же в программе Блокнот:
Align=Left- выравнивание по левому краю;
Align=Center – выравнивание по центру;
Align= Right –выравнивание по правому краю.
Атрибут размера ( Size )
· Size = число высоту линии в пикселах ( [ 1;100], целые числа);
· Size = число – задает длину линии в пикселях;
· Size = число % - задает длину линии в процентах от ширины окна браузера.
Атрибут цвета ( Color ): = цвет, где в качестве значения после знака равенства пишется название цвета английскими буквами и задается числовой код оттенка ( табл.)
Палитра цветов
Название Код Название Код
Aqua #00FFFF Navy #000080
Black #000000 Olive #808000
Blue #0000FF Purple #800080
Fuchsia #FF00FF Red #FF0000
Gray #808080 Silver #C0C0C0
Green #008000 Teal #008080
Lime #00FF00 White #FFFFFF
Maroon #900000 Yellow #FFFF00
Закрепление пройденного материала.
Данный тест выполнить в течении урока на оценку.