Создание сайта класса

МИНИСТЕРСТВО ВЫСШЕГО И ПРОФЕССИОНАЛЬНОГО ОБРАЗОВАНИЯ РОССИЙСКОЙ ФЕДЕРАЦИИ

9² КЛАСС ВЫХОДИТ В ГИПЕРПРОСТРАНСТВО

описание сайта класса

Введение

Профессиональное создание сайтов – процесс длительный и кропотливый. Но если кто-то хочет научиться основам web‑дизайна или web‑программирования имеется достаточно большой набор программных средств.

Моя работа посвящена описанию сайта 9 ² класса гимназии - класса, в котором я учусь. Создавая сайт своего класса, мне хотелось рассказать о своих друзьях-одноклассниках, привлечь внимание к тому, чем мы занимаемся, найти новых друзей по городу и всему русскоговорящему Интернет-сообществу.

В своей работе я описываю некоторые приемы работы и решения в программных продуктах, использованных мною при создании сайта. Ктакимпрограммамотносятся Microsoft FrontPage 2003, Adobe Photoshop CS2, Allaire HomeSite 4.5, AWicon Pro v. 9.0.1, TopStyle Light.

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

Практически большая часть html‑кода была создана с помощью приложения MSFrontPage пакета MSOffice 2003. Для корректировки и удаления ненужного кода, который так и изобилует на страницах, созданных в FrontPage, использовался продукт НомeSite.

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

Самое главное – сайт можно и будет размещен в Интернете, это интересно моим одноклассникам, нашим друзьям, полезную информацию на сайте найдут и родители. Планирую продолжить работу над ним.

1. HTML И CSS

Я пропущу рассказ о том, что же такое HTML и для чего его используют. Не стоит, думаю, говорить и о стандартных средствах языка HTML – это очень просто и не представляет большого интереса.

Для создания «скелета» страницы я использовал MSFrontPage 2003. В этой программе очень хорошо реализована работа со слоями, на которых построен мой сайт.

Рис. 1

На страницах этого параграфа я хочу рассказать о приемах работы в быстроразвивающимся сегодня языке DHTML (DynamicHTML). Даже из названия видно отличие этого языка от HTML. Dynamic (активный, действующий, работающий) т.е. в отличии от HTML, DHTML позволяет пользователю создавать динамически изменяющийся документ. Одним из лучших инструментов в DHTML, я считаю слои (layers). Слой – это область, для которой определяется абсолютное положение в окне браузера. Это очень полезно для нестандартного дизайна, где положение каждого элемента очень важно. Вариант – использовать для построения каркаса страницы таблицы – мне показался мало возможным опять-таки из-за сложности дизайна.

Для создания слоя используется тег <DIV >. Пример использования данного тега:

<div style= «position: absolute; width: 700px; height: 598px; z-index: 12; left: 62px; top: 285px» id= «layer8»>

где:

Style – задает позицию документа. Значение absolute (абсолютно). Мы точно «говорим» браузеру, на каком расстоянии от края поместить слой и каких размеров он должен быть.

z - index – устанавливает порядок расположения относительно других элементов.

id – название слоя.

На сайте использованы каскадные таблицы стилей (CSS). Технология CSS создана, для того чтобы разделить дизайн станицы и ее наполнение. В каталоге сайте я создал документ который назвал style.css. Расширение.css показывает браузеру, что это – css‑файл и что его нужно обработать соответствующим образом. Но наши усилия будут напрасны, если в коде страницы не указать путь к файлу со стилем, делается это очень просто:

<link rel= «stylesheet» href= «style.css» type= «text/css»>.

Давайте разберем каждый элемент в отдельности:
link rel = « stylesheet » – так мы показываем браузеру, что это таблица стилей. href= «style.css» – здесь прописываем путь к css‑файлу,
type= «text/css» – также показываем, что это css.

Интересной возможностью css, является возможность менять стандартные курсоры на собственные, чем я не преминул воспользоваться. На сайте используется четыре курсора, что вызвало некоторые неудобства, пришлось создать одинаковых 4 css файла (для каждой страницы сайта), изменив только путь к курсору. Для внедрения курсоров и использовал следующий оператор: cursor: url (pistolnew.ani).

Рассмотрим каждый элемент в отдельности:

cursor – «говорим» обработчику, что собираем вставить курсор.

url (cursor.ani) – путь к файлу с курсором.

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

2. AdobePhotoshopCS2

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

На следующем скриншоте (рис. 1

Внимание, отключите Adblock

Вы посетили наш сайт со включенным блокировщиком рекламы!
Ссылка для скачивания станет доступной сразу после отключения Adblock!

Скачать