Week 7: Animation and Layouts!

This week we covered a variety of different ways to animate gif files in Fireworks and Photoshop.

They are very similar, but what stuck in my head after trying all these techniques was that if you are in fireworks…MAKE IT A SYMBOL FIRST!

I found animation in fireworks easier for some reason, and like the ease of managing my states and sharing my layers.

 

As far as getting all of this into an HTML document. I wanted to put a little reminder in here to myself: CMD + J lets you edit BG properties.

I keep forgetting that for some reason.

 

Other than that, see the previous blog for my final project ideas. It was a fun week even though the blog is incredibly late 🙂

Getting Inspired

My Morgue files… Just because I like them

 

http://bcts-potomac.aacc.edu/ARTClass1/05/final_project/Inspiration/kellyhall-morgue-file.html

Week6 – More DW and FW plus my banners and BG image

This week we furthered our skills in Dreamweaver by learning how to create new documents and manage our assets.  We also repeated information about file types and learned a series of different ways to edit or images and put them into a page. The portion about managing assets was particularly helpful because you don’t have root through directories to find content for your site, it is all there in your panels and you can even organize it in there.

We also worked more with Fireworks, specifically using our tool tips and smart guides, which was similar to what we learned in photoshop, though fireworks makes it a little easier for web images and graphics.  We looked more into our vector tools, filters, and styles so that we can create original artwork as well. Again, I didn’t have very many notes because a lot of this was buttonology that you can only learn from doing.

That being said, we made two banners (the one with the coffee cup from last week and a mini version) for our school website and created a background image to tile seamlessly. I like how mine came out thought he steam was tricky for my un-artistic self.  Here is a link for how it all turned out

http://bcts-potomac.aacc.edu/ARTClass1/05/week6/Banner/Banner2-MyAACC-kellyhall.html

It is a little exciting because it is the first real culmination of skills – both artistic and coding.

 

Other than that, we began brainstorming on our final projects, which can be found in the previous entry  🙂

 

Final Project Proposal

Idea 1:

The entire reason I took this class is because I want to be
able to build a site for my Photography business. SO, my first idea is to do a
photography website. For content, I have some photos, but I would really like
to have more portraits in there and possibly a wedding. I plan on taking a lot
more photos between now and then, so content shouldn’t be too much of a
challenge. I wanted to have categories for lifestyle/portrait, Weddings, Just
because. I also want a place in the website where customers can view their proofs.
I’ve looked at a lot of photography websites and it looks like people don’t put
a lot of effort into them, or they forget to update them. BUT, here are some
photography websites that I really like.

http://www.piperbellaphotography.com/  (this one is for my cousins business)

http://amydeputyphotography.com/  ( I like how simple and “doable”
this one is)

http://www.waltersandwalters.com/

http://www.robertdannphotography.co.uk/

http://www.bottlebellphotography.com/gallery.aspx

http://www.brucepercy.co.uk/

Idea 2:

I also write a lot and would like to put writing samples on a website. It
is hard to find examples of this because most people use blogs. A lot of
authors wont put their work anywhere on the internet because of copyright
issues and because a lot of publishers will not print something that has
previously been released on the internet. Nevertheless, I could fill this
website with tons of content. I have heaps of finished work on paper, and a few full zip drives I could sort through to find writing good enough to “showcase”.
I liked the idea of the website “seeds of choas”. I looked up a few websites
for authors I like to read and I think some of the layouts my work. I’ll
probably end up just doing the photography one.

Here are the author websites:

http://www.tawniodell.com/books.html

http://www.mjhyland.com/

http://www.amybloom.com/

 

Week 5: I made a coffee cup!

This week we covered different elements of texture and began working in fireworks on vector images. The texture portion was pretty straight forward (the distinctive appearance or feel of an object…in this case through pattern, shape, volume, depth, etc. ), but I didn’t really understand exactly HOW important until I started getting through all the new fireworks stuff I learned and began trying to design my own vector image .

In fireworks, we covered the basics; we learned where all our buttons were, how to import/export/optimize/open new.  We also learned the difference in editability between native png documents and regular png’s…then reiterated how well vectors optimize as gifs and how awful they are as jpgs.

