Introduction to Dreamweaver CS4 - Mount Holyoke College

Introduction to Dreamweaver CS4 What is Dreamweaver? Dreamweaver is a software application that helps you create web pages while it codes html (and more) for you. The purpose of thishandout is to get you started creating websites/pages with Dreamweaver CS4. This version of Dreamweaver uses Cascading Style Sheets (css) extensively. While we will look at them BRIEFLY, in this introduction, we will mostly work with tools that are ALREADY in place—predesigned layouts, the embedded css, and other simple ways of changing the appearance of text. You open it from the bottom quick launch toolbar

or in the start menu, under Adobe Web Premium CS4.

Dreamweaver Tutorial and Help Dreamweaver has excellent tutorial and help contents under “Help” at the top right of the screen or by pressing F1..

Before you begin What is Webspace? Mount Holyoke College assigns storage space of 50 megabytes (MB) for each student’s personal web pages and supporting materials (i.e. images, buttons, sound clips, video clips etc.); the college assigns an additional 300MB to each student as classweb space—a space specifically provided for websites and pages created for academic purposes. More about classweb below!

How do you access your Webspace? For PC users: 1. Right-click on ‘My Computer’. 2. Click on ‘Map Network Drive’ 3. In the ‘Folder’ box, type ‘\\www\username’ (as shown in the illustration) or \\www\web to get to department, course and organization webspace. 4. Enter your password when prompted; your webspace will open in a window. For Mac users: 1. Click on ‘Go’ then click on ‘Connect to Server’ 2. Choose server address to be ‘smb://www/yourusername’ and click ‘Connect’ 3. If you do not see a dialog box,like the one on the righ, to enter your username and password, you should see a box that has an “authenticate” button. Click it, then enter your username and password (and remove any data in the “workgroup/domain” box). Click OK, and your personal webspace should open in a window. LITS/CTS –Mount Holyoke College

1

What is Classweb? Classweb is a shortcut in your webspace, linking to an area on a separate server which has much more space than the personal webspace that seems to contain it! When you are working with academic sites—this workshop counts as academic site—store your files in the classweb folder. How do you find my site? Make sure that you have saved your website correctly. Save your home page—always called “index.html” inside the folder/directory that includes all the files for your site. If you are building a personal website, save this file directly in the personal space. Your URL is ‘www.mtholyoke.edu/~username’ and is typed in the address bar of the web browser. When you press the enter key, your home page/index page will open If you have saved your index page inside your classweb folder –or any other folder inside your personal webspace—your URL is ‘www.mtholyoke.edu/~username/classweb/nextfolder/ nextfolder’; when typed in the address bar of the web browser, and you press the enter key, your index.html page will open automatically. If you work in a webspace that is not your personal one, your URL will begin “http://www.mtholyoke.edu/” To determine the rest of the URL, with your webspace window open, navigate to the place where your website’s index.html lives. Look at the top of the window, and you will see a listing of directories in the address bar: The URL for this website is http://www.mtholyoke.edu/lits/cts/techcons/dw

Note: each slash (/) in your URL references a different directory/folder that you have created in which to place your website. Each directory/folder must be NAMED in your URL. When you have entered each directory that encases the webspace where your website begins, your index.html file opens automatically. You do not have to type “index.html” to get to your index page. The internet assumes that that is the opening page for your website.

LITS/CTS –Mount Holyoke College

2

Planning and file management Create folders for organization purpose Create folders inside your main website folder to separately store each kind of file—images, buttons, audio, video—you will use while building your website. At this time, simply create an “images” folder in your website space if one does not already exist. Filename When you name your individual webpage you need to keep the following things in mind for efficiency and convenience: 1. Make filenames short—8-11 alphanumeric characters works well. 2. Regardless of whether you use a mac or pc-compatible system, do NOT use spaces in a filename. 3. Use lower case. It is easier to remember a name, but sometimes no whether upper or lower case has been used in a name. IT MATTERS! 4. Do not use special characters: no !@#$%^&*() and others like it. Hyphens and underscores are fine. 5. make sure your file is saved in your webspace (not \\mhc or on your personal computer), and that it has the extension “html” or “htm”. Size of your File Keep the size of your file under 32 kilobytes. Larger files take longer to load causing inconvenience to the visitor trying to view your webpage. Consistency among WebPages It is better to have certain level of consistency if you have multiple pages in your website (it is likely that you will have multiple pages). Your site should have some level of consistency in terms of banner, page layout, logo etc, so that people realize that they are on the same website when they go through multiple pages of it. You should always have navigation links/instructions directly on the page. If a link sends someone off your site, courtesy demands that you tell them how to get back before they leave!

