In this tutorial you will learn how to create a site visually by using one of our very easy to use Dreamweaver extensions called Flexi Layouts 2 .
You can see a live version of the site that we will create here.
Flexi Layouts is a drag-and-drop site builder that works inside Adobe Dreamweaver and makes it incredibly easy to have your site up and running in few minutes, starting from scratch. Here are the steps to create a site by using a quick layout:
1. In order to use the Flexi Layouts 2 PRO, you need to create a html page inside a Dreamweaver site.
Open Dreamweaver and, from the main menu go to Site> New Site.
2. Choose your Dreamweaver site name and location. It’s recommended that you choose a suggestive site name so that it’s easier for you to navigate through sites – in case you will have more.
By clicking the “folder” icon you can browse for a folder location on your computer.
3.After choosing your site location and name, click “Save”. Create a new page and save it within the Dreamweaver site. Open the page.
1. The Extend Studio products are available inside the “Insert” window in Dreamweaver. Click CTRL+F2 (Command+F2 for MAC) to display the Insert Window.
Click the “Create/ Edit Layout button.”
2. The Flexi Layouts 2 PRO Editor will open.
You can choose to start a new layout from scratch, or a grid based layout.
Also, you can start with one of the quick layouts that are available in the extension.
1. The Flexi Layouts 2 PRO Editor will open in Dreamweaver and you will be able to create the layout visually.
2. Make the main wrapper 100% wide and add a background image to it. You can download the background image that has been used in this tutorial from here.
3. Add 3 rows inside the wrapper and rename them: header, content and footer.
4. Add pading top 40px and padding bottom 25px to the header element.
5. Add a 7px top border to the header area. The color of the border is: #525152.
6. Select the content element and add 20px top margin to it.
7. Select the footer area:
– add white background color;
– add 5px top margin;
- go to the border tab and add top and bottom grey border – color #CCCCCC.
8. After styling the main layout structure, add an inner row inside each element:
– change their name to header-inner, content-inner and footer-inner;
– make the inner elements 960px wide;
– center the elements using the “Align” option from the Sidebar.
The layout should look like this:
1. Select the header element and split it in 2 columns: logo-area and menubar-area.
Make the logo holder 225px wide.
2. Open the Flexi Layouts 2 PRO snippets sidebar and add an image.
After dragging the image element into the logo holder, the browse window will appear and you will be able to choose your logo image.
3. Open the Flexi Layouts 2 PRO snippets sidebar and go to header elements section. Select the horizontal menu bar and drag it into the menubar holder element.
4. Select the hmenubar1 element from the Structure tab:
-from the background color remove the blue gradient.
5. Customize the menu items:
– change the menu items color to grey #7D7D7D;
– make the menu items text bold.
From the “State” section, select the “hover” state and make the menu items text color for the hover state black.
6. Align the menu items to the right:
– select the hmanubar1_list item;
– from the toolbar align the imtems to the right.
7. Select the footer area and split it in 2 columns: the copyright-area and the social-area.
– open the Snippets sidebar and, from the “Footer elements” drag the copyright element inside the copyright area.
8. Double click on the text from the copyright area to edit it.
9. Change the copyright text color to black from the toolbar.
10. Split the social area in 2 columns:
– in the right column drag a text element;
– align the text to the right;
– add a 23px top margin to the text element;
– inside the social area element drag the “social icons” element from the Snippets sidebar.
1. Ater you finish editing all the details save the page as a template. From the Flexi Layouts 2 PRO Editor go to File> Save as template.
2. Inside the right sidebar you can choose the regions that you want to be editable in your site:
– make the content region editable;
– click the “Done” button from the top-right corner when you are ready.
3. After you click the “Done” button, a popup will open asking you to add a name to the template page.
After adding the name click “Ok” and the template will be created.
The template is saved inside the “Templates” folder that is automatically generated inside the Dreamweaver site once you create the template.
Also, the template instance is automatically applied to the index page. So next step is to open the index page and start adding content to it.
1. Open the index page inside the editor and start to add content to it using the Flexi layouts 2 PRO Editor:
– split the content row in 2 rows – one for the image and another for the image description;
– from the snippets sidebar add an image inside the image holder;
– add 10px padding to all image sides;
– add 1px border to the image and make it grey #CCCCCC.
2. Drag a text inside the image description area:
– make the text black #000000;
– center it using the top toolbar.
Then save the page and close the Editor.
1. Back to Dreamweaver, create a new page inside your site and name it “about”.
2. Edit it with the Flexi Layouts 2 PRO Editor and apply the main-template file to it.
3. Start adding content to the about page:
– split the inner content in 2 columns – the content and the sidebar;
– add 20px right padding to the content area
– drag a header and then a text element from the snippets sidebar to the content area;
– add 25px padding to the sidebar area;
– and an image to the sidebar area;
– add a grey #CCCCCC border to the sidebar area element.
After you finish editing, save the page and close the Editor.
4. Back to Dreamweaver, create the portfolio page and open it. Click the Create/ Edit Layout and apply the main-template to it.
5. Inside the portfolio page you can create a list with images that represent your photo categories.
6. Back to Dreamweaver, create the contact page and open it. Click the Create/ Edit Layout button to open the Editor and add the template to the page.
7. Start adding content to the contact page:
– split the content area in 2 columns;
– a dd the contact information inside the right column – drag a header element and a text element from the snippets sidebar;
– and a quick contact form inside the left column.
8. When you are ready save the page.
You can see a live version of this site here.
A liquid layout is percentage based. In other words, a 100% width layout will span to the entire screen, regardless of the user’s resolution. When using a liquid layout the content will take advantage of all the available space which is good if you have a lot of text. As a best practice for keeping the layout readable, you should set a max width and min width: for example the min width 960px means the layout will not shrink below the 1024×768 resolutions and the max width 1260px will not let the layout get bigger than the 1400px screen resolution. If you started the layout as a liquid layout and want the rows inside also liquid (adjust themselves to the screen resolution and keep proportions) then all the divs inside are calculated as a percentage of their parents. You can as well mix fixed columns with liquid columns.
This is a guest post by By Pablo Lara H
XML is extensible markup language. XML is used to link, store, exchange and carry data . In a very simple way, it is a language to build other languages. The other languages are, for example, MathML, SVG (Scalable Vector Graphics), SMIL and XHTML. It is a language that make easy to tag the information.
Why is important?
SVG images and their behaviors are defined in XML text files. This means that they can be searched, indexed, scripted and, if required, compressed. Since they are XML files, SVG images can be created and edited with any text editor, but specialized SVG-based drawing programs are also available. And now are known because they are a important part of the HTML5.
All major modern web browsers except Microsoft Internet Explorer (IE), support and render SVG markup directly. The Internet Explorer 9 beta supports SVG.
XHTML (eXtensible HyperText Markup Language) is a family of XML markup languages that mirror or extend versions of the widely used Hypertext Markup Language (HTML), the language in which web pages are written.
SMIL, the Synchronized Multimedia Integration Language, is a W3C recommended XML markup language for describing multimedia presentations. It defines markup for timing, layout, animations, visual transitions, and media embedding, among other things. SMIL allows the presentation of media items such as text, images, video, and audio, as well as links to other SMIL presentations, and files from multiple web servers. SMIL markup is written in XML, and has similarities to HTML.
So, you are beginning to guess the applications. Those are:
XML has found a place in the world of e-publishing via EPUB. Electronic Publication (EPUB) is an open ebook standard from the International Digital Publishing Forum (IDPF). This is the format used by Kindle, for example.
The Universal AIR XML Generator can create and update the XML of galleries and slideshows of any site, making the tagging and resize process very simple. It is a drop dead simple to use and it comes in a handy AIR application.
Let’s see how we can create a beautiful gallery.
Step 1 Create a new project.
You have to give a name to the project, select the path (relative and absolute). The UAXG is explaining every step. For example, you can read there that the Relative Paths are recommended for simple urls.
Step 2 Select the template
You have to select a template. It can be a template from the scratch or a slide or gallery given as an option.
The options are CU3ER, XML Flash Slideshow, Flashgallery.org slideshow, SlideShow Box, SlideShowPro and PhotoSlide, PhotoWallFX, Polaroid Gallery and Scrolling Gallery from FlashXML.net. And a new clean template to customize, of course.
In this example I have selected a Custom Template.
Step 3 Select the images and tag them.
As you can see, I have been uploading images and tagging them. I can add a custom url if I want.
Step 4 Setting the sizes of the images
We have here the parameters for the images. For example, if I need thumbnails and full page previews, I just have to settle the sizes.
Step 5 Adjusting the XML file
And now I can see the skeleton of the XML file. I can add values as link, thumbnail tag, etc, customizing the template if I want.
Step 6 Previewing the XML file
Step 7 Publishing
In this step you can publish for your local host or straight to the web with the FTP option.
Step 8 You have a brand new XML file.
Universal AIR XML Generator (UAXGis a very easy of use tool for generating or fixing XML files used in web galleries or slideshows. And it has a very affordable price.
Pablo Lara H is an illustrator, photographer and web designer currently based in Chile. Visit him at this page http://pablolarah.cl