Tutorial 8: Designing a Web Site with Frames

Transcription

1 Tutorial 8: Designing a Web Site with Frames College of Computing & Information Technology King Abdulaziz University CPCS-665 Internet Technology

2 Objectives Explore the uses of frames in a Web site Create a frameset consisting of rows and columns of frames Display a document within a frame Format the appearance of a frame Create links targeted at frames Direct a link to a target outside of a frame layout Format the color and size of frame borders Create an inline frame Tutorial 8: Designing a Web Site with Frames page 2

3 Tutorial 8 Web Site Cliff Hangers Rock climbing and touring agency in Colorado Debbie Chan is the owner She wants to modify her existing Web site Specifically, she wants to be able to display several pages all within one page Which brings us to the idea of frames Tutorial 8: Designing a Web Site with Frames page 3

4 Designing a Web Site with Frames Introducing Frames When building a Web site, Web authors often set aside a portion of the Web page for particular key elements Example of a 10-page Web site (2 column layout): Every page will have the same, common header at the top of the page This header will have the logo along with some basic links Home, About Us, Contact Us, Sitemap, etc. Every page will also have a list of navigation links on the left or right hand side (same links on all pages) Every page will have a footer with copyright, etc. Tutorial 8: Designing a Web Site with Frames page 4

5 Designing a Web Site with Frames Introducing Frames Making changes to header, navigation links, and footer sections What happens when you want to change the header? Or if you want to add a few more navigation links? You can certainly do this, BUT you will have to do this on EACH and EVERY page of the Website Ten page Web site perhapss not a big deal But make it a 100 page Web site, and this is now an epic fail! Tutorial 8: Designing a Web Site with Frames page 5

6 Designing a Web Site with Frames Introducing Frames Making changes to header, navigation links, and footer sections Ideally, we d like to be able to modify only ONE file to update our Navigation links Then, after modification of the one file, the results can be seen on ALL ten of the pages So we don t have to modify ten different pages Such ideas contributed to the creation of frames A frame is a section of a browser window capable of displaying the contents of an entire Web page The following graphic shows a page with two frames Tutorial 8: Designing a Web Site with Frames page 6

7 A Framed Web Site Tutorial 8: Designing a Web Site with Frames page 7

8 Activating a Link Within a Frame Tutorial 8: Designing a Web Site with Frames page 8

9 Disadvantages to Using Frames Disadvantages of Frame-Based Layouts The browser has to load multiple HTML files One framed site may have 4 HTML files Increases the amount of time a user waits on the files to download from the server This used to be a concern and a major drawback High-speed connections have certainly changed the game in this regard But it is still something to consider Difficult to bookmark the Web site Don t work well with Internet search engines Tutorial 8: Designing a Web Site with Frames page 9

10 Disadvantages to Using Frames Disadvantages of Frame-Based Layouts Difficult to bookmark the Web site Browsers will allow you to bookmark the entire frame or individual page But there is no way to create a bookmark that displays a page as it appears within the frame Tutorial 8: Designing a Web Site with Frames page 10

11 Disadvantages to Using Frames Disadvantages of Frame-Based Layouts Don t work well with Internet search engines Search engines base their results on contents and keywords found within the Web page A framed Web page doesn t have any actual content when you look at the source code It simply displays content from other Web pages Those pages that open up inside the frames As such, the home page of a frame-based site may not appear high in the search results since there is nothing for the search engine to index Tutorial 8: Designing a Web Site with Frames page 11

12 Planning Your Frames Before you start creating your frames, plan their appearance and how they are to be used: What information will be displayed in each frame? How do you want the frames placed on the Web page? What is the size of each frame? Which frames will be static that is, always showing the same content? Which frames will change in response to links being clicked? What Web pages will users first see when they access the site? Should users be permitted to resize the frames to suit their needs? Tutorial 8: Designing a Web Site with Frames page 12

