跳至主要內容

Final-Project

AI悦创原创2022年12月3日1v1web 1v1纽约大学一对一NYU 1v11v1web 1v1纽约大学一对一NYU 1v1大约 11 分钟...约 3199 字

Instructions

Final Project

最终项目

In this assignment you will synthesize your knowledge of web design into a new, professionally-oriented website. Potential topics include a portfolio, a social cause, a small business, and an expanded résumé.

在这项作业中,你将把你的网页设计知识综合到一个新的,专业导向的网站。可能的主题包括一个投资组合,一个社会事业,一个小型企业,和一个扩展的résumé。

Research & Wireframing

研究和线框图

Once you've decided what your professionally-oriented website will be about, write a paragraph of at least 100 words describing your topic and how it will be presented on the web.

一旦你决定了你的专业导向网站将是关于什么的,写一段至少100字的描述你的主题和它将如何在网络上呈现。

Create a mood board using online tools such as Miro, Pinterest or desktop applications like Photoshop or Keynote. The mood board should be used with your website description to dictate the visual direction of your website. Consider things like color, type treatments, photographic style and design themes that you feel will be applicable to the website you will make.

使用Miro、Pinterest等在线工具或Photoshop或Keynote等桌面应用程序创建一个情绪板。情绪板应该与你的网站描述一起使用,以指示你网站的视觉方向。考虑色彩、类型处理、摄影风格和设计主题等你觉得适合你制作的网站的东西。

In addition to the mood board, choose three other websites that you will use as inspiration for this project. These websites can be in a similar topic or aesthetic. Please explain why you've chosen them and what aspects of these sites you aim to emulate with this project.

除了情绪板,选择其他三个网站,你将使用作为这个项目的灵感。这些网站可以在一个相似的主题或美学。请解释为什么你选择了他们,这些网站的什么方面,你的目标与这个项目模仿。

Next, using pencil and paper or collage, create a page layout that represents the design of your next website. This is an opportunity for you to make design decisions before applying them with code. The layout should include text, images, and navigation. You need not concern yourself with specific content at this stage; instead, focus on the arrangement of compositional elements on the page. You're welcome to use the same general layout for every page of the site; if you choose to vary the layout for different pages, create a separate wireframe for each. When you have completed your handmade wireframe, take a picture of it or scan it so that you have a digital image of your work.

接下来,使用铅笔和纸或拼贴画,创建一个页面布局,代表你的下一个网站的设计。这是您在将设计决策应用到代码之前做出设计决策的机会。布局应该包括文本、图像和导航。在这个阶段,你不需要关注具体的内容;相反,要关注页面上组成元素的排列。你可以在网站的每个页面上使用相同的总体布局;如果您选择为不同的页面改变布局,请为每个页面创建单独的线框。当你完成了你的手工线框,拍一张照片或扫描它,这样你就有了你的工作的数字图像。

Content

Begin building your website by creating a new project directory for its files. Using your wireframe as a guide, code your website with semantic HTML to describe page content. Your website should consist primarily of original content; any images or text that you use from other sources should be credited accordingly.

开始构建你的网站,为它的文件创建一个新的项目目录。以线框为指导,用语义HTML编写网站代码来描述页面内容。你的网站应该主要由原创内容组成;你从其他来源使用的任何图片或文字都应该被相应的标注。

每个页面上都应该有语义文本元素,包括但不限于段落()和标题(','等)文本。

每个页面上都应该有语义节元素,包括但不限于和“”。

页面应该通过“相对”url链接到彼此;较长的页面应该包含锚链接。

每个页面应该包括格式正确的JPG、PNG、GIF或SVG图像。

所有元素都应该包括src、width、height和alt属性以及适当的值

所有栅格图形的更高分辨率(2倍)版本应该与srcset属性一起提供

至少有一页应该包括使用HTML的网页格式的音频或视频

在编写HTML标记时,要密切注意它们。还可以使用W3C标记验证服务(W3C Markup Validation Service)检查HTML代码。

Form

Create one external style sheet and link it to all of your HTML pages. Code a responsive layout for your website with CSS.

创建一个外部样式表并将其链接到所有HTML页面。用CSS为你的网站编写响应式布局。

样式规则应该指定段落和标题文本的字体族和字体大小,以及链接状态,包括链接、已访问、悬停和活动。

使用CSS @font-face规则为您的页面添加web字体。

使用CSS灵活框布局模块(Flexbox)沿一个轴排列项目和/或CSS网格布局模块的整体页面结构。

viewport应该设置在所有HTML页面上,CSS应该包括至少一个@media查询和一个断点,以优化不同浏览器宽度的布局。

