Dreamweaver Introduction -- Creating Web Pages …library.rit.edu/tutorials/dreamweaver/DreamweaverIntro.pdf · Dreamweaver Introduction -- Creating Web Pages with Dreamweaver ...
Post on 14-Aug-2018
224 Views
Preview:
Transcript
Dreamweaver Introduction -- Creating Web Pages with Dreamweaver – RIT Libraries pg: 1
Dreamweaver Introduction -- Creating Web Pages with Dreamweaver
This workshop covers the basics of web authoring with Dreamweaver. Learn how to create and format a
webpage including creating tables, inserting images, creating links, and publishing your pages.
Participants will:
• Start Dreamweaver and define a "local site"
• Navigate Dreamweaver
• Create and format web pages
• Create and modify tables
• Link to images
• Create hyperlinks in text and images to other webpages
• Create "image maps"
• Define a remote site and "publish" to it
What are web pages?
Web pages are nothing more than text documents that have special tags controlling appearance, linking, and
layout. You can see the code behind a webpage by viewing a page’s source. In Internet Explorer, chose View >
Source and you will something that looks like this:
<h1>Research Guides, Tutorials and more...</h1>
<center>
<p><a href="#course"><b>Course-Specific Guides</b></a><b> || </b><a href="#subject"><b>Subject
Guides</b></a><b> || </b><a href="#career"><b>Career Guides<br>
</b></a><a href="#software"><b>Software Tutorials</b></a><b> ||
</b><a href="#database"><b>Database Tutorials</b></a><b> || </b><a href="#research"><b>Doing
Library Research</b></a><br>
</p>
</center>
Why use Dreamweaver?
The power of Dreamweaver (and similar) web page editors is that it allows users to create web pages without
having to know the tags that make up HTML.
Dreamweaver is an especially good web page editor because it is accessible for the novice user, yet is powerful
enough to grow with users as they gain experience and demand more complex features.
Dreamweaver MX 2004 is available from the macromedia website for a 30 day free trial. In addition, it is the
installed on many labs throughout campus, and is available for a substantial educational discount in the college
bookstore.
Although this workshop specifically addresses Dreamweaver MX 2004, the concepts, ideas, and topics covered
in this workshop are applicable to earlier versions too.
This workshop is conducted on Windows XP workstations, but all concepts, ideas, and topics are applicable to
Macintosh users too.
Dreamweaver Introduction -- Creating Web Pages with Dreamweaver – RIT Libraries pg: 2
Site Organization Each web site (a collection of web pages, images, and other files) is housed on a server in a directory which is
readable by a web browser. Files are linked together in a hierarchical structure that allows users to navigate
through the available files.
Organizing your site from the outset and maintaining the structure for your site on your local drive could save
many hours of debugging broken links and missing files. When you go to publish your site by moving your
files to a web server, you will replicate not only the files, but also the hierarchical structure that you have
created.
The default webpage of any web site
directory is called index.html.
To prevent users from browsing the files
and subdirectories in a website, simply
name the lead document in every
directory index.html.
If there is no document named
index.html in a directory (as is the case
with the directory shown to the left) the
web browser will create one for the user
which will be nothing more than an
alphabetical list of the files and sub
directories.
Think of index.html as the table of
contents of your website. Everything
you want your users of your site to see
will be linked to this document to guide
them through your content.
Step 1: Create a folder locally.
If you are at your own computer, feel free to create the folder wherever you are comfortable storing files.
In this lab, click the My Documents icon from the desktop and add a www folder.
Dreamweaver Introduction -- Creating Web Pages with Dreamweaver – RIT Libraries pg: 3
Step 2: Set up the Dreamweaver site editor for editing
See also, the step by step instructions for setting up a site at:
https://people.rit.edu/people/tutorials/dreamweaver.php
When Dreamweaver MX opens, it looks like this:
Click Create New Dreamweaver Site to walk through a wizard, setting up a new site.
Dreamweaver Introduction -- Creating Web Pages with Dreamweaver – RIT Libraries pg: 4
Name your site something meaningful
Leave the default answer “no” to the server technology question.
Leave the default option to work locally with your files, and specify the location of the local “www” directory
you created:
Specify the remote settings for your website. If your website will be at www.rit.edu, use the following settings,
exactly as shown.
Choose FTP and the connection type.
Type gibson.rit.edu as the host name.
Type www/ for the remote folder.
Type your RIT User ID.
In a public lab like this one,
leave password blank and don’t save it.
Check off Use Secure FTP
Dreamweaver Introduction -- Creating Web Pages with Dreamweaver – RIT Libraries pg: 5
Complete the wizard, answering Next or Done, until you are back to the main program.
Your site is now available
in the
Files window.
Choose “Local View” to
the right.
Finally click, Create New
HTML, from the menu in
the center.
When your blank
document is created, save
it as index.html
The next time that you open Dreamweaver, your site will be already defined and ready to use. Simply select it
from the drop down menu on the right hand side.
Dreamweaver Introduction -- Creating Web Pages with Dreamweaver – RIT Libraries pg: 6
Application Workspace Title Bar
The title bar gives the filename,
and the local location of the file
Menu Bar
Like all windows applications,
all functions can be reached from
the Menu Bar
Insert Toolbar Dreamweaver includes several
toolbars with shortcuts to insert
common objects.
Main workspace
Where you type and manipulate
objects in Dreamweaver
Site Panel
Shows all the files and
subdirectories of your website
Properties Inspector A panel to control settings for
the type of object you are
working with. As you work with
different types of object (text,
images, tables, etc…), the
properties inspector changes.
Like all Windows programs, you can customize the look and feel of the workspace.
The View… Toolbars menu option and the Window menu give you many options on customizing the
application. Experiment with these to find what works best for you. If any part of the program should be closed
accidentally, try toggling one of these options to see if it reappears.
Dreamweaver Introduction -- Creating Web Pages with Dreamweaver – RIT Libraries pg: 7
Creating a New Page:
There are a numerous ways to start a new document.
• Choose File > New…. OR
• From the Site Panel chose File > New File OR
• Ctrl + N OR
• In the Site Panel find the place the new document will reside, and with a right mouse button click,
choose New File. Name the file immediately, being sure to use “.htm” or “html” as the file extension,
then double click the new file to open it.
Of the four choices, the later is the preferred method, because it forces you to save the file in the proper place. If
you choose the other options, you will have to save the document by choosing File > Save or File > Save As.
Once you have created a new page, the first thing you should do is set the Page Properties.
Page properties are settings that control the look and feel of the entire page.
From the Modify menu, choose Page Properties, the following dialog box will appear:
Of all the categories, Appearance, Links, and Title are the most useful.
Headings, and Tracing Image are beyond the scope of this workshop.
These settings control the
default font, colors, and
margins of a web page.
These setting control the
appearance and color of fonts.
The Title controls what the user sees in her browser’s title
bar and bookmark file.
Dreamweaver Introduction -- Creating Web Pages with Dreamweaver – RIT Libraries pg: 8
All of these settings are optional. If you do not choose to set a color or font, you are passing the choice of color
or font to your users’ browsers. Unless specified, the user’s browser will use whatever color or font it normally
uses.
Since web pages are meant to be displayed on your users’ computers, designing for them can be tricky.
Graphic design and traditional printing professionals are used to having total control of their documents –
setting up exactly how they want the document to appear. Web pages do not allow total control of appearance.
This is first apparent to most novice web page authors when setting fonts or colors for the page properties.
Notice that you can not specify a single font. Instead, you specify a
“font list.” A font list, is asking the user’s browser to first try
rendering the text in Arial. If the user’s PC does not have Arial, then
try Helvetica, and if Helvetica is not available, then use whatever font
is set up to be the default “sans-serif” font.
If you leave the choice “default” font, then the text will be whatever
font is specified as the default font in the user’s browser.
Colors are chosen in Dreamweaver by specifying a hexadecimal number.
Although you can specify one of several million different colors, you should
be careful doing so. You user may have a monitor that will be unable to
display the color you have chosen.
Dreamweaver’s color picker gives you a choice of 216 “web safe colors”
that almost all computer displays can render. Of course, there is nothing
stopping you from choosing a more obscure color, as long as you are willing
to live with the fact that some of your users may not be able to display it.
Dreamweaver Introduction -- Creating Web Pages with Dreamweaver – RIT Libraries pg: 9
Working with Text
Working with text in Dreamweaver is similar to working with text in a word processor.
From the properties inspector, you can set the font family, font color, font style (bold, italics) justification, and
create bulleted or numbered lists.
Previous versions of Dreamweaver did not preserve formatting when you pasted in text from a word processing
program. Dreamweaver MX 2004, fixes this problem, and now text is properly formated.
Besides the font family and color selections already noted above, there are several additional differences
between standard word processing and authoring HTML in Dreamweaver.
• Tabs don’t work: The tab key does not work in web page editors. Use the indent and outdent arrows on
the Property Inspector for a similar effect.
• Multiple spaces are treated as one: The HTML treats multiple spaces as a single space. So, pressing
down the space key to line up text is not possible. (If absolutely necessary, you can place multiple
spaces into HTML, but it requires you to go into the HTML code view and add the HTML code for a
space - ).
• Paragraph Breaks: In HTML all paragraphs have a blank line between them. Using the ENTER key
(or RETURN Key) will create paragraph breaks. When typing text, let the processor wrap lines for you.
Unlike the Desktop publishing world, your output is not controlled by you. You user may have different
monitor settings and if you do not let the text wrap for you, you could end up with strange results.
• Line Breaks: If you want a line break, use SHIFT+ENTER (or SHIFT+RETURN).
• Spell checking: Available in the Text Menu.
It is best to type all your text first, letting the lines wrap for you, and then go back and do your formatting.
It is best to use a dark colored font on a light background.
Dreamweaver Introduction -- Creating Web Pages with Dreamweaver – RIT Libraries pg: 10
Links, Anchors, & Mailtos What are Links? Links are clickable items that connect to other documents on the web. (other web pages,
media files such as video, audio, PDF files, etc…) Commonly, underlined text or image buttons are used as
links. Links draw the users eye to the navigable sections of the page.
There are 4 types of links:
1) External Links: Used to connect to an external web page. Also called Absolute Links because you must
use the fully qualified URL in order to create the link.
Creating an External Link 1. Type your text and highlight it.
2. In the properties inspector, type the complete URL of the site including the http:// part and
the full web address. For example: http://wally.rit.edu/electronic/electronic.html.
2) Internal Links – used for links to another page at your site. Also called a Relative Link because the user
provides the relative path from the current document to the one you wish to link to. They should not include
the http:// part of a URL.
Creating an Internal Link 1. Type your text and highlight it.
2. In the properties inspector, use the folder icon, to select the document on your site that you
want to link to. The address that appears in the relative path to the your file.
Dreamweaver Introduction -- Creating Web Pages with Dreamweaver – RIT Libraries pg: 11
3) Links to an Anchor – These are links to a section on another web page. It requires one to first insert a
“named anchor” into the text.
Inserting a Named Anchor 1. Position your cursor exactly where you want the named anchor to be.
2. From the Insert Menu choose Insert Named Anchor.
3. When naming the anchor, avoid spaces, special characters, and don’t forget that
capitalization matters.
Linking to a Named Anchor 1. To link to a named anchor, simply use a pound sign “#” before the name of the anchor.
For example, if you are linking to the named anchor “section1” and:
a. The anchor is on the current page, simply type #section1 into the link box.
b. If the anchor is on another page in your site, simply type the name of that page, then
it’s named anchor: page2.html#section1
c. The anchor is on another page outside of your site, type the complete URL, with the
http:// part, the filename, and the named anchor. For example,
http://wally.rit.edu/electronic/electronic.html#section1
4) Mailto Links – These are special links that when clicked launch the user’s email program.
Creating a Mailto Link 1. Type your email address and highlight it.
2. In the properties inspector link box, type mailto: followed by an email address.
For example, mailto:jjjwml@rit.edu
Checking Links – Once you have created a page with links, it’s a good idea to check them. There are several
ways to do that:
• File > Preview in Browser will open your document in a web browser so that you can manually check
the links.
• File > Check Page > Check Links will check all the links in your document for you.
To edit a broken link, select it and make corrections in the Properties Inspector link box.
To remove a link, select the text and delete the contents of the link box of the Properties Inspector.
Dreamweaver Introduction -- Creating Web Pages with Dreamweaver – RIT Libraries pg: 12
Images and Image Maps
Images are displayed on HTML pages by linking to them in a similar manner to page linking. You can either
link to an image on your site, or link to an image on another site. Although it is considered bad form to link to
images from other sites, there is nothing technologically stopping you from doing so.
When working with images for the web, you should prepare all your images outside of Dreamweaver in a
program such as Photoshop, Fireworks, or paint or graphics program.
Copyright is a serious issue. You should not under any circumstances use someone else’s images without
getting permission. But if you wanted to, you can download existing images from Internet Explorer, by right
clicking and choosing “Save Image As….”
Two basic file formats are supported in HTML – JPG and GIF.
Image formats used on the web
Image
Format
General Use Considerations File name convention
GIF Icons, graphics,
animated gifs
The 216 web-safe colors will show well
on vast majority of 256 (8-bit) color
monitors.
Example: icon.gif
JPEG Photographic
images
Balance between compression and
image quality. Has 8 bit adaptive-24 bit
color (millions) but not necessarily web
safe.
Example: photo.jpg
All image files you plan to use should be named and organized in your local web site folder before you link
them in your documents. When you “insert” an image into an HTML document, you are merely referencing the
image file. If you move or delete your images outside of Dreamweaver, your webpage’s will have broken image
links.
Dreamweaver Introduction -- Creating Web Pages with Dreamweaver – RIT Libraries pg: 13
Inserting an Image
1. Place your courser where you want to image to appear.
2. Select INSERT > IMAGE or click the image icon on the insert toolbar.
3. Locate the image in your local site directory and click the OK button.
4. Click on the newly inserted image, and the properties inspector changes so that you see and can control
the image’s properties.
5. Fill in the properties as you see fit. (see description below)
Name box (unlabeled box below the text Image, 3K) is for naming the image to refer to later from scripts.
W and H options set the pixel width and height sizes. When you insert and image in Dreamweaver, these are set
automatically for you. You should not adjust the image size using these setting. It could distort the image. If you
need to change the size of image, do it outside of Dreamweaver and re-insert.
Src specifies the name and location of the image gif or jpg image file. This too is filled in automatically by
Dreamweaver when you insert an image.
Alt allows you to enter a short text description of what the image is illustrating. When users hold their mouse
over the image, this text will pop-up. It assists users who use voice readers on their web pages and this text will
display if the user has turned off images on their web browser.
Link allows you to make the image a clickable hyperlink. Just like text links, it can either be an absolute URL,
a relative URL, a link to a named anchor, or an email link.
Border specifies the thickness in pixels or a border around the image. By default it is left blank which means no
border.
will left justify, center, or right justify the image.
Align sets the alignment options for text near an image. By default, text is set to align with the baseline of the
image. Use the drop down box to experiment with the setting for your page.
Map defines the clickable parts of an image.
Dreamweaver Introduction -- Creating Web Pages with Dreamweaver – RIT Libraries pg: 14
Making an Image Map
1. Highlight your image.
2. Choose the shape that will best create the hotspot you want (rectangle, circle, or polygon). When you
begin drawing your hotspot, properties inspector will change so that you can set the properties for your
hotspot.
3. Fill in the Link Box with the link for that hotspot. Just like text links, it can either be an absolute URL, a
relative URL, a link to a named anchor, or an email link.
4. Optionally repeat for each hot spot you want to create.
Dreamweaver Introduction -- Creating Web Pages with Dreamweaver – RIT Libraries pg: 15
Tables Tables are used to either layout data in a spreadsheet format, or to create nicely organized, sometimes complex,
web pages. A cell can hold anything: formatted text, images, links, headings, horizontal rules, lists, or another
table (nested tables).
This webpage uses a very simple table to layout data in a spreadsheet like
format.
The cell borders are visible, so you can easily see the columns and row.
This web page makes extensive use of tables to organize content.
The borders of the tables are invisible, but if you study the page long enough,
you can tell that there are at least 20 rows and 4 columns.
Inserting a Table
1. Select Insert > Table or choose the table icon on the Inert Toolbar.
2. Fill in the properties as described below.
Rows and Columns specifies the number of rows and columns.
Table Width is a two part setting. The drop down box lets you
specify if the table should be an absolute size in pixels (so that the
size of the table remains the same) or a relative size in percent of
screen.
Border Thickness sets the thickness of the border around cells. To
make this table use an invisible border, set the border to zero.
Cell Padding sets the space around the cells’ border and the content
of the cells.
Cell Spacing controls how much space exists between cells.
Header will apply a pre-formatted style – bolding the contents – of
the top row, the left-most column, or both.
Accessibility optionally allow you to specify a caption to include
with your table.
Dreamweaver Introduction -- Creating Web Pages with Dreamweaver – RIT Libraries pg: 16
When you have selected the entire table, by clicking the corner of it, a solid black box appears the entire table,
and the Properties Inspector can be used to modify the settings of the entire table.
Any of the settings specified when first creating the table can be modified here. In addition, you can set the
background color, the border color, and align the table on the page. Any of the settings you set here will effect
the entire table.
You can also select just parts of a table – a single cell, several cells, one or more rows, one or more columns,
etc… The little green drop down arrows at the base the table, make it easy to select exactly what you want to.
Notice that when you
select just part of a table
(a single column for
example) the properties
inspector changes back to
the text mode.
Any text settings such as
font, style, etc… will only
be applied to the contents
of that cell.
If you change any settings for a cell or a selection of cells, it overrides the settings for a table as a whole. For
example, if you set up the table’s background color to be blue, but select and change the first row’s background
color to be red, your entire table will have a blue background expect for the first row, which will be red.
Merge cells
together or
split one
apart
Set the
horizontal
or vertical
alignment.
Set the
cell(s)’
width and
height
Set the
cell(s)’
background
color
Set the
cell(s)’
border size
and color
Dreamweaver Introduction -- Creating Web Pages with Dreamweaver – RIT Libraries pg: 17
Publishing your site at RIT
To publish your site on the RIT web server you have to first set up your RIT account for the web.
Check to make sure that your RIT personal website is set up and permissions have been set by reviewing the
tutorial at https://people.rit.edu/people/tutorials/putty.php
If you have already set up the site editor (see the site
organization section) then all you have to do is click the
connection icon from the files window:
A password dialog box will appear:
Once you connect, change the view of the files by clicking the
drop down menu in the far right hand corner of the Files Panel and
choose View, Expand Files Panel.
Click and drag each of the files, index.html (your lead document) and other affiliated files (jpg’s, gif’s etc…)
from the panel on the right hand side, to the panel on the left hand side dropping them into the www directory.
Dreamweaver Introduction -- Creating Web Pages with Dreamweaver – RIT Libraries pg: 18
If Dreamweaver asks you if you want to include dependent files, click Yes to automatically include all linked
gif’s, jpeg’s, and pages. Clicking No will require you to manually move them separately.
Congratulations, you have a website. The web address (URL) to reach your site is:
http://people.rit.edu/abc1234 (where abc1234 is replaced with your RIT username).
top related