Web Design with HTML and CSS

(National Geographic (Little) Kids) #1

Defi ning sites in Dreamweaver or Expression Web


Lesson 3, Web Design Tools 45

Templates and reusable elements
Dreamweaver and Expression Web both provide templates which are essentially parent
master pages that link to any number of child pages. A master page controls the structure and
appearance of multiple attached pages, so any change made to a master page is automatically
applied to the child pages. This provides a consistent appearance across websites and ensures
that site changes are applied quickly and globally across a site. Templates also allow you to
make certain sections of a web page non-editable so that other users don’t manipulate certain
content or design elements. For example, the content of a News page could be designated as
being fully editable, but the navigation bar could be marked as being off -limits.


Both Dreamweaver and Expression Web support the same template fi le format, which uses the
.dwt extension. Expression Web also has an alternative template system called ASP.NET Master
Pages. The ASP.NET template system is designed for .asp websites, whereas the .dwt template
can be used for any HTML-based site.

Defi ning sites in Dreamweaver or Expression Web


Both applications use site folder defi nitions for the local and remote storage locations where
a website resides. Once you defi ne a site folder, the program keeps track of the fi les being
used. When you add, remove, rename, or reorganize your asset fi les, both Dreamweaver
and Expression Web update any related hyperlinks.The fi les on your local drive can also be
synchronized with the fi les on your remote web server using integrated FTP capabilities.


In the following two exercises, you will walk through the initial steps of creating a new
site in Dreamweaver and Expression Web. These exercises are designed to get you up-and-
running in either (or both) of these popular web design applications. If you will only be
working in a text editor, you can skip to the “Using design tools in the browser” exercise, or
if you already plan to use only one visual editor or the other, you need to only complete the
section relating to that WYSIWYG editor.


Obtaining Expression Web or Dreamweaver.


Remember that Expression Web is available at no cost for students at http://www.dreamspark.com
or for other users at http://www.microsoft.com/expression/try-it and you can download a trial version
of Dreamweaver from Adobe’s website at http://www.adobe.com/products/dreamweaver.

Free download pdf