Introduction to Dreamweaver Short Course Notes

Explore more information on the IT Learning Pods Web site: http://css.ait.iastate.edu/

by Joe Struss and Hsine-Jen Tsai Sept. 3, 2010 Copyright © 2010 by Creative Services / ITS Permission to reproduce all or part of this document for noncommercial purposes is granted, provided the author and Iowa State University are given credit. To copy otherwise requires specific permission. The author’s contact information is available at the IT Learning Pods web site.

Dreamweaver is a professional HTML editor for designing, coding, and developing web sites and other web applications. You can either work in a visual editing environment which lets you quickly create pages without writing a line of HTML code or you can hand-code HTML or you can even alter the HTML code created within Dreamweaver by using many codingrelated tools and features in Dreamweaver. Dreamweaver provides the capabilities of creating static websites as well as dynamic websites. A static website contains regular web pages. A regular web page is one that does not change when a user requests it- the web server sends the page to the requesting web browser without modifying it. In contrast, a dynamic web page is modified by the server before it is sent to the requesting browser. A website that contains dynamic web pages is called a dynamic web site. This class provides a series of brief sections that guide you through the process of creating a simple static website using the visual authoring tools in Adobe Dreamweaver. A very popular way of getting an initial web site up and running with Dreamweaver is using some of the Layout starter pages that come with Dreamweaver so that is where we will begin.

A first look at the Dreamweaver Workspace On Windows, startup Dreamweaver by going under Start to All Programs then pulling up to Adobe Design then over to Dreamweaver. On a Macintosh, simply double-click on the Dreamweaver icon within the Applications folder on the toolbar in the lower portion of the screen. The Welcome window provides tips on setting up your workspace for various purposes, and information on new features for those who have used previous versions of Dreamweaver. Just ignore it for now. Pull down under Window → Workspace Layout → Classic. Next pull down under File → New. Choose a Blank Page, HTML then click on Create. The Dreamweaver workspace is an integrated workspace using MDI (Multiple Document Interface) in which all document windows and panels are integrated into one larger application window, with the panel groups docked on the right. Click on the Design View button. 2

Insert bar Document bar

Document window

Tag selector

Panel groups

Site panel

Property inspector

The Insert bar contains buttons for inserting various types of “objects”, such as images, tables and layers into a document. Each object is a piece of HTML code referred to as an HTML tag that allows you to set various attributes as you insert it. For example, you can insert an image by clicking the Image icon in the Insert bar. If you prefer, you can also insert objects using the Insert pull-down menu item instead of using the Insert bar. The Document toolbar contains buttons and pop-up menus that provide different views of the Document window (such as Design view and Code view), various viewing options, and some common operations such as previewing in a browser.

3

The Document window displays the current document as you create and edit it. The Property inspector lets you view and change a variety of properties for the selected object or text. Each kind of object has different properties. Panel groups are sets of related panels docked together under one heading. To expand a panel group, click the expander arrow at the left of the group’s name; to undock a panel group, drag the gripper at the left edge of the group’s title bar. The Site or Files panel allows you to manage the files and folders that make up your site. Dreamweaver provides many other panels, inspectors, and windows not shown here; such as the History panel and the Code inspector. To open other Dreamweaver panels, inspectors, and windows; pull-down under the Window menubar.

Menus overview The Menubar in Dreamweaver has some standard items such as other applications might have such as File, Edit, View, Text, Window and Help. However there are some other unique menu items in Dreamweaver which provide some unique functions. Here is a brief overview of some of them. The Modify menu item allows you to change properties of the selected page element or item. Using this menu item, you can edit tag attributes, change tables and table elements and perform various actions for library items and templates. The Site menu provides menu items to create, open, and edit web sites as well as the ability to manage site files locally or on the remote web site. In addition to the menubar menus, Dreamweaver provides many context sensitive menus, which give you easy access to useful commands pertaining to the current selection or area. You can display a context sensitive menu with a right-click (Win) or control-click (Mac) on an item in the current window. All items in context menus can also be found in Menubar menus. Close the page that we just created. Let’s move from this overview to creating a small web site with Dreamweaver.

