CIS363 Web Interface Design With Lablab 3 Intermediate CSS

Cis363 Web Interface Design With Lablab 3 Intermediate Css Box Model

Make a website about your major, computer information systems, and the opportunities in this major. This website should have four pages. The main page should have information about the field of information technology and the courses you would take in a typical CIS program. Also, add reasons why you decided to major in CIS. Finally, the main page should have three links. Each link will link to a page that will have information about a position that you may want to obtain after graduating with your CIS degree. Some examples are web programmer, system analyst, and database administrator. It is left up to you which positions you would like to pursue and hence, create three different pages to describe. The pages that describe the position should have duties of the position, expected growth, outlook, salaries, working conditions, major companies that hire for that particular position, related images (at least 3), and so forth. Each page must have at least three graphical elements. You must implement the CSS features listed below. Box Model Floating Elements Borders Remember that this website should be well-organized, informative, and attractive. Use colors and great graphics to make this web page interesting so that you can attract more business.

Paper For Above instruction

This project involves designing and developing a comprehensive website dedicated to the field of Computer Information Systems (CIS), with the aim of providing informative content and career insights to prospective students and professionals. The website structure consists of four interlinked pages, including a main homepage and three individual pages detailing various CIS-related career positions. This assignment emphasizes the application of advanced CSS techniques, including the box model, floating elements, borders, and responsive layout design, to create an engaging, visually appealing, and well-organized site.

The primary page, named index.html, serves as the homepage. It introduces the CIS major, outlining the typical courses involved, reasons for choosing CIS as a major, and general information about the information technology landscape. The page incorporates structured layout components such as header, footer, navigation, and main content sections, each encapsulated within <div> tags with assigned classes for CSS styling. Visual elements include relevant images that are appropriately credited and optimized for web use. Text formatting involves at least three different tags, such as headings, bold, and italics, to enhance readability and emphasis.

Three additional pages, each representing a potential career—such as Web Programmer (programmer.html), System Analyst (analyst.html), and Database Administrator (databaseadmin.html)—are created. Each career page contains detailed descriptions of job duties, future outlook, salary expectations, working conditions, and major companies hiring for these roles. To enrich content, each page features at least three graphical elements—images related to the job position—ensuring they are used with proper permission and optimization. Consistent with the homepage, these pages utilize various HTML tags for formatting and include hyperlinks back to the main page and between pages for navigation.

To demonstrate a professional and functional website, all pages must be interconnected via operational hyperlinks. The CSS styling should utilize the box model for layout control, floating elements to create multi-column sections, borders for visual separation, and appealing color schemes. The overall design focus is to build a site that is both attractive and informative, serving as an effective informational tool and professional showcase for a CIS-related web presence. The website should be functional, visually compelling, and adhere to web standards for accessibility and responsiveness.

References

  • W3Schools. (2023). CSS Box Model. Retrieved from https://www.w3schools.com/css/css_boxmodel.asp
  • Mozilla Developers Network. (2023). CSS Layout - Float. Retrieved from https://developer.mozilla.org/en-US/docs/Web/CSS/float
  • HTML.com. (2023). HTML Image Tag. Retrieved from https://html.com/tags/img/
  • CSS-Tricks. (2023). Borders in CSS. Retrieved from https://css-tricks.com/almanac/properties/b/border/
  • Stanford University. (2023). Responsive Web Design Fundamentals. Retrieved from https://web.stanford.edu/~dougbed/CS142/Responsive.pdf
  • FreeCodeCamp. (2023). Introduction to CSS Layout. Retrieved from https://www.freecodecamp.org/news/css-layout-guide-with-examples/
  • W3Schools. (2023). Hyperlinks in HTML. Retrieved from https://www.w3schools.com/html/html_links.asp
  • Jens L. (2022). Web Graphics and Images Optimization. Journal of Web Development, 15(4), 22-29.
  • Anderson, P. (2021). Web Design Best Practices for User Engagement. Journal of Digital Media, 10(2), 45-55.
  • Lea, D. (2020). Modern CSS Techniques for Layout and Design. Web Design Journal, 22(3), 35-42.

Related Assignments