• Create import and format text
• Create unordered and ordered lists
• Insert a Background Image
• Create, Apply and Edit Cascading Style Sheets
• Create Templates with Editable and Optional Regions
• Enhance and Nest Templates
• Use Templates to Create Pages
• Use Templates to Update a Site
Overview
Formatting text as lists
In order to help viewers to digest large blocks of text, you can break the text up into several types of lists: directory lists, menu lists, ordered lists, and unordered lists. Lists are especially helpful when you want to include a number of related topics. Using lists makes it easier for readers to scan the information on the Web page and choose which topics they would like to explore in further depth, without having to sift through a long paragraph. Lists also give the page a clean, organized look.
CSS
One of the best reasons to use CSS is that it stores the formatting rules in an external style sheet file. By keeping the style sheet file separate, all you have to do to modify each page is to simply make the alteration on the style sheet. In addition to external style sheets, you can also create embedded CSS styles. This means that the code that creates the file is inside of the HTML of the Web page, not external to it. Embedded styles can be used to override external styles. However, in general, you should avoid using embedded styles to format all the pages of a Web site; it is a better practice to keep formatting rules in a separate file from the content. Note that using external style sheets reduces the overall file sizes of your pages.
Using Cascading Style Sheets (CSS) not only saves you time in creating your Web site; it will also create a uniform appearance to all of the site's elements. Cascading Style Sheets can be used to format both text and tables. The formatting attributes that you choose can then be applied to any other element in the Web site.
Why use CSS? Well if you have a website that has hundreds of pages and you want all the link properties, text properties, margins, and background properties to be consistent. What if you wanted to change the background or font color in the website. Imagine changing that code for a hundred pages. With CSS, you can do it once and it will then be applied to all of your documents.
Templates
Templates can help you create a professional-looking Web site that feels whole and complete to the viewer. When you are building a site for the Web, you want your site to come across as unified, each page leading visually to the next so that viewers know they are on one of the pages of your site no matter which section of it they have navigated to. For starters, the navigation panel, the company logo, and the other common elements should appear in the same manner and area on every page. You could give every page the same background color, or color-code your site according to sections. Working with templates is a surefire way to be sure every page in your site has a consistent look. A template is a special kind of page that gives you a basic structure to work with. Templates are made up of locked regions, sections of the page that cannot be altered by users of the template, as well as other sections that users are permitted to customize. Some examples of these customizable regions include optional regions, sections of the template that can be visible or hidden depending on how you set them, and editable regions, sections where users can enter or alter text and content. Using templates not only guarantees consistency of design, but also will save you substantial development hours. Once your template is complete, you just plug in the content and save your pages. Templates are especially handy if your site is going to be worked on by several different people. The templates can ensure that no one will be able to take liberties with your design and site conception.
Create, Import, and Format Text
Creating and Importing Text
Much of the content on a Web site is presented in text. Text can be created in the Dreamweaver program or it can be imported from another program. Most commonly, students will be importing their text from Microsoft Word. To import text from Microsoft Word into Dreamweaver, highlight the text you want to import and then use the copy command, Cmd C (Mac) or Ctrl C (PC) and then paste Cmd V (Mac) or Ctrl V (PC). This will preserve most the formatting and generate clean HTML code. You will still need to clean it up a little. DO NOT create web pages in MS Word and then open them in Dreamweaver. Even with the "Clean up Word HTML..." command, you will still have all kinds of extra code you will need to deal with. Adobe Photoshop, Adobe Illustrator and some other programs convert text into images so that it maintains its appearance whether or not the viewer has the font installed on his/her computer.
Tips for Success The book is incorrect...The File>Import>Word Document command works only on a PC. It does not work on the Mac platform.
Formatting Text Using the Property Inspector
Using Dreamweaver, you change the font, size, and color of text in the same way as other programs. To format text, first select the text you want to alter. Then, use the Property inspector to change the font size, type, color, indents, and alignment. When formatting text, it is important to remember that it is much harder on the eyes to read text on a computer screen. Because of this, text on a Web page should be as distinct and easy to read as possible.
Changing Fonts
The Font list in the Property inspector allows you to change fonts. A font combination is a set of three fonts that are used by the browser to display a Web site. If one of the fonts is not available, the browser uses the next one in the set. For example, you can format your site with the font set Garamond, Times New Roman, and sans serif. In displaying the site, the browser will then search for your first choice, Garamond. If it isn’t available, it will search for Times New Roman. If both of these aren’t available, it will then search for sans serif. Remember to design a site that is attractive using all of the three fonts in the set that you choose. The following are lists of standard system fonts that may be helpful in creating a site. For Macintosh, the standard system fonts are: Chicago, Courier, Geneva, Helvetica, New York, and Times New Roman. For Windows, the standard system fonts are: Arial, Courier, Courier New, Impact, Times New Roman, and Veranda.
Changing Font Sizes
In Dreamweaver, the default base font size is 3. One way to change the font size is to go to the Size list and increase or decrease the size relative to the default size. For example, choosing –2 will decrease the font size from a 3 to a 1. Another way to change the font size is simply to select a font size between 1 (the smallest) and 7 (the largest) from the Property inspector. Always keep in mind that font sizes differ between Macintosh and Windows platforms, so you should try to view the page on both types of computers.
Formatting Paragraphs
Text can be formatted in two ways: as paragraphs or as headings. Text formatted as headings is distinguished from paragraphs of text because they are displayed in bold. Using headings can help to highlight certain areas of content and organize the page to make it more comprehensible to the viewer. To format text as a heading, click on any part of the text. Then, choose a heading size from the Format list in the Property inspector. There are six different heading styles: Heading 1 is the biggest and Heading 6 is the smallest.
Create Unordered and Ordered Lists
Creating Unordered Lists
Sometimes, the items on a list do not need to be displayed in any specific order. This type of list is called an Unordered List. A list of things to buy for an upcoming party is an example of an unordered list. There are a few ways to format the items in an unordered list. Paragraph indentations are one way to format an unordered list, but these are sometimes difficult to read. Instead, you can use symbols, or bullets before each item--this is called a bulleted list. To create a bulleted list, you should first select the text that you want to format. Then, in the Property inspector, click the Unordered List button to insert bullets in front of each item.
Formatting Unordered Lists
In Dreamweaver, it is possible to change the default bullet style, the round dot, to a different shape. Changing to shape of a bullet can add interest to your page, and can also separate one unordered list from another. To do this, first expand the Property inspector to its full size. Then, click List Item to open the List Properties dialog box. Change the style for the bulleted list to a square. You should remember that different browsers may display square bullets incorrectly--in some browsers they may appear as round dots. Check the formatting of your bulleted list on a number of browsers to make sure it appears the way you intend.
Creating Ordered Lists
At other times, you may want the information in a list to be presented in a specific order. Ordered lists, also called numbered lists, place a number or a letter before each item to show their sequence. A good example of an ordered list is a recipe: the instructions must be followed in a specific sequence so that the dish is prepared correctly.
Formatting Ordered Lists
Using the List Properties dialog box, you can choose numbers, Roman numerals, lowercase letters, and capital letters in creating an ordered list. Before choosing, try out a number of different options to make sure you create the type of list you desire.
Tips for Success Be wary of letting your lists go for too long. Some Information Mapping experts suggest that lists contain no more than 7 items. Obviously, this can not always be helped, but it is something to keep in mind.
Insert a Background Image
Inserting a Background Image
Background images can add atmosphere or additional branding to a Web site – but should be used with great care. When used well, they can provide new levels of depth or visual interest, but when used poorly, they can distract from your site and make it an unpleasant place at which to spend time. Background images are graphic files that are used instead of HTML-generated background colors. There are two main techniques to using background images, though all background images should be relatively small in file size and preferably in GIF or JPEG format. The first technique is called a tiled image. This consists of a very small (in height and width) graphic that repeats hundreds of times all across your Web page, creating an effect of texture or a pattern. The second technique is using a seamless image. This image will tile also if the window requires it to, but it is much larger in size and its edges blur so that it will still appear to be one image regardless of any tiling that does occur. Background colors and background images should not be used on the same page, unless a certain color must show before the background image has finished downloading.
Create, Apply and Edit Cascading Style Sheets
Using Cascading Style Sheets
Cascading Style Sheets can save you tons of time and give you greater flexibility, all by applying format preferences for you throughout your site. A Cascading Style Sheet (CSS) is composed of sets of attributes assigned either to a new name or to a pre-existing HTML tag. Using CSS, you will be able to control your content, calling up collections of attributes with one easy assignment. For instance, you might want all of your section titles to appear in Arial font, very large and green. With CSS, you can assign these attributes to a header tag and every place you use that tag, the text will appear just as you want it. Cascading Style Sheets have the added bonus of being able to instantly apply changes to your entire your site, for instance if you later decide you wanted those headers to be blue. The CSS Styles panel is the place to find all the buttons and dialog boxes you will need to experiment with style sheets on your site. The New CSS Style dialog box allows you to name a style and designate whether it should be added to a new or existing style sheet. Then, set the formatting attributes in the CSS Style Definition dialog box. Once you add a new style to a style sheet, you will be able to see it in the CSS Styles panel. Simply select the text to which you want the style to be applied and then click the style name in the list on the CSS panel. The content will immediately reflect the style attributes.
CSS styles have revolutionized the possibilities of Web development. They give so much control and have so many time-saver benefits that it is almost painful not to use them. And yet many developers make this terrible choice. Why would they choose not to use CSS styles? Because, unfortunately, the Web has not yet caught up with CSS styles. The lack of standardization across browsers has brought us to current moment wherein each browser supports a different subsection of CSS styles (some versions not supporting them at all), and often there is not even standardization in the way they are displayed even if they support the same feature. One can only assume that the time is not far when CSS styles will be supported better. Until then, however, be sure to consider who your target viewer constituency is and what their preferred browser versions are likely to be.
Tips for Success Text is not the only content that can be formatted using CSS styles. Other elements such as backgrounds, borders, lists, and tables can also be worked with.
Understanding CSS Style Sheet Settings
The coding for the CSS styles can be found in the style sheet file. CSS styles are made up of a selector and a declaration. The selector is the tag or name employed by the style declarations. The declaration segment displays the property (or properties) and the associated values. For instance, the property font-weight might have the value bold.
Inline Style Sheets and Html Formatting
Inline Style
An inline style is part of the individual page code, but it is written in the body section, rather than the head section. Inline styles refer to a specific instance of a tag, rather than a global tag style on a page.
The Inline Style goes in between the body tag and looks like this.
Insert open body tag here
part 1
Insert closed body tag here
This will make the text appear yellow.
HTML Formatting
HTML formatting is inline and between the body tags. It looks something like this.
This will cause the text to appear red with a size 4 Arial font.
By default, Dreamweaver is set to use CSS, if you want to use HTML formatting, you must change your preferences.
Embedded Style Sheets
Understanding Embedded Styles
An external style sheet is a separate file with a .css extension that contains a collection of rules for formatting elements of a Web site. Because external style sheets can be applied to many pages at the same time, they are an excellent way to make sure that the formatting of an entire Web site is consistent. There may be times, however, when you want one page of the site to look different from all of the others. You can create a style that is only used on one page by using embedded styles. Unlike external files, the code of embedded styles is embedded within the code of that page. Embedded styles override external styles. Note the difference between embedded styles and inline styles.
Here is what the CSS code looks like when you format a document with "Page Properties..." ("Use CSS instead of HTML tags" setting must be selected).
The CSS code lies in between the head tags. The code begins with . The first part
is telling the browser to see whatever is in between the body, the td (table data) or the th (table header) tags as the font family, font size and font color listed above. So we will see white text, with Georgia font at 14px.
The next set of code
effects only what is in the body tag, in this case the background will be black and the margins will be setting accordingly.
Creating, Applying, and Modifying a Custom Style
The New CSS Rule dialog box is used to create embedded styles and styles that are added to external style sheets. To get to this dialog box, go the CSS Styles panel and click the New CSS Rule button. To indicate that the style should be an embedded style, go to the Define in section and click the option button that says This document only.
Figure 1. New CSS Rule dialog box
A Custom style, also called a class style, contains a number of different formatting attributes that you can apply to text or other page elements. After you name a style and click OK, the CSS Rule Definition dialog box will open. This dialog box contains eight categories whose settings can be defined.
Tips for Success When you name a custom style, you must begin the name with a period (.). If you don’t type a period at the beginning of a custom style name, it will automatically be added for you.
After you have created a custom style, it will appear in the CSS Styles panel along with the other styles. If you want to apply this custom style to a portion of a Web page, first select the element to which you want the style to apply. Next, click the style in the Style list of the Property inspector. To edit a custom style, click the style you want to edit and then click the Edit Style button in the CSS Styles panel. Finally, use the CSS Rule Definition dialog box to change the settings. One great feature about CSS is that any changes that you make to the style are automatically altered on each individual Web page where the style has been inserted.
Redefining HTML tags
Whenever you change an element of a Web page using the Property inspector, Dreamweaver adds an HTML tag to the element. At some point, you may decide that you want to change an HTML tag yourself in order to alter the elements that have that tag. For example, you can redefine the tag, normally used to make text bold, to mean that everything with this tag will be put in green italics. To do something like this, first go to the New CSS Rule dialog box and click the Tag option button. Next, click the Tag list arrow to view all available HTML tags. Then, click the tag you want to redefine, and click OK. This will open the CSS Rule Definition dialog box. In this dialog box, you can change the formatting settings. After you save the new tag, all of the selected text will be formatted according to the new settings you have chosen. Later, if you want to change the settings again, click the setting in the CSS Styles panel. This will show the list of all customized HTML tags. Select the HTML tag you want to edit. Then, click the Edit Style button. This will open the CSS Rule Definition dialog box where you can make the necessary changes. Note that there are two modes in the CSS Styles panel: All (document mode) and Current (selection mode). Make sure you understand the difference between these.
External Style Sheets
External CSS style sheets are useful if you want to ensure that the formatting of all of the elements on your Web site is uniform. The advantage of CSS Style sheets is that you can easily change the appearance of an entire Web site without touching any of the content. This may be much more efficient than using embedded styles, which require that you make alterations to each individual page. Using embedded styles also leaves much more opportunity for error.
Attaching an External CSS Style Sheet to a Page or Template
Another great feature about external CSS style sheets is that you can attach them to pages that you have already created. In this case, all of the HTML tags on the page are affected by the formatting rules that you have created for the style sheet. For example, if the external style sheet indicates that all paragraph text will appear in Helvetica 12-point black, then all of the text in your Web page that is wrapped in the
tag will change to Helvetica 12-point black when the style sheet is applied to the site.
In order to attach an external style sheet to a page, use the Attach Style Sheet button in the CSS Styles panel to open the Attach External Style Sheet dialog box. In this dialog box, look for the name of the external style sheet file you want to attach. Indicate here whether to link or import the file. In general, it is a good idea to link the file. This way, the content of the page is separated from the style sheet file.
When you have created a Web site in which the pages are based on a template, you can simply attach an external style sheet to the template itself. This will save a lot of time and effort because you don’t have to attach the style sheet to every page in the site. You only have to complete the process once, when you attach it to the template file. In this case, the template will be directly affected by any alteration you make to the style sheet. The template will then update all of the pages to which it is attached.
Adding Hyperlink Styles to a CSS Style Sheet
External style sheets can also be used with links in a Web site. To create styles for all the links in your site using external style sheets, you must first open the style sheet in the document window. Then, open the New CSS Rule dialog box and click the Advanced option button. Choose one of the selectors from the Selector list. Clicking OK will open the CSS Rule Definition dialog box. Here, you can decide how you want the link to be formatted. Note that not all browsers recognize link styles.
Figure 18. New CSS Rule dialog box with Advanced Selector Types displayed
Adding Custom Code to a CSS Style Sheet
One way to make changes to a style sheet is to add code to it. To do this, you must first open the style sheet file in the document window. Then, click the place in the sheet where you want to add code. Then insert your code. For example, you can add code to the body tag of the style sheet that changes the background color of all tables on the page from red to pink
An External Style Sheet can be created by copying what is between style tags in the head content after you format your page using "Page Properties" and pasting it into the code view of a DW document (you can also highlight the code in between the style tags and use the File>Export>CSS Styles... command). You must then save the document with a .css extension.
Here is what the content of a .css documents looks like:
Create Templates with Editable and Optional Regions
Creating Templates from an Existing Page
Let’s say you have designed and built one Web page that you love. The thought occurs to you; why not base my whole site around this look? Why not use this layout and design for all the rest of the Web pages? Just use the Save As Template command, and your page will be saved as a template. A .dwt extension is employed when pages are saved as Dreamweaver templates. You can find them in the Templates folder, located in the root folder of your Web site. Even if your site does not have a Templates folder, Dreamweaver will automatically generate one for you the first time you save a template. You can find a list of templates in your site in the Templates folder in the Files panel. If you want to preview a template prior to opening it, use the Templates button in the Assets panel, on the Assets panel toolbar, and select a template from the list. You will be able to have a look at it in the preview window, located above the templates list.
Defining Editable Regions
Dreamweaver wants to make certain to uphold the integrity of your template. That is why, when you save a template, Dreamweaver will lock all the content of the page by default. This is to ensure that no one else will be able to add content or modify the template until you have told the software exactly which regions of the template are meant to be adaptable and which are to be fixed. Obviously, if your template is going to be functional, at least one editable area will have to be included. Otherwise, you would have a collection of the exact same page over and over. The look should be consistent but the content should change from page to page. To designate editable regions, use the Editable Region button on the Templates tab of the Insert bar to open the New Editable Region dialog box. Use this dialog box to indicate a name for the region. To make it easier to differentiate them on the template page, the editable regions are contoured in blue and the names of the editable regions are shown in blue shaded boxes.
Tips for Success To create a template from scratch, click File on the menu bar, click New to open the New Document dialog box, click the General tab, click Basic page in the Category list, click HTML Template in the Basic page list, and then click Create.
Defining Optional Regions
Not all the manipulatable regions of your template have to be editable ones. Optional regions can also be added to a template. An optional region can be either visible or hidden depending on the editor’s choice. For instance, a supplementary logo on the bottom-left corner of the page or a secondary navigation panel can be made into an optional region, allowing users of the template to decide whether or not to display it on the page they are creating. The conditional statement if is used to control the visibility status of an optional region. To designate a page element to be an optional region, first select the element you wish to designate, and then use the Optional Region button on the Templates tab of the Insert bar. This will open the New Optional Region dialog box, where the region can be named and the new default visibility status can be specified.
Defining Editable Optional Regions
You may want to give the template users even more flexibility in filling it out. If you want them to be able to show or hide a page element and modify its content too, then the element can be designated as an editable optional region. For instance, a promotional banner might be a good editable optional region so that users of the template could change its text depending on what the current monthly promotion was, and if there wasn’t any this month, or if it was a page that didn’t call for the banner, they could hide the region entirely. To designate an editable optional region, first select the proper element, then use the Editable Optional Region button on the Templates tab of the Insert bar to open the New Optional Region dialog box. This dialog box will allow you to name the region and specify the default visibility status.
Tips for Success To remove an editable region from a template, select the editable region in the document window, click Modify on the menu bar, point to Templates, and then click Remove Template Markup.
Enhance and Nest Templates
Setting Parameters for Optional Regions
In some instances, you will create a template that is used by a wide range of people. In these cases, it may be beneficial to create optional components of the template. This way, users can choose from a variety of content elements to tailor the template to their needs. You can specify how these optional regions are displayed. For instance, based on specific conditions, you can choose whether they are displayed or hidden. For instance, let’s say you have two optional regions named band and songs, respectively. You could set the songs optional region parameter to band so that the songs optional region would appear only when the band optional region is showing, and would be hidden only when the band optional region is hidden. To do this, click the Advanced Settings tab of the New Optional Region dialog box to set the parameters of an optional region. The Advanced Settings tab can also be used to write a conditional expression in JavaScript.
Nesting Templates
When making large Web sites that include many pages, you may also want to use nested templates. Nested templates also come in handy when your web site is used by a wide variety of people who have different needs. Nested templates are based on other templates and are useful in defining an area of a page (or an entire page) in more detail. With nested templates, when you make a change to the original template, it is automatically applied to the nested template as well. To make a nested template, first create a new page based from the original template. Next, click the Save As Template command to save it as a nested template. After you have done this, you can alter the nested template by defining new editable regions and adding or removing content. In making nested templates, you should be aware that the editable regions in the original template will be passed on as editable regions in the nested template as well. However, any time you add a new editable or optional region to an editable region that was passed on from the original template, the original editable region will become a locked region in the nested template.
Creating Repeating Regions and Repeating Tables
In many Web sites, the format of certain elements is repeated in a large number of places throughout the site. For example, sites that sell clothing often use the same format to display all of the items in their catalog. When you use templates to create these kinds of sites, these areas can be defined as repeating regions. Within repeating regions, you can define certain areas as either locked or editable. One kind of repeating region is a repeating table. A repeating table has a pre-defined structure that remains the same every time you insert it. This simplifies the process by which template users add content. To create a repeating table, you must first decide where you want the table to be placed and set the insertion point there. Then, click the Repeating Table button on the Templates tab of the Insert bar to open the Insert Repeating Table dialog box. Then, set the properties for the table, including the number of rows, the number of columns, and the number of editable rows the table will have. Remember that in templates containing repeating tables, the top row is locked and the other rows below it are editable.
Creating Editable Attributes
It is also possible to allow users of your template to change attributes of a locked region. You can allow users to change the source file for an image in a locked area or the cell background color of the top row. Use the Editable Tag Attributes dialog box to specify that certain attributes of locked regions be editable. To do this you should first specify that it should be editable, give it a label, and choose its type and its default setting. Using the Template Properties dialog box, you can define editable attributes of elements in locked regions. In this way, template users can make changes to the element’s attributes.
Tips for Success To format text in an editable region, you must select the table cell. If a dialog box opens telling you that you have inserted a repeating region inside a
tag, click OK to close the dialog box.
Use Templates to Create Pages
Creating Pages with Templates
Using templates saves you time in creating a page because the format and some of the content of the page has already been competed. Another advantage of using templates is that they help you to create new mages that exactly match the other pages on the site. This gives the site a professional and uniform look and feel. There are a number of different ways to create a page from a template. The easiest way is to use the File tab on the menu bar. After you click File, then click New. This opens the New Document dialog box. Then click the templates tab and choose your template. Clicking Create completes the process.
Modifying Editable Regions
You should be aware that whenever you make a new page from an existing template, some areas of the page will initially be locked. When you move the mouse to the locked sections, its appearance changes into the shape of a circle with a line cutting through it. This icon indicates that the user cannot make changes to the region. You can tell which regions are editable because these are outlined in blue and marked with a blue shaded label. You can editing, delete, or add content to the editable region of the template-based page in the same way that you perform these tasks on any other page. Just select the element you want to modify and make your changes.
Tips for Success You can create a new page based on a template by right-clicking (Win) or control-clicking (Mac) a template in the Assets panel, then clicking New from Template. To attach a template to an open page, drag the template from the Assets panel to the document window.
Modifying Object Attributes
Sometimes, certain elements in the locked region of a template have editable attributes. Thus, the user can modify these elements, even though they cannot modify other elements in the same region. To do this, use the Template Properties dialog box. The editable attributes for the page are listed and the banner property selected. Also, you should remember that the banner’s source attribute can also be altered. To change the source file of the banner, type in the URL for the graphic you want in the banner text box.
Using Repeating Tables
Because the structure of repeating tables has already been defined, it is easy to make changes to it than it is to create a new table from scratch. You can click on any place that is outlined in blue and then insert graphics or type text in that area.
Tips for Success Use the buttons in the top row of a repeating table to add or delete rows, or to move a row up or down in the table.
Creating Links in Template-Based Pages
In adding links to template-based pages, you can only use document relative links, since these are the only kinds that work. Keep in mind that the path to a link actually goes from the template file, not from your newly created the template-based page, to the linked page. You can check to make sure that all of the links you have inserted are document relative. To do this, first select the page element to which you want to add a link. Then, drag the Point to File icon from the Property inspector to the page you want to link to in the Site panel.
Attaching a Template to an Existing Page
It is also possible to add a template to a page that you created previously. For instance, perhaps you constructed a page before you learned about templates. You can go back to this page and decide to change it to be based on a template that you recently created. However, before you attach a template to an existing page, you should delete the parts of the page that are repeated in the template. For example, both your page and the template may have the same picture of your cat. You should delete the picture of your cat that already appears on the page, because it will be duplicated in the template. After deleting the duplicate content, select the template in the Assets panel. Then, click Apply. This will open the Inconsistent Region Names dialog box which allows you to specify in which portions of the template you should place the content from your page.
Use Templates to Update a Site
Making Changes to a Template
It is important to remember that all sites, especially successful ones, must continually be reevaluated and updated in order to meet the changing needs and interests of its viewers. This often requires you to change both your Web site’s appearance and its functions. When you have used templates to create your Web site, the process of updating it is much easier and less time consuming. Changing a template is very similar to creating one. First, open the template from the Files panel or Assets panel. Next, edit the content as you would a non-template-based page. You can also change editable regions to locked regions, and vice versa. To turn locked regions into editable regions, use the New Editable Region command. To change an editable region into a locked region, first select the region. Then, right-click can allow you to choose the Remove Tag
Updating All Pages Based on a Template
When you make a Web site that is based on templates, you can change all nested templates by making alterations to the original template. To do this, save the modified template. This will open the Update Template Files dialog box which asks you if you want to update all the files in your site that are based on that template. After you click Update, the Update Pages dialog box opens. This gives you a full listing of all the files that were updated.
Tips for Success To update all pages based on a template, click File on the menu bar, then click Save. The Update Template Files dialog box opens. Click Update to open the Update Pages. The Status area will show what files were updated. Click Close.
1. create a folder on your hard drive and name it with your Pipeline username (e.g., mine is magallegos)
2. create another folder in that folder and name it mat153
3. log in to Xythos and create a folder named mat153 (see module 09)
4. define your site in Dreamweaver as per the instructions in module 09
5. slice the winning comp (be sure to check the comments in the comps assignment if you are not sure which one this is) as per the instructions in module 07
6. be sure to save the file as index.html
7. be sure to the files in the folder you made in step 2
8. you should now have a file, index.html, and a folder images in the mat 153 folder
9. open index.html in Dreamweaver
10. in the properties inspector, click the Page Properties button
11. set the properties in the Appearance and Links sections
12. click the code view, your code should look something like this: (code not here)
13. note that the properties you set in the properties inspector created an embedded style sheet. You will use this style sheet for the rest of the documents in your web site. to do so, we must export it to an external style sheet.
14. highlite the all of the code inbetween the grey tags (this is the pink and blue code)
15. go to Text>CSS Styles>Move CSS Rules, and a window will open
16. select A new style sheet...
17. save the style sheet as main.css in the mat153 folder
18. delete all the code you highlited in step 14
19. got to Text>CSS Styles>Attach Style Sheet...
20. select main.css that you created in step 17
21. you will repeat steps 19 and 20 for the rest of the pages you create for your site.
22. upload index.html, main.css and the images folder to Xythos
23. post the URL to index.html in Xythos to the CSS Exercise discussion in Module 10
0 comments:
Post a Comment