Introduction

The focus of this lesson is how to add some style to your Web pages using some of Visual Studio's many Web tools and to set the stage for the weeks to come. Whether you are familiar with Cascading Style Sheets (CSS) or not, Chapter 3 of your textbook should be helpful in getting you acclimated for the chapters that come next. Pay close attention to the steps in the Instructions for this week's assignment.

Starting this week, your week to week assignments will be completed at the root level of your Web site. As you add features to your Planet Wrox Web site week by week you will now be adding and modifying everything at the root level - as opposed to what you had been doing, using the ASP folders each week. The ASP folders will only be used as sandboxes to practice the Try It Outs in before you make the changes at the root level, and can be used for troubleshooting when needed. This means you will not publish your weekly ASP folders anymore, you will only publish the new files and folders you create in each of your weekly assignments - you are the Web developer for your site and it is important that you keep track of all of the pieces in your puzzle.

In the first part of chapter 3 (pages 63 - 89), your textbook author does a great job of explaining the limitations of HTML and how CSS fixes formatting problems; this section may be review for some of you. If you are not familiar with CSS pay close attention to what you are reading in this section of chapter 3. Learning to create and apply CSS rules is not complicated at all and your text book's author does a good job of covering the basics and takes you through CSS at an introductory level. There are also many great resources for learning CSS on the Web including W3 Schools CSS tutorial, although, I would suggest completing the Try It Out exercises in your text book first before going off on any tangents like trying to learn the entire CSS language in 30 minutes - it can't be done. If you stay focused on the Try It Out exercises your text book author provides in this chapter you'll know enough CSS to successfully complete this course.

Pages 89 - 98 take you through several key skills if your using Visual Studio as your IDE including: how to use the Visual Studio CSS Editor to create and edit CSS rules in a style sheet directly, how to create and modify styles using Visual Studio's New Style & Modify Style dialog boxes, and how to apply and manage styles using the Apply Styles and Manage Styles windows. I'm guessing this section of chapter 3 is information everyone will find useful unless you are using an IDE other than Visual Studio or you are already comfortable using Visual Studio's Web tools. Remember, teaching students CSS or how to create and apply CSS using Visual Studio are not learning goals of this class, again those are learning goals of the CSIS 115A Web Development Level 1 class - the recommended preparation for this class.

Chapter 3 is the last review chapter before we delve into ASP.NET. Two of the most important lessons you should learn from this week's reading and assignment are 1) the HTML page structuring techniques demonstrated by the assignment; these are techniques commonly used in the majority of Web sites on the Web today and 2) comprehension of the CSS box model which impacts the actual size of HTML elements. Regarding the second item - the box model, I recommend that after you read The CSS Box Model on page 76, that you try and guess the size of the arrow in figure 3-5 before you read the answer just below it. It is a simple but excellent test of your understanding of a very important aspect of Web development.

Assignment

In order to receive full credit for Assignment 3 you must complete the following:

• Create a new Default.aspx Web form and a new Styles folder at the root of your Planet Wrox Website folder (the CSIS 786 folder).

• Create a new style sheet named Styles.css linked to the new Default.aspx file and modify both documents as described in the Lesson 3 Instructions below.

• Publish your new Default.aspx file and Styles folder to your student folder on the Student Web server.

• Verify you can view your page on the Student Web server and that it displays correctly in your Web browser.

• Copy the URL used in the last step and post it to Canvas using the Assignment 3 submission page.

Instructions

The following tutorial provides step-by-step instructions for completing Assignment 3.

Step 1 Complete all the steps in the Styling the Planet Wrox Homepage Try It Out on pages 77 - 80.

Note: You must save your Website saved as a Solution in order to be able to add the Modernizr package to your CSIS786 Website. To do this, have your CSIS786 folder open in Visual Studio as the root of your Web Site, then choose File --> Close Solution, a dialog box will open asking you to name your solution and providing a Browse button to choose a location of where to save the solution (.sln) file that you will use to open your CSIS 786 Web application for this and all the rest of the assignments in this course.

Locating Modernizr

Go to tools-->NuGet Package Manager-->Manage Nuget Packages for Solution. Use the Browse tab to search for Modernizr, select it and then on the right under the Modernizr title put a check in the check box for your solution and then click the Install button in the lower right next to the version number of Modernizr.

TIP: The textual content that needs to be added inside the <section> element is the same text you created by following the steps in the Adding Formated Text Try It Out on pages 54 - 56.

Step 2 Complete all the steps in the remaining Try It Outs on pages 85 - 88, 89 - 92, 93 - 94, and 94 - 96. When you preview your resultant page in a Web browser (Ctrl+Shift+W), it should look like figure 3 below. By the way, note that shortcut (Ctrl+Shift+W), it is quicker than building your pages (Ctrl+F5) in order to preview them.

Once you have you have completed the Try It Outs listed above you are ready to complete steps 3, 4, and 5 below.

Step 3 Publish the deafult.aspx file and the styles folder from the root of your Planet Wrox Website to your student folder on the Student Web server. Don't publish any other files or folders at this time.

Step 4 Using a Web browser on your computer, verify that you can view the published page and that it displays correctly. You should be able to view it using the URL for the root of your student folder, e.g. http://ia.msjc.edu/StudentIdNumber.

Step 5 Post the URL for your new default.aspx page to Canvas by the due date listed in the Syllabus.

How to Submit Your Assignment URL for Scoring (for CSIS 115A, 525, and 786 classes only)

In order to receive credit for assignments you have published to the Student Web server, you need to submit the Web address (a.k.a. URL) of your assignment using the Submit an Assignment URL link on the course home page in Canvas.

Once you understand how URLs work, submitting your assignment URL for grading should be simple. Each time you have completed an assignment and published it to the Student Web server using your IDE do the following:

1. Click on the Assignments link in your Canvas course menu.
2. On the Assignments page, locate the link for the assignment URL you want to submit and click or tap it.
3. Click or tap the Submit Assignment button on the screen that appears.
4. Then type or paste the URL for your assignment in the Website URL textbox provided.
5. Click or tap the Submit Assignment button - and you're done!

TIP: Before posting your URL for scoring you should ALWAYS TEST YOUR URL to see if it works in your Web browser first. Just open your Web browser and type in the URL as described in the How URLS Work tutorial, if it works, then just copy and paste the URL you typed in your Web browser into the Website URL textbox in Canvas. If it doesn't work in your Web browser, it won't work in your instructor's Web browser either - in that case email your instructor for help and be sure to ALWAYS type your Course number and Section number into the subject field of ALL emails you send to your instructor.

⇑Table of Contents

Instructor's Note: Everything MUST be completed before the due date listed in the syllabus for this assignment.

Please email me if you have any questions at all!

⇑Table of Contents

Lesson Summary

In this lesson you learned how to:

• Use CSS to format text in Visual Studio
• Add CSS code in different ways to your pages and external files
• Insert and modify tables in Visual Studio
• Create hyperlinks in Visual Studio
• The tools that Visual Studio has to offer to quickly write CSS

Congratulations, that's it for this assignment. You can get a head start on your next lesson by reading chapter 4 in your textbook.

⇑Table of Contents