Практика создания динамических Web-узлов
Создание страницы с описанием продукции в ColdFusion MX
Создание страницы с описанием продукции в ColdFusion MX
Теперь мы займемся созданием страницы с описанием продукции в ColdFusion. На этой странице будет отображаться не только информация о продукте, выбранном на предыдущей странице. Эта страница будет также служить картой покупки, которую пользователь сможет использовать для оформления заказа.
Чтобы создать страницу с информацией о продукте, выполните следующие действия.
1. Выберите в меню пункт File=>New. Откроется диалоговое окно New Page (Новая страница) (или страница New from Template, если в качестве источника был выбран шаблон). Выбрав раздел Template, выберите в списке узлов созданный нами JCT Dynamic Site. В средней части окна отобразится список шаблонов. Выберите шаблон main, после чего щелкните на кнопке Create.
2. После того как откроется новая страница, в поле Title введите ее название — Product Details.
3. Щелкните на редактируемой области страницы. Выделите и удалите слово page-Content. Откройте диалоговое окно Insert Table, выбрав пункт меню Insert=>Table. Введите следующие параметры новой таблицы: 2 строки, 2 столбца, ширина 100%. Для ширины границы и отступов введите нулевые значения. Щелкните на кнопке ОК. В области pageContent отобразится созданная таблица.
4. Выделите в новой таблице правый столбец и объедините в нем ячейки (Modify=>Table=>Merge Cells). В правом столбце сформируется единая большая ячейка.
5. Щелкните на правой ячейке. В параметрах вертикальной разметки в окне свойств выберите пункт Тор. Вся информация в ячейке будет смещена к ее верхней границе, независимо от ее размера.
6. В правой ячейке создайте таблицу, состоящую из двух столбцов и трех строк и занимающую 100% ширины данной ячейки. Как обычно, для ширины границы и отступов установите значение 0.
7. Откройте панель Image Assets. Если она не отображается при данной компоновке окон, выберите в меню пункт Window=>Assets. В папке рисунков узла найдите три файла: shopcart_blue_finger.gif, shopcart_red_finger.gif и shopcart_yellow_finger.gif.
8. Щелкните на первом из этих файлов — shopcart_blue_finger.gif — и перетащите его в верхнюю левую ячейку только что созданной таблицы размером 2x3.
9. Щелкните на втором файле — shopcart_red_finger.gif — и перетащите его в ячейку под первым рисунком.
10. Щелкните на третьем файле — shopcart_yellow_finger.gif — и перетащите его в нижнюю левую ячейку (под красным указателем).
11. Щелкните в правой верхней ячейке и введите Your Security (Ваша безопасность).
12. Щелкните в правой средней ячейке и введите Exchange Policy (Политика обмена информацией).
13. Щелкните в правой нижней ячейке и введите Your Gift Packages (Призовые товары).
14. Выберите файл jct_animated events.gif и перетащите его под внутреннюю таблицу. Щелкните в ячейке, содержащей анимацию, и выберите выравнивание по горизонтали по правой границе. Сохраните страницу под именем productdetails.cfm. Сохраненный файл будет иметь формат шаблона ColdFusion.
15. Выделите верхнюю левую ячейку во внешней таблице в редактируемой области pageContent и вставьте область изображения размером 151x128 пикселей. Присвойте этой области имя productPic. Сохраните созданную страницу (Рисунок 19.20) и закройте ее.
