| 要求 | 1、设计并制作一个主题鲜明的静态网站（1）HTML应用准确，页面数不少于3个； （2）网站布局、局部样式应用符合整体美观度； （3）网站具备二级菜单、动态页面调整、表单验证等基本JavaScript应用，交互良好。 |
页面预览效果：
该页面为轮播效果 ：
目录
下面详细介绍制作与说明，
设计概述
网站的构思是建一个基于HTML5、简单JavaScript综合应用和CSS3的网页开发应用技术的网页，网站的主题是“风景名胜网”，其思想是欣赏风景图片的，网页包括“主页、账号注册、账号登录、关于我们、退出登录以及让心情去出发吧”这6个页面。网站最大的特点是借助了CSS3的网页页面布局的应用技术是的网页的界面更具有可读性，从而使得网页具有亲和力。
- 开发环境及开发技术
2.1 开发环境：
操作系统: Windows 11专业版;
客户端: Chrome 版本 96.0.4664.45（正式版本） （64 位）
开发语言: HTML（超文本标记语言）、CSS（层叠样式表）和JavaScript。
2.2 开发工具：
Visual Studio Code、google浏览器、Adobe Photoshop CS6
2.3 开发技术介绍：
关于作品技术，主要用了Bootstrap框架，其中像按钮、二级下拉菜单、导航栏、marquee文字的动态滚动、JavaScript使图片轮播、显示时间、验证邮箱格式之类的，当然还有很多基础知识，例如网页的超链接、鼠标经过的特效，还有动态页面的调整，表单的基本验证等等。
- 作品总体设计方案及制作思路
3.1确定网站主题：
网站主题就是要建立的网站所要包含的主要内容，一个网站必须要有一个明确的主题。在这里网站主题就是风景名胜网。
3.2搜集材料：
明确了网站的主题以后，就要围绕主题开始搜集材料了。材料既可以从图书、报纸、多媒体上得来，也可以从互联网上搜集，然后把搜集的材料去粗取精，去伪存真，作为自己制作网页的素材。在这里我搜集了好多关于风景的图片以及信息。
3.3规划网站：
一个网站设计得成功与否，很大程度上决定于设计者的规划水平，规划网站就像设计师设计一座大楼一样，图纸设计好了，才能建成一座漂亮的楼房。网站规划包含的内容很多，如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等，只有在制作网页之前把这些方面都考虑到了，才能在制作时驾轻就熟，胸有成竹。也只有如此制作出来的网页才能有个性、有特色，具有吸引力。在规划方面我将网站的结构做成一页包含所有的内容，栏目的设置和大多数常见的网站并没有什么差别，但总体网站的风格我觉得还是比较新颖的，比如，网站的排版是过精心的设计，而且采用了CSS3网页排版技术来达到完美的效果，通过点击网站的顶端导航栏，可以马上翻到子网页的详细介绍中。我认为这是该网页最吸引人的特效。
3.4作品素材处理
关于素材，首先先去选择适合主题的图片，再选择其中最能代表作品的图片，再根据实际情况用Adobe Photoshop CS6修改图片尺寸，接着再选择文字素材，选择简短有最能概括作品内容的文字。
3.5编写代码（制作网页）
材料有了，工具也选好了，下面就需要按照规划，一步一步地把自己的想法变成现实了，这是一个复杂而细致的过程，一定要按照先大后小、先简单后复杂来进行制作。所谓先大后小，就是说在制作网页时，先把大的结构设计好，然后再逐步完善小的结构设计。所谓先简单后复杂，就是先设计出简单的内容，然后再设计复杂的内容，以便出现问题时好修改。在制作网页时要多灵，活运用模板，这样可以大大提高制作效率。
网站包括站点首页、账号注册、账号登录、关于我们、意见反馈以及去旅行吧。制作思路，参照一些网页的排版，以及相应的代码拼组在一块，并且注入自己的编程设计，理解，组成所看到的网页。
- 作品详细设计过程
4.1 index.html页面截图设计说明：
该页面可根据窗口自适应
设计说明：
该主页面的设计可以分为6块：首先通过使用JavaScript来调用系统的当前时间，然后设计网站的主题“风景名胜网”
网站标题：
完整代码
请访问以下链接：
腾讯文档腾讯文档-在线文档
https://docs.qq.com/doc/p/71239d69a76f56cf1521717ae6b22c27cf876f10
#t1 {
color: white;
font-family: "STHupo";
/* 设为华文琥珀字体 */
background-color: rgba(65, 105, 225, 0.37);
line-height: 70px;
font-size: 50px;
text-shadow: 5px 2px 6px rgb(32, 240, 13);
/* 设置网站标题文字阴影为绿色 */
需要源代码 +Q：3125841747
}导航栏：《根据导航栏块，可实现子网页跳转》
/* 导航栏 */
ul {
list-style-type: none;
margin: 0;
padding-left: 4%;
/* 设置导航栏文字居中显示，往右偏移4% */
overflow: hidden;
background-color: rgb(105, 179, 248);
/* 设置导航栏的背景颜色为蓝色 */
}
li {
float: left;
/* 设置没个导航栏都平行往右摆放 */
width: 16%;
/* 100%的比例，6个导航栏，每个导航栏所占16% */
}
/* 变色效果 */
li a {
text-align: center;
line-height: 40px;
/* 设置导航栏的背景颜色行高 */
color: white;
/* 设置导航栏的文字颜色为白 */
text-decoration: none;
/* 由于每个块都有超链接到子网页，故设置文本没有下划线 */
}
li:hover {
background-color: rgba(98, 134, 212, 0.363);
需要源代码 +Q：3125841747
/* 设置当鼠标放到每个不同的位置，有变浅蓝色的效果 */
}在导航栏的下面，插入背景图，并按比例设置高宽
再在图片上，设置文本文字，标题，marquee标签用于设置文字的动态滚动
scrollamount 设置移动距离，滚动速度，scrolldelay 设置移动延迟，滚动迟滞为5秒，direction设置文字从下往上滚动。
Copyright块：
#copyright {
height: 70px;
/* 设置底部背景黑色的高为70px */
font-family: monospace;
/* 设置字体格式 */
color: rgb(244, 247, 247);
/* 设置字体的颜色 */
position: relative;
/* 设为相对定位 */
bottom: 160px;
/* 规定元素的底部边缘为160px */
background-color: #333;
/* 设置背景的颜色为黑色 */
margin-top: -100px;
/* 上外边距为-100平行 */
padding-top: 30px;
/* 设上内边距为30px */
}4.2 zhuce.html页面截图设计说明：
首先插入背景图片作为背景，并设置如下的css属性
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
width: 100%;
overflow: hidden;
margin: 0;
padding: 0;
background: url(/img/zhucejpg.jpg) no-repeat 0px 0px;
background-repeat: no-repeat;
background-size: 100% 100%;
/* 设置图片被拉伸，且全屏显示 ，直至完全覆盖背景区域*/
/* -moz-background-size: 100% 100%; */
}
body {
display: flex;
/* 弹性布局 */
align-items: center;
/* 居中对齐弹性盒的各项 <div> 元素： */
justify-content: center;
/* 在弹性盒对象的 <div> 元素中的各项周围留有空白 */
height: 100%;
}
/* 注册方框的背景布局*/
再设置注册的标题：
h1 {
text-align: center;
margin-bottom: 20px;
margin-top: 20px;
color: #f0edf3;
}
/* 设置标题‘用户注册’的美化 */
#loginDiv {
width: 37%;
display: flex;
justify-content: center;
align-items: center;
height: 650px;
background-color: #ec720e2c;
box-shadow: 7px 7px 17px rgba(8, 78, 136, 0.5);
border-radius: 5px;
/* 设置圆角的边框 */
}
再设置每行的文字：
设置css样式：
p,
.sexDiv {
margin-top: 10px;
margin-left: 20px;
color: rgb(255, 240, 240);
/* 设置每行文字颜色 */
}
/* 设置每个方框的上下间隔 */
.sexDiv>input,
.hobby>input {
width: 30px;
height: 17px;
}
/* 设置用户性别男女属性值中间的间隔 */
input,
select {
margin-left: 15px;
border-radius: 5px;
border-style: hidden;
height: 30px;
width: 140px;
background-color: rgba(243, 246, 252, 0.288);
outline: none;
color: #f0edf3;
padding-left: 10px;
/* 设置用户类型中‘请选择’的显示位置 */
}
/* 设置每个文本框填写的美化 */
邮箱这块的格式通过JavaScript来验证其格式是否正确：
JavaScript代码如下：
//校验邮箱格式:/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
var inputEmail = document.getElementById("email");
var uEmail = inputEmail.value;
if (!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/.test(uEmail)) {
trip("emil_trip", "邮箱不合法!!");
return false;
} else {
trip("emil_trip", "OK!!");
}
然后就是继续设计‘自我介绍’行和‘自我介绍’行下面的文本框以及两个按钮：
.
button {
border-color: cornsilk;
background-color: rgba(100, 149, 237, .7);
color: rgb(255, 240, 240);
border-style: hidden;
border-radius: 5px;
width: 100px;
height: 31px;
font-size: 16px;
}
/* 设置‘提交’‘重置’按钮的每个属性 */
.introduce {
margin-left: 110px;
}
/* 设置所有行的位置在中间颜色文本框的位置 */
扫一扫
1460
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
