Keep It Centered - Tutorial

How do you keep something centered in the browser window regardless of the size of the window? It is actually a quick and easy function using a div style. First off, I'm going to insert an image that I want to have on my webpage.

You can

see the highlighted section showing where I inserted the image.

Once the image is inserted it is automatically left-aligned when it is pulled up in the web browser.

The easy fix to this is adding two div style functions to the image. The functions are the width and the margin. The coding looks like this div style="width: XXpx; margin: 0 auto;". This part is placed right before your image, and the image is followed by /div. The last thing you need for this is to enter the width size for your image. An easy way to find this is to just right click on the image file and choose "Get Info."

Now when you you open it up in the browser the image stays centered no matter the size of the window.

HTML website idea

So at first I was trying to rack my brain on what to do for my web page. Something that could fill out 15 pages, but not be overly large making it impossible to cover it all. Of course the best thing for projects is do what you love, and that's what I'm planning on doing. I'm going to do an overview of football formations for offense and defense. I'm figuring I can set up a home page for it, a page for offense overview and one for defense overview, and then a page for each formation, not only showing what each formation looks like, but how and when to use it and what style of play and situations it is most suited for. (A lot of commas in that sentence.)

Flash HTML websites

One of the first things I've been asked to do is check out some different websites, and then discuss one that I feel is a really strong one. For a flash website there are some pretty cool ones, but waterlife is a pretty sweet one. You can check that one out here. http://waterlife.nfb.ca/ As for a strong HTML site I decided to go with a site that I visit multiple times a day, the espn website. http://espn.go.com/

First and foremost I love this site for all the sport content it has one it. Not just what the content is, but how many different mediums for getting the content out. Blogs, videos, podcasts, radio, streaming tv, interactive voting, and many other sources help sport fans get any and all of the info they need. Other great content would be the fantasy sport leagues that are free to use and very enjoyable.

Starting with just the home page my eye always travels first to the featured article that has a large image as the link to the story. Below it are other featured articles that can be cycled through to quickly see if any grabs my interest. Always off the the right side of the page is the breaking news, neatly placed in a simple box which makes it easy to scan through. Above both of these are the days scores for all sports, (Just click the sport you want scores for) and my favorite, the main guide bar. Since I have a membership with espn it always remembers the sports I want to view and the teams I care about most, and keeps the rest of the sports I don't generally check on off of the bar. (Note that it used to be a cluttered bar with all sports listed on it. This is a recent improvement.) When I mouse over the sports it shows a mini page of that sport's home page by showing the featured article, breaking news, and my teams info.

Hierarchy is well shown on the espn website. Each page showcases a feature article, and it always dominates the space. The placement of other things also show the hierarchy. The breaking news is center right on any of the pages, so it is always visible right away. When I scroll down blogs, podcasts, and other smaller sources of info can be found, but since I have to scroll down they are scrolled-down themselves in the hierarchy standings.

Each sport's page mimics to some degree that of the home page. For example the NFL site still has the featured article and breaking news in the forefront with blogs and podcasts down lower on the page. The simple distinct difference is the background for the page, which changes color as well as imagery. Each sport comes with its own background, and the thing I like most about this is that they all feel linked to each other due to the layout, but have just enough distinction to make them still feel different.

Navigation is easy since the guide bar is on every page, so any sport's home page can be accessed from any other sport's page. Quick access between different sports is important to me, because I follow so many different sports and teams.

ESPN's website is made for sport fans to get quick access to info and news, as well as finding plenty of entertainment through games, radio, videos and other sources. It suits the audience, and what I like most is that there are always new improvements to it to make it better.

I'm going to try to be good about this.

So this is going to be a blog that I am doing for my graphic interface class. I am going to try to turn this into my entire art blog, so I will try to throw some old stuff on here as well to let you all get a feel of my work as a whole.