Простий шлях створення Web-сайту за допомогою WebSphere Studio Web Site Designer і шаблонів сторінок

WebSphere Studio Web Site Designer і шаблони сторінок дозволяють генерувати JSP / HTML-сторінки з однаковим зовнішнім виглядом і динамічно генеруються посиланнями для навігації. У даній статті показано, як застосувати шаблон сторінки для Web-сайту, використовуючи приблизні дані, як використовувати панелі навігації з шаблоном сторінки, як створити шаблон сторінки з нуля і як призначити шаблон сторінки.


Введення


IBM WebSphere Studio має потужні інструментальні засоби управління Web-сайтом – Web Site Designer і шаблони сторінок. У даній статті розглядається приклад створення Web-сайту за допомогою Web Site Designer і шаблонів сторінок, а також описується процес створення шаблону сторінки і призначення його декільком сторінкам.


Огляд Web Site Designer і шаблонів сторінок


Шаблони сторінок є однією з нових функціональних можливостей WebSphere Studio Web Site Designer. Використовуючи шаблони сторінок ви зможете:



Якщо ви створюєте шаблон сторінки і декілька Web-сторінок, до яких цей шаблон застосовується, то поновлення шаблону сторінки негайно відображаються у всіх Web-сторінках відразу після збереження файлу шаблону. Файл шаблона та Web-сторінки містять спеціальні теги коментарів, що визначають загальні або залежні від сторінки інформаційні області. Ви можете розміщувати теги коментарів у будь-якому місці шаблону. Шаблон сторінки можна використовувати і зі статичними Web-сторінками, і з динамічними.


Використовуючи Web Site Designer ви можете:



У даній статті розглядаються головним чином динамічно генеруються панелі навігації, хоча Web Site Designer має інші корисні функції управління Web-сайтом. Використовуючи панель навігації та шаблони сторінок спільно, ви можете створювати кілька сторінок із загальною схемою, загальними секціями, наприклад заголовками і виносками, і динамічно генерувати навігаційні панелі.


Ви можете також визначити панель навігації за допомогою спеціальних тегів коментарів. Вони генерують панель навігації використовуючи два файли: файл навігації по Web-сайту, що описує структуру сайту, і файл специфікації навігації, що визначає зовнішній вигляд і поведінка панелі навігації і використовує для цього HTML-теги і спеціальні теги коментарів.


Даний огляд показує взаємозв'язки між Web Site Designer, шаблонами сторінок і HTML / JSP-сторінками:


Малюнок 1. Огляд Web Site Designer і шаблонів сторінок

Створення Web-сайту


У даній статті розглядається використання Web Site Designer для імпорту існуючого Web-сайту за допомогою функції Import WebSphere Studio.


C Web Site Designer ви зможете:



Імпорт існуючого Web-сайту


Створіть новий Web-проект у WebSphere Studio V5.1, відкрийте Web Site Designer, двічі натиснувши на Web Site Navigation у вікні Project Navigator. Потім імпортуйте існуючі Web-сторінки:



  1. Створіть новий статичний Web-проект: виберіть File => New => Static Web project.
  2. Імпортуйте існуючі Web-сторінки: скопіювати ваші власні Web-сторінки в папку WebContent або імпортуйте приклад Web-сторінок із завантаженого zip-файлу наступним чином:

    1. Перейдіть в папку WebContent вашого Web-проекту.
    2. Виберіть Import. Відкриється майстер імпорту.
    3. На сторінці майстра в якості джерела імпорту виберіть Zip file.
    4. Вкажіть WebSite.zip в полі From zip file і натисніть Finish.
    Ваші Web-сторінки будуть імпортовані в папку WebContent.
  3. Після імпорту Web-сторінок вам необхідно додати існуючі Web-сторінки в систему навігації Web-сайту: виберіть Add Existing Pages у контекстному меню. Відкриється майстер Add Existing Pages.
  4. На сторінці Select a top page майстра виберіть першу сторінку вашого проекту. Вкажіть / WebContent / index.html (або вашу власну головну Web-сторінку). Якщо ця сторінка містить посилання на інші сторінки, додайте ці сторінки натисканням Add linked pages. Вкажіть Depth limit для установки обмеження глибини переходів по посиланнях від основної сторінки. Для даного прикладу виберіть No limit для додавання всіх сторінок, на які є посилання в основній сторінці.
  5. Натисніть Next. Відкриється сторінка Add existing pages to Web site.
  6. Знову натисніть Next. Відкриється сторінка Continue applying page template. Ви можете послідовно застосовувати шаблон сторінки, вибираючи Proceed with wizard and apply page template, Але замість цього виберіть Exit wizard and apply page template later. Цей крок описаний нижче.
  7. Натисніть Finish для закриття вікна.

Як показано на малюнку 2, додалися всі сторінки, пов'язані з основною сторінкою сайту, і відкрився редактор Web Site Designer. Для автоматичного генерування навігаційної панелі буде використовуватися структура Web-сайту. Це процес описаний нижче.


Малюнок 2. Web Site Designer – вікно навігації

Ви можете додати ваші Web-сторінки в Web Site Designer, натискаючи Convert to Web site. Якщо ваш проект має Web site navigation, То ви можете додати існуючі Web-сторінки, використовуючи Adding existing pages замість Converting to Web site.


