Изменение размера заголовка и положения его содержимого

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

Примечание.

Чтобы изменить уже заданное значение размера элементов, можно использовать клавишу CTRL и клавиши со стрелками. Например, если ширина заголовка увеличена до 785 точек, с помощью комбинации клавиш CTRL + клавиша со стрелкой влево можно уменьшить ширину до 780 точек.

Изменение размера заголовка

1. Перейдите в режим Конструктора.

2. Щелкните текст h1 («AdventureWorks Styling Page»), чтобы выбрать его, и затем нажмите клавишу ESC два раза, чтобы выбрать вмещающий элемент, которым является элемент div заголовка.

3. Перетащите маркер изменения размера в нижнем правом уголу, чтобы изменить размер элемента div заголовка.

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

4. Измените размер элемента до 780 точек ширины и 100 точек высоты.

5. Чтобы просмотреть созданное правило стиля, перейдите к представлению Разделить и прокрутите окно до элемента style.

Можно увидеть, что было создано правило стиля для элемента div заголовка (с помощью селектора #banner).

6. В представлении Конструктор убедитесь, что выбран элемент div заголовка (тег div#banner все еще должен быть выбран в навигаторе по тегам).

7. На палитре инструментов (или в меню Формат) выберите Цвет фона.

Откроется палитра цветов.

8. На палитре инструментов выберите цвет для заголовка и затем нажмите кнопку ОК.

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

Размещение заголовочных элементов внутри заголовка

1. В представлении Конструктор выберите элемент div заголовка.

2. В меню Формат выберите Абзац.

Откроется диалоговое окно Абзац.

Так как элемент h1 имеет такую же длину, что и элемент div заголовка, текст можно вставить внутри элемента h1, чтобы поместить его по центру в области заголовка.

3. В диалоговом окне Абзац в раскрывающемся списке Выравнивание выберите Center и затем нажмите кнопку ОК.

4. Выберите элемент h2 и затем повторите шаги 2 и 3.

5. Выберите элемент div заголовка.

6. Удерживая нажатой клавишу SHIFT, наведите указатель мыши на край элемента div, пока не откроется подсказка, отображающая текущие значения внутренних полей.

7. Перетащите край внутреннего поля к верхней границе элемента div.

8. Перетаскивайте, пока два текстовых элемента не будут размещены по центру (значение около 30 точек).

Чтобы завершить работу над заголовком, необходимо разместить элемент div поиска и его элементы в области заголовка. Для этого можно использовать другую возможность приложения Visual Studio 2008 — сетку размещения.

Размещение элемента div поиска в области заголовка

1. В представлении Конструктор выберите элемент div поиска (div#search).

2. В меню Формат выберите Задать положение и затем выберите Абсолютное.

3. Перетащите элемент div поиска с помощью его вкладки (текст div#search) в область заголовка справа от текстовых элементов.

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

4. Отпустите элемент div поиска, когда он займет нужное положение.