CS计算机代考程序代写 file system FTP COMP3322 Modern Technologies on World Wide Web

COMP3322 Modern Technologies on World Wide Web
Workshop1: Fundamentals of Web Pages – HTML, CSS, and Responsive Web Design
Introduction
In this workshop, we are going to develop a simple HKU Custom Search Page. We will practice how to use basic HTML elements and CSS styling to format the webpage and use Responsive Web Design to adapt its look on a variety of devices. After finishing this workshop exercise, your page will appear as shown in the following screenshots:
Screenshot 1: when the screen width is larger than 1080px
COMP3322 WORKSHOP1 1

Screenshot 2: when the screen width is smaller than 580px
Screenshot 3: when the screen width is larger than 580px, but smaller than 1080px
Note: The same CSS code may lead to quite different page display on different browsers. You are recommended to use Chrome to develop/test your page.
COMP3322 WORKSHOP1 2

Workshop Exercise
[Step1]: Download “Workshop1_2020.zip” from HKU Moodle and extract it to a folder named “workshop1”. In this folder, there are two files index_WS1.html, style_WS1.css which are the template files in which you will add more HTML code and CSS code, respectively .
Section I: Build the HTML page
[Step2 (Page Title)]: In index_WS1.html, set the title of the page to “HKU CS Custom Search”.
[Step3 (Logo)]: At the top of the page, there is a division

with the id of “logo”. Make the division clickable, and link to HKU CS Home page (https://www.cs.hku.hk/) when clicked (using the element).
[Step4 (Navigation List)]: Underneath the HKU logo, there is a division

with id “navi”. In this division, use

, and elements to implement a navigation list, including three list items as follows. All three list items should be hyperlinks. The mapping between list items and links is as follows:
[Step 5 (Search (Table))]: In the division

with id “searchArea” underneath the navigation list, use the

element to create a form. Inside the
element, use

to create 4 cells.
• The first cell shows “Let’s”.
• The second cell contains a search button implemented using an element with type=”submit” and value=”Search Image” (the text displayed on the button).
• The third cell includes an input textbox, where the search string is to be entered; set the “name” attribute of the input textbox to “q”.
• The fourth cell contains “in cs.hku.hk ” (cs.hku.hk will be in bold font) and an element with the input type of “hidden” (refer to http://www.w3schools.com/tags/att_input_type.asp); set the “name” attribute of the hidden input field to “as_sitesearch” and the “value” attribute to “cs.hku.hk “, which provides the search domain parameter to Google server. (You can learn more about
List Item
Hyperlink
About us
https://www.cs.hku.hk/about-us/contact-information
People
https://www.cs.hku.hk/people/academic-staff
Programmes
https://www.cs.hku.hk/programmes/beng-compsc/programme-objectives- learning-outcome
COMP3322 WORKSHOP1 3

Google search parameters at https://moz.com/ugc/the-ultimate-guide-to-the-google-
search-parameters).
Set the “method” attribute of the form (the HTTP request method) to “get”, and “action” attribuite of the form to ” http://images.google.com/images ” (where the form data will be sent when the search button is clicked). Then after you type the search string and click the search button, an HTTP request carrying the URL https://www.google.com/search?q=yoursearchstring&as_sitesearch=cs.hku.hk&… (additional parameters might be appended by your browser) will be sent to the Google server, and a Google result page corresponding to your input and search domain parameter will appear.
[Step 6 (Contact Information)]: At the bottom of the page, there is a division

with id “footer”. In this division, add a

element containing “HKU CS website – Feedback, Web accessibility”, and two

elements to show the following two lines of contact information.
In addition, make the CS General Office a hyperlink (mailto:enquiry@cs.hku.hk) (using the element) and when you click the email address, a mail client should be invoked (Hint: use “mailto:” in the href attribute of the element; see https://www.w3schools.com/tags/att_a_href.asp).
Your page will look as follows after you have done the above steps:
Email: CS General Office
Telephone: (+852) 2859 2180
COMP3322 WORKSHOP1 4

Section II: Improve the page appearance using CSS styling
[Step 7 (linking to css file)]: Add the following in the element in index_WS1.html, such that the html page will be styled by the styling rules in style_WS1.css.
[Step 8 (logo)]: In “Workshop1_2020.zip”, you can also find a HKU CS logo image (hku- cs-logo.png). Set the image as the background of the “logo” division (Hint: use “background-image” http://www.w3schools.com/cssref/pr_background-image.asp and other relevant background properties to achieve the look as in the screenshot). Set the height of “logo” to 150 px. Set the attribute “background-size” to “contain”. Position the image to the center, and to the top of the page with a 20px margin (Hint: set “background- position ” and “margin-top” of the division).
[Step 9 (Navigation List)]: Arrange all list items horizontally (by setting the “display” property of each list item to the appropriate value), without bullet and underline of each clickable list item (Hint: use “text-decoration: none” on the element in the list). Set the font size to 20px. Set the right margin of each list item (

element) to 30px, background color to ” orange “, with a padding of 10px.
Set the left padding and the left margin of the list (

element) to 0px and 30px, respectively.
[Step 10 (Search textbox and button)]: Set the width of the search input textbox to 380px, height to 30px, border width to 1px, border style of solid with color “red”. The font size of the input text should be 20px.
Set the width and height of the search button to 180px and 30px, respectively, the background color of the search button to “lightgray”, the font of the text on the search button to bold, italic, 16px with a black color. There is no border for the search button.
[Step11 (Search Area)]: Set the attribute “class” of “Let’s”, searchButton and “in cs.hku.hk” to “col-1”. And set the class of searchInput to “col-2”. Set the background color of each cell to ” lightgray”, height to 50px, margin to 2px, and padding to 10px for both left and top. Set the “float” to “left” and “overflow” to “auto” (https://www.w3schools.com/cssref/pr_pos_overflow.asp). Set the width of “col-1” to 200px and width of “col-2” to 400px. Set the font size of “col-1” to “x-large” COMP3322 WORKSHOP1 5

(http://www.w3schools.com/cssref/pr_font_font-size.asp). Change the background color of “col-2” cell to “whitesmoke” when the cursor moves over it.
[Step 12 (Footer)]: Set the background color of the footer division to “lightsalmon”. Set its position property to “absolute”, and right/bottom/left to 0px (https://www.w3schools.com/cssref/pr_pos_right.asp), and padding to 1rem.
After you have finished the above steps, your page would look as follows:
Section III: More features with CSS
[Step 13 (Text shadow & Gradient Background)]: Further style the search button as follows (i.e., add more styling rules to .searchButton):
• The word “Search” should have a black text shadow, with 4px blur-radius, 2px h-
shadow and 2px v-shadow (Hint: use text-shadow property at http://www.w3schools.com/cssref/css3_pr_text-shadow.asp);
COMP3322 WORKSHOP1 6

• The submit button should have a gradient background: a linear gradient in the direction of -45 degree, where the color goes from “deepskyblue” to “lightcoral”, then to “gold”, finally to “mediumaquamarine”; (Hint: Use CSS3 Gradients https://www.w3schools.com/css/css3_gradients.asp).
[Step 14 (Transition)]: Set the attribute “target” of the second hyperlink in navigation bar (i.e., “People”) to “_blank” and add a transition effect. When the cursor is moved over the link, the background color of the link changes from “darkorange” to “orange” with a slow start and 1 second delay before the transition effect occurs. (Hint: Use CSS3 Transitions- timing-function and delay transition effect at https://www.w3schools.com/css/css3_transitions.asp).
[Step 15 (Responsive Web Design)]
• Add into
element in index_WS1.html.
• Add CSS code in style_WS1.css as follows: when the screen width is no larger than 580px,
(1) the navigation list becomes more compact with smaller font:
li {
margin-right: 0; font-size: 15px;
}
ul {
margin-left: 1px; margin-top: 1px; margin-bottom: 1px;
}
COMP3322 WORKSHOP1 7

(2) The font size and margin in the footer division become smaller:
#footer h3 { font-size: small; margin-top: 0px;
}
#footer p {
font-size: x-small; margin-top: 0px; margin-bottom: 0px;
}
(3) Set all

s in the searchArea using the “clear property” to avoid them placing in the same row, i.e., each moves to a new line when the screen is small (Screenshot 2). In addition, set the font size of the first and last

s to large.
• Add CSS code in style_WS1.css according to the following descriptions: when the screen width is no larger than 1080px,
(1) Thenavigationlistbecomeslesscompactwithlargerfont(i.e.settheright margin of the list to 2px and font size to 18 px), as well as the list items with the left, top and bottom margin of 2px respectively.
(2) Thefont-sizeof“HKUCSwebsite-Feedback,Webaccessibility”inthefooter section becomes medium with a top margin of 1px; the font-size of the

tag in the footer becomes small with the top and bottom margin of 1px.
(3) Arrange the

blocks in the searchArea to two rows (Screenshot 3) by setting the “clear property” of the “col-2” class.
Upload and Test
Uploading Method:
Use any FTP Client to upload your files (including index_WS1.html, style_WS1.css, as well as the HKU logo image) to the server i7.cs.hku.hk. Suggested FTP Client is FileZilla which you can download here:
https://filezilla-project.org/
COMP3322 WORKSHOP1 8

Step1: Connect to HKUVPN. (If you haven’t installed HKUVPN, please following the procedure as described in this webpage:
https://intraweb.hku.hk/local/its/hkuvpn/
Step2: Start the FileZilla application and set a connection to i7.cs.hku.hk. Choose SFTP for the file protocol, host name as “i7.cs.hku.hk”, port number as 22. Enter your CS username and password as the one in the CS Intranet. Then click “Quickconnect”.
Step3: You can see a common FTP interface which has your local file system on the left- hand side, while on the right-hand side is the i7 server file system.
COMP3322 WORKSHOP1 9

Step 4: Go to the directory public_html and create a new directory with the name Workshop1. Then upload all your files to this Workshop1 directory: hku-cs-logo.png, index_WS1.html, and style_WS1.css.
Step 5: Browse and test your webpage at: http://i7.cs.hku.hk/~[your_CSID]/Workshop1/index_WS1.html
COMP3322 WORKSHOP1 10

element containing “HKU CS website – Feedback, Web accessibility”, and two

Related Posts