Основные принципы работы с Dreamweaver

· Left -- изображение "прижимается" к левому краю страницы;

· Right -- изображение "прижимается" к правому краю страницы;

· Default - расположение по умолчанию, обычно аналогично пункту Baseline.

В раскрывающимся списке, поля Right и Default делают изображение "плавающим", т. е. не привязанным жестко к "потоку" текста. "Плавающее" изображение может быть смещено Web-обозревателем влево или вправо, при этом текст, в который оно было вставлено, может быть раздвинут. А в точке, где оно было вставлено, Dreamweaver отображает специальный маркер "плавающего" изображения, показанный на рисунке 49. Этот маркер выводится только для удобства Web-дизайнера; в окне Web-обозревателя он виден не будет[18].

Рисунок 49 Маркер "плавающего" изображения

Задать выравнивание изображения также можно в подменю Align контекстного меню.

Итак, с редактором свойств мы разобрались. Теперь можно задать свойства рисунка нашего героя. Таким образом, расстояния от текста -- 5 пикселов с обеих сторон, выравнивание -- по левому краю, альтернативный текст -- "Это я, Иван Иванович Иванов". Сохраним страницу.

Примечание:

Изображение вставляется в текст с помощью одинарного тега <IMG>. Имя файла задается посредством атрибута SRC. Кроме него, этот тег имеет множество других атрибутов, соответствующих описанным нами параметрам. Получить подробное описание каждого из них вы можете, воспользовавшись поставляемым с Dreamweaver руководством по HTML.

Можно описать еще несколько возможностей, предлагаемых Dreamweaver для работы с изображениями.

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

Кнопка Edit редактора свойств и пункт Edit With <имя программы> контекстного меню позволят открыть выделенное изображение в программе, установленной в системе как программа для открытия этих файлов по умолчанию. Это та программа, в которой графические файлы будут открыты при двойном щелчке на них в окне проводника. Вполне возможно, от этой функции не будет особой пользы В этом случае можно воспользоваться подменю Edit With контекстного меню; выбрав в нем пункт Browse, затем в появившемся на экране диалоговом окне открытия файла Windows исполняемый файл нужной программы и нажать кнопку открытия. Изображение откроется в этой программе, и можно сделать с ним все, что хотите[25].

3.2 Изображения-гиперссылки

Кроме текста, гиперссылкой можно сделать и графическое изображение. Такие изображения-гиперссылки часто встречаются на Web-страницах.

Сделать изображение-гиперссылку очень просто, так же просто, как и гиперссылку текстовую. Необходимо только выделить нужное изображение и ввести в поле ввода Link редактора свойств нужный адрес.

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

Для этого нужно нажать значок "коммерческое эт", часто использующийся в качестве символа электронной почты, или создать в графическом редакторе или найти готовый. Назвав файл с этим изображением Email.gif.

После этого нужно поставить курсор в начале строки "E-mail: ivanov@somemail.ru", и стереть символы "E-mail" и нажать кнопку Image вкладки Common панели объектов. Выбрав файл, где сохранено ваше "коммерческое эт", и нажать кнопку ОК. Результат на рисунке 50[23].

Рисунок 50 Значок "коммерческое эт" -- символ электронной почты

Можно преобразовать этот значок в почтовую гиперссылку. Для этого нужно выделить его, набрав в поле ввода Link редактора свойств почтовый адрес mailto:ivanov@somemail.ru и нажмем клавишу <Enter>.

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

Если параметр Border изображения-гиперссылки имеет значение, отличное от нуля, то рамка, рисуемая вокруг изображения, будет иметь такой же цвет, какой был установлен для гиперссылок в общих свойствах данной страницы. В нашем случае, такая рамка будет иметь светло-синий цвет для непосещенных, темно-синий для посещенных и ярко-красный для активной гиперссылок. Такой эффект можно специально использовать, чтобы сделать оригинальный дизайн Web-страницы, но обычно им не пользуются[26].