Starting Dreamweaver CS4 Site Management

So what are we talking about, “a site”. aren’t we building a website? Yes, and it is unfortunate that Dreamweaver decided to name this most important tool in this way. When we talk about “managing sites” in Dreamweaver, we’re talking about managing the box that Dreamweaver creates to wrap around the website we build” In Dreamweaver, managing sites—the boxes--gives us easy access to all the web pages, as well as the items that we will use in our pages—images, text files, templates, av files and more. If you use or create templates in Dreamweaver, you must create a dreamweaver site—the box--in order to manage them. As most of us do not have Dreamweaver installed on our personal computers, this means that you must newly create the site EACH TIME you work on your site. In this introductory course, this may seem pointless; it is far better to get into the habit of creating the box, than to not be able to find important Dreamweaver necessary files later because you forgot to create a site when opening Dreamweaver. If you are lucky enough to have dreamweaver installed on your personal system, be SURE to open your webspace in the same DRIVE LETTER each time: Dreamweaver will then automatically LITS/CTS –Mount Holyoke College

3

open the site, and you will NOT need to recreate the site. If you open your webspace with a different drive letter, Dreamweaver will still recognize that you have a site and will direct you to locate your files. SOOO. Our scenario is that we do not have Dreamweaver installed on our system.Let’s get started.After mapping to your webspace: 1. Launch Dreamweaver CS4, and choose “Dreamweaver Site”, in the center column on the splash screen. 2. A Site Definition dialogue box appears. 3. Name your site anything you like, ex.:”wp”, “dw1” “hobbytime”This will not appear in the browser and is only for your reference for managing your site. 4. In the same dialogue box, when asked foryour “HTTP” address, type in your website URL, i.e. “www.mtholyoke.edu/~username/classweb/wp”. Note: remember, each slash (/) in your URL is a new directory (new folder), and when you get to the directory where your website begins, your index.html file opens automatically. 5. Click ‘Next’ once you are done, and make sure that the check box for “No, I do not want to use a server technology” is checked in the next box. Click ‘Next’ again. 6. Select “Edit directly on server using local network”. Click on the yellow folder beside the dialogue box asking where to locate your files, in order to navigate to the folder in your webspace that contains your website. When you reach this directory, there will be a little phrase at the bottom right of the window that says “select foldername”. If the foldername is not the starting point for your website, continuing navigating until it does. Click “select” then click ‘Next’. 7. The window will now show you the summary of your work.DO NOT CLICK FINISH! If you see any problem at any part of the summary, you can always click ‘Back’ to go back and fix the problem. 8. Now click on the ‘Advanced’ tab at the top of the window, and select Local Info. 9. For the “Default images folder” browse to your website’s ‘images’ folder. , Dreamweaver will start looking for this folder in the folder you selected in #6 above. You will note that this location is also your “Local root folder.” Click ‘Ok’ and if necessary, “finish” or “done”. 10. On the right side of the Dreamweaver window, you will see a “Files/Assets” panel, with a section labeled “Local Files” The first line under this header should show a green folder with the word “Site” next to it, along with the name you gave the site. This list acts as a file manager, allowing you to copy, paste, delete, move, and open files just as you would on a computer desktop. If you do not see files or folders that you expect, lick on the plus sign (+) to the left of “site”; if nothing is in this folder, you have not created an image folder inside, nor have you placed any other files in the designated website folder.window. Not to worry…

Opening a New Page In this workshop, we will learn to modify pre-designed layours. These layouts contain almost everything we need to build a great webpage, including headers, footers, areas for the main body of the site, predesigned sidebars where we can add images and links. These will not be the most “creative” webpages ever designed, but you will learn a lot about how to make changes and how to use other, simple, dreamweaver css layouts. For this workshop, we will use ONLY fixed layours.


4

The green and white Dreamweaver splash screen should be open in front of you. 1. Click ‘More’ in the‘Create New’ column. A new dialogue box will open. 2. On the far left, make sure ‘Blank Page’ is selected. Select ‘HTML’ in the‘Page Type’column. 3. Under ‘Layout’ select ‘2 column fixed, left sidebar, header and footer’ and click ‘Create’.

Note: The ‘2 column fixed…’ will open a page which will keep the widths of the boxes fixed as you change your text font size.The ‘2 column elastic…’ will open a page in which widths will change as you change your font size.

