Сайт был создан на базе html. Суть этой базы была такова, что бы та информация, которая находиться на сайте не загружала не только с - korshu.ru o_O
Главная
Поиск по ключевым словам:
страница 1
Похожие работы
Сайт был создан на базе html. Суть этой базы была такова, что бы та информация, которая - страница №1/1


ИНСТРУКЦИЯ

По редактированию страниц сайта

«Автоматизация Технологических Процессов»

Автор: Мельник Евгений Игоревич


Содержание:


  1. Что собой представляет редактирование страниц сайта

  2. Открытие проекта, изучение ПО, осмотр содержимого

  3. Ознакомление с разделами сайта, свойства каждого элемента

  4. Размеры, Рамки, Линии и прочие дополнения для сайта

  5. Добавление каскадных таблиц стилей

  6. Добавление JavaScript на страницу сайта

  7. Сохранение проекта

  8. Авторские права на сайт

  9. Заключение

  10. От Автора



  1. Что собой представляет редактирование страниц сайта

Сайт был создан на базе HTML. Суть этой базы была такова, что бы та информация, которая находиться на сайте не загружала не только сервер, а и браузеры ваших компьютеров. Наш сайт состоит из картинок, – которые являются как структура шаблона, каскадных таблиц (CSS), и последний, главный элемент - JavaScript.

Перейдем к стадии редактирования самого проекта. В комплекте с установкой сайта-каталога есть программа она называется Web Page Maker. Открываем архив, устанавливаем программу Web Page Maker и затем открываем само окно программы. Главное окно программы Web Page Maker выглядит так (Рисунок 1).

Рисунок 1 – Главное окно программы Web Page Maker
Для того, что бы открыть проект (project.wss) нажмите CTRL+O или же FILE/OPEN/project.wss - это выглядит так (Рисунок 2).

Рисунок 2 – Открываем проект для редактирования
После того как открыли проект, у вас должна появится главная страница сайта. Вот с этого момента переходим на второй пункт инструкции.



  1. Открытие проекта, изучение ПО, осмотр содержимого

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



Закладка «FILE» - обычная себе закладка, которая имеет множество главных функций, мы разберем их по очереди:

New SiteНачинаем работу с нуля. Белый лист, чистые мысли, креативные идеи.

New site from Template…- Если с фантазией проблемы, программа дает возможность выбрать уже готовые шаблоны для сайта.

OpenОткрываем проект, который был ранее сохранен в программе.

Recent Files – Последние открытые проекты.

SaveСохранение проекта. (Сохраняйте проекты как можно чаще)

Save As… - Сохранение проекта с вашим участием.

Save as Backup…- Сохранение резервного проекта.

Save as Template…- Сохранение проекта как шаблон.

ImportМожно импортировать любую другую страницу html.

Export to Html…- Экспорт проекта в страницы html. ( Так и создался наш успешный проект)

Preview in Browser – Просмотр проекта в вашем браузере.

Publish – Публикация страниц на сервере. (Не путать с Экспортом!)

Send page by Email – Отправить страницу по почте, функция бесполезная.

Print – Печать страницы.

Page setup – Параметры страницы.

Exit – Выход

Все это можно увидеть на (Рисунок 3).




Рисунок 3 – Закладка «FILE»
Закладка «EDIT» - Главный инструмент для редактирования. Элементы закладки показаны на (Рисунок 4). В него так же входят:

UndoДействие назад.

RedoДействие вперед.

CutВырезать.

CopyКопировать.

PasteВставить.

DeleteУдалить.

Select AllВыделить все.

Include on All pageРазместить на всех страницах.

Include onРазместить на…(Удобно, когда некоторые элементы хочется добавить только на определенных страницах)

UnlockРазблокировать элемент.

Lock AllЗаблокировать все.

Unlock AllРазблокировать все.

Show GridПоказать сетку. (Появляется специальная сетка в окне, размер клеток можно редактировать в настройках)

Snap to GridРазмещение картинок, текста и т.д. только строго по клеткам.

