Dreamweaver 3.5 PHP & Dreamweaver
|
|
- Kelly Goodwin
- 6 years ago
- Views:
Transcription
1 Dreamweaver 3.5 PHP & Dreamweaver Short Course Notes Explore more information on the IT Learning Pods Web site: By Joe Struss Sept. 20, 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 Using PHP PHP is used with Dreamweaver to make dynamic web pages- that is to make web pages on the fly. PHP pages are assembled when they are requested which allows the designer to create parts of a page in separate files and then use PHP to put all the parts together when the page is produced. PHP requires some extra work to setup and makes it more difficult to get a full view of your document when you are creating it- so why would you want to do this? People use PHP because you can change one element of a page that is in a file and have it immediately propagate across an entire web site. If you need to make a change in the header file then you just make that change and since the page are put together when requested- your updated header section is immediately available for all pages that use that header. Pretty slickespecially for sites that occasionally do change parts of their standard pages a lot or for sites where different people are assigned to different parts of a page. PHP with Dreamweaver CS4 is a lot easier to use so we are going to take the Dreamweaver 3 class and do it again but this time use PHP instead of creating template pages. So for today s class, we will once again be creating an html layout using layers for the Mystique coffee shop. The layout will consist of 4 separate PHP pages with layers: one banner layer/page that runs along the top, one narrow layer/page on the side that contains navigation links, one large content layer/page next to the navigation links and a footer layer/page that runs along the bottom. Here s the comp for today s class- it should look familiar to you. 2
3 Adding assets to the project Before we begin with this project, we need to bring in some site assets that have been provided by the client. Copy the site assets from the following location to your Desktop: Right-click or Ctrl-click the Sites.zip file at this location and select Save Target As or Save Link As from the options list then save the file to your Desktop. Next extract the archive and move the Sites folder from the archive to your Desktop. Creating the Remote Site The Homepage server at Iowa State can do most PHP commands. Normally, you should setup a testing server on your local computer to use PHP but that is difficult to do in a lab environment so we are going to setup today s class to use just the Homepage server and the resources within Dreamweaver CS4. Later in the References area, we will go over how to add a testing server on your own machine so that you can use all the parts of dynamic page creation including both PHP and mysql. Setting up a remote site on the ISU Homepage Server 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 (Coffee) that you can publish to within Dreamweaver. Your remote site may also have you establish that your Web site will be using PHP/MySQL. 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. 3
4 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 Coffee 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 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. 4. Enter the name Coffee in the box provided then click on the Create button 5. You should now see a Coffee 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. 4
5 Creating a New Site 1. Before starting up Dreamweaver at Iowa State our FTP needs to be Kerberos-ized. To do this, just run Fetch and KFTP on a Macintosh or Leash32 and KFTPD on a Windows system. This may be done automatically when you login. 2. Startup Dreamweaver, switch to Classic View and choose Site Manage Sites. Then click NEW Site. The Site Definition dialog box appears. 3. If the dialog box is showing the Basic tab, click Advanced. We are actually going to be cheating a little bit in today s class and not using a PHP Testing server so we need the Advanced setup. 4. Click to Local Info- for Site name: enter Coffee; for Local root folder: Choose the Mystique folder with the Site folder on your Desktop; for Default Images Folder: Choose the Img folder with the Site/Mystique folder on your desktop; and for HTTP address: enter 5. Click to Testing Server- for Server Model choose PHP MySQL and for Access choose None. Dreamweaver can fake certain PHP commands locally if we give it the general server information. 5
6 6. Click to Remote Info- for FTP host: use isua4.iastate.edu, for Host directory: use WWW/Coffee/ and enter your NetId and Password for Login and Password. Click Use passive FTP and Use firewall. Additionally click on the Firewall Settings button and for Firewall Host: enter Next for Firewall Port: enter 2021 (for a Mac) or 21 (for Windows) and click OK. Finally Click the Test button. 7. If the connection gets established then we re in great shape and ready to upload and download files. Click Next and Done to finish. Now, you are ready to create the PHP version of the Mystique Café and Coffee House Web site. About PHP Creating Dynamic pages in Dreamweaver means that you have to work at least a little bit within the HTML code area of Dreamweaver. Don t let this worry you to much, the commands that we are working with today are very easy to spot as are mostly simply PHP/HTML style commands. Pull down under File to New and Create a new Blank / HTML page. In the title area of the page, name the page Mystique Cafe. Next save this new page to your Mystique folder and name it index.php. 6
7 Inserting PHP Code Once you ve declared a page to have a suffix of PHP, you should notice that you now have a new PHP tab on the Insert toolbar. Click on the PHP tab and switch to Code View or Split View within your document. Within code view, put your cursor between the <body> and </body> HTML tags and press <return> a couple of times. Our index.php page when it is selected will bring in four other page parts via the PHP command include. Click the PHP include button and type in top.php. Remember to include the double-quotes on each side. We haven t created this page yet but when the index.php page is selected then the top.php file will be included as part of this page. 7
8 Include three other page sections: links.php, homecontents.php and foot.php. Notice that the PHP commands or tags start with <?php and end with?> while normal HTML commands or tags start with < or </ and end with >. Click back to Design view and Save your page. Notice how it says along the top of the page tab that the Source Code of this page is coming from four other separate files. We will now create the other four parts to this page as separate files. 8
9 Creating the parts Pull down under File to New and Create a new Blank / HTML page. Save the page and name it top.php. Select the Layout mode from within the Insert toolbar. Next Select the Draw AP Div Tool and draw a wide and thin banner layer at the top part of the page. Next click the upper righthand corner of the layer and alter it s properties to be: 600 pixels Wide, 90 pixels in Height, 50 pixels from the Left edge and 50 pixels from the Top. This corresponds to the W, H, L and T property boxes for a layer. You can also move a layer around on the screen once you select it by using the Arrow keys or using the shift key with the arrow keys.. Also change the name of the Layer referred to as the CSS-P Element to banner and the Bg Color to grey. 9
10 Save the page and then click to Code view. Since this will not be a complete page but only part of another page, we need to remove some HTML code so that it is not duplicated within index.php. Remove everything above the <style type=``text/css > tag, everything between the </style> and <div id=``banner ></div> tags, plus everything after that tag. So we are stripping the full page HTML elements out of that page which no longer allows it to stand by itself. Once you are done, you can go ahead and Save the Page. Now go back to the index.php page and click on the Live View button. The Live View button allows you to see the page as though it was uploaded to the Server. This is very handy when dealing with PHP especially if you don t have a testing server installed. When you click on the Live View button, you will be asked to setup a testing server- click No to that inquiry. After that, Dreamweaver will ask if you would like Dreamweaver to pretend to be your local server- click Yes to that question and Dreamweaver will show you what your finished index.php page would look like now if you uploaded it to your remote server. 10
11 Pull down under File to New and Create a new Blank / HTML page. Save the page and name it links.php. Select the Layout mode from the Insert toolbar. Next Select the Draw AP Div Tool and draw a long and tall links layer on the left side of the page. Next click the upper righthand corner of the layer and alter it s properties to be: 120 pixels Wide, 360 pixels in Height, 50 pixels from the Left edge and 140 pixels from the Top. Name the layer links and give it a blue background color. 11
12 Once you are done, save the file then switch to design view and strip the Page HTML elements out of that file. Save the file again then switch back to index.php and click on the Live View button to see how you are doing. Pull down under File to New and Create a new Blank / HTML page. Save the page and name it homecontents.php. Select the Layout mode from the Insert toolbar. Next Select the Draw AP Div Tool and draw a long and wide contents layer near the middle of the page. Next click the upper righthand corner of the layer and alter it s properties to be: 480 pixels Wide, 360 pixels in Height, 170 pixels from the Left edge and 140 pixels from the Top. Name the layer contents and give it a green background color. Once you are done, save the file then switch to design view and strip the Page HTML elements out of that file. Save the file again then switch back to index.php and click on the Live View button to see how you are doing. Pull down under File to New and Create one more new Blank / HTML page. Save the page and name it foot.php. Select the Layout mode from the Insert toolbar. Next Select the Draw AP Div Tool and draw a long and wide contents layer near the middle of the page. Next click the upper 12
13 righthand corner of the layer and alter it s properties to be: 600 pixels Wide, 130 pixels in Height, 50 pixels from the Left edge and 410 pixels from the Top. Name the layer footer and give it a yellow background color. Once you are done, save the file then switch to design view and strip the Page HTML elements out of that file. Save the file again then switch back to index.php and click on the Live View button to see how it all ended up. Adding in a CSS Style sheet Now we are ready to add a CSS style sheet to the main index.php page. A separate Cascading Style Sheet (CSS) style is used to make a series of web pages all look in a similar fashion. The concept is very simple. You create a separate style sheet that connects to all of your web pages and informs the page what the paragraphs, links, background colors etc. are suppose to look like. Let s add a CSS style sheet to this web page. First- pull down under File and Save your page. Next click outside the layers area to select the background <BODY> part of the page. To attach a CSS style sheet to a web page, simply go to the CSS Styles Window (Window CSS Styles) and click on the Attach Style Sheet button. 13
14 Now we haven t created a style sheet yet but don t worry. Dreamweaver comes with a good set of sample style sheets that you can alter. Click the sample style sheets link then select the Full Design: Arial, Blue /Green /Grey style sheet and click OK. The style sheet will immediately be added to your be page and you should notice some changes regarding the links we just added. The style sheet itself has been copied and place into a CSS folder within your local site files for alteration. Altering the CSS Style Sheet Let s alter the CSS style sheet and add in the Display option that we used in the previous class for the.navlink. So go back to the CSS Style window, click the All Button and click open the Level3_1.css file then click on the.navlink item. The options/properties for the.navlink style will appear below. Make sure the A-Z button is clicked below the Properties for the.navlink area. Scroll down the properties for.navlink until you get to the display property. 14
15 Select the box next to the display property and use the scroller to choose the display property block. See if you can change the background color of.navlink to a light grey. See if you can also alter the background page color and add a centering rule. You can add a new rule to an existing open css style sheet and selected CSS style sheet by just clicking on the New CSS rule button within the CSS aera. Dreamweaver may prompt you to save your style file since you ve altered it. The style file ends with the suffix.css and is now attached to this particular page. You can use these same styles in any of your other.php files as well by just attaching the same style sheet which you can do in the HTML Properties area under Class. Adding Contents to a Page Adding contents to a layer within a PHP page is easy. You simply open up the file and click inside the layer and add to it- just like a table. In fact, to get centering exactly correct you can put tables inside of a layer. Go ahead 15
16 and click open the top.php file and click inside the banner layer. Next pull down under Insert to Image Objects then over to Image Placeholder. Name the placeholder BannerEx then click OK. Click and drag the anchor points on the Image Placeholder to fill up the whole layer. An image placeholder is used if you don t have an image ready to place into a banner or footer area for your site. It reserves the spot for an eventual image. If you click on the Image Placeholder and look in the Properties area, you will see a Create button there. If you click the Create button, Dreamweaver will take you to Fireworks and open up a canvas area of the exact size of your placeholder and then return you to Dreamweaver when you are finished creating the image. We don t actually need an image placeholder here as a banner has already been created. So click on the Image Placeholder then click the folder next to Src and choose the file topper.png within the Img folder or delete the image placeholder then go under Insert and pull down to Image then choose the file topper.png in the Img folder and click on OK. This is the exact type of process you would use for adding contents to a table. Open up the foot.php file and click inside the footer layer. Let s add a Flash swf file here. Pull down under Insert to Media then over to SWF. Choose the file footerplus.swf within the Flash folder and click OK. Next fill out the Title of the Flash object (enter a name for this flash object) then click on OK. You can check out the Flash file by clicking the Play/Stop button in the Properties area. You can also center the Flash file by clicking next to the Flash file and creating a New Class-based CSS rule named centering. Have the centering rule under the Block category alter the Text- Align option to center. 16
17 Save you page and click on OK if Dreamweaver asks to bring in some supporting files. Change the background color for this layer to grey, save foot.php and preview it with the Live View button inside of index.php. Next let s add in some links. Adding a few virtual links Open the links.php file and click inside the links layer and add in the following: Home About Local Put exactly one space between the words. Now select just the word Home and create a link to the file: index.php. Next select just the word About and create a link to the non-existent file about.php. Simply type the name about.php into the Link Properties box. This file doesn t exist yet but it will very soon. This is known as making a virtual link since the file in question doesn t exist as of yet and you are just making future plans to connect to that file. Finally select just the word Local and create a link to the non-existent file local.php. Again type the name local.php into the Link Properites box. 17
18 Let s add some real style to this link. Click under Class and attach the local style sheet Level3_1.css. Next Highlight just the Home link and in the Class area choose the style Navlink. Do the same thing for the About link and the Local link within the link layer. Save you page and click on OK if Dreamweaver asks to bring in some supporting files. Change the background color for this layer to grey, save links.php and preview it with the Live View button inside of index.php. Next let s clean up the index.php page. Tidying Up the Base Web Page When you do a Live View while viewing index.php, you might notice that the layers don t exactly line up. Go to each of the files for the problem sections in question and select the layers by clicking in the righthand corner of the layer and line them into place by using the arrow keys. Also go into the Properties area for each layer and set the background color to be the light grey from the banner. Save and Live View the index.php page. 18
19 Let s add just one more thing to the top.php page and then we will be ready to make the rest of the pages of the web site. The top banner could use a surprise link. Open top.php and select the Mystique Bookstore png image in the banner layer. Next pull down under Window Behaviors. There should be a lot of behavior options there. Pull down under the plus sign until you reach the Open Browser Window option. In the Open Browser Window box put in a link in the URL to display: area to then click OK. Next Save your page. Live View won t show behaviors so you will have to upload your web site to see your result at Mysterious things are now happening on this page. 19
20 Creating the rest of the PHP Pages Since our site is in pieces. We will need to duplicate the index.php and alter it as well as duplicating the homecontents.php file for each page of our web site. Select the index.php page in the Site files area. Right or Ctrl/Click the file then pull down under Edit Duplicate. Rename the file about.php. Do this two more times creating the files local.php and base.php. Next select the homecontents.php file. Right or Ctrl/Click the file then pull down under Edit Duplicate. Rename the file aboutcontents.php. Do this two more times creating the files localcontents.php and basecontents.php. Now open the about.php file and change the homecontents.php include to be aboutcontents.php. You might also change the page title while you are there. Do the same thing for local.php and base.php and have their include files point to localcontents.php and basecontents.php. Alter the page titles as well. Upload your files to the web site and all the links should now work. 20
21 Adding content to the other Web pages Now that we have our three web pages, all we need to do is to alter the content layer on the three site pages and we will be finished. Open the file called backstory.txt within the Text Folder. Next pull down under Edit Select All then pull down under Edit Copy. Close the backstory.txt file then Open the aboutcontents.php file and click in the contents layer. Let s put the text into a table so that it has margins and can be easily centered. Pull down under Insert Table and create a 400 pixel wide table with 3 Rows and 1 Column. Select inside the middle row then pull down under Edit Paste and paste in the contents from the backstory.txt file into the center of the table. Add the Level3_1.css style sheet to the page and then try adding a Class both to the header and to the text of the story. You can always alter a Class or add a new class to get the look that you want for a specific area. Center the table, Save the file, Open about.php and Live View the results. 21
22 Adding a Little Video Open the file localcontents.php. Into the contents layer of this file, we are going to put a flash video file to add a little more excitement and interest to the page. But first we are going to put in some text to describe the video. Select inside the contents layer and enter: The Mystique Bookstore and Coffee Shoppe is right next to the Memorial Union: Attach the Level3_1.css style sheet to the page then select a Class for this text. Also press a <return> after the text and return the Class option to None. Let s add a table to the local.html file to allow more control over where the video will be located. Using you table skills, pull down under Insert Table and put in a 400 pixel wide table that is 1 Row/ 1 Column in dimension then click the <table>-tag and center the table in that layer. Next click into the table then pull down under Insert Media FLV. Click the browse button and select the file mu.flv within the Flash folder and click OK. Next click the Detect Size button and finally click on OK. The video will be added to the table. Select the video and try altering it s skin in the Properties area. Center the table, Save the file, Open local.php and Live View the results. 22
23 See if your centering Class is still around and center the video. Select the video itself & try setting a different skin for the video. For more info on Flash Video files, see the IT Learning Pods Flash IV class. Now go back to the homecontents.php page and click in the contents layer. Let s add some Fireworks html here. Pull down under Insert Images Objects Fireworks HTML then click the Browse button and in the Store folder choose the file store.html. Click Open and OK then Save and Preview your results. The special rollovers were created with Fireworks. Fireworks is great for quick interactive web site effects or for creating simple to extravagant dropdown menus for a site. For more information on Fireworks, check out the IT Learning Pods Fireworks series of classes. Save the file, Open index.php and Live View the results. If you want you can upload the files to the web site and then view your results from there. A Last Minute Change The big advantage of a PHP web site is that if one of the normally nonchanging area actually needs a change. You can simply change that area and have it immediately propagate to the entire web site. Let s say we want to add a Drive-In link to the links on the left side. On a template side, we would have to go to each and every page to make that change. On our PHP web site, we just open the links.php file, make the change, save and upload that file. Once you do that, all the pages on our web site update to add the new link. It is as easy as that. 23
24 References We have barely scratched the surface of what one can do with dynamic pages and PHP. For more PHP information, try going to the official PHP web site: Another easy PHP command to try is setting a variable in the head of your page like: <?php $pagetitle= Mystique Café?> and then using that variable within the page like <title> <?php echo $pagetitle?> </title> or <h1> Welcome to the <?php echo $pagetitle?> </h1>. Testing Server: Most of the time when you want to work with PHP you will also want to work with a background mysql database as well which greatly increases what you can do with PHP. This means setting up a testing server which also allows one to use the Preview button again to preview your files. The easiest way to add a testing server to your computer is to download WAMP or MAMP. WAMP (Windows) and MAMP (Macintosh) are a packaged Apache Web Server / PHP / MySQL set of applications all rolled into one installation. Download WAMP from: Download MAMP from: For MAMP, after installation, you will want to click to Preferences/Ports and click on the Set to default Apache and MySQL ports button. Within Dreamweaver, the Testing Server is normally set to: Server Model: PHP MySQL, Access: Local/Network Then set the testing server folder: For MAMP: Mac:Applications:MAMP:htdocs:Coffee: with URL Prefix of: For WAMP: C:\wamp\www\Coffee\ with URL Prefix of: After setup, when you use the Preview button- Dreamweaver will ask for permission to copy your file(s) to the Testing Server area in order to preview your page. 24
Dreamweaver At ISU. Short Course Notes. Explore more information on the IT Learning Pods Web site:
Dreamweaver At ISU Short Course Notes Explore more information on the IT Learning Pods Web site: http://css.ait.iastate.edu Created by Joe Struss From original documents by Hsine-Jen Tsai, Jane Venes &
More informationDreamweaver MX The Basics
Chapter 1 Dreamweaver MX 2004 - The Basics COPYRIGHTED MATERIAL Welcome to Dreamweaver MX 2004! Dreamweaver is a powerful Web page creation program created by Macromedia. It s included in the Macromedia
More informationCreating and Publishing Faculty Webpages
Creating and Publishing Faculty Webpages The UNF Template The template we are using today provides a professional page that is easy to work with. Because the pages are already built, faculty members can
More informationWeb Publishing Basics II
Web Publishing Basics II Jeff Pankin Information Services and Technology Table of Contents Course Objectives... 2 Create a Site Definition... 3 The Dreamweaver CS4 Interface... 4 Panels are groups of icons
More informationHow to lay out a web page with CSS
Activity 2.6 guide How to lay out a web page with CSS You can use table design features in Adobe Dreamweaver CS4 to create a simple page layout. However, a more powerful technique is to use Cascading Style
More informationADOBE DREAMWEAVER CS4 BASICS
ADOBE DREAMWEAVER CS4 BASICS Dreamweaver CS4 2 This tutorial focuses on the basic steps involved in creating an attractive, functional website. In using this tutorial you will learn to design a site layout,
More informationHow to lay out a web page with CSS
How to lay out a web page with CSS A CSS page layout uses the Cascading Style Sheets format, rather than traditional HTML tables or frames, to organize the content on a web page. The basic building block
More informationUsing Dreamweaver CS6
Using Dreamweaver CS6 4 Creating a Template Now that the main page of our website is complete, we need to create the rest of the pages. Each of them will have a layout that follows the plan shown below.
More informationUsing Dreamweaver CC. Logo. 4 Creating a Template. Page Heading. Page content in this area. About Us Gallery Ordering Contact Us Links
Using Dreamweaver CC 4 Creating a Template Now that the main page of our website is complete, we need to create the rest of the pages. Each of them will have a layout that follows the plan shown below.
More informationDreamweaver 101. Here s the desktop icon for Dreamweaver CS5: Click it open. From the top menu options, choose Site and New Site
Dreamweaver 101 First step: For your first time out, create a folder on your desktop to contain all of your DW pages and assets (images, audio files, etc.). Name it. For demonstration, I ll name mine dw_magic.
More informationHow to lay out a web page with CSS
How to lay out a web page with CSS You can use table design features in Adobe Dreamweaver CS3 to create a simple page layout. However, a more powerful technique is to use Cascading Style Sheets (CSS).
More informationChapter 1 Introduction to Dreamweaver CS3 1. About Dreamweaver CS3 Interface...4. Creating New Webpages...10
CONTENTS Chapter 1 Introduction to Dreamweaver CS3 1 About Dreamweaver CS3 Interface...4 Title Bar... 4 Menu Bar... 4 Insert Bar... 5 Document Toolbar... 5 Coding Toolbar... 6 Document Window... 7 Properties
More informationAdobe Dreamweaver CS5 Tutorial
Adobe Dreamweaver CS5 Tutorial GETTING STARTED This tutorial focuses on the basic steps involved in creating an attractive, functional website. In using this tutorial you will learn to design a site layout,
More informationDreamweaver Basics Workshop
Dreamweaver Basics Workshop Robert Rector idesign Lab - Fall 2013 What is Dreamweaver? o Dreamweaver is a web development tool o Dreamweaver is an HTML and CSS editor o Dreamweaver features a WYSIWIG (What
More informationDreamweaver CS6. Table of Contents. Setting up a site in Dreamweaver! 2. Templates! 3. Using a Template! 3. Save the template! 4. Views!
Dreamweaver CS6 Table of Contents Setting up a site in Dreamweaver! 2 Templates! 3 Using a Template! 3 Save the template! 4 Views! 5 Properties! 5 Editable Regions! 6 Creating an Editable Region! 6 Modifying
More informationDreamweaver CS 5.5. University Information Technology Services. Training, Outreach, Learning Technologies, and Video Production
Dreamweaver CS 5.5 Creating Web Pages with a Template University Information Technology Services Training, Outreach, Learning Technologies, and Video Production Copyright 2012 KSU Department of Information
More informationDreamweaver Basics Outline
Dreamweaver Basics Outline The Interface Toolbar Status Bar Property Inspector Insert Toolbar Right Palette Modify Page Properties File Structure Define Site Building Our Webpage Working with Tables Working
More informationAdobe Dreamweaver CS3 English 510 Fall 2007
Adobe Dreamweaver CS3 English 510 Fall 2007 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
More informationDear Candidate, Thank you, Adobe Education
Dear Candidate, In preparation for the Web Communication certification exam, we ve put together a set of practice materials and example exam items for you to review. What you ll find in this packet are:
More informationGoLive will first ask you if your new site will be for one individual or a work group; select for a Single User, and click Next.
Getting Started From the Start menu, located the Adobe folder which should contain the Adobe GoLive 6.0 folder. Inside this folder, click Adobe GoLive 6.0. GoLive will open to its initial project selection
More informationTable Basics. The structure of an table
TABLE -FRAMESET Table Basics A table is a grid of rows and columns that intersect to form cells. Two different types of cells exist: Table cell that contains data, is created with the A cell that
More informationWebsite Management with the CMS
Website Management with the CMS In Class Step-by-Step Guidebook Updated 12/22/2010 Quick Reference Links CMS Login http://staging.montgomerycollege.edu/cmslogin.aspx Sample Department Site URLs (staging
More informationHow to set up a local root folder and site structure
Activity 2.1 guide How to set up a local root folder and site structure The first thing to do when creating a new website with Adobe Dreamweaver CS3 is to define a site and identify a root folder where
More informationTaking Fireworks Template and Applying it to Dreamweaver
Taking Fireworks Template and Applying it to Dreamweaver Part 1: Define a New Site in Dreamweaver The first step to creating a site in Dreamweaver CS4 is to Define a New Site. The object is to recreate
More informationTitle and Modify Page Properties
Dreamweaver After cropping out all of the pieces from Photoshop we are ready to begin putting the pieces back together in Dreamweaver. If we were to layout all of the pieces on a table we would have graphics
More informationSiteAssist Professional - Getting Started Guide
SiteAssist Professional - Getting Started Guide This Getting Started Guide covers the basics of running through SiteAssist Professional to create your own site. It also demonstrates the steps required
More informationAdobe Dreamweaver CC 17 Tutorial
Adobe Dreamweaver CC 17 Tutorial GETTING STARTED This tutorial focuses on the basic steps involved in creating an attractive, functional website. In using this tutorial you will learn to design a site
More informationDreamweaver Basics. Planning your website Organize site structure Plan site design & navigation Gather your assets
Dreamweaver Basics Planning your website Organize site structure Plan site design & navigation Gather your assets Creating your website Dreamweaver workspace Define a site Create a web page Linking Manually
More informationMicrosoft Expression Web Quickstart Guide
Microsoft Expression Web Quickstart Guide MS-Expression Web Quickstart Guide Page 1 of 24 Expression Web Quickstart Guide (20-Minute Training) Welcome to Expression Web. When you first launch the program,
More informationSoftChalk 10. Level 1. University Information Technology Services. Learning Technologies, Training, Audiovisual, and Outreach
SoftChalk 10 Level 1 University Information Technology Services Learning Technologies, Training, Audiovisual, and Outreach Copyright 2018 KSU Division of University Information Technology Services This
More informationAdobe Dreamweaver CS5/6: Learning the Tools
Adobe Dreamweaver CS5/6: Learning the Tools Dreamweaver is an HTML (Hypertext Markup Language) editor, authoring tool, and Web site management tool. Dreamweaver is a WYSIWYG (what you see is what you get)
More informationCreating a Website with Publisher 2016
Creating a Website with Publisher 2016 Getting Started University Information Technology Services Learning Technologies, Training & Audiovisual Outreach Copyright 2017 KSU Division of University Information
More informationCafé Soylent Green Chapters 4
Café Soylent Green Chapters 4 You will be completing the Links Tutorial from your textbook, Chapter 4, pgs. 223-227 AND the Images Tutorial, Chapter 5, pgs. 278-287. You will need to be at a computer that
More informationORB Education Quality Teaching Resources
These basic resources aim to keep things simple and avoid HTML and CSS completely, whilst helping familiarise students with what can be a daunting interface. The final websites will not demonstrate best
More informationDreamweaver Domain 4: Adding Content by Using Dreamweaver CS5
Dreamweaver Domain 4: Adding Content by Using Dreamweaver CS5 Adobe Creative Suite 5 ACA Certification Preparation: Featuring Dreamweaver, Flash, and Photoshop 1 Objectives Define a Dreamweaver site. Create,
More informationThe Dreamweaver Interface
The Dreamweaver Interface Let s take a moment to discuss the different areas of the Dreamweaver screen. The Document Window The Document Window shows you the current document. This is where you are going
More informationIntroduction to Dreamweaver
COMMUNITY TECHNICAL SUPPORT Introduction to Dreamweaver What is Dreamweaver? Dreamweaver helps you to create Web pages while it codes html (and more) for you. It is located on the bottom tray or in the
More informationCS Multimedia and Communications. Lab 06: Webpage Tables and Image Links (Website Design part 3 of 3)
CS 1033 Multimedia and Communications Lab 06: Webpage Tables and Image Links (Website Design part 3 of 3) REMEMBER TO BRING YOUR MEMORY STICK TO EVERY LAB! Table Properties Reference Guide The Property
More informationCreating Buttons and Pop-up Menus
Using Fireworks CHAPTER 12 Creating Buttons and Pop-up Menus 12 In Macromedia Fireworks 8 you can create a variety of JavaScript buttons and CSS or JavaScript pop-up menus, even if you know nothing about
More informationDreamweaver Website 1: Managing a Website with Dreamweaver
Page 1 of 20 Web Design: Dreamweaver Websites Managing Websites with Dreamweaver Course Description: In this course, you will learn how to create and manage a website using Dreamweaver Templates and Library
More informationArchitectural Engineering Senior Thesis CPEP Webpage Guidelines and Instructions
Architectural Engineering Senior Thesis CPEP Webpage Guidelines and Instructions Your Thesis Drive (T:\) Each student is allocated space on the Thesis drive. Any files on this drive are accessible from
More informationDreamweaver Handout. University of Connecticut Prof. Kent Golden
Dreamweaver Handout University of Connecticut Prof. Kent Golden Kent@GoldenMultimedia.com www.goldenmultimedia.com Main goal of this handout: To give you the steps needed to create a basic personal website
More informationm ac romed ia D r e a mw e av e r Curriculum Guide
m ac romed ia D r e a mw e av e r Curriculum Guide 1997 1998 Macromedia, Inc. All rights reserved. Macromedia, the Macromedia logo, Dreamweaver, Director, Fireworks, Flash, Fontographer, FreeHand, and
More informationNVU Web Authoring System
NVU Web Authoring System http://www.nvu.com/index.php Table of Contents Using Nvu as Your Web Page Authoring System: Getting Started Opening a page, saving, and previewing your work...3 Formatting the
More informationDreamweaver CS3 Lab 2
Dreamweaver CS3 Lab 2 Using an External Style Sheet in Dreamweaver Creating the site definition First, we'll set up the site and define it so that Dreamweaver understands the site structure for your project.
More informationTitle and Modify Page Properties
Dreamweaver After cropping out all of the pieces from Photoshop we are ready to begin putting the pieces back together in Dreamweaver. If we were to layout all of the pieces on a table we would have graphics
More information< building websites with dreamweaver mx >
< building websites with dreamweaver mx > < plano isd instructional technology department > < copyright = 2002 > < building websites with dreamweaver mx > Dreamweaver MX is a powerful Web authoring tool.
More informationSign in and join ADC Newsletters Feedback. Creating your first website Part 3: Adding content to pages
1 of 18 2/14/2008 2:34 PM Adobe Dreamweaver Article Adobe Developer Connection Sign in and join ADC Newsletters Feedback RSS Creating your first website Part 3: Adding content to pages Jon Varese Adobe
More informationCAL 9-2: Café Soylent Green Chapter 12
CAL 9-2: Café Soylent Green Chapter 12 This version is for those students who are using Dreamweaver CC. You will be completing the Forms Tutorial from your textbook, Chapter 12 however, you will be skipping
More informationCLASS 6: March 5, 2014 MULTIMEDIA TOOLS: DGIM 601-W01 (127469)
CLASS 6: March 5, 2014 MULTIMEDIA TOOLS: DGIM 601-W01 (127469) AGENDA: Homework Review: Website Logo (Save As: YourInitials_logo.psd ) Photoshop Lesson 6: Start Midterm Set-Up OBJECTIVE: Set-Up Photoshop
More informationDreamweaver Tutorial #2
Dreamweaver Tutorial #2 My web page II In this tutorial you will learn: how to use more advanced features for your web pages in Dreamweaver what Cascading Style Sheets (CSS) are and how to use these in
More informationCreating Web Pages with a Template
Creating Web Pages with a Template Adobe Dreamweaver Creative Cloud 2017 University Information Technology Services Learning Technologies, Training & Audiovisual Outreach Copyright 2017 KSU Division of
More informationThings to note: Each week Xampp will need to be installed. Xampp is Windows software, similar software is available for Mac, called Mamp.
Tutorial 8 Editor Brackets Goals Introduction to PHP and MySql. - Set up and configuration of Xampp - Learning Data flow Things to note: Each week Xampp will need to be installed. Xampp is Windows software,
More informationCS Multimedia and Communications REMEMBER TO BRING YOUR MEMORY STICK TO EVERY LAB!
CS 1033 Multimedia and Communications REMEMBER TO BRING YOUR MEMORY STICK TO EVERY LAB! Lab 06: Introduction to KompoZer (Website Design - Part 3 of 3) Lab 6 Tutorial 1 In this lab we are going to learn
More informationADOBE Dreamweaver CS3 Basics
ADOBE Dreamweaver CS3 Basics IT Center Training Email: training@health.ufl.edu Web Page: http://training.health.ufl.edu This page intentionally left blank 2 8/16/2011 Contents Before you start with Dreamweaver....
More informationA new clients guide to: Activating a new Studio 3.0 Account Creating a Photo Album Starting a Project Submitting a Project Publishing Tips
Getting Started With Heritage Makers A Guide to the Heritage Studio 3.0 Drag and Drop Publishing System presented by Heritage Makers A new clients guide to: Activating a new Studio 3.0 Account Creating
More informationPerch Documentation. U of M - Department of Computer Science. Written as a COMP 3040 Assignment by Cameron McKay, Marko Kalic, Riley Draward
Perch Documentation U of M - Department of Computer Science Written as a COMP 3040 Assignment by Cameron McKay, Marko Kalic, Riley Draward 1 TABLE OF CONTENTS Introduction to Perch History of Perch ---------------------------------------------
More informationBuilding TPS Web Pages with Dreamweaver
Building TPS Web Pages with Dreamweaver Title Pages 1. Folder Management 7 2. Defining Your Site 8-11 3. Overview of Design Features 12-22 4. Working with Templates 23-25 5. Publishing Your Site to the
More informationDrupal Basics. for COS and CLASS site maintainers
Drupal Basics for COS and CLASS site maintainers Introduction This guide is meant as a starting point for site maintainers in the UNT College of Science and College of Liberal Arts and Social Sciences
More informationpage 1 OU Campus User Guide
page 1 OU Campus User Guide Logging Into OU Campus page page 2 1. Navigate to a page on your site that you wish to edit. 2. Scroll down to the footer and click the symbol. 3. Enter your OU Campus username
More informationBefore you begin, make sure you have the images for these exercises saved in the location where you intend to create the Nuklear Family Website.
9 Now it s time to challenge the serious web developers among you. In this section we will create a website that will bring together skills learned in all of the previous exercises. In many sections, rather
More informationWorking with Images and Multimedia
CHAPTER Working with Images and Multimedia You can make your web page more interesting by adding multimedia elements. You can download the files featured in this chapter from www.digitalfamily.com/tyv.
More informationThe figure below shows the Dreamweaver Interface.
Dreamweaver Interface Dreamweaver Interface In this section you will learn about the interface of Dreamweaver. You will also learn about the various panels and properties of Dreamweaver. The Macromedia
More informationIntroduction to Dreamweaver CS3
TUTORIAL 2 Introduction to Dreamweaver CS3 In Tutorial 2 you will create a sample site while you practice the following skills with Adobe Dreamweaver CS3: Creating pages based on a built-in CSS page layout
More informationHandout created by Cheryl Tice, Instructional Support for Technology, GST BOCES
Handout created by Cheryl Tice, Instructional Support for Technology, GST BOCES Intro to FrontPage OVERVIEW: This handout provides a general overview of Microsoft FrontPage. AUDIENCE: All Instructional
More informationWebLink Manual EZ-CAMP2
WebLink Manual EZ-CAMP2 SofterWare, Inc. WebLink March 2010 Table of Contents Table of Contents 1. WEBLINK OVERVIEW...3 Manual Overview...3 Support...3 WebLink Terminology...4 2. ADDING THE FORM TO YOUR
More informationEktron Advanced. Learning Objectives. Getting Started
Ektron Advanced 1 Learning Objectives This workshop introduces you beyond the basics of Ektron, the USF web content management system that is being used to modify department web pages. This workshop focuses
More informationObjective % Select and utilize tools to design and develop websites.
Objective 207.02 8% Select and utilize tools to design and develop websites. Hypertext Markup Language (HTML) Basic framework for all web design. Written using tags that a web browser uses to interpret
More informationWEBSITE USER GUIDE V.4
WEBSITE USER GUIDE V.4 SEC. 01 SEC. 02 SEC. 03 SEC. 04 SEC. 05 SEC. 06 CASCADE INTERFACE OVERVIEW LOGIN PAGE USER DASHBOARD SITE DIRECTORY EDITING PAGES PAGE EDITOR OVERVIEW STANDARD ROW COMPONENTS EDITING
More informationWeb Publishing Basics 1
Web Publishing Basics 1 Website Maintenance Essentials Jeff Pankin Information Services and Technology Contents Course Objectives and Your Role As Site Maintainer... 3 Course Objectives... 3 Your Role...
More informationFigure 1 Properties panel, HTML mode
How to add text Adding text to a document To add text to a Dreamweaver document, you can type text directly in the Document window, or you can cut and paste text. You modify text by using the Properties
More informationFileNET Guide for AHC PageMasters
ACADEMIC HEALTH CENTER 2 PageMasters have the permissions necessary to perform the following tasks with Site Tools: Application Requirements...3 Access FileNET...3 Login to FileNET...3 Navigate the Site...3
More informationWith Dreamweaver CS4, Adobe has radically
Introduction to the Dreamweaver Interface With Dreamweaver CS4, Adobe has radically reengineered the Dreamweaver interface to provide a more unified experience across all of the Creative Suite applications.
More informationThe Newsletter will contain a Title for the newsletter, a regular border, columns, Page numbers, Header and Footer and two images.
Creating the Newsletter Overview: You will be creating a cover page and a newsletter. The Cover page will include Your Name, Your Teacher's Name, the Title of the Newsletter, the Date, Period Number, an
More informationGuide to Completing Your Senior English and Government Portfolios
Sheridan High School s Guide to Completing Your Senior English and Government Portfolios Written by: Dave Burkhart Updated: August 24, 2014 2 Clicking on a topic or a page number will automatically take
More informationSection 6: Dreamweaver
Section 6: Dreamweaver 1 Building TPS Web Pages with Dreamweaver Title Pages 1. Dreamweaver Storyboard Pages 3 2. Folder Management 4 3. Defining Your Site 5-8 4. Overview of Design Features 9-19 5. Working
More informationDreamweaver MX 2004 Introduction
Dreamweaver MX 2004 Introduction A Workshop for San Diego State University Faculty and Staff 2004. San Diego State University. All Rights Reserved Sponsored by Academic Affairs Where to Find Help When
More informationProject 1: Creating a Web Site from Scratch. Skills and Tools: Use Expression Web tools to create a Web site
E00EW3.qxp 4/14/2007 3:17 PM Page 1 Workshops w Introduction The Workshop is all about being creative and thinking outside of the box. These workshops will help your right-brain soar, while making your
More informationSign in and join ADC Newsletters Feedback. Creating your first website Part 2: Creating the page layout
1 of 14 2/14/2008 2:31 PM Adobe Dreamweaver Article Adobe Developer Connection Sign in and join ADC Newsletters Feedback RSS Creating your first website Part 2: Creating the page layout Jon Varese Adobe
More informationSomerville College WordPress user manual. 7th October 2015
Somerville College WordPress user manual 7th October 05 0 INDEX YOUR SITE IMAGES FORMS THE MENU 4 4 5 0 YOUR SITE The Content Management System The Somerville website has been built using the WordPress
More informationUsing Dreamweaver To Edit the Campus Template Version MX
Using Dreamweaver To Edit the Campus Template Version MX Tennessee Tech University Clement Hall 215 Dreamweaver is an HTML (Hypertext Markup Language) editor that allows you to create HTML pages. This
More informationHands-On Introduction to Queens College Web Sites
Hands-On Introduction to Queens College Web Sites This handout accompanies training workshops for Queens College Content Editors who will manage and maintain the web content in their areas. Overview of
More informationDreamweaver MX Overview. Maintaining a Web Site
Dreamweaver MX Overview Maintaining a Web Site... 1 The Process... 1 Filenames... 1 Starting Dreamweaver... 2 Uploading and Downloading Files... 6 Check In and Check Out Files... 6 Editing Pages in Dreamweaver...
More informationA Quick-Reference Guide. To access reddot: https://cms.hampshire.edu/cms
Using RedDot A Quick-Reference Guide To access reddot: https://cms.hampshire.edu/cms For help: email reddot@hampshire.edu or visit http://www.hampshire.edu/computing/6433.htm Where is... Page 6 Page 8
More informationPowerPoint 2016 Building a Presentation
PowerPoint 2016 Building a Presentation What is PowerPoint? PowerPoint is presentation software that helps users quickly and efficiently create dynamic, professional-looking presentations through the use
More informationIn the fourth unit you will learn how to upload and add images and PDF files.
Introduction Here at SUNY New Paltz, we use the Terminal Four (T4) web content management system (CMS). This puts the power of editing content on our college s webpage in the hands of our authorized users.
More informationFileNET Guide for AHC PageMasters
PageMasters have the permissions necessary to perform the following tasks with Site Tools: ACADEMIC HEALTH CENTER 2 Application Requirements...3 Access FileNET...3 Log in to FileNET...3 Navigate the Site...3
More informationUsing Dreamweaver CS6
3 Now that you should know some basic HTML, it s time to get in to using the general editing features of Dreamweaver. In this section we ll create a basic website for a small business. We ll start by looking
More informationCOMSC-031 Web Site Development- Part 2
COMSC-031 Web Site Development- Part 2 Part-Time Instructor: Joenil Mistal December 5, 2013 Chapter 13 13 Designing a Web Site with CSS In addition to creating styles for text, you can use CSS to create
More informationGoldfish 4. Quick Start Tutorial
Goldfish 4 Quick Start Tutorial A Big Thank You to Tobias Schilpp 2018 Fishbeam Software Text, Graphics: Yves Pellot Proofread, Photos: Tobias Schilpp Publish Code: #180926 www.fishbeam.com Get to know
More informationFlash IV- Video. Joe Struss. Nov. 12, Visit the IT Learning Pod s Online Web Site at:
Flash IV- Video Joe Struss Nov. 12, 2010 Visit the IT Learning Pod s Online Web Site at: http://css.ait.iastate.edu/ Copyright c 2010 by Creative Services / ITS Permission to reproduce all or part of this
More informationWelcome to the wonderful world of Dreamweaver 8. If you re an experienced
Chapter 1 Introducing Your New Best Friend In This Chapter Introducing the new features of Dreamweaver 8 Examining your Web site objectives Finding your way around in Dreamweaver Welcome to the wonderful
More informationEKTRON 101: THE BASICS
EKTRON 101: THE BASICS Table of Contents INTRODUCTION... 2 TERMINOLOGY... 2 WHY DO SOME PAGES LOOK DIFFERENT THAN OTHERS?... 5 LOGGING IN... 8 Choosing an edit mode... 10 Edit in context mode (easy editing)...
More informationICT IGCSE Practical Revision Presentation Web Authoring
21.1 Web Development Layers 21.2 Create a Web Page Chapter 21: 21.3 Use Stylesheets 21.4 Test and Publish a Website Web Development Layers Presentation Layer Content layer: Behaviour layer Chapter 21:
More informationCOPYRIGHTED MATERIAL. Using Adobe Bridge. Lesson 1
Lesson Using Adobe Bridge What you ll learn in this lesson: Navigating Adobe Bridge Using folders in Bridge Making a Favorite Creating metadata Using automated tools Adobe Bridge is the command center
More information1 Introduction Working with Folders Working with Images and Files Creating a Banner Image... 39
Inn Websitee User Manual Produced by the Umbraco Community Umbraco v4 [9. 16.13] Contents 1 Introduction... 3 1.1 American Inns of Court Inn Websites... 3 1.2 Introduction to Umbraco... 3 2 Getting Started
More informationPassword Memory 7 User s Guide
C O D E : A E R O T E C H N O L O G I E S Password Memory 7 User s Guide 2007-2018 by code:aero technologies Phone: +1 (321) 285.7447 E-mail: info@codeaero.com Table of Contents How secure is Password
More informationIntroduction to Cascade Server (web content management system) Logging in to Cascade Server Remember me Messages Dashboard Home
Introduction to Cascade Server (web content management system) Last Updated on Jul 14th, 2010 The College of Charleston's web site is being produced using a Content Management System (CMS) called Cascade
More informationENGL 323: Writing for New Media Repurposing Content for the Web Part Two
ENGL 323: Writing for New Media Repurposing Content for the Web Part Two Dr. Michael Little michaellittle@kings.edu Hafey-Marian 418 x5917 Using Color to Establish Visual Hierarchies Color is useful in
More informationAdobe Dreamweaver CS4
Adobe Dreamweaver CS4 About Dreamweaver Whether creating simple blog pages complex web sites, Dreamweaver provides users with a powerful set of web-design tools necessary f the task. Its userfriendly interface
More information