13 Tutorial 8 Web Site Organizing the structure Debbie already has the Web pages for the site She s organized the pages by topic Tour descriptions, climbing lessons, and company philosophy Debbie also already thought out how the site should look, how the various pages should be organized, and what content the user should see first We simply need to create the frame layout And then insert the correct files into the various frames Tutorial 8: Designing a Web Site with Frames page 13

14 Tutorial 8 Web Site Tutorial 8: Designing a Web Site with Frames page 14

15 Tutorial 8 Web Site Debbie s proposed layout How many frames are there? Header goes in the top frame Links in the leftside frame Page content will go in main frame (lower right frame) Tutorial 8: Designing a Web Site with Frames page 15

16 Creating a Frameset Frames are organized into a frameset which is HTML code that defines the layout and content of the frames within the browser window Syntax for creating a frameset: <html> <head> <title>title</title> </head> <frameset> frames </frameset> </html> where frames are the individual frames within the frameset Tutorial 8: Designing a Web Site with Frames page 16

17 Creating a Frameset Frames are organized into a frameset Note: An HTML file can have several framesets nested within one another The frameset element replaces the body element in this HTML document Since this HTML file displays contents of other Web pages, it is not technically a Web page on its own Such is the reason it does not have a body element Later in the tutorial, we ll explore situations where we do still include the body element to support those browsers that are unable to display frames Tutorial 8: Designing a Web Site with Frames page 17

18 Creating a Frameset Specifying Frame Size and Orientation Framesets lay out frames in either rows or columns, but not both To lay out frames in rows, use the rows attribute: <frameset rows= row1, row2, row3, >...</frameset> where row1, row2, row3, etc are the heights of each row in the frameset For columns, you use the cols attribute: <frameset cols= col1, col2, col3, >...</frameset> where col1, col2, col3, etc are the widths of each column in the frameset Tutorial 8: Designing a Web Site with Frames page 18

19 Creating a Frameset Rows & Columns within Frames There are no limits to the number of rows or columns that you can specify for a frameset However, you can lay out a frameset ONLY in rows or ONLY in columns, but not both If your site requires frames in both rows and columns, you must nest one frameset within another Tutorial 8: Designing a Web Site with Frames page 19

20 Frame Layouts in Rows or Columns Tutorial 8: Designing a Web Site with Frames page 20

21 Creating a Frameset Rows & Column Sizes Can be specified in three ways: In pixels, as a percentage of the total size of the frameset, or by an asterisk (*) Example: The * instructs the browser to allocate any unclaimed space in the frameset to the given row or column rows= 160, * creates two frames set up as rows The first row has a height of 160 pixels, and the height of the second row is equal to the space remaining in the browse Tutorial 8: Designing a Web Site with Frames page 21

22 Creating a Frameset Rows & Column Sizes Example: cols= 160, 25%, * Example: creates a layout of three columns First column is 160 pixels wide, the second column is set at 25% of the width of the frameset, and the third column covers the remaining space rows= *, *, * creates three rows, each with a height that is one-third the total height of the frameset Tutorial 8: Designing a Web Site with Frames page 22

23 Creating a Frameset Tutorial 8: Designing a Web Site with Frames page 23

24 Tutorial 8 Web Site Creating a frameset The Cliff Hangers site has two rows for frames The top frame will display the company logo Should have a height of 85 pixels The rest of the site will be displayed in the second row Tutorial 8: Designing a Web Site with Frames page 24

25 Specifying a Frame Source To specify a source for a frame, use the <frame> element with the syntax: <frame src= url /> The URL is the filename and location of the page that you want to load You must insert the <frame> element between the opening and closing <frameset> elements Tutorial 8: Designing a Web Site with Frames page 25

26 Tutorial 8 Web Site Adding the frame source Debbie saved the HTML page, containing the company logo and address, as head.htm We now add the source Tutorial 8: Designing a Web Site with Frames page 26

27 Logo and Placement Tutorial 8: Designing a Web Site with Frames page 27

