Dreamweaver At ISU. Short Course Notes. Explore more information on the IT Learning Pods Web site:

Transcription

1 Dreamweaver At ISU Short Course Notes Explore more information on the IT Learning Pods Web site: Created by Joe Struss From original documents by Hsine-Jen Tsai, Jane Venes & Joe Struss Nov. 18, 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.

2 Dreamweaver is a professional HTML editor for designing, coding, and developing websites, web pages, and 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 Dreamweaver in conjunction with the templates provided by Iowa State. ISU Templates Iowa State provides you with a set of templates to help you create an official ISU Web page. Let s go to the template web site and look at some example web pages. Go to: and click on the ISU templates link on the far right. Take a look at the full-size view of many of the pages there. Decide which style of design you may want to use for your area. Return to the page and click on the style guides and templates link. This gives you more information about what is expected of an official ISU web page. 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. Let s first look at some Dreamweaver basics and then add an ISU template into the design mix to work along side those basic concepts. 2

3 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. Insert bar Document bar Document window Panel groups Tag selector Property inspector Site panel 3

4 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. 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. 4

5 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. Creating Your ISU Web Site in Dreamweaver There are several steps involved in creating a Dreamweaver website. The following sections describe these necessary procedures. The first thing you normally want to do is to declare a local site folder within Dreamweaver. Setting up a local site through Site Definition Wizard The most common approach to creating a web site using Dreamweaver is to create and edit pages on your local disk, and 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. In the following section, the site we are creating is a very simple one, so it doesn t take much planning: it will consist of only two web pages, with links between them. Right-Click or Ctrl-Click on your desktop and create a folder named Sites then create a folder within that folder named ISUCampus. It s normally best to keep all the items for your site in one folder separate from your other files / folders. To create a Dreamweaver site, we need to create a Dreamweaver site definition by the use of Site Definition dialog box. There are two views in this dialog box: Basic or Advanced. The Basic approach uses the Site Definition Wizard to guide you step by step through site setup process: 1. Choose Site Manage Sites. Select New Site and the site Definition dialog box appears. 5

6 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: ISUCampus in the name box. In the URL box enter, 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. 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 ISUCampus 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. 6

7 10. 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. 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 New local root folder for your current site The Site pane normally shows all the files and folders in your site, but right now your site doesn t contain any files or folders. When there are files in a site, the file list in the Site panel acts as a file manager, allowing you to copy, paste, delete, move, and open files. Adding assets to your site After creating a local site, if you have already created assets (images or other pieces of content) for the site, place the assets in a folder inside the local site s root folder. Then when you re ready to add content to your pages, the assets will be easily available for use. At this point, we need to copy some files into our local machine from the network, so that we can work locally on them. Using Right-Click or Ctrl- Click create a new folder named Img and place it within your ISUCampus folder. Next copy the site assets from the following location to your Img folder that is within your ISUCampus folder: 7

8 Right-click or ctrl-click the KFTLArchive.zip at this location and select Save Target 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. Return to Dreamweaver and press the Refresh button within the Files panel (looks like a circular arrow pointing at itself) to see your new files. Adding ISU Assets to your Webpage Return to and click on the ISU Templates link. Choose a template that you would like to use and click on Download Template and then right-click (Windows) or ctrl-click (Macintosh) either With Site Index or Without Site Index and save the file to your ISUCampus folder. Change the name of the downloaded file to index.html. Go back a page then click on Download style sheet and images. Rightclick (Windows) or ctrl-click (Macintosh) the Extras folder link and save that folder to your desktop. Next upzip the folder then take the contents of that folder and put it into your ISUCampus folder. Go back a page and click on the Customize template link. This gives you some important information and guidelines for altering the ISU template pages. Return to Dreamweaver and all your downloaded files should appear in your Web site folder. If they don t, press the Refresh button. Setting a page title If you want to set the page title, you can do that in the Document toolbar. 1. Double click on the file name: index.html in the Site window. This HTML file should appear in the document window. 2. If the Document toolbar isn t already visible, choose View Toolbars Document. Within the page itself, in place of College of Lorem Ipsum type in Welcome to the ISU Campus. 3. In the Title text box, where it says The college: ISU, type the title: ISU Campus Home Page for the page and press the Enter or Return key. 8

9 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. 1. Select some of the words in one of the paragraphs on your page by clicking and dragging from 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 <New CSS Rule> then click on the Edit Rule button. 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. 9

10 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 by clicking on the Preview button next to the page title. The style sheet that comes with your ISU template file restricts some of the properties that you can change on your page. You generally do not want to change this style file but you normally want to make your own local copy of the style file; just in case, you ever do want to make any changes. Changing to a Local ISU Style file Your ISU template file comes with a style file but the style file points at a file that is on the ISU web site. You need to alter that to have it point at your own local copy of the ISU style file. Within Dreamweaver, click on the Code View button. There are three ways you can view your document in Dreamweaver: the Code view, the Split view and the Design view. All views show the current Dreamweaver page either with or without the background tags and technical information. Go to around line 12 of your index.html page and alter the <link rel= stylesheet line so that the end of the line reads simply: href= isup.css. This changes makes it so you are now pointing at your local style file. Return to the Design View and save your page. You may need to click the site Refresh button that is above your site files for this change to take effect. Add some basic information to your page by altering the Contact Us information and the line below Becoming the Best on the bottom of your web page. Include your up-to-date unit name, address, phone number and e- mail contact information. You may want to state an address as name (at) iastate.edu or insert it as a graphic to avoid junk in the future. Save your document. It normally works out best in Dreamweaver to create a base webpage for your Website and then simply duplicate that page when you need additional pages. For this example template page, try and have it contain as much standard information as possible so you don t have to radically change it after you duplicate the page. 10

11 Altering the Meta Information There are just a few more changes you need to make to the template page to truly call it your own. Switch back to Code view and look around line 32 or 33 for two lines that start with <meta name= description and <meta name= keywords. These lines are used by search engines to help index your web page. Alter the content= --- information in each of these lines to give correct information for the current web page. Make sure to keep the double-quotes around your content= --- area. When you are finished, switch back to Design view and save your page. Adding text You can type text into the document window, or copy and paste it from another source (such as a Microsoft Word text file). Before entering text, make sure you re in Design view by choosing View Design or by clicking the Design view button. 1. Click on the end of one of the paragraphs on your web page and enter the following text: Welcome to Iowa State University- your adventure begins now. Here are some IRIS images from a recent spring display on central campus. 11

12 2. Set the text font style and color as you like. You can check the spelling on your web page by going under Commands Check Spelling. 3. Look in the Img folder and open up the dirmessage.txt document then pull down under Edit Select All and then Edit Copy. Next switch back to your index.html page then click on a good spot for the Director s message on the page then Edit Paste. If you ve worked with Dreamweaver before, change one of the images on your page into the pizza.gif image by clicking on the image and replacing its SRC in the Properties panel. Previewing the Site in a Browser The Design view gives a rough idea of what your page will look like in a browser, but the only way to be sure how it will look when you ve published it is to preview it in a browser. 1. If index.html isn t the current document, switch to it. 2. Pull down under File to Save in order to save your web page. 3. Click the Preview/Debug in Browser in 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. Creating a second page Now that the base page is complete we are going to create a second web page and put some additional content into it. We already have a base template page for our site created so let s simply duplicate the index.html file to create a second page. 12

13 1. Right-click (Windows) or ctrl-click (Macintosh) the index.html file in your site folder. Pull down under Edit Duplicate. You should now have an additional file name Copy of index.html. 2. Click the Copy of index.html file and change it s name to second.html. Double-click and open up your second web page. 3. Enter the ISU Campus Iris Display for the title of this new page. 4. Also put the text ISU Campus Iris Display somewhere on this Web page and Save the page. 5. Duplicate the index.html file one more time and name it base.html. This make it so that you have a separate base page to duplicate later on which is different from you index.html page. Now return to the second.html page. Setting background colors Dreamweaver uses the color white as the default background color for a document though your isu style file may set a background color for you other than white. You can change the background color to meet your needs. 1. Select Modify Page Properties from the menu bar. 2. In the Page Property dialog box, click in the Background box to bring up the color picker. Click in one of the color cell to select a color and click OK to close the window. The background color of the page should change to the color you selected. Save the web page. In the CSS panel, you can also change the background color of any DIV section of your web page as well using the background color square or the edit style pencil. Most DIV areas will have a # in front of there names. Adding/Changing an image Save your document if you haven t already done so. You can easily either add a new image or change an existing image on your Web page using Dreamweaver. Go to a spot on the page where you would like to add an image then: 13

14 1. Click the image icon from the Common Insert bar on the top part of the Dreamweaver screen or pull down under Insert to Image. 2. The Select Image Source dialog box will open. Select the image file iris.jpg. Insert bar Image icon 3. Click Ok to insert the image. In the document window, the image appears inside the document. To change an image on a page, select the image then in the Properties area, next to Src: click the folder icon then re-select the image source file. For this to work correctly on a template page, the two images must be about the same size or your will need to resize the incoming image to fit the image that is already on the page. Try this out by switching one of the images on your page with the pizza.gif image. Resizing the image Sometimes an image might be too big to fit into the current page. In Dreamweaver it is very easy to resize the image in the document window. 1. Click on the 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. 14

