Dreamweaver Overview rev 09/13/2013 Notes... · Web viewFile>New Document>HTML>None>Assign a page...
Transcript of Dreamweaver Overview rev 09/13/2013 Notes... · Web viewFile>New Document>HTML>None>Assign a page...
Dreamweaver Overview rev 09/13/2013
It is a Graphical User Interface (GU-E) that generates HTML. You have to define three folders: Local, Remote and Testing, together we term it a site
Start Dreamweaver
Create a new HTML page: File>New Document>HTML>None>Assign a page
title>Doc Type>HTML5>Create
Type: This is my first Dreamweaver pageSwitch among the three display options: Design Code
Split File>Save as> DwHelloWorld.htm inside Practice
Choose a workspace Choose a workspace and look how the actual screen changes
Try a few workspace options
Choose Beginner
Notice there are four ways to view Web page content: You will see 4 format options if you go through the View menu item:
Otherwise, on the document bar you will see only 3.
Try each FTPn’g Can click the up arrow on the document bar or inside Files
panel:
Note Only works if you defined a remote server
Can also FTP in Files panel:
Or select the file(s) in the Files Panel (F8) and click the up arrow:
Note:On many occasions there are two ways to accomplish something.
ExampleInsert>Image
Versus insert panel (Window>Insert)
Can move panels around, shrink to icons
The Workspace
A. Application bar
=Menu bar (Usual Windows menu bar) + workspace picker
South Side bar!
B. Document :
C. View>Toolbars>Document and Standard…see below
D.
E.F.View>Toolbars>Docum
ent and Standard
C. Document window (Your actual wysiwyg What You See Is What You Get )
D. Workspace switcher
E. Panel groups
F. CS Live
G. Tag Selector
H. Property Panel
I. Files Panel
The Document toolbar in more detail
A. Show Code View
B. Show Code and Design Views
C. Show Design View
D. Live Code View
Includes code the server creates…Important in advanced classes where you study server scripting
E. Check Browser Compatibility
Checks to see if your CSS is valid for a given browser
F. Live View
Similar to hitting F12 (Preview in Browser)
G. Cascading Style Sheet Inspector
H. Preview/Debug in Browser
I. Visual Aids
J. Refresh Design View
K. Document Title
L. File Management
M. Check Browser Compatibility
Which ones are important for us?
A,B,C,K,L
Menu Bar (Top):
File menu:
The usual file menu, new, close, save (close all and save all may be something new to you)
File>Preview in Browser (F12) shows what your page will look like when you render it.
Click F12 now Instead, select Preview in browser…you choose which
browser
Edit Menu Edit> Preferences the only ones we’ll use:
Accessibility option Preview in Browser option
View Menu
Insert menu…discussed later
Modify, Format, Commands skip
Site menu : Already saw
Window Menu
To add/remove panels Make sure File and Properties panels are open If not: Click Window>File and/or
Window>Properties
Document Toolbar
We’ll use the three views buttons, File Management (FTP (put or get ---arrows)) and title
Title: Type your first name's First Dreamweaver HTML Page
Questions re Menu bar?
Properties InspectorIts content changes reflects on content type:
Text content:
Graphic format:
.
Panels…here MONDAY
More Panel Management -Adobe
Panels are made up of tabs which can be moved, docked
Look for blue bar when docking into another location: Dock CSS Styles with Files:
Can collapse panels to icons:
Result:
Once iconized, can see their purposes though by pulling to the left
:
There are often multiple ways to accomplish something. Good example: Using menus versus panels to do the same thing
Inserting Content
Insert Panel versus Insert Menu Use either to add content to a page…images, tables, lines,
…videos
Look at the Insert>Common panel
…Window>Insert if it’s not open
The one’s we’ll use:
Hyperlink Email Link Horizontal Rule Table Insert Div Tag Images Media
Compare to Insert menu
Appears there are more options with the Insert menu item than with panel…but you’re (sort of) wrong!
Click the down arrow next to “Common” inside the Insert Panel:
Can choose Forms, Data, etc:
Summary: Can use menus or panels to accomplish a task
Property Inspector (Panel)
At the bottom of the HTML page
Remember many tags (like body) have attributes or properties. The properties/attributes for the selected object appear in the Property Inspector Panel
PracticeYour HelloWorld.htm page should be open.
Property Inspector
Shows properties of text and images
Type Hello World
Look at the Code:
Now press Enter; makes the text into a paragraph (adds <p> tag)
Recall <p> creates a box, with a blank line before and after the <p> tag
Click Split or Code button and again look at the HTML
Note: adds a space
Use the Tag Selector ( ) to select the <p> tag
OR
Split or Code view…to select the <p> tag
Use the Property inspector/panel and make the text be bold-italic
See the other text properties you can add/modify?
Deselect the text
Now Insert>Image and browse to cozmo.jpg (Mine was in Practice/Images)
Look at its properties…much different than for text
Single-spacing Below the picture, type This is a paragraph (Press Shift-
Enter) This continues the paragraph and is single spaced
Press Enter Look at the split code Recall <br /> single spaces
Strong = bold
Em = italics
Apply a Heading 1 (h1) format to line 1
Select the Hello World 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 sends your work to, then runs from, the testing 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 (page) to the server.
Find the double arrow (File Management).
Click the up arrow (put). This sends the current page to the server computer
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.
Say Yes, this time, to also send up the picture
Now, let's test the page in a browser. The address should look like this:
Practice using Insert panel/menu to add content Start a new HTML page named
DreamweaverPractice.htm (be sure to save right away, and NO SPACES!) inside the Practice folder
It will look something like this when we are finished
Let’s use the panels to insert content. And then link HelloWorld.htm and DreamweaverPractice.htm pages to each other. Start with typing “Welcome to my practice page”…make
it an H1 format Enter the same text as the page titleInserting an email link:
Fill in the information:
Click Enter
Inserting a Horizontal Rule from the Common panel:
Make it 5 pixels thick (Height): and Align Left
Its properties are deprecated (may be deleted at some date…use CSS instead (later)…use CSSInserting a Table
Insert a 3 rows x 2 columns table, 50% of the page
Enter data:
Changing a Table’s attribute Select the first row
Set the background color (Find the tool in the Property Panel) to a pale blue
Save again
Properties Inspector …again…now that we have more content
Its properties/format change based on what is selected (called context sensitive) .
1.
2.
Text Properties
Select the “Welcome” text you just entered by clicking the <h1> tag in the tag selector (bottom left corner)
Format Drop down box
The Format drop down lets you make some limited format changes. Cascading Styles Sheets (CSS) provide almost unlimited formatting options
Practice with Paragraphs and HTML formatting
After the table, type “This was created by your name here Hit Shift-Enter. Recall this enters a line break, not a
paragraph. Type Please enjoy my site! Hit Enter and type “I did this in JMA260”, click Enter
See the difference between Enter and Shift-Enter?
Save again
More Properties for text
Select the last line you entered Look at Property Panel Note HTML and CSS options HTML attributes are limited, basically Bold, Italics, lists
Make the last line be bold and italic
Creating lists
Recall from HTML lectures: Ordered and unordered, also indent and outdent
Use:
Practice with lists:
Add the following text : (You can’t copy/paste because there aren’t any Enter keystrokes after each item)
Here are my favorite movies: AvatarTitanicBlack Swan
TerminatorT1T2T3Star Wars
Select all the movies Click the unordered list tool
You should see:
Now, use the indent tool to indent T1, T2 and T3 to make them into sublists
Tool:
Result:
Save
So, we have two main pages: Helloworld.htm and DreamweaverPractice.htm
Let’s link the pages to each other
Creating Links
A link is simply a "clickable" object (usually text ), 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:
Our Goal
Link Helloworld.htm to DreamweaverPractice.htm and Link DreamweaverPractice.htm to Helloworld.htm
Switch (open) to DreamweaverPractice.htm page
Type Go to Hello World! Press Enter
Select the text Go to Hello World We want this to be a link <a href> that when clicked takes
the user to the HelloWorld.htm page In the Properties Panel, 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
Switch to HelloWorld.htm Add the words Dreamweaver Practice Make the words link to DreamweaverPractice.htm
(on your own)
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
Finally, see if you can link your index page to practice.htm:
Test and FTP your pages. File>Save All File>Close all
Next class: Text and CSSFor Extra Credit (20 points)
Complete the three pages (index, practice and helloworld) so they look like the pages in this document. In the practice page be sure you have:
Head 1
Title
Email link
Horizontal rule
Table with 3 rows, 2 columns, blue background, with sample data in it
A list with indent
The index page links to practice.htm, practice.htm links to helloworld.htm
Finally, make practice.htm also link back to index.htm
FTP all three pages (Use the File panel and the up arrow)
Send the GA an email containing your index URL. It will look this way:
http://www.jma.duq.edu/YourName/pub/jma260
Note: He may ask you to submit via Blackboard
I Guess the most important point is the linking, so be doubly sure all three pages