Turn off your iPad. It is not to be used (in any way) in this classroom, either for academic or recreational use (unless approved by the instructor). Ignoring this will result in detention and further disciplinary action (Gross Misconduct/Refusal to comply). Did you remember to put your assignments in a folder? Did you label the folder after the assignment title? Did you save your file in the appropriate manner? If not: NO GRADE! Check your PowerSchool frequently. It's your RESPONSIBILITY!

 

(Due Date: March 5)

Website Design (Part VI): Creating Templates / Modifying Page Properties

Our site is looking rather nice. We have a logo, buttons that glow, and everything fits as it should. The only real issues are as follows:

  • Our page is justified to the left (which, I would prefer centered)
  • Our page has no content
  • Our page has no background color or image (white – yuck)
  • Our page is only one page (it’s supposed to be a website, not just a webpage)

 Background Color

We can change the background color relatively easy. Now, you might think that we should just pull up that Properties window and start making adjustments. Only, the Properties window will not help us with this part. In order to make these changes, we need to:

  1. Go to “Modify” on the Dreamweaver menu bar
  2. Then, go to “Page Properties”
  3. In the Appearance properties, change the “Background Color” to #CCC (gray)
  4. Change “Text Color” to #000 (Black)
  5. Click “Ok”.

The page should appear like this:

 

Alignment (Centering)

Here is where the Properties box can help us out again. In order to center the webpage:

  1. Select the large table containing everything
  2. On the Properties box, select “Align
  3. Select “Center” (This will center our page)

Save your file

 

Building a Template – Editable Content

In society, there is the notion that suggests that we shouldn’t have to reinvent the wheel every time we want to use that wheel. The same can be said for webpages. Dreamweaver accommodates this notion nicely with the use of Templates. And, believe it or not, the hard part of building templates is already done.

  1. Open your design.html file
  2. Click on the third row in your table (it is colored gray now)
  3. Change it’s background color to white
  4. Select “Insert” from the Dreamweaver’s menu bar
  5. Select “Template Objects”
  6. Select “Editible Region” You’ll see this warning:


    Who cares? Click “Ok” and proceed (check the box so it never shows that warning again)
  7. Change the name “EditRegion1” to “content”
  8. Click “Ok”

What you should see is this:

An explanation is in order. The “Content” box (outlined in blue) is where content will populate your webpages. So, here is how this all works. When you create a template in Dreamweaver, you only make one template. But, all of your pages get produced from that single template. So, you could have four pages or four hundred pages, but you’ll only need to really edit the look, feel, and functionality of one template. When you modify that one template, it will change every single page in the site. But, in order to do so, Dreamweaver has to know where the regular content will go…the stuff that isn’t part of the template. That’s where the “Content” area comes in. Regardless, this Template is done for now. We’ll edit it again. But, for now, we’re ready to add content to our pages.

  1. Choose File
  2. Choose: Save as Template
  3. Name it as “My First Site – Basic”
  4. Click “Ok”
  5. In the “Update Links?” box, click on “Ok”

We also have a nice surprise. In our File panel, there is a new addition:

 

Populate the Pages with Content

Well, three out of four aint bad. But, it aint good either. We need to finish what we started. This is where you come in (Let’s face it, I figured out all the rest of this stuff for you.) What you need to do is come up with some information about yourself. And, if you haven’t guess it yet, you need to create some content about YOU. What are your favorite games? What are your favorite websites? What is your favorite thing (or, least favorite thing even) about yourself? And, what can you put on your homepage that would entice someone to actually look at your other pages?

  1. Create a blank page and call it “index.html” (Remember how to create a new page?)
    1. In the blank white space, type this "Welcome to my website." Then, click save.
  2. Create a blank page and call it “about_me.html
  3. Create a blank page and call it “favorite_games.html
  4. Create a blank page and call it “favorite_sites.html

Your File window should look like this:

Now, open up the about_me.html page and start typing anything about yourself you want people to know. Do not worry about how it looks. Simple black and white looks great for now. Do the same thing with the other pages.

So, now that you’ve said all you can say about yourself, the world, and everything in between, we need to make the pages look like our template. Here’s the easy part.

  1. Open up the index.html page (which is actually the Home page)
  2. Select “Modify” from the menu bar
  3. Select “Templates” from the drop down menu
  4. Select “Apply Template to Page”
  5. Select your template
  6. There is a window titled “Inconsistent Region Names” that pops up – Select “Content” from the drop down menu labeled “Move Content to New Region” (this is the area in the template that we labeled “Content”)
  7. Click “Ok”
  8. Repeat this process for the Favorite Games, Favorite Sites, and About Me pages