создание бесплатного сайта

 

Создание страницы в веб-редакторе Kompozer.

Для того чтобы создать страницу в Интернете, необязательно знать языки программирования, специальные термины и иметь большую практику в этом деле. Мы предполагаем, что пользователь имеет минимум знаний по работе с компьютером, однако понимает как пользоваться мышью и клавиатурой. Эта программа относится к редакторам типа WYSIWYG (от What You See Is What You Get, «что видишь, то и получишь»), то есть позволяет выводить на экране страницу сайта в том виде, в котором она появится в браузере (Браузер – программа для работы в интернете для просмотра страниц). Данная страница была создана при помощи программы Kompozer и покажем как на практике, описывая все действия, создать такую страницу.

Для того, чтобы вызвать программу, дважды щелкните по ее значку на рабочем столе.

На экране появится окно программы.

Внешний вид окна программы KompoZer

Оно содержит сверху: строчку режимов, некоторые режимы которых мы будем рассматривать по мере необходимости. Далее находится панель компоновки и панели форматирования, режимы которых будем также рассматривать по мере необходимости, а в конце статей дадим краткое описание.

Окно редактирования содержит саму страницу сайта, которая является пустой, так как мы еще ничего не создали. Панели редактирования имеют разные возможности для просмотра страницы сайта либо в виде того вида, как она будет выглядеть в браузере, либо в виде кода Html. И строка состояния содержит названия элемента страницы, на которой находится курсор. Все это будет далее рассмотрено на примерах.

Внешний вид окна программы KompoZer

Для нашей страницы нужно создать таблицу размером 5х3, в которой будут находиться все элементы страницы. Для этого щелкнем по кнопке Таблица на панели компоновки.

На экране появится окно режима (вкладка Простая) в котором выберем нужный нам формат, а именно 4 строки и 2 столбца и щелкнем по нижней правой выделенной ячейке левой кнопкой мыши.

Установка количества строк и столбцов в программе KompoZer

На экране появится выбранная нами таблица.

Вставка таблицы в программе KompoZer

Если бы нам нужна была таблица с большим количеством столбцов и ячеек, чем это можно сделать на вкладке Простая, то нужно перейти на вкладку Точная, в которой нужно указать количество строк и столбцов, например, 12 строк и 2 столбца.

Но вернемся к нашей таблице. Верхняя строка у нас предназначена для логотипа, поэтому две ячейки нужно объединить в одну. Для этого выделим их, то есть подведем курсор мыши на левую ячейку, нажмем левую кнопку мыши и, не отпуская ее, проведем курсор на правую ячейку.

Далее, щелкнем по выделенным ячейкам правой кнопкой мыши, то есть подведем курсор мыши к выделенным ячейкам и щелкнем правой кнопкой мыши. На экране появится контекстное меню, в котором выберем режим Объединить выбранные ячейки, то есть подведем курсор к этой надписи и щелкнем левой кнопкой мыши.

Список режимов для таблицы в контекстном меню в программе KompoZer

Из двух ячеек получим одну.

Также сделаем и с последней строкой, в которой будут находиться счетчики.

Объединение ячеек в программе KompoZer

Теперь объединим две правые ячейки, в которых будет находиться текст страницы.

Далее сохраним полученную таблицу на жесткий диск. Это можно было сделать или раньше, или позже, но нужно привыкать время от времени сохранять результат работы. Для этого, воспользуемся режимом Файл – Сохранить как.

На экране появится окно, в котором укажем имя страницы. Если бы она была главная страница, то лучше дать имя Index, так как при обращении к сайту, сначала находится директория, содержащая файлы, а затем открывается файл с именем Index. Укажем имя файла – 01 и создадим потом ссылку с главной страницы сайта на эту страницу. Для того, чтобы вызвать эту страницу из браузера, нужно будет указать следующий адрес, например, pcabc.ru/01.html, так как по умолчанию файл будет иметь расширение html. Далее нажмем на кнопку ОК.

Окно режима заголовка страницы в программе KompoZer

В следующем окне выберем директорию, в которой будет находиться наш файл и нажмем на кнопку Сохранить.

Файл сохранен. Далее для сохранения промежуточных и окончательных результатов будем пользоваться режимом Файл – Сохранить.

Вставим логотип, то есть рисунок, который заранее создадим в графическом редакторе, например, Paint, Gimp и других. Для этого установим курсор в ячейке первой строки. То есть, подведем курсор мыши на эту ячейку и щелкнем левой кнопкой мыши. При этом слева ячейки появится мигающая вертикальная черта.

Нажмем на кнопку Изображения.

В появившемся окне укажем путь к рисунку, воспользовавшись значком папки слева от поля Адрес изображения.

