Welcome to the PixelMill Blog. Here we will talk about news, announcements, products, and more from PixelMill.
Are you looking for an attractive way to display your photography on your site?
We've recently released three Flash-based image galleries that will give you an easy-to-deploy, unique solution for displaying your gallery of photography and images within your web site.
The ImageViewerPlus series (Standard, XL, and XL2 with PayPal Integration) are resizeable online image galleries for showcasing and viewing images in a professional and intuitive interface. The gallery is designed for displaying larger images at a maximum width of 650 pixels and a maximum height of 488 pixels. The entire gallery is designed at a resolution of 1024 x 768 pixels (800 x 600 in Standard version).
PSD files are included for changing the main background design or adding additional elements. All configuration is done by editing a user friendly XML file. This would include options for the following: background image, sound file definition, gallery button labels and large image definitions. Gallery navigation buttons are automatically generated from the information contained in the XML file.
They have support for unlimited categories/galleries. Scroll feature is built in for scrolling menu buttons up or down when there are more buttons than the display area allows. Left and right scroll arrows are provided for moving the thumbnails left or right when there are more thumbnails than the display area allows. A larger thumbnail expands out on mouse over. After clicking on a thumbnail, the larger image is displayed along with a description window in the lower right corner that can be opened or closed.
A slide show option is available for each gallery, along with buttons for displaying Next and Previous images. Images are displayed with a very smooth dissolve transition. The master background image can be defined within the XML file and edited with the included PSD file. Includes a sound on/off button. The MP3 file can be defined within the XML file. Two additional message screens are included for displaying additional information. These can be edited within the included FLA file.
HTML and java script files are included for calling ImageViewerPlus XL in a pop up window or full screen viewing. ImageViewerPlus can be viewed from the web or your local computer. Optimized for 1024 x 768 resolution (800x600 in standard version). FLA source files included.
Requires Flash MX (or higher) to edit some design elements, but is not required for out-of-the-box use. ReadMe file for editing the XML file and adding galleries included.
Learn More...
ImageViewerPlus XL - $165
ImageViewerPlus XL2 w/ PayPal Integration - $195
ImageViewerPlus v1.0(standard) - $125
Want a different music track for your image viewer? Visit PixelMill's Royalty Free Music collection.
When you create a new page in Dreamweaver, the first line of code usually looks something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Ever wondered what that means? Understanding the docctype statement, as that line is called, requires a very, very brief history lesson. Don't worry, I'll make it brief.
HTML started with a very basic list of tags (and rules on how to use them) back in 1989. Over the years, more tags were added (and some removed), so HTML came out with version 2, version 3, version 3.2, version 4, and finally 4.1. XHTML was then developed. (To make it even more confusing, we have different versions of HTML 4.1 and XHTML -- a "strict" version that has very strict rules, a "transitional" version that is a little more loose, and a "frames" version for sites that use frames.)
(Wasn't that brief?)
These different versions of HTML and XHTML have slightly different rules for how -- and which -- HTML tags can be used in a document and how to format them. Just to give you a quick example, XHTML has stricter rules than HTML -- the tags have to be lowercase and certain tags (<u> for underlining) can't be used at all. In HTML, tags like <br> and <link> now require a "closing slash" in XHTML, so they must be written like <br /> and <link />.
So for optimized viewing of the site, the browser should be able to tell what version of HTML/XHTML you're using. That's when the doctype statement comes in. Compare these different doctype statements below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
The doctype tag contains the information about which DTD, or document type definition, is being used, and contains a web address that links to the full explanation of that language.
Now, what's great about Dreamweaver (which was the point of this blog) is that you don't have to worry about keeping track of which tags you can or can't use and how your code should be formatted. As soon as you set the doctype of your web site, Dreamweaver handles the code for you automatically. Even if you are used to hand-coding an <img> or a <br> tag in the old-school HTML way, if your doctype is set to XHTML, Dreamweaver automatically adds the closing slash for you.
You can change the docctype by typing Ctrl-J (Command-J for Macs) to access the page properties, then going to TItle/Encoding and changing the Document Type. (You can also right-click on the page itself and choose Page Properties.) Once you do that, Dreamweaver formats your code accordingly!
Our Dreamweaver Support knowledgebase area is pretty bare-bones right now. We're always looking to add on more tutorials and knowledgebase articles to PixelMill's support knowledgebase. So... what do you want to know? Feel free to post a comment.
Libraries are a feature of Dreamweaver that allow you to use the same content on multiple pages. What this means is that you can have repeated content on multiple pages, but only have to edit the content in one place.
Let's say that you have a news box that appears on every page. Without libraries, you would have to open each and every page and edit the news box anytime you wanted it updated. WIth libraries, the news box can be a library item, included on each page, but only requiring that you edit and save the library item. One change, one save, and every page with the library item gets updated. Dreamweaver libraries make this kind of editing a breeze!
Templates, or .dwt files, are similar but different -- you have a main template page with a specific layout, and the content areas in the layout can be defined to change for each page. The similarity with include pages is that if you update the template, all pages "attached" to the template will update. The difference is that templates control an entire page layout, while libraries control a component of a page. You can have multiple templates used in the same web site - for example, you could have a 2-column .dwt and a 3-column .dwt. Our designers can help make it seamless when switching from one template to another by keeping the same "editable areas;" when you switch templates, essentially all that changes is where on the page those content areas end up.
Now, let's say that six months down the road you decide that it's time for a new look for your site. Without DWTs, you'd have to create or download the new design template, open every page of your site, copy and paste all the content from each page into the page template, save-as, modify the meta tags and title for each page ... you can see it would be quite a job. But with DWTs, you would create or download a new DWT and then apply the design to your pages with two or three clicks!
PixelMill Dreamweaver templates are all required to use DWTs, and most of them use libraries for items like the header or footer as well. (The real power of Libraries comes in the components that you create for yourself -- such as my news box example from before!) Also, most of our DWTs are DWTIG-compliant, which is another blog topic in itself, but for now it will suffiice to say that DWTIG-compliant templates make applying a new design truly seamless.
Dreamweaver makes accessibility a few steps easier!
First, let's look at the accessibility report tool, which was also available in some previous versions of Dreamweaver. If you go to Site > Reports, you can check the Accessibility report option and then click Run.
In the Reports panel, look first for the red X's, which signify where your page actually failed.
You can then fix the problem or click the "information" icon in the left of the panel to learn more about why it's a problem.
The other question marked items are things that need to be manually checked. Glance through the list and look for possible problem areas.
One of my favorite features about the new Dreamweaver is that when you insert a picture, a dialog box automatically comes up for you to add ALT informatin or a Long Description link:
No longer do I have to remember to add the ALT description - Dreamweaver 8 makes it easy!
I recently installed Dreamweaver 8. I haven't even begun to fully delve into the changes and improvements, but right away I knew that I was going to love it when I noticed how much better the "Design View" rendering of CSS-based layouts was. No more floating elements were forced to the bottom of the page; the page looked just as it would in any popular browser. With the ability to outline divs in dotted lines or to even color them with different background colors, working with CSS-based layouts has been made easier than ever.
Take a look! Here's a CSS-based layout page (no tables used) in Dreamweaver's Design View:
The visual aids button helps you to quickly toggle on or off the dotted borders, called CSS Layout Outlines:
You can also display the CSS Layout Backgrounds, which hides any backgrounds you've defined and gives each div its own background color. It's very useful for figuring out what's going on with your CSS layout.
I'll be posting more Dreamweaver 8 tips and tricks as I discover or use them!
Jason Reckers, CEO
10:04 AM
Comments (0)
TrackBack