用表格制作网页

news2024/11/25 12:48:52

 

 利用表格制作网页     

  实验目标

  该网页将利用设计页面的布局,制楚雄师院的页面简介。通过该种制作,我们可以体会到表格在布局设计中的实际运用,体会如何使用表格来控制页面中的元素对象,已达到自然,生动的配置构成元素的目的。

  实验过程

  《1》在dreamweaver中执行《文件》中的《新建》命令,创建一个HTML文档。然后在《文件》中保存该文档。然后在《文档》工具栏的《标题》中输入“师院首页”。然后单击《常用》工具栏的表格按钮,插入一个3行3列的表格。

<2>选中第2行表格的第2单元格。单击属性面板中的合并所选单元格按钮,将其合并。然后将指针置于第1行第1列单元格内在属性面板中将《宽》设为200,<高》设为30。

  《3》单击《常用》工具栏中的常用图像按钮,再打开的《选择图像源文件》对话框中选中一幅图片,单击《确定》按钮,为单元的插入一幅图片。

  《4》将鼠标指针移到第1行1列单元格内,在属性面板中将《宽》设为50,《高》设为30,单击《常用》工具栏中的图像按钮,打开《插入鼠标经过图像》对话框。

  《5》在打开的< 插入鼠标经过图像>对话框中,单击《原始图像》后面的《浏览》按钮.。在打开的对话框中选中一幅图片,单击确定按钮,在单击《鼠标经过图像》后面的《浏览》按钮,用同样的方法选定一幅图片。

  《6》设置完成后,单击《确定》按钮,然后同同第4,5步一样为第1行的第1,2列也分别设置鼠标经过图像。然后将鼠标指针置于第一行第三列的单元格内,在《属性》面板中,为《宽》设为100,《高》。设为50。为《背景颜色》设为#333cc。

  《7》将鼠标指针置于表格的第3行,按前面的方法,为第3行单元格也插入一幅图片。然后将鼠标指针置于表格的下一行,单击《常用》工具栏表格图标按钮,为文档在插入一个3行3列的表格。

  《8》将鼠标指针置于插入表格的第1行第1列中,在属性面板中将《宽》。设为120,然后将鼠标指针置于第1行第1列单元格内,按下Ctrl+Alt+t组合键,打开《表格》对话框。设置好后,单击《确定》按钮,给单元格插入嵌套表格。

  《9》选中插入的嵌套表格在属性面板中将《对齐》设置为剧中右对齐。然后将鼠标指针置于嵌套表格第一行中,按照前面的方法,为其插入一幅图片。同样的,为其第2,3,4,5列也分别插入图片。

  《10》在属性面板中,将第6列单元格的《高》设为50,再将鼠标指针置于第7列,为其插入一幅图片。单击《状态栏》中的《tatle》标签,选中第7步插入的3行3列的表格,在属性面板中,为《背景颜色》设置为#009966。

  《11》将鼠标指针置于7步插入表格的第2行2列中,在属性面板中,将《垂直》设置为顶端。打开《表格》对话框,其中的设置如图11所示。设置完后,单击《确定》按钮,为单元格插入嵌套。

  《12》在上一步插入表格的属性面板中,将对齐方式设为居中对齐,将鼠标置于该表格的第2行,按下ctrl+alt+I组合键,在打开的对话框中选择一幅图,单击确定,为单元格插入图片。在该单元格的属性面板中,单击居中对齐按钮,将图片居中。

  《13》将光标置于下1列单元格,输入文字。在网页中右击,在弹出的快捷键菜单中执行《CSS样式》的新建命令,弹出《新建CSS规则》对话框。按照设置后,单击《确定》按钮,弹出《X1的规则定义》对话框。

  《14》在《X1规则定义》对话框中,将《文字》设为宋体,《大小》设为12像素,,《样式》设为正常,<行高>设为26像素,其余不变.单击<确定>按钮,在编辑窗口选中输入的文字,右击,在弹出的快捷菜单中执行《CSS样式》的x1命令,为文字应用css样式。

  《15》将鼠标指针置于第7步插入的3行2列表格的下一行,然后按下ctrl+Alt+T组合键打开《表格》对话框,设置完毕后,单击《确定》按钮,为网页插入表格。

  《16》选中上一步插入的表格,在属性面板中,将《背景颜色》设为#99FF66。将鼠标指针设置于第1行单元格内,在属性面板中,将《水平》设为右对齐,然后为该单元格插入一幅图片。

  《17》将鼠标指针置于定2行单元格内,在属性面板中,将《格式》设为段落,《水平》设为右对齐,然后输入师院信息。在网页中右击,在弹出的快捷键菜单中执行《css样式》的《新建》命令弹出《新建css规则》对话框。

  《18》《新建css规则》对话框的设置如图18所示,设置好后,单击《确定》按钮。弹出《x2的规则定义》对话框,将《大小》设为19像素,《样式》设为正常,《行高》设为20像素,《颜色》设为,其余不变。设置完毕后,单击确定按钮。

  《19》在编辑窗口选中输入的文字,右击在弹出的快捷菜单中执行《css样式》的《x2》命令,为文字应用css样式。按下ctrl+s组合保存文件,按下F12键预览在IE中。

 什么是表格

  表格,是指按所需的内容项目画成格子,分别填写文字或数字的书面材料,便于统计查看。是人们表达解释事务性质所运用的数据传达形式,在经济领域或者统计活动中运用很是广泛。

  在Microsoft Office 中:

  表格:表格由一行或多行单元格组成,用于显示数字和其他项以便快速引用和分析。表格中的项被组织为行和列。

  表格由行,列,单元格三个部分组成。

  在现实生活中:

  表格应用于各种软件中,有表格应用软件也有表格控件,典型的像Office word,excel, 表格是最常用的数据处理方式之一,主要用于输入、输出、显示、处理和打印数据,可以制作各种复杂的表格文档,甚至能帮助用户进行复杂的统计运算和图表化展示等。表格控件还可常用于数据库中数据的呈现和编辑、数据录入界面设计、数据交换(如与Excel交换数据)、数据报表及分发等。比如Spread,ComponentOne的FlexGrid。而随着互联网时代的发展,现在还能在网上做表格,简称“网表”或“在线表格”。

  表格的HTML基本语法

