Transcript Document

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
Quic kT ime™ and a Sorens on Video dec ompres sor are needed to see thi s pic ture.
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 8
Integrating 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 Folder
the Project 8 folder, click
fun.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 press
the ENTER key. Type <!– Hide
from 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 point
on line 14, enter the four
remaining lines of code as
shown 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.htm
in the File name text box, and
then 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 then
press 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 Message
Using 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 Message
Using 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 then
press 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!