Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
18th October 2011

Web Workshop: Multi-layered backgrounds

Use PNG format to help create multi-layered backgrounds

INSPIRATION: www.amazeelabs.com

Web Workshop: Multi-layered backgrounds

The PNG format has revolutionised how web designers can implement images in a webpage. Typically, web designers were using JPEG or GIF with no transparency. This meant they needed to create an image combined with the appropriate background. Creating an image with a transparency is simple using Photoshop. Create a new file with the Background Contents set to Transparent. Create the image, crop etc and then save as a PNG-24 file. Make sure the Transparency checkbox is ticked. An image can be saved using the PNG-8 format but the quality’s not as good. Using the PNG format makes creating multi-layered backgrounds much simpler and offers more flexibility. The first step is to add a base background via the body tag, this can be a colour or image. The following adds a colour:

body {background-color: #FC0;}

The next part adds an image

body { background-image: url(images/image01.png);}

A background image, using the PNG transparency, can now be placed in any layout element across the site to the desired finish. The beauty of using the PNG format is that the base background can be changed without compromising the layout and look of a page.

TECHNIQUE | Styling header tags

01. Simple styling
To style a header, create the following in the style sheet: h1 {}. Now add the desired font, size, colour etc to style. The newly defined style will now apply to any text that is placed with a set of h1 tags.

02. Special headers
Styling the h1, h2 etc tags restrict the flexibility and use of the tag. If a certain element, ie a div tag called #news, needs a different header style a pseudo class is created. This will include the element name, the relevant header tag and code.

#header h1 {
font: bold 60px Cambria;
color: #FFDE00;
padding: 10px;
}

TECHNIQUE | Add Google Maps to a website

01. Find location
Web Workshop: Multi-layered backgrounds
This step is simple and straightforward. Head to Google Maps (http://maps.google.com/) and enter the location to be included in the site. This can be a generic location like a county, ie Dorset, or a more precise location, ie a street name, or even the address of a specific location.

02. Choose type
Web Workshop: Multi-layered backgrounds
Google Maps comes in a variety of guises. There is the standard issue map, a satellite view or a hybrid view. Select the option that is to be used. Alternatively, to get a Street View of the chosen location drag the peg to the desired location and adjust accordingly until correct.

03. Get the link
Web Workshop: Multi-layered backgrounds
Click the Link link in the top-right of the map to view the related window. This includes the necessary HTML code to add to a page. Before copying the code click Customize and preview the embedded map link. Use one of the predefined sizes or click Custom and add width and height.

04. Copy and paste code
Web Workshop: Multi-layered backgrounds
Once the map window has been resized, copy (Ctrl/Cmd+C) the HTML code in the copy and paste box. Now head to the web where the map is to exist and paste in the code. This will present a grey box where the map resides. Save the page and preview in the chosen browser.

05. My Maps
Web Workshop: Multi-layered backgrounds
To create a more custom map, users will need a Google account, click My Maps>Create new map. Now add a title and description for the map. By default the map is Public, click Private to share with selected users. Alternatively, if a map has already been created select from the list.

06. Add places
Web Workshop: Multi-layered backgrounds
The hand icon is the selection tool, use this to drag the map to the desired location. Use the pin icon to locate a placemark and click in the desired location. Now add a title and description and press OK. When finished click Link and copy and paste the code and add to the webpage.

<COMMENT>

Web Workshop: Multi-layered backgroundsAmazee Labs site creator Mike Kus gives a quick insight into the design process.
“I wanted to convey the message that Amazee Labs were vibrant, friendly experts in their field. This led me to the lightbulb concept on the homepage which is packed with words which explain what Amazee Labs is all about. This idea is backed up with a simple but striking colour palette and an illustrative theme that runs through the entire site.”

TECH TIP | CSS hover effect

To create a rollover/hover effect using CSS a pseudo class needs to be created. The ‘a’ tag is the HTML tag that represents the hyperlink. The pseudo class a:link {#FFCC00;} would be the default link, this can be styled by adding a specific colour and style. To create the rollover/hover effect add the a:hover {color:#FF0000;} pseudo class. To make a hover effect more interesting a background colour can be applied to the text. To do this a background colour is added to the a:hover pseudo class, ie a:hover {color: #FFF;background-color: #CF0;}.

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.