11/14

B/S结构用户界面设计

 

【实验编号】

10003809548j 　　Web界面设计

【实验学时】

8学时

【实验环境】

l  所需硬件环境为微机；

l  所需软件环境为dreamweaver

【实验内容】

1. 本次B/S结构用户界面设计，我参考国外教程，制作了一个咖啡商店网页。

2.界面设计如下：

 

 

 

 

 

搜索界面：

 

登录页和注册页：

 

 

侧边导航：

 

【关键步骤】

1. Js + css 控制界面的显示
2. <!-- script -->
3. <script>
4.     document.addEventListener('DOMContentLoaded', function (event) {
5.         // Search =================================//
6.         document.addEventListener('click', function (event) {
7.             if (event.target.closest('.nav-search')) {
8.                 document.querySelector('.search-bar').classList.add('search-bar-active');
9.             } else if (event.target.closest('.search-cancel')) {
10. 10.                 document.querySelector('.search-bar').classList.remove('search-bar-active');
11. 11.             }
12. 12.         });
13. 13.  
14. 14.         //login and sign up =//
15. 15.         document.addEventListener('click', function (event) {
16. 16.             const formElement = document.querySelector('.form');
17. 17.             //check if the clicked element has the class 'nav-user' or 'already-account'
18. 18.             if (event.target.closest('.nav-user, .already-account')) {
19. 19.                 formElement.classList.add('login-active');
20. 20.                 formElement.classList.remove('sign-up-active');
21. 21.             }
22. 22.  
23. 23.             //check if the clicked element has the class 'sign-up-btn'
24. 24.             if (event.target.closest('.sign-up-btn')) {
25. 25.                 formElement.classList.remove('login-active');
26. 26.                 formElement.classList.add('sign-up-active');
27. 27.             }
28. 28.  
29. 29.             //check if the clicked element has the class 'form-cancel'
30. 30.             if (event.target.closest('.form-cancel')) {
31. 31.                 formElement.classList.remove('login-active');
32. 32.                 formElement.classList.remove('sign-up-active');
33. 33.             }
34. 34.         });
35. 35.  
36. 36.         // fix header //
37. 37.         const header = document.querySelector('header');
38. 38.         let lastScrollY = window.scrollY;
39. 39.  
40. 40.         window.addEventListener('scroll', function () {
41. 41.             const currentScrollY = window.scrollY;
42. 42.  
43. 43.             //check if at the top
44. 44.             if (currentScrollY === 0) {
45. 45.                 header.classList.remove('header-fix');
46. 46.             } else if (currentScrollY < lastScrollY) {
47. 47.                 header.classList.add('header-fix');
48. 48.             } else {
49. 49.                 header.classList.remove('header-fix');
50. 50.             }
51. 51.             lastScrollY = currentScrollY;
52. 52.         });
53. 53.     });

54. </script>

1. 55.  
   1. 利用css制作响应式布局
   2. @media(max-width: 1200px) {
   3.     .footer-container {
   4.         display: grid;
   5.         grid-template-columns: 1fr 1fr;
   6.         grid-gap: 40px;
   7.     }
   8.  
   9. 10.     #download-app {
   10. 11.         width: 90%;
   11. 12.     }

13. }

1. 14.  

15. @media(max-width: 1100px) {

1. 16.     .popular-container {
2. 17.         grid-template-columns: 1fr;
3. 18.     }
4. 19.  
5. 20.     .popular-banner-img {
6. 21.         max-height: 500px;
7. 22.     }

23. }

1. 24.  

25. @media(max-width: 1024px) {

1. 26.     .recent-product-container {
2. 27.         grid-template-columns: 1fr 1fr 1fr;
3. 28.         grid-gap: 20px;
4. 29.     }
5. 30.  
6. 31.     #download-app {
7. 32.         flex-direction: column;
8. 33.         height: 100%;
9. 34.         background-color: transparent;
10. 35.         margin: 30px auto;
11. 36.         max-width: 100%;
12. 37.     }
13. 38.  
14. 39.     .app-img {
15. 40.         height: 450px;
16. 41.         width: 220px;
17. 42.     }
18. 43.  
19. 44.     .download-app-text {
20. 45.         max-width: 100%;
21. 46.         background-color: var(--product-bg-color);
22. 47.         padding: 20px;
23. 48.         margin-top: 20px;
24. 49.         display: flex;
25. 50.         flex-direction: column;
26. 51.         justify-content: center;
27. 52.         align-items: center;
28. 53.         text-align: center;
29. 54.         border-radius: 20px;
30. 55.     }
31. 56.  
32. 57.     .main-content {
33. 58.         display: flex;
34. 59.         flex-direction: column-reverse;
35. 60.     }
36. 61.  
37. 62.     .main-content-img {
38. 63.         max-height: 60vh;
39. 64.     }
40. 65.  
41. 66.     .main-content-text {
42. 67.         margin-top: 30px;
43. 68.         max-width: 100%;
44. 69.         width: 100%;
45. 70.         text-align: center;
46. 71.         justify-content: center;
47. 72.         align-items: center;
48. 73.     }
49. 74.  
50. 75.     .main-content-text p {
51. 76.         max-width: 400px;
52. 77.         margin: auto;
53. 78.     }
54. 79.  
55. 80.     .main-content-text h1 {
56. 81.         font-size: 2rem;
57. 82.         line-height: 2.4rem;
58. 83.     }
59. 84.  
60. 85.     .main-content-text a {
61. 86.         padding: 0px 20px;
62. 87.     }

