Вторник, 13.11.2018, 03:39 | Поддержать проект
Познавательный Интернет-журнал
"Умеха - мир самоделок"
Самоделки, советы, ответы,
кулинарные рецепты и статьи.

Всегда есть, что почитать!
Главная Регистрация Вход
Приветствую Вас, Гость · RSS
ActionTeaser.ru - тизерная реклама
Главное меню
Основные рубрики
DCR (Полный курс) [13]
Библиотека
Календарь
«  Ноябрь 2015  »
ПнВтСрЧтПтСбВс
      1
2345678
9101112131415
16171819202122
23242526272829
30
Архив записей
BC
GA
 
Главная » 2015 » Ноябрь » 30 » DCR - занятие пятое, где мы научимся разрабатывать концепцию сайта, создавать шаблон и на его основе напишем маленький стильный сайт
DCR - занятие пятое, где мы научимся разрабатывать концепцию сайта, создавать шаблон и на его основе напишем маленький стильный сайт
06:31

Дистанционный курс киберсантаРад приветствовать Вас на пятом занятии моего курса!

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

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

Работа эта интересная, творческая, кропотливая и всегда полна возможностей поиска новых и новых решений выполнения поставленных перед собой задач.

Понадобится нам для этого не много: лист бумаги, карандаш и какое-то время.


Разрабатываем общуюю концепцию сайта

Что для этого нужно?

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

Коль скоро у нас тема предпринимательства, то давайте и попробуем написать небольшой рабочий сайтик в этом ключе. Решаем, какие сайт будет иметь рубрики.

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

Не стоит перегружать главную страницу разным "мусором", тяжелой графикой, лишними элементами, анимацией и звуковыми эффектами.

Второе - количество рубрик. Это по номенклатуре товаров, так как если у Вас на сайте будут присутствовать электронные книги и скрипты, например, то это уже 2 отдельные рубрики.

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

Четвертое - конкретный товар. Здесь его описание и возможность приобретения.

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


Итак, начинаем!

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

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

Создаем первый (главный) лист будущего сайта

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

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

У Вас в итоге получится лист, в котором будет таблица из двух столбцов и четырех строк. Я умышленно не трогаю параметры границ ячеек, чтобы Вам наглядно было видно, что и как выглядит на первых порах.

Первую строку мы пока не трогаем: на ней будет логотип, слоган или еще что-то конкретно Ваше, фирменное. На последней строке будет прописан Ваш копирайт, авторские права. А возьмемся мы пока за строку №2.

Чтобы как-то определиться, не нарушая в процессе работы общей структуры, придется пользоваться вставкой дополнительных таблиц в уже существующую, которую Вы видите выше.

Во второй строке в левой и правой ячейках создаем еще по таблице с одним столбцом и одной строкой для начала.

Левый столбец отведем для навигации по сайту. Глядя на наш "рукотворный" чертеж концепции, вносим надписи, которые в последствии и станут гиперссылками навигации по сайту.

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

С самой таблицей так же можно "мудрить". Например ее можно сделать уже, подвинув границу между столбцами мышкой влево или в свойствах задать необходимый размер в пикселах (px) или миллиметрах (mm). Это Вы уже сможете освоить самостоятельно, когда потренируетесь в создании сайта. Мы же пока просто пытаемся освоить азы изготовления пустого шаблона, чтобы получить общие понятия, что и как можно делать.

Вот уже вариант с узким левым столбцом.

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

На всех же последующих листах здесь Вы будете размещать именно ту тему, которая соответствует рурике: в товарах - описание товаров, в контактах - варианты связи с Вами, в гарантиях - гаранийные обязательства и т.д.

Фактически, основное по главному листу мы с Вами сделали. Теперь можно документ сохранить. Для этого выбираем "сохранить как" и называем документ index.htm. Сохранить его необходимо в ту директорию, которую Вы специально для этой цели создали. Смотреться он будет так:

Как видите, лист пока смотрится довольно по-сиротски. Мы ведь не сделали ему "шапку", т.е. самый верх, не прописали свои копирайты в конце листа.

Чтобы это сделать, для начала нужно объединить 2 верхние ячейки в одну. Делается это просто: выделяете мышкой эти ячейки и правой кнопкой в меню выбираете "объединить ячейки" или "merge cells". Затем вставляете внутрь образовавшегося пространства таблицу с необходимым количеством строк и столбцов.

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

Соответственно и с копирайтом внизу. У меня сделано в одну строку и в один столбец.

