by Marelise da Silva | Dec 14, 2010 | Website Development
In our last post, we discussed the basics of creating a CSS layout in Dreamweaver. For website designers, the basics of a good website designs starts with creating your website’s layout (before any images, text or design elements are incorporated). Now that you have your three layout boxes (Header, Content and Footer), we are going to start changing the positioning so that the layout is fit for an internet browser.
Step 1:
As mentioned in our previous post, you can change the positioning of the Div’s by clicking on the Div’s and dragging them around, but using fixed values for the positioning is much more accurate.
To use fixed values for your Div positioning, click on the Div and go down to the property inspector at the bottom of the page. You will see that the positioning values of the left, top, width and height (called L, T, W and H) are in the boxes. Click on the Header Div and reset the values (the L should be 0 – this is how far you want the Div from the left side of the screen), make the Width 990 pixels, Height should be 100 and T should be 0). You may be wondering why the Width is 990 pixels – this isn’t an arbitrary number, it’s because we want this layout to fit inside a monitor resolution of 1024 x 768 (vertical scrolling isn’t a big deal in website design, but we want to avoid any horizontal scrolling).
Click on the Footer Div and make the measurements as follows: L = 0, T = 560, W = 990, H = 50. You will see that there’s a “px” after the numbers, don’t take these letters out of the box when you are changing the numbers – the layouts will work in Dreamweaver but they won’t display in an internet browser if you remove the “px”. Now, click on the Content Div and change the values to the following: L = 0, T = 105, W = 990, H = 450.
Step 2:
You have now created the Div’s for your layout, but they won’t have any visibility in a browser yet. A good tip is to add a different background colour to each of the Div’s so that you can check them out in a browser (you can do this by clicking on the Div’s and them going down to the on property inspector at the bottom of the page – choose a bright background colour for each Div). Save the page and click on the globe icon at the top of the page so that you can see it in a browser.
These are the basics of using fixed values for your Div layout. This article is based on a video by Creativebits.org, an apple based design community). If you want to see the video, click here. In our next blog, we’re going to discuss how to create a Nested layout!
by Marelise da Silva | Dec 7, 2010 | Website Development
This post is part of a series about the basics of creating a CSS layout in Dreamweaver. In the previous post we discussed how to create Div’s and change the sizes. When designing a website, one needs to create “nested Div’s” (which basically refers to a Div inside a Div) so that you have the layout you need for menu buttons, advertisement spaces and so forth. Once you’ve got the basics of CSS layouts, you can start to refine your site with nested Div’s.
Step 1
We have already created the three Div’s (in our example they are called Header, Content and Footer – if you are unfamiliar with Dreamweaver, it would be a good idea to keep Dreamweaver open in front of you while reading this post).
Once you’ve checked out the Div’s in the browser, go to the CSS Styles panel at the top right-hand side of the page (if you don’t see the CSS Styles panel, go to your window menu – you might have to expand the styles button to see your three Div’s). Now that you can see the three Div’s, select the Header Div to see its various properties, such as the background colour, positioning values etc.
*Note: This is an important aspect of CSS layouts: As soon as you draw out a Div in Dreamweaver, the program will create the rules for you. If you double click on the Header Div, a dialogue box will pop up that says “CSS Rule definition for Header” – this dialogue box has all the different categories for the rules of this Div and this is where you can control the font, set a border etc.
If you click on the Positioning button in this dialogue box, you will get the Width, Height and other fixed values of the Div’s positioning. You will notice that the Type setting in this box is “absolute” – that’s what Dreamweaver means by calling the Div’s an “AP Div” – it stands for absolute positioning Div. If you have some time, explore the different options besides “absolute” to see what other creative aspects you can bring to your Div.
Step 2
For our example, we are going to put a nested Div inside the Content (middle) Div that we have drawn. Click inside of the Content Div and then click on the Code button at the top left side of the page (this will show you the coding behind your Dreamweaver site).
Scroll towards bottom – you’ll see the three Div’s that Dreamweaver created for you:
<div i.d=”Header”></div>
<div i.d=”Content”></div>
<div i.d=”Footer”></div>
Seeing as we clicked on the Content Div, the curser should be in this line of code: <div i.d=”Content”></div>.
A Div is html (the longer coding at the top of the page) but this line of coding is CSS – the CSS follows the rule that was created in html. Now, place your curser behind the line of coding (<div i.d=”Content”></div>) and hit Enter a few times so that you have a bit of space (white space doesn’t matter, so you can give yourself enough room to work).
Step 3
Now we want to create another Div inside the Content div. Go to the Insert menu at the top of the page, click the Layout Objects on the drop down menu and then click on “Div Tag”. A dialogue box will pop up – click on New CSS Styles, which will open a second dialogue box. Make sure the Selector Type in this box is set to Advanced and change the Selector to #Menu, also check the “This document only” button in “Define in” (this means it will apply to this style sheet only) within this dialogue box. Press Okay.
Once you have pressed okay, you will see the CSS Rule definition for #Menu. Make sure the Type is Absolute and throw in the dimensions (Width = 100 px, Height = 450 px – this is the height of the main Content Div- Top = 0 and Left = 0). Change the background colour in this box to a different background colour and press OK.
When you now look at the code, you will see there’s a new Div called #Menu. Go back to the design view and see the second Div within the first Div (you will see that we have basically created a new Div on the left side of the middle Div – this is where we will put our navigation buttons). Check it inside your browser by clicking on the Globe icon.
You now have the general layout boxes for your website! You can continue to refine the Div’s and create more boxes for ads, menu buttons and so forth. This article is based on a video by Creativebits.org, an apple based design community). If you want to see the video, click here. In our next blog, we’re going to show you how to take the entire layout and centre it inside the web browser!
by Marelise da Silva | Dec 2, 2010 | Website Development
Most graphic designers will tell you that anybody can use Dreamweaver. Although this is true, you can’t always just download the program and expect to know how to start using it. If you’re an experienced graphic designer that hasn’t built a site in Dreamweaver before (or you have no website design experience and want to get the hang of it), your first point of departure is creating CSS layouts – also known as Div-based layouts. CSS layouts help you create a website with a creative layout without using inhibiting tables.
So, after you’ve opened Dreamweaver, defined the site and saved the pages, this is what to do to start creating CSS layouts:
Create CSS layouts
- Step 1: Turn the Insert bar on (if you don’t have the Insert bar turned on, go to the Window menu at the top of the page and look for insert – this is the first command in the drop-down menu). Inside the insert bar, go to the Layout tab and click on the second icon in the bottom row called “Draw AP Div”. Once you’ve clicked on this button, you will be able to draw a box in your screen. Click anywhere in the screen and draw a box – this box is called a Div (if you have used Dreamweaver before, this can be confusing because these Div’s used to be called “layers” in previous versions of Dreamweaver).
- Step 2: To change the size of placement of the Divs, click on the box and drag. These Div’s can hold any type of content such as text, video, images, another Div and tables. If you come from a print background, Div’s may remind you of image boxes when designing in InDesign or Quark. For the first exercise, draw three Div’s (boxes) in the page – you can do this by going back to the “Draw AP Div” button on the insert bar. You will need three Div’s for this exercise because we are going to be making a header, content and footer layout. When you are done, close the Insert bar at the top of the page.
- Step 3: Click on the first Div so that it becomes highlighted, then go down to the property inspector at the bottom left hand side of the page and give the Div a different name than “AP div 1” (rename it to Header for this exercise). Grab second Div and rename it to Content and then the last Div and call it Footer. You can drag these Div’s around on the page to determine positioning, but it’s much more accurate to use fixed values for your CSS layouts.
These are the basics of creating a CSS layout. This article is based on a video by Creativebits.org, an apple based design community. If you want to see the video, click here . In our next blog, we’re going to be focusing on how to change the sizes and positioning of your Div’s and how to check them out in a browser!
by Marelise da Silva | Nov 17, 2010 | Website Development
The navigation of a website is one of the most important elements. Website navigation needs to help users find the information, products or services they need on a site quickly and efficiently.
We’ve all seen some websites where creative navigation was used, but one could argue that a home page which consists of one big picture isn’t the easiest way for a website user to understand the navigation and find the content he or she was looking for.
Getting caught up in unique designs may create something different for the client, but it is important to remember that their clients (the website users) are probably on the website to quickly get the information they need, so it may not be wise sending them on a roundabout to access the various pages they want to look at. Here are some ways to test if your navigation efforts are really working:
Test it out
Get somebody who is unfamiliar with the company to use the website. Ask the office accountant to try to buy a product from the website or to find out if the company offers a specific service you need. If you see the person gazing around the home page, unsure of where to click next, it’s a sign that your website navigation might be too complex for the average user.
Although some designers dislike underlining text links in the body content, you may be surprised to find out how few website users will click on words if they are not underlined (they simply don’t realise that it’s a hyperlink!). These design techniques may seem old-fashioned, but they are consistently used, leading them to become important visual cues for website visitors.
Once you have somebody on a sub-page in the website, ask them to get back to the home page. Many website users will scroll down to the bottom of the page they are on, expecting to find the main navigation buttons (such as About Us, Contact Us and Home Page) as a text link on the bottom of the page. Make sure you’ve got these hyperlinks at the bottom and that the main navigation menu is always on the top part of the page.
by Marianna Muscat | Apr 29, 2010 | Website Development
Keeping your website simple is the most important factor for usability. Be sure to make everything about your website understandable and clear. Visitors should easily be able to access all the information that is important on your website.
Website navigation links should be clearly visible and easily understood. Your page layouts should also be simple and they must be easily scan-able. In simpler terms, your website should be organized in a logical flow. Users should be able to find all the information/answers quickly to what they are looking for.
By following these accepted website standards, your visitors can immediately find their way around your website. Website users have learned to mistrust online business. By following these conventions for your website, you are building trust, credibility and it means that you are serious about your online business.
By making your website more usable, you can increase conversion rates as you are delivering the right information at the right time. When you are selling a product on your website, give your users access to all the elements that they need to make the final decision to buy. Give your users the tools that they need to research the product without having to leave the product page. Let your visitors be in control and access the answers to the questions they may have.
What you include on your website pages will vary to what you are selling and who your visitor is. These are typical things your visitor may want to see while on the product page.
- Details and technical data about the product.
- Shipping options and charges based on their zip code.
- Refund, privacy and security policies.
- User product reviews and ratings.
Website usability goes beyond the visual items and site hierarchy. It is all about giving the right information at the right time. Never be afraid to tell your visitors what they should do next on the page. It should always be the main focus point. Let the visitor of your website feel in control. Give them all the information that they are interested in.
by Marelise da Silva | Mar 12, 2010 | Website Development
A website is the building blocks for establishing your online reputation. In today’s world, many people will browse to your website for more information regarding your company before doing any business with you. More and more people are browsing the internet at work and even at home.
If you are a local hardware shop, why do you need a website? You don’t want somebody across the country contacting you to purchase and deliver a screwdriver to them. As a internet marketing company, we often hear comments like this from small business owners.
The most important reason why you should have a website is that more people are using the Internet than the Yellow pages. People are looking for information online and searches the internet for what they want. Why not make it easy for them to learn about your business and services?
Newspapers are quickly losing their ground to the internet as the primary source for local and international shopping information. The internet is now the most widely used media in the world.
Find a couple of tips on websites for small businesses below.
- You can build credibility with your website. In today’s online driven world, all businesses should have a website. Your customers also expects it.
- With your website you can be found in local searches by using the cities that you serve and the products you provide in the text of your website. It is the text on your website that is important to the search engines.
- It will be easier for your customers to find you. With a website you are making this task easier for them. Include your telephone number and your address on your website.
- If you have products, include a description and the advantages of them on your website.
- Include the hours that you are open. Someone might be looking at your website at 3 AM and wants to know when they can come in. Don’t let them wait. Display it on your website.
- Include an about us page on your website. People want to know about you and your history.
- Include a coupon of interest on your website about a special you might be running. Let your customers print out the coupon. This way you will know when they came from the website.
