COURSE DOCUMENTS | EPORTFOLIO | HELP

Getting Started:

• We will be working on the page introduction_home.html in an in-class ePortfolio workshop. If you visit the ePortfolio lab for help, please inform them that you are taking this class.
• You can work on your ePortfolio from any computer with an internet connection and a copy of Dreamweaver.
• To get started with your ePortfolio, download this special AD360 template to your desktop and open in Stuffit Expander.

1. Defining your site in Dreamweaver
2. IMPORTANT INFO: file organization and naming
3. Adding text
4. Preparing your Academic Examples for the web
5. Saving your logo for the web
6. Adding your logo to the ePortfolio template
7. Adding your images to the Academic Examples page
8. Uploading your ePortfolio to the server
9. Downloading your ePortofolio from the server
10. Viewing your site on the web

Defining your site in Dreamweaver:

• Make sure your ePortfolio template folder is on your desktop.
• Open Dreamweaver.
• From the Site Menu choose New Site.
• When the Define a Site window opens choose the Advanced Tab.
• Under the Local Info category, next to Site Name, enter your name and project title (example: jspevack_eportfolio) .
• Click on the little blue folder icon next to Root Folder and browse to locate the ePortfolio template folder on your desktop.
• Next click on the Remote Info category and from the pulldown menu choose FTP
• Enter in the FTP information and Test (if you get an error message, double check to make sure you entered the info below exactly) and then click OK:

HOST: ePortfolio.citytech.cuny.edu
DIRECTORY:
LOGIN: your first initial and last name (example: jsmith)
PASSWORD: yearmonthday (example: 19851030)

• When the Site Files window opens you will see Local Files on the right and Remote files on the left. If you don't see remote files, click on the little triangle in the lower left hand corner.
• Open your files from the LOCAL side of your Site Files window. Never open your files from the desktop or the REMOTE side.

IMPORTANT INFORMATION:

Organizing your files and folders:

• It is essential that you keep your Local site folder and your Remote site folder neat, organized and synchronized.
• Your pages must always be in the main folder NOT in a sub folder.
• For proper synchronization between the Local and Remote sites, be sure to choose the CORRECT main folder when you define your site.
• Put your logo.gif and any other images inside the images folder provided.

Proper file naming:

Web browsers are very particular about spelling and syntax! All of your HTML pages should have the suffix: .html. Your images should have the suffix: .jpg or .gif

File names are case sensitive and must match to be readable. For instance, if an image is called logo.gif, you must refer to it in other html documents as logo.gif and not LOGO.gif.

Avoid using long file names. Files names should be 8 letters or less before the suffix. You cannot use signs, symbols (other than underscores or dashes) or spaces, because servers will read signs or symbols as commands and your files will not be displayed. Letters, numbers, dashes and underscores are ok. Try to use simple (short), one-word names without symbols or punctuation for all of your files and folder names.

There should be NONE of the following in your file names:
$ % & # @ * ! ?+><,

Adding text:

• Make sure your site is defined properly.
• Open introduction_home.html from the local side of your Site Files Window.
• Place your cursor in the nameplate box and type your full name.
• Type your introductory statement in the content area.
• Add your name and the current date to the footer area.
• In the footer, select and delete "your email address". Choose Insert > Email Link. Enter in your email in both the text area and the link area.
• Repeat this on every page in your site:
  • academic_examples.html
  • from_the_field.html
  • internship_experience.html
  • professional_goals.html
  • resume.html
  • work_experience.html

Preparing your Academic Examples:

• Save all your examples as EPS or PSD (Photoshop)
• Open a COPY of your first image in Photoshop (keep your original in a safe place)
• You will be saving two versions of each image: a full size image and a 100x100 pixel thumbnail.
  
  FULL SIZE IMAGES:
• Choose Image > Image Size from the pull-down menu. Use this screen shot for reference. Adjust the width to a maximum of 600 pixels. Set your image resolution to 72 pixels / inch. Make sure restrain proportions is checked. Click OK.
• Choose File > Save for Web.
• Your goal is to balance files size with file quality. You may use these settings as a guideline. Choose GIF for flat, graphic images and JPG for photographic, continuous tone images.
  • GIF: Selective, Diffusion, Colors > 256, Dither 100%, Web Snap 0%, uncheck Transparency. (screen shot)
  • JPG: Quality > High, check Optimized, Blur > 0 (screen shot)
