WWW Development with Dreamweaver

C

Information Technology Services Division

A

Agenda • Introduction • How a Website Works • HTML and Web Browsers • Planning a Website • Dreamweaver Basics • Building Your Personal Webpages • Text, Graphics and Links • Special Links • Developing Webpages • Testing Your Website • Uploading Your Website o Telnet o Define a Site • Practice and Questions • Getting Help • Review • Evaluation Please complete your course evaluation form. We value your comments. ITS Help Desk Room 70, Arts 966-4817 [email protected]

Agenda • The instructor will review the agenda for this course. If you have any questions or problems during the course, please feel free to ask the instructor for help. Introduction • The instructor will introduce himself or herself. • The instructor will discuss other courses offered by the Information Technology Services Division and where you can find more information. • The instructor will discuss the handouts for this course. • If you do not have an account on either homepage.usask.ca or duke.usask.ca, you may use the special accounts created only for this class. o o o

Username: ******** Password: ******** Server: ******.usask.ca

How a Website Works • The internet is a massive collection of computers from all over the world, linked together to provide an efficient medium of communication. • A website is one way to communicate ideas to a very large audience. Websites can be made available to the entire world, or only a select few individuals you want to have access. The information can be displayed through the use of text, images, sounds, movies, or combinations of each. • A website is a collection of webpages, but often these pages are not the same as pages you might find in a book or magazine. • A website is best thought of like a brochure on a topic of your choice. Brochures are often written in a different manner than books. Where a book is meant to be read from one page to the next, in one particular direction – from start to finish, a brochure often isn’t. We call the way a book is written or read linear. A brochure is non-linear. • Websites are often constructed in a non-linear fashion. I f ti i t il d d t

WWW Development with Dreamweaver

Notes: Webpages are nonlinear.

• •

A homepage is a description of your site.

•

•

• • •

Information on one page is not necessarily dependant on information on another. Rather, ideas are separated out, and only those of interest to someone visiting may be viewed. By building a website in a non-linear fashion, you allow for visitors to more quickly find information they seek. So, how does one work in a non-linear fashion? Usually, a guide to all of the information available on your website is the first point of contact for a visitor. This webpage is often called a homepage. A homepage will often include a description of the point of your website, perhaps some pictures to make it look attractive, and a brief outline of your website’s content. Visitors will navigate through the information within your website (stored on a webpage or several webpages at a lower level than your homepage) by clicking their mouse button on links. Look at the diagram below to better understand how a website is constructed.

In this way, many webpages make up a website. Links are not only made to webpages within your website, but may direct visitors to other people’s webpages or sites. Though commonly links are displayed by a phrase or bit f t t d li d d l d i bl th Page 2 of 21

WWW Development with Dreamweaver

Links are underlined in blue.

You need a browser to read webpages.

A webpage is like a cake.

bit of text underlined and coloured in blue, they can also be attached to images, or parts of images. Moving the mouse pointer around the screen will tell you when you are over a link, as the pointer will change to a hand. HTML and Web Browsers • To view webpages, you need to use a program like Netscape Navigator, Internet Explorer or Opera. These programs are called web browsers and they do more than just let you navigate around webpages – they render them, too. • When we talk about a webpage, we have to understand that they can exist in two ways: as HTML and as rendered webpages. Confused? This example will explain this idea: o Think of a webpage as a cake. A cake also has two ways it can exist: as a recipe and as a baked cake. The recipe is a detailed explanation of how to bake the cake. This is the same with webpages. HTML is like a recipe for webpages. It explains to a web browser how to render (or display) the webpage you want visitors to see and use.

•

Webpages have a location on the internet.

All webpages have a location on the internet, known as a Universal Resource Location (URL). You have probably seen examples before: www.usask.ca/search/index.html . Each URL is different and distinguishes your webpage from everyone else’s. Page 3 of 21

WWW Development with Dreamweaver

•

Always plan ahead.

Pick a topic.

In the “search” example above, the web browser requests the index.html file from the www.usask.ca server, reads it, and then renders and displays what it reads as a webpage.

