www.VFXskills.com                                                                                 www.MAXlife.TV

TechsChoice.com
Google Enter your search terms

Soho Launch Pro Tutorials


WHAT YOU NEED TO START:

1.  You will need a graphics program.  I use Adobe Photoshop CS3 and Fireworks.  You can also use the free GNU graphics program GIMP (http://www.gimp.org/)

2.  HTML Editor.  I use Dreamweaver (Although I am a longtime user of FrontPage, I prefer Dreamweaver for this project)  The editor should be WYSIWIG (What you see is what you get.)  In other words, you should not use a text editor. 

3.  Folders - Make 3 Folders

      A.  Folder for your images and practice graphics
      B.  Folder for your ORIGINAL html project
      C.  Folder for your FINAL output. 

Note:  I make a final output folder and leave the original in a separate folder because I have often had to go back and make changes here and there.  Changes go much more smoothly when I know which files are my original files.

In the FINAL folder you will eventually have the following files:

index.html
index.psd
index_01.jpg  (or gif)
index_02.jpg
index_03.jpg etc.
screenshot.jpg


You will have as many index_01, 02, 03 files as you cut into slices inside of fireworks or ImageReady.

It is important to have screenshot.jpg in this file because if you don't you will receive an error message that this VERSION DOES IS NOT IN THE PRO FORMAT when you go to upload the file in SohoLaunch Pro.  It needs this file in order to work properly.  Also, I recommend that this be in the .jpg format.  Although, I also include a gif, just because I go overboard on being prepared.

START TEMPLATE DESIGN

1.  Open your graphics program.
2.  FILE - NEW (create a new page)
3.  780 pixels wide and 450 high.
4.  SAVE

5.  Decide if you want a top bar or side bar design.
6.  If you want a top bar design, you can design any type of top bar you like.  However, I suggest making sure you have at least 3 or more parts to the top bar because you will be typing in #Tags so that information will get placed on top of what you design.

A.  Top (20 pixels high is common for templates) - This is where your menu pages will eventually be placed.  So do not allow any design elements to interfere with this area.  In other words keep all pictures below this 20 pixel high area so that words can be easily seen across the bar.  After the graphic is sliced up and pulled into the html editor, this area will have either #PAGETITLE# or #HMENU# placed so that either only the page title will show up, or an entire menu of all website pages.
B.  Top (75 to 100 pixels high) You don't want anything CHUNKY.   This is where you can place a LOGO and some decorative pictures that go with your overall theme.  Here #LOGO# will be tagged so that people can input their own custom logo in that space.
C.  Top (20 pixels high)

D.  Content Area -  The content area will eventually include text and graphics so it should be one solid color, without print or texture (or very subtle texture).  #CONTENT# will be placed in this content area.   If you are designing and planning to use a top bar, this content area should be 780X275H (which excludes the sidebar).  If you want a sidebar,
E.  Sidebar - The sidebar should be 75 X 275H.  (if you do not want a sidebar, use the dimensions above, in "content area."   #VMENU# will provide a vertical menu in this sidebar area.
F.  Bottom (25 pixels high) #TMENU#
G.  Bottom (25 pixels high) #PAGETITLE# and #COPYRIGHT#

Select your colors and design away.  When you're finished with your "graphics" work, move on to the next steps.


SLICING THE GRAPHIC
Open the program you will use to slice everything.  I use Fireworks or ImageReady.

H. Slice your areas at the exact dimensions in A-G above.
I. Slice up the area where the custom logo will go (make the slice no more than 200 pixels wide.)


After you slice, SAVE HTML AND IMAGES (use the drop down arrow at the bottom of the Save As dialogue box and select HTML and IMAGES.)  by using SAVE AS or SAVE OPTIMIZED AS in the ORIGINAL FOLDER.  So in this original folder you will now have the index.psd file, index.html and all in index_01, 02, 03, JPEG graphics files.


OPEN HTML EDITOR AND EDIT INDEX.HTML

1.  When you open Dreamweaver or FrontPage (or whatever html editor), create a new site.   NEW - WEB in FrontPage, and in Dreamweaver, it's CREATE NEW - DREAMWEAVER SITE.

2.  Open INDEX.HTML

3.  Assign a CSS named custom.css and decide on your style sheet font size, typeface, site colors, whether or not you want to left or center align the graphics, and include top margin info too.  I like to zero out the top margin, but you may do whatever you prefer.

4.  Attach the style sheet.  In Dreamweaver select TEXT - CSS STYLES - ATTACH STYLE SHEET and select custom.css.

5.  In the CODE VIEW (or in the html tab at the bottom of FrontPage), change what is in between the title tags to look like this <TITLE>#PAGENAME#</TITLE>

6.  Under the title tags, place your meta tags just as you would in any other html document.  Note:  meta tags are normally placed in the header between <head> and </head>.

7.  Take note that your .css information is there.  It may be embedded and you will see the stylesheet text or it may say <lin href="custom.css" etc.

REMOVING GRAPHIC ELEMENTS AND ADDING TAGS





4. 

 



 

 
   
Site Map         

 

Please add us to your website or blog!

Privacy Policy - Disclaimer
free sound files, free media files, free tutorials, free web hosting, cheapest domain names, inexpensive domain names, screen capture software, Computer Software Tutorials, online training videos, computer basics tutorial, free windows tutorial, free computer tutorial for kids, computer programming tutorials, free computer courses, pc tutorial, beginner computer tutorials, free computer software tutorials, free internet tutorial, free typing tutorial programs, computing tutorials, computer science tutorials, graphic design tutorials, free visual basic tutorials, free Photoshop tutorials, newbie computer tutorials free flash tutorials, access tutorial online, computer course, pc maintenance online tutorials, absolute beginners computer tutorials, free online computer classes, frshirtsbestee online learning, free computer training download, free computer tutorial for seniors, computer parts tutorial, computer tutorials for children, computer hardware tutorials, free excel tutorials, computer fundamental introduction basics tutorial, Microsoft tutorial, free grocery coupons, Free computer software tutorials, tech support, technical support, the tech support forum, game development, 3d game development software tutorials, graphic design tutorials, graphic illustration tutorials, character animation and design tutorials, web development, Clipart and Banner Ads, adobe photoshop tutorials and downloads, software lessons, how to do it yourself, Fierce Layouts learn adobe Photoshop, learn silverlight, learn microsoft expressions, asp.net, video editing, youtube video, digital image editing software, national association of Photoshop professionals (naap) Flash Animation, graphics, computer software, computer books, manhattan flash animation presentations for advertising and banner ads, adobe, photoshop, macromedia, microsoft, software and application development, learn to, how to, tutorials, hardware, software Tech Support - Free Technical Support for Beginners and Advanced Users of Computers, Videographers, photographers, Programmers and Web Designers, Tutorials and How To Start, computer help, video, audio, nonlinear editing, cameras, microsoft excel free online video lessons, learn excel, learn microsoft word

Free software tutorials, downloads and technical support information for computer geeks, photographers and videographers.