Веб-дизайн

Основы веб-дизайна

Учебник по веб-дизайну

Лабораторные работы по HTML 

Практические работы по HTML

Лабораторные работы Share Point Designer  

  

Визуальный редактор веб-страниц FrontPage

Информация о первой версии визуального редактора FrontPage 1,0 появилась на сайте небольшой фирмы Vermeer в Интернете в конце 1995 года. В продукте было много передовых на то время решений. Через полгода фирма была куплена корпорацией Microsoft. Уже в первые три месяца под торговой маркой Microsoft было продано около 150 000 копий пакета. Весной 1996 года выходит следующая версия пакета - FrontPage 1,1, и уже к лету 1996 году она поднялась в США на третье место по продажам, опередив даже сам Microsoft Office. Далee одна за другой появляются следующие версии FrontPage, и он уверенно занимает позицию мирового лидера среди визуальных средств Интернета разработки для.

Программа Microsoft FrontPage предназначена для создания веб-страниц и веб - узлов. Применяя панели инструментов и команды меню, на странице можно размещать текстовую и графическую информацию, панели навигации и ссылки, предназначенные для перехода от одной страницы к другой. Кроме того, для оформления веб-страницы можно использовать таблицы, фреймы, бегущие строки, анимацию и многое другое. Чтобы ускорить разработку Web - страниц и узлов, можно применять шаблоны и мастера. Конструктор сайтов FrontPage позволяет использовать в веб - сайте материал, подготовленный в других программных продуктах, входящих в Microsoft Office, таких как Word, Excel и PowerPoint.

В настоящее время существует два типа редакторов, создающих сайты. Это - редакторы, работающие непосредственно с кодом, и визуальные редакторы. В обеих технологий есть плюсы и минусы. При создании веб-сайтов с помощью кодовых редакторов разработчику необходимо знать язык HTML. Работа в визуальном веб - редакторе, к которому относится и FrontPage, достаточно проста и напоминает процесс создания документа в Microsoft Word. Увидеть, как будет выглядеть созданная с использованием FrontPage, веб-страница при просмотре в браузере, можно, не выходя из редактора (конструктора ).

По некоторым источникам в мировом Интернете до 50% всех страниц и веб - узлов, включая и крупные веб - проекты, создается с помощью Microsoft FrontPage. А на территории СНГ, вполне возможно, что эта цифра достигает 60-70 %.

Преимущества FrontPage перед другими веб - редакторами очевидны:

- FrontPage имеет мощную поддержку в Интернете. Существует много веб - сайтов, групп новостей, конференций, ориентированных на пользователей этого конструктора. Также в FrontPage существует масса платных и бесплатных плагинов, расширяющих его возможности. Например, лучшие, на сегодняшний день, оптимизаторы графики Ulead SmartSaver и Ulead SmartSaver Pro от компании Ulead встраиваются плагинами не только в Photoshop, но и в FrontPage. Кроме этого, есть целая индустрия фирм, разрабатывающих и выпускающих темы для FrontPage.

- Интерфейс FrontPage схож с интерфейсом программ, входящих в Microsoft Office, что облегчает его освоение. К тому же между программами, входящими в Microsoft Office, существует полная интеграция, что позволяет использовать в FrontPage информацию, созданную в других приложениях.

Запуск FrontPage

1. Нажмите кнопку Пуск.

2. Выберите открылся главного меню команду Программы, появится меню данной команды.

3. Выполните команду Microsoft FrontPage. Запускается программа FrontPage, и на экране откроется ее главное окно.

Оно содержит заголовок, меню, панели инструментов, панель режимов работы и рабочую область программы. Рассмотрим назначение элементов главного окна.

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

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

Просмотры веб- документа

В режиме Страница (Страница) в нижней части рабочей области есть четыре вкладки, которые позволяют просматривать веб-страницу в разных режимах:

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

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

• С разделением (С распределением) - комбинированный режим, в котором рабочая область разделена на две части: в верхней отображается ни HTML - кода страницы, а в нижней - ее вид в режиме конструктора.

• Просмотр (Просмотр) - предварительный просмотр страницы в том виде, в котором она отображается в окне браузера

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

- Наиболее простой - использование мыши (поместите курсор на требуемую команду и щелкните левой кнопкой мыши).

