The first is the visual experience. A good visual design can make the interactive programs underground and be used more accurately by the users; thus, the information could be sent better. It is aimed not only at the transmission of cultural information and aesthetic information but also at a high degree of emotional identification of users when visual design is up to the high level of user experiment. (Xiao & Tian, 2011)

Therefore, the first thing is the visual experience. Alcorn State University (ASU) was founded in 1877 near Loman, Mississippi, USA. When it was first founded, ASU was the first university in the United States supported by the state government to recruit African-American students, and it was also a member school of the Thurgood Marshall Scholarship Foundation. Therefore, as shown in the figure,

We can see that the three words "service", "scholarship" and "dignity" appear on the homepage Logo. However, we find that compared with the name and address of the university next to the logo, the font size of the words in the logo may be too small, so users may not be able to directly and clearly see the three words on the standard web page scale. For the main column "STUDENTS, FACULTY/STAFF, CAMPUSES, NEWS/EVENTS, ALCORN IN THE NEWS, CAREER ", the author checked through the Inspector that the font of the main column is "futura-pt" and the font size is 13PX. The subcolumn "DISCOVER ALCORN, ATHLETICS. ALUMNI, GIVING BACK", with a font size of 18PX and the font of "adobe-garamond-pro". That is, the font size of the main column is much smaller than that of the subcolumn, and the fonts of the two columns are inconsistent. In my opinion, if the column font and font size of this website can be adjusted, the column font size will be much better. However, from the background color, ASU’s website background color mostly uses "purple". According to color psychology, orange, yellow, blue, and violet contributed significantly to post popularity based on different photographic typologies (Chung-en Yu, 2020). "Purple" represents nobility, and it also reflects the meaning of the school’s slogan. "Where knowledge and Character matter", excellent "character" should be noble. In addition, there is a very famous plant in Africa, "Violet". Therefore, the author believes that this color background may also imply ASU tolerance for races, such as "African Americans". After that, at the bottom of the main and sub columns is the latest news module of the school with a large space, which consists of scrolling pictures and titles, and then the static news module below is shown in the figure.

This module is composed of static pictures and links to web pages, while the right half is a video of the school’s propaganda film. The bottom of the website is shown in the figure.

It is composed of two different shades of gray, with some friendship links at the top and contact addresses and information at the bottom. The overall color is "purple, white, gray". The author believes that the purple color can give people a sense of "mystery" and "nobility", and the background color of the school is very innovative. However, the fly in the ointment may be that the background color of the second plate, white, is too small, and compared with the large purple of the first plate, it may appear "top-heavy", which does not look particularly uniform. The dark gray background at the bottom of the site is close to black, which may distract users from the important information on the module, which shows the university’s address and phone number.

Jackson State University (JSU), founded on October 23rd, 1877, was once a black university in history. JSU has an outstanding history and a rich tradition in cultivating the leadership of young men and women. Therefore, the mascot of JSU is “Tiger”, which is a decisive organizer with high dominance among animals and strong competitiveness. This is also in line with JSU’s mission, providing high-quality teaching, research and services for students and using different models to ensure that they are technologically advanced and ethical global leaders who can think critically about solving social problems and competing effectively. Therefore, in the main column of JSU’s portal, the title of the front-end module of students’ related information inquiry system shows "P.A.W. S", which means "Tiger’s Pawn". First, from the visual experience, as shown in the figure,

The portal website of JSU is generally dark blue. In many countries, police uniforms are blue, and the lights of police cars and ambulances are generally blue because "blue" means "courage". Blue is also in line with the culture of the school. The vision of the school is recognized as a challenging, but nurturing, knowledge community instilled with the most advanced technology. Second, the logo size of JSU’s portal website is very standard, so there is no repetition. The subcolumn" ABOUT JSU, ADMISSIONS, ACADEMIC CALENDERS, ATHELETICS, STUDENT, SUCCESS RESOURCES” uses 16PX font size and "Poppins" font, while the main column “APPLY, BANNER, PAWS, CANVAS, FACULTY/STAFF EMAIL, STUDENTMAIL, HOUSING” also uses 16PX font size and "Poppins" font. The main column and the sub column use the same font and font size. The author believes that this layout design will make the website layout look more regular. At the bottom of the subcolumn is the rolling news section. At the bottom of the rolling news section is the publicity section of the school. The designer of the website put a video in this section, as shown in the figure,

