HelpSpa » Dreamweaver http://helpspa.com Computer Advice, Help. and Video Tutorials Thu, 12 Jan 2012 03:18:39 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 How to Select a Single page with a CSS ID in Dreamweaver with a .DWT template. http://helpspa.com/web_development/dreamweaver/how-to-select-a-single-page-with-a-css-id-in-dreamweaver-with-a-dwt-template/ http://helpspa.com/web_development/dreamweaver/how-to-select-a-single-page-with-a-css-id-in-dreamweaver-with-a-dwt-template/#comments Thu, 25 Aug 2011 02:45:22 +0000 David W http://helpspa.com/?p=2534 Those of us familiar with Dreamweaver .DWT template files know their tremendous advantages, and their limitations.  One of the difficulties with .DWT templates is that once you’ve setup a website using .DWTs, it can be difficult to pick out a single page based on a CSS ID tag.  People often use an ID attached to a <body> tag in order to be able to select and manipulate an individual page for a particular purpose; but with .DWT”s, you can’t make different ID’s on the body tag.

The Solution is an Editable Header and <head> Tag.

While your <body> tag is likely consumed by the template, it’s very likely that your <head> tag has editable regions.  If you are adding any kind of meta tags, you will have an editable <head> tag.  So in order to take advantage of the <head> tag, simply add a <style> tag to the <head> area of the page in question, and you can then manipulate the CSS to your needs.

Let’s Look at An Example.

For example, let’s say you have an image with the ID “myImage” you want to display on every page on the website except for the “contact” page.   Go ahead and add the image to the .DWT so that the image code propagates to all of your pages.  Now in order to remove the image from the contact page, simply open up the contact page and add the following code within the header tag:


<style type="text/css">
#myImage {
display: none; }
</style>

What will happen is that the page will render and read the site’s main .css file.  The browser will then read the above style code that you put in the <head> tag, which will override the site’s global stylesheet.  In this manner, the image with the myImage tag will now be hidden on the contact page.

Summary

In order to apply  CSS code to  individual pages using Dreamweaver and .DWT templates, simply add a <style> tag with your overriding CSS code to the <head> tag of the page in question.

]]> http://helpspa.com/web_development/dreamweaver/how-to-select-a-single-page-with-a-css-id-in-dreamweaver-with-a-dwt-template/feed/ 0 4 – A Review of SmartSVN–A GUI Subversion Client for Windows http://helpspa.com/web_development/4-a-review-of-smartsvn-a-gui-subversion-client-for-windows/ http://helpspa.com/web_development/4-a-review-of-smartsvn-a-gui-subversion-client-for-windows/#comments Sun, 23 Jan 2011 21:09:32 +0000 David W http://helpspa.com/?p=2110 This article is the third in a series of guides about my experiences using Subversion (svn) for Web Development. These are the articles in the series:

1. A Desktop-Laptop Solution for Web Developers – Using Subversion to Co-Exist (this article)
2. What is Subversion and How Does it Help in the Web Design and Development Process?
3. A Subversion Workflow for Web Developers and Web Development
4. A Review of SmartSVN – a GUI Subversion client for Windows (this article)
5. A Quick Review of Online Options for Hosted Subversion for Web Developers
6. A Brief Review of Assemmbla, an Online Subversion Hosting Company.

Being new to Subversion and especially with using it in a web development workflow with Dreamweaver, I wanted to make the most of SVN but without having to deal with the command-line.  Generally speaking there are three major ways to go about using SVN.

1) command line – it’s great for those who use it but as a novice this wasn’t an option for me so  I won’t discuss it further here.

2) TortoiseSVN

3) GUI Subversion client such as SmartSVN.

TortoiseSVN is a free option and it basically adds the SVN command set to the right-click menu.  While I find this helpful now (after having been using SVN for a while), in the beginning I found TortoiseSVN a little confusing.  The truth is that there really isn’t anything confusing about TortoiseSVN — but it takes a decent understanding of subversion and how it works in order (at least for me) to be comfortable with TortoiseSVN.

SmartSVN – a Subverion GUI Client for Windows.

