Библиотека сайта rus-linux.net
index.html . Как вы уже могли понять, не существует единственного «правильного» способа организации сайта. Каждый из способов может быть применен на практике.
Согласно стандарту HTML на сайте обязательно должна присутствовать одна страница, имеющая имя index.html . Это делается для следующей цели. Если посетитель вводит в адресную строку браузера адрес вашего сайта, но не указывает, какую конкретно страницу на нем он хотел бы посетить, то браузер по умолчанию ищет и загружает главную страницу с именем index.html . Таким образом, на диаграмме сайта блок с именем Home Page должен соответствовать файлу index.html .
Когда план будет создан, следующим шагом является сбор и организация воедино всех элементов, которые будут составлять содержимое будущего сайта. А также нужно определиться с тем, как он должен будет выглядеть. Ниже представлен список элементов, которые не являются обязательными, но могут составлять содержимое сайта:
Создание простого сайта в программе KompoZer Урок 17
- текстовый контент
- изображения
- фон страниц сайта (это может быть сплошная заливка цветом или фоновая картинка)
- шрифт, который будет использоваться на страницах сайта
- ширина страниц сайта
- будут ли на сайте файлы, доступные для скачивания
Теперь вы можете себе представить, насколько важно предварительное планирование. Усилия, потраченные на создание плана, стоят этого. Детально проработанная схема в будущем значительно облегчит построение самого сайта.
После того, как будет разработан проект, следующим шагом будет создание файловой структуры будущего сайта на локальном диске, в которой будут храниться все файлы, составляющие сайт и его содержимое. На рисунке, представленном выше, в файловом менеджере Thunar отображено содержимое директории — зеркала сайта, который послужит образцом для нашего примера. В этой директории есть папка «files», предназначенная для хранения файлов, доступных для скачивания посетителями. В папке «images» содержатся изображения, используемые для оформления страниц сайта или же статей на страницах. Я настоятельно рекомендую всегда создавать зеркало web-сайта на жестком диске вашего компьютера, в специально отведенной для этого директории.
Создание первой страницы
Первое, с чего мы начнем, это установка фоновой заливки нашей страницы. В главном меню редактора KompoZer перейдите по пути «Формат — Цвет и заливка страницы» (Format — Page Colors and Background). Откроется окно «Цвета и фон страницы» (Page Colors and Background), рисунок которого представлен ниже:
В нем выберите опцию «Использовать другие цвета» (Use custom colors), затем опуститесь по списку вниз, до надписи «Фон» (Background) и щелкните левой кнопкой мыши на окошке справа от этой надписи. Откроется еще одно окно, которое является стандартным окном выбора цвета:
Делаем сайт в KompoZer
В правом верхнем углу находится таблица готовых цветов, используя которую, можно выбрать нужный вам. В примере своей статьи я выбрал голубой цвет — третий столбец справа и третья строка сверху. Если в таблице нет нужного вам цвета, вы можете определить его самостоятельно, указав несколькими возможными путями. Например, задав с помощью Hex-кода или же по имени (правый нижний угол окна); воспользовавшись окошками задания цветов в нижнем левом углу (Red-Green-Blue); окном выбора цвета в левом верхнем углу.
Самым простым способом получения нужного цвета является явное задание его значений в поле ввода Hex или же в полях Red, Green, Blue (прим. переводчика: что является равнозначным действием, так как цвет может быть представлен в шестнадцатеричном коде Hex или в десятичном коде RGB). После ввода значений, выбранный цвет отобразится в визуальном виде в окошке, расположенном под надписью «Последний выбранный цвет» (Last-picked color). Другим точным способом подбора нужного цвета является использование полосы градиента с ползунком (расположена сверху от полей ввода значений RGB).
Если для фоновой заливки страницы планируется применить готовое изображение, необходимо указать ее месторасположение с помощью адресной строки ввода, расположенной внизу окна настройки цветов страницы. На практике рисунок, который будет использоваться в качестве фоновой заливки, может располагаться где угодно.
Поэтому лучше всего разместить его на сервере — в нашем случае это директория, являющаяся зеркалом будущего сайта, расположенная на локальном жестком диске компьютера. Поставьте галочку напротив надписи «Относительная ссылка» (Url is relative to page location) (прим. переводчика: это нужно для того, чтобы указать, что ссылка на изображение является относительной.
Такая настройка очень полезна при переносе локальной версии сайта на хостинг, где может быть другое расположение файлов, что может привести к нарушению связей и неработоспособности самой ссылки). Будьте осторожны с чрезмерным использованием изображений на сайте и на страницах, так как большое количество картинок может ухудшить удобочитаемость сайта. Большое количество картинок на сайте отвлекает внимание посетителя от главной составляющей — текста. Также примером неудачного применения изображений может быть черный текст, расположенный поверх картинки с темным фоном.
Результатом выбора фоновой заливки страницы является изображение главного окна KompoZer, представленное ниже:
Затем нужно определиться со шрифтами, которые будут использоваться на странице для отображения текста. По умолчанию стоит значение «Переменный» (Variable), но я предпочитаю использовать строго определенные шрифты, в частности это Helvetica и Arial. Оба эти шрифта признаны как наиболее удобочитаемые многими независимыми обзорами (прим. переводчика: можно сказать иначе — это наиболее «безопасные» шрифты. То есть такие шрифты, которые одинаково отображаются в разных браузерах и версиях этих браузеров, а также под разными операционными системами).
В главном меню редактора KompoZer перейдите по пунктам «Формат — Шрифт» (Format — Font), затем выберите тот шрифт, который вы бы хотели использовать. Хотя список представленных в KompoZer шрифтов довольно обширный, не стоит выбирать любой из них.
Дело в том, что вы не можете быть уверенными, что выбранный вами шрифт, хотя он и установлен на вашей операционной системе, также будет установлен и у посетителей вашего сайта. В результате web-страница будет отображаться совсем не так, вами было задумано. Чтобы оградить себя от подобных проблем, наилучшим выбором будут только первые восемь шрифтов из этого списка. В этом случае имеется наибольшая гарантия того, что страница будет отображаться одинаково во всех браузерах и операционных системах.
Теперь осталось перейти еще к одному пункту. Выпадающий список «Body Text» служит для форматирования текста внутри страницы. Щелкаем на нем левой кнопкой мыши и выбираем «Heading 1». Тем самым, мы будем создавать форматированный текст в виде заголовка первого уровня.
Помещаем курсор в основное окно редактора KompoZer и печатаем в нем «Добро пожаловать на мою Web страницу» (Welcome To My Web Page), без кавычек. Жмем Enter после ввода этой строки. При этом обратите внимание, что в раскрывающемся списке форматирования текста произошли изменения — значение «Body Text» снова вернулось на свое место. Также обратите внимание, что введенный вами текст отобразился шрифтом по умолчанию, а не тем, который вы выбрали перед этим. Чтобы он отображался тем шрифтом, которым вы бы хотели, снова выделите введенный текст и отформатируйте его нужным вам шрифтом.
Введите еще немного текста на страницу. Для этого подойдет краткое вступление, говорящее о том, чем бы вы хотели поделиться со своими читателями. В результате в окне KompoZer страница примет вид, наподобие такого:
После текста введите несколько ссылок на ваши любимые Интернет-ресурсы, по одному в строке, также, как вводите обычный текст — просто напечатайте их. Затем выделите строку-ссылку и щелкните на иконке «Ссылка» (Link) на панели инструментов KompoZer. Откроется диалоговое окно «Свойства ссылки» (Link Properties). Так как мы создаем внешнюю ссылку, указывающую на расположенный в Интернете сайт, то вставляем полный адрес этого сайта в верхнюю строку окна. Если ссылка указывает на другую страницу нашего сайта, то в строку нужно поместить только файловое имя данной страницы (например, links.html ).
В окне «Свойства ссылки» перейдем в раздел «Цель» (Target) и установим галочку напротив надписи «Открыть ссылку в» (Link is to be opened). Проверим, что в списке выбора ниже этой надписи стоит «в новом окне» (in a new window). Эта настройка заставит браузер посетителя открыть внешний Интернет-сайт (на который указывает ссылка) в новом окне, в то время как ваш собственный останется открытым в предыдущем окне.
Повторите вышеописанный шаг для всех ссылок, которые вы ввели на страницу. В результате этих действий ваша web-страница примет вид, наподобие рисунка:
Вставка изображения
Теперь давайте вставим картинку на страницу. Дважды нажмите клавишу Enter, чтобы опуститься вниз на две строки. Потом нажмите сочетание клавиш Ctrl+B, чтобы вводимый текст был полужирного начертания и введите текст «Хоста», также без кавычек. Снова нажмите сочетание клавиш Ctrl+B, чтобы снять полужирное начертание с дальнейшего вводимого текста. И опуститесь на строку ниже, нажав клавишу Enter.
Я уже поместил заранее подготовленное изображение в папку «images», расположенную в директории будущего сайта. Поэтому мне достаточно щелкнуть по иконке «Изображение» (Image) на панели инструментов KompoZer и выбрать картинку в папке «images». В окне «Свойства изображения» (Image Properties) выбираем местоположение картинки на одноименной вкладке «Местоположение» (Location).
При этом обратите внимание, что после загрузки изображения в окно надпись «Относительная ссылка» (URL is relative to page location) автоматически активируется. Это говорит о том, что вставляемая картинка находится в той же директории, что и все остальные файлы сайта.
В поле «Всплывающая подсказка» (Tooltip) введите поясняющий текст, который будет появляться каждый раз, когда посетитель наведет курсор мыши на изображение. В поле «Альтернативный текст» (Alternate text) введите текст, описывающий содержимое картинки. Этот текст будет виден посетителям сайта, пока само изображение будет загружаться окне браузера (прим. переводчика: иногда пользователи отключают отображение картинок в браузере, поэтому данный альтернативный текст также полезен. Кроме того, задание альтернативного текста является одним из обязательных условий оптимизации web-страниц для поисковых машин, таких как Google или Yandex).
Перейдите на вкладку «Внешний вид» (Appearance) окна «Свойства изображения» (Image Properties). В разделе этой вкладки «Обтекание изображения текстом» (Align Text to Image) находится выпадающий список, начальным значением которого является параметр «К низу» (At the bottom). Открываем этот список и выбираем в нем «Обтекать справа» (Wrap to the right), чтобы текст страницы обтекал картинку справа.
В разделе «Поля» (Spacing) можно настроить отступы для текста, на которые он будет отодвигаться от изображения. Задаются отступы в полях ввода «Слева и Справа» (Left and Right) и «Сверху и Снизу» (Top and Bottom). По умолчанию текст прилегает к картинке вплотную, что не слишком хорошо смотрится на web-странице. Размер полей задается в пикселях — я обычно устанавливаю поля в пять (5) пикселей.
По-моему, размер такого поля наиболее подходящий — не слишком большой и не слишком маленький. Вокруг изображения можно также создать окаймляющую рамку, которая устанавливается в поле ввода «Сплошная граница» (Solid Border). Единицы измерения (толщины) рамки также задаются в пикселях. Для изображений, вставляемых мною на страницы, я обычно устанавливаю рамку толщиной в один (1) пиксел. Мне кажется, что выделенные таким способом картинки не «растворяются» на общем фоне страницы.
Размер вставляемого изображения был изменен заранее. Я всегда предпочитаю подготавливать размер вставляемых на страницу картинок. Такой подход позволяет избежать бесполезных загрузок слишком больших изображений. Но имеется и другой способ изменить размер изображения непосредственно в редакторе KompoZer. Для этого переходим на вкладку «Размеры» (Dimensions), переключаем радиокнопку со значения «Реальный размер» (Actual Size) на значение «Другой размер» (Custom Size) устанавливаем в полях ввода ширину (Width) и высоту (Height) для изображения.
При этом обязательно нужно обратить внимание на галочку «Пропорционально» (Constrain). Если она установлена (надпись активна), то размеры изображения изменяются пропорционально, что предотвращает искажение картинки. Когда все готово, щелкаем на кнопке ОК и картинка вставляется в web-cтраницу.
Когда изображение будет помещено на страницу в окне редактора KompoZer, помещаем курсор мыши рядом с ней и вводим пояснительный текст. При этом текст будет обтекать вставленную картинку с правой стороны и отступать от нее на пять пикселей. После ввода текста у вас должно получиться нечто похожее на рисунок ниже:
Осталось сохранить готовую страницу под именем index.html в директории web-сайта.
Заключение
Итак, в этой статье мы продолжили изучение HTML-редактора KompoZer, начатое в предыдущей выпуске июльского журнала PCLinuxOS. Здесь мы научились создавать простую Web-страницу. Как вы могли заметить, KompoZer является достаточно функциональной программой. В следующей статье мы продолжим знакомство с возможностями KompoZer.
Источник: rus-linux.net
Создание сайта «домашняя страница»
На этом уроке учащиеся начнут знакомство с бесплатным визуальным html-редактором KompoZer. Учащиеся рассмотрят интерфейс этой программы и пример её использования с применением разных возможностей при создании типового сайта «Домашняя страница».
В данный момент вы не можете посмотреть или раздать видеоурок ученикам
Чтобы получить доступ к этому и другим видеоурокам комплекта, вам нужно добавить его в личный кабинет.
Получите невероятные возможности
1. Откройте доступ ко всем видеоурокам комплекта.
2. Раздавайте видеоуроки в личные кабинеты ученикам.
3. Смотрите статистику просмотра видеоуроков учениками.
Получить доступ
Конспект урока «Создание сайта «домашняя страница»»
На прошлых уроках мы узнали о том, что интернет, это не только система глобальных компьютерных сетей, а так же и глобальная информационная система, которая обеспечивает пользователям возможности доступа к информации и общения между собой.
Важнейшей информационной службой интернета является всемирная паутина. Это система веб-страниц, которые связаны между собой гиперссылками. Текст, который содержит гиперссылки называется гипертекстом.
Всемирная паутина работает по системе клиент-сервер. Веб-сервер и компьютер-клиент взаимодействуют между собой по протоколу HTTP. Клиент отправляет на веб-сервер запрос на веб-страницу, а сервер в ответ отсылает указанную веб-страницу или сообщение об ошибке, если она недоступна.
Большая часть веб-страниц содержится в составе веб-сайтов. Веб-сайт – это система связанных между собой веб-страниц, принадлежащих одной организации или лицу.
На прошлых уроках мы кратко рассмотрели основные инструменты разработки веб-сайтов. Мы знаем, что не зависимо от средств разработки любой сайт содержит код разметки, написанный при помощи языка разметки гипертекста «HTML».
Упростить процесс создания сайта помогают различные визуальные HTML-редакторы. Создавать веб-страницы с помощью некоторых из них может даже пользователь, который не знает языка разметки гипертекста. Это возможно благодаря тому, что пользователь работает с блоками гипертекста, не на прямую через язык разметки, а используя их визуальное представление и меняя их настройки при помощи различных инструментов.
Сегодня мы более подробно рассмотрим визуальный HTML-редактор «KompoZer», а так же начнём создание типового веб-сайта «Домашняя страница» с его использованием.
Рассмотрим интерфейс программы «KompoZer». Его можно разделить на несколько частей. Вверху располагается главное меню. Через него можно получить доступ ко всем элементам функциональности программы. Ниже главного меню располагается панель быстрого доступа.
Она содержит кнопки вызова наиболее часто используемых операций. Ещё ниже располагается панель форматирования текста, на ней расположены инструменты, которые свойственны большинству текстовых редакторов. Здесь можно настроить шрифт и размер текста, а также его форматирование, например, создавая различные списки. Большую часть окна программы занимает рабочая область.
Помимо окна, в котором отображаются результаты работы (окна редактирования), она содержит панель вкладок, которая позволяет переключаться между различными страницами веб-сайта, а также панель управления режимами редактирования. Она позволяет выбирать между режимами: дизайн, в котором отображается лишь визуальное представление блоков, код, в котором отображается код страницы на языке разметки гипертекста. При выборе объединённого режима окно результатов будет разделено на две части по горизонтали. В верхней части располагается окно дизайна, а в нижней – окно кода. В левой части окна находится менеджер сайта, который позволяет загрузить созданный сайт на веб-сервер.
Начнём создание сайта «Домашняя страница». Создание любой-веб страницы начинается с установки нужных значений её глобальных настроек. К глобальным настройкам веб-страницы относятся её цвета, заголовок и свойства.
Начнём с цветов.
Для настройки цветов веб-страницы, необходимо в меню «Формат» выбрать пункт «Цвета и фон страницы», после чего на экране появится соответствующее окно. Рассмотрим его. В верхней части окна находятся две радиальные кнопки, которые позволяют нам выбрать между использованием пользовательских цветов по умолчанию и настройкой используемых цветов. В нижней части окна находится текстовое поле ввода, которое позволяет выбрать фоновое изображение веб-страницы, указав его адреса на жёстком диске компьютера. Изменим цвет фона страницы, для этого установим выделение на радиальную кнопку «Использовать цвета», после чего нажмём на кнопку с изображением цвета фона.
Перед нами появилось окно настройки цвета фона. Рассмотрим его. Настроить цвет можно несколькими способами. Первый способ очевиден, выбрать его на непрерывной или дискретной палитре. Так же это можно сделать, изменяя его ЭрГэБэ-модель, то есть путём смешивания в различных количествах красного, синего и зелёного цветов.
Можно изменять цвет, редактируя такие его параметры как «Оттенок», «Насыщенность» и «Яркость». Можно выбрать один из основных цветов, указав в поле «Имя» его название на английском языке, начиная со строчной буквы, например, серый, или «silver». Можно указать в соответствующем поле ввода шестнадцатеричный код цвета, как это делается в языке разметки гипертекста.
При использовании других способов данный код генерируются автоматически. Таким образом, выберем светло-зелёный цвет фона, указав его код, он всегда начинается со знака решётка. Таким же образом выберем чёрный цвет для текста, а также коричневый цвет для гиперссылок.
Теперь настроим заголовок страницы и её свойства.
Теперь, когда мы подобрали цвета для нашей страницы, настало время наполнить её основным информационным содержимым.
Теперь введём текст страницы: « Я, Коля Николаев. Приветствую вас на моей домашней странице. Здесь вы можете узнать обо мне, о моих друзьях, и о моей семье». Установим для введённого текста параметры форматирования.
Установим стиль абзаца «Обычный текст», шрифт «Arial», выравнивание «По центру».
Как мы знаем, веб-страницы связаны между собой гиперссылками. Добавим на нашу страницу несколько гиперссылок.
Для этого необходимо навести курсор на свободное место рабочего окна, нажать правую кнопку мыши и выбрать пункт контекстного меню создать ссылку. В появившемся окне «Свойства ссылки», введём текст ссылки «Обо мне», а затем укажем адрес веб-страницы, можно указать расположение файла на жёстком диске, или же относительный универсальный указатель ресурса.
Укажем его «My HTML». Точно так же добавим ссылки на страницы о друзьях, и о семье. В первом случае укажем универсальный указатель ресурса «Friends HTML», а во втором – «Family HTML». Зададим параметры форматирования текста для созданных гиперссылок.
Сохраним созданную нами веб-страницу.
Для этого выберем пункт главного меню файл и в появившемся подменю выберем пункт «сохранить как». Сохраним нашу веб-страницу в рабочей папке под именем «Индекс HTML». Так почти всегда называется файл, содержащий главную страницу сайта.
Добавим на наш сайт ещё одну веб-страницу.
Для этого нужно создать новую вкладку. Чтобы это сделать нажмём на панели вкладок правой кнопкой мыши и выберем пункт контекстного меню «Новая вкладка». Зададим параметры страницы, так же, как мы делали это для главной. Выберем цвета для фона, текста и гиперссылок. Укажем заголовок веб-страницы «Обо мне», укажем кодировку «Кириллица, windows двенадцать пятьдесят один».
Добавим на эту веб-страницу заголовок «Обо мне». Установим параметры его форматирования так же, как и на главной странице. Теперь добавим основной текст о Коле. Придумаем? когда он родился, в какой школе учится, чем увлекается и тому подобное. Установим для основного текста выравнивание «По ширине».
Так как эта страница о конкретном человеке, логично, что на ней должна быть его фотография.
Рассмотрим, как добавить изображение на веб-страницу. Установим курсор, в начало заголовка и в меню «Вставка» выберем пункт «Изображение». Рассмотрим появившееся окно «Свойства изображения». На вкладке «Адрес» данного окна, можно задать файл с изображением, указать текст выплывающей подсказки, которая будет отображаться при наведении курсора на картинку.
Так же можно указать альтернативный текст, который будет отображаться на месте изображения у пользователей, в настройках браузера которых отключена загрузка изображений. На вкладке «Размеры» можно указать размеры изображения на веб-странице, если требуется масштабирование. На вкладке «Внешний вид» можно установить отступы для изображения, а так же указать, как должен отображаться текст относительно его. На вкладке «Ссылка» можно, сделать из изображения гиперссылку, задав указатель перехода.
Выберем файл с изображением «Коля png» из нашей рабочей папки. Укажем для него текст выплывающей подсказки «Коля Николаев», и такой же альтернативный текст. Так, как оригинал изображения имеет неподходящие размеры, укажем новые. Для этого на вкладке размеры установим выделений радиальной кнопки «Задать размер» и установим флажок в пункте «Соблюдать пропорции».
Укажем значение ширины «Двести пятьдесят пикселей», как видим, значение длины изменилось автоматически. На вкладке «Внешний вид» установим значения отступов, справа и слева – два, а сверху и снизу – пять. Установим расположение текста относительно изображения – справа. Теперь мы видим, что изображение было успешно вставлено на нашу веб-страницу. Сохраним получившуюся веб-страницу в файле «Мy HTML».
Содержимое веб-страниц «О друзьях» и «О семье», вы можете заполнить самостоятельно, так же, как мы это сделали для первых двух страниц. Теперь нужно оценить результаты нашей работы и проверить, как созданные нами веб-страницы будут отображаться в окне браузера, то есть, как их увидят пользователи.
Для этого в подменю «файл» необходимо выбрать пункт просмотр. Так же мы можем проверить, работает ли на главной странице гиперссылка на страницу «Обо мне».
Сегодня мы изучили создание сайта «Домашняя страница» с помощью визуального HTML-редактора «KompoZer». Мы рассмотрели интерфейс данного визуального редактора и узнали, что он состоит из следующих элементов:
· панель быстрого доступа;
· панель форматирования текста;
· рабочая область, которая содержит окно редактирования, панель вкладок и панель управления режимами редактирования;
Kompozer или как сделать сайт самостоятельно
В наш век компьютерных технологий и повсеместного распространения интернета уже почти каждый имеет собственную страничку в соцсетях, блогплатформах или даже отдельный личный сайт или блог. Однако мелким коммерсантам и многим предприятиям до сих пор приходится распространять информацию о себе и своей деятельности дедовскими способами: цены на изготовление сайтов ощутимые, а компьютерная грамотность офисных работников и сотрудников предприятий выпускающих отраслей по-прежнему очень низкая. Поэтому мы попытаемся в нашей статье немного просветить руководителей таких предприятий и пользователей, загоревшихся созданием персонального сайта, и расскажем о том, как сделать сайт самостоятельно на своем компьютере бесплатно, обладая даже средним знанием ПК.
На написание данной статьи меня подтолкнула ситуация в отношениях между веб-разработчиками и заказчиками. Порой заказчику очень трудно понять, что сайт с хорошим функционалом и стоить будет соответственных денег и поэтому он пытается всячески «нагнуть» девелопера и заставить его делать невыполнимые за минимальную цену вещи. Запросы клиентов с каждым годом растут, поскольку они имеют возможность каждый день наблюдать образцы хороших и дорогих сайтов в интернете, но совершенно не принимают во внимание стоимость таких проектов. Однако «хочу» и «имею возможность» это совершенно разные вещи, поэтому многие заказчики, не найдя дешевого исполнителя, все равно оказываются за бортом информационной борьбы с конкурентами за место под солнцем. При невысоком бюджете выход один — ограничить собственные запросы и попытаться сделать хотя бы сайт-визитку на пять-десять страниц своими силами.
Думаете невозможно? Очень зря так думаете. Обладая хотя бы знаниями среднего уровня можно вполне склепать сайт самостоятельно с помощью программы Kompozer. Приложение распространяется на бесплатной основе, причем, как для PC, так и для Mac. Мне не понадобилось и пяти минут, чтобы полностью освоиться в ней.
Конечно, пользователям с меньшим опытом (или вообще без него) придется провозиться гораздо дольше, но ведь цель оправдывает средства (волшебное слово — халява). В общем, работать с программой не сложнее, чем с текстовым процессором ”Word“. То есть, зная базовые принципы размещения основных элементов на листе бумаги, можно точно так же сделать сайт, будто создавая документ. Только такой документ публикуется в сети, а не распечатывается на принтере.
Давайте разберем основные принципы работы программы и попытаемся создать простенький сайтик.