Download Dreamweaver 1: Editing HTML With Dreamweaver - IT

Dreamweaver MX 1 – Webpages
Cathy Pierson – [email protected]
http://ou.blackboard.com | OU Styleguide – http://www.ou.edu/styleguide
NOTE: # refers to Blackboard – IT Courses Dreamweaver1-Webpages – specific detailed lessons
1: Publishing on the Internet with Dreamweaver
 To Activate OU webspace at http://account.ou.edu: Login w/OUNetID & select ‘activate web space option’
 Faculty & Staff Search Directory at http://search.ou.edu or http://faculty-staff.ou.edu (default page is home.html)
 OU Student Directory: http://students.ou.edu (default page is home.html)
 ECS Web Server: http://coecs.ou.edu/Firstname.M.Lastname/
2-3: Understanding Web Servers, Paths and Files & OU Servers & Paths





Web servers. The web server is the computer where your webpage is stored –http://students.ou.edu or
http://faculty-staff.ou.edu - ECS is http://coecs.ou.edu/Firstname.M.Lastname/
Path. A web server is just another computer, filled with files. And just like on your computer, those files
are inside folders, and those folders are inside folders (inside folders inside folders) – http://facultystaff.ou.edu/P/Catherine.L.Pierson-1/.
File. After the server and the path comes the file name. A webpage is an HTML filename, so it usually
has the extension .htm or .html - http://faculty-staff.ou.edu/P/Catherine.L.Pierson-1/training.htm or
Important Web File Names - index.htm or home.htm page. You might have noticed that you can see a
webpage even if you do not give the name of the page. Web servers first look for a page named "index"
and then it will look for a page named "home." When your webspace account is activated, a file named
home.html will automatically be generated. You can replace that file with another file named home.html,
or you can publish a page called index.html (which is the first file name that the computer will look for).
Use lowercase files names with no spaces. Home.html is different than home.html; home.html is
different than home.htm; Don’t use spaces in your filenames!
ECS Faculty-Staff User Address Example – This is ‘index.html’ file in your web space.
OU Search Link Info Example – You can have this address point to your ECS web address – Go to
http://accounts.ou.edu to make this change.
DW1 Handout – ECS Servers H:\ - Student Organizations
1
4: Defining a Site in Dreamweaver MX
Dreamweaver Site Information - Here is the information you will need:



Site name. – type: ouwebpage or your last name
You can call the site whatever you want; this is just a name that is internal to Dreamweaver. You might find it
easiest just to give your site the same name that you gave to the folder on your computer ("ouwebpage," for
example).
Local folder. – locate: the ouwebpage Folder (in the My Documents Folder)
Click on the yellow folder icon and browse until you find the folder you created for your webpages inside the My
Documents folder. Click on the folder to open it, then click on the Select button. You will see the name of the
folder displayed in the dialog box.
HTTP address. – type: http://faculty-staff.ou.edu/your_address
The HTTP address is where your pages will be published. For example, the HTTP address of my webpages is:
http://faculty-staff.ou.edu/S/John.B.Sooner-1 (you can find your HTTP address by checking in the OU Directory or
in one of the web directories at faculty-staff.ou.edu or at students.ou.edu).
4.1: Open New DW Site:
DW-MX will walk you through a ‘wizard’ program.
Select from DW Main Menu - Site > New Site
SITE DEFINITION WINDOWS:
1. Editing Files: Name your site. ouwebpages - CLICK the NEXTButton
DW1 Handout – ECS Servers H:\ - Student Organizations
2
2. Editing Files, Part 2: Do you want Server Technology? Select NO - CLICK NEXT
3. Editing Files, Part 3: How do you want to work with files during development?
a. Select Option 2 – Edit directly on server using local network
b. ECS users will use their H:/www folder to save their web pages.
DW1 Handout – ECS Servers H:\ - Student Organizations
3
4. Sharing Files, Part 2: Do you want to enable check in/out – Select No (for single user site)
5. Summary: Review, if correct CLICK DONE and your site is now connected
Review the DW Interface & Menus - Review following panels (we will use these during course):
To see your folders & files or Assets:
To work with Style Sheets:
DW1 Handout – ECS Servers H:\ - Student Organizations
4
5: Imagining Layout of Webpage & The Computer Monitor: Wider than it is tall (unlike a piece of paper)
Viewing HTML Code with Code View & the Tag Selector: HTML “behind the scenes”
Tag Selector Example: <body><table><tr><tr> (found below page – lower left)
Keyboard Shortcuts