4

Preparing Assets for your First Web Site We are going to be creating a modest web site for a radio station (KFTL) in Bar Harbor, Maine. Before you create any web site or even a single web page, it’s normally a good idea to put together most of the site/page assets into a single folder that one is going to use in the web site creation process.

Adding assets to your site/page If you have already created assets (images, PDF’s, Flash files or other pieces of content) for a site, it’s normally good practice to place the assets into a single folder for your use. Then when you’re ready to add content to your pages, the assets will be ready to go and you won’t have to hunt around on your system for them or accidentally move assets that are used on your site. So before we perform any tasks, we need to copy some files into our local machine from the network so we can put together an asset folder for our web site. Create a folder on your desktop named Sites and create another folder inside that folder named Radio. Then create another folder inside the Radio folder named Img. Copy the site assets from the following location to your Img folder: http://css.ait.iastate.edu/Dreamweaver/Data1/ • Right-click or ctrl-click the KFTLArchive.zip at this location and select Save Target or Save Link As… from the option list and save the file to your desktop. Next extract the archive then move the contents of the archive into your Img site folder.

Creating Your First Web Site in Dreamweaver Now that we have our assets collected together, let’s create a whole Web site with Dreamweaver so that all the pages can hang together and can also be published as a single group. Publishing a site is uploading it to a Web server where it can be visited by the public.

5

There are two parts in creating a web site that can be visited by the public: 1- Setting up a Dreamweaver local site definition and 2-- Setting up a remote site. This class uses the ISU Homepage Server as the remote site but you could actually publish to any remote server to which you have access. Let’s do an initial site definition for our radio station we’ll leave setting up our remote site until a little later.

Setting up a local site via the Site Definition Wizard The most common approach to creating a website using Dreamweaver is to create and edit pages on your local disk then upload copies of those pages to a remote web server to make them publicly available. Normally, you would start creating a website by planning it: figuring out how many pages to create, what content appears on each page, and how the pages are connected to each other. But in this case, we just need a few quick pages to get our radio station site up and running. To create a site, we need to create a site definition by the use of the Site Definition dialog box. There are two views in this dialog box: Basic or Advanced. The Basic approach, also known as the Site Definition Wizard, guides you step by step through web site creation. One of the nicest parts of using Dreamweaver is that you only have to create the site definition onceafter that you just press a single button to upload or download your site files to your remote web site. 1. Choose Site → Manage Sites. Select New → Site and the site Definition dialog box appears. 2. Click the Basic tab to bring up the Site Definition Wizard. The first screen of the Site Definition Wizard appears, asking you to enter a name for your site. 3. Enter the name: “Radio” in the name box. In the URL box enter, http://NETID.public.iastate.edu/Radio/ then click Next to proceed to the next step. 4. The next screen of the wizard appears, asking if you want to work with a server technology. Select the No option to indicate that for now, this site is a static site, with no dynamic pages.

6

5. Click Next to proceed to the next step. The next screen of the wizard asks you how you want to work with your files. 6. Select the option labeled “Edit local copies on my machine, then upload to server when ready”. 7. The text box allows you to specify a folder on your local disk where Dreamweaver should store the local version of the site’s files. It’s easier to specify an accurate folder name if you browse to the folder rather than typing the path, so click the folder icon next to the text box. The Choose Local Root Folder for Site dialog box appears.

Folder icon