<table>...</table> - 定义表格

<tr> - 定义表行

<th> - 定义表头

<td> - 定义表元(表格的具体数据)

  什么是网页

  网页是一个文件,通常是HTML格式(文件扩展名为.html或.htm)。网页通常用图像档来提供图画。网页通常要透过网页浏览器来阅读。根据W3C对于WEB PAGE的定义,网页是一个信息的集合,其内容包含一个或多个网络资源的信息,同时预期使其成为单一个URI。进一步说,一个网页其包含一个或多个嵌入于网页中的网络资源使其成为单一个URI档案(HTML),而该URI并 不再嵌入于其他档案之中。

  网页是构成网站的基本元素,是承载各种网站应用的平台。通俗地说,您的网站就是由网页组成的,如果您只有域名和虚拟主机而没有制作任何网页的话,您的客户仍旧无法访问您的网站。

  网页是一个文件,他存放在世界某个角落的某一部计算机中,而这部计算机必须是与互联网相连的。网页经由网址(URL)来识别与存取,是万维网中的一“页”,是超文本标记语言格式(标准通用标记语言的一个应用,文件扩展名为.html或.htm)。网页通常用图像档来提供图画。网页要透过网页浏览器来阅读。

  静态网页

  静态网页,其内容是预先确定的,并存储在Web服务器或者本地计算机/服务器之上。

  特点:

1,制作速度快,成本低

2,模板一旦确定下来,不容易修改,更新比较费时费事

3,常用于制作一些固定板式的页面。

4,通常用于文本和图像组成,常用于子页面的内容介绍。

  动态网页

  动态网页,是取决于由用户提供的功能,并根据存储在数据库中的网站上的数据中创建的页面。

  储存

  当要将网页存入自己的电脑内,网页浏览器通常提供以下的选择:

  只储存网页的文字部分完装封装,即连同该网页(HTML)所要用到的图像、Applet和JavaScript等文件也一并封装储存只有HTML,不作任何改动;若果网页内的连结是相对连结,可能会令图片消失只有HTML,但将网页内连结到的文件改成绝对定义有些网页浏览器容许在打印网页前预览,并可选择印底色与否,甚至放大、缩小。