28 Nesting Framesets Why nest frames? As mentioned previously, a frameset places frames in either rows or columns, but not both To create frames using both rows and columns, one frameset must be nested inside another Note: The interpretation of the rows and cols attributes changes slightly For example, a row height of 25% does not mean 25% of the display area, but rather 25% of the height of the frame into which that row has been inserted (or nested) Tutorial 8: Designing a Web Site with Frames page 28

29 Tutorial 8 Web Site Adding the nested frameset Debbi wants the second row to contain two columns The first column will display the various links for the site Width should be 140 pixels (per Debbie) The second column will display the content of those links Tutorial 8: Designing a Web Site with Frames page 29

30 Tutorial 8 Web Site Adding the nested frameset Next we specify the sources The frame in the first column should display the links.htm file, which is the list of links To start out with, the second column should initially display the Cliff Hangers home page (home.htm) Tutorial 8: Designing a Web Site with Frames page 30

31 Tutorial 8 Web Site Tutorial 8: Designing a Web Site with Frames page 31

32 Tutorial 8 Web Site Result Tutorial 8: Designing a Web Site with Frames page 32

33 Brief Interlude: FAIL Pics Tutorial 8: Designing a Web Site with Frames page 33

34 Brief Interlude: BIKE FAILS Tutorial 8: Designing a Web Site with Frames page 34

35 Formatting a Frame You can control three attributes of a frame: The appearance of scroll bars The size of the margin between the source document and the frame border Whether or not the user is allowed to change the size of the frame Tutorial 8: Designing a Web Site with Frames page 35

36 Formatting a Frame Hiding and Displaying Scroll Bars By default, scroll bars are displayed when the content of the source page cannot fit within the frame You can override the default setting using the scrolling attribute The scrolling syntax is: scrolling= type where type can either be yes (to always display scroll bars) or no (to never display scroll bars) Tutorial 8: Designing a Web Site with Frames page 36

37 Tutorial 8 Website Removing the scroll bars from logo frame Debbie does not want scrollbars on the logo frame Tutorial 8: Designing a Web Site with Frames page 37

38 Formatting a Frame Setting Frame Margins You do not have to specify the margin height and the margin width If you specify only one, the browser assumes that you want to use the same value for both Setting margin values is a process of trial and error as you determine what combination of margin sizes looks best Recommendation: You want margins big enough to keep the source text or images from running into the frame s borders At the same time, you don t want the margin taking up too much space so you need a good balance Tutorial 8: Designing a Web Site with Frames page 38

39 Formatting a Frame Setting Frame Margins When Web pages are displayed inside a frame, the browser places a margin between it and the frame borders If the margin is too large, part of the Web page may not fit within the frame You can specify margin sizes as follows: marginheight= value marginwidth= value where marginheight is the amount of space, in pixels, above and below the frame source, and the marginwidth is the amount of space to the left and right of the frame source Tutorial 8: Designing a Web Site with Frames page 39

40 Tutorial 8 Website Setting Internal Frame Margin We make the margin size 0 pixels Tutorial 8: Designing a Web Site with Frames page 40

41 Specifying the Margin Sizes for the Frames Tutorial 8: Designing a Web Site with Frames page 41

42 Formatting a Frame Controlling Frame Resizing By default, users can resize frame borders in the browser by simply dragging a frame border Some Web designers prefer to freeze, or lock, frames, so that users cannot resize them This ensures that the Web site displays as the designer intended Syntax: noresize= noresize This locks the frame from resizing Tutorial 8: Designing a Web Site with Frames page 42

43 Tutorial 8 Website Linking Pages Tutorial 8: Designing a Web Site with Frames page 43

44 Tutorial 8 Website Formatting the links for the Web page The links page has five links as shown on the previous graphic Debbie wants the following: The Home, Our Philosophy, and Climbing Lessons pages should appear in the lower-right frame The tours page should appear in the table of contents frame The frameset from the staff.htm file should occupy the entire browser window Tutorial 8: Designing a Web Site with Frames page 44