Below the publicity section is a static news section, as shown in the figure.

The left part is a still picture, while the right part is a webpage link of some related news. The author thinks that if the position of the propaganda section and the static news section are interchanged, because the content structure of the current website is "dynamic news module-propaganda module-static news module", if it is converted into "dynamic news module-static news module-propaganda module", the content of the website will look clearer and more regular. The bottom background of the portal website is still dark blue, showing the contact address and telephone number of the school very concisely, as shown in the figure.

Coahoma Community College (CCC) is located in Clarkes Dale, Mississippi, USA. Founded in 1924, the school is a comprehensive college. In 1950, CCC became the first educational institution for blacks in the Mississippi public college system. In 1965, CCC opened its doors to all students, regardless of race, color, sex, nationality or disability. CCC’s portal website is shown in the figure.

The website is generally red. In color psychology, red has the longest light wave in the spectrum, and it is a color that can truly attract users’ attention. Red is the main brand color of many success stories, including Coca-Cola and Ferrari F1. Red is positive and full of vitality, and it is also in line with one of the school’s goals, that is, promote and support a culture of health and wellness on campus that extends to the surrounding communities and schools. CCC, located by the Mississippi River, has a very rich agricultural culture. Although the font size in the logo of the school’s portal website is small, fortunately, users can see with the naked eye that the words in the logo are the location where the school is located. The main column “ADMISSIONS, PROGRAMS, STUDENT LIFE, ABOUT CCC, QUICK LINKS” of the school’s portal website uses the font size of 18PX with the font of "Open Sans", while the subcolumn "FUTURE STUDENT, STUDENTS, FACULTY&STAFF, ALUMNI, COUMMNITY” uses the font of "Font Awesome 5 Free" with the font of 14PX. The author thinks that the font size of the main column and the subcolumn is very reasonable, but author also thinks that in order to make the website look more regular, the two columns can be set to the same font. Below the main column and the dynamic news module is the static news module, as shown in the figure.

Under the static news module, as shown in the figure,

It is the Academic module, the Career & Technical Education module, the Health & Sciences module, the Workforce Development module and the Titter module in turn. The author thinks that from the overall module layout, although the academic module and other modules can show the elegance and characteristics of the school, too many modules are presented on the homepage, which will make the homepage look like it has no focus. However, the following plate is shown in the figure:

The author thinks that the most distinctive feature of this website is the Tweets page in this section and the intelligent dialog box in the lower right corner. The dynamic Tweets page makes the new things happening in the school unobstructed, while the intelligent dialog box reflects the very humanized webpage design, which enhances the impression of students and parents on the university. At the bottom of the website is the contact number, address and some links of the school, as shown in the figure.

Mississippi Valley State University, a public university, was founded in 1950 and named Mississippi Vocational College. It is a traditional black university. According to the ranking of the Best Colleges in the Southern United States in 2011, MVSU ranks second and is a member of the Marshall University Foundation in Thurgood, USA. The school is proud of the diversity of its students and teachers. They come from American states, Canada and all over the world. The homepage of the portal website is shown in the figure.

The background color of MVSU’s portal website is green. According to color psychology, green is the color of growth, health and nature. Spotify and Starbucks use green in their logos to convey youth and freshness. For many people, green is the "prevailing" color because it represents the meaning of road signs in Europe and North America and is an excellent color for receiving successful news. This color, which can represent a positive attitude toward life, also conforms to MVSU’s mission, that is, MVSU is fundamentally committed to positively impacting the quality of life and creating extraordinary educational opportunities for the Mississippi Delta and beyond.

Sub column of website “CANVAS, EAMIL, BANNER, DIRECTORY, LIBRARY, ATHLETICS, SUPPORT, VETERAN, TUTORIAL SERVICES” uses the font size of 17PX and the font of" Alegraya Sans ", while the main column “MVSU, ACADEMICS, ADMISSIONS, REGISTRAR, CURRENT STUDENTS, PARENTS, ALUMNI & FRIENDS, FACULTY&STAFF, TITLE IX” uses 15PX font size and the font of "Alegraya San ". The fonts of the main column and the sub column are the same. In terms of font size, the font size of the main column is slightly larger than that of the subcolumn. The author thinks that this layout makes the columns of this website look very regular, as shown in the figure.

Below the main column and the dynamic news module is the static news module, which is divided into two parts: the left part is the detailed news content, while the right part has many news links, followed by relevant school links. As shown in the figure,