Control-C – copy highlighted text
Control-V – paste text from clipboard
Shift-Enter – link break
Control-Z – undo last command
F12 Key – Preview in Browser
Control-S – Save file
6-7: Using Tables for Layout: Think in terms of columns (vertical space) and rows (horizontal space)




To Create a Table: Insert > Table. Specify 5 row – 1 columns, width 75%, 5 cell padding and border = 0
To Edit or Modify Table: select Modify > Table > Merge cells; Insert Rows & Columns etc.
o To Merge Cells – Select the two cells that you want to merge – Modify > Table > Merge Cells
To change cell alignment: Put cursor in cell and choose Horz or Vert Alignment in Properties Window
To select Table & View properties – Click on the Tag Selector in the lower left of your screen

Dark Background – Select Modify Page Properties – Background Color
DW1 Handout – ECS Servers H:\ - Student Organizations
5
8: Adding Content to your page: text, external links, email links, image files. SAVE work!
Properties Window for Text
8a: Creating & Previewing Hyperlinks: external links, email links, image links
 To Create Text Links: Highlight text & Type in the web address in the Properties Window
 To Create Email Links: Highlight name & select Insert – Email Link, type in email address

To Preview Links: Select the F12 Key to preview in a browser & test link
8b: Linking to Images that you have saved to your web space
Websites for Images:
 OU Logos & some photos - OU Styleguide – http://www.ou.edu/styleguide (use your OUNetID to login)
 Lots of OU Photos! - OU Visitor Center - http://www.ou.edu/visitorcenter/vc_gallery.htm
 Icon Bazaar - http://iconbazaar.com/
First – you have to get 2 images: OU StyleGuide for OU Logo and/or OU Image Gallery
 To Save a Web Image: In Browser - Right-click on Image & select > Save Picture As - Use your My
Documents/OU Webpage Folder
 To add an image: Select Insert – Image to insert your image. Example below shows image properties.
 To Create a Link to Image: Click on image and type in Link Info in the Image Properties Window
DW1 Handout – ECS Servers H:\ - Student Organizations
6
8c: Create Tables inside Tables for content:



Select Insert > Table. Specify 5 rows – 1 column, 75% width, cell padding 5 and border =0
Select Font color of white and font size = 1
Last row – change background cell color to gray & add Contact Info
DW1 Handout – ECS Servers H:\ - Student Organizations
7
In the 2nd Row  Navigation Table – Insert a table for the navigation topics – NOTE YOU WILL RETURN TO
THE TEMPLATE TO CREATE LINKS FOR THESE TOPICS ONCE YOU CREATE THE
SPECIFIC PAGES.
Select Insert > Table > 1 row, 6 columns, 100% width, cell padding =5, border =0, background color =
dark gray
***You can also create links to Word, Excel or PowerPoint Files. These files must be located
in the same folder as your website.
9-10: Creating & Linking to a Style Sheet: manage fonts and colors for this page (and all pages in a site)
Select the Design Panel Window – CSS Styles.

To Create a Style Sheet:
o Click on the New Style + Icon
& save it as a *.css file (.css suffix if important)
 Select the Redefine HTML Styles Button
 Select the <table> HTML tag for your preferred font & size, since we use tables to format text.
 Then Select the <a> HTML tag to define the text links (change link color, decorations etc.)
o In Netscape. You will need to redefine the <body> tag, <p> tag, and <table> tag for font to be consistent
DW1 Handout – ECS Servers H:\ - Student Organizations
8

