Tag Archives: Dreamweaver

Trudging through

The good news? I have gotten to a point with the website where it is a lot of the same. All of the pages are set up, and I have the skeleton for each one. Now I just need to make the photos in Photoshop that are going to go along with each piece I am posting.

Beacon portfolio preview
Beacon portfolio preview

For each piece, I have two photos. One that the visitor sees and one that is a more opaque version of the picture that appears when the visitor hovers over a link.

Button hovered over "Raining on UP's parade."
Button hovered over “Raining on UP’s parade.”

This has been the most tedious part of the development, but I am liking the results so far.

My advice for people who are looking to do something similar: Make the photos all the same size for every single button. The consistency made it very easy to just plug and chug the work.

Right now my website works just the way I want it to in Firefox and Chrome. For some reason I can’t get my computer to open Internet Explorer. I am going to work on that issue and then preview the site on IE. More to come.

xxx

Advertisements

About me, Contact me

Hey all,

Sorry for the long break. I ran the Tough Mudder this weekend, and the few days leading up to it plus the few days after it were dedicated to making sure I didn’t die in the race hahaha.

Tough Mudder finisher!
Tough Mudder finisher!

Anyways, I am back to work on my website. My homepage is complete and working really well. I had to slightly adjust my color scheme, but that’s OK because I think the website looks more professional.

New homepage
New homepage

I am now working on my About Me and Contact Me pages. I want to have both of them done by the end of the day. On my Contact Me page, I am looking to embed a widget that has my Twitter feed on it. Twitter has a widget configuration that might be helpful if you are looking to do the same.

Photoshop comes to the rescue

Rollover buttons and auto sizing are the bane of my existence. I know how to make a function rollover button in Dreamweaver, but I can’t seem to get the buttons to appear in the same spot in every web browser without putting them in some sort of table (Sorry Internet, I know that is a Mickey Mouse solution to my problem). After exclusively trying to build the rollover buttons in a table in Dreamweaver, I started to search the web for other ways to complete my task.

Behold Photoshop’s slice solution.

In the end, my homepage  works and the table stays in the middle of the width of the page depending on which web browser is used to open it. It also stays at a relatively fixed height.

xxx

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?

http://digitalscrapbookplace.com/university/tutorials/ps_creatingLayerStyles_ia/ps_creatingLayerStyles_ia.shtml

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:

BLOG

And after you roll over it:

BLOGINVERSE

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.

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.

xxx

This, that and some other stuff

Still in the first week of the course. I am having the “Are we really back in class?”

Yes, we are.

But actually, that’s OK. I think I am going to love this term. Between creating a bomb dot com website, the radio shows, podcasting, work, dissertation research, gym time and trying to maintain some semblance of a social life I won’t even notice I’m missing the sunny London days (hahaha… sun…)

And since I am back in class, it’s time to get cracking on garnering the skills to create a website.

First skill: Play around with Photoshop.

Here is the first thing I did in class the other day. To be honest, it’s not my best work. Thought I’d share anyways.

Meow

Hope you love the cats.

Random question: What is the difference between Adobe Muse and Adobe Dreamweaver?

The first minute and a half of this rockin’ video spelled it out quite simplistically:

“The two products are aimed at two different markets. If you say ‘Hey, I want to tweak the code…’ then changes are you are more of a Dreamweaver customer. If you say ‘Hey, I don’t know about code… and I just want to focus on the design of my website and not have to write any code, then you’re most likely a Muse customer.” Terry White

I want to (finally) learn to code. So Dreamweaver it is! On that note, I am not sure if I should buy the book for the class or rely on Google/YouTube/Lifehacker to answer my Dreamweaver questions. I think I am going to sit on this thought for a little longer before I decide. I will make my mind up by Sunday, otherwise it may be too late anyways.

While I may not know if I want to purchase the book, I do know what sort of content I want my website to host. My sound arrogant, but I want it to be a one-stop-shop website about me. A less self-centered way of saying that is: I want the website to function as my personal CV.

Think about it: How amazing would it be from an employer’s point of view if I not only had created all the content on the website, but I BUILT the dang thing, too?

I have the content to fill out the website between my print, web and radio work. Keep your eyes peeled for a post (probably multiple) on the content. I am going to through it up here as I grab it.

In fact, here is a link to some of my PDFs from The Beacon. Some are articles I have written, others are designs I create in InDesign/Photoshop.

Just for fun, here is my favorite song from the music I was listening to while writing this post. Give it a listen!

xxx