Transcript Web Authoring workshop for MIT 17.541

Web Authoring Workshop
Molly Ruggles | [email protected] | 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
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
Can set up remote directory… like THIS:
hjackson
PC
aramone
PC
mchao
Mac
Upload using
DW’s ftp
w/check-in/out
utility
web-server
shared remote
directory on
Athena locker
or
course locker
Publicly
viewable
…or like THIS:
hjackson
PC
‘Designated
driver’
mchao
Mac
aramone
PC
Publicly
viewable
Upload using
DW’s ftp (or
Secure FX)
Shared remote
directory on
Athena locker
or
course locker
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)
Step 1. cont’d - set r/w permissions on afs
(do these one directory up …)
athena% fs la historyproject
Access list for historyproject
Normal rights:
system:anyuser rl
hjackson rlidwka
User Rights: access control list (ACL)
Right Enables 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
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
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.
 [email protected]
 /afs/athena.mit.edu/user/h/j/hjackson/

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 overwriting
MIT 17.541 - 11/1/07
Step 3. Create website
‘main.dwt’
Home
‘index.html’
Meiji
‘meiji.html’
Taisho
‘taisho.html’
Heisei
‘heisei.html’
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
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.
Finished product:
MIT 17.541 - 11/1/07
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

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