Lesson 6 - Simple Web Page Formatting in Visual Studio

Tutorial Series: Free C# Fundamentals via ASP.NET Web Apps

Previous Article  |  Next Article


Get GitHub Code

In this lesson, we’ll look at a few Visual Studio tools that will help you build better web pages without having to know HTML5, CSS3, and other front-end user interface technologies. Even though these tools are availabe, they are not going to be a long-term solution for you if you want to be a well-rounded web developer. You will eventually have to learn HTML5, CSS3 and other web-related technologies in order to progress as a web developer. However, demonstrating these tools will expose you to some handy features in Visual Studio and will allow you to design web pages in this course without having to familiarize yourself with the details of HTML or ASP.NET just yet. Do not come to rely on these tools in the long run, but only use them while you are unfamiliar with HTML/CSS.

Step 1: Start a New ASP.NET Project

Let’s get a fresh start by creating a new ASP.NET project, calling it “CS-006”:

cs-asp-006---simple-web-page-formatting-in-visual-studio.001

At the next screen, select an “Empty” template, and checkmark the “Web Forms” references box to add it your Project. Once the Project loads, add a new .aspx file to the project by selecting the Project in the Solution Explorer:

cs-asp-006---simple-web-page-formatting-in-visual-studio.002

Step 2: Add a Default.aspx Web Form

In the "Add New Item" dialogue, select "Web Form" from the list of options, and name it "Default.aspx":

cs-asp-006---simple-web-page-formatting-in-visual-studio.003

Once it loads within your project, click on the Default.aspx file in the Solution Explorer to open it up in the main window. Enter the designer view by clicking on “Design” in the bottom left-hand corner.

While learning HTML is outside the scope of this course, it will be helpful for you to familiarize yourself with some key tags, such as the header. In the body section of Default.aspx, type in "Head Line 1", press Enter and type in "Head Line 2". Repeat this six times until you have Head Lines 1-6 typed out. After you are done, it should look like this:

cs-asp-006---simple-web-page-formatting-in-visual-studio.004

Step 3: Add HTML Heading Tags

This purpose of this exercise is to show you how you can access HTML formatting options directly in the Designer. Each of these lines are formatted as a "paragraph" by default but we can change the HTML tag for each of these elements to whatever we want within Visual Studio. To do this, access the Formatting toolbar menu, located in the upper right-hand side of the toolbar:

cs-asp-006---simple-web-page-formatting-in-visual-studio.005

If you do not see the Formatting toolbar, make sure it is visible by checkmarking it within the Visual Studio menu:

View > Toolbars > Formatting

Go ahead and change each element with the heading tag that matches each numbered “Head Line.” In other words, <h1> for Head Line 1, <h2> for Head Line 2 and so on until you get to Head Line 6. The result will look like this:

cs-asp-006---simple-web-page-formatting-in-visual-studio.006

Next, add another paragraph tag element below “Head Line 6” and write inside of it “This is some text that I want to apply a style to”:

cs-asp-006---simple-web-page-formatting-in-visual-studio.007

Step 4: Apply Customized HTML Font and Color Styles

To create a unique styling for this element, access the formatting options in the Visual Studio Formatting toolbar. Click on the downward arrow beside the other formatting options and then click on “Add or Remove Buttons.” From the list that appears, select “Font Name,” “Bulleted List,” and “Numbered List”:

cs-asp-006---simple-web-page-formatting-in-visual-studio.008

With this new set of formatting options available to you, make sure your paragraph text is selected. From the Formatting menu change the selected font to “Arial, Helvetica, sans-serif”:

cs-asp-006---simple-web-page-formatting-in-visual-studio.009

Now, select a section of text and change its color by accessing the text Foreground Color option:

1)

cs-asp-006---simple-web-page-formatting-in-visual-studio.010

2)

cs-asp-006---simple-web-page-formatting-in-visual-studio.011

3)

cs-asp-006---simple-web-page-formatting-in-visual-studio.012

You can use the “Custom” or “Select” color options to use a customized color of your choosing, but for our purposes, simply select a red color so the text stands out.

Step 5: Add a Hyperlink

Now, let’s add a hyperlink by first writing some text inside a div below the previous paragraph:

cs-asp-006---simple-web-page-formatting-in-visual-studio.013

With the “Add a hyperlink” text highlighted, click on the “Convert to Hyperlink” menu item in Visual Studio:

cs-asp-006---simple-web-page-formatting-in-visual-studio.014

In the resulting dialogue box, note the the two major options for the link. “Type,” as well as a field for adding the URL link itself. Choose “http:” for the protocol and add a link as shown here. Also, note that the “browse” option lets you reference another page from within the project you are working on if you want to link to it:

Hyperlink

There’s another way to add a hyperlink, and that’s by inserting it as a Server Control. Although you would normally do this only when the link needs to programmatically be changed at runtime, we will do so here for demonstration purposes. Write some text under the previous hyperlink and from the Toolbox insert the HyperLink Server Control:

cs-asp-006---simple-web-page-formatting-in-visual-studio.016

And you can set the link text, URL and other properties via the Properties Window (F4):

cs-asp-006---simple-web-page-formatting-in-visual-studio.017

Tip:

Experiment with the “Target” option to see how it changes the way the link behaves. For example “_blank” opens up the link in a new window.

Step 6: Add an Image

Now, underneath the second link, let’s insert an image using the following steps:

  1. Add an image to the project (drag and drop it from your drive/desktop, straight to the Solution Explorer).

  2. With the cursor under the hyperlink text, insert an Image Server Control from the Toolbox (Ctrl+Alt+X).

  3. Locate the image in the project from the Properties Window for the selected Image's ImageUrl property

cs-asp-006---simple-web-page-formatting-in-visual-studio.020

Tip:

You may have noticed that HTML options are available via the HTML Server Control in the Toolbox. You can certainly use that, however, it requires a bit more explanation so we will stick to the basic Server Controls for HTML elements for now.

Step 7: Insert a Table

Now, let’s add a table, which is useful for tabular data, such as statistics. Note, do not use tables for styling your graphical elements in a grid-like format. Be aware, this is a very outdated technique with inherent limitations! To insert the table, place the cursor underneath the image you inserted and in the Visual Studio menu select:

Table > Insert Table

From the table dialogue choose layout of three rows and three columns:

cs-asp-006---simple-web-page-formatting-in-visual-studio.022

While we will not make use of them right now, note the other useful features from this dialogue. There are options to set the default values for new tables (useful when you have a similar table structure you want to re-use), set the cell spacing (space between the cells) and cell padding (space surrounding elements in the cells). Now, you can enter tabulated data within the cells:

cs-asp-006---simple-web-page-formatting-in-visual-studio.023

To create an ordered list, input three separate paragraph elements under the table data and highlight them all:

cs-asp-006---simple-web-page-formatting-in-visual-studio.024

Select from the toolbar the ordered list icon, rendering an automatically numbered list of items:

cs-asp-006---simple-web-page-formatting-in-visual-studio.025

cs-asp-006---simple-web-page-formatting-in-visual-studio.026

By contrast, an unordered list is any kind of bulleted list that has no particular sequence. To create an unordered list, repeat the last steps for the paragraph items. This time, click on the unordered list icon instead to render a result that looks like this:

cs-asp-006---simple-web-page-formatting-in-visual-studio.027

cs-asp-006---simple-web-page-formatting-in-visual-studio.028

Experiment with styling these elements by highlighting them and changing attributes, such as the background color, located next to the Font options:

cs-asp-006---simple-web-page-formatting-in-visual-studio.029

cs-asp-006---simple-web-page-formatting-in-visual-studio.030

Step 9: Review HTML Generated by Design Mode

And, finally - although we won’t be getting into HTML right now - take a look at the code generated by clicking on the “Split” tab to give you an idea of what is actually being created in the background HTML. Every Server Control we used in Visual Studio generated background HTML to create the desired functionality. In this Split View, you can click on different elements in the Design View that correspond to the background code elements to highlight them:

cs-asp-006---simple-web-page-formatting-in-visual-studio.031

Tip:

As mentioned, while the Design Mode tools are useful for structuring “quick and dirty” visual elements, you should eventually get familiar with CSS and HTML in order to gain full control over styling your web page. You will not get the exact results that you want by only using Server Controls. This doesn’t mean, however, that you will need to write every piece of HTML and CSS yourself. In many cases, you can simply purchase existing templates and - having come to understand how to put together HTML and CSS - you can then edit the template to tailor to your needs.

Now that you have a basic understanding of how to work with Server Controls and format different elements in Visual Studio, you'll be ready to create more diversified web pages moving forward. Good job!


Related Articles in this Tutorial:

Lesson 1 - Series Introduction

Lesson 2 - Installing Visual Studio 2015

Lesson 3 - Building Your First Web App

Lesson 4 - Understanding What You Just Did

Lesson 5 - Working with Projects in Visual Studio

Lesson 6 - Simple Web Page Formatting in Visual Studio

Challenge 1

Solution 1

Lesson 7 - Variables and Data Types

Lesson 8 - Data Type Conversion

Lesson 9 - Arithmetic Operators

Lesson 10 - C# Syntax Basics

Challenge 2 - ChallengeSimpleCalculator

Solution - ChallengeSimpleCalculator

Lesson 11 - Conditional If Statements

Lesson 12 - The Conditional Ternary Operator

Challenge 3 - ChallengeConditionalRadioButton

Solution - Challenge Conditional RadioButton

Lesson 13 - Comparison and Logical Operators

Lesson 13 Challenge - First Papa Bob's Website

Solution - Challenge First Papa Bob's Website

Lesson 14 - Working with Dates and Times

Lesson 15 - Working With Spans of Time

Lesson 16 - Working with the Calendar Server Control