В поле Альтернативный текст укажем название рисунка, которое будет появляться на месте рисунка, если браузер не загружает рисунки. Обычно можно рисунки не загружать, когда передача данных от компьютера к провайдеру имеет маленькую скорость, например, установлен модем со скоростью 9.8 килобит. Однако такие маленькие скорости были характерны десять лет назад. Сейчас таким режимом редко кто пользуется. Можно также ввести текст в поле Всплывающая подсказка. Это означает, что при наведении курсора мыши на рисунок, около курсора будет всплывать текст, который мы введем в это поле. Переключатель Относительный URL оставим включенным (то есть, с зеленой галочкой в квадрате), так как будет указан относительный адрес рисунка, то есть относительно директории, в которой находится страница 01.html. Если выключить этот переключатель, то путь будет абсолютным, то есть, с самого начала и до файла, например, E:/sait/risunki. Таким образом, при копировании файлов на хостинг, при копировании той же структуры файлов, при относительном адресе ничего делать дополнительно не нужно. Если бы был абсолютный адрес, то нужно было бы переустанавливать ссылки.

Перейдем на вкладку Внешний вид. На этой вкладке имеется режим Расположение текста по отношению к изображению, которое содержит следующие режимы: Вверху, то есть будет сверху ячейки, Внизу, По центру, Вправо, окружить текстом слева, Влево, окружить текстом справа. Нам нужно выбрать режим По центру.

Рисунки, которые вставляются на страницу сайта лучше иметь в той же папке, что и сама исходная страница или в папке, расположенную там же. Таким образом, при пересылке файлов на сайт легче будет сохранить взаимосвязи (адреса ссылок).

Режим Свойства изображения в программе KompoZer

После заполнения нужных полей нажмем на кнопку ОК. Далее нажмем на кнопку центрирования рисунка.

Пользователи имеют компьютеры разного размера. Если размер экрана 800 х 480, то рисунок поместится более-менее нормально. Если экран имеет по горизонтали 1024 пикселей, то рисунок будет находиться слева экрана. Чтобы он находился по центру, выберем режим По центру.

Рисунок будет расположен по центру по вертикали и горизонтали.

Вставка рисунка в верхнюю ячейку таблицы в программе KompoZer

На следующем этапе введем названия ссылок в левую следующую ячейку. Для этого, щелкнем по этой ячейке левой кнопкой мыши и когда появится мигающая вертикальная черта, сначала нажмем на клавишу Enter, чтобы выделить строчкой введенное далее название, затем введем с клавиатуры название Главная.

Вставка текста в ячейку таблицы в программе KompoZer

Курсор будет находиться после последнего введенного символа. Нажмем дважды на клавишу Enter и курсор перейдет на следующую строчку. Наберем текст следующей ссылки и снова дважды нажмем на клавишу Enter. Также наберем и следующие ссылки. После ввода последнего текста снова нажмем на клавишу Enter.

Теперь установим ссылки. Для этого выделим текст Главная и нажмем на кнопку Ссылка. На экране появится окно, в котором в поле Введите адрес веб-страницы, локального файла или выберите якорь или заголовок с именем из списка укажем адрес страницы, на которую должен произойти переход при нажатии на текст Главная. В нашем случае это «pcabc.ru». Если бы страница находилась на локальном компьютере, то есть на компьютере, на котором находится и исходная страница, то можно было бы нажать на кнопку с раскрывающейся папкой, которая находится справа от поля и выбрать нужный файл на компьютере.

Установка ссылки в программе KompoZer

После установки ссылки, текст Главная будет подчеркнут и выделен синим цветом.

Также установим и другие ссылки.

Ссылки можно делать не только текстовые, но и графические. Можно нарисовать кнопки в графическом редакторе, вставить на страницу и воспользоваться кнопкой Ссылка.

Так как мы еще не указывали размер ячейки, то правая граница будет плавать в зависимости от типа браузера и от ширины экрана пользователя. Поэтому установим размеры этой ячейки. Для этого щелкнем по ячейке левой кнопкой мыши, чтобы установить курсор (вертикальную мигающую линию) и затем щелкнем правой кнопкой мыши. В появившемся панно выберем режим Свойства ячейки таблицы.

Как видно из рисунка сверху, по вертикали ячейка содержит 186 пикселей. Щелкнем по квадрату справа от названия Высота, в нем появится галочка, и введем в правой поле число 186.Также щелкнем по левому квадрату справа от названия Ширина и введем произвольное число в правое поле, например, 95, так как пока не знаем какое число вводить. Затем щелкнем по кнопке ОК.

Режим Свойства таблицы в программе KompoZer

Подведем курсор к границе слева от числа 95рх, которое указывает на размер ячейки по горизонтали и, когда курсор превратится в горизонтальную обоюдоострую стрелку, нажмем на левую кнопку мыши.

