Web Design‎ > ‎

Web Design Daily Activities

This is where you can see what we did in class each day. Most recent classes show at the top.

End of semester

posted Feb 17, 2012, 5:28 AM by Peter Knowles

It's now 2nd semester and web design is over...for now.

Keep working on the skills you've learned. I'd love to see any new pages or sites you create. Send 'em my way, or stop by to tell me about them.

And good luck with your 2nd semester classes!

January 31

posted Jan 31, 2012, 4:54 AM by Peter Knowles

Your final project was due yesterday. If you didn't turn it in, you're late.

Turn it in today. See yesterday's assignment page for details.

January 30

posted Jan 30, 2012, 4:58 AM by Peter Knowles

Same as last Wednesday. Continue turning your single web page into an attractive, complete website. 
It's Due TODAY!

You can see a sample of where you should be here: Mr. Knowles' Bucket List


Think you're done? 

Before turning it in, make sure it meets all these requirements: 

1) ONE css file (.css) with code that controls the style on all the HTML pages (below)

2) ONE home page (.html) that visitors will see first. 
This page must include:
    An external link to your CSS file 
    Your name and school email address, along with a copyright notice and date
    An attractive color, font, design scheme
    AT LEAST One image (with alt tag, of course)
    CONTENT created by you
    A Navigation bar (vertical or horizontal) that links to the sub pages (below)

3) AT LEAST FOUR sub pages, each of which contains
    A link back to the home page
    AT LEAST One external link
    An attractive color, font, design scheme that ties the sub pages into the site design
    AT LEAST One image (with alt tag, of course)
    CONTENT created by you

Make sure you only use images and other content that you have permission to use. (Check creativecommons.org for your images)

Are you really done?
If so, you'll be saving a copy of your entire website folder (with the 6 or more files above) on a thumb drive to turn in. See Mr. Knowles for the drive and instructions. 
Then, if there's still time, help others as you can. 
Only a short class tomorrow to wrap things up, and then......Web designing on your own!

January 27

posted Jan 30, 2012, 4:52 AM by Peter Knowles

Same as Wednesday. Continue turning your single web page into an attractive, complete website. 

You can see a sample of where you should be here: Mr. Knowles' Bucket List

January 26

posted Jan 26, 2012, 5:51 AM by Peter Knowles   [ updated Jan 30, 2012, 4:50 AM ]

Same as yesterday. Continue turning your single web page into an attractive, complete website. 

January 25

posted Jan 25, 2012, 6:08 AM by Peter Knowles   [ updated Jan 26, 2012, 6:58 AM ]

Today you'll continue making your website, but it's time to start working with multiple files to make the website work. Follow the instructions below to make sure your site is shaping up the way it should be. 

First: The Big Picture
You should already have a single file created with your home page design, including an Internal CSS Style sheet in the <Head> section of the page, the HTML code that contains the content of your page in the <Body> section of the page, and links to one or more images on the web that you have found to use in your site. You are now going to disassemble the one file into multiple files in preparation of creating the rest of your site. 

Before:    
    After:

PART ONE: Building your master files
Here's how to do this. (Follow each step carefully)
1. Log on to your network folder and create a new folder in it called "Website"
2. Open up your Google Doc with the code you've created in class for your main page of your website.
3. Open a program from your computer called NotePad (find it in the Accessories folder under the Programs menu)
4. Copy ALL the code from your Google Doc and paste it into your new NotePad file. 
5. Save the file in your "Website" folder with the name you chose earlier for your CSS code. IMPORTANT: Include the file ending .css in your filename. (So if mine is called "code", I need to name the file "code.css". Without the .css ending, it will not work.)
6. Repeat steps 4 and 5, but this time, save the NotePad file with a different name, ending with a ".html" file ending. (So if mine is called "home", I need to name the file "home.html". Without the .html ending, it will not work.)
7. While working in the .html document, delete all the css code in the <Head> section of your file, and replace it with the following code:
<head>
<link rel="stylesheet" type="text/css" href="code.css" />
</head>

Note: include the name of your .css file in the code above. Mine is called code.css so that's what I used. You need to use whatever you named your file. 

8. Save your .html file with the changes you just made. 

