Category: Dreamweaver Toggle Comment Threads | Keyboard Shortcuts

  • Jay Versluis 10:08 am on November 15, 2013 Permalink | Reply
    Tags:   

    Categories: Dreamweaver ( 10 )

    How to auto indent and collapse source code in Dreamweaver 

    I keep forgetting where and how to find this feature. Turns out the Command menu gives us such features:

    Screen Shot 2013-11-15 at 09.58.24

    • Commands – Apply Source Formatting (to Selection)

    Applies the correct indentations to the entire file, or your selection only. It’s the equivalent of Xcode’s “Editor – Structure – Re-Indent”.

    To manually move blocks of code, select the lines that need to be shifted, then hold down OPTION + CMD and press the square brackets to indent and outdent respectively. Not sure what these keys are on Windows.

    Collapsing Code

    On this note, it is also possible to collapse code that you don’t want to look at. It’s not as easy as using Xcode’s method collapse option. In Dreamweaver, you select the code you want to collapse, then hit one of the little triangles that appears on the left hand side.

    Selected but uncollapsed code

    Selected but uncollapsed code

    Click on the triangle to collapse/uncollapse

    Click on the triangle to collapse/expand

     
  • Jay Versluis 11:02 am on October 20, 2013 Permalink | Reply
    Tags: ,   

    Categories: Dreamweaver ( 10 )

    How to fade an element with CSS and jQuery 

    You can hide and show DOM elements in CSS as well as jQuery. But you can also combine the effects and create very elegant presentations with ease.

    Let’s consider my own ID named #myown. Once styled to look ravishing, I’ll set it to disappear via this bit of CSS:

    #myown {
        /* my styles go here */
        display: none;
    }
    

    My element won’t show up when the page loads – but I can make it fade in like in the movies with this bit of jQuery:

    jQuery('#myown').fadeIn('slow', function () {
    	// could add something here upon completion	
    });
    

    Here I’ll grab a reference to #myown and then use .fadeIn to make my element visible.

    We can chain other methods in the same call too. In this example I’ll do the same thing, but wait for one second until the fade in begins:

    jQuery('#myown').delay(1000).fadeIn('slow', function () {
    	// could add something here upon completion	
    });
    
     
  • Jay Versluis 7:34 am on October 20, 2013 Permalink | Reply
    Tags:   

    Categories: Dreamweaver ( 10 )

    How to combine DOM elements in jQuery 

    Sometimes you want to add your own DOM element to an existing class or ID. For example, maybe you’d like to insert something like a header advert into an existing theme without having to hack core files. jQuery makes this possible.

    You can either add your own element to the beginning or the end of an existing one by using .prepend() or .append() respectively.

    In this example I’m adding my own #myown id inside an existing #header:

    // append our #p2HeaderAd to the current #header
    var $myOwn = jQuery('#myOwn');
    jQuery('#header').append($myOwn);
    

    The first line gets a reference to my own content and stores it inside a variable with the same name. The second line takes this references and appends it as the last element inside the existing #header.

    .prepend works the same, but would add my element as the first inside the existing one:

    // prepend our #p2HeaderAd to the current #header
    var $myOwn = jQuery('#myOwn');
    jQuery('#header').prepend($myOwn);
    
     
  • Jay Versluis 10:01 am on October 15, 2013 Permalink | Reply
    Tags:   

    Categories: Dreamweaver ( 10 )

    How to use a custom font in CSS 

    CSS-LogoDid you know that with CSS 3 you can load custom true type fonts and use them on your website?

    It’s relatively simple to do too. First you define a new font face with a URL to your file, then you call it just like you would call a pre-defined font.

    In this example I’m using the Old Typewriter font from http://www.dafont.com/old-typewriter.font. Once unzipped you’ll end up with a standard .ttf file that you can reference like so:

     @font-face {
    	 font-family:"Old-Typewriter";
    	 src:url(Old-Typewriter.ttf);
     }

    Now you can style your text via the font-family property:

     .your-class {
    	 font-family:"Old-Typewriter";
     }
    

    Where to get custom fonts

    There are several sites that offer true type fonts for download. They’ll work in Word and Pages too once installed on your local machine. Here are some of my favourite sites for finding nice fonts:

    Note that some fonts have usage restrictions: Even though you may be able to download them, check the license and see if you’re allowed to use them, or find out if you must buy a license before you do.

    Also note that once you upload the font to your server it can be accessed by everybody.

    Compatible Font Types

    You’ll be pleased to hear that CSS supports several font types to be used as described above:

    • TrueType (.ttf)
    • Web Open Font Format (.woff)
    • OpenType (.otf)
    • Embedded OpenType (.eot)
    • SVG Fonts (.svg, .svgz)

    Source: http://www.w3.org/TR/2013/CR-css-fonts-3-20131003/

     
    • Jay Versluis 2:57 pm on December 15, 2013 Permalink | Reply

      You can also link to existing online fonts, then simply @import them in your CSS. Here’s an example:

      @import url(http://fonts.googleapis.com/css?family=Lato);
      
      .your-class {
      	font-family: Lato, Helvetica, sans-serif;
      }
      
  • Jay Versluis 9:08 am on October 13, 2013 Permalink | Reply
    Tags: ,   

    Categories: Bookmarks, Dreamweaver ( 15 )

    Fantastic CSS Border Radius generator for all browsers by @jacob Bijani

     
  • Jay Versluis 11:47 am on September 29, 2013 Permalink | Reply
    Tags:   

    Categories: Dreamweaver ( 10 )

    How to centre an image in CSS 

    CSS-LogoCentering text in CSS is relatively easy. All you do is add the “text-aling: center” property.

    If you’ve ever tried this with anything that isn’t text you’ll have noticed that this approach doesn’t work.

    Instead, display your class as a block, then set the margins to auto. You also need to specify a width so the rest flows around this fixed parameter:

    .yourclass {
    	margin-left:auto;
    	margin-right:auto;
    	width: 400px;
    	display:block;
    }
    

    This approach works with everything that is not text such as images.

    Thanks to Bert Bos for this tip!

     
  • Jay Versluis 9:45 am on September 9, 2013 Permalink | Reply  
    Categories: Dreamweaver, WordPress ( 10 )

    How to fix “Dynamically-related files could not be resolved” message in Dreamweaver 

    Adobe_Dreamweaver_CS6_IconWordPress is made up of over 70 files which may be called to display your site. Dreamweaver has a handy feature with which it lets you discover all those files.

    Sometimes this works great – and sometimes you get the error message above. I was stumped by this when a site I was working on seemingly threw Dreamweaver overnight. Was was going on?

    The secret is Permalinks.

    Dreamweaver has a problem discovering and resolving related files if you’ve set Permalinks to anything other than the default. This problem has been around for a while, ever since the introduction of this feature in fact.

    (More …)

     
    • SRK 11:52 pm on January 16, 2014 Permalink | Reply

      Thanks! That really helped

  • Jay Versluis 7:39 pm on September 6, 2013 Permalink | Reply  
    Categories: Dreamweaver ( 10 )

    How to define Javascript Behaviours in Dreamweaver 

    Adobe_Dreamweaver_CS6_IconDreamweaver keeps on giving – and the more I’m looking into it, the more I like how it can support me. Today I discovered that you can define Javascript Behaviours without writing a single line of code.

    This can only be good news – especially if Javascript is one of those things that always looks a bit scary.

    Here’s how to make Dreamweaver create code that can hide an element, and bring it back.

    (More …)

     
  • Jay Versluis 3:00 pm on September 5, 2013 Permalink | Reply
    Tags:   

    Categories: Dreamweaver ( 10 )

    How to detect screen width in CSS 

    CSS-LogoHave you ever wondered how a website can look great on your desktop and appear reformatted on your phone? The secret sauce is done via CSS Media Queries.

    In a nutshell you define your styles for larger screens, and then override those styles with more mobile friendly options if the screen is smaller. You can specify the exact width which allows even to detect if someone is holding their device portrait or landscape.

    Let’s look at how this can be accomplished with CSS rules.

    (More …)

     
  • Jay Versluis 6:01 am on January 26, 2013 Permalink | Reply  
    Categories: Dreamweaver, How To ( 10 )

    How to update jQuery Mobile in Dreamweaver CS6 

    Adobe_Dreamweaver_CS6_IconSince the release of Adobe’s Dreamweaver CS6 the jQuery and jQuery Mobile libraries have been updated. This means that when you create a new Mobile Starter page, you’ll get outdated libraries by default.

    With a bit of hacking we can change this to the most current version though. Let me show you how it worked for me – many thanks to Greg’s article on how to do this in Dreamweaver CS5.5.

    (More …)

     
    • Matt 10:25 pm on March 26, 2013 Permalink | Reply

      This is all great information but can you be a little more descriptive at the end. I have the problem when I open up the jQuery mobile swatches it shows no themes. You say to manually create an image folder and move the files across. I don’t know what you mean by move the files “across”.

      • Matt 2:24 pm on March 27, 2013 Permalink | Reply

        I just figured out the issue with no themes or icons showing up in the jquery mobile swatches panel. After and assuming you updated the files properly you must go to the jQuerySwatch file located in the configuration file and update the html file. Look for the line that refers to the jQuery library and update with the version you just updated ie: Third Party Source Code/jquery-mobile/jquery-1.8.2.min.js” to Third Party Source Code/jquery-mobile/jquery-1.9.0.min.js”.

        • Matt 3:01 pm on July 10, 2013 Permalink | Reply

          I know it’s been awhile but I found a YouTube video on how to do this. Unfortunately it’s in Thai but you can watch him step by step and it’s pretty easy to follow along. http://www.youtube.com/watch?v=sBhMm6_GpM4

          • Jay Versluis 8:14 am on July 11, 2013 Permalink | Reply

            Nice find! The guy opens with his email and phone number – why not drop him a line.

          • Sean 10:17 am on February 15, 2014 Permalink | Reply

            if your in the mood.. switch on automatic captioning… its freaking hilarious!

      • Jay Versluis 7:25 pm on April 18, 2013 Permalink | Reply

        Hi Matt,

        glad it’s all worked out for you. I think I’ve spotted my mistake there, I hadn’t changed all the references that I should have. Like you said, it’s all working fine now, including the swatches.

    • Issac 12:20 pm on April 3, 2013 Permalink | Reply

      Thanks for sharing!!

    • Dave 6:14 pm on June 27, 2013 Permalink | Reply

      Great tutorial… It works nicely for when you create a new page from sample. Do you know how to fix the insert->jQuery mobile->Page so that it knows about the updated scripts as well? When I use that, it still references the old version 1.0 scripts.

      Dave

    • Terry 11:36 am on August 2, 2013 Permalink | Reply

      Thank you for the tutorial. I have been putting this off for a few months and decided to tackle it. Your tutorial made it easy.

      Like Dave, I am also not seeing the updates and still see ref to old 1.0 scripts/css. Restarted and still the same. Anyone else had this problem and solved?

      Thanks again.

      • Jay Versluis 3:37 pm on August 2, 2013 Permalink | Reply

        Terry, how are you creating a new jQuery Mobile page? I start from fresh (ie File – New – Page from Sample – Mobile Starters – jQuery Mobile (local or CDN)). Now I get a HTML page with the correctly referenced files for the new version. You can add more “pages” by going to Insert – jQuery Mobile – Page (Dreamweaver will place the code inside the existing file for a new page).

        However if you’ve already got a standard HTML page (without jQuery references in the head) and try to use that option, you’ll be presented with a dialogue that offers to add those references, pointing to the old version. I’m not sure where DW saves those I’m afraid. But then, I’ve never had to use this option, as usually the jQuery references are setup already.

        • Terry 9:57 pm on August 2, 2013 Permalink | Reply

          Thanks for replying Jay.

          I made the changes as tutorial shows. Then go to file->new-page from sample->mobile starters and then no matter which version I choose still see ref to old versions.

          Beats me what is up. I have tripled verified that the .htm files have really been changed but still see ref to old versions.

          Thought maybe there was some type of cache but did not find anything. See other people having same issue after searching Google, so maybe I have not totally lost it, lol.

          I shall not give up and when found will share here. Betting it is something so simple will be embarrassed:)

          Thanks again for your help.

          Terry

          • Jay Versluis 11:26 pm on August 2, 2013 Permalink | Reply

            That is bizarre indeed… I’m sure you haven’t lost it ;-)

            Are you on Mac or Windows? I’ve tested this on a Mac and it worked fine – but I haven’t tested it on a Windows. Maybe that explains it?

            • Terry 11:35 pm on August 2, 2013 Permalink | Reply

              I am old, old school and on Windows so that may explain the whole thing.

              Going to try on a Windows laptop in day or two and see if same thing happens. If so we can then darn near say it is a Windows thing,

              Thank you Jay,

              Terry

    • Terry 7:32 pm on August 4, 2013 Permalink | Reply

      Had responded to your question about mac or win and either did not submit or something else happened.

      I am on win.

      Still have not found a solution but after reading around I am not alone. Seems to be a common problem. There must be some hidden area in win machines, lol.

      For the life of me I cannot understand why the adobe folks would not make it simple to upgrade jquery. Seems it would be a very simple process to build-in.

      Thanks again Jay for your help,

      Terry

    • Walter 1:37 pm on November 1, 2013 Permalink | Reply

      any method for updating the JQueryCodeHints.xml file for the new tags? THanks

    • Mary 5:39 pm on February 18, 2014 Permalink | Reply

      i cant seem to save over the builtin folder files. its in Read only mode. I’ve tried changing permissions and nothing is working. Am I doing something wrong? I am on a windows machine.

      • Jay Versluis 11:03 pm on February 19, 2014 Permalink | Reply

        Hi Mary,

        sadly I can’t speak for Windows – I’ve only tried this on Mac. But I agree – it sounds like a file permission problem. You can usually tweak those in Windows by right-clicking on the culprit and selecting Properties (you may need Admin privileges to make them writeable). Good luck!

c
compose new post
j
next post/next comment
k
previous post/previous comment
r
reply
e
edit
o
show/hide comments
t
go to top
l
go to login
h
show/hide help
shift + esc
cancel
Google+