5.1. Готовые решения

5.1. Готовые решения

В заключительной главе мы рассмотрим еще одну дизайнерскую программу из семейства W.Y.S.I.W.Y.G., которая позволяет новичку в деле веб-дизайна за считанные минуты создавать не просто отдельные странички, которые потом еще надо скреплять вместе, а сразу готовые сайты – правда, сайты небольшие и не очень сложные, но полученную заготовку всегда можно «обвешать» дополнительными страничками и дополнить различными хитростями. Знакомьтесь: HTML-редактор Net Objects Fusion. Поищите его на своем диске с веб-приложениями. Заметим, что начать рассказ о веб-дизайне можно было бы с описания этой программки, однако в этом случае на упрощение лучше не идти. Деятельность дизайнера, тем более, если рассматривать ее как искусство, становится понятнее, когда вдоволь поработаешь над каждой страничкой в отдельности. И ученический проект наш по этой же причине оказался столь сложным и необычным, связанным с астрологическими услугами.

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

Одновременно нам предстоит освоить на практике справедливость требования Net– centric corporate culture – требования необходимости веб-ориентированной корпоративной культуры. Сайт не должен копировать помятый клочок бумаги, который всунул мне в руку вчера сосед, сказав при этом: «Вот телефончик, звякни этим ребятам, у них купишь то, что тебе надо». Соседу-то спасибо огромное, но вот если какая-то фирма или любая другая организация задумает тем же способом заявлять о себе, то ничего хорошего нам ожидать не придется. Ориентация корпоративной культуры на интернет-маркетинг означает на практике тот факт, что сайт является не покоробленной от морского ветра вывеской на трактире «Адмирал Бенбоу», а полноценным электронным представительством компании.

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

Иногда сайт-визитка бывает биографическим или фактографическим. Допустим, что мы создаем сайт «Жизнь и удивительные приключения Даниэля Дефо», посвященный биографии, а также литературному и научному наследию английского писателя и экономиста Даниэля Дефо, известного в России как «отец» Робинзона Крузо. Установим HTML-редактор Net Objects Fusion на свой ПК, запустим и на панели управления кликнем на иконку Site, поскольку мы хотим создать целый веб-узел сразу. Перед нами откроется диалоговое окно, в котором нужно выбрать опцию Site Wizard – Мастер Сайтов (см. рис. 35). Перед нами появится перечень шаблонов, сгруппированных по тематике. На рисунке показана тема «Правительство и политика» (Government and Politics), предлагающая шаблоны разных интерфейсов. Найдем для себя подходящую тему и шаблон, после чего нажмем на Next (Далее). Перед нами появится панелька по заданию страничек и исходных базовых характеристик каждой из них (см. рис. 36).

Рис. 35. Мастер Сайтов в Net Objects Fusion

Рис. 36. Задание страниц веб-узла в Net Objects Fusion

Выставим рядом с отобранными страничками флажки. При установке каждого флажка появляется плашка с предложением четырех вариантов взаимного расположения слоев на будущей страничке. Если устраивает расположение, заданное по умолчанию, то можно оставить все как есть. Из всего разнообразия предложенных страничек мной были выбраны: Home (Домашняя), About (О герое сайта), Downloads (Скачать), Contact Us (Контакты), Events (События), Photo Gallery (Фотогалерея), FAQ (Часто задаваемые вопросы), Links (Ссылки). Кликаем на Next и заполняем форму с личными и контактными данными, указывая в ней то, что, по нашему мнению, поспособствует установлению скорейшего контакта с посетителями сайта. Если что-то вас не устроит, то жмите на Back (Назад), если же все сочтете верным, то выбирайте Finish (Готово).

Когда вы кликаете на «Готово», программа сохраняет весь проект как один файл под деловым названием (Business Name) с расширением *.nod, что, очевидно, содержит аббревиатуру от наименования самого редактора (Net Objects). Перед вами появляется древовидная структура сайта. Остается только выбирать странички, верстать их и задавать им необходимые свойства. Разберем этот процесс пошагово на примере одной типовой странички – Домашней, с которой и предлагает нам начать работу Мастер Сайтов.

