Introduction to Design the homePage

Since you will be performing on your homepage during this chapter, it is important to understand what you are truly making an attempt to realize here.

The first page that you will be coming up with is your Website Design London “homepage”. the homepage of essentially simply another name for the most page, the page your guests make if they merely kind the name of your web site. as an example, if you kind “” into your browser, you may find yourself at my home page.

Functionally, a site’s homepage is comparable to the mix of a magazine’s front cowl and its contents page. just like the front cowl, your homepage ought to offer your guests a thought of the type of things which will be found on your web site. And just like the “Contents” page, it ought to give links to special pages (or sections) on your {website|web web site} so your guests will get to where they have to travel on your site.

In sensible terms, this implies that if you sell product and services on your web site, your home page thought to most likely mention your most vital product and services. Not solely that, it ought to additionally link to different pages on your Web Design Agency London wherever guests will realize a lot of info Associate in Nursing place an order. even though you’re simply making a private web site, or a hobby web site, you ought to still attempt to offer your guests a thought of the type of things they’ll expect to search out on your web site.

Designing Your Web Design Agency HomePage in Dreamweaver CS5.5

Layout of Your web content

Before we have a tendency to get spherical to modifying the page Dreamweaver created for you, let’s inform ourselves with its layout.

Horizontally, the net page contains three sections. Notice that the highest band presently contains a parallelogram with the words “Insert_logo (20% x 90)” flushed to the left. you may be removing this placeholder parallelogram and exchange it along with your own brand in chapter a pair of.

Now scroll to very cheap of the page. you’ll be able to do that by either touching the PgDn key on your keyboard or by dragging the scroll bar on the correct of the screen along with your mouse. (If you employ PgDn, you will realize that Dreamweaver highlights some elements of the net page. simply ignore it.) The horizontal band cutting across very cheap of your web content is usually said because the footer. you may replace the dummy text during this footer along with your own content later during this chapter.

Return to the start of the document (either by mistreatment PgUp or by dragging the scroll bar along with your mouse). (If you would like to induce obviate the highlight that Dreamweaver puts on your text after you used PgUp and PgDn, simply click somewhere on the page. as an example, click the “Insert logo” parallelogram once. The highlight can disappear.)

The bulk of the net page is split into a pair of columns. The left column contains the skeleton of a navigation menu, somewhat appreciate what you discover within the left column of the correct column presently encompasses a bunch of directions written in technical jargon. don’t fret regarding making an attempt to decipher what it suggests that. The elements relevant to you may be translated into plain English during this Dreamweaver CS5.5 tutorial series. In fact, you may be exchange everything during this column along with your own content during this chapter.

2 Page Title

Directly higher than your Web Designers London content, within the portion of the window that belongs to the Dreamweaver program instead of the page itself, there’s a field known as “Title” that has the default entry of “Untitled Document”. examine the image below if you cannot realize it.

Dreamweaver CS5.5 Tutorial How to Design a Website with Dreamweaver CS 5.5 add page title
Dreamweaver CS5.5 Tutorial How to Design a Website with Dreamweaver CS 5.5 add page title