移动优化的布局应该限制在一列;桌面布局应该包括两列或两列以上。

Allow the content of your website to guide decisions you make about its design.

让网站的内容来指导你的设计决策。

Accessibility

可访问性

Keep in mind that people access the web in many different ways. Build your pages in a way that creates as few barriers as possible to experiencing your site, regardless of the user's ability or the device used to access the web. One way to test the accessibility of your site is with the browser's accessibility inspector. These tools do not necessarily catch all accessibility issues but an audit of your site should not indicate any serious issues. If it does, try to resolve them before submitting your assignment.

请记住,人们访问网络的方式多种多样。无论用户的能力或使用的设备如何,都要尽可能少地为用户体验网站创建障碍。测试站点可访问性的一种方法是使用浏览器的可访问性检查器。这些工具不一定能捕捉到所有的可访问性问题,但是对站点的审计不应该发现任何严重的问题。如果是,在提交作业之前尝试解决它们。

Submitting Your Assignment

提交作业

Publish your project on the i6 web server and submit the following via Brightspace.

在i6 web服务器上发布你的项目,并通过Brightspace提交以下内容。

你的主题、网站和励志网站的文字描述-复制并粘贴在作业文本框中

一个数字图像和/或链接到你的情绪板

手工线框的数字图像

你在i6上的网址

一个压缩档案,包含你的网页的所有文件(HTML, CSS, JavaScript,图像和媒体)

Please note that you are required to submit files along with URLs in order to receive credit for your work.

请注意,您需要提交文件和url,以便为您的工作获得学分。

Grading

This assignment is worth 15 points.

这个作业值15分。

Research & Wireframing

研究和线框图

一段至少100字,描述一个面向专业的网站主题(1分)

一个情绪板显示的颜色,纹理和图像是网站设计的灵感。(1.5点)

列出至少三个其他的网站,这些网站被用来寻找灵感,并说明原因。(1分)

网站线框页面布局(2点)

Content

每页语义文本元素(0.5分)

每一页都应该有语义节元素(1分)

页面应该通过“相对”url链接到彼此;较长的页面应该包含锚链接(1点)

每个页面应该包括格式正确的JPG、PNG、GIF或SVG图像;Img元素应该包括src, width, height, Alt属性和适当的值(1点)

所有栅格图形的更高分辨率(2倍)版本应该与srcset属性一起提供(0.5点)

网络格式的音频或视频,10mb以下,使用HTML

Form

样式规则应该指定段落和标题文本的字体族和字体大小,以及链接状态(1点)

一个应用CSS @font-face规则的web字体(0.5点)

CSS灵活框布局模块(Flexbox)用于沿一个轴排列项目和/或CSS网格布局模块用于整个页面结构(1.5分)

viewport 应该设置在所有的HTML页面上,CSS应该包括至少一个 @media 查询和一个断点,以优化不同浏览器宽度的布局(1点)

移动优化的布局应该限制在一列;桌面布局应该包括两个或更多的列(1点)

Points may be deducted for improperly formed HTML elements, CSS style rules, or JavaScript, as well as serious accessibility issues.

格式不正确的HTML元素、CSS样式规则或JavaScript以及严重的可访问性问题可能会被扣分。

Start Date

Dec 1, 2022 8:08 AM

2022年12月1日上午8:08

Due Date

Dec 18, 2022 11:59 PM

2022年12月18日晚上11:59

Submit Assignment

Files to submit
(0) file(s) to submit After uploading, you must click Submit to complete the submission.

https://axure.userxper.com/axure-rp-for-school/

代码

三个参考网站

欢迎关注我公众号:AI悦创,有更多更好玩的等你发现!

公众号:AI悦创【二维码】

AI悦创·编程一对一

AI悦创·推出辅导班啦,包括「Python 语言辅导班、C++ 辅导班、java 辅导班、算法/数据结构辅导班、少儿编程、pygame 游戏开发」,全部都是一对一教学:一对一辅导 + 一对一答疑 + 布置作业 + 项目实践等。当然,还有线下线上摄影课程、Photoshop、Premiere 一对一教学、QQ、微信在线,随时响应!微信:Jiabcdefh

C++ 信息奥赛题解,长期更新!长期招收一对一中小学信息奥赛集训,莆田、厦门地区有机会线下上门,其他地区线上。微信:Jiabcdefh

方法一:QQ

方法二:微信:Jiabcdefh

你认为这篇文章怎么样?
  • 0
  • 0
  • 0
  • 0
  • 0
  • 0
评论
  • 按正序
  • 按倒序
  • 按热度
通知
关于编程私教&加密文章