45 Working with Frames and Links By default, clicking a link within a frame opens the linked file inside the same frame You can display hyperlinks in many ways: In a different frame In a new window In the entire window To specify the location in which to open a hypertext link, there are two required steps: Give each frame on the page a name Case is important Point each hyperlink to one of the named frames Tutorial 8: Designing a Web Site with Frames page 45

46 Assigning a Name to a Frame To assign a name to a frame, add the name attribute to the frame element The syntax for this attribute is: <frame src= url name= name /> Case is important in assigning names: information is considered a different name than INFORMATION You also cannot have spaces inside the name Tutorial 8: Designing a Web Site with Frames page 46

47 Tutorial 8 Website Setting the Frame Names Tutorial 8: Designing a Web Site with Frames page 47

48 Specifying a Link Target Next we need to specify where the links should open You can use the target attribute to open a page in a specific frame The syntax for this is: target= name where name is a name that you ve assigned to one of the frames on your Web page Tutorial 8: Designing a Web Site with Frames page 48

49 Tutorial 8 Website Specifying a Link Target Debbie wants the home.htm, philosph.htm, and lesson.htm files to open in the pages frame Tutorial 8: Designing a Web Site with Frames page 49

50 Tutorial 8 Website Remaining links from links section: The two remaining links are Tours and Staff The Tours link points to a list of tours, which is stored in the tours.htm file The Staff link points to a staff information page, stored in the staff.htm file The tours.htm files does not contain info about individual tours Rather, it acts as an expandable table of contents page and replaces the links.htm page A user can then click an individual tour name to open a page about that tour Tutorial 8: Designing a Web Site with Frames page 50

51 Tutorial 8 Website Tutorial 8: Designing a Web Site with Frames page 51

52 Tutorial 8 Website Remaining links from links section: So when the user clicks the Tours link, the link section will expand, showing the links to the individual tours How do we make that happen? Sure, we simply load tours.htm into that frame But how? We specify links (the name of the frame) as the target And this works just fine Another solution: Using reserved target names Tutorial 8: Designing a Web Site with Frames page 52

53 Using Reserved Target Names Reserved target names are special names that can be used in place of a frame name as the target They are useful in situations: Where the name of the frame is unavailable When you want the page to appear in a new window When you want the page to replace the current window All reserved target names begin with the underscore character ( _ ) to distinguish them from other target names Reserved target names are case-sensitive, they must be entered in lowercase Tutorial 8: Designing a Web Site with Frames page 53

54 Using Reserved Target Names Reserved target names: Tutorial 8: Designing a Web Site with Frames page 54

55 Tutorial 8 Website Adding the _self reserved target name: Debbie wants the contents of the tours.htm file to be displayed in the links frame So we add the _self target to the link for the tours.htm file Tutorial 8: Designing a Web Site with Frames page 55

56 Tutorial 8 Website Fixing the links within the tours.htm file When a user clicks any of the specific tour links, Debbie wants it to open in the pages frame Using a base element: When a website has many links that should all open in the same frame, instead of inserting the same target attribute for each link, you can specify the target using the base element <base target= name /> in the header of the document So now all elements, by default, will open in the target specified by base Tutorial 8: Designing a Web Site with Frames page 56

57 Tutorial 8 Website Adding targets to the tours page: Tutorial 8: Designing a Web Site with Frames page 57

58 Tutorial 8 Website Result Tutorial 8: Designing a Web Site with Frames page 58

59 Tutorial 8 Website Making the link to the staff biographies When a user clicks the Staff link, Debbie wants the following to display: Tutorial 8: Designing a Web Site with Frames page 59

60 Tutorial 8 Website Making the link to the staff biographies Note: This page uses frames as well If you specify the pages frame as the target for the staff.htm page, the result will be a series of nested framesets as shown on the following page Tutorial 8: Designing a Web Site with Frames page 60