The most complicated for me was using the vector tools. I am no artist.  After all the time I spent trying to get my vectors JUST how I wanted them (and they never really made it there, I had to can a lot of ideas because I was limited by my ability), I have a new found respect for people who create organic vectors for their own sites.  I was perusing sites amazed at peoples work. It almost makes you feel like people who use other people’s vectors are cheating. Big time. It took me about 2.5 hours to make a coffee cup look good, about 45 min for a leaf that ended up so small you can’t tell, and 25 minutes for rake that kind of looks like a hairbrush now that I shrunk it. Haha.  Nevertheless, that same coffee cup “came alive” when I added my textures, shadows, and highlights.  This completely reiterated the text from this week. I have to say, I’m pretty proud of my coffee cup, even if it does look like kindergarten art 🙂 Wanna see?

 

Cute right? haha. I had to use all basic shapes. lol

 

Besides that, there weren’t many notes. A lot of this week was in the book or learned from pointing and clicking. However, here are some videos for reference later incase I forget.

1) What is Fireworks CS5?

http://tv.adobe.com/watch/learn-fireworks-cs5/getting-started-gs-what-is-fireworks-cs5/

– creative and production tool.

 

2) Fireworks interface: http://tv.adobe.com/watch/learn-fireworks-cs4/getting-started-02-the-fireworks-interface/

it’s the same as other User interfaces.

3) importing and exporting images: http://tv.adobe.com/watch/learn-fireworks-cs4/getting-started-03-importing-and-exporting-images/

4) Smart Guides and Tool Tips: http://tv.adobe.com/watch/learn-fireworks-cs4/getting-started-04-smart-guides-and-tooltip/

5) Using Kuler Color Themes: http://tv.adobe.com/watch/learn-fireworks-cs4/using-kuler-color-themes/

6) Understanding Styles and symbols: http://tv.adobe.com/watch/learn-fireworks-cs4/understanding-styles-and-symbols/

 

These are also helpful!

 

http://dowebsitesneedtolookexactlythesameineverybrowser.com/

http://css3please.com

http://www.markboultondesign.com

 

 

 

 

 

Week4 (more CSS, Backgrounds, Descendants)

This week we worked more with CSS. Specifically we were able to create a navigation bar using an unordered list, anchor tags, and div tags in our HTML. We then manipulated the CSS into making our unordered list into a navigation bar by defining descendent selectors.  We also used CSS to create page wrappers, and float images or other text within our pages to the left or right.

We also worked in Photoshop to create background images in three different ways: Vertical,/Horizontal, full-screen, and seamless. Each of these requires different optimization. In this tool you can create a background image (i.e using gradients) to tile, or control how your graphic will show when it is tiled. *It is important to pay attention to color so that you don’t distract from your text.  I’m still not completely clear on a lot of this stuff, but seem to be getting the job done regardless.

This week was more application than conceptual; still here are my notes for later:

Week 4 notes:

Lectures:

More on color:

Color theory is art of mixing colors. It influences people Culturaly and psychologicaly.

Computer color wheels are red, green, blue.

Additive system: you get white when they are all on 100%.

Web safe: developed by Lynda weinman. There were 256 colors. Its old now.

Different generations had different colors appeal to them. (see lecture for exact.)

More on CSS:

Anchor links and lists: ID’s a set area on play.  (jump to a reference point on your page. i.e home? Or back to top)

Lists can be manipulated with CSS too and create custom navigation.

Class – free agent of CSS – as long as you want.

ID selectors are custom names and can conly be used once. We did this last week with #whois.

Div – defines division or section.  It groups block elements.

Ems (used instead of pixels)

Floating element aligns to left or right.

Reading:

Background images:

To repeat your background image, or make it tile:

body {

background-image: url(spiral-bg.gif);

background-repeat: repeat;

}

Non-repeat image (easier for browser):

body {

background-image: url(bg-sun.jpg);

background-repeat: no-repeat;

background-position: center;

background-color: #FCCC02;

}

CSS Overview:  

This will help you remember all the elements in CSS:

https://angel.aacc.edu/section/default.asp?id=ART1708752011FA

 The Difference between ID and Class:

ID’s are unique and can have only one element ID and each page can only have one element with that ID.

Classes: you can use the same class on multiple elements.  (like widgets).

 Optimizing:

Basically the same info from last week about the file types and how to cut them down. See last weeks post.

Lynda.com Practice:

Design considerations for web backgrounds:

Background: you can use CSS to tile now. The smaller, the more it repeats.