Ну и, конечно же, изображение-гиперссылка может указывать на обычную Web-страницу.

Примечание:

HTML-код, использующийся для вставки изображения гиперссылки, имеет вид:

<А НRЕР="<Интернет-адрес>"><IMG SRС="<Адрес файла изображения>"></А>.

4. Таблицы

4.1 Создание таблиц

Пустую таблицу создать проще всего, нажав кнопку Insert Table (рисунок 51) вкладки Common панели объектов (см. рисунок 45). Также можно выбрать пункт Table меню Insert или нажать комбинацию клавиш <Ctrl>+<Alt>+<T>. В любом случае на экране появится диалоговое окно Insert Table, показанное на рисунке 52[30].

Рисунок 51 Кнопка Insert Table панели объектов

Рисунок 52 Диалоговое окно Insert Table

В полях ввода Rows и Columns вводится, соответственно, количество строк и столбцов создаваемой таблицы. Если ошибиться и ввести большее или меньшее количество строк или столбцов, не беда --всегда можно добавить их или удалить.

В поле ввода Width задается ширина таблицы. Возможно задание ширины как в пикселах, так и в процентах от ширины родителя. В раскрывающемся списке, расположенном справа от этого поля ввода, нужно будет выбрать пункт Percent (проценты) или Pixels (пикселы)[29].

В поле ввода Border задается толщина границ таблицы в пикселах. По умолчанию она равна 1; можно ввести 0, чтобы убрать границы совсем.

В поле ввода Cell Padding задается расстояние между границей ячейки таблицы и ее содержимым в пикселах. По умолчанию оно равно 1.

Аналогично, поле ввода Cell Spacing служит для задания расстояния между границами отдельных ячеек. По умолчанию оно равно 2.

Значения полей ввода Cell Padding и Cell Spacing, можно получить интересные эффекты, например огромные промежутки между границами ячеек или полупустые ячейки, в самом центре которых съежился небольшой текст. Обычно такие эффекты используют в декоративных таблицах.

Задав значения в полях ввода, нажмите кнопку ОК и должно получиться что-то похожее на рисунке 53. Нужно сохранить эту таблицу в файле 5.3.htm[29].

Рисунок 53 Наша первая таблица

Рисунок 54 Таблица с заполненными ячейками

Также таблицу можно заполнить какой-нибудь информацией. Для этого поставьте текстовый курсор в любую ячейку таблицы и наберите какой-нибудь текст. В одну из ячеек можно вставлять графическое изображение. Также можно вставить в ячейку таблицы другую таблицу. Если задать толщину границ таблицы равной нулю, Dreamweaver все равно будет отображать тонкую штриховую линию, чтобы помочь не потерять таблицу. Если эта граница мешает, то её можно отключить пункт-выключатель Table Borders подменю Visual Aids меню Views.

4.2 Формирование таблиц

С помощью каких тегов формируется таблица HTML? Итак, она формируется в четыре этапа.

На первом этапе создается сама таблица и задаются ее параметры (ширина, толщина границы и т. п.). Это уже знакомо на рисунке 52, где изображено диалоговое окно Insert Table. Все задаваемые в нем параметры и есть параметры таблицы[21].

Примечание:

Таблица создается с помощью парного тега <TABLE>, имеющего множество атрибутов, из которых мы выделим WIDTH, задающий ширину таблицы, и HEIGHT, задающий ее высоту.

На втором этапе внутри таблицы создается набор описаний строк таблицы. Собственно, таблица состоит из множества строк. Каждая строка может иметь свои параметры, в частности высоту.

Примечание:

Строка таблицы создается с помощью парного тега <тr>. Высота строки задается атрибутом HEIGHT. Тег <тr> может появляться только внутри тега <TABLE>.

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

Примечание:

Ячейка таблицы создается с помощью парного тега <тd>. Ширина ячейки задается атрибутом WIDTH. Тег <тd> может появляться только внутри тега <тr>.

