Уроки 29 — 31
§4.4 Технологии создания сайта. Содержание и структура сайта
Оформление сайта. Размещение сайта в Интернете
Во-первых, сайт можно создать, воспользовавшись языком разметки гипертекста HTML (Hyper Text Markup Language). В этом случае в текстовом редакторе (например, в Блокноте) текст, который хотят разместить на страницах сайта, размечают специальными метками, называемыми тегами. Теги содержат указания о том, как должен выглядеть текст. Чтобы отличать теги от текста, их заключают в угловые скобки (рис. 4.7).
Во-вторых, можно документ, подготовленный в текстовом процессоре (Microsoft Word, OpenOffice Writer), сохранить как web-страницу (в формате HTML).
В-третьих, можно воспользоваться специальным программным обеспечением — визуальными HTML-редакторами или конструкторами сайтов.
Веб-дизайнер — специалист, проектирующий структуру вебсайта, а также подбирающий способы подачи информации и выполняющий художественное оформление веб-проекта. Веб-дизайнер должен знать современные веб-технологии; желательно, чтобы он имел художественное образование.
Рис. 4.7. Простейшая веб-страница и её HTML-код
Вы можете попытаться освоить основы веб-дизайна самостоятельно, пройдя дистанционный курс «Web-конструирование» А. А. Дуванова в Роботландском университете (http://www.botik.ru/~robot/ru/).
4.4.2. Содержание и структура сайта
Независимо от того, каким инструментарием вы будете пользоваться для создания сайта, первоначально следует продумать его содержание и структуру.
Предположим, вы посещаете кружок компьютерной графики и решили создать сайт этого творческого объединения. Содержание сайта должно быть таким, чтобы отражать творческую жизнь участников объединения, привлекать внимание единомышленников.
Теперь необходимо определить структуру (план) сайта — разбиение общего содержания на смысловые разделы и отдельные страницы с указанием связей между ними.
Очевидно, сайт может включать в себя общую информацию (программу и расписание занятий, место проведения занятий, фамилию, имя, отчество руководителя и т. д.), страницу новостей и объявлений, личные страницы руководителя и участников объединения, галерею работ участников объединения, полезные ссылки на другие ресурсы сети Интернет и многое другое. Изобразим структуру сайта в виде графа (рис. 4.8).
Рис. 4.8. Иерархическая структура сайта
Представление структуры сайта в виде графа обеспечивает наглядное представление содержания сайта и помогает организовать навигацию — переходы с одной страницы сайта на другую.
4.4.3. Оформление сайта
Любой сайт загружается с главной (домашней) страницы (home page), которая прежде всего должна давать ответ на вопрос «О чём этот сайт?». Для этого на главной странице размещают название сайта, тематическое графическое изображение, короткий текст с описанием содержания сайта, а также главное меню — ссылки на основные разделы сайта. Также на главной странице могут быть размещены имя автора сайта и его контактная информация, счётчик посетителей, новости и т. д.
Каждая страница сайта, как правило, имеет несколько постоянных элементов, которые всегда находятся на одних и тех же местах. Это:
• заголовок сайта, расположенный в самом верху страницы;
• главное меню, как правило, размещаемое в левой части страницы (количество пунктов меню, их названия и порядок неизменны на всех страницах сайта).
Желательно, чтобы страницы сайта были выполнены в едином стиле. Чтобы выдержать стиль, проще вначале разработать шаблон страницы сайта, на котором представить элементы, имеющиеся на всех страницах сайта (рис. 4.9).
Рис. 4.9. Примерный шаблон страниц сайта
При наполнении страниц сайта информационными материалами следует придерживаться следующих рекомендаций:
• Не ставьте точку в названиях сайта и страниц, если они состоят из одного предложения.
• Названия пунктов меню делайте краткими; недопустимо растягивание названия пункта на несколько строк.
• Не выбирайте для страниц пёстрый фон, на таком фоне текст читается с трудом.
• Не размещайте на странице слишком много информационных и художественных блоков.
• Не пишите слишком длинных текстов. Текст разбивайте на небольшие абзацы, отделяя их друг от друга пустыми строками.
• В каждом абзаце используйте одни и те же приёмы форматирования.
4.4.4. Размещение сайта в Интернете
Перед размещением сайта в сети Интернет следует провести его тестирование, т. е. убедиться в том, что он правильно отображается разными браузерами: тексты хорошо читаются на выбранном фоне, рисунки расположены на своих местах, гиперссылки обеспечивают правильные переходы и т. д.
Хостинг — услуга по размещению сайта на сервере, постоянно находящемся в сети Интернет; хостинг может быть как платным, так и бесплатным.
Платным хостингом для размещения своих сайтов обычно пользуются крупные компании. При этом они получают удобное для прочтения и запоминания доменное имя второго уровня, которое может совпадать с названием компании.
Частные лица для своих сайтов могут воспользоваться бесплатным хостингом, возможности которого ограничены по сравнению с платными вариантами (небольшое дисковое пространство, ограничение размера отдельного файла, доменное имя только третьего уровня и т. д.), но их вполне достаточно для домашних страниц пользователей и некоммерческих сайтов. Главным недостатком бесплатных хостингов является то, что при размещении вашего сайта компания самостоятельно добавляет на его страницы коммерческую рекламу.
Список серверов, предоставляющих бесплатный хостинг, можно получить поиском по запросу «бесплатный хостинг».
САМОЕ ГЛАВНОЕ
Структура (план) сайта — разбиение общего содержания на смысловые разделы и отдельные страницы с указанием связей между ними.
Представление структуры сайта в виде графа обеспечивает наглядное представление содержания сайта и помогает организовать навигацию — переходы с одной страницы сайта на другую.
Шаблон страницы — это схема страницы, на которой представлены элементы, имеющиеся на страницах сайта. Использование шаблонов страниц помогает выдержать единый стиль оформления сайта.
Хостинг — услуга по размещению сайта на сервере, постоянно находящемся в сети Интернет; хостинг может быть как платным, так и бесплатным.
Вопросы и задания
1. Ознакомьтесь с материалами презентации к параграфу, содержащейся в электронном приложении к учебнику. Дополняет ли презентация информацию, содержащуюся в тексте параграфа?
2. С помощью каких инструментов можно создавать сайты?
3. Что такое структура сайта?
4. Продумайте и изобразите в виде графа структуру одного из следующих сайтов:
а) «Наш класс»;
б) «Моя семья»;
в) «Информатика».
5. Перечислите основные элементы, размещаемые на страницах сайта.
6. Какие рекомендации следует учитывать при наполнении страниц сайта информационными материалами?
7. С какой целью проводится тестирование сайта?
8. Что является основным недостатком бесплатного хостинга?
9. Назовите известный вам сервер Интернета, обеспечивающий пользователям бесплатный хостинг сайтов.
Электронное приложение к уроку
| Файлы | Материалы урока |
Cкачать материалы урока
Информатика и ИКТ
.png)
Структура сайта— разбиение общего содержания на смысловые разделы и отдельные страницы с указанием связей между ними.
Шаблон страницы— это схема страницы, на которой представлены элементы, имеющих на сайте.
Хостинг-услуга по размещению сайта на сервере, постоянно находящемся в сети Интернет; хостинг может быть как платным, так и бесплатным.
Практическая работа. Технологии создания сайта. Содержание и структура сайта. Оформление сайта.
Цель урока: ознакомить с технологией создания сайта, содержанием и структурой сайта.
- Организационный момент
- Проверка домашнего задания
- Основная часть урока.
Урок проводить при помощи презентации. Технологии создания сайта. Существуют несколько способов создания сайтов. Обрати внимание! Cайт можно создать, воспользовавшись языком разметки гипертекста HTML. В этом случае в текстовом редакторе (например, в Блокноте) текст, который хотят разместить на страницах сайта, размечают специальными метками, называемыми тегами. Теги содержат указания о том, как должен выглядеть текст. Чтобы отличать теги от текста, их заключают в угловые скобки. Обрати внимание! Можно документ, подготовленный в текстовом процессоре (Microsoft Word, Writer), сохранить как веб-страницу (в формате HTML). Можно воспользоваться специальным программным обеспечением — визуальными HTML-редакторами (Adobe Dreamweaver, Microsoft FrontPage, Nvu) или конструкторами сайтов (uCoz). 
Веб-дизайнер — специалист, проектирующий структуру веб-сайта, а также подбирающий способы подачи информации и выполняющий художественное оформление веб-проекта. Веб-дизайнер должен знать современные веб-технологии и иметь художественное образование. Содержание и структура сайта.
Обрати внимание! Независимо от того, каким инструментарием ты будешь пользоваться для создания сайта, первоначально следует продумать его содержание и структуру. Предположим, ты посещаешь кружок компьютерной графики и решил создать сайт этого творческого объединения. Содержание сайта должно быть таким, чтобы отражать творческую жизнь участников объединения, привлекать внимание единомышленников. Теперь необходимо определить структуру (план) сайта — разбиение общего содержания на смысловые разделы и отдельные страницы с указанием связей между ними. Очевидно, сайт может включать в себя общую информацию (программу и расписание занятий, место проведения занятий, фамилию, имя, отчество руководителя и т. д.), страницу новостей и объявлений, личные страницы руководителя и участников объединения, галерею работ участников объединения, полезные ссылки на другие ресурсы сети Интернет и многое другое. Изобразим структуру сайта в виде графа: 
Представление структуры сайта в виде графа обеспечивает наглядное представление содержания сайта и помогает организовать навигацию — переходы с одной страницы сайта на другую. Оформление сайта Любой сайт загружается с главной (домашней) страницы (home page), которая, прежде всего, должна давать ответ на вопрос: «О чём этот сайт?». Для этого на главной странице размещают:
- название сайта,
- тематическое графическое изображение,
- короткий текст с описанием содержания сайта,
- главное меню — ссылки на основные разделы сайта.
Также на главной странице могут быть размещены имя автора сайта и его контактная информация, счётчик посетителей, новости и т. д. Каждая страница сайта, как правило, имеет несколько постоянных элементов, которые всегда находятся на одних и тех же местах. Это:
- заголовок сайта, расположенный в самом верху страницы;
- главное меню, как правило, размещаемое в левой части страницы (количество пунктов меню, их названия и порядок неизменны на всех страницах сайта).
Желательно, чтобы страницы сайта были выполнены в едином стиле. Чтобы выдержать стиль, проще вначале разработать шаблон страницы сайта, на котором представить элементы, имеющиеся на всех страницах сайта. 
При наполнении страниц сайта информационными материалами следует придерживаться следующих рекомендаций:
- Не ставьте точку в названиях сайта и страниц, если они состоят из одного предложения.
- Названия пунктов меню делайте краткими; недопустимо растягивание названия пункта на несколько строк.
- Не выбирайте для страниц пёстрый фон, на таком фоне текст читается с трудом.
- Не размещайте на странице слишком много информационных и художественных блоков.
- Не пишите слишком длинных текстов. Текст разбивайте на небольшие абзацы, отделяя их друг от друга пустыми строками.
- В каждом абзаце используйте одни и те же приёмы форматирования.
- Практическая работа № 10. Создание простейшей веб страницы
- Откройте блокнот и скопируйте в него следующее: Главная страница — страница обо мне Информация обо мне Краткая биография обо мне Родился в 1985 году в городе Москва. Закончил в 2008 году МАИ. На данный момент работаю ведущим инженером в крупной авиакомпании. Моя мечта стать ведущим по машине.
Поскольку я люблю авиацию, то хотел бы поделиться несколькими интересными фотографиями на эту темуЭтот текст зеленый
Просто пример жирного текста
В данном примере мы рассмотрели кратко основные теги HTML, теперь можно пробовать создавать несколько связанных страниц через ссылки и выкладывать сайт в интернет.
Спасибо. До новых встреч!
Создание сайтов в программе FrontPage
· организации простой технологии внесения изменений при редактировании сайта.
Для достижения этих целей процесс создания структуры принято рассматривать в двух аспектах. Фактически проектируются две структуры: логическая и физическая. Логическая структура определяет, в какой последовательности материалы будут доступны пользователю, какие ссылки следует выбирать для доступа к информации, размещенной на сайте. Хорошо продуманная логическая структура гарантирует, что на поиск необходимых данных будет затрачено меньше времени, и что они всегда будут найдены. Для создания полноценной логической структуры достаточно следовать нескольким простым правилам:
· любой документ сайта должен оказываться доступным не более чем с помощью трех переходов с главной страницы сайта;
· все навигационные элементы должны отображаться сразу после загрузки страницы;
· все внутренние связи должны быть двунаправленными, то есть позволять перемещаться между документами в обоих направлениях;
· с любой страницы должен быть предусмотрен возврат на главную страницу сайта;
· названия рубрик и распределение материала между ними должно быть понятным каждому посетителю сайта.
· если сайт имеет более одного уровня навигации, он обязательно должен содержать навигационную карту.
· для удобства посетителей, каждый сайт должен иметь простую, четкую и логичную схему навигации.
Пример логической структуры веб-сайта показан на рис. 1.1.
.jpg)
Рис. 1.1. Логическая структура сайта
Существует несколько видов логических структур сайта. Самая простая из них – линейная [1]. В ней страницы следуют одна за другой, и пользователь должен просматривать их последовательно, как слайд-шоу. Недостатков у такой структуры достаточно много. Как следствие, область ее применения ограничена. Она может использоваться на сайтах-презентациях и в онлайновых учебных пособиях. Самый простой вариант сайта с линейной структурой – набор страниц, с каждой из которых есть ссылка на следующую и на предыдущую. Однако и здесь начинающие авторы допускают ошибки. Дело в том, что на каждой странице обязательно должны присутствовать соответствующий заголовок и ссылка на первую страницу. В противном случае посетители, попавшие в середину сайта – например, в результате обращения поисковой системы, не смогут сориентироваться в ситуации, и покинут проект разочарованными. Кроме того, полезно показывать общее число страниц в отображаемом документе и выделять номер той из них, которая воспроизводится в данный момент времени.
Следующим вариантом структуры сайта является линейная структура с альтернативами и вариантами. Ее основой остается простое линейное размещение страниц. Однако на сайтах, построенных по данному принципу, посетители могут проявить некоторую инициативу, позволяющую облегчить поиск нужной информации. Под альтернативами здесь понимается выбор между двумя ветвями перемещения. Чаще всего подобная структура используется для сбора информации о посетителе. Примером может служить процесс регистрации клиента на сайте фирмы, оказывающей определенные услуги. Работа всегда начинается со стартовой страницы. Однако затем частным лицам предлагается ввести одну информацию, а представителям организаций – другую. Возможно, ветви альтернатив в дальнейшем вновь смыкаются, и все пользователи попадают на одну и ту же страницу.
Третий вариант носит название линейной структуры с ответвлениями. Это тоже контролируемая структура перемещения по ресурсам, наглядный аналог которой – дорога с ответвляющимися от нее тупиковыми тропами. Иными словами, посетитель последовательно переходит с одной страницы на другую. Если информация, размещенная на любой из них, его заинтересовала, и он желает ознакомиться с ней подробнее, то ему предоставляется возможность перейти на ответвление, а потом вернуться обратно на основную «дорогу». Главное преимущество такой структуры состоит в том, что к ней легко перейти с обычного линейного размещения страниц. Часто бывает, что однажды созданный сайт перестает удовлетворять возросшим требованиям, а глобальная переделка по тем или иным причинам нежелательна. В этом случае автор может без затруднений расширить свой проект. И его сайт не утратит четкости логических связей.
Следующий вариант – древовидная структура (рис. 1.1) – универсальный и в большинстве приложений наиболее предпочтительный способ размещения страниц. Она хорошо зарекомендовала себя для создания практически любых типов сайтов. Пользователь, попадая на главную страницу, оказывается перед выбором, в каком направлении двигаться дальше. После перехода в нужный раздел, он выбирает необходимый подраздел, затем пункт (параграф) и т.д. У древовидной структуры достаточно много достоинств, однако и она не лишена недостатков. Остановимся на главном из них.
В древовидной структуре очень сложно соблюдать баланс между глубиной и шириной. Формальные критерии либо тривиальны, либо рассчитаны на узкие группы пользователей. Успех зависит от опыта, интуиции и квалификации автора. Если «дерево» сайта будет расти только вглубь, то посетителям, чтобы найти необходимую информацию, придется загрузить и просмотреть слишком много страниц. Естественно, это занимает много времени и раздражает. Если же создается очень широкая древовидная структура, то приходится тратить время по другой причине – для выбора нужной ветви поиска. Использование древовидной структуры сайта вынуждает постоянно следить за ее разрастанием и придерживаться золотой середины. Качество работы автора зависит от его мастерства, а не от соблюдения формальных правил.
Еще одним вариантом является решетчатая структура. Эта структура заметно сложнее рассмотренных ранее. В ней все страницы также размещаются в различных ветвях. Однако пользователю дается возможность перемещаться по ним не только вертикально (вверх и вниз), но и горизонтально (то есть между ветвями разных уровней). Используется «решетка» в основном только в каталогах. При этом перемещение между ветками на глубинных уровнях осуществляется с помощью ссылок на рубрики в других разделах.
Использование решетчатой структуры в других проектах считается нецелесообразным. Во-первых, она относительно сложна в реализации. Во-вторых, обращаться с «решеткой» нужно с очень большой осторожностью. В противном случае в схеме возникают непредусмотренные связи, и поиск информации приводит к непредсказуемым результатам.
Физическая структура не влияет на просмотр страниц посетителями и служит в основном для удобства создателя сайта при его редактировании, позволяя легко найти нужный файл (документ) [2]. При проектировании физической структуры разработчик может ненадолго забыть о пользователях и немного подумать об удобствах сопровождения сайта. Обычно распределяют отдельные папки для каждого из его разделов и подразделов. Внутри папок также создают отдельные папки для вспомогательных изображений, отдельные папки для мультимедиа-информации (музыка, видео, и т.п.) – то есть файлы сайта разделяются по функциональным признакам. В простом статическом сайте можно четко определить несколько групп файлов:
· страницы сайта, представляющие собой HTML-файлы;
· графические файлы, используемые в дизайне сайта;
· файлы для копирования посетителями.
Особое место занимает вопрос, связанный с выбором имен файлов. Логично и понятно названный файл позволяет сэкономить время при обновлении сайта. Кроме того, при передаче поддержки сайта другому сотруднику, будет гораздо легче объяснить, где находится та или иная информация. Возможно, на первых порах это кажется неважным, однако опыт показывает, что разбираться в структуре неудачно именованного сайта довольно затруднительно.
Прежде всего – не следует называть файлы безликими именами, такими как page1.htm, 123.htm и т.п. Необходимо, чтобы при взгляде на список файлов сразу становилось понятно, что в них содержится. Другими словами, называть файлы следует исходя из содержательного смысла документа. Если страница излагает общую информацию о компании, то принято называть ее about.htm, а страницу с контактной информацией – contacts.htm.
В некоторых случаях для группы файлов могут использоваться похожие наименования, состоящие из базового имени и цифры. Например, если вы периодически пишете статьи на своем сайте, то файлы удобно называть последовательно: article_1.htm, article_2.htm, article_3.htm и т.д. Заметим, что в качестве разделителя базового имени и цифры используется знак подчеркивания. Он позволяет отделить номер статьи, что способствует быстрому нахождению нужного файла.
При формировании имен файлов можно взять за основу либо русский язык, либо английский. Так как использовать русские символы в именах файлов нельзя (причины этого описаны ниже), то при использовании русского в качестве базового языка необходимо писать имена файлов в транслитерации (русские слова латинскими буквами). В этом случае страницу с описаниями услуг можно назвать, например, uslugi.htm, а страницу с информацией об истории фирмы – istoriya.htm. Предпочтительно использовать в качестве основного языка английский, потому что в этом случае слова будут корректно индексироваться поисковыми системами, а значит, при корректном запросе по теме вашего сайта релевантность (степень соответствия поисковому запросу) вашей страницы будет выше. Не следует лишь забывать о правильном написании английских слов. Кроме этого, если имена файлов используют английский язык, то человек, который попал на вашу страницу и не знает русский язык, сможет догадаться, о чем идет речь. Выбрав язык для использования в именах файлов, придерживайтесь его в пределах всего сайта. Не допускайте чередования английских и русских имен файлов.
Для зависимых файлов, например, для иллюстраций к какой-либо странице, удобно использовать следующее правило: имя графического файла образуется из названия страницы и идентификатора иллюстрации, разделенных знаком подчеркивания. В качестве идентификатора иллюстрации может использоваться либо порядковый номер появления ее в документе, либо, что предпочтительнее, некоторый идентификатор, позволяющий легко опознать ее. Допустим, что наша статья называется article_1.htm, и в ней используются иллюстрации – пусть это будут фотографии сотрудников отдела и схема их взаимного подчинения. Тогда имена графических файлов, образованных согласно данному правилу, будут соответствовать конкретным фамилиям, например: article_1_ivanov. jpg, article_1_ petr ov.jpg, article_1_ sidorov .jpg, а иерархия отношений – штатной схеме отдела: article_1_scheme.gif.
Для части графических файлов, преимущественно участвующих в создании дизайна сайта, удобно использовать префиксы и суффиксы. Если спроектировано графическое меню сайта, которое подсвечивается при наведении курсора манипулятора мышь, то все графические файлы, формирующие меню, можно предварять префиксом «m_», а к названиям изображений, которые появляются при наведении мышью, добавлять суффикс «_over». Тогда название графического пункта меню, например «О компании», будет состоять из двух файлов – «m_about.gif» и «m_about_over.gif».
Префиксы удобно добавлять к таким изображениям, которые могут изменяться в зависимости от типа страницы. Приведем несколько часто используемых префиксов:
· «bg_» (background) – для фоновых изображений;
· «m_» (menu) – для пунктов графического меню;
· «t_» (title) – для графических заголовков;
· «icon_» – для пиктограмм;
· «button_» – для графических кнопок, не являющихся элементами меню.
В качестве «корня» слова, образующего имя файла, удобно использовать название страницы, к которой относится данная графика. В приведенном примере «корнем» выступала страница about. Продолжим упражнения с ней и образуем имя файла, используемого как подложки этой страницы – получится имя bg_about.gif. Разумеется, имеет смысл это делать, если фоновый рисунок на разных страницах различный. Если же он везде одинаковый, то файл достаточно назвать просто bg.gif. Такова основа методики формирования имен файлов.
Перечисленные шаги выполняются с единственной целью – облегчить ориентирование в огромном количестве файлов, из которых состоит любой современный сайт. В результате нетрудно найти нужную html-страницу и все относящиеся к ней иллюстрации, а также понять содержимое графических файлов, даже не заглядывая в них.
При создании имен файлов следует помнить об ограничениях, накладываемых со стороны операционных систем. Например, в формате UNIX -систем index . html и Index . html – разные файлы, а с точки зрения Windows – одни и те же. Нужна осторожность при использовании русских букв в именах файлов – преобразование символов из одной кодировки в другую превратит файл «галерея.htm» в «ЗБМЕТЕС.htm».
Рассмотрим инструментальное средство разработки сайтов, применяемое в лабораторных работах по курсу «Пакеты прикладных программ».