You've just created one line of code to replace ALL the css code you created to style your page the way you want it. This will come in very handy as you create new web pages based on that code, and make corrections, changes, and tweaks as you make your site perfect. But you're not quite done.   

9. Open your .css file. Since this file only needs to contain the css code to control all your pages, you don't need any of the HTML code in your .css file. While working in the .css document, delete all the HTML code (This includes EVERYTHING that is not css code...<Head> tags, everything inside the <Body> section, the tags, everything EXCEPT the actual css code) 

Before:

<html>
<head>
<style type="text/css"> 
body {
height: 100%;
}
div.container
{
position:relative;
width:100%;
margin-top:0px;
border:1px solid gray;
line-height:100%;
min-height:100%;
}
........
</body>
</html>

 After: 


body {
height: 100%;
}
div.container
{
position:relative;
width:100%;
margin-top:0px;
border:1px solid gray;
line-height:100%;
min-height:100%;
}


(See? Only the CSS code is left)

10. Preview your work. If you open your .html file in a browser, it should look exactly like the old version, before you disassembled the code. But now it's created using 2 files, rather than one.

Normally, using 2 files to do what 1 file could do would be nothing to brag about. But since you're building an entire site based on the same CSS code, it is much more efficient to do things this way. 

PART TWO: Link to your sub-pages
This part might seem a little strange because you haven't even created your sub pages yet, and you're already linking to them. But you know where you want your menu links to go, so it makes sense to code your links now. (If you do it later, you'll need to code many, many different links, over and over again. This way saves a lot of time.)

So here's what you need to do. 
1. In NotePad, use the File>New option to create a new file.
2. Type the name that one of your subpages will called in the file, then
3. Save the file by that name with an .html ending. For example, in my site, I have a page called "shoes" so I would type the word "shoes" in my NotePad file, then save it as shoes.html. IMPORTANT: Include the .html ending or it won't work. Also make sure that it saves in the same folder as your home.html and code.css files. 
4. After saving the first of your files, do it again for another, then another, then another, changing the text in each file, and using File>Save As to save a file by a different name each time. Be sure to include the .html file each time. (For mine, when I'm done, I'll have boston.html, shoes.html, food.html, training.html, and qualifying.html, all saved in the same folder as home.html and code.css. With the exception of these last two, all my files are simply a word with nothing else in them).

Whew! That was a lot of file creating. Now it's time to create links to each of them. Here's how:
5. Open up your home.html file in NotePad. Decide what you want to link FROM on your main page to reach the subpages. On my example, I'm going to use the images and text on my left hand, vertical navigation bar to link to each appropriate page. So I need to add <a href> tags in my home.html file to make that happen. 
6. In the appropriate location of the HTML code, I'm going to add an <a href> tag that looks like this:

<a href="boston.html"><img src="http://www.baa.org/Images/CommonImages/baa_logo.png" alt="Boston" height=85px width=100px/> 
<div class="desc">Why Boston?</div></a>

Then save my home page (as .html file). If I've done it right, I can open home.html in a browser, click on the link I just created, and see my file called "boston.html" appear. (Right now it's nothing but a word or two. I'll change that in Part 3. For now, I just want to make sure my links all work. If this one does, I'm ready to build the rest).

7. Add href links to all your other sub pages, adding the links in the appropriate location in your HTML Code. When done, mine looks like this. 
8. Test them out as you go. Each one should successfully link to one of your hastily created placeholder pages. 
Once they all work, you're ready to begin building your sub-pages for real. 

PART THREE: Build your sub-pages

If your CSS and HTML home page are working together, it's time to get going on your sub pages. If you've followed the steps above, you have a home page that looks just the way you like it, and that page links to at least four (4) blank pages. Now it's time to create content quickly and easily on those pages. Here's how:
 
1. Open up your HTML home page in NotePad
2. Use the File > Save as... command to save it as one of your subpage file names. (For my example, I open up home.html, choose File>Save as..., and save it as boston.html. Since I already have a blank page called boston.html, I'll be asked if I want to replace the existing page by this name. I'll answer yes, and replace my blank page with a copy of my home page. So far so good!)

DECISION TIME: Before moving on, it's good to make sure that your first sub-page looks exactly the way you want it. Preview it to make sure it is still picking up the CSS code you want. (It should be if your home page was.) If so, good. 

