Attachment: Explanation video link (private message required)
Attachment: source code, documentation (requires private message)
1. Planning the website
1 . Website Theme Description
This is a website about dogs. More and more people like to keep pets, especially dogs. It is very lucky for them to meet responsible and caring owners, but there are also some irresponsible ones. People raise dogs but abandon them... So I designed a dog website called "Ai Dao Ge", hoping that stray dogs will get more people's attention and find their own safe haven.
2 . website style
In terms of layout, the interface of this web page mainly includes four parts: navigation bar, carousel, body and tail. The navigation bar has some information about the website, as well as a registration and login button; the carousel image is the effect of the carousel set using js code;
In terms of color matching, the overall webpage adopts light tones, and the navigation bar and the tail use red tones and green tones respectively to highlight the content, giving people a clear and beautiful feeling;
In terms of the overall shape, the design is decent and comfortable, easy for users to log in and browse, and the switching menu is convenient and fast, which can meet the needs of users;
In terms of text content, the content is relatively substantial. The main text includes news, news, and some dog movie recommendations, etc., all of which are links; the tail includes information such as addresses and links to some related pet websites.
3 . Website column structure
Table 1 Website column structure
| First-level column |
Secondary column |
Third-level columns and content pages |
| front page first.html |
about usaboutus.html |
|
| Special Events zhuanti.html |
||
| relevant information |
Movie recommendation 1 movie1.html Movie recommendation 2 movie2.html Movie recommendation 3 movie3.html Movie recommendation 4 movie4.html News recommendation 1 new1.html News recommendation 2 new2.html News recommendation 3 new3.html News Recommendation 4 new4.html News recommendation 5 new5.html Proposal advice.html Protect the Earth provideearth.html |
|
| dog fun 1 interest1.html |
||
| Dog Fun 2 interest2.html |
||
| Dog Fun 3 interest3.html |
||
| login login.html |
||
| Register register.html |
||
| Friendly Links (1, 2, 3, 4) |
Table 2 Website menu structure
| The name of the main menu in the home page |
popup submenu name |
| about Us |
|
| special event |
Adopt and buy |
| relevant information |
news initiative movie recommendation |
| dog fun |
fun 1 fun 2 Fun 3 |
| register |
|
| Log in |
|
| Links |
Pet Love Network, Dog People Network, Pet Adoption Network, Humane Treatment of Animals Network |
4 . Plan your website directory structure and link structure
Table 3 Directory structure of the website and its stored file types
| Folder name |
Stored file type |
| Css |
Web page structure style Style.css |
| Images |
Picture, video material tupian.jpg/png/mp4 |
| js |
jquery-3.5.1.js |
| html |
Each page Login.html |
Figure 1 Link structure in ""Ai Dao Ge" website"
Click the link at the bottom to enter the corresponding website
5 . Main page layout design
Home page layout:
Figure 2 Home page layout
Secondary column page layout:
Figure 3 page layout of the second-level column
Three-level column page layout:
Figure 4 page layout of the third-level column
Content page layout:
Figure 5 content page layout
The picture above is the sketch I drew, and then realize the effect in DW according to the sketch.
2. Prepare materials
1 . text
Prepared a large number of textual materials required in the webpage, collected textual materials from various websites and various books, and made them into word documents.
2．Logo
Use PS image processing software to tailor the logo of the website. The logo matches the theme of this website and is innovative. LOGO renderings:
Figure 6 logo renderings
3 . Prepare images and buttons
According to the needs, I collected the required pictures and buttons on the Internet, and some pictures were made by myself using PS software. Some of the pictures used in the webpage are not clear, and some contain watermarks. For the sake of appearance, they are all beautified with PS.
4 . prepare for animation
The animation on the website highlights the theme and plays a finishing touch. The animation is made with flash software.
5．建立库项目
网页中的版权区，事先定义为了库项目，以备制作网页时重复使用，提高了工作效率。
应用的库项目：版权区
名称：copy
内容：地址：天津市南开区 邮政编码：301700 电话：17631853490 传真：010-00000000
三、创建网站
站点的结构图：
图7站点结构图
四、网站首页的设计与制作
1．网站首页布局设计
具体方案：
（1）整个页面由6部分区域组成；
（2）每部分区域用什么技术设计?具体结构是什么?用来存放什么内容。
a.banner，一张图片，设置居中；
b.导航栏，一行十列的表格，各个标签使用a标签链接到相应的界面；
c.轮播图，使用js实现轮播，无序列表布局，为所在div添加了一个背景图片；
d.两行两列的表格，左边合并成一列。各个板块的内容均使用a标签链接到对应界面。圆角边框使用border-radius：30px设置；
e.结尾部分，div标签设置文本居中；
f.友情链接部分使用两行四列的表格。
（3）在网页布局时要体现CSS+DIV布局
图8首页布局
2.首页的内容填充
（1）首页中利用JavaScript实现的特效。此处列出特效的效果。
（2）首页中有CSS技术的应用。
图9首页内容填充
五、制作二级栏目页面和内容页面。
1．二级栏目页面设计
（1）使用技术：模板与框架技术
（2）布局结构图：
- 生成的具体页面列表：
- 二级栏目内容填充
“登录”界面
登录界面使用了JavaScript。界面的主体部分是一个表格。每个输入文本框都有匹配输入的模式，每个文本框都绑定了对应的函数，当输入与模式不匹配时，调用函数，后面的字体变红。若不修改为正确，当点击提交按钮时，再调用一次所有的函数，检测不正确则不能提交。当点击登录时弹出对话框“登陆成功！”。然后点击左上角的返回按钮回到首页。存储用户数据的功能不能实现。
“注册”界面
与登录界面类似，注册界面的主题部分也是一个表格，里面有几个输入文本框。每个输入文本框都有匹配输入的模式，每个文本框都绑定了对应的函数，当输入与模式不匹配时，调用函数，后面的字体变红。若不修改为正确，当点击提交按钮时，再调用一次所有的函数，检测不正确则不能提交。当点击登录时弹出对话框“注册成功！”。然后点击左上角的返回按钮回到首页。存储用户注册数据的功能不能实现。当登录时也不能检测用户是否注册过。
“新闻”界面
该界面导航栏与尾部大体上与首页相同，主体部分是一个一行两列的表格。第一列是一个自定义列表，里面有三个板块，各个板块的内容均有链接。右侧使用article，p标签显示新闻内容。
“狗狗趣事”界面
与新闻界面样式相同。这一板块介绍了狗狗界发生的一些有趣的事。
“专题活动”界面
与新闻界面样式相同。领养代替购买”专题活动，呼吁人们更多的采用领养方式。
“动态-倡议书”界面
这个界面是介绍我们网页制作的目的和功能的界面，主要使用了article，p标签，包含了介绍的文章。使用了ID选择器设置CSS样式margin:0 auto使文本在正中间显示。其余的导航，footer与首页相同。这一界面主要介绍了根据当前流浪狗形势对人们提出的倡议。
“电影推荐”界面
这个界面主要介绍了相关的一些电影帮助大家更好的了解动物。界面的主体部分是一张海报，演员表和影评：
海报使用了float属性浮动在文本流中；
正文使用了margin:0 auto使文章在正中间显示，使用了header、article、section、p、img等标签设置正文
演员表使用aside标签为其设置CSS样式使其固定在页面的最右边。
3．内容页面设计
（1）使用什么技术；
这个界面是介绍我们网页制作的目的和功能的界面，主要使用了article，p标签，包含了介绍的文章。使用了ID选择器设置CSS样式margin:0 auto使文本在正中间显示。其余的导航，footer与首页相同。
（2）布局结构图；
（3）生成的具体页面列表。
4．内容页面填充
- 设置首页的超级链接
图中标注模块内容全部采用超链接形式，单击即可进去相应内容阅读查看。
展示部分相关超链接代码。
七、首页弹出式菜单的设计
效果图：
- 主页、二级栏目页面、及内容页的效果图
主页效果图：
部分二级栏目效果图：
- 实验心得
通过这次实验，我的知识有了很大的提升而且在心得上也感受颇多。这次实验的综合运用到了平时学习的知识，将上课所学知识在实践中巩固掌握以及进一步熟悉和掌握网页设计与网页制作的基本流程。
这个网页的制作，从选题到开始制作，从理论到实践，我学到了很多很多东西，巩固了以前所学的知识，而且学到了以前未曾学过的知识。通过这次实验我懂的了理论与实际相结合的重要性，只有理论知识是远远不够的，只有把所学得理论知识与实践相结合起来，从理论中得出结论，从实践中总结技巧，才能真正掌握技术，从而提高自己实际动手能力和独立思考的能力。
在制作网页的过程中我遇到了很多困难，总结如下：
在div布局中，我熟练地运用了css样式类和id建立配合使用，在布局中插入图片时，div被撑开，整体布局因此受到影响，通过设置类和id，重新定义div的大小。通过设置div的边框值，从而改进了div的显示位置。
然而这次网页的设计并不完美，注册登录功能不能很好地实现，不会使用数据库进行数据存储，这次由于时间问题不能很好地解决，但我以后一定会多钻研努力，把这方面的问题弄懂，争取以后做出完美的网页。
尽管存在很多不足，但是这次实验的完成是我非常有成就感，极大地提升了我的自信，我也对网页设计越来越感兴趣。这是一次质的飞跃，在以后的学习中，我一定会积极克服困难，更加努力，增强实力，提升自己。
希望能够帮助你！