.

Профессиональные Web-сайты

Создание интерактивных Web-страниц с помощью различных языков программирования г- Вставка Flash-приложений и потокового медиаконтента. Создание автоматических, персональных Web-страниц Электронная коммерция на вашем сайте сегодня практически нельзя встретить коммерческий Web-сайт, в котором не используются современные технологии для повышения производительности, интерактивности и автоматизации разработки. Сам по себе язык гипертекстовой разметки (HTML) позволяет лишь организовать ссылки и обеспечить управление макетом страницы. Чтобы создать нечто более интересное, например вставить персональное приветствие либо создать электронный магазин по предоставлению товаров или услуг, нужно интегрировать в HTML - код элементы других языков программирования (JavaScript, VBScript и т.п.).

Я сделал данную главу последней в этой части, так как хорошему Web-дизайнеру совершенно не обязательно быть серьезным программистом (слышу возгласы облегчения). Вам достаточно просто иметь некоторое представление о современных технологиях и их возможностях. Хороший Web-дизайнер должен четко себе представлять, что реализуемо, а что — нет.

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

Язык HTML позволяет использовать в своем коде другие языки программирования. Когда вы будете рассматривать Web-страницу в браузере, вы не поймете, где заканчивается HTML и начинается другой язык программирования.

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

Единственным недостатком некоторых языков программирования является тот факт, что вы не сможете научиться программировать, используя в качестве примеров другие Web-страницы. Выбирая в браузере команду меню View4> Source (Вид - Источник) вы увидите лишь HTML-код и никакого другого.

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

На Web-странице встроенный ASP - код извлекает необходимые данные из базы данных, а HTML  -код форматирует эти данные:

  • <td align*"right" ualign="top" bgcolог=“*336600" uiidth=,,50"> <form method="post" action="addtoorder asp" name="theform">
  • < input type= “hidden” name="reg" ualue="0">
  • <input type="hidden" name="add““ vatue="yes“>
  • <input type="hidden name="product" uatue="<*=PR0DUCTIDK>">
  • <input type="hidden” name="cost" value=“0">
  • < input type="hidden" name=“normal" value=”<8=normal$>">
  • <input type="hidden" name="special" ualue=“<R=special8>">
  • <input type="radio" name="producttype" value="normal" checked>
  • </form>
  • </td>

JavaScript

Язык JavaScript (не питайте его с совершенно другим языком программирования — Java) представляет собой мощный объектно-ориентированный язык программирования. Он используется для добавления на Web-страницу различных интерактивных компонентов, например раскрывающихся меню и кнопок, изменяющих свой внешний вид. Поскольку JavaScript- код виден в окне с исходным кодом страницы из браузера, можете запросто подстраивать фрагменты готового кода других страниц под свои цели.

Определите несколько функций и команд JavaScript в начале вашего HTML - кода (до закрывающего тега </head>). А затем в медиакомпонентах, которые вы поместите на страницу, сделайте ссылку на эти функции. К примеру, если вы хотите получить интерактивную кнопку, вы определяете соответствующую функцию в разделе <head>. В следующем фрагменте кода JavaScript объявлено три функции.

  • У MM_f indObj. Данная функция используется функцией swaplmage для определения изображения, которое будет отображаться, когда пользователь наводит указатель мыши на кнопку.
  • У MM_swapImage. С помощью этой функции текущее графическое изображение заменяется другим при наведении пользователем указателя мыши на кнопку.
  • У MM_swapImgRestore. Назначение данной функции — восстановление исходного графического изображения. Эта функция запускается, когда пользователь перемещает указатель мыши и убирает его с кнопки.

Этот фрагмент кода был автоматически сгенерирован в Fireworks и содержит буквосочетание ММ_ (сокращение от Macromedia) перед каждым именем функции. Название функции может быть любым (без пробелов)

Когда вы создаете интерактивную кнопку в Fireworks, программа экспортирует не только графику, но и HTML - страницу с кодом JavaScript, которые необходимы для работы этой кнопки.

Окончательная доработка Web-сайта

«script language="JavaScript"»

function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document;

if((p=n.indexOf("?"))»0&&parent.frames.length)

{d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for

(i=0;!x&&i«d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i«d.layers.length;i++)

x=MM_findObj(n,d.layers[i].document); return x;

}

function MM_swapImage() { //v3.0

var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

}

function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr;

for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

}

«/script»

После того как вы объявите эти функции, в HTML - коде можно ссылаться с помощью имен на каждую из них (например, mm_swapImgRestore). В следующем примере изображение button.gif заменяется изображением button2.gif, когда пользователь наводит на кнопку указатель мыши. Функция Swaplmage обеспечивает исчезновение изображения button.gif и его замену на button2 .gif. Когда пользователь убирает указатель мыши с кнопки, функция SwapImageRestore восстанавливает исходное изображение button.gif. Заметьте, что обращение к коду JavaScript осуществляется внутри параметра ссылки href для изображения button .gif. Здесь также указываются параметры функции.

<а href="link.htm" onMouseOut="MM_swapImgRestore();"4>onMouseOver="MM_swapImage(button,,button2.gif 4>,1);" »<img name="button" src-"button.gif" width="60" height="60" border="0"»«/a»

JavaScript-код бывает серверным и клиентским. Клиентский код. как в последнем у ВУ ) примере, не требует никакого дополнительного программирования. Следователь- yjXL/ но, Web-страница содержит все функции JavaScript, необходимые для ее коррект- ной работы. Серверный код ссылается на программный код, расположенный на удаленном сервере. Сама по себе такая Web-страница работать не будет.

Хотя словосочетание “серверный код” звучит устрашающе, с его помощью можно делать очень полезные вещи, например осуществлять доступ к базе данных для персонализации и автоматической вставки информации. Серверный код JavaScript — идеальное решение для создания кросс-платформенных (UNIX, Mac и Windows) и кросс-браузерных приложений.



Hosting Ukraine
Hosting Ukraine


Предложить

Дата Окончане проекта

Сумма проекта

×