Documentation

A. Installation and Registration

A.1 Installation in Dreamweaver CC

If you are using Dreamweaver CC, the installation will be done through the Extend Studio Extension Manager. The Extension Manager app is automatically downloaded when you click the “CC 2015” download button in your extendstudio.com account.

You can also download it here in case you have any issues getting it from your account:

http://www.extendstudio.com/extension_manager/download

After installing and opening the Extend Studio Extension Manager you will see a list of all the Extend Studio products. Just click the “Install” button for DW FullScreen Sites and the installation process will begin.

A.2 Installation in Dreamweaver versions prior to CC

If you are using a Dreamweaver version prior to CC then you will need to open the .ZXP file in the package you downloaded using the Adobe Extension Manager.

 

 

A.3 Where to find the extension in Dreamweaver

After installing the extension, you can find it in the DW Insert Bar (Window -> Insert) in the DW FullScreen Sites category.


You can also find it in the DW Insert menu -> DW FullScreen Sites.

 

A.4 Registration

A.3.1 How to register the extension

After purchasing you will receive an email containing your serial number. You can also find the serial number in your extendstudio.com account in the My Orders section.

To register your extension and unlock the full version features you need to paste the serial number in the popup that appears when you open the interface and press the “Register” button.



A.3.2 Registration Errors
The error messages could be due to many different reasons - choose a solution from the list (below) which corresponds to the error code displayed on your screen.
301 : This message indicates that the license key which you have entered is already in use. If you are trying to install a single user license - you would have to reset the license from the Extend Studio website - "My orders" section.
License Invalid: this implies that the serial number entered by you is incorrect. Make sure you are entering the correct license key.
If it still doesn't work, go to Account "My orders" section and from there you can obtain the correct license key.
If you need more assistance regarding registration, you can email us to support [at] extendstudio.com

B. Creating a new FullScreen Page

If you want to create a new FullScreen page from scratch you need to use the “Insert FullScreen Page” button in the insert bar.

The page you’re inserting in need to be saved and it need to be part of a Dreamweaver site. Also, it is recommended that that page would be blank as any existing content will be overwritten.

After clicking the “Insert FullScreen Page” button in the insert bar an interface will open where you can define the section of your page and many other settings.

A detailed description of the parameters in this interface can be found in section “D. Configuring the FullScreen page parameters”

 

C. Using a predefined FullScreen template

To use one of the 10 predefined FullScreen template you have to click the “Insert FullScreen Template” option in the DW Insert Bar.

An interface will open and here you will be able to choose which one of the 10 template you want to use. Just click the one that you like the best and it will be inserted into the current page.

It is recommended to insert the template in a blank page as it will overwrite the current contents of the page.

 

D. Configuring the FullScreen page parameters

To edit the settings of the FullScreen page click the Edit FullScreen Page button in the DW Insert Bar.

D.1 The Sections Tab

In the Sections tab you can manage the sections of the full screen page. Basically, a full screen site is made of several content sections (each of the occupying the entire screen) that the user can navigate between using the menu or the bullets. Some widely used examples of sections would be: about us, portfolio, our services, contact, etc.

On the left hand side of the Sections tab, there is a list of sections. Using the “+” and “-” buttons you can add or remove sections and using the arrow buttons you can change the order of the sections.

On the right hand side you can edit the properties of the currently selected section. By default the first section is selected and if you want to edit another section you just have to click that section to select it in the list and the right side will update with the properties of the newly selected section.

For each section you can configure the background and several other settings.

In the background settings you have the following options:

  • Color - this will set a solid color as background for the entire section
  • Gradient - this will set a gradient as background for the section - using the color controls under the gradient bar you can define the colors of the gradient and by moving the color controls you can define the transition points of the gradient. You can also add more colors to the gradient by clicking below the gradient bar

  • Image - this will set an image as the background of the section
  • Video - this will set a video background to the section - you will need the video in MP4 and WEBM formats in order for it to be properly displayed by all browsers and you will also need to provide a “poster” image that will be shown while the video is loading.

In the “Section Settings” area we have the following options:

  • ID - this is a unique identifier for each section - you can use this to link to a section from a button or a normal link - you have to set the href attribute of the link to #SECTIONID (for example #about if the section ID is “about”)
  • Tooltip - this is the title that will be displayed near the bullet that corresponds to the section
  • Show alternate header - you can use a different header in case you have sections with contrasting backgrounds so the logo and menu won’t be hardly visible - for example if you have some sections with white background a dark logo and menu will look good but it you also have some sections with dark background you’ll have to use an alternate header that has white logo and menu
  • Full height - you can choose if you want the section to occupy the entire screen or just the height of the content
  • Arrow color - you can set a specific arrow color for each section so it will be easily visible on the section background
  • Overlay color - this is useful for adding an nice effect when you have an image or video background on the section - basically you can set a color with a transparency level of your choice to be displayed on top of the background

 

D.2 The Settings Tab

In the Settings tab you will find a few parameters that apply to the entire site:

  • Name - this is just an instance name used by the FullScreen scripts - you can leave the default or set it to something more significant (like “MyFullScreenSite” for example)
  • Show Scrollbar - if checked it will show the browser scrollbar - by default the scrollbar is not visible and when scrolling the site moves to the next section
  • Scroll duration - this is the duration of the scroll animation used to change the current section (the number represents milliseconds - set 1000 for one second, 2000 for two, etc)
  • Scroll easing - the easing is a parameter of the scroll animation that defines the look of the animation (for example the animation can start more rapidly and finish more slowly of the other way around) - just try out the options and see which one you like best.