Planning a Website • The most important part of creating a website is planning every detail before you start. • The time required to build your plan will depend on how much information you want to include on your website. The more information you want to include, the more time it will take. • The first step is deciding on a topic. The second step is to decide how in-depth you want to discuss that topic. The exercise below will help you decide what you will include in a basic website. The topic we will use for this class is one you will know very well – yourself.

Topic

Description

Webpage Title

Main Topic:

HOMEPAGE WITH LINKS TO MY SUBTOPICS

MY NAME

ME Subtopic A: A1: A2: Subtopic B: B1: B2: Subtopic C: C1: C2:

•

The subtopics you choose are up to you. Feel free to

Page 4 of 21

WWW Development with Dreamweaver

Pick sub-topics.

•

•

The old days.

In Dreamweaver you can have it both ways.

Let’s look at the Dreamweaver window.

be creative. Some suggestions, if you’re stuck, may be: o Family o Work o Research interests o Hobbies o Contact information o Favorite Internet links o Friends The sub-subtopics (A1, A2, etc.) are more specialized. Don’t feel as though you need to use all of them, and add more if required. A subtopic may be Family and Friends (A); the sub-subtopics associated may be Immediate Family (A1), Extended Family (A2), Friends (A3), and Professional Colleagues (A4). Once everyone is finished, the class will continue on to the next point. If you have any questions, please ask your instructor.

Dreamweaver Basics • Introduction o In the old days – that is to say, in the early 1990s – constructing a webpage required fairly in-depth knowledge of the Hypertext Markup Language (HTML). Webpages needed to be built “by hand” in a simple text editor program. This meant that one could not see exactly how their webpages would appear to a visitor until opened within a web browser. o Dreamweaver is one of many newer web design tools that allow web designers to view both their HTML code, and how their pages will look after a web browser renders them. o In Dreamweaver you have the ability to edit either the way the rendered page will look, or the raw HTML code. o In this course, you are not expected to know HTML, but some basics will help you in better understanding the way the web works. It will also increase your power over Dreamweaver, and ultimately, over your webpages. • The Dreamweaver Environment o Open Dreamweaver and take a look at the windows that appear. o The first, and largest, window you will notice is your main work area. It is shown above. You should become familiar with all of the outlined items. Certainly, the top five items are standard features of all Microsoft Windows applications.

Page 5 of 21

WWW Development with Dreamweaver

o The lower main window.

o

The lower items may require some quick explanation. The Tag Selector displays the tags directly affecting the text or object around which the cursor is placed. The Window Size is a drop down list allowing you to control the size of window for which you will design. The Document Size outlines how large the document is, and how long it will take to download for a visitor to your webpage. The Size Box allows you to manually adjust the size of the window. It is in this main window that you will design your webpage – add text, images, colour, etc.

Page 6 of 21

WWW Development with Dreamweaver

o The Floating Palettes.

o

o

Above are two examples of Floating Palettes used in Dreamweaver. The top of these two is known as the Object Palette. It contains many buttons used to perform functions on objects within your webpage. The lower palette is known as the Property Inspector. From the Property Inspector you can control text formatting, borders for tables, define links, etc.

Page 7 of 21

WWW Development with Dreamweaver

o

On the main window you will see three buttons, outlined below.

The Show Design View will display your webpage similar (if not exactly the same) as it will appear to a visitor using a web browser. o The Show Code View will display your webpage in its raw HTML code. This is the actual file the web browser reads before it renders the webpage your visitors will see – like the recipe for the cake discussed earlier. o The Show Code and Design View splits the main window in two, showing both the raw HTML and how the page will render at the same time. o Try selecting each of these buttons. If you are familiar with HTML you will instantly see the advantage of the Show Code and Design View feature. As the course continues, you will be introduced to more features as they become necessary. This basic discussion and the concepts outlined above will give you enough basics to get started using the application. o

Design according to your own style.

•

Let’s go back to the webpage plan.

Building Your Personal Webpages • It is now a good time to return to the website plan, developed earlier in the course. We will use this plan to learn more about how Dreamweaver works, and how to create a website using it. • To build the site, we will follow some simple steps for

Page 8 of 21

WWW Development with Dreamweaver

Save your work in a root directory

Create a graphics directory inside of your root. •

•

