2.4 ATI Cal State L.A. Web Templates: Working with the Banner

In this video we are going to start working on
our master template we created in the last video. And we will first work with the banner and banner image. So, with my master template open, I can see right
here on the very top we have our banner. The very first thing I see I need
to change is this “Organization Name Here.” And anywhere in Dreamweaver, if you want to highlight the entire portion of a certain amount of text, I can triple-click, so I’m going to click three times in a row. And that will highlight all of the text for me. So now I am going to go ahead and type
the organization name I am creating this website for. In this case, I’m creating a web page
for the Cal State L.A. Futurists Club. So I’m going to go ahead and put the title in. “CSULA Futurists Club” Now this title should be the same on every single one of your webpages. This title is supposed to signify which page the user is on and there is no reason for this to change from page to page. This Cal State L.A. logo links back to the Cal State L.A. homepage and we want to make sure it stays that way. So why don’t we go ahead and change this
to link to our particular home page. So I’m going to triple-click again and you’ll see down on the bottom in the
Properties Panel I have a Link box and I can go ahead and type the file, or the
file I plan to have this text link to. So in this case this is going to link to our homepage which in websites is always the index page. So I’m going to go ahead and type “index.html” Now at this moment we don’t have an Index
page created but we will eventually create one so when we do this particular set of
text will link to the Index page. We need to change the banner image . So this image right here is our banner image I can go ahead and click on that to focus it, you’ll see some of the properties show up in the Properties Panel. The default image is 260 pixels high and for the Primary Templates, where it goes all the way across the page it is 950 pixels wide. So, whatever banner image you decide to use, which you should create, make sure it is adhering to that 950 pixel width, the height is variable but I recommend you use 260 as it looks very nice For the other Secondary Templates, the banner image width changes and there is table with those different widths in the handout. I can tell you right now that they vary
from 930 pixels wide to 520 pixels wide. So, to change this image, I can double-click it and we’ll see the Select Image Source dialogue box pop up. And I can simply navigate to the image I want to use. In this case, we have some sample images in our data files. So I’m going to go ahead and click the drop down arrow and go to the Desktop, find my data files folder I’m going to go ahead and go to Sample Banner Images and then I’m going to pick the correct image. So we have two to choose from for this Primary template. Either an image of the moon or a dish image. We’re going to go ahead and go with dish, and click OK. You’ll notice that in the Files Panel this picture
has shown up in our Images folder and because we defined an Images folder, Dreamweaver knew where it wants to copy this particular image file. And you’ll see that the image has swapped out on our page If I wanted to, I could also change
the Image Source from the Properties Panel by clicking the “Browse for File” button which will bring up the same Select Image Source Or, if I had multiple files over here, I could use the “Target” and click and drag to highlight the file I want to use. Once we’ve changed the banner image, we will also want to possibly change the Alt text which is an accessibility must-have. The Alt text is a simple description of the image itself. For any image that displays content or is useful to a user we need to make sure we have a very clean description of that image. In this case, for the banner image, it’s just visual fluff it actually doesn’t provide any content so we can make the Alt text empty but you just can’t delete the Alt text
because that removes the tag entirely, and we need to make sure that it’s there but empty So, if we click the drop down arrow, and select Empty then we can do empty Alt text for our banner image. If I click off of the banner image and click back, you’ll notice that the Alt text is still the same. Once I’m done making changes, I want to go ahead save them. So I’m going to go ahead and click File, and then Save.

Leave a Reply

Your email address will not be published. Required fields are marked *