To Edit Style Sheet: Select Edit Styles Radial Button, the Double-click *.css file; or click on Edit Style Icon

To Attach Style Sheet to new pages: Click Attach Style Icon
& Browse to select the *.css file
11: Defining Font Styles with a Style Sheet



Redefine HTML styles. You can specify the properties for any HTML tags
Make Custom Style. You can create new tags reflecting styles you want (.bigboldpurple)
Use CSS Selector. Change the different link types – link, visited, hover, active
12: Webpage Title versus Name of File: No blank space in file name please!
13: Publish Your Webpage (only for FTP sites – not local or network drive sites)


To Synchronize: Entire Dreamweaver site (as opposed to specific files/folders within the site)
o Command is found in the Files Window (on the right panel) – Site - Synchronize
Direction: Put new files to remote (as opposed to getting files, or getting/putting)
14: You’re Online!!
Click on your URL link at http://search.ou.edu , adding name of file if not home.html or index.html
DW1 Handout – ECS Servers H:\ - Student Organizations
9
2.1: Creating a template from the index page:
File – SaveAs Template – call it pages.dwt
DW1 Handout – ECS Servers H:\ - Student Organizations
10
2.2: Add OU Web Index Table to the Library



Select the Web Index Table
From the Menu – Select Modify > Library > Add Object to Library
Name the Library Item – call it webindex
Name it
DW1 Handout – ECS Servers H:\ - Student Organizations
11
DW1 Handout – ECS Servers H:\ - Student Organizations
12
2.3: Create Editable Regions in Template



You can create several editable regions for images or content
Put cursor in cell & Right-click
o Select Templates > New Editable Rebion > name the region such as
‘content_or_image1’ etc.
o Save the Template using File > Save or File > SaveAs > Template > pages.dwt
These are the areas where the specific content for a specific page are written.
DW1 Handout – ECS Servers H:\ - Student Organizations
13
2.4: Create Pages from Template


Select File > New > Select the Templates TAB
Select under Site – pages.dwt template file (note the thumbnail view) – Select Create
DW1 Handout – ECS Servers H:\ - Student Organizations
14
2.5: Adding Specific Content on a Specific Page (this example is the About_us Page)



Add an image in the first cell under the navigation
Add your content in the next cell or cells (use tables in table for additional layout)
Save your page – Select File – Save or SaveAs & name it about_us.htm
2.6: Create additional pages in the same method as above




Calendar.htm
Members.htm
Photos.htm ( or use the Photoshop Web Gallery Concept)
Contact_us.htm
DW1 Handout – ECS Servers H:\ - Student Organizations
15
2.7: Return to the template – pages.dwt to update the navigation links





Open the pages.dwt file
Highlight HOME and select ‘index.htm’ in the links option
Highlight ABOUT US and select about_us.htm in the links option
Do this for each topic
Save the Template and it will update all the pages you have created already from the template.
DW1 Handout – ECS Servers H:\ - Student Organizations
16
Other Tips:
A: ECS – Web Address: http://coecs.ou.edu/Firstname.M.Lastname/
1.
2.
3.
4.
Go to My Computer
Select Tools > Map Network Drive (students use \\washington\homes ; faculty & staff use \\wilson\homes)
Check the Reconnect at logon option box
Click Finish to mount the drive.
a.
B: How to Use Dreamweaver Help. Dreamweaver has an excellent help feature where you can search for your answer.
 Select – Help > Using Dreamweaver & search for your answer.
C: Uploading/Downloading a file using the Put/Get File Commands.
DW will prompt you to ‘Include Dependent Files’ – say Yes to include any image files associated with the htm file.
 Save your work as home.html so you can replace the OU Default Web Page (pick another name if you don’t
want to replace your current Web Page)
 To Upload a file:
o Highlight home.html (or any file) in the site window
o Select the “Put Files” Icon (Blue Arrow)
o You will be prompted to ‘Include Dependent Files’ – Click OK
DW1 Handout – ECS Servers H:\ - Student Organizations
17