Saving The homepage of your website should be saved as “index.html”. This means that instead of getting a file directory (where everyone can see ALL the files in your folder) your homepage automatically loads. In any folder, the file named “index.html” is the homepage. You can tell whether a page has been saved or not if the filename tab has an asterisk next to it: ‘index.html* You can always go back and make changes in your pages. Just remember to ‘SAVE’ OFTEN. Let’s save NOW! Document toolbar The Document toolbar contains buttons and pop-up menus that provide different views of the Document window (e.g. Design view, Code view). It also gives you access to references, live view of your page within Dreamweaver window, and a preview of your page in the browser of your choice. If the document toolbar is not already visible, go to View Toolbars Document in the top menu.


5

Page Title It is important to give a title to a new web page. The page title appears in the title bar at the top of the browser window. If the page is bookmarked then it will be the title of the bookmark. If you do not give a title ‘Untitled document’ will appear in the title bar. You can type the document title in the ‘Title’ box located in the Document toolbar of Dreamweaver window. To preview your page in a browser click on the Browser Preview on the Document toolbar or choose File  Preview in Browser. You must save the page to see changes. Page Properties Page properties allow you to choose and change the default appearance of text, background color, page margins, color of links, and other properties.

Select ‘Page Proparties’ from the ‘Proparties’ option at the bottom of the window. Or access it through: Modify  Page Properties or press Ctrl + J on your keyboard. It is important to establish defaults on text as different browsers may have different defaults.