each webpage we create: o Create a new Dreamweaver (.html) file and save it in a root directory; o Edit that file, adding basic content, colours, images and links (when adding images, we will store them in a separate graphics directory within the home directory); o If necessary, create new Dreamweaver files to account for all linked documents. In the main window you should start typing some information about yourself, including the subtopics noted on the website plan. This webpage will become the first page that visitors will see when they visit your website. Take a look at the example below:

Page 9 of 21

WWW Development with Dreamweaver

•

• Names and titles, watch out! •

•

•

•

Playing with text.

Once you have this outline of your homepage done, you will be able to edit and format the text in ways similar to those in everyday word processors. First however, you should save your work. Webpages are special types of documents when it comes to naming. Most documents you will work with will have a name you will assign when you save the file. If you are familiar with Microsoft Word, this file name will probably resemble: something.doc Webpages are somewhat different, however. Webpages have a name for the file (used when referring a link to that particular webpage), and a title to be displayed by the browser. This title is the name used when visitors bookmark your webpage. In Dreamweaver, when you save a document, you are asked to provide a name. This name should follow some rules: o By convention, all document names should be in lowercase. o No spaces should be included in the name of a document. Use an underscore ( _ ) instead. o Do not use “special characters” in the name of a file (including “, ”, ‘, ’, !, ?, /, , =, +, *, &, (, ), @, #, $, %, ^, ;, :, or comma). o Give the document a name representative of the content. o Save the file in an appropriate folder/directory. o All HTML files should include the four letter extension .html o The main document in a folder/directory should be named index.html To give a document a title you may type anything you wish into the Title field at the top of your main window. Since this is used by the web browser in the bookmark process, you should use something memorable or appropriate to the content of your webpage. Create a new directory on the Desktop. Call this directory root and save your Dreamweaver document inside. Name your document index.html

Editing Text, Adding Graphics and Creating Links • As you have found, you can manipulate text in Dreamweaver in ways similar to a word processor like Microsoft Word – but you can do much more than simply add bold or italic face. • Because webpages are multi-platform and multibrowser, there are some situations where a user has

Page 10 of 21

WWW Development with Dreamweaver

• Size is relative. •

•

• Bold, italic and colour. • •

Inserting lines.

•

•

Image types.

•

adjusted the browser settings to display content in a specific way – according to their specific need. For example, some visitors may be partially blind and will override a browser’s default settings so that all text is displayed much larger than it normally would. Webpages are very conducive to situations like this because they are inherently relative. You may change font sizes used for certain titles or elements of your page relative to the default text size set in the browser rather than to a specific size. When you just start typing in Dreamweaver, you will be using a font set at the default text size. Highlighting this text and entering a “+2” in the Font Size field will increase the size 2 sizes larger than the default size specified in a visitor’s browser. Generally speaking, if someone has not adjusted their browsers default text size, a +2 will be equal to a size of 5 (selectable from the Font Size dropdown list in the same field). Use the Format Menu on the Property Inspector to assign Headline rank properties to selected text if you will be using Cascading Style Sheets (CSS) instead of relative text size. By highlighting text and selecting a colour from the Text Colour selection box one can manipulate text colour. If you know a specific colour’s hexadecimal value between #000000 and #FFFFFF you may enter it in the Text Colour field. Bold and italic may be added as needed, though italicized text is often distracting on a webpage. Indents, bulleted and numbered lists, promotion and demotion of lists, and text alignment are all controlled from the Property Inspector. Horizontal Rules can be added to your webpage by clicking after text to precede a rule, pressing the ENTER key and clicking on the Insert Horizontal Rule button from the Object Palette. These help to separate sections or content. Though working solely with text can be neat, adding images to your webpage is a way to develop its visual appeal. Image files may be included in webpages by simply telling the browser where you want them placed, and from where they can read their source file. Images come in many different types. You may be familiar with some of these source file types, having received them in email, or by just surfing the web. Commonly used images types included: o GIF (something.gif – Graphics Interchange Format) Page 11 of 21

WWW Development with Dreamweaver

JPEG (somthing.jpg - Joint Photographic Experts Group) o And to a lesser extent Pict (something.pict Picture), TIFF (something.tiff - Tagged Image File Format) and PNG (something.png Portable Network Graphics). Since a webpage is the rendered form of an HTML file, and all an HTML file is is a text file, then the HTML must include a reference to a file saved somewhere on the internet. If you are using graphics on your website, as many people do, it is usually smart to store them in a folder/directory at the same level as your index.html file. This way it is easy to remember where your graphics are saved relative to where your HTML file is saved. To understand how to construct a reference, and a link, you must first understand the idea of a path. o As you know, when you save a file on a Windows or Macintosh computer, you usually store it in a folder. Sometimes that folder is nestled within other folders, sometimes other folders are saved in the same location. o On a Windows or Macintosh computer, it is easy to find a document, as long as we can remember where it is stored. We ask ourselves, “Now, where did I save that file that I used last year to write the memo about going to the Samurai for my birthday?” Then we look through our files and eventually find it. “Oh, yeah,” we say, “I remember now, I called it birthsammemo.doc” o A computer, however, doesn’t have the same ability to remember, or recognize, the name of a file based upon a scant memory from a year ago. You must always tell a computer exactly what you want as it will always give you exactly what you ask for. o To tell a computer where to find a file you must give the computer the file’s path. On a Windows computer it might look like this: D:\Personal Items\Birthdays\birthsammemo.doc On a Macintosh, it is usually not used, but it might look like this: Hard Drive:Personal Items:Birthdays: birthmemo o Well, the Internet follows some other rules of syntax for denoting a file’s path. The path to a file on the internet uses the syntax of the Unix operating system. o In Unix, it is easy to determine the path to o

•

Referring to images.

Working with path.

•

Page 12 of 21

WWW Development with Dreamweaver

• • More on path.

•

• •

•

Inserting an image.

•

another file, as it is relative to where the first file is saved. More about paths in a moment. So let’s save the first file, our index.html file once again to make sure we don’t lose any of our changes. We originally saved the index.html file in a directory we created and called root. Let’s jump to the Desktop, leaving Dreamweaver for a moment, and open the root directory we created. Notice our saved index.html file. Right click inside the root window and select New, then Folder from the menu that appears. Name this folder graphics. This will be our graphics directory, where we will store all of our graphical image files for use in our web site. I have made a number of graphical image files available to you on each of the computers in the lab. You may select a file from “My Documents\images” and drag it into your graphics directory. Now that a graphical image file is available for you to include, let’s return to Dreamweaver and discuss adding an image to our document. To add an image we will place the cursor where we would like the image to be located. On the Object Palette, discussed earlier, you will see a button to Insert Image (top-left). The Select Image Source window will appear. Navigate through the computer and find your graphics directory. Select the image file you wish to insert and its name will appear in the File Name field. Click the Select button to insert this image. If you look at the URL field, you will notice that it follows a path. This is the Unix path to show where the image file is located, relative to the index.html file. In our case, it should read graphics/file_name.ext o The path graphics/file_name.ext tells the browser that the image file is available in a directory called graphics at the same level as the current file, and it’s name is file_name.ext o Unix style paths are often relative to the current file being used. So, if a needed file is nestled within two folders the path may be graphics/animals/gorilla1.jpg If the file is in a folder outside of the one currently storing the file used, the path may be ../graphics/animals/gorilla1.jpg o Unix paths are important, because if you understand them, you will be better able to keep track of files, and links to other HTML documents. The graphical image you inserted is now within your

Page 13 of 21

WWW Development with Dreamweaver

webpage. You can resize it, make it into a link, or adjust its alignment on the page. Take a quick look at my page so far. I changed the font to Arial, Helvetica, Sans, then I adjusted the text so that the most important text was Headline 1. I gave the other text lower Headline attributes. I also decided to remove the introductory text at the beginning, because I want people to read only what they want to read. Too much text, and people won’t read it anyway – they may even leave my site altogether:

• •

The webpage is starting to come together, but it still lacking links. I will start by including some information about

Page 14 of 21

WWW Development with Dreamweaver

•

myself. It will be a new webpage, but it will be within my website. I will link to it from my index.html page. I will call the new About Me file aboutme.html From the File menu, select the New option. A new blank Main Window will appear. Type in all of your text for this page, including a title. Once finished, edit the text’s attributes and save your work in the root directory we created earlier and where you find the index.html file and the graphics directory.

Page 15 of 21

WWW Development with Dreamweaver

Making a link.

• • •

•

•

•