• Save your optimized images to the images folder provided for you in your eportfolio template folder. Name your files image01.gif or image01.jpg

  THUMBNAIL IMAGES:

• With your full size image still open, double-click the crop tool to bring up the options panel, if it isn't already open. In the options panel set height 100 px, width 100 px and dpi 72. (screen shot)
• Use the crop tool to select a small or large section of your image and press the return key.
• Double click on the magnifying glass to see the image at 100%.
• Choose File > Save for Web. Follow the optimization guidelines above.
• Save your optimized thumbnail images to the images folder provided for you in your eportfolio template folder. Name your files t_image01.gif or t_image01.jpg

Saving your logo for the web:

• Create a logo in Illustrator.
• To prepare you logo for placement on your website, resize it so that is no larger than than 130 pixel high. Use the Info palette to guide you when you resize with the bounding box. Don't forget to hold down the Shift key to constrain the proportions.
• Make sure your artboard is free of stray points and unpainted paths. Go into Outline View (command Y) and delete any unwanted points. You can also go to Path > Clean up...
• To make your logo web-ready you need to save it as a gif. When an image consists of a flat, limited color palette, you will save it as a gif.
• Choose File > Document Color Mode > RGB
• Choose File > Save for Web
• Select the 2-Up Tab in the upper left corner. This will allow you to see your original and optimized image at the same time.
• Select GIF, Selective, Diffusion, Transparent, Colors > 256, Dither 100%, Web Snap 0%. Choose the background color of your web page for the Matte, in most cases this will be white #000000. Use this screen shot for reference.
• Click Save.
• Save your logo to the images folder provided for you in your eportfolio template folder. Name your file logo.gif

Adding your logo to ePortfolio:

• Make sure your site is defined properly.
• Open introduction_home.html
• Choose Window > CSS Styles to open the styles panel. Click the edit styles button. Scroll down to find students.css.
• Double click on the style #banner
• Choose Background from the categories list on the left. Use this screen shot for reference.
  • Next to the Background Image box, browse and select your logo.gif. It should be inside the images folder. If it is not, move it there now.
  • These options should be set: Repeat > no-repeat, Horizontal Position > right, Vertical Position > bottom, leave Attachment blank.
• Choose Box from the categories list on the left. Use this screen shot for reference.
  • Set Height to 110 pixels, depending on the height of your logo.
  • Padding should be set to 0 for all.
  • Margin should be set to Top 10 pixels, Right 25 pixels, Bottom 10 pixels and Left 25 pixels.
• Preview your page in a browser by clicking on the little globe/earth symbol at the top of the document window.
• To adjust the placement of your name, return to styles panel and double-click on the style h1. Adjust the top and right padding. Use this screen shot for reference.
• Your page should look something like this.

Adding your images to the Academic Examples page:

• Make sure your site is defined properly.
• Open academic_examples.html from the local side of your Site Files window.
• Double click on the first place holder image and browse for the images folder in your eportfolio template folder. Locate your first thumbnail, t_image01. Click choose.
• Select the text: [Project 01] and delete it.
• Then choose Insert > Hyperlink from the pull-down menu.
• Enter the name of your project, choose Target > Blank and browse for the full-size image by clicking on the little blue folder icon. Locate your first image, image01. Click choose and then click OK.
• Repeat with the other images.

Uploading to the FTP server:

• When you have modified the files in your site click on the connect to remote host button. Make sure your Site Window is split screen with your Local Site on the right and Remote Site on the left.
• Once connected, select (highlight) your local folder and press the blue "Put Files" arrow in the tool bar to upload your entire site.
• To upload specific selected files highlight the files and choose Site > Put

Downloading from the FTP server:

• Make sure your site is defined properly. Site Window is split screen with your Local Site on the right and Remote Site on the left. Click the connect to remote host button.
• Once connected, select (highlight) your Remote folder and press the blue "Get Files" arrow in the tool bar to upload your entire site.
• To download specific files, select the files you want to download and choose Site > Get

Viewing your ePortfolio site on the web

• Your URL is the ePortfolio web address followed by your first initial and last name or your login.
  
  http://eportfolio.citytech.cuny.edu/jsmith