Macromedia Dreamweaver MX 2004 for PC, Mac
Contents
1. This document can become your professional homepage Type in some relevant content 1 e information you would like to include in your web page I do not recommend including any information that is too personal such as your phone number address etc In order to apply formatting to text select the text 1 e highlight it Be An ee eet mah rT ME IHH 5 Fi at ete Pe Dipan a Repent iea E miopie T E dieni ew ri a ikg rihm a RNET niia a WAHE i w Pee rr me aa hT E mH arca hn m r a T E ai ae Bee _ Eo oe Ces a ia N i Tabs g gait oer n See r Fig g Dikara be Ial DEAE Ek hie HH Cranir Hew a HME T Fu a Pur a SS esc a lt P hoon E ASPET Ce a nF MET va a EFP a oss ay Dare i Be ad ek a O CEs Sy Shani C Framenets CS Page Dina Ci OF Page Migi L Pape Diea AOD Etre a Cri orem Cr Albii a reer Gn m Por evar wh r toe ce EN Sik Mees Papik Aa Fig 1 Initial view of MM Dreamweaver MX 2004 fo Pe b beem E Cadi P igk wie Tag ciio Tag telecied gt iz Em mrm ETM iiis w m Ceres W geal aa Dieke e p o ee bas z F Fi THU 7 PSeOCCOOCR es 2 a 4 Okc ile rir Tii by Th E and click on one of the options in the Properties window Fig 2 You can designate under Format whether the text is a paragraph a heading or preformatted text The pop up menu below Font lets you pick your favorite font and the box next to2. from the local folder to the remote folder by first selecting the file s or folder s and then clicking on the blue upload arrow Hegelheimer 2004 DreamweaverMX2004_510 doc 4 English 510 Computer Methods in Language Study Iowa State University Site Definition for home Note Initially there will not be many files and directories simply owe I ETP LSI ie ami amp chwanced Categor because you have not uploaded S any As the semester progresses E e Access FTP you will continue to add files and nan A FTP hoet isun iastate edu directories to your WWW Fie Virw riara Host directory WW e Darit itate directory Only the files and aii ni eah directories inside the WWW Password eneneee directory are accessible via the F use passive ETP H lse firswal Firewall Settings World Wide Web To switch from remote view to local view click on Remote View and select Local View I recommend always I Automatically upload fles to server on save working on the local files first and a iain lca to upload them only after you are happy with the pages ue Secure FTP SFTP Sener Competbhby Notes Fig 6 Remote information Note You may have to go through this procedure frequently since several students are using the lab Additionally you may not work on the same computer every time you come to class In other words memorize this procedure or have this handout with you so you can set up your site qu
3. reasonable to create separate images folders for the different directories but that depends on how many images you are planning on using Initially one centrally located folder in the root directory is probably sufficient In order to prevent index browsing will be illustrated in class it is advisable to have a file named in such a way that it is accessed when the root directory is called In other words unless you have a file that is called homepage html users are able to look at what else you have in your directory For some directories this may be irrelevant but if you would like to control what users can access index Hegelheimer 2004 DreamweaverMX2004_510 doc 9 English 510 Computer Methods in Language Study Iowa State University browsing should be turned off Consequently arranging your documents and directories as illustrated in Fig 13 may make sense Note Index browsing is supported only by certain web servers The public server at ISU is a Unix server that supports index browsing Notes and questions Hegelheimer 2004 DreamweaverMX2004_510 doc 10
4. to allot time extended periods of time work better based on my experience to work and play with Dreamweaver or any other web development application you choose Assignment In addition to the work we will be doing in class read the assigned chapters in the required books for English 510 see our syllabus for the exact chapters in Niederst and Page to read and work through the following parts of the Macromedia Dreamweaver help pages which you can access within Dreamweaver through Help gt Using Dreamweaver or by pressing F1 gt Dreamweaver Basics gt Working with Dreamweaver Sites gt Laying out Pages gt Adding Content to Pages Note You are encouraged to work through the tutorials available as part of MM Dreamweaver MX 2004 and if interested also through the ones available on the Macromedia website Everything covered in class in the four Help units mentioned above and in the assigned readings is fair game for skill consolidation exercises C Documents and Settings Volker Hegelheimer My Documents Teaching 5 1O0F04 DreamweaverMX2004_510 doc English 510 Computer Methods in Language Study Iowa State University Getting Started Step 1 Open Macromedia DreamweaverMX 2004 You will see a number of screens open up Focus on the main screen Fig 1 Click on HTML under Create New the center panel of the center screen to create anew HTML page This will open up a new document tentatively named Untitled 1
5. In sz A classes semesters to come you are probably going to either teach or 7 gso work as a research assistant My recommendation in a case C assignments 51 Oassignment 1 Atm 51 Oassignment2 Atml o Oassignment3 html 21 Osummaries ftml like this would be to think of the web page you are creating as a starting point with many more related web pages to come Hence a file organization as illustrated in Fig 11 might make Sense homepage html l gt Ch projects In order to create directories folders on your Vincent account smg you may either issue Unix commands or work with an ftp homepage htmil application such as Fetch or WS_FTP When using Fetch home page htrn simply select Directories Create New Directory Please b i img make sure you are in the directory in which you want to create Sy personal a new directory or sub directory or with Macromedia homepage html Dreamweaver which is what we will be using in this class p Cy teaching Simply create the files and folders locally e on the computer Fig 13 Avoiding index browsing you are working on and upload the files folders or even the entire site Figure 12 illustrates an expanded view the file structure I am proposing Here directories for 510 and 526 have been created Additionally I created an assignments sub directory in which the assignments can be stored Moreover I included a projects folder for future use In some circumstances it may be
6. Macromedia Dreamweaver MX 2004 English 510 Fall 2004 Important Before going through this handout you should create a WWW directory on your ISU e mail account Otherwise you will not be able to upload and view the pages you will create as part of this handout To check whether you have a default homepage open a web browser and type in the following http www public iastate edu your isu username e g http www public iastate edu volkerh Please follow the instructions on our syllabus to create a default homepage through Acropolis Be sure to register your homepage Introduction Macromedia Dreamweaver is a WYSIWYG What You See Is What You Get editor used for web page creation This handout will guide you through the first use of Dreamweaver MX 2004 Please keep it handy for future use Unless you have already spent a bit of time developing web pages the next 3 5 weeks will be rather intense and time consuming In addition to learning more about web page design and development I have found that it takes a while to conceptualize and integrate this new knowledge with the new knowledge you will gain about the inner workings of the WWW files folders and file types Therefore I will make myself available to you and allocate a good number of hours to help you as best I can However the most important part in this unit is that you spend time working with the application and practicing everything you learn outside of class Be sure
7. cess to that server via FTP That way you can upload files that are ready to be published 1 e for everybody to see Since the computers in Ross 312 and Ross 420 are open to the public and are rebuilt on a regular basis you should not keep your personal files on the computers in our lab Rather you should keep your files on a zip disk only the PCs have a zip drive or USB Flash drive so you have your files with you at all times The web server Hegelheimer 2004 DreamweaverMX2004_510 doc 3 English 510 Computer Methods in Language Study Iowa State University we will be using to store the files is ISU s public server www public iastate edu Plus the computers in the lab are rebuilt the hard drives wiped and a clean operating system installed at least once per semester Note If you are going to use a different server it is your responsibility to find out how to access it To begin with you will be telling Dreamweaver which folder is to be treated as the local folder e the one on your zip disk and how to access the remote folder the www folder on your Project Vincent account The default size of your account also know as locker is 250 MB as of this semester Follow these steps to set up a site Site Detinition for home gt Start up Dreamweaver click on Site gt Manage Sites select Testing Seru Ste nama BEA New and then click on the Des ole Local root folder rae Z Setin menes Advanced tab Und
8. e An absolute link is a complete URL often including the path and the file that is being linked e g http www iastate edu path file html A relative link on the other hand is a link to a document that is usually located on your server and in your www directory For example when two pages are located in the same directory e g e http www public iastate edu volkerh 510 FO1 pagel html and e http www public iastate edu volkerh 5 10 FO1 page2 html then a link on the first document to the second document would simply be lt a href page2 html gt link to page 2 lt a gt Note Whenever possible you should use relative links especially with pages in your www directory because once you move an entire website relative links will still work while absolute links to files in your directory won t Linking to documents Some of your assignments will be actual web pages which means that you can simply link your assignments using a relative link as described above However some of your assignments will be documents in a different format such as Microsoft Word for example Linking MS Word documents is in essence the same as linking html documents The only difference is that a web browser knows what to do with an html document while it may or may not know what to do with an MSWORD or doc document in which case it will prompt the user to either save the document or to select an application with which to open the unknow
9. emember the directory structure needs to be identical on your local disk and on your remote site Be sure to review Chapters 1 6 in Mc Farland and Chapters 9 and14 16 in Niederst These chapters include a nice overview of the file types available to youfor display on the World Wide Web Issues of particular importance with regard to images on the WWW are e Quality e File size file type e Dimensions Obtaining Creating Images The easiest way to get images is to download or copy them off the WWW right click Windows or controkclick Mac on the image and save it to your disk You can also scan in photos and use those on your web pages A third way would be to create an image using a graphics application such as Adobe Photoshop or Macromedia Fireworks Note Observe copyright laws I recommend keeping track of where you get images so you can ask for permission to use them in later projects Cropping amp Resizing images Using Adobe Photoshop amp Macromedia Fireworks Please see demonstration 1n class Viewing the underlying HTML source b Oy classes homepage htral In order to view the underlying HTML source code click on the button b Cy img right below FILE a button with two blue angle brackets Code View bg peru You can also click on the button next to it to see how the HTML is b Q teaching generated while you are typing and applying formatting changes Code e _ and Design View Fig 11 Organization r Wi classe
10. er Local Info ame SS ee l give your web site a name i red home for example Then click HTTP address httpejjinwe public eatate ecujsocbierh on the yellow folder button next Thie ecirel grates the rk Ceder to to Local root folder and ite navigate to your removable Ear da me storage zip or USB Flash drive iaforatan in the ste Ts seeda up the Either select a folder you want Map festures tto use as the local folder or create a new folder you want to use as the local folder for your web site Fig 5 You can leave the default images folder empty Under HTTP addresss type lt empty Figure 4 Defining Sites Local Info ig 2 gt Under Remote Info Fig 6 fill in the information as indicated in Figure 6 Since the information is stored within Dreamweaver on the computer you are working on do not include your password and make sure your password is not saved Fig 5 Creating a new folder 28 Create New Folder gt Then click OK Should another box appear something about creating cache click OK again gt Now return to Dreamweaver and click on the connect button ot You should be prompted for your password Enter it to establish a connection with the web server This is only necessary when you get ready to make your work available on the Internet In general I recommend always working on the local files first and to upload them only after you are happy with the pages Upload the files
11. ext step 1s to look at the page through a browser e g Microsoft Internet Explorer Netscape Navigator Mozialla Firefox Opera or Safari To do that you can select File gt Preview in browser specify the browser you want or simply hit F12 This process can be repeated 1 e as you type in more information you can periodically preview your web page Let mengirc Right margin Top margin e Bottom mangn b cme ave e _ Figure 3 Page Properties Note Please do NOT spend a lot of time playing with the font attributes and with the color options as we will make use of cascading style sheets CSS to control the appearance of your web pages It will become important to separate the content of your web page from the formatting To facilitate the entire web page creation process the next step is to set up a Site Setting up a Site The following procedure is very important because it will help you conceptualize the relationship between viewing documents locally through a browser and viewing documents on the World Wide Web where anybody with access to the Internet can view them Dreamweaver has an excellent site management feature which we will be using extensively This feature allows you to designate a local folder on your computer or on a removable drive such as a ZIP disk or a USB Flash drive in which you save and store your html pages and associated assets e g images and a remote folder on a server as well as ac
12. ickly Hegelheimer 2004 DreamweaverMX2004_510 doc 5 English 510 Computer Methods in Language Study Iowa State University Figure 7 shows how you can now view the local site and the remote site Click on the Connect button to connect to your remote site The remote site Hes asad here also illustrates how you can organize your WWW directory Ca Loc anticipating future expansion more on that in class Your WWW directory ai EASA will most likely include fewer items so do not worry 1f there is nothing or just one file namely homepage html visible i aS m a ES i E m e home C Documents a 101C igiL os 510 B Fo D Fo3 E resources ED tutorials Saving and Viewing Your Document 7 Now you are ready to save your document Select File gt Save and save your document into the directory you created e g www or home on your ZIP disk or USB Flash drive Decide on an extension either htm or html Figure 7 Site and a file name Dreamweaver MX 2004 on the PC uses by default htm Management which is fine for all future documents I recommend using html for the actual homepage since it will simplify your URL In other words save this document as homepage html Use all lower case and no spaces or special characters I will talk more about file naming conventions during class Next select File gt Preview in Browser gt iexplore or hit F12 to preview your document When you are happy with it
13. it allows you to specify the font size Other options include changing the color type face bold or italics and justification Other buttons below let you create numbered or bulleted lists and insert or remove indentations OF Progpertes Formal Hone Fig 2 Properties window Hegelheimer 2004 ohie More Sie Morne w v BE f SE AE ik Target Page Properties o DreamweaverMX2004_510 doc Link English 510 Computer Methods in Language Study Iowa State University Changing Page Properties Page Properties Aphrat ance On the menu bar select Modify gt Page ns Page fonti Defaut Font Properties or click on Page Tie Erodes AR z Properties in the Properties Window Text colors You can now change the appearance of peckgrourd colar the entire page by specifying the default Background mae font font size text color and background color of the page under Appearance You should add a document title under Title Encoding please use something a bit more descriptive than my homepage At this point please do not worry about applying a background image or a tracing image You can also specify the color of the text links visited links active links and margins Unless you plan to use a non western language do not change the setting for document encoding When done click OK To preview what the page will look like press Apply You should now have a basic page with some text on it The n
14. n document Page Layout Macromedia Dreamweaver allows you to design your page by creating a page layout in layout mode Please refer to the demonstration in class and the assigned readings for more information about this option Click on the tab Layout make sure you are in Layout View and click on the Draw Layout Table Fig 10 Then i mt Common Layout Forms Text HTML Application Flash elements Favorites draw a layout cel gn pat Standard Expanded Layout 5 ce a table on the document To Figure 10 Layout Mode subdivide the layout table select the Draw Layout Cell the blue bordered button and draw cells in which you want to add content text or images Inserting Images On the conceptual level you need to understand that an image that is inserted to your local file will also need to be transferred to the remote site for it to be visible on the web page Additionally the Hegelheimer 2004 DreamweaverMX2004_510 doc 7 English 510 Computer Methods in Language Study Iowa State University path that tells the browser where the image is needs to be the same I recommend creating a directory for your images e g Img or pics or pix inside your www directory 1 e the local folder on your Zip disk so you always know where the images are located If you subsequently work on various projects that require images sounds movies etc you could create directories for those within your project folder R
15. s File Management Considerations lt j rd Ol assignments Preliminary considerations 51 Gassignment htm 21 Oassignment2 html Before the actual implementation of a web site or any 51 Oassignment3 html computer based project for that matter I recommend 51 Osurnimaries htral giving some serious thought to the file directory structure b Ci projects in order to maintain a logical coherent and transparent b Cy 526 organization Therefore it is imperative to determine gt y p Cl personal eT teaching E nan Fig 12 Suggested organization English 510 Computer Methods in Language Study Iowa State University which components of a project a web site in this case can be grouped and hence put into folders a k a directories Keep the following considerations in mind Number of components required Long lists of files this should be avoided Logical naming conventions Scalability Allowing possibility for future growth is key Compromise between relatively easy URLs and good organization VVVV V Hands On Background Information Let s assume you are to create a professional homepage for one of your classes Initially the main purpose of this homepage is to provide your instructor with easy access to assignments that need to be linked to this homepage Additionally you would like to use this web page as a location where you can put interesting information links and maybe even some more personal information
16. upload it by simply clicking on the blue upload arrow CCU coursebuilder In Microsoft Internet Explorer type in the URL http www public iastate edu username in the navigation bar and view the homepage that is now accessible for everyone Repeat this procedure 1 e work on your file locally preview it and then upload it The beauty of the web is its hypertextual nature 1 e the ability to link to other files and also its ability to display multiple types of media In the next step you will karn how to include hyperlinks Inserting Hyperlinks Hyperlinks are links to other documents one can follow while browsing the WWW Figures 8 and 9 illustrate how to insert an absolute link 1 e a link to an outside web page Type in the text you would like to be clickable highlight it Fig 8 then type in the URL in the Link box in the Property window Fig 9 and press enter or click outside of the link area For example you could type Iowa State University in your document then highlight it and type http www 1iastate edu in the link area of the property window To double check whether it works preview the document in a browser and click on the link ale eee DG i a 15 5 ow E Figure 9 Inserting a hyperlink Hegelheimer 2004 DreamweaverMX2004_510 doc 6 English 510 Computer Methods in Language Study Iowa State University Absolute and Relative Links Links can either be absolute or relativ
Download Pdf Manuals
Related Search