1 GRC 119 Assignment 3 Setting up Dreamweaver, creating reviews

GRC 119
Assignment 3
Setting up Dreamweaver,
creating reviews.html,
and creating an ext CSS stylesheet
Tasks:
1. Setting up Dreamweaver and defining a site
2. Update existing HTML pages into proper HTML5 encoding
3. Add alt tags to all images for accessibility
4. Create a new webpage, reviews.html
5. Add an image to each review paragraph
6. Add various HTML tag examples
7. Add an HTML table
8. Adding an external style sheet to reviews.html
9. Check all your web pages for validation
10. Upload all pages using Dreamweaver’s built in FTP
11. Email Instructor your URL for reviews.html
Please note:
If printing out this assignment please only print pages 1-25.
1
Assignment overview:
This week we will be introduced to Dreamweaver, the premier webpage authoring
program used for web design, web development, and website management. We will use
Dreamweaver to complete this week’s assignment. This assignment builds off of
index.html and sampler.html, created in A2. Assignment 2 cannot be graded until you
have emailed your URL link to the instructor, if necessary please refer to the instructions
for A2 and make sure you have met all its requirements. For A3, we will add a new page
reviews.html, add an external CSS style sheet, validate all of our pages, and then upload
them to our web host account using Dreamweaver.
Dreamweaver Primer:
Before you are able to use Dreamweaver we will need to configure the program in order
to properly save our web pages and manage our website (.html and related files). We also
need to configure Dreamweaver in order to be able to publish to our web hosting account
using Dreamweaver’s built-in FTP program. You will need to set up a “New Site” within
Dreamweaver, a new site represents a web site you will be creating and managing and
ultimately uploading to a remote web host. You must always save all your GRC 119 web
site related materials inside a designated local folder. You should have a GRC119 folder
created where you have saved A1 and A2. In DW we define where this local folder is
located on your computer and this is where all of your files for our particular website are
saved.
Dreamweaver CC
Please note these instructions are written for Dreaweaver CC. This version is a little
different than older non CC versions. I have updated these instructions to help explain
where the differences are. If you are using an older version there are some Instructions at
the end of this assignment showing some of the differences.
2
Step 1 – Setting up Dreamweaver and defining a site
•
Open Dreamweaver (DW shortcut located on the dock in the lab computers)
•
Within Dreamweaver click on Site > New Site
(CS 5.5 screenshot shown and CC essentially the same)
Provide under Local Info your own unique data input
Site name:
Lastname 119
(type any name for your site name info, name should help identify your
webhost account)
Local Site folder:
(click on folder icon and locate your 119 class
website folder)
Note:
(for local site folder you are identifying locally where you are saving your
website files. You created a 119 class folder in A1. You will be saving all
of our website and related course work into this folder.)
3
•
Next click on the Servers category
•
Next click on the plus sign + in order to add our ftp information
4
•
Under the Basic option fill out the following fields
Server Name:
(type any name like…)
lastname 119
Connect using:
FTP
FTP Address:
(hostname/ftp example…)
Username:
your username
Password:
your password
Root Directory:
(leave blank unless your web host specifies a folder like
subdomain.domainname.com
public_html or htdocs or the folder where all your web files
must go inside)
•
Click on the Test button
•
If your account info has been entered correctly you should receive a confirmation
that you have successfully connected.
•
If you were unsuccessful then you will have to verify your account info, test
again, and connect successfully before continuing.
5
•
If you are successful then continue below, if using a shared computer make sure
you have unchecked the Save password option.
•
Click on OK to close the Site Definition window.
Step 2 – Update existing HTML pages into proper HTML5 encoding
We need to update our pages from A2, index.html, sampler.html pages to HTML5. You
will need to manually update each page individually by adding some code to each page.
•
Make sure index.html and sampler.html pages are open.
•
Click on the code view.
•
Add the HTML5 DTD tag shown below, must add above the current opening
HTML tag.
•
The DTD tag defines what version of HTML we are using in this assignment we
are using HTML5.
•
See the next page for an example of where the tag goes
•
Copy and paste or type exactly as shown below.
<!DOCTYPE HTML>
•
Make sure to add the above DTD tag to both of your webpages.
ü HTML5 explained:
HTML5 is a version of HTML. It now is the most commonly used
version for new websites. There are older versions of HTML like
XHTML and HTML 4.01 but they are not usually used anymore. For
this class we will create all of our pages using HTML5. Each version
of HTML has dif tags and rules that are supported and must be
followed. We are specifying HTML5 so the web browser knows how
to best display our webage.
6
•
Next, we need to add the following meta tag inside the head of both webpages,
put right after the opening head tag. The meta tag defines which character set it
was written in (English).
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
•
Make sure both web pages, index.html and sampler.html, look similar to the
following after adding the DTD tag and Meta tag
•
Code and page will be similar to the following with more content in the body
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
•
File>Save All
•
Next we will verify that we used the correct syntax for tags known as empty
elements.
•
Please note there are some changes to single tags in HTML5.
•
Next we will check all your images, horizontal rules and line breaks.
•
The correct syntax is shown below.
•
The following are called empty tags and are html tags that are single tags meaning
they do not come in pairs.
•
In HTML5 empty tags no longer need a slash at the end on the tag.
•
Check both pages and rewrite to the following if necessary:
7
Correct syntax for single tags:
<img src="" width="" height="">
<hr>
<br>
•
Old tags and syntax shown below, please note, the closing slash or / is no longer
required in HTML5 on empty or single elements
/
<img src="" width="" height="" >
/
<hr >
/
<br >
Empty elements explained:
HTML elements with no second closing tag are called empty elements
(aka single tags), the line break or <br> is an empty element because it is
without a closing tag (the <br> tag defines a line break). In the older
version of XHTML, all elements had to be closed. Adding a slash inside
the start tag, like <br />, was the proper way of closing empty elements in
XHTML. But now in HTML5 we no longer use the closing slash or /
•
In the next step you will learn how to add alt tags to your images.
8
Step 3 – Add alt tags to all images for accessibility
•
Add image alt tag to all of your images.
•
Alt tags should describe what that image represents or what the image is showing
a picture of.
•
Some viewers and devices that are not able to display your images use the alt tag
to communicate to the viewer what is displayed by the image.
•
Switch to your sampler.html page
•
Select one of the images on this page and add a short description under Alt in
Properties window. Okay to use spacing and commas see example below
•
The Properties window is open by default, if you don’t see the window you can
reopen Window>Properties
•
Repeat steps and add alt tags to all your images
•
File>Save All
Example:
img or image tag with an alt tag as seen in code view:
<img src="http://www.cnn.com/image.jpg" alt="People waiting for food">
(Alt tags are required when validating with the new version of HTML5,
they are important for people with accessibility issues and those with
disabilities that use screen readers and any devices that can’t display
pictures and search engines also use to identify the type of content an
image represents.)
9
Step 4 – Create a new HTML5 webpage, reviews.html
In this next step we will create a new page called reviews.html
•
Remember we want to encode this page the same as the other pages, HTML5
•
File > New
•
If prompted select Blank Page, HTML (page type), <none> (layout), HTML5
(DocType).
•
Most newer versions of DW create an html5 page by default.
•
DW creates a new blank page
•
Save your page, File>Save or Command+S (mac) or Cntrl+s (pc)
•
Save this page as reviews.html
•
Make sure to save inside your class website folder.
•
Important note: It is not necessary to create an A3 folder inside our class website
folder.
•
The three web pages we have so far created should be saved at the root of your
119 folder, meaning they are not inside of any additional folders inside the root
folder.
•
Next, add a unique title, title field is located towards the top, next to Title:
•
Just to review, the title field does not show up visible in the main part of the page
but appears in the top header of the web browser
•
Save and Preview in a web browser, File>Preview in Browser>IE or similar
•
Next, we will add two separate paragraphs to the reviews page
•
In DW, a paragraph is created when you hit the return/enter key
10
•
Type some sample text in each paragraph so that you can easily see the two
paragraphs.
•
Next add two short reviews of two dif tv shows, movies, or websites
•
Add one review for each paragraph
•
Required, include an author, date and an example of a hyperlink.
•
In order to create a hyperlink select the desired text and then type the absolute
URL within the Link field on the properties window/panel.
•
Add unique content to each of the two paragraphs.
•
Optional try adding a line break tag <br> or shift+return inside of your paragraph
to help format the paragraph. Shift+Return inserts a line break or carriage return,
no extra line spacing is added like a paragraph
•
Required, add examples of Bold and Italicized text inside each review paragraph.
•
Select some text and then press the B key on the properties window/panel, B for
Bold (bold uses the strong tag <strong> </strong>)
•
Select some text and then press the I key on the properties window/panel, I for
Italicize (Italicise uses the em tag <em> </em>)
•
The following is how my paragraph looks so far as seen in code view.
(your paragraph will look different, do not use my exact copy please):
<p>
<a href=" http://www.familyguy.com/ ">Family Guy TV show</a>
<br>
<em>review by Adam Valentiner </em>
<strong>1-11-2015</strong>
<br>
Sick, twisted, politically incorrect and freakin' sweet. The animated series features the
adventures of the Griffin family. Each week character attempts to solve problems
unsuccessfully. </p>
•
Verify you have included an author, date, and an example of a hyperlink, bold,
italicize and optional line break in each paragraph.
•
Verify that you have written two reviews with each in their own paragraph.
•
File>Save All.
11
Step 5 – Add an image to each review paragraph
•
Next, we want to add an image inside each review paragraph
•
Place the cursor where you want the image to appear inside the paragraph
•
Insert>Image or alternatively you could use the “Insert” bar on the “Common”
tab click on the Image icon (Image icon says Image when you mouse over it)
•
Remember to also add an alt tag by selecting image and add a short description in
the Alt field.
•
Note: If there is any text from the paragraph right after your image you will notice
the text displays at the very bottom of the image. This usually looks awkward and
it is recommended you either add a line break by pressing shift+return or select
image and on the properties window select Align Top, moves text up to top of
image
•
Optionally, try adding a border to your images to make them look finished.
•
Select image then on the Properties window under Border select a value like 3
(pixels), please note, not sure if this feature is still available in CC
•
Required, make each image hyperlink to an external website
•
Select image and then type a absolute URL on the Properties window under Link.
Absolute url example:
http://www.art.com/images/tree.jpg
•
Make sure to type your own URL for each image after first selecting the image
and then adding the URL under Link
•
Optional: If you want the hyperlink to open in a new window select _blank under
Target.
•
Preview in Browser f12, make sure to test hyperlink by clicking on each image.
•
Verify that each paragraph must have an image that is also a hyperlink.
12
Step 6 – Add various HTML tag examples
•
Next, somewhere on the review page, but not inside an existing paragraph, add an
ordered list with at least three favorite movies, tv shows, games, or things to do
•
Click before or after an existing paragraph, press enter or return to go to a new
line
•
In order to create the list you first type out each of the items separating the items
by pressing return.
•
After typing all three items select them and then click on the ordered list
(numbered list) option located on the Properties window.
•
Add some kind of paragraph right above the list describing what the list is
•
This is what the code view would look like. Each of the movies is known as a list
item.
<p>These are my 3 all time favorite movies:</p>
<ol>
<li>Jaws</li>
<li>Star Wars</li>
<li>ET</li>
</ol>
•
Next, somewhere on the page but not in a paragraph insert a horizontal rule tag.
Insert>HTML>Horizontal Rule
•
Horizontal rule is sometimes referred to as a horizontal line, it is simply a bar that
appears across the horizontal width of the page
•
If you look at your code this is what the tag looks like <hr> tag.
•
Next, somewhere on the page but not in a paragraph provide an example of the
heading tag, sizes available h1-h6.
•
You might want to put this heading at the very top of the page.
•
Type some text to use as a heading and then select the desired text and on the
Properties window under format select a heading option, they are sized heading 1
through heading 6, Heading 1 is the largest size.
•
This is what the code view would look like for an h1 heading
13
H1 tag example:
<h1>Welcome to my review’s page</h1>
•
In the next step we will be creating a table example
Step 7 – Adding an HTML table
In this next step you will learn how to add an HTML table using Dreamweaver. We
already created a table in A2 on or index page to add links to our assignments. This step
will show you how to add a table within Dreamweaver. Tables are useful for structuring
data. Tables and look like a grid similar to a spreadsheet.
•
Next, at the bottom of the page we will create a table which will have several
rows and columns
•
Click at the bottom of your page
•
Press return to move the cursor down a few lines.
•
Every time we press return DW adds blank paragraphs
•
Next, we will add a table
•
In DW select Insert>Table (see next page for values)
(use values similar to those below)
Rows: 4
Columns : 4 rows
Table width: 400 pixels
Border thickness: 1 pixels
•
Try adding some content inside your table
•
Try adding a different background cell color for each cell in your table example
•
Click inside a cell and click on the Bg option on the on the properties
window/panel
•
Try making table evenly spaced so cells appear universal in size. You can click on
the edge of the columns to resize or enter width values inside cells.
•
Try adjusting the border size
•
Add a background color to your table
14
•
Select the edge of table, switch to CODE view at top, inside the table opening tag
<table> type the following
•
bgcolor="#FFFF00"
You can change the color by selecting the desired color or replacing the hex color
value
•
Your opening table tag should now look similar to the following
<table width="400" border="1" bgcolor="#FFFF00">
•
Note this is using html to style the table. It is recommended that you use CSS to
style things in your webpage. Feel free to come back later and use CSS to style
this table once we have explained how to work with CSS.
•
Switch back to design view, click on Design at the top
•
Make sure you add some content such as text inside of your table
•
Insert at least one image somewhere in your table
•
Select desired cell, insert an image in DW, Insert>Image
•
Select one of your images from A1
•
Add an alt description on the Properties panel.
•
Note: you will either need to put images into your course website folder or find an
absolute address to an image.
•
If your images are too big select an image and then resize by clicking in the
corner of an image and while holding the shift key drag the edge of the image in
•
This technique uses HTML to resize the image but doesn’t change the original
image
•
If you want to center table in the page select table by clicking on the right side or
edge, once selected the table properties are shown choose Align>Center
•
Optional, try adding cell padding to your table, inserts space around the content
and the cell
•
Save (command/control+s)
•
Make sure you have saved your page as reviews.html
•
Preview in Browser by pressing f12 (pc) or file>preview in browser
•
Add additional content as desired
15
Step 8 – Adding an external style sheet to reviews.html
In this next step you will be adding an external style sheet to our reviews page. The
following steps and screenshots are for Dreamweaver CC
•
CSS is defined and managed in the CSS Designer window, open via
Window> CSS Designer
•
Under CSS Designer>Sources
•
Click on the + (Add CSS Source)
•
And then select Create A New CSS File
•
Within the new window click on Browse and define the location where you want
to save the file, save in our root 119 folder/directory. Make sure to type a name
like:
•
119website.css
We are creating an external CSS file, named with the .css file extension
16
•
Click on Save and then Ok
•
Next under Selectors tab, click on + Add Selector
•
A body (tag style) should now appear under selectors
17
•
Select body and under Properties tab you will see many options for styling the
body (tag)
•
Scroll down and find background-
•
Select a Background color using the color picker
•
Screenshot shown on next page
18
19
•
The following is the CSS code for the style we just created for our body. This
example defines a “rule” or style for our <body> html tag. Anything located
within our body will inherit this style, in this case a webpage background color of
silver.
•
Dreamweaver wrote the following code into our external CSS file. This code can
be seen in the external CSS file.
body {
background-color: #FFFFCC;
}
•
Note: you can even view and even edit the external style sheet file either inside
DW or with a text editor, just like a web page. If you want to view the CSS code
view of an external CSS file click on the CSS file name next to Source Code,
named 119site.css in my example below. After viewing always switch back to
Source Code or click Design view.
20
•
The following page shows an example of the code reference inside our HTML
page that shows the link to the external style sheet, link appears in the head. This
is the code DW automatically writes which links our web page to the external
CSS file. External CSS is the preferred method in web design since one style
sheet can update your entire site, external is the required method for our reviews
webpage. The other methods are known as Internal and Inline CSS style sheets.
Code view of link to ext CSS file
<title>To Do GRC 119 Fall 2008 Adam Valentiner</title>
<link href="119site.css" rel="style sheet" type="text/css" />
</head>
•
Next, within our external style sheet add a repeating background image.
•
Please note: You must first find a graphic image to use as a background and copy
it into our class website folder or find its absolute URL! It is recommended you
put inside an images folder and must be within the 119 root folder.
•
Under selectors make sure body is still selected
•
Under Properties scroll down to background-image
(located right below the background property you prev created)
•
Select your desired image, needs to be located somewhere in the 119 folder, and
click Ok.
•
The following example of the code view for our body rule in our 119site.css file.
In this example the bg image is in an images folder and inside this folder there is a
file named background.gif.
body {
background-color: silver;
background-image: url(images/background.gif);
}
•
Next we will add font, size and color to our body tag style also called a rule.
•
Select body and under properties scroll down and add font, size and color.
21
•
The following is an example of the code view for our updated body rule in our
119site.css file.
body {
background-color: silver;
background-image: url(images/background.gif);
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
}
•
Just to review, the body style or rule we just created is known as a tag style / rule
because it is styling the html tag body.
•
If you want to view the CSS code view of an external CSS file, click on the CSS
file name next to Source Code, named 119site.css in my example. After viewing
always switch back to Source Code or click Design view.
Step 9 – Check all your web pages for validation
•
Next, we will attempt validate our pages to see if there are any problems with our
code.
•
First make sure all three pages are open in DW, index, sampler and reviews.
•
Before we validate we will have DW clean up our code first
Commands>Clean up HTML and click Ok.
•
Switch to the next webpage and repeat step
22
•
With most of the newer versions you can validate within DW or validate by
navigating to the following website
http://validator.w3.org/ - validate_by_upload
•
Make sure to only fix any critical errors like typos or missing tags many of the
other errors can be ignored.
•
Repeat this validation step for each and all of your pages.
•
You will only need to fix all the “critical errors” like typos or missing closing tags
before continuing to the upload step.
•
When validating it is often difficult to understand the errors since it provides little
explanation. Try and fix as best you can and get help during the lab or by email
from the Instructor.
•
Important note!! Certain errors like table height or any table styling using html
can be ignored. Validating will recommend using CSS instead to style your tables.
•
Reminder, errors like forgetting to close a tag may be critical to having your page
display correctly in all browsers.
•
Before finishing verify you have validated and fixed any critical errors before
uploading in the next step.
Step 10 – Upload all pages using Dreamweaver’s built in FTP
•
Note: all of your webpage’s from A2 and A3 should not be saved inside an A2 or
A3 folder
•
The three pages, index, sampler, review, should be saved at the root of your 119
folder and should NOT be saved into a new folder.
•
Required, the index page must be saved at the root of your 119 folder
•
Open index.html and add links on your index.html (course management page)
•
Select A3 and add the URL under the properties panel
•
Verify you have links for all three assignments
23
•
A1 link should link to your A1 directory, zip file or extra credit web gallery
webpage
•
A2 should link to sampler.html
•
A3 should link to reviews.html
•
Save all your pages, File> Save All
•
Make sure the files window is open
•
Select the desired files within the 119 folder that you want to upload or select the
entire 119 folder
•
You can select multiple files by holding down the shift key and selecting the
range of files you want to select in your 119 website folder or use the control key
to select multiple files individually.
•
Once selected, upload all pages and necessary files (images, CSS file) to your web
server using the put files command (up arrow)
•
Clicking on the up arrow (put) sends your files to your web space.
•
Open a web browser and verify your web space has been completely uploaded
and test all pages verifying images are showing and all hyperlinks work.
•
Navigate to your web space and check all pages, images and links
http://yourwebhostname.edu/~your_username
Step 11 – Email Instructor your URL for reviews.html
•
Make sure to send an email to the Instructor when you have uploaded and are
ready to be graded.
•
In the email include the absolute url to the new page reviews.html
24
Grading Criteria
All pages:
q
3 webpage’s encoded using HTML5 DTD
q
Saved as index.html, sampler.html, reviews.html
q
Added alt tags to all images
q
Add an ext CSS to reviews page
q
Added a body style/rule
q
body rule includes having a background image
q
Validated all pages
q
Published pages to your web host account
q
Emailed instructor URL
For reviews.html:
q
Provided unique title for reviews.html
q
Add two paragraphs to the reviews page, creating two short
reviews, each review several sentences
q
Review paragraphs include an author, date, and review. Must have
an example of a hyperlink, bold and italicized text, and a
hyperlinked image.
q
Various examples of HTML tags added to reviews.html, ordered
list, heading tag, horizontal rule
q
Table with various examples colors in cells, a bg table color, and
text and image.
-end
25
Extra credit - Adding the external CSS to index.html and sampler.html
The following steps are optional. They will explain how to add the external CSS file to
the other web pages.
•
Switch over to one of the other pages like index.html, you can switch pages by
clicking on the tabs near top of page view
•
Next on the Source tab click on + and select Add CSS Source
•
Select the option Attach Existing CSS File
•
Next Browse to file and select the CSS file we created in the prior step.
•
Repeat these steps for the final page, all three webpages will be referencing the
same external CSS file.
•
Preview all pages, index.html, sampler.html, and reviews.html they should all
have the same styling using the same ext CSS.
•
Next, we need to remove the original bg image on the sampler page.
•
Click on the tab for sampler.html
•
Click on the Code view button
•
Remove the background property tag since we are now using our style sheet to
add a background to the page, Back in Assignment 2 we added a background
image to the sampler page using HTML.
Remove only the highlighted code shown below on the contact page in the code view:
<body background="http://www.nutrocker.co.uk/images/tiles/gold_noise.jpg">
•
Your body tag on the page should now look like this:
<body>
•
The reason we are removing the background image on the sampler page is we are
now using CSS to style all of our pages the same. The original code used html to
add a background image the required method is to use CSS.
•
File>Save All
•
Preview in browser f12
26
•
View each of the pages to make sure all use the same CSS file and show the same
background image.
Extra credit - Creating a custom style using a CSS class
Next, we will create a custom style, in CSS this is called a class. A class is a custom style
that we define in our CSS that allows you to apply a custom style to as many tags on a
particular page. Our class will change the color of some text.
•
Next click on + Add Selector (under Selectors tab)
•
A body (tag style) should now appear under selectors right underneath the already
created body style
•
Select the second body and rename to .redText
•
You can name the class anything you want like .anyname
(no spacing allowed in name)
•
The . in the name identifies it as a class and a class is known as a custom style
•
Under Properties tab you will see many options for styling the our class (tag)
•
•
Next select something that you want to style. For example select some text you
want to turn red.
27
•
Under the Targeted Rule option select the drop down arrow option and then scroll
down in the window that appears and find Apply Class and keep scrolling until
you see and can select redText or whatever name you used.
•
Note: You can apply the class to as many selections as you want.
•
Try selecting something else on the page and applying the same class to the new
selection
•
You can always edit the class by first selecting the class listed on the Selectors tab
•
Then under the Properties tab change the desired properties for this class or
custom style
•
You can alternatively edit the class in the code view of your ext css by clicking on
the code view of your css file, click on the css name as shown below. This would
allow to write the code from scratch by typing and not using DW to write the
code.
•
Because we are using an external stylesheet this new style which is called a class
is available to all your pages since they are linked to this external CSS file.
•
Save and preview in browser f12.
28
Extra credit: Add examples of colspan and rowspan
•
Add an example of colspan and rowspan to your existing table or create a new
table on the reviews.html page.
•
We are going to add the following colspan (column span or spanning multiple
columns) and rowspan (row span spanning multiple rows).
•
We are going to add colspan and rowspan to certain cells only.
•
Colspan tells a cell to span many cells.
•
Rowspan tells a cell to span many rows.
•
This is what the table would look like in DW, notice how some cells span
multiple cells.
•
The code below shows both colspan and rowspan. You don’t have to worry about
writing the code DW will do the hard work for us.
<table border="1">
<tr>
<td colspan="4">aaaa</td>
</tr>
<tr>
<td>bbbb</td>
<td rowspan="3">ccccc</td>
<td>dddd</td>
<td>eeee</td>
</tr>
<tr>
<td>ffff</td>
<td>gggg</td>
<td>hhhh</td>
</tr>
<tr>
<td>iiii</td>
<td>jjjj</td>
<td>kkkk</td>
</tr>
</table>
29
•
The easiest way to add colspan and rowspan in DW is to first select the range of
cells or rows we want a cell to span
•
Select the range by click and while holding down the mouse button drag across
multiple cells
•
Once cells have been selected click on the merge icon located in the property
inspector (below the word Row or Cell, see example on the next page)
•
Add at least one example of colspan (column span), try adding to first row so
there is only one cell across that entire row. Col span has a cell span multiple
columns.
•
Add at least 1 examples of rowspan (row span). Row span has a cell span multiple
rows.
•
Add a title for your table (first cell must span all of the columns, add a title or text
inside of this cell, like Adam’s Summer Reviews)
•
Try adding a different background cell color for each cell in your table example
•
Click inside a cell and click on the Bg option on the on the properties
window/panel
30
•
Try making table evenly spaced so cells appear universal in size. You can click on
the edge of the columns to resize or enter width values inside cells.
•
Add content as desired.
•
Save (command/control+s)
•
Preview in Browser by pressing f12 (pc) or file>preview in browser
-end extra credit
31
The following instructions represent examples for older versions of DW before CC
For CS 5 only users see Instructions below for setting up your site
•
CS 5 is the prior version of Dreamweaver
•
Within Dreamweaver click on Site > New Site
•
If using CS5 click on the Advanced tab see below for screenshot
•
Local root folder:
(click on folder icon and locate your 119 class website folder)
Note:
(You are identifying locally where you are saving your website files. You created
a class folder in A1. You will be saving all of our website related course work
during the whole semester into this folder.)
•
If using CS 5 click on Remote Info (located top left panel under category)
32
•
Select FTP under the Access: (menu) shown above
(we will connect to your remote web host account using DW’s built-in FTP program)
•
Type the remote info for your web host account
Fill out the Remote Info (FTP) with the following data
33
FTP host:
ftp.somehostname.com
(Must use whatever you web host provided you during registration, cannot
begin with ftp:// and every webhost is a little different )
Host directory:
leave blank
(Many web hosts do not have specific host directories, usually you leave
blank. However, for some accounts you must put all your files into a folder
that is located inside your webspace, often called public_html)
Login:
____________________
(type your unique login or username, may look similar to valent45)
Password:
____________________
(type your unique password)
•
Click on the Test button
•
If your account info has been entered correctly you should receive a confirmation
that you have successfully connected.
•
If you were unsuccessful then you will have to verify your account info, test
again, and connect successfully before continuing.
•
If you are successful then continue below, if using a shared computer lab make
sure you have unchecked the Save password option.
•
Click on OK to close the Site Definition window.
•
CS5 specific Instructions end
34
•
Instructions continue here
•
If the manage sites window is not currently showing click on Site> Manage Sites
•
Please note: you must click on Site>Manage Sites and pick your site name every
time you open Dreamweaver!!! This is how Dreamweaver knows which site it
will be managing and where to upload your files to and how to map your links.
ü Optional: Once you have set up your site onto a computer using DW you
can then export the site info:
Site>Manage Sites>Export (pick the back up my settings option)
DW will create an .ste file that can be imported via the manage sites
window on any new computer with Dreamweaver
ü Every NEW computer that you attempt to use Dreamweaver for managing
your website(s) you will need to have your site info set up again using
Site>New Site or import the site info created in the above step
Site>Manage Sites>Import (pick the .ste site file)
•
Click on your new site name and then click on Done
•
Next, make sure the Files window is showing (Window>Files to open or close)
and is expanded and shows your folder contents (expand by clicking on Triangle
icon next to the word “Files” at the very top of Files window)
•
Click on the Connect icon (looks like two plugs, connects to remote host)
•
Once you are connected you can use the Files window to manage your site,
rename files, create folders, move files into folders and upload files (put) to your
remote web host account, all within the Files window.
•
In order to put or upload your files to your remote web host, select the desired file
or files and then click on the up arrow (put).
35
Adobe DW 5/5.5/6 only, adding an external CSS style sheet to all your webpages
•
Next, we will be adding an external style sheet to all three of your web pages, we
will use Dreamweaver to do this
Note: Most of the presentational or styling attributes of HTML (html tags
we used for colors and certain styling) have been deprecated (no longer
supported) in the newer versions of HTML and replaced with CSS. CSS
stands for Cascading Style Sheets. CSS is now the preferred way to
specify an HTML document's presentation or style. There are three types
of Cascading Style Sheets, internal and external and inline. For this
example we will use the preferred method, external CSS, where all three
pages will link to one external CSS.
•
DW 5/5.5/6 versions only, instructions shown below
•
CSS is defined in the CSS Styles window, open via Window> CSS Styles
•
Make sure the All option is selected as shown above
•
In order to add a CSS Style Sheet to our current page click on the New CSS Rule
button, icon with a + (plus sign)
36
•
•
Select the following:
Selector Type:
Tag
Selector Name:
body
Rule Definition:
New Style Sheet File
Next, when prompted make sure to save your style sheet within your website
folder, should save at root level where all our web pages are being saved, give it
an appropriate name like 119site.css
•
(don’t use any spacing in the name)
Next, click on Background and select a Background color and then click OK.
37
•
The following is the CSS code for the style we just created for our body. This
example defines a “rule” or style for our <body> html tag. Anything located
within our body will inherit this style, in this case a webpage background color of
silver. This code is located in the external CSS file.
body {
background-color: silver;
}
•
Note: you can even edit the external stylesheet file either inside DW or with a text
editor, just like a web page. If you want to view the CSS code view of an external
CSS file click on the CSS file name next to Source Code, named 119site.css in
my example. After viewing switch to Source Code or click Design view.
38
•
The following page shows an example of the code reference inside our HTML
page that shows the link to the external style sheet, link appears in the head. This
is the code DW automatically writes which links our web page to the external
CSS file. External CSS is the preferred method in web design since one style
sheet can update your entire site, external will be the required method for our
website.
Code view of link to ext CSS file
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>To Do GRC 119 Fall 2008 Adam Valentiner</title>
<link href="119site.css" rel="style sheet" type="text/css" />
</head>
•
Next, within our external style sheet add a repeating background image.
•
You must first find a graphic image to use as a background and copy it into our
class website folder or find its absolute URL
•
In order to add the bg image to our stylesheet you will need to open the css styles
editor again
•
On the CSS panel make sure you are on the CSS Styles tab and on the All view
•
Select the body style that is listed and double click on body in order to edit the
style
•
The CSS Rule Definition window will open for the body rule or style
•
Click on Background under category and for background image select your
desired image and click Ok.
39
•
The following example of the code view for our body rule in our 119site.css file.
In this example the bg image is in an images folder and inside this folder there is a
file named background.gif
body {
background-color: silver;
background-image: url(images/background.gif);
}
•
Next we will add font, size and color to our body rule.
•
Edit the body rule by double clicking on body listed under all rules, listed on the
CSS Styles panel, make sure you are on the All selection.
•
Under the Type category select a font, size, and color.
•
Optional: You can edit your style sheet in code view by clicking on the style sheet
name listed on the CSS Styles panel, make sure you are on the All selection and
then double click on the name of your style sheet file like 119site.css or whatever
you named it.
•
The following code on the next page is our updated body rule in our 119site.css
file.
body {
background-color: silver;
background-image: url(images/background.gif);
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
}
•
Just to review, the body style or rule we just created is known as a tag rule as in
an html tag.
•
Next, you will need to add the external CSS file to all three of your web pages.
•
Open index.html and then click on the attach style sheet button, it looks like a
chain link, the attach style sheet button is located on the CSS Styles panel.
40
•
Select your style sheet file.
•
Repeat this step for all pages, index.html, sampler.html, and reviews.html
•
Next, we need to remove the original bg image on the sampler page.
•
Click on the tab for sampler.html
•
Click on the Code view button
•
Remove the background property tag since we are now using our style sheet to
add a background to the page, Back in Assignment 2 we added a background
image to the sampler page using HTML.
Remove only the highlighted code shown below on the contact page in the code view:
<body background="http://www.nutrocker.co.uk/images/tiles/gold_noise.jpg">
•
Your body tag on the page should now look like this:
<body>
•
The reason we are removing the background image on the sampler page is we are
now using CSS to style all of our pages the same. The original code used html to
add a background image the preferred method is to use CSS.
•
File>Save All
41
•
Preview in browser f12
•
View each of the pages to make sure all use the same CSS file and show the same
background image.
•
Note: if you want to view the CSS code view of an external CSS file click on the
CSS file name next to Source Code, named 119site.css in my example. After
viewing switch to Source Code or click Design view.
•
Next, you will learn how to create a custom style in CSS
Adobe DW 5/5.5/6 only, Creating a custom style using a CSS class
Next, we will create a custom style, in CSS this is called a class. A class is a custom style
that we define in our CSS that allows you to apply a custom style as many times on a
particular page. Our class will change the color of some text.
•
Make sure CSS Styles window is open, open via Window> CSS Styles
•
In order to add a class click on the New CSS Rule button, icon with a +.
•
Select or type the following:
Selector Type:
Class
Selector Name:
redText (type anyname you want no spacing)
Rule Definition: 119site.css (your ext css name)
•
Click Ok
42
•
For the Category Type select a desired Color like red
•
This will change the text color of any text we apply the style to
•
Optional, change the font size or style
•
Optional, click on category Background and add a background-color
•
This will change the background color behind only the text we apply the style to
•
Click on Ok.
•
Next we want to apply the class to some text.
•
Select some text you would like to style using this class (custom style).
•
On the Properties window find Class option
•
Select your class name, should be listed as whatever you named your class, in my
example I named redText
•
You can apply the class to different text by first selecting than applying
•
You can always edit the class by double clicking on the class name on the styles
panel listed under all rules, make sure you are on the All selection.
•
Because we are using an external stylesheet this style is available to all your pages
since they are linked to this external CSS file.
•
Save and preview in browser f12.
-end instructs for prior versions of dw
43