askIT

Logo

media-floppy.png Download files for this lesson

We will now create a webdesign. We will convert the webdesign to HTML and CSS files. All of our code should be within the <body> and </body>.

Header

The header should include a logo, navigation, search and login. We will start by defining <header> and </header>.

<!-- Header -->
    <header>
        
    </header>
<!-- //Header -->

Logo

First we need to create a logo. The best program to do this in is Adobe Photosop. Head over to adobe.com and download a trial version of the software to create your logo.

Open Photoshop and click File->New.
Name: logo
Width: 180
Heigt: 140

photoshop_new_file_logo.jpg
Figure: New photoshop image

Select the colors on the bottom left.

colors.jpg
Figure: Colors in Photoshop.

When you click the color you will get the Color picker. Select a grey color and a pink color. The color codes are # 9f9f9f and # bd003e.

photoshop_color_picker.jpg
Figure: Colors in Photoshop.

Add the logo text to the photoshop image. I added the text Animaltalk.

photoshop_add_text.jpg
Figure: Add text to the image.

We will add a custom shape to the logo. Click the Custom shape tool.

photoshop_custom_shape_tool.jpg
Figure: Custom shape tool.

Select the shout out shape.

photoshop_shapes.jpg
Figure: Shapes

Zoom in to enarge the image.

zoom_in_photoshop.jpg
Figure: Zoom in in Photoshop.

Add a shout out shape.

photoshop_so.jpg
Figure: Adding shout out in photoshop using the shape.

Move the layers in photoshop making the Text on top, then Shape 1, then Background.

photoshop_layers.jpg
Figure: Layers in Photoshop.

Select the Rounded Rectangle Tool.

rounded_rectangle_tool.jpg
Figure: Rounded Rectangle Tool.

Select the white color (color code # ffffff).

color_white.jpg
Figure: Selecting color white.

Add the shape over the letter "n" in the image.

adding_shape.jpg
Figure: Adding rounded rectangle over the n.

res.jpg
Figure: Result zoomed in.

logo.png
Figure: Result actual size.

You can download my photoshop file logo.psd and logo.png.

Logo HTML code

The logo will be inside the header, on the left side. To enable this we will create a <div> with the id "header_left".
Inside this we create a link to index.php with <a> tag. We will create a image to our logo.png file with the <img> tag.

<!-- Header -->
    <header>
        <div id=\"header_left\">
            <a href=\"index.php\"><img src=\"_webdesign/images/logo.png\" alt=\"logo.png\" /></a>
        </div>
    </header>
<!-- //Header -->

Logo CSS code

We wanted the logo to be at our top left. We also want to add some padding so that it doesnt get sticked in the corner. Padding is the same as air.

We will create a section for header and a sub section for #header_left.

/**
*
* File: _webdesign/master.css
* Version 01.42 22.04.2017
* Copyright (c) 2008-2017 S. Ditlefsen
* License: http://opensource.org/licenses/gpl-license.php GNU Public License
*
*/

/*- Body ---------------------------------------------------------------------------- */
body {
    font: normal 15px Tahoma, Arial, Helvetica, sans-serif;
}

/*- Header --------------------------------------------------------------------------- */
header{
	padding: 10px;
}

	/*- Header left -------------------------------------------------------------- */
	#header_left{
		float: left;
	}

Status check

You should now be able to se your website with a logo and the text.
Please check my files and compare it to your files.


go-previous.png Webdesign

start-here.png Index

go-next.png Main navigation

Add comment

avatar_blank_60.png

Comment:

Name:

Email:

Comments

No comments yet. You can be the first one to comment. Just write your comment in the form and click on the submit button.