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.