Article
Dreamweaver 8 Does Standards!
Installing Apache Alongside IIS
You can use IIS to serve Web pages with server-side includes—a job it does perfectly well—but if you want to install Apache on a computer that already has IIS, use these instructions to do so.
If you type http://localhost/ into your Web browser following a successful installation, Apache's test page will display (localhost, as mentioned before, refers to your computer). By default, Apache will look in the directory C:\Program Files\Apache Group\Apache\htdocs\ to find files to serve. To change this setting, we need to edit httpd.conf, the main Apache configuration file. From the Start menu, select All Programs > Apache HTTP Server > Configure Apache Server > Edit the Apache httpd.conf Configuration File to open this file in Notepad. Find the line that starts with DocumentRoot, as shown in Figure 2.6, "Editing httpd.conf in Notepad".
Figure 2.6. Editing httpd.conf in Notepad.
This snippet tells the server where your Website files are stored. Let's change this location to one that's more easily accessed. Create a folder on your C: drive called Apache Sites, then change the line in httpd.conf as follows:
#
# DocumentRoot: The directory out of which you will serve your
# documents. By default, all requests are taken from this
# directory, but symbolic links and aliases may be used to point
# to other locations.
#
DocumentRoot "C:/Apache Sites"
Note: Back up Before you Edit!
Before you edit httpd.conf, make a backup copy of the file so that if it all goes wrong, and Apache fails to start, you have a copy of the original file with which you can replace the edited file. httpd.conf can be found in C:\Program Files\Apache Group\Apache\conf.
The original directory will also be referenced later in the file, in a section that looks like this:
#
# This should be changed to whatever you set DocumentRoot to.
#
<Directory "C:/Program Files/Apache Group/Apache/htdocs">
Change this to:
#
# This should be changed to whatever you set DocumentRoot to.
#
<Directory "C:/Apache Sites">
Note: Security Matters!
Resist the temptation to reuse an existing folder to host your Website, or—even worse—to set DocumentRoot to C:/. Remember: the outside world may be able to gain access to the directory you set up for your Website; you don't want strangers to be able to download or modify your personal files!
In order for Apache to take notice of any changes to httpd.conf, we need to restart it. In Windows XP, you can do so from the Services Management console, which can be opened by selecting Services from the Administrative Tools menu, or by selecting Run… from the Start menu and typing services.msc into the dialog that appears. To restart Apache, locate Apache in the list of services, right-click on it, and select Restart.
Mac OS X
If you're running Mac OS X, you're in luck! Apache is already installed: you simply need to start it up. To do so, access System Preferences, select Sharing, and start up Personal Web Sharing. You should then be able to enter http://localhost/ in your browser to view the Apache test page. On the Mac, this page is served from /Library/WebServer/Documents/—a location to which you may or may not have access, depending on the way your user profile is set up. Fortunately, Apache on the Mac is also configured to give each user his or her own Web space at http://localhost/~username/. The files for this directory are located in the Sites folder of your home directory.
Testing SSI
Before we complete this part of the setup procedure, we need to check that SSI works properly on our system. To do this, we'll create a very simple Web page that contains an include. Create the following two files in your text editor:
Example 2.1. hello.html
<p>Hello, World!</p>
Example 2.2. ssi_test.shtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Testing SSI</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
</head>
<body>
<!--#include file="hello.html" -->
</body>
</html>
You should now be able to open a browser, type
http://localhost/ssi_test.shtml
into the address bar, and see "Hello, World!" display on the Web page as in Figure 2.7, "Confirming that SSI works correctly."
Enabling SSI
If you see a blank page, or the code from ssi_test.shtml, you need to tweak your Apache configuration to enable SSI. Open your httpd.conf file, and look to see if the following lines are present and uncommented.
AddType text/html .shtml
AddHandler server-parsed .shtml
Figure 2.7. Confirming that SSI works correctly.
Got a Comment?
In httpd.conf, lines beginning with # are ignored by Apache. These are comments. These lines provide you with the ability to add notes to the file, or disable certain options without deleting them. For example, the following options are disabled in httpd.conf. To re-enable them, we'd remove the # from the start of each line.
# AddType text/html .shtml
# AddHandler server-parsed .shtml
If these lines are not present in the file, add them: they ensure that files with the extension .shtml are parsed by the server. Next, locate the following section:
#
# This should be changed to whatever you set DocumentRoot to.
#
<Directory "C:/Apache Sites">
#
# This may also be "None", "All", or any combination of "Indexes",
# "Includes", "FollowSymLinks", "ExecCGI", or "MultiViews".
#
# Note that "MultiViews" must be named *explicitly* ---
# "Options All" doesn't give it to you.
#
Options Indexes FollowSymLinks MultiViews
In the Options line, add Includes to the list to enable SSI for that directory:
Options Indexes FollowSymLinks MultiViews Includes
You should also check that the following line is not commented out:
AddModule mod_include.c
You'll need to restart Apache in order for the server to take notice of your changes. Once you've done so, re-test your page in the browser.
Note: SSI Default on Mac OS X
The default installation of Apache on Mac OS X should have SSI enabled. If it doesn't, or you need to edit httpd.conf for some other reason, you may need to log in as an administrative user.
Using IIS as your Local Web Server
If you already have IIS installed and set up as your local Web server, you should be able to use the .shtml extension to parse files that contain SSI directives. To test SSI, create the hello.html and ssi_test.shtml files as described in the previous section, and save them to the directory C:\Inetpub\wwwroot. Run the test by loading http://localhost/ssi_test.shtml in your browser.
If your test include page doesn't work, you'll need to check that pages with the .shtml extension are being parsed. To do this, open the IIS Management Console (Control Panel > Administrative Tools > Internet Information Services). Right-click on your Website and select Properties. Select the Home Directory tab in the Default Web Site Properties dialog, then click the Configuration button.
Check that .shtml is listed under Extension and that its executable path ends in ssinc.dll, as shown in Figure 2.8, "Checking that .shtml is being parsed to enable includes on IIS."
Hosting your Site
The site that we'll create should be able to be hosted on any standard hosting account that allows the use of Server Side Includes. This requirement should be covered by even the most basic packages of most shared hosting accounts. However, if you already have a hosting account and want to check that SSI is available, simply upload the test pages we created earlier to test our own servers. If those pages work, SSI is available to you.
Figure 2.8. Checking that .shtml is being parsed to enable includes on IIS.
Setting up Dreamweaver
Now that your server is set up and ready, let's create a directory for the Code Spark Website. Go to the Web server's root folder (C:\Apache Files for Apache; C:\Inetpub\wwwroot for IIS) and create a folder called codespark. This folder will be accessible as http://localhost/codespark/.
Now, we're ready to set up Dreamweaver and begin development on the site. Open Dreamweaver, and select Site > New Site…. This should open the Site Definition wizard. In the first screen, name your site codespark and enter its URL: http://localhost/codespark.
After clicking Next, you'll be asked if you want to work with a server-side language. You do not need to use server-side technology to create the site in this book, as we're using Server Side Includes, but the server technologies Dreamweaver is asking about here are those it uses to work with database-driven Websites in ASP, PHP, ASP.NET, JSP, and ColdFusion. Select No in this dialog, and move on.
In the next screen, select the radio button labeled Edit directly on server using local network, then browse for the site directory that you have created.
Figure 2.9. The wizard displaying a summary.
Following this step, the wizard completes, providing a summary of the details of your site's creation similar to that shown in Figure 2.9, "The wizard displaying a summary." If it all seems fine, click Done to create the site and open it in Dreamweaver.
Your Workspace
Depending on the selection that you made when you installed Dreamweaver, you should now be presented with a large gray screen with panels positioned either on its left (as shown in Figure 2.10, "The Dreamweaver 8 Workspace.") or its right.
Figure 2.10. The Dreamweaver 8 Workspace.
When the panels appear on the right, Dreamweaver is in "Designer" Workspace layout; when the panels are on the left, it's in "Coder" layout. You can choose whichever view you prefer by selecting Window > Workspace Layout > Coder or Designer. The Dual Screen option can be handy for those with a dual screen setup.
Figure 2.11. Changing the Workspace.
I tend to work with the panels on the left, so the screenshots in this book will show that configuration; however, the way you like to arrange your Workspace is a personal choice: it won't make any difference to the project.
Note: Dreamweaver Panels Explained
If you're new to Dreamweaver, you'll find that you soon pick up the different panel and toolbar purposes as we use them. Each time we use a new panel or tool I'll explain how to locate it and use its basic functionality. All panels can be opened and closed from the Window menu. Each panel is grouped with other panels that do similar things. You can switch between them using the tabs at the top of the panel group, as shown in Figure 2.12, "The Assets Panel is part of the Files Panel group" below.
Figure 2.12. The Assets Panel is part of the Files Panel group.
Setting Preferences
You can make many changes to the way that Dreamweaver operates by setting your own preferences. There are certain preferences that it's important to set correctly when you're developing a site to Web standards, so, before we create our first page, let's make sure we're starting out with these essential preferences in place.
Open the Preferences dialog (Edit > Preferences) and select the General category to display the information shown in Figure 2.13, "Setting General preferences.". Make sure that:
- Allow Multiple Consecutive Spaces is unchecked. If this option is checked, it will allow you to insert a series of non-breaking spaces ( ) each time you press space more than once. If you need to add more space to your layout, it's best to do so with CSS, to ensure that Dreamweaver isn't working against you!
- Use
<strong>and<em>instead of<b>and<i>is checked.<b>and<i>are prime examples of presentational markup: they don't convey the reason why an element is bold or italicized, just the fact that it is styled as such.<em>and<strong>tell the browser (or Web indexer, screen reader, or any other program that wants to parse the site) that the text is emphasized or strongly emphasized. This is another example of the semantic document structure we discussed in Chapter 1, What are Web Standards? We will discuss screen readers, and the way they read out text, in more detail in Chapter 7, Accessibility and Chapter 8, Building the Site. - Use CSS instead of HTML tags is checked. This one's fairly self-explanatory: we don't want Dreamweaver inserting any
<font>tags for us!
Figure 2.13. Setting General preferences.
Select the Accessibility category, under Show Attributes when Inserting, and check all four checkboxes, as shown in Figure 2.14, "Setting Accessibility preferences." This means that, when you enter any of these elements, Dreamweaver will display additional dialogs that prompt you to enter the accessibility attributes for those elements. This makes it less likely that you will forget to enter these important attributes as you create a document.
Figure 2.14. Setting Accessibility preferences.
There are lots of other preferences, but most relate to the way you work with the product: they don't affect the actual documents that you're working on in the same way as the preferences we've discussed here. If you find that something about the development environment is annoying you, however, check your preferences: there may be a way to modify the program's behavior to suit you.
Summary
In the course of this chapter we've made some key decisions about how we'll proceed with the development of this site. We've decided on the elements that we want to include in our site, and we've come up with a layout that contains all those elements. We have considered the best way to build our site in order to manage the common elements that will display on every page of the site, and, because the site could become very large as we add articles and tutorials, we've decided to use Server Side Includes (SSI) to manage these common elements. In order to do so—and be able to test the site locally—we installed a Web server and checked that SSI works. Finally, we created the site in Dreamweaver, and set up the preferences we need in order to get a head start on the path to developing a standards compliant Website.
Making these kinds of decisions at the start, and setting our systems up on the basis of these decisions, means that you can begin the development process with a clear understanding of where you're heading, and what you hope to achieve. It's important to consider how the site will grow and develop. You can't preempt everything that might possibly happen, but, when planning the development, if you consider how the site might be likely to evolve over the next year, these expectations can support your decision-making process. For example, we might not have made the decision to use SSI if the site was never going to be any more than a three-page brochure site, as the issues of copying and pasting and re-uploading content would not have existed for that type of project.
In the next chapter, we'll look at XHTML. We'll discover how it's different than the HTML you may already have used, and how Dreamweaver can help you to use XHTML in a site's development.