Slicing and Roll-overs

Slicing in photoshop CS3
This exercise is designed to give you some experience in slicing an image in photoshop CS2 or CS3.
Advantages of slicing:
1. Smaller images load faster
2. You can optimize each slice, also mix gif, jpg and png.
3. Creating rollovers
4. Creating "hotspots" to click
5. Add animation
In this exercise, you'll complete the following tasks:
IMPORTANT: read both Create slices from guides and Create slices from the slice tool BEFORE you begin, then choose whichever method is more appropriate.
Create guides
Create slices from guides

Create slices using the slice tool

Create guides
1. open the file you have chosen in Photoshop
2. if not visible, select View>Rulers or Ctrl-r (pc) cmd-r (mac)
3. right-click the ruler and set the units to pixels
4. drag from the ruler to create guides around the areas where you want to create slices
Create slices from guides

This method is only recommended if you have only a few areas that you want to slice. Otherwise, as in the example below, you get more slices than you need. In that case, you will need to combine and delete slices to get the desired effect.

1. select the slice tool

slice tool

2. click slices from guides

slices from guides

3. if you have a complex layout, you will end up with more slices than you need... in this case, I ended up with over 80 slices

80 slices

4. select the slice select tool (underneath the slice tool)
5. shift select the slices you want to combine, then right-click and select combine slices or delete slices as needed
6. your image should now look something like this

note: I only have slices where needed, around navigation elements, images, and text areas:
slices

7. if there are any areas that you would like to designate to use html text instead of image text, double-click the slice and select the no image option from the drop down menu in the slice options window
8. select File>Save

note: be sure to save your file as a PSD to preserve the layers, that way you can always go back and make changes.
no image slice

why use html text vs image text?