Time to decide:
The screen shots below show one of the decisions facing you at this point. The one on the left looks exactly like my home page, with the same navigation buttons on the left hand side. This would allow visitors to my site to move easily from any page on the site to any other page on the site. The one on the right has lost the navigation buttons, but keeps the look and feel of the site. Without the navigation buttons, visitors could easily go to a sub-page, but would have to go back to the home page before going to another sub-page. 
IF YOU WANT ALL YOUR PAGES TO LOOK THE SAME AS YOUR HOME PAGE (the one on the left), move on to Step 3 below. 
IF YOU WANT YOUR SUB-PAGES TO LOOK DIFFERENT THAN THE HOME PAGE (the one on the right), you've got a bit of work to do right now. Follow steps A, B, C, etc. before you go to Step 3.

ORIGINAL>>>   MODIFIED>>> 

If you are going to be changing the structure or look of your sub-pages, do that now. 
A) Work with the HTML code on the copy you just made to make your first sub-page perfect. 
B) If you need to delete navigation elements (like I've done) work with the HTML to eliminate the part of your code that creates that section. 
C) Be sure to check each change you make in your browser to be sure that you are headed the right direction. 
D) Make any changes to the HTML code in your sub-page necessary to make your first sub-page a template for all the rest of the sub-pages.
When you're happy with the design of your sub-page, you're ready to move on to Step 3 below.

Back to the steps....
3. Once you have the first sub-page just the way you want it, repeat the step where you create a copy.  Use the File > Save as... command to save it as another one of your sub-page file names. (For my site, I save a copy of boston.html as shoes.html. Since I already have a blank page called shoes.html, I'll be asked if I want to replace the existing page by this name. I'll answer yes, and replace my existing blank page with a copy of my sub-page.)
4. Repeat this process to create all the sub-pages you need. Since you already had blank pages, you'll need to confirm the save as... each time, being sure that you include the .html ending on each. 
5. When you're all finished, you should have your entire site created and it should be linked correctly. Try it out. As you click from sub-page to sub-page, they should all look just the way you wanted them. But they probably look exactly like each other. 

Which is why you're ALMOST DONE!

Part Four: Change the content on your sub-pages
Now it's time to go to work on your sub-pages to make the content exactly what you want. You may be starting with four sub-pages that look exactly like your home page, but they can't stay that way. Now it's time to perfect your content and HTML code on all your sub-pages. Keep in mind that the requirements for this project are that your sub-pages all have 

    A link back to the home page
    AT LEAST One external link
    An attractive color, font, design scheme that ties the sub pages into the site design
    AT LEAST One image (with alt tag, of course)
    CONTENT created by you

Most of the work at this point will be content, within the HTML of your sub-pages. But it's possible that, as you work, you'll want to make a global change for all your pages. You can do that easily for all pages by making a change in your CSS page. Just be sure to check your changes as you go so if you make a mistake you can easily reverse it. 

HERE'S AN ONLINE SAMPLE OF WHERE YOU MIGHT BE RIGHT ABOUT NOW. (IT'S WHERE I AM RIGHT NOW!....STILL SOME WORK TO DO)

January 23

posted Jan 23, 2012, 1:17 PM by Peter Knowles

Same as January 9. More time for you to design and begin building your final project. 

NOTE: Tomorrow and the rest of the week we'll meet in the library to start putting together your website. You should be DONE with design issues (CSS code, and other design decisions) by then. Make sure you have an accurate, up-to-date Google Doc with all your code (CSS and HTML) for your main page saved by then. You'll be able to access it from the library, where you'll also be able to save files and folders in the manner you need to save them. 

More tomorrow.... Be ready!

January 13

posted Jan 23, 2012, 1:14 PM by Peter Knowles

Same as January 9. More time for you to design and begin building your final project. 

January 12

posted Jan 23, 2012, 1:13 PM by Peter Knowles

Same as January 9. More time for you to design and begin building your final project. 

January 11

posted Jan 11, 2012, 12:04 PM by Peter Knowles   [ updated Jan 11, 2012, 12:12 PM ]

Same as January 9. More time for you to design and begin building your final project. 

1-10 of 89