Monthly Archives: May 2013

Making strides

Forty-eight hours. I have officially been working on coding my website so far for 2 days, and in the last hour and a half, it has finally started to come along.

I was struggling quite a bit to understand the navigation bar as well as how html/css actually works. I can’t say I’m an expert in either by any stretch of the imagination, but I finally have a skeleton homepage with a working top navigation bar.

Website screenshot -- look the title button changed colors when I moused over it!
Website screenshot — look the title button changed colors when I moused over it!

My website timeline:

1) Get my top navigation bar working first — the links aren’t pointing at anything yet, but I know they are active. CHECK

2) Get the top navigation bar working — it should be similar to the top navigation bar, so I imagine it will be a closely-related process. TO DO – Week 5

3) Place the rollover button links in the main body of the homepage. TO DO – Week 5

4) Rebuild my buttons for the middle of the homepage in Illustrator as vector images and replace the previous images. TO DO – Week 6

5) Create .html pages for the 18 pages linked from the homepage. TO DO – Week 6

6) Create a background image for these pages. TO DO -Week 6

7) Fill in the content for these pages. TO DO -Week 7

8) Try to break the website and remove kinks in the design. TO DO -Week 7/8

9) Turn in website (& blog)! TO DO -June 28.

This timeline is daunting as I have to complete it in the next month, plus I really need to start working on my dissertation and my radio module. And keep training for Tough Mudder. YIKES!

All right, well freaking out won’t change a thing, so hiddy ho, here I go!


Starting on the website today

Today I begin working on creating my website. I looked for a few more websites dedicated to showing off good design, and I found this one. You may want to give it a look if you are trying to think of cool designs for your own website.

As for my page, I am going to start with creating the background image I want for my website in Photoshop.

I have decided on the color scheme I want to try out first: white, yellow, orange, deep purple. Sounds interesting, I am sure, but I think it looks smashing!

Thoughts on the colors?
Thoughts on the colors?

Understanding the basics of Photoshop.

I may also create a logo, but so far I have branded myself using my name: Rosemary B Peters.Websites that may be of interest to those of you out there looking to create your own logos:

Logo designs. Examples and tips on making your own.

Anywho, here is a mock up of my homepage (with obvious errors — you’ll see what I mean)

Just the beginning
Just the beginning

And here is an example of a button before you roll over it:


And after you roll over it:


Would love to hear feedback, if you have any.

Padding and Borders in Dreamweaver

This week’s Dreamweaver exercise is brought to us by the concepts of borders and padding.

We were given a handout on the concepts, but I found that I needed a little more information on what to do in the HTML page, as most of the code we looked at had to do with CSS. Enter YouTube. I found some FABULOUS help videos on several Dreamweaver topics:

Borders & Padding (This tutorial was especially useful because it showed me how to change styles via coding in the CSS Style sheet and by using the CSS Styles window on the HTML page.)

Divisions, IDs, and Classes (Apx 25 minutes, but literally everything you could need to know as a beginner)

Width, Height, Position & Float (Apx 23 minutes, same person as last video)

As we go deeper down the Dreamweaver rabbit hole, I feel like the program is starting to coalesce in my brain. Here’s hoping the trend continues.

My goal is to create a mock-up of what I want my website to look like in the next week. Keep your eyes peeled for it!

P.S. It’s my birthday!! 24 May = best day EVERRRRR.

Exploring Website Design and a First Design Vision

Great blog to follow in WordPress

A Webdesign Journey

One aspect of a good website is having a clear and attractive design.

In order to develop some idea on what constitutes ‘clear and attractive’, I traveled the internet in search of websites that appealed, and that did not appeal to me.

Finding unappealing websites was an easy task. See this website, for example. I don’t think I need to say anything. On a more serious note, I also found this website’s design unappealing as it was busy. cluttered and unclear.

The website The Scale of the Universe is more to my liking. It is simple, calm and clear yet very informative. With regards to more traditional style websites, I’m overall not too difficult to please in that I usually like websites as long as they’re kept simple, yet show some sign of creativity. This ‘Buffalo’ website, that admittedly I found by googling ‘ good website design example simplicity’ is…

View original post 36 more words

Good websites

I am looking for inspiration for my website design. I don’t want to make just a plain, professional website. I want my website to look smashing, but not gaudy.

Here are examples of good professional websites.

I like their layouts and the use of graphics. On the other hand, I really like the navigation from this German website.

More examples of navigation.

Here are some navigation things in Photoshop. I think this is a good tutorial website because (I think) I will be building a lot of the designs in Photoshop and using Dreamweaver to make them work.

From this rundown, I really like the website toward the bottom that uses post-it notes. I have been using a TON of post-it notes since I’ve gotten here and I think they definitely represent my life as of late.

Found this PSD to html site as well. Looks like it might be helpful in converting from one platform to another. Don’t want to use it now, but nice to save it for future use if need be.

Random ideas: 

Silhouette of a person holding horn with the different pages coming out of it. 

Colors: Orange, yellow, white, black

Love this one with the guy running with the banner.

Dreaming of Dreamweaver

Hey everyone,

So I think I am starting to get the hang of Dreamweaver ever so slightly. To be honest, it’s a pretty cool program. Well done Adobe. My professor gave us a handout with some coding examples to try out on our own.

I would share it online, but honestly not worth the effort. Just trust me, it’s cool.

Here's a screen shot at least...
Here’s a screen shot at least…

It involved an html page linked to a CSS style sheet. I do appreciate how everything is kept separate between the two pages. It makes the html coding look really clean and the CSS is easy to read. It’s just a ton of definitions.

I did decide to order a Dreamweaver help book. I was so excited when the package came on Friday with the book in it — until I opened it. The seller sent me a Photoshop book instead. While I could probably use a Photoshop help book, it is not what I ordered, so I am going to have to send it back and wait on the Dreamweaver book.

Not the book I ordered :(
Not the book I ordered 😦

Sigh. Oh well. As is life.

Cheers until next time.