学习css的6个方法

  快速学习css的6个方法

1、掌握HTML

  要想学会CSS,首先必须掌握HTML,如果你没有学会HTML,那么你将无法有效使用CSS,因为他们是相铺相成,缺少了HTML的CSS是毫无意义的。HTML的学习是非常的重要,以至于你需要花费一半的学习时间在里面。

2、CSS概念

  在学习CSS之前,首先要了解CSS是什么,为什么CSS是如此重要,在了解CSS基本概念后,你将能理解到网页设计中CSS扮演着什么角色。

3、CSS基本语法

  所谓无规矩不成方圆,CSS基本语法的分为3部分:CSS选择器、CSS选择器声明、CSS的继承,这3部分是CSS的精髓,始终贯穿在编写CSS之中。在CSS语法学习中,我们会面临同一种结果却有着多种表达方式,这时要根据页面的需要采取合适的表达方式来实现。当我们对CSS有所理解时可以使用CSS缩写,这样可以精简CSS代码,降低CSS文件大小,提高网页打开速度,同时能使代码更加通俗易懂,

4、CSS兼容性

  由于每个浏览器都有其默认的CSS,所以不同的浏览器下有着不同的显示效果。在我们开始编写CSS代码时,对CSS没有深入掌握的情况下,难免会犯下对浏览器兼容不一致的问题,这要求我们在编写CSS代码时,最好在两个不同的浏览器上进行预览,以便及时调整各个环节,通过这样不断的预览测试,发现然后解决问题来快速的掌握CSS在不同浏览器下的兼容性。

5、CSS工具

  好的CSS工具不仅有助于帮助你学习CSS,而且还可以帮助你提高编写CSS代码的效率,当然你也可以使用Dreamweaver或者使用纯文本编辑器如记事本来编写,这取决你的习惯,正所谓萝卜白菜各有所爱。

6、利用各种渠道学习

  学习CSS不要一味的埋头苦干,多去CSS相关的论坛和博客逛逛,要做到不耻下问,多听听前辈的讲解。还要多参考其他著名网站的CSS代码,毕竟都是些CSS高手写的代码,代表CSS代码的规范和一些前沿技术,这样对我们快速掌握各种CSS技巧并运用到实际编写中,是有很大好处的。

  学习CSS是一个循环渐进的过程,面对学习CSS过程中可能会遇到这样那样的问题,所以心理要有准备,碰到难点时多查,多问,多实践才能发现和解决问题。有人说CSS很难,有人说CSS很容易,难与容易取决于自身的学习态度,因为学习态度决定一切

  如何深入学习css

  学习CSS有了一定基础后,有的人会觉得好象没有什么学的.因为知道一些基本的理论性的东西.CSS说它容易是因为它的知识点有限.说它难学就在于各浏览器对CSS的支持程度不同.

  如何深入学习我给出以下几点见意:

1.去找机会多做一些项目,公司的,或是外包的,哪怕你没有人民币挣也要做.

  这一条并不是多做就会好有的效果,有的人做的项目不少总是按着老的思路去做,做了很多,水平也不会有太大的提高,提高的也只能是熟练度.每一次在做的过程中要学会去思考,看看我们有没有更优化的的方法去实现同一个效果.多说一个题外话:有一个错误的观点认为HACK是不好的.想法也是错的.我们在做页面时原则是不使用HACK,但是如果在特别需求上有时还是要使用,前提是你不用HACK不行,一些人的能力有限,所以他没有办法了就用HACK,很多时候可以换个思路就可以不用HACK.多说了这一点儿.要做完项目时遇到了新的问题,一定要做笔记下来,以后忘了也可以知道在哪能查到这个问题.

2.多去BBS,这样可以多看看一些别人项目中遇到的问题.这是一个日积月累的过程,你看的东西多了.掌握的多了,因为你做的项目是有限的,不可能把所有的问题都遇到,别人遇到的你去思考,看如何解决.或看其它人如何解决这个问题的.当你在项目中遇到这个问题,你就可以不用在多费时间就几钟的事了.有经验与没有经验的区别也就是这一点,有经验的人不是天才,是他做的东西多了,一看就明白知道如何解决.而没有经验的人会现想这个问题如何解决,那可以要花好多时间的.