8. Click to open the Sites folder on your desktop. Within the Sites folder open the Radio folder then click the Select or Choose button. Click Next. 9. In the pop-up menu labeled “How do you connect to you remote server?” choose None. We will set that up a little later. Click Next. 10. The next screen of the wizard appears, showing a summary of your settings. Switch to the Advanced Tab. Click in the Local Info Category and click the folder next to the Default Images folder: line. Select the Img folder within the Radio folder then click Select or Choose. Creating a default image folder tells Dreamweaver that you want your site images separated from your web pages which can be very helpful when managing a web site. Click on OK then Done to finish. The Site panel should now show the new local root folder for your web site. Click on the Refresh button if you don’t see your site folder 7

New local root folder for your current site

Creating an Initial Starter or Layout Page A nice trick to get started quickly with Dreamweaver is to use one of the Starter or Layout sample pages that come with Dreamwaver. On the Menubar, pull down under File to New. Select to create a Blank Page, HTML and take a look at all the layout choices which you have available. The layout pages are organized into groups for columns, content and/or elasticity and were created to look exactly the same on almost any browser. Browse down the list and eventually select: 3 column fixed, header and footer. Over to your right, you will see a choice for Layout CSS: and choose to have your CSS file Added to the Head of your page. This makes your page more flexible but might make your site pages look slightly different from each other later on. Click on Create then pull down under File to Save and save the file as index.html inside your Radio folder. An initial page will be created. The normal default files for a web folder are usually named index.html or index.htm. Let’s preview the page to see how it initially looks. 8

Previewing a Web Page in a Browser The Design view only gives you a rough idea of what your page will look like in a web browser. The only way to be sure how it will look when you’ve published it is to preview your page in an actual web browser. 1. Pull down under File to Save in order to save your web page. 2. Click the Preview/Debug in browser Icon within the Document bar.

Preview/Debug in Browser

Your primary browser starts up if it isn’t already running and displays the index.html web page. It’s normally a good idea to check you web page in a variety of web browsers to see how it will look in each of them.

Three Views of a Web Page There are three different views for your web page within Dreamweaver: Code, Split and Design. You can click and change to each of these views within the Document Bar. Browse around within each of these views and you’ll see the HTML that occurs behind the web page that you are creating. If you know HTML, then you can change it directly in the Code or Split views within Dreamweaver. Most people prefer to use the Design View to create web pages so switch back to the Design View before continuing on below. You can also switch to the Design view within the Menubar by choosing View → Design.

9

Adding or Altering the Content on a Page Click into the main Document Window and change the phrase Main Content to Welcome to KFTL. Notice in the Properties area at the bottom of your screen that the Format you are changing is referred to as Heading 1. You can have up to six levels of heading and each will normally be a little smaller and less bold than the one before it. The information about what to do with a Heading 1 is contained in your CSS file and you can edit the style of Heading 1 there. Keep in mind that if you make a change that you are going to be altering all Heading 1 areas on this page. Highlight Welcome to KFTL then in the Properties area, click on the CSS toggle button. Under Targeted Rule is should say . Click on Edit Rule then OK then choose what you would like to change about this rule. Try adding a color to the Header (under Type) and also making it Align to the Center (under Block). Make the changes that you want to make then click on OK. You can always highlight the area again, click into the Properties CSS area and Edit the Rule again if you want to make further changes.

Setting a Page Title Page titles are used by internet search engines to index your web page. So the first thing you’ll probably want to do for your page is to set the page title as it’s easy to forget if you don’t do it right away. You can set the page title for your Web page in the Document toolbar. • Look in the Title text box, where it currently says “Untitled Document”. Click in that box and type in a page title for your web page like: “KFTL HD Radio” then press Enter or Return. Title text box

10

Saving a Web Page It is a good habit that you save a web page after you have done some complicated operations on it, so you won’t lose your changes and have to redo the whole thing all over again. Dreamweaver puts a * at the end of the file name in the title bar of a document to indicate that a file hasn’t been saved as of yet. This symbol will disappear after you have saved the file. 1. Choose File → Save from the Dreamweaver Menubar. 2. Check to see if the * symbol following the file name: “index.html” in the title bar disappears.