D.3 The Header Tab

In the header tab you can configure the look and behavior of the header - this usually contains the logo and menu.

There are 3 types of header available:

  • Logo, menu - this will have the logo on the left and menu on the right
  • Menu, logo - this will show the menu of the left and logo on the right
  • None - this will show no header - use this if you only want to use the bullets for navigation

You can also create your own custom header by editing the code in the header container using DW or FlexiLayouts 3.

After choosing a header type you can configure the look of the header container and menu for both the normal header and the alternate one.

In the “header container” and “alternate header container” you can configure the following:

  • Container background - this refers to the background of the entire header and can be a color, a gradient or an image
  • Box settings - here you can customize the margin, padding, border and rounded corners for the header

In the “menu items” and “alternate menu items” sections you can configure the look of the menu for both the normal header and the alternate one.

Use the “State” control to select the menu item state that you want to configure: normal, hover (mouse over) or active (selected).

For each state you can customize the font, size, color, font weight, text align, transform, letter spacing and line height.

 

D.4 The Footer Tab

In the Footer section you can configure the footer and navigation arrow.

The first two checkboxes in the section can be used to select whether or not you want to display the footer or the arrow.

Then, in the container section you can customize the look of the footer section:

  • Background - refers to the background of the footer container and can be a color, gradient or an image
  • Box settings - here you can configure the margin, padding, border and rounded corners for the footer container

The footer has no content by default - it will just show the container at the bottom of the page. You can add text or other type of content using DW or FlexiLayouts 3.

In the “bottom arrow” section you can customize the look of the navigation arrow.

The following settings can be customized for the arrow:

  • Background - here you can set the background color for the arrow and the arrow color
  • Box - here you can configure the margin, padding, border and rounded corners for the arrow container
  • Options
    • Vertical offset - the distance between the bottom of the page and the arrow
    • Horizontal alignment - here you can choose to align the arrow to the left, center or right
    • Horizontal offset - this parameter can be used to shift the arrow to the left or right (use a positive value for right and negative for left)
    • Arrow type - here you can choose between a few arrow icons
    • Arrow size - the size of the arrow in pixels

 

D.5 The Bullets Tab

In the Bullets tab you can configure the look and behavior of the navigation bullets and the tooltips that are shown near the bullets.

The first two parameters define the position and behavior of the bullets:

  • Show bullets - you can choose to display the bullets on the left, on the right or not to display them at all
  • Show tooltips - you can choose to display the tooltips just on hover or display the tooltip of the selected section permanently

In the “Bullet Items” section you can configure the look of the bullets. Using the “State” control you can select which state of the bullet you want to configure: normal, hover (mouse over) or active (selected)

For each state you can configure the following parameters:

  • Dimensions
    • Bullet spacing - this is the space between two bullets
    • Bullet width and height - these are the dimensions of the bullet
    • Bullet scale - this is the scale ratio applied when hovering the mouse over the bullet - for example if set to 2, the bullet will be twice as big when hoveredand if set to 1 it will have the same dimension as the normal state
  • Background - here you can configure the background of the bullet
  • Box - here you can configure the margin, padding, border and rounded corners for the bullet

In the Bullet Tooltips section you can customize the look of the tooltip

In this section you can configure the following parameters for the tooltips:

  • Background - this refers to the background of the tooltip and can be a color, a gradient or an image
  • Box - here you can customize the margin, padding, border and rounded corners for the tooltip
  • Typography - here you can customize the font, size, color, weight, align, transform, letter spacing and line height for the text of the tooltip

In the Container section you can customize the look of the container that holds the bullets.

In this section you can configure the following parameters for the bullet container:

  • Background - this refers to the background of the bullet container and can be a color, a gradient or an image
  • Box - here you can customize the margin, padding, border and rounded corners for the bullet container


E. Adding and editing content in a FullScreen page

The content (text, images, etc) inside each FullScreen section can be created and edited using either FlexiLayouts 3 or Dreamweaver’s default functionality.

To edit a full screen page using FlexiLayouts 3 you simply have to go to the FlexiLayouts 3 category in the DW Insert bar and click the “Insert / Edit Layout” button.

The page will open in FlexiLayouts and you will be able to edit the content like any other FlexiLayouts page. You can also add new blocks or elements and style the contents using the Styling panel.

To add and edit content using Dreamweaver you can simply switch to Live View and then drag elements from the DW Insert bar to the page.

If you want to edit the contents of the header and footer using Dreamweaver you will have to use the “Edit FullScreen Page Header / Footer” button in the DW Insert bar. This will open the DWT template file associated to the full screen page and there you can add / edit the contents of the header and footer

 

F. FAQ

1. Can I use the FullScreen Sites license for an unlimited number of websites?
Yes. This is a single user unlimited license and this means that you can use it to build layouts for an unlimited number of websites.

2. Can I use the license to work on my both work and home computers?
We offer a secondary free license at the user's request. All you have to do is send an e-mail to support [at] extendstudio.com and ask for a secondary free license.

3. How can I move the extension to a new computer?
You will have to download the extension from your extend studio account and install in on the new computer. Before registering, you will have have to reactivate the serial number by clicking the correspondent "Reset license" button from your account.