1. html text loads quicker
2. html text is easier to edit (you don't need to open the file in photoshop to edit)
3. search engines can find it easi

Create slices with the slice tool

This is the most flexible method for slicing images. The slice tool allows you to draw your own slices, then auto generates the slices it needs. If you have the Snap option selected, when you draw the slice, it will "snap to" your guides making it easier to get them perfectly aligned.

1. select View>Snap To>Guides (make sure that there is a check mark in front of Guides)

snap

2. select the slice tool

slice tool

3. click and drag diagonally in between guides to draw slices
4. select the slice select tool (underneath the slice tool) to edit or resize slices

draw slices

5. if there are any areas that you would like to designate to use html text instead of image text, double-click the slice and select the no image option from the drop down menu in the slice options window.
6. select File>Save

Note: be sure to save your file as a PSD to preserve the layers, that way you can always go back and make changes
no image slice

why use html text vs image text?

1. html text loads quicker
2. html text is easier to edit (you don't need to open the file in photoshop to edit)
3. search engines can find it easier

Export html and images for the web

Now, we will save the file in a format that can be used to create a web page from. Photoshop CS2 & CS3 generate html and images in tables and CSS. Tables have been the standard for a number of years, but now that CSS is supported by most browsers reliably, many web designers are taking advantage of the greater flexiblity that CSS posesses.

1. select File>Save for Web
2. in the save for web window, select Preset: JPEG High

jpeg preset

3. click the options button and select Edit Output Settings...

output options

3. select Generate Table or Generate CSS use the default settings for both
4. click OK

table or CSS

5. click Save, the Save Optimized As window will open
6. click the Save as type: drop-down menu, select HTML and Images (*.html)
7. name the file index.html
8. browse to your web site folder
9. click Save

save as

6. if you did it correctly, you should end up with a folder titled images and a file titled index.html

Creating rollovers in Adobe Photoshop and exporting rollover images for the web
This exercise is designed to give you some experience in creating image rollovers in photoshop.
Image rollovers add a dynamic and interactive element to your web pages. They work like this, as the user moves the cursor over an image that uses a rollover script, the image will be swapped for another image.
You will need to create two sets of images in order to create the rollover effect. One set for the static mode or state and another set for the dynamic or rollover state.
You will then export the sliced photoshop images to be used in Adobe Dreamweaver.
In this exercise, you'll complete the following tasks:
Create rollover images using layer effects
Create rollover images using new layers
Export rollover images for the web


Create rollover images using layer effects

This is a very simple method of creating rollover effects using text layer effects. By simply turning the layer effect visiblily on and off, we can create the two sets of images necessary to put together our rollovers in Dreamweaver.

1. open your completed comp in photoshop, make sure that this is your original PSD file

complete comp

2. select the text layer where you want to create a rollover effect (in this example, I have selected the About the Rally text layer)

selected layer

3. at the bottom of the layers palette, click the fx icon and the layer effects pop-up menu appears
4. select a layer effect (in this example, I choose Outer Glow)
5. repeat steps 2, 3 and 4 for each text layer you want to create the effect for
6. when you are finished, your layers pallete should look something like this:

note: Effects and Outer Glow has been added underneath each text layer
select fx

7. you should now see the effects you created on your image.

note: the text in the leftside navigation bar now glows

Here is an example of the effect

Create rollover images using new layers

With this method, you will create new layers where you want to create the rollover effect. Again, we will create the two sets of images necessary to put together our rollovers in Dreamweaver.

1. open your completed comp in photoshop, make sure that this is your original PSD file

complete comp

2. make sure that your slices or guides are visible, then use the rectangular marquee to draw a selection around the slice where you wish to create the rollover (you must do this for each rollover, so you will need to move or redraw the marquee for each one)



3. you will now create new layers that contain your rollover images (in this example, I placed them in a layer group titled background)
4. there are tons of different ways to do this, I will give you two examples:
1. use part of the images and change it using adjustments, filters, etc (in this example, I selected the layer that contained the nav bar image)
1. using the rectangular marquee, select the pixels you want to copy and then paste in to new layers.
2. with the new layer selected, add a filter, adjustment, etc
3. make sure you leave the visibility for these layers turned on
2. fill the selection with a color, pattern or a gradient (you must create a separate layer for each rollover)
3. when you are finished, your layers pallete should look something like this:

note: I have a separate layer for each of my rollovers: about, gallery, and contact


7. you should now see the effects you created on your image

note: I added a chalk and charcoal filter to the layers

Export rollover images for the web

Now that you have created the rollover effects, you will save them as new images in you web site folder

1. select File>Save for web and devices...
2. in the dialogue window, select the slice select tool (circled)
3. double click one of the slices that you created a layer effect for





4. in the Slice Options window, rename the slice with a "_down" added to it (or something similar)
5. click OK
6. repeat steps 9 - 11 for the remaining slices your created layer effects for




7. holding down the shift key, select the slices you created layer effects for
8. select JPEG high in the presets and click Save



9. in the Save Optimized As window, select the following:
1. Format: Images Only
2. Settings: Default Settings
3. Slices: Selected Slices
10. make sure you have your root folder selected(the one that contains your html and images files)
11. click save

note: if the files were not saved in the images folder, you neen to drag them into that folder. If you had your images folder selected when you saved, there will be a new images folder in your original images folder.

CSS and Templates - Week 10

Learning Outcomes fro CSS and Templates
• 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

Praise God - Isaiah 51

22 This is what your Sovereign LORD says,
your God, who defends his people:
"See, I have taken out of your hand
the cup that made you stagger;
from that cup, the goblet of my wrath,
you will never drink again.

23 I will put it into the hands of your tormentors,
who said to you,
'Fall prostrate that we may walk over you.'
And you made your back like the ground,
like a street to be walked over."

Isaiah 44 - Idols and the LORD's Proclamation

I was reading Isaiah 44 today and two things struck me: what the LORD says about Idols and the LORD's proclamation to not forget us.

In verses 15 and 16 the LORD says this:

15 It is man's fuel for burning; some of it he takes and warms himself, he kindles a fire and bakes bread. But he also fashions a god and worships it; he makes an idol and bows down to it.
16 Half of the wood he burns in the fire; over it he prepares his meal, he roasts his meat and eats his fill. He also warms himself and says, "Ah! I am warm; I see the fire."

The part that struck a cord with me and gto me thinking was the last quoted part of verse 16. It states that a person uses part of the wood that they used to make an idol to also make a fire and feed and warm themselves. This part of the verse struck me because it reminds me of sin. We use sin to feed our sinful desires and to comfort us. And, since we can see and feel our sin physically a lot of times, it seemst that we have more faith in something that we see that in God, which we do not see (well most of us do not see Him). I can really relate to times where, in my sin, I said, "Ah, I am warm; and I see the 'goodness' of my actions." It is such a sickening feeling that I get when I look back at sin in my life... sin yesterday... sin today... We get a momentary satisfaction while we are "burning." But in no way is sin good. The mark is to be holy, to be in God's will and without sin. And sin literally means to miss the mark. What a perfect word for missing God's purpose for us generally and specifically. I don't want to miss the mark that the LORD has pre-ordained since He called me. As a matter of fact, I KNOW that I will sin and miss the mark here and there, but I also KNOW that I will continue to have a repentant heart and attitude about any and all of my sin. Thank the LORD that He said that He is faithful to forgive and to restore and to not forget.

The second part that stuck out to me was verses 21-22 which say this:

21 "Remember these things, O Jacob, for you are my servant, O Israel. I have made you, you are my servant; O Israel, I will not forget you.
22 I have swept away your offenses like a cloud, your sins like the morning mist. Return to me, for I have redeemed you."

I like these verses because right after having the Spirit convict us and Israel of idolatry in our lives, the LORD reminds us that HE has called us and that He will not forget us. I especially like the part that says that He will not forget us because it means so many things that He will not forget:

His plans for us eternally and on Earth

He sees the pain that we are in

He will not forget the promises that He made to us

He will not forget the future that He sees

I love the LORD and how when I ask Him to speak to me through His word, He never fails to tell me something beautiful - - whether it's something hard that I need to hear or something that He is delighting in me.

LORD I praise you always and I thank you for everything that you have done, and are doing, and will do in my life. There are no wordst that I can say to describe the feelings in my heart. But I rejoicein knowing that you see and know my heart better than I know myself...

Isaiah 43

God is good!

I love it that every time that I ask the Holy Spirit to open my spiritual eyes and ears before reading the Word, He does!!

verse 18: "Forget the former things; do not dwell on the past."

Dwelling can be SO bad! It can stop you from moving forward; it can stop you from doing the things that the LORD wants you to do! It can stop you from becoming the person that the LORD created you to be!

Good thing that the LORD does not want that for me and has continually said so with His word, with His Word through people in my life, and by him literally saying it to me in my quiet times. Praise God... just simply Praise God!

I'm a PIMP

I am most definitely a PIMP. There is no doubt in my mind that I am a PIMP. But let me talk about redemption first. I don't know if you want to listen to me after saying that I am a PIMP, but that y-u ignent... And if you don't know what my last little phrase mean, then you are probable over 40 and NOT into at all ghetto. However, if you do, then u-b tight at sum lvl.

Anywayz!

I love thinking....scratch that.... knowing that Jesus Christ can redeem ANYTHING and ANYONE! So, I'm going to partially describe myself as a PIMP, a Public Intellectual with Moral Principals. Except that my moral principles are actually Christ-centered principals.

I actually don't want to write any more right now, so I will leave it at that...

Isaiah Chapter 40

29 He gives strength to the weary
and increases the power of the weak.

30 Even youths grow tired and weary,
and young men stumble and fall;

31 but those who hope in the LORD
will renew their strength.
They will soar on wings like eagles;
they will run and not grow weary,
they will walk and not be faint.

I grew tired and weary and I stumbled and fell. BUT I have hope in the LORD and He will renew my strength. I know that this verse is primarily speaking eternally, but the LORD can and does speak to people using any verse at any time. And in my case, today, just a few minutes ago, the LORD told me that because I trust in Him, He will renew my strength more and more each day. And He said that I will soar on wings like eagles; and when I run, I will not grow weary. And even when I walk I will not be faint. I will walk when He desires things to go slower, and it will not be because I am tired of running, but it will be as I learn the things that He wants me to learn for the next vision and plan that He has for me. I will not allow anyone or anything to stop the plans that the LORD has for me or for the people that will be with me. And even if Satan attempts to stop me using supernatural or natural circumstances, he won't be able to because the LORD is the eagle that I will on, and it is the LORD's strength that keeps me running and walking vigorously in this marathon race that I am running for the Him.

I am so tired of explaining myself to people and for continuing to feel like I have to prove myself. However, the LORD is in control of me and that includes the strength that He is giving me through everything that I have faced, that I am facing, and that I will face. Satan, it's not about challenging you, and it's not even you challenging me. Because when you challenge me, it is the LORD that you are challenging and you WILL LOSE!

Throw anything at me that you desire, but my desire for the LORD's will is stronger than your hatred for Him!! I will stumble and dabble here in there in your darkness, but guess what?! That darkness will become light!! And you WILL LOSE!

How good it is to be loved by You my God and to learn more and more about your mercy and wisdom...