Printer Friendly Version Week 1
The top few lines of the HTML file
- Follow these instructions to obtain a copy of the two files needed for this lesson
- To obtain the Flexible Box Model.html file, proceed as follows.
- Click on Flexible Box Model Link in the Tutorial Section
- Right Click on the page after it loads.
- Click on view Page Source.
- Drag the whole page to highlight it
- Type CRTL + C to put the lines of code on the clipboard.
- Open Notepad++
- Click on File - New
- Type CTRL + V to paste it into Notepad++
- Click on File Save AS - Find a location to store the file - give it a name like Flexible Box Model.html
- Use HTML for the Save AS type
- Click Run
- Click Launch in Chrome.
- Click on the magnifying glass below. It should look like this.
Flexible box model
Video on Downloading the Flexible Box model
- To get the Cascading Style Sheet file Follow these steps.
- In the Tutorial Section of the newsletter Lesson, Click on main3.css
- After it opens, Right-Click
- Select SAVE AS
- Choose location for file to be saved.
- Keep same File name and File Type.
- Click Save.
- Open it in Notepad++.
Downloading the cascading style sheet video
- Let's examine the top few lines of the flexible box model.
- Go Back to Notepad++ to examine the lines of code.
You must use Google Chrome to see the flexible box model as it is intended.
- Other browsers simply vertically align the boxes.
- The first line identifies this document as an HTML5 application.
- The second line tells the browser that the language used is English.
- The next line tells the bowser what character set to use.
- The <Title> is where the The title of the document is put. This title shows up on top of the tabs used in today's browsers.
- The title tag also is used by search engines.
- The </Title> ends the tag.
- The last line is a link to the file that formats the page. It is a cascading style sheet file and essential to the proper formatting to the web page.
Laying out the page
- We will be using the flexible box model for this exercise.
- The flexbox model is a layout system which helps us layout our web page.
- It creates a flexible layout for us in which the browser does all the calculations for us as to height, width, and placement.
- The flexbox model is especially useful when working with different screen sixes like tablets and call phones.
- In the past, tables were used to organize the layout of a page
- Next came a fixed box model using <div> tags with fixed heights and widths.
- Numerous calculations were necessary to calculate how the boxes fitted together to create a layout.
- This model that we will be using has two columns. One is flexible and the other fixed.
- HTML and CSS3 have a different way of laying out the page
- Let's look at the file that formats these new tags
- It is called main3.css
- We are looking at just a part of the file that relates to these new tags.
- The scroll box above shows these new tags.
- All of these elements are used to layout a page using HML5
- Each element is separated by a comma and the information inside the curly braces tells the different browsers how to render these tags.
- This particular line tells the older browsers to display all these newer elements vertically or blocked.
Layout 1 Video
The Flexible Box Model
- Now lets examine the html flexible box model file to see how the page is layout
- We want to identify all of these sections
- Different colors, both background and borders are used to help you see where these sections are.
Flexible box model
Cascading Style Sheet File
- Clicking on the top magnifying glass allows you to view the flexible box model in its own window.
- Try resizing the window. Make it smaller. Make it larger
- What happens?
- Notice the width of the side news column,the blue color box does not change
- The width of the other column does change.
- Now lets find the different parts that layout our page.
- The big green border around the whole page is the body tag.
- If you click on the Cascading Style Sheet magnifying glass you will see the contents of that file
- Scroll down until you see the body formatting.
- You will see that it has a 5 pixel solid green border.
- To see the code for the html flexible box model, click on the magnifying glass then right-click on the form, then view the source.
- Scroll down until you see <body> tag.
- As you can see the two files work together to obtain the desired effect.
- The outside_wrapper , <div ID="outside_wrapper">,tag is a solid red border which goes around the entire page.
- Go back and forth between the two files until you can see how they work together.
- Look at the <Header ID="top_header">tag. It has a yellow background with a 3 pixel solid black border.
- This header is where the company name and logo would go in your newsletter or any other text or pictures you want.
- The <Nav id="top_menu">tag is the navigation bar. The background is dark blue, the text is white and border is orange. Here is where you would put links to the other pages of the newsletter.
- Flip back and forth between the HTML and Cascading Style sheet files to see the html tag and the formatting in the css file.
- Divisions are similar to Sections. The div tags usually are on the outside of section tags.
- Section tags are part of HTML5.
- Division, <div> were part of previous versions of HTML, but work with HTML5
- The term that describes how older tags work with newer releases is called backward compatibility.
- <div id="new_div"> has a pink background and goes from just under the navigation bar to the beginning of the footer.
- <Section ID="main_section"> has a solid blue border. It covers both columns - the articles and the side news.
- Notice that in the flexible box model html filr that each beginning tag has a corresponding ending tag.
- The ending tags have a"/" contained inside the tag.
- For example, <section id="main_section"> has and ending tag the looks like </section>.
- Both articles have their own headers and footers.
- These boxes can be used for writing about anything. In the Winchester Canyon Flowers and Gifts newsletter, the first article layout box was used to communicate what to expect at the Bakersfield trade show.
- The second article box contains the schedule of events for the trade show.
- You may use them for any pertinent data that goes on in your company: grand openings, open houses, employee of the month, new regulations affecting employee, seminars, training available, etc.
- To see the finished newsletter, click on the link located in the beginning of this tutorial.
- The <Aside id="side_news"> has a red border and an background that is aqua in color.
- It was used as a section that is fixed in width - not flexible and holds information about what is happening in each department.
- <Footer id="the_footer"> is a green border and contains things like copyright information, etc. Graphics can also be added in as a part of the footer.
- IDs are very important in designing layout of a page. By using IDs, you can zero in on a particular element and customize the look of the document.
Layout 2 video
- The colors used in the flexible box model are awful.
- These colors were used only as a tool to help you identify the different layout parts.
- Now it is time for you to find the colors you want to use in you newsletter
- Do you already have company colors?
- Do you want the colors to match the web site . booth colors or sales catalog?
- Look at the information below
- It is designed to help you determine what colors and borders for your newsletter.
The following list examines the meaning of colors
- Red - Energy, passion, action, strong, masculine.
- Orange - Social communication and optimism
- Pink - Love, unconditional love, nurturing
- Yellow - Optimistic, cheerful
- Green - Balance and growth
- Blue - Color of trust and peace.
- Indigo - Intuition
- Purple - Imaginative, seek meaning of life, spiritual fulfilment
- Turquoise - Communication, clarity of mind.
- Magenta - Universal harmony and emotional balance
- Brown - Down-to-earth, security, material wealth
- Gray - Compromise, neither black or white.
- Silver - Feminine, energy
- Gold - Success, achievement, lucky, quality
- White- Complete, pure, color of perfection, purity, innocence
- Black- Secretive, hidden, unknown, mystery
The following list examines the psychology of colors
Comprehensive color chart from http://web.njit.edu/~kevin/rgb.txt.html
- Adolescents like complex colors. They are used to playing video games with computer graphics
- Girls like shades of purple and pink. AS they get older they also like black
- Boys favor blue, turquoise, green, yellow, black, white, gray and silver.
- Serious business colors include darker colors like dark blue, dark green, indigo, black and gray
- Casual business colors are light hearted, bright red, orange, yellow, bright green, bright blue, pink and purple
- Some color preferences are climate based. For example, California favors bright and warm colors
- Eastern part of country prefers colder, cool colors.
The following list examines color palettes
- You want colors that go together and are pleasing to the eye. Here are a few palettes
- Palette one
- #404040 - Dark gray
- #6dbdd6 - Light blue
- #b71427 - Dark red
- #ffe658 - Light yellow
- Palette two
- #558c89 - Light teal
- #74afad - Blue gray
- #d9853b - Light brown
- #ececea - Light gray
- Palette three. You decide what colors are in palette three. Turn answers in with progress log
- Palette four. You decide what colors these represent. Turn in you answers in with your progress log,
- You should also examine the fonts used. Make sure that they are readable.
- I know there are so many to choose from. Try to find those that match your company image.
- Decide on body, outside wrapper, top_header, menu bar side news, and footer, etc.
- Finalize your cascading style sheet file and save it with the colors and fonts you want.
- Save your HTML file before entering data into the boxes.
- This will be your new template used to create each page of your presentation.
Keying the information contained in top header and Navigation bar of the newsletter - Page 1
- Put your company name and some graphic in the top_header.
- I also identified the document as a newsletter for November.
- Remember, the Human Resources should make a newsletter each month.
- Make menu bar using links to four pages.
- See Winchester Canyon Florist example
- I used Winchester Canyon.html as the link name for page 1.
- <a href="Winchester Canyon.html" Title=" 1. Bakersfield Trade Show- What to expect.
2. Department staff members duties
3. Trade Show Schedule" >Page 1</a>
- See how the title looks. It is used to identify what is contained on page 1.
- When the user hovers over the link, the title displays.
- I pressed enter after each of the numbered items, so that each would appear on its own line.
- It is a good idea to put in the title tags for the other pages in at this point, otherwise you will have to redo them for each page.
- It is also a good way to organize your thoughts as to what items, and what pages they go on.
Colors, Top Header and Navigation Bar Video
Keying the information contained Article 1 - Page 1
- Fill in your headlines 1 and 2 in the main section.
- This is where the headlines go for Article 1
- See example below. It contains a main headline and a secondary one. It also contains an image.
- <Section id="main_section">
<h1>Bakersfield Trade Show</h1>
<h2>What to expect</h2>
<img src="trade.jpg" align=right height=200 width=200 border=1>
- The <p> signifies a paragraph.
- <strong> is used to bold the word between the beginning and ending tags.
- There two kinds of lists in HTML. The ordered list and the unordered list.
- The ordered list , <ol> numbers each list item
- The unordered, <ul>, list uses bullets
- The <li> makes each list item.
- Make sure that you the ending tag for each when you are finished making list items : </ol> and </ul>.
- There is a footer for article one. Below is and example of one might look like.
- The footer is a good place to give credit to the person who wrote the article.
<Center><p>Written by Wendy Smith, Event Planner </p></center>
Article 1 Video
Keying the information contained article 2 - Page 1
- Follow the instructions above. Article 2 is formatted and set up the same way.
- Determine what information you want to present in his section of the newsletter.
- Do you want it to be in a list format?
- Develop headers and footers for article 2.
- Winchester Floral used article two to convey the schedule of events or agenda of the Bakersfield trade fair
Article2/Side News Video
Printer Friendly Version Week 2
Keying the information contained in Side News - Page 1
- Because the side news or aside box is a dark blue, it looks much better to use what as the color of the text.
- Other light colors would also work.
- Remember if you have a dark background, use a light color for the text.
- If using a light background, use a dark color for the text.
- As you can see from the example below, you can infuse style concepts directly in front of the text you want to change.
- <p style="font-family: Helvetica;font-size:14px;font-weight:bold; color:white">
- The side news box was use to list the special trade fair deals.
- As you can see there are 4 different promotional packages
Keying the information contained on page 2
- The first article on page 2 is the employee of the month. I used the name of our chief financial officer as the winner.
- A picture was included.
- You would want to shoot a nice digital picture for this article,
- I made general comments about Julie Kramer: grade point average, college plans, part time work, participation in sports, etc.
- The next section was an ordered list an each part of what she did in November was listed as a separate item.
- Lastly, the footer, contains the name of the person who wrote the article and their title.
- The second article on page 2 is entitled Flower Facts
- I found it on the Internet.
- It is good for florists to know what flower goes with what month.
- Winchester Canyon Floral will feature the December Flower of the Month, ,Narcissus, for the trade fair in December along with some balloons and a gift basket.
- The headline is Flower Facts
- The secondary headline is Targeted Selling By the Month.
- The data is presented in tabular form.
- The Table Heading, Birth Month Flowers, spans 3 columns and is centered.
- Column one is contains the month and most of holidays that fall in that month.
- Column 2 is the name of the flower for that month ad some description.
- The third column contains an image of the flower for that particular month.
- The third section on page 2 is the Side News box
It contains the specials offered during the trade show
- There four different packages.
- Each package contains flowers, balloons, and a gift basket
- Each package offers a discounted price when purchased at the trade show.
- Package 4 is a monthly subscription and includes a deluxe bouquet, three balloons and an assortment to gift baskets.
- Each package is arranged in tabular form.
- In package 4,an in-line style tag is used to highlight the month and flower using Tahoma font, bold and yellow in color.
Keying the information contained in page 3
- Article 1 is about Fund-raising
- A description of the car wash and bake sale was presented
- Images of some activity at the car wash was included.
- Baked goods were displayed as an image.
- Picture of team members who organized the event was included.
- Article 2, page 3 features a Team picture.
- A table containing staff members' names. positions, salary and duties is also included here.
- You might not want to show salaries, but each member knew in advance what those amounts were
- In most companies, salary information is confidential.
- The duties features a hover option where the job is described in some detail.
- Side News page 3 features important dates
- Included here is a clip art graphic showing how we remember dates. phone and memo pad.
- The important date were arranged in tabular form.
- Column one contains the dates of the event.
- Column two lists the names of the trade shows.
- The rest of the space is devoted to pictures of some of our department members:Accounting, Sales, and IT.
Keying the information contained in page 4
Article 1 Field Trip page 4
- Headline is Field Trip
- Sub headline is Flower Grower.
- A picture of an orchid was included here.
- A story explaining about the trip and this major orchid distributor was keyed in here.
Article 2 Thoughts from the Editor page 4
- Here is where the editor of the newsletter writes about anything he or she wants.
- In The example I used, the focus was on the accomplishments of all departments during the month of November.
Side News- page 4
- I used this section of the page to explain a little about our gift baskets
- A general description was keyed in.
- Three package images wee displayed.
- A Title was added to each picture so that when the user hovers over the image a description of the basket would be provided.
Debug and Post Page to Server
- You will want to spell check all 4 pages.
- Check your Grammar.
- Check over Capitalization.
- Make sure all links work
- Check size of images. Are they two big or too small? Are they clear?
- Look over headlines 1 2 and 3
- Is there any need for in-line tags?
- Look at your cascading style sheet. Are any changes needed
- Look over tables and table data cells. Any changes in cellspacing or cellpadding?
- Are table borders appropriate? and the right size?
- Are all colors to your liking?
- Make sure that all four pages are linked to the cascading style sheet file