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”:
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:
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”:
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:
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:
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:
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”:
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”:
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”:
Now, select a section of text and change its color by accessing the text Foreground Color option:
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:
With the “Add a hyperlink” text highlighted, click on the “Convert to Hyperlink” menu item in Visual Studio:
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:
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:
And you can set the link text, URL and other properties via the Properties Window (F4):
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:
- Add an image to the project (drag and drop it from your drive/desktop, straight to the Solution Explorer).
- With the cursor under the hyperlink text, insert an Image Server Control from the Toolbox (Ctrl+Alt+X).
- Locate the image in the project from the Properties Window for the selected Image’s ImageUrl property
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:
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:
To create an ordered list, input three separate paragraph elements under
the table data and highlight them all:
Select from the toolbar the ordered list icon, rendering an automatically numbered list of items:
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:
Experiment with styling these elements by highlighting them and changing attributes, such as the background color, located next to the Font options:
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:
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!