Video: Working with Stylesheets and Master Pages VB

Presenter:Bob Tabor (from LearnVisualStudio.NET)

In this lesson, you will begin to learn how style sheets and MasterPages can be used to maintain a consistent appearance for all pages in a web application.


Click here to go to original video page

The following text is a software generated transcript of the video. Click on a minute link to jump to a location within the video

Minute 0
Lothian in the city were to talk about style sheets and master pages a star by talking about style sheets if you re familiar with his web development in general you probably heard the term CSS or cascading style sheets and cascading style sheet is just an easy way to define the look and feel the various elements that appear on one or more webpages for the website so for example you might create us to a style sheet that has the definition for what all paragraph tags should look like so when ever you have text that appears with a paragraph tag it would take on those attributes so you might set the font sizes are called upon the background so one and then every time the paragraph tag is used those visual attributes would be applied to the text is better between the begin and end paragraph text it also create custom classes and apply those classes to the various elements that are on
Minute 1
In your application order your webpage for example you might have a paragraph of text and apply a class called my new class it in my new class you might set the font to Arial you might could set the size to something large look at like three or four you might set the color to black and set the bowl property and so on and so whatever you add this a class of my new class to a given element whether it s contained within diff tag paragraph tag or what is maybe it ll take on those visual elements so if we ever needed to change the look and feel the entire website all the pages that use this cascading style sheet file to find the look and the feel and the layout of their various visual is all you would need to do is change the definition of those tags are classes within the stylesheet and in me
Minute 2
Nearly every page of every fish textual element or on our control element that s represented on those webpages would immediately take on the new look and feel based on the definitions that you created the stylesheet so it s a very easy way of updating everything but the entire aesthetic quality of your webpages of website from one centralized file hopefully you would not be surprised that visual Web developer 2005 express edition not only supports cascading style sheets but gives you a easy to use visual interface to create style sheets and manage them within your applications of vessel is going to have been in this by creating a website can call this lesson of six and click the okay button
Minute 3
And now I wanted to do since I m here in this source view is type something like the styles she says Annan s will go but we are here and the paragraph tag in between the paragraph tags a little tight something to the effect that it s cool that see home here I ll apply a style sheet class that solicitous now say that Dan will come back to this page in just a moment now let s do this was go ahead and click the add item and select style sheet from the add new item dialog box and under the name were believed stylesheet that CSS just the way that is another we can add multiple stylesheets to our application if we need to recite had one for now and click the add button
Minute 4
Notice that is now visible within our flu shots for it opens it up automatically and we have this handy dandy CSS outline tools were able to navigate easily through our CSS elements classes and so on and then on the right have said we are actually looking at the source for the CSS file so if I wanted to add some items here opt in if I knew the CSS syntax agency I get the benefit of IntelliSense here I want to type in like the background color myself I could do just that like so and then choose from a color like safer example we want shoes alone a actual scope background color and we won t pick own black day for that
Minute 5
One way to go about it and certainly with the help of IntelliSense it makes it very easy but is more visual way to build the style through this little icon build style we have had major icon is the definition area between curly braces for the given element soda could build style you can see that we ve already set the background color equal the blacks let s reflected here this will preview area was go ahead and change the font family and take that Ariel Solis will let Ariel know to select multiple fonts here and say for example we have a custom look that we re going after are the people who are viewing a webpage had Georgia or had for example lucida console we may want to use those first but they don t have those weakened fallback to more common font like Ariel Wright notes that Ariel and click okay
Minute 6
Was the color of the font itself to white so that stands out their preview area shows us what on the body will now look like for all webpages that utilize the stylesheet of CSS file that we re finding right now it s one click the okay button noticed that all the changes we made were translated into a CSS syntax and click save a jai alai apply that stylesheet to my default aspx well there is a property of our documents called CSS file believer style sheet here we go click the little next to the style sheet property for our document and it will show us all the CSS files are available within our application was to let stylesheet CSS is the only available
Minute 7
In the click the OK button and notice now that that CSS style has been applied to our page very cool tell in addition to setting the styles for individual tag for the body to have a paragraph that we can also create work call classes which can be applied to any type of tag not just paragraphs or did tags or can be applied just specifically to a couple of paragraphs not all the paragraph tags for sample within our application so commercial will do real head and select this little button overture ad style rule and that will pop open the add style rule dialog box on the click class name called this my new class and assaulted you right on the click okay and notice that it gives me my new class we got a new class you were to be building to my mouse cursor inside the curly braces Cookeville style which
Minute 8
Just a few moments ago and chairman to change the font family to Courier new click okay and the color of a change to blue and click okay so on them now look in my default aspx why hasn t that saw been applied to our testing style sheet wise in the text blue and have the default of a Courier new set of Ariel will resist as we have not applied that class to anything on our webpage so in order to do that was sold last either here or through my properties window the tag of the text that I want to apply that that that class to a similar find a class property to go in and type in my new class and if you give a keyboard than those of the font change in what I
Minute 9
Deselect the highlight I get the blue font colors while so really the purpose of style sheets is to help us control the colors and the aesthetic look and feel of the behaviors of all the elements are webpages and we can do this in a very global wobble so now if in the future we want to change the way this text look in all text that share the same class my new class or if all the webpages on a website that he used the style sheet and have a reference to the stylesheet and want change the background color we would merely go to one place in one file change the background color to something other than black soul is as good like talk will for example for the really nice and pretty being facetious here and noticed that all the pages now if we had a hundred pages on a website they would all as long as they pointed to the stylesheet of CS
Minute 10
Now have the background of aqua and hurts my eyes on you to just live up there if okay so that is deathly one way to mingle about managing the look and feel in the behavior of our website is through the use of style sheets but there s actually another way and as to the use of Master pages got a new feature of ASP net 2 0 and allows us to define a Master page which is basically a template and then be able to define the individual content pages that fit within the borders of the template so let s go ahead and do this will start really simple but why do is create a new master page so on a click on an item on a select master page from the dialogue and click the add button was looking to design view for Master page in this
Minute 11
Events reply to restrict foreboding of the special box in the middle here on the put my mouse cursor to the very beginning of that page as close click the enter button on the keyboard several times so I can type some creates and content here on this master page of this is the master page and I can make is bold and I can change the background color of our document something to the effect that suited her let s create like a water mill is that blue color would work but let s go for some little bit more subtle I will one of the heaviest heart of this in their and so there we have our master page and we can put controls like buttons and text boxes and where did you do in just a moment with the graphics suite of the text you change the look of the field attacks
Minute 12
We can use style sheets to do anything we want to hear how we add pages they will appear in this area here so as we had new individual pages for website lists pick one form or call this page 1 will want to select a Master page to read a clickable option there are click add and before it actually does a force with the select which master page our new page should point to sort of us look to what we have in our application authors who become more than just one master page we have one to choose from source with the okay button and now we have our page 1 aspx loaded into our main area of the design view agency here that kind of grade out area around our content we have this is the
Minute 13
Facial type and this is page 1 of the source and notice that I have a page directive and one of the properties of the page directive is the master page file that points to our master page master file okay and then this constant area is the the contents between the beginning of the any of that tag I have my this is page 1 Texan I just typed in a case now if our openness in a web browser see how this would look as the master page and this page 1 know what I wanted to add another webpage to my website was going to do that so page to and were going to leave the select master page select it and click add
Minute 14
A Master page master to select a Master page and click the OK button and humor to put this is page to do and they were going to do this in a web browser and now we have this page to semester to tell what if I want to change the look and feel the master page so I would go back and adjust this color in a hot heart of the time I had selecting in the first place in the happy with it now so let s go to BG color clip it does tell yellow color and now let s view page to once again and noticed that it pays to now takes on the attributes of the master page that to let us now go to slowly more Cobb located example know the one thing that s a little difficulty is controlling where this content placeholder is actually placed our page
Minute 15
Oh on were not able to really move around even though we ve enabled absolute positioning on our webpage where I want to do is actually go to insert a table and we will just use slowly out a free roast recalls that works just fine I think that ll work just great will click okay and we can move this around and get the proper handle on it and there we go Muncher shuttled that they re not going to drag and drop this content area into one of the cells and is having a difficulty here and I think this is the result of using some beta software also onto a save this close was it in an open backup video refresh itself will utter okay or maybe not made we just have a problem
Minute 16
Okay that should work now let s go ahead and test this change that we made by a viewing in let s say everything and view from page 2 in a browser and see if it places it okay to see another some a lot more spacing so it actually worked for so little weirdness there again to excuse that as something that were trying to do more complex and it is as though the Beta two version of visual Web over 2005 express edition so hopeful about time that you re working with those that locate desired out not a big deal okay we have our content placeholder now in an area where we can drag and move this table around and makes changes to it so one of the first things that I want to do is start workings of the navigation controls that are available to us virtual Botox navigation controls allow us to create was called a site map
Minute 17
All that contains information about all the pages are website and based on that site map we can bind to a great luggage free view of all the pigs are website allow people to see something like Windows Explorer rivalry will see a hierarchy of webpages in the website or we can use that great a man you or a site map path will show up that is just a moment but will we do first is add new item and will Remus select is adding a site map and click the add button appears to concede that it creates some content for us unfortunately it just gives us a little bit of a of a template in Word has two of the worker so so bold to Mr Phileas of the links in a page 1 ASP ask them recall this first page description the
Minute 18
s is the first page to and then underneath that will be selected as page 2 aspx as this is these hopes are that that will cheer ahead second page in the replace your own here in a rare add another pitch will close page 3 aspx and I mentally forget to add a third page here and so little head talent add another page that we can make this attacker representation what s on our website so page 3 aspx master page to page rhetoric are okay or call and theater were put this is the third page great
Minute 19
Now we have a site map that reflects a hierarchy as if you re a hierarchy of webpages so page 1 will own or because is wrapped around these of the site map nodes for page 2 page 3 is to hear he and no its beginning code in between those two are page to page 3 stuff so that s our site map were so close that Gautama show you why we need that in the first place to close out much is okay letter toolbox and this time will we wanted to is create and add this tree views were to drop it in here okay and will put it inside there for all possible and it s easily possible in their medical click the little arrow on the right hand side in order to set some quick tests we choose a data source right click into data source
Minute 20
And recorded by a duo site map file and click the okay button in were going to the site map and root click refresh schema and notice how bad we have this lead on the new titles for pages represent first a second page third page so if we run her application now hopefully redo this right may have starts over again this is a work until let s change the subtle but let s make page 1 to start page was argued at a previous lesson was run debug the application gets an hour starting at page 1 and notice on the left have some never little tree view I can click the second page and third page and did you notice what happened over here in the content area it changed to page 2 and page 3 can also see that in the address
Minute 21
Are here at the top a case of bad is the value of using some of our navigation controls specifically the Treeview this list is one more navigation control before we conclude this video and that is the many control very similar and how it represents pages to do our preview control but it doesn t cut it HTML manner where are we we have kind of a fly out type boxes also had set out many boxes to run the application of the weave set this up and knows what however my mouse cursor over first page that it pops up a little box with other options so little menu pops open I think the Secretary Paige and this is all configurable source or commit a lewd or real menu I can t
Minute 22
Asia colors in and it ll make even jump off the side is that nature so very neat functionality that s enabled by virtue of creating a site map a site map data source and then bind to that data source bouquets of just a recap of talk about how to affect the aesthetics of our web applications first of all by creating and managing cascading style sheet to our tabs and classes in how to apply those to our aspx webpages and it was off of the concept of master pages we created a master page and it showed how to populate the content placeholder with a data that s contained on other pages so each of our pages page 1 page 2 page 3 indicated as we built them that we wanted them to point to the master page master file and so they supply the content of the master page supplied the overall
Minute 23
The feel as well as any controls the kind of around the borders of our content placeholder and so dare we used our a site map files for web site map here at the very bottom we created to decimal representation of the hierarchy of our website or webpage is and then download the various controls to that site map file to use the site map data source object so we bound to data Treeview and menu control which then gave us some math navigation ability in a dynamic matter whether through a Treeview or cover pop up menu so were able to highlight some of the new features of ASP net 2 0 and that s always neat you ll be the first on your block to try some
Minute 24
Kaiser things hope you enjoy it and if you enjoy this video please visit www two net to download watch a reformer videos just like this one and all skill levels on many different topics related to see shark Visual Basic ASP net and more thank you