Adobe Creative Cloud Design Tools All-in-One For Dummies (2013)
Chapter 3: Creating a Website
In This Chapter
Creating a site
Adding pages to your site
Adding images to pages
Keeping track of your website files
Discovering HTML and HTML5
In this chapter, you see the basic steps for putting a website together, from creating your first new, blank site to adding files to websites to playing (just a little) with HTML.
A website is a collection of related pages linked to one another, preferably in an organized manner. With the proper planning and a goal in sight, you can easily accomplish the task of creating an outstanding website. Figure 3-1 shows the general structure of a website. A website starts with a main page (or its home page), the central link to other pages in the site. The main page is also the page viewers see first when they type your URL in a browser. The main page is typically named index.html but may also be index.htm or even default.htm. Check with your service provider to find the correct name.
Figure 3-1: The structure of a website.
Pages are linked by hyperlinks, or references that take viewers from one point in an HTML document to another or from one document to another. (Read more about hyperlinks and how to create them in Chapter 6 of this minibook.)
Web applications are like websites, but they go beyond the simple delivery of text and images to include interaction with databases and other advanced functionality. For instance, websites that allow you to trade stocks, manage your diet, or book your travel arrangements can be considered web applications. These days, the line between websites and web applications is blurred, but it’s important to know that Dreamweaver allows you to create and manage both.
You should understand the following terms when you forge through the steps to create a website:
FTP (File Transfer Protocol): Allows a user on one computer to transfer files to and from another computer over a TCP/IP network. FTP is also the client program the user executes to transfer files. You can use FTP to transfer web pages, images, and other types of files to a host web server when you publish your site.
HTTP (Hypertext Transfer Protocol): The client-server TCP/IP protocol used on the Internet for the exchange of HTML documents.
TCP/IP (Transmission Control Protocol/Internet Protocol): Underlying protocols that make communication possible between computers on the Internet. TCP/IP ensures that information being exchanged goes to the right place, in a form that can be used, and that it arrives there intact.
URL (Universal Resource Locator): A standard for specifying the location of an object, such as a file, on the Internet. You type the URL, such as www.dummies.com, into a web browser to visit a web page. A URL is also used in an HTML document (a web page) to specify the target of a link, which is often another web page.
Plan your site: How websites are organized is important. Typically, the purpose of a website is to convey a message, provide a service, or sell something — a product, a service, or a thought. Without sound organization, a website may fail to fill its purpose. You’ll save an extraordinary amount of time if you just think ahead and plan your site’s organization. Think about the topics you want to cover and then organize your site as you would a high school essay project, by planning the topic sentence, subtopics, and other elements. This plan can be a tremendous aid when you start mapping pages to be linked to others.
Starting a New Site
Even if you’re creating only one page, be sure to create a site. A site gives you an organized method of keeping together images and other assets and offers additional options for managing those files.
To create a new site, follow these steps:
1. In Dreamweaver CC, choose Site⇒New Site.
You can also choose Dreamweaver Site from the Create New column of the Welcome screen. The Site Setup dialog box appears, as shown in Figure 3-2.
2. In the Site Name text box, enter a name for the site.
For example, if your site’s focus is on bikes, you might name the site dogs.
3. To change the local site folder, click the Folder icon to the right of the Local Site Folder field and select a new location or choose an existing folder.
The local site folder is the path where your new site folder will be created on your computer. It’s where your site files and pages will be stored from this point on.
4. Click Save to create your new site.
Figure 3-2: Browse to your site folder (or have Dream-weaver create a new one for you).
As soon as you create a site, your site folder is waiting in the Files panel, as shown in Figure 3-3. Think of the Files panel as the control center for all your files, folders, and other assets, such as images, sound, and video that you use to create your website.
Figure 3-3: The Files panel acts as a file browser and manager.
You can use the Files panel to view files and folders, whether or not they’re related to your Dreamweaver site. You can use the Files panel to do typical file operations, such as open and move files.
Creating a New Page for Your Site
After you create a site, you typically build a main page: the index.html or index.htm page. These reserved filenames are recognized by most every web server as the starting page for a website. In addition, default.html and default.htm are also commonly recognized as starting pages. Check with your website-hosting company or Internet service provider because in some instances your server may require a different name or may prefer one naming convention over another.
The following steps walk you through creating a new page and placing an image on it:
1. Choose File⇒New.
The New Document dialog box appears.
You can create many types of new files, from blank pages to more advanced pages that include layouts already created in CSS.
2. To create a blank page, choose Blank Page⇒HTML⇒<none> and then click Create.
A blank, untitled HTML page appears in the Document window.
3. Choose File⇒Save.
The Save As dialog box appears.
4. In the File Name text box, type index.html.
Note that Dreamweaver should know to save the file to your new site folder. If you don’t see the site’s root directory (the main folder where all pages and assets are stored), click the Site Root button in the Save As dialog box to navigate directly to it.
5. Click Save.
Note that when you save a file, it appears in the Files panel.
Adding an Image to Your Page
When you have a blank page, you can add an image to it, including native Photoshop (PSD) files and Fireworks (PNG) images. You can find out more about images in Chapter 4 of this minibook, but in this section, you can take a look at how placing images affects the Files panel.
To place an image on a page, follow these steps:
1. Click somewhere on the page to place your cursor.
This is the location where the new image will be added.
2. Choose Insert⇒Image⇒Image.
Alternatively, click the Common tab of the Insert panel and click the Image button, as seen in Figure 3-4.
The Select Image Source dialog box appears.
Figure 3-4: Use the Image button on the Insert panel to add images to your page.
3. Navigate to the location of your image and click OK (Windows) or Open (Mac).
If you choose a native Photoshop (PSD) or Fireworks (PNG) file, the Image Optimization dialog box appears, allowing you to optimize your image directly in Dreamweaver.
If you select a web-ready image, such as GIF, JPEG, or PNG, and the image is outside your site folder, you see a warning. Dreamweaver alerts you that the image is outside the root folder, which causes issues when you copy pages to a web server. Click Yes to copy the file to your site’s root directory. Assign a new name there or just click Save to keep the same name and duplicate the image file into your site folder.
4. Add an appropriate description of the image in the Alternate Text text box in the Property inspector.
All images should have alt (alternate) text — text that appears before the image has downloaded or if the viewer has turned off the option to see images.
If the image is a logo, the description should include the company name as the alt text or, if it’s a photo or an illustration, describe the image in a few words, as shown in Figure 3-5.
Figure 3-5: It’s important to add alt (alternate) text to images to improve accessibility as well as search engine optimization.
From an accessibility standpoint, alt text aids screen readers (such as those used by the visually impaired) in identifying image content to users. In addition, alt text is a valuable tool in providing search engines a way of indexing image content included on your site.
You can edit an image by double-clicking it in the Files panel, or right-clicking the image and choosing Open With to select your desired editing tool. You can also use the Property inspector to see details about the image, including its dimensions and file size. You can also modify image properties, including border, hyperlink, and vertical and horizontal padding.
Start the habit of naming files and folders correctly. Follow these rules to make sure that links and pages appear when they’re supposed to:
Use lowercase for all filenames. If possible, using all lowercase letters in filenames is an easy way to ensure that you have no broken links because you couldn’t remember whether you initial-capped a filename. Some web servers (such as those based on Unix or Mac OS X) are case sensitive. Although a Windows server may be more forgiving of case, you don’t want to count on it in the event your files are moved to a different type of server. If it’s necessary to use capitalization, stick to one style and keep it consistent.
Avoid using spaces in filenames. If you need to separate words in a filename, use the underscore character instead of a space. For example, rather than use file new.html, use file_new.html or just filenew.html.
Use only one dot, followed by the extension. Macintosh users are used to having few naming restrictions, so this rule can be the toughest to adhere to. Don't name your files finally.done.feb.9.jpg, for example — it can be problematic in certain cases. Examples of dot extensions are .jpg, .gif, .png, .htm, .html, .cgi, .swf, and so on.
Avoid special characters. Characters to avoid include ampersands (&) and forward slashes (/) within a filename. These characters can have other meanings to the web server and create errors on the site.
When you create a larger site with multiple pages linked to each other, you may want to change the view of the Files panel. By clicking the drop-down list (on the top-left side of the Files panel) where your site is located, you can locate folders and other sites you’ve used recently. By clicking the View drop-down list to the right, you can change the appearance of the Files panel. Refer to Figure 3-3 for an example of how a site appears in Local view.
You can also place images by selecting them in the Files panel and dragging them to the desired location on your page.
Managing Your Website Files
You can find out more about uploading your site to a web server in Chapter 9 of this minibook, but for now, understand that you can go back and open the Site Setup dialog box at any time by choosing Site⇒Manage Sites. The Manage Sites dialog box that appears offers options for editing, duplicating, removing, exporting, and importing sites. Click Edit to add an FTP server or change the name of your site as well as add or change any original site settings.
Delving into HTML Basics
The web page itself is a collection of text, images, links, and possibly media and scripts. The web page can be as complex or simple as you want — both types are equally effective if created properly. In this section, we show you how to create a page in Dreamweaver and then investigate the HTML that creates it.
To create a blank page, choose File⇒New⇒Blank Page⇒HTML⇒<none> and then click Create. A blank, untitled HTML page appears. It has no formatting until you add tables or content. (See Chapter 7 of this minibook.) When you type on the page in the document, text appears on the web page. But there’s much more to it than that: Type some text (say, your name) on the page and click the Code button on the Document toolbar.
Dreamweaver works in the background to ensure that your page works in most recent versions of common web browsers, such as Firefox, Internet Explorer, and Safari. Lots of code is created to help the web browser recognize that this is HTML and which version of HTML it uses.
By default, Dreamweaver uses the HTML5 DocType setting every time you create a new HTML page. HTML5 is the latest proposed revision of the HTML standard, and it can be written using HTML or XTML syntax. Details about the language are found in the following section. You can change the DocType setting when you create a new document.
Select Split view by clicking the Split button on the Document toolbar; this action displays both Design and Code views simultaneously, as shown in Figure 3-6, so that you can see how your changes affect HTML behind the scenes. Select the text; then select the Text option from the Common drop-down list on the Insert panel. Suppose you then choose B (for bold) to bold the selected text. In the code view of your page, you would see that the <strong> tag was added before the text and the </strong> tag was added after the text.
You can change the orientation and arrangement of the views in Split view. To switch the Design view from the right to the left, choose View⇒Design View on Left. To arrange the views vertically, choose View⇒Split Vertically. Note: You can reverse these options just as easily from the same options on the View menu.
HTML code, though fairly straightforward, is just like any other language, in that you must figure out the syntax (the proper sequence and formation of the code) and vocabulary (memorize some common tags). You don’t have to have gobs of tape on your glasses to build good, clean web pages, but you do have to review the following HTML basics.
Figure 3-6: Working in Split view. The H1 tag makes a headline bolder and larger than other text on the page.
If you’re an experienced user, you know that you can figure out a lot about HTML code by analyzing it and modifying it. If you’re a new user, copying, pasting, and modifying code can help you understand the code that others have implemented on their pages and perhaps give you some ideas. Working in Split view also helps you understand how the items you add from the toolbars and panels translate into code.
In general, HTML tags are composed of three parts:
The tag is the main part of the HTML information — for example, <strong> for strong or bold, <div> for the div tag, or <table> for an HTML table. A tag is always constructed of a keyword enclosed in a set of brackets, such as <p> or <blockquote>.
Because most tags come in pairs, you must enter an opening tag (<p>) and a closing tag (</p>). In XHTML 1.0 Transitional (the standard used for all new pages created in Dreamweaver), all tags must be closed. You can either close a tag or create a self-closing tag by including the slash before the closing bracket: <br/>.
For example, if you make text bold by adding the tag <strong>, tell the text where to stop applying boldface by inserting a closing tag </strong>. Otherwise, the text continues to appear bold throughout the remainder of the page.
The attribute gives you a way to further fine-tune the appearance of a specific HTML tag. An attribute is always added to an opening tag and can take different values to control attributes, such as the link color, size, and destination. For example, align is an attribute of the <p>(paragraph) tag that specifies how text inside of the paragraph should horizontally align. You may also see that many HTML tags share the same attributes.
Here's an example of a paragraph (<p>) tag with a class attribute added:
<p class="bigparagraph">This is styled text</p>
The value is the color, size, and link destination specified in an attribute. For example, you can specify a hexadecimal number as the value for a color attribute. An example of a value for the bgcolor attribute of the <body> tag (which controls overall page appearance) could be "red" or"#CC0000".
One last thing: Nesting is the order in which tags appear. If a <strong> tag is applied, it looks like this: <strong>This text is bold</strong>. Add an italic tag, and you see <strong><em>This text is bold and italic.</em></strong>. Notice the in-to-out placement of the tags: You work your way from the inside to the outside when closing tags.
What Is HTML5?
HTML5 is the fifth and latest proposed specification of the HTML standard, and at the time of this writing it’s still under development. Some of the proposed goals of HTML5 are to improve semantic structure of HTML documents, or web pages, and to provide more capabilities to designers and developers with less reliance on plug-ins or add-ons to create useful web applications.
At the time of this writing, many of the latest browsers, including Internet Explorer, Firefox, Safari, and Chrome, have implemented support for many of the most common HTML5 features. Many mobile application frameworks (such as jQuery Mobile) rely on these standards to create rich, interactive mobile applications that look and behave like native applications.
Although the HTML5 spec is very detailed (and beyond the scope of this book), some notable changes and additions include:
New tags: The addition of highly descriptive tags such as <header>, <nav>, <aside>, <footer>, and <article> add a new level of semantics that was previously unachievable with heading and div tags alone.
Native media playback: Plug-in–free embed and playback of video and audio content via the (you guessed it) <video> and <audio> tags.
Offline storage: Websites and applications can now make data available for offline use via local and session storage or a more robust SQLLite database, allowing them to provide storage capabilities without an Internet connection.
Dreamweaver CC includes HTML5 page presets, including two- and three-column layouts. These are great starting points for learning HTML5. In addition, HTML5 elements are recognized in several views. Choose File⇒New⇒Blank Page and select one of the HTML5 layouts shown. (See Figure 3-7.)
Figure 3-7: HTML5 tags such as <header> and <nav>, shown in one of the HTML5 sample pages included in Dream-weaver.