Interface Tutorial

I just completed the web interface tutorial in Photoshop and I really liked it. This was the first time I've ever had to use the slice tool. I definitely want to play around with this and create something that will fit my zombie website.

Dreamweaver: Customizing Your Navigation Bar

To edit an existing navigation bar button:

Highlight the text you want to change and type in what you want the link to say. Here, we are changing 'Link one' to 'Home.'

Next, under the Properties section, we are going to put our home page URL. Now, when someone clicks on 'Home', they will return to the home page.

For other links within your website, you can rename the links on the navigation bar, and then type the corresponding URL into the Properties section. Say we want to make a site map, first we will rename Link two to 'Site map' and then in the properties section, you want to write http://www.websitename.com/sitemap.

Adding Additional Buttons to Navigation Bar:

To make an additional button, put your cursor at the END of the text in your last button and press enter. A new button will be created, and you can now type in what you want the link to say. At first, you new button will not look like the others, but this will be fixed.

Next, we want type the corresponding URL into the Link box under Properties. Then hit Enter, and your button will look exactly like the rest of the buttons.

Dreamweaver: Making Clickable Links

First things first, there are two types of URLs: Absolute and Relative

Absolute: a web address, like missstephanie.blogspot.com

Relative: links to pages within your own website

Making Clickable Links:

To use an image as a clickable link, open the picture that you want to use into your Dreamweaver page (make sure it is saved in your website folder). In the properties panel at the bottom of Dreamweaver, enter the URL of the website into the 'Link' section (these links have to be an absolute URL, I am using my blogspot address), and set the Border to '0' so there is no border around your image when it becomes a link.

To use text as a clickable link, highlight the text that you want to use for your link. Type the URL of your website into the 'Link' section, and you're done!

Dreamweaver: Changing Backgrounds

To change your background, you first need to click in any area inside the body of your page. Next, find the Rules section under CSS Styles on the right side of your Dreamweaver screen. To change the background of the body of your page, double click 'body'. To change other parts of your page, such as the sidebar, click inside of the sidebar and then double click 'sidebar' under the Rules section.

A CSS Rule Definition for 'body' box pops up. We want to go to the Background tab to edit our background. To change the color of your background, you can simply choose a color, and then hit 'Apply' and then hit 'Okay'.

Now, the color you chose is now the color of the background of the body.

You can also use your own image or any image you find online as your background. Double click 'body' or whatever part of your page that you are changing, and the CSS Rule Definition box will come up again. This time, choose 'browse' to find the image that you want to use (all the images that you want to use for your website should be in your folder that your are using for your website). Once you have selected your image, click 'okay' and then 'apply'.

Now you have a pretty background image for the body of your page.

Dreamweaver: Fonts, Text and Colors

Adding/Changing Fonts:

When I want to change a font, I usually highlight the text I want to change, right-click and choose Fonts. There is a list of fonts here that you can choose from. If you want to add your own font, go to Fonts and then Edit Font List at the bottom of the menu. Dafont.com has a lot of really cool fonts, and I believe most of them are free to download.

To add a new font, you first have to install the font on your computer, and you can do this in the Control Panel of your computer if you have a PC, but I'm not sure how to do it on a Mac. All of the fonts on your computer are under Available Fonts, so you just have to select the font that you want, click the arrow button and your font is now under Chosen Fonts. This font is now in your Font list and you can use it as needed.

Now, when you choose a font, a New CSS Rule box appears. You want to make sure the you choose 'Class' under Selector Type. For the Selector Name, you need to rename this, so this same rule can be used throughout your whole website. For example, if you rename it 'subheadings' all of the subheadings text will be changed whenever you use this rule.

At the bottom of your screen, you can change the size, color, bold or italicize your font, and center/left/right justify your text.

Dreamweaver: Adding Pictures/Logo

Before viewing this tutorial, I have my own way of adding pictures. When I add pictures to a page in Dreamweaver, I like to use the <img src = "image url here" > code and just put in the code view of Dreamweaver. Then I view it in the design view to make sure it is in the right spot. I usually save any pictures I want to use in Photobucket. (I think it is a good idea to save important pictures to an online account, just in case something happens to the files on your computer.) Photobucket 'hosts' your pictures and gives you a code that can be copied and pasted right into Dreamweaver.

You also need to save all of the pictures you plan to use for your website in a folder in Dreamweaver. I just went into My Documents, my website folder, and created a new folder to put all of my pictures in.

Now when you go into Dreamweaver, you will see this folder under your Files.

On this screen, you can also see the image source tag in the code view, which I mentioned earlier, and you can see my picture in the design view. From here, you can change the placement of your photo (centered, aligned to the right or left, etc.) by using the Align button, which is at the bottom of the page.

Setting Up Dreamweaver

Getting started in Dreamweaver is usually the hardest part for me. Editing the HTML and making my website look how I want it to is a piece of cake. I used Liquid Web hosting to create my own domain (which can be seen at stephaniezombie.com). Initially, I had problems getting my content in Dreamweaver to show up on my website.

I learned that the information from your website has to be put into Dreamweaver correctly, or it won't work. the FTP Address, username, password and root directly are very important  to be able to see your website correctly.

You also need an 'index' page in your Dreamweaver site to it can be read by your host site. When I was setting up my Dreamweaver site, my index page accidentally got deleted, and my website wouldn't show up at all.

Once my website was up and running and I got the hang of setting up a new Dreamweaver website, the whole process seems really cool. It's nice to be able to create your own website and call it whatever you want.