61 Tutorial 8 Website Nesting one frameset within another This is not what Debbie wants She wants it like the last graphic Tutorial 8: Designing a Web Site with Frames page 61

62 Tutorial 8 Website Making the link to the staff biographies To target a link to the FULL display area, you use the _top reserved target name Apply the _top target to the staff link: Now, the staff.htm page, which is a framed page on its own, will open in the entire browser window Tutorial 8: Designing a Web Site with Frames page 62

63 Tutorial 8: Designing a Web Site with Frames WASN T THAT MAGNIFICENT! Tutorial 8: Designing a Web Site with Frames page 63

64 Daily Demotivator Tutorial 8: Designing a Web Site with Frames page 64

65 Tutorial 8: Designing a Web Site with Frames COP 3175 Internet Applications College of Computing & Information Technology King Abdulaziz University CPCS-665 Internet Technology

66 Tutorial 8 Website Guess what? Debbie is happy! She likes the look of the framed site But she asks what happens if a user s browser doesn t allow frames Browsers & Frames Most browsers are able to display frames Some, however, cannot and we must take those browsers into account Tutorial 8: Designing a Web Site with Frames page 66

67 Using the <noframes> Element noframes Element: Use the <noframes> element to allow your Web site to be viewable by browsers that do not support frames The noframes element allows you to mark a section of your HTML file that should be read specifically by browsers incapable of displaying frames So if a browser can display frames, it reads the frameset code Else, it displays the code within the noframes tags Tutorial 8: Designing a Web Site with Frames page 67

68 The <noframes> Syntax The syntax for the <noframes> element is: <html> <head> <title>title</title> </head> <frameset> frames <noframes> <body> page content </body> </noframes> </frameset> </html> Notice that <body> tags are used within the <noframes> tags. Browsers that cannot display frames will display the content found within the <body> tags. Tutorial 8: Designing a Web Site with Frames page 68

69 Using the <noframes> Element noframes Element: There can only be one noframes element in the document When a browser that supports frames processes this code, it ignores everything within the <noframes> tags and concentrates solely on the code within the <frameset> elements When a browser that doesn t support frames processes this code, it ignores the <frameset> and frame elements and instead renders what it finds within the body tags So both types of browsers are supported with a single HTML file Tutorial 8: Designing a Web Site with Frames page 69

70 Tutorial 8 Website Tutorial 8: Designing a Web Site with Frames page 70

71 Frameless Version of a Web Site Tutorial 8: Designing a Web Site with Frames page 71

72 Working with Frame Borders There are additional attributes you can apply to the <frame> element that allow you to change border size and appearance. For example: You can remove borders from your frames to free more space for text and images You can change the color of the frame border so that it matches or complements the color scheme for your Web site Tutorial 8: Designing a Web Site with Frames page 72

73 Setting the Frame Border Color To change the color of a frame s border, use the bordercolor attribute The syntax for this attribute is: bordercolor= color where color is either a color name or a hex color value The attribute can be applied either to an entire set of frames, using the <frameset> element, or to individual frames, using the <frame> element Note: The bordercolor attribute is not part of the official specs of HTML and XHTML Tutorial 8: Designing a Web Site with Frames page 73

74 Tutorial 8 Website Setting the border color: Debbie wants a brown frame border We add the bordercolor attribute to the opening <frameset> tag Tutorial 8: Designing a Web Site with Frames page 74

75 Web Site with Brown Frame Border Tutorial 8: Designing a Web Site with Frames page 75

76 Working with Frame Borders Setting the Frame Border Width You can remove the frame border entirely by adding the frameborder attribute: <frame frameborder= value /> Note: where a value of 0 removes the border and a value of 1 displays the border Different browsers respond in different ways to this attribute Some browsers may not support this attribute at all Tutorial 8: Designing a Web Site with Frames page 76