На панельке Properties (Свойства) выбираем имя странички (желательно index), после чего записываем в ячейку Title мета-тэг титула «Дефо: Главная». После кликнем на кнопку Custom Names и зададим названия баннеров и навигационных кнопочек, которые приведут нас на главную со всех частей сайта. А попутно укажем формат странички – HTML. На следующих вкладышах панельки Properties находим окошко для указания ключевых слов, заполним его: Даниэль Дефо, Даниель Дефо, английская литература, романы, жизнь и удивительные приключения, Робинзон Крузо, Моль Фландерс, Великобритания, Daniel Defoe, de Foe и т. д. Поставим флажок в окошке напротив надписи «Применить мета-тэги ко всем страничкам» (Apply Meta tags to all pages).

Установим защиту для странички, пользуясь закладкой Protect Page на плашке Properties. Выставим здесь флажки там, где сочтем необходимым. Некоторые, например, защищают странички своих ресурсов от копирования (From copying), но мне такой подход совершенно не по душе. Пусть люди заходят и копируют, качают все, что им только в голову взбредет. И вам советую поступать также при верстке своего проекта. Повторим заполнение имен для всех остальных страничек, для чего нам понадобится выделить нужную страничку и с помощью плашки Properties выставить свои значения в окошках Name, Title, Custom Name. При этом вызывая Custom Name, не забудем установить для каждой странички File Extension – расширение файлов. Пусть оно будет *.htm или *.html, поскольку именно с таким мы прежде имели дело.

Если вы вдруг решите, что объема некоторой странички окажется недостаточным, то вам потребуется доделать нужное количество дочерних страничек для того или иного раздела сайта. Например, вся биография Дефо явно не уместится на страничке About, вот почему мы выделяем эту страничку курсором и кликаем на иконку New Page на панели управления. В результате получаем добавленную дочернюю страничку. Она пока безымянная и лишена многих свойств, настройку которых мы производим с помощью плашки Properties.

Когда этот этап работ остался позади, можно вернуться к главной, выделив ее, и кликнуть на иконку Page на панели инструментов, что позволит перейти к редактированию выделенной странички, то есть Домашней. На этом рассказ о создании сайта можно завершить. Работа с отдельными страничками нами хорошо изучена, а по интерфейсу Net Objects Fusion сильно напоминает старую добрую Microsoft Expression Web (при этом кое в чем даже попроще, так что с дизайном странички легко будет разобраться).

Обратимся теперь к верстке сайта по предложению работ и услуг. Жизнь полна противоречий, отчего в каждом деле приходится считаться с разными нюансами. Только что мы говорили о важности ориентированной на Сеть корпоративной культуры, а теперь вынуждены признать и то, что структура сайта не должна в точности отображать структуру компании, но исключительно структуру потребностей пользователя – главных и второстепенных, сопутствующих.

В общем виде потребности приобретают форму древа. Рассмотрим такое древо, используя для этой цели специальные обозначения. Обозначим главную цель как АА, тогда сопутствующие второстепенные цели получают обозначения Аа, аА и аа. Главная задача пользователя состоит в том, чтобы найти АА. Очевидно, что первое сообщение – это то, которое удержит посетителя на сайте, то есть сообщение вида Аа – «вы нашли то, что искали, вот общие сведения, за конкретикой переходите сюда». Контент Аа напрямую ведет к контенту АА. Рядом с контентом АА соседствуют ссылки на контенты вида аА – комментарии, дополнения, полезные сведения, прямо или косвенно затрагивающие существо главного вопроса. Со страничек, заполненных контентом аА, должны быть переходы на контент аа, который малосущественен и используется главным образом для не очень занятого посетителя, собирающего дополнительные данные о компании. (Кроме того, дополнительный контент хорош тем, что повышает посещаемость сайта в целом и улучшает его обнаружение поисковыми системами; поэтому, кстати, со страниц с контентом аа должны иметься переходы на страницу с наполнением АА.)

