Photoshop layout in Dreamweaver

Hello, I've made a web layout in Photoshop, which I then have
gotten into Dreamweaver. That works perfectly, but its when I want
to add text I got the problems. When I writes this text, alot of
slices/imgaes jumping to the right.
So then I was thinking of making the whole layout aligned as
bottom, so I can write my text on the layout images.
So my question is how to do that? And is that the best way of
solvng this problem?
Thanks!

Taking a Fireworks comp to a CSS-based layout in Dreamweaver
http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt1.html
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Kolihmu" <[email protected]> wrote in
message
news:ftl7hs$1e6$[email protected]..
> Hello, I've made a web layout in Photoshop, which I then
have gotten into
> Dreamweaver. That works perfectly, but its when I want
to add text I got
> the
> problems. When I writes this text, alot of slices/imgaes
jumping to the
> right.
> So then I was thinking of making the whole layout
aligned as bottom,
> so I
> can write my text on the layout images.
>
> So my question is how to do that? And is that the best
way of solvng this
> problem?
>
>
Thanks!
>

Similar Messages

Sliced and imported photoshop layout into dreamweaver

First, I am a newbie to all of this web design stuff and
coding and dreamweaver. I wanted to create my first website so here
I am. I went through 2 different tutorials (youtube and on
lynda.com) I created a layout in photoshop and I also sliced it. I
imported it into dreamweaver (CS3 by the way).....I somewhat
understand what I am doing. I did all the defining a site and I
clicked on the content box that I sliced and deleted it and
inserted a div / added the image that go there, then I made that
area editable. The layout I imported I saved it as a
template.Anyway, so basically I am clicking on each sliced area,
deleting it, and inserting a div there. No problem. Now, the sliced
areas that has about, home, contact, etc.....those I needed to make
as links/clickable images. So, before performing the delete then
inserting a div part.....I first clicked on the sliced area then at
the bottom of the screen, where it says link, I did a point to
file, basically linked it. Now, when I preview it in the browser,
it displays boxes around the sliced navigation menu, which it is
nit suppose to. see here is a screen shot...
http://i36.tinypic.com/2eowewm.jpg
What did I do wrong? Why is it showing up in a table when I
didn't create it in a table? How can I remove that purple looking
table border?
Also, when I go to each of the sliced navigation menu, then
delete it and insert a div..... the image there...it will not let
me turn it into a link.
How do I turn my sliced navigation menu images into links. I
know I am doing something wrong but just don't know what it is. Is
there a code I can use or am I suppose to modify or insert
something? and how do I remove the box from around it?
What is an easy way? Is there a tutorial out there?
I want my layout to look like what I mocked up in photoshop.
Is there a way I can create the same layout in dreamweaver? The
problem isn't the background, it's trying to get the pink area in
the center of the lalayout. I didn't know how to do that so thats
why I tried the way of creating it in photoshop.
Please help

> youtube and on lynda.com
Regardless of what these tutorials lead you to believe, it is
the WRONG
approach. Read this to get some perspective -
Taking a Fireworks comp to a CSS-based layout in Dreamweaver
http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt1.html
http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt2.html
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"missdrika" <[email protected]> wrote in
message
news:[email protected]...
> First, I am a newbie to all of this web design stuff and
coding and
> dreamweaver. I wanted to create my first website so here
I am. I went
> through 2
> different tutorials (youtube and on lynda.com) I created
a layout in
> photoshop
> and I also sliced it. I imported it into dreamweaver
(CS3 by the
> way).....I
> somewhat understand what I am doing. I did all the
defining a site and I
> clicked on the content box that I sliced and deleted it
and inserted a div
> /
> added the image that go there, then I made that area
editable. The layout
> I
> imported I saved it as a template.Anyway, so basically I
am clicking on
> each
> sliced area, deleting it, and inserting a div there. No
problem. Now, the
> sliced areas that has about, home, contact,
etc.....those I needed to make
> as
> links/clickable images. So, before performing the delete
then inserting a
> div
> part.....I first clicked on the sliced area then at the
bottom of the
> screen,
> where it says link, I did a point to file, basically
linked it. Now, when
> I
> preview it in the browser, it displays boxes around the
sliced navigation
> menu,
> which it is nit suppose to. see here is a screen shot...
>
>
http://i36.tinypic.com/2eowewm.jpg
>
> What did I do wrong? Why is it showing up in a table
when I didn't create
> it
> in a table? How can I remove that purple looking table
border?
>
> Also, when I go to each of the sliced navigation menu,
then delete it and
> insert a div..... the image there...it will not let me
turn it into a
> link.
>
> How do I turn my sliced navigation menu images into
links. I know I am
> doing
> something wrong but just don't know what it is. Is there
a code I can use
> or am
> I suppose to modify or insert something? and how do I
remove the box from
> around it?
>
> What is an easy way? Is there a tutorial out there?
>
> I want my layout to look like what I mocked up in
photoshop. Is there a
> way I
> can create the same layout in dreamweaver? The problem
isn't the
> background,
> it's trying to get the pink area in the center of the
lalayout. I didn't
> know
> how to do that so thats why I tried the way of creating
it in photoshop.
>
> Please help
>