77 Working with Frame Borders Setting the Frame Border Width Some browsers require the border attribute: <frameset border= value > </frames> Note: where value is the size of the border in pixels The border attribute can be used only in the <frameset> element The frameborder attribute is applied only the <frame> element The border attribute is also not part of the official specifications of HTML and is not supported by XHTML Tutorial 8: Designing a Web Site with Frames page 77

78 Tutorial 8 Website Removing the frame borders Debbie wants the borders removed To ensure compatibility with the greatest number of browsers, we use both the frameborder and the border attributes Tutorial 8: Designing a Web Site with Frames page 78

79 Removing the Frame Borders Tutorial 8: Designing a Web Site with Frames page 79

80 Creating Inline Frames Another type of frame is called an inline frame Inline frames do not appear in framesets Rather, they appear within the body of the page Just like an inline image displays the content of a graphics file, an inline frame displays the contents of a Web page Inline frames support many of the same features as inline images You can resize them, float them on the page margins, specify the size of the margin around the frame and much more Tutorial 8: Designing a Web Site with Frames page 80

81 Creating Inline Frames Inline Frames: Syntax: <iframe src="url" width="value" height="value"> </iframe> alternate content where url is the URL of the document you want displayed in the inline frame alternate content is the content displayed by the browsers that don t support inline frames The width and height attributes are required They set the size of the frame, in pixels Tutorial 8: Designing a Web Site with Frames page 81

82 Creating Inline Frames Inline Frames: Example: The following code displays the contents of the jobs.htm file within an inline frame that is 500 pixels wide by 200 pixels high Browsers that don t support inline frames will display a paragraph containing a link to the jobs.htm file <iframe src="jobs.htm" width="500" height="200"> <p>view the online <a href="jobs.htm">job listings</a>.</p> </iframe> If the jobs.htm file doesn t fit within the specified dimensions, scrollbars will be added automatically Tutorial 8: Designing a Web Site with Frames page 82

83 Attributes of inline Frames Tutorial 8: Designing a Web Site with Frames page 83

84 Tutorial 8 Website Creating a slide show with inline frames Debbie wants a slide show of pictures Tutorial 8: Designing a Web Site with Frames page 84

85 Creating Inline Frames Inline Frames: Inline frames support the name attribute Provides a way of targeting a specific inline frame Example: If you set the name of an inline frame to docs, the following hpertext link: View the online <a href= jobs.htm target= docs >job listings</a>. will open the jobs.htm file within the docs inline frame Tutorial 8: Designing a Web Site with Frames page 85

86 Tutorial 8 Website Creating a slide show with inline frames We make an inline frame around the image file in Debbie s site This frame has the exact same size as the inline image So you shouldn t see any difference in the appearance Tutorial 8: Designing a Web Site with Frames page 86

87 Tutorial 8 Website Creating a slide show with inline frames Next we need to make an image map containing the thumbnail versions of the high-res images Each area of the map, when clicked, will then open in the iframe (once targeted properly) Tutorial 8: Designing a Web Site with Frames page 87

88 Tutorial 8 Website Creating a slide show with inline frames Code: Tutorial 8: Designing a Web Site with Frames page 88

89 UCF Weekly Bike FAIL Tutorial 8: Designing a Web Site with Frames page 89

90 Frames Summary What was the purpose/wisdom of using frames? Given a reasonably large website, with common sections among all pages such as a header, links, or footer section, It would be an epic fail if those common sections were hard-coded into each and every page of the site Why? Because if you wanted to add a link or correct a spelling mistake, you d have to do this on each and every page! Tutorial 8: Designing a Web Site with Frames page 90

91 Frames Summary What was the purpose/wisdom of using frames? Using frames allowed us to take one header file, one links file, etc. and allowed us to display that one file within a frame on the page Therefore, if a change needed to be made, we would change that one file, and the result of the modification would then immediately be seen on all pages that displayed that file in a frame Tutorial 8: Designing a Web Site with Frames page 91

