Creating a Website from a Web Mock-up

Define your site [site > New site]

Type your site name then create a root folder for your site.

Creating a Website from a Web Mock-up [Michael Ashinze] Page 1

Creating a Website from a Web Mock-up [Michael Ashinze] Page 2
Your image folder should be added to your root folder.

Creating a Website from a Web Mock-up [Michael Ashinze] Page 3

 Now create a new web page

Based on our design, we might require 4 rows and 2 columns

Create a new table

Creating a Website from a Web Mock-up [Michael Ashinze] Page 4

I am using 950 pixels because that is the width of my mock-up design

Now the table is created

Creating a Website from a Web Mock-up [Michael Ashinze] Page 5

I am merging the two cells on the first row because i need one complete cell for
my header image

Merging a cell [Select cells to merge, right click > table > merge cells]

Now we can create a CSS style for the web site.

[Format > CSS styles > new]

Creating a Website from a Web Mock-up [Michael Ashinze] Page 6

We are creating a class to format the first cell which is the header section.

With the class you can define different styles for the same type of HTML
element.

My class name is header * class names could be any appropriate name that you
choose*

Make sure you select new style sheet file for the definition: this will make sure it
is an external style sheet.

Then click ok

Creating a Website from a Web Mock-up [Michael Ashinze] Page 7

Save the CSS document in your site’s root folder

Creating a Website from a Web Mock-up [Michael Ashinze] Page 8

Now you can define the background image for the header class

Navigate to where the header image slice was saved. Select the file.

To be more organised, you should make an image folder in the root folder and make
sure all your images are saved in it.

Creating a Website from a Web Mock-up [Michael Ashinze] Page 9

Creating a Website from a Web Mock-up [Michael Ashinze] Page 10
Select no repeat if you don’t want your image to be tiled. i.e repeated, and then select
Top on the background (Y) so the image starts from the top.

Creating a Website from a Web Mock-up [Michael Ashinze] Page 11

Define the height in the box section so that every part of the image is displayed. This
is the height of your image.

Now that the class has been created, we need to apply it to the required cell.
Select the cell then in the class field select header

Creating a Website from a Web Mock-up [Michael Ashinze] Page 12

The class has been applied. Now we can see that the cell now has the defined
background image.

From our design, we have a navigation bar and promotion image within the header
section. So we will create a table to layout the navigation section and promotion
image section.

Creating a Website from a Web Mock-up [Michael Ashinze] Page 13

Now you can see the table created.

Now within the first cell we will create another table for the navigation bar itself. This
will have only 1 row and 4 columns.

Creating a Website from a Web Mock-up [Michael Ashinze] Page 14

Now you can see the new table created. Align the table to the right, just like the
Mock-up design and insert the navigation images to the cells.

Now your site should look like this.

Creating a Website from a Web Mock-up [Michael Ashinze] Page 15

Now insert the promotional image to the second cell in the header section.

Align the image by clicking [Format > Align > Centre]

Creating a Website from a Web Mock-up [Michael Ashinze] Page 16

 Now we need a class for the main content area. In the design we has a grey area
so we will merge the table. And create a new table for the main content area

We will do the same for the left area.

Creating a Website from a Web Mock-up [Michael Ashinze] Page 17

Now create a table in the left merged cell for the main content

Then create a class for this section.

Creating a Website from a Web Mock-up [Michael Ashinze] Page 18

Select the appropriate image

Creating a Website from a Web Mock-up [Michael Ashinze] Page 19

Creating a Website from a Web Mock-up [Michael Ashinze] Page 20
Creating a Website from a Web Mock-up [Michael Ashinze] Page 21
Creating a Website from a Web Mock-up [Michael Ashinze] Page 22
Define the width and height in the box section so that every part of the image is
displayed. This is the width and height of your image.

Now apply the class to the appropriate cell.

Creating a Website from a Web Mock-up [Michael Ashinze] Page 23

Repeat the same process for the green area.

Creating a Website from a Web Mock-up [Michael Ashinze] Page 24

Now we require a footer section for copyright information and web designer details.

Creating a Website from a Web Mock-up [Michael Ashinze] Page 25

So merge the cells in the last row.

Create a class for the footer

Creating a Website from a Web Mock-up [Michael Ashinze] Page 26

Now we call apply a background colour

Apply the class to the footer section.

Creating a Website from a Web Mock-up [Michael Ashinze] Page 27

Finally we should create a background colour for the whole site so that all the white
areas are filled with a consistent colour.

So we will create a new class

We can call the class maintable

Creating a Website from a Web Mock-up [Michael Ashinze] Page 28

Define an appropriate background colour

Then Select the whole table

Creating a Website from a Web Mock-up [Michael Ashinze] Page 29

Now apply the class to the table

Now save the page and preview it on your browser.

Creating a Website from a Web Mock-up [Michael Ashinze] Page 30

Now your full layout should be complete. And it’s ready for Contents.

Creating a Website from a Web Mock-up [Michael Ashinze] Page 31