You should stick with colors that don’t contrast…so it’s not distracting. Dark background=light text and vice versa.  Bright is hard to read.

Optimizing a background graphic:

Basically the same as images from last week.

Vertical/horizantal backgrounds:

you can make a bar, then change the gradient based on your swatches. Then use your CSS code to make this repeat for a gradient background. Revieew this video if you forget how.

Week 3, (Pics, Optimize, Links)

In week three, we took a deep dive into color and color theory. I learned different types of “color wheels” and how to create complimentary colors and pleasing color themes. The best (and honestly, most fun) way to do this is through kuler.adobe.com. We also worked on putting links and pictures on a page to include picture placement, word wrapping. The links included coloring your links for when they are new, hovered, visited, or current. While we also learned the three main file types for photos and how to optimize them in photoshop, then get them on the web. Again, this week was a challenge for me, but I suppose that if I can make a pretty website later, it will be worth it. The technical parts of the above mentioned tricks are listed below in my notes:

Web Design, Week3 notes:

Text book (CH2) notes:

*make notes about the websites mentioned in your blog this week.

Colors are important, but there is no one way to ensure your color can effect the masses the way you want it to.

Red: stimulating (blood pressure, matabolism, dramatic ,rich)

Orange: energy (happy, creative, enthusiastic – jumps at you when you see it)

Yellow: Active: (visible but can be over powering)

Blue: the favorite (open, comfortable, emotion, sky and sea/melancholy)

Purple: royalty (extravagance, wealth..balances red and blue)

White: clean (light, perfection, purity..makes stuff pop and make a bold statement)

Black: elegance (deep, sorrowful, adds depth)

Color temp:

WARM colors represent heat and emotion, pop out and dominate

COOL colorscalm, good for larger elements.

Chromatic value: tint (white) and shade (black).  Changing this impacts peoples psyche.  SATURATION is the intensity of the color.

The Additive color model:

Primary: red, yellow, blue

Secondary: mix 2

Tertiary: (six of them) from mixing a primary and a secondary.

(see highlights in your book for the remaining parts of this chapter)

 Notes from folders/lectures:

Images for the web:

3 Main ones:

JPG (JPEG) – Joint Photographic Exprets Group

–       compression can be adjusted but it throws away subtle color differences, and once you compress it, you cant change it back

–       type,vector, flat/8 bits, 256 colors

GIF – Graphic Interchange Format

–       default chose for simple graphics/animation is possible

–       good for complicated color combos.

PNG – Portable Network Graphics

–       doesn’t display in all browsers. Newest.

–       Best for simple or requiring true transparency against a background)

*Find a good balance between quality and file size for your images. Optimize by reducing file size, colors or adjusting palette.

Image editing software:

Photoshop: (industry standard for edit and manipulation)

Fireworks:  (industry standard for Vector image editing and optimization- web graphics etc. )

Photoshop elements:  ameture editing tools

Lightroom: photographers standard for editing and cataloging

GIMP: free editing tool

Graphic Converter: shareware for MAC

Paintshop Pro: PC/ low cost

Saving Images:

*consider Format, compression, Resolution, mode and file size when saving images.

GIF- adaptive palette/large areas of flattened color, illustrations, type, etc.

JPG – Quality (start with 50 and nudge up)/ continuous tone, gradients, and traditional photographs, etc.

PNG- indexed. Choose alpha transparency in Fireworks. Best for large areas of flattened color, illustrations, type, that need multi-transparent treatment (like complicated dropshadows, etc).

What is CSS?

Web page components:

Content layer: info the author wants to convey, embedded in HTML or XHTML.

Presentation: how the content will appear

Behavior: user interacion

CSS (cascading style sheets) – allows you to control the presentation layer. You can keep the style separate from the content. So basically you can have 1 style sheet for as many web pages as you want.

Benefits: site maintenance, saves bandwidth, content and presentation seperation, can use the same rules for different media.

Color theory and the web:

 http://www.colormatters.com/symbolism.html (same stuff as in the book)

http://www.colorstrology.com/  (gay…Im blueish)

http://www.mariaclaudiacortes.com/

www.kueler.adobe.com  (okay, that was fun. I like to do them from the images and think it would be great to build your site colors off your main pic using this tool! )

Lectures:

Links, Images, Oh My:

Jpegs open in browser and docs open separately.

• See last weeks notes about customizing images and how you can border them etc*