15 If the screen formatting starts to look odd, pull down under View Fit All or Fit Width to reformat the screen. Adding a text link between Web pages You normally want to link your pages together to make a complete web site. To create links between your pages within Dreamweaver, do the following: 1. Switch to the index.html if it s not the current page. Select the words: Iris images. 2. In the Properties panel, click the Link folder icon and browse/select the second.html file in the ISUSite desktop folder & click on OK. 3. Click on the tab of the second.html page to move its document window to front. Add the text ISU Campus Home to the page then highlight that text within the second.html page and create a link to index.html by using the same method described in the previous step. You can also use the pointer tool to link to a new page. Link text folder icon 15

16 Try doing the same thing with the official Student, This College and Services links that are probably on the upper left section of your web page depending on the template. If you preset this links (even to a non-existent page), then you won t have to create the links again every time that you duplicate a new template page. You can create an official Dreamweaver template page by pulling down under File Save as a Template. If you make all your site files from a template, you would only then need to change the template to change all the your site files that are dependent on that template. See the Dreamweaver IV template class at css.ait.iastate.edu/dreamweaver/ for more information on template files. Supplemental Material- Adding a Little Video Dreamweaver allows one to easily add a flash video file to a web page which can really liven up how a web page looks. Go to: and click into the Sites folder then into the Mystique folder and finally into the Flash folder then download the file mu.flv and add it to your ISUCampus files. The mu.flv was a full size video file that was converted to an.flv file using the Adobe Media Encoder. Click into a table or div section on your page then pull down under Insert -> Media and over to FLV. Select the file mu.flv, click the Detect Size button and then click OK. Try different styles for around this area, when you are satisfied with how it looks then save and preview your results. Select the video itself and try setting a different skin for the video. For more info on creating Flash Video files, see the CSS Flash IV- Video class: 16

17 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. You basically need to login to your remote site, establish a Web (WWW) folder and put a folder within your Web folder (ISUCampus) to which you can publish via Dreamweaver. When you are publishing your official ISU Web page, you will need to contact your local web site server administrator for specific publishing instructions. 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: 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 NetID 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 an ISUCampus folder inside the Web folder as follows: 1. Click on Manage Files. You will be taken to the ISU Webfile area which you can also get to at 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. 3. Click the Create A New Folder button on the left side of your screen underneath the Folder Properties area. 17

18 4. Enter the name ISUCampus in the box provided then click on the Create button. 5. You should now see an ISUCampus 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. Setting up a remote site, then publishing You ve now created a small but functional website and authorized some public web server space on Project Vincent. The next step is setup your Dreamweaver site so that it publishes your web site to the Homepage Server. You only need to tell Dreamweaver where to publish your web site once and then it retains that information for all later publications of your web site. So 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 ISUCampus 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 18

19 three times and you should be at the How do you connect to your remote server? screen. 1. In the pop-up menu labeled How do you connect to you remote server? choose FTP. 2. 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? - WWW/ISUCampus/. 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. Next click the Advanced Tab and in the Remote Info Category make sure that the Use Passive FTP and Use Firewall buttons are selected. 19

20 Additionally click on the Firewall Settings button and for Firewall Host: enter 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 ISU Dreamweaver Web site You ve now created a small but functional website using the ISU templates. The next step is to publish it by uploading the files to a remote web server and that s very easy to do. 20

21 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: 1. In the Site panel, select you site s local root folder which should be named ISUCampus. 2. Click the Put Files button (big blue up arrow) and click OK. All the files inside the ISUCampus 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. 3. Switch from Local View to Remote View to see that your files got uploaded. You can use the green down button and blue up button to download and upload files to and from your web site. You can also select files and click the delete key to remove unwanted files. Viewing your Web Site from a Remote Browser Now that you have published your Web Site, open up a standard Web browser to the following URL to view your Web site: Put in your own NETID for the word NETID above. Your web pages should appear in the browser. Publishing Your Dreamweaver Files Without Dreamweaver In order for your web site to be available for viewing, it must be uploaded and stored on a remote site. However, some times due to firewalls and security precautions- you cannot upload your site files directly with Dreamweaver. So instead of publishing your files with Dreamweaver, you have to publish/upload your files with standard FTP instead. Using FTP at Iowa State involves two steps: 1.) you have to be authenticated for encrypted uploading and downloading with Kerberos and 2.) you have to upload your files. The first step you have to do at Iowa State whether or not you are using Dreamweaver to upload your remote site files. 21

