Dreamweaver MX 1 – Webpages
http://itcourses.ou.edu | http://ou.blackboard.com
Cathy Pierson –
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)
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
· 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://faculty-staff.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!
Faculty-Staff User Address Example - http://faculty-staff.ou.edu/D/Connie.G.Dillon-1/
This is ‘home.html’ file in your web space.
OU Search Link Info Example
4: Defining a Site in Dreamweaver MX
Dreamweaver Site Information - Here is the information you will need:
· Site name. – type: ouwebpage
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
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 1 - Edit Local Copies on my machine, then upload when ready
b. Where on your computer do you want DW to store local copies of your files?
c. Select My Documents/webpages folder - CLICK NEXT
4. Sharing Files: How do you connect to remote server? – Select FTP from-pull down menu
a. What is hostname of FTP address? – faculty-staff.ou.edu (students.ou.edu)
b. What folder on server to store files? – leave blank
c. What is your FTP login? OUNetID
d. What is your FTP password? OUNetID password
e. CLICK the TEST Button to confirm connection! If successful – continue… CLICK NEXT
5. Sharing Files, Part 2: Do you want to enable check in/out – Select No (for single user site)
6. 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:
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 1 row – 2 columns, width 600 pixels, 5 cell padding and border = 0
· To Edit or Modify Table: Put cursor in cell & select Modify > Table > Merge cells; Insert Rows & Columns etc.
· 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
8: Adding Content to your page: text, external links, email links, image files. SAVE work!
Properties Window for Text
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
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
Other Tips:
A: 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.
B: 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
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
· 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!
12a: To Create a Second Page & Link: You can connect your pages (files) together by making links to them
· Create a new page. Call this projects.htm
· Set up a Table for Content Layout: Insert > Table using 4 rows & 3 cols, width 100 %, 5 cell spacing, border=0
· Insert > Images. Put several images in various cells of your choosing
· Copy & Paste text from a website. Copy text to various cells to practice the text flow
· Add rows or merge cells as needed.
o Add rows – select Modify > Table > Add Rows and Columns
o Merge cells – select a Row and Right-click to select Merge cells
· Work with Cell Alignment. Put your cursor in a cell and set this aligment in the text properties window
· Create a [Home] link. Set this link to your opening page (your electronic business card)
***You can also create links to Word, Excel or PowerPoint Files. These files must be located in the same folder as your website.
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
5
DW1 Handout