Пошаговое руководство. Создание и изменение CSS-файла
Данное пошаговое руководство представляет возможности каскадных таблиц стилей (CSS) в Visual Studio 2008. Оно поможет создать макет страницы из трех столбцов, проиллюстрирует базовые методы создания новой веб-страницы и новой таблицы стилей.
В этом пошаговом руководстве представлены следующие задачи:
Создание веб-узла файловой системы.
Настройка веб-узла с помощью возможностей CSS.
Создание макета страницы с тремя столбцами с помощью CSS.
Создание нового веб-узла файловой системы
В Visual Web Developer в меню Файл выберите Создать веб-узел.
В окне Создать веб-узел в группе Установленные шаблоны Visual Studio выберите Веб-узел ASP.NET.
В окне Расположение выберите Файловая система и введите имя папки, в которой нужно сохранить страницы веб-узла.
Например, введите следующее имя папки C:\ CSSWebSite.
В списке Язык выберите Visual Basic или Visual C# и нажмите кнопку ОК.
Visual Web Developer создаст папку и новую страницу с именем Default.aspx.
Добавление элементов страницы и применение к ним стилей
Чтобы приступить к форматированию и применению стилей вместо создания элементов для стиля, в этом разделе представлен набор элементов страницы. Эти элементы можно копировать и вставлять на страницу. Код содержит разделы с элементами div, включающими заголовок, разделы левой и правой боковой панели, раздел основного содержимого и нижний колонтитул. Эти простые элементы содержат текст, который может работать с идентификаторами элементов. В некоторых случаях элементы содержат классы CSS, которые можно использовать для применения стиля к отдельным элементам на странице.
Добавление элементов страницы
В следующей процедуре скопируйте элементы страницы, с которыми можно работать с помощью инструментов CSS. Элементы страницы состоят из заголовка, который содержит текст и поле поиска, нижнего колонтитула и трех текстовых разделов. Основное содержимое страницы размещается в последнем текстовом разделе.
Добавление элементов на страницу по умолчанию
Откройте или перейдите к странице Default.aspx.
Перейдите в представление исходного кода.
Добавьте следующий код после тега <form>:
Копировать
код<div id="pagecontainer">
<div id="banner">
<h1>AdventureWorks Styling Page</h1>
<h2>Making CSS Styling Easier in Design View</h2>
<div id="search">Find:<input id="searchbox" type="text" />
<input id="searchbutton" type="button" value="Go" />
</div>
</div>
<div id="leftsidebar" class="column">
<h3>Matters of the Web</h3>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur in sem. Vivamus adipiscing vulputate lacus. Sed enim
lorem, fringilla eget, nonummy sed, ullamcorper sit amet, diam. Sed a justo. Curabitur quis nibh sit amet nunc malesuada
rutrum.</p>
</div>
<div id="rightsidebar" class="column">
<h3>Matters of the Web</h3>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur in sem. Vivamus adipiscing vulputate lacus. Sed enim
lorem, fringilla eget, nonummy sed, ullamcorper sit amet, diam. Sed a justo. Curabitur quis nibh sit amet nunc malesuada
rutrum.</p>
</div>
<div id="maincontent" class="column">
<h2>Matters of the Web</h2>
<p> Pellentesque mattis tincidunt ipsum. Donec tempus, nunc vitae rhoncus imperdiet, eros turpis accumsan risus, ut luctus ipsum
lacus a felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean convallis euismod
nulla. Suspendisse potenti. Donec in mi nec odio tincidunt luctus. Donec euismod, mauris cursus molestie convallis, quam
pede tempus magna, mollis dapibus quam est et magna. Aenean eros massa, elementum vehicula, dapibus eget, lobortis non,
mauris. Vivamus nisl ante, interdum eget, sagittis vel, scelerisque nec, magna. Praesent placerat nibh vel metus viverra
tincidunt.</p>
<p>Fusce magna urna, gravida non, sodales vehicula, consequat ac, lacus. Ut sed eros sit amet neque malesuada
malesuada. Fusce porttitor cursus eros. Maecenas libero odio, convallis vel, tristique id, sodales vel, leo. Curabitur nibh
neque, interdum eget, convallis id, adipiscing nec, risus. Suspendisse rutrum dui sed urna. Pellentesque leo felis, tempor eu,
convallis venenatis, auctor vitae, justo. In at massa.</p>
</div>
<div id="footer">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit 2007.</p>
</div>
</div>
Сохраните страницу.
Перейдите к представлению Конструктор, чтобы просмотреть форматирование по умолчанию.