Web Design Lesson 3 | Designing Tools
Web Design Tools :
Web design tools range from simple utilities to complex and robust software packages. Your choice of tools may be based upon personal preference, the scope of the project, or the tools purchased by your employer. This lesson provides an overview of some of the most common web design tools.
Starting up
You will work with several files from the web03lessons folder in this lesson. Make sure you have
loaded the web lessons folder onto your hard-drive from www.digitalclassroombooks.com/webdesign. See “Loading lesson files” in the Starting Up section of this book. This lesson provides a general overview of web design tools and also includes step-by-step
exercises. The web editors used in this lesson are available as fully functional trial versions
at no cost. If you haven’t decided which tools to use, you’ll want to download and install
the software tools used in this lesson. You’ll need a text editor, such as Text Wrangler (Mac)
available at www.barebones.com/products/textwrangler or Visual Web Developer Express available
at www.microsoft.com/express/Web. You’ll also need a program with a visual design surface such
as Dreamweaver, available at www.adobe.com/cfusion/tdrc/index.cfm?product=dreamweaver, or
Expression Web available at www.microsoft.com/expression/try-it.
Web editors versus WYSIWYG tools :
HTML and CSS use text as their foundation. Because of this, even the most simple text
editor, such as TextEdit on the Mac or Notepad on the PC, is capable of creating web
pages. These basic text editing tools, however, lack features that help with web design and
development such as checking code syntax, organizing your site folders, and uploading fi les
to web servers. In addition to text editors, there are also fully featured web editors and design
tools, such as Adobe Dreamweaver and Microsoft Expression Web. These are WYSIWYG
tools (“What You See Is What You Get”) that provide a visual layout environment, code
editing, along with website management tools. Robust text editors and coding tools that
handle web markup and programming languages such as HTML, CSS, JavaScript, and
PHP provide another set of tools for creating websites. In this overview you’ll look at the
advantages and disadvantages of each category of web design tools.
Plain Text Editors :
Plain text editors such as Notepad and Text Edit are included with the Mac OS or Windows
operating systems, so you likely already have one installed on your computer. While they are
widely available and free, they are not optimized for web design. Working with plain text
editors requires excellent knowledge of the language you are coding, because they provide
no guidance when writing code. The basic text editors also lack functionality for previewing
your pages in a web browser, or the ability to check pages for correct syntax or broken links.
These default text editors for the Mac OS and Windows can be used if you have no other
choice, but it is unlikely you will want to use them as your primary web design tool.
Text Editors For Web Design :
There are several text editors with more advanced capabilities. These type of editors provide
several benefits that make it easier to work with code. We’ll look at some of the benefits here.
Code Coloring :
Whether you are writing a new HTML or CSS page from scratch or opening a pre-existing
page, code coloring visually separates your HTML and CSS syntax from the content on your
page. Tags that include attributes and values are assigned different colors. This code coloring
makes it easier for you to locate specific code, and it can help you spot and correct errors.
Forgetting to add a closing bracket or a quotation mark, for example, causes content to be
colored differently than if tags were applied correctly. After you become accustomed to using
colored syntax, you can use the colors to quickly spot errors in HTML. Most modern text
editors also allow you to customize the color of your syntax.
Line numbers, invisible characters, and other visual aids :
Most text editors provide line numbers in documents opened for editing. Line numbers help
you orient yourself within your code and also help when collaborating with other designers
or developers. These tools also make it easier to see invisible characters such as line breaks or
carriage returns.
Code completion :
Most text editors can automate a number of certain tedious tasks, such as typing brackets
or common tags. Although the methods and shortcuts for each program are different, most
full-featured text editors have this capability. Some text editors automatically trigger code
completion as you begin to type, while others require you to trigger the code completion
and choose the code from a list of options. Code completion is useful, as it removes some of
the burden of having to remember every detail of the syntax you are using, whether HTML,
CSS, or another language.
Automation features :
Most text editors have some capability for automating repetitive tasks. Whether they are
called macros, snippets, clips, or by some other name. These automation tools give you the
ability to add reusable pieces of code to your pages and can save you a great deal of time.
Finding and replacing code :
Most text editors used for coding also have robust tools for searching and replacing code.
Although this can be helpful on a single page, it is indispensable on larger projects where you
need to make changes on a large number of pages across a site.
Much more!:
Advanced text editors are designed to scale, and accommodate advanced users. Developers
and programmers who regularly code in more sophisticated languages such as PHP
(originally an acronym for ‘Personal Home Page’), ASP (Active Server Pages), and Ruby on
Rails (a framework for web applications) often use the advanced features of text editors to
help them build their sites. In many ways, the line between text editors and WYSIWYG
editors is beginning to blur. Some text editors have built-in functionality that allows you to
build local site folders that keep track of site elements such as hyperlinks between documents,
and media such as images and videos. They may also have an internal page preview feature or
some form of FTP client that allows users to publish their pages to the web.
WYSIWYG editors :
The concept behind WYSIWYG web editors is that you create web pages in design view and
the program writes the HTML and CSS code behind-the-scenes. These tools claim to provide
a visual way to create web pages without needing to understand HTML or CSS code. To
effectively use any web design tool, you still need an understanding of HTML and CSS, and
these design tools all include methods for working with code. Editing code is often required
when using WYSIWYG editors, despite their visual layout capabilities and marketing claims.
If you are just starting out as a web designer, it’s useful to know that many web professionals
perceive WYSIWYG tools as inappropriate for professional use. While this sentiment is
not universal, there is a large population of web designers and developers that dislike all
WYSIWYG editors because they do not always produce the best code for a situation.
WYSIWYG applications generally cost more than text editors, and the time required to
learn many WYSIWYG applications can be as much as learning HTML and CSS code.
Despite the higher cost and time to learn, the use of WYSIWYG editors is widespread.
Additionally, they can speed your design work with some projects.
Most popular WYSIWYG editors also include features to help you code your pages when
entering code. These include capabilities similar to text editors, such as code completion,
code coloring, and automation. Two of the most popular WYSIWYG editors are Adobe
Dreamweaver and Microsoft Expression Web. Both applications have similar capabilities.
Dreamweaver is available on both the Mac OS and Windows platforms while Expression Web
is only available for Windows computers. Expression Web is available at no cost if you are a
student, see the note about the Microsoft Dream spark program, and has a suggested retail
price of $150 for business users. Adobe Dreamweaver is $150 if you are a student, and $300
if you are a business user. You can obtain fully functioning trial versions of these products to
evaluate them for your own use at www.microsoft.com/expression or www.adobe.com/dreamweaver.
Microsoft Dreamspark provides no-cost software from Microsoft to full-time students. If you are
enrolled as a student, you can obtain Microsoft Expression Web as part of the complete Microsoft
Expression Studio package by enrolling at www.Dreamspark.com.
Design And Layout Tools :
Both Dreamweaver and Expression Web use icon-based menus and panels to format text,
insert images, and add media such as video files, Flash movies, or Silver light objects. Adding
elements such as hyperlinks, tables, div tags, and form elements involves dragging them onto
a page.
Site management and file transfer protocol :
Both Expression Web and Dreamweaver include site management tools, including file
transfer protocol (FTP) capabilities so you can upload files to a web server from your local
machine. They also support reusable objects, such as page templates and library items, and
can check links to make sure they go to valid pages or objects. The site management tools
are helpful, as they make certain that links that are created while working on your computer
function correctly when the site is moved to a web server.
Coding environment and text editor :
Both Dreamweaver and Expression Web offer a code-only view of web pages which can be
used for modifying HTML or CSS code, or a design view to work on pages visually, or a
split view that displays the code and the visual layout at the same time.
Both programs support popular coding and scripting languages, such as JavaScript, and several
server-side languages, including ColdFusion, PHP, and ASP. Specialized menus and code
panels help you build pages and applications in the language of your choice. Expression Web
offers particular strong capabilities for designers working on sites that use Microsoft’s ASP
scripting language.
Scripting languages, such as those used to build interactive web pages or e-commerce sites, fall into
two categories: client-side and server-side. Client-side languages, such as JavaScript, run in the
web browser, while server-side languages, such as ColdFusion or ASP require special software to
be installed on the web server.
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 file 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.
Defining sites in Dreamweaver or Expression Web :
Both applications use site folder definitions for the local and remote storage locations where
a website resides. Once you define a site folder, the program keeps track of the files being
used. When you add, remove, rename, or reorganize your asset files, both Dreamweaver
and Expression Web update any related hyperlinks.The files on your local drive can also be
synchronized with the files 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-andrunning
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 www.dreamspark.com
or for other users at www.microsoft.com/expression/try-it and you can download a trial version
of Dreamweaver from Adobe’s website at www.adobe.com/products/dreamweaver.
Creating a new site in Dreamweaver :
You can create a new site from scratch without any templates or pre-existing HTML pages,
or you can import a pre-existing site, such as one you have inherited from a colleague
or a previous designer. In this first example, you’ll create a new site from scratch, using
Dreamweaver CS5. Later in the exercise, you’ll work with a pre-existing site.
1 Launch Dreamweaver and then choose Site > New Site. In the Site Name text field,
type SmoothieWorld. Next, you need to define a local folder where Dreamweaver
stores the files for the site.
2 In the Local Site Folder field a directory path is provided, which shows the location of
the folder on your hard drive. This path is often the Documents folder.
3 Click the Folder icon ( ) to the right of the Local Site Folder field; you are prompted
to choose a root folder, which will be the primary folder for this site. This folder can be
an empty folder that you have previously created, or a new folder.
Navigate to your desktop and click the New Folder icon. Name this folder
SmoothieWorld and then click Choose (Mac OS) or Select (Windows). The Local Site
Folder field is updated to show the path to the folder you created. Keep this window,
you’ll need it in the next part of this lesson.
The Local Site Folder field shows the path on your system to the root folder
where your files are stored for a site.
Next you’ll take a quick look at some of the other options in the Site Setup window.
4 Along the left side of the Site Setup window, click the Servers tab. Use the Servers
section to define the details of the remote server where your website will be hosted.
You do not need to complete the web server information to begin creating a website;
it is only necessary when you are ready to upload the content you’ve created on your
computer to a web server. You will not be uploading this site, so the information can
remain blank for this exercise.
5 Continuing to work in the Servers tab, click the + button and the Basic site settings
window appears. This window contains fields for Server Name, Connect Using, FTP
Address, Username, Password, and other options. These settings allow you to choose
both a destination and a method, such as FTP, for Dreamweaver to transfer files to a web
server. These details will vary depending upon the web server being used. If you are using
a web hosting provider, they can provide this information to you.
6 Click Cancel to close the site settings panel. Then press Save to save the settings for the
entire site. The lower-right corner of the Files panel displays the root folder information
you just entered.
7 Choose File > New and from the New Document window choose the Blank Page
option. Make sure that the Page Type is set to HTML and the Page Layout is set to
<none>, then click Create.
8 Choose File > Save and name this file index.html. Because you defined a root folder,
the new document is automatically set to save in the location you specified when you
set-up the site. By defining a site you reduce the risk of saving files into an incorrect
location. Click Save and the Files panel updates to include the index.html file.
9 Choose Insert > Image to add an image to your site. In the Select Image Source
window, use the menu to browse to the web03lessons folder and choose the
blueberry_smoothie.jpg image, then click OK. A warning appears indicating that the
image is outside the root folder. Click Yes to copy the image into the folder with the
other content for this, then click Save.
The Image Tag Accessibility Attributes window will also appear. In the Alternate Text
field type “Blueberry Smoothie” and then click OK. Alternate text (commonly referred
to as an “alt tag”) improves accessibility of your page for devices such as screenreaders.
The image is displayed on the page and the file is copied to the root folder for this site.
Importing an existing site into Dreamweaver CS5
Importing pre-existing sites into Dreamweaver is similar to creating a new site. Instead of
pointing to an empty root folder, you will identify the path to the folder containing the
existing assets for the site.
1 Choose Site > New Site. In the Site Setup window, type Lesson 03 site for the site name.
2 Click the Folder icon to the far right of the Local Site Folder field, the Choose Root
Folder window appears. Navigate to the web03lessons folder, then click Choose (Mac)
or Select (Windows), then click the Save button.
A site cache is created. In the Files panel, you can see the directory of the site.
3 Double-click the index.html document to open it. Next you will rename the images
folder in the Files panel to see how Dreamweaver updates links.
4 In the Files panel, click to highlight the label of the images folder and click again to
make it active for editing. Then type smoothieimages and press Return (Mac) or Enter
(PC). The Update Files panel appears because the folder name has been updated, asking
if you’d like to update any links to files in this folder. If the links aren’t updated, they will
become broken because of the new folder name.
A list of files that will be updated appears in the window. Click Update to update the
links. Dreamweaver updates the hyperlinks to reflect the new folder name.
5 Choose Site > Manage Sites. The Manage Sites window appears. It provides access to any
sites you have defined. Use this window to create new sites or edit the settings of existing
sites. You won’t be making any changes, so click Cancel to close the window without
making any changes.
You can use the Export button to save your site settings as an XML file with the .ste extension.
These settings can be imported into Dreamweaver to easily move sites between machines, different
versions of Dreamweaver, or share settings with other users.
6 In the Files panel, click the drop-down menu. In the menu list that appears, the directory
of your computer is displayed along with a list of your defined sites. You can use this to
switch from site to site if you manage several sites. This feature is very useful to designers
as it allows them to quickly access assets such as images or code that may be located in
another site.
Creating a new site in Expression Web :
Site folders in Expression Web are similar to Dreamweaver. As you will see, if you are familiar
with creating sites in one program, you are well prepared for doing so in the other.
1 Launch Expression Web then choose Site > New Site. In the window that appears, you
can create a one-page site, a new site with no pages (empty), or import an existing site.
2 Select the One Page Site option. In the Name field at the bottom of the window, type
SmoothieWorld2. The Location field displays the default path for your site. This is
typically a path to a subfolder named My websites within your Documents folder. You
will define the location for this folder as the desktop, so keep the window open.
3 Click the Browse button and navigate to your desktop, then click the New Folder icon
to create a new folder on the desktop. Name this folder SmoothieWorld_site then
click Open, and then click OK. The new site is created and appears in the Site View
panel the Folder List panel.
4 Choose Site > Site Settings. You can use the site settings window to modify the site name
and provide access to the settings for connecting and uploading files to your web server.
5 Click the Publishing tab. You’ll look at this tab for informational purposes only, as we
are not connecting to a web server. If necessary you could input FTP information for
connecting Expression Web to your web server.
Click the Add button to examine the publishing options, then click Cancel and click
Cancel again in the Site Settings window to close it.
Review :
Questions :
1 How is the root folder useful when creating a site on your local computer, before
transferring files to a web server?
2 What are some of the features found in WYSIWYG applications such as Dreamweaver
or Expression Web that are not found in most text editors?
3 In what three views do both Dreamweaver and Expression Web allow you to view and
edit documents?
Answers :
1 A root folder stores all resources for a website in a common location, ensuring that the
links you create to images or other pages in the site will work when the site is uploaded
to a server.
2 WYSIWYG applications provide a preview of your web page in a Design view, allowing
you to create web pages or make changes to your page without accessing the HTML or
CSS code directly. Additionally, WYSIWYG applications have site management tools for
keeping files organized and uploading content to a web server.
3 Design, Split, and Code views are accessible when working with Dreamweaver or
Expression Web. Design view displays the layout of the page; Code view displays the
code but not the layout; and Split view displays both the layout and the code.
You will work with several files from the web03lessons folder in this lesson. Make sure you have
loaded the web lessons folder onto your hard-drive from www.digitalclassroombooks.com/webdesign. See “Loading lesson files” in the Starting Up section of this book. This lesson provides a general overview of web design tools and also includes step-by-step
exercises. The web editors used in this lesson are available as fully functional trial versions
at no cost. If you haven’t decided which tools to use, you’ll want to download and install
the software tools used in this lesson. You’ll need a text editor, such as Text Wrangler (Mac)
available at www.barebones.com/products/textwrangler or Visual Web Developer Express available
at www.microsoft.com/express/Web. You’ll also need a program with a visual design surface such
as Dreamweaver, available at www.adobe.com/cfusion/tdrc/index.cfm?product=dreamweaver, or
Expression Web available at www.microsoft.com/expression/try-it.
Web editors versus WYSIWYG tools :
HTML and CSS use text as their foundation. Because of this, even the most simple text
editor, such as TextEdit on the Mac or Notepad on the PC, is capable of creating web
pages. These basic text editing tools, however, lack features that help with web design and
development such as checking code syntax, organizing your site folders, and uploading fi les
to web servers. In addition to text editors, there are also fully featured web editors and design
tools, such as Adobe Dreamweaver and Microsoft Expression Web. These are WYSIWYG
tools (“What You See Is What You Get”) that provide a visual layout environment, code
editing, along with website management tools. Robust text editors and coding tools that
handle web markup and programming languages such as HTML, CSS, JavaScript, and
PHP provide another set of tools for creating websites. In this overview you’ll look at the
advantages and disadvantages of each category of web design tools.
Plain Text Editors :
Plain text editors such as Notepad and Text Edit are included with the Mac OS or Windows
operating systems, so you likely already have one installed on your computer. While they are
widely available and free, they are not optimized for web design. Working with plain text
editors requires excellent knowledge of the language you are coding, because they provide
no guidance when writing code. The basic text editors also lack functionality for previewing
your pages in a web browser, or the ability to check pages for correct syntax or broken links.
These default text editors for the Mac OS and Windows can be used if you have no other
choice, but it is unlikely you will want to use them as your primary web design tool.
Text Editors For Web Design :
There are several text editors with more advanced capabilities. These type of editors provide
several benefits that make it easier to work with code. We’ll look at some of the benefits here.
Code Coloring :
Whether you are writing a new HTML or CSS page from scratch or opening a pre-existing
page, code coloring visually separates your HTML and CSS syntax from the content on your
page. Tags that include attributes and values are assigned different colors. This code coloring
makes it easier for you to locate specific code, and it can help you spot and correct errors.
Forgetting to add a closing bracket or a quotation mark, for example, causes content to be
colored differently than if tags were applied correctly. After you become accustomed to using
colored syntax, you can use the colors to quickly spot errors in HTML. Most modern text
editors also allow you to customize the color of your syntax.
Line numbers, invisible characters, and other visual aids :
Most text editors provide line numbers in documents opened for editing. Line numbers help
you orient yourself within your code and also help when collaborating with other designers
or developers. These tools also make it easier to see invisible characters such as line breaks or
carriage returns.
Code completion :
Most text editors can automate a number of certain tedious tasks, such as typing brackets
or common tags. Although the methods and shortcuts for each program are different, most
full-featured text editors have this capability. Some text editors automatically trigger code
completion as you begin to type, while others require you to trigger the code completion
and choose the code from a list of options. Code completion is useful, as it removes some of
the burden of having to remember every detail of the syntax you are using, whether HTML,
CSS, or another language.
Automation features :
Most text editors have some capability for automating repetitive tasks. Whether they are
called macros, snippets, clips, or by some other name. These automation tools give you the
ability to add reusable pieces of code to your pages and can save you a great deal of time.
Finding and replacing code :
Most text editors used for coding also have robust tools for searching and replacing code.
Although this can be helpful on a single page, it is indispensable on larger projects where you
need to make changes on a large number of pages across a site.
Much more!:
Advanced text editors are designed to scale, and accommodate advanced users. Developers
and programmers who regularly code in more sophisticated languages such as PHP
(originally an acronym for ‘Personal Home Page’), ASP (Active Server Pages), and Ruby on
Rails (a framework for web applications) often use the advanced features of text editors to
help them build their sites. In many ways, the line between text editors and WYSIWYG
editors is beginning to blur. Some text editors have built-in functionality that allows you to
build local site folders that keep track of site elements such as hyperlinks between documents,
and media such as images and videos. They may also have an internal page preview feature or
some form of FTP client that allows users to publish their pages to the web.
WYSIWYG editors :
The concept behind WYSIWYG web editors is that you create web pages in design view and
the program writes the HTML and CSS code behind-the-scenes. These tools claim to provide
a visual way to create web pages without needing to understand HTML or CSS code. To
effectively use any web design tool, you still need an understanding of HTML and CSS, and
these design tools all include methods for working with code. Editing code is often required
when using WYSIWYG editors, despite their visual layout capabilities and marketing claims.
If you are just starting out as a web designer, it’s useful to know that many web professionals
perceive WYSIWYG tools as inappropriate for professional use. While this sentiment is
not universal, there is a large population of web designers and developers that dislike all
WYSIWYG editors because they do not always produce the best code for a situation.
WYSIWYG applications generally cost more than text editors, and the time required to
learn many WYSIWYG applications can be as much as learning HTML and CSS code.
Despite the higher cost and time to learn, the use of WYSIWYG editors is widespread.
Additionally, they can speed your design work with some projects.
Most popular WYSIWYG editors also include features to help you code your pages when
entering code. These include capabilities similar to text editors, such as code completion,
code coloring, and automation. Two of the most popular WYSIWYG editors are Adobe
Dreamweaver and Microsoft Expression Web. Both applications have similar capabilities.
Dreamweaver is available on both the Mac OS and Windows platforms while Expression Web
is only available for Windows computers. Expression Web is available at no cost if you are a
student, see the note about the Microsoft Dream spark program, and has a suggested retail
price of $150 for business users. Adobe Dreamweaver is $150 if you are a student, and $300
if you are a business user. You can obtain fully functioning trial versions of these products to
evaluate them for your own use at www.microsoft.com/expression or www.adobe.com/dreamweaver.
Microsoft Dreamspark provides no-cost software from Microsoft to full-time students. If you are
enrolled as a student, you can obtain Microsoft Expression Web as part of the complete Microsoft
Expression Studio package by enrolling at www.Dreamspark.com.
Design And Layout Tools :
Both Dreamweaver and Expression Web use icon-based menus and panels to format text,
insert images, and add media such as video files, Flash movies, or Silver light objects. Adding
elements such as hyperlinks, tables, div tags, and form elements involves dragging them onto
a page.
Site management and file transfer protocol :
Both Expression Web and Dreamweaver include site management tools, including file
transfer protocol (FTP) capabilities so you can upload files to a web server from your local
machine. They also support reusable objects, such as page templates and library items, and
can check links to make sure they go to valid pages or objects. The site management tools
are helpful, as they make certain that links that are created while working on your computer
function correctly when the site is moved to a web server.
Coding environment and text editor :
Both Dreamweaver and Expression Web offer a code-only view of web pages which can be
used for modifying HTML or CSS code, or a design view to work on pages visually, or a
split view that displays the code and the visual layout at the same time.
Both programs support popular coding and scripting languages, such as JavaScript, and several
server-side languages, including ColdFusion, PHP, and ASP. Specialized menus and code
panels help you build pages and applications in the language of your choice. Expression Web
offers particular strong capabilities for designers working on sites that use Microsoft’s ASP
scripting language.
Scripting languages, such as those used to build interactive web pages or e-commerce sites, fall into
two categories: client-side and server-side. Client-side languages, such as JavaScript, run in the
web browser, while server-side languages, such as ColdFusion or ASP require special software to
be installed on the web server.
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 file 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.
Defining sites in Dreamweaver or Expression Web :
Both applications use site folder definitions for the local and remote storage locations where
a website resides. Once you define a site folder, the program keeps track of the files being
used. When you add, remove, rename, or reorganize your asset files, both Dreamweaver
and Expression Web update any related hyperlinks.The files on your local drive can also be
synchronized with the files 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-andrunning
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 www.dreamspark.com
or for other users at www.microsoft.com/expression/try-it and you can download a trial version
of Dreamweaver from Adobe’s website at www.adobe.com/products/dreamweaver.
Creating a new site in Dreamweaver :
You can create a new site from scratch without any templates or pre-existing HTML pages,
or you can import a pre-existing site, such as one you have inherited from a colleague
or a previous designer. In this first example, you’ll create a new site from scratch, using
Dreamweaver CS5. Later in the exercise, you’ll work with a pre-existing site.
1 Launch Dreamweaver and then choose Site > New Site. In the Site Name text field,
type SmoothieWorld. Next, you need to define a local folder where Dreamweaver
stores the files for the site.
2 In the Local Site Folder field a directory path is provided, which shows the location of
the folder on your hard drive. This path is often the Documents folder.
3 Click the Folder icon ( ) to the right of the Local Site Folder field; you are prompted
to choose a root folder, which will be the primary folder for this site. This folder can be
an empty folder that you have previously created, or a new folder.
Navigate to your desktop and click the New Folder icon. Name this folder
SmoothieWorld and then click Choose (Mac OS) or Select (Windows). The Local Site
Folder field is updated to show the path to the folder you created. Keep this window,
you’ll need it in the next part of this lesson.
The Local Site Folder field shows the path on your system to the root folder
where your files are stored for a site.
Next you’ll take a quick look at some of the other options in the Site Setup window.
4 Along the left side of the Site Setup window, click the Servers tab. Use the Servers
section to define the details of the remote server where your website will be hosted.
You do not need to complete the web server information to begin creating a website;
it is only necessary when you are ready to upload the content you’ve created on your
computer to a web server. You will not be uploading this site, so the information can
remain blank for this exercise.
5 Continuing to work in the Servers tab, click the + button and the Basic site settings
window appears. This window contains fields for Server Name, Connect Using, FTP
Address, Username, Password, and other options. These settings allow you to choose
both a destination and a method, such as FTP, for Dreamweaver to transfer files to a web
server. These details will vary depending upon the web server being used. If you are using
a web hosting provider, they can provide this information to you.
6 Click Cancel to close the site settings panel. Then press Save to save the settings for the
entire site. The lower-right corner of the Files panel displays the root folder information
you just entered.
7 Choose File > New and from the New Document window choose the Blank Page
option. Make sure that the Page Type is set to HTML and the Page Layout is set to
<none>, then click Create.
8 Choose File > Save and name this file index.html. Because you defined a root folder,
the new document is automatically set to save in the location you specified when you
set-up the site. By defining a site you reduce the risk of saving files into an incorrect
location. Click Save and the Files panel updates to include the index.html file.
9 Choose Insert > Image to add an image to your site. In the Select Image Source
window, use the menu to browse to the web03lessons folder and choose the
blueberry_smoothie.jpg image, then click OK. A warning appears indicating that the
image is outside the root folder. Click Yes to copy the image into the folder with the
other content for this, then click Save.
The Image Tag Accessibility Attributes window will also appear. In the Alternate Text
field type “Blueberry Smoothie” and then click OK. Alternate text (commonly referred
to as an “alt tag”) improves accessibility of your page for devices such as screenreaders.
The image is displayed on the page and the file is copied to the root folder for this site.
Importing an existing site into Dreamweaver CS5
Importing pre-existing sites into Dreamweaver is similar to creating a new site. Instead of
pointing to an empty root folder, you will identify the path to the folder containing the
existing assets for the site.
1 Choose Site > New Site. In the Site Setup window, type Lesson 03 site for the site name.
2 Click the Folder icon to the far right of the Local Site Folder field, the Choose Root
Folder window appears. Navigate to the web03lessons folder, then click Choose (Mac)
or Select (Windows), then click the Save button.
A site cache is created. In the Files panel, you can see the directory of the site.
3 Double-click the index.html document to open it. Next you will rename the images
folder in the Files panel to see how Dreamweaver updates links.
4 In the Files panel, click to highlight the label of the images folder and click again to
make it active for editing. Then type smoothieimages and press Return (Mac) or Enter
(PC). The Update Files panel appears because the folder name has been updated, asking
if you’d like to update any links to files in this folder. If the links aren’t updated, they will
become broken because of the new folder name.
A list of files that will be updated appears in the window. Click Update to update the
links. Dreamweaver updates the hyperlinks to reflect the new folder name.
5 Choose Site > Manage Sites. The Manage Sites window appears. It provides access to any
sites you have defined. Use this window to create new sites or edit the settings of existing
sites. You won’t be making any changes, so click Cancel to close the window without
making any changes.
You can use the Export button to save your site settings as an XML file with the .ste extension.
These settings can be imported into Dreamweaver to easily move sites between machines, different
versions of Dreamweaver, or share settings with other users.
6 In the Files panel, click the drop-down menu. In the menu list that appears, the directory
of your computer is displayed along with a list of your defined sites. You can use this to
switch from site to site if you manage several sites. This feature is very useful to designers
as it allows them to quickly access assets such as images or code that may be located in
another site.
Creating a new site in Expression Web :
Site folders in Expression Web are similar to Dreamweaver. As you will see, if you are familiar
with creating sites in one program, you are well prepared for doing so in the other.
1 Launch Expression Web then choose Site > New Site. In the window that appears, you
can create a one-page site, a new site with no pages (empty), or import an existing site.
2 Select the One Page Site option. In the Name field at the bottom of the window, type
SmoothieWorld2. The Location field displays the default path for your site. This is
typically a path to a subfolder named My websites within your Documents folder. You
will define the location for this folder as the desktop, so keep the window open.
3 Click the Browse button and navigate to your desktop, then click the New Folder icon
to create a new folder on the desktop. Name this folder SmoothieWorld_site then
click Open, and then click OK. The new site is created and appears in the Site View
panel the Folder List panel.
4 Choose Site > Site Settings. You can use the site settings window to modify the site name
and provide access to the settings for connecting and uploading files to your web server.
5 Click the Publishing tab. You’ll look at this tab for informational purposes only, as we
are not connecting to a web server. If necessary you could input FTP information for
connecting Expression Web to your web server.
Click the Add button to examine the publishing options, then click Cancel and click
Cancel again in the Site Settings window to close it.
Review :
Questions :
1 How is the root folder useful when creating a site on your local computer, before
transferring files to a web server?
2 What are some of the features found in WYSIWYG applications such as Dreamweaver
or Expression Web that are not found in most text editors?
3 In what three views do both Dreamweaver and Expression Web allow you to view and
edit documents?
Answers :
1 A root folder stores all resources for a website in a common location, ensuring that the
links you create to images or other pages in the site will work when the site is uploaded
to a server.
2 WYSIWYG applications provide a preview of your web page in a Design view, allowing
you to create web pages or make changes to your page without accessing the HTML or
CSS code directly. Additionally, WYSIWYG applications have site management tools for
keeping files organized and uploading content to a web server.
3 Design, Split, and Code views are accessible when working with Dreamweaver or
Expression Web. Design view displays the layout of the page; Code view displays the
code but not the layout; and Split view displays both the layout and the code.
About My 1 Marketplace
No comments