Animated GIF in a Photoshop layout?

I'm pretty new to website building stuff.
I want to make an entire webpage layout in Photoshop CS4 and put it into Dreamweaver and turn it into a template for a website. I understand all of the slicing and importing stuff, but I want the image in the upper left corner to be an animated GIF. The image in the upper left corner would be the only animated part.
How can I put the animated GIF into the layout? Can I put it directly in using Photoshop and have it work properly after slicing? Do I have to put it over top of the layout some how?
Ideally, I would be able to create the layout as one thing including the Gif and slice it up from there.
I'd like to know how this can work beforehand because I'd rather not invest a lot of time into it, just to have it fail.
I'm sure some people would suggest Flash, but I have no idea how to use Flash, and I would prefer to use an animated GIF made in Photoshop.
I would really, really appreciate some advice on this. Thanks in advance.
P.S. What I'm trying to do will look a bit like this... http://www.russabbott.com/ I'm aware that this is Flash, but I'm hoping for a GIF.

You put an animated gif into the layout the same way you put a static gif into the layout.
As I never let Photoshop create my layouts/pages for me, I can't really advise on that, but if you send your layout to Dreamweaver with the part you want as an animated gif carefully sliced into an entity of its own with a static gif in that position, you can go back in and substitute your animated gif for it afterwards.
And for heaven's sake, don't be afraid of "failure"...you're just testing your skills and if it doesn't work exactly as you think it will, you will have learned something.
Beth

How to get PSD layout in Dreamweaver fixed to all resolutions and browsers

I designed a web layout in Photoshop. I sliced it and than used save for web option. I opened photoshop template in Dreamweaver but I can't figure out how to have it automatically adjust to different resolutions or monitors. When my resolution is set anywhere below 1152x864 the PSD template is too big when viewed in browser. I'm getting so frustrated. I've googled for hours and hours with no solution that worked.

To be blunt, what you want to do can't be done. There is no option, selection or setting that will turn a PS generated table based/sliced layout into a responsive design that changes with the browser.
Photoshop is great for making images, however the html it creates is horrible for anything other than a web page mock-up, basically something to show a client "this is how it will work, roughly". You should not use PS to create the html for your actual live website.
To create a responsive design requires an understanding of CSS in general and Media Queries specifically. Dreamweaver CS6 has some tools that can help, however they still require some knowledge of cascading stylesheets to make them work correctly across all browsers.
Here is a good reference website for CSS : http://www.w3schools.com
Here are some links discussing some of the tools you would use in Dreamweaver...
http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-queries.html
http://tv.adobe.com/watch/digital-design-cs6/creating-adaptive-designs-using-fluid-grid-la youts-in-dreamweaver-cs6/

Photoshop CS to Dreamweaver CS3

I am using Photoshop and Indesign CS on a PC. I would like to
get Dreamweaver (probably CS3 because I can get it for less money.)
Will the two programs be compatible? Can I import Photoshop cs
.psds (or Indesign .pdfs) into Dreamweaver cs3? Or will I have to
also upgrade Photoshop and InDesign?
Thanks for any advice.

> Can I import Photoshop cs .psds (or Indesign .pdfs) into
> Dreamweaver cs3?
No. But that is true for an version of PS/ID/DW, as Jerry has
said.
Taking a Fireworks comp to a CSS-based layout in Dreamweaver
http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt1.html
http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt2.html
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"jbrine1" <[email protected]> wrote in
message
news:gm2ni6$3eh$[email protected]..
>I am using Photoshop and Indesign CS on a PC. I would
like to get
>Dreamweaver
> (probably CS3 because I can get it for less money.) Will
the two programs
> be
> compatible? Can I import Photoshop cs .psds (or Indesign
.pdfs) into
> Dreamweaver cs3? Or will I have to also upgrade
Photoshop and InDesign?
> Thanks for any advice.
>

Sliced in photoshop, trouble in dreamweaver

