Friday, November 28, 2008

HOW TO BUILD YOUR WEBSITE

HOW TO BUILD YOUR WEBSITE
A. Setting up your folders.
1. On your computer’s desktop, CREATE A FOLDER and name it “YOUR NAME SITE” where your name is, in fact, your actual God-given name. (Mine, for instance, would be MATT GODFREY SITE.)
2. Inside of that main folder, create two more folders and name them IMAGES and PAGES, respectively.
THIS IS ALL YOU NEED TO DO FOR NOW UNTIL YOU GET INTO DREAMWEAVER.

B. Building your design in Photoshop.
1. Open Photoshop
2. Click FILE>NEW
a. Name your file (ie “Matt’s Website Design”)
b. Set the PRESET to CUSTOM
c. Set the width to 800 PIXELS (click on the measurement option if it isn’t already set to PIXELS)
d. Set the height to 600 PIXELS
e. Set the RESOLUTION to 300dpi
f. Set the COLOR MODE to RGB
g. Set the BACKGROUND CONTENTS to TRANSPARENT
h. Click OK
3. Click FILE>SAVE AS
a. Save your document in your site’s IMAGES FOLDER as whatever you want to call it as a PHOTOSHOP DOCUMENT (Mine would be “WebsiteDesign.PSD”).
4. Design your site however you want it to look, mainly focusing on whatever is going to stay consistent throughout each page of your site.
a. If your pages were all going to look different then I would create each page in Photoshop and then move on to step 5.
b. If your pages are all going to look the same, minus whatever the content of the pages are (like stories/photos/bio/etc), then just create one page and then move on to step 5.
5. Save a JPEG copy of your design(s) by clicking FILE>SAVE AS and switching the FORMAT in the SAVE AS box to JPEG. (Do this for all pages created in Photoshop, if there is more than one.)
6. Watch this video about slicing that we watched in class at: http://www.youtube.com/watch?v=CYL6pMIkAug
7. Slice up your image:
a. Draw out guides on your document to outline the sections that you are going to slice apart.
1. Make sure your RULERS are showing on the LEFT and TOP of your Photoshop document (If not, then click VIEW>RULERS on the top MENU BAR).
2. Click and drag on your RULERS to create GUIDES around the sections that you want to SLICE apart and take into Dreamweaver.
b. Select the SLICE TOOL on your TOOLBAR.
1. CLICK>DRAG around the sections you just outlined with your GUIDES.
2. After you have SLICED all of your parts then select the SLICE SELECT TOOL on your TOOLBAR, which is located under your SLICE TOOL
(Click and hold on your SLICE TOOL for the SLICE SELECT TOOL to show.)
3. Double-click on EACH SLICE and rename it whatever you want.
4. After you have renamed all of your slices, click FILE>SAVE FOR WEB AND DEVICES.
5. IN THE SAVE FOR WEB DIALOG BOX: Select the 4-UP tab at the top.
6. Look at the K number under each image frame and select the frame with the lowest K number.
7. Select the SLICE SELECT TOOL on the top left portion of the SAVE FOR WEB window.
8. Hold down SHIFT and select each Slice that you just created.
9. Make sure the FILE FORMAT menu on the top right says GIF then click SAVE and save these to your IMAGES FOLDER on the desktop.
(Photoshop may save a bunch of other parts that you did not select into your IMAGES folder as well, you can just delete those. BE CAREFUL!).
8. Now you’re ready for Dreamweaver! Are you super-excited?


C. Bringing your site into Dreamweaver
1. Open Dreamweaver
2. Click SITE>NEW SITE (If you’ve gone through these steps before on the computer you are using then click MANAGE SITE instead of NEW SITE.)
3. Follow the steps to connect to your webspace that I posted a few weeks ago on the blog.
4. After you’re all setup then click FILE>NEW>BLANK PAGE> HTML DOCUMENT
5. In the TITLE line type your website’s name (Mine would be Matt Godfrey Photography)
6. Click FILE>SAVE AS and save this in your MAIN SITE folder (not your PAGES folder) as INDEX.HTML. The rest of your pages will go into that PAGES folder and can be saved as whatever you want to call them. The index page needs to be in that main folder.
7. On your index page, make sure you are in the SPLIT mode so you can see the code on top and the design mode on the bottom.
8. On the INSERT BAR that should be shown across the top of you monitor select the LAYOUT tab and then DRAW AP DIV. This is the same as drawing out the frames in Indesign.
9. On the DESIGN half of your DOCUMENT WINDOW click and drag out a rectangle.
10. Find your SITE FILES that should be shown on your right (You should see your IMAGES, PAGES, and INDEX.HTML files there.)
11. Click and drag one of your SLICED up GIFs into that rectangle you just drew.
12. Position the rectangle however you want it.
13. Repeat for each SLICE.
14. After you have the framework created in Dreamweaver then Click Save.
15. PREVIEW the page in a BROWSER by clicking on the GLOBE at the top center of your DOCUMENT WINDOW and selecting one of the browsers.
16. If everything looks correct (minus not having the content of your pages on it) then go back to Dreamweaver and click File>Save As to save a copy for your three other pages (If your four pages are going to have the same framework.) If it doesn’t look right, then correct it till it does.
17. Once you have the framework done then you can fill in the empty space where your actual content would go (like writing or photo samples/contact info/whatnot) the same way by drawing out the AP DIV tags and filling them accordingly.
**Preview your site constantly so you can make sure what you are doing is actually showing up that way**