Последний, четвертый, этап -- это помещение в ячейки полезного содержимого. Содержимое может находиться только в ячейках таблицы (тег <TD>), но никак не в строках (<tr>) или самой таблице (<TABLE>). Если нарушить это правило, HTML-код может отобразиться Web-обозревателем неверно.

Более того, подобный способ формирования таблиц исключительно гибок, и именно в жертву гибкости была принесена компактность HTML-кода таблицы.

Давайте приведем HTML-код таблицы[27]:

· <TABLE> <TR> <TD>;

· Содержимое ячейки </TD> <TD>;

· Содержимое ячейки </TD> </TR> <TR> <TD>;

· Содержимое ячейки </TD> <TD>;

· Содержимое ячейки </TD> </TR>;

· </TABLE>.

Заключение

Macromedia Dreamweaver MX - одна из самых мощных программ, поддерживающих все современные стандарты Интернета и невероятно облегчающая выполнение даже самых сложных задач. Dreamweaver MX позволяет создавать сайты на базе различных веб-технологий: HTML, XHTML, XML, ColdFusion, ASP, ASP.net, JSP и PHP.

PHP - это язык обработки гипертекста, используемый на стороне сервера, конструкции которого вставляются в HTML-текст. Его цель - позволить максимально быстро создавать динамически генерируемые web-страницы. РНР имеет много возможностей (совместимость с различными серверами и платформами, поддержка различных технологий, использование различных протоколов, наличие функций для работы с текстовыми данными любых форматов, включая XML, работа с базами данных, простой синтаксис и т.д.), но несмотря на это существует недостаток - бесплатность. Для создателей рядовых сайтов это плюс, но для серьезных компаний, дорожащих своей репутацией, это минус. Технология практически идеальна для разработки развлекательного или коммерческого интернет-проекта (например, интернет-магазина).

Active Server Pages (ASP) - это серверная среда для разработки и выполнения динамических интерактивных веб-приложений. Средства ASP позволяют объединить возможности HTML-страниц, команд сценариев и компонентов COM в интерактивных веб-страницах и мощных веб-приложениях, делают удобным и легким процесс их создания и изменения.

ASP также имеет большое количество возможностей (удобный способ объединение Server-Side Script c HTML, скриптовый подход, концепция "Session", использование компонентов COM, удобный набор объектов-утилит, обработка ошибок, интеграция XML и др.), но уступает РНР по быстроте обработки сценариев (РНР не использует COM как основу работы), совместимостью с различными операционными системами (ASP рассчитан на Windows), работе с СУБД (ASP ориентирован прежде всего на СУБД от Microsoft). Встроенный в ASP-страницы SQL усложняет код и делает его непереносимым на другой источник данных. ASP можно однозначно порекомендовать для разработки сложных приложений на платформе MS Windows (IIS) с использованием технологий COM, DCOM, ActiveX и т.д.

Расширяемый язык разметки (XML) является подклассом стандартного языка разметки (SGML). XML был задуман как гибкий и в то же время формальный метаязык для использования в Интернете. Его назначение - описывать языки разметки. XML можно применять как на стороне сервера, так и на стороне клиента. XML подходит и для создания баз данных. В документе XML используется древовидная структура хранения данных. Хотя по большому счету хранение данных в виде документов XML не слишком эффективно, у такого способа хранения есть свои преимущества. Как и в отношении передачи сообщений, самым большим преимуществом является простота.

Мы выделили критерии сравнения технологий PHP, ASP, XML и, опираясь на них, разработали методические рекомендации в зависимости от конкретного технического задания. Выбор технологии зависит от сложности и формы содержания сайта - для разработки сайтов, не содержащих сценариев и не имеющих возможности обратной связи, следует использовать технологию XML; для разработки несложного, однородного по форме содержания сайта - технологию РНР; для разработки несложного, разнородного по форме содержания сайта - технологию ASP; для разработки сложной разнородной системы следует задействовать все три технологии.

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

