1 / 15

Web Authoring Workshop

Web Authoring Workshop. Molly Ruggles | ruggles@mit.edu | 4-9185 OEIT Office of Educational Innovation & Technology MIT 17.451 | Oct 23, 2008. “Pre-workshop”. Step -1: research: search, read, annotate organize: synthesize, draft, outline, write, re-write Step 0: the book vs. the web.

wynn
Download Presentation

Web Authoring Workshop

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. Web Authoring Workshop Molly Ruggles | ruggles@mit.edu | 4-9185 OEIT Office of Educational Innovation & Technology MIT 17.451 | Oct 23, 2008

  2. “Pre-workshop” • Step -1: • research: search, read, annotate • organize: synthesize, draft, outline, write, re-write • Step 0: • the book vs. the web

  3. Web Authoring Workshop • Step 1: Set up remote directory on webserver • Install SecureCRT(win) or use Terminal (mac) • Create remote root directory • Set ACLs (access control lists) for r/w permissions • Step 2: Install/configure DW for web-authoring • Set up local root folder • Step 3: Use DW to make a web-site • Final thoughts... • Alternative html editors & ftp clients • Graphics editors and additional resources

  4. Can set up remote directory… like THIS: Upload using DW’s ftp w/check-in/out utility Publicly viewable hjackson PC web-server shared remote directory on Athena locker or course locker aramone PC mchao Mac

  5. …or like THIS: Publicly viewable Upload using DW’s ftp (or Secure FX) hjackson PC Shared remote directory on Athena locker or course locker aramone PC ‘Designated driver’ mchao Mac

  6. Step 1. Create remote directory • Download & install Secure CRT for win http://web.mit.edu/software/win.html. or... • terminal emulation software – comes with Mac OS • Logon: ‘ssh -l username athena.dialup.mit.edu’ • connect to your afs athena locker. Once connected: • athena% pwd (print working directory - tells you where you are) • athena% ls -al (list all the files and sub-directories in current directory) • athena% cd Public (change to Public directory) • athena% cd.. (go up one directory in the tree) • athena% mkdir historyproject (make a directory named historyproject)

  7. Step 1. cont’d - set r/w permissions on afs User Rights: access control list (ACL) RightEnables users to: r read the contents of files in directory l list the names of files in directory i insert files into directory d delete files from directory w write (or modify) files into directory k lock files in the directory a administer or change acl of directory (do these one directory up …) athena% fs la historyproject Access list for historyproject Normal rights: system:anyuser rl hjackson rlidwka athena% fs sa historyproject mchao rlidwka athena% fs sa historyproject aramone rlidwka athena% fs sa historyproject system:mygroupname rlidwka http://web.mit.edu/answers/unix/afs/afs_permissions.html- more about ACLs http://web.mit.edu/answers/accounts/accounts_listmaint.html- more about groups

  8. MIT 17.541 - 11/1/07 Step 2. Install and configure Dreamweaver • Download and install Dreamweaver • https://web.mit.edu/ist/products/vsls/forms/mit-dreamweaver-student.html • Its free for 1 year; pick up the CD • Launch Dreamweaver. Create site with its local folders: root and img • (copy image files from external folders) • Configure Dreamweaver to connect to remote root directory • ftp host: athena.dialup.mit.edu • Host directory: /afs/athena.mit.edu/user/r/u/ruggles/historyproject/ • The folder convention on Athena: • First letter of kerberos ID, second letter of Kerberos ID • Kerberos ID = what is before the @ sign of email. • hjackson@mit.edu • /afs/athena.mit.edu/user/h/j/hjackson/

  9. MIT 17.541 - 11/1/07 Step 2. cont’d. - DW Settings Must use SFTP at MIT For multiple users accessing the same web space: prevents file over-writing

  10. Step 3. Create website ‘main.dwt’ Meiji ‘meiji.html’ Home ‘index.html’ Taisho ‘taisho.html’ Heisei ‘heisei.html’

  11. Step 3. ‘making sausages’ • Create template (.dwt) • File > new > site > blank template > HTML template > create • Layout > AP div > create layouts for main.dwt (count pixels) > save • Insert persistent images, title, links; create editable regions • Create main.css; give styles to title • Create links (anchor tag) • Windows > Properties > fill in filename.html • Give styles to the link • Right click> CSS styles > new > ‘a’ tag > define in main.css • Give styles to ‘p’ tag (paragraph) • Create editable regions insert > template objects > editable region

  12. Step 3. cont’d - ‘more sausages’ • Create index.html, meiji.html, etc. • File > new > blank from template > site • Populate with body text and images; save • Upload local files to remote • Window > files > connect to remote host • Select files > put (dependant files? No) • Launch browser - take a look • When done, disconnect from remote host.

  13. MIT 17.541 - 11/1/07 Finished product:

  14. Alternatives • Free HTML editors – shareware • Coffee Cup www.coffeecup.com/ (30 day trial) • Crimson Editor www.crimsoneditor.com/ • Free FTP clients – shareware • Windows: Secure FX web.mit.edu/software/win.html • Mac: Fetch web.mit.edu/software/mac.html Image editors – 30 day free trials • PhotoShop Elements www.adobe.com • Paint Shop Pro (for windows) www.corel.com • Fireworks www.adobe.com

  15. Thank you Food for thought: • Basic web-coding resources • The Visibooks Guide to Dreamweaver 8 - MIT Libraries: Books 24x7 • Creating Web Pages - http://web.mit.edu/ist/web/reference/create/index.html • Web ToolKit - http://web.mit.edu/ist/web/reference/toolkit/ • SSI & CSS - http://web.mit.edu/ruggles/Public/ServerSide-CSS-JS-Carter/ • How to add MIT’s Google search engine - http://web.mit.edu/ist/google/ • Workshop slides at - http://web.mit.edu/ruggles/PPTs/ • Last year’s site - example: http://web.mit.edu/ruggles/17.541-07/ • This year’s site - example: http://web.mit.edu/ruggles/Pilot-E/ Need Help ...?? 3-1101

More Related