Using a Web Page Editor, by Daniel Piechnick

Who am I, and what is a web page editor?

I'm Daniel Piechnick, a professional web designer. I'll be teaching you how to code a website the "proper way".

A web page editor is a program on your computer. It resembles a word processor (like Microsoft Word.) You use it to build your web site, and put it on the internet.

You need to sign up for web hosting and a domain name before you can do this step. Go here and sign up for web hosting and a domain name if you haven't already done so. My instructions apply to this (FatCow) hosting, and may vary, depending on which host you choose to use. FatCow is what I personally use and recommend.

Overview of a Web Page Editor

Using a web page editor takes more learning, work, and technical aptitude than using some other easy systems, but it gives you complete control over your website. You'll be able to change or redesign the site in any way you wish.

A website made in a web page editor has no system for organising pages, or allowing comments. It's not suitable for blogs.

A free web page editor program is available below. A much better editor is available for trial or purchase.

An Example of a Website Made with a Web Page Editor

This is a screenshot of the Sunrise website template. It's a simple website layout I made in a web page editor.

Creating a whole new site isn't easy, so you'll be using this pre-made website as the starting point for your new site. You can customise and edit this layout in any way you wish.

What a Web Page Editor Looks Like

This is Adobe Dreamweaver CS5, showing the windows you'll likely want to use. At the top left, you can see a list of all the files in the website. Below that is the CSS Styles window. This is where you can edit the site's layout.

The big box at the top is the site's HTML code. You don't need to deal with this code if you don't want to. You can just work on the graphical version of your site, below.

Other web page editors will look similar to this.

Setting up a website - Basic instructions

To make a basic website, and publish it to the internet, all you need to do is follow these four basic steps, in this chart. If you're not with FatCow, you may need to consult your web host's documentation, as their setup may be different to FatCow's.

DREAMWEAVER EXPRESSION WEB / FRONTPAGE TRELLIAN
Install one of these web page editors