So wanting to reap the benefits of SVN without having to worry about the implementation and interface I started looking for a GUI for Windows and I came across SmartSVN.  The best way to show you how SmartSVN works (and how easy it is to use) is by going through my sample subversion web design workflow showing you screenshots along the way.  Note that SmartSVN comes in two flavors, a free Foundation Edition and a paid Professional Edition at very reasonable $79.  I will be using the Professional Edition for the examples below, and you can download a free trial edition to evaluate the Professional Edition.

Note that in this review I used screenshots from an actual production workflow, so some of the client information and server information is blurred out.

Let’s assume you already have a subversion server setup somewhere and you’ve already created a repository.  One of the best things about SmartSVN is that it lets you immediately decide if you want to go directly into a Subversion project or if you want to browse a repository:

smart_proj_repo

In this example I’m going to want to work on a specific project so I’ll go to the “New Project Window” option — which will let me select from the projects I’ve already setup, or setup a new project.

smart_proj_options

Because I’m going to work on an existing project, I’ll select one of the projects I already have listed [not shown] under the “Open existing project(s)” option.

Once you have selected a project (or created a new one) you are presented with the main SmartSVN screen.  Here is where you will control your interaction with your SVN server/repository.  You will have a tree-like view on the top left, a working area on the top right, a command output area on the bottom left, and a transaction list on the bottom right.

So now let’s assume that I went into Dreamweaver and made some changes to the files in my website.  SmartSVN will show you what files have changed (and you can easily sort to see what’s changed and what hasn’t):

smart_modList

Note the revision number, the state “modified” and the path on the right side of the screenshot.  SmartSVN can also help you see if you’ve added any files that are not yet versioned:

smart_unversioned

Because I don’t want to keep track of the dwsync.xml files, you can easily have SmartSVN ignore these files (an option in the main menu bar on top or an option in the right-click menu). But if you did want to add these files, you can also easily do so quickly.

So now that I’ve made a few changes, ignored a few and added a file or two, I’m ready to commit the changes.   Committing is as simple as clicking a button and adding a commit message, so I’ll skip that here.  But now let’s assume I’ve made the commit and I want to see a list of my commits (note that while the commit is happening and while SmartSVN is interacting with the server/repository, you will see the progress in the lower left part of the screen).  You can now easily look at the lower-right area of the screen, the Transactions area to see what’s gone on with your repository (note you can maximize this view if needed).

smart_transList

So you can see quite a bit of information from this transaction list and you can also expand the “+” signs to get more information.

Now that I’ve committed my changes, I’d like to add a tag (so as to have a snapshot in time of my project).  For more information about how I use SVN in my web development process you might consider reading this article series starting from the top — you can see a list of the articles at the top of this page.

Back to tags —  let’s now create a tag.  The easiest thing to do is to head to the Tag+Branch menu and click “Add Tag…”

smart_addTag

to bring up the “Add Tag” options:

smart_tagOptions

I like to name my tags like this:  client_tag_1.05, with increments as needed.  In the above example I used the name “sampleTag” and notice how SmartSVN automatically created a commit message based on my tag name.  In this dialog box you are able to create the tag based on your working copy or the repository copy, and you can decide (at the bottom) how to manage it if the tag already exists.  When you are done you can hit the “Add Tag” button to finish adding the tag.

Moving along, let’s take a look at the list of our tags in the repository.  Note first that SmartSVN lets you pick which repository you want to look at (if you have separate repos):

smart_repo_change

But moving back, let’s look at the repository view of our project:

smart_repo_tag_list

This is just a clipping but you can easily see the structure of my project, and if you wanted to you could click the “+” to see all of the tags that I have.

On the subject of tags, let’s go ahead and download a copy of a tag to the local drive so I can have an archive.   You could easily copy your working directory, but don’t forget that your working directory has lots of special svn files that you may not want to necessarily keep in your copy (this is a function of subversion itself, not SmartSVN).  Let’s now walk through the export process.  The first thing I did is I went to a tag in the repository view and right-clicked on “check-out” (incidentally you also could use this command if you wanted to create a working copy based on a tag).