- Если Вы предпочитаете использовать клавиатуру, сначала переместите курсор в строку меню. Нажмите или клавишу <F10> или <Alt>. Выделяется первая команда в меню. Поместите выделение на требуемую команду, используя для этого клавиши <<> <>> < ^ >, <v>, нажмите клавишу <Enter>.

- Можно нажать < Аlt > + < подчеркнутый символ имени команды > (команда будет выполняться без нажатия клавиши <Enter> ).

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

Смотрим форму в действии

В этом уроке дам вам простейший обработчик и расскажу как протестировать форму.

Будем тестировать вот такую форму.

Начало формы

Введите ФИО:

Введите пароль:

Какой диск вы хотите получить?

CDDVD

Какие обучающие курсы вы хотите видеть на диске?

Курсы по Фотошопу Курсы по Adobe Dreamweaver Курсы по PHP

Выберите способ доставки:

Срочная Не срочная Курьером


Введите адрес для доставки:

Конец формы

Исходный html код формы:
<form name="zakaz_diska" method="post" action="obrabotchik.php">
< p>
Введите ФИО:<br>
< input type="text" name="fio" >
< /p>
< p>
Введите пароль:<br>
< input type="password" name="pass">
< /p>
< p> Какой диск вы хотите получить? </p>
< p>
< input name="disc" type="radio" value="CD" checked>
CD<br>
< input name="disc" type="radio" value="DVD">
DVD
< /p>
< p> Какие обучающие курсы вы хотите видеть на диске? </p>
< p>
< input type="checkbox" name="photoshop" value ="Да" checked>
Курсы по Фотошопу
<br>
< input type="checkbox" name="dreamweaver" value ="Да">
Курсы по Adobe Dreamweaver
< br>
< input type="checkbox" name="php" value ="Да">
Курсы по PHP
< /p>
< p>Выберите способ доставки:</p>
< p>
< select name="dostavka" size="1">
< option selected> Срочная </option>
< option > Не срочная </option>
< option > Курьером </option>
< /select>
< /p>
< p> Введите адрес для доставки:<br>
< textarea name="adress" cols="45" rows="5"></textarea>
< /p>
< p>
< input type="submit" value="Сделать заказ" width="20">
& nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
< input type="reset" value="Отмена ">
< /p>
</form>

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

Разобрались? теперь давайте протестируем Вашу форму, чтоб вы лучше поняли принцип.

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

Скачайте эту программу, запустите и следуйте инcтрукциям установщика. Единственное, по ходу установки нужно будет выбирать между первым и вторым режимом. По умолчанию идет первый, но мой Вам совет - используйте второй режим. После установки, у Вас на рабочем столе должны появится три ярлыка - Start Denwer, Stop Denwer, Restart Denwer (запуск, остановка и перезапуск сервера).

Запустите сервер (Start Denwer) . После этого должен создаться виртуальный диск Z . Если Вы создавали свою первую страничку, то у Вас должна быть папка obuchenie_html а внтури папка www, а внтури нее страничка index.htm в которую вы наверное уже вставили форму приведенную выше (не забудьте, что форма должна быть в теле документа!). Однако мы работали с html, тут же мы будем работать с php, поэтому ситуация немного меняется. Чтобы php 100% работал, нужно обязательно нашу страничку с формой вставить в Z:\home\localhost\www т.е. на диск Z, в папку www , которая находится в папке localhost.

В итоге, у нас должно получиться следующее: папка obuchenie_html , внутри которой лежит файл с формой . Причем папка obuchenie_html лежит внутри папки www , которая в свою очередь лежит внутри папки localhost. Вот как выглядит путь : Z:\home\localhost\www\obuchenie_html\index.html , где index.html файл с формой.

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

Теперь запускаем локальный сервер (Start Denwer) и в строке браузера пишем: http://localhost/obuchenie_html . Появится наша форма, которую можно заполнить и проверить.

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

Надеюсь что Вам понятен основной принцип работы с формами! 

Заканчиваем разбираться с формами

Нам осталось разобрать три элемента формы. Давайте по-порядку:

<form name="primer6" method="post" action="obrabotchik.php">
< p>Выберите способ доставки:</p>
< p>
<select name="dostavka" size="1">
< option value="srochnaya" > Срочная </option>
< option value="ne srochnaya" selected> Не срочная </option>
< option value="kurierom"> Курьером </option>
</select>
< /p>
< /form>

Результат:

Выберите способ доставки:

Срочная Не срочная Курьером

