Creating a Website with Dreamweaver 4

Transcription

1 Creating a Website with Dreamweaver 4 What is Dreamweaver (DW)? DW is a visual web page editor that allows you to create and manage Websites and pages without having to learn HTML (Hyper Text Markup Language). It uses a WYSISYG (what you see is what you get) environment that allows you to see what your web pages look like as you create them. What will you learn in this lesson? In this lesson, you will learn the following: The DW environment Creating and organizing a website folder Creating and saving a web page Adding and formatting text Adding a hyperlink I. The DW Environment Workspace: when you open DW, you will notice it contains many of the same features as any other Window s page: Toolbar Objects Panel Document Window Floating Panel Property Inspector Launcher Bar

2 Toolbar: at the top of the document window; similar to any Window s document Document Window: where you create and edit the web page; it is blank now but ready for you to begin adding text which automatically adds the HTML code needed for the browser to read this page Launcher Bar: at the bottom right side of the Document Window; it contains buttons for opening and closing the most frequently used inspectors and floating panels What are inspectors and floating panels? DW uses floating panels that let you view and change information on a page as you work on it. They are floating panels because you can click on them and move them around the workspace. These panels include: the Objects panel and the Property Inspector. Objects Panel: on the left of the Document Window; contains tools (icons) for creating and inserting objects in your document; it also has buttons that change the view of the page between standard and layout 2

3 Property Inspector: located beneath the Launcher Bar in the Document Window; displays properties for the object or text that you place on the web page and lets you modify the properties. For example, changing the font, formatting the text and many other qualities or page attributes can be modified. The Floating panel depicted in the graphic on page 1 is a Reference panel. This panel provides the user with information on the O Reilly References; a quick resource on HTML, JavaScript and CSS based content. We will not cover details on that panel in this lesson. II. Creating and organizing a website folder Before you begin creating a web page, it is a good idea to create a folder for your website files. DW requires you to define a local site - a folder on your hard drive that contains all the files necessary for your websites operation. This would include HTML files, graphics, and objects. All of these files are kept in one folder that you will eventually transfer to a remote site, the server for your website. If you create a logical name and organization for your folder and files, it will be easier to create and edit your website. 3

4 Let s create a folder on your hard drive and give it a name. The folder can be anywhere on your hard drive. For example, you may put this folder in your My Documents folder. In terms of a folder title, you could call your folder my_site1 or myclass. It is important to notice that you use only lower case letters with no spaces or special characters in the name of the folder. DW calls the folder for all your website files the root folder. As a simple example of how you might wish to organize your site or root folder, consider the following: In this example, all files are organized within the root folder by topic or content. By convention, the home page is labeled index. Assets often refer to non-html items; you might create a subfolder under assets for your graphics and call it images. Another possible folder might be projects for activities you are working on or have completed. If you consider the type of theme or content you want to include on your website during the development process, this will facilitate 4

5 file creation and organization. Later, when you are editing your site, it will be easier to locate files if they are organized in a logical manner that makes sense to you. III. Creating and Saving a Web Page DW functions very similarly to a word processor in that many of the same functions and tools apply in both environments. For example, you open, create or save documents in the same way in both applications. When you open the DW program, you have a blank document that you can begin using simply by typing in it. To save the web page you are working on, simply use the File, Save As command from the toolbar. You will need to give your page a name and save it to the root folder you created for your website. For example, you might want to call it, index. In the picture above, the file index appears in the Save As window for the folder my_site1 because it was already saved by typing index.htm into the File Name field and clicking on Save. 5

6 IV. Adding and Formatting Text Headings For the purposes of this activity, let s begin our web page with a heading. To create a heading, go to the Property Inspector, click on the format pull down menu, and select Heading 1. Now, type a heading for this page such as Ms. Jones Class. If you want this heading to appear in the center of the page, go to the Property Inspector and click the Align Center button just like you would when using a word processor. 6

7 The title, Ms. Jones Class will now appear in the center of the document. Changing the Font Style To change the font style of the title or any subsequent text, highlight the title or text, go to the Property Inspector and select the drop down menu of the Font List (it says Default Font now) and select an alternate font. Notice that you may add to the list of fonts available by selecting Edit Font List. Changing Text Color To change the color of the font, return again to the Property Inspector and use the pull down menu to open the Text Color Box. This box is between the Font Size box and the B icon. Click on a color for the text - 7

8 Now, click in a blank area of the document window. The color will be applied to the title of the text you selected. Typing Text in the Document To type text in the document, go to the Property Inspector, click on the format drop down menu and select Paragraph. You may then place your cursor and start typing in the document. If you wanted to use an alternate font, simply select this prior to typing by clicking on font style in the Font List of the Property Inspector. You may also change the font style at any time by selecting the text and clicking on the Font List to select an alternate font. 8

9 V. Adding a hyperlink After you have typed a paragraph of text, you might wish to add a menu of items that will link the viewer to other pages in your website. For example, lets imagine that you have created a page for a class, Ms. Jones Class, and now you want to add a menu with hyperlinks to other pages. Click the bold button and type the word: Menu below your text. Press the enter key and select the Unordered (Bulleted) List button in the Property Inspector. Now, you are ready to type a list of topics that will eventually be your links to other pages as you develop this website. Type in a list of menu items beginning with Current Events. 9

10 In order to create a hyperlink, you will need to first create a second page to link with this first page you have created. We will call this second page the Current Events page. Select File, New from the toolbar. This will create a new untitled document. You should save this second page by selecting Save As from the toolbar and giving the page a title such as events. (Note: the events file was already created) After you have added whatever you wish to the new page, you are now ready to create a hyperlink. As you may know, a hyperlink is how pages are connected on the Internet and within a website. Now that you have 2 pages, you can create links on both of them between one another. Starting with your first (home) page, highlight the text that you want to use for the link. For example, highlight the Current Events menu item. 10

11 Select the Browse for File icon from the Property Inspector; it is to the right of the Link field and looks like a folder. This will open the Select File window. In the Select File window, the file you wish to link with (events.htm) should appear if you have saved it in the my_site1 folder. Select the events file by clicking on it and then click the select button. You have just created a Hyperlink! Note: the Hyperlink will not work, unless, you are in the Preview/Debug in Browser mode. This opens your default browser - Internet Explorer or Netscape Navigator. You can preview your web page and how it functions in this mode as if your page is actually on the Internet. 11

12 To open this function, select Preview/Debug in Browser icon from the toolbar; it looks like a globe. Here is what your home page looks like on the browser; notice how the Hyperlink for the Current Events topic appears in the browser. When you place the mouse over the Current Events item, the hand symbol will appear; if you click on the item, you will be taken to your second page the Current Events page. 12

13 You also want to make easy for people who view this second page to return to the first (home) page so we will now create a link from the Current Events page and call it Home Page. Follow these simple instructions that are covered in detail on pages of this document: Type the word Home on your second page and highlight it Select Browse for File icon Click on the index file and Select 13

14 You have now created a Hyperlink between your events page and your home page! Summary In this lesson, you learned about the DW environment and how to create, edit, and organize your website. You also learned how to create a Hyperlink. Now that you have completed this lesson, you are on your way to creating a website. Congratulations! Copyright 2001 Bonnie Drumwright, Ph.D. All rights reserved. 14