Если вы все-таки решили публиковаться в Интернете, то следует разобраться — как и какими средствами создаются Web-страницы?
Существует несколько способов создания сайтов. По уровню программной реализации можно выделить два основных способа: ручной и с использованием конструкторов.
1.1. Создание сайтов с помощью простейших текстовых редакторов
Web-страница представляет собой текстовый файл, содержащий описание страницы на языке НТМL — (НуреrТехt Маrk-Uр Language — язык разметки гипертекста). Это текстовый файл, содержащий воспроизводимый на экране текст, управляющие команды (теги), с помощью которых форматируется текст, организуются гиперссылки, присоединяются встроенные объекты, создаются формы для интерактивного контакта с пользователями.
Но одиночная Web-страница, не связанная ссылками с другими Web-страницами, в настоящее время почти не встречается. Обычно при создании сайта несколько страниц связываются между собой ссылками, образуя Web-узел. Значит, Web-узел — это связанная система Web-страниц, и, говоря о Web-странице, мы подразумеваем Web-узел, или сайт.
Создать сайт за 30 секунд (НОВАЯ НЕЙРОСЕТЬ )
Выражаясь техническим языком, базовая страница (homepage) — это интерактивный Web-узел. Web-узел может быть малым (2. 3 с.), средним (10. 20 с.) или большим (порядка 30 с. и более).
Как известно, текстовые файлы создаются с помощью простых текстовых редакторов. Таким текстовым редактором в операционной системе Windows является «Блокнот». Но чтобы создавать сайты в Блокноте, требуется знание языка НТМL. Это наиболее сложный способ Web-дизайна. Фактически он сводится к программированию на языке НТМL.
Вот пример содержания файла family.htm главной странички семейного сайта, открытого в Блокноте:
В результате семейный сайт будет сформирован из файла главной страницы family.htm и файлов с другими страницами father.htm,mother.htm, son.htm, timka.htm, связанных с главной страницей с помощью гиперссылок. Кроме того, к странице присоединен графический файл photo.gif, в котором хранится семейная фотография.
Фактически файл типа *.htm — это программа на языке НТМL. Браузер является интерпретатором этой программы, в результате выполнения которой на экране появляется изображение страницы в том виде, в каком ее задумал автор. Вот как будет выглядеть данная страница в среде обозревателя Internet Explorer.
Среда браузеров, работающих в операционной системе Windows, имеет характерный вид для приложений этой системы. Рассмотрим элементы среды Internet Explorer по изображению на рис. 1 в последовательности сверху вниз.
Рис. 1. Окно MS Internet Explorer с семейной Web-страницей
Строка заголовка расположена вверху. В ней отражается титульное название открытой Web-страницы.
Информатика 9 класс (Урок№15 — Создание веб-сайта.)
Строка меню содержит команды главного меню. Эти команды можно разделить на три группы: команды настройки программы, команды навигации в Интернете, команды работы с принятыми файлами.
Панель инструментов содержит командные кнопки для удобства выполнения наиболее часто используемых действий.
Адресная строка отображает URL-адрес текущей Web-страницы.
Рабочее поле содержит образ текущей Web-страницы.
Строка состояния (самая нижняя строка на экране) во время загрузки документа отражает ход процесса загрузки; кроме того, в ней можно получить URL-адрес документа, на который указывает гиперссылка, если установить указатель мыши на эту гиперссылку.
Итак способ создания Web-страниц с помощью простых текстовых редакторов достаточно трудоемкий, так как приходится самому расписывать все тэги.
Источник: studfile.net
Параграф 4.4 Создание web-сайта
Учебник по Информатике 9 класс Босова
of your page —>
1. Ознакомьтесь с материалами презентации к параграфу, содержащейся в электронном приложении к учебнику. Дополняет ли презентация информацию, содержащуюся в тексте параграфа?
2. С помощью каких инструментов можно создавать сайты?
— Можно воспользоваться языком разметки гипертекста HTML
— Можно документ, подготовленный в текстовом процессоре, сохранить как web-страницу в формате HTML
— Можно воспользоваться специальный ПО — визуальными HTML-редакторами или конструкторами сайтов
3. Что такое структура сайта?
Структура сайта — разбиение общего содержания на смысловые разделы и отдельные страницы с указанием связей между ними.
4. Продумайте и изобразите в виде графа структуру одного из следующих сайтов:
Сайт «Наш класс»
Сайт «Моя семья»
Сайт «Информатика»
5. Перечислите основные элементы, размещаемые на страницах сайта.
Основные элементы:
— Шапка сайта (header)
— Левая и правая колонка (или одна из них или просто без колонок)
— Контент сайта (body)
— Подвал (footer)
6. Какие рекомендации следует учитывать при наполнении страниц сайта информационными материалами?
• Не ставьте точку в названиях сайта и страниц, если они состоят из одного предложения.
• Названия пунктов меню делайте краткими; недопустимо растягивание названия пункта на несколько строк.
• Не выбирайте для страниц пёстрый фон, на таком фоне текст читается с трудом.
• Не размещайте на странице слишком много информационных и художественных блоков.
• Не пишите слишком длинных текстов. Текст разбивайте на небольшие абзацы, отделяя их друг от друга пустыми строками.
• В каждом абзаце используйте одни и те же приёмы форматирования.
7. С какой целью проводится тестирование сайта?
Тестирования происходит для того, чтобы сайт правильно отображался разными браузерами: тексты хорошо читаются, рисунки расположены на своих местах, гиперссылки переводят на нужные страницы.
8. Что является основным недостатком бесплатного хостинга?
Недостатками бесплатного хостинга могут быть:
— Небольшое дисковое пространство
— Ограничение размера отдельного файла
— Доменное имя в основном третьего уровня
— Компания автоматически может добавить рекламу на страницы вашего сайта
Источник: 5urokov.ru
§ 13. Инструменты для разработки wеb-сайтов
Вернемся к разговору о wеb-сайтах и узнаем, с помощью каких средств можно самостоятельно создать сайт.
Содержимое wеb-сайта может включать в себя все доступные в настоящее время типы информации, а также интерактивные средства для ведения диалога с пользователем (форумы, гостевые книги, формы обратной связи и т. д.). Помимо этого, каждый сайт может иметь индивидуальный дизайн (хотя следует заметить, что часть сайтов создается с применением готовых шаблонов).
Понятие языка разметки гипертекста
В предыдущем параграфе уже говорилось о том, что основой любого сайта является язык разметки гипертекста HTML (HyperText Markup Language). HTML включает в себя несколько десятков так называемых тегов (команд), каждый из которых определяет внешний вид отдельного элемента страницы: текста, изображения, таблицы, списка и др. Например, следующая запись в НТМL-документе:
означает, что указанный текст («Моя домашняя страница») должен отображаться в окне браузера шрифтом Arial, цвет шрифта — красный.
Визуальные НТМL-редакторы
Для создания сайта необязательно знать язык HTML. Существует множество доступных визуальных НТМL-редакторов, их другое название — WYSIWYG-peдaктopы, позволяющих создавать сайты без знания данного языка. WYSIWYG расшифровывается как: What You See Is What You Get — что видишь, то и получаешь. Работа в таких редакторах происходит с визуальными формами, а не с тегами.
Например, чтобы сделать шрифт текста жирным, надо просто выделить этот текст и нажать соответствующую кнопку в меню редактора. После этого редактор вставит в НТМL-код необходимые теги, а разработчик сайта увидит на странице уже итоговый результат.
Правда, у визуальных редакторов есть ряд недостатков. В частности, сгенерированный ими НТМL-код далеко не всегда бывает оптимальным, т. е. размер файла может получиться гораздо больше, чем при его непосредственном описании на языке HTML. Кроме того, в этих редакторах есть масса настроек, которые несведущему человеку будут просто непонятны. Например, человек, впервые создающий сайт, может не знать, что такое «якорь» ссылки или «альтернативный текст» изображения. Поэтому хоть какие-то минимальные сведения об используемых терминах необходимо предварительно получить.
Существует достаточно много программных продуктов, позволяющих в визуальном режиме создавать макет сайта и заполнять его содержимым. Кратко опишем наиболее распространенные.
1. Adobe Dreamweaver — один из наиболее популярных коммерческих программных продуктов, предназначенных для разработки сайтов. Изначально был разработан и поддерживался компанией Macromedia (до 2005 г.). Следующие версии, начиная с Dreamweaver СSЗ (2007 г.), выпускает компания Adobe. Редактор содержит огромный выбор всевозможных инструментов, удобный интерфейс, тонкие настройки, позволяющие подогнать программу под нужды wеЬ-мастера, а также встроенный FTP-менеджер для загрузки файлов на сервер.
Начинающий пользователь может создавать страницы практически без знания HTML — добавляя элементы страницы и указывая их параметры с помощью встроенного мастера (рис. 2. 7).
Рис. 2.7. Мастер создания таблиц пакета Adobe Dreamweaver CS3
Официальный сайт для загрузки — http://www.adobe.com/ downloads/.
2. Microsoft Office SharePoint Designer 2007 — визуальный HTML-редактор и программа для web-дизайна от компании Microsoft (рис. 2.8). Является одним из компонентов пакета Microsoft Office 2007, но при этом требует отдельной установки.
Данный пакет относится к числу достаточно сложных редакторов, позволяющих создавать не только простейшие wеЬ-страницы, но и полноценные web-узлы, предназначенные для коллективной работы пользователей. Более новая версия программы Microsoft Office SharePoint Designer 2010 максимально завязана на совместную работу большого числа людей над одним проектом, что требует установки соответствующего программного обеспечения на сервере, где хранится данный проект.
Рис. 2.8. Окно программы Microsoft Office SharePoint Designer 2007 после первого запуска
Изначально этот продукт относился к разряду коммерческих, но с 2009 года стал распространяться бесплатно для всех желающих на официальном сайте Microsoft Office (http://office.microsoft. com/ru-ru/sharepoint-designer-help).
3. WebPageMaker — простой, быстрый и удобный редактор для создания сайтов. Пользователь с помощью мышки перетаскивает в необходимые места на странице заранее заготовленные тексты и графику. В состав программы входит большое количество готовых шаблонов, которые можно использовать как основу для будущего сайта.
Встроенный FTP-менеджер позволяет быстро загрузить готовый сайт на сервер. Сайты, сделанные в WebPageMaker-3.0.3, одинаково корректно отображаются во всех основных типах браузеров.
К одному из существенных достоинств редактора относится очень небольшой объем дистрибутива (всего 3,5 Мбайт). Кроме того, существует так называемая версия portable, которая не требует установки (ее объем — 6 Мбайт).
4. Nvu — свободно распространяемый визуальный HTML-редактор. Преимущество редактора Nvu состоит в его кроссплатфор-менности: есть версии под Linux, Microsoft Windows и MacOS.
Помимо типовых для wеb-редакторов функций, Nvu содержит интегрированный FTP-менеджер, мощную поддержку для форм, таблиц и шаблонов. Редактор очень прост в использовании. В последние несколько лет Nvu не развивается, но потенциал этого редактора продолжает реализовываться в редакторе KompoZer.
5. KompoZer (рис. 2.9) — ответвление от редактора Nvu. KompoZer является свободно распространяемой wеb-авторской системой, которая сочетает в себе менеджер для wеb-файлов и визуальный редактор. По сравнению с Nvu, KompoZer создает более короткий код разметки.
Рис. 2.9. Окно программы KompoZer
KompoZer чрезвычайно прост в использовании, что делает его привлекательным для пользователей, которые хотят создавать сайты без получения серьезных технических знаний. KompoZer может рассматриваться в качестве редактора для создания небольших wеb-проектов. Объем дистрибутива — 7 Мбайт.
Система основных понятий
Вопросы и задания
- Что такое wеb-сайт?
- Какой язык используется для разработки сайтов?
- В чем преимущества визуальных HTML-редакторов?
- В чем недостатки визуальных HTML-редакторов?
- Какой из известных вам программных продуктов вы порекомендовали бы использовать для создания мощного wеb-проекта, над которым работает большое число людей?
- В каких случаях удобнее использовать редакторы NVU или KompoZer?
Источник: tepka.ru