How to Edit in Dreamweaver 8 / CS3
-1-
How to Edit in Dreamweaver 8 / CS3
By: Charlie Pettypiece
Table of Contents
(Ctrl + Click to jump to topics)
1.
2.
3.
4.
Basics: Layout of Dreamweaver
Basics: HTML
Basics: CSS
Basics: DW Templates
5. What Not To Do
6. Adding Text/Bullets to Existing Pages
7. Adding a New Link to the Sidebar
8. Adding New Lab Members
9. Adding Links to Files and Pages
10. Adding Images
11. Advanced CSS
12. Site Setup in DW
13. Validation, Checking and Previewing
Charlie Pettypiece
[email protected]
How to Edit in Dreamweaver 8 / CS3
-2-
Basics: Layout of Dreamweaver (DW)
Dreamweaver gives you the choice of making web pages from a Design or Coding point of view.
Editing in the Design view is more akin to using a word processor (you can type directly on to your
page, using bolding/italic effects, and DW will automatically enter the code for you), but it limits you in
what you can accomplish. Editing in the Code view presents more possibilities, but can be difficult for
beginners (and doesn’t allow you to view your changes as you work). The solution: USE BOTH (the
Split view)!
With the Split view you can see both the code and the design simultaneously. Also, by positioning your
cursor or highlighting a part of one view, DW will highlight the corresponding content in the other view
(making it easy to find the code for a particular part of the web page.)
At the bottom of the screen, notice that DW will show you what tags are associated with the content you
have selected (more on html/css tags later). The Properties window gives a more user friendly
overview of the properties associated with the selected text. Typically all of the stylistic settings in the
properties window will already be set by your CSS file. I only use this window to create hyperlinks and
sometimes to align text or pictures using the
buttons.
Charlie Pettypiece
[email protected]
How to Edit in Dreamweaver 8 / CS3
-3-
On the right hand side of the screen you can expand and stretch the various windows to look like the
following:
• Have the CSS Styles and the Files tabs expanded, and make sure that
the Properties for “…” window is expanded enough such that you can
see all of the properties associated with the selected CSS tag.
•
•
•
Make sure that you select the
button, as it will only show you those
properties that are being used by that tag (rather than all possible
properties)
The Files tab shows you which site you are currently working with
(CulhamLab) and will allow you to view all of the files and folders
contained within your site’s root folder. (more on how to set up a site in
this manner later)
o This tab will also allow you to synchronize and update your
remote site (located on the web server) with your local site
(located on your computer)
o With this Files tab you will never need to use My Computer to
open/view/create site content (in fact I would advise against it)
Mostly you will be using the Properties for section for the purpose of
editing CSS tags
Basics: HTML
It is always helpful to know a few basic things about html coding before trying
to edit or create a web page. First of all, when making a new blank page in DW you will notice that it
automatically puts a bunch of crap in the code view.
(To view this your self, click the
button at the top left, go Blank PageÆHTMLÆ<none>)
The only important things to know about this junk DW automatically inserts is that all the content for
your page goes after the <body> tag and before the </body> tag, and that the title for your web page
(which will appear here:
in your browser) goes in
between the <title> and </title> tags where it currently says Untitled Document.
Charlie Pettypiece
[email protected]
How to Edit in Dreamweaver 8 / CS3
-4-
You may now have gathered that all html tags begin and end with < > brackets. These brackets separate
the tags (which specify the type of content) from the content itself. You can see below that DW colorcodes HTML tags in blue and regular content in black.
• Whenever you ‘open’ a tag, such as the common paragraph tag <p> you must at some point
close the tag by inserting a forward slash into the tag as such: </p>
o DW does this automatically when typing in the code view. Simply typing </ will
automatically close the most recently opened tag.
o Simply put all the text you want to be covered under that paragraph between the <p> and
</p> tags
Here is an example of some of the most commonly used HTML tags:
•
•
•
•
<div> : stands for division, used for dividing your web page into discrete sections (header, menu,
sidebar etc.)
o Each division has a name that corresponds to a name in the CSS file
o Here the wrap division it is responsible for centering all the content in an area that is 775
pixels in width.
o Properties such as width for each division are specified in the CSS file under the wrap tag
o Often it is necessary to have divisions within divisions
<h1>, <h2>, <h3>, <h4> : stands for header, there are only 4
o properties for each of these (such as color, underline, indentation) are also specified
under corresponding tags in the CSS file
<ul>, stands for unordered list, meaning that it produces bullets rather than ordered numbers
o If ever you want to make such a list, a <ul> tag must precede the list, and a </ul> tag
must occur at the end of the entire list.
o Each item in the list is surrounded by a <li> (list item) tag, as shown above.
<strong>, used for bolding text, <em>, used for italicizing text
Charlie Pettypiece
[email protected]
How to Edit in Dreamweaver 8 / CS3
-5-
Basics: CSS
CSS stands for Cascading Style Sheet. In short, CSS is to style as HTML is to content. More
specifically, for any given web page you can have one or more CSS files (.css) that dictate the style for
all the pages in your site. The CSS file will contain the properties for each of the HTML tags listed
above (and much more). So if you want to have your regular paragraph font to always appear green on
every web page in your site, you simply state the color property for <p> to be green. Without a CSS
file, you would have to stipulate ‘FONT COLOR = green’ for every paragraph on every page in your
site. CSS files therefore make it very easy to make changes to the style of your site. If you want to
change the bullet image for every list item on every page in your site, for example, you simply change
the bullet image property in the CSS file, rather than editing every page.
In the head of each page (where DW automatically throws
all that junk I mentioned before) you will see the line:
This tells your web browser where to go looking for the
linked style sheet. The link above is relative to the site
root, pointing to a CSS file called all.css in a folder called
Style (where DW automatically places CSS files). You
may sometimes run into problems where you can see the
content, but your style/colors aren’t showing up right. This
line is usually a good place to start looking for problems.
The image on the right shows DW’s representation of the
attached style sheet. You can see the title of the sheet at
the top (all.css). You will recognize the p, h1, h2, li, etc.
HTML tags. All of the tags beginning with ‘#’ are <div>
tags. You will also notice that some of the division tags
also have HTML tags after them (ie #sidebar li). These
tags will set properties for those HTML tags that only
apply when those tags occur within the specified division.
To add properties to any particular tag, simply highlight the
tag in the list and select Add Property in the Properties
window. Click
or double click the tag itself to view all
available properties. There will be more on CSS properties
later.
You may also wish open your CSS file with Dreamweaver (DW will do this automatically when you
edit any of the CSS tags in the CSS Styles tab). This I find to be useful when creating new CSS tags
because you can simply highlight old ones, copy them, and rename the tag. The following is a CSS file
opened in DW.
Charlie Pettypiece
[email protected]
How to Edit in Dreamweaver 8 / CS3
-6-
Highlighted here are comments that I inserted to help keep track of tags. These have no function in the
file itself. The /* … */ tells your web browser to ignore the contents. You can also see that the name of
the tags appear in pink, with the properties in dark blue and the property values in light blue.
Basics: DW Templates
DW offers the ability to turn any page that you have created into a Dreamweaver Template (DWT file).
These files can specify which divisions of your page will be editable, and which will be fixed to the
content specified in the template file.
•
To do this simply select FileÆSave As
o Select Template Files (*.dwt) from the file types dropdown menu
I have found this feature to be particularly useful for things like menus and sidebars. These are
divisions that will remain constant for all of your pages on your site. However, if you want to say add a
new item to your menu, normally you would have to add that item to every page in your web site.
However, if all of your pages are based on a single template, and the menu region is fixed (not editable),
then simply adding a menu item to your template file will automatically update any file using that
template with the new item. (This is how I have made www.culhamlab.com, www.fmri4newbies.com
and www.jodyculham.com.)
Charlie Pettypiece
[email protected]
How to Edit in Dreamweaver 8 / CS3
-7-
Below shows a DWT file called all.dwt open in DW. I have specified an Editable Region using the
highlighted button and called it ‘Body’. As you can see in the Code view, it is surrounding the Body
division and all the tags within. In design view the editable region appears as a blue outline.
•
If you want to create a new page using a template you created or one I have already created,
select FileÆNew…
Charlie Pettypiece
[email protected]
How to Edit in Dreamweaver 8 / CS3
•
•
-8-
You will see the three sites I have created in the site field, choose the one you would like to add a
new page to (you will only see these if your have set up DW’s site manager properly; more on
this later)
o For the CulhamLab site, I have made two templates; one for the Lab Members section
and one for the rest of the pages
Select the desired template and click Create
Below I have created a new page using the all.dwt template for CulhamLab. Notice that all the code
outside the editable region is grayed-out and cannot be edited. If you want to edit this code for whatever
reason, you must do it outside of DW.
NOTE: You can always use notepad to open any HTML, CSS or DWT file. When you’re more
comfortable working with code, you can edit with notepad rather than using DW. Just make sure
you upload your changes to the remote and local sites.
The top right corner of the design view displays what template the page is referring to. You will also
notice that when moving your cursor over the non-editable regions in the design view, your cursor will
turn into a
.
Charlie Pettypiece
[email protected]
How to Edit in Dreamweaver 8 / CS3
-9-
•
When altering your template file, you will be prompted to update any file that is linked to that
template file.
•
Select Update
At this point we are past the basics and I will be outlining how to perform specific alterations to the web
sites I have created.
Charlie Pettypiece
[email protected]
How to Edit in Dreamweaver 8 / CS3
- 10 -
What Not To Do
•
Whenever possible, ALWAYS edit site content within
DW
o As I will discuss in more detail later, I always
keep 2 copies of the sites. A Local one on a lab
computer and a Remote one on the Psychology
web server.
o DW is setup to save to both locations when any
alterations are made. If you edit outside of DW,
you must manually upload the changed file
using the
button in the Files tab
o Ensure that you have the site in which you are
working selected in the Files tab in order for
synchronizing to work properly
•
•
•
•
•
•
Leave <div> tags alone, don’t move them in HTML and don’t edit their properties in CSS
o Work around them where ever possible
o If things start looking out of whack, you may have accidentally moved a <div> or
inserted content that extends past the set dimensions
Do not add new editable regions or change existing editable regions in any of the templates I
created
o This can cause MANY PROBLEMS that can quickly become irreversible
o Only change content in non-editable regions (such as the sidebar) and promptly save and
update
Do not alter the site properties
o You may access them through the Manage Sites… option seen in the dropdown menu
above
Try to keep the existing folder structure for each of the sites (CSS file located in Style, DWT
files located in Templates, images in Images, ALL HTML pages in ROOT folder, etc.)
Keep naming consistent, avoid using spaces in page names
Leave the Hit Counter alone, it will disable itself if you change any of the code surrounding it
Charlie Pettypiece
[email protected]
How to Edit in Dreamweaver 8 / CS3
- 11 -
CulhamLab
• Leave the following CSS tags alone (ones that start with a period), they have specific dimensions
and apply to many of the pictures on the three sites
•
I would not recommend altering anything to do with the top menu
o Here I have highlighted the two template files that specify content for the menu, as well
as the CSS tags that specify the properties (width, padding, etc.)
o The menu is very tricky because it displays slightly differently in different browsers
(Opera, Safari, Firefox, IE) therefore slight changes in the amount of text, width, or
padding can completely throw off the design
Charlie Pettypiece
[email protected]
How to Edit in Dreamweaver 8 / CS3
- 12 -
Adding Text/Bullets to Existing Pages
Regular text can be added to any page by simply typing as normal in the Design view, or by surrounding
the desired text in <p> </p> tags in the Code view
If you wish to add a new bullet to, say, the News section on CulhamLab, do the following:
• Please cursor at the beginning of the previous bullet
•
•
Press Enter
Type News entry into the bullet created above and highlight the date part of it
•
Now under the Properties window at the bottom, select the CSS date style
•
You can accomplish the same by simply copying the previous news entry in either the Design or
Code view, pasting it above, and editing as needed
Charlie Pettypiece
[email protected]
How to Edit in Dreamweaver 8 / CS3
- 13 -
The same steps apply for making new News entries in the fMRI4Newbies page. However, for
fMRI4Newbies there is no CSS date style. Instead you simply Bold the date section. The same
general procedures apply to adding new content to the tutorials/resources sections.
You will find that when inserting new text or bullets, it is often easiest to use the Code view to get
an idea of where the formatting is coming from. Then simply copy and paste within the same
division to add new stuff.
Adding a New Link to the Sidebar
The procedure for doing this will be essentially the same for all
three sites. The only difference will be that for CulhamLab, you
will have to do it for both DWT files (all.dwt and members.dwt).
•
•
•
Select the CulhamLab site from the Files tab
Open all.dwt from the sitemap explorer window
In the Code view, find the section where the list
corresponding to the sidebar is located (under
)
o Highlight one of the existing list items (starting
with <li> and ending with </li>)
o Copy the list item and paste it (in the Code view) in
the desired spot in the list
o I will copy Lab Photos and paste it at the beginning
of the list
•
Now rename the text to how you want it to appear, lets say Home
o You also must rename the link if you want to change where the item will point
o I will change the link to index.html (the universal name for home pages)
NOTE: You can also link to your index.html file by simply typing “.” Instead of
“index.html” (this is more proper)
Charlie Pettypiece
[email protected]
How to Edit in Dreamweaver 8 / CS3
•
•
•
- 14 -
You will now notice that the new item has been added to your
sidebar in design view.
Now simply save the template file and click Update when
prompted
Again, if you are editing the CulhamLab page, you must do this twice, once for each of the two
templates.
Adding New Lab Members
•
•
•
•
•
Select the CulhamLab site from the Files tab
Select FileÆNew…
Select Page from Template
CulhamLab should already be selected and you will be given the choice of opening all.dwt or
members.dwt
o Open members.dwt
Simultaneously open another Lab Member’s page as a guideline for formatting sections on
Education, Publications etc.
Currently I store everyone’s pictures and CVs in a folder called Members, so it’s a good idea to
store new pictures and new CVs in the same area for organizational purposes
Now highlight the following text in the Code view
•
Copy the following text, and paste it over what you have highlighted
•
•
<div id="content1">
<div align="center"><img src="Members/MEMBER.jpg" alt="MEMBER" width="146"
height="176"/><br />
</div>
<h2 align="center"><a href="Members/MEMBER CV.pdf" target="_blank">Link To CV</a></h2>
</div>
Charlie Pettypiece
[email protected]
How to Edit in Dreamweaver 8 / CS3
•
- 15 -
Should now look like this:
•
Now replace anywhere that says MEMBER with the new
person’s name (corresponding to the names you have given their
photo and CV in the Members folder) in the code view
NOTE: alt=“MEMBER” identifies the content of an image for the
visually impaired
•
You will notice that the picture has been horribly stretched
o You can play with the dimensions by dragging in the
design view or by changing the values under height and
width in the code view
o Make sure that you do not exceed the dimensions of the
Content 1 division
NOTE: You can delete the Link To CV that appears in the Content 2
division, as it is now located below the picture
•
Remember to change the Title of the page to the name of the lab member
•
Once you are finished adding content, save the page as the new member’s name
o Make sure you save it to the root directory of the CulhamLab site (with all the other
HTML pages)
Next you must add a link to the LabMembers.html page, so that you can get to the new page
you have created
o Creating links will be covered in the following section
•
Charlie Pettypiece
[email protected]
How to Edit in Dreamweaver 8 / CS3
- 16 -
Adding Links to Files and Pages
Let’s say that you have entered some text that you want to make link to another page. There are a few
ways to do this. First I will look at what links look like in code:
•
•
<a href=“nameofpage.html”> is how links appear in HTML code
o a href I think stands for hypertext reference
o You end the link with </a>
If I wanted to make the text ‘Richard Nixon’ into a link, I can simply type the following:
<li><a href="Richard Nixon.html">Richard Nixon</a></li>
NOTE: To share the same formatting as the other Lab Members, I must also bold the text.
However, there is an easier way.
• Highlight the text you would like to use as a link
• Now look to the bottom Properties window, there are three ways to link from here:
Charlie Pettypiece
[email protected]
How to Edit in Dreamweaver 8 / CS3
•
•
•
•
•
•
•
- 17 -
1. Type the name of the html file you would like to link to. If the desired page is in the root
directory, simply type the page’s name. If it is in a folder in the root directory, you must first
type the folder’s name, then “/’ then the name of the desired page. (ie. Members/Richard
Nixon.html)
2. Use the target button to drag to the file in the Files tab you would like to link to. The neat
thing about this way is that it will automatically type the proper pathway to get to the file once it
is selected.
3. This button will open an explorer window to search out the desired file. I DO NOT
recommend this way, because it will allow you to access files outside your site map, which can
screw things up.
Once you have successfully linked, the
Target field will become active
o This field determines where the new
page will open up
o Leaving field blank – open in same
window
o _blank – opens in new window/tab
o the rest – I don’t know
Typically, when linking to other pages
within the same site, you just leave the field
blank and have the link open in the same
window
When linking to pictures, outside pages or PDF documents, I would select _blank so your
browser will open a new window
For files, the same procedures apply
o If the file is of the type that your browser will open a Download dialog box, then leave
the target box empty (that way you wont open up and new blank page just to download a
file)
o The exception is the PDF file, because it usually opens inside the browser
Charlie Pettypiece
[email protected]
How to Edit in Dreamweaver 8 / CS3
- 18 -
Adding Images
•
To add an image, you can either click the image button under the common tab, or you can go
InsertÆImage:
•
•
You can also drag an image directly from the Files tab into the design view
When inserting an image, you will be prompted with the following box:
•
DW wants you to enter a small description of what the image is (for the sake of screen readers
for the visually impaired)
Once an image has been inserted, there are a few options you have with regard to formatting
•
Charlie Pettypiece
[email protected]
How to Edit in Dreamweaver 8 / CS3
•
•
•
- 19 -
You may make the image into a link (either to another page, or to a larger image)
You may specify the alignment of the image
You can also choose from different Classes, which are specified in the CSS file.
o For the PDF button, I created a class called pdflink, which puts padding on either side of
the image and gets rid of the boarders DW puts on images when they become links
o Another useful class is imglink, which pads all sides of the image and gets rid of link
boarders (I use it on every linked image I insert)
Advanced CSS
body
• The body tag contains general properties of the web page
• Here you can set the background image, as well as its
position, how it repeats and whether it stays attached to the
text during scrolling or stays fixed
• I have been told that to avoid certain problems with some
browsers, it is also proper
to set margin and padding
in the body tag to zero
a:
• These tags set the
properties for hyperlinked
text
• Typically each has a
different colour
o link: unvisited text
link
o visited: visited text
link
o hover: properties
during mouse-over
Charlie Pettypiece
[email protected]
How to Edit in Dreamweaver 8 / CS3
- 20 -
Difference between margins and padding?
Padding creates space between content (text or images) and the border
around that content. Margins create space between the border around
content and other content.
li
•
•
Under the list item tag, you can set the image that will be used
as a bullet
I suggest using PNG images
o They allow for transparency and a larger color range
than GIF images
#wrap
• Leave this tag alone
• It sets the properties for the
main division that contains
all the other divisions
• Changing these properties
will make drastic changes to
the appearance and position
of the site in the browser
window
Typical div tags (ie header 1)
• Each division can have its own background image
o For my sites, the header is just the background
image for the header division
• Float is a property that sets the position of divisions within
other divisions (I think)
o I set float for every div to left, because then the
divisions will stack in order
• Each division also has a specified height and width in
pixels
o You may use other units to fit the needs of your
design (ems, %, etc.)
Charlie Pettypiece
[email protected]
How to Edit in Dreamweaver 8 / CS3
- 21 -
Site Setup in DW
Here I will the outline the process of setting up a new site in DW. This involves setting pathways to the
local and remote folders, specifying the domain, setting up the images folder, and setting some other
useful properties.
•
•
•
•
In the Files tab, select the following:
Next, select New…Æ Site
o I will assume here that you are setting
up DW to edit CulhamLab,
fMRI4Newbies or JodyCulham on
another computer
Make sure the Advanced tab is selected
Under Local root folder, browse to the root
folder of the site on your computer
o This first assumes that you have an up to
date copy of the entire site on your
computer (this can be accomplished by
mapping a network drive to the Gemini
psychology server and directly copying
the three root folders off)
•
•
•
•
•
Charlie Pettypiece
[email protected]
The root folders are named CulhamLab,
fmri4newbies and jodyculham
Next browse to the images folder that is
inside the root folder you previously chose
Type the web address of the site
(http://www.culhamlab.com,
http://www.fmri4newbies.com,
http://www.jodyculham.com)
Leave links relative to document selected
Next, select Remote Info in the left menu
How to Edit in Dreamweaver 8 / CS3
•
•
•
•
- 22 -
Select Local/Network from the Access
dropdown menu
Now browse for the root folder on the
remote server (again, you must map a
drive to access this folder on the Gemini
psychology server)
Ensure that the following boxes are
checked:
This will ensure that DW saves changes
to both the remote and local copies of
the site
•
•
•
•
•
You can switch whether the Files window
displays the remote or local version of the
web site
Buttons I frequently use are highlighted and
include refresh, put and synchronize
o Put will copy the selected file(s)
from the local to the remote server
o Synchronize looks for the most
recently edited and updates
accordingly (I think)
Charlie Pettypiece
[email protected]
Select Site Map Layout from the menu
Again, browse to the local root folder of
your site and select index.html
Leave the rest of the options alone and
click OK
How to Edit in Dreamweaver 8 / CS3
- 23 -
Validation, Checking and Previewing
There are a number of checks that DW has built in to make sure your code is properly written and that
your site will look relatively constant across different browsers.
•
•
•
•
To perform a Browser Compatibility check,
select the following from the top menu:
This will only test the page that is currently
open
When the check is complete a results window
will pop up
o This will give you information what
where the problem occurs (line # in
code view), what the problem is
called, what browsers it affects, and what the nature of the problem is
I common problem I come across is the Extra White Space problem.
o This means that when making a list, you have left white space between where the first
item ends and the next begins
o If you come across this problem (usually after adding a new item to the sidebar) simply
fix it by deleting all the white space between list items, as follows:
After doing a series of edits to multiple pages, it is a good idea to perform Validation. This can be done
either only to the currently opened page or to all the
files in your site at once, as follows:
• To perform the check on all your html files,
simply highlight them all in the Files tab
• Do not choose Entire Current Local Site (it
will take too long and scan unnecessary files)
Some of the pages (on CulhamLab in particular) will always come up with errors. That is because some
of them are made with tables, and DW does not like tables. Ignore these (ScreeningForm,
fMRIJournalClub, etc.). The most commonly flagged error is including characters like “ % $ & < > in
your HTML code. If you want those characters to display properly in a browser, you cannot just type
them into the code screen. You can, however, just type them into the design view and
DW will automatically write the proper code from them. Alternatively, by typing & in
the code view, a dropdown menu will appear that gives you the code for each of the
symbols. You can type it or just select it from the menu (includes semicolon).
Charlie Pettypiece
[email protected]
How to Edit in Dreamweaver 8 / CS3
- 24 -
Finally, as you are working, is it always helpful to preview your changes in a web browser. You can do
this by simply having the URL for the site opened in a browser and refreshing as you work. However,
DW also allows you to view changes to your local site via the following button:
If you have DW setup to not automatically upload to the remote server, and you just want edit the local
site (for precautionary reasons maybe), then this button is useful for previewing your progress.
Remember to preview your changes in as many browsers as possible. I suggest the following five:
1.
2.
3.
4.
5.
Firefox
Internet Explorer 7.0
Internet Explorer 6.0
Safari
Opera
I’ve tried to make the site as consistent as possible across these 5, but there will always be slight
discrepancies.
Charlie Pettypiece
[email protected]