Formatting the Text on your Web page The main way to format the text on your Web page is to select the text first then go to Properties inspector on the bottom and set the format you like. Alter the text in the center column under the “Welcome to KFTL” heading to be the following: KFTL - "faster than light" beach radio is located in the heart of Bar Harbor. We are across from the clock tower and next to the "Rock Lobster" restaurant- in the old FarmHouse Bed and Breakfast building. HD Radio

(format this one as a Heading 2)

Broadcasting at 1430FM HD- KFTL brings you the best in "upbeat" radio featuring a mix of the old and the new in crisp, clear and vibrant HD radio. 1. Select all words that you would like to alter by clicking and dragging from the first word through last word. These words should then be highlighted. 2. Click on the HTML toggle of the Properties inspector on the bottom, click the B icon or the I icon to bold or italicize your selection. To change the text color or font size, you need to alter the CSS properties. Click on the CSS toggle of the Properties inspector and try altering the color of some text. Highlight the text, the CSS area will show the rule that is currently in effect. Make sure targeted rule is listed as then click on the Edit Rule button.

11

3. Choose a Selector Type of Class (can apply to any HTML element) and give it a name like onegreen; say if you were going to turn the text green. Click OK then choose a new color from the color selector box or choose a new font style or size then click OK.

The nice part about this is from the HTML side of the Properties panel you can now apply your onegreen Class to any HTML element on the page by highlighting the text and choosing onegreen from the class pulldown menu. 4. Save the document by choosing File → Save then Preview your page. Use your text altering skills to alter the Header text in the upper left to read: KFTL – Pure HD Radio and the Footer text to read: Faster than Light- Pure HD Radio. You may alter this text any way that you want but remember to save the page when you are done.

Altering Full Page Properties You can alter page properties on the entire page, by click the Page Properties button in the Properties Panel or by pulling down under Modify to Page Properties. You can alter the Appearance (CSS) of your page like the default font types and background page color, the Appearance (HTML) of your page- which directly inserts HTML code into your document which is no longer recommended; and the Anchor Links (CSS) of your page like the link color and the underline style. Try changing the Underline style of your links to Show underline only on rollover. 12

Change to the Appearance (CSS) category and alter the background color to a light blue. You might notice that if you choose a font for the page, you normally have to choose a group of fonts. This is so that if the first font family is not available then the next one in line is used. Click OK to continue.

Altering Parts of the Page You may not realize it but the page you are editing is actually divided into sections called DIV’s. Click in the left sidebar area of the page and then look down at the lower left in the Tag Selector area and you should see the name of the area that you are currently within on the page. Tags are the HTML code which are behind the contents of a web page. In this case, we are in the sidebar1 div within the container div.

13

If you look around your page, you will find that the whole page is within the Container Div. Clicking around you will find that within the main Container area you have- Header Div at the top, Sidebar1 Div on the left, Sidebar2 div on the right, Footer div at the bottom, and mainContent div in the center of your page. The easiest way to alter any of these Div’s is to use the CSS Styles panel. Open up the CSS styles panel and click on the All Button. Toggle the tag and you should see the rules for all the divisions of the page. Each division rule is preceded with .thrColFixHdr # in order to make every rule unique. Click the #sidebar1 rule to see its rule selections below.

The easiest way to alter this rule is to click on the pencil button in the lower right. Click on the pencil button and alter the background color for this area so that it is a light, pale green then click on OK. Alter the background color of the other parts of the page so that they are light blues, greens and grays. The background for the mainContent area is contained within the container div if you would like to change it though the white does look pretty nice.

14

Adding Images to a Page Images make a web page a lot more interesting to view and they are easy to add to a page using Dreamweaver. 1. Clear out the text of the bottom portion of the center column. Next click back into that same area then click the image icon button from the Common Insert bar on the top part of the Dreamweaver screen or pull down under Insert to Image. 2. From the Img folder select the image file “beachparty.jpg” then click OK. You will be prompted for some alternate text for individuals using non-visual browser. Type in KFTL Beach Party then click OK. Insert bar

Image icon

Resizing the Image: Sometimes the image might be too big to fit into the document. Inside Dreamweaver it’s fairly easy to resize an image which ison a web page 1. Click on the beachparty image. A dark border should surround it. 2. Click on one of the handles on the dark border and the mouse pointer turns into a two-headed arrow. Drag or shift-Drag to resize the image. Resizing should actually be done with an image processing program like Photoshop but some times you are in a hurry so this is a second option just in case you need to get something done fast. Click right beside the beach party image and press / which gets you a line break. This should place you below the image- now type in: Beach party music every nite 6-9pm! in bold text.

15

Clear out the text from the sidebar2 division and put in the text: Our Location: Below that add the image ctower.jpg. Below that add the following text: Across from Bar Harbor's famous clocktower and add the image station.jpg. Then below that image add the following text: Our "Friendly" Downtown location.

Altering an Image Click up in the header and add the image kftllogo.jpg there. Let’s say you are not happy with this image and want to alter this image with an image of the same size. The easiest way to do this is to simply click on the image that you want to change. Click on the kftllogo image. In the Properties area, the Source File (Src) name will then be seen. You can then use the folder icon or the pointer icon to choose a different file.

16

Click on the Folder icon then within the img folder select the file logo2.jpg then click OK or Choose. The logo2.jpg image will replace the old image in the upper left. Now the only reason this worked was because I created the logo2.jpg icon to be exactly 400 by 140 which the properties panel showed to be the size of the old image. Change the image back to the original image. Let’s alter the image another way. Open up the img folder in the files panel so you can see the contents of the img folder. Next select the kftllogo image again. Besides using the folder icon, you can use the pointer tool to simply point at the file that you would like to use. Click and drag the pointer tool next to Src to point at logo2.jpg and release.

The new image replaces the old image on the page. Many people prefer this visual method of selecting images and files. Alter the size of the logo so it and the KFTL header make one line across the top of the page.

Finishing Up and Adding some Web Links Our first page is almost complete and we can use this page as a template for the other pages on our site once we have added our web site links. Clear out the sidebar1 division and add the following words: Home, About Us and Schedule with a full return after each page link. Format all three items to use Heading 3. Next highlight the word Home and go to the Links area of the Properties panel. There you will find a space where you can type in a URL or you can use the Pointer or Folder icons to create a local page link. 17

Use the Pointer icon or the Folder icon and point or select the file index.html. We are going to link the home link back to this page.

Highlight the word About Us and type in the link area “about.html”. This file doesn’t exist yet but it will soon. Next highlight the word Schedule and type in the link area “schedule.html”. This is known as virtual linking, the files don’t exist as of yet but we know we will be creating them soon. Click next to schedule.html and press . We are going to add some music to the page. Pull down on the menubar under Insert to Media then over to swf. Choose the file stationplay.swf and give an alternate text message of Station Music. Stationplay.swf is a simple flash button that plays the stations music tag when pushed. Save your page, click on OK for Dreamweaver to copy in some js files to run your flash file and Preview the results.

Web page Duplication Now that this page is ready to go, let’s duplicate it to use as a base for our other two pages. Right-click or Ctrl-click the index.html file in the Files panel and pull down to Edit and then over to Duplicate. Do this twice. Click on the duplicate file names and rename these files to be about.html and schedule.html. Double-click the about.html and schedule.html pages to open them up and immediately change the Page title of each of these page to be “About KFTL” and “KFTL Daily Schedule”.

18

Finishing up the schedule.html page Go to the schedule.html page and delete everything in the center column except for the header. Change the header to KFTL Daily Schedule. Below the header put in the image schedule.png by pulling down on the Menubar under Insert to Image. Use ``KFTL Daily Schedule’’ as the alternate text. If you want you can target the mainContent area and edit it’s rule so that the area is centered. Below the schedule, press / and type in: Reflections and Meditation with Captain Arthur Dell- Sunday 6am to 9am Then below that put in the image: oceanview.jpg. Use “Meditation on an Ocean View” as the alternate text. The schedule.html page is now finished. Save it and then Preview the results. All your web page links should now be active and working.