I designed my layout in photoshop and sliced it up to make
buttons that would act as links. when i linked my email button the
page broke up. here is a picture.
[IMG]http://i582.photobucket.com/albums/ss261/turbodiaboli/Picture2.png[/IMG]
or here
http://i582.photobucket.com/albums/ss261/turbodiaboli/Picture2.png
i think this should be an easy fix, please help me out.
thanks!

Taking a Fireworks comp to a CSS-based layout in Dreamweaver
(Can apply the
same principles with Photoshop)
http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt1.html
http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt2.html
Michael

Importing Photoshop Layouts

Hey,
When I import a sliced photoshop document into dreamweaver it
works fine. But when I delete a Slice to make it an editable region
or to type text into the area or insert a flash object or anything,
it messes up the entire page. It shifts the slices to places they
shouldnt be. What can I do to fix this problem?

Taking a Fireworks comp to a CSS-based layout in Dreamweaver
http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt1.html
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"asocialpath" <[email protected]> wrote in
message
news:ft6b9c$afu$[email protected]..
> Hey,
>
> When I import a sliced photoshop document into
dreamweaver it works fine.
> But
> when I delete a Slice to make it an editable region or
to type text into
> the
> area or insert a flash object or anything, it messes up
the entire page.
> It
> shifts the slices to places they shouldnt be. What can I
do to fix this
> problem?
>

How do I embed an iframe into a Photoshop layout?

The Photoshop layout for a client's web page has been converted into HTML and imported into Dreamweaver. When I insert the iframe coding, the box either goes directly above or below the entire layout.

You don't. Photoshop is for images and design comps only. You can't use that code in real web sites. Why? Because graphics apps generate code that is rigid & inflexible. As soon as you try to edit anything in that layout, it falls apart and produces unsightly gaps. Use PS for images only. Use DW to create your web pages' HTML & CSS code.
Nancy O.

How to setup a default direction for new divs in fluid grid layout in dreamweaver?

Hi,
how to setup a default direction for new divs in fluid grid layout in dreamweaver? I am an RTL interface user, I need my new divs to be inserted from right to left not Left to Right! could it be in dreamweaver?
Thanks.

This may get me into strife, but my experience is that you are better off finding another platform for your RWD.
The framework that I tend to use is by Zub-Foundation http://foundation.zurb.com/.
A commercial product that I have come to appreciate can be found here http://www.projectseven.com/products/tools/composer/index.htm. Please do not mention me if you happen to choose this product.

How to setup a default size for new divs in fluid grid layout in dreamweaver?

Hi,
how to setup a default size for a new divs in fluid grid layout in dreamweaver? I don't need the default size for new divs as a 100% width, I need them 13.69% as a one coulmn width only (7 coulmns fluid grids layout for desktop size 1000w).
This problem I've faced when I intended to insert dozens of fluid grid divs in the layout.

Sorry, I don't believe that you have had a good look at the Foundation framework. I'll now hold your hand while we go through the basics.
Here is the specific page http://foundation.zurb.com/docs/components/grid.html
The default values are
Em-base : 16px
Row width: 62.5em (62.5em x 16px = 1000px)
Columns per row: 12
These and other default values can be changed. The fact of the matter is that if you stipulate a section width of 2 or 3 or 12 columns, the widths will automatically be calculated for you.
In your case, if you want 7 columns, all you need to do is change the number of columns per row and the rest is done for you.

How Does One Modify Photoshop Templates in Dreamweaver

I posted this over on the Photoshop forum, but no one has
replied. It is a hybrid sort of question.
I've been trying to modify the Horizontal Neutral template of
the Web Photo Gallery in Photoshop CS using Dreamweaver MX (v.6.1)
on my G5 running Tiger and am almost there. Aside from the overall
design (fonts and colors) I really like the interface of this
particular gallery with a horizontal slider to quickly scroll
through images, that when selected, appear in large form in the
center of the page. But I need to customize it to get it to match
the feel of my site.
My problem: I'm trying to point to a gif file that is part of
my website image library as my background. I want the Horizontal
Neutral Gallery to float in that image background. But, I can't
seem to get the background image to appear where it is supposed to.
I've gone into the various components of the template
(FrameSet, SubPage, etc.) and by duplicating the files and
modifying the code, I am able to get the background image to appear
within the tables that make up the navigation and image gallery
components. But, I've not been able to get the image to appear as
the background itself.
I'd even be happy to simply have the entire Horizontal
Neutral Gallery float in the middle of one of my own pages with the
image file as a background if it is possible, but can't seem to
even get it to do that. How does one access the code that controls
the background image in this template or the script that generates
these galleries?
Thanks in advance!