Lecture part 1: Visualizing Details

–       CSS  (I ended up drawing a square)

–       What I see below…black square, with red square and text over it.

Part 2: HTML and CSS

You make CSS rules with declarations.  You can combine your declarations in the brackets to make rules that apply to your entire html doc.

Lynda.com practice

What is CSS?

Presentation mark-up seperation from HTML

–       collection of formatting rules in an external file, or in the header, or applied as an inline attribute. You can do whole sites on one doc.

–       All formatted as selector {delaration (property and value)}

–       Structure through html, presentaion through CSS (you can make style sheets for web, print, and devices…without having to change your html structure.)

Using Inline Images:

Images are inline tags within your paragraph.  Example:

<img src=”Lynda-24.jpg” alt=”Lynda.com logo” title-“hey! You with the mouse!” width-“24” height- “24” />

alt: required for (text if the browser cant display)

title is when you hover.

Width and height – specifiy for browser (makes it better so that it knows dimensions, smoother exp.)

Following Text Around and Image:

You put and alignment tag. I.e  align-“left”

Then if you want space, put hspace=”10”  and it will put pixels there.

Same goes for border etc.

Breaking lines around and image (in weekly files) :

Put a <br /> if you just want it to break

If you want it to continue AFTER the image, then put the clear attribute like this:

<br clear=”left” /> (you can also do “right” or “all”)

Createing Image Link:

Remove spaces on anchor tags of you don’t want the little space after your image links.

Intro CSS:

Style attribute only applies to one place in a document. A style tag, applies to the whole document.

Inheritance:

– You link your external style sheet (so it will apply to the whole document).

Ex: <link rel=”stylesheet” type=”text/css” href=”external.css” />

-CLASS: If you do the class ones, they start like “.first” … with a period.

They are third in the hierarchy.

Then you type a rule in your html where you want it. like this:

<p>

-if you want to apply class to an inline element, you ues the “span” tag. Like this:

<span class=”highlight”>Originally released < /span>

Syntax:

Speacial tags are span and div. div is block level/span is inline.

Looks like:

<body>

<div style=”color: blue”>

–       it just changes it for that block. If you want to change the whole thing, you would have to change your entire CSS. So it is kind of like a quick fix for 1 paragraph or whatever.

3 kinds of selectors: tags, class (with “.” Apply using class attribute) ,

ID selectors: “#”

#whois …can only be used once. Mark up an entire section.

Photoshop

Set up your workspace.

Use some shortcuts: (you can look at this in your file menu)

You can change them by going to:

Edit: Keyboard Shortcuts. (save photoshop default ones first…second icon)

…set preferance for web.

Change units of measurement from units to pixels.

Color of guides.

Applicaions: show rulers.

( control click on rulers then go to pixels)

photoshop menu (preferences, units and rulers, pixels…just change this every time. )

colors:

menu, color settings

north America general purpose 2.

S-rgb

Web Safe Colors: 216 colors that can be displayed without shifting or dithering.

Over.

Color Picker:

Toolbox

HUD color picker (on the fly) – heads up color.

Load swatches:

1)Preset ones on panel menu then see lists.

2)Panel:replace swatches:navigate to file: open

3)Open color source (page pic, etc) then a document.

– delete swatches (preset manager) delete and done.

– get eyedropper-click and hold, release on color, drag over to swatches, and it leaves it there…repeat.  Save it in custom panel menu. Youd have to close and open photoshop to get your swatches to show up.

Copy Color as a hex value and HTML

Eyedropper/control click/copy color hex code.

Touring the Save for web window.

Convert: File- save for web and devices. You get windows with the different versions so you can pic the best one for your needs.

 Understanding File types.

Psd for source files…then optimize.

Week 2 (Links, FTP, Basic Code, Dreamweaver)

This week I learned how to write code well enough to create basic document structure! It is pretty exciting for me. I love doing it.  I also learned how to work Dreamweaver a lot better…all the new buttons had been creating some confusion in week 1. I can get my html files to show up live on the web/ i can FTP homework files. I got a chance to learn different kinds of linking, and what the code would look like for each, which will help make effective links. Learning how to do all of this reiterated the importance of file naming and folder organization. In addition, I set up a blogroll for all my classmates, so take a look at theirs if you want better notes than mine!

I definitely had struggles this week with the subject matter, but am starting to feel a lot more comfortable with it all/ capable of even doing this! yay! I can’t wait to delve further.

