Как открыть начальную страницу в visual studio
Обновлено: 07.07.2024
Теперь, когда вы в общих чертах знаете устройство системы Visual Studio 2013, настало время научиться настраивать интегрированную среду разработки по своему усмотрению. Позже показано, как управлять инструментальными окнами, оптимизировать окно редактирования кода, чтобы получить максимальное пространство для просмотра, и изменять шрифты и цвета, чтобы снизить утомляемость разработчиков. По мере совершенствования системы Visual Studio количество ее настроек, с помощью которых можно оптимизировать разработку программ, значительно увеличилось.
К сожалению, если вы время от времени не исследуете диалоговое окно Options (Tools --> Options) самым тщательным образом, то, скорее всего, упустили одну или две возможности, которые могли оказаться полезными. Далее вы найдете много рекомендаций, которые заслуживают дальнейшего изучения и начнем мы со стартовой страницы.
По умолчанию, когда вы начинаете новый сеанс работы с системой Visual Studio 2013, открывается стартовая страница. Вы можете изменить эту настройку с помощью узла Environment --> Startup в диалоговом окне Options. В качестве альтернативы можно открыть окно Home Page (его можно настроить с помощью узла Environment --> Web Browser), последнее загруженное решение, диалоговое окно нового проекта или вообще ничего не делать.
Причина, по которой большинство разработчиков предпочитают панель Start page, заключается в том, что она представляет собой полезную стартовую позицию, с которой можно перейти к любому действию. На рисунке ниже, слева, мы видим ссылки для создания или открытия проектов. Существует также список недавних проектов, позволяющих вам быстро открыть проекты, над которыми вы недавно работали. Когда курсор мыши перемещается по левой части проекта, на экране появляется значок в виде горизонтальной булавки. После щелчка левой кнопкой мыши эта булавка изменяет ориентацию на вертикальную. Это значит, что данный проект был включен в список Recent Projects. В качестве альтернативы можно щелкнуть на проекте правой кнопкой мыши и либо открыть содержащий его каталог (это полезно, если вы хотите лишь найти проект на диске, а не открыть его), либо удалить проект из списка. Если по какой-то причине панель Start Page закрыта и вы хотите открыть ее снова, выполните команду View --> Start Page.
Если вы прокрутите стартовую страницу вниз, вы заметите ряд разделов. В верхней части находится раздел с описанием новшеств, появившихся в Visual Studio 2013. Кроме того, есть ссылки на новые функции, которые непосредственно связаны с различными технологиями. Затем следует список видеоуроков, описывающих многие новые или популярные функции работы с Visual Studio. И, наконец, в нижней части страницы есть раздел объявлений, разработанный для того, чтобы держать вас в курсе всех последних новостей, связанных с Visual Studio.
Настройка стартовой страницы
В Visual Studio 2013 стартовая страница является элементом управления Windows Presentation Foundation (WPF), работающим в рамках интегрированной среды разработки (IDE). Вы можете настроить стартовую страницу, чтобы показать информацию или действия, имеющие отношение к вам. Visual Studio поддерживает пользовательские стартовые страницы с индивидуальными настройками. Для глубокой настройки стартовой страницы необходимо создать пакет Visual Studio Extension (VSIX). Мы опишем детали, связанные с созданием и развертыванием VSIX пакетов, в одной из последующих статей, описывающих технологию Managed Extensibility Framework (MEF).
Пользовательский интерфейс Visual Studio 2010 построен на основе технологии Windows Presentation Foundation. Кроме эмоций (положительных и отрицательных) у этого явления есть еще и рациональное зерно – возможности для расширения различных частей Visual Studio. Поскольку в WPF пользовательский интерфейс описывается на основе языка XAML, то это дает возможность модифицировать его более просто. Одним из наиболее ярких примеров такого расширения функциональности – стартовые страницы Visual Studio 2010.
Как видно, при описании страницы используются ряд стандартных пространств имен. Они необходимы для получения информации для отображения, а также для выполнения команд. По этой разметке нетрудно догадаться каким образом определяется содержимое страницы. Видно также, что для основного содержимого используется элемент управления TabControl , который содержит ряд стандартных вкладок.
Если нам не требуется радикально изменять внешний вид стартовой страницы, то рекомендуется создавать набор необходимых вкладок, которые будут отображать нужную информацию. Как раз здесь и задается дополнительная вкладка для нашего содержимого. Эта вкладка содержит ссылку ну элемент управления, определенный в дополнительной сборке.
В нашем случае давайте воспользуемся этим подходом и не будем модифицировать основной файл страницы. Вместо этого добавим свою функциональность во внешний элемент управления.
Давайте создадим специальную вкладку, на которой будем видеть все наши задачи, которые находятся у нас в данный момент в Outlook 2010. Для этого в элемент управления MyControl добавим элемент ListBox , который и будет содержать список задач из Outlook.
Теперь определим обработчик загрузки элемента управления, в котором будет содержаться логика получения элементов из Outlook. Для получения данных воспользуемся интерфейсами COM, для чего сделаем ссылку на Microsoft.Office.Interop.Outlook . Код для получения информации выглядит очень просто – в нем происходит обращение к Outlook и отображение полученных данных в созданном ранее элементе управления ListBox .
Теперь запустим проект и увидим, что появилась новая вкладка, в которой содержаться все актуальные задачи.
В процессе выполнения всех уроков, вами будет создан полноценный веб-сайт юридической конторы.
Структура веб-страниц представлена на рисунке 1.
1 - Структура итогового веб-сайта
Цель: ознакомиться с Visual Studio Code, а так же создать страницу с дизайном для всего сайта.
– Исследовать рабочую область.
– Научиться создавать новую страницу, используя содержимое HTML5, CSS.
– Научиться сохранять документ.
– Научиться изменять название страницы и текстовые заголовки.
– Научиться добавлять изображения на передний план и в качестве фоновых изображений.
В результате выполнения данного урока у вас должна получиться такая веб-страница (рисунок 1.1):
Рисунок 1.1 - Предварительный просмотр веб-страницы
Подготовка к созданию проекта, изучение редактора Visual Studio Code. (Установка Visual Studio Code)
Для создания проекта "Юридическая контора "Советник"" нам понадобится рабочая папка под проект.
Создайте папку на локальном диске посредствам проводника или другого файлового менеджера.
Для реализации проекта в качестве редактора вы будете использовать современный инструмент - Visual Studio Code.
Visual Studio предлагает общедоступные инструменты и гибкость, необходимые для создания и развертывания современных веб-приложений.
– Запустите Visual Studio Code. В боковой панели навигации кликните по иконке страниц.(рисунок 1.2).
1.2 - Боковая панель
– В появившемся меню, кликните на кнопку Открыть папку и в открывшемся окне выберите созданную заранее папку Sovetnik. Кликните кнопку Выбор папки.
1.3 - Боковая панель. Выбранная папка
– Для создания первой страницы сайта design.html наведите мышку на область названия папки(проекта) SOVETNIK и кликните значок . В появившейся форме введите design.html
1.4 - Создан файл design.html
Наполнение папки Sovetnik
Для создания проекта, нам понадобятся дополнительные файлы: CSS, JS, мультимедиа.
– Для этого скачайте в созданную вами папку, папки и файлы из папки work_files.
1.5 - Папка Sovetnik
– Откройте редактор. Папки появились в навигационном меню проекта. Они будут задействованы позже.
1.6 - Название страницы
Создание дизайна сайта.
Для создания дизайна сайта нами будет подключен файл CSS, в котором указаны свойства для элементов HTML5. Изучение CSS в данном электронном учебном пособии не предусмотрен.
– Заполните файл design.html согласно стандартной структуре HTML5 документа, как на рисунке 1.7:
1.7 - Стандартная структура
– Между тегами title введите название страницы ЮК Советник (рисунок 1.8).
1.8 - Название страницы
– Следующим шагом будут meta и link данные. Между тегами head добавьте следующие строки (рисунок 1.9):
1.9 - Добавлены meta и link данные
Данным кодом вы к файлу design.html подключили css файл со свойствами для элементов HTML5, а так же meta name="viewport" для того ,что бы сообщить браузеру, что ваша страница предназначена для правильного поведения области просмотра как на персональных компьютерах ,так и на мобильных устройствах.
– Для отображения страницы как на примере, нужно прописать id для тэгов и разделительную полосу при помощи тега hr.
1.10 - Выделеные области нужно добавить на свою страницу.
– Добавим логотип на страницу. Логотип у вас используется в формате SVG, если же у пользователя поддерка SVG не предусмотрена браузером выводиться будет альтернативное изображения в формате PNG.
Вся область логотипа и подпись снизу будет обернута DIV с именем center для того, что бы все объекты внутри распологались по центру. Клик по картинке будет переводить вас на главную страницу сайта (рисунок 1.11).
1.11 - Код добавления логотипа на страницу.
1.12 - Логотип технологии SVG и формата PNG.
– Следующим шагом будет создание навигации на сайте. Стиль навигации уже прописан в CSS файле. Вам осталось добавить ссылки между тегоми nav. В конце добавим div clearfix. Clearfix - метод отмены действия float без изменения структуры HTML-документа (рисунок 1.13).
1.13 - Код ссылок для вставки навигации
– Добавьте копирайт в подвал сайта между тегами footer (рисунок 1.14).
1.14 - Добавлены meta и link данные
– Дизайн готов. Добавим обзац с текстом Контент, для визуального восприятия области для контента.
1.15 - Выделеные области нужно добавить на свою страницу.
Поздравляем! Вы создали свою первую веб-страницу на HTML5 (рисунок 1.16): добавили текст и цвета, добавили изображения и подключили CSS, а также быстро создали профессиональную веб-страницу. Вы выполнили предварительный просмотр страницы в браузере (рисунок 1.16).
1.16 - Предварительный просмотр веб-страницы
Контрольные вопросы
1. Какой редактор используется в уроках для редактирования страниц HTML5?
2. Между какими тегами размещается пара тегов ?
3. Какой метатег сообщает браузеру, что сайт предназначен для просмотра как на персональных компьютерах, так и на мобильных устройствах?
4. При добавлении логотипа была использована технология SVG, что будет отображаться браузером, если браузер не поддерживает SVG?
5. Между какими тегами распологаются ссылки навигационного меню сайта?
Microsoft Visual Studio — это набор инструментов разработки, основанных на использовании компонентов и других технологий для создания мощных, производительных приложений.
Кроме того, среда Visual Studio оптимизирована для совместного проектирования, разработки и развертывания корпоративных решений.
Также Visual Studio позволяет создавать проекты, имеющие пользовательский интерфейс (GUI), работая с разными компонентами, такими как формы, кнопки, списки, меню и т.д.
В рамках данного курса мы будем рассматривать лишь программы, работающие в режиме DOS.
Рассмотрим версию Visual Studio 2010.
При загрузке приложения из меню Пуск/Программы/Microsoft Visual Studio 2010 появляется главное окно c начальной страницей программы, которое представлено на рис. 3.1.
Мы будет создавать программы, которые работают в консоли, т.е. взаимодействие с пользователем происходит посредством черного экрана. Данным курсом не предусмотрено создание интерфейсных приложений, т.е. с такими элементами, как кнопки, диалоговые окна, выпадающие списки и т.д.
Для создания программы необходимо нажать Файл/Создать/Проект или нажать на стартовой странице Visual Studio2010 быструю ссылку Создать проект, выделенную синим цветом. После выбора создания нового проекта появится другое диалоговое окно Создать проект, где необходимо выбрать требуемые опции, а именно: в левом столбце необходимо выбрать Visual C++/Win32, справа наверху – Консольное приложение Win32, справа внизу вписать имя проекта (например, proga1 ), в графе расположение выбрать вашу папку, где будут храниться все программы, оставить галочку Создать каталог для решения. Диалоговое окно Создать проект представлено на рис. 3.2.
После этого нужно нажать ОК. Откроется мастер настройки нашего будущего консольного приложения, который представлен на рис. 3.3.
увеличить изображение
Рис. 3.4. Заготовка нового проекта в Visual Studio 2010
Требуется нажать кнопку Готово. Тогда в главном окне Visual Studio 2010 закроется начальная страница, и откроется файл proga1.cpp (правое верхнее поле), окно вывода ошибок и предупреждений Вывод (правое нижнее поле), Командный обозреватель (левое вертикальное поле). Данный вид представлен на рис. 3.4.
Файл proga1.cpp предназначен для текста программы (или кода программы), здесь мы будем вписывать наши операторы, переменные и функции.
Вместо командного обозревателя можно включить Обозреватель решений, в котором видно все файлы и папки, созданные для нашего нового проекта. Для этого необходимо под Командным обозревателем нажать кнопку Обозреватель решений. Далее в появившемся списке раскрыть папки Файлы исходного кода и Заголовочные файлы. Окно Visual Studio с Обозревателем решений представлено на рис. 3.5.
Когда мы составляем программу в Visual Studio, получается целый проект, который автоматически создается средой Visual Studio. Задача начинающего программиста состоит в том, чтобы напечатать код своей программы в файле *.cpp и запустить программу на выполнение.
Рассмотрим заготовку кода, которую нам предлагает Visual Studio.
Первые две строчки начинаются двумя символами "//". Данные символы означают, что далее на этой строчке следует комментарий, он не воспринимается компилятором как код программы и не будет выдавать ошибку. Удалять эти две строчки не рекомендуется.
Далее начинается функция int main() . Автоматически Visual Studio называет ее _tmain и вписывает аргументы int argc, _TCHAR* argv[] . У нас будут самые простые программы для начинающих программистов, поэтому мы изменяем эту строчку и приводим ее к виду: int main() и оставляем return 0 , или void main() и стираем return 0 . После проведенной нами подготовки необходимо собрать проект, нажав в меню Построение/Построить решение. Тогда в поле Вывод начинается проверка нашего кода. Сейчас проверка прошла успешно и проект построился. Окно Visual Studio после сборки проекта представлено на рис. 3.6.
Попробуем теперь запустить нашу пустую программу. Для этого на клавиатуре необходимо нажать Ctrl+F5 . Тогда появится консоль со стандартной надписью после выполнения программы "Для продолжения нажмите любую клавишу…". Консоль представлена на рис. 3.7.
После просмотра консоли закройте ее, нажав на крестик.
Теперь можно составить простейшую программу, которая напишет на экране фразу "PRIVET, STUDENT. " . В код нашей заготовки нужно добавить несколько строк:
Итак, итоговый код программы представлен на рис. 3.8.
Конечно, в процессе работы с приложением Visual Studio может возникнуть множество вопросов. В меню программы предусмотрена справка и стандартные примеры, которые можно посмотреть. Чтобы включить справку, необходимо нажать Справка/Просмотр справки или воспользоваться горячими клавишами Ctrl+F1 . Чтобы посмотреть примеры кодов, в меню нужно выбрать Справка/Примеры .
Читайте также: