Introduction to. Name: Class: ~ 1 ~

Transcription

1 Introduction to Name: Class: ~ 1 ~

2 Contents Introduction... 4 Internet protocols... 5 Web servers... 6 Software installed in a web server... 6 Internet protocols and client/server software... 7 Files in a web server... 7 When a resource is requested from an HTTP server... 8 Design of a web site... 9 The inside of an HTML file... 9 Directory structure of a web site Navigation mechanism of a web site Layout of the web site Some Dreamweaver and HTML basics Simple formatting Headings and paragraphs Hyperlinks Images Videos Audio HTML basics (not required in S3 examination) Implementing a web site Using framesets The frameset document Navigation Other files ~ 2 ~

3 Previewing the web site Using Dreamweaver templates Setting up a Dreamweaver site Creating a template Creating other files Navigation and layout Applying the layout Previewing the web site ~ 3 ~

4 Introduction After reading this set of notes, you will learn (1) how files are uploaded to and downloaded from the internet; and (2) how to prepare a web site. ~ 4 ~

5 Internet protocols To communicate with other networking devices, networking devices need to use the same methods (called protocols) for communications. A lot of protocols are involved in network communications. According to the Internet Protocol Suite, the protocols are divided into 4 layers. 1 Protocols in the upper layer need one or more protocol in the lower layer to function properly. Layer 4 (Application) Layer 3 (Transport) Layer 2 (Internet) Layer 1 (Link) Internet protocols closely related to web sites are listed below: Protocol IP (Internet Protocol) TCP (Transmission Control Protocol) HTTP (Hypertext transfer protocol) FTP (File transfer protocol) DNS (Domain name system) Layer in the Internet Protocol Suite Use 2 (Internet) Deliver network packets based on the IP addresses 3 (Transport) Provides reliable, ordered and error-checked delivery of data. 4 (Application) The protocol browsers communicate with web servers. 4 (Application) Transfer files between computers, often used to upload web sites. 4 (Application) Translate domain names (e.g. into IP addresses (e.g ). 1 Another classification is the OSI model, which divide the protocols into 7 layers. ~ 5 ~

6 Web servers Web servers deliver web content that can be accessed through the Internet. The most common use is to serve web sites. Software installed in a web server Communications between browsers and web servers takes place using HTTP, and therefore a HTTP server is installed in the web servers. In addition, there should be some way (e.g. FTP) to let web site authors to upload contents to the server. Below are a set of typical software installed with a web server. Type of software Operating System (OS) HTTP server Web site administration Programming language (server-side scripting) Database server (used by programming languages) Name of software Linux (centos, Ubuntu) Apache vsftpd (a FTP server) Samba (CIFS) Php MySQL Usually, a programming language and a database server are installed to enable serving of dynamic web pages. The use of these types of software is out of the scope of the notes. ~ 6 ~

7 Internet protocols and client/server software To access files in web servers, we need to use client software that implements the internet protocols. Similarly, server software is also needed in servers to allow clients to connect to the server. Here is a list of protocols and their corresponding software: Protocol Client software Server software HTTP Google Chrome Apache Mozilla Firefox Internet Explorer FTP FileZilla vsftpd WinSCP Windows Explorer browsers (read only) CIFS Windows Explorer (as network drives, like P drive in Tang Hin) Samba Files in a web server The same file in the server can be accessed using different protocols. The server software of each protocol implements a different file structures. Protocol Typical path of a file named [file] (Internal storage in web server) /home/s123456/public_html/[file] HTTP FTP CIFS /public_html/[file] P:\public_html\[file] Note: The \ symbol is used in Windows instead of /. Web site administrators normally use FTP to upload files to a web server. If possible, CIFS is also used to allow easy access of the files in Windows Explorer. However, CIFS can be used in intranets only (e.g. inside the school campus). Users of a web site access the uploaded files with a web browser, such as Google Chrome and Mozilla Firefox. Browsers communicate with web servers mainly using HTTP. ~ 7 ~

8 When a resource is requested from an HTTP server The table below shows the typical results when an HTTP server is queried. (Note: these are based on the configuration of the server student.tanghin.edu.hk. Exact configurations of individual web servers can be different.) Requested resource A file Return The requested file A directory index.html If index.html is not present, the list of files in the directory is shown. A resource (file/directory) which is NOT present The error message Not Found (404). ~ 8 ~

9 Design of a web site When you are starting a new web site, you need to consider the following first: How to manage the contents of the web site? (In you first web site, a set of static HTML files are used, i.e. no management is done. In the future, you may use a CMS, a static site generator, or a wiki.) How the content is organized. Put them into a good structure of directories. You should also decide where to store images and other non-text files. The navigation mechanism. The layout of the web site. Typography, i.e. the fonts and the paragraph style. There are a lot of good fonts in English, but choices are few in Chinese. The inside of an HTML file Even if we are not required to recite the details of an HTML file, we should know a few basic concepts by looking at a simple HTML file. <!DOCTYPE html> <html> <head> <title>this is a title</title> </head> <body> <p>hello world!</p> <p><a href=" Link to Google!</a></p> <img src="images/sunset.jpg" /> </body> </html> The HTML at the top is a document titled This is a title, with the message Hello world!, a link to with text A link to Google!, and shows an image with a relative file name image/sunset.jpg. There are a few notable points: An HTML file can contain hyperlinks to different pages and web sites. Instead of listing everything in a single page, you can separate the information into many pages. Formatting in an HTML file is controlled by tags, such as <p>, <img>, and others. An HTML file is a text file. It is not possible (or at least not practical) to include non-textual information such as images, videos and ~ 9 ~

10 sounds. We link to the non-textual files instead. (Like images/sunset.jpg in the example above.) As a conclusion, web pages behave very differently from files produced by a word processor. Instead of a single DOC file, we have a lot of HTML files, images, videos, sounds, and possibly other types of files. Therefore, we need to implement a good directory structure in order to manage the files systematically. Directory structure of a web site Usually we put files with the same type together. Here is a guideline below. Note that all directories are relative to the root of the website (i.e. /index.html ) Directory (relative) Files to be placed / HTML files /images /styles /media /scripts /fonts Images (JPG and PNG) CSS style sheets (if any) Videos and sounds JavaScript files Web fonts (if any) Note that it is NOT advisable to put HTML files in separate directories, because it is difficult to handle the relative paths unless you are using some kind of automation. If necessary, use name prefixes instead. ~ 10 ~

11 Navigation mechanism of a web site For beginners, it is easiest to organise the web site into a hierarchical structure, like the picture below. Of course, in your first web site, there should be only a few pages, so the navigation tree is likely to have one level only. (Source: As stated before, it is not a good idea to put HTML files into different directories. Instead, use the same prefix for the files in the same group. For example: Item Filename (all inside / ) Sunny Skies Elementary School index.html Web Site School Information schoolinfo.html - Principal s Message schoolinfo_principal.html - Mission Statement schoolinfo_mission.html School Policies schoolpolicies.html - Dress Code schoolpolicies_dresscode.html ~ 11 ~

12 Layout of the web site There are countless ways to design the layout of the web site. However, there are something common in general: Layout Item Site title Content area Navigation Use of colours Use of fonts Typography Uses This can be made with or without pictures or a logo. Every page must have some content. Show the content in the same place in every page. There should be a way to navigate in the web site. Black text on white background is too crude for a web site. So there should be some change. Note that headings can have different colours. If your website is in Chinese, you are stuck with just a few fonts. (Three for Windows, one for mobile phone.) However, if your website is in English, you can choose from a huge list of fonts. (Google Fonts provides more than 600 free fonts.) To ensure consistent view over different computer systems, you can even put the fonts into the web site. Besides the font, you can also use different font size, font styles, effects, etc. ~ 12 ~

13 Some Dreamweaver and HTML basics Dreamweaver is a WYSIWYG web site editor. It is easy to edit your page in Dreamweaver because you can edit the text with a GUI, instead of manipulating the underlying HTML code. You can see the interface of Dreamweaver CS 4 below. Headings Simple formatting Browse for File (Insert hyperlink) Simple formatting You can simply type the text in the Design view, and see the HTML code appear at the Code View at the same time. A few styling are available as toolbar buttons, such as bold, italic, unordered list (bulleted list) and ordered list (numbered list). Headings and paragraphs You can apply 6 different levels of headings ( Heading 1 to Heading 6 ) in your document. Headings have a larger font size and a different font style. Always use Heading 1 for the top level headings, and you may format the style of Heading 1 later. ~ 13 ~

14 Hyperlinks After you have saved a few files (remember to save them in the same directory), you can create hyperlinks. Just select the required text, and press the Browse for File button, and finally open the required file. After you have created the hyperlink, you can still edit the text in the hyperlink. You can also link to non-html files (such as a Word Document). Just remember to add the file into the site directory before creating the link. Files outside the site directory are not uploaded to the server, and hence not accessible by readers. Images You can add images into the HTML file using the Insert Image command. Note that the command only adds a reference to the image file. It means that you should only add the files inside the site directory (preferably inside /images ). Image file formats supported by browsers are JPG, PNG and BMP. You should prepare the image file by an image processing software, and resize the image correctly before putting it in the site directory. Videos Dreamweaver does NOT provide a modern interface to insert video. (Its interface is outdated.) You should simply upload your video to a hosting service (e.g. Youtube, THTV, etc.), and copy the HTML code provided by these servers into your HTML files. Audio Similar to a video, an audio should not be added using the GUI in Dreamweaver. You can add an audio tag to link to the file by yourself. Below is an example of the <audio> tag: <audio src="audio/file1.mp3" autoplay="autoplay" controls="controls" loop="loop"> Your browser does not support the <code>audio</code> element. </audio> ~ 14 ~

15 The table below shows the use of some of the attributes: Attribute src Autoplay (autoplay="autoplay") Controls (controls="controls") Loop (loop="loop") Use The file to be linked to If present, the file plays automatically without user interaction. (Remove the attribute if not needed.) If present, shows an interface that let the user to control playback. (Remove if not needed.) If present, the audio replays after reaching the end. (Remove if not needed.) Note that only MP3 files are supported by all modern browsers. You may go to the following URL for more information of the <audio> tag: HTML basics (not required in S3 examination) As seen above, the format of web documents are in HTML. So it is important to recognise a few HTML tags: Tag <html> </html> <head> </head> <base> <title> </title> <body> </body> <h1> </h1> to <h6> </h6> <b> </b> <i> </i> <p> </p> <img> <a> Use Mark the beginning and the end of the HTML document. Mark the head section, which includes the title, text encoding, <base> tag, CSS files and scripts. Set the base path and target. Very useful for frameset web sites. The title of the web site. The body section. This include all the text shown in the web page. Heading 1 to heading 6. Bold Italic Paragraph Image Anchor (including hyperlinks in href attribute) In the tags, attributes can be added to convey extra information. For example, in <a href=" the href attribute includes the URL to be linked to. ~ 15 ~

16 Implementing a web site In this set of notes, we construct the web site using Dreamweaver. There are a few ways to implement the web site. Or more specifically, methods to create the navigation in the web site effectively. You should read the following section briefly, and select one of the methods to create your project. This whole section is not required in examinations. All of the designs below use the following layout: Header Navigation Content Using framesets A web site with frameset is an obsolete design (being obsolete starting from the early 2000s). It is obsolete because we cannot show a page inside the website by typing its URL. However, it is the easiest kind of web site to set up. Since the design is obsolete, it is quite difficult to set up a new frameset website in Dreamweaver. Instead, we normally use Microsoft FrontPage (up to 2003) to create a frameset website with ease. Since we don t have a working installation of FrontPage, the files needed are simply provided to you. ~ 16 ~

17 The frameset document First of all, we should set up the frameset HTML. You should create a text file called index.html, and copy the following HTML code inside. (If the file is not empty, just remove all contents from that file.) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>title of the Web Site</title> </head> <frameset rows="80,*" cols="*" frameborder="no" border="0" framespacing="0"> <frame src="header.html" name="topframe" scrolling="no" noresize="noresize" id="topframe" title="topframe" /> <frameset rows="*" cols="120,*" framespacing="0" frameborder="no" border="0"> <frame src="nav.html" name="leftframe" scrolling="no" noresize="noresize" id="leftframe" title="leftframe" /> <frame src="main.html" name="mainframe" id="mainframe" title="mainframe" /> </frameset> </frameset> <noframes><body> </body></noframes> </html> When you copy the contents, you should change the double underlined parts of the document. Change From Title of the Web Site Change To The title of your web site 80 The height of your website header 120 The width of your navigation area. (Note: an English web site needs a wider navigation than a Chinese web site.) In the frameset document above, some words are dotted. Those are the HTML files are referenced. You can create all these documents as Blank Page HTML <none> in Dreamweaver. Here is the use of each file: Filename header.html nav.html main.html Use The header of your web site. Contains the site title. In most web sites, a logo and a background image are also added. The navigation of the web site. (Refer to the section Navigation below.) The main content of the front page. (Also called the home page or the landing page). ~ 17 ~

18 Navigation The navigation in a frameset website is done entirely in the left frame, which shows the file nav.html. You may copy the HTML code below to the file directly. (It is simply an empty HTML file with the tag <base> added.) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <base target="mainframe" /> <title>untitled Document</title> </head> <body> </body> </html> Other files All other files, including header.html, main.html, can be created as Blank Page HTML <none> in Dreamweaver. Previewing the web site To preview a frameset web site, we simply open index.html, and click a link that opens the required file. If there is no such link, you should create one in nav.html. ~ 18 ~

19 Using Dreamweaver templates If you want to create a modern web site, you should include the navigation in every HTML file. In order to make the contents in all the files the same, we need to Dreamweaver templates (or another method of your choice) to synchronize the common parts of the HTML files. Setting up a Dreamweaver site The first step to use Dreamweaver templates is to set up a new site. In the pull-down menu, select Site New Site to see the dialog box below. Then simply enter a site name, and set the correct Local root folder and Default images folder. (Create these folders/directories before the New Site command. Remember that the images folder MUST be inside the root folder.) You may skip the rest of the configurations until you think that it is necessary. ~ 19 ~

20 Creating a template The next action is to create a template. Now select New Document, and choose the setting shown in the picture below, and press Create. Then select everything (Ctrl + A) inside the box with the words Main Content. Select Insert Template Objects Editable Region, or press the shortcut key Ctrl + Alt + V. You should name the region Content. After that, you can save the file and edit its contents later. Warning: Do not rename the file in Windows Explorer. If you want to rename the template, do it in Dreamweaver. ~ 20 ~

21 Creating other files After creating the template, you can create HTML files using that template. You may refer to the screen shot below. Only the editable regions in the HTML file can be edited. The other parts are pulled from the template. Remember to set the page title in every page inside Page Properties. You should also note that readers of your web site always go to index.html first, so make that file your front page. ~ 21 ~

22 Navigation and layout Navigation is entered in the template. Once you have entered the template, all the edits in the template is synchronized to all HTML files in your web site. You can edit the layout of the site in the same manner. In Page Properties, you can change the style of headings and also the background colour of the web site. For other parts of the layout, select from the pull-down menu Window CSS Styles to open the style pane. Experiment with all the rules, especially those with a # character. Double-click on a rule to edit the layout. By modifying the background colours of each rule, you will soon find out what parts of the web page they link to. Try every of these rules CSS layout is very powerful. If you are willing to learn CSS, you can be able to apply styles not available in Dreamweaver (such as text shadows, transformations, animations). ~ 22 ~

23 Applying the layout If the content of your page is not updated automatically, you can apply the update manually by selecting Modify Templates Update Pages in the pull-down menu. Just select Entire Site and then Start. Now all your HTML files are updated. Previewing the web site To preview a non-frameset web site, just open the corresponding HTML file, or you can use the Preview in Browser function in Dreamweaver. ~ 23 ~