Разработка информационного сайта для торговой фирмы «Мир мебели»

 

 

№	Яч.	Инструмент	Назначение
7	1		Pen (Перо), Magnetic Pen (Магнитное перо), Freeform Pen (Простая ручка), Add Anchor Point (Добавление узелка контура), Delete Anchor Point (Удаление узелка контура), Direct Selection (Прямое выделение), Convert Point (Преобразование узелка) Предназначены для формирования и редактирования контуров Безье, являющихся вспомогательными векторными объектами. В частности, инструмент Magnetic Pen позволяет рисовать контуры по границам цветовых и тоновых переходов. Инструмент Freeform Pen используется для рисования контуров произвольной формы (рисование производится при нажатой кнопке мыши, при этом контурная линия совпадает с траекторией движения указателя мыши)
	2		Type (Текст), Type Mask (Текстовая маска), Vertical Type (Вертикальный текст), Vertical Type Mask (Вертикальная текстовая маска) Используются для создания растровых текстовых объектов. Первые два инструмента рисуют текстовые  символы, а вторые два создают  для них выделенные области. В частности, инструмент Vertical Type располагает текст по вертикали (с разворотом букв на 90 градусов и без него). Инструмент Vertical Type Mask отличается от предыдущего тем, что он не рисует текстовые символы, а формирует вокруг них выделенную область (маску)
8	1		Measure (Измеритель) Позволяет измерять линейные и угловые параметры отрезка воображаемой прямой, проведенной между двумя произвольными точками активного изображения. Этим же инструментом можно перемещать выбранные точки по экрану, устанавливая в них указатель и нажимая кнопку мыши. Измеренные значения отображаются в палитре Info
	2		Linear Gradient (Линейный градиент), Radial Gradient (Радиальный градиент), Angle Gradient (Угловой градиент), Reflected Gradient (Отраженный градиент), Diamond Gradient (Алмазный градиент), Выполняют различные  виды градиентных заливок. Рисунок заливки определяется выбранным инструментом, а его цветовая гамма – параметром Gradient (Градиент), задаваемым в палитре Options (Параметры)
9	1		Paint Bucket (Заливка) Используется для обычной (равномерной) заливки выделенной области  изображения, а также для заливки по образцу
	2		Eyedropper (Пипетка), Color Sampler (Образец цвета) Первый инструмент фиксирует  цвет выбранного пикселя в качестве цвета переднего или заднего  плана, а второй отображает цветовые параметры 1 – 4 цветов изображения, выбранных в палитре Info
10	1		Hand (Рука) Перемещает изображение  в рабочем окне, если оно в нем  полностью не помещается (дублирует  полосу прокрутки)
	2		Zoom (Масштаб) Позволяет изменить масштаб  изображения. Если после выбора данного  инструмента установить указатель в окне документа и щелкнуть мышью, масштаб возрастет, а при выполнении тех же действий при нажатой клавише [Alt] – уменьшится
11	1		Foreground Color, Background Color (Цвета переднего и заднего планов) Предназначен для выбора цветов переднего и заднего планов (цвет переднего плана используется при рисовании и заполнении, а заднего – при стирании фрагмента изображения или в качестве второго цвета при градиентных заливках). Инструмент представлен  на панели в виде двух квадратиков, цвета которых соответствуют цветам переднего и заднего планов, небольшой пиктограммы (в левом нижнем углу), а также значка двунаправленной изогнутой стрелки (в правом верхнем углу). Щелчок на одном из квадратов позволяет выбрать цвет нужного вам плана, щелчок на пиктограмме – задать цвет по умолчанию (черный – для переднего плана и белый – для заднего), а щелчок на значке стрелки – поменять эти цвета местами
12	1		Edit in Standard Mode (Редактирование в стандартном режиме) Назначение инструмента  определяется его названием
№	Яч.	Инструмент	Назначение
	2		Edit in Quick Mask Mode (Редактирование в режиме быстрой маски) Назначение инструмента  определяется его названием
13	1		Standard Screen Mode (Стандартный экранный режим) Назначение инструмента  определяется его названием
	2		Full Screen Mode with Menu Bar (Полноэкранный режим со строкой меню) Назначение инструмента  определяется его названием
	3		Full Screen Mode (Полноэкранный режим) Назначение инструмента  определяется его названием

 

Палитры

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

Настройка программы