The author thinks that there are too many school links in this module, which will bring confusion to users, and they may not know which link is more useful information. If designers can streamline these links and leave the most useful information, this module will look more concise. At the bottom of the website is a graphic module that can be linked to the school’s Facebook account and Youtobe accounts, as well as the school address and contact number. As shown in the figure,

Interactive experience refers to the sum of the interactive content that the experiencer feels and gets when using the service. It is a subjective feeling (Gao Chuan, 2021). When users open ASU’s website, they can clearly see the school motto and the current news of the school, which attracts parents’ and students’ interest to know about the school and shows its elegant demeanor. In addition, the word "ADMISSIONS" in the subcolumn is clear at a glance, so that students and parents can click directly to know the admission conditions and so on. However, the author believes that the deficiency of ASU’s main page lies in the layout of the whole page. Because the module size of the news section in the upper part is too large, the link section at the lower part looks crowded. On the leftmost side of the main column of the JSU website, there are graphic modules such as Facebook and Youtobe that can be linked to JSU accounts so that students and parents who want to know about the school can quickly learn about the characteristics and elegance of the school. However, the author thinks that the "Academic Calendars" module in the subcolumn may not need to list a separate module. If it is divided according to the column function, it can be put together with "Resources". Judging from the overall background color, the websites are generally dark blue, especially the background colors of the main column module and the bottom module, which echo from top to bottom, bringing users a very comfortable browsing experience. In addition, then is Coahoma Community College. From the interactive experience, CCC’s portal website as a whole is red, looks very uniform, and brings a sense of vitality to users. The first title of the main column is "ADMISSIONS". Students and parents can know the admission conditions of the school immediately. In addition, the title of the main column is very concise. Some link modules are directly placed in "Quick Links", and the module "Workforce" reflects the employment advantage of the school. However, the author thinks that there are too many modules similar to "Academic" under the static news module, which makes the website look crowded. On the other hand, the Titter homepage and intelligent dialog box at the bottom are a very distinctive part. Finally, is the Mississippi Valley State University. The author believes that first, MVSU’s portal is generally green, giving people a positive, healthy and energetic feeling, and its layout is also very regular. Second, the logo design is very distinctive, incorporating the letters "V" and "S". However, the deficiency is that there may be some redundancy in the content. For example, there is already a title module of "About MVSU" in the main column, which most of the title modules in the main column have been made into links and placed at the bottom, which will make the bottom of the website very crowded and not concise. In addition, the main column’s "Admissions" is not clearly stated. "ADMISSIONS" has been used as a separate title module, but "admissions" still appears in the next "Register" title module.

Different webpage appearances may induce different emotional experiences of users (Weilin Liu, 2018). The environment psychology model (the stimulus–organism–response model, S–O–R) proposed by Mehrabian and Russell (1974) also emphasizes that users’ emotional response to an environmental stimulus is a bridge connecting this environmental stimulus and their behavioral intentions. As emotion is an important part of user experience (Winckler et al. 2016; Dirin et al. 2017), in the context of “emotional design” and “user-centered design” of product development, users’ nonfunctional requirements of a website, especially the emotional experience of using a webpage, have received considerable attention from scholars and designers.

First, Alcorn State University, the ASU CORONAVIRUS(COVID-19) Update column at the top of ASU homepage shows humanistic care, while the orange entry mark "A brave Start|Click here" at the bottom is very novel to attract users’ browsing interest. Jackson State University set a hint about COVID-19 with light blue as the background between the subcolumn module and the news module scrolling below, showing humanistic care. The overall feeling of the website to users is concise and comfortable. The Coahoma Community College, the intelligent dialog box in the lower right corner of the school, can bring users a convenient browsing experience, and the COVID information column under the rolling news module shows humanistic care. Finally, at Mississippi Valley State University, in terms of emotional experience, the main column of MVSU’s portal website is specifically equipped with the title module of "Title IX", which can be inferred that the school attaches great importance to the protection of students’ rights and interests. Second, the title module of "VETERANS" in the subcolumn reflects the school’s humanistic care for vegetarians. That is, the school respects and tolerates students’ religious beliefs, and the two tips at the bottom of the main column are about COVID-19, which reflects the humanistic care of the school, and about students’ sharing ideas, which shows the tolerance of the proofreader.

From the aspect of FA, the FA of the website of Alcorn State University is shown in Table 1.

