Web Page Design- Content Analysis
wostinabin2
Week9-Lectureslides-20200617.zipChapter 10.pptx
WPDD202: Webpage Design & Development
Version 2 – 18th December 2015
Kent Institute Australia Pty. Ltd.
ABN 49 003 577 302 CRICOS Code: 00161E RTO Code: 90458 TEQSA Provider Number: PRV12051
1
Resource Material
Web Design with HTML & CSS3: Comprehensive, 8th Edition
Jessica Minnick; Lisa Friedrichsen
ISBN-10: 1305578163 | ISBN-13: 9781305578166 © 2017
Cengage Learning Australia
2
2
Chapter 10
Creating Interactivity with Social Media and JavaScript
3
Chapter Objectives
Understand social media
Identify and describe forms of social media
Understand and describe a blog
Understand JavaScript
Describe JavaScript code
Understand and use the script element
Understand where JavaScript code may be written
Chapter 10: Creating Interactivity with Social Media and JavaScript
4
Chapter Objectives (continued)
Create an external JavaScript file
Describe pop-up windows
Understand and use the alert() method
Understand and use the open() method
Understand events
Use an onclick event handler
Chapter 10: Creating Interactivity with Social Media and JavaScript
5
Using Social Media
Social Network
It is an online community where members post and exchange social media content
It allows members to share information and ideas with fellow online community members
It allows businesses to immediately connect with their customers and potential customers and instantly engage them with new product information
Chapter 10: Creating Interactivity with Social Media and JavaScript
6
Using Social Media (continued 1)
It is a social networking site with more than one billion users
Users include individuals and businesses
A business can create a Facebook page and use it to advertise its products and services
Individuals can “like” a business by clicking a button to indicate that they use or approve of a produce
Obtaining “likes” is a goal for most businesses, as this increases its presence and positive perception
Chapter 10: Creating Interactivity with Social Media and JavaScript
7
Using Social Media (continued 2)
Chapter 10: Creating Interactivity with Social Media and JavaScript
8
Using Social Media (continued 3)
It is a social networking site used to post short comments or updates
Each post, known as a tweet, is limited to 140 characters
Customers have the option to follow a business on Twitter
It provides marketing opportunities for business to help with a content strategy, to engage and obtain more customers, and to measure marketing results in real time
Chapter 10: Creating Interactivity with Social Media and JavaScript
9
Using Social Media (continued 4)
Chapter 10: Creating Interactivity with Social Media and JavaScript
10
Using Social Media (continued 5)
Google+
A Google account is required to use it which can be created for free at plus.google.com
Once an account is established, people are added to circles
Circles are groups or categories, such as friends, family, and acquaintances
Chapter 10: Creating Interactivity with Social Media and JavaScript
11
Using Social Media (continued 6)
Google+
Businesses use Google+ to post special offers and pictures of new products to share with their customers
Businesses have an added benefit because Google+ works with Google’s search engine, increasing the probability of a potential customer finding the business through Google’s search engine
Chapter 10: Creating Interactivity with Social Media and JavaScript
12
Using Social Media (continued 7)
Chapter 10: Creating Interactivity with Social Media and JavaScript
13
Using Social Media (continued 8)
YouTube
It is a social media website where members can upload and share original videos and subscribe to a channel
Businesses purchase ad space on YouTube to attract its target audience or create their own channel and upload videos
Business ads can be a banner image that is displayed on the lower part of a video or a full-length commercial that plays before the selected video
Chapter 10: Creating Interactivity with Social Media and JavaScript
14
Using Social Media (continued 9)
Chapter 10: Creating Interactivity with Social Media and JavaScript
15
Using Social Media (continued 10)
It is a social networking site where members can upload and share photographs, images, and video
It allows users to connect and express ideas with captivating visual photography
The free app allows users to apply various filters to enhance photographs, images, and video
Businesses use it to promote brand awareness
Chapter 10: Creating Interactivity with Social Media and JavaScript
16
Using Social Media (continued 11)
Chapter 10: Creating Interactivity with Social Media and JavaScript
17
Using Social Media (continued 12)
It allows members to browse and “pin” ideas found on the web
Users search for ideas for just about anything, including recipes, crafts, photography, and do-it-yourself (DIY) projects
They can follow boards that interest them most and “pin” photos, links, and comments to their own board for future use
Chapter 10: Creating Interactivity with Social Media and JavaScript
18
Using Social Media (continued 13)
Chapter 10: Creating Interactivity with Social Media and JavaScript
19
Using Social Media (continued 14)
Other Social Media Options
Other social media options for a business to explore include LinkedIn, Quora, Tumblr, StumbleUpon, Flickr, Delicious, Digg, Vine, Foursquare, and many more
The key is to determine which social media outlets are best for a business in attracting new customers
A business owner must also consider the time involved with keeping the social media current and relevant
Chapter 10: Creating Interactivity with Social Media and JavaScript
20
Using Social Media (continued 15)
Blogs
Are online journals, maintained by individuals, groups, or businesses
“Blog” is short for a combination of the words web and log
Businesses use them to share new information and to keep their customers engaged
Business owners who maintain blogs should respond to customer comments on time and keep their blog content fresh
Chapter 10: Creating Interactivity with Social Media and JavaScript
21
Using Social Media (continued 16)
Chapter 10: Creating Interactivity with Social Media and JavaScript
22
Using Social Media (continued 17)
Adding Facebook and Twitter Links to a Website
Businesses that use social media display social media icons and links on their website, which lets their customers know how to connect with the business on social media
When users click a social media icon, they are redirected to the social media page for the business
Social media links are typically included near the top or bottom of a webpage
Chapter 10: Creating Interactivity with Social Media and JavaScript
23
To Add Social Media Icons and Links to the Home Page
Figure 10–20 shows how to add social media icons and links to a Home Page
Chapter 10: Creating Interactivity with Social Media and JavaScript
24
Incorporating JavaScript
JavaScript
It is a scripting language that provides various types of functionality to webpages, such as the ability to interact with the user
Web developers use it to control webpages
It is a client-side scripting language, which means that the browser interprets and renders the JavaScript
Chapter 10: Creating Interactivity with Social Media and JavaScript
25
Incorporating JavaScript (continued)
JavaScript
Many mobile websites integrate an icon commonly called the hamburger icon for use as a menu button
The hamburger icon consists of three, horizontal, parallel lines and uses JavaScript to display a menu and allow users to select an option
Chapter 10: Creating Interactivity with Social Media and JavaScript
26
JavaScript Terminology
An object in JavaScript is programming code and data that can be treated as its own entity
JavaScript objects have properties and methods
Properties are attributes that describe an object’s characteristics
Chapter 10: Creating Interactivity with Social Media and JavaScript
27
JavaScript Terminology (continued 1)
As shown in the following example, an object name and its property are separated by a period
myForm.fname.style.backgroundColor=“ #ff0000"
browser=chrome.appName
A value can be assigned to a property, or a property can return a value
An object can be a property of a superior object
Chapter 10: Creating Interactivity with Social Media and JavaScript
28
JavaScript Terminology (continued 2)
Table 10–1 contains a general list of the built-in JavaScript objects common to many browsers
Chapter 10: Creating Interactivity with Social Media and JavaScript
29
JavaScript Terminology (continued 3)
Methods
They are actions that an object can perform
Methods associated with the document object might be write and open
An object and one of its methods would be written as follows:
document.write()
where document is the object and write is a method of the document object
They are followed by parentheses, which may be empty or may contain an argument
Chapter 10: Creating Interactivity with Social Media and JavaScript
30
JavaScript Terminology (continued 4)
Argument
It is a value given to a method
Some methods require arguments, and others do not
Example:
document.write(“Good Morning”)
In this case, the argument “Good Morning” describes the text content to display on the document
Chapter 10: Creating Interactivity with Social Media and JavaScript
31
JavaScript Terminology (continued 5)
Function
It is a set of JavaScript statements that perform a specific task
It must include a name and statements that specify a task to be performed
Example:
function myFunction () {
statement 1;
statement 2;
statement 3;
}
Chapter 10: Creating Interactivity with Social Media and JavaScript
32
JavaScript Terminology (continued 6)
Variable
It is a container that holds a value
JavaScript uses variables to store values temporarily in internal memory
A variable’s value can change, depending on the results of an expression or data entered by a user in a form
Variables must have a unique name and must follow the same naming conventions as user-defined functions
Chapter 10: Creating Interactivity with Social Media and JavaScript
33
JavaScript Terminology (continued 7)
Event handler
Is used by JavaScript to associate an action with a function
An event is the result of an action, such as a mouse click
JavaScript event handlers make webpages more dynamic and interactive by allowing JavaScript code to execute only in response to a user action
Chapter 10: Creating Interactivity with Social Media and JavaScript
34
JavaScript Terminology (continued 8)
Table 10–2 lists common event handlers
Chapter 10: Creating Interactivity with Social Media and JavaScript
35
Writing JavaScript Code
The following syntax rules and guidelines should be followed when writing JavaScript code
JavaScript is case sensitive
One-line comment and multiline comments are written as follows:
// Single line comment syntax
/* Multiple line
comment syntax */
Semicolons are used to end JavaScript statements
Chapter 10: Creating Interactivity with Social Media and JavaScript
36
Writing JavaScript Code (continued)
JavaScript can be written within an HTML page or as a separate JavaScript file with the filename extension .js
When written within an HTML page, the code may be within the head element or the body element
When created as an external .js file, place a script element in the head element of the HTML file and specify the external .js file as the file source shown as follows:
<script src="scripts/myfunction.js"></script>
Chapter 10: Creating Interactivity with Social Media and JavaScript
37
Pop-up Windows
JavaScript is commonly used to create a pop-up window
Pop-up windows are a quick and simple way to add interactivity and capture user attention
To add a pop-up window to an HTML page, use the script tags and place the JavaScript code within the script element
The three types of pop-up windows in a webpage are alert box, confirmation box, and prompt box
Chapter 10: Creating Interactivity with Social Media and JavaScript
38
Pop-up Windows (continued 1)
Alert box
Is used to display a message
This can be useful for a business to grab the user’s attention with information about a special promotion.
To create an alert box, use the alert() method
Example of an alert box code is as follows:
<script>
alert("Receive a 20% discount today!");
</script>
Chapter 10: Creating Interactivity with Social Media and JavaScript
39
Pop-up Windows (continued 2)
Confirmation box
It is used to confirm the user’s action using the confirm() method
Example:
<script>
if (confirm("Do you wish to proceed?")) {
alert("You selected OK"); }
else {
alert("You chose to Cancel"); }
</script>
Chapter 10: Creating Interactivity with Social Media and JavaScript
40
Pop-up Windows (continued 3)
Prompt box
It captures information from a user and performs an action with it and is created using the prompt() method
Example of a prompt box code is as follows:
<script>
var name = prompt("What is your name?");
if (name != null) {
alert("Hello " + name);}
else {
alert("You did not tell me your name. "); } </script>
Chapter 10: Creating Interactivity with Social Media and JavaScript
41
To Add a Pop-up Window to the Home Page
Figure 10–36 shows how to add a pop-up window to the home page
Chapter 10: Creating Interactivity with Social Media and JavaScript
42
To Add a Pop-up Window to the Home Page (continued)
Figure 10–37 shows the pop-up window on the home page
Chapter 10: Creating Interactivity with Social Media and JavaScript
43
To Create a Function in an External JavaScript File
Figure 10–39 shows the code to create a function in an external JavaScript file
Chapter 10: Creating Interactivity with Social Media and JavaScript
44
To Call a JavaScript Function
Figure 10–40 shows the code to insert a script element
Chapter 10: Creating Interactivity with Social Media and JavaScript
45
To Call a JavaScript Function (continued 1)
Figure 10–41 shows the code to insert an event handler
Chapter 10: Creating Interactivity with Social Media and JavaScript
46
To Call a JavaScript Function (continued 2)
Figure 10–42 shows the output when the Submit button is clicked to trigger the onclick event handler
Chapter 10: Creating Interactivity with Social Media and JavaScript
47
The open() Method
open()method
It is used to open a new browser window
Example:
window.open("http://www.cengage.com", "_blank", "width=400, height=400");
In this example, a new window opens to the Cengage.com home page
The _blank specifies to open the webpage in a new window
The width and height of the new window are set to 400 pixels
Chapter 10: Creating Interactivity with Social Media and JavaScript
48
The open() Method (continued)
Table 10–3 lists commonly used attributes of the open() method, which are used to define pop-up window features
Chapter 10: Creating Interactivity with Social Media and JavaScript
49
kent.edu.au Kent Institute Australia Pty. Ltd. ABN 49 003 577 302 ● CRICOS Code: 00161E ● RTO Code: 90458 ● TEQSA Provider Number: PRV12051
50
50
practical/index.html
Reading Practice/3 Column CSS Layout.docx
|
3 Column CSS Layout |
Let’s start by looking at the html structure for the page and then look at the css used to layout the various elements. And once again the html structure is quite simple.
<div id="page">
<div id="header">Header</div>
<div id="menu">Menu</div>
<div id="content">Content</div>
<div id="action">Call To Action</div>
<div id="footer">Footer</div>
</div>
|
Page Div |
div#page {
border:1px solid purple;
width:755px;
margin:0 auto;
padding:5px;
text-align:left;
position:relative
}
div {
text-align:center;
}
The css for the page div and for the generic div are exactly the same as with the 2 column layout as you might expect with one exception. I’ve added a position of relative to the page div. The relative positioning actually doesn’t affect the page div at all in how it’s displayed, but it will become important later when we introduce our new column to the layout. I’ll save discussion of this positioning until we reach that div.
|
Header Div |
div#header {
border:2px solid red;
width:750px;
height:30px;
}
I’ve added nothing to the header div from the 2 column example. You can read that post if you’re confused about anything here. Yawn. When are we going to see something new?
|
Menu Div |
div#menu {
border:2px solid green;
width:150px;
float:left;
margin:10px 0 10px 5px;
height:500px;
}
There are two minor changes in the menu div though essentially it’s still the same as the last layout. I’ve reduced the width a little to allow for the third column. I’ve also increased the height just so it extends down the page. You may or may not want to set the height in your design. Again to position the menu I’ve floated it to the left. Like I said nothing really new.
|
Content Div |
div#content {
border:2px solid blue;
width:400px;
margin:10px 0 10px 175px;
min-height:500px;
_height:500px
}
Believe it or not there’s really nothing new here with the content div either. C’mon on already? When are we going to get to the new stuff? Well I did reduce the width to make room for the new column and since out menu column has also been reduced in width I’ve decreased the left margin.
Again keep in mind we don’t want to use any css positioning on the content div since we want it to remain in the normal document flow to help control the position of the footer. A css layout doesn’t always mean using css positioning on everything. Again nothing new from last time. Hang on just a second more. The new stuff is coming I promise.
|
Action Div |
Finally something new. You knew it had to be new though since this column wasn’t included in the 2 column layout huh? No fooling you.
div#action {
position:absolute;
top:50px;
right:10px;
border:2px solid green;
width:150px;
margin:0;
height:500px;
}
The action div shares a little in common with the menu div in its width and height. I even used the same border. The margin has been set to 0 however since I used absolute positioning to layout this column and didn’t need the margin to push the div away from the page div border.
Like I just said the new column uses absolute positioning. At least I think that was me. I know I heard it somewhere. The key to css positioning is understanding where your element will sit at the default positon of 0 for the top and the left. When something is positioned in css its origin or (0, 0) position is at the (0, 0) position of its containing positioned element. Huh? Let’s use the specifics of this example to explain it again. Here’s where that relative position on the page div comes in.
I’ve specified a top position of 50px and a right position of 10px. They key question though is 50px and 10px from where. The action div is contained by the page div. The action div is inside the page div so the page div is the container. Since I’ve added a position: relative to the page div the container div also has positioning and the origin in this case is the upper right corner of the page div. It’s upper right since I’m setting the action div at the top and the right. I could also have specified bottom and left in which case the origin would be in the lower left of the page div. I could have positioned the action div using bottom and left just with different px amounts. It’s generally easiest though to position things from the nearest corner.
Now had there been no relative position on the page div the origin would be different. Instead of the upper right corner of the page div the origin would have been the upper right of the body. You can test this by grabbing the source and removing the position from the page div. The action div should move further to the top and right if you do. It will now be 50px and 10px from the corner of your browser window. Remember that the origin will be the closest containing div that is also positioned. If none of the containing div.’s have positioning applied the origin will ultimately be in the body of the page.
|
Footer Div |
div#footer {
border:2px solid red;
width:750px;
height:30px;
}
Sadly there’s nothing at all new here. Not even a width change. Maybe I should have changed the color of the border just to have something I could say about the footer. I’ll just remind you that since we’ve kept the content div as part of the normal document flow the footer will always sit just below the content div. The distance below will be the margin-bottom we applied to the content div which here was 10px.
|
Conclusion |
We really didn’t need to do a lot to add a third column to our 3 column css layout. We obviously needed to add the new div for the 3rd column and used absolute positioning to place it in our layout. We naturally had to allow for the space this column would occupy so we reduced the width of the other 2 columns. Pretty obvious stuff. The only trick here was to add relative positioning to the page div, which made things easier, but wasn’t necessary since we could have positioned the new div in relation to the body instead.
I hope this 3 column layout as well as the previous 2 column layout has helped to get you started on your own css layouts. Neither layout needs to be complicated nor do I hope I’ve simplified how to build their basic structure. To flesh out your pages you would start adding things inside each of the divs, much in the same way you might nest tables inside of other tables. The difference here is that once you get used to using css layouts you’ll find you have more control over how you can layout your page than you would using tables. You’ll also find you’ll use less code and spacer images as well as being able to make the images you do include smaller. Your pages will load faster and you’ll find your code easier to maintain. So get out there and start practicing your 2 and 3 column css layouts.
Reading Practice/Reading 1 - Understand CSS page layout basics.docx
Reading 1: Understand CSS page layout basics
Learn the basics of CSS page layout functions which use cascading style sheet format, rather than traditional HTML tables or frames, to organize the content on a web page.
The basic building block of the CSS layout is the div tag—an HTML tag that in most cases acts as a container for text, images, and other page elements.
When you create a CSS layout, you place div tags on the page, add content to them, and position them in various places. Unlike table cells, which are restricted to existing somewhere within the rows and columns of a table, div tags can appear anywhere on a web page. You can position div tags absolutely (by specifying x and y coordinates), or relatively (by specifying their distance from other page elements).
Creating CSS layouts from scratch can be difficult because there are so many ways to do it. You can create a simple two-column CSS layout by setting floats, margins, paddings, and other CSS properties in a nearly infinite number of combinations. Additionally, the problem of cross-browser rendering causes certain CSS layouts to display properly in some browsers and display improperly in others. Dreamweaver makes it easy for you to build pages with CSS layouts by providing some pre-designed layouts that work across different browsers.
Using the pre-designed CSS layouts that come with Dreamweaver is the easiest way to create a page with a CSS layout, but you can also create CSS layouts using Dreamweaver absolutely positioned elements (AP elements). An AP element in Dreamweaver is an HTML page element—specifically, a div tag, or any other tag—that has an absolute position assigned to it. The limitation of Dreamweaver AP elements, however, is that since they are absolutely positioned, their positions never adjust on the page according to the size of the browser window.
If you are an advanced user, you can also insert div tags manually and apply CSS positioning styles to them to create page layouts.
About CSS page layout structure
Before proceeding with this section, you should be familiar with basic CSS concepts.
The basic building block of the CSS layout is the div tag—an HTML tag that in most cases acts as a container for text, images, and other page elements. Figure 1 shows an HTML page that contains three separate div tags: one large "container" tag, and two other tags—a sidebar tag, and a main content tag—within the container tag.
Figure 1. A. Container div B. Sidebar div C. Main Content div.
Here is the code for all three div tags in the HTML:
<!--container div tag-->
<div id="container">
<!--sidebar div tag-->
<div id="sidebar">
<h3>Sidebar Content</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p>
</div>
<!--mainContent div tag-->
<div id="mainContent">
<h1>Main Content</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis
luctus rutrum.</p>
<p>Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis.
Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<h2>H2 level heading</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis
luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.</p>
</div>
</div>
In the above example, there is no “styling” attached to any of the div tags. Without CSS rules defined, each div tag and its contents fall into a default location on the page. However, if each div tag has a unique id (as in the above example), you can use the ids to create CSS rules that, when applied, change the style and positioning of the div tags.
The following CSS rule, which can reside in the head of the document or in an external CSS file, creates styling rules for the first, div tag on the page, known as or container div tag:
#container {
width: 780px;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
The #container rule styles the container div tag to have a width of 780 pixels, a white background, no margin (from the left side of the page), a solid, black, 1-pixel border, and text that is aligned left. Figure 2 shows the results of applying the rule to the container div tag.
Figure 2. Container div tag, 780 pixels, no margin A. Text aligned left B. White background C. 1-pixel solid black border.
The next CSS rule creates styling rules for the sidebar div tag:
#sidebar {
float: left;
width: 200px;
background: #EBEBEB;
padding: 15px 10px 15px 20px;
}
The #sidebar rule styles the sidebar div tag to have a width of 200 pixels, a grey background, a top and bottom padding of 15 pixels, a right padding of 10 pixels, and a left padding of 20 pixels. (The default order for padding is top-right-bottom-left.) Additionally, the rule positions the sidebar div tag with float left—a property that pushes the sidebar div tag to the left side of the container div tag. Figure 3 shows the results of applying the rule to the sidebar div tag.
Figure 3. Sidebar div, float left A. Width 200 pixels B. Top and bottom padding, 15 pixels.
Last, the CSS rule for the main container div tag finishes the layout:
#mainContent {
margin: 0 0 0 250px;
padding: 0 20px 20px 20px;
}
The #mainContent rule styles the main content div with a left margin of 250 pixels, which means that it places 250 pixels of space between the left side of the container div, and the left side of the main content div. Additionally, the rule provides for 20 pixels of spacing on the right, bottom, and left sides of the main content div. Figure 4 shows the results of applying the rule to the mainContent div.
Figure 4. Main Content div, left margin of 250 pixels A. 20 pixels left padding B. 20 pixels right padding C. 20 pixels bottom padding
The complete code looks as follows:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#container {
width: 780px;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
#sidebar {
float: left;
width: 200px;
background: #EBEBEB;
padding: 15px 10px 15px 20px;
}
#mainContent {
margin: 0 0 0 250px;
padding: 0 20px 20px 20px;
}
</style>
</head>
<body>
<!--container div tag-->
<div id="container">
<!--sidebar div tag-->
<div id="sidebar">
<h3>Sidebar Content</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p>
</div>
<!--mainContent div tag-->
<div id="mainContent">
<h1>Main Content</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis
luctus rutrum.</p>
<p>Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis.
Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<h2>H2 level heading</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis
luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.</p>
</div>
</div>
</body>
Note: The above example code is a simplified version of the code that creates the two-column fixed left sidebar layout when you create a new document using the predesigned layouts that come with Dreamweaver.
Create a page with a CSS layout
When creating a new page in Dreamweaver, you can create one that already contains a CSS layout. Dreamweaver comes with different CSS layouts that you can choose from. Additionally, you can create your own CSS layouts and add them to the configuration folder so that they appear as layout choices in the New Document dialog box.
Dreamweaver CSS layouts render correctly in all modern browsers. To create a page with a CSS layout:
· Select File > New.
· In the New Document dialog box, select the Blank Page category. (It's the default selection.)
· For Page Type, select the kind of page you want to create.
Note: You must select an HTML page type for the layout. For example, you can select HTML or PHP. You cannot create a CSS, Library Item, JavaScript, or XML with a CSS layout. Page types in the Other category of the New Document dialog box are also restricted from including CSS page layouts.
For Layout, select the CSS layout you want to use. The Preview window shows the layout and gives a brief description of the selected layout. The predesigned CSS layouts provide the following types of columns:
· Fixed Column width is specified in pixels. The column does not resize based on the size of the browser or the site visitor's text settings.
· Liquid Column width is specified as a percentage of the site visitor's browser width. The design adapts if the site visitor makes the browser wider or narrower but does not change based on the site visitor's text settings.
· Select a document type from the DocType popup menu.
· Select a location for the layout's CSS from the Layout CSS in popup menu.
· Add To Head: Adds CSS for the layout to the head of the page you're creating.
· Create New File: Adds CSS for the layout to a new external CSS stylesheet and attaches the new stylesheet to the page you're creating.
· Link to Existing File: Lets you specify an existing CSS file that already contains the CSS rules needed for the layout. This option is particularly useful when you want to use the same CSS layout (the CSS rules for which are contained in a single file) across multiple documents.
Do one of the following:
· If you selected Add to Head from the Layout CSS in popup menu (the default option), click Create.
· If you selected Create New File from the Layout CSS popup menu, click Create, and then specify a name for the new external file in the Save Style Sheet File As dialog box.
· If you selected Link to Existing File from the Layout CSS in popup menu, add the external file to the Attach CSS file text box by clicking the Add Style Sheet icon, completing the Attach External Style Sheet dialog box, and clicking OK. When you're finished, click Create in the New Document dialog box.
· Note: When you select the Link to Existing File option, the file you specify must already have the rules for the CSS file contained within it.
· When you put the layout CSS in a new file or link to an existing file, Dreamweaver automatically links the file to the HTML page you're creating.
· Note: Internet Explorer conditional comments (CCs), which help work around IE rendering issues, remain embedded in the head of the new CSS layout document, even if you select New External File or Existing External File as the location for your layout CSS.
· (Optional) You can also attach CSS style sheets to your new page (unrelated to the CSS layout) when you create the page. To do this, click the Attach Style Sheet icon above the Attach CSS file pane and select a CSS style sheet. (For a detailed walk-through of this process, see David Powers's article, Automatically attaching a style sheet to new documents.
Add custom CSS layouts to the list of choices
· Create an HTML page that contains the CSS layout you'd like to add to the list of choices in the New Document dialog box. The CSS for the layout must reside in the head of the HTML page.
· Tip: To make your custom CSS layout consistent with the other layouts that come with Dreamweaver, you should save your HTML file with the .html extension.
· Add the HTML page to the dw_root\Configuration\BuiltIn\Layouts folder.
· (Optional) Add a preview image of your layout (for example a .gif or .png file) to the dw_root\Configuration\BuiltIn\Layouts folder. The default images that come with Dreamweaver are 227 pixels wide x 193 pixels high PNG files.
Tip: Give your preview image the same file name as your HTML file so that you can easily keep track of it. For example, if your HTML file is called myCustomLayout.html, call your preview image myCustomLayout.png.