Предположим, вами создается ресурс по продвижению работ по озеленению садов, балконов и квартир, выполняемых некой условной фирмой «Аленький цветочек». Запустим Мастера Сайтов в HTML-редакторе Net Objects Fusion и быстренько сверстаем нужный нам сайт. Укажем для него следующие странички:

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

От нее ответвляется страница About – О компании (очень кратко о главном: деятельность компании, спектр услуг, расценки, консультации).

Другая дочерняя страница: Contact Us – Контакты (e-mail компании, телефоны контактных лиц с указанием имен и должностей); от нее ответвляется Location – Расположение (продолжая страничку контакты, указывает фактические адреса филиалов в разных городах страны с картами маршрутов).

Затем с главной ведет страница Services – Работы. Это подробный рассказ об услугах компании «Аленький цветочек» с упором на конечный результат, то есть рассказ о том, что может приобрести в этой компании потенциальный клиент. От данной странички отходят дочерние Catalog, Download(s), Listings.

Catalog – Каталог. Это иллюстрированный указатель конкретных работ по дому и саду, которые выполняет компания; на этот раз конечный результат не описывается, но сообщается, сколько потребуется времени и денег на ту или иную работу; здесь же имеются калькулятор и формы для оформления заказа. Download(s) – Скачай. Здесь помещаются скачиваемые в виде zip-архивов прейскуранты (допустимо включить, при желании, секцию ботанической литературы, подборку занимательных статей по садоводству). Listings – Списки, то есть списки видов и сортов растений, с которыми работает компания; списки семян, которые рассылает компания своим клиентам; списки обслуженных VIP-клиентов, оставивших хорошие рекомендации.

Теперь обратимся к отходящей от домашней странички Events – События (собственные мероприятия и промо-акции компании, награждения, участие в конкурсах, демонстрация работ, корпоративные праздники). С ней логически связана Photo Gallery – Фотогалерея (преимущественно образцы работ: поменьше раздражающих физиономий, побольше радующей глаз зелени; отдельную секцию галереи стоит посвятить обоям на рабочий стол, изображающим радующие глаз цветники[20]).

Завершают ресурс FAQ и Links, тоже отходящие от домашней. FAQ – Часто задаваемые вопросы (по садоводству, цветоводству, по условиям оказания услуг компанией «Аленький цветочек»). Links – Ссылки (на родственные и дружественные ресурсы, в том числе посвященные комнатным и садовым растениям).

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

Допустим, что первичный шаблон сайта нам не особенно понравился, и мы его решили немного оживить. В данном редакторе для этого есть замечательная возможность в виде библиотеки стилей. По завершении работ с конструированием сайта нам достаточно лишь кликнуть на иконку Style на панели управления и сделать свой выбор, просмотрев коллекции стилей. В коллекции Classic Site Styles для нашего «Аленького цветочка» нашлись два хороших шаблона – Gardening (садоводство) и Sunflower (подсолнух). Можно выбрать для примера «Садоводство» (см. рис. 37), потому что этот стиль дает красивый интерфейс сайта и славное меню. Кликаем теперь на иконку Set Style (установить стиль) и подтверждаем, что выбранный нами стиль должен быть применен к конструируемому сайту.

Рис. 37. Шаблон «Садоводство» в Net Objects Fusion

В дальнейшем странички можно дорабатывать здесь же или в другом HTML-редакторе. Встроенный в Net Objects Fusion редактор удобен тем, что наглядно показывает структуру готового html-документа и поэтому снижает вероятность ошибки при редактуре гипертекста и/или вставке новых html-объектов. Открыть HTML-код странички можно, проделав путь Go › HTML Source. Выполнив все доработки, готовый сайт можно запустить в Интернет, просто кликнув на иконку Publish Site (опубликовать сайт), хотя удобнее загрузить тщательно отредактированные странички через страничку загрузки самого хоста.