Как и в любой другой прикладной программе, в графической программе Adobe Photoshop 5.0 есть группа общих параметров (их называют установочными), влияющих на работу программы в целом. Такие параметры обычно используются продолжительное время без изменений.

Работа со всеми установочными  параметрами программы производится в диалоговом окне Preferences (Установки). Это окно можно открыть с помощью одной из восьми команд, сгруппированных в меню File (Файл) под названием Preferences. В соответствии со своим функциональным назначением установочные параметры разбиты на восемь групп, названия которых совпадают с наименованиями этих команд.

А так же будут  использованы следующие инструменты  разработки:

HTML

HTML (HyperText Markup Language, язык гипертекстовой разметки) - специальные инструкции браузеру, с помощью которых создаются Веб-страницы.

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

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

 

Документ в формате HTML состоит из трех основных частей:

• cтрока, содержащая информацию о версии HTML;

• заголовочная часть (определяется тегом <HEAD>);

• тело, которое включает собственно содержимое документа (определяется

тегом <BODY> или тегом <FRAMESET>).

Кроме того, вторая и третья части должны охватываться тегом <HTML>.

На практике первая часть  часто опускается.

Заголовочная часть  содержит информацию о документе в целом, которая

не отображается в  окне броузера. В теле находится  непосредственно

информационное содержание страницы, вместе с описанием своего

форматирования –  то что выводится в окне броузера. Вместо тела документ

может содержать описание фреймов (тег <FRAMESET>). Следующий пример демонстрирует теги, образующие скелет простейшего документа HTML:

<html>

<head>

<title>Простой HTML-документ</title>

</head>

<body text="#0000ff" bgcolor="#ffffff">

<h1>Заголовок документа</h1>

<p> Пример простого документа</p>

</body>

</html>

Ниже приводится список основных тегов HTML в алфавитном порядке,

содержащий их краткое  описание, примеры использования  и результаты

интерпретации броузером.

 

Теги  языка HTML

<a>

Якорь – создает ссылку на Internet-ресурс, указанный обязательным

атрибутом href.

<b>

Заключенный в теги текст  отображается жирным шрифтом.

<base>

В HTML ссылки на внешние  изображения, апплеты, программы для

обработки форм, таблицы  стилей и т.д. задаются с помощью  адресов URL.

Относительные адреса разрешаются в соответствии с базовым URL. Тег

<BASE> при помощи  атрибута href позволяет явно указать базовый URL

документа.

<big>

Заключенный в теги текст  отображается шрифтом большего размера.

<body>

Определяет тело документа. Атрибут text позволяет задать цвет основного

текста в документе. Атрибуты bgcolor и background задают цвет фона и

фоновое изображение  соответственно. Атрибуты link, alink и vlink

устанавливают цвет обычных, активных и посещенных гипертекстовых ссылок соответственно.

<br>

Осуществляет принудительный перевод строки. Текст, расположенный

после этого тега, отображается с новой строки.

<button>

Элемент позволяет создавать  кнопки в формах, действующие аналогично

кнопкам, создаваемым  с помощью элемента <INPUT>, но обеспечивающим

более богатые возможности представления. Кнопки могут иметь содержимое в виде изображения или текста.

<code>

Заключенный в теги текст  представляет собой отрывок текста программы

и отображается шрифтом  фиксированной ширины.

<div>

Определяет информацию уровня блока, не налагая при этом никаких

других ограничений  для представления контекста.

<font>

Заключенный в теги текст  будет отображаться размером шрифта,

указанным атрибутом size и цветом, указанным атрибутом color.

<form>

Обозначает границы  формы. В одном HTML-документе может быть

несколько форм, но они  не могут быть вложенными и не должны

перекрываться.

<frame>

Определяет один фрейм  в составе тега <FRAMESET>. Атрибут src задает

путь к HTML-файлу, который  должен быть загружен во фрейм.

<h1…h6>

Заключенный в теги текст представляет собой заголовок

соответствующего уровня (от 1 до 6).

<html>

Обозначает начало и  конец HTML-документа.

<i>

Заключенный в теги текст  отображается наклонным шрифтом.

<img>

Вставляет изображение  в текст. обязательный атрибут src указывает имя

графического файла.

<input>

Создает управляющие  элементы форм, тип которых определяется

атрибутом type:

• button – настраиваемая кнопка;

• checkbox – элемент ввода флажок (флажки работают как

переключатели, имеющие  состояние "включен" и "выключен",

причем одновременно может быть включено несколько элементов);