Finishing up the about.html page Go to the about.html page and delete everything in the center column except for the header. Change the Header to: About KFTL. Below the header, enter the following: KFTL - "faster than light" beach radio was created in 2003 to serve the Bar Harbor community and the surrounding tri-state area. Here is a welcome message from our station's Manager and part-time fry cook Leslie Neels. KFTL is owned by Rock Lobster Restaurants and is also an associate member of the Bar Harbor Chamber of Commerce. Below the text, insert the image rlobster.jpg. Highlight the text welcome message. Besides making links to other pages, you can also link to a PDF file. Use the pointer or folder icons in the link area of the HTML part of the Properties panel and link to the manager.pdf in the Img folder.

19

Save and Preview your file. The full site is nearly complete. For each of the pages, go back and change the background color so that it matches the sky in the KFTL logo. You can do this by clicking on the background-color on the rule, clicking open the color grid but instead of selecting a color- go outside the color grid and your selector will turn into an eyedropper tool. Use the eyedropper tool to select the color from the sky of the logo. You can also check the spelling on your pages by going on the Menubar under Commands → Check Spelling.

Adding a link to an Non-local Web Page Go back to index.html. Highlight the text Bar Harbor. Go to the Link area of the Properties panel and type in the following URL: http://www.barharborinfo.com/ You need to use the full version of the URL but a link will be made from whatever you have highlighted to that external URL out on the Web. Save and Preview your page. The KFTL Radio site is now complete. 20

Setting up a remote site on the ISU Homepage Server Now that we have a complete site definition, the second step in making a web site that can be visited by the public is to set up a remote site. The ISU Homepage server is a remote site that can be used by any student, faculty or staff member at Iowa State but you could also use any standard commercial site as well. You basically need to login to your remote site, establish a Web (WWW) folder and put a folder within your Web folder (Radio) that you can publish to within Dreamweaver.

Using Acropolis to create a Web Folder The easiest way to create a Web folder on the Homepage server is to login to Acropolis. So open a Web browser and go to the following URL: http://asw.iastate.edu/ Next enter your ISU NetID and password then click on the LOGIN button. If you have never created a Web (WWW) folder for your ISU Netid: 1. Click on Manage Net-ID 2. Click on View/Edit your personal Web Page Settings. 3. Click on Register Web Page then click on the Register button. 4. Click on the Homepage link near the top which is within the ASW > User > Homepage > Register bookmarks. 5. Click on Create Default Web Page. 6. Click on the ASW link near the top which is within the ASW > User bookmarks. Once you have a Web (WWW) folder or if you already had one, you just need to create a Radio folder inside the Web folder; so do the following: 1. Click on Manage Files. You will be taken to the ISU Webfile area which you can also get to at http://webfile.iastate.edu. 2. Double-Click the WWW directory listing near the bottom to open that directory (folder). The files within your WWW (Web) directory will appear on a new screen.

21

3. Click the Create A New Folder button on the left side of your screen underneath the Folder Properties area. 4. Enter the name Radio in the box provided then click on the Create button.

5. You should now see a Radio Directory/Folder within your WWW directory listing. Since that’s all we need to do, click the Logout button to leave ISU Webfile and the Logout button again to leave Acropolis. Altering your Dreamweaver Site Definition to publish to your Homepage Server Web Folder We now just need to alter the Dreamweaver Site definition and fill-in the part regarding FTP that we initially skipped over. At Iowa State this is a little more difficult than in most other places as ISU uses Kerberos encryption. This just means that you have to have kerberos running and also be running kFTP on the Macintosh or kFTPD on a Windows system. Information on downloading kerberos and kFTP or kFTPD is available in the References area of this document. Startup kFTP or kFTPD as needed and then continue on below. Within Dreamweaver, pull down under Sites to Manage Sites; select the Radio site and click on the Edit button. Click back to the Basic Tab (if you find yourself under the Advanced Tab) then click the Next button three times and you should be at the “How do you connect to your remote server?” screen.