Note While setting your background color, you have to be careful that there is a good contrast between your text color and background color, enhancing readability. Using neon colors are not that great an idea. Also, make sure that you are using web safe colors such that all the web browsers support that color that you are using on your page. (For information on web safe colors, visit: http://www.lynda.com/hex.asp) If you are using image as the background in the page, make sure that the image has softer colors and does not take over the text that you have over it. The image that you use as the background tiles throughout the page.


6

Insert Panel and Properties Inspector Two most useful tools are the Insert Bar and the Properties Inspector. If they are

not visible on your screen, select them from the Windows menu. The Insert panel contains buttons for adding various types of objects like images, tables, and special kinds of text, among other things,.to your page. The Properties Inspector allows you to format your headings, create links, insert bulleted and numbered lists and to indent text. However, in CS4 the properties option does not give you any additional options for formatting the appearance—color, size, underlining—of

text. To format text, we need to know a bit about CSS Styles/Rules and Inline Style.

CSS Styles CSS (Cascading Style Sheet) is Dreamweaver’s preferred method to change the appearance of a page, particularly text. CSS is designed to modify HTML tags; when you use CSS you must specify a tag to change. Dreamweaver CS4 provides already coded CSS styles, especially in the layouts provided, but there are some rules to follow to use the styles effectively. Working with CSS Styles: 1. Click in the body, header or footer of your layout. Now, on the right, select the “CSS Styles” panel, and then click on the ‘Current’tab. 2. The ‘Current’ tab displays a summary of your current selected areabut at this point, it may be a little hard to tell what that is! 3. When you look at the panel, you will either see a phrase that begins “About…” or you will see the word “Rules” If you see the first phrase, sign at the far right window. If you roll your cursor over click on the the sign, it will read: “show cascade of rules for the selected tag” The title on this line should now read “Rules”. 4. As the name implies, this section shows a set of CSS Rules for the area you selected. It’s not TOO important, right now, to know what all the rules for all the tags are. Just know that you have to have “Rules” showing to modify your style. Below CSS ‘Rules’ you will see the CSS ‘Properties’ option, which gives you an overview of what you can change in your selected area, i.e. font size, font color, background color, font style…etc. There are too many options here for us to reviewthem all, and not all options are visible. Explore them, but remember the UNDO option in the “Edit” menu! One way to explore is to click “Add Properties”link which will provide a dropdown menu with loads of options. PLAY!! 5. We are going to use another method to place a background image in the header. a. Place your cursor in the header, and look down at the tag selector bar, just above the properties inspector. To the left of
, click on to select the entire header area.


7

b. Make sure you have the “current” tab selected in the CSS Styles panel, and at the bottom of the, find and select the pencil. When you hover over it, you see the phrase, “edit rule”

c. A dialog window similar to the page properties dialog box appears. In the category column, select “background” Browse for your “background image” and select “no repeat” from the background repeat dropdown menu. Click ok and your header background image is applied.

Editing a single line or a portion of the text in the body: For this purpose we use ‘Inline Style’. at the bottom right of the inspector. You now see the 1. In the Properties inspector, select CSS properties for CSS styles. 2. Select some text, not a header, to change. 3. Dropdown the ‘Targeted rule’ menu and select ‘’.

4. You can now change the size, style and color of your selected font, without affecting any other (unselected) areas at the body of your window. Note: Remember, each time you need to edit a portion of your text, you need to follow all the steps for the ‘Inline Style’, in order for it to take effects.


8

Images in Dreamweaver Before you insert the image 1. Resize your image to the size you want it to appear in the page using Photoshop instead of enlarging or shrinking the image in Dreamweaver. 2. Compress the size of image into a reasonable size. It is recommended that you set image resolution to 72 dpi (close to standard computer display resolution) to hold down image file size. 3. Save the image either as ‘JPEG’ or ‘GIF’. You may also want to consider PNG if transparency is important. Inserting an image 1. Place the cursor where you want the image to appear on the page and then click the Image icon on the Insert panel, or go to Insert  Image at the right hand side menu. 2. In the dialog box that appears, click Browse to choose a file. It must be in your webspace preferably stored in your separate, images folder. 3. Click ‘OK’ 4. You will be asked to provide alternate text for your image. This is a feature for those who may not be able to see the image or who may have internet services that do not easily display images. These visitors will at least be able to know, in some way, what images you’ve displayed. With the embedded CSS styles, Dreamweaver CS4, makes it easy for you to place your image, either, at the right side or at the left side of your text. 1. Place your image next to your text. Make sure the image is selected. 2. In the Properties Inspector, which is now set for image properties, locate the ‘Class’ option at the right. 3. Dropdown the “class” menu and select, either, ‘fltlft’ (float to left) or ‘fltrt’ (float to right). Inserting Rollover images A rollover is an image that changes when the mouse cursor moves over it. A rollover consists of two images: the primary image (the image displayed when the page first loads) and the rollover image (the image that appears when the cursor rolls over the primary image). Both images must be exactly the same size or the images will not appear correctly. 1. Place your cursor in the layout where you want the rollover to appear. 2. On the Insert Panel, click the Rollover icon or go to Insert  Image Objects  Rollover Image. 3. The Insert Rollover Image dialog box will appear. Browse to select an image file for the original (the first to appear) and rollover image.


9

4. Make sure the Preload Rollover Image option is checked so that the rollover images loads when the page opens in a browser. This ensures a quick transition between the images. 5. To create link, in the ‘When clicked go to URL’ box, either type in a url, or browse to select a one from your website. 6. Click OK.

Creating Links, Email Links and Anchors Links Links are used to navigate between pages in your site and to introduce material from other web sites. There are two types of link. 1. Internal Link When you have multiple pages in your website, you can create links between your pages. This type of link, which links your different pages are called the internal links. 2. External Link When you link your page to external sources like other websites (pages outside your website) then such a link is called external link. Creating a Link 1. Highlight text or an image in the Document window. If you want to link your image to another page, then you have to select the image. 2. To link to a document within your site, click the folder icon to the right of the ‘Link’ box to browse and select the file. The path to the linked document appears in the URL field. 3. To link to a document outside your site, enter an absolute path including the http://. (i.e. for a link to NASA, the absolute path is http://www.nasa.gov)

Note: LITS/CTS –Mount Holyoke College

10

Before creating a link, make sure that you are at the HTML properties of your window, by making sure that the HTML option (circled in red in above picture) is selected in the Properties Inspector.

Inserting Anchors Anchors mark specific positions in a page. You can use named anchors to jump to a marked position in the current document or to link to a marked position in a different document. It is useful when your page has lot of text so, that you can use anchors to navigate within the document. 1. In the layout, place the cursor where you want the named anchor—the place on your page that you want visitors to jump TO. 2. Click on the Named Anchor icon on the Insert Panel or go to Insert  Named Anchor from the top menu. 3. Enter a short, lowercase name (without spaces) for the anchor in the dialog box that appears. (If the anchor marker doesn't appear at the cursor location, choose View  Visual Aids Invisible Elements.) To link to a named anchor: 1. Type , the n select text—or use existing text or an image—in the layout. Popular phrases are “go to top” “go to bottom”. 2. With the text or object selected, in the Property inspector, enter a pound sign (#) and the name of the anchor in the Link box. For example to link to an anchor named "two" in the current file, type #two. Inserting a Last Updated Date 1. Place cursor where you want the date inserted. 2. From the Insert bar, select the Date icon. 3. A dialogue box will appear, choose the day, date and time format you desire. Check the box for "update automatically on save" to have the date change whenever you save the web page file.

Final Notes: Photoshop and Illustrator are great for creating banners and images. We have workshops for that! Resources: Don’t forget the Dreamweaver Help and tutorials. There are also numerous websites for html. Using a search engine to find a solution to a specific problem works pretty well. Consultants hold hours in the Info Commons. Come bother us. Last updated by CTS: September 2009. LITS/CTS –Mount Holyoke College

11