• file – позволяет передавать на обработку вместе с формой внешние

файлы;

• hidden – элемент формы, не отображаемый броузером (может

использоваться для  передачи на сервер специальной информации,

связанной с формой, которую не может изменить пользователь);

• image – позволяет использовать изображение в качестве замены

кнопки типа submit;

• password – элемент ввода текста – вводимый текст представляется

таким образом, чтобы  не отображать символы (например, в виде ряда

звездочек), часто используется для ввода паролей;

• radio – кнопка-переключатель, в отличии от элемента checkbox в

группе переключателей во включенном состоянии может находиться

только один (группу составляют элементы, имеющие одно имя);

• reset – кнопка, очищающая содержимое элементов формы (или

восстанавливающая их значения по-умолчанию);

• submit – создает кнопку, которая отсылает информацию,

содержащуюся в форме, на обработку серверу;

• text – элемент ввода текста.

<label>

Используется для связывания информации с элементами управления.

Каждый элемент <LABEL> должен быть ассоциирован только с  одним

элементом управления формы.

<p>

Заключенный в теги текст  представляет собой абзац.

<script>

Предназначен для использования  в документе сценария (скрипта),

написанного на поддерживаемом языке описания скриптов.

<span>

Определяет встраиваемую информацию, не налагая при этом никаких

других ограничений  для представления контекста.

<style>

Позволяет помещать описание каскадных таблиц стилей в раздел <HEAD>

документа.

<table>

Определяет начало и  конец таблицы. Атрибуты height и width позволяют

задать общую высоту и ширину таблицы соответственно (в пикселах или

процентах от размера  окна броузера).

<title>

Каждый документ HTML должен иметь элемент <TITLE> в разделе

<HEAD>, который используется  для идентификации его содержимого.

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

CSS

Каскадные таблицы стилей или CSS (Cascading Style Sheets) были революцией, потрясшей WWW. Если до этого Web-дизайнер не знал, как будет выглядеть его творение в разных программах Web-обозревателей, то теперь он может контролировать все: от начертания шрифта до положения картинки на странице.

Предположим, вам нужно  изменить цвет текста в HTML-документе  с черного на синий. Вы помещаете его в пару тегов <FONT> и </FONT> следующего вида:

<P><FONT color="blue">Это синий текст</FONT></P>

А теперь представим, что  вы внесли определение внешнего вида текста в другое место документа:

P.bluetext { color: blue }

Эта строка обозначает, что мы определили для текста, находящегося внутри тега <P> и помеченного стилевым классом bluetext, синий цвет шрифта. Такая конструкция HTML называется определением стиля или просто стилем.

В результате в HTML-тексте у нас остануться только теги логического форматирования текста:

<P class="bluetext">Это  синий текст</P>

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

Вы можете переназначить цвета текста для всех тегов <P>. В этом случае мы не задаем имя стилевого класса:

P { color: blue }

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

.bluetext{ color: blue }

И теперь вы можете присваивать стилевой класс тексту, заключенному в любые теги:

<H1 class="bluetext">Это синий цвет</H1>

 

<CENTER class="bluetext">Это синий цвет</CENTER>

 

Это <B class="bluetext">жирный синий</B> текст

Вы можете дать специальное  форматирование тегу только в том случае, если он заключен внутрь другого тега:

H7 B { color: blue }

И теперь:

<H7><B>Этот</B> текст будет синим</H7>

 

<P>А <B>этот</B> - не  будет!</P>

Более того, вы можете встроить определение стиля прямо в  тег:

<P style="color: blue">Это  синий текст</P>

Это достигается при  помощи атрибута style, который также поддерживают все теги HTML.

И еще один способ привязать стиль  к какому-либо тегу - использовать атрибут id, задающий уникальное имя элемента HTML.

#headerofdocument { font-size: 20pt }

Здесь мы задали размер шрифта 20 пунктов.

<H1 id="headerofdocument">Это  заголовок документа</H1>

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

P { color: blue; fotn-size: 9ptl; text-align: center }

Определение стилей, вынесенные в заголовок HTML-документа, составляют таблицу стилей. Таблица стилей заключается  в теги <STYLE> и </STYLE>:

<Style [type="text/css"]>

 

. . .

 

</STYLE>

Тег <STYLE> может содержать  необязательный атрибут type, содержащий обязательное значение text/css.

