精华内容
下载资源
问答
  • 用Editplus制作HTML网页

    千次阅读 2015-06-08 22:49:58
    最近在学习java web开发,作为预备知识,首先要学习HTML编程,这里记下我制作第一个网页的过程,我的学习分为以下几个步骤:①初识HTML ②Editplus简介 ③网页总体构思 ④涉及的知识点 一、初识HTML1、为什么要学...
    最近在学习java web开发,作为预备知识,首先要学习HTML编程,这里记下我制作第一个网页的过程,我的学习分为以下几个步骤:
    
    • ①初识HTML
    • ②Editplus简介
    • ③网页总体构思
    • ④涉及的知识点

    一、初识HTML

    1、为什么要学HTML

    网络应用程序常用的构架有C/S构架和B/S构架,其中,B/S构架的系统一般由动态网页负责完成信息呈现和引导交互的任务,JSP是
    Java EE的体系中编写动态网页的一种技术,而HTML则是JSP一个不可或缺的组成部分,所以有必要先掌握HTML。
    

    2、HTML的本质

    (1)它是超文本。首先它与本文有联系,其次它不仅仅是文本,还可以有图片、音频、视频、动画、超链接等更丰富的元素,超越了传
    统文本的限制。因此它可以被看做是传统文本的一个扩展或者电子化,当然它也具有区别于传统媒体的特点。
    (2)它是标记语言。标记语言是一套标记标签,HTML用标记标签来描述网页。它不是一种编译型语言,所以不需要编译器,它以一系列 
    标记标签为基础,客户端只是要有浏览器就可以对标记标签进行分析解析,从而还原发布者的源内容。
    

    二、Editplus简介

    EditPlus是一款由韩国 Sangil Kim 出品的小巧但是功能强大的可处理文本、HTML和程序语言的Windows编辑器,你甚至可以通过设置用户工具将其作为C,Java,Php等等语言的一个简单的IDE。

    (1)默认支持HTML、CSS、PHP、ASP、Perl、C/C++、Java、JavaScript和VBScript等语法高亮显示。
    (2)EditPlus提供了与Internet的无缝连接,可以在EditPlus的工作区域中打开Intelnet浏览窗口。
    (3)提供了多工作窗口。不用切换到桌面,便可在工作区域中打开多个文档。
    (4)正确地配置Java的编译器“Javac”以及解释器“Java”后,使用EditPlus的菜单可以直接编译执行Java程序。
    

    Editplus的具体使用见博客

    三、网页总体框架

    喜欢看美剧的应该都听过《权利的游戏》,又名《冰与火之歌》,七个国家九大家族的权力之争,一个个个性鲜明的任务在银屏上相继出 现,过瘾之余,不免让人觉得眼花缭乱,为了使人物关系更加清晰有条理,可以设计一个相关网页,实现感兴趣信息的链接,网页初样先上图,以后有时间再完善。
    

    网页标题GAME OF THRONES链接到《权利的游戏》小说的介绍,下面是剧中九大家族的旗帜,为了美观,加入了守夜人的旗帜,连接到 另一方势力——长城以北的抗争,包括守夜人、野人和异鬼。
    这是我的第一个网页,比较简单,主要包括图片的链接、背景的设置、表格的利用、网页的布局、鼠标掠过表格元素时图片的更换和网页 尺寸的自适应,准备再在右下角加入几个标签链接到《权利的游戏》电视剧。

    权力的游戏

    四、涉及的知识点

    HTML详细教程见[链接](http://www.w3school.com.cn/html/index.asp),本博客结合案例讲解所使用到的知识点。
    

    1、HTML 标题

    HTML 标题(Heading)是通过 <h1>-<h6> 等标签进行定义的,指的是打开网页时浏览器的标签,本案例用EditPlus设计的代码如下,其中<meta>是由EditPlus创建时自动生成,嵌套<title>The Game of Thrones</title>后,浏览器标签显示The Game of Thrones。
    
    <head>
          <meta charset="UTF-8">
          <meta name="Generator" content="EditPlus®">
          <meta name="Author" content="">
          <meta name="Keywords" content="">
          <meta name="Description" content="">
          <title>The Game of Thrones</title>
    </head>

    2、HTML 段落

    HTML 段落是通过 <p> 标签进行定义的。
    
        eg.<p>This is a paragraph.</p>
           <p align="left">This is a paragraph.</p>//其中,align="left"为段落属性

    3、HTML 文档

    HTML文档的通用结构如下:
    
        <html>
            <head>                
                  <title>The Game of Thrones</title>
            </head>
            <body>
                <p>This is my first paragraph.</p>
            </body>
        </html>

    4、HTML 链接

    链接的 HTML 代码类似这样:
    
    <a href="url">Link text</a>
    其中,href 属性规定链接的目标,开始标签和结束标签之间的文字被作为超级链接来显示。
    
        eg.<a href="http://www.w3school.com.cn/">Visit W3School</a>
    上面这行代码显示为:Visit W3School,点击这个超链接会把用户带到 W3School 的首页。
    提示:"链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。
    
    eg. <a href="http://baike.baidu.com" target="_parent" >
                 <img src="./FAMILY/stark.jpg" width=100% border=none>      
        </a>

    5、HTML 表格

    本案例中使用了2x5的表格,每个表格单元放置了一张图片链接。表格由 <table> 标签来定义。 
    每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。 
    字母 td 指表格数据(table data),即数据单元格的内容。 
    数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
    
    <table border="1">
            <tr>
                <td>row 1, cell 1</td>
                <td>row 1, cell 2</td>
            </tr>
            <tr>
                <td>row 2, cell 1</td>
                <td>row 2, cell 2</td>
            </tr>
    </table>
    在浏览器显示如下:
    row 1, cell 1   row 1, cell 2
    row 2, cell 1   row 2, cell 2
    

    6、HTML 样式

    当单个文件需要特别样式时,就可以使用内部样式表,通过 <style> 标签定义内部样式表。 本案例中,分别对body部分、表格单元中图片以及表格整体设置了相应的样式。
    
    <style>
            body{ margin:0; padding:50px; }
            div{ height:100%; width:80%; margin:0 auto;}/*这里的width height 大于图片的宽高*/
            table{ height:100%;width:100%; padding:50px; }
    </style>

    7、HTML 背景

    背景可以通过RGB 值或者图片来设置

    <body bgcolor="#000000">
        <body bgcolor="rgb(0,0,0)">
        <body bgcolor="black">
        <body background="http://www.w3school.com.cn/clouds.gif">

    本案例在代码正文直接用图片设置背景,方法如下:

    <div>
            <img style="position:absolute;left:0px;top:0px;width:100%;height:100%;z-Index:-1; border=none; solid blue" src="./bg.jpg"  />
    </div>
    

    8、HTML鼠标触发事件

    本案例中,当鼠标略过网页中某张图片时,图片会变成另一张,由《权利的游戏》家族旗帜变成家族主要成员,具体实现如下:

    <a href="http://baike.baidu.com" target="_parent" >
             <img src="./FAMILY/stark.jpg" width=100% border=none
             onmouseover='src="./FAMILY/starks.jpg"' onmouseout='src="./FAMILY/stark.jpg"'>     
    </a>
    其中,onmouseover='src="./FAMILY/starks.jpg"'   onmouseout='src="./FAMILY/stark.jpg"'为关键设置, 
    border=none设置图片显示无表框。
    
    展开全文
  • HTML标签,我们在网页制作中一定不要使用。 这次着眼于一些童话世界和史前时代的HTML标签。它们是被HTML标准抛弃的不良、肮脏、十足丑陋的,胡乱荒谬的属性,只能部分地工作在一个次版本的浏览器上或者可以被新...

    良HTML标签,我们在网页制作中一定不要使用。

    这次着眼于一些童话世界和史前时代的HTML标签。它们是被HTML标准抛弃的不良、肮脏、十足丑陋的,胡乱荒谬的属性,只能部分地工作在一个次版本的浏览器上或者可以被新标签取代的标签。新建一个前端学习qun438905713,在群里大多数都是零基础学习者,大家相互帮助,相互解答,并且还准备很多学习资料,欢迎零基础的小伙伴来一起交流。

    有人建议我们不要歌颂标准尽管我们教授基于标准的HTML和CSS,但如果这样的话,用户(特别是初学者)会遭遇不良的入门方法和不良练习,同时他们并不知道哪里出错了。所以我们的答案是:一份拒绝不良标签的指南。

    HTML已经尝试去除表现和朝向内容发展,导致这样一个基本原理:从表现(CSS)中分离出内容意义(HTML)。这将会给网页减肥,因为一个表现指令集合(以外部CSS文档的形式)可以应用到多个页面。这也会使网站更易于管理因为全局变动可以从修改一个单独的文件得到。

    部分不良标签基本上是表现标签(比如small),它们可以用更有意义和更简单的CSS规则取代。其他的不仅用于表现,而且还是不必要的庞大(比如font标签)或者对可用性有害的可恶的(比如blink)。

    标签

    下面这些是你可能会经常碰到的可以有更好选择的标签:

    ◆ b 可以用来产生粗体元素。使用strong(意味着强烈强调)代替更有意义,或者用CSS来完成这项工作,增加font-weight: bold的规则,用来表明粗体元素。 
    ◆ i可以用来产生斜体元素。使用em(表示强调),这也更有意义。或者可以用CSS来表现斜体:font-style: italic 
    ◆ big可以产生更大字体。使用标题(如h1,h2等,当文本本来就是一个标题时)代替,增加了意义,或简单地在CSS中使用font-size属性,获取更多的控制权。 
    ◆ small 可以产生小字体。CSS(font-size)再一次取得更多的控制权。 
    ◆ hr 可用用来展现一条水平线。在CSS中用hr设计很少见,CSS的border-top,border-bottom属性或者朴素的图像做这个效果会更好。 
    上述的标签与最新的HTML标准尽管都兼容,但对内容却没有任何好标签应有的意义。They could be more useful but they aren't particularly harmful, and might easily be mistaken for innocent butter-wouldn't-melt-in-their-mouth nuggets of pure goodness when standing next to the following filthy tags.新建一个前端学习qun438905713,在群里大多数都是零基础学习者,大家相互帮助,相互解答,并且还准备很多学习资料,欢迎零基础的小伙伴来一起交流。

    ◆ u可以为元素产生下划线。它提醒着下划线文本还很多连接关联。这就是这个标签死了很久的原因——你不必给非连接文本下划线。 
    ◆ center可以用来居中在元素内部的元素。CSS属性text-align允许不仅仅是center,还有left、right和justify。 
    ◆ menu用来创建菜单列表。它并没有ul做的完美,在因为无序列表更通用,ul高高地站在menu的尸体上。 
    ◆ layer和div元素相似,都由CSS绝顶位置。这仅仅能在老版本的Netscape中工作,所以再也没有什么用。 
    ◆ blink或者marquee。大声说不!它们应该像本身意义一样被期待,但有着十分有限的支持,和,只会产生非常,非常恶心的笑话。 
    ◆ font,可以用来定义元素的字体名称,尺寸和颜色,在标签世界中理所当然地获得了臭名昭著标签之王荣誉称号。旧的网站(甚至新的也有)像满世界的瘟疫之蚁一样布满整个页面。大部分的font标签激增是从网页制作软件带来的,把font标签包括颜色和尺寸用在每一个元素。font标签被滥用到出现在当前的每一个重复元素的(如,每次你使用p元素),而CSS,则可以用一条简短的代码来应用重复元素,甚至控制整个网站。使用CSS方法,不仅可以使页面比被大量font标签寄生的更苗条,而且更容易维护因为你所需要做得只是改变CSS文件中的一行,而不是逐一修改每一个font标签。这也增加了维护一个一直保持设计风格一致的网站的可能性。font标签和不恰当的表格使用是两个产生网页不必要臃肿的主要原因。 

    展开全文
  • 根据PSD登陆页面设计稿切图制作HTML网页全过程

    万次阅读 多人点赞 2017-02-16 15:18:04
    切图的目的是把PSD设计稿转换为HTML页面。记得自己当时学习切图时,网上切图相关的文章是不少,但是大都是讲怎么使用切片工具把一张图片分割成多张图片,然后存储为Web使用格式,并且都比较简单和零碎,并不能满足我...

    切图的目的是把PSD设计稿转换为HTML页面。记得自己当时学习切图时,网上切图相关的文章是不少,但是大都是讲怎么使用切片工具把一张图片分割成多张图片,然后存储为Web使用格式,并且都比较简单和零碎,并不能满足我的要求。因此只能自己不断尝试,今天分享给大家“如何根据PSD设计稿通过PS切图和DIV+CSS布实现HTML页面”,希望能帮助到大家。

    实例:

    下面通过一个简单的登陆页面PSD设计稿来演示转化为HTML页面的全部过程,PSD设计图如下

    设计图.png

    实现步骤如下:

    1、分析PSD设计稿,思考页面整体大致结构和如何切割图片

    根据PSD设计稿,可以看出登录页包括背景图和登陆框,其中登录框包括登录图标、输入框和登陆按钮。因此整体html结构即为一个div和其多个子元素div,子元素div用于添加输入框和按钮等;同时可以把设计稿分割成背景图、登录框背景图和登录按钮。

    2、创建项目,编写整体结构HTML代码和整体CSS

    使用前端开发工具或文本编辑器创建项目,项目名称login,包括css和img文件夹、index.html,其中css文件夹下包括login.css文件;ima用于存储切割的图片。现在在index.html文件中编写整体结构html代码,index.html代码如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    <!DOCTYPE html>
    <html>
     
        <head>
            <meta charset="utf-8">
            <title>登陆</title>
            <link rel="stylesheet" href="css/logindialog.css" />
        </head>
     
        <body>
            <!--登录框-->
            <div id="login">
                <div class="line">
                </div>
                <!--密码-->
                <div class="line">
                </div>
                <!--验证码-->
                <div class="line">
                </div>
                <!--登录按钮-->
                <div class="line">
                </div>
            </div>
        </body>
     
    </html>

    3、切割相应的图片,并导出。

    PSD文件包含很多层,我们要把这些层或合并的层组切出来,然后添加到网页上,使用CSS进行布局,使页面效果达到设计稿的效果。

    ①切割背景图

    首先使用PS打开PSD设计稿,隐藏除“bg和bg_texture”以外的所有图层,如下图所示:

    1.png

    然后使用“切片选择工具”选择背景图,点击“文件/存储为Web所用格式”或使用快捷键(ALT +shift+Ctrl + S),并选择图片保存格式、大小等信息,把背景图保存为文件名background.jpg。

    最后把background.jpg导入img文件夹。

    ②切割登录框背景图

    返回PS,隐藏除“loginbtn”以外的所有图层,如下图所示:

    2.png

    接着新建参考线,包围登录框背景图区域;然后使用切片工具,移动鼠标选中图片区域,并把图片存储为Web所用格式,图片名称为longinbg.png。这时一定要注意:图片预设格式要为PNG,因为该图片背景要透明,如果使用JPG格式,背景色为白色,实现不了想要的效果。

    3.png

    最后把longinbg.png导入img文件夹。

    ③切割登陆按钮

    返回PS,隐藏除“loginelem和loginbg”以外的所有图层,如下图所示:

    4.png

    接着新建参考线,包围登陆按钮;然后使用切片工具,移动鼠标选中图片区域,并把图片存储为Web所用格式,图片名称为btnlogin.png。这时一定要注意:图片预设格式要为PNG,因为该图片背景要透明,如果使用JPG格式,背景色为白色,实现不了想要的效果。

    5.png

    最后把btnlogin.png导入img文件夹。

    4、完善整体结构HTML代码和添加CSS样式

    给body添加背景图,并使其填充页面,CSS代码如下:

    1
    2
    3
    4
    body {
        backgroundurl(img/background.jpg) no-repeat 0 0;
        background-size100%;
    }

    给id为“#login”的div布局并添加背景图,CSS代码如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    #login {
            height203px;
        positionabsolute;
        marginauto;
        top0px;
        bottom0px;
        left0px;
        right0px;
        width285px;
        padding80px 70px 0 70px;
        backgroundurl(../img/loginbg.png) no-repeat 0 0;
    }

    给class为"line"的div布局,使在其中的输入框正确显示,CSS代码如下:

    1
    2
    3
    4
    5
    .line {
        width:100%
        height40px;
        line-height40px;
    }

    在class为“line”的div中分别添加用户名、密码和验证码输入框的HTML代码,并使用CSS布局,使其和设计稿效果一致。

    添加的HTML代码如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <div class="line">
        <!--用户名-->
        <label for="uname">用户名:</label>
        <input type="text" id="uname" value="admin" required="required" class="input"/>
        <select class="input">
            <option>@qq.com</option>
            <option>@163.com</option>
            <option>@126.com</option>
            <option>@gmail.com</option>
        </select>
    </div>
    <!--密码-->
    <div class="line">
        <label for="upwd">密码:</label>
        <input type="password" id="upwd" value="123444444" required="required" class="input" />
         
    </div>
    <!--验证码-->
    <div class="line">
        <label for="valid">验证码:</label>
        <input type="text" id="valid" value="1234" required="required" class="input" />
    </div>

    CSS代码如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    label,
    .input{
        height23px;
        line-height23px;
    }
     
    label {
        width70px;
        text-alignright;
        display: inline-block;
        *displayinline;
        /* IE6、7 block 元素 */
        *zoom: 1;
    }
     
    .input {
        bordernone;
        /*outline: none;*/
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        padding-left5px;
    }
     
    #uname {
        width100px;
    }
     
    #upwd {
        width200px;
    }
     
    #valid {
        width50px;
    }
    select{
        width95px;
    }

    在class为“line”的div中分别添加登录按钮的HTML代码,并使用CSS布局,使其和设计稿效果一致。

    HTML代码

    1
    2
    3
    4
    <!--登录按钮-->
    <div class="line center">
        <a id="loginbtn" href="#"></a>   
    </div>

    CSS代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    #loginbtn {
        width82px;
        height33px;
        backgroundurl(../img/btnlogin.png) no-repeat 0 0;
        display: inline-block;
        *displayinline;
        /* IE6、7 block 元素 */
        *zoom: 1;
    }
    .center{
        text-aligncenter;
        margin-top10px;
    }

    5、不断调试,调整细节,达到设计稿效果

    最终效果图如下:

    效果图.png



    参考链接:

    http://www.w3cfuns.com/article-609-1-1.html

    http://www.uimaker.com/plus/view.php?aid=3379

    展开全文
  • 答案:background-size: cover; <!DOCTYPE html> <html lang="en"> <title>Document body { background-image: url(images/2.jpg);

    答案:background-size: cover;


    例1:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            body {
                background-image: url(images/2.jpg);
                background-size: cover;
            }
        </style>
    </head>
    <body>
    
    </body>
    </html>

    例2:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            div {
                width: 300px;
                height: 300px;
                background-image: url(images/2.jpg);
                background-size: cover; 
            }
        </style>
    </head>
    <body>
        <div>哼哼哼</div>
    </body>
    </html>
    展开全文
  • HTML制作网页

    万次阅读 多人点赞 2018-07-01 16:28:04
    一、步骤1、HTML 1、新建文本文档 2、改后缀名.html 3、以记事本方式打开并编写代码 4、保存,关闭后,直接双击打开网页
  • #3使用html+css+js制作网页 制作登录网页

    万次阅读 多人点赞 2020-01-31 20:23:54
    #3使用html+css+js制作网页 制作登录网页 详细教程
  • 静态HTML个人主页学生网页作品作品介绍修改教程作品演示代码演示源码文件作品下载 作品介绍 大学生网页设计个人主页网站模板采用DIV CSS布局制作网页作品共4个页面,包括个人介绍(文字页面)、我的作品(图片列表...
  • 如何制作PC端Html网页

    千次阅读 2017-05-18 23:25:24
    如何制作PC端Html网页
  • 网页制作 网页下拉菜单HTML+CSS制作

    千次阅读 多人点赞 2020-06-02 18:29:56
    网页下拉菜单制作(图片如下)制作用到的images 二级菜单 一、 caidan.html 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>基于div+css技术的下拉...
  • html制作网页版简历

    万次阅读 多人点赞 2018-06-20 17:58:13
    今天给大家分享一个HTML网页布局,这里面都是用一些简单的代码,相当于基础代码却做出不一般的网页布局,里面包含了div布局,同时这里面还引用了css层次样式,因为引入这个的话做出来的网页比较好看,而且生动。...
  • 初学 HTML制作网页

    千次阅读 2015-12-27 14:42:32
    提到制作网页,大部分人会想到用Dreamweaver,其实记事本也很方便。、 用HTML编写简单网页 HTML:超文本标记语言 (xml的前身【可扩展的标记语言,标签可以自定义】) 标记语言:解释性语言。(由应用程序解释) ...
  • 制作开心网页游戏 HTML+CSS静态网页

    千次阅读 多人点赞 2020-11-18 23:04:58
    制作开心网页游戏 HTML+CSS静态网页 闲来无事,制作了一个开心网页游戏静态页面 非常适合前端初学者练手,快来试试吧! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">...
  • 咖啡网页设计作品网页制作介绍网页首页效果网页下载方式 网页制作介绍 咖啡主题大学生网页设计作品,共10个页面,无任何复杂技术及特效,页面宽度1200px,顶部导航使用CSS制作了鼠标经过白色效果制作很简单,页面配...
  • html制作个人简历网页

    千次阅读 多人点赞 2020-06-17 10:33:33
    以下是我用html的相关知识制作的个人简历网页,话不多说先看看最终效果: 如上所示项目一共分为5个部分,分别对应导航栏的5个内容。其中项目技能用的是echarts里的柱状图,作品展示用的是bootstrap里的轮播图,...
  • 如何制作一个HTML网页

    万次阅读 多人点赞 2018-12-27 12:15:53
    HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言,而是一种标记语言 (markup language) 标记语言是一套标记标签 (markup tag) HTML ...
  • 班级网页设计HTML静态网页设计作业使用dreamweaver制作,采用DIV+CSS布局,共5页,首页使用CSS排版比较丰富,色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度,主体内容区域宽度为学生网页作业标准的1024PX,...
  • 网页制作HTML代码全攻略

    万次阅读 多人点赞 2017-06-08 09:06:44
    网页制作HTML代码全攻略

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 147,195
精华内容 58,878
关键字:

如何制作html网页