svn_export_tag_1

I then added a local directory and set some options:

svn_export_tag_2

and then finalized my choices.  Under the “Export only” selection I left the selection as “native” — which basically exports the tag as it is — but without the svn files.

svn_export_tag_3

Lastly you can view a summary report before you finish the creation of the local copy of the tag:

svn_export_tag_4_report

Foundation Version vs Professional Version

I spent time with the Foundation Edition and the Professional Edition and I found that the Foundation, while free, is greatly limited compared to the Professional Edition.  The Foundation is excellent as a repository browser and for basic management, but for creating tags and for more complex operations, the Professional Edition is needed to take advantage of these tasks with a GUI.

Conclusion

Subversion is a fantastic way to implement revision control into the web development process, but can be confusing and a little overwhelming for the novice user.  For this reason the use of a GUI such as SmartSVN is a great way to get going with subversion.  SmartSVN is a paid option but is the best GUI that I’ve seen for interacting with Subversion; the $79 is well worth it when you consider that with SmartSVN, you can worry about your project, and let SmartSVN  worry about interacting with your repository.

Disclosure. I originally approached Syntevo  about writing a review of  SmartSVN.   I was given a free license to use the product.

]]> http://helpspa.com/web_development/4-a-review-of-smartsvn-a-gui-subversion-client-for-windows/feed/ 2 How to Manage Multiple Level Lists in Dreamweaver – Bullets, Letters, Numbers http://helpspa.com/web_development/how-to-manage-multiple-level-lists-in-dreamweaver-bullets-letters-numbers/ http://helpspa.com/web_development/how-to-manage-multiple-level-lists-in-dreamweaver-bullets-letters-numbers/#comments Mon, 27 Dec 2010 06:36:33 +0000 David W http://helpspa.com/?p=1977 Every so often I come across a deep-level list that needs to be put into an HTML document.  You can make yourself nuts with tons of classes, ID’s and the like, but found that by creating classes for the styles you need, you can save yourself a lot of time.

Thus, for each list-style: that I need, I create a CSS class:

.olDecimal li {list-style: decimal;}
.olAlpha li {list-style: lower-alpha;}
.olRoman li {list-style: lower-roman;}

These three classes will make my <UL> or <OL> with a decimal, lowercase alpha, or lowercase roman list-style: . Now I simply assign the class I want to the list in question, and I’m done.

This setup is particularly useful for a list like the following:

  1. Bread Aisle
    • white bread
    • wheat bread
  2. Meat and Fish Aisle
    • Chicken
    • Beef
      1. Hamburgers
      2. Steak
    • Tuna Fish

Getting the “Hamburgers” and “Steak” entires to have a lowercase roman text style can get a little tricky — especially on deeper and larger lists. So by assigning the .olRoman class, to the <ul> under the Beef section, you can easily make this change.  Using this method  you can easily get the list-style formatting you want. And to get even more precise, you can make the white and wheat breads (as well as Chicken, Beef and Tuna Fish) with lowercase alpha text (a., b.) by assigning the class .olAlpha to the  <ul> below the Bread Aisle <li>.  Remember, the classes should be assigned to the <UL> that proceeds the <li>’s in question.

We’ll that’s my solution, I hope it helps you out.

]]> http://helpspa.com/web_development/how-to-manage-multiple-level-lists-in-dreamweaver-bullets-letters-numbers/feed/ 0 6 – Assembla Review – Excellent Free Subversion Hosting http://helpspa.com/web_development/assembla-review-the-best-free-subversion-hosting/ http://helpspa.com/web_development/assembla-review-the-best-free-subversion-hosting/#comments Mon, 27 Dec 2010 06:09:19 +0000 David W http://helpspa.com/?p=1973 This article is the sixth in a series of guides about my experiences  using Subversion (svn) for Web Development.  These are the articles in the series:

1. A Desktop-Laptop Solution for Web Developers – Using Subversion to Co-Exist
2. What is Subversion and How Does it Help in the Web Design and Development Process?
3. A Subversion Workflow for Web Developers and Web Development
4. A Review of SmartSVN – a GUI Subversion client for Windows
5.  A Quick Review of Online Options for Hosted Subversion for Web Developers
6. A Brief Review of Assembla, an Online Subversion Hosting Company (this article).

