Introduction to Dreamweaver MX Center for Excellence in Teaching Raleigh Way
1
Workspace Setup: The “Look”
You can choose DW MX or DW 4.0 by going to Menu > Preferences > General
2
1
DW MX Interface Insert Bar
Panel Groups
Properties Inspector 3
In DW MX on a PC, everything is locked into place. There are no more floating palettes
Comparing DW MX to DW 4 Terminology (Found Under Window Drop-down Menu) DW MX
• Properties • Insert Bar • Panel Groups*
DW 4
Property Inspector Objects Palette New in DW MX
* Panel Groups represent all the palettes under the Window menu. 4
2
Window Drop-down Menu Use the Window drop-down menu to turn on and off the: • Insert (Bar) • Properties (Inspector) • Panels (New in DW MX)
Note: the “other” menu. It contains Frames, History, etc. 5
Panels (On Right)
Design: CSS Styles HTML Styles Behaviors Code: Tag Inspector Snippets Reference
Application: Database Bindings Server Behavior Components 6
3
Panels Continued
Files: Site Assets
Answers: What’s New Readme Tutorials Update
7
WYSIWYG vs. Code View The three buttons on top of the edit window allow you to switch between the viewing modes: 1. Full code view 2. Split window for WYSIWYG view and code view 3. WYSIWYG view
Split window view
8
4
Insert Bars (Formerly Objects Palette) The “Insert” bar is where you find all the Web page tools. You will notice that there are tabs for the different tool sets. You can turn the insert bar on or off from the Window > Insert 9 drop-down menu.
Title Your Page
Be sure to give all your pages a title. The title is what gets bookmarked in someone’s browser. You can title the page as shown above, or you can do it from: Modify > Page Properties 10
5
Common Tab
Link | Email | Anchor | Table | Image | Horizontal Line | Date Stamp
11
Text Tab Bold | Italic
Paragraph | Headers
Strong | Emphasis
Definition List
Unordered and Ordered lists. List item.
Abbreviation and acronym
12
Note: Some of the above is also found on the Property Inspector
6
Tables Tab
The Table tab allows you to manually enter the HTML for a table. If you want Dreamweaver to automatically create a table for you, use the table icon on the Common tab or Tables tab. 13
Frames Tab
The Frames tab allows you to choose a frame layout.
14
7
Forms Tab
The Forms tab allows you to create a form for your site. There is a workshop offered for Web forms, or we will be glad to consult with you one-on-one.
15
Characters Tab This last icon will open another group of symbols Line Break | Non-breaking Space
Notice the copyright and registered trade mark symbols on the Characters tab bar. 16
8
Head Tab
Keywords | Description The head section of your document should contain “meta” information. Using meta tags in your document allows your page to be found by other people doing searches on the Internet. There are two meta tags that should be used in your pages: Keywords and Description. Of course, this is optional if you don’t care if anyone finds your page or not. 17
Edit Mode vs. Site Management Edit mode is when you are actively working on a Web page. Site management is where you store all your files for a particular site. Site management is also where you upload (FTP) files to the server. The next few slides will show you how to: •create a root folder for each SITE that you work on •switch between Edit and Site Management •upload (FTP) files to the server 18
9
F-8 for Site Files
When you press F-8, the Files panel will open. You might or might not see files in the window.
19
Toggling from Edit Mode to Site Files
Files Panel in Edit Mode
Site Files
In DW 4, you could press F-8 to toggle back and forth from the edit window to the site management window. That has changed; you must press the little white icon on the Files panel. The arrows are 20 pointing to the white icons that will toggle you back and forth.
10
Let’s Review: Edit Mode to Site Files You are working in Edit mode and you want to see the files in the Site Management (Site Files) area. • Make sure the Site Files Panel is open (Press F-8) • Click on the little white icon in the Site Files Panel
File Panel
21
Let’s Review: Site Files to Edit Mode You are working in the Site Management (Site Files) area and you want to go to Edit mode. •Click on the little white icon on the toolbar. It looks like the icon in the Files Panel in edit mode
Site Files
22
11
Setting up a site for the first time IMPORTANT: Before you begin work on a site for the first time, you MUST set up a new site and root folder. From the site menu‌ Site > New Site
23
Site Name and Root Folder Site Name: Give the site a name of your choice. Local Root Folder: Use the yellow folder icon to browse to an existing folder or create a new folder to store your files. 24
12
Remote Info (Server) From the Category list, select Remote Info. Open the drop-down menu and select FTP.
25
Server information FTP Host: eagle4.cc.gasou.edu Host Directory: (varies) /sfa/your_alias/public_html Or /dept/your_dept/public_html Login: Your email alias Password: Your email password 26
13
Server information, cont’d You can test your server settings from the same dialog box. You should not have to change any other settings other than what was presented on the previous page. 27
Connecting to the Server
Click on the little connection icon to log into the server. See arrow.
28
14
Connected to Server Remote (server)
Local
29
Site Management Buttons
Sites | Connection | Refresh | Get Files | Put Files | Toggle to Edit The “get” and “put” arrows gets files from the server or puts files on the server. Alternately, you can drag and drop files from one side to the other. 30
15
Two Palettes You’ll Use the Most Common tab on Insert menu
Properties Inspector 31
Properties Inspector
Links
Font | Font Size | Font Color Bold | Italic | Alignment
32
16
Properties Inspector, Cont’d
Bullet List | Numbered List | Un-indent | Indent
33
Typing Text and Line Spacing As you type in Dreamweaver, you will sometimes use the Enter (Return on a Mac) key to force a line break, i.e., move to the next line. Enter = cursor will double line space Shift + Enter = cursor will single line space.
34
17
Fixed Pixel Fonts and Low Vision People with low vision usually have to enlarge the text on the screen to be able to read it. Fixed pixels could prevent the user from enlarging text. Using relative units like percent allows your users to enlarge text. If you use 100% for the font size, the size of the font in the user’s browser will be 100% the font default size for a particular browser. 90% would be 10% smaller than the default font size for the browser.
35
Use Headers Instead of Bold or Large Fonts (Properties Inspector) Use headers “Headlines” for blocks of text. H1 is the largest, H6 is the smallest. H1 is more “important” than H2, H3, etc.
Using Headers properly on a Web site makes the site more accessible to blind people. Screen readers can “scan headers.” 36
18
Inserting Images
Click the image icon under the Common tab. You can then browse to the images in your site root folder. 37
Images and “Alt” Text
If an image on your page imports important information for a Web page, use alternative text (“alt” text). Alt text for the example above might read Georgia Southern Logo. If the image does not add to the content of the page, you could use empty alt text: alt=“ “. 38
19
Tables for Visual Layout
You can use tables in your Web pages for visual layout. The table allows you to place text and images in specific places on the page. 39
Creating a Table
Click the table icon on the Common tab.
Rows: Horizontal Columns: Vertical Width: Pixels or Percent of Page Border: 0 = no border; 1 = thin border Cell Padding = space between text and cell wall Cell Spacing = thickness of cell walls 40
20
Border = 0
Border = 1
Cell Padding = 0
Cell Padding = 1
41
Cell Spacing = 0
Cell Spacing = 5. Notice how the thickness of the lines increases. 42
21
Tables and the Properties Inspector When you click on the right side of the table, you see three little “nibs” appear. This means the table is active. Notice how the properties inspector now becomes the “table inspector.” You can modify the table by changing the values in the inspector. 43
Table Width: Pixels or Percent? If you use tables for layout of your Web pages, you will have to decide if you want your table to have an absolute width and height (pixels), or if you want to make it take up a “percent of window.” Pixels allow more control over the way your audience will view the layout. If you make your table wider than 600 pixels, a small portion of your audience might have to scroll to see the right side of the page. Percent is relative to the monitor, and the layout tends to be more fluid. There is less control over the visual layout with percent, but it will always fit in the monitor window. 44
22
Fixed Pixel Tables and Low Vision People with low vision usually have to enlarge the text on the screen to be able to read it. Fixed pixels could prevent the user from enlarging the table and its content. Using relative pixels like percent allows your users to enlarge the table.
45
Pixels and Your Audience Depending on your eyesight, you might have your screen resolution set to: 640 x 480 (very large images/text on screen) 800 x 600 1024 x 768 1280 x 1024 (very small images/text on screen) If your screen resolution is set to a high number like 1280 x 1024, you can see more on the screen at time. With a low screen resolution, you will see less on the screen at a time, but everything 46 will be bigger. See following example.
23
Same Desktop, Different Resolutions
1024 x 768 Small images 1024 pixels across width
640 x 480 Large images 640 pixels across width
47
So, What is the Point about Resolution!? If you design a page for 1280 x 1024 screen resolutions, someone who is using a 640 x 480 resolution will have to scroll left and right to view the page. It could be quite annoying to your audience. 1280 x 1024
640 x 480 scroll 48
24
Creating Links You can create links: • to other Web sites • to pages within your site • to content within the same page (anchor) • from an image
49
Links in Properties Inspector
You can link to another Web site by typing in the http:// address here. You can link to a file in your own site by browsing through this folder icon. 50
25
Link to External Site
Type and highlight text Type or cut and paste URL
Press F-12 to preview the page and link.
51
Link to Another Page in Same Site
1. Type the text of your link. 2. Highlight the text. 3. Browse for file through folder icon (see arrow) 4. Press F-12 to preview the page and link.
52
26
Link to Content in the Same Page You want to create a link from the top of your page to a location in the body of the same page. To do this you will place a “named anchor� near the spot you want to link TO. You will then highlight the text that will serve as the link at the top of the page, and connect it to the named anchor you created within the page.
53
Named Anchor (a.k.a. Target)
1. Place your cursor beside, above or below the place you want to link TO. 2. Under the Common tab; look for the anchor icon, and click it. 3. Type a one-word name for the anchor, and click OK. A small yellow anchor will appear where your cursor is. 54
27
Named Anchor
Here is what your named anchor will look like.
You must now link TO this anchor 55
Linking to the Anchor 1. Highlight the link text 2. Scroll down until you can see the anchor. 3. Grab the “Point-tofile� tool and touch the anchor with it. Your text is now linked. 56
28
Descriptive Link Names Giving the text of your links descriptive information will enhance the accessibility of your site. When a blind person listens to your page, they have the option of listening to all the links first, which gives them a sense of what is on the page. If your links say “click here,” it doesn’t give any information about the link. If the links says “click here to go to page two,” this will make more sense to someone who listening to the page.
57
1. Working in Edit Mode Practice • Create a new page: File > New • Type the following at the top of your page: This is the top of page 1 Georgia Southern University Go to bottom of page Go to page 2 58
29
2. Working in Edit Mode Practice •Hit enter enough times to move the text you just typed completely out of sight. •Type the following at the bottom of the edit window: Go to top of the page This is the bottom of the page
59
3. Working in Edit Mode Practice 1. Title and color your page: Modify > Page Properties 2. Name your page: File Save (or save as) > page1 without spaces Now, repeat this entire process for a second page. Name the page “page2.” If you look at the bottom left corner of your edit window, you’ll see a tab for each page you have open. You can click a tab to view the page. 60
30
4. Working in Edit Mode Practice We are now going to create links on pages 1 and 2: This is the top of my page. Georgia Southern University Go to bottom of page Go to page 1 (or 2)
1. 2. 3.
4.
5.
Go to top of page This is the bottom of the page
6. 7.
Create a link to GSU Create a link to page 2 Create anchors next to “this is the top” and “this is the bottom.” Name them “top” and “bottom.” Highlight “go to bottom” and use the point-to-file tool to touch the bottom anchor. Highlight “go to top” and use the point-to-file tool to touch the top anchor. Save both pages again. Press F-12 to preview. 61
Dreamweaver Exchange You can add functionality to Dreamweaver by downloading “extensions” from Macromedia’s Exchange site. One extension you will have to download is called “Set Permissions.” Under the Commands menu, click on “Get More Commands.” This will take you to Dreamweaver Exchange.” 62
31
Dreamewaver’s Exchange Site You can browse through the categories, or you can use the search engine.
63
Set Permissions Type Set Permissions in the search window, and press the search button. Your search will bring up the Set Permissions file, which you will download and install. 64
32
Download Set Permissions You will download the Set Permissions file to your computer; you can put the file anywhere. Once it is downloaded, double click on it to begin installation. The file will open, you agree to the little copyright notice, and it will then install itself into Dreamweaver. You’ll be asked to shut down Dreamweaver and restart it before you the new extension will take effect. There are MANY extensions at the Exchange. Take some time to explore the different categories.
65
Setting Permissions on Files To set permissions on a file on the server, click once on the file(s), right click and select Set Permissions. Type the number 755 in the little box, and press OK to set permissions. See picture on next page.
Remote (Server)
Local 66
33
Setting Permissions: 755
Highlight one or more files. Right click, and select Set Permissions.
Enter the number 755, and press OK. 67
Learning Resources for Dreamweaver Lynda.com book: Dreamweaver MX H.O.T.
Also‌ Tutorials under the Help menu in DW MX Tutorials at Macromedia’s site: macromedia.com
68
34
Read More About Web Accessibility If you would like to read more about Web page accessibility, you can visit Georgia Southern University’s Accessibility site: http://academics.gasou.edu/accessibility/
69
Dreamweaver MX Introduction Index of Handout • • • • • • • • • • • • • • • • • •
Workspace Interface Terminology Window menu Panels WYSIWYG & Code Insert Bar Page Title Common Tab Text Tab Tables Tab Frames Tab Forms Tab Characters Tab Head Tab Edit vs. Site Mgnt Setting up Sites Site Mgnt Buttons
2 3 4 5 6-7 8 9 10 11 12 13 14 15 16 17 18 - 22 23 - 29 30
• • • • • • • • • • • • • • • • •
Palettes Most Used Properties Inspector Typing Text & Spacing Use Headers (h1, h2…) Inserting Images Tables for Visual Layout Creating a Table Borders & Cell Padding Cell Spacing Table Property Inspector Table Pixels & Percent Pixels and the Audience Resolutions Creating Links Edit Mode Practice Set Permissions Learning Resources
31 32 – 33 34 35 36 37 38 39 40 41 42 43 44 – 45 46 – 54 55 – 58 59 – 64 65
70
35