附：讲解视频链接（需要私信）
附：源码、文档（需要私信）
一、规划网站
1．网站主题说明
这是一个关于狗狗的网站，越来越多的人喜欢养宠物，尤其是狗狗，遇到有责任感，有爱心的主人对于他们来说是无比幸运的，但是也存在一些不负责任的人养了狗狗却将他们抛弃...因此我设计了一个名为《爱道阁》的狗狗网站，希望流浪狗狗得到更多人的关注，找到自己的避风港。
2．网站栏目结构
表1 网站栏目结构
| 一级栏目 | 二级栏目 | 三级栏目及内容页面 |
| 首页 first.html | 关于我们aboutus.html | |
| 专题活动zhuanti.html | ||
| 相关资讯 | 电影推荐1 movie1.html 电影推荐2 movie2.html 电影推荐3 movie3.html 电影推荐4 movie4.html 新闻推荐1 new1.html 新闻推荐2 new2.html 新闻推荐3 new3.html 新闻推荐4 new4.html 新闻推荐5 new5.html 倡议书advice.html 保护地球 provideearth.html | |
| 狗狗趣事1 interest1.html | ||
| 狗狗趣事2 interest2.html | ||
| 狗狗趣事3 interest3.html | ||
| 登录login.html | ||
| 注册 register.html | ||
| 友情链接（1、2、3、4） |
表2 网站菜单结构
| 首页中主菜单名称 | 弹出式子菜单名称 |
| 关于我们 | |
| 专题活动 | 领养代买 |
| 相关资讯 | 新闻 倡议 电影推荐 |
| 狗狗趣事 | 趣事1 趣事2 趣事3 |
| 注册 | |
| 登录 | |
| 友情链接 | 爱宠网、狗民网、宠物领养网、人道对待动物网 |
3．规划网站目录结构和链接结构
表3 网站的目录结构及其存放的文件类型
| 文件夹名称 | 存放的文件类型 |
| Css | 网页结构样式Style.css |
| Images | 图片、视频素材tupian.jpg/png/mp4 |
| js | jquery-3.5.1.js |
| html | 各个网页Login.html |
图1《爱道阁》网”中的链接结构
二、准备素材
1．Logo
利用PS图像处理软件量身定做网站的Logo标志，Logo标志与本网站的主题相符，有新意。LOGO的效果图：
图6logo效果图
2．准备动画
网站中的动画突出主题，起到了画龙点睛之功效。动画利用flash软件制作。
三、网站首页的设计与制作
1．网站首页布局设计
具体方案：
（1）整个页面由6部分区域组成；
（2）每部分区域用什么技术设计?具体结构是什么?用来存放什么内容。
a.banner，一张图片，设置居中；
b.导航栏，一行十列的表格，各个标签使用a标签链接到相应的界面；
c.轮播图，使用js实现轮播，无序列表布局，为所在div添加了一个背景图片；
d.两行两列的表格，左边合并成一列。各个板块的内容均使用a标签链接到对应界面。圆角边框使用border-radius：30px设置；
e.结尾部分，div标签设置文本居中；
f.友情链接部分使用两行四列的表格。
（3）在网页布局时要体现CSS+DIV布局
图8首页布局
四、制作二级栏目页面和内容页面。
1．二级栏目页面设计
（1）布局结构图：
“登录”界面：
登录界面使用了JavaScript。界面的主体部分是一个表格。每个输入文本框都有匹配输入的模式，存储用户数据的功能不能实现。
“注册”界面：
与登录界面类似，注册界面的主题部分也是一个表格，里面有几个输入文本框。当登录时也不能检测用户是否注册过。
“新闻”界面：
该界面导航栏与尾部大体上与首页相同，主体部分是一个一行两列的表格。第一列是一个自定义列表，里面有三个板块，各个板块的内容均有链接。右侧使用article，p标签显示新闻内容。
“专题活动”界面：
与新闻界面样式相同。领养代替购买”专题活动，呼吁人们更多的采用领养方式。
“动态-倡议书”界面：
“电影推荐”界面：
这个界面主要介绍了相关的一些电影帮助大家更好的了解动物。界面的主体部分是一张海报，演员表和影评：
海报使用了float属性浮动在文本流中；
正文使用了margin:0 auto使文章在正中间显示，使用了header、article、section、p、img等标签设置正文
演员表使用aside标签为其设置CSS样式使其固定在页面的最右边。
3．内容页面设计
使用什么技术：
这个界面是介绍我们网页制作的目的和功能的界面，主要使用了article，p标签，包含了介绍的文章。使用了ID选择器设置CSS样式margin:0 auto使文本在正中间显示。其余的导航，footer与首页相同。
4．内容页面填充
图中标注模块内容全部采用超链接形式，单击即可进去相应内容阅读查看。
展示部分相关超链接代码。
五、首页弹出式菜单的设计
效果图：
- 主页、二级栏目页面、及内容页的效果图
主页效果图：
部分二级栏目效果图：
六. 网页设计总结：
通过这次实验，我的知识有了很大的提升而且在心得上也感受颇多。这次实验的综合运用到了平时学习的知识，将上课所学知识在实践中巩固掌握以及进一步熟悉和掌握网页设计与网页制作的基本流程。
这个网页的制作，从选题到开始制作，从理论到实践，我学到了很多很多东西，巩固了以前所学的知识，而且学到了以前未曾学过的知识。通过这次实验我懂的了理论与实际相结合的重要性，只有理论知识是远远不够的，只有把所学得理论知识与实践相结合起来，从理论中得出结论，从实践中总结技巧，才能真正掌握技术，从而提高自己实际动手能力和独立思考的能力。
在制作网页的过程中我遇到了很多困难，总结如下：
在div布局中，我熟练地运用了css样式类和id建立配合使用，在布局中插入图片时，div被撑开，整体布局因此受到影响，通过设置类和id，重新定义div的大小。通过设置div的边框值，从而改进了div的显示位置。
然而这次网页的设计并不完美，注册登录功能不能很好地实现，不会使用数据库进行数据存储，这次由于时间问题不能很好地解决，但我以后一定会多钻研努力，把这方面的问题弄懂，争取以后做出完美的网页。
尽管存在很多不足，但是这次实验的完成是我非常有成就感，极大地提升了我的自信，我也对网页设计越来越感兴趣。这是一次质的飞跃，在以后的学习中，我一定会积极克服困难，更加努力，增强实力，提升自己。
希望能够帮助你！