88. }

1. 89.  

90. @media(max-width:850px) {

1. 91.  
2. 92.     .blog-container {
3. 93.         grid-template-columns: 1fr 1fr;
4. 94.     }
5. 95.  
6. 96.     .blog-box {
7. 97.         display: flex;
8. 98.         flex-direction: column;
9. 99.     }
10.  
11.     #partner {
12.         margin-top: 20px;
13.         justify-content: center;
14.         grid-gap: 30px;
15.     }
16.  
17.     #partner img {
18.         height: 40px;
19.     }
20.  
21.     #shopping-banner {
22.         padding: 20px;
23.     }
24.  
25.     .shopping-banner-container {
26.         display: flex;
27.         flex-direction: column-reverse;
28.     }
29.  
30.     .shopping-banner-img {
31.         height: auto;
32.         width: 90%;
33.     }
34.  
35.     .shopping-banner-img img {
36.         width: 100%;
37.     }
38.  
39.     .shopping-banner-text {
40.         width: 90%;
41.         margin-top: 30px;
42.         max-width: 100%;
43.     }
44.  
45.     .navigation {
46.         padding: 20px;
47.         justify-content: space-between;
48.         align-items: center;
49.     }
50.  
51.     .logo img {
52.         max-height: 30px;
53.     }
54.  
55.     header .header-fix .navigation {
56.         padding: 10px 20px;
57.     }
58. }
59.  
60. @media(max-width: 724px) {
61.  
62.     .recent-product-container,
63.     .popular-product-container {
64.         grid-template-columns: 1fr 1fr;
65.         grid-gap: 20px;
66.     }
67.  
68.     .blog-container {
69.         grid-template-columns: 1fr;
70.     }
71.  
72.     .login-form,
73.     .sign-up-form {
74.         width: 90%;
75.     }
76.  
77.     .search-input {
78.         height: 60px;
79.     }
80.  
81.     .search-input input,
82.     .search-cancel {
83.         font-size: 1.4rem;
84.     }
85. }
86.  
87. @media(max-width: 550px) {
88.     .footer-container {
89.         grid-template-columns: 1fr;
90.     }
91.  
92.     .service-box {
93.         width: 100%;
94.     }
95. }
96.  
97. @media(max-width:320px) {
98.  
99.     .recent-product-container,
100.     .popular-product-container {
101.         grid-template-columns: 1fr;
102.     }
103.  
104.     .download-btns {
105.         flex-direction: column;
106.     }
107.  
108.     .download-btns a {
109.         margin: 4px 0px;
110.         width: 140px;
111.     }
112.  
113.     .download-btns a img {
114.         width: 100%;
115.     }
116.  
117.     .download-app-text strong {
118.         font-size: 1.3rem;
119.     }
120. }

 

【实验体会】

通过本次实验，我有幸设计并实现了一款咖啡商店的网站，这一过程不仅加深了我对HTML5中各种标签的理解，还让我熟练掌握了如何运用CSS来美化和布局网页样式以下是我在实验中的几点体会：

1. 我通过CSS对网站进行了细致的美化，包括响应式布局设计，以确保网站在不同设备上都能提供良好的用户体验。此外，我还学习了如何使用CSS选择器和伪类来精细化控制页面元素的样式。

2. 利用JavaScript，我实现了页面元素的动态显示和隐藏，以及用户交互的即时反馈。这不仅增强了网站的交互性，也提升了用户的参与度

通过这次实验，我不仅提升了自己的技术能力，也对前端开发有了更深入的认识。我期待将这些知识应用到未来的项目中，为用户创造更加丰富和便捷的在线体验。