Назначение основных инструментов и их применение для создания страниц.
Рассмотрим внимательнее рабочее пространство: оно разделено на два окна, оба пока пустые. В правой части будем работать, поэтому окно больше. Левое окно – меньше, это – менеджер сайтов. Наш учебник тоже будет иметь структуру обычного сайта. С главной страницей, с навигацией. Если левого окна нет, то вероятно вы нечаянно его закрыли. Заходим в меню Вид -Показать/Скрыть.
Здесь стоят галочки у тех элементов, которые показаны на экране. Менеджер сайтов - последняя строка. Если здесь нет галочки - щелкаем левой кнопкой мыши по пункту меню, окно Менеджера появится. Можно в Меню не заходить, а воспользоваться функциональной клавишей F9.
Щелкнув по кнопке «Редактировать сайты» увидим окно, где в самую верхнюю строку введем название нашей будущей книги.
Информацию о сервере не заполняем – она нужна в случае, когда создаваемые страницы сразу из программы предполагается загружать на сервер. Мы не будем этого делать. С помощью кнопки «Выбрать директорию» указываем путь к папке, которую создали для нашей книги. Пользователь-пароль нам не нужны, жмем Ok
Название нашего учебника появилось в панели менеджера сайтов. Слева от него – плюсик. Щелчок по нему левой кнопкой мыши развернет структуру нашего каталога. В каталоге пока только одна вложенная папка.
Научимся создавать страницы сайта. Прежде чем начнем создавать страницы, поменяем кодировку. Считаю, что лучше будет с кодировкой UTF-8 – ее и установим. Если оставить ту, что по умолчанию – Windows-1251 –ничего страшного не произойдет. Потому, если решили следовать совету преподавателя, то изменим кодировку страницы: Заходим в меню Вид-Кодировка. Затем выбираем Юникод (UTF-8). Это стандартная кодировка, потому будет корректно отображаться в любом браузере.
Инструменты верхней панели знакомы всем, они такие же как инструменты Office, нижнюю часть правого окна рассмотрим: внизу расположены вкладки представления нашей страницы(«обычный», «html-теги», «код») и предварительный просмотр страницы в браузере
Перейдя на вкладку «Код», увидим
Вернемся в Обычный режим, продолжим работу.
Простая табличная верстка. Создание новых страниц.
Для правильного отображения содержимого окна в браузере лучше всего подходит табличная структура содержимого.
Щелчком левой кнопки таблицы по значку вставки таблицы (или через меню Вставка - Таблица) переходим к первичной настройке таблицы.
Сразу перейдем на вкладку Точная и сделаем точный выбор – Нам нужно 5 строк, 1 столбец. Ширину таблицы зададим в процентах – тогда в зависимости от выбранного разрешения экрана, наша таблица сожмется или растянется – она будет «резиновой». Рамка таблицы нам не нужна – поставим значение 0.
Для того, чтобы задать поля для содержимого нашей таблицы перейдем на вкладку «Ячейка» и поставим отступ от границ ячеек и расстояние между соседними ячейками по 5 px. В строках нашей таблицы выравнивание будет задано различное, потому здесь оставляем значение «Не определено».
Теперь – Ok, таблица появилась в рабочем окне. Сейчас она сдвинута влево – по умолчанию все содержимое страницы выравнивается по левому краю. Для выравнивания по центру дважды щелкнем левой кнопкой в любом месте таблицы, появится меню «Свойства таблицы»
Выберем вкладку «таблица». В открывшемся окне выберем выравнивание по центру. Здесь же можно выбрать цвет фона таблицы. Или оставить так, как есть – таблица будет прозрачной.
Вернемся на вкладку «Ячейки». Наша таблица состоит из строк. В выпадающем меню в модуле «Выделение» в выпадающем меню выбираем «Строки».В случае на рисунке в настоящий момент выделена нижняя строка – именно в ней мы щелкнули левой кнопкой мыши, когда переходили к свойствам таблицы. Для этой строки зададим выравнивание содержимого как на рисунке – горизонтальное – влево, вертикальное – посередине. Нажимаем кнопку «Применить»
Переходим к предыдущей строке. Жмем на кнопку в окне «Свойства таблицы» Область выделения в таблице при этом переместится на одну строку выше. Здесь зададим оба отступа по центру и посередине. Ставим галочки в окошки, нажимаем – Применить.
Снова Жмем на кнопку Ставим выравнивание как в нижней строке – посередине и влево. Применяем изменения.
Еще раз жмем на кнопку . Снова – посередине и по центру. Применяем изменения. Переходим в верхнюю строку. Выравниваем содержимое горизонтально вправо, вертикально – посередине.
Теперь – Ok, наша таблица по горизонтали сместилась в центр. Вертикальное выравнивание для всей таблицы задавать не будем – по умолчанию таблица будет смещена к верхнему краю.
Еще раз рассмотрим наши пять строк.
На верхней строке мы поместим логотип или заголовок нашего учебника, а может быть и то и другое. Выравнивание – вправо, посередине .
Во второй будет заголовок страницы. Выравнивание по центру.
В третьей строке поместим основное содержимое (текст, рисунки, схемы, видео). Выравнивание поставим, когда будем размещать содержимое.
В четвертой будет находиться навигационный блок, предусмотрим возможность быстрого перехода между страницами нашего учебника. Выровняли по центру.
В самой нижней строке, как обычно, копирайт. Выровняем по левому краю.