22

• In the pop-up menu labeled “How do you connect to you remote server?” choose FTP. • Enter the following information for the rest of boxes. o In the box labeled “What is the host name or FTP address of your web server ?” enter “isua4.iastate.edu”. o In the box labeled “What folder on your server do you want to store your files in?” enter “WWW/Radio/”. o Then enter the NetID and password of your Project Vincent account into box “What is your FTP login” and “What is your FTP password” separately.

The above information is what you normally need to connect and upload to a web site with Dreamweaver. However, at Iowa State we need to add a little more information.

23

Next click the Advanced Tab and in the Remote Info Category make sure that the Use Passive FTP and Use Firewall buttons are selected.

Additionally click on the Firewall Settings button and for Firewall Host: enter 127.0.0.1 plus for Firewall Port: enter 2021 (for a Mac) or 21 (for Windows) then click OK.

When finished, click back to the Basic Tab. • You can then click the “Test Connection” button to see if the connection has been established. If this works, we’re in great shape and ready to upload and download. Click Next then Next again. •

The next screen of the wizard appears, showing a summary of your settings. Click Done once on the Site Definition screen and once on the Manage Sites Screen to finish.

Publishing Your First Dreamweaver Web site You’ve now created a small but functional website and have setup a remote site for publication. The next step is to actually publish the site by uploading the files to a remote web server and that’s very easy to do. 24

Uploading you pages to a remote site: To upload all your Dreamweaver files to the remote server after you have successfully “Tested your Connection”- do the following:

• •

•

In the Site panel, select you site’s local root folder which should be named “Site - Radio”. Click the Put Files button (big blue up arrow) then click OK. All the files inside the Radio folder should be uploaded to the remote site. You can also select individual files and upload them as well if you’ve only made a few changes.

Switch from Local View to Remote View to see that your files have gotten uploaded. You can then use the green down button to download files from your web site to use locally. You can also select files and ctrl/click them to duplicate or delete them from your remote site.

Viewing your Web Site from a Browser Now that you have published your Web Site, open up a standard Web browser to the following URL to view your published Web site: http://NETID.public.iastate.edu/Radio/ Put in your own NETID for the word NETID above. Your web pages should appear in the browser.

25

References The CSS Dreamweaver class Example Web site is located at: http://css.ait.iastate.edu/Dreamweaver/ There are some fine tutorials on the Dreamweaver Menubar under Help within Dreamweaver itself. Some additional support documents and information are available from the Adobe Web site: http://www.adobe.com/support/dreamweaver/ Iowa State Note: To successfully run Dreamweaver on a Macintosh or Windows system at Iowa State, you need to be running kFTP (Mac) or kFTPD (Win) and have a valid kerberos ticket before entering Dreamweaver such as you might get from running Fetch on a Macintosh or Leash32 on Windows. You can get a copy of the kFTP (kftpproxy) or kFTPD applications from: http://www.it.iastate.edu/downloads/ For Windows- you will probably want the appropriate KfW package and kFTPD. kFTPD is in the Advanced section. For Macintosh- you will probably want the Kerberos Config package and kFTP. kFTP is in the Other Software section.

Recommended Books on Dreamweaver: Dreamweaver CS4: The Missing Manual by David McFarland. Dreamweaver CS4 for Windows and Macintosh: Visual Quickstart Guide by Tom Negrino and Dori Smith Teach Yourself Visually Dreamweaver CS4 by Janine Warner. Adobe Dreamweaver CS4 Revealed by Sherry Bishop.

26