An Introduction to
Dreamweaver and PHP
1
Goals
Our goals are
•To become familiar with the Dreamweaver environment
•To introduce some basic HTML
•To introduce some simple PHP
•To compare simple PHP (server-side) code with simple
JavaScript (client-side) code
We will do so by designing a page that looks like the following.
2
Possible Preliminary step 1: After a fresh install,
Dreamweaver may ask if you want to work in the
Designer or Coder version of its environment.
3
You can change your workspace preference by going to Edit/Preferences
on the menubar and clicking on the Change Workspace button
4
Use the radiobutton to choose the desired
workspace preference. Click OK and OK.
5
Designer View:
6
Possible Preliminary Step 2: After a fresh install,
Dreamweaver may ask you for a serial number.
7
Starting the page: Next you can choose whether to open an
existing page or create a new one. When creating a new page,
you must select the type of page.
8
PHP versus HTML: The php extension
• PHP code is embedded within HTML
code.
• However, a page with PHP code must
have the php extension and not the htm or
html extension.
– Because the PHP is embedded within HTML,
we will still often refer to the file as an HTML
document.
• Why the php extension?
9
Why the php extension?: A note about
clients and servers
• There are two main actors involved in viewing
a webpage.
1. The viewer’s computer acts as a client. When
surfing or navigating to a page, the client machine
requests a page be sent.
2. With the webpage is associated a web server,
which handles the request and delivers a response
(the page) to the client.
• The php extension informs the server that it
must do more than just send the file.
Moreover, there must be an associated PHP
server to perform this extra work.
10
Result of starting: The Code view of
the new page.
Though we are making a php file, thus far
we have a simple HTML file.
11
HTML
• HTML stands for Hypertext Markup Language.
– Hypertext refers to the presence of links in a
page. The links allow a viewer to move
directly to another document that may have a
different location.
– Markup Language refers to a coding system
that indicates how a document is structured or
how it should be rendered (using ordinary
printable characters rather than special
control characters).
12
HTML Tags
• To distinguish between text and the marking up
thereof, HTML uses tags.
• HTML tags are keywords placed within angle
brackets .
• Many HTML tags work in pairs. There is an
opening tag and a closing tag which impose
their effect on the hypertext enclosed between
them.
– The closing tag has the same keyword as the opening
tag but the keyword is preceded by a slash.
13
• The example above shows some HTML tag pairs.
– The and pair surround the HTML document.
– The and pair enclose some explanatory information
regarding the document.
– The and pair contain the document’s title.
– The and pair house the information that is to be
rendered on the page.
• Note the hierarchical structure of tag pairs within tag pairs (also
called nesting).
14
To change the page’s title, edit either textbox on the
document toolbar or the text between the tags.
15
To add a comment, place the cursor where you want the
comment and go to Insert/Comment on the menubar.
A traditional comment has no
effect on either the structure or
rendering of the document. It is
seen only when the code is viewed
and is used to describe the page
or some feature thereof.
16
The comment is placed between
the .
17
To change some of the page’s features such as the font or the
background, go to Modify/Page Properties on the menubar.
18
The resulting dialog box allows one
to set various properties.
19
E.g. use the dropdown list to make
a choice of font family.
20
Click on the palette button next to
Text color to choose a font color.
21
Color Codes
• One could also enter the color code for one’s
choice in the corresponding textbox.
• In HTML color codes use the RGB scheme in
which one determines the amount of red, green
and blue that will be combined to make the color
by choosing three numbers each between 0 and
255.
• The numbers are expressed as hexadecimal
numbers (base 16) and concatenated (placed
one after another) and preceded by a pound
sign #.
22
La Salle logo blue color code calculation
Here we have used
Adobe Photoshop
to determine that
Red=3, Green=45,
and Blue= 87.
23
La Salle logo blue color code calculation 2
To convert from decimal numbers to
hexadecimal numbers, you can use the
calculation under Start/Programs/
Accessories/Calculator. Click on
View/Scientific and enter the decimal
number to be converted. And the click
on the Hex radio button.
The result should have two hexadecimal
digits (0-9 or A-F). If the result has only
one digit, a “0” should be placed in front
of it.
Putting the Red, Green and Blue results
together yields
La Salle logo blue: #032D57
La Salle logo yellow: #FFD100
24
Use the Browse button and the resulting dialog box to
locate an image file to use as a background.
25
Path warning message
26
Embedded versus referred to
• When one inserts an image in a Word
document, the image is embedded into the
Word document. As a result if you want
someone to view the document, you only need
to send one file – the Word document.
• When one inserts an image in an HTML
document, the image is referred to by the HTML
document. As a result if you want someone to
view the document, you must send two files –
the HTML document and the image file.
27
Relative versus Absolute Path
• When the HTML document refers to the image
file, it provides a path so that the image file can
be located.
– A file’s path may be absolute (a complete (full) path
or an explicit, full URL, e.g.
http://www.lasalle.edu/index.htm) or relative (a shorter
path that starts with the same location as the file
doing the referring).
• Image files are generally referred to by a relative
address.
– The previous warning message occurred because we
had not saved the HTML file. Since the HTML file
had no location, a relative address could not be
provided for the image file.
28
Note the address given refers to the computer’s C drive. This address will
probably be useless when the file is moved to a web server where it can
be viewed by clients.
29
Style tags
• The new additions were placed in a style tag in
the head portion of the document.
• The actual style code was then placed inside a
comment within the style tags.
• This approach is used to deal with various
versions of browsers.
– If the browser understands the style tag, it knows to
look in the comment for the style code.
– If the browser does not understand the style tag, then
it will ignore the style code since it is placed in a
comment.
30
Cascading Style Sheet
• If one is making a website consisting of
many web pages that will have the same
style, then a better approach is to place
this style code in a separate file called a
cascading style sheet and have all of the
individual pages link to it.
• This way we only have to change one file
to update the style of all of the pages.
31
Next use the File/Save As option on the menubar and the
resulting dialog box to save the file. Recall it should have a
php extension. (Do not have spaces in the file name.)
32
In this case, Dreamweaver automatically
updated the path to a relative path.
33
One can see what the page will look like in Design view or
see code and design simultaneously in Split view.
34
Use Insert/Table on the menubar and the resulting dialog
box to make a table with 4 rows and 2 columns.
35
Highlight the table and click on the arrow next to Properties
at the bottom to expand the Property inspector
36
Use the Property inspector to alter width,
background color and alignment.
37
Click in the top cell and drag across to highlight both cells
in the top row, then go to Modify/Table/Merge Cells.
38
Table with merged cells in Design and in Code View
(merging is achieved by colspan attribute in code)
39
Table Tags
• The main tags involved in rendering a
table are
– The tags, which “delimit the
table” – that is, indicate where the table code
begins and ends.
– The (table row) tags, which delimit a
row within the table.
– The (table data) tags, which delimit
a cell within a row.
40
Webopedia delimiter definition
41
Tag Attributes
• Note that the merged cells were achieved
using the keyword colspan as follows
• The above code is an example of a tag
with an attribute.
• In the newer (more compliant) rules for
HTML code attributes are set using a
equal sign and the value in quotation
marks.
42
Place the cursor in the top row, go to Insert/Image on the menubar, and
use the dialog box to locate the La Salle logo image file
Note that the image
preview tells one the
size of the image.
43
Logo added to first row
There is a web
site navigation
convention
that the logo is
a link to the
home page.
So let’s do that
next.
44
Right click on the image, go to Make Link on the context sensitive menu,
enter La Salle’s homepage in the URL textbox. Click OK.
45
Code for hyperlinked logo
• The resulting code is
– Where is the anchor tag and its href attribute is
set to the destination URL.
– And where is the image tag with its src
attribute set to the image file name (a relative path).
• Note that the image tag is not a paired tag. The newer rules
for HTML would have you add a space and a slash just
before the closing angle bracket > as shown below.
46
Aspect Ratio
• If one were to change the image size
attributes, width and height, they should
be changed proportionately to maintain the
image’s aspect ratio.
– Both numbers should be multiplied (or
divided) by the same amount.
– Alternatively, if one attribute is left
unspecified, then the other will be set to
maintain aspect ratio.
47
Entering Text
• In the remaining rows we will display the
date using HTML, PHP and JavaScript.
• In the first column, enter the terms
“HTML”, “PHP” and “JavaScript”
respectively.
– In Design view, place the cursor in the
appropriate cell and type.
– Or in Code view, identify the appropriate
pair and type code between the
tags.
48
Place the cursor in the second column, second row and go to
Insert/Date on the menubar and use the dialog box to select the
desired format.
49
HTML Date Code Version: just text. The file would have to
be updated each day to display the correct date.
50
With the cursor in the second column of the third row, go to
Insert/PHP Object/Code Block on the menubar.
51
Start typing PHP code print date(‘F j, Y’);
Note the word print turned blue – it’s a keyword.
52
Webopedia keyword definition
53
Continue typing PHP code print date(‘F j, Y’);
Note that not only
does date turn blue
to indicate that it is a
keyword, but also
after typing the
opening
parenthesis, a tip is
displayed to inform
you that a string
corresponding to the
date format is
needed. The item in
the square brackets
is optional.
54
Finish typing print date(‘F j, Y’);
Note that the
format string is in
single quotes and
that Dreamweaver
puts it in another
color.
55
The semicolon delimiter
• A delimiter is some character or set of
characters (code) that is used to determine
where one thing ends and the next thing begins.
• PHP uses a semicolon to delimit statements. A
statement is a small unit of code (an instruction)
which has an established effect.
• We inserted a PHP code block – a block is a
set of statements.
– Here our block will only have one statement.
56
The functions print and date
• A function is a set of code with a name and a defined
action.
• A function may need some information to perform its
action – this information is sent by using arguments
(data passed to the function).
• The arguments are usually placed in parentheses when
the function is being called upon to perform its action.
– The format string seen in the date is an argument.
– The print function also has an argument (the thing to be printed)
but it uses a different style with its argument simply following it
on the line with no parentheses.
57
Go to Insert/PHP Object/Comment on
the menubar
58
Anything typed between the /* and the */ will
correspond to a PHP comment.
This type of comment
is known as a C-style
multi-line comment
because this was the
way to designate a
comment in the C
programming
language.
Another style is to use
two slashes // and
anything following the
two slashes on the
same line is a
comment.
59
Dreamweaver uses yet another color
for comments.
60
The PHP icon
Note that in
Design,
Dreamweaver
inserts a PHP
icon to indicate
that there is
PHP code in
this portion of
the page. This
icon will not be
seen by the
viewer of the
page.
61
Place the cursor in the 4th row, 2nd column, go to Insert/Tag. Choose
HTML Tags and script in the dialog box. Click Insert.
62
Use the drop-down list to choose JavaScript as the language and
text/javascript as the type. Click OK and then Close the previous
dialog box.
63
Result: in which one places the
JavaScript code
64
Enter the JavaScript code seen below for
writing the date
65
Using Dreamweaver to transfer
documents to web server
• The document must be sent to a machine
that is both a web server and a php server.
• A standard way to move files around on
the Internet is to use FTP (File Transfer
Protocol).
• This can be done using a browser or an
FTP client (such as WS_FTP) or within
Dreamweaver.
66
Go to Site/Manage Sites …, click on the
New … button and click on Site from the list
67
Give the site a name and click Next. Then click the Yes radio button,
choose PHP MySQL from the drop-down list and click Next.
68
Select the Edit locally, then upload radio button. Then click on the
folder icon and choose a (local) folder for the site.
69
70
Fill in the information regarding the FTP
connection.
Username and password should be same as
logon to the Explorer domain
(password first 5 soc. sec., an underscore, and
the first three letters of your username)
71
Click the Test Connection button
72
Enter the URL of the root and click on
Test URL.
73
Check-in and check-out is used to manage a site with multiple authors.
We’ll skip this feature here. Review information and click Done.
74
Click Done on the Manage Sites dialog box.
75
Now under the files tab, you can view the site (either local or remote).
Or click on the Expand/Collapse button to see both.
The Expand/Collapse button
76
Click on the Connects remote host button.
(May need to click on + to expand folders.)
77
Use the Put files button to upload the files to
the remote site. Click OK on dialog box.
78
Click on the Expand/Collapse button.
79
View the remote file in a browser. Click on
View/Source to see the code.
80
Code the results from View/Source in browser.
Note that we see no PHP code here. Before the web server responded
with the file, the PHP server executed the PHP code (on the server side)
which printed the date. It is this edited file that was sent by the web server
to the client.
81
References
• PHP for the World Wide Web, 2nd edition,
Larry Ullman, Peachpit Press, 2004.
• http://www.webopedia.com
82