Призначення шаблону сторінки


Призначаючи шаблон сторінки, можна підтримувати однаковий зовнішній вигляд і поведінка вашого Web-сайту. Для призначення шаблону сторінки з використанням прикладу шаблону в Web Site Designer:



  1. Відкрийте Web Site Designer подвійним натисканням на Web site navigation у створеному вище проекті.
  2. Натисніть Ctrl + A для призначення шаблону сторінки всіх сторінок. Ви можете також вибрати сторінки, перемістивши область виділення.
  3. Виберіть Page template => Apply template. Відкриється майстер Apply page template.
  4. На першій сторінці майстра виберіть шаблон, який сподобався з прикладу. Для даного прикладу виберіть B-03_blue.htpl. Цей шаблон містить панель навігації, тому після його призначення ця панель буде розміщена на всіх ваших сторінках. Натисніть Next.
  5. Шаблон сторінки містить декілька інформаційних областей, які ви можете відобразити на реальний вміст. Тобто, вам потрібно зв'язати попарно інформаційну область шаблону сторінки з вашими Web-сторінками. На другій сторінці вкажіть індексний сторінку, так щоб ви змогли призначити шаблон всіх вибраних сторінок. На третій сторінці ви можете вказати їх комбінацію. У даному випадку за замовчуванням вказана сторінка index.html. Натисніть Next.
  6. На третій сторінці зв'яжіть попарно інформаційну область шаблону з реальним вмістом. Обраний вами на першій сторінці шаблон B-03_blue.htpl містить наступні області:
    headarea

    • Область для відображення вмісту тега <head>. Таким чином, headarea в шаблоні буде замінений вашим вмістом тега <head>.
    bodyarea

    • Область для відображення основного вмісту. Вкажіть реальний вміст для цієї області. Наприклад, на малюнку 3 основний вміст виділено червоною рамкою. Ця область повинна бути відображена на bodyarea в шаблоні як основний вміст. На третій сторінці вкажіть призначення для bodyarea. За замовчуванням для кожної інформаційної галузі вибираються теги <head> і <body>. У даному прикладі ви можете використовувати ці пари за замовчуванням. Натисніть Next.

    Малюнок 3. Відображення інформаційних областей

  7. На останній сторінці виконайте попередній перегляд сторінки з призначеним шаблоном і натисніть Finish.

Обраний вами шаблон (B-03_blue.htpl) повинен бути призначений всіх сторінок вашого сайту. На всіх сторінках повинна відображатися синя лінія, яка вказує на те, що шаблон призначений:


Малюнок 4. Шаблон призначений всіх сторінок

Після призначення шаблону вміст тіла кожної сторінки буде розташовуватися в області bodyarea шаблону сторінки:


Малюнок 5

З іншого боку, навігаційні панелі теж генеруються для всіх сторінок, оскільки їх містить призначений шаблон (див. рисунок 6). Ці навігаційні панелі генеруються автоматично в залежності від структури сайту. Ви можете також керувати призначенням навігаційних посилань, змінюючи значення атрибуту тега цих посилань:


Малюнок 6. Навігаційна панель генерується автоматично

Створення навігаційних панелей


За допомогою редактора Web Site Designer ви можете додавати, переміщати і видаляти сторінки в структурі вашого Web-сайту. Дана стаття знайомить вас з використанням редактора Web Site Designer. Для створення навігаційних панелей на ваших сторінках буде використовуватися структура Web-сайту. Іншими словами, структура являє собою визначення взаємозв'язків між кожної Web-сторінкою для навігації. Для використання навігаційної панелі необхідно додати у ваші Web-сторінки теги Web Site Navigation, розташовані в панелі Palette view. Однак ви вже зробили це, призначивши приклад шаблону сторінки, оскільки цей шаблон містить дані теги. Тег Web Site Navigation – це спеціальний тег коментаря, який буде перетворений в навігаційну посилання, що залежить від структури Web-сайту. Призначення посилань навігаційної панелі визначається значенням атрибуту тега навігаційної панелі. Тобто, для зміни призначення ви повинні відредагувати значення атрибута тегів навігаційної панелі. Давайте змінимо призначення посилання. Ваші теги навігації містяться в призначеному шаблоні сторінки. Перш за все, ви повинні відкрити шаблон сторінки в Page Designer. Для відкриття шаблону сторінки:



  1. Відкрийте Web Site Designer.
  2. Виберіть сторінку, яка містить синю лінію (призначений шаблон) в Web Site Designer.
  3. Виберіть Page template => Open Template With => Page Designer for Template з контекстного меню. У Page Designer відкриється шаблон сторінки (B-03_blue.htpl).

Потім ви повинні змінити призначення посилання:



  1. Виберіть тег навігаційної панелі

    Висновок


    Дана стаття знайомить з процесом створення ефективного Web-сайту з використанням технології шаблонів сторінок і програми Web Site Designer. За допомогою цієї технології ви можете створити Web-сайт, що має однаковий зовнішній вигляд і поведінка, а також можете використовувати на ваших сторінках автоматично згенерували програмою Web Site Designer панелі навігації.

    Схожі статті:


    Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

    Коментарів поки що немає.

    Ваш отзыв

    Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

    *

    *