Creating the Mock Site

Creating the Mock Site

After all design photo-types have been finalized, it is time to create what might be called the mock or alpha site. Implementation of the mock site starts by cutting a digital comp into its pieces and assembling the pages using HTML and, potentially, cascading style sheets ( CSS ). Try building the site using templates so that the entire site can be quickly assembled. However, do not put the content in place during this phase. Many of today’s modern publishing tools aid in the assembly of sample pages from screen composites. For example, consider the digital home page composites of the Demo Company site shown below.
We then can use a tool such as Macromedia Fireworks (www.macromedia.com/software/fireworks) to “slice” the sample layout into its appropriate pieces.

Designers should be cautious when using the HTML produced by slice and save features of applications such as Fireworks or Adobe ImageReady. These applications often produce non-standard, very complex, or difficult-to-maintain markup.

With the various pieces that make up the Home Page and the various sub-pages of a site, a Web designer can use a Web editor to assemble the components into fully working pages lacking real content; greeking text of the form “lorem ipsum dolor sit amet” should be used to give pages form. The fully constructed mock site may lack real content, but can give developers and testers a true flavor of how the site will eventually work.

Producing the HTML
While visuals and technical elements are very important to Web designers, the heart of nearly every modern Web page is still markup. Creation of HTML/XHTML should be taken very seriously as it must be a stable foundation upon which we will build presentation and interactivity.


Interactivity of page
Build with server and client side programming
Presentation of page
Build with HTML, CSS, flash and media elements
structure of page;
Build in HTML / XHTML


Yet despite its important as the page’s foundation, Web designers often are more concerned with how they creation is. In truth, there are pros, and cons to every method of HTML page and some of their pros and cons are presented in one of the images in the last post.
The reality of creating HTML documents is that there are occasions to use nearly every approach. For example, making a quick change of a single tag often is fastest in a pure text editor, saving out large existing print documents might make sense using a translator.