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

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

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

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

Введение

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

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

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

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

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

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

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

1. HTML И CSS

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

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

На страницах этого параграфа я хочу рассказать о приемах работы в быстроразвивающимся сегодня языке DHTML (Dynamic HTML). Даже из названия видно отличие этого языка от 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. Adobe Photoshop CS2

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

На следующем скриншоте (рис. 1) вы можете видеть стартовую страницу сайта, где обозначены наиболее интересные графические элементы созданные средствами Photoshop.

п. 1 Создание пулевого отверстия

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

1. Создадим новое изображение 512x512 px, 72 dpi

2. Нажмем D, чтобы установить цвета палитры по умолчанию (черно-белый).

3. Создадим новый слой и применим к нему следующие фильтры:

Filter > Render > Clouds

Filter > Render > Difference Clouds.

Filter > Blur > Gaussian Blur (радиус 4 px)

Filter > Sketch > Chrome: Detail - 10, Smoothness - 0

4. Применяем следующие настройки изображения:

Image > Adjustments > Levels Edit > Transform > Scale: масштабируйте изображение пропорционально на 50%.

5. Создайте новый слой. Установите цвет foreground color как черный. Используя airbrush tool (предварительно выбрав мягкую кисть Soft Round 100px) распылите в центре картинки черное пятно.

6. Применить к выделенному слою следующие настройки смешивания

Layer > Layer Style > Bevel and Emboss:

Style - inner bevel,

Technique - chisel soft,

Depth - 500%,

Size - 10px,

Soften - 0px,

Angle - 90 degrees,

Hightlight mode - Screen,

Hightlight color - #FFFFFF.

7. Выберем слой с металлом (Layer 1). С помощью лассо создадим зазубренное выделение.

Select > Inverse. Перейдем в режим быстрой маски (Q)
Filter > Brush Strokes > Spatter: Spray Radius - 10, Smoothness - 5.

8. Выйдем из режима быстрой маски, нажав Q. Жмем кнопку delete.
Добавим небольшую отбрасывающую тень (настройки стиля слоя Drop Shadow).

9. Добавим бликов, осветлим некоторые участки и отверстие готово!

п. 2 Создание эффекта ржавчины.

1. Создайте новый документ.

2. Создадим новый слой. Называем его «shape». Заполняем выделение на этом слое Edit > Fill (Shift+F5) используя параметры настройки, Use: White Mode: Normal Preserve transparency: Не выбрано

3. Теперь создаем еще один слой выше слоя «shape» и называем его «rust» Выбираем цвет #362F2C для переднего плана и #C69C6D для фона. Затем применяем к этому слою фильтр Filter > Render > Clouds. Select > Color Range с параметрами: select: Sampled colors Fuzziness: 100

4. У вас должно получиться выделение. Жмем Delete один раз и отправляемся в Select > Deselect (Ctrl+D).

5. Обрезаем слой «rust» относительно слоя «shape». Далее Layer > Create Clipping Mask (Ctrl+G)

6. Теперь кликаем по слою «shape» и настраиваем Blending mode и Оpacity. Получаем окрашенные части.

Blending mode: Color Burn Fill: 50% Opacity: 50%

7. Далее Noise: Add Noise, с параметрами: Amount: 10% distribution: Goussian Monochromatic: Выбрано

п. 3 Создание трубы

1. Создайте новый документ 320x320, цвет фона #555555.

2. Новый Слой. Используйте инструмент Pen Tool (P) что бы создать кривую линию. Это будет форма вашей трубы.

3. Активируйте инструмент Brush Tool и в палитре кистей выберите круглую твердую кисть. Размер кисти должен соответствовать диаметру трубы, около 25px.

4. Новый слой. Мы будем создавать трубу на этом слое. Вернитесь к инструменту Pen Tool (P), правый щелчок мышки - Stroke Path - Brush. Удалите линию от инструмента Pen Tool кнопкой «del». Цвет формы сейчас не имеет значения. Мы заполним ее другим цветом позже.

5. Создаем выделение вокруг трубы при помощи щелчка мыши и нажатой клавиши Ctrl. Отправляемся в Channels и жмем на кнопку Save Selection As Channel, как показано ниже.

6. Получаем канал Alpha 1. Жмем на канал, что бы отредактировать его. Применяем Filter > Blur > Gaussian Blur с параметрами: Radius: 10px

