精华内容
下载资源
问答
  • 本静态HTML网页作业成品设计简单,使用dreamweaver采用表格布局制作,网页中的图片使用PS裁剪制作,顶部导航使用CSS设置了透明底色效果。共3个页面,首页、文字页面、视频页面。视频采用VIDEO标签嵌入视频,代码简单...

    网页技术点

    表格table布局、透明底色、H5视频标签

    作品介绍

    本静态HTML网页作业成品设计简单,使用dreamweaver采用表格布局制作,网页中的图片使用PS裁剪制作,顶部导航使用CSS设置了透明底色效果。共3个页面,首页、文字页面、视频页面。视频采用VIDEO标签嵌入视频,代码简单,适合大一网页设计作业或对作品技术水平要求低的。

    制作代码演示

    导航代码

    <table width="1000" height="500" border="0" id="nav">
      <tr id="menu">
        <td><a href="">网站首页</a></td>
        <td><a href="">菜品介绍</a></td>
        <td><a href="">视频教学</a></td>
      </tr>
      <tr>
        <td height="430px"></td>
        <td></td>
        <td></td>
      </tr>
    </table>
    

    图片列表

    <table width="1000"  border="0" id="chuan">
      <tr>
        <td align="center"><a href="jieshao.html"><img src="image/szy1.jpg" width="495" height="260" /></a></td>
        <td align="center"><a href="shipin.html" ><img src="image/szy2.jpg" width="495" height="260" /></a></td>
      </tr>
        <tr>
        <td align="center"><a href="jieshao.html">菜品介绍</a></td>
        <td align="center"><a href="shipin.html">视频教学</a></td>
      </tr>
    </table>
    

    效果演示

    川菜网页制作

    成品地址

    stu-works.com/html/meishi/245.html

    展开全文
  • 使用dreamweaver制作采用table表格布局网页背景颜色、底部版权区域 网页制作说明 本学生网页设计作业作品使用dreamweaver采用表格table布局制作,网页设计成品共6页,大小为5.3M,题材为刀剑神域动漫。 整体页面...

    知识点介绍

    使用dreamweaver制作采用table表格布局、网页背景颜色、底部版权区域

    网页制作说明

    本学生网页设计作业作品使用dreamweaver采用表格table布局制作,网页设计成品共6页,大小为5.3M,题材为刀剑神域动漫。
    整体页面宽度为1200PX,页面精美,但技术简单,经典上中下结构,制作了底部版权区。

    网页代码演示

    导航代码

    <table width="1200" border="0" cellspacing="0" id="menu" >
      <tr valign="top">
        <td><a href="">网站首页</a></td>
        <td><a href="">作品背景</a></td>
        <td><a href="">故事介绍</a></td>
        <td><a href="">登场角色</a></td>
        <td><a href="">关联作品</a></td>
    	<td><a href="">精美图册</a></td>
      </tr>
    </table>
    

    正文代码

    <table width="1200" border="0" id="zheng">
      <tr>
        <td width="330" rowspan="2"><img src="images/sy.jpg" width="314"/></td>
        <td height="60"><p>刀剑神域是由川原砾著作,abec负责插画,电击文库所属的轻小说,也是作者继《加速世界》后又一文库化的作品。繁体中文版由台湾角川发行,简体中文版由天闻角川发行,并授权爱奇艺轻小说、SF轻小说、咪咕阅读在其平台上发布电子版。</p></td>
      </tr>
      <tr>
        <td><table width="840" border="0" id="jj">
      <tr>
        <td width="100">中文名</td>
        <td width="300">刀剑神域</td>
        <td width="100">原版名称</td>
        <td>ソードアート・オンライン</td>
      </tr>
      <tr>
        <td width="100">出版社</td>
        <td width="300">ASCII Media Works</td>
        <td width="100">所属文库</td>
        <td>电击文库</td>
      </tr>
      <tr>
        <td width="100">出版期间</td>
        <td width="300">2009年04月10日—未完结</td>
        <td width="100">刊行册数</td>
        <td>22卷(未完结)</td>
      </tr>
      <tr>
        <td width="100">作    者</td>
        <td width="300">川原砾</td>
        <td width="100">插    画</td>
        <td>abec</td>
      </tr>
      <tr>
        <td width="100">译    者</td>
        <td colspan="4">周庭旭(第1卷+3-18卷)(中国台湾)、林星宇(第2卷)(中国台湾)、幽远(10-20卷)(中国大陆)、陈定刚(第21卷)(中国大陆)</td>
      </tr>
    </table>
    </td>
      </tr>
    </table>
    

    网页效果预览

    动漫网页设计制作

    成品地址

    stu-works.com/html/dongman/209.html

    展开全文
  • 大家好,本篇文章分享会员账号登录的布局样式。效果图:会员账号登录布局样式HTML代码:账号登录用户登录成功后,该用户帐号和密码由用户负责保管,用户须保证登录信息的真实性、合法性、有效性。使用 账号登录,即...

    大家好,本篇文章分享会员账号登录的布局样式。

    效果图:

    df5a68818d3e406b16502f0d2587c243.png

    会员账号登录布局样式

    HTML代码:

    账号登录

    用户登录成功后,该用户帐号和密码由用户负责保管,用户须保证登录信息的真实性、合法性、有效性。

    使用 账号登录,即代表同意《用户登录协议》。

    立即登录

    CSS代码分析:

    使用flex水平垂直居中

    .tpt-1446 { display: flex; align-items: center; justify-content: center; height: 100vh}

    使用flex布局,固定高度和宽度

    .tpt-wp { display: flex; width: 900px; height: 600px}

    分为左右布局,左边配置图片,右边使用flex水平垂直居中

    .tpt-left { width: 400px}.tpt-right { display: flex; align-items: center; justify-content: center; background: #fff; width: 500px}

    配置表单的标题简介的字体颜色,字体大小和行高

    .tpt-form h3 { color: #79b8c1; font-size: 34px; line-height: 44px; font-weight: 400; margin-bottom: 20px}.tpt-form p { color: #999; font-size: 12px; line-height: 20px; margin-bottom: 20px}

    配置表单文本输入框的样式

    .tpt-form input { box-sizing: border-box; width: 100%; height: 38px; line-height: 38px; padding: 0 10px; background: #fff; border: 1px solid #eee; color: #333; font-size: 14px; border-radius: 2px; margin-bottom: 20px}

    配置表单提交按钮的样式

    .tpt-form button { width: 100%; height: 38px; line-height: 38px; background: #79b8c1; border: 0; color: #fff; font-size: 14px; border-radius: 2px; cursor: pointer}

    注:以上部分CSS代码只是帮助大家分析结构,是需要清除所有标签的默认样式。

    有问题可以留言,大家一起学习HTML+CSS网页设计。

    展开全文
  • 第十讲 利用表格规划网页布局

    千次阅读 2005-03-05 20:58:00
    我们在设计一个图文混排的网页或分栏的文字网页时,常常会感到文字及图片的定位不听使唤。...实际上FrontPage提供的各网页模板,就是用表格来组织的。一、几种典型的网页布局 如果希望自己制作的网页
    我们在设计一个图文混排的网页或分栏的文字网页时,常常会感到文字及图片的定位不听使唤。利用表格的帮助,可以将它们按我们的需要放到任何位置。
      利用表格组织网页的内容,可以使网页更整洁美观。对于图文混排的网页,利用表格可以大大提高网页制作的效率。在隐藏表格框线后,浏览者几乎感受不到表格的存在。实际上FrontPage提供的各网页模板,就是用表格来组织的。
    一、几种典型的网页布局
      如果希望自己制作的网页能够有好的浏览量,网页的布局非常重要。一个简洁明快的网页往往给人印象深刻,更容易吸引浏览者浏览。
      商业网站一般都有比较统一的布局设计,而个人主页由于内容专一,不可能像商业网站那样内容丰富,信息量大。但恰恰因为这个原因,个人主页的形式更灵活,更容易创造出美感。
      我们先来看一下三个风格迥异的网站,注意观察它们的布局:
      1、门户网站的主页

      上图是我国主要的门户网站新浪网的主页,我们可以发现主页的内容很丰富,栏目众多,色彩鲜艳并有许多大幅广告和浮动广告栏。
      2、专业网站
      下图是宁波市计算机学会的主页。与新浪网相比,它的内容比较专一,栏目也不多。不像门户网站给人一种繁杂的感觉。一般的企业网站也都设计成这种风格。

      3、个人主页
      下图是一个个人主页,它看起来更简单,但更容易给人清新的感觉。

      三个主页三种风格,没有优劣之分,它们的风格与网站的性质有着密切的联系。新浪网是很明显的商业门户网站,必须采用鲜艳的色彩吸引浏览者的注意,而广告是网站收入的重要来源,所以各种形式的广告是少不了的。计算机学会网站是一个专业团体网站,它只有特定的用户,所以不必借各种手段吸引浏览者,因为关心学会的用户自然会来,不需要的用户,即使你做得再漂亮也不会吸引他们。而“退休生活”显然更具备个性色彩,首页只是一页封面,具体内容有待“进入”。当然也有不少个人主页是开门见山的。多数个人主页网页还有与其它网站交换超级链接的“友情链接”,通过这种形式,个人主页之间可以互相介绍,提高主页的浏览量。
    二、利用表格规划网页的布局
      由于FrontPage对于图片的精确定位仍存在缺陷,而图文混排的效果也不理想。而且在文字编排中分栏也比较困难,所以网页多采用表格来设计网页的布局。
      下图就是在网页中使用表格规划网页布局的一个例子。网页分成上下两区,中间用水平线隔开。上面的标题栏左边有一幅被称为LOGO(图标)的图片,右边则插入一幅小图片。由于采用了表格区隔,所以两幅图片和标题的定位关系非常简单。下面的主页面分左右二栏,左边是目录区,右边的空白区域可以放一个网页的主要内容。

      由于采用了隐藏表格框线的方法,所以在浏览器中丝毫看不到表格的影子。


    在网页中隐藏了表格

      下面介绍一下这个网页的制作步骤:
      1)在FrontPage窗口中打开一个网站(本例中是“F:/myrice”),并新建一个新网页。
      2)在新网页中创建一个3×3的表格,右击表格,在弹出的快捷菜单中选择“表格属性”命令,打开“表格属性”对话框。在对话框中将“边框”的“粗细”设为“0”。
      3)拖动表格中间的二根列线,使中间那一列最宽,边上二列宽度够放得下图片就行。
      4)选中第二行的三个单元格,单击“表格”工具栏上的“合并单元格”按钮,使这一行变成一个单元格;再将第三行右边的的二个单元格合并成一个大单元格。
      5)在首行的左右二边的小单元格中各插入对应的图片;在第二行中插入一水平线并设置好粗细和颜色。
      6)输入所有文字,并设置好字体、字号和颜色,在热点文字上创建好超链接。

      7)将网页保存为“index.htm”文件
    三、多表格与表格的嵌套
      1、用多表格规划网页
      表格在浏览器中显示时有一个缺点:只有表格中所有的内容都下载以后,表格里的内容才会显示,而不会下载一个显示一个。这样,如果表格里的内容太多而且网速较慢的话,浏览者就要等待很长的时间才能看到网页的内容。这显然给浏览者留下一种网页太慢的感觉,从而影响网页的浏览率。
      我们可以采用多表格的方法来解决这个问题,即:每个表格的内容都不多,哪个表格的内容先下载,哪个表格就显示,不至于让浏览者对着空白的屏幕发呆。
      因此前例中用一个3×3的表格规划的网页可以用三个表格(从上到下分别为1×3、1×1和1×2)来规划,大家可以试着自己做一做。
      2、表格的嵌套
      所谓表格的嵌套就是在一个表格的单元格中再画一个表格,在网页文件中经常会用到。它可以解决单层表格无法解决的困难。
      一个表格各行中的对应列线都应该在同一位置上,不能像下图那样让不同行的列线位置不一样。使用表格嵌套就可解决这个问题。

      
      

      【例】利用表格嵌套将前例主页的目录栏做成下图所示的卡片式按钮菜单形式:

      该网页的制作步骤:
      1)在FrontPage窗口中打开前例的“index.htm”文件。
      2)将表格的“单元格边距”、“单元格间距”和“边框”的“粗细”都设为“0”。
      3)将表格第二行的一水平线删除,并在其中插入一个1×12的第二层表格,该表格的“单元格边距”、“单元格间距”和“边框”的“粗细”也都设为“0”。
      4)第二层表格的12个单元格按每三个单元格组成一个按钮,总共可分四个按钮。移动列线,使每个按钮中间那个单元格宽度约为两边的单元格宽度的3到4倍。
      5)将第一个按钮的三个单元格和第一层表格的第三行的两个单元格设成同一个背景色;其它几个按钮设成另一背景色。
      6)在每个按钮左边的单元格插入一幅带弧线(270°~360°)的小GIF图片,在按钮右边的单元格插入一幅带弧线(0°~90°)的小GIF图片。这两个单元格属性的“垂直对齐方式”都设“顶边对齐”,右边单元格的“水平对齐方式”设为“右对齐”。

      7)输入所有文字,并设置好字体、字号和颜色,在热点文字上创建好超链接。最后在FrontPage窗口中的普通视图效果如下图:

      而浏览器中预览则看不见表格边框虚线。

      关于网页规划,最后要说明一点:为保持网站的统一协调性,各主要的索引网页在色调上应保持一致,最好顶端栏和底部栏都采用同样的格式。

    【练一练】
      利用表格规划网页“index.htm”,使网页看起来更整齐。同时将其他网页也进行规划,并与网页“index.htm”保持一致。

    展开全文
  • 网页设计模板

    2012-11-29 16:11:58
    表格布局网页,网页测试作业,大众布局,使用frontpage操作
  • 电影学生网页设计作品使用DIV CSS布局制作,包含影片信息、剧情简介、角色介绍、幕后制作、观影评价 5个页面,整个作品比较完善,细节处理到位,静态HTML网页基础水平制作。 整体制作了页面背景图片和背景颜色,布局...
  • 网页制作案例教程第2版第1章网站与网页概述第2章HTML5入门第3章网页基本编辑第4章多媒体与超链接第5章表格与嵌入式框架第6章CSS概述第7章DIV+CSS网页布局第8章模板和库第9章 行为第10章表单第11章图像处理工具Photo...
  • 实验六 网页布局

    2012-09-29 13:54:15
    1、表格布局 视频地址:http://www.51zxw.net/show.aspx?id=16494&cid=321 2、div+css布局 (1)布局实现下图效果 下图网页效果为上图布局的使用 (2)教材综合实训部分布局 div+css网站模板下载:...
  • 这是一个简单网页,适合初学者。里面主要用到了表格布局、文字浮动、图片插入、背景设置、颜色搭配等
  • 网页作品介绍:采用Dreamweaver基础学生水平制作,使用表格table布局制作,文学诗词类题材,共6页,网页有有背景音乐,表单功能。
  • 大学生个人主页网页设计制作作品介绍截图演示代码演示作品来源 ...子页面多种布局,兴趣爱好内容使用图片列表布局,成绩页面插入了表格,联系我们使用图片对齐方式设置了左对齐。 网页作品技术方面:
  • 2、插入一个表格(菜单栏中选择插入,再找到表格),表格里的布局自己根据需要设置,在这里我设置为行数为5,列为1,表格宽度为1000像素。插入表格后,选中整个表格,选中后表框会加黑加粗,在下方设置为居中对齐。3...
  • 大学生个人主页网页设计作品下载作品介绍截图演示代码演示下载链接更多作品 ...子页面多种布局,兴趣爱好内容使用图片列表布局,成绩页面插入了表格,联系我们使用图片对齐方式设置了左对齐。 网页
  • 主讲王兆华 主要内容 1网页整体设计 2网页布局 3文本编辑 4设置超级链接 5图像编辑 6使用表格 7使用层对象 8框架设计 9CSS样式表 10模板和库项目 第一节 框架设计主要内容 一什么是框架网页 一什么是框架网页 一什么...
  • 全文共3787字,预计学习时长8分钟制作登陆引导页的模板和教程非常少,而且大多数都过于复杂或是添加了太多设计(如多个页面和表格等),但多数情况下一些非常简洁的设计就足矣。本文将介绍在不用老式CSS库(如 ...
  • 404错误单页面学生网页设计成品错误页404网页制作作业模板:dreamweaver表格布局,顶部插入LOGO,中间背景大图,底部版权信息,加入返回首页按钮链接的百度,十分基础简单,就一页。
  • 9.1 使用布局模式对页进行布局 9.2 AP元素 9.3 框架 9.4 样式表 9.5 模板 ; 创建页布局的一种常用的方法是使用HTML表格对元素进行定位但是使用表格进行布局不太方便因为最初创建表格是为了显示表格数据而不是用于对...
  • 13.1 资源 13.1案例1设计美眉相册 13.1 资源 步骤1创建页面如图1310 13.1 资源 步骤2设计表格布局如图1311 13.1 资源 步骤3从资源库中插入图片如图1312 13.1 资源 步骤4继续插入图片完成网页如图1313 13.2模板 当...
  • 网页设计案例教程CS3

    2010-11-27 16:31:16
    基本涵盖了网页设计与网站建设的方方面面,包括网页设计与基础知识、表格排版布局网页网页模板的创建、css样式表的运用,使用行为和javascript添加网页特效、网站logo和bannner的设计,留言板系统的制作、会员注册...
  • 网页设计与制作

    千次阅读 2019-03-21 17:15:16
    表格 AP Div ↑ ↑ 网页布局技术 →模板、库 ↓ ↓ ...
  • 网页编辑器绿色版

    2015-06-29 21:52:18
    布局表格和单元格 使用布局表格和单元格为网页内容创建框架。可以自动创建专业的图形效果(如圆角和阴影)。布局单元格可以包含文字、图像、Web 部件、基于 Macromedia Flash 的内容以及其他元素等。
  • 使学生掌握网页网站的基本概念,了解网站的建设和维护,...课程的主要学习任务,包括:网站与网页基础、HTML5基础、网页基本编辑、多媒体与超链接、表格与嵌入式框架、CSS基础、DIV+CSS网页布局模板和库、行为等。
  • joomla模板教程

    2010-12-03 22:07:35
    如何使用CSS代替表格来创建一个源定3栏的布局 -默认的joolma CSS 介绍基本的CSS样式,应该与joomla一起使用,还有被joomla core使用的类型预设名单。 -模块 如何放置,包含圆角新技术的类型模块。 -菜单 一个简单的...
  • 很好的静态网页,可做模板,用到了表格和css布局技术。
  • 实验九 模板与库使用

    2012-10-22 13:40:51
    一、模板的使用 1、新建网页 2、创建模板 ... 5、对上次网页布局部分div+css模板就行模板应用,建立系统的网站 二、库的使用 1、新建库文件 2、文件中添加表格等页面信息 3、网页中应用库...

空空如也

空空如也

1 2 3 4 5 ... 10
收藏数 183
精华内容 73
关键字:

表格布局网页模板