2222 Visual Thinking for Design Fundamentals of Dreamweaver CS3 Part 1: Working in Photoshop? Understanding Slices -Divides your image into multiple areas (.gif, .png, .jpg) -Slicing is good when your page may optimize best in different file formats (illustrations and jpgs) -Slice each button as a separate link. -What slices look like? Creating User Slices Use Tea_01.psd 1. Make sure snap to on> view snap to>all 2. Slice tool on tool bar 3. Slice Javaco Logo> Magenta lines represent smart guides to help line up 4. Slice just drew has blue number>represents user slice 5. Grey numbers represent auto slices (photoshop makes those automatically for you) 6. Need auto slice because every pixel needs to be represented..will be reassembled into an html. File. 7. You can adjust the borders of a user slice, but not the auto slice>unless you promote it to a user slice 8. Go back to tool bar>select SLICE SELECT TOOL 9. Select auto slice 4 > options bar>click promote tool 10. Control click in #03>Divide slice (can save time)>2 slices horizontally>2 slices vertically. Can change them back to one by control clicking> Combine slices into one large user slice 11. Control Click>Can also delete slice Layer 1. 2. 3. 4. 5. 6. Based Slices Use Tea_02.psd Layers Panel>click carrot our stores folder Advantage is that slice will move with the layer>this is not true with user slices Would have to redo user slices if we needed to move With cup layer selected>Edit>free transform to make cup image smaller Click check bar in right hand side in options bar> Undo Change Now put a drop shadow on cup by double clicking on layer name>notice layer slice changes with effects as well 7. Can create more than one layer slice at a time. 8. Layers Panel>hold down shift and select to 3 layers> 9. Layer>New Layer Bases Slices 10. Disadvantage>may not have a file prepared like this (may be a flat image) 11. Cannot adjust the borders 12. The less amount of slices the better 13. Can turn layer based slices into User Based Slices 14. Slice Select Tool>Options Bar>PROMOTE 15. Adjust Slices to edge Adding Slices Options Use Same Document 1. Slice Select Tool> Select Logo 02> Options Bar>Select folder next to the Hide Auto Slices button 2. Give a short and meaningful name. Helps us notify when we are working in Dreamweaver. No spaces>uppercase>unusual chacters 3. Names are important when you are working in Dreamweaver Optimizing and Saving Slices Use Tea_03.psd 1. Goal Optimize each slice 2. Select Slice Select Tool 3. Select 05>image of cup>change to a jpeg>get file size down>medium>preset to 50 1 4. Go to Map>gif because image is flat art > 128 colors>check transparency>matte white>selective 5. Logo>Gif>Selctive>32 Colors 6. Shift click on all 4 button slices>Gif>increase number of colors to 16 7. Always check file size 8. Select “Easy to Find Hard to Forget”>Gif>Colors 9. Auto Slices are all linked together and will be optimized together 10. Click Save button>Select desktop>create new folder>name T 11. Formats>HTML and Images 12. All Slices 13. Photoshop has generated html file, images folder Part 2: Dreamweaver Why use Dreamweaver? -Makes it easy to design and update webpages without having to know too much code. -If you are serious about designing webpages…the more code you know the better. Setting up Your Site * The most common approach to creating a website with Dreamweaver is to create and edit pages on your local drive, and then upload copies of those pages to a remote web server for viewing on the web. 1. 2. 3. 4. set up project files Define a local folder Local Folder-the folder that is usually located somewhere on your hard drive. Remote Folder-The folder that is published to your web server. (we discuss this towards the end of packet) Web hosting service http://www.dreamhost.com/ ($7.95/month) http://www.uplinkearth.com/ ($4.95/month) http://b2evolution.net/web-hosting/top-quality-best-webhosting.php //best web hosting w/prices listed Domain names http://www.godaddy.com http://register.com http://www.networksolutions.com/whois/index.jsp (tells you who owns domain) How to choose a good domain name http://www.thesitewizard.com/archive/domainname.shtml CSS (cascading style sheets) http://www.adobe.com/devnet/dreamweaver/articles/css_page_layout_basics.html http://www.adobe.com/devnet/dreamweaver/articles/understanding_css.html http://www.adobe.com/designcenter/video_workshop/?id=vid0155 Dreamweaver Resources http://www.trainingtools.com/online/dreamweaver3/index.htm http://www.bu.edu/webcentral/learning/dreamweaver1/index.html http://www.thesitewizard.com/gettingstarted/dreamweaver1.shtml http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html (* FILES USED FOR THIS TUTORIAL) ___________________________________________________________________________ 2 Site Definition Advanced Settings (for setting up a local folder for website files) 1. Select the images folder with the browse button for the Default images text box>click OK 2. The file list in the Files panel acts as a file manager, allowing you to copy, paste, delete, move, and open files just as you would on a desktop. Whenever you import something into dreamweaver MAKE SURE THAT YOUR FILES PANEL IS AFFECTED. 3. Later, if you want to publish your pages and make them publicly available, you'll need to define a remote folder—a place on a remote computer, running a web server that will hold published copies of your local files. (once again we discuss this at end of packet) Part 2: Getting familiar with Dreamweaver Interface Naming Conventions 1. No spaces in file names a. Use underscore_ 2. Shorten file names 3. Avoid using capital letters(Have to remember how you capitalized when typing in URL) 4. Avoid using characters 5. Only use letters and numbers 6. .html and .htm (both are acceptable) 7. index = default go to page in a website=homepage 8. File>new>save as> index.html 9. Give page a title name (this is what the browser will read) Dreamweaver interface 1. workspace>default layout (window>default) 2. Windows layout is fairly different (Window>designer) 3. Mac version has free floating panel groups Panels o Window> Window menu for any panel you need to access o Window>layout>default or save current Insert Bar Window>insert bar Panel you will keep open all the time>this is a shortcut to many options accessed through the menu bar Eventually you can modify the Favorites Properies Inspector Best Friend | Keep it open all the time Window>properties Document Toolbar Main Window | Where you create your web pages Code – displays all code that is written for page Split – you can see both Design- what you see is what you get | select this option if not a coder Window>code inspector (So you don’t have to share window with code) Page Title – appears at the top of the window (when someone booksmark) File management – when you upload and download Preview – launches site in appropriate browser Refresh-will refresh Update options – changes depending on code/design 3 Visual Aids – Borders on your page Validate Mark up button- settings (code) Check Page- to do an on the spot check comparing browsers Document Window Top of page | Asterik- changes have been made and it hasn’t been saved Bottom of page | tag selector area Arrow | lets you select items on page Hand tool & Magnifying tool (great for viewing tiny table cells) Pop up menu - preset options for window perspective Panel Groups Window>default Panels on the right (panel groups to keep organized) Panel menu-in top right hand corner (more options) Floating Panel > gripper space at top of panel Saving Workspace Panel 1. 2. 3. 4. Default Browser Dreamweaver Preferences > Preview in Browser Primary and Secondary>short cuts type text Option f12 Save file Page should appear 4 Part 3:Creating Web Page Layout -CSS (cascading style sheets) have become the standard for page layouts on the web -CSS layouts can be very difficult to learn as a beginner -Tables are the foundation for page layout -Begin to learn page layout by using tables>and then quickly advance to CSS Image Maps or Hot Spots -Map area on bottom left of property inspector -Go ahead and use one of the tools to draw around what ever you want to act as a button -Give your image an alt name for visually impaired -Go ahead and preview in browser and notice when cursor changes -When done working with polygon map tool, must click on arrow to deselect shape or dreamweaver will assume you are still working with shape Tid-Bits of Knowledge -Understanding Path Structure -index.html is always home page -Linking with Point to File -you can always right click on folder or file to get more options Coming Up -Rollover -Image Gallery -Meta Tags -Flash Video and Buttons -Uploading Content to the Web Tables *In a table the rows and cells effectively act as container boxes for the content you add later. Working with Photoshop 1. Must set up preferences in Dreamweaver 2. File tyes>editors 3. Select Photoshop 4. .png, .gif, .jpg = make primary button 5. select image within dreamweaver>go to properties panel next to edit you will see photoshop icon 6. opens up photoshop>save image>and it will update in dreamweaver automatically 7. You can now copy and paste directly into dreamweaver from photoshop and firworks Dreamweavers Built In Editing Tools 1. Properties Panel>Edit Tool>Next to Photoshop 2. Optimize,Sharpen, Brighten, cropping, etc.. 3. Click ok and opens appropriate panel. Insert a Flash File (slideshow) *insert a slideshow 1. Select once inside the second row of the first table 2. Property Inspetor>Center form the Horz pop-up menu>Middle from the Vert pop up 3. Insert>Media>Flash 5. Properties Inspector>Play 6. Save Page Insert a Flash Video File 1. Insert>Media>Flash Video 2. Select Progressive Download Video from the Video type pop-up menu 5 3. Progressive Download allows the video file to start playing before the download is complete. 4. URL text box>select browse to navigate to video (café_townsend_home.flv) 5. Select Halo Skin 2 fro mthe Skin pop up menu 6. Properties Inspector>Width 180 7. Properties Inspector>Height 135 8. This specifies the height and width of .flv file Add a Rollover Effect To add a rollover effect>add a new rule that contains the :hover pseudo-class Hover is defined by when a user holds the mouse over an element 1. 2. 3. 4. 5. 6. 7. Open>.css file Select the entire .navigation rule Copy text (apple + C) At end of rule> press return to create more space Edit>paste the copied text Add the :hover pseudo class to the pasted .navigation selector In the new .navigation:hover rule>replace the current background color (#993300) with #D03D03 8. Save>Preview index.html in browser 9. Should see mouse over taking hold of document QuickTime™ and a TIFF (Uncompressed) decompressor are needed to see this picture. Center Content of Page 1. index.html>select the <body> tag in the tag selector located at the bottom of window 2. Clicking this tag selects everything between the open and close <body> tags in the window 3. Check out Code view to see 4. Property Inspector>Select Align Center button 5. Dreamweaver inserts CSS <div> tags that center the body content of the page. 6. Save the page Part 6: Publishing Your Page (1)A remote site is usually a place on a remote computer, running a web server that holds copies of your local files. Users access the remote site running on the web server when they view your pages in a browser (2) After you create a website, the next step is to publish it by uploading the files to a remote folder. (3) You need to have your local site defined. (which we did in Part 1) 6 (4) This should be viewable in your files panel. You can expand your files panel by clicking the icon on the upper righthandside of your panel. 1. 2. 3. 4. 5. 6. 7. 8. 9. Site>Manage sites Select Folder name site Edit>Advanced Select FTP (will use this almost always) Select test Click OK Select Files Panel (make sure it is expanded) Make sure serever is connected. Icon with power cords facing eachother Select the up arrow (this puts files into remote server)>this may take some time In Preparing to Publish to the World Wide Web 1. Site>reports>entire local site 2. HTML REPORTS “missing alt text” & “untitled documents” > RUN 3. Report Window will now pop up 4. Double click error message and it will bring you to the page to correct 5. Site>Check Links Sitewide | will tell you where you have broken links (looks outside of file) 7