Web前端开发技术

描述

网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业， | HTML期末大学生网页设计作业

HTML：结构
CSS：样式

在操作方面上运用了html5和css3，

采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识
JavaScript：做与用户的交互行为

文章目录

前端学习路线
网页基本结构
网页演示
- HTML结构代码
学的反而越迷茫
学习更多

前端学习路线

（1）html文件：其中index.html是首页、其他html为二级页面；

（2）css文件：css全部页面样式,文字滚动, 图片放大等；

（3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）

网页基本结构

(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner、新闻、相关信息、底部信息、banner一般是5个

(2)二级页面：从首页点击进入之后的页面叫做二级页面

(3)三级页面：从二级页面点击进入的页面

网页html

：网页是构成网站的基本元素，是承载各种网站应用的平台。通俗地说，网站就是由网页组成的

首页网站

：首页是一个网站的入口网页，故往往会被编辑得易于了解该网站多数作为首页的文件名是index加上扩展名

导航菜单

：是指位于页面顶部或者侧边区域的，也称之为导航栏，它起着链接站点或者软件内的各个页面的作用.

网页页脚

：是网页中每个页面的底部的区域。常用于显示附加信息。如作者、备案号等。

网页演示

在这里插入图片描述

HTML结构代码



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="css/style.css" />
<title>视觉传达</title>
<style>
.banner{ position:relative; left:-6px; }
</style>
</head>
<body>
<div class="wrapin">
  <!--头部-->
  <header>
    <ul class="nav clearfix">
    <li><a href="index.html">网站首页</a></li>
        <li><a href="shijue.html">视觉传达</a></li>
        <li><a href="zhuce.html">用户注册</a></li>
    </ul>
  </header>
 <div id="banner" class="banner wrapin">
    <ul id="b_pic">
      <li style="display: block;"><img src="images/banner_1.jpg"></li>
    </ul>
  </div>
  <!--内容-->
  <div class="con ">
    <div class="top clearfix">
      <div class="txt">
        <div class="title">
          <h2>视觉传达简介</h2>
        </div>
        <P>视觉传达这一术语流行于1960年在日本东京举行的世界设计大会，其内容包括：报刊环境视觉设计杂志、招贴海报及其他印刷宣传物的设计，还有电影、电视、电子广告牌等传播媒体，它们把有关内容传达给眼睛从而进行造型的表现性设计统称为视觉传达设计电影海报，简而言之，视觉传达设计是“给人看的设计，告知的设计”——（日本《ザィン辞典》）。</P>
        <br></div>
    </div>
    <div class="tupian">
      <div class="title">
        <h2>视觉传达图片</h2>
      </div>
      <ul class="clearfix">
        <li><a href="https://baike.baidu.com/item/%E8%A7%86%E8%A7%89%E4%BC%A0%E8%BE%BE/2398223?fr=aladdin"><img src="images/5.jpg"/></a></li>
        <li><img src="images/2.jpg"/></li>
        <li><img src="images/3.jpg"/></li>
        <li><img src="images/0.jpg"/></li>
      </ul>
    </div>
    <div class="pinglun tupian">
      <div class="title">
        <h2>特点介绍</h2>
      </div>
      <ul class="clearfix">
        <li><img src="images/13.jpg"/></li>
        <li><img src="images/16.jpg"/></li>
        <li><img src="images/15.jpg"/></li>
        <li><img src="images/12.jpg"/></li>
      </ul>
      <div class="text">视觉传达设计是通过视觉媒介表现并传达给观众的设计，体现着设计的时代特征图形设计和丰富的内涵。数字化多媒体的出现不断地挑战并充实着传统的视觉传达方式， 扩展了当代视觉传达设计外延，视觉传达由以往形态上的平面化、静态化，开始逐渐向动态化、综合化方向转变，从单一媒体跨越到多媒体，从二维平面延伸到三维立体和空间，从传统的印刷设计产品更多转化到虚拟信息形象的传达。广告作为视觉传达的重要形式，也在数字多媒体技术的推动下发生了质的飞跃。网络广告、数字影视广告、多媒体电子显示屏、多媒体互动广告等新一代的广告视觉传播方式以飞速发展的趋势渗透到社会生活的各个方面。 所谓多媒体，即多种信息媒介的综合。多媒体技术不是各种信息媒介的简单复合，而是一种把文本、图形、影像、声音、视频、动画等形式的信息结合在一起，并通过计算机进行综合处理和控制，能支持完成一系列交互式操作的数字信息技术。 在当今信息社会，以计算机科学为标志的数字多媒体技术给广告设计和传播带来了新的气息， 取得了令人瞩目的社会效益和经济效益。在数字多媒体技术的推动下， 广告推广战略也从单纯的品牌推广阶段向更加细化的市场推广阶段转化，开始注重和选择区域媒体、行业媒体以及更加细化市场定位的媒体，数字多媒体广告运作和发布的方式也更加多样化和人性化。</div>
    </div>
  </div>
  <!--底部-->
  <footer>
    <p>xxx版权所有</p>
  </footer>
</div>
</body>
</html>

学的反而越迷茫

有这种感觉很正常，因为你还没有真正去公司里面待过，也不清楚自己到底要学多少东西才能胜任公司里面给你分配的活。我从你的表述来看，你的基础应该还是很扎实的。跟着网上那种全套的视频教程学肯定没有问题。

当你以后真正进入公司，发现工作的难度和量大约只有你学习时期的大约20%，你可能就会发出一声叹息:原来工作也不过如此嘛。

这是很正常的，因为大部分公司是招你进去去干活的，写业务的，不是让你一个新人去研发公司架构的。都是现成的东西，你要做的就是在别人的教导下，手把手的指挥下去添砖加瓦。到时候你恐怕要惊呼:就这？

所以，放松心态吧，好好享受大学时光

—————————————————

学习更多

关注我 | 点赞博文 | 每天带你涨知识

相关问题可以相互学习，可关注↓公Z号