Web Design & Architecture -- LIS 9723 logo


Extra Information

First, check out how to name your files.

Then some notes on HTML.

 

 

First Web Page

Activating your publish space

Before we get started, let's fill out an online form using your UWO username and possword to activate your webspace on the publish server.

 

Making a page

Today we are giong to build our first web page, starting out in plain old HTML, but then I'll show a few things with the Dreamweaver WYSIWYG (what you see is what you get) tool as well.

We'll start with a few notes on naming your files.

Step 1: Make a folder

Create a folder in your documents called 9723labs. This is where we'll put our exercises and lab tutorials as we learn how to create websites.

When you've created the 9723labs folder, I'd like to open up that folder and create another folder inside it. Call this one "images".

Copy the image below into the folder you just created.  (To do that, control-click (Mac) or right-click (PC) and scroll down to "save image as", and then browse to the 9723labs/images folder, and hit save.)

western logo

 

Step 2: Create a blank page

Go up to the menu and under "file" choose ..>"new"

You will get a screen that looks something like this [click to see screenshot]. Choose "blank page", "html", and "none" for layout.

Step 3: Save the file

To begin with, will use the "save as" to ensure we're saving this in the proper location. Make sure you are in the 9723labs folder, and call the file index.html. Remember, the index page is the default page, so later, when we have published our files, this will be the first page people see when they visit your website.

Step 4: Using the code view

Like a lot of software, there are many ways you can use Dreamweaver. Today, we'll use it in a couple of ways. We'll start by looking at the html view. You'l lfind that on the upper left corner of your document window.

Step 5: Add some code

You'll notice that Dreamweaver puts in a much of the code to begin with -- it sets up the head part of the document and the body as well. Let's put some things in both places.

Step 6: Publish the page

The first thing you will need to do is set up a site in Dreamweaver. This is a great tool. Not only does it make publishing easy, but Dreamweaver also helps you keep your file structure tidy and your links all working.

We'll go through this process at the Site Management page.

 

Back to Top
Last updated:

Course Outline | Assignments | Exercises | Schedule | Resources & Links | Lab Tutorials

About the Site | Site Map | About Mark | ©2013-2014 Mark A. Rayner