Interactive Design -Final Project
Interactive Design - Final Project
Ke Bo Zhi / 0362533
Bachelor of Design (Hons) in Creative Media
Final Project
HTML
Based on the prototype designed in the previous blog, start writing HTML code to ensure that the page content and structure are clear. The following is a simple HTML example showing a plant encyclopedia page:
CSS
Based on the design prototype, write CSS styles to ensure that the page is visually consistent with the game style and has a responsive design.
Debugging and optimization: Preview page effects in real time, adjust layout and details, and ensure style consistency.
Resource optimization and function enhancement
Resource optimization:
Image compression: Use tools (such as TinyPNG) to optimize image file size, or convert images to WebP format to increase loading speed.
Code compression: Use tools (such as CSS Nano, HTML Minifier) to reduce code size.
Reduce HTTP requests: Merge multiple CSS or JS files into one file to improve loading efficiency.
Function enhancement:
Use simple JavaScript functions to add basic interactions to the page, such as switching menus, jump animations, etc.
Ensure that the form functions normally and all submitted data can be received and processed by the background.
Compatibility and responsive testing
Multi-browser testing: View page effects in mainstream browsers (such as Chrome, Firefox, Safari, Edge) to ensure correct functionality.
Device testing: Test the responsive design of the page on mobile phones, tablets, computers and other devices.
Error fixing: Fix problems found in the test, such as text layout overflow, invalid button clicks, etc.
Deployment and launch
Final check: Check whether all file paths, image loading, link jumps are normal and ensure that there are no syntax errors in the code.
Deploy to the server: Upload the project to the server (such as Apache, Nginx) or use a modern hosting platform (such as Netlify, Vercel).
Domain binding: Configure a suitable domain name for the website and ensure that the HTTPS certificate is installed.
Post-launch maintenance
Regular updates: Continuously optimize content and functions based on user feedback to keep the page active.
Data monitoring: Use analytical tools (such as Google Analytics) to track visits and user behavior and analyze data to improve user experience.
Error handling: Regularly check whether the page has problems such as loading failure and functional abnormality and fix them in time.
MY NETLIFY LINK: https://mainpageplants.netlify.app/
Reflection (800-1000)
When designing CSS and HTML websites, you often encounter various problems, including confusing layouts, incorrect file paths, poor compatibility, and difficulty debugging. These problems may be caused by unfamiliarity with the tools, or by imperfect code logic or inadequate development specifications. The following summarizes common problems and solutions during the production process.
When making a website, layout issues are one of the first challenges. Newbies often encounter CSS files that are not loaded correctly, resulting in page styles not taking effect, or responsive designs that fail to adapt to different devices, and pages display abnormally on mobile phones or tablets. These problems can be solved from the following points. First, make sure the CSS file path is correct. When referencing CSS files in HTML files, use relative paths, such as <link rel="stylesheet" href="./css/style.css">, to avoid loading failures due to file location changes. Second, use modern CSS layout techniques, such as Flexbox or Grid, to achieve flexible and dynamic layouts. For example, Flexbox can easily solve problems such as centering and alignment. The code is as follows:
.container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
In addition, to ensure consistent display effects on different devices, media queries can be used to achieve responsive layout. For example:
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}
Responsive design is particularly important in game-related websites because visitors may access the website through various devices (such as mobile phones, tablets, and computers). For example, a page that displays beautiful game character information may display a menu through a sidebar on the PC side, but it needs to be readjusted to a top navigation bar on the mobile side. If the responsive design is not in place, users may be lost due to a poor experience. Therefore, developers need to design the page layout in advance before starting the project to ensure compatibility and ease of use.
Compatibility issues are also a common problem encountered in development. Different browsers support the new features of CSS3 to different degrees, which may cause some styles or functions to not display correctly on some browsers. To solve this problem, you can add browser prefixes to key CSS properties, for example:
.box {
border-radius: 10px;
-webkit-border-radius: 10px; /* Safari */
-moz-border-radius: 10px; /* Firefox */
}
At the same time, during the project development process, multiple tests should be performed in mainstream browsers (such as Chrome, Firefox, Safari, Edge) to ensure that the website displays consistently on all platforms. For ease of testing, tools such as BrowserStack can be used to simulate different devices and browser environments. In addition, to improve the compatibility of the website, developers can refer to the support documents of each browser to avoid using certain experimental features.
File path errors are a common mistake made by many developers, especially when using Dreamweaver. Confused file paths can lead to resource loading failures, such as images not being displayed, and CSS or JavaScript files not working. In this regard, it is recommended to plan the file structure reasonably at the beginning of the project, for example:
/project
/css
/js
/images
index.html
All files are stored according to functional categories, and use relative paths to reference resources, so that path errors can be avoided when migrating or deploying the project. In addition, check the reference path of resources in HTML files several times during development to ensure that they always point to the correct location. For complex projects, you can use version control tools (such as Git) to manage file changes and keep backups for file organizations at different stages.
Although Dreamweaver's real-time preview function provides certain conveniences for developers, in complex projects, debugging with Dreamweaver alone is often inefficient. To improve debugging efficiency, it is recommended to combine browser developer tools (such as Chrome DevTools) for troubleshooting. In DevTools, developers can view HTML structure, CSS style and JavaScript running status in real time, quickly locate problems and modify code. In addition, for large projects, you can combine other tools, such as the Live Server plug-in of Visual Studio Code, to preview the modification effects in real time through the browser to improve development efficiency. If you need to debug JavaScript code, you can use console.log() to output variable values to help developers quickly locate logical errors. Dreamweaver's advantage lies in its intuitive design mode and real-time preview, but for more complex projects, its flexibility is slightly insufficient. Therefore, developers can choose the appropriate development tool according to project requirements.
The development of game-related websites also needs to focus on performance optimization. Because such websites usually contain rich image resources and multimedia content, too large files will prolong loading time and affect user experience. In order to reduce loading time, it is recommended to optimize image resources, use compression tools (such as TinyPNG) to minimize the image size, or directly use the WebP format to further reduce the file size. At the same time, you can merge and compress CSS and JavaScript files to reduce the number of HTTP requests, thereby increasing the loading speed of the website. Another effective method is to use lazy loading technology, so that images and scripts are loaded only when users need them, rather than loading all content at once.
In summary, in the process of making game-related CSS and HTML websites in Dreamweaver, common problems are mostly concentrated in layout, file management, compatibility, and debugging efficiency. By learning modern CSS layout techniques, optimizing file structure, taking into account cross-browser support, and combining a variety of debugging tools, developers can efficiently solve these problems and improve website quality. In the development process, standardized code writing habits and reasonable project planning are particularly important, which can not only reduce the occurrence of problems, but also make the entire development process smoother and more efficient.
评论
发表评论