Раздел 6. Основы создания Web сайтов на С# в Visual Studio 2005/2008
Создание Web приложений и Web-сервисов в Visual Studio 2005 основано на использовании технологии ASP.NET, прообразом которой была технология ASP. Технология ASP появилась в 1997 году и предназначалась для построения web-страниц в Internet Information Server(IIS). В сценариях ASP HTML-код объединялся со сценарным кодом, интерпретируемым IIS в ответ на запросы со стороны клиента. В результате строилась страница HTML, которая возвращалась клиенту.
Технология ASP.NET (Active Server Pages .NET) позволила устранить ряд недостатков, присущих ASP (ровно, как и многим другим технологиям создания Web приложений), прежде всего, за счет вывода кода из HTML-страницы в отдельный исполняемый модуль, откомпилированный для среды .NET.
Если ASP представляла собой ISAPI DLL, с набором компонентов и несколькими системными файлами, то ASP.NET — стала частью платформы .NET. Напомним, что в NET используется Intermediate Language — общий промежуточный язык, в который компилируется любой код, независимо от исходного языка программирования. Это готовый к выполнению в среде .NET Framework код. Платформа .NET интерпретирует Intermediate Language и обеспечивает взаимодействие с операционной системой. Кроме того, .NET предоставляет интерфейс приложениям ASP.NET. ASP.NET, в свою очередь, предоставляет интерфейс Web-формам (страницам ASP.NET) и Web-службам. Такое многоуровневое построение позволяет стандартизировать обращение к системным вызовам для Windows и Web, что позволило создать единую методику и среду для разработки Windows программ, Web сайтов, сервисов, библиотек и т.п.
Таким образом, вторым преимуществом ASP.NET стало объединение методики разработки приложений для Web и для Windows. А унификация используемых языков разработки Web сайтов и Windows программ, применение единой среды разработки и отладки, во многом единых или схожих по свойствам элементов управления (controls или контролов), пространств имен (библиотек) и т.д. — сделало новую технологию самой популярной на данный момент.
С точки зрения работы сети обмен данными с web-сервисами проходит по TCP через 80 порт и с использованием стандартного метода POST протокола http.
Параграф 1.2. Где и как разрабатывать Web сайты
Web приложение ASP.NET выполняется на специальных Web серверах, на которых функционируют встроенные информационные службы Интернета — Internet Information Services (IIS). IIS поддерживают доступ по протоколам FTP и HTTP и все, что необходимо клиенту для доступа к Web содержимому сервера.
запустить IIS Manager (как правило, в группе Administrative Tools);
в контекстном меню узла «Web Sites» («Web узел по умолчанию») выбрать пункт меню «Properties»;
в появившемся окне свойств выбрать закладку «Home Directory» («Домашний каталог»);
в группе «Application Settings» нажать кнопку «Configurations:» («Настройка»);
В списке «Application Extensions» («Расширения») будут указаны все ISAPI-расширения IIS, установленные на текущий момент. Для расширения .aspx и нескольких других (.asax, .ascx, .ashx, .asmx, .axd, .config, .cs, .csproj, .java, .jsl, .licx, .rem, .resources, .resx, .soar, .vb, .vbproj, .vsdisco, .webinfo), зарегистрирован один исполняемый файл aspnet_isapi.dll. Предполагается, что на компьютере установлен IIS, а после него — .NET Framework, при другой последовательности установки ISAPI-некоторые расширения, возможно, не будет зарегистрированы.
aspnet_isapi.dll обеспечивает обработку запросов ASP.NET и создания рабочих процессов aspnet_wp.exe, выполняющих запросы (aspnet_wp.exe — процесс, в котором, собственно, и работает ASP.NET, в Windows 2003 этот процесс носит имя — w3wp.exe).
Получив такой запрос, расширение проверяет настройки в секции <processModel> конфигурационного файла machine.config, находящегося в каталоге «%SystemRoot%\Microsoft.NET\Framework\v%CLRVersion%\CONFIG. Если уже существующий процесс aspnet_wp.exe не удовлетворяет хотя бы одному требованию, указанному в настройках, то aspnet_isapi.dll создает новый процесс с требуемыми настройками. При этом старый рабочий процесс продолжает существовать до окончания обработки выполняемых запросов, после чего удаляется. Таким образом, в любом случае, выполнение Web приложения будет осуществляться в среде IIS.
В ASP.NET 1.0 разработчик сайта, использующий ASP.NET, должен был иметь непосредственный доступ к серверу приложений и его файловой системе. Эта же возможность осталась и в ASP.NET 2.0, хотя стала наименее используемой разработчиками. Для обеспечения доступа к нужному каталогу файловой системы требовалось создать сетевое подключение, например, так. Откроем на панели Windows службу «Мой компьютер», в меню «Сервис» выберем пункт «Подключить сетевой диск». Найдем свободную букву, например «W», нажимаем кнопку «Обзор». Выбираем сетевое имя каталога сервера приложений, в котором будем вести разработку (естественно он должен быть открыт для Вас), ставим галочку «Восстанавливать при входе в систему» и нажимаем кнопку «Готово». Пусть каталог разработки будет:
В любом файловом менеджере (Проводник, Far, Windows Commander ..) в Frameworks\dev (на нашем диске «W») создаем директорию с именем нашего будущего решения, например «MySite1».
Далее, нам потребуется превратить реальный каталог в виртуальный и создать пул для приложения (поскольку эта часть не утратила актуальности, речь об этом пойдет ниже в параграфе «Развертывание Web сайтов на сервере»). С этого момента можно стартовать Visual Studio 2005 и приступать к созданию сайта на сервере.
В Visual Studio 2005 описанный выше путь стал не единственным, и, мало того, новая студия позволила создавать Web приложения вообще без использования IIS и на локальном компьютере (к IIS мы вернемся только при развертывание Web сайта, но это будет после того, как сайт создан и полностью отлажен). Иными словами, при разработке Web сайта на сервере мы предварительно выполняем настройку каталога сайта, а при разработке на локальном компьютере — при развертывании сайта.
Параграф 1.3. Создания Web сайта на локальном компьютере
Для обеспечения возможности создания сайтов на локальном компьютере без использования IIS в Visual Studio 2005 имеется собственный Web-сервер (версия бесплатного сервера Cassini).
Далее мы будем вести речь только о создании сайтов на локальном компьютере и их отладке с использованием локального Web-сервера. Хотя, существенного отличия в локальной и удаленной разработке сайтов нет (она заканчивается на этапе первого шага — выбора расположения сайта, см. ниже), но, выбираемый большинством разработчиков путь, дает Вам несомненные преимущества — возможность пошаговой отладки кода приложения, и независимость от сервера приложений.
Запустим Microsoft Visul C# Net и создадим новый Web сайт, как показано это на Рис.1. (Fole/New/Web Site).
В окне Templates диалогового окна «New Web Site» задаем «ASP.NET Web Site». В окне» Location» выбираем File System, с помощью кнопки Browse определяем папку, где будем создавать все наши сайты. В выбранной папке будет создана новая папка с именем нашего сайта (WebSite1 для Рис.1.). Не забудем выбрать Language и нажимаем «OK». Сайт создан
Рис.1. Создание ASP.NET Web сайта
Сайт на данном этапе представляет собой два файла (Рис.2.): Default.aspx и Default.aspx.cs. Файл Default.aspx определяет HTML содержимое сайта, а Default.aspx.cs — программный код, который отделен от HTML содержимого и предназначен для программного формирования данного содержимого или выполнения каких либо иных действий на сервере. Эта связь определена в директиве Page через свойство CodeFile.
Рис.2. ASP.NET решение Web сайта
Рассмотрим связанный код файла Default.aspx.cs:
Код состоит из одного класса _Default, наследника класса System.Web.UI.Page. Имя класса также присутствует в директиве Page файла Default.aspx — Inherits=»_Default»;
Для того, чтобы убедиться, что это Web сайт, нажмем кнопочку F5(меню Debug\Start Debugging). Отладчик предложит создать файл Web.config, после подтверждения согласия стартует локальный Web Server, иконка которого помещается в системный трэй, а решение отобразится в Web Browser(Рис.3.).
Рис.3. Выполнение ASP.NET сайта
Параграф 1.4. Жизненный цикл страницы
И хотя наш сайт пуст, но он уже «ведет насыщенную жизнь». Для того, чтобы убедиться в этом, добавим в директиву Page свойство Trace=»true» (Директива Page имеет множество свойств, о которых мы будем вести речь по мере их востребования). Вновь нажимаем F5. Результат показан на Рис.4.
Рис.4. Жизненный цикл страницы
Мы видим множество событий, которые произошли при отображении даже пустой страницы. При создании страницы одно из событий (Load) оформляется как метод класса (Page_Load). Однако разработчику доступны и еще четыре события: PreInit, Init, PreRender, Unload. Для каждого из них в класс может быть включен метод его обработки. Кроме того, разработчику будут доступны и события дочерних элементов управления, которые возникают между событиями Load и PreRender страницы. Это следует хорошо запомнить (к этому мы вернемся в следующем параграфе).
Параграф 1.5. Добавление функциональности сайту
На данном этапе наш сайт работоспособен. Добавим на сайт несколько контролов. В окне дизайнера формы (вкладка Designe файла Default.aspx) или на вкладку Source (в отличие от Visual Studio 2003) мы можем перетащить доступные визуальные контролы из окна Toolbox с любой его вкладки, например, Button и Label с вкладки Standart(Рис.5.).
Рис.5. Добавление контролов на сайт
После добавления контрола можно посмотреть и установить его свойства, воспользовавшись его контекстным меню и вызвав окно свойств (пункт Properties) или задать события для обработки, перейдя на вкладку Events окна Properties и кликнув мышкой в окошечке рядом с именем события. Напомним, что двойной клик по самому контролу вызывает его наиболее часто (по мнению разработчиков) востребованное событие (для кнопки это OnClick и обработчик события Button_Click).
В файле Default.aspx.cs добавим (напишем по образцу метода Page_Load) методы Page_PreInit, Page_Init, Page_PreRender, Page_Unload. Создадим событие Button1_Click, Button1_Init, Button1_Load, Button1_PreRender, Button1_Unload (методы для обработки событий пишутся для страницы, а для контролов создаются, а не пишутся, иначе в файле Default.aspx контрол будет не связан с событием).
Файл Default.aspx (его содержимое между тэгами Body) примет вид:
Наполним содержанием методы событий. Поставим целью показать не только возможности вывода текста на страницу, но и возможности изменения свойств элементов управления на различных этапах жизненного цикла страницы. Будем исследовать свойство Text элемента управления Label. Для контрола Label сначала установим свойство EnableViewState в true (по умолчанию), а затем в false и проанализируем результаты функционирования кода.
Свойство страницы IsPostBack равно false только при первом вызове страницы.
Выполним решение (F5), результат показан на Рис.6.
Рис.6. События жизненного цикла страницы и их влияние на свойства элементов
Событие PreInit фиксирует этап начала персонализации и формирования страницы в целом. У дочерних элементов это событие не возникает. В обработчике Page_PreInit можно устанавливать шаблоны и темы оформления, изменять свойства элементов. При повторном вызове страницы обработчик данного события также вызывается, но его действие не изменит свойства элементов, у которых установлено свойство EnabledViewState в true.
Событие Init — начало рекурсивной инициализации содержания дочерних элементов страницы. Событие Init дочерних элементов вызывается ранее события Init страницы. Для событий Init дочерних элементов могут быть созданы собственные обработчики события (например, Button1_Init). В Page_Init возможно считывать и инициализировать свойства всех дочерних элементов. При повторном вызове страницы обработчики данного события также вызывается, но их действие, как и в PreInit, не изменит свойства элементов, у которых установлено свойство EnabledViewState в true.
Событие Load возникает как для страницы, так и для дочерних элементов. События дочерних элементов возникают позже чем событие загрузки страницы (в отличии от событий Init). На этом этапе доступны все свойства элементов управления, не зависимо от свойства EnableViewState.
Событие PreRender возникает тогда, когда начинается проверка создания всех элементов страницы. Это последняя возможность внести изменения в свойства страницы и ее элементов.
Параграф 1.6. Установка Web сайта на сервер
В предыдущем параграфе мы создали Web сайт, который выводит информацию в Browser. Однако, он должен работать не в режиме отладки, а на некотором сервере приложений или, хотя бы, на локальном компьютере, и вызываться как любая интернет страничка из Browser.
Настройка функционирования сайта на локальном компьютере во многом схожа с настройкой его функционирования на сервере приложений и проходит ряд этапов.
Этап 1. Публикация сайта
Сайт перед развертыванием должен быть опубликован — то есть, исполняемый модуль должен быть превращен в dll, а файл странички Default.aspx получить ссылку на эту dll. Сайт перед развертыванием должен быть опубликован — то есть, исполняемый модуль превращен в dll, а страничка aspx получить ссылку на эту dll. Для публикации сайта создадим какой либо каталог (поближе к корню жесткого диска, например C:\MySite_1). Последовательно выполним в меню Visual Studio подпункт Rebuild Web Site пункта Build, а затем подпункт Publish Web Site. В появившемся окне Publish Web Site (Рис.7.) пишем или выбираем C:\MySite_1. Нажимаем кнопочку OK. Сайт опубликован (Рис.7.). Он состоит из нашего файла Default.aspx, файла Web.config (к этому файлу мы не раз еще вернемся), необязательного для сайта файла PrecompiledApp.config и библиотеки со случайным именем.
Рис.7. Публикация Web сайта
Обратим внимание на то, что файл Default.aspx остался таким же, как мы его создали. Изменилась только директива Page — в ней добавилась ссылка на библиотеку класса.
Этап 2. Настройка IIS для работы с сайтом
Для функционирования Web сайтов на Вашем локальном компьютере (не только данного сайта) должна быть установлена служба IIS. Если для выхода в Интернет используется прокси-сервер (на домашних компьютерах прокси для этого никогда не используется), может потребоваться настроить Internet Explorer так, чтобы обходить прокси-сервер (например, так, как показано на Рис.8.).
Рис.8. Настройка Internet Explorer
IIS при установке Windows обычно по умолчанию не устанавливаются. Установить IIS или выбрать дополнительные компоненты можно с помощью приложения «Установка и удаление программ» панели управления Windows. Чтобы установить IIS, добавить или удалить компоненты, нажимаем кнопку «Пуск», «Настройка», выбираем «Панель управления», «Установка и удаление программ». Открываем вкладку «Добавление и удаление компонентов Windows» и ставим галочку напротив Internet Information Serveces (IIS) — Рис.9.
Рис.9. Установка IIS
Далее следуем появляющимся на экране инструкциям для установки, удаления или добавления компонентов IIS.
После установки программы на компьютере создаются следующие каталоги с пользовательским содержимым:
Вы работаете в Visual Studio и на Вашем компьютере Net Framework был установлен вместе со студией.
Если Вы устанавливаете сайт на другом компьютере, то вам придется выполнить установку Net Framework. В Windows Vista Net Framework должен быть предустановлен, ровно как и в Widdows XP с Servis Pak 2, для остальных Windows потребуется установить дистрибутивный пакет Microsoft .NET Framework 2.0, который устанавливает среду .NET Framework и связанные с ней файлы, необходимые для запуска приложений, созданных для работы в среде выполнения .NET Framework 2.0.
Все необходимое можно скачать бесплатно с сайта Microsoft и более близких ссылок: Ссылка 1, Ссылка 2, Ссылка 3. В любом поисковике наберите «Microsoft .NET Framework скачать» и Вы найдете еще множество ссылок и инструкций по установке (хотя они и не требуются, пакет устанавливается как обычная программа).
Этап 3. Проверка работоспособности
Для проверки работоспособности IIS набираем в браузере (в Explorer):
Если все настройки Windows правильны, то в браузере должны отобразиться страницы:
Теперь можно страницы ASP просто копировать в папку.
Доступ к файлу из браузера
Если проверка пройдет неудачно, проверьте настройки ISS (кнопка «Пуск», «Настройка», выбираем «Панель управления», «Администрирование», «Internet Information Services», развертываем в дереве компьютера «Веб-узел по умолчанию») и, в контекстном меню «Веб-узел по умолчанию», выбираем пункт «Свойства». На вкладке «Домашний каталог» и
Рис.10. настройки ISS
вкладке ASP.NET (Рис 2.4) устанавливаем настройки, показанные на рисунках.
Рис.11. настройки ISS
Для развертывания программы потребуется еще одно действие — создание виртуального каталога для программы.
Этап 4. Установка сайта на локальный сервер
Скопируйте всю директорию C:\MySite_1 с нашим сайтом в каталог C:\Inetpub\wwwroot\ (именно сюда).
Вновь запустите IIS (кнопка «Пуск», «Настройка», выбираем «Панель управления», «Администрирование», «Internet Information Services», развертываем в дереве компьютера «Веб узел по умолчанию»). В его дереве появилась папка MySite_1. Осталось превратить ее в виртуальный каталог. На вкладке «Каталог», даем права данному приложению и нажимаем кнопку «Создать».
Рис.12. Создание виртуального каталога
Доступ к тексту сценариев (Scripts Source Access) — разрешает выполнение ASP.NET файлов.
Чтение (Read) — IIS дает доступ пользователю к запрошенному ASP файлу каталога. Предоставление этого права не дает пользователю права на чтение конфигурационных файлов ASP NET, а отсутствие этого права запрещает доступ и к другим типам файлов (например, HTML и любым не ASP NET файлам).
Запись (Write) — разрешение на запись в каталог.
Выполнение (Execute) — разрешение на запуск других исполняемых файлов (например, ISAPI и CGI).
Запись в журнал (Log Visits) — разрешение на запись в журнал.
Обзор каталогов (Directory Browsing) — разрешение на просмотр файлов каталога.
Проверяем установки на вкладках «Каталог», «Документы» и «ASP.NET» (Рис.13.) и нажимаем кнопку «OK».
Рис.13. Создание виртуального каталога для папки MySite_1
Обратим внимание на изменившийся вид папки MySite_1 — этот вид соответствует виртуальным каталогам и к ним можно обращаться по URL (Рис.14.).
Рис.14. Виртуальный каталог MySite_1.
Набрав в Explorer следующую строку, мы вызываем программу, она выполняет то, что презентовано выше.
Этап 5. Установка сайта на сервер приложений
Установка сайта на сервер приложений практически нечем не отличается от установки приложения на локальную машину. Скопируйте всю директорию C:\MySite_1 с нашим сайтом в каталог Веб узла по умолчанию сервера приложений. Для этого у вас должен быть соответствующий доступ к этому каталогу и IIS удаленного сервера. После этого сделайте каталог MySite_1 виртуальным, как мы делали выше. Единственное отличие на серверах приложений обычно требуется выбрать Application pool, который должен быть ASP.Net.2 (Рис.15.). Если вы сами разворачиваете сервер приложений, то возможно Вам придется его создать через контекстное меню узла Application Pools (Рис 16).
Рис.15. Виртуальный каталог MySite_1 на сервере приложений
Рис.16. Создание Application Pool для приложения
Глава 2. Подготовка setup файлов и инсталляция web сайтов
На данном этапе у нас есть решение, созданное на локальной машине в директории C:\SamplesASP\WebSite1, виртуальная директория для решения MySite_1 (C:\Inetpub\wwwroot\MySite_1). Мы можем воспользоваться заделом или создать новый сайт.
Изменим решение, убрав из него все лишнее, и вновь поместим на форму контрол Label и Button:
Наполним сайт содержанием:
Вызываем для решения Solution Explorer (View/Solution Explorer) и в самой верхней строчке решения вызываем контекстное меню пункт Add, выбираем пункт New Project. В открывшемся окне Add New Priject выбираем Project Types Setup and Deployment Projekts и Templates Web Setup Project, Name выбираем любое. Location также не имеет существенного значения — это где будут находиться файлы Setup (Рис.17,18.).
Рис.17. Создание проекта инсталляции
Рис.18. Создание проекта инсталляции
В окне File System (MySite1) добавляем через контекстное меню Web Application Folder, пункт Add/Project Output Content Files (рис 19.).
Рис.19. Создание проекта инсталляции
Для Web Application Folder вызываем контекстное меню, выбираем пункт Properties Window и можем поменять директорию установки на сервере — пункт Virtual Directory — изменим на созданную нами виртуальную директорию MySite_1 (Рис.20.).
Рис.20. Создание проекта инсталляции
Вызываем контекстное меню в Solution Explorer для узла MySite1 и выполняем пункт Rebuild (Перед этим необходимо выполнить Build/Rebuild Solutation в режиме Release).
Инсталляционные файлы находятся по адресу заданному нами в Location (Рис.18.) в директории Release. Это файлы MySite1.msi и setup.exe.
Стираем все из директории C:\Inetpub\wwwroot\MySite_1\ и выполняем установку, запустив на выполнение файл setup.exe. Согласившись со всеми настройками, мы закончим установку приложения. Вызываем сайт:
Аналогично можно поступить и на сервере приложений. Копируем файлы MySite1.msi и setup.exe. в любую директорию сервера приложений и выполняем установку, запустив на выполнение файл setup.exe (естественно на сервере) или MySite1.msi. Согласившись со всеми настройками, мы закончим установку приложения. Вызываем страничку из браузера:
Глава 3. HTML и Web контролы и их использование
3.1. HTML и Web контролы
Для уяснения разницы в использовании контролов вкладок HTML и Standart добавим в созданный выше проект два контрола Button — один с вкладки HTML, другой с вкладки Standart. Зададим соответствующие надписи на кнопках, чтобы можно было их различить, и рассмотрим HTML код в файле .aspx. Кнопка с вкладки Standart (Button1), в отличие от кнопки с вкладки HTML, имеет ID для идентификации событий на сервере, выражение runat=»server» в задании кода также говорит о ее назначении для серверной обработки событий. Кнопка с вкладки HTML является аналогом кнопки HTML документа и может быть использована соответствующим образам (например для запуска скриптов формы и т.п.).
HTML контролы могут быть преобразованы в так называемые, серверные элементы управления (HTML Server Controls) — серверные аналоги стандартных элементов HTML. Для преобразования достаточно вызвать контекстное меню для этого контрола и указать для него режим «Run as Server Control».
В большинстве HTML-редакторов, например, FrontPage, серверные элементы управления будут не видны. Перед Web-дизайнерами встает вопрос: воспользоваться средствами программирования NET или средствами Web-дизайна HTML-редакторов, к которым они привыкли. В тоже время Microsoft, в настоящее время, создала свои средства визуальной разработки (Visual Web Developer 2005), а, учитывая, что продукты фирмы имеют один из самых больших секторов на компьютерном рынке, то следует ожидать и поддержку Net от разработчиков других фирм.
Серверные элементы управления могут быть представлены множеством тегов (например DataGrid) и программист не должен знать (может и не знать) многие тонкости языка HTML — многофункциональный пользовательский интерфейс Web контролов снимает с программиста множество рутинных функций. Кроме того, исключаются неоднозначности в сформированном входном и выходном HTML коде (поле ввода в HTML, к примеру, может быть представлено и как тег textarea и как тег input type=»text»).
Если серверный и HTML контрол выполняют одинаковую функцию отправки информации на сервер (например, из текстового поля), то серверный контрол сохранит эту информацию (если обработчик какого либо события не изменит ее), а информация в HTML контроле будет стерта после отправки.
Серверные элементы имеют возможность корректировать код (подстраиваться) под тип браузера.
Перечисленное выше говорит о предпочтительности использования серверных контролов.
И в заключении рассмотрим сгенерированный HTML код страницы с двумя кнопками, который будет отображен в браузере.
Данный код, в отличии от исходного в файле aspx, не имеет уже выражения runat=»server» (браузеру нет смысла его интерпретировать), но появилось дополнительное скрытое поле (input type=»hidden») — это поле хранит информацию о состоянии (name=»__VIEWSTATE» ) всех серверных элементов управления.
3.2. Динамическое создание таблиц и работа с ними
Как пример использования серверных Web контролов имеющих аналог среди HTML контролов, рассмотрим динамическое создание таблиц. Этот пример призван показать богатство возможностей серверных контролов по сравнению с их «младшими братьями».
Для динамического создания таблиц в пространстве имен System.Web.UI.WebControls имеются ряд классов, основные из которых: HtmlTable, HtmlTableRow, HtmlTableCell, HtmlTableCellCollection, HtmlTableRowCollection
В Visual Studio реализована поддержка простой модели таблицы. Это означает, что нельзя динамически создать <caption>, <col>, <colgroup>, <tbody>, <thead>, <tfoot> элементы.
Обратим внимание, что создавать контролы придется каждый раз при перезагрузке страницы так как элемент Таблица добавляется в экземпляр класса страницы, который формируется заново при каждой загрузке страницы. Однако содержимое ячеек таблицы и состояние контролов восстанавливается (используется встроенный механизм ViewState).
Ниже приведен пример динамического создания таблицы, вывода в ячейки созданной таблицы информации и элементов управления, которые так же создаются динамически. Кроме того, показан пример использования событий динамически созданных и добавленных в ячейки таблицы элементов управления. На форме решения web сайта размещены три контрола: PlaceHolder, Label (id=Label11) и Button. Результаты работы кода представлены на Рис.21. Ряд пояснений даны в коде примера.
Рис.21. Пример работы с динамически созданной таблицей
Глава 4 Управление состоянием Web приложений
Параграф 4.1. Использование VIEWSTATE
Ранее мы отмечали, что код файла aspx. после первого вызова страницы с сервера, в отличии от исходного, уже не имеет свойства runat=»server» (браузеру он не нужен), но содержит дополнительное скрытое поле (input type=»hidden») — это поле хранит информацию о состоянии (name=»__VIEWSTATE» ) всех серверных элементов управления (на самом деле VIEWSTATE хранит не саму информацию, а дельты между значениями, которые присвоил сервер информационным полям элементов управления перед выдачей страницы клиенту и значениями, полученными перед очередным отображением страницы). Если добавить в директорию Page (как мы это уже делали) Trace=»true», то можно просмотреть вид и объем информации, передаваемой сервером (Рис.22.).
Рис.22. VIEWSTATE и объем передаваемой информации
Имеется возможность запретить использование __VIEWSTATE как для страницы целиком, так и для отдельных элементов, используя свойство EnableViewState, которое имеется и у директории Page, и у многих контролов.
Разработчик может хранить в VIEWSTATE и свою информацию, например, число ошибок допущенных при тестировании (в директиве Page EnableViewState должно быть true).
В приведенном примере значение переменной viNumError после отсылки страницы на сервер и ее возврата клиенту не сохраняется. VIEWSTATE помогает поместить ее значение в поле сохранения и восстановить при загрузке страницы. Этот механизм достаточно удобен при работе на одной страницы. Переход на другую страницу сайта (например, Response.Redirect(«Default2.aspx»)) и последующий возврат на исходную, ведет к потере сохраненных значений. Кроме того, VIEWSTATE текущей страницы недоступно странице, на которую будет выполнен переход.
Параграф 4.2. Передача информации между страницами сайта
4.2.1. Использование URL
Существует несколько способов передачи данных между страницами. Самый простой — включить значение переменной в URL(строку запроса) вызываемой страницы. Передаваемые данные должны следовать за URL вызываемой страницы после вопросительного знака. Данные включаются по принципу «имя-значение» и разделяются знаком &.
Для демонстрации данной возможности, добавим в решение еще одну Web страничку ()
URL вызова будет:
Этот метод имеет как свои преимущества (нет дополнительной нагрузки на сервер, высокая скорость передачи данных), так и недостатки (открытость и незащищенность информации, ограниченность объема — предельная длина URL обычно 1-2кб и ограниченный набор символов, допустимых в URL.
Для приема данных используется метод QueryString класса Request.
Для демонстрации использования этой возможности добавим еще одну кнопку в решение предыдущего параграфа. Запишем следующий код обработчика нажатия кнопки:
По нажатии кнопки 2 будет не только вызвана страничка WebForm2.aspx, но и передан наш текст в Label.
Еще одна возможность передачи данных в URL — передача и получение информации о контроле, который вызвал Redirect на страницу. Пусть у нас несколько событий нажатия кнопок замкнуты на один обработчик, например Button1_Click. Тогда мы можем передать информацию страничке на которую переходим следующим образом:
4.2.2 Использование cookie
Cookie(печенье) — небольшие файлы, создаваемые на жестком диске или в памяти браузера машины клиента, позволяющие Web серверам хранить в них информацию.
Это достаточно удобный метод хранения информации, но, и он не лишен некоторых недостатков, таких как: возможность удаления cookie пользователем или принудительного отключения, доступность только из встроенных браузеров, доступность и открытость хранимой информации.
Для получения доступа к cookie в приложении должна быть подключено пространство имен:
Для работы с cookie используется классы Request и Response. Следующий пример демонстрирует создание и использование cookie. На форме решения поместим три контрола: Button, Label и TextBox. В обработчиках событий запишем следующий код:
Результат работы показан на Рис.23.
Рис.23. Пример использования cookie
В файле C:\Documents and Settings\Имя_Компьютера\Cookies\, найдем наше «печенье». Имя cookie включает имя_пользователя_компьютера@имя_сервера[1] (где имя_сервера localhost, yandex и т.п.) при старте будет записано:
После регистрации и второго вызова:
Параграф 4.3. Сеансы и их использование
4.3.1. Понятие сеанса в ASP.NET
Необходимость использования сеансов возникла из за потребности хранения больших объемов информации, хранение которых уже рассмотренными нами способами либо невозможно, либо нецелесообразно.
Сеанс (сессия) объединяет некоторую информацию серии запросов с одного адреса (одного клиента) в течении определенного времени. Каждый клиент, который получает доступ к сайту, получает свой сеанс и, как следствие, свою коллекцию данных. Сеанс начинается, когда пользователь в первый раз запрашивает страницу сайта, и заканчивается, когда приложение явно закрывает сеанс или когда превышено заданное время ожидания.
Автоматически определять и классифицировать запросы, приходящие от клиента.
Хранить данные с ограниченной областью действия на сервере.
Создавать соответствующие события управления жизненным циклом сессии (Session_OnStart, Session_OnEnd и т. д.).
Каждый активный сеанс ASP.NET имеет идентификатор, представляющий собой 120-разрядную строку — SessionID, состоящую из допустимых в URL-адресах знаков ASCII. Алгоритм генерации значений SessionID гарантирует уникальность (во избежание совпадений идентификаторов сеансов) и случайность. Нельзя воспользоваться значением SessionID для вычисления значения идентификатора сеанса. В зависимости от параметров приложения строка SessionID передается между сервером и клиентом посредством файлов cookie или с помощью включения значения SessionID в URL-адрес. Этот идентификатор является единственным фрагментом информации сессии, которая передается между сервером и клиентом.
Когда клиент предъявляет идентификатор сеанса, то сервер находит соответствующий сеанс, извлекает данные, преобразует их в объекты и помещает в коллекцию данных, откуда данные становятся доступны программному коду страницы запроса. Идентификаторы у разных клиентских запросов различны, как результат — доступ возможен только к своей коллекции данных. До тех пор, пока клиент не использует сеанс для сохранения данных, идентификатор сеанса при каждом запросе генерируется вновь (иначе, сеанс сохраняется только если было сохранение данных). Это позволяет сократить затраты памяти и время на сохранение данных и идентификатора сеанса.
Основной недостаток сеансов — это затраты памяти, которые при большом объеме хранимой информации и большом числе обращений к серверу могут значительно снизить его производительность.
4.3.2. Свойства и методы объекта Session
Для организации работы с сеансами используется класс System.Web.SessionState.HttpSessionState, который на web странице приложения доступен как встроенный объект Session.
Перечислим основные свойства и методы HttpSessionState:
Основные свойства
CodePage — возвращает или задает идентификатор кодовой страницы для текущего сеанса.
Contents — возвращает ссылку на текущий объект состояния сеанса. Иначе, семейство Contents объекта Session содержит все хранящиеся переменные сеанса.
Count — возвращает число элементов в коллекции состояния сеанса.
IsCookieless — возвращает значение, показывающее, был ли идентификатор сеанса внедрен в URL-адрес или сохранен в файле cookie.
IsNewSession — возвращает значение, показывающее, был ли создан сеанс с текущим запросом.
IsReadOnly — возвращает значение, показывающее, доступен ли сеанс только для чтения.
IsSynchronized — возвращает значение, показывающее, синхронизирован ли доступ к коллекции значений состояний сеанса (потокобезопасный доступ).
Item — возвращает или устанавливает индивидуальные значения сеанса. (в C# является индексатором класса HttpSessionState).
Keys — возвращает коллекцию ключей всех значений, сохраненных во время сеанса.
LCID — возвращает или задает идентификатор языка и стандартов (LCID) текущего сеанса.
Mode — возвращает текущий режим состояния сеанса.
SessionID — возвращает уникальный идентификатор сеанса, применяемый для определения сеанса.
StaticObjects — возвращает коллекцию объектов, объявленных тегами <object Runat=»Server» Scope=»Session»/> файла приложения ASP.NET: global.asax.
SyncRoot — возвращает объект, который можно использовать для синхронизации доступа к коллекции значений состояния сеанса.
Timeout — возвращает и задает допустимое время ожидания (в минутах) между запросами перед завершением сеанса провайдером состояния сеанса.
Основные методы
Abandon — уничтожает все объекты, хранимые в объекте Session и освобождает их ресурсы. Если метод Abandon не вызван явно, сервер уничтожит объекты при истечении времени ожидания сеанса. При вызове метода Abandon запрашивается удаление текущего объекта Session, но он не удаляется до тех пор, пока не будут обработаны все команды сценария на текущей странице. (можно обращаться к переменным, хранимым в объекте Session, с той же страницы, где расположен вызов Abandon, но не с любой последующей веб-страницы).
Add — добавляет новый элемент в состояние сеанса.
Clear — удаляет все значения из состояния сеанса.
CopyTo — Копирует коллекцию значений состояния сеанса в одномерный массив, начиная с заданного индекса массива.
Equals — (унаследовано от Object)- определяет, равны ли два экземпляра Object.
GetEnumerator — возвращает перечислитель всех значений состояния сеанса для текущего сеанса.
GetHashCode — (унаследовано от Object) — служит хеш-функцией для конкретного типа, пригоден для использования в алгоритмах хеширования и структурах данных, например в хеш-таблице.
GetType (унаследовано от Object) — возвращает Type текущего экземпляра.
Remove — удаляет элемент из коллекции состояний сеанса.
RemoveAll — удаляет все значения состояния сеанса.
RemoveAt — удаляет элемент по заданному индексу из коллекции состояний сеанса.
4.3.3. Пример использования сеанса
Рассмотрим пример хранения некоторого класса RegInfo с использованием сессии. Для этого объявим класс в, котором пользователь будет накапливать некоторую регистрационную информацию:
Несколько примеров использования свойств и методов Session:
Использование метода IsCookieless:
При значении свойства cookieless=»true», URL запроса будет выглядеть примерно так:
С помощью метода Remove семейства Contents можно выборочно или полностью удалить ссылки на переменные, которые добавлялись при соответствующем состоянии сеанса:
4.3.4. Настройка состояния сеанса
Конфигурационные данные хранятся в текстовом файле Web.config (в Visual Studio .Net генерируется автоматически), находящемся в каталоге приложения. Этот файл определяет условия выполнения приложений ASP .NET — такие как параметры отладки и системы безопасности. Состояние сеанса также хранится в файле Web.config.
Пример фрагмента файла Web.config:
Параметр mode может иметь значения: «InProc» — (по умолчанию) внутренний режим состояния сеанса (информация хранится в том же процессе, где и рабочие потоки), «off» — отключено управление состоянием сеанса, «StateServer» — использование отдельной службы сервера для управления сеансом, «SqlServer» — использование базы данных SQL для хранения состояния сеанса.
Если в приложении не используются сеансы, то для некоторого повышения производительности целесообразно задать mode=»Off», mode=»InProc» обеспечивает высокую производительность, но не сохраняет сеанс при перезапуске страницы.
При использовании mode=»StateServer», служба управления состоянием сеанса (служба ASP.NET State Server), запущенная на сервере, дает базовый уровень защиты при перезапуске процесса, что, естественно, влечет дополнительные временные издержки. В этом случае обязательно указание параметра stateConnectionString (TCP/IP компьютера — служба может быть запущена и на другом компьютере). Служба запускается из Administrative Tools панели управления, пункт Services, найти ASP.NET State Server и через контекстное меню строки с именем сервера выполнить пункт меню Start. Через контекстное меню, пункт Properties, выполняется и установка Startup Type (например, на автоматический запуск — выбрать Automatic).
При использовании mode=»SqlServer», Sql сервер обеспечивает самый надежный, но и самый медленный метод хранения данных. Метод требует задания параметров sqlConnectionString, включая пароль доступа (явно нежелательно при неиспользовании интегрированных методов доступа), установку специальных хранимых процедур для сохранения и извлечения информации о сеансе, и временных баз данных для сеансов.
ASP.NET включает для этой цели сценарий Transact-SQL с именем InstalSqlState.Sql (каталог Winnt\Microsoft.Net\Framework\номер_версии, сценарий можно запустить используя утилиты SQL Server OSQL.exe или Query Analyzer). После выполнения сценария средства все указанные средства, обеспечивающие работу с сессией и хранения данных в Sql БД становятся доступными, в том числе и после перегрузке компьютера.
Значении параметра cookieless=»true» означает, что идентификатор сеанса внедряется в URL-адрес.
Значение timeout устанавливает время жизни сеанса.
Глава 5. Класс — HttpApplication и состояние приложения
В ASP.NET есть специальный класс — HttpApplication (System.Web.HttpApplication), представляющий все приложение. Он контролирует его общее состояние, и обрабатывает глобальные события. В основном этот класс используется для хранения объектов уровня приложения, к которым может получить доступ любой клиент.
Класс HttpApplication предоставляет программный доступ к методам HttpApplication.Init и HttpApplication.Dispose и событиям Application_OnStart и Application_OnEnd и др. Кроме того, из него есть доступ ко всем public свойствам и событиям во всех модулях приложения.
Глава 6. Новые возможности передачи данных между формами в ASP.Net 2.0
В ASP.NET 2.0 появилась возможность непосредственно передавать данные, введенные на одной странице в некоторой вводной форме (в поле элемента управления) другой странице формы одного решения. Причем, данный механизм позволяет получать в вызываемой форме значения свойств элементов из вызывающей формы. Для этого в ASP.NET 2.0 для ряда контролов введено дополнительное свойство — PostBackUrl, позволяющие указать какой именно странице решения должна быть передана информация из элементов управления вызывающей страницы, если обращение к серверу инициировано этим элементом управления.
Например, создадим решение, имеющее две формы (Default и WebForm2). Разместим на форме Default контролы TextBox и Button. Для контрола Button установим свойство PostBackUrl в значение WebForm2 (Рис.24, 25).
Рис.24. Решение сайта
Рис.25. Решение сайта
Выполним решение сайта. Убедимся, что даже при отсутствии обработчика нажатия кнопки, сервер, при нажатии кнопки «Передать», выполнит редирект на WebForm2. Но не только пользователь будет переадресован на страницу WebForm2.aspx, но и вся информация об элементах управления формы Default.aspx, будет также передана форме WebForm2.aspx. Для реализации этой возможности, ASP.NET 2.0 проверяет формы на наличие в них элементов управления с атрибутом PostBackUrl и, при их наличии, создает для страницы дополнительное скрытое поле __PREVIOUSPAGE, которое и содержит информацию о состоянии элементов формы. Эта информация может быть извлечена на вызываемой странице через свойство PreviousPage.
Для демонстрации возможности передачи информации (из контрола TextBox формы Default.aspx в форму WebForm2.aspx) на странице WebForm2 разместим контрол Label и контрол TextBox.
В файле WebForm2.aspx.cs напишем следующий код:
Теперь, при нажатии в форме Default.aspx кнопки «Передать» будет вызвана форма WebForm2, и в ней отобразится информация, введенная в textBox1 формы Default.aspx (Рис.26.).
Рис.26. Выполнение решения сайта
Другая возможность получения доступа с использованием PreviousPage показана на Рис.27. В форме Default мы объявили public переменную viI и при загрузке присвоили ей значение 10.
Далее, используя приведение PreviousPage к странице родителю мы можем получить доступ к public свойствам и переменным вызвавшей страницы.
Рис.27. Выполнение решения сайта
Отметим, что PreviousPage содержит информацию практически обо всей вызвавшей странице: Title, Header, IsValid, IsPostBack и т.д. и т.п. (Рис.28.).
Введение в ASP.NET MVC
ASP.NET MVC представляет собой платформу для создания сайтов и веб-приложений с использованием паттерна (или шаблона) MVC (model — view — controller).
Работа над новой платформой была начата в 2007 году, а в 2009 году появилась первая версия. В итоге к текущему моменту (2012 год) уже было выпущено 4 версии платформы, а сам фреймворк обрел большую популярность по всему миру благодаря своей гибкости и адаптивности.
Шаблон MVC, лежащий в основе новой платформы, подразумевает взаимодействие трех компонентов: контроллера (controller), модели (model) и представления (view). Что же представляют эти компоненты?
Контроллер (controller) представляет класс, с которого собственно и начинается работа приложения. Этот класс обеспечивает связь между моделью и представлением. Получая вводимые пользователем данные, контроллер исходя из внутренней логики при необходимости обращается к модели и генерирует соответствующее представление.
Представление (view) — это собственно визуальная часть или пользовательский интерфейс приложения — например, html-страница, через которую пользователь, зашедший на сайт, взаимодействует с веб-приложением.
Модель (model) представляет набор классов, описывающих логику используемых данных.
Общую схему взаимодействия упрощенно можно представить следующим образом:
ASP.NET MVC и ASP.NET Web Forms
ASP.NET MVC является в некотором роде конкурентом для традиционных веб-форм и имеет по сравнению с ними следующие преимущества:
Разделение ответственности . В MVC приложение состоит из трех частей: контроллера, представления и модели, каждая из которых выполняет свои специфичные функции. В итоге приложение будет легче поддерживать модифицировать в будущем.
В силу разделения ответственности приложения mvc обладают лучшей тестируемостью . И мы можем тестировать отдельные компоненты независимо друг от друга.
Соответствие протоколу HTTP . Приложения MVC в отличие от веб-форм не поддерживают объекты состояния (ViewState). Ясность и простота платформы позволяют добиться большего контроля над работой приложения
Гибкость . Вы можете настраивать различные компоненты платформы по своему усмотрению. Изменять какие-либо части конвейера работы MVC или адаптировать его к своим нуждам и потребностям.
В то же время не стоит однозначно сбрасывать со счетов ASP.NET WebForms. Поскольку она также имеет свои сильные стороны, например, модель событий, которая будет ближе тем разработчикам, которые ранее занимались созданием клиентских приложений.
В традиционных веб-формах вы имеете контроль над разметкой и можете в реальном времени в визуальном редакторе Visual Studio увидеть, как будет выглядеть та или иная страница. При работе с MVC Visual Studio подобного не позволяет делать.
Сайт на ASP.NET для начинающих — первые шаги
ASP.NET — платформа от Microsoft для создания и развёртывания сайтов, веб-приложений и сервисов. По данным SimilarTech, около 2 000 000 сайтов используют эту платформу. В этой статье описаны первые шаги создания сайта на ASP.NET.
Для разработки будем использовать Visual Studio.
Создание ASP.NET проекта
Откройте Visual Studio Installer и нажмите «Изменить» на нужной среде разработки. Перед вами откроется список всех нагрузок. В категории Веб-разработка и облако нужно включить ASP.NET и разработка веб-приложений. После этого нажмите на кнопку Изменить в нижнем правом углу и дождитесь установки нагрузки.
Перейдите в Visual Studio и создайте новый проект, выбрав тип Веб-приложение ASP.NET (.NET Framework). Потом нужно выбрать необходимую модель приложения:
- Веб-формы — можно легко создавать динамические веб-сайты, используя сотни элементов управления и компонентов.
- MVC — эффективный, основанный на шаблонах способ создания динамических сайтов. Предоставляет полный контроль над разметкой для гибкой разработки.
- Веб-API — позволяет легко создавать HTTP службы для широкого диапазона клиентов. Идеальная платформа для сборки REST-приложений.
- Приложение SPA — одностраничное веб-приложение, которое загружает HTML-страницу и динамически обновляет её при взаимодействии с пользователем.
Выберете модель Веб-формы и завершите создание проекта.
Внутренняя структура проекта
В проекте сайта уже загружены некоторые библиотеки, необходимые для комфортного старта: CSS-фреймворк Bootstrap, JS-фреймворк jQuery, MSAjax и некоторые другие.
После создания тут уже присутствуют 3 страницы: Default, About и Contact. Каждая страница состоит из 3 файлов:
- Page.aspx — содержит в себе HTML-разметку конкретной страницы;
- Page.aspx.cs — отвечает за логику работы конкретной страницы;
- Page.aspx.designer.cs — является мостом между Page.aspx и Page.aspx.cs.
Вот так выглядит About.aspx:
Как видно, этот файл содержит лишь контент конкретной страницы. Вся общая разметка находится в Site.Master и Site.Mobile.Master .
Чтобы проверить и запустить проект, нажмите IIS Express или же традиционную клавишу F5. После этого все файлы скомпилируются и сайт откроется по адресу http://localhost:4400 в браузере по умолчанию. Номер порта может отличаться.
Так выглядит страница About
Создание веб-формы
Чтобы создать новую страницу, в контекстном меню проекта выберите Добавить→Веб-форма. После этого автоматически сгенерируются и заполнятся все 3 файла.
Примечание Веб-формы можно создавать с помощью встроенного графического конструктора веб-форм. Что бы открыть его, в контекстном меню нужной веб-формы нажмите на Открыть в конструкторе. Все необходимые элементы можно достать из Панели Элементов (Вид→Панель элементов). Но если вам нужна максимальная гибкость и функциональность — лучше разрабатывать формы вручную в коде.
Потом можно добавить ссылку на новую страницу в панель навигации в Site.Master :
Примечание Обратите внимание, что в ссылке указывается название страницы без расширения.
Если вы откроете новую страницу, то заметите, что вся общая вёрстка отсутствует. Это потому, что в новой странице не подвязывается разметка из Site.Master . Чтобы исправить это, нужно в новой форме вместо сгенерированной вёрстки вставить это:
Во всех упоминаниях нужно заменить News на название вашей страницы. Теперь форма будет отображаться вместе с общей вёрсткой.
Для интеграции значений в вёрстку из aspx.cs используют специальный тег <%: %> :
В этом случае SomeVar должен быть публичным полем. Если нужно выполнить какой-либо код для присвоения значения этой переменной, то выполнить его нужно в сгенерированном методе Page_Load .
Получение значений параметров из URL производится через статический класс Request , в котором хранятся и прочие данные о запросе:
Изучить все возможности веб-форм можно в официальной документации.
Движок представлений Razor
Razor позволяет делать вставки C# кода прямо в HTML разметке. Для этого нужно создать отдельный файл .cshtml (Контекстное меню проекта→Добавить→Страница представления MVC 5 (Razor)). Разметка в этом файле ничем не отличается от обычной HTML-вёрстки.
По умолчанию языком Razor является HTML. Для перехода с вёрстки на C# используют символ @ , а сам блок кода помещается в фигурные скобки.
В Razor также можно выполнять неявные выражения прямо в HTML разметке:
Тут есть привычные для ЯП конструкции, которые могут значительно облегчить вёрстку. Вот некоторые из них:
Как написать сайт на с
Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, WordPress, Bootstrap
Создание сайта с нуля на HTML + CSS. Практика по пройденному материалу
Всем привет!
Вот и подошли мы к завершению изучения основ CSS.
Сегодня испробуем на практике все знания, которые вы получили, изучая основы CSS. Предлагаю вместе со мной создать простой сайт-визитку с использованием HTML + CSS.
Вот сама схема и план действий:
1). Создание файла «index.html» и «CSS».
2). Вставка в файл «index.html» скелет html (стандартный код).
3). Подключение «index.html»с «style.css».
4). Создание меню.
5). Вставка логотипа.
6). Создание блока для контента.
7). Создание подвала.
8). Создание остальных страниц.
Создание файла «index.html» и «CSS».
Итак, создайте себе отдельную папочку «Мой сайт». Теперь в этой папочке создайте два файла «index.html» и «style.css» .
Чтобы создать «index.html»:
на компьютере снизу в левом углу нажмите на кнопку «Пуск» .
Далее выберите «Все программы» => «Стандартные» => «Блокнот» .
Далее нажмите «Файл» => «Сохранить как» :
Укажите место, куда вы хотите сохранить файл, в нашем случае это папка под названием «Мой сайт».
В поле « Имя файла » напишите « index.html» , а не просто « index» ( это важно! ). Таким способом мы создаем файл с расширением « *.html » для веб-страниц. Далее нажмите на кнопку « Сохранить »:
Чтобы создать «style.css»:
кнопка «Пуск» => «Все программы» => «Стандартные» => «Блокнот» :
В открывшем блокноте нажмите в меню сверху «Файл» => «Сохранить как…» :
Далее укажите место, куда вы хотите сохранить файл, лучше файл разместить вместе с остальными HTML файлами.
В поле «Имя файла» напишите «style.css» , а не просто style ( это важно! ). Таким способом мы создаем файл с расширением « *.css ». Далее нажмите на кнопку « Сохранить »:
Вот, что должно получиться у вас в папке «Мой сайт»:
Вставка в файл «index.html» скелет html (стандартный код)
Откройте файл «index.html» через программу «Блокнот» и вставьте вот такой стандартный HTML код:
Сохраните файл «index.html».
Подключение «index.html» к «style.css»
Напомню вам, чтобы подключить файл со стилями « style.css » к « index.html » перед тегом </head> ,пропишите вот такой код:
Сохраните файл «index.html» .
Вот теперь можем создавать сайт.
Начнем с меню.
Создание меню
Через списки HTML создадим меню и, естественно, сразу пропишем для каждого раздела меню ссылку на другую страницу:
Вот полный пример:
В результате ничего особенного вы не увидите:
Теперь в CSS сделаем меню горизонтальным, уберем маркеры, сделаем отступы. Для этого в CSS пропишите:
Теперь выровняем меню посредине
Закрасим меню и добавим тень:
Осталось поменять размер и цвет в названиях меню:
Итак, вот весь CSS стиль для меню:
Смотрим на результат:
Вставка логотипа
Для логотипа создайте папку « image ». В этой папке будут храниться все изображения сайта-визитки.
Залейте в эту папку « image » ваш логотип, размерами примерно 200 х 200 px.
Дайте название логотипу « logo » и расширении файла « png ».
Вот так это будет выглядеть в HTML:
Выровняем лого по центру и закруглить через CSS:
Создание блока для контента
Теперь создадим блок для контента. Добавьте в HTML вот такой код:
В CSS выровняем блок «content» по центру. Укажем ему ширину, сделаем внутри отступы, выделим блок тенью:
Выровняем заголовок по центру, увеличим размер и поменяем цвет:
Теперь изменим размер и цвет текста. Добавим отступ для красной строки:
Вот весь CSS код для блока «content» :
Создание подвала
Теперь внизу сайта создадим подвал и разместим там копирайт.
В HTML добавьте вот такой код:
В CSS выровняем подвал по центру, изменим цвет текста и ссылки, поменяем размер:
Вот так выглядит мой абсолютно весь CSS код файла «style.css» :
Создание остальных страниц
Вот и готова первая страница. Весь HTML код файла « index.htm l»:
Она же нам послужит как шаблонная страница.
После того, как вы сохранили « index.html », создайте файлы:
- rabota.html – для страницы «Наши работы»
- prais.html – для страницы «Прайс»
- contakt.html – для страницы «Контакты»
И во все эти файлы вставьте такой же код, какой в файле « index.html », меняя только текст в <title> и текст с заголовками в блоке « content ».
Смотрим результат!
А те, кто пришел сюда случайно по запросу «создать сайт визитку бесплатно», могут скачать результат, который получился в процессе сегодняшней практики:
Поздравляю всех, кто изучал мои курсы от самого начала до сегодня, с окончанием изучения основ CSS.