92 Frames Summary Problems of Frames: 1) Cheesy! 2) Multiple pages (HTML files) need to be loaded in order to view seemingly one page 3) Bookmarking issues 4) Search engine problems There s got to be a better solution! Indeed there is: INCLUDES Tutorial 8: Designing a Web Site with Frames page 92

93 Includes What are includes? An include is a snippet of HTML that isn t a full HTML document on its own It usually won t have <html> or <body> tags Instead, it is a portion of another HTML document, and it is included in that document using directives from programming languages Note: This is not supported by HTML So you must use some type of program or script to include your files Tutorial 8: Designing a Web Site with Frames page 93

94 Includes Examples of include files: Any common sections of a Web page, which are repeated throughout the entire site, are suited to be used as includes Examples: Header sections Link sections an area of the site that links to many other pages within the Web site Footer sections and more Tutorial 8: Designing a Web Site with Frames page 94

95 Types of Includes Server Side Includes Also known as SSI Developed for the specific purpose of allowing Web developers to include one HTML file within another Most Web servers (hosting companies) support SSI although you may need to change your file names to *.shtml instead of *.html SSI is old, although it still works well A better option is PHP Tutorial 8: Designing a Web Site with Frames page 95

96 Types of Includes PHP From Wikipedia: a general-purpose server-side scripting language originally designed for web development to produce dynamic web pages PHP code is embedded into an HTML document and then interpreted by a Web server The Web server then generates the Web page document Just about all hosting companies support PHP Tutorial 8: Designing a Web Site with Frames page 96

97 Types of Includes PHP PHP is a very robust scripting language Has a syntax very similar to C PHP is mainly used to access databases allowing you to have a data-driven Web site All of this is beyond the scope of this course However, we can still use PHP, in a very simple way, to allow us to use includes Tutorial 8: Designing a Web Site with Frames page 97

98 Types of Includes PHP Includes: Problem: Let s say we have a 50 page Web site with a section of links on all 50 pages Solution: Copy that section of links and paste it into a new (blank) file that you will call links.php Notice that it is not called links.html Instead it is named links.php we ll explain that more in a bit This file should NOT have the <html> or <body> tags Rather, it should only have the tags for the links section Tutorial 8: Designing a Web Site with Frames page 98

99 Types of Includes PHP Includes: Solution: Now, once you ve saved the links content into the links.php file, it is time to include that links.php file into every page of the website Go to each page and delete the links section Why? Cause we re about to include it from the links.php file Now, in place of the links section, paste the following: <?php include("includes/links.php");?> Note: This code assumes that the links.php page is found within a folder called includes Tutorial 8: Designing a Web Site with Frames page 99

100 Types of Includes PHP Includes: Solution: Now, in place of the links section, paste the following: <?php include("includes/links.php");?> That s it! The content within the links.php file is will now be included into the other document So why must the file have a *.php extension? Although the majority of the HTML file still looks the same, we are using a php directive (instruction) As such, we need to use the php extension, so the server knows to process the file accordingly Tutorial 8: Designing a Web Site with Frames page 100

101 Types of Includes PHP Includes: Notes: PHP is a server-side scripting language Your PHP code must be interpreted by the server When the user opens up your page (let s say index.php), the server will see that you are including links.php into this index.php file, and it will include the links.php file accordingly Caveat: You need a server to view PHP pages! Solution: Install WINLAMP (which includes an Appache server) Or simply write your code and immediately upload it to your Web site to view it and confirm it is okay Tutorial 8: Designing a Web Site with Frames page 101

102 Tutorial 8: Designing a Web Site with Frames WASN T THAT MARVELOUS! Tutorial 8: Designing a Web Site with Frames page 102

103 Daily Demotivator Tutorial 8: Designing a Web Site with Frames page 103

104 Tutorial 8: Designing a Web Site with Frames College of Computing & Information Technology King Abdulaziz University CPCS-665 Internet Technology