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.
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!
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!
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.)
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…
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.
Silhouette of a person holding horn with the different pages coming out of it.
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.
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.