In my quest to find a solution to the “laptop by day, more powerful desktop system by night” problem, I came across the idea of using subversion with Dreamweaver.  Now I know I could have used one of a dozen sync program (I actually use syncback and I love it) to go back and forth, but I wanted to add sync with some level of version control.  As web developers and coders can attest, version control is critical in any project; it doesn’t matter how you do it — as long as it works for you.

So I went ahead and started testing using Dreamweaver with SVN. . Because I’m always on the go, I wanted to find some kind of secure , easy, reliable and indexpensive subversion hosting, and I came across Assembla.

Free Subversion Hosting with Assembla

Being new to SVN, I really needed a system that was simple to use, and easy to integrate from my client of choice (currently I run SmartSVN on one machine, and TortosieSVN on the other).  I did some hunting and Assembla offers 2GB of subversion hosting for free — which is more space than I found with any other company.  I must underscore that being new to SVN, I really only need a limited feature set.  But for the features I need, Assembla does a great job:

  • Easy Setup:  I was configured and up and running in minutes.
  • Secure Access: It’s all SSL’d.
  • Easy and Fast Access:  I expected a speed drop because my repo is online but much to my pleasant surprise, Assembla is lightening fast in connection and in uploading/downloading. (My SVN clients show a definite speed difference, but that’s for later, too).
  • Exporting is Easy:  I’m used to a very rigid versioning system (which I still have in place), but Assembla allows you to quickly and easily download your repository.  So even though they’ve got it all backed up, it’s incredibly simple to take a snapshot of your repo and keep it in a safe place on your hard drive.

So for the beginning subversion user, I cannot recommend Assembla more highly.  I’ve yet to have a problem, and as long as I continue to use subversion, I’ll be hosting with Asssembla.

Update – A Few Weeks Later
I remain very happy with Assembla’s free service.  My only complaint is that they don’t seem to have an intermediate plan for smaller users like myself.  I’d be interested in working with tickets, but their basic plan that includes tickets starts at around $24/mo and includes way more resources than I need.  Some of the competition does offer tickets (via Trac and other systems) for between $5-$10/mo, but at this point since I’m not using tickets, I’m content to stay with Assembla.

]]> http://helpspa.com/web_development/assembla-review-the-best-free-subversion-hosting/feed/ 2 Website in IE Shows Last Letter or Word of Text, but is Fine in Firefox http://helpspa.com/web_development/dreamweaver/website-in-ie-shows-last-letter-or-word-of-text-but-is-fine-in-firefox/ http://helpspa.com/web_development/dreamweaver/website-in-ie-shows-last-letter-or-word-of-text-but-is-fine-in-firefox/#comments Wed, 28 Oct 2009 03:39:35 +0000 David W http://helpspa.com/?p=317 There are many things that will cause a site to display properly in Firefox but not in IE (especially in IE6). One of the surprise reasons that this may happen is due to HTML comments.

The problem you get is that while viewing a site with Internet Explorer only, you see the last letter, letters, or words of your text in the wrong place on the page. If you test the site with firefox or opera, there’s no problem. So why is this happening?

The reason is because Internet Explorer doesn’t do well with too many HTML comments in one area. If you are using Dreamweaver Templates, Dreameweaver adds comments to delineate the template region starting and end points. Now if you go ahead and add some more commented text (e.g. for notes for yourself, code notes, or even just content that’ s ‘on hold’ for now), IE will incorrectly render the text that is nested within the comments.

The solution is to one by one, remove some of the HTML comments. You can try to combine them if possible, or put the comments elsewhere. Once you remove enough of the comments (e.g the actual tags –>, you will find that the text now displays normally.

It’s a frustrating bug to figure out, as you’d never expect that comments (which I encourage people to OVERuse), are the source of the problem!

]]> http://helpspa.com/web_development/dreamweaver/website-in-ie-shows-last-letter-or-word-of-text-but-is-fine-in-firefox/feed/ 1