Далее перенесем эту границу влево до тех пор, пока она не приблизится к тексту ссылок и отпустим левую кнопку мыши. Размер по горизонтали будет изменен.

Затем выделим весь текст в ячейке.

Выделение текста в ячейке в программе KompoZer

И нажмем на кнопку выровнять по центру.

Весь текст в ячейке установится по центру, по горизонтали.

Выделение отдного слова в программе KompoZer

Ниже текущей ячейки будет находиться также меню, которое делается аналогичным образом. Ячейка справа будет содержать основной текст страницы. Данный текст можно набрать в этой ячейке, но мы покажем как набирать и форматировать текст в следующей статье. А сейчас предположим, что текст набран в каком-нибудь текстовом редакторе, например, Word из пакета Microsoft Office, Writer из пакета OpenOffice или Abword. Далее этот текст поместим в буфер обмена в текстовом редакторе и перейдем в окно программы Kompozer, щелкнув по ячейке справа. Когда появится вертикальная мигающая линия (курсор клавиатуры), то выберем режим Правка – Вставить.

Список режимов в меню Правка в программе KompoZer

Будет вставлен текст, но если имелись рисунки, то они не вставляются. Будем предполагать, что форматирование больше не нужно делать. Вставим рисунки, как вставляли логотип ранее.

Пример создания страницы в программе KompoZer

Если при этом ячейка со списком ссылок изменит свой формат, то подкорректируем его.

Теперь изменим границы таблицы, так как нам не нужно, чтобы они были видны при просмотре нашей страницы. Обратим внимание на статусную строку. На ней указаны операторы, которые ведут к ячейке, в которой находится курсор клавиатуры. Она содержит имена: <html> <body> <table> <tbody> <tr> <td> и так далее. Если подведем курсор к надписям, то на экране будет выделен соответствующий элемент в окне страницы. В нашем примере, если подвести курсор на надписи: <html> <body> <table> <tbody> то будет выделена вся таблица. Первая надпись выделяет всю страницу (<html>), вторая - тело страницы (<body>), третья таблицу - <table>, четвертая тело таблицы <tbody>. Так как все эти надписи практически совпадают для нашей страницы, то и выделена будет практически вся таблица, так как страница совпадает с таблицей. Если подвести курсор на надпись <tr>, то будет выделена текущая строка, <td> - ячейка и так далее.

Нам нужно выделить всю таблицу, поэтому нажмем, например, на надпись <table>, щелкнем правой кнопкой мыши и в появившемся меню выберем режим Свойства таблицу.

Список режимов по правой кнопке мыши в программе KompoZer

В блоке Обрамление и поля имеется три поля: Рамка, Поля и Поля внутри ячейки. Рамка определяет количество пикселов, которое занимает граница. Поля определяет количество пикселов между границами, Поля внутри ячейки число пикселов от границы таблицы и текстом в ячейке.

Например, для значений этих полей соответственно – 1, 7, 17 то вид в браузере будет как показано ниже.

Для значений 0, 0, 7 вид таблицы будет следующий.

В то же время в программе Kompozer вид границы также изменится и теперь будет выделено пунктирной красной линией.

По оформлению страницы осталось установить цвет фона. Для этого воспользуемся режимом Формат – Цвет и фон страницы.

В появившемся окне нас интересует поле использовать цвета. Для этого щелкнем по кружочку справа от этого переключателя.

Изменение цвета ссылки в программе KompoZer

Щелкнем по кнопке справа от названия Фон. В появившемся окне нужно выбрать цвет. Этот цвет можно выбрать либо в верхнем левом разноцветном окне, щелкнув мышью по выбранному цвету. При этом выбранный цвет появится в окне ниже кнопки Последний выбранный цвет.

Выбор цвета в программе KompoZer

Можно выбрать цвет из поля Предопределенные цвета, щелкнув по нужному квадрату с выбранным цветом. Можно указать цвет, введя числа в поля Оттенок, Насыщенность, Яркость или Красный, Зеленый, Синий либо вставив значение в поле Hex. Выбрав нужный цвет, щелкнем по кнопке ОК.

Сайт создан. Вид его показан ниже в браузере Google Chrome. Для того, чтобы просмотреть страницу с жесткого диска локального компьютера, укажем полный путь к данному файла и имя файла, например, F:\мой сайт\сайт\01\01.html.

Прсмотр созданной страницы в браузере


(переход на следующую страницу)

 

О↙О↘О↙О↘О↙О↘О↙О↘О↙О↘О↙О↘О↙О↘О↙О↘О











Информация данного сайта предназначена для бесплатного изучения персонального компьютера. Можно копировать, передавать материалы другим лицам.

Запрещается использовать материалы для получения личной финансовой выгоды, а также размещать на сайтах в интернете.


 
 
 
Яндекс.Метрика


Каталог@MAIL.RU - каталог ресурсов интернет