DM20  Assignment 3B - Create a Projects Menu Page

Due Thursday, March 7


( to A3B, Pt.2 )


In this assignment you'll create a new Projects Menu web page. You'll link to this new page from your Home page, and you'll use your Projects Menu page to put in links to your completed assignments throughout the rest of the class.

This Projects Menu page will be created from scratch and styled with CSS. Previously, we've had CSS coding combined with the html source code, all in one .html file.
Here you'll have the CSS styling and formatting in an external file, a .css file.

One advantage of having external .css files is that you can use one .css file to style multiple web pages. All web pages that are linked to one .css file will take on the same styles, formatting, color scheme, fonts, etc.
You don't have to style each web page separately, which can save you a lot of time.
You can make changes in the one .css file and web pages that are linked to it will automatically change accordingly, all at once.

Also, your Projects Menu page will be a "responsive" page, meaning it will automatically adapt to whatever size screen it's viewed on.

Here's an example with only basic coloring. Resize your browser to see the page adapt. If you're in the Chrome browser, press Ctrl Shift I to bring up the device simulator and try out the different sizes there too.

And here and here are two examples of how you can style your page to complete this assignment.
(Yours will differ of course - these are just to give you the general idea.)


Launch Dreamweaver. If your 20web root folder is not showing in the Files panel, go to Site > Manage Sites and select your site (or import your dm20 .ste file).

Go to File>New to create a new blank HTML page.  Give it a title, DM20 Projects Menu, click Create:

new blank html page

Then File>Save to save it into your dm20web root folder. Give it the file name  menu.html

In Split view, look near the top of the source code, where it says <meta charset="utf-8">  (just above the <title> tag).
As pictured below, click once in the code after the > bracket, press Enter to move down a line.

prompt after closing bracket

Then copy this tag:

<meta name="viewport" content="width=device-width, initial-scale=1">

...and paste it into your menu page's source code like this:

viewport meta tag pasted in

This tag sets up your page to be responsive and adapt to small screens.

Next you'll create the .css file where you'll do all the styling and formatting for your menu.html page.
As pictured below, in the CSS Designer panel click the "Sources" + button and choose 'Create A New CSS File' :

new css file

Name it  styles-menu.css  and click OK:

name the new css file

The new css file is now in "Sources" in the Designer Panel, and linked to your menu.html page:

css file in Sources and linked in html

 

Next we'll add some Divs to begin the layout of this page.
"Divs" are "dividers", basically rectangles that will define different areas and sections of your web page. Each Div is named and and identified in the source code - and in the CSS Designer, where you will eventually give them properties that style the content within them.

Click at the top of your blank white page (in Design View).
From the top menu, Insert>Div 
Choose "At insertion point"  and in the Class field, type header and click OK:

.header div

With the  Content for class header Goes Here text highlighted...

filler text highlighted

...replace that text by typing DM20 Class Projects over it:

header title typed in

Highlight it again (click and drag across it), and down in the Properties panel where it says Format, click the arrow and choose Heading 1:

heading 1 for text

Then click once after the word "Projects" (in Design view), press Enter to move down to a new paragraph and type some text, like 'More text coming soon..." or some other catchy phrase.

header texts

Next, click in your page under the header Div you made (click anywhere beneath the dotted line) and top menu, Insert>Div
'At Insertion Point' and type topnav  in the Class field, click OK.

create .topnav div

topnav div in place

Then click in your page underneath the topnav Div.

And Insert>Div, At Insertion Point, and in the Class field, type row and click OK:

.row div insert

.row div in source code

Next you're going to add a 'comment' in the source code. Source code comments are like notes you can leave for yourself - they're not visible in the actual web page. We're going to insert a comment that identifies for us the closing </div> tag for the "row" Div you just made.
The reason is - this 'row' Div is going to have some other Divs within it - and if you don't insert the next Divs INSIDE the 'row' Div's tag, they'll be in the wrong place in your page.
Plus, when you need to insert something at an exact point, as we will be doing, it's hard to tell at a glance which </div> tag refers to which - they all look the same.

So, click once in the source code just after the 'row' Div's closing tag (pictured below) and press your Spacebar once. Then click and hold down on the Apply Comment icon (at the far left of the interface, pictured below), choose Apply HTML Comment:

apply comment in source code

At the blinking prompt, type  end of row  like this:

comment in place

