Introduction to Dreamweaver

Transcription

1 Introduction to Dreamweaver Center for Teaching and Learning Mid-Year Institute March 4, 2003 Contents Section A: The Desktop 1. Creating a Folder to store your stuff in Section B: The fun part: building a simple page 2. The properties panel 3. Page properties Section C: Getting organized 4. Defining a site: setting the local site information 5. Defining a site: setting the remote site information 6. The site window 7. Uploading your files to the server Section D: Getting fancy: tables and images 8. Inserting a table 9. Table properties Section E. Working with templates (Extra Credit) 10. Creating a basic template 11. Creating web pages from the template 12. Modifying the template 13. Modifying the template: completing the navigation bar 14. Additional web design resources Prepared and Presented by Kamal Hajallie Josephine Corso Abby Schoneboom 1

2 Section A: Creating a folders to store stuff in Before we start adding images and other pages to our site we had better get organized. The key to being a good web designer is to be very careful about where you put things. This means: keeping your files together in a folder; naming files correctly and meaningfully; and organizing files into subfolders (as your website grows) Creating a folder to store your stuff in Website folder This is the folder where you will keep the files that are going to be part of your website. Any files we create will be stored in this folder. 1. On the Desktop, double click on My Documents. 2. Right-click in the window and choose New Folder 3. Name the folder and hit Enter. 4. Create subfolders by following steps 2 and 3. a. Name the subfolders Images and Documents You can now close the My Documents window to return to the desktop. 2

3 Section B: The fun part: building a simple page Dreamweaver is very much like a word processor for the web. Some parts of the interface will be familiar to you from using programs like Microsoft Word. In this section we are going to play around with color, fonts, and links. Like Word, Dreamweaver always opens with a blank or "Untitled" document. This is the page we'll work on during this section. The Properties Panel Let's get familiar with the Properties window Exercises: 1. Type some text, highlight it, and experiment with size, color, and font. 2. Type some text, highlight it, and make a link by typing a webpage address (e.g., into the link field. 3. Preview your page in Internet Explorer by hitting F12, then try out the link to see if it works. Note: Enter = Paragraph break Shift + Enter = Hard return Multiple spaces and tabs don't work! 3

4 Page Properties Also, we should know how to change the overall page properties and to give the page a title. To modify the background color of the page: 1. From the Modify menu choose Modify Page Properties. 2. Click on the Background palette and choose a color you like. 3. In the Title field type a title for the page, e.g., "My World." Note: You can also modify the overall link colors and text color for the page. 4

5 Section C: Defining a site: setting the local site information The first thing we need to do is to tell Dreamweaver where our stuff is. This is called "defining a site." 1. From the Site menu choose Site New Site. 2. A site definition window will appear. In the Site Name field type "<your name> website" or some other name you feel comfortable with. 3. In the Local Root Folder field, click on the folder icon. Go into your folder and choose Select. 5

6 Defining a site: setting the remote site information You can just stop after filling out the Local Information and click OK but, since we're here, let's also enter the remote site information so that we can upload our files to the server at any moment. 1. Click Remote Info 2. Under Access choose FTP 3. Type in FTP Host: faculty.lagcc.cuny.edu 4. Type in your Login, e.g., aschoneboom 5. Leave the password field blank unless you are working on your own computer. 6. Click on OK. 6

7 The site window Once you have defined the site, the Site window appears displaying your files. It should look something like this: Notice the following features: Split-screen, local files on the right and remote files on the left. Folder icon indicating your website folder. File icon showing the file(s) that are in the folder (double-click on a file to open it). Icon to connect to remote host. Put/Get icons. Also take a moment to check out the options under the "Site" pull-down menu. What else do you notice? Try closing the site window and opening it again by choosing Site Open Site your site name. 7

8 Uploading your files to the server At any time, you can upload your files to the faculty server. When a file is moved to the server, anyone can see it provided they know the URL. There are several techniques for uploading files. I recommend that you use the synchronize technique as follows: 1. From the Site pull-down menu choose Synchronize. 2. In the Synchronize field choose "Entire Site." 3. In the Direction field choose "Put newer files to remote." 4. Click Preview, then hit OK. Once your website files are uploaded, you can look at them from any computer, using the following URL: e.g., Uploading files to the server is also an excellent way to store your work and move it from one computer to another. 8

9 Section D: Getting fancy: tables Many webpages are constructed from complex tables that control the positioning of images and text on the page. Inserting a table 1. From the Table menu choose Insert Table. 2. Type 1 row and 2 columns. 3. Type a percentage width of 80%. 4. Type a border of Click OK. You can now type directly into the table cells or copy and paste text that you have already typed into the table. 9

10 Table properties The Properties window helps you to work on a table. When you click in a cell, it shows you all the things you can adjust, for example, background color and width of the cell. You can also select the entire table at any time (move your mouse over one corner until you see the four-pointed icon and click), and adjust its overall properties: Insert an Image 1. Click on the Insert menu 2. Click on Image 3. Locate the Image subfolder and open it. 4. Select an image 5. Click OK. 10

11 Section D: Working with templates Professional websites are characterized by consistency. As you move from one page to another, the layout, the navigation, and look and feel remain the same while the content changes. A powerful way to achieve this effect is to design your website using a template. Creating a basic template Step 1: Layout 1. Start with an untitled document. 2. Choose Insert Table and fill out the dimensions shown above. 3. Type in a header, footer, navigation, and indicate where the content will go, as shown below, using the properties window to adjust background color/font where desired. (Note: To create an link as shown, choose Insert Link) 4. Choose Modify Page Properties, and type in a title for your website, e.g., "Professor Watson: Biology Seminar." 5. Choose File Save as Template. Call your template "main." 11

12 5. Highlight the text "insert content here." Choose Modify Template New Editable Region. Name the new editable region "content." Now choose File Save, to save your work. Congratulations! You have successfully created a template. Look at the site window and you will see that Dreamweaver has stored your template in a subfolder called "Templates." When you want to modify its design, you can simply open and edit it like a regular webpage. When you save it, Dreamweaver will adjust all the files you have created from the template. 12

13 Creating webpages from the template 1. Choose File New from Template 2. Select "main" and click OK 3. Type or copy and paste text into the editable region as shown below (you'll notice you can't add text anywhere else). 4. Choose File Save as and save the file with a regular webpage name, e.g., "courses." 5. Repeat to create the other pages of your website. When you look in the site window, you'll see the page you have created listed as courses.html. 13

14 Modifying the template As you build out the site, you will need to go back and make modifications to the template. 1. In the Site window, go into the Templates folder and double-click on your template to open it (it should be called "main.dwt"). 2. The template opens like a regular webpage. 3. Make a small change, e.g., change the background color of one of the cells or alter the footer text. 4. Choose File Save. Note: When you hit save after modifying a template, DW will ask you if you want to update all the files that are made from the template. Just click Update. 14

15 Modifying the template: completing the navigation bar Once you have created the webpages for the main sections of your site, you will need to go back and create links to these pages from the navigation bar. 1. Open the template. 2. Highlight the text for one of the links in the navigation bar and use the Properties window to link to the file. 3. Select the appropriate webpage, and click OK. 4. Repeat for the other webpages that comprise the website. 15

16 Additional web design resources: Abby's Guide to Web Design Tips on how to design a website from picking the right color to pleasing your audience. CoolHomePages: The Cure for Designer's Block A wonderful collection of the hottest websites out there. Great for design ideas! Yale Style Manual Good advice on layout and writing for the web Finding images: