Timed exercises are an excellent way to test web development skills. While its good to spend time in craft, design and detail, sometimes work calls for quick, under-the-gun performance, and exercises are a good way of doing a “skills gutcheck”.

定时练习是测试Web开发技能的绝佳方法。 虽然可以花时间在Craft.io，设计和细节上很好，但有时工作需要快速，枪法下的表现，而练习是进行“技能直觉检查”的好方法。

This exercise presents a review of Mr. & Mrs. Smith. The movie is one of my favourite guilty pleasures, and I thought the review format would make an interesting challenge for my first year students. It is presented here for anyone looking to test their skills. Resources include media, content and (once you are finished) a solution key.

本练习对史密斯夫妇进行了回顾。 这部电影是我最喜欢的罪恶感之一，我认为复习格式将对我的一年级学生提出一个有趣的挑战。 此处提供给想要测试其技能的任何人。 资源包括媒体，内容和(一旦完成)解决方案密钥。

方向 (Directions)

Download review.zip and uncompress it. Inside you will find several files; individual links to each file are also provided here:

下载review.zip并解压缩。 在里面，您会找到几个文件； 还提供了每个文件的单独链接：

• review.docx, a review of the movie Mr. & Mrs. Smith

  review.docx ，电影史密斯夫妇的评论

• pitt-jolie-large.jpg, the movie’s promotional poster.

  电影的宣传海报pitt-jolie-large.jpg 。

• gunfight-in-the-department-store.jpg, a frame from the film.

  这部电影的镜框是gunfight-in-the-department-store.jpg 。

• sample.jpg, a screenshot of the page you are attempting to recreate in this exercise.

  sample.jpg ，是您在本练习中尝试重新创建的页面的屏幕截图。

Using review.doc as a source for body copy, create an HTML document, adding appropriate markup to the content. Apply CSS in a linked stylesheet to make the web page appear as close as possible to review.png.

使用review.doc作为正文副本的源，创建HTML文档，并在内容中添加适当的标记。 在链接的样式表中应用CSS，以使网页看起来尽可能接近review.png 。

Apply the following additions and changes:

应用以下添加和更改：

• You will need to crop, resize and optimize the images before insertion. The final HTML document should be no more than 110K in total file size, including the images, stylesheet and text content. 在插入之前，您将需要裁剪，调整大小和优化图像。 最终HTML文档的文件总大小(包括图像，样式表和文本内容)不得超过110K。

• Link every movie mentioned, with the exception of Mr. & Mrs. Smith, to appropriate web resources.

  将提到的每部电影( 史密斯夫妇除外)链接到适当的网络资源。

• Link the asterisk in the body text to the footnote at the bottom of the page. 将正文中的星号链接到页面底部的脚注。

• You will need to create the stars for the review rating. The stars are not bitmap or SVG graphics.

  您将需要为评论评分创建星标。 星星不是位图或SVG图形 。

• Extra challenge: make the page responsive.

  额外的挑战：使页面响应。

版式 (Typography)

The headline is set in Adobe GaramondPro: note that the film title in the document is real text, not an image. The body text is set in Helvetica.

标题是在Adobe GaramondPro中设置的：请注意，文档中的电影标题是真实文本，而不是图像。 正文文本在Helvetica中设置。

条件 (Conditions)

• This is an open-book exercise: you can consult any online resource you wish. 这是一个开放式练习：您可以查阅所需的任何在线资源。
• The final web page should validate as HTML5 or XHTML 1.0 Strict. 最终网页应验证为HTML5或XHTML 1.0 Strict。
• The exercise has a 100 minute time limit. 练习有100分钟的时间限制。

当你做完 (When You Are Done)

Download review-final.zip, uncompress it, and compare your work to the solution provided.

下载review-final.zip ，将其解压缩，然后将您的工作与提供的解决方案进行比较。

I hope you enjoy the review exercise: if you have any questions or feedback, feel free to contribute in the comments below.

我希望您喜欢该评论练习：如果您有任何问题或反馈，请随时在下面的评论中发表。

翻译自: https://thenewcode.com/939/Student-Web-Developer-Exercise-Movie-Review-II