Obviously, this website uses the idea of object-oriented programming in the generator mode and regards the functional framework as a "class" and the generated network as an "object". If we analyze university portal websites according to their column functions, the author believes that "NEWS/EVENTS" and "ALCORN IN THE NEWS" in the main column of the ASU portal website can be put together. For columns I and II, HTML (Hypertext Mark-up language) editors are used, and only one HTML editor is required to assign values to the column contents. For news types, a title input box and an HTML editor are needed, while for link types, a link address input box is needed. As shown in the figure,

In Application, the author found that the website adopted CSS technology to prevent code redundancy, and CSS means cascading style sheets. Today’s CSS can be completely separated from the content of the website, including text, pictures, links and other content information, that is, HTML. A website downloads a CSS, and different pages of the website can use the same CSS. Currently, the mainstream website design form is HTML+CSS+JS, and JavaScript is a short and pithy language. The JavaScript scripting language is a simple way of adding interactive functionality to HTML pages (David H. Mosley, 1997). As shown in the figure,

The author consulted some source codes in Index and found that the website may indeed use JavaScript language. However, then again, the HTML editor is just a "skeleton". The news content of ASU may change every day, so in fact, the portal website of this university is a dynamic web page, and the static web page usually ends in. html or. htm, while the dynamic web page ends in. asp.php.jsp and so on because of advanced web programming technology. Sometimes, to improve the efficiency of the website, the pseudostatic structure is also used, as shown in the figure.

The author consulted the source code of the index on this website and found the link "//.www.googletamanager.com/gtm.js?" Id= ", because this website contains"?" It can be judged that the website has a pseudostatic structure. However, the reason why the web page structure cannot be determined by ASU’s portal website name is that the domain name of this website ends in. edu. ... “edu” belongs to "no sponsorship" in the "generic top-level domain" category. The website ending in. edu was founded in January 1985. It is a domain name dedicated to American educational institutions, U.S. government agencies and U.S. military institutions.

The functional framework of the website of Jackson State University is shown in Table 2.

The author consulted part of the source code of the website, as shown in the figure, which is the relevant code of the "BANNER" module in the main column.

ject-custom current-menu-item current_page_item menu-item-home

menu-item-125 kingster-normal-menu">...</li>

<li class="menu-item menu-item-type-custom menu-item-object-custom

menu-item-27 kingster-normal-menu">...</li>

<li class="menu-item menu-item-type-custom menu-item-object-custom

menu-item-35 kingster-normal-menu">

< a href="https://jsums.net/JacksonStatev1.html"> BANNER</a> == $0

</li>

Because the link of BANNER’s affiliated webpage Http://jsums.net/JacksonState1.html ends in. html, the website still uses html editor. At the same time, the secondary webpage, a static webpage, ends in.html. However, regardless of whether PHP, ASP or JSP is used, the final output is HTML code. Therefore, the author has consulted some source codes of JSU’s portal website,

It can be judged that some PHP languages may be used on this website. For the styles of fonts and forms, the author also consulted "Styles". This website uses CSS technology, but when the author consulted the source code, found the words "z-index", as shown in the figure,

Usually, the default value of the z-index is auto, which can be set to a positive integer or a negative integer. If CSS technology is not considered, only the z-index of positioning elements will have a role. Therefore, it can be seen that this website defines the initial value of the z-index as "9" because the position:relative attribute is set, and the element z-index:9 takes effect, which leads to a higher cascading level than ordinary inline elements. Therefore, the proportion of the relevant modules of the website, such as the news module, is moderate. The portal website of JSU is jsums.net. net is an international top-level domain name. Generally, the portal website of JSU should mainly use PHP language, JavaScript, CSS technology and HTML editors. Because the static web pages made by HTML and CSS cannot meet the scrolling needs of news modules, the producers of this portal website added Javascript language to make the web pages move.

The FA of the website of Coahoma Community College is shown in Table 3.

The website still adopts HTML editor and CSS technology as follows.

college css -->

ref="/_resources/css/styles.css">

ref="/_resources/css/print.css">

ref="/_resources/css/totopstyle.css">

ref="/_resources/css/slick.css"/>

ref="/_resources/css/slick-theme.css"/>

ref="/_resources/css/slick-lightbox.css">

ref="/_resources/css/animate.css">

