Problem in desktop layout in "Building fluid grid layouts in Adobe Dreamweaver CS6"
In this tutorial you taught to design a responsive site ....but the Terrestrial Nursery completed page doesnot work well in Internet Explorer in 14 inches Square Monitor........that you have placed the three columns in the same alignment...but while viewing those three columns comes down one by one..........but works well in wide screen......is there any problem in the size of the monitor..........
Here is the link to the tutorial......
http://www.adobe.com/inspire/2012/08/fluid-grid-layouts-dreamweaver-cs6.html
It doesnot work well in Internet Explorer 8....What to do for the responsive site to work well in all the older versions of IE....
Similar Messages
-
Problems Creating a "Fluid Grid Layout" with Adobe Dreamweaver CS6
I am trying to create a fluid grid layout in Dreamweaver CS6 (which I know how to do), the problem is Dreamweaver started automatically saving the boilerplate.css & respond.min.js in the Dreamweaver program folder (C:\Program Files (x86)\Adobe\Adobe Dreamweaver CS6\configuration\BuiltIn\Fluid Grid Layout\) it does not ask me to save the boilerplate.css or the respond.min.js docs as it normally does. Dreamweaver CS6 also creates a css document instead of the html page it should create. I called Adobe support, however they offer no support for "Fluid Grid Layouts", and I cannot seem to find a solution to this problem anywhere on the internet. If anyone knows how to fix this so it will work properly again it will be greatly appreciated!
Hi toger02,
If you have restored the preferences correctly and the issue is still unresolved I would recommend checking the workflow again.
Define a new site in Dreamweaver.
File < New Fluid Grid Layout < Create. Doctype set to HTML5 and no CSS file attached.
A dialog box will pop up, prompting you to save the CSS for this design. This is your custom style sheet. Give a "filename.css" < Click Save.
Once you've done that, the layout for the mobile device appears in the design view as an "untitled" new document with related files listed as "boilerplate.css","respond.min.js" and "filename.css" i.e your custom CSS file.
File < Save < "filename.html". < Save. On clicking Save it will show a popup with the message: Copy Dependent Files, which are boilerplate.css and respond.min.js.
I hope this helps else let us know if issue is on all the new sites and fluid grid pages that you create?
Thanks,
Bhawna -
Adobe Dreamweaver CS6 cannot be opened because of a problem.
Dreamweaver is crashing for me on launch -- I tried uninstalling, re-downloading and relaunching, but still get the same error. I'm running Mac OSX 10.8.2, the Creative Cloud version of CS6. Any suggestions? The problem report info is below.
Process: Dreamweaver [355]
Path: /Applications/Adobe Dreamweaver CS6/Adobe Dreamweaver CS6.app/Contents/MacOS/Dreamweaver
Identifier: com.adobe.dreamweaver-12.0
Version: 12.0.0.5808 (12.0.0)
Code Type: X86 (Native)
Parent Process: launchd [163]
User ID: 501
Date/Time: 2013-01-31 22:11:52.732 -0800
OS Version: Mac OS X 10.8.2 (12C3012)
Report Version: 10
Interval Since Last Report: 3872 sec
Crashes Since Last Report: 15
Per-App Crashes Since Last Report: 7
Anonymous UUID: A85B8A42-F644-47F7-3CAB-61546EC71C80
Crashed Thread: 0
Exception Type: EXC_BREAKPOINT (SIGTRAP)
Exception Codes: 0x0000000000000002, 0x0000000000000000
Application Specific Information:
dyld: launch, loading dependent libraries
Dyld Error Message:
Library not loaded: /System/Library/Frameworks/JavaVM.framework/Versions/A/JavaVM
Referenced from: /Applications/Adobe Dreamweaver CS6/Adobe Dreamweaver CS6.app/Contents/MacOS/Dreamweaver
Reason: image not found
Binary Images:
0x1000 - 0x197dfe3 +com.adobe.dreamweaver-12.0 (12.0.0.5808 - 12.0.0) <D191C493-AA58-53F9-FF8B-C8F96688A8CB> /Applications/Adobe Dreamweaver CS6/Adobe Dreamweaver CS6.app/Contents/MacOS/Dreamweaver
0x281c000 - 0x282aff3 +com.adobe.boost_threads.framework (5.0.0 - 5.0.0.0) <C5ECA213-7C14-0DD2-6334-1EA67EDCDCAE> /Applications/Adobe Dreamweaver CS6/Adobe Dreamweaver CS6.app/Contents/Frameworks/boost_threads.framework/Versions/A/boost_threads
0x284f000 - 0x2859ffb +com.adobe.boost_signals.framework (5.0.0 - 5.0.0.0) <074C63C5-7E19-8F31-D72C-127042CC7468> /Applications/Adobe Dreamweaver CS6/Adobe Dreamweaver CS6.app/Contents/Frameworks/boost_signals.framework/Versions/A/boost_signals
0x2872000 - 0x2878ff7 +com.adobe.boost_date_time.framework (5.0.0 - 5.0.0.0) <5C589D24-FD4E-6A1B-D115-052DFC629D3A> /Applications/Adobe Dreamweaver CS6/Adobe Dreamweaver CS6.app/Contents/Frameworks/boost_date_time.framework/Versions/A/boost_date_time
0x2898000 - 0x289bfff +com.adobe.boost_system.framework (5.0.0 - 5.0.0.0) <0CFC745C-CB43-4C4B-85A2-BBE60204A09D> /Applications/Adobe Dreamweaver CS6/Adobe Dreamweaver CS6.app/Contents/Frameworks/boost_system.framework/Versions/A/boost_system
0x28a3000 - 0x2bd3feb +com.adobe.dvaadameve.framework (5.0.0 - 5.0.0.0) <E1A0CB86-20DE-395B-519A-0B02A7783EF3> /Applications/Adobe Dreamweaver CS6/Adobe Dreamweaver CS6.app/Contents/Frameworks/dvaadameve.framework/Versions/A/dvaadameve
0x337b000 - 0x338fff3 +com.adobe.boost_filesystem.framework (5.0.0 - 5.0.0.0) <1DD7FD3D-AA32-F2B4-78E4-7372977856F3> /Applications/Adobe Dreamweaver CS6/Adobe Dreamweaver CS6.app/Contents/Frameworks/boost_filesystem.framework/Versions/A/boost_filesystem
0x33ba000 - 0x353aff3 +com.adobe.dvacore.framework (5.0.0 - 5.0.0.0) <67A1A918-F107-AA77-BCA9-C919998E9C9C> /Applications/Adobe Dreamweaver CS6/Adobe Dreamweaver CS6.app/Contents/Frameworks/dvacore.framework/Versions/A/dvacore
0x36d5000 - 0x3af5fff +com.adobe.dvaui.framework (5.0.0 - 5.0.0.0) <2B4268D5-110F-E44E-25DD-D501ED4EE7CD> /Applications/Adobe Dreamweaver CS6/Adobe Dreamweaver CS6.app/Contents/Frameworks/dvaui.framework/Versions/A/dvaui
0x40c0000 - 0x4165fff +com.adobe.exo.framework (5.0.0 - 5.0.0.0) <78ED2229-FC60-9DCB-34C0-B3BC04E74C73> /Applications/Adobe Dreamweaver CS6/Adobe Dreamweaver CS6.app/Contents/Frameworks/exo.framework/Versions/A/exo
0x42a2000 - 0x4350fff +com.adobe.dvaworkspace.framework (5.0.0 - 5.0.0.0) <B3DDB3EE-930F-A3EB-1AA5-B8463CC5AD7B> /Applications/Adobe Dreamweaver CS6/Adobe Dreamweaver CS6.app/Contents/Frameworks/dvaworkspace.framework/Versions/A/dvaworkspace
0x4477000 - 0x4651feb +com.adobe.owl (AdobeOwl version 4.0.93 - 4.0.93) <9E6B8841-D4FA-A2B7-2B0A-1D2DE2219B00> /Applications/Adobe Dreamweaver CS6/Adobe Dreamweaver CS6.app/Contents/Frameworks/AdobeOwl.framework/Versions/A/AdobeOwl
0x467e000 - 0x4685ffb +com.adobe.ape.shim (3.3.8.19346 - 3.3.8.19346) <B711CAA7-29D6-D5CF-CE1B-A611896C8D87> /Applications/Adobe Dreamweaver CS6/Adobe Dreamweaver CS6.app/Contents/Frameworks/adbeape.framework/Versions/A/adbeape
0x468d000 - 0x46a6fe7 +libChar16.dylib (1) <A6CEB90D-0445-9F09-C60D-889D0E4F5E56> /Applications/Adobe Dreamweaver CS6/Adobe Dreamweaver CS6.app/Contents/MacOS/libChar16.dylib
0x46c3000 - 0x46e5ff7 +libCoreTypes.dylib (1) <A1FAF8EC-6459-4654-4149-0FF9A557D70D> /Applications/Adobe Dreamweaver CS6/Adobe Dreamweaver CS6.app/Contents/MacOS/libCoreTypes.dylib
0x46fe000 - 0x4746ff7 +libCurl.dylib (1) <40F485B4-A6EC-75CD-E370-9FDE82271700> /Applications/Adobe Dreamweaver CS6/Adobe Dreamweaver CS6.app/Contents/MacOS/libCurl.dylib
0x4762000 - 0x476fff7 +libZ.dylib (1) <F129F5D3-8764-9B14-1E22-0DCE54B70E6C> /Applications/Adobe Dreamweaver CS6/Adobe Dreamweaver CS6.app/Contents/MacOS/libZ.dylib
0x4777000 - 0x4823ff7 +libCrypto.dylib (1) <F4D68DC4-29A8-7E11-A3F2-231FF8462B28> /Applications/Adobe Dreamweaver CS6/Adobe Dreamweaver CS6.app/Contents/MacOS/libCrypto.dylib
0x48c6000 - 0x48e9ff7 +libSSL.dylib (1) <408169A9-1CD1-8841-9A23-AC097F9411B8> /Applications/Adobe Dreamweaver CS6/Adobe Dreamweaver CS6.app/Contents/MacOS/libSSL.dylib
0x4901000 - 0x4902ff7 +libCocoa.dylib (1) <DCDB2597-90DA-9DE8-D61C-DA9DEA9A7004> /Applications/Adobe Dreamweaver CS6/Adobe Dreamweaver CS6.app/Contents/MacOS/libCocoa.dylib
0x4908000 - 0x4b53fff com.apple.carbonframeworktemplate (1.0 - 1.0) <522C3C40-8CEA-1071-0BA1-5F5985F08CB1> /Applications/Adobe Dreamweaver CS6/Adobe Dreamweaver CS6.app/Contents/Frameworks/Xerces.framework/Versions/A/Xerces
0x4e1e000 - 0x4e29ff3 com.apple.carbonframeworktemplate (1.0 - 1.0) <88C86490-5C27-6018-4DFD-46568255081A> /Applications/Adobe Dreamweaver CS6/Adobe Dreamweaver CS6.app/Contents/Frameworks/NetIO.framework/Versions/A/NetIO
0x4e39000 - 0x4e3cffb +com.adobe.AdobeCrashReporter (6.0 - 6.0.20120201) <6CE1936E-6AC7-6900-769B-876CBB68B5BC> /Applications/Adobe Dreamweaver CS6/Adobe Dreamweaver CS6.app/Contents/Frameworks/AdobeCrashReporter.framework/Versions/A/AdobeCrashReporter
0x4e44000 - 0x4fc0ff3 +com.adobe.ACE (AdobeACE 2.19.18.19243 - 2.19.18.19243) <464E11C2-11BF-EED9-445F-B110D65E1944> /Applications/Adobe Dreamweaver CS6/Adobe Dreamweaver CS6.app/Contents/Frameworks/AdobeACE.framework/Versions/A/AdobeACE
0x4fcf000 - 0x5596fef +com.adobe.AGM (AdobeAGM 4.26.17.19243 - 4.26.17.19243) <895F58FE-CF43-B09B-336E-C7725860E6AF> /Applications/Adobe Dreamweaver CS6/Adobe Dreamweaver CS6.app/Contents/Frameworks/AdobeAGM.framework/Versions/A/AdobeAGM
0x5609000 - 0x5624fff +com.adobe.BIB (AdobeBIB 1.2.02.19243 - 1.2.02.19243) <147A128F-ACC3-A4AB-C003-20CEAD8AE1CC> /Applications/Adobe Dreamweaver CS6/Adobe Dreamweaver CS6.app/Contents/Frameworks/AdobeBIB.framework/Versions/A/AdobeBIB
0x562a000 - 0x5650fff +com.adobe.BIBUtils (AdobeBIBUtils 1.1.01 - 1.1.01) <55E00096-6399-E2FD-021E-A15B8CF15ABB> /Applications/Adobe Dreamweaver CS6/Adobe Dreamweaver CS6.app/Contents/Frameworks/AdobeBIBUtils.framework/Versions/A/AdobeBIBUtils
0x5656000 - 0x597dffb +com.adobe.CoolType (AdobeCoolType 5.10.31.19243 - 5.10.31.19243) <4DB6A24B-C380-EF7A-B9A1-BF373C6F0AAD> /Applications/Adobe Dreamweaver CS6/Adobe Dreamweaver CS6.app/Contents/Frameworks/AdobeCoolType.framework/Versions/A/AdobeCoolType
0x59b5000 - 0x6a61ff3 +com.adobe.psl (AdobePSL 13.0.0.19655 - 13.0.0.19655) <47A9AAEC-43CD-17C9-6E58-6312315FC15D> /Applications/Adobe Dreamweaver CS6/Adobe Dreamweaver CS6.app/Contents/Frameworks/AdobePSL.framework/Versions/A/AdobePSL
0x6bda000 - 0x6c02feb +com.adobe.AXE8SharedExpat (AdobeAXE8SharedExpat 3.7.101.18636 - 3.7.101.18636) <C38ACBCE-04AA-DF40-FF79-29377F25CDAF> /Applications/Adobe Dreamweaver CS6/Adobe Dreamweaver CS6.app/Contents/Frameworks/AdobeAXE8SharedExpat.framework/Versions/A/AdobeAXE8SharedExpa t
0x6c21000 - 0x6c7dfef +com.adobe.AdobeXMPCore (Adobe XMP Core 5.3 -c 11 - 66.145661) <123A0829-A85B-6E67-0E48-4F37B08E4C03> /Applications/Adobe Dreamweaver CS6/Adobe Dreamweaver CS6.app/Contents/Frameworks/AdobeXMP.framework/Versions/A/AdobeXMP
0x6c86000 - 0x6cf3ffb +com.adobe.headlights.LogSessionFramework (2.1.2.1652) <82DA9279-45D2-AD40-C86C-F5A94B9DAAFF> /Applications/Adobe Dreamweaver CS6/Adobe Dreamweaver CS6.app/Contents/Frameworks/LogSession.framework/Versions/A/LogSession
0x6d42000 - 0x6e24ff3 +com.adobe.amtlib (amtlib 6.0.0.75 - 6.0.0.75) <808CABA8-E8E6-AC45-4905-A6AA59E8C41C> /Applications/Adobe Dreamweaver CS6/Adobe Dreamweaver CS6.app/Contents/Frameworks/amtlib.framework/Versions/A/amtlib
0x6e33000 - 0x6f1bfe3 +com.adobe.AXEDOMCore (AdobeAXEDOMCore 3.7.101.18636 - 3.7.101.18636) <2540764B-C2F2-61D7-EFBA-6663171FD19A> /Applications/Adobe Dreamweaver CS6/Adobe Dreamweaver CS6.app/Contents/Frameworks/AdobeAXEDOMCore.framework/Versions/A/AdobeAXEDOMCore
0x40000000 - 0x400c4fe3 +com.adobe.JP2K (2.0.0 - 2.0.0.18562) <FFA540EA-6CEB-F4D1-E0EF-A844A536D499> /Applications/Adobe Dreamweaver CS6/Adobe Dreamweaver CS6.app/Contents/Frameworks/AdobeJP2K.framework/Versions/A/AdobeJP2K
0x8fe5f000 - 0x8fe91e57 dyld (210.2.3) <23516BE4-29BE-350C-91C9-F36E7999F0F1> /usr/lib/dyld
0x92530000 - 0x92619ff7 libxml2.2.dylib (22.3) <015A4FA6-5BB9-3F95-AFB8-B9281E22685B> /usr/lib/libxml2.2.dylib
0x9261a000 - 0x92633fff com.apple.Kerberos (2.0 - 1) <9BDE8F4D-DBC3-34D1-852C-898D3655A611> /System/Library/Frameworks/Kerberos.framework/Versions/A/Kerberos
0x926c7000 - 0x926c7fff com.apple.Carbon (154 - 155) <604ADD9D-5835-3294-842E-3A4AEBCCB548> /System/Library/Frameworks/Carbon.framework/Versions/A/Carbon
0x937e9000 - 0x93b06ff3 com.apple.Foundation (6.8 - 945.11) <03B242AC-519C-3683-AA52-E73536B3D55F> /System/Library/Frameworks/Foundation.framework/Versions/C/Foundation
0x94f2e000 - 0x94f2efff com.apple.CoreServices (57 - 57) <956C6C6D-A5DD-314F-9C57-4A61D41F30CE> /System/Library/Frameworks/CoreServices.framework/Versions/A/CoreServices
0x95db1000 - 0x95ea2ffc libiconv.2.dylib (34) <B096A9B7-83A6-31B3-8D2F-87D91910BF4C> /usr/lib/libiconv.2.dylib
0x978d5000 - 0x978d5fff com.apple.ApplicationServices (45 - 45) <677C4ACC-9D12-366F-8A87-B898AC806DD9> /System/Library/Frameworks/ApplicationServices.framework/Versions/A/ApplicationServices
0x97b71000 - 0x97bd9ff7 com.apple.framework.IOKit (2.0.1 - 755.20.4) <12C97562-CBBD-3255-A998-28A341128FC8> /System/Library/Frameworks/IOKit.framework/Versions/A/IOKit
0xb0000000 - 0xb001afe3 +com.adobe.ahclientframework (1.7.0.56 - 1.7.0.56) <928D8FAD-DEE7-F1D0-FE17-FA7F4E4C1E48> /Applications/Adobe Dreamweaver CS6/Adobe Dreamweaver CS6.app/Contents/Frameworks/ahclient.framework/Versions/A/ahclient
Model: MacBookPro9,1, BootROM MBP91.00D3.B08, 4 processors, Intel Core i7, 2.7 GHz, 8 GB, SMC 2.1f173
Graphics: Intel HD Graphics 4000, Intel HD Graphics 4000, Built-In, 384 MB
Graphics: NVIDIA GeForce GT 650M, NVIDIA GeForce GT 650M, PCIe, 1024 MB
Memory Module: BANK 0/DIMM0, 4 GB, DDR3, 1600 MHz, 0x80AD, 0x484D54333531533643465238432D50422020
Memory Module: BANK 1/DIMM0, 4 GB, DDR3, 1600 MHz, 0x80AD, 0x484D54333531533643465238432D50422020
AirPort: spairport_wireless_card_type_airport_extreme (0x14E4, 0xF5), Broadcom BCM43xx 1.0 (5.106.98.100.14)
Bluetooth: Version 4.1.2f9 11046, 2 service, 18 devices, 1 incoming serial ports
Network Service: Wi-Fi, AirPort, en1
Serial ATA Device: APPLE HDD HTS541010A9E682, 1 TB
Serial ATA Device: HL-DT-ST DVDRW GS31N
USB Device: hub_device, 0x8087 (Intel Corporation), 0x0024, 0x1a100000 / 2
USB Device: FaceTime HD Camera (Built-in), apple_vendor_id, 0x8509, 0x1a110000 / 3
USB Device: hub_device, 0x8087 (Intel Corporation), 0x0024, 0x1d100000 / 2
USB Device: hub_device, 0x0424 (SMSC), 0x2513, 0x1d180000 / 3
USB Device: Apple Internal Keyboard / Trackpad, apple_vendor_id, 0x0252, 0x1d183000 / 6
USB Device: BRCM20702 Hub, 0x0a5c (Broadcom Corp.), 0x4500, 0x1d181000 / 5
USB Device: Bluetooth USB Host Controller, apple_vendor_id, 0x821d, 0x1d181300 / 8
USB Device: IR Receiver, apple_vendor_id, 0x8242, 0x1d182000 / 4Please try installing java before launching Dreamweaver
-
Building fluid grid site - what's the best way to add a page?
I've got a one page fluid grid site going and I think I've learned enough to start adding pages. Do I use my primary css file as the file to be associated with subsequent pages? I tried to use a new css in a second page, and perhaps my mistake was that I used some classes and id's from the home page on the second page (which is to be expected as it inherits some of the design). For whatever reason, that led to the second page 'breaking' in a couple of places and I couldn't find the problem.
So I deleted it!
I'd like to begin again and start adding pages. In the creation stage, right after page definition, where it asks about css and copying over the two files (boilerplate and the js script), should I just use my existing css? When I copied over the two files, I was able to delete them and repoint the new page to the moved files (in a scripts folder and css folder).
OR
Should I create the page along with new css and just NOT use the same-named classes and id's?
Last question, when bringing up code navigator on a design page, are the css pages listed in alphabetical order or by cascade? The new page seemed to have them in alpha order rather than cascade order. They were listed in alpha, despite the fact that they were defined in the page in order of cascade.
Thanks all.Hi Toskey,
My feelings about the Fluid Grid feature in Dreamweaver is far more
negative than David's. First, let's look at the response.js script that
simulates responsive behavior in old browsers. It can be destabilizing
in IE8 and under (causing lockups) and is, in my opinion, a waste of
time. Each month that goes by, IE8 and under become less and less
relevant and giving them a traditional fixed-width or mini-width look is
all one needs to do.
The grid approach itself, at the core of the system, is flawed and, at
best, a transitional approach as CSS has added a columns module. In
about 2 years time, the concept of grids will be native to most browsers
and how you deal with older browsers will become a matter of progressive
enhancement. That is, allow older browsers to display a conventional
type of layout while newer browsers use the newer features.
Responsive design depends on designers being able to react and change as
the CSS brainiacs of the world have regularly scheduled eureka moments
about better ways to deploy media queries. So Adobe would need to be
ready and willing (and able) to issue updates to the Fluid Grid system
on a need-to-update basis. This will never happen.
As for flexibility and practicality, and real-world application, get a
Tablet, Smartphone, and desktop computer cranked up. Now load Adobe's
home page and tell me how it reacts/responds:
1. Smartphone portrait mode
2. Smartphone landscape mode
3. Tablet portrait mode
4. Tablet landscape mode
5. In a desktop browser as you make window narrow and wide
Now load up the PVII home page (www.projectseven.com) and perform the
same tests in the same devices. How much importance you place on certain
things will dictate to you what kind of approach to take.
We think our approach is currently the most bulletproof in the world and
if something comes to our attention 2 weeks from now that indicates
there is an even better way, or if another device takes the world by
storm and needs a new query, we will issue an update ASAP.
Good luck and happy hunting.
Al Sparber - PVII -
Having problems getting my fireworks made button to work in Adobe Dreamweaver CS6
Hello, I am currently using a trial version of Adobe CS6 Fireworks and Dreamweaver and I am wondering why my button that I have created with an up, an over and a down state is not working in dreamweaver properly...when I preview my button in Fireworks all is in order and it works fine but when I click copy Fireworks Html of the button, when I paste it into dreamweaver and preview it, dreamweaver doesen't seem to show the over or down states...any help would be much appreciated.
When you created animated buttons in Fireworks and exported/imported them into Dreamweaver CS3, CS5 all worked well.
This is because CS3 and CS5 automatically added the required preload JavaScript to the hed tag of the document.
In CS6, this is not happening!
That is the major reason that your buttons do not work if you are used to doing it the way that we have for years.
As a test, I added the Head tag code that the old versions of CS generated in Dreamweaver and immediately my buttons worked.
It must be a program error in CS6 and I wonder if Adobe will be producing a fix for this?
The Head code is below:
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_nbGroup(event, grpName) { //v6.0
var i,img,nbArr,args=MM_nbGroup.arguments;
if (event == "init" && args.length > 2) {
if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
nbArr[nbArr.length] = img;
for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
nbArr[nbArr.length] = img;
} else if (event == "over") {
document.MM_nbOver = nbArr = new Array();
for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
nbArr[nbArr.length] = img;
} else if (event == "out" ) {
for (i=0; i < document.MM_nbOver.length; i++) {
img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == "down") {
nbArr = document[grpName];
if (nbArr)
for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
document[grpName] = nbArr = new Array();
for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
nbArr[nbArr.length] = img;
//-->
</script> -
Fluid grid layouts do not work in IE 7/8
Hello,
I just created a simple fluid grid layout with Dreamweaver CS6, but there is a problem in Internet Explorer.
IE 9 shows it right.
When I start IE 9, I press F12 to get to the developer panel. When I switch to IE 7 / 8, the layout crashes. There are no background colors and text styles anymore.
Later I will upload some screenshots.
All other browser work fine.
Where is the problem here?When I resize layout in Firefox, the background colors disappear in mobile portrait, mobile landscape, and tablet portrait.
Reason: You added styles to your FluidGrid Desktop but not mobile & tablet.
In order for FluidGridLayouts to work, you must build your mobile styles first because everything else is based on that.
I find it's much safer to use a separate style sheet for content. When you start adding stuff to FluidGridLayout.css, things can get screwed up in a hurry.
CS6 Fluid Grid Layouts (6 min video)
http://tv.adobe.com/watch/digital-design-cs6/creating-adaptive-designs-using-fluid-grid-la youts-in-dreamweaver-cs6/
CS6 Fluid Grid layouts (17 min video)
http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layouts/
Step-by-Step tutorial -- Building Fluid Grid Layouts in DW CS6
http://www.adobe.com/inspire/2012/08/fluid-grid-layouts-dreamweaver-cs6.html
Nancy O. -
Fluid grid for Wordpress: insert PHP code into DW or DW code into Wordpress?
This may be a stupid question but it's a dilemma for me. Here's the problem. I want to create a mobile first, fluid grid Wordpress website in Dreamweaver CS6 based on an existing Wordpress theme. I can see two ways of doing that:
1) Create a fluid grid layout in DW, then insert the Wordpress PHP code into the right places in DW
Pro: the fluid grid layout is set up by DW and therefore can be easily edited with DW (I imagine)
Con: It is beyond my coding skills to make a fully functional WP template
2) Take an existing responsive Wordpress template with media queries and edit that in Dreamweaver
Pro: I start with a fully functional WP template and only have to make changes (mostly in CSS) to customise it
Con: When I start with an existing template (like Skeleton) I run into trouble using DW
For example: I click a navigation button to get at the CSS but it's not clear to me from DW's interface in which media query I have to make changes. I did a tutorial on creating a fluid grid layout with DW so I can do that. But DW doesn't work the same way with an existing WP template like Skeleton. I searched the web but all I can find is help on creating a fluid layout with DW, not editing an existing one.
By the way, I am experienced with HTML/CSS but not PHP and I have a local Wordpress server running on my Mac so I can work in Dreamweaver's Live View.
The problem may be that I am only just starting with responsive web design and need some more experience with media queries, css rules and DW CS6. Could anyone comment on this problem or point me towards more information on the subject?
TIA!You can certainly use DW to customize a 3rd party WP Theme. However, you must be throughly familliar with how WordPress Themes work and have a good working knowledge of HTML, CSS and PHP code. Design View will not be much help to you.
WP Themes are a sum of their various parts: header.php, footer,php, sidebar.php, page.php, index.php, archive.php, etc... The web server parses code from the various parts and creates whole pages on the fly. Once WP is deployed on your server, you cannot use DW to edit content. You must use the WP Admin Panel (CMS) to manage content, Themes, plugins and backup data.
For simple static sites, the FluidGrid Layout feature in DW is a nice starting point. But these layouts have definite limitations which, IMO would not be a good fit with WordPress.
Nancy O. -
Using fluid grid cs6 but changing content between screens?
hey guys ive just started looking into fluid grid with dreamweaver cs6 and its good but there doesnt seem to be alot of video on the net teaching alot about it.
The one thing I cant find info on is how to remove content from the mobile page because its too much but still have it showing in the and desktop view?
all the tutroials i find show how to get started and how css works between the 3 displays but alot of finished examples show content relocating on the page, changing or disappearing completely from one type of screen to the next such as in this Greg Rewis video http://tv.adobe.com/watch/digital-design-cs6/creating-adaptive-designs-using-fluid-grid-la youts-in-dreamweaver-cs6/
How can I control which elemnts show on one screen and not the other?
thanks
DaveBelow is a working example of what you want.
http://alt-web.com/FluidGrid/Fluid1.html
In my custom Content.css file, I have some divs set to display:none wrapped inside a mobile media query like this.
/* Special Rules for Mobiles */
@media only screen and (max-width: 481px) {
/**hide some divs**/
#LayoutDiv5, #LayoutDiv6, #LayoutDiv7 { display: none }
Nancy O. -
Trouble styling across device views ( Mobile, Tablet, Desktop) in fluid grid layout.
Hi pros,
I’m having a problem in Dreamweaver CC laying out and styling my website using the fluid grid layout. For the record, I have not touched the boilerplate.css or JS file and have been using my own.css file to place all my .css in. I’ve managed to get some of the content in little by little but it looks nothing like my mock up. Since I’m new to Dreamweaver and coding in general, I’ve been starting my design in the desktop view. However, when I switch to tablet or mobile view and move something around, it completely moves it when I got back to the desktop view. Also, when I put in on live view or view it in a browser, I get two different looks all together. I try to make sure that my .css file is selected and under media I tried selecting the predefined media sizes and then under selector, there is usually 3 of each tag (one for each view I’m guessing), I select the tag associated with that view and change the properties from there. That hasn’t worked because when I go to live view or view in the browser, it looks completely off or it will screw with the other views. L
So here are my specific questions:
How do I style my elements specifically in each view WITHOUT messing up the desktop, or the other views? Simply clicking on a view using the icons on the bottom and styling has not worked.
Why is my live view so different from my browser view? I’m using the presets given in Dreamweaver for the desktop. When I view, say the logo and navigation in live view, everything is aligned but when I switch to my browser (chrome) it’s all crooked.
Should I be using % throughout all my properties (width, height, margin, padding, positioning)? Currently I have most of my div sized using % but some margins and other properties using px. Will that affect anything?
Can someone recommend a good tutorial? Everything that I seen either covers the basics that I already know,( adding/moving divs, switch views) but when it comes to the .css styling, they are adding a style sheet from somewhere without showing you how to do it from scratch.
Should I design the page in a non- fixed layout and then import the .css style sheet from there? If so, how do I do that without messing with the boilerplate.css file.
I’m taking a course in graphic and web design and we went over this very quickly and was given a lot of the material, however our final project (a full website with 5 pages) must be responsive and built in Dreamweaver. Any advice is greatly appreciated!Making an external style sheet.
Go to File > New > Blank page > CSS.
Hit create button.
Add some style rules to your new style sheet and save it.
Link your HTML pages to your new style sheet using the directions below.
Dreamweaver, Linking HTML to External Style Sheets
CS6 Fluid Grid layouts (17 min video)
http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layouts/
Creative Cloud 12.2 Enhancements to Fluid Grid Layouts
http://blogs.adobe.com/dreamweaver/2013/02/updated-fluid-grids-in-dreamweaver.html
Step-by-Step tutorial -- Building Fluid Grid Layouts in DW CS6
http://www.adobe.com/inspire/2012/08/fluid-grid-layouts-dreamweaver-cs6.html
Nancy O. -
How to increase the width of the Fluid Grid Layout from 1008px to 1080px?
Good day all, I'm experiencing a slight problem with Fluid Grid Layout in Dreamweaver CS6. I want to increase it's width so that it could be one with my Photoshop CS6 design (which is 1080px), the problem is that I can't as I am limited to 1008px. How do I increase the width? I ultimately am re-coding my design as my client demanded a responsive design but I'm clueless in that avenue which is why I resorted to re-doing everything under the set & safe default (Fluid Grid Layout) that doesn't require me to udnderstand media queries at an expert level.
While Fluid Grid Layout can save you some production time, you still need a good understanding of CSS Media Queries to use it.
Introduction to CSS Media Queries
http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-que ries.html
CS6 Fluid Grid Layouts (6 min video)
http://tv.adobe.com/watch/digital-design-cs6/creating-adaptive-designs -using-fluid-grid-layouts-in-dreamweaver-cs6/
CS6 Fluid Grid layouts (17 min video)
http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layou ts/
Step-by-Step tutorial -- Building Fluid Grid Layouts in DW CS6
http://www.adobe.com/inspire/2012/08/fluid-grid-layouts-dreamweaver-cs 6.html
Instead of fixed-widths in pixels, FLG code is all % based. It starts with the mobile layout and cascades to tablet, then desktop. If you want to use fixed-widths in pixels, you must manually change the CSS code for all three devices.
Nancy O. -
How to edit fluid grid layout in Dreamweaver CS6
Hi all
I am a designer at the company I work for and we've been building repsonsive designs for the past 12months. I've decided that it would be good for me to try out the new fluid grid layout tool in Dreamweaver CS6 to see if we can improve the design process by using dreamweaver to allow us to quickly prototype my designs for mobile, tablet and desktop.
However I have 2 problems so far.
1) I've created my first fluid grid layout and saved all the files into a new folder. I set grid widths and gutter but now want to edit the values as I am not happy with the gutter. Can this be done? I can't seem to find the file that does this so can anyone point me in the right direction?
2) We have traditionally used pixels to define our grids. I normally produce a grid with a fixed pixel gutter, overall width and column size. It seems that Dreamweaver only has the option to use percentages. Can anyone tell me if this can be changed and again where I can do this?
Thanks for your help
TrevorIn Code View, open your FluidGrid.css file (or whatever you named it) when you created the layout.
FluidGrid Layouts are not perfect and the interface could use a lot of improvement. That said, I think they can be used as a starting point for simple layout projects providing you understand their limitations and are willing to manually tweak the FluidGrid.css code.
If you've been doing Responsive Layouts for 12 months, you're probably building desktop to mobile whereas FluidGrids build from mobile to desktop. It takes a little adjustment in thinking.
Keep FluidGrid.css for layout only. Use a seperate stylesheet for your content styles.
Nancy O. -
How to convert live website to fluid grid layout
I have an existing live website. How do I convert it to a fluid grid layout?
Who is Peter?
Responsive Web Design
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
Introduction to CSS Media Queries
http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-queries.html
CS6 Fluid Grid layouts (17 min video)
http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layouts/
Creative Cloud 12.2 Enhancements to Fluid Grid Layouts
http://blogs.adobe.com/dreamweaver/2013/02/updated-fluid-grids-in-dreamweaver.html
Step-by-Step tutorial -- Building Fluid Grid Layouts in DW CS6
http://www.adobe.com/inspire/2012/08/fluid-grid-layouts-dreamweaver-cs6.html
If you want to support multiple languages, you'll need to build a mirror site with translations.
Nancy O. -
I am attempting to build a fluid grid site, however, after the initial page creation the option on the "insert" tab for "fluid div" (shown in all fluid grid videos & tutorials) doesn't show up. Instead only "div" or "draw absolute position div" are there. If I click on the "div" I get an insert div dialog box showing "class". Whatever I attempt, I do not get the familiar green fluid div boxes to work with. Now the boxes are blue outlined and don"t allow me to layout the page. I have created fluid grid pages before in Dreamweaver in the past year but didn't have this problem. Where am I going wrong???
Go to View > Visual Aids or simply click the Eye icon on your toolbar.
Check Fluid Grid Layout Guides.
Also refer to this article -- Creative Cloud CS6 12.2 Enhancements to Fluid Grid Layouts
http://blogs.adobe.com/dreamweaver/2013/02/updated-fluid-grids-in-dreamweaver.html
Nancy O. -
I'm building a site using fluid grids in Dreamweaver. When adding a video with the HTML5-video-Tag an the video.js-Player, it isn't possible to get the video automatically resizing when changing the window size. Adding <video style="max-width: 100%; height: auto;" doesn't work, several javascripts won't work too.
So how it's possible to get a fluid video size? (using dreamweaver cs6)This works with embedded YouTube videos.
CSS:
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border:none;
HTML:
<div id="FluidGridDiv1">
<div class="video-container">
<!--YOUTUBE CODE-->
<iframe width="560" height="315" src="http://www.youtube.com/embed/v1uyQZNg2vE" allowfullscreen></iframe>
</div>
</div>
Nancy O. -
Why does DW6 fluid grids not use HTML5 tags?
Correct me if I'm wrong, but it appears that DW6 only allows divs to be inserted when building fluid grids via the interface. If your doctype is set as HTML5, wouldn't it be nice if you were prompted as to whether you wanted a div, header, nav, section, aside, or footer, etc.? The way it is now, if you want your code to be HTML5 semantic, you will have to go into both your HTML and CSS afterwards and make a bunch of manual changes.
Or am I missing something that I have not seen in any of the tutorials I have read and watched?
Thanks!
JamesI can't speak for Adobe. But my guess is because HTML5 is still a working draft. The contents of HTML5 are still being discussed on the HTML Working Group and WHATWG mailing lists.
http://www.w3.org/TR/html5-diff/
Feel free to submit a feature request:
https://www.adobe.com/cfusion/mmform/index.cfm?name=wishform
Nancy O.
Maybe you are looking for
-
I have a class Score and in that lcass I have the following method: * Draw the score to the applet windows * @param g The graphics object public void draw(Graphics g, int x, int y) calculateScore(); String stringScore = new Integer(usersScore
-
I was trying to log onto my pc from my mapbook but I cant remember the password
I turn on my computer and it has the two spots one for my mac password and one for the migration for the home pc... i cant for the life of me remeber the password but I cant figure out how to change it or get to the questions I set up .. can anyone h
-
Hi, report zars no standard page heading line-size 170 line-count 65(4). data: begin of d1600, field1(5), field2(10), field3(3). data: end of d1600. move '1' to d1600-field1. " Only 1 move ' 3' to d1600-field
-
Bluetooth Keyboard and Mighty Mouse disconnecting
I've been having a problem with my keyboard and mouse (both connected by bluetooth) disconnecting while I'm using them or disconnecting in the middle of the night and my computer wakes up to tell me about it. The latter doesn't seem that bad, but my
-
HP5250 Printable CDs Print Off Center
Using the printable CD feature, I find the image placement prints off center. At first they were slightly off to the left which was no big deal. But the last few I printed came out noticeably shifted toward the bottom leaving a sliver of white at the