Создание сайта домашняя страница в kompozer-Создание сайта домашняя страница в kompozer

Другие методич. материалы. Создание сайта «Домашняя страница» в KompoZer. Создание таблиц и списков на .serp-item__passage{color:#} Рассмотрим процедуру создания простого сайта в редакторе KompoZer. Для начала опишем интерфейс программы и перечислим. В уроке рассмотрено создание веб-страницы в программе Kompozer.  Рассмотрим создание простой веб-страницы в редакторе KompoZer. Веб-страница будет посвящена дисциплине «Web-дизайн», которую изучают студенты профиля «Информационные технологии в. Рассмотрим процедуру создания простого сайта (домашней страницы) в редакторе KompoZer (версия b3). Для начала опишем интерфейс программы и перечислим основные приемы работы с текстом, гиперссылками и графикой.

Создание сайта домашняя страница в kompozer - § 14. Создание сайта «Домашняя страница»

Создание сайта домашняя страница в kompozer-Добавим к нашей главной адрес сайта заголовок: «Домашняя страница Пети Иванова». После задания настроек введите нужный текст. Помимо заголовка, добавим на страницу следующий текст: Дорогие друзья! Меня зовут Петя Иванов. Я рад приветствовать вас на своей домашней странице. Здесь я расскажу вам о себе, своей семье и друзьях. Для данного текста выберем шрифт Verdana, размер — Medium, стиль абзаца — Обычный текст, цвет текста — черный, выравнивание — по центру. Создадим на главной странице нашего сайта три гиперссылки.

Для начала отступим одну пустую строку от ссылка на продолжение и выберем выравнивание текста по центру либо через пункт создание сайта домашняя страница в kompozer Формат, либо с помощью кнопки По центру на Панели форматирования. Будет создана первая гиперссылка.

Создание сайта домашняя страница в kompozer-Создание web-сайта в программе Kompozer

Аналогично создадим еще две гиперссылки: Мои родители имя файла — parents. После выполнения этих действий вы должны увидеть приблизительно такой вариант главной страницы, как на рис. Просмотр кода Чтобы просмотреть или внести изменения в HTML-код документа, необходимо в панели режимов редактирования выбрать режим Код. Выберите данный режим и посмотрите полученный результат. Теперь создадим вторую страницу сайта рис. Задавать глобальные настройки страницы, создавать заголовок и добавлять текст вы уже умеете.

Создание сайта домашняя страница в kompozer

Вторая страница сайта «Домашняя страница Пети Иванова» Попробуйте самостоятельно задать параметры страницы и создать заголовок «О себе». Затем наберите следующий текст: Меня зовут Иванов Петя. Я родился 21 мая года в городе Перми. Мои создание сайта домашняя страница в kompozer предметы — математика и история. Кроме школы увлекаюсь шахматами и плаванием. Люблю читать, гулять с друзьями, смотреть телевизор и играть в компьютерные игры. У меня есть любимая собака Ральф, которой 4 года. Параметры заголовка аналогичны параметрам заголовка на главной странице сайта. Для текста используйте выравнивание по ширине. Остальные параметры аналогичны узнать больше текста главной страницы.

У Вас должен получиться примерно такой результат. Рисунок 13 Скопируйте в папку site изображение petya. Прежде, создание сайта домашняя страница в kompozer вставлять изображение, веб-страница должна быть обязательно сохранена! Для добавления изображения на веб-страницу необходимо: — убедиться, что веб-страница сохранена; — установить курсор в место вставки рисунка; — выбрать пункт Вставка — Изображение; — с помощью вкладки Адрес задать адрес изображения нажмите чтобы прочитать больше выбрать файл с изображением с помощью кнопки Открыть; — здесь же ввести текст всплывающей подсказки и альтернативный текст при необходимости ; — с помощью вкладки Размеры задать размеры рисунка если необходимо выполнить масштабирование ; — с помощью вкладки Внешний вид задать отступы от изображения до текста по горизонтали и вертикали, а также определить расположение текста по отношению к изображению; — если рисунок должен выполнять роль гиперссылки, то с помощью вкладки Ссылка задать адрес документа, на который будет осуществляться переход.

Для этого выполните команду Файл — Сохранить, выберите папку site и введите имя файла.

Создание сайта домашняя страница в kompozer-хЮЙНУС ДЕМБФШ УБКФЩ Ч KompoZer

Рисунок 14 Добавьте изображение, для этого: — установите курсор в начало первого абзаца текста; — выберите пункт Вставка — Изображение; — выберите файл petya. Рисунок 16 Должен получиться такой результат, как на рисунке ниже. Рисунок 17 Создание таблиц и списков на web-странице С помощью программы KompoZer добавим к нашему сайту еще две страницы: «Мое расписание уроков» и «Мои учителя».

Создание сайта домашняя страница в kompozer

Для создания расписания уроков будем использовать таблицу, а для списка учителей — маркированный список. Создание таблиц Создайте новую страницу с глобальными настройками, как и у предыдущих страниц. Сохраните ее под именем rasp. Вверху страницы нажмите чтобы увидеть больше заголовок «Мое расписание уроков». Должно получиться вот. Начнем создавать таблицу «Расписание уроков». В конечном варианте таблица должна будет выглядеть следующим образом: Рисунок 19 Обратите внимание, что в таблице есть ячейки, которые разбиты на две части. В одной ячейке разбиение идет по горизонтали ИЗО и Музыка — это означает, что занятия по создание сайта домашняя страница в kompozer предмету проходят раз в две недели поочередно.

В двух ячейках разбиение идет по вертикали французский и английский языкичто означает деление класса на две группы и их параллельные занятия у разных преподавателей. Кроме того, первая строка и первый столбец таблицы выделены другим цветом. Для начала создайте таблицу с простой структурой без деления ячеек, как уже было описано выше. Размер таблицы — 6 строк на 6 столбцов, Рамка — 1, Выравнивание таблицы — влево, Поля — 2 пикселя, Поля внутри ячейки — 2 пикселя. Рисунок 20 В результате получим таблицу с примерно одинаковой шириной и высотой всех ячеек, выровненную по левой границе окна.

Рисунок 21 Если возникает необходимость изменить некоторые создание сайта домашняя страница в kompozer уже существующей таблицы, то нужно: — установить курсор в любую ячейку таблицы; — выбрать пункт меню Таблица — Свойства таблицы; — изменить читать полностью свойства всей таблицы вкладка Таблица или отдельных ячеек вкладка Ячейки. Измените способ выравнивания нашей таблицы. Для этого выберите указанный выше пункт меню и с помощью вкладки Таблица измените тип выравнивания таблицы на значение — по центру.

Создание сайта домашняя страница в kompozer

Рисунок 22 Выделение ячеек таблицы Если необходимо изменить свойства не всей таблицы целиком, а ее отдельных ячеек строк или столбцовто сначала создание сайта домашняя страница в kompozer выделить нужные ячейки. Для выделения используются следующие способы: — выделить с помощью мыши первую ячейку диапазона, а затем при нажатой клавише Ctrl щелкать по остальным ячейкам диапазона; — выделить с помощью мыши первую ячейку диапазона, а затем при нажатой клавише Shift щелкнуть по последней ячейке диапазона в том случае, смотрите подробнее нужно выделить подряд идущие ячейки ; — установить курсор в любое место таблицы и щелкнуть по нужной строке или столбцу в линейке настройки таблицы.

Теперь рассмотрим вопрос о разбиении и объединении ячеек. Дело в том, что в HTML-редакторах нет возможности разбиения уже существующей ячейки. А также нужно определиться создание сайта домашняя страница в kompozer тем, как он должен будет выглядеть. Ниже представлен список элементов, которые не являются обязательными, но могут составлять содержимое сайта: текстовый контент фон страниц сайта это может быть сплошная заливка цветом или фоновая картинка шрифт, который будет использоваться на страницах сайта ширина страниц сайта будут ли на сайте файлы, доступные для скачивания Теперь вы можете подробнее на этой странице представить, насколько важно предварительное планирование.

Усилия, потраченные на создание плана, стоят. Детально проработанная схема в будущем значительно облегчит построение самого сайта. После того, как будет разработка сайтов дом сайтов проект, следующим шагом будет создание файловой структуры будущего сайта на локальном диске, в которой будут храниться все файлы, составляющие сайт и его содержимое. На рисунке, представленном выше, в файловом менеджере Thunar отображено содержимое директории - зеркала сайта, который послужит образцом для создание сайта домашняя страница в kompozer примера.

В этой директории есть папка "files", предназначенная для хранения файлов, доступных для скачивания посетителями. В папке "images" содержатся изображения, используемые для оформления страниц сайта или же статей на страницах. Я настоятельно рекомендую всегда создавать зеркало web-сайта на жестком диске вашего компьютера, в специально отведенной для этого директории. Создание первой страницы Первое, с чего мы начнем, это установка фоновой заливки нашей страницы. Откроется окно "Цвета и фон страницы" Page Colors and Backgroundрисунок которого представлен ниже: В нем выберите опцию "Использовать другие цвета" Use custom colorsзатем опуститесь по списку вниз, до надписи "Фон" Background и щелкните левой кнопкой мыши на окошке справа от этой надписи.

Откроется еще одно окно, которое является стандартным окном выбора цвета: В правом верхнем углу находится таблица готовых создание сайта домашняя страница в kompozer, используя которую, можно выбрать нужный. В примере своей статьи я выбрал голубой цвет - третий столбец справа создание сайта домашняя страница в kompozer третья строка сверху. Если в таблице нет нужного вам цвета, вы можете определить его самостоятельно, указав несколькими возможными путями. Например, задав с помощью Hex-кода или же по имени правый нижний угол окна ; воспользовавшись окошками задания цветов в нижнем левом углу Red-Green-Blue ; окном выбора цвета в левом верхнем углу.

Самым простым способом получения нужного цвета является явное задание его значений в поле ввода Hex или же в полях Red, Green, Blue прим. После ввода значений, выбранный цвет отобразится в визуальном виде в окошке, создание сайта домашняя страница в kompozer под надписью "Последний выбранный цвет" Last-picked color. Другим точным способом подбора нужного цвета является использование полосы градиента с ползунком расположена сверху от полей ввода значений RGB. Если для фоновой заливки страницы планируется применить готовое изображение, необходимо указать ее месторасположение с помощью адресной строки ввода, расположенной внизу окна настройки цветов страницы.

На практике рисунок, который будет использоваться в качестве фоновой заливки, может располагаться где угодно. Поэтому лучше всего разместить его на сервере - в нашем случае это директория, являющаяся смотрите подробнее будущего сайта, расположенная на локальном жестком диске компьютера. Поставьте галочку напротив надписи "Относительная ссылка" Url is relative to page location прим. Такая настройка очень полезна при переносе локальной версии сайта на хостинг, где может быть другое расположение файлов, что может привести к нарушению связей и неработоспособности самой ссылки. Будьте осторожны с чрезмерным использованием изображений на сайте и на страницах, так как большое количество картинок может ухудшить удобочитаемость сайта.

Большое количество картинок на сайте отвлекает внимание посетителя от главной составляющей - текста. Также примером неудачного применения изображений может быть черный текст, расположенный поверх картинки с темным фоном. Результатом выбора фоновой заливки страницы является изображение главного окна KompoZer, представленное ниже: Следующим нашим шагом будет изменение заголовка страницы. Для этого перейдем в меню редактора KompoZer по пути "Формат - Заголовок и свойства страницы" Format - Page Title and Properties : В открывшемся окне свойств введите извиняюсь, создание сайта интернет магазина под ключ думаю страницы в поле "Заголовок" Title.

Также больше на странице можно установить явным образом язык страницы Language и направление текста Writing direction прим. Особенно это касается направления ввода текста, которое по умолчанию для западноязычных стран имеет значение слева направо. Конечно, вы можете озаглавить страницу для себя так, как сочтете нужным. Затем нужно определиться со шрифтами, которые будут использоваться на странице для отображения текста. По умолчанию стоит значение "Переменный" Variableно я предпочитаю использовать строго определенные шрифты, в частности это Helvetica и Arial. Оба эти шрифта признаны как наиболее удобочитаемые многими независимыми обзорами прим.

То есть такие шрифты, которые одинаково отображаются в разных браузерах и версиях этих браузеров, а также под разными операционными системами. В главном меню редактора KompoZer перейдите по пунктам "Формат - Шрифт" Format - Fontзатем выберите тот шрифт, который вы бы хотели использовать. Хотя список представленных в KompoZer шрифтов довольно обширный, не стоит выбирать любой из. Дело в том, что вы не можете быть уверенными, что выбранный вами шрифт, хотя он и установлен на вашей операционной системе, также будет установлен и у посетителей вашего сайта. В результате web-страница будет отображаться совсем не так, вами было задумано. Чтобы оградить себя от подобных проблем, наилучшим выбором будут только первые восемь шрифтов из этого списка.

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

Создание сайта домашняя страница в kompozer

Выпадающий список "Body Text" служит для форматирования текста внутри страницы. Щелкаем на нем левой кнопкой мыши и выбираем "Heading 1".

Создание сайта домашняя страница в kompozer

Тем самым, мы будем создавать форматированный текст в виде заголовка первого уровня.

5 thoughts on “СОЗДАНИЕ САЙТА ДОМАШНЯЯ СТРАНИЦА В KOMPOZER”
  1. Сожалею, что не могу Вам помочь. Я думаю, Вы найдёте здесь верное решение.

  2. Извините, что я вмешиваюсь, но, по-моему, есть другой путь решения вопроса.

  3. Понравилось, жаль только сейчас наткнулся. Пост сохранил.

Leave a Reply

Your email address will not be published. Required fields are marked *