Базовым элементом здесь является SELECT(выбор) . У него обязательно должен быть закрывающий тег! Внутри него содержатся элементы OPTION (опции выбора) . Как вы поняли, без элементов option элемент select потеряет смысл, т.к. выбирать будет не из чего :)

Как видите, у элемента SELECT есть уже знакомый нам атрибут name , а у элементов OPTION тоже знакомый нам атрибут value (в элементе select это не обязательный атрибут) . Они нужны для того, чтобы обработчик мог идентифицировать выбранный вариант.

Например мы выбираем способ доставки - Срочная. Тогда переменная dostavka примет значение srochnaya. Если б не было значения value="srochnaya" то переменная dostavka приняла бы значение Срочная (т.е. значение текста заключенного в элемент option).

Атрибут SIZE задает количество одновременно видимых пунктов меню. В нашем случае это 1.

Атрибут флаг SELECTED означает что данное значение, будет выбрано по умолчанию.

Можно также сделать, чтобы имелась возможность выбора нескольких пунктов меню при удержании клавиши Ctrl. Для этого используется атрибут-флаг MULTIPLE .

<form name="primer7" method="post" action="obrabotchik.php">
< p>Выберите способ доставки:</p>
< p>
<select name="dostavka" size="3" multiple >
< option value="srochnaya" > Срочная </option>
< option value="ne srochnaya"> Не срочная </option>
< option value="kurierom"> Курьером </option>
</select>
< /p>
< /form>

Результат:

Выберите способ доставки:

Срочная Не срочная Курьером

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

Давайте разберем следующий элемент:

<form name="primer8" method="post" action="obrabotchik.php">
Введите адрес для доставки:<br>
<textarea name="adress" cols="45" rows="5"></textarea>
< /form>

Результат:

Введите адрес для доставки:

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

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

Атрибуты COLS и ROWS определяют ширину и высоту поля. К примеру cols="45" rows ="5" означает что ширина будет 45 колонок, а высота 5 рядов. Колонки и ряды естественно формируются из символов. Т.е. ширина 25 колонок, означает ширину в 25 символов, разобрались? думаю , что да.

И наконец мы добрались до кнопок:

<form name="primer8" method="post" action="obrabotchik.php">
<input type="submit" value="Сделать заказ">
& nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="reset" value="Отмена">
< /form>

Результат:

Для создания кнопок используется уже знакомый нам элемент INPUT . Если необходимо создать кнопку, которая будет отправлять данные обработчику, то пишем type="submit"(тип-отправить), а если хотите чтоб кнопка выполняла функцию сброса то type="reset" . Вот и все!

Что такое html формы и зачем они нужны

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

Что такое html формы? Вот смотрите, ниже приведена html форма заказа обучающего диска. По окончании обучения, вы тоже сможете сделать такую.

Начало формы

Введите ФИО:

Введите пароль:

Какой диск вы хотите получить?

CDDVD

Какие обучающие курсы вы хотите видеть на диске?

Курсы по Фотошопу Курсы по Adobe Dreamweaver Курсы по PHP

Выберите способ доставки:

Срочная Не срочная Курьером


Введите адрес для доставки:

Конец формы

Здесь все работает, кроме отправки данных, можете поклацать :)

Ну как видели такое? вот-вот, сейчас везде такое, так что давайте разберемся:

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

Давайте рассмотрим все элементы формы из примера выше по-порядку:

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

Пример 1:

<form>
< !-- сюда вставляют различные элементы -->
</form>

Как видите здесь два базовых тега : открывающий <form> и обязательный закрывающий тег </form> .

Но в этом выше, как бы голый каркас, т.е. без атрибутов. А теперь рассмотрим более реальный каркас html формы:

Пример 2:

<form name="forma zakaza" method="post" action="obrabotchik.php">
< !-- сюда вставляют различные элементы -->
</form>

Атрибуты:

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

ACTION – обязательный атрибут. Указывает путь к скрипту( или программе) сервера, обслуживающему данную форму.

METHOD – определяет способ отправки содержимого html формы. Возможные значения GET (по умолчанию) и POST.

Пару слов о методах передачи:

Метод GET используется для передачи различных переменных , или очень коротких сообщений. Информация передается в явном виде через строку браузера , т.е. ее можно перехватить. Например если вы видите в строке набора браузера нечто вроде http://adress.com/lessons.php?rub=28 это значит что передается значение переменной rub равное 28. В html формах обычно не используется.
Метод POST создан специально для передачи текстовых сообщений. Почти всегда применяется в формах. Передает информацию в скрытом виде.