7. Возвращаемся в палитру слоев к слою с трубой (Layer 1), что бы продолжить его редактирование. Отправляемся в Select > All или нажимаем Ctrl+A для того, что бы выделить канаву. Затем - Edit > Fill (Shift+F5).

8. Используем параметры, указанные ниже. Use: 50%, Gray Mode: Normal Preserve transparency: Выбрано. Жмем Select > Deselect (Ctrl+D), что бы снять выделение. Используем Filter > Render > Lighting Effects с параметрами: style - Default

9. Ваша труба должна выглядеть как сейчас моя. Вы можете поиграть с параметрами настройки Lighting Effects, по своему вкусу

10. Добавим стили слоя. Укажите Bevel and Emboss с параметрами: Style: inner bevel Technique: Smooth; Depth: 100%; Direction: Down; Size: 8 px; Soften: 8 px; Ваша труба должна быть похожа на металлическую жидкую линию.

11. Нажимаем кнопку Lock transparent pixels. Наш оригинал, после эффекта Lighting Effects, приобрел грубую структуру. Чтобы исправить это, отправляйтесь в Filter > Blur > Blur и примените фильтр дважды.

12. Новый слой. Связываем этот слой со слоем трубы, нажимая на маленькую область около изображения глаза. Отправляемся в Layer > Merge linked, чтобы слить связанные слои.

13. Выбираем Brush Tool и указываем кисть с параметрами: Master diameter: 8 px. Убедитесь, что прозрачность слоя трубы отключено.

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

п. 4 Создание крови

1. Создаем новый документ 500х500 пикселей.

2. Применяем следующие фильтры: Filter> Render> Clouds. Filter> Blur> Motion Blur с параметрами Angle: 0є; Distance: 999. Filter> Noise> Add Noise с параметрами Amount: 10%; Distribution: Gaussian; Monochromatic: checked. Filter> Blur> Motion Blur с параметрами Angle: 0є; Distance: 37

3. Изменяем размер холста Image>Canvas Size. Выставляем следующие значения:

Width: 450 pixels

Height: 500 pixels

Relative: Unchecked

Anchor: Middle

4. Создаем новый слой, применяем к нему Filter>Render>Clouds и выставляем blending mode на Multiply.

5. Применяем фильтр Filter> Render> FIbers со значениями Variance 16;

Strength 4.

6. Далее Image> Adjustments> Brightness/Contrast, выставляем значение контраста +85.

7. Ctrl+U либо Image> Adjustments>Hue/Saturation, выставляем значения:

Hue: 0; Saturation: 100; Lightness: 30. Не забываем установить галочку на Colorize.

8. Создаем новый слой, применяем фильтр Filter>Render>Clouds, режим смешивания устанавливаем на Overlay.

9. Применяем к новому слою Filter>Blur>Motion Blur со значениями: Angle: 90⁰ Distance: 50

3. Курсоры и иконки

Для создания анимированных курсоров на странице я использовал программу «AWicons Pro v. 9.0.1» (Lokas Software, www.carlitus.net). Скриншот программы показан ниже (рис. 2). Преимущества программы состоят в простом и наглядном интерфейсе, простоте использования, широком спектре возможного использования, поддержка различных графических форматов, возможность ее интегрирования в программу Photoshop в качестве плагина.

Рис. 3

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

Каждый курсор представлен в двух вариантах: простом, и анимированным (для гиперссылок), т.е. при наведении курсора на гиперссылку он начинает двигаться.

Всего на странице 4 курсора. Они показаны ниже.

Пистолет - , на главной странице

Автомат -, на странице «О нас»

Дробовик - , на странице «Творчество»

Снайперский арбалет - . на странице «Наша гордость»

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

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

Создание иконки.

Как уже отмечалось в § 1, при отображении сайта в браузере в заголовке окна стандартная иконка обозревателя заменена на созданную мною иконку с логотипом сайта . Для создания иконки также использовалась программа AWicon Pro v. 9.0.1.

Литература

1. А. Хоумер. Dynamic HTML. Справочник. СПб, Изд. «Питер-пресс», 2002.

2. Д. Кирсанов. Web_дизайн. СПб, Изд. «Питер», 2005.

3. Чиртик Александр. HTML. Популярный самоучитель. СПб, Изд. «Питер», 2004.

4. Сергеев А.П., Кущенко С.В. Основы компьютерной графики. Adobe Photoshop и CorelDraw - два в одном. Изд. «Вильямс», 2005.

5. http://demiart.ru/forum/

6. http://www.web-silver.ru

7. http://www.artlebedev.ru

8. http://www.citforum.ru