Challenge 4 - Challenge Days Between Dates

Solution - Challenge Days Between Dates

Lesson 17 - Page_Load and Page.IsPostBack

Lesson 18 - Setting a Break Point and Debugging

Lesson 19 - Formatting Strings

Challenge 5 - Challenge Epic Spies Assignment

Solution - Challenge Epic Spies Assignment

Lesson 20 - Maintaining State with ViewState

Lesson 21 - Storing Values in Arrays

Lesson 22 - Understanding Multidimensional Arrays

Lesson 23 - Changing the Length of an Array

Challenge 6 - Challenge Epic Spies Asset Tracker

Solution - Challenge Epic Spies Asset Tracker

Lesson 24 - Understanding Variable Scope

Lesson 25 - Code Blocks and Nested If Statements

Lesson 26 - Looping with the For Iteration Statement

Challenge 7 - Challenge For Xmen Battle Count

Solution - Challenge For Xmen Battle Count

Lesson 27 - Looping with the while() & do...while() Iteration Statements

Lesson 28 - Creating and Calling Simple Helper Methods

Lesson 29 - Creating Methods with Input Parameters

Lesson 30 - Returning Values from Methods

Lesson 31 - Creating Overloaded Methods

Lesson 32 - Creating Optional Parameters

Lesson 33 - Creating Names Parameters

Lesson 34 - Creating Methods with Output Parameters

Challenge 8 - Challenge Postal Calculator Helper Methods

Solution - Challenge Postal Calculator Helper Methods

Mega Challenge Casino

Solution - Mega Challenge Casino

Lesson 35 - Manipulating Strings

Challenge 9 - Phun With Strings

Solution - Challenge Phun With Strings

Lesson 36 - Introduction to Classes and Objects

Challenge - Hero Monster Classes Part 1

Solution - Hero Monster Classes Part 1

Challenge - Hero Monster Classes Part 2

Solution - Challenge Hero Monster Classes Part 2

Lesson 37 - Creating Class Files Creating Cohesive Classes and Code Navigation

Lesson 38 - Understanding Object References and Object Lifetime

Lesson 39 - Understanding the .NET Framework and Compilation

Lesson 40 - Namespaces and Using Directives

Lesson 41 - Creating Class Libraries and Adding References to Assemblies

Lesson 42 - Accessibility Modifiers, Fields and Properties

Lesson 43 - Creating Constructor Methods

Lesson 44 - Naming Conventions for Identifiers

Lesson 45 - Static vs Instance Members

Challenge 10 - Challenge Simple Darts

Solution - Challenge Simple Darts

Lesson 46 - Working with the List Collection

Lesson 47 - Object Initializers

Lesson 48 - Collection Initializers

Lesson 49 - Working with the Dictionary Collection

Lesson 50 - Looping with the foreach Iteration Statement

Lesson 51 - Implicitly-Typed Variables with the var Keyword

Challenge 11 - Challenge Student Courses

Solution - Challenge Student Courses

Mega Challenge War

Solution - Mega Challenge War

Lesson 52 - Creating GUIDs

Lesson 53 - Working with Enumerations

Lesson 54 - Understanding the switch() Statement

Lesson 55 - First Pass at the Separation of Concerns Principle

Lesson 56 - Understanding Exception Handling

Lesson 57 - Understanding Global Exception Handling

Lesson 58 - Understanding Custom Exceptions

Lesson 59 - Creating a Database in Visual Studio

Lesson 60 - Creating an Entity Data Model

Lesson 61 - Displaying the DbSet Result in an ASP.NET GridView

Lesson 62 - Implementing a Button Command in a GridView

Lesson 63 - Using a Tools-Centric Approach to Building a Database Application

Lesson 64 - Using a Maintenance-Driven Approach to Building a Database Application

Lesson 65 - Creating a New Instance of an Entity and Persisting it to the Database

Lesson 66 - Package Management with NuGet

Lesson 67 - NuGet No-Commit Workflow

Lesson 68 - Introduction the Twitter Bootstrap CSS Framework

Lesson 69 - Mapping Enum Types to Entity Properties in the Framework Designer

Lesson 70 - Deploying the App to Microsoft Azure Web Services Web Apps

Papa Bob's Mega Challenge

Papa Bob's Mega Solution Part 1 - Setting up the Solution

Papa Bob's Mega Solution Part 2 - Adding an Order to the Database

Papa Bob's Mega Solution Part 3 - Passing an Order from the Presentation Layer

Papa Bob's Mega Solution Part 4 - Creating the Order Form

Papa Bob's Mega Solution Part 5 - Adding Enums

Papa Bob's Mega Solution Part 6 - Creating an Order with Validation

Papa Bob's Mega Solution Part 7 - Calculating the Order Price

Papa Bob's Mega Solution Part 8 - Displaying the Price to the User

Papa Bob's Mega Solution Part 9 - Creating the Order Management Page


Comments

Please login or register to add a comment