Adobe GoLive
description
Transcript of Adobe GoLive
Adobe GoLive
Edit and FTP your web pages to a web server
Objectives
Open Adobe GoLive Create and Edit Web Pages Use the Layout and Source Editor
modes FTP to the horacemann.org web
server Import text
Objectives
Import images Import video Edit pages live on the web
Video Introduction to GoLive
This video will preview GoLive
QuickTime™ and aSorenson Video decompressorare needed to see this picture.
Open up GoLive
On a Mac, go to the Applications folder and open up the GoLive folder and click on GoLive
On a PC go to the Start Menu and on the Adobe GoLive Folder select GoLive
Go to the File menu and select new page
Video
Layout
In the Layout mode, you can create or edit a web page by dragging and dropping items such as text or images. This is very similar to building a web page in MS Word. This part of the program does the HTML for you.
Source
In the Source mode, you can edit the HTML just as you would in Notepad or BBEdit. This mode gives you greater control over your page.
Syntax Checking
In the Source mode GoLive will check your HTML to make sure it is written properly. The colors indicate that the HTML is working correctly by grouping tags with colors. If the colors all look the same, you may have an error
Video 1 Video 2 Video 3
Importing Text
You can add text to document in GoLive by typing it in directly into the HTML or Layout mode. You can also copy and paste text into this area.
Video 1 Video 2
Importing Images & Video
You can import images by dragging them into the layout program, or by using the Object window in GoLive. You can do the same for any videos you may have.
FTP to the Web
To set up a connection to an FTP or WebDAV server: Choose Edit > Servers. Click the New button in the Available Servers dialog box. Type a name in the Nickname text box (This prevents confusion if you add more servers to the available servers list.)
Type an address in the Server text box. The address must start with "ftp://" for FTP servers and "http://" for WebDAV servers. (ftp://www.horacemann.org)
FTP to the Web
Type a path name in the Directory text box.
Type a user ID in the User Name text box. Select the Save option and type a password in the Password text box.
DO NOT SAVE YOUR PASSWORD ON THE COMPUTER!
FTP Video
Working with a Web Server
Once you are connected, go to your folder.
In your folder you have two main options to choose from
Uploading Files
To upload files you should 1. Open up the window where the files
are located 2. Open up the folder on the server
where you want to place the files
Uploading Files
Simply drag your files one by one, OR all together into the folder
Depending on the size of your files, it should take between 5 seconds up until a minute
Opening up a Live Page
You can open up documents posted on a web server by double clicking on the document and making any changes that are needed. After you make your changes save the document and preview in a web browser to make sure it works correctly.
Summary
You should review this presentation and the associated videos to make sure you have the full knowledge you need to FTP.
You can also test your FTP login from home using GoLive, or Microsoft Internet Explorer by typing in the following address:
ftp://www.horacemann.org
Project 8Integrating JavaScript
with HTML
Objectives
Discuss how to integrate JavaScript with HTML Insert <SCRIPT> tags on a Web page Write start and end <SCRIPT> tags Define and use flickering to draw attention Describe the background color property of the
document object
Objectives
Set the background color of a Web page using JavaScript
Save the HTML file Test the Web page Discuss JavaScript variables Extract the system date Use several variables to construct a message
Objectives
Describe the write() method of the document object Write a user-defined function that displays a
message and links visitors to a new Web site Describe how the setTimeout() method works Use the lastModified property to display the last
modified document date Print an HTML Notepad file
Introduction
JavaScript is an object-based language Uses built-in objects
Properties are attributes of objects Methods are actions performed on an
object
Introduction
An event is the result of a user’s action Event handlers are the way to associate
that action with the set of JavaScript codes you want executed
Opening a Web Page
Open the Public Folder. Start Notepad, and maximize the window. Click File on the menu bar and then click Open. When the Open dialog box displays, type *.htm in the File name text box
Open from the Public Folderthe Project 8 folder, clickfun.htm and then point to
the open button
Click the Open button
Inserting <SCRIPT> Tags on a Web Page
JavaScript code can go anywhere in HTML Place all JavaScript code between the <SCRIPT>
and </SCRIPT> tags Set the LANGUAGE attribute so the browser knows
how to interpret your code The HTML comment line hides any script language
the browser might not be able to interpret<SCRIPT LANGUAGE=“JAVASCRIPT”><!– Hide from old browsers
Entering the Start <SCRIPT> Tag and Comment
Click the blank line (line 10) above the </BODY> tag
Type <SCRIPT LANGUAGE = “JAVASCRIPT”> and then pressthe ENTER key. Type <!– Hidefrom old browsers and then
press the ENTER key
Using a Flicker on a Web Page
Changes the background color in rapid succession
JavaScript allows you to set the background color multiple times, while HTML only allows you to set it once (in the BODY tag)
Creating Flicker on the Web Page
Click line 12. Press the SPACEBAR four times. Type document.bgColor=“red” and then press the ENTER key. Type document.bgColor=“white” and then press the ENTER key
With the insertion pointon line 14, enter the four
remaining lines of code asshown on the next slide
Setting the Background Color to a Static Color
The last color you specify will be the browser’s final background color
With the insertion point on line 18, type document.bgColor=“blanchedalmond” and then press the ENTER key
Completing the JavaScript Selection
It is now necessary to end the comment tag and close the <SCRIPT> tag
If necessary, click line 19. Press the ENTER key to create another blank line
With the insertion point on line 20, type //-> and then press the ENTER key. Type </SCRIPT> and then press the ENTER key
Saving the HTML File
Make sure you save this file in your folder, not on the Public Folder!
Type funwithphonics.htmin the File name text box, andthen double-click the Project 8
folder. Point to the Save button
Click the Save button
Testing the Web Page
Start your browser Open funwithphonics.htm and then
press the ENTER key
JavaScript Variables
Used to store values temporarily Global variables Local variables Variables are considered global, except
if they are declared in a user-defined function, in which case they are local
JavaScript Variables
JavaScript Variables
JavaScript variables are loosely typed You are not required to define the data type JavaScript defines the data type for you
String data types var LastName = “Simon”
Numeric data types var pageCnt = 1
Boolean data types var Done = false
Extracting the System Date
Built-in Date() object Can be manipulated only by creating a new object instance
var variable = new object var birthDay = Date(“Jul, 13, 1975”)
Returns July 13, 1975 to birthDay var curDate = new Date()
Returns the current system date and time information as an object instance
Extracting the System Date
The variable curDate cannot be manipulated
To extract the date, convert curDate to a string using the toLocaleString() and substring methods
Extracting the System Date
Define a new object for the date in MM/DD/YY HH:MM:SS format
var tNow = new Date()
Extract the date and time and store it in MM/DD/YY HH:MM:SS format
var tlocDate = tNow.toLocaleString()
Extract only the date portion from the tlocDate variable using relative addressing
var tDate = tlocDate.substring(0,10)
Extracting the System Date
Relative addressing
Extracting the Current System Date Using the Date() Object
Click the Notepad button on the taskbar to activate the Notepad window. Click line 19 below the document.bgColor=“blanchedalmond” statement
Type var tNow = new Date() and thenpress the ENTER key. Type
var tlocDate = tNow.toLocaleString()and then press the ENTER key. Type
var tDate = tlocDate.substring(0,10)and then press the ENTER key
Displaying the Current System Date
Use plus signs (+) to concatenate (join) strings and variables
Displaying the Current System Date in the Initial Greeting
Click line 22. Press the SPACEBAR four times. Type document.write(“<H2><CENTER>Welcome, today is “+tDate+”</CENTER></H2>”) and then press the ENTER key
Constructing a Message Using Several Variables
Click line 23. Type var intro1 = “Hi, thanks for visiting our Web site, but we have moved. Please make a note “ and then press the ENTER key
Type var intro2 = “of our new URL (www.funphonics.com) and notify the Webmaster about our new “ and then press the ENTER key
Constructing a MessageUsing Several Variables
Type var intro3 = “location. Click<A Href=‘http://www.scsite.com/’>here</A> or wait 15 seconds “ and then press the ENTER key
Type var intro4 = “to be moved automatically to our new site.” and then press the ENTER key
Constructing a MessageUsing Several Variables
Type var introMsg = intro1+intro2+intro3+intro4 and then press the ENTER key
Writing the Message on the Web Page
Click line 28. Press the SPACEBAR four times. Type document.write(“<H4><FONT Color=‘firebrick’>”+introMsg+”</H4></FONT>”) and then press the ENTER key
Saving a File
Save your file in your folder
Click Save
Testing the Web Page in the Browser
Click the Fun with Phonics button on the taskbar to activate the browser. Click the Refresh button on the browser toolbar
Activating the Notepad Window
Click the Notepad button on the taskbar to activate the Notepad window
Calling a JavaScript Function
Two basic methods to call a function Event handlers and object methods Code the function name in a JavaScript
section at the logical point of execution setTimeout() method
Causes a delay before an instruction is executed
Calling a JavaScript Function
Writing the setTimeout() Method to Execute the chngSite() Function
If necessary, click line 29. Press the SPACEBAR four times
Type setTimeout(“chngSite()”, 15000) and then press the ENTER key
Displaying the Last Modified Document Date
If necessary, click line 30. Press the SPACEBAR four times
Type document.write(“<BR><H4><CENTER>This document was last modified “+document.lastModified+”</CENTER></H4>”) and then press the ENTER key
Writing a JavaScript User-Defined Function
A function is JavaScript code written to perform certain tasks repeatedly
Built-in functions
Writing a JavaScript User-Defined Function
User-defined functions Written by the Web developer
Functions can have data passed to it To call a function means to have
JavaScript execute the function
Entering the chngSite() User-Defined Function in the HEAD Section
Click the blank line (line 4) between the end </TITLE> tag and the end </HEAD> tag
Type <SCRIPT LANGUAGE=“JAVASCRIPT””>and then press the ENTER key. Type
<!—Hide from old browsers and thenpress the ENTER key
Entering the chngSite() User-Defined Function in the HEAD Section
Press the SPACEBAR four times. Type function chngSite() { and then press the ENTER key. Press the SPACEBAR eight times. Type alert(“You are about to be transported to the new site location!”) and then press the ENTER key. Press the SPACEBAR eight times. Type location = “http://www.scsite.com/” and then press the ENTER key. Press the SPACEBAR four times. Type } and then press the ENTER key. Type //-> and then press the ENTER key. Type </SCRIPT> and then press the ENTER key
Saving the File
Click Save on the File menu
Testing the Web Page
Click the Fun with Phonics button on the taskbar
Click the Refresh button on the browser toolbar
If you are connected to the Internet, click the OK button when the dialog box displays with the alert message
Click the Back button on the browser toolbar to return to the Fun with Phonics Web page
Printing the HTML File Using Notepad
If necessary, click the Notepad button on the taskbar. Click File on the menu bar and then point to Print
Click Print
Closing Notepad and Your Browser
Click the Close button on the browser title bar
Click the Close button on the Notepad window title bar
Summary
Discuss how to integrate JavaScript with HTML Insert <SCRIPT> tags on a Web page Write start and end <SCRIPT> tags Define and use flickering to draw attention Describe the background color property of the
document object
Summary
Set the background color of a Web page using JavaScript
Save the HTML file Test the Web page Discuss JavaScript variables Extract the system date Use several variables to construct a message
Summary
Describe the write() method of the document object Write a user-defined function that displays a
message and links visitors to a new Web site Describe how the setTimeout() method works Use the lastModified property to display the last
modified document date Print an HTML Notepad file
What You Should Know
Project 8 Complete
PLEASE REVIEW FOR EXAM!