Location of title field in Dreamweaver CS5.5 window
Click your mouse indicator somewhere within the words “Untitled Document”, then use the type or Delete keys on your keyboard to erase the present text. In its place, sort the name of your web site. as an example, if your web site is named “XYZ Company”, enter “XYZ Company” (without the quotes) into that field.
The “Title” may be a vital field on your online page. though the words you enter there don’t seem within the body of your online page (the visible portion that you simply surveyed within the 1st step), they’re treated specially by each net browsers and search engines. as an example, net browsers place the text you enter here into the title bar of {the net|the online|the net} browser itself (or maybe on the browser tab for web browsers that haven’t any title bar). Take a glance at the title bar of your applications programme currently, to check what I mean. don’t scroll upwards or click anyplace. simply look upwards to the highest of your browser window. The title of this document, “Dreamweaver CS5.5 Tutorial: the way to style an internet site with Dreamweaver caesium|metallic element|metal} five.5 (”, or a minimum of the primary a part of it, ought to seem somewhere within the high frame of the browser window (ie, the title bar), or within the browser tab, or both. This same title can seem in programme listings for the page.
In view of this, you must continuously build it some extent to alter the “Title” field of your online page to one thing aside from “Untitled Document”. For the house page, set it to the name of your web site. If you wish, you’ll conjointly add a number of words when the name describing the aim of your web site. as an example, at the time I wrote this,’s home page has its name and also the words “Online shopping” (followed by a really transient outline of things they sell) for its title tag. attempt to not build the title too long, though. whereas there is not any whimsical limit to its length, if your title is just too long, net browsers and search engines can truncate it to suit it within the house they allot for it.

3 Adding Your Content to the proper Column

You will currently modify the text within the right column of your online page. this is often the portion that starts off with the big daring heading “Instructions”. basically, you’ll be exchange everything during this column along with your real content.
Adding or modifying text in Dreamweaver works just about an equivalent as adding or modifying text in an exceedingly program like Microsoft Word or the other applications programme program. That is, click your mouse to place a text indicator within the right column. as an example, click somewhere within the word “Instructions” within the right column. you’ll then use the arrow keys (on your keyboard) to maneuver your text indicator around, and also the type and Delete keys (again, on your keyboard) to get rid of text that you simply don’t need. To insert text, simply sort no matter you would like, and it’ll seem on your page at the spot wherever your text indicator is. (Yes, it’s that straightforward.)
For starters, I counsel that you simply replace the words “Instructions” with the name of your web site. i do know that you have already place the name of your company within the Title field. However, because the title field isn’t truly displayed on your online page, it is a sensible plan to truly place your web site name somewhere on the page likewise. (This isn’t a tough and quick rule, since it is also attainable to simply place your web site name in your emblem alone. you will be inserting your emblem into the area higher than the words “Instructions” in chapter two.)

After that, move your indicator to the paragraphs and sub-headings below and replace the present content along with your own. If you are not certain what to jot down, review the section Introduction to the house Page higher than. people who area unit at a whole loss on what to mention will take a glance at the text for the house page for a fictitious company below. you’ll clearly not be able to use it verbatim, since your company is unlikely to be merchandising an equivalent things, however it may be used as a form of model to urge you started on the items you’ll need to place on your home page.

Example Co.
Example Co. is that the world’s leading business managing all manner of examples. we’ve got samples of illustrious literature, not-so-famous pulp fiction, pop music, moving picture and tv DVDs, workplace equipment, and so on. Our choice of examples is therefore in depth that we have a tendency to even have samples of examples.

Featured product
Dreamweaver Site: this is often AN example of a Dreamweaver web site, created victimisation WebDirectors tutorial on Dreamweaver. The tutorial shows you the way to form a basic however fully-functional web site that you’ll modify and augment to fit your wants.

Mechanical Typewriter: come to the wonderful days of recent, wherever documents need to be written on paper, and where, if you would like multiple copies, you would like carbon (not included). It even works throughout a blackout, since it does not need electricity. It uses a natural supply of power: your fingers.
If you are experiencing block, as i am certain a number of you’re, simply dump one thing on the page, even though it sounds completely mundane. you’ll continuously return and polish it later. It’s usually easier to change a rough copy of what you would like to mention than to stare at a blank page hoping that inspiration can strike you with the perfect set of words.
For now, don’t be concerned regarding dynamic fonts, putt text in daring or italics, inserting photos, or the other factor that you simply might feel is critical to spruce up the looks of the page. simply target obtaining your words down. up the visual look are drained the chapters to return.

4 The way to build a Sub-Heading in Dreamweaver 5.5

If you’ve got deleted all the placeholder subheadings, and need to insert a replacement one for your own content, as an example, just like the “Featured Products” heading in my example text higher than, do the subsequent.

1 Hit the ENTER key to maneuver your text indicator to a replacement line. (Yes, the heading should stand on its own line.)

2 Sort the text for your heading thereon new, blank line.

3 Drag your mouse over the words you written to pick out it.
Dragging your mouse over the heading suggests that to click your button once the pointer is positioned before the primary character, then, while not emotional the button, move the mouse pointer to the tip of the text you would like to pick out. Notice that every one the text mediate is highlighted after you do therefore. unleash the button once you are done. don’t click anyplace else before future step.Web Developer London

4 With the text that you simply need because the header elite,click “Format | Paragraph Format | Heading 2”. By means of reminder, this suggests to click the “Format” menu, followed by “Paragraph Format” within the drop menu that seems, and eventually “Heading 2” within the computer menu that’s displayed.
“Heading 1” is supposed to be used because the heading for your entire online page, like your main page title (the word “Instructions” that you simply replaced earlier). “Heading 2” ought to be used because the heading for the foremost sections on your online page. If your major sections have subsections, use “Heading 3” for every of these subsections. And so on.

5 regarding the Left Column

Do NOT modification something within the left column. Ignore the actual fact that your left and right columns have uneven heights. The left column are prohibited in chapter six, since it needs you to own extra data before you’ll work on that.Web Designer London

6 Customising The Footer

When you have finished functioning on the proper column, scroll all the way down to very cheap of the page to the footer section. If you’ll bear in mind from the primary step, this is often the nethermost horizontal band that spans each the left and right columns.
At now, just like the remainder of the page, the footer contains some technical directions. Replace the text with no matter you would like. several webmasters place a copyright notice during this section. A copyright notice is just a sentence that says one thing like “Copyright © 2012 Saint Christopher Heng”. you’ll insert the copyright image “©” by clicking “Insert | hypertext markup language | Special Characters | Copyright” from the menu.

7 Saving Your Work with the right computer file name

Once you’re happy with the changes you have created (so far), save the page by clicking “File | Save As…” from the menu. A panel with a title “Save As” can seem.
Type “index.html” (without the quotation marks) into the “File name” field and click on the “Save” button.Web Design company London


Don’t use any name aside from “index.html” as your computer file name. check that you sort it specifically as i discussed, fully in tiny letters (lowercase) with no areas within the word. don’t use the other name. The name “Index.html” is wrong, as is that the name “INDEX.HTML”. Use solely “index.html”.


The name “index.html” may be a special name that’s recognised by most net servers. If it’s printed to the proper location, it’ll be sent to your guests if they merely sort your name (eg, “”) in their browser. this is often the behaviour you would like, since you are planning your home page.