22 Windows: Step 1.) Getting Authenticated with Kerberos To access the homepage server at ISU, your ftp session must be authenticated and encrypted using Kerberos. On Windows, this normally involves having KfW and KFTPD installed and running a program like Leach32 and also running KFTPD before you enter Dreamweaver. Kerberos authentication may be automatically done for you at login- in which case you just have to run KFTPD before entering Dreamweaver. Close out of Dreamweaver for right now if you have it open. To Run Leash32: Go to C:, Program Files, MIT, Kerberos, bin and click on Leash32 then within Leash: Action > Get Tickets. Log in with your NetID. Now startup KFTPD go to: Start > Programs > KFTPD > KFTPD. After you startup KFTPD, a gold K shell will appear in the lower right. You have now been authenticated. If you were going to use Dreamweaver to upload and download your files, you would be ready to go. Windows: Step 2.) Using FileZilla Startup FileZilla on a Windows system to do standard FTP for uploading your files to the remote server. Go to: Start > All Programs > FileZilla > FileZilla or click the FileZilla alias which might be on the Desktop. Within FileZilla pull down under File > Site Manager. Next choose isua4.iastate.edu, enter your NetID and click on the Connect button. 22

23 The FileZilla access window will appear. In the remote site section, scroll down until you find your WWW folder and double click to open it. Next double click to open the ISUCampus folder within the WWW folder. Drag the entire contents of the ISUCampus folder from your desktop into the ISUCampus folder on Project Vincent being displayed by FileZilla. When the transfer is complete close the FileZilla Window. You can view your published site at: Macintosh: Step 1.) Getting Authenticated with Kerberos To access the homepage server at ISU, your ftp session must be authenticated and encrypted using Kerberos. On a Macintosh this usually means having a program like Kerberos Config and KFTP installed and running a program like Fetch to get a kerberos ticket and also running a 23

24 program like KFTP before you enter Dreamweaver. Kerberos authentication may be automatically done for you at login- in which case you just have to run KFTP before entering Dreamweaver. Close out of Dreamweaver for right now if you have it open. Run Fetch from the Applications folder on the Dock. We are not going to keep Fetch open for the moment- right now we just want to get a kerberos ticket. For a Hostname enter: isua4.iastate.edu, enter your NetID and for Connect using choose FTP with GSSAPI and make sure that Enable Encryption is checked. Click Connect. When prompted, enter your NetID and Password. Next Exit Fetch and double-click on KFTP in the Applications folder on the Dock. Nothing much will appear to happen but it will be encrypting your FTP uploading and downloading after that. You have now been authenticated. If you were going to use Dreamweaver to upload and download your files, you would be ready to go. Macintosh: Step 2.) Using Fetch Run Fetch from the Applications folder on the Dock. We are now going to use Fetch to upload our Dreamweaver files. 24

25 For a Hostname enter: isua4.iastate.edu, enter your NetID and for Connect using choose FTP with GSSAPI and make sure that Enable Encryption is checked. Click Connect. The Fetch access window will appear. Scroll down until you find your WWW folder and double click to open it. Next double click to open the ISUCampus folder within the WWW folder. Drag the entire contents of the ISUCampus folder from your desktop into the ISUCampus folder on Project Vincent being displayed by Fetch. When the transfer is complete- close the Fetch window. You can view your published site at: 25

26 References The CSS Dreamweaver class Example Web site is located at: 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: 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: 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

27 Optional Extra: Altering Template Page Links One of the bigger problems that people have when altering ISU Template pages is the fact that it is easy to delete template links on these pages but adding template links is a lot trickier. However, most of these links are simply data items within a list so they are actually quite easy to handle. Go back to Dreamweaver and open up index.html. Highlight two links on the left and delete them. That s easy to do. To add links, click at the end of the last current link which would be say Research. Switch to Code view and you should be placed next to the Research tag in Code View. Notice that each of the links is surrounded by a link item <LI> </LI> and the whole list begins with <UL> and ends with </UL>: <ul> <li><a href="">this college</a></li> <li><a href="">departments</a></li> <li><a href="">research</a></li> </ul> To add a new link- simply add a new list item. Highlight everything between <LI> and </LI> on the last row. Pull down under Edit to Copy. Click to the point right after the last </LI> then press Return and pull down under Edit to Paste. Switch back to Design mode and change the name of the link from Research to something else. You just accomplished this task on a vertical links template page. Try also doing this using a horizontal links sample page. On a horizontal links template page, normally all the links are in one row and you just cut and paste one data item out of the list so everything between <TD> and </TD>. Once you get the hang of this, altering Template pages becomes a whole lot easier. It is often also useful to switch to Code View when you can t get an anchor link or a bold section to highlight or bold an exact section of text just to see where you are and if you have an extra code in the mix or just need to alter links by a space or two. 27