How to convert existing website to fluid grid in dreamweaver cc

Is there a way to convert an existing website to a fluid grid site in Dreamweaver cc

Nope. There's no magic button. You must start over.
Build mobile layout first. Then tablet. Finally desktop.
When you get your layout all situated and working well in all device widths, copy and paste content from old site into new layout.
Nancy O.

Similar Messages

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.

Need details on how to move existing website to Dreamweaver CS6 and to Business Catalyst web hosting

Hi All,
     I need assistance with transferring an existing website - imagessays.com - (designed with Dreamweaver CS4) to my Creative Cloud CS6 account - and to web hosting by CS6 Business Catalyst.
   … step-by-step instructions would be most useful. I've got the Dreamweaver CS6 onDemand book, etc., ... I guess I’m just not enough of a geek to work my way through the steps and to get my site back moving ahead online.
    Beyond that, need advice as to how to repair a couple of non-funcitonal links on the site (check out imagessays.com to see a couple of pics that don't work). I'm looking forward to uploading more content and to do major upgrade to the site, but am unable to do so ... need technical support re how to do these simple (should be) things.
    Since setting up the website over 5 years ago, I have migrated from Dreamweaver CS3 to CS4 .... and now to CS6 ... and from a Dell XPS 450 running Windows XP to a Mac Pro desktop running Mac OS X.
These changes of version / machine / OS have separated me from the ability to do the one simple thing that I need to do with this straightforward website, that is: upload new pitchers and writins .
I look forward to assistance and support for this.
Thanks,
Jim

Hi Jim,
These videos might help:
Dreamweaver
http://tv.adobe.com/watch/introducing-business-catalyst/getting-started-with-business-cata lyst-and-dreamweaver-cs6-what-is-business-catalyst
http://tv.adobe.com/watch/introducing-business-catalyst/getting-started-with-business-cata lyst-and-dreamweaver-cs6-creating-and-publishing-sites
I'd open a local copy of the site in Dreamweaver CS6 and use the steps described in the video
Also, we have Dreamweaver and Business Catalyst (host) specific forums too. They should be able to help with specifics if you get stuck.
http://forums.adobe.com/community/dreamweaver
http://forums.adobe.com/community/business_catalyst
Hope that helps,
-Dave

How can i apply border for fluid grid layout div

How can i apply border for fluid grid layout div

<!doctype html>




<html class="">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="CSS/Layout.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>

<script type="text/javascript" charset="utf-8">
$(window).load(function() {
    $('.flexslider').flexslider();
</script>


<script src="respond.min.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="LayoutDiv1"><img src="SJV-Images/Banners/Dark-green-curved-header.png"/></div>
<div id="LayoutDiv2">
<div class="flex-container">
<div class="flexslider">
    <ul class="slides">
      <li>
        <img src="SJV-Images/Stud1.jpg"/>
      </li>
      <li>
        <img src="SJV-Images/Stud2.jpg" />
      </li>
      <li>
        <img src="SJV-Images/Stud3.jpg" />
      </li>
    </ul>
</div>
</div> </div>
<div id="Nav">This is the content for Layout Div Tag "Nav"</div>
<div id="Special_Features"><h3 align="center">SPECIAL FEATURES</h3>
<ul>
<li>
It is one of the oldest school.</li>
<li>It was first started as an orphanage for the children of British soldiers, and later moved to its current location.</li>
   <li>Rich in Anglo-Indian tradition dating back to three centuries.</li>
<li>The campus now has separate buildings within the campus for year 1 to year 8 (Junior and Sub Junior block) and year 9 to year 12 (Senior and   Super Senior block).</li>
<li>The school has montessori facilities in a separate building.</li>
<li>The School also has boarding facilities for students from distant places.</li>
</ul></div>
<div id="History"><img src="SJV-Images/His_Image.png" alt="Hisimage" class="floatleft">
<h3>HISTORY OF OUR SCHOOL</h3><P>In 1750 – a very long time ago,a missionary and a teacher, Christian Frederick Schwartz came to India to work in the Danish Mission at Tranquebar.Due to his own personal charm, genius and integrity, soon he became a trusted envoy to the court of Princes ,both hostile and friendly. He even helped in the training and education of Serfogee Rajah, the adopted son of the Tanjore Raja Tuljagee.</P></div>
<div id="Photo_Gall"><center>
    <strong>PHOTO GALLERY</strong>
</center>
<p><img src="SJV-Images/Photogall.png" width="174" height="70" class="floatright"/></p>
</div>
<div id="News_Events"><center>
    <strong>NEWS & EVENTS</strong>
</center><center>Annual Day<br><center>
    Alumni Meet<br>
    Exam Time Table<br>Parents-Teacher's Meet</center>
</center>
<br></div>
<div id="footer">This is the content for Layout Div Tag "footer"</div>
</div>
</body>
</html>

How can i insert include_once inside fluid grid layout?...

How can i insert include_once inside fluid grid layout?...

Hi
You will have to insert this in code view.
If it is inside a FG div, select 'split' screen mode, click in the required div in design view and this will highlight the selection in code view.
PZ

Creating new website with Fluid Grid Layout in CS6 - CS3 Transitions problem

I am making my second website with Fluid Grid layout and as with my last one, it seems I can't use CS6 transitions. Each time I go to add a new transition, Dreamweaver stops working and shuts down. Should you be able to use the transitions function with CS6 transitions or not? In the end, what I want to do is create a behaviour where one image is swapped with another with a click (not a rollover as it won't work on mobiles, I believe).
Thank you

Add a link to jQuery's Latest Library to your document <head> tags.
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
Add the jQuery function code to <script> tags in your document. I typically put them right above the closing </body> tag.
<script>
$(document).ready(function () {
    $("#one").click(function () {
        $("#one-a").toggle('slow');
    $("#two").click(function () {
        $("#two-a").toggle('slow');
    $("#three").click(function () {
        $("#three-a").toggle('slow');
</script>
</body>
As to why DW is closing you down, I don't know. That's not an expected behavior.
Without seeing your code, I'm going to guess that your CSS transition logic is incorrect or you're attempting to add transitions to the FluidGridLayout.css which is never a good idea. Always use a separate, external style sheet for your manually added content styles. Changes to either boilerplate.css or the temperamental FluidGridLayout.css files can result in problems.
Nancy O.

Convert HTML files to fluid grid format

hey i am fan of dreamweaver. and i am wondering about updateing older html files from an older dreamweaver into a new dreamweaver cc application. i saw the video on fluid grid layout. and it looks like thats good for starting out on a new project or file. like for example. starting a new web site from scratch and wanting to have tablet and phone as part. i am a photograher student graduate. i am part of the adobe cloud and im paying $19 a month. which is really good. for whole suite. anyhow. my questions are in the follwing.
1. can you upate older dreamweaver pages into the new dreamweaver application? (im referring to in the fluid grid part, where it shows both tablet, phone and desktop? ) like how to convert the files.
2,how to convert htlml to htlml 5? just wondering on it.
3. this is a web site i am useing right now. its under wix.com. the site is what i am currently using as saying here this is what i am doing. etc. wi was froce to use it for when i took exit portofoilo. so i am stuck with it untill i get my other pages up and running. http://brian-ford.wix.com/photographerexplorer ( temparry site)
4. as a photographer who has interest in design and adobe apps. all. so like web site, graphic design. i am intereted. but still my main focus is photography. wix.com limits me. so i am wanting to do more. so one thing i noticed. is the gallery part that was taken out of dreamweaver cs4. why? and how can build a gallery in the new dreamweaver with out taking out so many pages.?
5. i am liking adobe muse. liking the light box thing. i think. would it be wise to swithc over from dreamweaver to muse.?
6 would be an idea to combine dreamweaver and muse togther.? like use muse for the home page and galleries? and use dreamweaver for page and text layout?
what do you think i should do? i know code? i can use it. build it. but i need to do this fast. before my current bussines cards go out . bec then thats where i will make the upate change. and everything will change.
thanks

EASY isn't always better.
Below is an example of a FluidGrid Layout with a jQuery Cycle2 slide rotation (in this case text only) but it can be used for anything you wish.
http://alt-web.com/FluidGrid/Fluid1.html
Below is an example of a semi-liquid layout with Fancybox2 Image Viewer:
http://alt-web.com/TEMPLATES/CSS-Semi-liq-photo-sheet.shtml
View source in browser to see the code.
I don't like Lightroom galleries for the web. In CS6, you can only output Lightroom galleries to PDF (print) or Video.
There must be a hundred or more jQuery gallery plugins available on the web. Do a Google search. And stay away from anything containing Flash as it isn't supported by the world's most popular web devices (iPhone, iPad, Android...)
Nancy O.

How to convert existing FM to DITA 1.2? Any documentation?

I watched a webinar posted on the adobe website called "How to Optimize content for smooth migration into XML/DITA" and in the conversion, it showed an element called dita (root) and elements called topic before the main content. I took a class in DITA authoring last month and we learned about elements such as reference and then refbody and concept and conbody. The class I took did not go into how to use DITA in FrameMaker which is what I need to figure out now.
I'm using FM 10. I have a conversion table that is working pretty well, however, I understand that I need to import an EDD and a template into the files I convert.
My questions are:
What template and EDD file do I use? There are so many of them in the Adobe\AdobeFrameMaker10\Structure\xml\DITA_1.2\app folder. In the DITA folder there are folders for concept, and reference and task that look correct. However, in the DITA_1.2 folder I have no idea where to start.
Is there any documentation for DITA_1.2 for FrameMaker 10? Or books or Help or anything for someone new to using DITA in FrameMaker. I looked at the FM 10 Help for DITA, but it does not really cover when you are converting existing documents, just creating new topics.
Thank you for any information you can provide.
Karene

Hello,
Hoepfully, I understand your questions correctly. Once converted to DITA (regardless of version), each file with have a DOCTYPE. That will be the root element in the file. For example:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE task PUBLIC "-//OASIS//DTD DITA Task//EN" "technicalContent/dtd/task.dtd"
In this file, the doctype is <task>. After DOCTYPE you have the public identifier followed by the DTD. FrameMaker uses all this info to determine what template to open the file in, what DTD to parse against, and what read/write rules file to use.
Unlike DITA 1.1, which uses one EDD and template, DITA 1.2 uses multiple template and EDDs. If you open the Application Definition file by selecting StructureTool > Edit Application Definitions, you can find the template, DTD, and r/w rules filesthat are associated with each doctype. For example:
$STRUCTDIR\xml\DITA_1.2\app\technicalContent\dtd\task.dtd
This says, the DTD for doctype <task> is, by default, here:
C:\Program Files (x86)\Adobe\AdobeFrameMaker10\Structure\xml\DITA_1.2\app\technicalContent\dtd\task.dtd
As for the template, it is here
$STRUCTDIR\xml\DITA_1.2\app\technicalContent\template\task.template.fm
C:\Program Files (x86)\Adobe\AdobeFrameMaker11\Structure\xml\DITA_1.2\app\technicalContent\template\task.t emplate.fm
You want to get the Structured Application Developers Guide. I am not sure there is one for FM10, but the one for FM9 will work.
http://help.adobe.com/en_US/FrameMaker/9.0/StructuredDev/Structure_Dev_Guide.pdf
It's not a quick and easy learning process for developing and EDD. The out-of-the-box EDD does have a lot of formatting covered. It says in the EDD that not everything is covered. For example, I think it only has two levels of bullet <ul> and numbered lists <ol> covered.
As I mentioned FM uses multible EDDs. Each top-level EDD uses several levels of nested EDDs (text insets). It is set up in much the same way as the DTDs. It makes editing the EDDs a time-consuming process.
Hope this helps,
Stan

How to convert existed standalone APP to java web start app?

hello:
I didn't find useful information about how to convert an existed java
app into app which can be launched using java web start from the sun java developer's guide.
I have designed a simple java applcation and want to lauch this program with
java web start techniques(on local machine only). Is there any easy way that i could convert my program to the one which support java web start, so i can double click the *.jnlp file to launch my java applcation.
thank you
-Daniel Mark

i just found a great place to resolve my question.
If you had the same question, please refer to
http://www-106.ibm.com/developerworks/java/library/j-webstart/
thank you
-Daniel

I'm designing my first website using Fluid Grid Layouts. CSS question

I'm designing my first website using CS6 and Fluid Grid Layouts so I need a lot of help. I realize CS6 creates something called a boilerplate css file. However, in addition to that file, do I have to create an individual external style sheet for my desktop, ipad, and smart phone pages (3 separate style sheets) or should I have only one external style sheet for everything?
Or this is there another recommended way to use Fluid Grid Layouts?

FluidGrid Layouts creates a boilerplate.css file, a respond.js file & a Fluid.css file for you -- you name it whatever you like. I like to call mine Fluid.css so I remember what it is.
Fluid.css contains mobile first -- upon which all others are based. Inside, CSS Media queries, you'll find code for tablet and later on desktop. So one stylesheet generated by DW covers all 3.
TIPS:
FluidGrids are very temperamental. Do not tamper with boilerplate.css or Fluid.css files. Instead create a separate external style sheet for your typography & other custom content styles.
Build mobile first, then tablet and finally desktop.
Keep your designs simple and uncluttered.
Don't worry about content until you get the layout perfected.
Have fun with it . You'll probably have to start over a few times before you get what you want.
Nancy O.

How to convert a website to an illustrator file

Hey community,
I'm looking to convert a website to an illustrator file. For example, I would like to take a website, such as cnn.com, and manipulate the font size, the size of the right rail, etc.. Any ideas on the quickest way to do this without having to remock up all of cnn.com?
Thanks!

That's just not how web page rendering works. You can try to capture the web site as a PDF in Acrobat and open that and perhaps there will be some editable text and a few other things, but there's a good likelihood that most content will be rasterized and not easily editable. If things were that easy, we'd all be using Dreamweaver or other web tools to create vector artwork instead of AI...
Mylenium

How to get 100% width in fluid grid layout CC

I'm currently getting to grips with dreamweaver's fluid grid layout and cant seem to get a div to go the full 100% width across the screen. Ive created a div outside of the grid container as a non fluid div, and entered in the CSS myself in code view since Dreamweaver doesnt seem to allow you to add a class or ID to non fluid elements in design view. I have done this and all though i thought i had achieved success i noticed when looking closely in live view and when previewed in chrome that there is still a tiny gap between the div and the edge of the screen. Its very small, but its definitely there. Ive enetered width to be 100% and its definitely not simply 100% width of the grid container as its wider. I just cant account for the tiny gap which seems to be about 1 pixel wide. Any ideas whats causing this gap?

Depending on your project goals, there are plenty of other Responsive Frameworks you can use.
Foundation Zurb
http://foundation.zurb.com/templates.php
Skeleton Boilerplate
http://www.getskeleton.com/
Initializr (HTML5 Boilerplate, Responsive or Bootstrap)
http://www.initializr.com/
DMX Zone's FREE Bootstrap extension for DW
http://www.dmxzone.com/go/21759/dmxzone-bootstrap/
Project Seven's Page Packs (Commercial CSS Templates)
http://www.projectseven.com/products/templates/index.htm
Adobe Edge Reflow
http://tv.adobe.com/watch/adobe-edge-reflow/introduction-to-reflow/
PS. I don't work for Adobe. I'm just a product user like you.
Nancy O.

How to make regions editable in fluid grid template in 2014.1.1 in LIVE view - can't open the template editable selection panel

I am teaching a course in Dreamweaver 2014.1.1
We are setting up templates in fluid grids.
We need to make regions editable.
The LIVE view replaced the DESIGN view and does not have certain options accessible anymore.
I can't find the command to access the dropdown panel to make a region editable.
The Template tab at top, and the make editable options subtab, will not come open in fluid grid template mode.
Does anyone have a way to do this?

I was under the impression that the February update (2014.1.1) released a few days ago had fixed these problems. I urge you to file an official bug report below.
https://www.adobe.com/cfusion/mmform/index.cfm?name=wishform
My advice for now is to stay away from Fluid Grid Layouts. But if that's not an option, I'll show you a trick for getting Design View back. Open the Fluid Grid CSS file and add an X as shown below. This tricks DW into thinking it's a normal layout.
    Dreamweaver Fluid Grid Properties
    dw-num-cols-mobile:      X 4;
    dw-num-cols-tablet:        8;
    dw-num-cols-desktop:    12;
    dw-gutter-percentage:    25;
=====================================
Once saved, you should see Design View as an option.
Nancy O.

How to convert existing Flex project for iPhone?

Hi guys, I have a serious problem here with creating iPhone apps in Flash. I have created an app for the iPhone completely using Flex components long before CS5 came out. I've been looking for tutorials but with no luck. My issue is that I am not very sure how to convert the app to be used on iPhone.
As I've read the forums, some of you suggested compiling using command line. I guess that would be awesome. However, would it work if I'm using Flex framework? I've already tried to import my .SWF in Flash using loader.load() and add the mx.* component using addChild(VideoExample) I need just some solution that would save me days of searching and rewriting code, but any solution will be good. I have started a similar thread in Flash but if I get any answers here I will delete it.
Please respond, help would be very much appreciated!
Here's my mxml wrapper, from which I start the main application:
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="EntryPoint.main()">
</mx:Application>
Then I have a class which creates the main container:
package {
import mx.core.*;
public class EntryPoint {
    public static function main():void {
        var client:VideoExample = new VideoExample();
        var mxmlApp:Application = Application(Application.application);
        mxmlApp.addChild(client);
Here is the main class VideoExample:
package {
import mx.controls.*;
import mx.containers.*;
public class VideoExample extends Canvas {
    public function VideoExample() {
        super();
        init();
        private function init():void {
        loadImage();
        loadText();
                loadDisplay();
                startConnection();

I'm so sorry, I'm not really familiar with the codes.

Fluid Grid Layout Dreamweaver CC

Hi guys!
How is everybody? I am creating a fluid grid layout in Dreamweaver CC and when I use the visual design, I go to insert and insert either a paragraph or an h1. It always makes me create either a class or a id. Is that normal for a fluid grid layout? It will not let me insert as just h1 of p, I always have to either create an id or a class. Thanks a ton.

Hi Nancy. Thanks for getting back to me. I'm sorry I didn't get to go into more detail. I was in a phone call while I was typing. I am not so good at multitasking. With the visual view in a regular html document, I can easily insert tags like an h1 or p and am not required to create an id or class. it works just fine. However, when I use the fluid grid layout which I absolutely love, if I am using the visual view and I go to structure insert h1 or p, I am prompted to either make it a class or a div. I just find that a bit odd and am wondering why they require you to do that. I did take your advice about just going to the code view and typing out the tags. I can still go back to the visual view and create the selectors.
I just found that to be a bit odd as it doesn't prompt in a basic document.

How to convert existing website to fluid grid in dreamweaver cc

Similar Messages

Maybe you are looking for