Below are my long boring notes, which I am placing here in case I ever need to be able to go back and use them. Thanks for reading…

————————

Web design notes for week 2:

URL: Uniform resource locator

–       has two components

http	://	http://www.digitaljenn.com
Protocol identifier		Resource Name

Links:

– use the “A” tag. For example (this is a clickable link): <a href=”http://www.yahoo.com“>Click here to visit Yahoo!</a>

–       Two types of links: 1) absolute (added at anytime and can be to other peoples sites)  2) Relative (..to the page they are placed on/ they are dependent on your sites directory)

—————————————–

FTP & Homework files

You have to do this every week to put in the discussion forum.

https://angel.aacc.edu/section/default.asp?id=ART1708752011FA

(do this after your Lynda.com practice. )

INSTRUCTIONS for FTP:

My student FTP info is:

• Hostname: bcts-potomac.aacc.edu
• Login:
• Password:

DW

Pull out files

Manage sites

New

Site name: Web Design 1

Local Site Folder : browse to folder on desktop

Servers:

Click plus (name it, FTP, then put in “hostname”)

Test it

Part2:

Put files on server

Click expand

Click plug (to site) –

select file

hit the blue arrow

*put the resume thing in there once you do it.

make URL

Preview in a browser with preview URL (in the personal FTP stuff)

Paste it, then change the info in.

http://bcts-potomac.aacc.edu/ARTClass1/05/Week2/kchall1-03-paragraph-align.html

——————————————

From lectures: 

Link tags open and close with an <A>. They look like this:

<A HREF=”page1.html”> Click to Visit Page One! <A>

open link      folder              label (in site)                 close link

 absolute link (to someone elses site) looks like this (it is like a mailing addy):

<A HREF=”http://www.yahoo.com”> Click to Visit Yahoo! <A>

Relative link (to your own page…it works locally in your computer.)

<A HREF=”aboutus.html”> More about us. <A>

Links to images work the same. You have to designate the file path though.  i.e “images/cutie-kona.jpg”.

IMAGE file formats:

Jpeg or jpg  (joint photographic experts group)

GIF (graphic interchange Format) allows for transparency and animation

Basic code for image is (with an IMG tag) :

<IMG SRC=”cutie-kona.jpg” ALT=”Kona is Cute”>

you can also add other stuff like margins and borders and physical dimension.

Here are those tags:

Vspace/hspace=

Border=

Width/height=

————————

Lynda.com Practice:

 paragraphs:

<p> Words in my paragraph.

</p>

a para will align left naturally.

You can re-align by typing in align commands. Here are the examples:

All paragraphs default to a left side alignment:

<p align=”right”> Words in my paragraph.

</p> (flush on right, ragged on left)

<p align=”justify”> Words in my paragraph.

</p> (both sides flush)

<p align=”center”> Words in my paragraph.

</p>

Understanding block level inline tags:

Block (contain other elements)

Inline (appear in a line of text) – you can add images (inline elements)

 Controlling line breaks and spaces:

To make a line break where you want it, add a:

 <br />

to make a line break NOT happen, add a :

&nbsp;

if you don’t want this to never break, you can select an entire line, you can replace all spaces with this nbsp (just find in doc, then replace)

you can try to <nobr> , but its not always supported by browsers.

Formatting quotations and quote marks:

Blockquote element (usually just indents the paragraph) it looks like this:

<blockquote>

blah blah blah, this is what Im quoteing…sort of

</blockquote>

new Q element: 

<p> this is my quote..<q> lalalala </q>

Adding document structure with headings:

There are three heading tags. Headings give structure to your document. You can change the style of each heading.

Example:

<h1 style=”font-family: sans-serif; font-size: 1254”> Headings </h1>

then you copy and paste it to each level but change color etc.

preserving preformatted text:

If you already have something formatted a certain way and you want it to stay like that, you can just change you paragraph tag <p> to a <pre> then copy and paste the text in between.

Link Tags:

Above, I already took nots on the same thing.

Hyperlinks:

Use anchor  tag:  <a href-“http://newsandbologna.wordpress.com” title-“News And Bologna” > News and Bologna by Kelly </ a>

Relative Link

The only thing that changes is the file name because it assumes you are still using the same URL.

What is a DTD?

Document type definition (machine readable files that describe structure etc.)