The reason the that the edit button ( - ) top righthand corner had 'disappeared', was that iCloud was enabled but that the Addressbook subsetting under iCloud was set to off in the phone settings.
Changing it to 'on' made the edit button reappear.
Thanks to the guys in Cambridge Apple Store!!
The reason the that the edit button ( - ) top righthand corner had 'disappeared', was that iCloud was enabled but that the Addressbook subsetting under iCloud was set to off in the phone settings.Changing it to 'on' made the edit button reappear.
Thanks to the guys in Cambridge Apple Store!!

After the latest Security Update 2012-001 (Mac OS X 10.6.8) my Adobe Photoshop CS 8, Dreamweaver 8, and InDesign CS programs crash when I try to save a file.

After the latest Security Update 2012-001 (Mac OS X 10.6.8) my Adobe Photoshop CS 8, Dreamweaver 8, and InDesign CS programs crash when I try to save a file. HELP!!!

Howdy,
Apparently some are reporting that this causes the older PowerPC (PPC) applications that are supported in 10.6 via 'Rosetta' to crash upon attempting to open/save/print using any dialog box, or fail in other similar ways such as simply not printing or quitting, or freezing/hanging/crashing of the application.
I have read of some companies that have indeed submitted proper bug reports to Apple, but that is not a guarantee of a bug-fix being issued.
You might wish to read:
http://www.macintouch.com/readerreports/snowleopard/index.html#d02feb2012
If you are unsure if you are still using PowerPC apps, if the application is currently running, look under the 'Activity Monitior' (in Applications -> Utilities), or alternatively you could check in the System Profiler, Applications. Check the column "Type".
Here is a fairly simple way you can restore you system and restore you applications functionality again, if you don't have a recent clone or good Time Machine backup that you can restore from. If you do, restore from your backup prior to having installed the Security Update 2012-001.
Time Machine restore: http://support.apple.com/kb/ht1427
If you are restoring a backup made by a Mac to the same Mac
With your backup drive connected, start up your Mac from the Lion recovery partition (Command-R at startup) or Mac OS X v10.6 installation disc. Then use the "Restore From Time Machine Backup" utility. Select the backup prior to your issues, and it will be restored back to the state it was in at that time.
If you can't easily restore from a backup, you can instead do the following:
- You first start by reinstalling your OS X 10.6.x, this will preserve all your user data, your applications, no worries there.
- Then install the Mac OS X 10.6.8 Update Combo v1.1 (links provided below)
- Make sure you're printers are showing up correctly in your system preferences, if not, re-add the printers
- Then finally, run the Apple Software Update (by pulling down the Apple Menu), and install any and all remaining updates, except do not then re-install the Security Update 2012-001. It is possible that you may have to reboot after installing some of the updates, and you may even need to run it a 2nd time to make sure that you've got all updates, except NOT the Security Update 2012-001.
Links for 10.6.8 Update Combo v1.1:
http://support.apple.com/kb/DL1399
or the link to directly download this 1.09GB combo updater:
http://support.apple.com/downloads/DL1399/en_US/MacOSXUpdCombo10.6.8.dmg
Cheers,
Daniel Feldman
=======================
MacMind
Certified Member of the
Apple Consultants Network
Apple Certified (ACHDS)
E-mail: [email protected]
Phone: 1-408-454-6649
URL : www.MacMind.com
=======================

Adobe Photoshop CS6 Extended 並びに Dreamweaver CS6 を再インストールした結果

今まで使っていたﾊﾟｿｺﾝのシステムがダメになり、OSを再インストールせざるを得なくなりました。
Windows 8.1に再インストールした後、消えてしまったAdobe　Photoshop CS6　Extended、並びに　Dreamweaver　CS6を再インストール。
それはうまくいきました。
更にそのあと、Adobeのアップデイトをかけたのですが、すべてエラーが出ました。
アップデイトをする必要はないのでしょうか？
アップデイトをしなくても、OSのWindows8.1に何か悪い影響をあたえることはありませんか？
アップデイトの必要があるのであれば、それを成功させる手順を教えていただけませんでしょうか？
ちなみに、私の使用しているｿﾌﾄは学生版で、CDを使って再導入。
マイクロソフトのサポート・センターの方にやっていただきました。
アップデイトがきちんとされないのが気にかかるようです。
古いまま使っていたために、Windows8.1に悪い影響を与えてシステムがダメになるということはありませんか？
お忙しいところ申し訳ございません。よろしくお願い致します。
岡田　光代
Mitsuyo_okada

