www.VFXskills.com                                                                                 www.MAXlife.TV

TechsChoice.com
Google Enter your search terms

 PSD Layouts - Building a Website in Adobe Dreamweaver


 
Importing your Photoshop layouts into Dreamweaver
For this tutorial you should already know how to slice and optimize and export your Photoshop layouts
and define a local root folder in Dreamweaver - If you don't know those things, go learn how to do them and come back.
 
Open Photoshop and create your layout - Export  FILE - Save for web and devices - and save everything as a JPG at 45 quality hit SAVE
At the bottom of the dialog box set the SAVE AS TYPE at SAVE as HTML AND IMAGES

Plus a folder full of images  named sitelayoutsliced- Photoshop just exported

Open Dreamweaver - Setup a folder called TempSite in the root folder of your site

drag in your images and your sitelayoutsliced.html file into your TemSite folder

Go to Bridge - Go to images folder - find your folder named sitelayoutsliced (that's what you named the folder previously) sitelayoutsliced.html  double click on this html file

put mouse over edge of the table and select the entire table and select the align options and align center

it won't look centered on the page, you have to check it in your default preview browser to see that it has, in fact, centered

file save (control S) F12 is the hot key for previewing in your default browser


Select Page Properties
Set entire layout into a DIV tag and use it as our background, Select Page Properties and set a background color with the color picker add to custom colors

Note the Hexadecimal colors and color numbers

Set into DIV, Go to the top menu bar and select INSERT - LAYOUT OBJECTS - DIV TAG
We want to insert this and wrap it around our selection.

Give it the ID of site_layout in the ID area .... leave the class text box empty

Select the NEW CSS RULE to go along with it

Select Advanced ... the selector is going to be #site_layout so type that into the Selector text box.

Define it in a NEW STYLESHEET LAYOUT
When we do this Dreamweaver is going to ask us where we want to save our new CSS file.
Select SITE ROOT, name it site_layout in the file name text box.  SAVE

Now the properties box for CSS shows up. 

Change the background color
Change BOX and set the width to 100% and Height to 100%
Uncheck SAME FOR ALL
Set padding - 35 pixels from the top of the browser window... hit OK
Then hit OK to insert our DIV
Save CSS file and close it.

Save our sliced site and preview

Now, lets say we want to change something in the CSS file.  How do we do that?
1.  You can double click on the site_layout.CSS file and you can add anything you want. or
2.  You can go to the CSS panel in the upper right corner (or Window - CSS if you can't find the panel)
Select Add Property and you can choose what you want to change.
or you can double click the file site_layout in the CSS panel the CSS rule definition dialog box.

ADDING CONTENT
Now we need to delete part of the image and put something there to replace it.
Select the image and delete it. Don't worry if it looks as if your whole image just got wrecked.  We're going to fix it.

Go up to the Layout Tab and select insert DIV TAG
Insert At Insertion Point (which would be where the little flashing cursor is)
Give it the ID of site_layout_content
SET NEW CSS RULE
Selector:  Site Layout Content
You are NOT going to define it in the css_layout.css, but in a NEW STYLESHEET FILE
Hit OK
Its going to ask you where you want to save it.
Make sure you're on the root of your site by clicking the Root button (or being inside of the Root Folder)
Name it site_layout_content.css, tap site root
SAVE
Now in the Properties box set background, you can eyedropper tool on the dark grey of the graphic
in BOX set the width to 800 X 350 OK, OK  Then delete the text that says CONTENT GOES HERE

In the files you have site_layout.css and site_layout_content.css

Now you can add text and images to this area.

Save everything and test in browsers to make sure everything works ok before you create a template.

CREATING A TEMPLATE: Converting to a template
File - Save as Template

Name it main_layout and save it - There are no existing templates
Do you want to update the links?  Always choose YES
Now the name is main_layout.dwt - DWT - stands for Dream Weaver Template

The Templates folder just shows up in your file list

>>> Now you need to DEFINE areas of the template that you would like to be EDITABLE.

You would have already set your menu links and links to home in place, so that you would never have to change them again (although you could if you went back to the main template).

Hold the CONTROL key and select the DIV

Go into the source code and made sure we are actually in the DIV - it will be highlighted

Come back out to the design view.  Go to the COMMON TAB and Click the little Green Tab (it will be located to the right and will say templates when you place your mouse arrow over it)

Editable Region - This region will be editable on documents related to this website
Name this Editable Region MAIN_CONTENT_AREA and hit OK

Now you will see a little teal box surrounding the editable area.

Select the image and make it editable, but we don't want to make this an editable area, we want to let it stay an image. 
So, select the header image.
MODIFY TEMPLATES
Make an Attribute of this Image (placeholder) editable
The attribute that I want to be editable is the SRC (in the drop down box) - The Source of the File (you can see that it is the source by looking below in the properties file and seeing that it is the source of our image)

Name it header_img_src
Type is a URL
Default is the headerimg.jpg file (which is the image that is there now), click OK

The image will disappear - don't worry.

Save this dreamweaver template and close it.

CREATE A NEW PAGE FROM THE TEMPLATE:
Go over the the Assets tab at the panels on the right
You'll find a templates button
If you click in there, you won't see any templates.
So, right click and hit refresh site list
Then the Main Layout Template will show up.
To create a page from this template, RIGHT CLICK and select NEW FROM TEMPLATE
It will open a new UNTITLED html file
Add stuff to the editable DIV regions
Remember the image... we want to change the header image

First, hit FILE-SAVE AS and name it what you want this page to be named...We'll name it test_file.html
In order to change the image, we need an image to swap it with.
So, lets quickly edit that image and name it something else.  It is not header_image.jpg.  Select, right click on it and hit open with photoshop.  Hue Saturation, then file save as...headerimage2.jpg  close

Back to dreamweaver.
Go to MODIFY - Template Properties
There is one property in the box named header_image_source  next to that there is a folder...go to the folder and navigate to the root folder and find the images folder and find the new image you just modified header_image2.jpg.  Now the image has swapped.  SAVE - PREVIEW

THE END -YAY!



 





































 

 

 

dreamweaver cs3, dreamweaver tutorials, learning dreamweaver, adobe dreamweaver, learn dreamweaver, dreamweaver classes, dreamweaver lessons, how to define a site in dreamweaver, web design, web design tutorials, css, stylesheets in dreamweaver, support, free dreamweaver tutorials, templates, how to adobe, adobe dreamweaver, web editing, web design, cs3, dream weaver, css, dreamweaver, extensions, Free, tutorials, Tutorials, learn dreamweaver, how to use dreamweaver photoshop with dreamweaver, slicing,
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.