D.LINKING PAGES IN DREAMWEAVER
1. After all four of your pages are done then you can link them together.
2. You can build links in a variety of ways, creating an IMAGE MAP (to link portions of an image to other page), linking text (for Email links or other text options) or just linking pages to each other.
3. Watch this video (http://www.youtube.com/watch?v=TkE7pySHL9U) so you can see how it’s done.
4. To link sections of an image using an IMAGE MAP:
a. Click on the image itself and the PROPERTY INSPECTOR window at the bottom will offer you a few light blue shapes under a heading of MAP.
b. Select the RECTANGULAR HOTSPOT TOOL. Click and drag over the section you want to make a link.
c. Click OK if it asks you about ALT text.
d. The PROPERTY INSPECTOR should change to show a line with a # sign in it. Change that # to what you want your link to jump to (either by typing it in, using the pinwheel to point to it in your SITE FILES, or clicking on the folder to find it.)
5. To link text:
a. Highlight the portions of text you want to make a link.
b. The PROPERTY INSPECTOR will show a LINK line where you can follow the steps from above to create your link.

E. Editing Photos for the Web
1. All photos should be edited in Photoshop like normal.
2. The only difference will be when saving:
a. Click FILE>SAVE FOR WEB & DEVICES
b. Under the 4-UP Option, select the lowest K number (like we talked about above) and save it as a JPEG (Pictures get saved as JPEGs, Images get saved as GIFs.).

F. Publishing to the Web.
1. When you are all done your site, make sure everything is saved.
2. On the top righthand side of your SITE FILES is a button that looks like a box inside of a box. Click that and your FILES will UNDOCK from the righthand side.
3. Make sure the PLUG is connected on the top of your SITE FILES so you can see both halves of your files.
4. On the right side of your files, select the MAIN FOLDER so that it is highlighted.
5. Click the BLUE UP arrow on top of your SITE FILES and then OKAY the PUTTING WHOLE SITE question box.
6. Your site should be launched. Check it at astro.temple.edu/~yourTUAnumber.

Wednesday, November 19, 2008

Dreamweaver Handouts

Click here to download the Dreamweaver Handouts

Wednesday, November 5, 2008

Cris D. Robinson's Infographic

How To … Use Style Sheets

How To … Use Style Sheets

*The recommendations made in this handout are specific to the BODY TYPE (the type designed for a newspaper’s stories), of a broadsheet newspaper. From this handout, you can also create style sheets for bylines, photo credits, cutlines, jump lines, etc., BUT the recommendations here are inaccurate for those page elements. For recommendations on fonts, sizes, styles, etc. for those elements, refer to Harrower’s Guide.

Setting up a Style Sheet

1. Draw a basic TEXT FRAME using the RECTANGLE tool.
2. Click on the TYPE tool.
3. Click inside the TEXT FRAME.
4. Go to the TYPE menu.
5. Select FILL WITH PLACEHOLDER TEXT.
6. Click on the CHARACTER FORMATTING tools.
7. Choose a FONT – (recommended with SERIFS).
8. Choose a FONT SIZE – (recommended 10-12 point).
9. Adjust the LEADING – (space between lines).
10. Adjust the TRACKING – (space between letters).
11. Adjust the SET HEIGHT – (height of letters).
12. Adjust the SET WIDTH – (width of letters).
13. Click on the PARAGRAPH FORMATTING tools.
14. Justify the text with the last line aligned left – (bottom, left option).
15. Adjust the indentation of the first line of each paragraph using the FIRST LINE LEFT OF INDENT tool/ dropdown box – (recommended 1p6).
16. Go to the WINDOW menu.
17. Select OBJECT STYLES.
18. Using the SELECTION tool, click on the text box you created.
19. Click on the PARAGRAPH STYLES tab.
20. Click on CREATE NEW STYLE, at the bottom of the STYLES menu.
21. Double-click PARAGRAPH STYLE 2.

NOTE: A new menu will pop up.

22. Name this style BODY TYPE.
23. Click OK.

Applying a Style

1. Draw a TEXT FRAME where you plan to place a story.
2. Click on the TYPE tool.
3. Click on the inside of the box.
4. Go to the TYPE menu.
5. Select FILL WITH PLACEHOLDER TEXT.
6. Hit APPLE A simultaneously to select all.
7. Go to the PARAGRAPH STYLES menu.
8. Double-click BODY TEXT style.

REMEMBER: WHEN YOU LAY OUT YOUR STORIES, THE INDIVIDUAL STORIES NEED COLUMNS.

FOLLOW THESE SAME STEPS TO CREATE STYLE SHEETS FOR THE FOLLOWING:

1. Bylines.
2. Photo Credits.
3. Cutlines.
4. Jump Lines.
5. Optional: Headlines (headlines vary depending on the space and layout).

How To … Create a Text Wrap

How To … Create a Text Wrap

1. Using the SELECTION tool, select ALL of the objects you would like the text to WRAP AROUND.

NOTE: Do NOT select the text that you would like to wrap around the objects. Select the OBJECTS, such as a picture, cutline, credit, etc., that you would like the objects to wrap around.

2. Go to your WINDOW menu.
3. Select TEXT WRAP.
4. On your TEXT WRAP menu, which will appear on the right-hand side of your screen, and select WRAP AROUND BOUNDING BOX.
5. In each of the four boxes on your TEXT WRAP menu, type in an amount of space, in picas, that you would like to stay between your objects and the text that wraps around them (recommended 0p10).
6. Drag your text frame over these objects, and the text should automatically wrap.

How To … Adjust Text

How To … Adjust Text

Creating a Text Frame

1. Click on the RECTANGLE FRAME TOOL.
2. Draw a box across the desired story space.
3. Click on the TYPE tool.
4. Click inside the box.
5. To fill with dummy text, go to the TYPE menu and select FILL WITH PLACEHOLDER TEXT.
6. To fill with real text, COPY the story you would like to place and choose EDIT and PASTE to put it inside the frame.

Adjusting Type

1. Once you have text placed inside a TEXT FRAME, make sure you have the TYPE tool selected, and click on the CHARACTER FORMATTING CONTROLS, which is in the upper- left-hand corner of your tool menu.
2. Using the FONT dropdown box, the first dropdown in the upper- left-hand corner of your tool menu, select a FONT.
3. Beneath the FONT dropdown box, select whether you would like your font to be italicized, bolded, etc.
4. To the right of the FONT dropdown box, select a FONT SIZE.
5. Beneath the FONT SIZE dropdown box, adjust your LEADING, which is the vertical space between lines of type.
6. To the right of the six “T” buttons, on the bottom, adjust your TRACKING, which is the horizontal space between letters.
7. Adjust the SET HEIGHT of your letters, which can be done using the dropdown box with the T and a vertical arrow next to it.
8. Adjust the SET WIDTH of your letters, which can be done using the dropdown box with the T and the horizontal arrow below it.



Adjusting Paragraphs

1. Once you are satisfied with the type you chose inside of your TEXT FRAME, make sure you have the TYPE tool selected, and click on the PARAGRAPH FORMATTING CONTROLS, which is in the lower- left-hand corner of your tool menu.
2. Choose an alignment for your text (for most page elements on a broadsheet, the recommendation is to JUSTIFY WITH LAST LINE ALIGNED LEFT), using any of the alignment buttons on the left-hand side of your tool menu.
3. Create an indentation for the first line in each paragraph using the FIRST LINE LEFT INDENT tool, which is to the right of your alignment tools on the bottom, (for body text 1p6 is recommended).
4. To create a DROP CAP, click on the DROP CAP tool, which is the third dropdown box from the left on the bottom of the tool bar. Type in a number of lines you would like for your first letter to drop.
5. To create COLUMNS, type a value into the COLUMNS tool, which is the dropdown box next to a long rectangle with two lines through it.
6. To align your text vertically inside of your box, click on the SELECTION tool.
7. Click on the box.
8. On the bottom right-hand side of your tool menu you will see the VERTICAL ALIGNMENT tools.

How To … Place Pictures and Images

How To … Place Pictures and Images

1. Click on the RECTANGLE FRAME tool.
2. Draw a box across the number of columns you would like your picture to run.
3. Go to FILE.
4. Select PLACE
5. Browse for the desired image.
6. Highlight the image.
7. Click OPEN.
8. Go to the OBJECT menu.
9. Click on FITTING.
10. If you would like to fill the entire frame, select FILL FRAME PROPORTIONATELY. If you would like to place the entire, uncropped image, select FIT CONTENT PROPORTIONATELY.
11. To add a border, go to the WINDOW menu.
12. Select STROKE.
13. When the STROKE menu appears on the right-hand side of your screen, select a weight for your stroke (between 1 and 2 point recommended).
14. Hit the RETURN key and a border will be applied.

How To … Set up a Broadsheet Grid

How To … Set up a Broadsheet Grid

1. Open InDesign
2. Go to the FILE menu.
3. Click on NEW DOCUMENT.
4. In the WIDTH box, type 14i, for 14 inches.
5. In the HEIGHT box, type 23i, for 23 inches.
6. In the COLUMNS box, type 6.
7. Hit OK.
8. Go to VIEW.
9. Select SHOW RULERS.

NOTE: If rulers are already showing, ignore this step.

10. Hold your cursor down inside of your above-hand ruler and drag it halfway down the page (69 picas.)

NOTE: This is where your paper will fold. Be very wary of where you place your pictures and stories in regard to this fold.

How to get your nameplate started

How to: Get your nameplate started.

In InDesign

Create Document

1. Go to your DOCK.
2. Click on the pink icon with the letters ID in the center.
3. Go to FILE.
4. Click NEW.
5. Click DOCUMENT.
6. In the PAGE SIZE dropdown box, select CUSTOM.
7. In the WIDTH box type 14i, which stands for 14 inches.
8. In the HEIGHT box, type 23i, which stands for 23 inches.
9. In the COLUMNS box, type 6.
10. Hit OK.

Create Nameplate’s Frame

1. On the InDesign toolbar, select the RECTANGLE FRAME TOOL, which is represented by a rectangle with an X through it.
2. Move your mouse over to the DOCUMENT window and draw a square inside of the page’s borders, which are represented by a purple box that surrounds the page.
3. Go to the TOOL menu, which appears at the top of the page when a tool is selected.
4. In the WIDTH box, labeled W, type 13i, which stands for 13 inches.
5. In the HEIGHT box, labeled H, type 3i, which stands for 3 inches.
6. Move your new box to the top of the page, where a nameplate would be anchored.

Select Type

1. On the InDesign toolbar, select the TYPE tool, which is represented by a T.
2. Go to the document window and click inside of the box.
3. Type the name of the newspaper.
4. Highlight the text.
5. Go to the TOOL menu, and click on the CHARACTER FORMATTING CONTROLS, which is represented by an A on the far left-hand side of your screen.
6. Choose a FONT.
7. Choose a FONT SIZE.
8. Adjust the TRACKING, which is in the middle of the TOOL menu, and is represented by an AV with a horizontal arrow running underneath them.

NOTE: Tracking is the horizontal space between letters in a word.

9. Adjust the SET HEIGHT, which is represented by the T with a vertical arrow running beside it.
10. Adjust the SET WIDTH, which is represented by the T with a horizontal arrow running below it.
11. Go to the left-hand side of the TOOL menu and click on the PARAGRAPH FORMATTING CONTROLS, which is represented by a paragraph symbol.
12. Choose a HORIZONTAL ALIGNMENT for your nameplate, from the left-hand side of the TOOL menu.
13. On the InDesign toolbar, select the SELECT tool, which is represented by a BLACK ARROW.
14. Click on the box with your nameplate.
15. Go to the TOOL menu, and adjust the VERTICAL ALIGNMENT of the text, which is represented by four boxes on the right-hand side with lines differently placed within them.

Add Color

1. Go to your WINDOW menu.
2. Check SWATCHES.
3. To change the color of your TEXT, highlight the text and select a SWATCH color on the right-hand side of your screen.

NOTE: Double-click on a color family to get other colors.

4. To change the color of your BOX, go to the InDesign toolbar and click on the SELECT tool.
5. Select the BOX.
6. Go to the bottom of your InDesign toolbar and click on the FILL tool, which is represented by a plain, white square.
7. Go to your SWATCHES menu and select a color.

Save for Web

NOTE: ONLY SAVE WHEN YOU ARE COMPLETELY FINISHED.

1. To save ONLY your nameplate, hit APPLE + A simultaneously, to SELECT ALL.
2. Go to the FILE menu.
3. Click EXPORT.
4. Pick a DESTINATION for the file.
5. Name your document in the SAVE AS box.
6. In the FORMAT box, select JPEG.
7. When the EXPORT JPEG menu pops up, click SELECTION.
8. In the IMAGE QUALITY box, select MAXIMUM.
9. Hit EXPORT.

In Photoshop

Create Document

1. Go to FILE.
2. Select NEW.
3. Name your document.
4. In the WIDTH box, type 13 and select INCHES.
5. In the HEIGHT box, type 3 and select INCHES.
6. In the RESOLUTION box, type 200 dpi.
7. In the COLOR MODE box, select RGB.
8. In the BACKGROUND CONTENTS box select WHITE.
9. Hit OK.

NOTE: Use layers, the type tool, color and filters to create a nameplate.

Matt Breen's info graph