k1808049

  In my page design, I chose a template that fits the theme of my site. CSS is an integral part of the web layout. Add CSS to HTML to set the style and layout of the webpage.  Function:  beautify the website, improve the browsing efficiency of the page, the page is given priority to with simple style, text background is given priority to with white. There is a site navigation bar in the center of the page, and the city night scene provides the experience of city sight. The page can be seen that the site is mainly to promote the city's architecture and scenic spots, so be generous and straightforward, not too fancy. CSS code used  Add CSS to the site root folder and then add it to the HTML page to form a layout. Table The first thing for layout is to consider is the length and width of the entire page and the ratio between length and width. In web pages, tables are used to control the layout of information in web pages, including two aspects: one is to use rows and columns to layout

Image insert     Pictures on the web page have to provide information, display works, decorate the web page, show the role of personal sentiment and style. The image formats used by users in web pages mainly include GIF, JPEG, and PNG, among which GIF and JPEG are the two most widely used formats.      In adding pictures and GIFs, I found information from w3schools and youtube to adjust it to the appropriate size and add photos and text.     The most important thing to insert an image into the website is the <img>tag. The height and width properties of the tag set the size of the image.     If I set these properties, it can save space for the image when the page loads. Without these attributes, the browser has no way of knowing the size of the image, so it can't reserve the right space for the image, so when the image loads, the layout of the page changes.      At the beginning of the page, I used the height and width properties to scale the image. If the height and width

Image chose for motion graph   I chose the most famous landscape of Shanghai as the picture of my GIF choice. It shows some of the best-known buildings in Shanghai. The most famous and prominent Shanghai scenery is selected in the caption picture, allowing visitors to see the city at first glance. I used Photoshop to adjust the image's size to convert between dark and bright colors and move the text. I also summarize a slogan on a motion graph that reflects the essence of the website. The first image of my banner        Using photoshop to adjust the color of the images, Make the overall feeling of the photo dark, and create a contrast with the last photo. Create a sense of dusk and morning. Gifs can be given a more layered feel. After Effects  Firstly to create a new layer (1920*1080)    port the material Into After Effect  in AE It is to move the graph at the position keyframe, and then use the expression loop, the background there to use the mask, the principle is the same as cha

   Type size, font, line spacing Type size can be calculated in different ways, such as points or pixels.     The body part of the page is composed of much single t.ex.t after the composition of the group, to give full play to the shape of this group in the layout of the overall role. From the perspective of art, the font itself can be regarded as an art form, which has a great influence on people in terms of personality and emotion. In web design, the handling of fonts is as critical as the handling of color, typography, graphics, and other design elements. In a sense, all design elements can be understood as graphics. Font layout For the font layout, I choose the left layout. This arrangement has loose and tight, empty and solid, pulsating and elegant, producing the formal beauty of rhythm and rhythm. The left alignment is natural in the way people read. Also, I will keep the line spacing between 1.5 and 2.0 times the font size. Emphasis of words Enlargement and decorative placement

Wireframe represents the home page layout, predesigns the title and image placement of the page, and gives the page a rough draft.  The index page        On the home page, I will insert the GIF at the top of the website, and below the title is the Navigation Bar of the website. Below Navigation Bar, there are two photos of the same size on the left, and there is content on the right. Page 1: Content page On the second page, I'll add a paragraph of text and a photo. I can design a very simple and straightforward layout. Page 2: Traditional architecture              On the third page, I will add three photos of the same size, and the layout will be the same as the previous page, with text at the top of the three images.   Page3: Modern Architecture   The layout on the third page is the same as before. There are two pictures at the bottom of the text.The whole picture is simple and straightforward Storyboard Home Page                 The homepage is the most important part of the enti

      On the basis of demand analysis, the website is determined to be composed of the following modules: home page, content, traditional architecture, and modern architecture. The home page also includes two pictures, the following is the overall structure of the website.        I used Xmind to draw my flow chart. In the middle of the red part is my central idea: the architecture found in Shanghai. Next is the home page. The home page mainly contains the title of "Welcome". It introduces the characteristics and style of the building and two pictures of famous landmarks in Shanghai. Followed by the content page, it is about a historical photo and text introduction and my thoughts and experience of architecture. The third page is three photos of traditional buildings and the historical background of the buildings. The fourth page's website is Modern Architecture, and the text introduces the most distinctive urban architecture with Chinese characteristics and its significan