3.多看一些国外的好的CSS网站,CSS代码是公开的,可以很方便的看到.分析他们的页面和CSS.从好的网站你会学到很多东西,和你已有的一对比,你会发现他们的思路要比你开阔的多,也优秀的多.

  在学的过程中都会经历过几个踏步不前的状态,每提高到了一个小阶段会觉得没有什么学的,这种情况是正常的.是因为你的学习思路受限,但在这个不前的这个时期过了之后你一定会发现你要去学的东西的,然后你又会有一个新的止升阶段.

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/740675.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Linux无法访问github解决方案【修改/etc/hosts文件,加上GitHub网站的IP地址】

ChatGPT神中神&#xff01; 省流&#xff1a;修改/etc/hosts文件&#xff0c;加上GitHub网站的IP地址。 "Failed connect to github.com:443; 拒绝连接" 错误通常表示你的系统无法建立与GitHub的安全连接。这可能是由于网络问题、防火墙设置或代理配置等原因引起的。…

unbuntu 22.04 安装和卸载企业微信

every blog every motto: You can do more than you think. https://blog.csdn.net/weixin_39190382?typeblog 0. 前言 记录有关在ubuntu22.04上安装和卸载企业微信 以及企业微信无法打开问题处理 1. 正文 1.1 安装 下载wine环境 http://archive.ubuntukylin.com/softwar…

apache hudi 初见

git clone https://gitee.com/apache/Hudi.git docker pull yml 文件里面的镜像 然后 docker-compose -f docker-compose_hadoop284_hive233_spark244.yml -p 6p6 up -d 然后就是 在这里插入代码片# Licensed to the Apache Software Foundation (ASF) under one or more …

MySQL之InnoDB存储结构 | 京东物流技术团队

1 InnoDB存储引擎 InnoDB存储引擎最早由Innobase Oy公司开发&#xff08;属第三方存储引擎&#xff09;。从MySQL 5.5版本开始作为表的默认存储引擎。该存储引擎是第一个完整支持ACID事务的MySQL存储引擎&#xff0c;特点是行锁设计、支持MVCC、支持外键、提供一致性非锁定读&…

机器学习实战 | 股票价格预测项目(深度学习初级)

目录 简介技术流程1. 载入依赖包2. 读取数据集3. 从数据集中分析价格4. 对数据排序5. 数据标准化6. 创建、训练和保存LSTM网络7. 使用LSTM模型进行股票价格预测8. 可视化预测和实际结果 完整程序 简介 准备写个系列博客介绍机器学习实战中的部分公开项目。首先从初级项目开始。…

面试题之spring源码

IOC的底层原理 &#xff1a; Spring是如何循环依赖的。&#xff08;三级缓存&#xff0c;提前曝光&#xff09;&#xff1a; 循环依赖的定义:循环依赖就是循环引用&#xff0c;也就是两个或两个以上bean对象互相持有对方&#xff0c;最终形成闭环&#xff0c;比如A依赖B,B依赖C…

文件夹加密软件怎么选?文件夹加密软件盘点

文件夹是电脑储存数据的重要工具&#xff0c;那么该如何保护文件夹的数据安全呢&#xff1f;使用合适的文件夹加密软件可能是最简单的方法。那么文件夹加密软件该怎么选呢&#xff1f; 文件夹加密超级大师 文件夹加密超级大师可以说是最全能的文件夹加密软件&#xff0c;它拥有…

自己编写chrome插件

