Join James Williamson for an in-depth discussion in this video Working with CMS frameworks, part of Dreamweaver CS5 New Features.
One of the most significant changes in Web design, over the last five years, has been the rise of Content Management Frameworks to help designers develop and manage Web sites. Frameworks like Drupal, Joomla, WordPress, and Movable Type, allowed designers to rapidly create powerful sites and assist in controlling the creation, publishing, and archiving of site content. Although, this is a bit of an oversimplification, one of the most powerful features of CMS Frameworks is the ability to create separate page elements, such as headers, footers, and sidebars, and then assemble them dynamically at run time to build pages.
Now, in the past, this type of approach to creating Web sites has made working on CMS-based sites in Dreamweaver rather challenging. Since pages aren't fully assembled until run time, Dreamweaver was unable to give you a clear picture of what the final page would look like as you created and edited different elements within the site. Even more problematic, earlier versions of Dreamweaver couldn't identify and establish the relationships between pages and their dependent files. This made finding which file you needed to edit when making a specific change tedious and potentially error-prone.
That's why Dreamweaver CS5 is such a huge leap forward in dealing with CMS Frameworks. Now Dreamweaver has a full tool set of features that do much more than just allow you to work within a specific framework. They assist you in working within the framework in an efficient and compelling manner. In this movie, I am going to explore these features and the potential workflow they promote, while working in a WordPress blog. So, l am going to go over to my Files panel, and I can see where I have defined a site for my blog. I am just going to open up index.php.
This is just your normal index page. Now, if I click over to Design View, this is what we would normally see when working on a blog index page in Dreamweaver, absolutely nothing. If we slipped over to Code View, we don't get much more, but this is, indeed, the homepage of our blog. So, as a designer, I would really like to start working on my blog right now, but it's really difficult if I don't know all those Related Files. So, one of the first things I am going to do is use this toolbar right here that says, "This page may have dynamically-Related Files that can only be discovered by the server." So, I am going to go ahead and Discover those.
So, I can now quickly access any of those files and make changes to them, without ever leaving this page, and that is really, really powerful. Now, of course, that really hasn't helped me here. I still can't really see anything. So, what I am going to do now is go up and click on Live View. Now, what Live View is going to do is it's going to go out to the Testing Server and have the Testing Server render this page within Dreamweaver. So, when I click Yes, it's going to update the file in the Testing Server and go ahead and put dependent files if I have made any changes since then. There is my blog.
Right inside Dreamweaver, I can kind of see how everything is being assembled, and I can see how everything is going to render in the final blog view. So, now, not only can I see all the Related Files that I have to this, I can see how these files are going to be rendered together at run time, and now as a designer, I can start making design decisions based on what I am seeing here. That's really cool. For example, I can scroll down a little bit, and I notice that the post of my blog, the font size is maybe a little too large. So, I am going to trigger my Code Navigator by clicking on the text while holding the Option key down.
That would be Command+Option on the Mac. I can see right here, I have got a rule that says #content, font-size:100%. I click on that, and notice that it uses my Related Files to jump right to the style.css, and I could maybe reduce that to say 90%. I will Save that again and click back on Design View, and now the text is a lot smaller. Now, that may not seem like a big deal, but in previous releases of Dreamweaver, I have had to preview that in the browser, try to figure out exactly which part of my document that's involved with, find the rule for that, and change it, and now I can do that all in one step.
So, that is a huge leap forward. Now, if I scroll down, I can see that at the bottom of the page I have got a little bit of space here, and I would really like to make the footer of my blog look more like the footer of my Web site. The footer of my Web site has a lot more information there. So, I would really like to put that information within that file. Now, in workflows other than Dreamweaver CS5, that's going to be kind of difficult, because I am going to have to find out which file that is, have to open that file separately, make sure I am getting the right one. But here in Dreamweaver, using the dynamic Related Files feature, I can do that much, much easier.
So, I am going to click on footer, and that is going to open up my footer.php in Code View. So, even though I am looking at the blog in the right-hand side, I am seeing the code to the footer over here. Now, that is really cool. Now, to save myself a little bit of time, I save the code that I need in a file called footer_snippet.php. So, I am just going to open that up. It's got a little <div> tag here, with some content in it. I am just going to copy that. And inside my footer, I am just going to paste that at the top of the footer. So, I am just going ahead and putting some static HTML in my footer as well.
So, I will do a Save All, click back, and I can go over here to my Filter and just say, Show All File Types now and click back on Design View. Now, I want to Refresh this page, so I am just going to go up to Live View and sort of toggle that on and off again. Again, I am working on this files live in the Testing Server, so you don't want this to be your live online server. And there is my footer. Cool! So, I have made a physical change to the footer.php file, without really ever leaving this design environment or having to go hunt and open that file up again.
That is really, really cool. Now, another thing that I can do is sort of explore this blog in total. I can go through and actually click on the links and see what a post looks like, for example. So, right here you can see I have got this little read more link. I am going to hold down my Ctrl key, on the Mac you are going to want to hold down the Command key, and I can click that, and it's literally going to jump to that post within my blog. So, this is just like navigating your blog. I can continue to work on this blog right here. So, I could make CSS edits.
I could make edits to the code. I could make edits to any of the functions. As a matter of fact, one thing I would like to do is, I noticed - and I can hit the back button here and do this again - I noticed that when I click on this and jump to that link, jumping to that exact spot. I am not jumping to the top of the post, and that would be something that I would rather have happen. So, I am going to write a function that allows me to do that. I can test the function directly here in Dreamweaver, without ever having to go to the browser. So, once again, I am going to filter my Related Files.
I am just going to do a nice little Custom Filter here, and I am just going to type in functions and filter those guys out. Here is my functions file. It has all of my WordPress functions in it. Now, again, to save a little bit of time, and I will switch over to Code View here, I have got a function that is almost finished. I am just going to go ahead and uncomment this out. I do have one comment there I want to keep. I have got a function here that's called remove_more_jump_link, and what I want to have happen is whenever WordPress sees the link to more content, I want it to remove the default function for that and use this one instead.
So, what I am going to do down here is use add_filter. Now, boy. It would really be nice if I had some code hinting to help me out here. Well, it's WordPress, so I wouldn't expect it to support WordPress, but wait a second. There is something I can do here. If I go up to the very top menu, I can go to Site > Site-Specific Code Hints. Now, this works for not only WordPress, but also for Drupal, Joomla and really any Custom Framework or custom set of classes that you might be using. So, one of the things I can do here is click on the root of my folder and tell it to scan this folder.
I can make it Recursive, so that it scans everything inside of that. Now, you will notice that we do have some defaults. So, if I didn't want to use one of those defaults, and I wanted to make sure that I was using one specific to my site, I can just go ahead and click my subroot folder, hit Recursive, and click OK. Now, it's going to go ahead and create a configuration file that's going to scan through all of my Related Files, and it should introspect all of those functions and classes and variables and give me access to the majority of them as I am working inside Dreamweaver. Now that we have done a Site-Specific Code Hinting scan, it should find all these WordPress functions and variables and whatnot.
So, what we want to do here is we want to do an add_filter, which is going to basically say, "Hey. Every time that you see that more link to the content, we want you to replace it with the function that we have just written above that." So, I am going to hit Ctrl+ Spacebar to enable code hinting. I am just going to type in a, and it will jump down, d, and it jumps down even further, one more d. And notice that we are starting to get into a lot of functions that are in some of these external PHP files. So, it went ahead and introspected all of those, and it's added a lot of those to my code hinting.
So, there is add_filter. I am just going to hit Return, so that it will autocomplete that for me. Inside add_filter I am going to say, the_content_more_link, so every time it finds that link to more content, it's going to run this function, remove_more_jump_link. There we go. Let's add a little semicolon to the end there, and that should do it. So, I am just going to go ahead and Save that. So, we have added this function to our functions file.
I am going to jump back into Design View. Once again, if you are filtering these guys out, and you just want to restore your dynamic files, you can say Restore All File Types. We don't need to test this in the external browser. We can test it right here. So, I am just going to go ahead and make sure we do a Save All. What I like to do here is just toggle Live View on and off again, because that forces you to refresh the files on the server, and I want to make sure they are refreshed. So, now when I click the read more link, notice that it jumps to the very top of the post, rather than in the middle of it.
So, we were able to use Site-Specific Code Hinting to help those complete the code and we are using Live View navigation to navigate around the blog and make live changes to it. Now, these are some pretty simple updates that I have made to the WordPress blog, but I want to stress how revolutionary this workflow is. Whether I am working on a WordPress blog, a Drupal, or a Joomla site, or some other type of framework, I now have a very powerful workflow that allows me to see the big picture of how my pages function, quickly access any Related Files and scripts to edit my sites, and code hinting that is specific to my framework or custom function sets that I have created.
If you have been avoiding Dreamweaver or only using it for specific types of site edits, take some time to explore the new features in Dreamweaver CS5. I think you are in for a pleasant and productive surprise.
- Comparing Dreamweaver CS4 and CS5
- Setting up a new web site using the enhanced Site Setup dialog
- Browser Lab integration
- Working with CMS frameworks
- Using the Adobe Widget Browser
- PHP and site-specific code hinting
- Navigating in Live View
Skill Level Intermediate
Q: Does Dreamweaver CS5 allow users to choose HTML5 for the doctype?
If a user currently creates pages in Dreamweaver CS4 or earlier, but plans on upgrading to Dreamweaver CS5 and working in HTML5, what should the doctype be in the meantime?
A: Dreamweaver CS5 does allow users to choose HTML5 as the doctype. However, this can also be done quite easily in Dreamweaver CS3. HTML5 does not require a doctype. So the HTML5 "doctype" if used at all, is very simple:
That can be saved as a snippet and put it in whatever document the user wishes.