Document type decleration (id. A document type…tells comp how to read your doc.) – you can copy and paste these or let DW add them.

What should I learn first?

1.Learn HTML and CSS

2. Learn to make stuff accessible

3. Focus on usability

Tools for building sites:

HTML editors: **Dreamweaver, Kompozer, Expression

Maybe it is just me…

Maybe it is just me, but I’m having a harder time figuring out WHAT we are supposed to be doing from the assignments stuff in Angel than I am learning HTML or DW. It is very frustrating.

Suggestions?

Week 1: I’m Still Confused

The most interesting thing I learned this week is that I think I may actually be capable of learning HTML (or XHTML1.0). It seemed overwhelming until I got into it a little bit better.

Ironically, I figured I would NOT have a problem with Dreamweaver or Fireworks, but alas, I am. I thought I would have time to get into the lab today (Saturday), but they closed everything because of the hurricane. So the videos are hard to understand without actually being able to click in Dreamweaver. I also cannot figure out how to access the program files.

Nevertheless, my notes are below and my “links to save” will follow those. Of note, these are NOT edited in any way and I would be suprised if anyone else even understands them.

Notes for Lynda.com Practice:

Things I will want for my website:

Content (pics)

FB likes

* what is web design:

You need a solid understanding no matter how little you need your website to do.

Front end development is the visual parts of web design – planning, user interface, etc.

Html, css, and staying current are all skills you need regardless of your focus.

** How the web Works**

Clients (render render web content to users)

Server (applications that deliver web content to the client)

I cant believe how much of my training from DoD applies to this. Maybe I am not as dumb as I think.

**What is a URL*

Protocol, resource name. (Series of  domains: sub, name, top domain).

**HTTP** hypertext transfer protocol

Standard protocol for transferring resources on the web. Stateless : after request, it is forgotten (makes it simple, but it has no memory)

Also FTP, SMTP, RTP.

**How does a browser work?**

Bottomline: test your pages in multiple browsers and versions of the same browser.

Knowing how a browser works is important because different ones make your info show up different.

They all use HTTP/ use different java script

Basically, due to java script interpreters in different browsers, you may see something different about a page based on the browser.  We have to know which are which so that we can control the look of our content.

There is more web standardizing now than there used to be.  W3C (standardization)

http://www.webstandards.org

You can stay current with this and have a consistent design and user standard.

**What is HTML**

HTML5 is new standardized structure. The last standard was in 2000 (others were tried and argued over)

HTML Document structure**

(opening and closing tags) You can learn all the tags in a day or two.  It’s just closed and opened tags

Tags (bread)

head (*condiments) make it better but you don’t have to have them. It is non visual.  (links etc)

body tag (meat)  this is where all visual structural  elements are contained here

headings, para, links, tags.

You place your order in this.

If you open a tage withing another tag, you have to close it before you can close the original tag.

**XHTML and HTM essential training**

intro 1 –  we are using HTML 4.01 (since 1991) – it has a few flaws.  XHTML –html with more rules. It is better for computer.

HTML is more forgiving.  So if you use HTML, you will have your webpage be able to operate better in different browsers etc.

HTML:

There are a lot of types of HTML and XTHML. I really just want to figure out which one I need to learn.  This course uses XHTML1.0 (best choice for right now.  Still relies on CSS for all layout)

** Exploring a simple XHTML page**

they show the simplest form.  Not this link **

– you are going to need some templates*

Element = begin tag, content, end tag

“P’ elements have content

*why would you put in a container?

** Understanding the structure of an XHTML document**

copy and paste all that crap into every document

**containers**

any tag with content between head and end

**creating and using templates**

 **whitespace**

all white space in a row is folded into one space in the browser when it renders a line of text.

**Paragraphs**

**headings**

**lists***

ordered and unordered**

UL – dots and squares

OL –  numbers and alaphabets.

DT – Definition term  (dt and dd = definition description)

– links to remember (not including those included in my notes) –

• 25 WYSIWYG Editors: http://www.smashingmagazine.com/2008/05/06/25-wysiwyg-editors-reviewed/
• A Brief History of Markup: http://www.alistapart.com/articles/a-brief-history-of-markup/
• Overview: FTP Frequently Asked Questions: http://www.ftpclient.com/ftp_client_faq.html

More to follow on this topic when I have a chance to access dreamweaver.