Пока все понятно? тогда давайте начнем разбирать элементы формы:

<form name="primer1" method="post" action="obrabotchik.php">
Введите ФИО: <br>
<input type="text" name="fio" size="30">
< br>Введите пароль:<br>
<input type="password" name ="pass">
</form>

В результате получим:

Введите ФИО:

Введите пароль:

Что мы видим в исходном коде? а мы видим следующее:

Элемент INPUT - создает поле html формы (кнопку, поле ввода, чекбокс и т.п.), Элемент не имеет конечного тега.

Основные атрибуты :

TYPE - определяет тип поля для ввода данных. По умолчанию – это "text". В данном примере еще используется тип "password" который указывает на то, чтоб информация показывалась звездочками.

NAME - определяет имя, используемое при передаче содержания данной html формы на сервер. Если Вы собираетесь куда-нибудь передавать информацию из формы, то обязательно вводите имя.

SIZE - определяет размер поля в символах. По умолчанию имеет значение равное 24. Т.е. если этот атрибут не писать то длина будет равна 24 символа.

Есть еще и такой полезный атрибут как MAXLENGTH , который определяет максимальное количество символов, которые можно ввести в текстовом поле. Оно может быть больше, чем количество символов, указанных в атрибуте SIZE. По умолчанию количество символов не ограничено.

Ну вот например:

<form name="primer2" method="post" action="obrabotchik.php">
Введите пароль(максимум шесть символов):<br>
<input type="password" name ="pass" maxlength="6">
</form>

Результат:

Введите пароль(максимум шесть символов):

Ну как работает? А вы попробуйте ввести больше шести символов :)

Еще есть атрибут VALUE который определеят что будет по умолчанию написано в поле для ввода.

Смотрите пример:

<form name="primer3" method="post" action="obrabotchik.php">
Введите свой e-mail:< br>
< input type="text" name="e-mail" size="35" value="пример: admin@zvirec.com">
</form>

Результат:

Введите свой е-mail:

Теперь рассмотрим следующий элемент формы:

<form name="primer4" method="post" action="obrabotchik.php">
< p> Какой диск вы хотите получить?</p>
< p>
<input name="disc" type="radio" value="cd" checked>
CD<br>
<input name="disc" type="radio" value="dvd">
DVD </p></form>

Результат:

Какой диск вы хотите получить?

CDDVD

Данный тип элементов html формы называется радиопереключатель(переключает: либо одно значение, либо другое - два одновременно быть не может). Поэтому атрибут type имеет значение type="radio". Раз мы выбераем между CD и DVD то радиопереключателя у нас два, поэтому два раза пользуемся элементом INPUT. Как видите у них одинаковое имя - name="disc" и разные значения value . Почему это так? давайте подумаем логически:

Нас интересует какой диск хочет получить клиент, CD или DVD . Поэтому у нас одинаковое значение имени name="disc" и разные значение ( value="cd" и value="dvd"). Т.е. если мы выбираем первый вариант, то переменная disc примет значение cd а если второй- то dvd. Логично? по другому и быть не может...

Если вы хотите сделать, чтобы по умолчанию у Вас радиопереключатель был установлен на каком-либо варианте, то просто допишите атрибут-флаг checked(включен).

Примечание:в радиопереключателе обязательно должен присутствовать атрибут value иначе ничего работать не будет.

Последний элемент в этом уроке:

<form name="primer5" method="post" action="obrabotchik.php">
< p>Какие обучающие курсы вы хотите видеть на диске?</p>
<input type="checkbox" name="fotoshop" value="yes" checked>
Курсы по Фотошопу <br>
<input type="checkbox" name="dreamweaver" value="yes">
Курсы по Adobe Dreamweaver <br>
<input type="checkbox" name="php" value="yes">Курсы по PHP
< /form>

Результат:

Какие обучающие курсы вы хотите видить на диске?

Курсы по Фотошопу Курсы по Adobe Dreamweaver Курсы по PHP

Данный тип элементов html формы называется checkbox и отличается от радиопереключателя тем, что здесь можно выбрать несколько вариантов. Как видите type="checkbox" означает что тип элемента - Чекбокс, атрибут name нужен для того, чтобы обработчик мог идентифицировать данное поле и наконец value - определяет тот параметр, который будет отправлен при поставленной галочке.

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