What the author needs to point here is that the portal website uses Animate CSS, which is a very large open-source CSS animation library, with many commonly used CSS3 animations built in. The compatibility is very good, and the whole file is very light and small, with only a dozen K’s. The use of Animate. CSS is also very simple. For example, if we want to add a bouncing animation to a certain paragraph of text, the first step is to introduce the Animate.css style file in the production environment.

<head>

<link rel="stylesheet" href="animate.min.css">

</head>, the second step is to enter the animation demonstration site provided by Animate. CSS and just choose the animation effect we want. The last step is to add "animated" to the html element we want to add animation. The code is as follows:

<div class="animated fadeInUp">

</div>.

On the other hand, to make the website active, the portal website also uses Javascript language as follows.

ection>

<script type="text/javascript" src="https://yoda.unj

</p >

&nbsp;</p >

class="section">

The unique module of the website embeds Tweets directly into the bottom of the CCC’s portal website, which should use both iframe and JS, as shown in the following steps.

src="https://platform.twitter.com/widgets.js"

fullscreen="allowfullscreen"></iframe></p>

In the js nesting code, change the given link to the URL link of the webpage to be nested, create a JS file, upload it to the root directory of the website, and introduce the JS file into the page to be nested so that Tweets can be successfully embedded into CCC’s portal website.

In addition, the pictures displayed in the artificial intelligence dialog box at the bottom of the portal website will not be distorted, as shown in the following style:

<svg version="1.1" xmlns="ht tp://www.w3.org/2000/svg”

xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

viewBox="0 0 475.433 475.433"style="enable-background:new 0

0 475.433 475.433;" xml:space="preserve">...</svg> == $0

This website uses the SVG file, which is a kind of vector graph, because SVG is a kind of text file. If the browser draws the image according to its description statement, it will not be distorted. SVG code can also be embedded in html files, and it can be operated by JS, which can be used to generate interactive animations.

In terms of functional design, the FA of the website of Mississippi Valley State University is shown in Table 4.

As follows,

1 <!DOCTYPE html>

2 <!--[if IEMobile 7]><html class="iem7" lang="en" di

3 <!--[if lte IE 6]><html class="lt-ie9 lt-ie8 It-ie7"

4 <!--[if (IE 7)&(! IEMobile)]><html class="lt-ie9 lt-i

5 <!--[if IE 8]><html class="lt-ie9” lang="en" dir="1

6 <!--[if (gte IE 9)l(gt IEMobile 7)]><!--><html lang

The website still uses HTML editor and CSS technology, and to make some pages move, Javascript language is also used as follows:

ss?family=Alegraya+Sans:400,500,700,400italic

libs/jquery/1.8.3/jquery.min.js"></script>

script src='/sites/all/modules/jquery_update/

ery-extend-3.4.0.js?v=1.8.3"></script>

After consulting some source codes, the author found the words "jquery.min.js" instead of "jquery.js" because there is a difference between them. "jquery.js" is a development version, which is used by programmers, with good indentation and comments, and a larger volume, while "jquery.min.js" is a production version, which is used in programs, without indentation, with a smaller volume and faster program loading speed. That is, "jquery.min.js" is a front-end version that is shown to users.

In addition, the author also found that the architecture of this website uses a large number of block elements. For example, in the "Give to MVSU" module as follows,

</div><!--/mv-give -->

<div class="mv-give">

<div class="region region-give">

<div id="block-block-11" class="block block-bloc

This module uses block elements, which are characterized in that the default width is equal to 100% of the width of the parent element. Regardless of whether the width is set, they all occupy a single line, and we can directly set the width, height and other styles. The effect is as follows:

BLOCK 1

BLOCK 2

BLOCK 3

BLOCK 4

This is also the reason why the following modules of "GIVE TO MVSU" can adjust themselves:

<p>< a href="/contributors">< img alt="Give to MVSU"

VSU”src="/sites/default/files/givetomvsu.png" style

style="height:117px; width:127px” <p/></a></p>

The search module is shown as follows:

<form action="/" method="post" id="search-block-f

<-form” accept-charset="UTF-8"><div><div class="cont

JTF-8"><div><div class="container-inline">

Inline block-level elements are used because the word is “inline”, which is characterized by not occupying a single line but sharing a line with other elements. The width and height are determined by the content between them, and the width and height cannot be set directly. However, inline block-level elements do not occupy a single line but share a line space with other elements. The width and height are determined by themselves, and other styles of width and height can be set. Therefore, the search module is in the same column as other titles, but the style is different from other titles.