Upload
phamnga
View
216
Download
3
Embed Size (px)
Citation preview
Dreamweaver Basics.docx rev 09/08/10
Review so far Configured USB drive JMA260/Assignments/Images
JMA260/Client/Images
JMA260/Classwork/Images
And network drive Pub/JMA260/Assignments/Images
Pub/JMA260/Classwork/Images
Pub/JMA260/Client/Images
Used Notepad to create an HTML index page with a table containing three rows (<table>, <tr> and <td> tags).
Used FTP to upload the page and a banner graphic to your pub folder within your network drive.
Past Common mistakes include: Incorrect directory structures (Placing HTML pages inside Images
folder)
Incorrect quotation mark‐types…
Creating the page directly on the Z: drive, instead of on your USB Drive
Not making the img src name match what you called your banner. ( Maybe you saved as mybanner.gif, but your img src tag specified banner.gif)
New Terms:
Hyperlink WYSIWYG
Uploading
Objectives for today (and next lecture)
Define: What is a Web Site
Define: What is Dreamweaver
Create three Dreamweaver sites
Exporting site definitions Selecting objects Using the Properties Panel/Inspector How to link pages How to FTP from within Dreamweaver
What is a Web site?
To the average user, a Web site is simply a collection of several related Web pages. However, to Web Developers a site is quite different...
A site is simply two folders.
1. Local folder -- This is a folder on your computer where you will build and test your pages. For this class, you will ALWAYS use your USB drive for your local folder. You develop your site on the local folder(s)
2. Remote folder -- This is where your pages will be made available to the public on a Web server. DON'T specify Z: Will use FTP from within Dreamweaver… just click an icon to FTP
Note: When naming folders, files, avoid spaces and special characters. Spaces are hard to keep track of. Also, they will be converted to %20. For example, jma 260 will end up as jma%20260. Special characters have meaning to the Web Server. For example, we have seen / used in HTTP and FTP addresses.
The folders contain HTML (Hypertext Markup Language) pages, and typically an Images child folder
Dreamweaver Site Definitions
Dreamweaver is sometimes called a WYSIWYG (pronounced wiz e wig) editor
You build pages using tools. What you see on the screen is what you will get because Dreamweaver creates the HTML code based on what you see
The HTML page is being built as I’m designing it…What You see is What You Get
It’s just an editor that generates HTML
Recall from week 1, that we have three site folders created on our local USB drive, and on our network drive (inside pub/jma260). We will now use those folders.
First, we must provide Dreamweaver with some site information.
A Dreamweaver Rule: Always do Site Definitions before working on pages.
What is a Site Definition?
A Site Definition tells Dreamweaver where your Local and Remote folders are. It specifies FTP information as well.
Recall what a root folder is. The root folder is the highest folder in your site’s hierarchy. When setting your Site Definitions, it is important that the Local and Remote Root folder names match up.
Start Adobe Dreamweaver CS4.
Defining our Classwork Dreamweaver Site We’ll use Dreamweaver from now on to manage our Classwork site.
. . and the other two
Site > New Site
Select the Advanced tab.
Category: Local Info: Assign a Site name of your choice…maybe JMA260 Classwork Site. The
name is only of use to you: Dreamweaver and Windows could care less what you name it
Local root folder: Browse to your jma260 /Classwork folder on your USB drive
There seems to be a bug in CS4: You need to append classwork to the path:
Should see something like this:
(I had to type the word classwork manually)
Be sure to click Select button
Note: Never set the Local or Remote root folder to your Z: Drive. This will end
up deleting your files.
Click Remote Info Fill out the information as shown below:
We created the network classwork folder (and two others) during the first week of classes
1. Let's look at this screen: Access: use FTP. FTP Host: This is what Dreamweaver calls the server's FQDN. Host directory: This is simply the rest of the path on the server to your site folder: Classwork in the example above. Login: Your JMA username. It must be jma\username Password: Your JMA password.
2. Click Test to make sure it connects to the server. 3. Click OK. 4. Here are some common errors you might encounter:
1. Wrong host computer (FQDN) 2. Folder name or path wrong 3. Account information wrong
Exporting Site Definitions
The default location to store your Site Definitions is the C: drive on the computer where you created it. If you later login to the same computer, your Site Definitions should be available.
We occasionally reformat the lab machines…no more site definition. Also, what if you sit at a different computer? Again, no site definition.
To save yourself the time (and aggravation) of re‐doing this site definition process, you can export your site definition to your USB drive
1. Site > Manage Sites... 2. Select your site 3. Click Export... 4. Select the top option:
5. Click OK 6. Save it to your USB drive inside /Classwork
This saves your Site Definition (as a .ste file) ONLY. It does not save actual files or folders.
If you ever lose your site definition (maybe you sit at another computer), you Import your site and your site definition will be recreated.
Create your client and assignments sites now.
Export each definition.
Switch back to Classwork site
Dreamweaver Workspace Not going to go over each item in detail, will spend more
time as needed
A. Menu bar
South Side bar!
B. Document (html page) toolbar
C. Document window
D. Panel groups
E. Workspace switcher
F. HTML tag selector
G. Properties inspector
H. (Files) panel (look at the tab)
The Document toolbar in more detail
A. Show Code View
B. Show Code and Design Views
C. Show Design View
D. Live View
E. Live Code View
F. Page title
G. File Management...use to FTP the current page
(Skip rest)
H. Preview/Debug in Browser
I. Refresh Design View
J. View Options
K. Visual Aids
L. Validate Markup
M. Check Browser Compatibility
Which ones are important for us?
A,B,C,F,G
Workspace Switcher
Try different options Go back to Designer Compact
Menus and Panels
Are often multiple ways to accomplish something. Good example: Using menus versus panels
Example of a menu and a panel
Insert Panel/Insert menu Use them (either) to add content to a page…images, tables,
lines,…videos
Look at the Insert panel…Widow>Insert (Note: You can use the Insert menu item, OR the Insert panel):
For us:
Email Link Table Insert Div Tag Images Media
Insert menu instead
Summary: Can use menus or panels to accomplish a task
Remember many tags have attributes or properties. The properties/attributes for the selected object appear in the Property Panel/Inspector
Creating a simple HTML page
Open your Classwork site, if necessary File > New>Blank Page > HTML > none > Create
OR
Right-click in the Files panel and choose New File File > Save As... I know, it’s blank
o Save this (blank) page as helloworld.htm (No spaces)
o Since you created your Local Site Definition before starting, Dreamweaver will save your file to that local site folder.
To see what extra “stuff” Dreamweaver creates, click split, or Code view
All that for a blank page! Conforms to some industry standards
Type Hello World! Then press Enter, makes the text into a paragraph Click Split or Code button and look at the HTML Look at Tag Selector
OR
Split view…you’ll see the <p> tag
Page Title
Just above the Document Window is the Title text box. Type your first name's First Dreamweaver HTML Page.
Check out the 3 main views again : Design, Code, Split (both)
Click Split Click View>Split Vertically
  ( I deleted it from my HTML side) (In split view, note: the It stands for non breaking
space…causes a space to be inserted. To make "this phrase" turn
into "this phrase," several  's need to be inserted between
"this" and "phrase" in the HTML.)
Apply a Heading 1 format
Select the text In the Properties Inspector, click the HTML button, and
then Format>Heading 1
File > Save
Testing your page
Hit F12 to test the page. This tests the page locally, not on the server.
Can also choose File>Preview in browser>Choose any browser installed on your computer
Save often!
FTP’g the current page
As with most things in Dreamweaver, there are several ways to FTP>Put this file to the server.
Next to the Title field, there is a double arrow (File Management).
What if it’s grayed out? Means you don’t have a remote site defined
Click the arrows, and choose > Put
…or…
Select the helloworld.htm file in the Files Panel > click the up arrow
After you use one of the options to Put your page to the server, it will give you a box that says "Put Dependent Files?"
This gives you the option of uploading any images, videos and other objects on that page to the server as well as the page itself.
However, this will not put any linked files. Say Yes, this time, although it doesn’t really matter—we have no dependent files
Now, let's test the page in a browser. The address should look like this: http://www.jma.duq.edu/users/username/pub/jma260/classwork/helloworld.htm
Insert Options using a panel or menu…again…this time we will actually insert stuff:
Insert an email link:
Fill in the information:
Insert a horizontal line:
Make it 5 pixels thick (Height):
Insert a 2 x 2 table, 50% of the page
Many other objects may be inserted…more next class…
Properties Inspector …again…
Its properties/format change based on what is selected (called context sensitive) .
Type “Welcome” Press Enter
Selecting Objects
You can select an object in two ways:
1. Select the object on the Design view…or… 2. Select the associated HTML tag in the tag selector.
Select the text you just entered
Format Drop down box
The Format drop down lets you make some limited format changes. Cascading Styles Sheets provide almost unlimited formatting options….later
Practice with Paragraphs
1. Select your Hello World text. 2. Since we want to see the HTML properties, make sure HTML
is selected, not CSS.
3. Notice the Format dropdown. It should have Heading 1
selected, because that’s what we previously added 4. Select and delete the “Welcome” text 5. Type your first name's First Page. 6. Hit Shift-Enter. This enters a line break, not a paragraph. 7. Type Please enjoy my site! 8. Hit Enter and type “I did this in JMA260”
9. See the difference between Enter and Shift-Enter?
Properties Inspectorfor text
Properties Inspector Description
Format; text will take on this format until you
hit Enter
Bold and Italics
Lists…are created via the Properties Inspector
Ordered and unordered
Properties Inspector Description
Unordered List; list items use "bullets"
Ordered List; list items use a numbering system
Text Indent; go to sub-list; also like hitting the Tab key in Microsoft Word
Text Outdent; go to parent list; also like removing a Tabbed space in Microsoft Word
Practice with lists:
Add the following to your HelloWorld.htm page:
Here are my favorite movies:
(add your own. You CAN’T copy/paste because there are no paragraphs…it’s one big paragraph)
Avatar
Titanic
Terminator
T1
T2
Star Wars
Select the movies Click the unordered list tool
You should see:
Now, use the indent tool to indent T1 and T2 to make them into sublists
Tool:
Result:
Save
Creating Links
A link is simply a "clickable" object (usually words), also known as a hyperlink, that loads a new page in the current browser window, or opens a new page.
What we’re going to do:
Note: Here is the Classwork index.htm page we (you) created
And here is our Helloworld.htm page
Link Page2.htm (a new page we will create) to Helloworld.htm index page
Link the index.htm Dreamweaver Practice link to Helloworld.htm Add a new link on the index.htm page to Page2
Start a new page File>Save>As >page2.htm Type Page 2 (to identify the page)…make it bold, italic,
Heading 3
Press Enter to start a new paragraph Type Go to Hello World! Press Enter Type Home, press Enter
Select the Go to Hello World text We want this to be a link <a href> that when clicked takes
the user to the helloworld.htm page In the Properties Inspector, find the link box. There are
three ways to enter a link:
1. Type helloworld.htm . This method is not recommended
because of possible typos. However, you must use this method if you are linking to an external site. For example, if you want to link to the Pittsburgh Penguins' site, type into the box http://pittsburghpenguins.com/ You must include the http
2. Drag the Point to File tool to helloworld.htm in the Files Panel.
3. Click the browse button and browse to helloworld.htm
Choose one of the three methods and link the selected text to Helloworld.htm
Now, link the Home text to your index.htm page that you did for homework.
1. On your Hello World page, start a new paragraph. 2. Type Go to page 2 3. Select the text. 4. Link it to Page2.htm 5. Add a Home link that links to index.htm
Note: The Target options
_blank: loads the page into a new browser window.
_self: loads the page into the current window. This is the default and normally does not need to be selected.
_parent and _top we will won't discuss
6. If necessary, link your index page’s “Dreamweaver Practice” link . . . now a null link . . . (first item in the list) to helloworld.htm