Консультационный центр может быть обособленным либо являться продолжением сетевого ресурса компании. Предположим простоты ради, что у нас консультационный центр является рубрикой сайта «Аленький цветочек» либо прикрепленным к последнему подсайтом. Консультационный центр тесно связан гиперссылками с FAQ, отчасти даже повторяя его. Инструментарий на сайте консультационного центра должен предоставлять посетителю возможность активно работать с предоставляемой информацией, своевременно и полноценно обрабатывать часть документальных материалов он-лайн, чтобы не приходилось искать в кипе бумаг на столе справочники и т. д. (А если юзер вообще работает через Интернет-кафе, то мы приятно порадуем его.)

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

С этой целью в редактор кодов программы Web Page Maker или непосредственно в тело документа через блокнот либо иной упрощенный редактор записывается соответствующий скрипт «Калькулятор» со странички http://obrazcats.narod.ru/pages/scripts/scripts.html (готовый результат проверьте в действии на страничке http://obrazcats.narod.ru/pages/scripts/calculator.html).

Рассмотрим теперь пример другого веб-инструмента, пригодного для активного использования на сайте консультационного центра. Это счетчик расстояний по прямой между разными городами мира, что может показаться интересно и полезно как бизнесменам, так и любителям авиапутешествий и морских круизов. Такой счетчик можно разместить в центре консультаций по выбору услуг турагентств и авиакомпаний. Чтобы сконструировать подобное устройство, требуется скачать код на нашем учебном сайте со странички http://obrazcats.narod.ru/pages/scripts/scripts.html, при этом обратив внимание на тот факт, что часть кода внедряется в шапку html-документа ‹head›, сразу после всех мета-тэгов и титула ‹title›.

Понятно, что этот скрипт управляет работой счетчика расстояний. В body документа нужно скопировать кое-что другое: сам счетчик, то есть его интерфейс и некоторые вспомогательные механизмы, работающие по приведенному выше скрипту. Код интерфейса и скрытых «под ним» механизмов записывается целиком внутри тегов ‹form›. Окончательный результат можно увидеть и опробовать в действии на страничке http://obrazcats.narod.ru/pages/scripts/airdistance.html.

Интернет-магазин. В двух абзацах рассказать о том, как создается центр электронной коммерции, просто нереально. Это некая профанация. Создание электронного магазина представляет собой очень сложный с технической точки зрения процесс, однако подготовку к реализации этого процесса начинать никогда не рано, поскольку подлинное совершенство все равно придет с годами упорного труда. А пока что познакомимся с двумя простенькими способами формирования и отправки заказа на адрес электронной почты менеджера по продажам, работающего на компанию «Аленький цветочек».

Прежде всего для отправки заказа в режиме он-лайн можно использовать контактную форму. Формы удобны, понятны, приятны. Ими легко и с удовольствием пользуются все посетители. Откроем html-код странички для формирования заказов (ссылки на которую ведут СО ВСЕХ ПРОЧИХ СТРАНИЦ ресурса) и в тело документа внесем описание простейшей формы:

‹Н2›Доброго времени суток, уважаемый посетитель нашего магазина!‹Н2›

‹p›Огромное спасибо вам за живой интерес к нашим товарам. Здесь вы сможете легко и быстро оформить заказ, после чего с вами непременно свяжется наш менеджер, и ваша покупка благополучно будет вам доставлена.‹/p›

‹form name=“mailer” method=“post”

enctype=“text/plain” onSubmit=“(document.mailer.action += mailtoandSubject)”›

Введите ваше имя:‹br›

‹input type=“text” name=“Name” size=“ 24”

onChange=“msg(this.form)”›‹br›

Укажите тему сообщения (Заказ/Дозаказ):‹br›

