Support Contact:
Phone: +40 (21) 310.63.42; Forums: extendstudio.com/support


How to create a website visually in Dreamweaver

How to create a website visually in Dreamweaver

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:

Create the Dreamweaver site


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.

How to create a new Dreamweaver 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.

choose your Dreamweaver site location

3.After choosing your site location and name, click “Save”. Create a new page and save it within the Dreamweaver site. Open the page.

Create a new file in your Dreamweaver site

Locate the Flexi Layouts 2 PRO inside Adobe Dreamweaver

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.”

Locate the Flexi Layouts 2 PRO extension inside your Dreamweaver Insert Menu

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.

Choose a new standard layout, a grid based layout or start from a quick template

Create the layout structure

1. The Flexi Layouts 2 PRO Editor will open in Dreamweaver and you will be able to create the layout visually.

start creating your first layout visually, using the Flexi Layouts 2 PRO Editor

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.

make the page wrapper 100% wide

3. Add 3 rows inside the wrapper and rename them: header, content and footer.

add the header, content and footer to your page

4. Add pading top 40px and padding bottom 25px to the header element.

add inner elements and align them to center

5. Add a 7px top border to the header area. The color of the border is: #525152.

insert a horizontal menu bar from the Flexi Layouts 2 PRO snippets sidebar

6. Select the content element and add 20px top margin to it.

edit the horizontal menu items using the Flexi Layouts 2 PRO Editor

7. Select the footer area:

– add white background color;
– add 5px top margin;

add border to the footer area using the color picker

- go to the border tab and add top and bottom grey border – color #CCCCCC.

add border to the footer area using the color picker

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:

save the page as a Dreamweaver template using the Flexi Layouts 2 PRO Editor

Add header and footer content

1. Select the header element and split it in 2 columns: logo-area and menubar-area.
Make the logo holder 225px wide.

add your template editable regions

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.

Save the page as a template

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.

save the page as a Dreamweaver template using the Flexi Layouts 2 PRO Editor

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.

add your template editable regions

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.

save the page as a Dreamweaver template

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.

Add content to the index page

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 the image inside your index page

– add 10px padding to all image sides;

– add 1px border to the image and make it grey #CCCCCC.

add the image inside your index page

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.

add the image description and center the text using the Flexi layouts 2 PRO Editor toolbar

Use the page as a template for the rest of the pages

1. Back to Dreamweaver, create a new page inside your site and name it “about”.

create the about page inside the Dreamweaver site

2. Edit it with the Flexi Layouts 2 PRO Editor and apply the main-template file to it.

Apply the Dreamweaver template to the about page

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 content to the about page using the Flexi layouts 2 PRO Editor

– 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.

add content to the about page using the Flexi layouts 2 PRO Editor

4. Back to Dreamweaver, create the portfolio page and open it. Click the Create/ Edit Layout and apply the main-template to it.

create the portfolio page inside the Dreamweaver site

5. Inside the portfolio page you can create a list with images that represent your photo categories.

add content to the portfolio page using the Flexi layouts 2 PRO Editor

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.

create the contact page inside the Dreamweaver site

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.

add content to the contact page using the Flexi layouts 2 PRO Editor

8. When you are ready save the page.

save the page inside the Flexi layouts 2 PRO Editor

You can see a live version of this site here.

Create a 2 columns elastic CSS layout with Flexi CSS Layouts Dreamweaver extension

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.

Universal AIR XML Generator – a review By Pablo Lara H

This is a guest post by By Pablo Lara H
http://pablolarah.cl/

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:

  1. It is the language behind the Content Management Systems. And the slideshows of all kind.
  2. Use as a language for any kind of documentation.
  3. Database development.
  4. Flash applications. See this interesting article http://www.graphicmania.net/approach-to-understand-xml-and-flash-workflow/

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.

Universal AIR XML Generator (UAXG)

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.


Conclusion:

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.

Sources

http://en.wikipedia.org/wiki/SVG

http://en.wikipedia.org/wiki/XML

http://en.wikipedia.org/wiki/XHTML

http://en.wikipedia.org/wiki/Synchronized_Multimedia_Integration_Language

http://webdesign.about.com/od/xml/a/aa060401a.htm

http://webdesign.about.com/od/epub/a/look-at-epub.htm

http://webdesign.about.com/od/beginningxml/f/blfaqxmlwhy.htm

http://webdesign.about.com/od/xml/a/aa091500a.htm

http://www.extendstudio.com/blog/2010/11/universal-air-xml-generator-for-slideshows-and-galleries-launched/

Pablo Lara H is an illustrator, photographer and web designer currently based in Chile. Visit him at this page http://pablolarah.cl

Pablo Lara H is an illustrator, photographer and web designer currently based in Chile. Visit him at this page http://pablolarah.cl
Page 3 of 29123451020...Last »