Kristin Francart

Thursday, April 28, 2011

Inspiration

This is the image that inspired me. It is one of Paula Scher's geographical designs. She did many maps but this one intrigued me.

Wire Frame

Today we were given a designer I got Paula Scher. We were then told to create a wire frame layout. This is what mine looks like

Monday, April 11, 2011

For this assignment we were told to create a resume by using HTML coding. I made my code in notepad because I have a PC. We had to incorporate tags, attributes, headings, content separated by paragraphs, page titles, lists, insert a image, and character formatting (text)-color, bold, italic, or underlined.

Below is the Coding I Used

<html>
<head>
<title>Resume</title>
</head>

<body>
<h1><u>Resume</u></h1>
<h2 style="color:330033;font-family:verdana;font-size:20px"> Name & Contact Info</h2>
<i>Kristin Francart</i>
<ul>
<li>484-339-0445</li>
<li>27 Garden View Lancaster, PA 17512</li>
<li>kristinfrancart@aol.com</li>
</ul>
</p>

<h3 style="color:990099;font-family:verdana;font-size:20px">Objective</h3>
<p>The job I am currently seeking is in retail. I would like to work at a gallery where I can sell my own work</p>

<h4 style="color:CC0033;font-family:verdana;font-size:20px">Education</h4>
<p>Graduated Avon Grove High School. Currently in my second year of college at Millersville Univesity</p>

<h5 style="color:66CC00;font-family:verdana;font-size:20px">Experience</h5>
<p>Am currently working my third year at Lowes. </p>

<h6 style="color:00FFFF;font-family:verdana;font-size:20px">Skills</h6>
<ul>
<li>Forklift operator</li>
<li>Time Management</li>
<li>Organized</li>
<li>Photoshop</li>
<li>Illustrator</li>

</ul>

<h6 style="color:green;font-family:verdana;font-size:20px">Hobbies</h6>

<ul>
<li>Playing sports</li
<li>horseback riding</li>
<li>Traveling</li>
<li>Driving</li>
<li>Shopping</li>
</ul>
<img src="purple_lotus_flower[1].jpg" width="200" height="150">

</body>
</html>

Wednesday, April 6, 2011

Notes

HTML is a language used to describe web pages

HTML stands for Hyper Text Markup Language, HTML is not a programming language, it is a markup language, A markup language is a set of markup tags, HTML uses markup tags to describe web pages, HTML markup tags are usually called HTML tags, HTML tags are keywords surrounded by angle brackets like <html>, HTML tags normally come in pairs like <b> and </b>, The first tag in a pair is the start tag, the second tag is the end tag, Start and end tags are also called opening tags and closing tags

HTML Documents = Web Pages

HTML documents describe web pages, HTML documents contain HTML tags and plain text, HTML documents are also called web pages, The text between <html> and </html> describes the web page, The text between <body> and </body> is the visible page content, The text between <h1> and </h1> is displayed as a heading, The text between <p> and </p> is displayed as a paragraph, HTML links are defined with the <a> tag, HTML images are defined with the <img> tag.

CSS stands for Cascading Style Sheets, Styles define how to display HTML elements, Styles were added to HTML 4.0 to solve a problem, External Style Sheets can save a lot of work, External Style Sheets are stored in CSS files

A CSS rule has two main parts: a selector, and one or more declarations: The selector is normally the HTML element you want to style. Each declaration consists of a property and a value. The property is the style attribute you want to change. Each property has a value.

CSS declarations always ends with a semicolon, and declaration groups are surrounded by curly brackets: p {color:red;text-align:center;}

CSS Comments are used to explain your code, and may help you when you edit the source code at a later date. Comments are ignored by browsers. A CSS comment begins with "/*", and ends with "*/", like this
The id selector is used to specify a style for a single, unique element, The id selector uses the id attribute of the HTML element, and is defined with a "#", The style rule below will be applied to the element with id="para1":
The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements, This allows you to set a particular style for any HTML elements with the same class, The class selector uses the HTML class attribute, and is defined with a "." In the example below, all HTML elements with class="center" will be center-aligned. The background color of a page is defined in the body selector: body {background-color:#b0c4de;} Can be specified as name –
-a color name, like "red"

-RGB - an RGB value, like "rgb(255,0,0)"

-Hex - a hex value, like "#ff0000"

The text-align property is used to set the horizontal alignment of a text, Text can be centered, or aligned to the left or right, or justified, When text-align is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers). h1 {text-align:center;} p.date {text-align:right;} p.main {text-align:justify;}
The text-decoration property is used to set or remove decorations from text, The text-decoration property is mostly used to remove underlines from links for design purposes: a {text-decoration:none;} h1 {text-decoration:overline;} h2 {text-decoration:line-through;} h3 {text-decoration:underline;} h4 {text-decoration:blink;}
Text Transformation: p.uppercase {text-transform:uppercase;} p.lowercase {text-transform:lowercase;} p.capitalize {text-transform:capitalize;}
Text indentation: p {text-indent:50px;}

Background Shorthand: body {background:#ffffff url('img_tree.png') no-repeat right top;}

Width and Height Important: When you specify the width and height properties of an element with CSS, you are just setting the width and height of the content area. To know the full size of the element, you must also add the padding, border and margin. Let's do the math: 250px (width) + 20px (left and right padding)
+ 10px (left and right border) + 20px (left and right margin) = 300px
Border: Note: The "border-width" property does not work if it is used alone. Use the "border-style" property to set the borders first. Note: The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first. p.one
{border-style:solid; border-color:red;}
p.two{ border-style:solid; border-color:#98bf21;}
The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element.
The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent.

Monday, April 4, 2011

Final Mag

This is my final layout. I had difficulty printing out my piece due to the one font. It would not show the white fill and the lab tech was also confused about it but tried to help me a lot. I ended up having to change the font of the subtext to a bolder one so it would be more legible.

Thursday, March 31, 2011

Coming together

Here are the images all compiled together. The one at the top is of the photo and the scanned image together. Next I had to "re-create" the clay pigeon in illustrator. The photo at the bottom is of the photo, scanned image, and illustrator image.

Myself

Below are 2 images of myself shooting. I had to cut myself out of the picture using the pen tool. The picture below was the one that worked the best, however in the photo it did not show any of my torso. I had to compile 2 pictures to form the one you see at the bottom. I used the pen tool on a different photo and compiled my torso to the first photo below.