‹input type=“text” name=“Subject” size=“ 24”

onChange=“msg(this.form)”›‹br›

Сюда впишите наименование товара и ваши контактные данные:‹br›

‹textarea name=“Message” cols=“ 40” rows=“ 6”

onChange=“msg(this.form)”›‹textarea›‹br›

‹input type=“submit” value=“Отправить”

onClick=“return checkIt()”›

‹input type=“reset” value=“Очистить”›‹/form›

‹p›Благодарим за покупку! Пусть наши цветы всегда радуют ваш взгляд.‹/p›

Заметим, что приведенный здесь пример неудачен. Вместо слова «Очистить», которое поставлено намеренно, нужно написать «Сброс» или «Очистить форму». Дело в том, что два одинаковых по длине слова на букву «О» (отправить и очистить), расположенные на двух соседствующих кнопочках послужат причиной множества досадных ошибок, отчего ваш сайт невзлюбят посетители. Примите сказанное к сведению и запишите код в вашем редакторе, после чего проверьте через опцию просмотра. Форма готова, но она пока непригодна для отправки сообщений. Для этой цели нам нужно написать команду-скрипт, которая целиком помещается в заголовке документа. Напомню, что скрипты разумнее всего писать не промеж мета-имен, а непосредственно перед закрывающим тэгом ‹/head›:

‹script language=“JavaScript”›

function checkIt() {

//____________________

if (document.forms.mailer.Name.value!= “”) {

} else {

alert (“ Область “Имя” в форме. Будьте добры ввести свое имя.”);

document.forms.mailer.Name.focus();

return false;

}

//____________________

if (document.forms.mailer.Subject.value!= “”) {

} else {

alert (“ Область “Тема” в форме. Будьте добры указать тему.”);

document.forms.mailer.Subject.focus();

return false;

}

//____________________

if (document.forms.mailer.Message.value!= “”) {

} else {

alert (“ Область “Сообщение” в форме. Будьте добры назвать товар и контактные сведения.”);

document.forms.mailer.Message.focus();

return false;

}

//____________________

}

function msg() {

document.mailer.action = “mailto: здесь ваш почтовый адрес”

mailtoandSubject = ((`?Subject=` +

document.mailer.Subject.value) + ` amp;Body=` +

document.mailer.Message.value);

}

‹/script›

Совершенно очевидно, что три «присказки», которыми открывается скрипт и которые начинаются со слов «если документ…», – это функции проверки. Стоит покупателю забыть заполнить какую-нибудь ячейку формы, как компьютер немедленно оповестит его об этом. Но поскольку у нас диалоговых окошек только три, то, наверное, использовать данные функции будет чистой воды издевательством над собой. Выбрасываем их из скрипта, оставляя только функцию отправки, помещенную последней. Однако вы еще вернетесь к этой страничке, когда вам потребуется сверстать более сложную форму. Обратим внимание и на значок //____________________. Это обозначение разделителя функций, совершенно ненужное для компьютера, так что можете и от него отказаться. Но в больших формах все же стоит пользоваться подобным разделителем, чтобы не запутаться в собственных письменах.

Но пока рассмотрим еще один способ эффективной отправки сообщений, а именно – активный e-mail. Напишите на веб-страничке свой или любой другой адрес электронной почты, после чего откройте код документа и внесите в этот адрес следующие изменения. Во-первых, выделите его как ссылку ‹a href=“mailto: ваш адрес”›Пишите, чтобы оформить заказ!‹/a›. Готово – адрес активен, хотя сейчас им неудобно пользоваться. Поэтому введем несколько дополнительных указаний для компьютера. Сделаем так, чтобы полученное менеджером по этой ссылке письмо отличалось от остальных, то есть заранее имело указание темы: ‹a href=“mailto: ваш адрес?subject=Заказ”›Пишите, чтобы оформить заказ!‹/a›. Отлично, а теперь создадим в письме некое подобие формы, чтобы клиенту оставалось только заполнить пустые строчки: ‹a href=“mailto: ваш адрес?subject=Заказ amp;Body=Здравствуйте! Заказываю… (впишите наименование товара) под номером… (впишите №) по цене… (впишите цену) руб. в количестве. Мой e-mail:… (если есть); телефон:… (если есть).”›Пишите, чтобы оформить заказ!‹/a›.