Next, we're going to open up some space in the code so we can insert more Divs within the 'row' Div.
In the code, click once directly after 'Content for class "row" Goes Here', press Enter twice to move down a couple lines, and press Backspace once:

opening up some space in the source code

Click in the empty space you created (in the pic above, it's Line 17), and from the top menu, Insert>Div, 'At Insertion Point', and in the Class field type column side and click OK:

column side div

column side div in code

Note that in the pic above, this newest Div is above the "end of row" </div> in the code - meaning this 'column side' Div is contained within the 'row' Div in your page.

Replace the "Content for column side Goes Here" text - type Subtitle over it, and down in the Properties Panel, click the "Format" button (circled below) and choose Heading 2 :

Heading 2 tag

Then click after the word Subtitle in your page, press Enter, and paste a sentence of lorem ipsum filler text (copy some from lipsum.com )

filler text under Subtitle

Next, in the code, click just after the "column side" closing </div> tag, press Enter to move down a line, as pictured below.
Your prompt should be above the 'end of row' line, so that this next Div will also be contained within the 'row' Div - in the pic below it's Line 21.
Then top menu, Insert>Div, At Insertion Point, and in the Class field type column middle and click OK:

insert column middle div

Do the same for column middle's text - type Subtitle, make it Heading 2, and paste some more lorem ipsum in a paragraph beneath.

almost all divs are in

And then put in another "column side" Div. You can repeat the steps above that you did for the first 'column side', or you can copy/paste in the source code.

Select all the code for the first 'column side' Div and Edit>Copy.

copy column's code

Then click after the 'column middle' closing </div> tag and press Enter...

...and Edit>Paste. This third column should also be within the 'row' Div. Its code should be just above the 'end of row' comment:

third column's code pasted in

 

And for the last Div, a footer, first click in the code after the 'end of row' comment, press Enter to move down a line,
then top menu, Insert>Div, 'At Insertion Point', Class: footer and click OK:

foot div inserted

As pictured above, the 'footer' Div is beneath the 'row' Div's closing </div> tag - we don't want the footer to be inside the 'row' Div but underneath it, at the bottom of your web page.

Replace the footer Div's filler text with some of your own.

footer div in place

Then in Design view, highlight and delete the 'Content for class "row" Goes Here' filler text. This 'row' will be invisible in your web page - it's just there to contain the three columns correctly - those three columns where you've put "Subtitle" and lorem ipsum filler texts.

(Have you saved recently?)

Next you'll put in the linked texts that will become your navigation bar - a horizontal row of buttons that will link to your Home page and to your completed assignments throughout the rest of the class.

First, highlight the 'Content for class "topnav" Goes Here' filler text...

highlight filler text

...and type the following over it:

Home A4-1 A4-2

future button texts

These will be your first three buttons in your navigation bar. Later on you'll link them to your Home page, and eventually to your completed work for Assignment 4, parts 1 and 2.

Next you'll assign a placeholder link - your # key - to each one. Putting a # in the Link field is a good way to simulate linked text without having to actually put in a real link.
Also, these will eventually be buttons in your navigation bar - they must have placeholder links (the #) assigned to them or the CSS styling you'll be doing won't work correctly.

Select the word Home in Design view, type # in its Link field down in the Properties panel.

assign placeholder links

Select  A4-1  type # in its Link field, and do the same for A4-2

future buttons linked

Let's make an adjustment in the code so it will be easier to work with.
Click just before each of the three links (the <a href.... in the code) and press Enter to move each one down a line. This does not affect the spacing of these texts in your page, only in the code view.

Also, put in another HTML Comment, denoting where the 'topnav' Div ends - when you add more links you'll know they're within the 'topnav' section of your page - they are all above that closing </div> tag.

adjusting code for better legibility

Next, you'll copy/paste some more placeholder links. Currently you have only three - which would result in a very tiny navigation bar once it's styled with css.
You'll eventually be filling these in with real links - to your pages that contain what you create for upcoming assignments.

In the code, select the third link and Edit>Copy.

select the third link tag

Click just after its closing </a>, press Enter to move down a line and Edit>Paste. Replace 'A4-2' with the word Link
Select that link's tag in the code, Copy...

...click after its closing </a> and press Enter to move down a line,then Edit>Paste.
Make about 10 more - that should give you a navigation bar of a much more substantial width.

lotsa links

Ctrl S to save. You're done laying out the html part of your Projects Menu page, now it's time to set up the CSS.  Continue...