На Вашем примере давайте пока сделаем что-то вроде фона с надписью вверху и простенький копирайт внизу.

Что в броузере будет смотреться уже вот так:

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

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

Для этого в директории сайта создаем необходимые поддиректории. В нашем случае можно создать директории "book", "script" и "info" (названия директорий без кавычек!), например. Где в BOOK будем складывать все, относящееся к книгам, в SCRIPT - все, относящееся к скриптам, а в INFO поместим условия оплаты и доставки товара, гарантийные обязательства, контактную информацию. При необходимости в данных поддиректориях так же можно создавать различные папки для картинок или других компонентов сайта.


Создаем дополнительный раздел сайта

Делается это проще простого: необходимо главную страницу (index.htm) "сохранить как" book.htm в поддиректорию BOOK, например. И приступить к редактированию нового файла.

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


Вид нового раздела в броузере

Работаем над навигацией по сайту (гиперссылки)

Открываем файл нашего главного листа - index.htm и редактируем его следующим образом. Там, где у нас запланирована навигация, выделяем мышкой необходимый пункт.

Затем выбираем в меню редактора функцию присвоения гиперссылки:

В появившемся меню

Выбираем функцию обзора

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

В нашем случае это файл book.htm, который был нами создан, как дополнительный раздел сайта и расположен по адресу: C:\директория_моего_сайта\book\book.htm.

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

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

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

ВАЖНО! FrontPage не всегда корректно может скопировать пути ссылок на другие листы. Поэтому по окончании копирования сохраните все редактируемые документы и проверьте работоспособность гиперссылок в броузере. 

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

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


Домашнее задание к пятому занятию

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

Попробовать подстроить под себя один из понравившихся шаблонов, данных в приложении к занятию.

Маленький совет: не тренируйтесь на слишком сложных шаблонах, выбирайте простые.


Приложения к занятию № 5:

Электронная книга Энциклопедия создания сайтов для начинающих

Коллекция 75 шаблонов для сайта


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


Здесь Вы можете сказать автору Курса свое "спасибо":

WM-аттестация (проверить аттестат)

Внимание! Автор против копирования данного материала! © Владимир Мао

Категория: DCR (Полный курс) | Просмотров: 484 | Добавил: Mao | Теги: DCR, www, интернет, дизайн, html, FrontPage, курс, Сайт | Рейтинг: 5.0/1 |
Всего комментариев: 0

Комментарии
Имя *:
Email:
Код *:

Читать еще:

Шесть дюжин полезных статей и советов


Парники, теплицы: устройство, оборудование, уход


Цветы, флористика: в доме и на клумбе


Деревья, кустарники: плодовые и декоративные


Огород: овощи, бахчевые, бобовые, зелень и приправы, грибы


Живность: животноводство, птицеводство, пчеловодство, рыбоводство


Закрома: устройство погребов, подвалов, пополнение и хранение запасов

Автор-составитель © Владимир Мао
Поиск по сайту
Сейчас читают
TL
Рассылка сайта
Подписаться на информационные рассылки сайта
AT
GA
Enter
Логин:
Пароль:
География "Умехи"
Онлайн всего: 2
Гостей: 2
Зарегистрированных: 0



Проект "Умеха - мир самоделок" существует с 2005 года и с тех пор постоянно наполняется и совершенствуется. Основная доля документов, представленных на сайте материалов, предназначена для людей хозяйственных, интересующихся ведением собственного подсобного хозяйства, строительством, ремонтом и благоустроиством собственных домов, квартир или дачных участков.

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

Для людей занимающихся ведением своего личного подсобного хозяйства (ЛПХ) или фермерством, большая рубрика "Свое хозяйство" для удобства поделена на несколько узкотематических разделов, среди которых отдельными пунктами выделены такие темы, как парники и теплицы, цветы и флористика, деревья и кустарники, птицеводство и животноводство, пчеловодство и рыбоводство. Много статей опубликовано по теме "Сад и Огород".

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

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

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

И это далеко не все возможности сайта "Умеха - мир самоделок".

  • Копирование материалов сайта возможно при условии прямой активной ссылки на сайт Познавательный Интернет-журнал "Умеха - мир самоделок"
    и обязательным указанием автора и источника материала, кроме материалов, где в конце явно указано на запрет копирования.
  • По всем вопросам вы можете обратиться к администратору сайта через форму обратной связи


    Яндекс.Метрика Финансовые вопрсы