Нами были рассмотрены возможности применения мощного и эффективного инструмента разработки динамических сайтов для реализации технологий ASP, PHP и XML. В работе были изложены теоретические основы сайтостроения средствами разных технологий, реализуемых в рамках одного инструмента. Была разработана методика, которая впоследствии может применяться разработчиками для выбора оптимального средства создания динамических веб-сайтов в зависимости от прикладных задач.

Список используемых источников

1. Бардзелл Д. Macromedia Dreamweaver MX 2004 с ASP, ColdFusion и PHP. Из первых рук. М.: ЭКОМ, 2006. 235 с.

2. Бумфрей Ф., Диренцо О. XML. Новые перспективы. М.: ДМК-Пресс, 2000. 272 с.

3. Веллинг Л., Томсон Л. Разработка Web-приложений с помощью PHP и MySQL. М.: Вильямс, 2005. 429 с.

4. Дунаев В.В. Самоучитель PHP. СПб.: Питер, 2007. 160 с.

5. Дунаев В.В. Самоучитель. Сценарии для Web-сайта. PHP и JavaScript. СПб.: BHV-Санкт-Петербург, 2006. 279 с.

6. Зольников Д.С. PHP 5. Как самостоятельно создать сайт любой сложности. М.: НТ Пресс, 2005. 109 с.

7. Кузнецов М.В., Симдянов И.В. PHP 5. Практика создания web-сайта. СПб.: BHV-Санкт-Петербург, 2005. 401 с.

8. Куссуль Н.Н., Шелестов А.Ю. Использование PHP. Самоучитель. М.: Вильямс, 2006. 117 с.

9. Кэгл К. XML. М.: ЛОРИ, 2006. 425 с.

10. Леонтьев Б.К. PHP 5.0 для начинающих, или как создать динамичный Web-сайт. М.: Новый издательский дом, 2006. 109 с.

11. Мазуркевич А., Еловой Д. PHP: настольная книга программиста. М.: Новое знание, 2006. 242 с.

12. Мак Т., Вест Р. Dreamweaver MX 2004. Шаг за шагом. Самоучитель. М.: ЭКОМ, 2006. 312 с.

13. Молер Дж., Боуэн К. Dreamweaver MX 2004. Руководство Web-дизайнера. М.: ЭКСМО, 2005. 67 с.

14. Старыгин А. XML Разработка WEB-приложений. СПб.: BHV-Санкт-Петербург, 2003. 199 с.

15. Фландерс Й. ASP - взгляд изнутри. Для программистов. М.: ДМК-Пресс, 2001. 135 с.

16. Хабибуллин И.Ш. Самоучитель XML. СПб.: BHV-Санкт-Петербург, 2003. 111 с.

17. Хестер Н. Создание Web-страниц в Dreamweaver. М.: НТ Пресс, 2005. 104 с.

18. Шкрыль А.А. PHP - это просто. Программируем для Web-сайта. СПб.: BHV-Санкт-Петербург, 2006. 161 с.

19. http://library. mnwhost.ru/webdev/asp/asp. php.

20. http://gun. cs. nstu.ru/IISHelp/iis/htm/asp/iiwanew. htm.

21. http://www.stfw.ru/page. php? id=3182.

22. http://web. wbz.ru/index. php? page=lesns&hid=2&pid=2.

23. http://php. segmenta.ru/manual/ru/intro-whatcando. php.

24. http://webzona.org/article/a-3.html.

25. http://stud. h16.ru/education/php/.

26. http://www.phpclub.net/manrus/.

27. http://www.sytchev.ru/xml/xml.

28. http://www.uni-vologda. ac.ru/students/tav/xsl. htm.

29. http://www.citforum.ru/internet/xslt/xslt. shtml.

30. http://argon.com.ru/internet/webmastering/webtech.

Размещено на Allbest.ru