1.首先你需要一个menifest.json文件 {"manifest_version": 3,"name": "My Extension","version": "2.0","action": {"default_popup": "popup.html","default_icon": "icon.…

winform弹出消息自动消失

winform弹出消息自动消失 弹出消息后&#xff0c;在指定时间毫秒后消失.消息中包含异常消息&#xff0c;自动一直展示&#xff0c;点击关闭显示&#xff1b; 效果如图 using System; using System.Collections.Generic; using System.Text; using System.Threading.Tasks;usi…

保姆级系列教程-玩转Fiddler抓包教程(1)-HTTP和HTTPS基础知识

1.简介 有的小伙伴或者童鞋们可能会好奇地问&#xff0c;不是讲解和分享抓包工具了怎么这里开始讲解HTTP和HTTPS协议了。这是因为你对HTTP协议越了解&#xff0c;你就能越掌握Fiddler的使用方法&#xff0c;反过来你越使用Fiddler&#xff0c;就越能帮助你了解HTTP协议。 Fid…

全网最全,项目管理工具大合集!

早上好&#xff0c;我是老原。 很久没给大家更新工具&#xff0c;本以为之前更新的也够大家用了&#xff0c;没想到还是有很多小友来私信老原好用工具。 关注我比较久的粉丝都知道&#xff0c;我提倡的工具在精不在多&#xff0c;更多的把精力放在自身上&#xff0c;还有啥不…

Vue使用百度地图API详细教程

Vue使用百度地图详细教程 先提供几个文档 Vue-Baidu-map文档&#xff1a;https://dafrok.github.io/vue-baidu-map/#/zh/index 百度地图JavaScript文档&#xff1a;https://lbsyun.baidu.com/index.php?titlejspopularGL 1、申请百度API密钥 控制台->应用管理->我的应…

博途字符串和FIFO编程应用(SCL源代码)

FIFO的其它介绍请参看下面文章链接: PLC堆栈(FIFO)操作之栈级联_三菱plc控制系统的堆栈的工作原理_RXXW_Dor的博客-CSDN博客这篇博文主要讲下各种缓存栈的级联,提供一个分析问题的扩展思路,这个级联什么时候适合在项目里使用需要具体分析。级联实现数据队列的一级级递推传送…

Redis 安装

目录 1、准备安装环境 2、上传安装文件 3、解压安装文件 4、进入安装目录 5、运行编译命令 6、前台启动 ​编辑7、后台启动 8、验证服务 9、关闭服务 10、开启启动 1、准备安装环境 由于 Redis 是基于 C 语言编写的&#xff0c;因此首先需要安装 Redis 所需要的依赖…

Python(一):为什么我们要学习Python?

❤️ 专栏简介&#xff1a;本专栏记录了我个人从零开始学习Python编程的过程。在这个专栏中&#xff0c;我将分享我在学习Python的过程中的学习笔记、学习路线以及各个知识点。 ☀️ 专栏适用人群 &#xff1a;本专栏适用于希望学习Python编程的初学者和有一定编程基础的人。无…

星辰天合受邀参加 2023 全球数字经济大会

7 月 4 日至 7 日&#xff0c;以“数据驱动发展&#xff0c;智能引领未来”为主题的2023全球数字经济大会在北京隆重举办。作为国内技术领先的数据基础设施提供商&#xff0c;星辰天合以北京优秀信创企业代表的身份&#xff0c;受北京信息化协会邀请&#xff0c;参加了 2023 全…

ICC2:copy block方法

open_lib new.nlib open_lib old_lib copy_block -from_block old_block -to_block new.nlib:old_block save_lib new.nlib close_lib 如果是从同一个lib下的block copy到同个lib里&#xff0c;那就open_lib后直接copy就好了&#xff0c;操作时用current_block new_name_b…

多元回归预测 | Matlab基于高斯过程回归(GPR)的数据回归预测,matlab代码,多变量输入模型

文章目录 效果一览文章概述部分源码参考资料效果一览 文章概述 多元回归预测 | Matlab基于高斯过程回归(GPR)的数据回归预测,matlab代码,多变量输入模型 评价指标包括:MAE、RMSE和R2等,代码质量极高,方便学习和替换数据。要求2018版本及以上。 部分源码

STM32 Proteus仿真LCD12864俄罗斯方块-FZ0063

STM32 Proteus仿真LCD12864俄罗斯方块-FZ0063 Proteus仿真小实验&#xff1a; STM32 Proteus仿真LCD12864俄罗斯方块-FZ0063 功能&#xff1a; 硬件组成&#xff1a;STM32F103R6单片机 LCD12864显示器多个按键 1.标准俄罗斯方块经典游戏玩法&#xff0c;带计时&#xff0c…

计数排序 (Counting Sort)_20230709

计数排序(Counting Sort) 前言 计数排序的对象一般为分布在[0-k]范围内的非负整数&#xff0c;计数器类似哈希函数的线性映射&#xff0c;它确定了数值本身和它在序列中的总数量之间的基本关系。它的本质是计算某个数在临时序列中&#xff08;原序列大小相同&#xff0c;但下…