DREAMWEAVER 1

Introduction, Background, Interface

1. Go to http://www.uni.edu/its/us/document/www/getstart.htm and bring the application
2. The ITS office in the ITTC building (the building to the right of Rod Library if you're facing Rod) and sign up for a SUNNY account (pronounced “sunny.”) Usually takes a day. Your user name is the first part of your email and that will be your URL.
3. SUNNY is a secure FTP, you have to use SFTP, or “secure” FTP

DW:

1. Go to Dreamweaver Site, select Dreamweaver Site…

2. To the Question, “What Would You Like to Name Your Site,” give the site a name. It might be your entire name. Also, give it an address: http://www.uni.edu/YOUR-UNI-USERNAME

3. No, you do not want to use a server technology.

4. Yes, you want to edit local copies of your website on your computer, and then upload to your server. For the most versatility, keep your web files stored on your Portable Hard Drive. That way you can always keep your files local and then upload them from any computer.

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

.

FTP stands for File Transfer Protocol. Dreamweaver has FTP built into its program, but you can find numerous FTP programs for free download or purchase, that you can use with other web design software:

FETCH IS ONE FOR MAC.

CYBERDUCK

YUMMYSOFTWARE

To use ANY FTP program you need the following:

· 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.

http://www.csszengarden.com/

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.