eMockups :: Image to Web Prototyping :: eMockups Home :: Rapid Prototyping & Mockup to xHTML :: Website Prototyping, Pure CSS, Dreamweaver & Visual Studio Support

The secret to a successful website is very much the initial design. The design is the interface that your customers see. It has to overcome many hurdles to be successful. It needs to be familiar, so that the users can guess which link to click, to get to where they want to go. It has to be innovative, so that your users don't get bored and click elsewhere, and it has to be fast. Don't expect your users to wait until your fantastic movie downloads.

eMockups - "bridges the gap between good design and faithful execution of your design to the Internet"

Good design can clear these hurdles effortlessly. Layout of controls and features rely on a close understanding of how humans interpret information in text and graphic form. Getting the balance between simplicity and technically advanced functionality is key to effortless user browsing. Providing the right features to hand that work as expected within social conventions is the mark of a good designer.

Just because you are a good designer doesn't neccessarily mean you are a good web developer. Typically many design houses use third-party contractors for their web work. More business is being done on the Internet and this trend is set to continue. Internet sales now account for a significant slice of commerce in the US and EU. More and more businesses are waking to the realisation that having a web presence is "just not good enough".

eMockups makes your life easier, it bridges the gap between good design and faithful execution of your design to the Internet. We offer a service that streamlines your design to web operations with consistent execution at a price that is sure to save you money. We use solid coding methods to ensure validation and quality and we don't tie you in to eMockups. Our web projects are open for modification and enhancement. The following sections describe the technical aspects of our service.

Our CSS is fully compliant with the World Wide Web Consortium (W3C) specification for CSS and can be validated against their model. Although many of the web browsers currently available offer advanced styling features not strictly part of the CSS 2.1 standard and consequently we will not include them in your web project, as they won't validate. This doesn't mean that you shouldn't use advanced styling features, but support across muiltiple browsers can be thin.

An example of differing support with modern web browser technology is the opacity feature, which fades the selected image transparent by percentage points until invisible. Opacity is not CSS 2.1 compliant however many browsers do support this feature. The properties to apply this style are different for some browsers. Opera/Firefox browsers use the property "opacity: 0.8;" to make an image 80% transparent, Internet explorer uses the property "filter:alpha(opacity=80);".

eMockups - CSS Web Page Regions eMockups provides solid CSS in cascadable divs marked out in the template. This means that the Template web page work area is broken into regions that has a style associated. The diagram to the right shows how a typical web page is created.

All default styles for background colour, font sizes, font family etc are placed within the <body> section of the style sheet. These default styles will apply to all objects unless a style is specifically applied. This approach allows for a very flexible way of styling whole blocks of content or individual objects.

An example would be to simply style the paragraph tag or  tag. A  rule of say "font-size:0.8em;" could be applied to all  instances within the page. However you may want the  elements within the #masthead div to be a little larger. The rule #masthead p {font-size:1.2em;} would target all  elements located within the boundaries of the masthead div and increase their font size by 20%. Similarly you could target the all anchor tags within the content div:
#content a, #content a:hover, #content a:visited {color:#E1E7CB;} #content a:hover{text-decoration:underline;}
This rule would change the default colour of all hyperlinks within the content div to a nice mushroom colour, and enable link underlining when the mouse was over (moused over) the link.

All eMockups web project will have customisable cascade regions as standard.

If you are creating websites using the ASP.NET framework the chances are you are using Microsoft Visual Studio® or Microsoft Express Editions of Visual Web Developer®. ASP.NET is a web application framework allowing developers to create dynamic websites, web applications and services. ASP.NET has simplified the process of attaching to data sources and manipulating data. The tools within Visual Studio allow the developer to create solid websites with full data integration without writing a single line of code.

ASP.NET master pages (like Dreamweaver Templates) allow you to create a consistent look and feel for the pages in your website. The master page defines the standard behaviour that you want for all of the pages (or group of pages) in your website. You can create individual content pages which are merged with the master page. This produces a web page that combines the layout of the master page with the content from the content page.

eMockups can provide you with a Visual Studio® Master Page for your web project. You only need to create the content pages to get your web project going. Editing a Master Page is as simple as editing any xHTML page. Special delimiters called contentplaceholders are inserted into the page where the content will be merged at runtime.

eMockups - Master Page eMockups Master Pages can be called from the Visual Studio IDE. From the Solution Explorer, click on the root for your web project. Right-click and select "Add New Item" from the menu. Select "Web Form" from the list of templates and assign a meaningful name to the web page. You can also select the development language of choice. This is typically Visual C# or Visual Basic. Ensure that the "Select master page" checkbox is checked and click "Add". The eMockups Master Page for your web project will be displayed. Select the Master Page and click OK. The new page will be added to the website root hierarchy. If you open the new page you will notice that only the editable areas are those defined by the contentplaceholders.

For ASP.NET development Master Pages are a significant advantage to tracking and maintaining large and small websites.

The eMockups Visual Studio Master Pages are created with Visual Studio 2008 Professional. If you are using Visual Studio 2005 or Visual Web Developer 2005 our Master Pages should work . If you are unsure you should consult with your supplier before running the Submission Wizard.

If you are developing straight xHTML, classic ASP, PHP or Coldfusion websites the chances are you are using Adobe Dreamweaver® to write the code. Dreamweaver has been the de-facto standard for web development for many years and has good integration with PHP and mySQL and with Adobe Coldfusion. Dreamweaver allows a user to develop visually stunning websites without writing code. The code it does create is W3C compliant and for the most part well structured.

Templates are a great way to maintain consistency across a website. Static HTML pages have traditionally been edited on a page by page basis - until the advent of Dreamweaver. Dreamweaver uses editable regions as the delimiter for where the content page starts and stops, but unlike Visual Studio the whole page of HTML is written without the merging process. In many ways this makes the content pages easier to markup, especially if you are using a text editor which most website professionals tend to do.

A defined editable region details parts of a page which are editable. Anything that falls outside an editable region cannot be edited within a page created using a template. All new pages created from a template are designated with the template name. A common scenario would be to place all content that will be changed across pages into editable regions. Everything that should remain consistent, such as navigation, logos, images, colours and positioning can be outside an editable region, meaning that changes cannot be made on a page created from the template. The reason for these non-editable parts is that they can be updated across all pages which use the template, when changes are made to the template. This stops you from needing to change individual pages when making slight amendments to content.

As with Master Pages eMockups template define at least two editable regions; one for access to the <head> section of the web page and another to add main content. It is important to have access to the <head> part of the web page as client side javascript would need to be placed there for the indivdual content page. In many situations you would not normally want to include javascript code in the template when it was only applicable to one content page.

Updating Templates is very easy, you could edit the template with your changes, save the file and cascade those changes to all content pages designated with the same Template name.

The eMockups Dreamweaver templates are created with Dreamweaver CS3. If you are using an earlier version of Dreamweaver our templates should work with version Dreamweaver MX. If you are unsure you should consult with your supplier before running the Submission Wizard.

Need a Callback?
Contact Us

Sitemap
Feedback

Frequently Asked Questions	Is eMockups good for me and my business?	How To Videos
Learn about the submission process	Learn about the eMockups Checkout
Website Prototyping (technical disscussion)	Learn about the Member Tasks page