DREAMWEAVER 1
Introduction,
Background, Interface
DW:
Create a folder where you will store your
website files, and tell Dreamweaver ŇWhere on your computer you want to store
your filesÓ (i.e., where that folder is)
This is the local folder where DW will plop your files.
5.
Fill out this form as shown above; yes, test
the connection!
6.
Check in and Check out is when multiple
people are working on a site.
Select NO, do not enable check in check out
(at least for now)
7. This is the summary:
Index.html- every student has a placeholder if
they already created public space
You
can edit this placeholder
You
can replace this placeholder.
HereŐs a good discussion of index pages:
http://www.mtholyoke.edu/help/creating-pages/indexes.shtml
.
FETCH IS ONE FOR MAC.
CYBERDUCK
á A UNI SUNNY account
(or an account from a private firm/cable provider, etc)
á Your User name
Hit connect
IT asks for your password and youŐre
connected.
JUST MAKE SURE your FTP program ITŐS AN SFTP.
PREPLANNING YOUR WEBSITE:
á DRAW YOUR DESIGN OUT ON
PAPER FIRST
á STORYBOARD YOUR WEBSITE
FIRST
á VIDEOS SHOULD TO BE
SHORT AND SMALL (160X121 is a good size.)
á SUNNY IS A WEBSERVER AND
NOT INTENDED TO HOLD LOTS OF VIDEO.
á UNI HAS A STREAMING
SERVER, WHERE STUDENTS CAN STREAM STUFF AND ITS CAN PROVIDE A LINK AND WORK
WITH EMBEDDED CODE.
á GO TO PRODUCTION HOUSE
FOR HELP WITH THE STREAMING SERVER IF YOU WANT TO UPLOAD LARGER VIDEOS.
Work Locally
upload after youŐre done working locally.
Watch for slow networking: work locallyÉ.create
folder on desktopÉand then move to Public_wwwÉat completionÉ.or create folder
on UDS, NETDISK,Éand then move into public_www space.
Make sure you understand what it means to move
content into a PUBLIC folder.
Once public, the whole world can access it and
see it. You page can be harvested
by a search engine. It is NOT
private information anymore.
A huge School of Business fiasco at a certain
university happened recently when someone placed thousdands of confidential
social security numbers in a Public WWW folder. There was a huge security breach; anyone could find those
numbers and download them. So itŐs
VERY IMPORTANT to understand that a Public folder is a PUBLIC folder.
Problems
If problems exist with student account, go to
ITS (Room 36 in ITTC building).
Problems with building your webpage, go to the Production House.
Extra help
http://proquest.safaribooksonline.com/0672327600/ch02
entire book - http://proquest.safaribooksonline.com/0672327600
Dreamweaver
Workspace
The
Start page
This
is the first page that comes up when you enter DW8. Go over 3 columns:
1.
Open a Recent Item: open up a
recent DW8 document youŐve been working with.
2.
Create New: quick link for
creating new pages. Can click any
of these items (HTML, ColdFusion, PHP, etc) and you can make that type of page. IF you donŐt see the type of page
listed here you can click MORE and you can get more types of pages DW can
create.
3.
Create from Samples. Create new
pages based on a variety of
templates. You can select a CSS
page designsÉgood way to learn CSS by examining the code behind these pages.
You can start with some Starter pages to work on some layouts based on tables.
You can customize them to suit your needs. Bottom of Start page you can take an
interactive tour. = A useful springboard.
If you end up getting good at DW you can get rid of DW and go to Edit/Preferences
(or Mac/Dreamweaver/Preferences) and select General/ShowStartpage to
deselect.
HTML vs.
XHTML
HyperText
Markup Language: for many years
the only code you could use to create webpages. ASP, JSP, Javascript, CSS, these are add-ons to HTML. Every webpage at its heart was made in
HTML. But in late 2001, the WWWeb
consortium, which determines worldwide standards on the web, decided to
discontinue HTML and replace with XHTML Extensible Hypertext Markup Language is
almost identical to HTML. Their
syntax is a little different.
XHTML places stricter rules on the way its code is written, and is more
universally compatiable. XHTML is
a cleaned up version of HTML. DW
works just as well with HTML than with XHTML. The point of DW was to take the coding out of the designers
hands and lets designers concentrate on the designers. DonŐt need to know how to code at
all. Code DW writes is clean, and
DW8 all write their code based on XHTML standards. DW handles all this for you. If youŐre serious about getting into web design
professionally, youŐll have to learn how to code a bit in XHTML and fix up code
manually. If you want to learn
more about XHTML, visit the WWW consortium page and find the link on XHTML, the
standard, the recommendation for using it lots of other things.
ItŐs
helpful to learn the specifics about the standard.
What is
CSS?
CSS
is an increasingly important concept in Web Design: Cascading stylesheets.
Provides
and controls the appearance of multiple pages in your website. Instead of formatting style on each
indiv. Page, CSS helps you create a collection of stylesheets, and if you
change something, the change ripples through all your changes. Once a stylesheet is linked to you
pages, any change you have in style will conform across all your related
webpages. ItŐs a big time
saver. ItŐs a powerful tool that
can be used to control text and images and layout entire page. CSS helps you separate presentation of
page from its structure. Structure
of the page is something like the text of a heading and the text of the
content. The Style of that heading
and the style of that text is the kind of thing we adjust in DW8. The most important reason for
separating structure and prestentation is that it makes it so easy to change
your website.
This
site is dedicated for the promotion of CSS in design layout.
Go
to the page, you can see the nice layout.
Then
go to the link (in lavender on that page) that says Ňhtml codeÓ and you can see
the page without any CSS implementation on. They ask people to write their own CSS styles to reformat
the code. The links to the CSS
styles is on the link, Ňcss fileÓ so anyone can change the styles. Take a look at the various styles that
people have changed the page with.
This is neat. You can see
all these different presentations of the same content.
DW
has always had great CSS support in the past and itŐs getting so much
better. Even if you just type a
few lines and make the text bold or italicized, DW will automatically make a
CSS stylesheet for you.
What is
DHTML?
Dynamic
HTML: essentially a collection of
different technology that can include any combo of XHTML, Javscript, CSS, and
DOM (document Object model).
Combine these technologies and create more dynamic contentÉ.something
made possible include animated objects on page, letting user drag things around
on page, and complicated rollovers.
DHTML has the most serious cross platform and browser issues, which
result in undesired effects. ItŐs
a little risky, but DW8 can help you sample DHTML across various browsers.
What is
JavaScript?
Was
developed by Netscape in 1996, increasingly popular and useful. Interacts with
HTML and allows you to add dynamic content like rollover buttons or you can
automatically resize a browser window.
You donŐt need to know how to write javascript in the DW8
interface. The Behaviors panel is
where a lot of javascript happens. There are tons of other behaviors available online
that you can get (Behaviors/Get More Behaviors). Further extend DWŐs capabilities.
DonŐt
confuse Javascript with Java. Java
is a high-level programming language developed by Sun Microsystems. Netscape licensed the name from Sun in
the hopes of increasing the acceptance of Javascript. No other real relation. The Name seemed to have worked b/c javascript is in heavy
use today.
File
naming conventions
Your
website consists of individual files linked together. Naming them properly is really good web design
practice. A lot of todayŐs web
browsers and servers will allow you to fudge, but itŐs REALLY important to have
proper naming strategies.
1.
DonŐt use spaces in file names.
Most browsers will be able to bring up page names this way. But it can complicate things. Take the webpage nameÓ about my
company.html.Ó Any time you add a
space, itŐll be represented in the url as %20
e.g.:
http://www.teacloud.com/about%20my%20company.html
in
a browser. ItŐs ugly, but imagine
trying to tell someone your address if itŐs listed like this. If you really need to separate words in
a fileŐs name, try using a hypen or an underscore, looks nicer. You also might want to consider using
as short a name as possible (Ňabout_us.htmlÓ). AboutTheCompany can also be a solution.
2.
Avoid using capital letters. OK in
most situations but some unix sensors are case sensitive. ItŐs much easier to just avoid capital
letters.
3.
DonŐt use special characters:
.Ó,!?/\~*&$#@( )
dots
are reserved for placing before the filesŐ extension (.html). And slashes are used to indicate that a
file is in a nested diretory.
DonŐt use anything other than letters and numbers.
4.
File name extensions: .html or
.htm
These
are the extensions appearing at the end of all webpages. Both are acceptable. .htm was initially used b/c early dos
servers didnŐt allow for extension longer than 3 characccters Pickk one and stick with it. ItŐll cause confusion. In DW you can set your default
preferences to either pick one or the other.
What is
an index page?
Show
the folders behind an existing Website.
Notice
it contains folders and files with the .html extension. A website is essentially a collection
of files and folders. Main folder
is the site folder. This is also
sometimes referred to as the ROOT folder.
Open a site window and if you donŐt see any of these foldersŃa Windows
issueŃgo to Tools/Folder Option/View/ and make sure that ŇHide extensions for
know file typesÓ is not checked. If you check it and apply it, the .html
extensions have all been removed.
ItŐs good to see the file extensions b/c itŐs important to know what
file youŐre working with. Files that end with .html or .htm are the actual
webpages for the site. Folders
contain additional webpages as well as additional folders and images that are
used throughout the site. NOTICE
file labeled Ňindex.htmlÓ. this is
a very important file name. For
the most part youŐre free to name your webpage whatever you want. But by naming your page index youŐre
basically saying Ňthis is the default goto page for the entire folder.Ó If you fire up: http://www.uni.edu/fabos
When
you type this in youŐre telling the browser to find the folder containing the
default site, index. If you type
/index.html and enter, it takes you to the exact same page.
(http://www.uni.edu/fabos/index.html)
The
Insert bar
Essential
DW interface item. Create New
HTML. Insert bar contains a row of
icons and each of the icons represent an element that you can add to the
Webpage. And a lot more icons
exist that you canŐt even see here.
For
convenience the insert bar is broken up in several categories that you can
access from this menu:
If
you want to build a form on your webpage you select ŇformÓ category, and youŐll
find all the tools (represented by icons) to build a form. If you select ŇCommonÓ youŐll see the
most common tools, such as adding tables, inserting images, adding email
link. You can customize the insert
bar to some extent, when you selet Show As Tabs (at the bottom of the
menu). A different way to work if
you prefer it that way. You can
also choose ŇFavorites,Ó Customize your favorite objects. Right Click anywhere in the Insert bar,
and itŐll take you to the Favorites window. Select each icon you commonly use, and add it to your
favorites. Much easier to use the icons than to pull down a menu (all tools are
located in pulldown menusÉInsert/Image, etc)
The
Properties Inspector
Probably
the most important panel to have open at all times. ItŐs a contextual panel, meaning the context of the panel
will change depending on whatever you have on your webpage. SHOW how the properties panel changes
depending on whether you have a text panel up, or a table selected, etc. YouŐll want it open all the time; the
settings that appear here donŐt appear elsewhere in DW. Make sure panel is expanded the whole
way.
The
Document toolbar
Runs
across window. Contains several
buttons and menus.
Code/Split/Design.
Default it
opens in Design view. Displays
your page in wysiwyg mode (what you see is what you get.) Gives you a pretty
accurate depiction of what your page will look in web browser. Code button displays code. Even what appears to be a blank page
will have code behind it.
Split=you can see both windows. Window/Code Inspector allows you to look
at the code in a smaller window off to the side.
Title: make sure you give page a good name.
Browser
target check button:
Lets
you validate your pagesŐ code to see how itŐs going to stand up in different
browsers. If you select the ŇsettingsÓ option you can choose various browsers
in which you want to test your page against.
Validate
Markup Button:
Lets
you check your code for tag or syntax errors. Settings: itŐll take you to your DW preferences,
so you could make sure youŐre following strict XHTML code.
File
management button:
Allows
you to upload and download files from your computer to the web server and vice
versa.
Preview
in Browser button:
Launches
a browser and allows you to view your page in the browser of your choice.
Refresh
Design View button.
Allows
you to Refresh design you just did.
View
Options button:
If
youŐre in Design view, you can look at Head content, show or hide guidelines,
rulers, grid, and so on. If youŐre
in Code view the menu changes.
Split view, you have both Design and Code options.
Design
view options Code
view options Split
view options
Visual
aid button:
where
you can show or hide various options youŐll be working with.
The
Document window
Where
most of the action in your webpage freation will occur. LetŐs look at features. Tab above the file: youŐll see the name of the page
itself. DonŐt confuse page name
with page title. The Title is what a user will see in the browser. The file name is the name of the
document itself, the one that has to end in .html or .htm The * next to the file name means
that it hasnŐt been savedÉthere are things on there that hasnŐt been
saved. Play around w/ *
appearing or disappearing, depending on whether the page is saved.
If
you have more than one tab, up at the top of the menu, it makes it really easy
to switch back and forth.
Look
at the bottom of the Document Window:
<body> tag. If thereŐs more content on the page,
youŐd see more tags (such as <table>. You can also click the tags themselves to select whatever
they represent. TheyŐre good for
selecting things when elements are difficult to select.
Next
across:
Selection
tool
(itŐs selected by default, you want to have it selected most of the time); hand
tool (lets you drag page around instead of scrolling); magnifying glass
(sometimes youŐll want to select really small items like tiny table
cells). When you use the zoom
tool, the space bar quickly changes the zoom tool to the hand tool, so you can
use zoom/hand interchangeablyÉvery convenient. Also, when zoom tool is selected, pressing option/Mac and
Alt/windows you can automatically change to a zoom minus sign.
PRACTICE
USING ZOOM TOOL.
100%,
etc. allows you to change Document
Window size. Fit Selection, Fit AllÉ
Fit
Selection
represents whatever is selected so that you can see it really well in the
window. Fit All: shows your entire webpage comfortably
in the document window.
Finally,
Window Size menu allows you to select among various pre-selected window
sizes. Not everyone will be able
to see your page in the same way depending on what browser theyŐre using. With the Window Size menu you can
approximate what size your windows will be. All it does to resize your window to make you see how your
material might look in a browser window that size.
LAST,
the 1K/1 sec is showing you how big your file size is and the approximate
download speed. ItŐs set to assume
a 56K connection.
Panel
and panel groups
Each
panel serves a different purpose.
TheyŐre collected in panel groups. All the bars that have these little
triangles next to them are panel groups.
Some youŐll use a whole lot, some hardly ever. If you click on little skinny button, all the panels shove
off to the side of the screen.
Can
also drag button from left to right. Skinny buttons donŐt exist on the
mac. (Properties panel also has a
skinny button, but again, keep property inspector opens all the time). F4 will show and hide panels as
well.
Each
panels group has a little options menu that gives you options within that panel
group. Experiment looking at the
different option menus associated with different panels.
You
can also grab the gripper area and drag the panel to make it a floating
panel. It allows you to customize
the workspace. You can also group them together (the panels). You may also just want to detach it and
close it to get it out of the way completely (or by clicking on Options/Close
Panel Group.
Saving
Workspace Layouts
Once
you spend all this time setting up your workspace the way you like it, you can
save it so you can recall it later. Window/Workspace Layout/Save Current. Can find it later, by going to Window/Workspace
Layout/Title (you can save as many workspace layouts as you want)
How to
Define your Browser of Choice
If you want to reach the broadest
audience possible, you should have the most current version of IE, Firefox and
Netscape browsers. If youŐre
really serious, you should test them cross platform: Mac and Windows. Checking
out your pages in various browsers:
you should do it at every step as you go along.
Preferences/Preview
in Browser If you need to add
more, click the plus button. You
can assign primary and secondary browsers, which will be linkable by buttonsÉF12
and control F12. (Mac=option F12 and
Control F12). Also button in
toolbar (the globe button) in the document window will connect you to the
primary and secondary browsers.
Defining
a site
Very
important process, defining site. You could just jump into start page and start
building your webpage. But that
would be foolish. In order to
properly manage your site, you need to let DW know where on your Hardrive where
all of your sites, files, folders, etc. will be located. This all-inclusive folder is called
your site folder or local root folder.
The folder that resides locally on your hard drive. Telling DW where this is located is
called Defining your Site. Once DW
knows where it is itŐll be able to keep track of your site. Without knowing, moving an image from
one folder to another may end up in broken links.