ERIK PACKARD EPIC GRAPHIC DESIGN & PHOTOGRAPHY: September 2010

Wednesday, September 22, 2010

How to create a drop cap using Html and CSS

So here is a basic tutorial for creating a drop cap for paragraphs within an article using HTML and a CSS external style sheet. This will help you to create some pizazz with your text.

What is Required:

DreamWeaver CS5
5 minutes or less
Two to three paragraphs of text
Root folder on the Desktop

Step 1:
Create a folder on the desktop naming it your root folder. Proceed to open Dream Weaver CS5 and select to open an HTML document. This will start you off with a basic file with the beginning HTML tags. Next upload your root folder by going to Site>New Site>Enter the name of your project in the site name box. Then click to browse for your root folder on the desktop and select it in the local site folder box. This will assure you that everything you save goes directly into your root folder.

Step 2:
Create an external styling sheet by clicking on File>New>Css>Create. Save(command+s)>Save as sample.css>Save the location to your root folder.

Step 3:
Upload a few paragraphs of the text you wish to present in your website within the body of the HTML. Make sure to use the paragraph tag, <p></p>, at the first and last of every paragraph in order to separate them.

Step 4:
Next Double click your sample.css file from your root folder. This will bring the folder up alongside your HTML file. In your CSS file you will insert the Drop Cap into your paragraphs by typing in the style code found below. Don't forget to save (command+s).

The p { tag tells you the fonts family, font size, font color of the paragraph text. The p:first-letter tag tells you the characteristics of the drop cap or first letter of each paragraph. All of these settings can be adjusted to stylize the text you are working with.

Step 5:
You will now need to link your HTML file with your CSS file so that the drop cap will show up in the text. To do this enter the following tags into the HTML code directly after the <head> tag.
<link rel="stylesheet" href="sample.css" />. This tag tells the HTML code that it needs to implement a styling sheet and where it can find that styling sheet in order to link to it.

Step 6:
Save your document (command+S). Then click on the design to see the results.

Just like that, you have created your very own Drop Caps that will bring life and detail to the text of your website. This is just one way that you can go about implementing Drop Caps. Others ways can be more simple or more complicated. I found this one as the easiest way.

Here is what the final text should look like:

If you have any questions or comments, feel free to comment.
Good Luck!

Wednesday, September 1, 2010

Site Critique and Project Proposals

Html site:
www.travelchannel.com

Flash site:
www.jacklinks.com

Jack Links Beef Jerky Website

The thing that makes this website successful is it's easy navigation and its ability to captivate the viewer's attention on what the site has to offer. The interactivity of this site is what helps to enhance the viewer's experience. It has a different layout than most conventional websites and contains many animated and engaging characteristics.

The navigation is very simple and unique. You are able to choose which subjects you want to explore by scrolling through the options on a rolling movement system instead of the typical site that would have the subjects off to the side or at the top in a table. They use three or four different fonts to emphasize different pieces of informations such as titles and sub titles but all seems to be soncsistent page to page. The site contains generally one navigation menu on the bottom on every page giving you an idea of where you can go next. The site uses pictorial and typographical hierarchy to put emphasize on the most importan parts of the page. The site lets you know where you are at all times and gives you many options as to where you can choose to go next.

The color scheme of red, black, and white are uniform throughout the site helping to unify the site. These are the colors that are on the packaging of their products and logos. The background texture gives the site and the company's products a rough, outdoors feel which is what the company strives to project to the consumer. The marketing side of this company's products are built around their commercials involving the outdoors and a Sasquatch site the site incorporates movie clips and sound that coordinate with that idea. The typography is simple, bold and friendly helping to shed light ont he comical side of this product. All the site's text, images, and movies are kept within a black background, which helps to contrast against the red rugged background of the site.

The type of content on this site is mostly visual with some textual support. The imagery of the Sasquatch does nothing but support the delivery of the rest of the content on the site. The content completely fills the viewer's needs through the simplicity of the site and it's navigation.

The site's audience is the people that enjoy snacks especially in the outdoors. They are presenting the fact that their product is versatile, delicious and for everyone to enjoy including a Sasquatch.

Ideas for my first project have something to do with shoes and how they reflect people's personalities
or maybe something to do with food.