§ 4.4. Создание web-сайта
Информатика. 9 класса. Босова Л.Л. Оглавление
Ключевые слова:
• структура сайта
• навигация
• оформление сайта
• шаблон страницы сайта
• хостинг
4.4.1. Технологии создания сайта
Существуют несколько способов создания сайтов.
Во-первых, сайт можно создать, воспользовавшись языком разметки гипертекста 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. Назовите известный вам сервер Интернета, обеспечивающий пользователям бесплатный хостинг сайтов.
§ 4.3. Информационные ресурсы и сервисы Интернета
§ 4.4. Создание web-сайта
Способы создания сайтов:
1. HTML — это язык гипертекстовой разметки, который использую для создания сайтов. С помощью специальных тегов и текста необходимо описать команды для браузера. Записывается такая последовательность в простом текстовом редакторе (Блокнот). Можно воспользоваться программой Notepad++, которая подсвечивает синтаксис и ошибки языка HTML.
Рис.(1) Код HTML
2. Можно создать документ в текстовом процессоре (Microsoft Word, Writer). Этот способ отлично подойдёт для тех, кто не умеет пользоваться профессиональными инструментами для создания сайтов. Для этого необходимо открыть Word, назвать документ, например, домашняя страница и сохранить как веб-страницу. Далее можно оформить страницу по вашему желанию, если сайт планируется сделать многостраничным, то необходимо каждую отдельную страницу создавать в новом файле, после чего связать все файлы гиперссылками.
3. Воспользоваться программой инструментом для создания сайтов — HTML редактором. Такие программы имеют больший функционал, по сравнению с текстовым редактором. Проверка синтаксиса, подсказки, механизмы автозаполнения, визуализация кода (т.е. при написании кода в отдельном окне программы сразу показывается результат). Все эти инструменты значительно сокращают затраченное время на создание сайта и в результате получается чистый функциональный код. Примеры HTML редакторов: WYSIWYG, Visual Studio Code, Atom и другие.
Источники:
Visual Studio Code, https://commons.wikimedia.org/w/index.php?curid=45179609
Atom, https://commons.wikimedia.org/w/index.php?curid=45722042
Код HTML, https://pixabay.com/images/id-3078609/
Примечание: Эта статья выполнила свою задачу, и в скором времени ее использование будет прекращено. Чтобы избежать появления ошибок «Страница не найдена», мы удаляем известные нам ссылки. Если вы создали ссылки на эту страницу, удалите их, и вместе мы обеспечим согласованность данных в Интернете.
Если вам нужно сохранить документ Word как веб-страницу, лучше использовать веб-страницу с фильтром «с фильтрацией».
При сохранении документа в виде фильтрованной веб-страницы в Word сохраняются только содержимое, инструкции по стилю и другие сведения. Файл невелик, без большого количества дополнительного кода.
-
Выберите файл > Сохранить как и укажите папку, в которой вы хотите сохранить документ.
-
Присвойте файлу имя.
-
В списке Тип файла выберите пункт веб-страница с фильтром.
-
Нажмите кнопку изменить название и введите заголовок, который будет отображаться в заголовке окна веб-браузера.
-
Нажмите кнопку Сохранить.
Советы
Чтобы сохранить свойства документа и другие сведения о приложении Word на веб-странице, выберите один из файлов. Но размер файла станет больше, чем больше 10-кратно.
Чтобы сохранить рисунки в отдельной папке, в текстовой части веб-страницы выберите нужный тип. Когда вы захотите опубликовать веб-страницу, опубликуйте ее в папке «рисунки».
Чтобы просмотреть HTML-код веб-страницы, найдите его в проводнике, щелкните его правой кнопкой мыши, наведите указатель на пункт Открыть с помощьюи выберите Internet Explorer. Щелкните правой кнопкой мыши страницу в Internet Explorer и выберите пункт Просмотр исходного кода.
Другие способы предоставления общего доступа к документу через Интернет
Приложение Word разрабатывалось для создания и печати документов. В Word 2013 теперь у вас есть и другие варианты, позволяющие поделиться вашими идеями и работать в Интернете.
Сохранение документа в виде записи в блоге
Если вы хотите написать сообщение в приложении Word, вы можете сохранить его в виде записи блога. В Word сохраняется не менее объем информации, чем при работе с содержимым. Опубликованный документ использует стили блога.
-
Щелкните файл > поделиться > Опубликовать как запись блога.
-
Щелкните Опубликовать как запись блога.
При первой публикации документа в блоге Word поможет зарегистрировать свою учетную запись в блоге.
Сохранение на OneDrive и общий доступ
Вы можете поделиться документом с друзьями и коллегами, сохранив его в OneDrive и Приглашай для просмотра.
-
Щелкните файл > сохранить как > OneDrive.
-
Выберите расположение в OneDrive папках.
-
Введите имя файла и нажмите кнопку Сохранить.
Затем пригласить других пользователей для просмотра вашего документа. Если у пользователей нет Word, документ автоматически откроется в Word в Интернете.
-
Откройте вкладку Файл и выберите пункты Общий доступ > Пригласить пользователей.
-
Добавьте свои адреса электронной почты.
-
Выберите команду Общий доступ.
Дополнительные сведения можно найти в разделе предоставление общего доступа к документу с помощью SharePoint или OneDrive.
Сохранение в виде PDF-файла
Чтобы преобразовать документ в PDF- файл , вы можете опубликовать его на сайте, а затем выбрать команду > Сохранить как. В списке Тип файла выберите PDF.
Нужна дополнительная помощь?
Ответка
Задайте свой вопрос и получите ответ от профессионального преподавателя. Выберите лучший ответ.
Задать вопрос
Задать вопрос
-
Все вопросы
Мария
Информатика и ИКТ
5 — 9 классы
28.04.2020 14:26
Ответы на вопрос
Записаться
Бесплатные вебинары с ответами на все вопросы у нас на канале!
Смотреть
Скачать материал
Скачать материал
- Сейчас обучается 84 человека из 34 регионов
- Сейчас обучается 122 человека из 48 регионов
- Курс добавлен 19.01.2023
Описание презентации по отдельным слайдам:
-
1 слайд
Выполнил учитель информатики Самусенко Е. С.
Тема урока:
«Создание
web-сайта» -
2 слайд
Цели урока:
Обучающие:
дать понятие, что такое сайт, раскрыть назначение веб-сайтов и их использования;
систематизировать знания о структуре веб-страницы, веб-сайта, языка разметки, гипертекста HTML;
оформление сайта.Воспитательные:
формирование навыков самоорганизации;
способствовать воспитанию информационной культуры учащихся;
формирование настойчивости в достижении поставленной цели, умения работать;
воспитывать аккуратность, внимательность, дисциплинированность. -
3 слайд
Что такое сайт?
Сайт — это ресурс, состоящий из веб-страниц (документов), объединенных общей темой и взаимосвязанных между собой с помощью ссылок. Сайт регистрируется на одно физическое, либо юридическое лицо и обязательно привязывается к конкретному домену, который также является его адресом. -
4 слайд
Что такое сайт?
Сайт также представляет собой информационную единицу в сети Интернет. Один сайт может иметь как одну единственную страницу, так и огромное их количество.
Каждая страница сайта — это текстовый файл или их набор, который написан на языке разметки или программирования (html, css и т.д.). После загрузки на наш компьютер, все файлы такого формата проходят обработку браузером, и в конечном итоге перед нами предстает готовая страница сайта. -
5 слайд
Достоинства web-сайтов
Малый информационный объём («лёгкие»).
1
Пригодны для просмотра в разных Операционных Системах (ОС).
2
3
4
Динамичные.
Интерактивные. -
6 слайд
Технологии создания сайта
Существует несколько способ создания сайтов:
Сайт можно создать, воспользовавшись языком разметки гипертекста HTML (Hyper Text Markup Language). В этом случае в текстовом редакторе (например, в Блокноте) текст, который хотят разместить на страницах сайта, размечают специальными метками, называемыми , тегами. Теги содержат указания о том, как должен выглядеть текст.
1
Можно документ, подготовленный в текстовом процессоре (Microsoft Word, Writer), сохранить как web-страницу (в формате HTML).
2Можно воспользоваться специальным программным обеспечением – визуальными HTML – редакторами (Adobe Dreamwearver, Microsoft FrontPage) или конструкторами сайтов (uCoz, Сайткрафт, Конструктор школьных сайтов).
3
-
7 слайд
Кто такой Web-дизайнер?
Web-дизайнер – это специалист, проектирующий структуру web-сайта, а также подбирающий способы подачи информации и выполняющий художественное оформление web-проекта.
Web-дизайнер должен знать современные web-технологии; желательно, чтобы он имел художественное образование. -
8 слайд
Содержание и структура сайта
Содержание сайта должно быть таким, чтобы отражать творческую жизнь участников объединения, привлекать внимание единомышленников.
Структура (план) сайта – это разбиение общего содержания на смысловые разделы и отдельные страницы с указанием связей между ними. Сайт может включать в себя общую информацию (программу расписания занятий, фамилию, имя, отчество руководителя и т.д.), страницу новостей и многое другое. -
9 слайд
Язык разметки гипертекста HTML
HTML (Hyper Text Markup Language) — язык гипертекстовой разметки.
Описательный язык разметки HTML имеет свои команды, которые называются тегами.
Тег – это элемент HTML, представляющий из себя текст, заключённый в угловые скобки <>. Тег является активным элементом, изменяющим представление следующей за ним информации.
Теги пишутся английскими буквами (прописными, строчными).
Обычно используются два тега – открывающий (<тэг>) и закрывающий (</тэг>). -
10 слайд
Основные теги для создания web-страниц
-
11 слайд
Структура web-страницы
Любая страница имеет
следующую структуру:<html>
<head>
<title> Компьютер </title>
</head>
<body>
Всё про компьютеры
</body>
</html>
При просмотре в браузере
файла, получим следующий
вид: -
12 слайд
Атрибут
Тег может иметь несколько количество атрибутов.
Атрибут — это компонент тега, содержащий указания, как браузер должен воспринять и обработать тег.
Синтаксис тега с атрибутом:
<тег атрибут = “значение”> -
13 слайд
Гипертекст
Термин «гипертекст» впервые был введён Тедом Нельсоном в 1969 году.
Гипертекст – это текст, который с помощью своей структуры позволяет переходить от одного текста к другому.
На языке «компьютера» гипертекст – это текст, который содержит в себе ссылки. -
14 слайд
Домашнее задание:
1в.) С помощью каких инструментов можно создавать сайты?
2в.) Что такое тег?
3в.) Перечислите основные теги для создания web-страниц?
4в. ) Что такое гипертекст?
5в.) Что такое атрибут?
6в.) Что такое структура сайта? -
15 слайд
Выполнил учитель информатики Самусенко Е. С.
Спасибо
ЗА ВНИМАНИЕ!
Краткое описание документа:
Цели урока:
Обучающие:
Øдать понятие, что такое сайт, раскрыть назначение веб-сайтов и их использования;
Øсистематизировать знания о структуре веб-страницы, веб-сайта, языка разметки,гипертекста HTML;
Øоформление сайта.
Воспитательные:
Øформирование навыков самоорганизации;
Øспособствовать воспитанию информационнойкультуры учащихся;
Øформирование настойчивости в достижении поставленной цели, умения работать;
Øвоспитывать аккуратность, внимательность, дисциплинированность.
Найдите материал к любому уроку, указав свой предмет (категорию), класс, учебник и тему:
6 211 241 материал в базе
-
Выберите категорию:
- Выберите учебник и тему
- Выберите класс:
-
Тип материала:
-
Все материалы
-
Статьи
-
Научные работы
-
Видеоуроки
-
Презентации
-
Конспекты
-
Тесты
-
Рабочие программы
-
Другие методич. материалы
-
Найти материалы
Другие материалы
- 06.07.2020
- 278
- 2
- 05.07.2020
- 6178
- 88
Рейтинг:
1 из 5
- 05.07.2020
- 9128
- 168
- 05.07.2020
- 5354
- 116
Рейтинг:
5 из 5
- 05.07.2020
- 1081
- 24
Рейтинг:
3 из 5
- 05.07.2020
- 41867
- 972
Вам будут интересны эти курсы:
-
Курс повышения квалификации «Информационные технологии в деятельности учителя физики»
-
Курс повышения квалификации «Внедрение системы компьютерной математики в процесс обучения математике в старших классах в рамках реализации ФГОС»
-
Курс повышения квалификации «Организация работы по формированию медиаграмотности и повышению уровня информационных компетенций всех участников образовательного процесса»
-
Курс повышения квалификации «Развитие информационно-коммуникационных компетенций учителя в процессе внедрения ФГОС: работа в Московской электронной школе»
-
Курс повышения квалификации «Использование компьютерных технологий в процессе обучения в условиях реализации ФГОС»
-
Курс повышения квалификации «Применение MS Word, Excel в финансовых расчетах»
-
Курс профессиональной переподготовки «Управление в сфере информационных технологий в образовательной организации»
-
Курс профессиональной переподготовки «Теория и методика обучения информатике в начальной школе»
-
Курс повышения квалификации «Современные языки программирования интегрированной оболочки Microsoft Visual Studio C# NET., C++. NET, VB.NET. с использованием структурного и объектно-ориентированного методов разработки корпоративных систем»
-
Курс повышения квалификации «Применение интерактивных образовательных платформ на примере платформы Moodle»