okeundead: 2010

Saturday, September 18, 2010

STYLING A FLEXIBLE HEADING

In this tutorial you will learn how to create a border above and below a title, add a continues gradient or image on the background and style the text with text-transfer and letter spacing.

MATERIALS

For this tutorial you will need a html document with a title/heading, and image and a blank CSS document. And you will have to open Dreamweaver to do this tutorial.

STAYLING THE HEADING

To style this heading, you will need a selector that targets the <hi> element

The html code used for this heading is

<html>
            <h1>murder</h1>

</html>

ADDING COLOR, FONT SIZE, AND WEIGHT

To add a color to the heading, use the color property

CSS code setting font – size and font – weight

            h1
            {
                        color: #036;
   font -size: 120%;
                        font-weight: normal;
            }

SETTING TEXT OPTIONS

The next step is to center the heading, make it uppercase, and add some letter spacing. To accomplish the text-transform, text-align, and letter-spacing properties can be use.

CSS code transforming text

            h1
            {
                        color: #036;
                        font-size: 120%;
                        font-weight: normal;
                        text-transform: uppercase;
                        text-align: center;
                        letter-spacing: .5em;
            }

APPLYING PADDING AND BORDERS

If the header requires borders that will be added to the top and bottom later on. A good way to avoid placing text hard against the borders is to use padding. The padding property settings are top and bottom padding to .4em and left and right padding to 0.

CSS code adding borders

            h1
            {
                        color: #036;
                        font-size: 120%;
                        font-weight: normal;
                        text-transform: uppercase;
                        text-align: center;
                        letter-spacing: .5em;
                        padding: .4em 0;
                        border-top: 1px solid #069;
                        border-bottom: 1px solid #69;
            }

ADDING A BACKGROUND IMAGE

To add a background image to the heading, use the background property.

CSS code adding a background image

            h1
            {
                        color: #036;
                        font-size: 120%;
                        font-weight: normal;
                        text-transform: uppercase;
                        text-align: center;
                        letter-spacing: .5em;
                        padding: .4em 0;
                        border-top: 1px solid #069;
                        border-bottom: 1px solid #69;
                        background: url(ontheback.jpg) repeat-x;
            }

In this lesson, you have learned how to style a flexible title using the commands font-size, font-weight, borders, padding and background images.

For more info about this subject look up styling a flexible heading on the internet good places to search for is Google and Linda.

Wednesday, September 1, 2010

first project

I want to crate a website for the group that I have; like some kind of website that will let see the members information about each other and stuff like that .

web ?'s

http://danransom.com/

I think this website is successful because the design is simple and easy to navigate. Each page of this website has the same format that unifies the content. The main reason why I like this web site is not so much for the design but the actual content.
The navigation of this web site is really simple. As you open the website you can see that you have 5 menus that you can chose from. On the photoblog page there are other sub menus but the only one that actually send you to a different page is the archive menu. The archive menu has a drop down menu that has 6-7 different sub categories that you can pick. The journals menu is some kind of summary for the whole website because you can access the content of the other pages form this journals page.

The way he establish hierarchy is by fount size and color.

a) The usage of color is very minimum on the text this was intentionally done to

make the photos more appealing to the viewer.

b) There is no texture in this website is plane and simple.

c) The motion is mostly seen in the photoblog page. You can go back and forward

between photos and there are some slide shows. But there is no really any

motion on this webpage

d) No sound at all

e) He only used 2 fonts for his typography. He used Times New Roman for his

main title and the titles of the sub-pages and futura for the rest of his text.

f) Visual hierarchy does not apply to this particular site

g) The information hierarchy is visible by they typography…. Size and color

h) The repletion is seen through out the website; mainly in the header with the

read line and the white subtitles. The layout is really consistent in every page

with some variation on the journals page when your have a series of menus on

the left hand side instead of the top part of the page.

The content of the site is heavily visual, the purpose of this site is to show the

work that he has done through out the years. Photos are the main visual content of this site. But overall this website has both visual and textual information.

The target audience is for photograph enthusiast and professional photographers.

He site is successful because all of its content is related to photography and not other stuff that is not related to photography. Like we often see in other sites.

web links

http://www.mtncolors.com/

http://danransom.com/