Web Design Basics

Summary:

In order to learn HTML, CSS, and Adobe Dreamweaver I am going to create a splash page representing my personality, and including links to my social networks.

Paper Mock Up:

The first thing I did for this project was to create a sketch, on paper, of what I thought I wanted my Splash Page to look like.

Sketch

Illustrator Mock Up:

I ended up changing my design a lot between the paper mock up and the Illustrator mock up. Design in theory and design in practice are two completely different things, and I found that the design I had sketched wasn’t exactly what I wanted to make. My design ended up looking like a bookshelf with some logos (for links) on the top shelf.

Illustrator Mock Up

Splash Page:

I added links to my splash page in Dreamweaver. Now, when I open my page with the internet, clicking on any of the logos will lead to my accounts for each of those website. The blue circles over the logos represent the existence of the link maps in Dreamweaver. When I open the document with Firefox, the blue disappears and clicking on the links takes me to each website.

Links

Below is an image of my splash page. I used Dreamweaver’s “Preview with Firefox” option to see what it would look like as a webpage.

Splash Page Preview

 

Example HMTL/CSS:

The picture below is a screenshot of a section of the code for my splash page in Dreamweaver.

Code

What I learned:

I started by creating the design I wanted for the website. Once I had a design I was happy with, then I started on the HTML. I used a template in Dreamweaver to begin my splash page, but the way the links worked on the template wasn’t going to work for my design. My links were in a different place than any of the templates, so I had to use a different method of adding links. I solved this problem by doing rollover image links (which allowed me to customize the shape and location of the active area for each link).

Here is a tutorial.



Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Next: »
Skip to toolbar