Когда менеджер использует несколько почтовых ящиков, то неплохо направить письмо сразу на все или, по меньшей мере, некоторые из них. Для этого вносим в код дополнительные адреса: ‹a href=“mailto: ваш адрес?subject=Заказ amp;Body=Здравствуйте! Заказываю… (впишите наименование товара) под номером… (впишите №) по цене… (впишите цену) руб. в количестве… (укашите количество). Мой e-mail:… (если есть); телефон:… (если есть). amp;cc=ваш второй адрес (будет записан как копия)”›Пишите, чтобы оформить заказ!‹/a›.

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

‹p›Доброго времени суток, уважаемый посетитель нашего магазина! Что вы думаете о нашем веб-узле, товарах, организации? Что вы считаете нужным сказать нам? Мы будем признательны за предоставленные сведения.‹/p›

‹form name=“mailer” method=“post”

enctype=“text/plain” onSubmit=“(document.mailer.action += mailtoandSubject)”›

‹p›‹strong›Тип отправляемого сообщения:‹/strong›‹/p›

‹dl›‹dd›‹input type=“radio” name=“MessageType” value=“Praise”›Благодарность ‹input type=“radio” name=“MessageType” value=“Problem”›Вопрос ‹input type=“radio” name=“MessageType” value=“Suggestion”›Предложение ‹input type=“radio” name=“MessageType” value=“Complaint”›Жалоба ‹/dd›‹/dl›

‹p›‹strong›К какой области относится ваше сообщение?‹/strong›‹/p›

‹dl›‹dd›‹select name=“Subject” size=“1”›

‹option selected›Веб-узел‹/option›

‹option›Фирма‹/option›

‹option›Товары‹/option›

‹option›Офис‹/option›

‹option›Персонал‹/option›

‹option›(Другое)‹/option›‹/select›

Другое:‹input type=“text” size=“ 26” maxlength=“ 256” name=“SubjectOther”›‹/dd›‹/dl›

‹p›‹strong›Введите текст сообщения в следующее поле:‹/strong›‹/p›

‹dl›‹dd›‹textarea name=“Comments” rows=“ 5” cols=“42”›‹/textarea›‹/dd›‹/dl›

‹p›‹strong›Как с вами связаться?‹/strong›‹/p›

‹dl›‹dd›‹table›‹tr›

‹td›Ваше имя‹/td›‹td›‹input type=“text” size=“ 35” maxlength=“ 256” name=“Username”›‹/td›‹/tr›

‹tr›‹td›Эл. адрес‹/td›‹td›‹input type=“text” size=“ 35” maxlength=“ 256” name=“UserEmail”›‹/td›‹/tr›

‹tr›‹td›Телефон‹/td›‹td›‹input type=“text” size=“ 35” maxlength=“ 256” name=“UserTel”›‹/td›‹/tr›‹/table›‹/dd›‹/dl›‹dl›

‹dd›‹input type=“checkbox” name=“ContactRequested” value=“ContactRequested”›

Свяжитесь со мной по данному вопросу как можно быстрее.‹/dd›‹/dl›

‹p›‹input type=“submit” value=“Отправить”›

‹input type=“reset” value=“Сброс”›‹/p›‹/form›

Такая форма весьма сложна для начинающего веб-дизайнера, но у вас все получится. Начинать ее конструирование следует с наиболее простых элементов, например удалив или объединив в одну некоторые ячейки. И всегда ставьте пункт «Благодарность» на первое место: начинать перечень с жалобы опасно для бизнеса.

Данный текст является ознакомительным фрагментом.