Таблицу стилей можно  вынести в отдельный файл и  использовать сразу в нескольких документах. В этом случае в заголовке HTML-документа необходимо разместить тег <LINK>, указывающий на эту таблицу  стилей:

<LINK rel="stylesheet" href="{Адрес файла таблицы стилей}">

 

Язык программирования PHP

PHP (читается как пи-эйч-пи) - один из популярнейших языков  программирования в сети Интернет. Дословно аббревиатура переводиться  как Personal Home Page. Данный язык существует  с 1994 года. Его создателем является Расмус Лердорф (Rasmus Lerdorf). История создания достаточно банальна, но теперь этот язык использует более 10,5 миллиона сайтов и других различных проектов в сети Internet по всему миру. Первые версии скрипт-движка использовались исключительно только в личных целях автора. PHP начал свою жизнь как ненавязчивая CGI-оболочка написанная на Perl. Небольшое отступление: СGI (Common Gateway Interface) - общий шлюзовой интерфейс - является стандартом, который предназначен для создания серверных приложений HTTP. Такое приложение, которое называют шлюзом или CGI-программой, запускается www-сервером в реальном времени. Сервер передает запросы пользователя CGI-программе, которая их обрабатывает и возвращает результат своей работы на экран пользователя. Таким образом, Интернет-серфер получает динамическую информацию, которая может изменяться в результате влияния различных факторов. Сам шлюз может быть написан на C/C++, Fortran, Perl, TCL, Unix Schell, Visual Basic, Apple Script и других подобных языках. Но в случае с РНР, для написания его в первоначальном варианте был выбран язык Perl. Из воспоминаний автора: Я написал это в течение полудня в промежутке между деловыми встречами. Тогда я нуждался в быстром инструменте, чтобы иметь представление о тех людях, которые читали мое резюме, размещенное в Сети. Даже не предполагалось, что оболочка будет использоваться кем-то кроме меня. Сервер, на котором располагалось мое резюме, был постоянно перегружен. Я переписал Perl-оболочку на C, чтобы избавиться от значительных непроизводительных затрат: Люди, которые использовали тот же сервер, натолкнулись на мою оболочку и попросили ее для использования у себя". Уже через год появилась первая версия продукта, и уже тогда она имела большую популярность. Но Расмус понимал, что эта версия обладала очень скромными возможностями. На тот момент в функции входили: простейший анализатор кода, несколько команд и некоторые утилиты, подходящие только персональным страницам (гостевая книга, счетчик и т.п.). Процесс создания сильно развивался и уже к серидине 1995 года PHP был основательно переработан. Был добавлен Form Interpreter (FI), для упрощения обработки данных, вводимых с помощью форм. Также появилась поддержка mSQL, позволившая работать с базами данных. В таком виде появилась вторая версия продукта, которая носила название PHP/FI Version 2. После этого люди еще больше заинтересовались и стали сами писать библиотеки, расширяя функциональность языка. Итак, на сегодняшний день РНР, несмотря на свое скромное название (Personal Home Page - персональная домашняя страница), - это мощный кроссплатформенный набор средств, который располагается на сервере и предназначается для обработки кода, встраиваемого в html-документы. Благодаря этому, появляется возможность создавать динамические Web-страницы. То есть вы создаете их как обычно, используя язык HTML и вставляя в документ, по мере необходимости, РНР-команды. Файлы, созданные таким образом, хранятся на сервере. Когда посетитель обращается к вашей страничке, РНР обрабатывает встроенные в нее команды и выдает результат браузеру пользователя - точно так же, как это делает CGI-программа, написанная на С или Perl. Только в отличие от последней, РНР имеет ряд преимуществ: - создание и отладка скриптов PHP значительно проще, чем отладка и создание скриптов на других языках, так как РНР-команды просто вставляются в текст html-документа, отпадает необходимость в различных IDE (интегрированная среда разработки); - для решения разных специфических задач не нужно писать и отлаживать многочисленные маленькие CGI-программы, что сводит к минимуму время доступа к вашим страницам, а также продолжительность разработки страниц и сайта в целом. Вместе с тем, РНР обладает огромным набором функций и большой гибкостью, которые могут быть значительно расширены с помощью дополнительных внешних библиотек. Вы можете управлять доступом к вашим страницам, создавать и обрабатывать базы данных любой сложности, генерировать изображения или PDF-документы и тому подобное. 
 
СИНТАКСИС ЯЗЫКА