编辑网站内容(建一个基于HTML5、简单JavaScript综合应用和CSS3的网页开发应用技术 )

　　编辑网站内容(建一个基于HTML5、简单JavaScript综合应用和CSS3的网页开发应用技术

)

　　要求

　　1、设计和制作主题静态网站

　　(1）网站内容正能量，正能量满满，HTML应用准确，页数不少于3页；

　　（2）网站本土风格的布局和运用符合整体审美；

　　（3）网站配合二级菜单、动态页面调整、表单验证等基础JavaScript应用，交互性不错。

　　2、对以上设计作品写报告，不少于2000字（图和表不计）。

　　内容

　　1、HTML 集成应用程序

　　2、CSS综合应用

　　3、JavaScript 简单综合应用

　　标准

　　1、主题明确，内容正能量，正能量满满

　　2、网站布局合理，整体美观

　　3、网站乡土风格设置合理，美观度高

　　4、JavaScript实现的交互功能不少于3个

　　5、代码规范，目录结构合理

　　6、报告结构清晰，文笔新颖

　　7、报告有结语，总结中肯

　　页面预览效果：

　　

　　

　　

　　

　　

　　这个页面是一个轮播效果：

　　

　　内容

　　下面详细介绍制作和说明

　　设计概述

　　网站的思路是基于HTML5、简单的JavaScript综合应用和CSS3 web开发应用技术构建一个网页。图片方面，网页包括“首页、账号注册、账号登录、关于我们、退出、让心情去”6个页面。网站最大的特点是借助CSS3的网页布局应用技术，使网页界面更具可读性，从而使网页具有亲和力。

　　2.1 开发环境：

　　操作系统：Windows 11 专业版；

　　客户端：Chrome 版本 96.0.4664.45（官方）（64 位）

　　开发语言：HTML（超文本标记语言）、CSS（层叠样式表）和 JavaScript。

　　2.2 开发工具：

　　Visual Studio Code、谷歌浏览器、Adobe Photoshop CS6

　　2.3 开发技术介绍：

　　作品技术方面，主要使用了Bootstrap框架，包括按钮、二级下拉菜单、导航栏、字幕文本的动态滚动、让图片旋转的JavaScript、显示时间、验证邮件格式等。当然，还有很多基础知识。，比如网页的超链接，鼠标悬停的特效，以及动态页面的调整，表单的基本校验等等。

　　3.1确定网站主题：

　　网站主题是待建立的网站中要收录的主要内容。网站 必须有明确的主题。这里网站的主题是景区网络。

　　3.2 采集材料：

　　明确网站的主题之后，就该开始围绕主题进行素材采集了。材料可以从书籍、报纸、多媒体中获取，也可以从互联网上采集，然后将采集到的材料从原石中提取出来，将赝品作为制作自己网页的材料保存下来。在这里，我采集了很多关于风景的图片和信息。

　　3.3 规划网站：

　　网站 设计的成功很大程度上取决于设计师的规划水平。规划网站 就像设计师设计一座建筑。只有设计好图纸，才能建造出漂亮的建筑。. 网站策划收录了很多内容，比如网站的结构、栏目的设置、网站的风格、配色、布局、文字和图片的使用等等。所有这些方面都考虑到了，这样我们才能熟悉生产，有一个深思熟虑的计划。只有这样制作出来的网页才能具有个性、特色和吸引力。在规划方面，我把网站的结构做成一页收录所有内容，栏目设置和最常见的网站没有区别，但是网站的整体风格我觉得还是比较新的。比如网站的布局经过精心设计，采用CSS3网页布局技术，达到完美效果。点击网站的顶部导航栏，可以立即跳转到页面上的Details小节。我觉得这是这个页面最吸引人的特效。

　　3.4 工件材料处理

　　关于素材，先选择适合主题的图片，再选择最能代表作品的图片，然后根据实际情况使用Adobe Photoshop CS6修改图片大小，再选择文字素材，选择最能概括作品内容的短文。

　　3.5 编写代码（制作网页）

　　现在你有了材料和工具，你需要按照计划，一步一步把你的想法变成现实。这是一个复杂而细致的过程，必须按照大、小、简、繁的顺序进行。制作。所谓“先大后小”，是指在制作网页时，先设计大结构，再逐步完善小结构设计。所谓先简单，后复杂，就是先设计简单的内容，再设计复杂的内容，这样有问题的时候可以很方便的修改。制作网页时要灵活，灵活使用模板，可以大大提高生产效率。

　　网站包括网站首页、账号注册、账号登录、关于我们、反馈和出行。想出点子，可以参考一些网页的排版，把对应的代码组合在一起，注入自己的编程设计，去理解和组成你看到的网页。

　　4.1 index.html页面截图设计说明：

　　页面可以适应窗口

　　设计说明：

　　主页面的设计可以分为6个部分：首先使用JavaScript调用系统当前时间，然后设计网站“景区”主题

　　网站标题：

　　

　　#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);

    /* 设置网站标题文字阴影为绿色 */

}

　　导航栏：“可根据导航栏块实现子页面跳转”

　　

　　/* 导航栏 */

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);

    /* 设置当鼠标放到每个不同的位置，有变浅蓝色的效果 */

}

　　在导航栏下方，插入背景图片并按比例设置高度和宽度

　　在图片上，设置文字、标题、选框标签，设置文字的动态滚动

　　scrollamount 设置移动距离，滚动速度，scrolldelay 设置移动延迟，滚动延迟为 5 秒，direction 设置文本从下到上滚动。