Show guide borderПоказать границы. (Они голубого цвета позначены пунктирной линией.

SettingНастройки. (Туда входят: Размер границы, размер сетки) Дополнение: (Рисунок 5).


Рисунок 4 – Закладка «EDIT»

Рисунок 5 – Пункт «Setting»
Закладка «PAGE» - Структура и сердце вашего проекта. Все это можно посмотреть на (Рисунок 6). А в состав закладки так же входят:

Add New PageДобавление к вашему проекту новую страницу

Clone PageКлонирование страницы.

Remove Page – Удаление страницы. (Внимание! Если вы удалите страницу, назад ее не вернуть. Программа, перед тем как вы используете эту функцию – запросит подтверждение и предупреждение)

Site contentsСтруктура нашего сайта. (Скелет)

Index.htmlПосле черты идут созданные вами страницы проекта. ( Главная страница проекта всегда будет INDEX.HTML, запрещается изменять название этой страницы)

Рисунок 6 – Закладка «PAGE»
Закладка «INSERT» - Добавляем на сайт разные элементы. (Рисунок 7)

TextВставка текста на страницу.

ImageВставка рисунков на страницу.

ShapeВставка геометрических фигур.

Navigation Bar – Меню для сайта. (Готовые примеры, вставляй и редактируй)

Horisontal lineВставка горизонтальной линии.

TableВставка таблицы.

FormВставка формы

ObjectВставка мультиобъектов. (Аудио, Видео)

Marguee – Бегущая строка.

Flash Movie… – Флеш ролик

Flash SlideShow... – Флеш слайд-шоу.

Rollover image… – Элемент 1.

Ready to use Java Script… – Готовые скрипты.

Html code or Script code... – В этой таблице нужно писать коды вручную

iFrameСамый обычный фрейм.

BookmarkЭлемент 2.

Рисунок 7 – Закладка «INSERT»
Закладка «FORMAT» - Главная закладка по форматированию страницы. (Рисунок 8)

Text Link Style SheetНастройка стилей ссылок.

Colors and borders – Цвета и границы.

Properties… – Настройки страницы.

Page properties… – Настройки страницы. (Рисунок 9)

Рисунок 9 – Пункт «Page properties»



Meta TagsЗакладка где мы указываем параметры сайта. Название его, ключевые слова по, которым он будет отображаться при поиске, и описание.

Рисунок 9а – Пункт «Page properties»

Background – Программа Web Page Maker мультимедийна, по этому к страницам есть возможность подключать звуковые файлы. На Рисунке 8а мы видим первую строку «Бэкграунд» с помощью нее можно выставить фоновый рисунок на страницу вместо любого цвета. Строка «Бэкграунд мьюзик» позволяет вставлять фоновую музыку на страницу, «луп» - количество повторов проигрывания аудиофайла. Переходим дальше.

Рисунок 9б – Пункт «Page properties»
Appearance – Закладка для форматирования страницы проекта. Рассмотрим каждый элемент отдельно.

«Align» - выравнивание страницы по левому краю, правому и центр в окне вашего браузера.

«Default Text» - Стандартный цвет текста.

«Background» - Фон страницы.

«Normal link/Visited/Active» - Цвета линков, которые вы посещали, посещаете и будете посещать.

«Character Set» - Кодировка страницы. ( Обязательно выбираем пункт «USER DEFINE» и в пустой области пишем windows-1251)

Последней так же основной закладкой есть «Arrange» о которой мы поговорим далее.

Рисунок 8 – Закладка «FORMAT»
Закладка «ARRANGE» - Выравнивание, и прочее относится именно к этой закладке. (Рисунок 10)Сюда у нас поместились:

Bring to Front – Отправить вперед.

Send to Back – Отправить назад.

Bring to All FrontОтправить ВСЕ вперед.

Send to All Back – Отправить ВСЕ назад.

Left AlignВыровнять по левому краю.

Right AlignВыровнять по правому краю.

Top AlignВыровнять по верхнему краю.

Bottom AlignВыровнять по центру.

AlignВыровнять…

GroupГруппы.

UnGroupВне группы.

SizeРазмеры.

Рисунок 10 – Закладка «ARRANGE»
Вы научились работать в программе. Основная цель – редактирование проекта, а значит, что мы переходим на следующий урок.


  1. Ознакомление с разделами сайта, свойства каждого элемента

Каждая страница на сайте имеет свой стиль, который нужно соблюдать. Сайт же изначально делился на такую структуру (Рисунок 11):


Рисунок 11 – Header main menu



Header main menu – Первая часть сайта на которую нужно обратить внимание. Состоит она из:

    1. Логотипа;

    2. Дополнительной части – декор;

    3. Главное Меню сайта – которое имеет в себе 6 кликабельных кнопок;

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

Адреса Меню должны быть такими:

Головна – index.html

Мет. Вказівки – met_vkazivku.html

Тех. Процеси – the_procesy.html

Каталоги – main_katalog.html

Посилання – links.html

Відеоматеріали – videomaterialy.html


Fast way menuВторая часть (Рисунок 12). Сделана специально для быстрого перемещения по сайту.

Рисунок 12 – Fast way menu
Right hand menuТретья часть меню, которая находится справа. (Рисунок 13)Предназначена для быстрого перемещения по сайту на самые нужны разделы с автоматизации.

Рисунок 13 – Right hand menu


Существует так же и выпадающее меню, которое находиться в разделе «CODEINFO». Меню подключается к каскадным таблицам. (Рисунок 14)

Рисунок 14 – Закрытый вид выпадающего меню

Рисунок 15 – Открытый вид выпадающего меню
Главные аспекты меню мы увидели, дальше мы рассмотрим каждый раздел сайта. Главная страница представляет из себя обычный вид где есть ознакомительный текст, а так же разработчики, консультанты и руководители проекта. Метод. Раздел нужен для того, что бы студенты, преподаватели и обычные пользователи смогли найти нужную информацию по учебному процессу.

Состоит этот раздел с окна, которое обычному пользователю напоминает «Windows окна». В этом окне есть папки для каждого курса которые, конечно же, современем будут наполняться. Поскольку наша главная цель была уничтожить стереотип о всех некрасивых информационных порталах в наш раздел мы добавили элементы декора «Speed Folder». Сам же «Speed Folder» говорит о том, что в этой папке есть еще под папки в, которых есть информация(Лабораторные работы, программы и т.д.)



Существует так же папка «Unnamed folder» (Красочная папка Рисунок 16). Папка на которой стоит пароль, что это и зачем это нужно для вас останется загадкой. Помните, что все попытки входа на папку регистрируются в лог файле.


Рисунок 16 – «Unnamed folder»