(If you don't already have it installed.)

Adobe Dreamweaver is the best and most popular web page editor.

Get the 30-Day Trial Version (326MB) here.

Microsoft Expression Web is a modern web page editor you might have.

(Frontpage is an old but satisfactory web page editor. It's part of Microsoft Office 1997-2003. Dust off the CD and install it.)

Trellian Webpage is the only decent free web page editor, though it's very basic.

If you want to set up a website and you're using a Mac, you'll need to use Dreamweaver (or WordPress) instead. Trellian doesn't work on a Mac.

Get it here. (7MB)

Get the Sunrise template

Click here to download the Dreamweaver version of the template. Then unzip it to a folder on your computer.

Click here to download the Expression Web version of the template. Then unzip it to a folder on your computer.

(Frontpage: Click here instead.)

Click here to download the Trellian version of the template. Then unzip it to a folder on your computer.

Open the template

Load up Dreamweaver.

Click Site > New Site.

(DWeaver CS4 or earlier: Click Advanced)

Site Name: Type any name here.

Local Site Folder: Click the folder icon.

Find the folder you unzipped the template to, and go into it.

Click Select.

(DW CS4: HTTP Address: Your domain (e.g. http://www.bobsbakery.com) Remote Info. Access. FTP. FTP Host: x.fatcow.com(Replace x with your FatCow username). Login/Password: type in your FatCow username and password. Use Passive FTP. Test. If the test fails, contact FatCow. OK.)

Click Save.

Load up Expression Web. (Or Frontpage.)

(In Frontpage, click View > Folders.)

Click File > Open Site (Open Web in FP.)

Find the folder you unzipped the template to, and click Open.

Load up Trellian.

Click View > Site Explorer. This is where the pages you make will appear. If Site Explorer doesn't work, type C:\ in the box at the top.

Look around in the Site Explorer, until you find the folder you unzipped the template to.

Put your website on the internet

(or update pages you've changed.)

Go to Live Chat (on FatCow website), if something goes wrong.

In the Files window, click a file or folder. Click the arrow that points up.

In DW CS5, the first time you do this, it will ask you to define a remote server.

Click Yes.

Click "+"

FTP Address: username.fatcow.com (replace username with your FatCow username).

Username/Password: You chose these when you paid. Type them in.

Click Test. If it fails, contact FatCow.

Web URL: Type your domain name (e.g. http://www.bobsbakery.com)

Click More Options.

Tick Use Passive FTP.

Click Save, and Save again.

Click the Put arrow again.

Click File > Publish Site.

Choose FTP.

Remote Website Location: type in ftp://x.fatcow.com (replace x with your FatCow username).

Click OK.

Username, Password: You chose these when you paid. Type them in.

Click the Publish Website button.

(FP: Do this instead: File > Publish Web. ftp://x.fatcow.com (replace x with your FatCow username) OK. Type in your FatCow username and password. Publish, wait.)

Click the big red X, then Publish.

Click Connect.

FTP site name: Type in FatCow.

Hostname: username.fatcow.com (replace username with your FatCow username).

Port: Leave blank.

Username, Password: You chose these when you paid. Type them in.

Tick Use Passive Mode.

Click Connect.

Select all the files in the left hand window, then click the little green arrow, to upload them.

Congratulations! Your site is now online. It usually takes a few hours for your local internet provider to discover your new site at its proper .com address, but you can visit (and work on) your site at username.fatcow.com in the meantime (replace username with the user name you chose when signing up with FatCow).

Customise your new website

So far, you've just uploaded the template site, without altering it.

You can easily change the text on the pages of your website. Just double-click one of your site's files, to open it.

This second chart is a list of things you'll likely want to do.

DREAMWEAVER EXPRESSION WEB / FRONTPAGE TRELLIAN
Insert a picture

Drag it in. Click Yes if it asks to copy the file in.

(Or click Insert > Image.)

Just drag it in.

(Or click Insert > Picture > From File.)

Click Insert > Image.

Make a paragraph header

Select some text.

In the Properties window, click the Format drop-down list, and choose Heading 1 or Heading 2. You should only use one Heading 1 per page.

Select some text.

Click the drop-down list that says Paragraph (in Frontpage it says "Normal"), and choose Heading 1 or Heading 2. You should only use one Heading 1 per page.

Select some text.

Click Home, then click the drop-down list that says Normal, and choose Heading 1 or Heading 2. You should only use one Heading 1 per page.

Make a link

Select some text. Right-click it, and click Make Link.

Choose a page to link to, or type in a website.

Select some text. Right-click it, and click Hyperlink.

Choose a page to link to, or type in a website.

Select some text. Right-click it, and click Create Link.

Type in a website address, or click "..." and choose a page of your site.

Add an email link

In the Insert window, click Email Link.

Just type it in.

Just type it in.

Open your site

Click the little drop-down box at the top of the Files window, and choose your site.

Click File > Recent Sites.

Then click on your site.

Double-click one of your site's files, in the Site Explorer window.

Create a new page

(by copying an existing page.)

Click on a file in the Files window.

Press Ctrl+C. (Cut)

Press Ctrl V. (Paste)

In the Folder List, right-click a file.

Click Copy.

Right-click again.

Click Paste.

Open a page.

Click the big red X.

Click Save As.

Type in a new name, and press Save.

Rename a page

Don't rename index.htm

First, close the page (if it's open), by clicking the little X at the top.

Click it twice, in the Files window.

First, close the page (if it's open), by clicking the little X at the top.

Click it twice, in the Folder List.

First, close the page (if it's open), by clicking the little X at the top.

In the Site Explorer, right-click the file. Click Rename.

Edit the title or menu

Open layout.dwt, in the Templates folder. After you've edited layout.dwt, reupload it and all your htm files.

Open layout.dwt, in the Templates folder. After you've edited layout.dwt, reupload it and all your htm files.

(FP: No easy method. Just change the title or menu on every page.)

Trellian has no "template" system, so you'll have to make the same change to every page.

Change colours or layout

This is optional.

In the CSS Styles window, click All, then double-click one of the styles.

You can look in the css.css file to see or edit the CSS code if you like. The css.css file also contains some pre-made colour schemes you can use.

In the Apply Styles window, right-click one of the styles, and click Modify Style.

(FP: Format > Style. Click the List box. Choose User-defined Styles. Click a style. Modify. Format. Click anything.)

You can look in the css.css file to see or edit the CSS code if you like. The css.css file also contains some pre-made colour schemes you can use.

You can just select text, and use the toolbar icons to change it, just like Word.

However, I recommend looking in the css.css file instead. All the layout information is in there. You can make changes much more easily by changing the CSS once, than by using the toolbar icons to change every instance of something.

Next:

Learning HTML