HTML-редактор NVU
Основные приёмы работы, создание простого сайта
Краткие сведения о программе
HTML-редактор NVU позволяет создавать сайты различной сложности, даже без знания языка HTML. Окно программы после запуска выглядит следующим образом:
В верхней части окна находятся панели инструментов, позволяющие быстро и просто редактировать создаваемую web-страницу: вставлять таблицы, изображения, формы и ссылки, форматировать и редактировать текст и т.д.
В левой части окна расположен Менеджер сайта, который позволяет увидеть список web-страниц сайта и работать с ними.
Большую часть окна занимает рабочая область: именно в ней нужно создавать и редактировать текущую web-страницу. В рабочей области может быть открыто несколько web-страниц, в этом случае переходить от одной страницы к другой можно будет с помощью вкладок.
Внизу рабочей области находятся вкладки, позволяющие изменить режим отображения документа. Таких режимов четыре:
Обычный режим – в этом режиме документ можно просматривать и редактировать так же, как в текстовом процессоре.
HTML-теги – в этом режиме в тексте документа отображается часть html-тегов, что позволяет более удобно править web-страницу со сложной структурой.
Код – в этом режиме можно просмотреть и отредактировать html-код web-страницы.
Предварительный просмотр – данный режим предназначен для просмотра web-страницы в таком виде, в каком она будет выглядеть в окне программы-браузера. Но следует учитывать, что в этом режиме, например, ссылки не будут рабочими – для этого страницу нужно открывать в браузере. Предварительный просмотр позволяет оценить внешний вид страницы, но не правильность и эффективность её функционирования.
Задание 1: Создание простой web-страницы с текстом и изображениями
В своей папке создайте папку, в которой будете хранить все web-страницы, образующие ваш web-сайт.
Скопируйте в вашу папку целиком папку Picts. Так же скопируйте в вашу папку файл subd.doc – он пригодится для выполнения последнего задания.
Запустите HTML-редактор NVU.
Скопируйте в рабочую область следующий текст:
Иерархическая модель данных
Все элементы базы данных вместе со связями между собой образуют иерархическую (древовидную) структуру. Каждый элемент может быть связан с несколькими элементами более низкого уровня и только с одним элементом более высокого уровня.
Выделите первую строку. Обратите внимание, что над рабочей областью появилась линейка, показывающая, какую часть от окна будет занимать данная строка. Растяните эту область на всю ширину рабочей области.
На панели инструментов из раскрывающегося списка стилей текста выберите Заголовок 1.
Используя панель инструментов, выровняйте первую строку по центру.
Выделите остальной текст, установите для него стиль Абзац и выравнивание по ширине.
Сохраним текущую страницу – выполните Файл/Сохранить.
При первом сохранении страницы вам будет предложено задать её заголовок – этот заголовок будет отображаться в подписи окна, когда web-страница открыта в браузере. Задайте заголовок страницы – Иерархическая модель данных. Нажмите ОК и после этого сохраните страницу обычным образом под именем ierarhiya в вашу папку для сайта (обратите внимание, что файл будет сохранён с расширением html).
В рабочей области перейдите на строчку ниже.
Щёлкните на панели инструментов значок Изображение.
В открывшемся диалоговом окне укажите путь к вашей папке Изображения, файл ierarhiya.jpg.
В этом же диалоговом окне в разделе Альтернативный текст укажите Иерархическая модель данных – данный текст будет появляться на странице в случае, если просмотр изображений в браузере будет отключён. Нажмите ОК.
Сохраните сделанные изменения: Файл/Сохранить.
Просмотрите, как выглядит ваша страница в различных режимах просмотра.
Запустите Мой Компьютер и откройте созданную страницу в любом браузере, чтобы увидеть, как страница будет выглядеть после публикации в Интернет.
Создадим ещё одну аналогичную web-страницу: выполните Файл/Создать.
В открывшемся диалоговом окне укажите, что нужно создать пустой документ в новой вкладке. Нажмите ОК.
На новую вкладку добавьте следующий текст:
Сетевая модель данных
Сетевая модель похожа на иерархическую, но в данном случае каждый элемент базы данных может быть связан с несколькими элементами более высокого уровня.
Оформите этот текст так же, как и на предыдущей странице. Добавьте после текста изображение из файла Set.jpg.
Сохраните файл под именем Set.html, задав странице заголовок Сетевая модель данных.
Задание 2: Создание страницы с якорем, списки
Создайте новую страницу на новой вкладке.
Скопируйте на неё следующий текст:
Реляционная модель данных
Реляционная модель основана на понятии «отношение», физическим представлением которого является таблица. Реляционная модель впервые была предложена Э.Ф. Коддом в 1970 г.
Реляционная модель БД рассматривает все данные как группы таблиц или отношений, которые содержат фиксированные количества рядов и столбцов. Иными словами многие объекты, используемые в реляционной базе данных, аналогичны объектам электронных таблиц.
Термин «реляционная» указывает на то, что между таблицами базы данных могут быть установлены различные отношения.
Оформите этот текст так же, как и на предыдущей странице.
Сохраните страницу под именем relation.html с заголовком Реляционная модель данных.
Перейдите на новую строку и скопируйте текст:
Свойства реляционной таблицы
Примените к этой строке стиль текста Заголовок 2.
Перейдите на новую строку и щёлкните на панели инструментов значок Нумерованный список.
Введите первый пункт списка: «Для каждой реляционной таблицы должен быть задан список полей с указанием ограничений для них».
Нажмите Enter и введите второй пункт списка: «Добавление новой записи производится в конце таблицы».
Аналогичным образом задайте ещё два пункта списка: «Число записей в таблице не ограничивается» и «Реляционная таблица не должна содержать повторяющихся строк (реляционная таблица обязательно должна иметь первичный ключ)».
Перейдите на новую строку и вновь щёлкните на панели инструментов значок Нумерованный список, таким образом, вы закончите создания списка.
Введите текст «Ключевые поля» и задайте ему стиль Заголовок 2.
Перейдите на новую строку и щёлкните на панели инструментов значок Маркированный список.
Задайте следующие пункты маркированного списка: «Первичный (главный) ключ - уникально идентифицирует каждую запись в таблице и не имеет повторяющихся значений. (Например, в таблице Сотрудник – поле Табельный номер)», «Внешний ключ – поле (группа полей), которое является ссылкой на первичный ключ другой таблицы. Может содержать повторяющиеся значения», «Альтернативный ключ – является «заменителем» главного ключа, обычно используется для поиска данных в таблице. Может содержать повторяющиеся значения» и «Потенциальный ключ – поле, которое может выступать в качестве первичного ключа таблицы».
Перейдите на новую строку и отключите ввод списка.
Выделите определяемые понятия в маркированном списке (Первичный ключ, Внешний ключ и т.д.) и установите для них жирный курсив.
После списка добавьте текст:
Связи между таблицами
В реляционной базе данным между таблицами могут существовать связи трёх видов: один-к-одному, один-ко-многим, многие-ко-многим.
Связь один-к-одному: одной записи из первой таблицы соответствует одна и только одна запись из второй таблицы, и наоборот: одной записи из второй таблицы соответствует одна и только одна запись из первой таблицы (например: Сотрудник и Паспортные данные сотрудника).
Связь один-ко-многим: одной записи из первой таблицы может соответствовать несколько записей из второй таблицы, но при этом: одной записи из второй таблицы может соответствовать одна и только одна запись из первой таблицы (например: Группа и Студент).
Связь многие-ко-многим: одной записи из первой таблицы может соответствовать несколько записей из второй таблицы, и наоборот: одной записи из второй таблицы так же может соответствовать несколько записей из первой таблицы. (Например: Студент и Преподаватель). Этот вид связи не поддерживается некоторыми СУБД.
Сущность, содержащую внешние ключи будем называть дочерней, а сущности, на первичные ключи которых ссылаются данные внешние ключи, будем называть родительскими.
Примените к строке «Связи между таблицами» стиль текста Заголовок 2, остальной текст разбейте на абзацы, определяемые понятия выделите жирным курсивом.
Отдельные абзацы отделите пустыми строками.
Перейдите на новую строку и введите текст «Наверх».
Создадим якорь – щёлкнув на тексте Наверх мы должны будем перейти в начало страницы. Такие якоря обычно используют, если текст на странице очень большой и его приходится пролистывать в окне браузера. С помощью якорей можно переходить в начало и конец страницы или в любую её часть, то есть возможно создавать оглавление для отдельной web-страницы. Поднимитесь наверх страницы и установите курсор в строке заголовка: на это место мы прикрепим якорь, то есть именно сюда будем переходить по ссылке.
На панели инструментов щёлкните значок Якорь.
В открывшемся диалоговом окне зададим имя якоря – top.
Вернитесь в конец страницы и выделите текст Наверх.
На панели инструментов щёлкните значок Ссылка.
Из раскрывающегося списка выберите имя созданного якоря (обратите внимание, что программа автоматически прикрепила якоря к тексту, являющемуся заголовком).
Самостоятельно внизу страницы создайте оглавление, позволяющее перейти ко всем заголовкам второго уровня на странице.
Сохраните страницу и откройте её через браузер. Убедитесь, что все ссылки работают должным образом.