早速にご回答いただきましてありがとうございました。
自動更新の通知は受け取ったことがないような気がします。
そこで、お薦めされている手動による更新を行ってみました。
ソフトウエア側からのAdobe Photoshop CS6 を起動し、ヘルプ＞アップデート。
Adobe Application Manager の Adobe Photoshop CS6 以下に表示されるすべてのアップデートを２～３回ほど試みましたがエラーメッセージがでます。エラーコードは下記の通りです：
Adobe　Photoshop13.0.1.3　U44MIU5
Dreamweaver CS6 (12.0.3) U44MIU5
Adobe4 CSXS Infrastructure CS6 U44MIU5
Dynamic Link Media Server CS6.1.0.1 U44MIU15
Adobe Application Manager U44MIP210
Photoshop Camera Raw 8.7 (CS6) U44MIU5
上記の更新がどうしてもだめなようでしたら、ダウンロードによる更新を試みようと思います。
その場合、Dreamweaver CS6のdownloadは最新版の
Ver. 12.0.3 - HiDPI 準拠とクリティカルな不具合の修正（2012/12/12）
のみをすればよろしいのでしょうか？
それとも
Ver. 12.0.1 クリティカルな問題の修正（2012/7/30）
Ver. 12.0.2 クリティカルな問題の修正（2012/9/27）
と順番にdownloadしていった後、2012/12/12の修正版downloadをすべきなのでしょうか？
お手数おかけいたします。
Mitsuyo_okada

Smart Objects between Photoshop, Illustrator and Dreamweaver while managing the version in Vesion Cu

Ok, so the title of this post sounds confusing. First off, I created a graphic in Illustrator CS3. It is to be used on a web page created in Dreamweaver CS3. I want to be able to streamline the editing process by using the Smart Object linking feature between Dreamweaver and Photoshop CS3.
Obviously, the problem is, I cannot link the Photoshop source to Dreamweaver because the source is not a Photoshop file, it is in Illustrator. The obvious solution to that is to export the Illustrator file as a Photoshop file. The problem with that is, I want to maintain the source in Illustrator and make edits in Illustrator.
So, my solution was to place the Illustrator file in Photoshop and make the Illustrator file a Smart Object in Photoshop. Then link that Photoshop file to the Dreamweaver page. So, basically, Photoshop is just the link between Dreamweaver and Illustrator. It works well! I click the little edit button in Dreamweaver abd it calls up the file in Photoshop. Then I double-click on the Smart Object layer in Photoshop and the source comes up in Illuistrator.
Now, here is the problem. To add to the confusion, I maintain versioning in Version Cue. So whenever I change the Illustrator file, I check it in to Version Cue. The Illustrator file I linked to in Photoshop is the local file on my computer. This file is syncronized with the version of the file that gets uploaded to Version Cue. This may sound complicated, but to see how I did it is pretty straight forward.
My assumption was, when I double clicked on the Smart Object layer in Photoshop, I would get the local copy of the Illustrator file to edit. But, that wasn't the case. Problem is, I got a temp file of the Illustrator graphic and NOT the original source file I linked to in Photoshop.
I can still edit the temp file and have those changes automatically made in Photoshop and then update the image in Dreamweaver. BUT, when I got to check in the new edits of the Illustrator file to Version Cue, it wants to create a new file and not rev-up to the new version of the original file. That's because the file I'm checking in is NOT the original file, it is a temp file.
Does anyone else use a workflow like this? If so, how do you do it?

Ok, so far I have come up with this solution. Usually after editing the Illustrator file I would check it in. But, as mentioned, I can't just do that because the file I'm editing is the temp file and not the original file syncronized with Version Cue.
So, instead of using Check-In when I'm done, I can use Save As... I can then overwrite my local file that is syncronized with Version Cue. That will save the new file as the correct name and automatically check it into Version Cue as the next version of the correct file.

Using fluid grid layout in Dreamweaver CC - how do I create a dropdown menu within my main navigation?

I am new to using the responsive fluid grid layouts in Dreamweaver CC - and I am unable to find any information on creating a dropdown menu within my main navigation.
Any ideas?

You'll need to find a menu system that is responsive and mobile friendly for touch screen devices.
If you have a budget to work with, Project Seven's Pop-Menu Magic3 is a commercial extension for DW that works great out of the box.
http://projectseven.com/products/menusystems/pmm3/index.htm
If you don't have a budget, you'll need to create a desktop menu and add a jQuery plugin for mobile devices.
Basic CSS Drop Menu
http://jsfiddle.net/mD4zW/28/
jQuery MeanMenu for mobile/tablet devices
MeanThemes | MeanMenu
This is a working example inside a FluidGrid Layout (resize viewport)
Alt-Web :: Fluid Grid Test
Nancy O.

Photoshop layout in Dreamweaver

Similar Messages

Maybe you are looking for