1 / 61

Assembling an

Educational Website. Assembling an. Setup Text Saving and Viewing. Initial Setup  Log onto computer (Mac) in ITC001 (turn on if necessary)  Connect to server: public_html  In finder, select GO and then Connect to Server

jhagy
Download Presentation

Assembling an

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Educational Website Assembling an Setup Text Saving and Viewing

  2. Initial Setup •  Log onto computer (Mac) in ITC001 (turn on if necessary) •  Connect to server: public_html •  In finder, select GO and then Connect to Server •  Type smb://cougar.wou.edu/public_html •  Enter username (if not provided) and password •  A public_html icon should appear on the desktop and the word public_html should appear in the Finder window when you open the Finder (leftmost icon in the dock) Assembling an Educational Website

  3. Initial Setup (continued) •  Start a new folder for this project •  Click on public_html icon, then select New Folder under File •  Name the new folder “web” (the computer should default so that you can immediately type “web”); you will put all webpage documents in this folder Assembling an Educational Website

  4. Initial Setup (continued) •  Start another new folder •  Click on public_html icon, then click on “web” then select New Folder under File •  Name the new folder “images” (the computer should default so that you can immediately type “images”); you will put all images in this folder Assembling an Educational Website

  5. Initial Setup (continued) •  Open DreamWeaver (one of the question marks in the dock at the bottom of the screen) •  Open a browser (Safari or Firefox recommended) Assembling an Educational Website

  6. DreamWeaver setup • With Dreamweaver open, • click on New under File, • then HTML (middle of screen) and • finally Create (bottom right) Assembling an Educational Website

  7. DreamWeaver setup • In the upper left of the Dreamweaver screen click on “Split” Assembling an Educational Website

  8. Remote Desktop Connection • PC • On a PC • All Programs - Accessories - Remote Desktop Connection • type ts.wou.edu • type WOU username, password and MASH • logon with WOU username and password • All Programs - Macromedia - Dreamweaver • All Programs - Adobe - Photoshop Assembling an Educational Website

  9. Remote Desktop Connection • CoRD (Mac) • On a Mac • Download CoRD from Internet (Google cord) • Open CoRD • type ts.wou.edu • type WOU username, password and MASH • logon with WOU username and password • All Programs - Macromedia - Dreamweaver • All Programs - Adobe - Photoshop Assembling an Educational Website

  10. Using Files and Folders • on Remote Desktop Connection • in My Computer find p-drive (public_html) • in p-drive, find folder web • put all webpages documents in this folder • in the web folder, find folder images • put all images in this folder (first) Assembling an Educational Website

  11. Introduction to HTML • Basic tool: tags, e.g. <body></body>; <table><tr><td> • Basic to each document (DW does this for you, and more) • <html> • <head> • <title>Title of the Webpage</title> • </head> • <body> • ----this is where you will enter most of your code--- • </body> • </html> Assembling an Educational Website

  12. Introduction to HTML • Basic tool: tags, e.g. <body></body>; <table><tr><td> • Basic to each document (DW does this for you, and more) Assembling an Educational Website

  13. Introduction to Fundamentals of Webpage Design for ED421 Text (think MS Word, it’s straight forward) Images (pictures and don’t forget Photoshop) Links (connections to other pages) Tables (layout design) Assembling an Educational Website

  14. Text • In DW, on the lower half of the split screen type some text, such as, “This is the Title of my First Webpage” Assembling an Educational Website

  15. Text • On the bottom of the page you will note a window of Properties (if this window is not here, click on Modify in the top menu and click on Selection Properties) Assembling an Educational Website

  16. Text • Modify the text by highlighting some text and selecting a variety of properties, such as center (icon), Bold, change of color, etc. (It’s a bit like MS Word.) • Watch how the • code is changing • in the upper half of • your split screen; • from time to time • you may want to • enter your text or • code in the • upper half Assembling an Educational Website

  17. Text • Save this document: • Under File, click on • Save As; click on the little • blue square with little triangle • at the right of the name box to • see the full window and list of all folders • Type in a name for your webpage • Click on public_html and then web(the folder you created • above) and then • click on Save Assembling an Educational Website

  18. Text • Save the document: • Note the recommended rules for naming webpages) • Rule #1: Always use only small letters(to avoid confusion remembering if you used capitals or small letters) • Rule #2: Do not use special characters or spaces (they look ugly and confusing in the URL address for your users) • Rule #3: End the webpage name with .htm or .html(always use the same ending for consistency) • Rule #4: Use short names(this is a recommendation) • Example: firstpage.html Assembling an Educational Website

  19. Text • View the document: • Viewing your Webpages • Click on a browser(Safari or Firefox) to open it • Under File in the top Menu, select Open File • Find your webpage (should be in public_html, in folder web), select your webpage • Click on Open (or double click on the webpage name) Assembling an Educational Website

  20. Text • View the document: • Viewing your Webpages • Ah ha! Assembling an Educational Website

  21. Text • View the document: • Viewing your Webpages • To view your webpage from other computers or your home computer: • Open your browser • Type • www.wou.edu/~username/web/firstpage.html(where username is your username, like jjones; web is the name of the folder you created earlier; and firstpage.html is the name of your webpage you just saved) Assembling an Educational Website

  22. Text • View the document: • Viewing your Webpages • Ah ha! Assembling an Educational Website

  23. In Summary • Logon to your computer in ITC001 • Connect to public_html • Create the web folder (first time only) • Create the images folder (first time only) • Open DreamWeaver, create documents • Save images in the images folder • Save webpages in ED421 • Open browser and open webpage, or • Open browser and enter URL www.wou.edu/~username/web/firstpage.html Assembling an Educational Website

  24. Educational Website Assembling an Images

  25. Image • First … Start another new folder • Click on public_html icon and then on your ED421 folder - Select New Folder under File • Name the new folder “images” (all small letters); you will putabsolutely allimages in this folder >>>beforeyou put them on your website <<< Assembling an Educational Website

  26. Image • Second … Find an image • From the Internet • Search using a search engine like Google • Download the actual image, probably to your Desktop, not a thumbnail • From your camera • Download from your camera to Desktop • From the scanner • Scan and move image to your Desktop Assembling an Educational Website

  27. Image • Third … Size and modify image • In Photoshop, open the desired image • Under Image, select Image size Assembling an Educational Website

  28. Image • Third … Size and modify image • In Photoshop, open the desired image • Under Image, select Image size • Adjust the size • Resolution of 72 is good for webpages • A width of 800 is almost the full page, a width of 100 is quite small, a width of about 300 is very workable • Click on OK Assembling an Educational Website

  29. Image • Third … Size and modify image • In Photoshop, open the desired image • Under Image, select Image size • Adjust the size • Resolution of 72 is good for webpages • A width of 800 is almost the full page, a width of 100 is quite small, a width of about 300 is very workable • Click on OK • “Save for Web & Devices” under File Assembling an Educational Website

  30. Image • Third … Size and modify image • In Photoshop, open the desired image • Under Image, select Image size • Adjust the size • Resolution of 72 is good for webpages • A width of 800 is almost the full page, a width of 100 is quite small, a width of about 300 is very workable • Click on OK • “Save for Web or Devices” under File • Typically choose “jpeg”; click Save • Save in your “image” folder which is in the ED421 folder which is in the public_html • Give the image a good name • Save Assembling an Educational Website

  31. Images • Back in DW, on the lower half of the split screen place your cursor behind your text and press Return, this positions your image Assembling an Educational Website

  32. Images • Under View, select Image • On the next screen, select your public_html folder, then your ED421 folder, then your images folder, click on the name of your image, and click on Choose Assembling an Educational Website

  33. Images • Once your image is on your webpage, you can justify its position left, right and center; you can change the size; and more (see Properties at bottom of page) • Note the names of your images in the code portion of the screen and also in the Properties • Type in a name or word in Alt (this word will be read by the computer of blind persons) • See next slide for visual Assembling an Educational Website

  34. Images Assembling an Educational Website

  35. Images • Save this document: • again and frequently • Under File, click on Save (or use the key stroke shortcut) • View your Webpage • Click on a browser • Under File in the top Menu, select Open File, and find your webpage document, or • Type your address in the URL box, eg. www.wou.edu/~yourusername/web/firstpage.html Assembling an Educational Website

  36. Images View this document:Ah ha! Assembling an Educational Website

  37. Images • Congratulations! • You have the basic tools for designing a webpage. • Now we will add links and create a table to improve the way things look Assembling an Educational Website

  38. Educational Website Assembling an Links

  39. Links • Links for Text or Images are very similar • Highlight Text or click on an Image Assembling an Educational Website

  40. Links • Note the Link box in the Properties in both cases • Highlight Text or click on an Image • There several options at this point: • Directly type in the complete URL of another webpage, eg. • http://www.wou.edu/library • Directly type in the name of another document you have or will have in your ED421, eg. • secondpage.html • Use the little blue folder icon to the right of the text box to browse for another one of your documents Assembling an Educational Website

  41. Links • Note the Link box in the Properties in both cases • Highlight Text or click on an Image • There several options at this point: • Directly type in the complete URL of another webpage, eg. • http://www.wou.edu/library • Directly type in the name of another document you have or will have in your ED421, eg. secondpage.html • Use the little blue folder icon to the right of the text box to browse for another one of your documents Assembling an Educational Website

  42. Links • To add an link to your email: • Click on Insert and then Email Link • Type in your email address • Note the code in the Preperties Assembling an Educational Website

  43. Links • You have mastered the technique of linking webpages • At this point you may try several things: • Add at least one link to another webpage, save your webpage and view your webpage, trying your link • Create a second webpage in your folder to practice linking to one of your own webpages; save and view. • Wait until the next lesson to try your links. You have confidence they will work! • Now we’re on to getting text and images in the right places on the page - using tables. Assembling an Educational Website

  44. Educational Website Assembling an Tables

  45. Tables • Before we use Tables we will explore their possibilities • Think of Tables like a page divided into squares and rectangles; bricks, if you will; or similar to an Excel spreadsheet • With your browser (Firefox or Safari) and critically view several websites: cnn, com, google.com, wou.edu/saxowsky/tech/ed421/ed421.html, or others Assembling an Educational Website

  46. Tables • Notice CNN.com is somewhat complex but definable • Google.com is essentially a non-table or a single cell table • My webpage has two rows and two columns; this is a great place to start. I recommend this table! Assembling an Educational Website

  47. Tables • We’re getting close to designing the website, so in your mind, or on a scratch sheet, you can start to visualize your webpage. • Let’s practice a table first! • In DW, under File, create a New webpage, choose HTML (middle of the page) and click on Create (lower right) • Click on the icon in the upper left to “split” the screen. • Click your mouse in the lower half of the screen. Your table will be created where you click your mouse. Assembling an Educational Website

  48. Tables • Click on Insert and • then choose Table • Choose the number • of rows and columns • 800 is a good width • (experiment!) • Nothing in Border implies invisible • Padding is like matting in the cell • Spacing is the distance between cells Assembling an Educational Website

  49. Tables • The Table appears! Click in any cell and insert Text and Images as we have done in the past. • Click on the central vertical line and drag it to adjust widths Assembling an Educational Website

  50. Tables • Click in any cell and insert Text and Images as we have in the past Assembling an Educational Website

More Related