ᠰᠦᠯᠵᠢᠶ᠎ᠡ ᠬᠢᠬᠦ ᠮᠡᠷᠭᠡᠵᠢᠯ ᠤᠨ ᠦᠨᠳᠦᠰᠦᠨ ᠮᠡᠳᠡᠯᠭᠡ html教程-网页排版.pptx

第一章 网页设计与网站建设的基础知识 第二章 HTML超文本标记语言 第三章 网页设计工具Dreamweaver 第四章 CSS层叠样式表 第五章 JavaScript脚本编程,网页排版,附加,主要内容,,,,,,,,,网页布局结构,,表格布局,,框架布局,,,,,使用层,,页面布局,网页布局的效果直接影响到网页设计的质量，在完成网站的规划后，必须要事先做好布局规划。,★ 页面版式草图设计,★ 布局方案的细化,★ 布局工具的选择,常见的版面布局形式,“厂”字型布局及实例,在页面顶部为“横条网站标志+广告条”，下方左面为导航栏，右面显内容,常见的版面布局形式,“国”字型布局及实例,在页面的上方和下方各有一个广告条，左侧是导航栏，右侧放置“友情链接”等内容，中间是主要内容的网页，这种布局的优点是充分利用版面，信息量大，缺点是页面拥挤，不够灵活,常见的版面布局形式,“三”字型布局及实例,一种简洁明快的网页布局，在国外用的比较多，国内比较少见。这种布局的特点是在页面上由横向两条色块将网页整体分割为3部分，色块中大多放置广告条与更新和版权提示。,常见的版面布局形式,“框架”型布局及实例,采用框架布局结构，常见的有左右框架型、上下框架型和综合框架型。由于兼容性和美观等因素，这种布局目前专业设计人员采用的已不多，不过在一些大型论坛上还是比较受青睐的，有些企业网站也有应用。,常见的版面布局形式,“封面”型布局及实例,常见的版面布局形式,“Flash”型布局及实例,排版趋势,分割屏幕 用垂直分隔线来分割屏幕,排版趋势,分割屏幕,排版趋势,分割屏幕,排版趋势,去界面化,把页头和页尾的概念统统去掉了。反而更像一个交互式杂货摊。从左向右的排列，就基本完成了内容层次的排布，有助于让排版更加直观。用于分隔导航和内容的界面就不需要了。取而代之的是漂亮的产品惊艳全场。,排版趋势,去界面化,移除任何感官上的页头和页尾后，内容得到了极大的强调。你会先看到公司名称，然后是关于他们经营内容 ︵和场所︶ 的清晰描述，而不是先看到页头。之后才是主导航。让用户浏览之前先重点强调品牌,排版趋势,基于模块或网格,排版趋势,基于模块或网格,排版趋势,基于模块或网格,排版趋势,一屏以内,排版趋势,一屏以内,排版趋势,响应式设计 响应式网页设计就是一个网站能够兼容多个终端 — — 而不是为每个终端做一个特定的版本,响应式设计,▪ UIKit ▪ Bootstrap ▪ Adobe Edge Inspect ▪ Foundation ▪ SimpleGrid ▪ Responsive Testing,表格,1. 表格概述,2. 表格基本操作 ︵熟练手写代码︶ ,3. 会用表格布局页面,表格,表格概述 表格是用于在HTML页面上显示表格式数据以及对文本和图形进行布局的强有力的工具。表格由一行或多行组成，每行又由一个或多个单元格组成。 利用表格布局页面。可以导入表格化数据，设计页面分栏，定位页面的文本和图象等。,表格,表格的基本结构,组成：表格由单元格、行、列组成。,表格,表格应用场合 论坛 门户网站,利用表格布局页面。可以导入表格化数据，设计页面分栏，、定位页面文本和图象等,表格,表格的基本语法,tr, ,, 单元格内容 ᠁ ᠁ , ᠁ ᠁ , ᠁ 定义列, ᠁ 定义行,border用来设置表 格边框尺寸大小,.定义表格,,,,表格,,tr,,移动 联通 铁通,tr,tr,,IBM ,惠普 华硕,tr,,,表格,什么是跨行跨列的表格,跨3列,跨3行,下图中的表格哪里用了跨行︖ 哪里用了跨列︖ 跨了几行几列︖ ,表格,跨多列的表格,,tr,tr,tr,tr,tr,tr, 学生成绩表 英语 数学 语文 95 98 89 ,colspan=“n“ 属性表示跨多少列︖ ,表格,跨多行的表格,,tr,,早上菜谱 食物 鸡蛋,tr, ,饮料 牛奶,tr,tr,/ ,甜点,开心粉,tr,/,,rowspan =““n“属性表示跨多少行︖ ,表格,如何创建跨行跨列的表格,表格,表格的美化修饰,表格的高度,表格的宽度,背景色 文字对 齐方式,背景图片,表格,设置表格的尺寸和边框,表格,设置背景,表格,设置对其方式,表格,为什么要使用填充属性 单元格里的内容太靠近边线，怎么办︖ ,未填充的效果，字与单元格 边框之间的距离靠得太近,表格,填充属性和间距属性,表格,,表格,布局,练习,文具订单量,,制作简单表格 光标定位到要插入表格的地方,,制作表格,点击“插入”菜单中的“表格”,, ︵1︶ 在“表格大小”栏中的“行数”输入框中输入要创建的表格的行数为6。在“列数”输入框中输入表格的列数为3。 ︵2︶ “表格宽度”输入框用于设置表格的宽度，右侧的列表中可选择“像素”或“百分比”。各选项的含义如下： 像素：若选择该项则将表格设置为固定宽度。 百分比：若选择该项，则按占浏览器窗口的百分比指定表格的宽度。 ︵3︶ “边框粗细”输入框用于设置表格边框的粗细。输入大于0的整数表示有边框，若输入0表示在网页中不显示边框，在设计页面中以虚线表示。此时设置为3 ︵4︶ “单元格边距”输入框用于输入单元格边框和单元格内容之间的像素数。 ︵5︶ “单元格间距”输入框用于输入单元格与单元格间的间距值，值越大间距越宽。,,制作表格,, ︵6︶ “标题”栏用于设置“标题”在表格中的位置，它们的含义如下： 无：插入不带表格标题列的表格。 左：插入左侧为表格标题列的表格。 顶部：插入顶部为表格标题列的表格。 两者：插入左侧和顶部都为表格标题列的表格。 ︵7︶ 设置好需要的参数后，单击“确定”按钮即可将设置的表格插入到设计页面中。,,制作表格,,制作嵌套表格 1．将光标定位到要插入表格的单元格中。 2．单击“常用”工具栏的“表格”按钮 ，打开“插入表格”对话框。 3．根据需要分别输入行数、列数、宽度和边框等项。然后单击“确定”。,,制作表格,,选定单元格 ①选择单个单元格：只需将光标定位到要选定的单元格中即可。 ②选择相邻的多个单元格：将鼠标光标定位到开始的单元格中，按下鼠标左键不放，并开始拖动鼠标到同一个表格中需要选取的单元格区域的最后一个单元格中释放鼠标即可。 ③选中不相邻的单元格：按住键盘的Ctrl键，用鼠标单击要选中的单元格，可以选定任意多个不相邻的单元格,,编辑表格,,合并与拆分单元格,,编辑表格,,①选取要合并的单元格区域。 ② 单击“属性”面板左下角的按钮即可。,①将光标定位于要拆分的单元格中。 ②单击“属性”面板中的按钮，“拆分单元格”对话框。 ③在“把单元格拆分”栏中，选中“行 ︵列︶ ”单选项。 ④在“行 ︵列︶ 数”框中输入要拆分的行 ︵列︶ 数，如输入3。 ⑤单击“确定”按钮，即可按设置的参数拆分指定的单元格,合并单元格,拆分单元格 的行 ︵列︶ ,,,,插入行列 ①插入单行 ②插入多行 ③插入单列和插入多列 ︵与插入行相似︶ ,,编辑表格,插入单行 ︵当前行上方插入︶ ,选择“插入”|“表格”|“表格对象”|“插入行”命令，即可在当前行的上方插入一行，并且该行成为当前行。,,,,编辑表格,插入多行 ︵当前行上方插入︶ ,步骤一：将光标置于表格中希望插入多行的位置上，单击鼠标右键，在打开的菜单选择“表格”|“插入行或列”命令，此时将打开一个“插入行或列”对话框。,步骤二：在“插入”选项组中选择“行”，在“行数”文本框中输入数值，在“位置”选项组中选中“所选之上”。单击“确定”按钮后就能在光标所在的单元格之上插入相应的行数。,,,,,删除行列 法一：选定要删除的行或列，按Delete键即可删除。 法二：选定要删除的行或列，或将光标定位到表格中要删除的行或列中，单击鼠标右键，从弹出的快捷菜单中选择“表格”中选择-“删除行”或“删除列”命令即可,,编辑表格,,设置表格格式 选定表格，打开窗口底部的“属性”面板设置完成后，按Enter键进行确认,,编辑表格,“间距”输入框用于设置相邻的单元格之间的距离 。,“边框”输入框用于设置边框线的粗细。此例为“3”。,“类”下拉列表框用于选择设置的CSS样式,清除表格的列宽 · · · · · · ,,设置单元格格式 1. 选定要设置属性的单元格行或列，“属性”面板 2．“水平”下拉列表框用于设置单元格中文本在水平方向上的对齐方式；“垂直”列表框用于设置单元格中的文本在垂直方向上的对齐方式。 3．“宽”和“高”输入框用于分别设置单元格的宽度和高度。默认的是像素，若用百分比则应在数值后加上百分号 ︵%︶ 。 4．“背景”输入框用于指定单元格、行或列的背景图像路径。也可单击图标从其它位置选择一幅图像。. 5．“背景颜色”和“边框”色块用于设置单元格、列或行的背景颜色和边框颜色。,,编辑表格,,,*框架结构,框架的作用，就是把浏览器窗口划分成若干个区域，每个区域可以分别显示不同的网页。 注意：使用框架结构时，HTML文档中不能出现标记对，此时需要由代替,框架结构,使用框架是制作网页时常用的页面布局方式。利用框架技术将网页划分的若干区域，每个区域都是独立的网页，这些区域里的网页既各自独立又相互有联系。 框架技术不仅能够进行简单页面布局，还可以实现很多特殊功能。,框架结构,例如，将一些不需要更新的网页元素放在一个框架内作为单独的网页文档，这个文档是不变的，其他经常更新的内容放在主框架内。 在同一网站的多个网页中，网页上部的logo和导航条是完全相同的，可以将这些相同部分各自做成一个网页，作为框架的一部分，而在框架的其它部分装载不同内容。,框架结构,框架集标记：主要是定义浏览器窗口的分割方式、各分割窗口 ︵框架︶ 的大小以及格式化框架边框 框架标记：定义各分割窗口中显示的内容，并能对各分割窗口进行格式化,框架集标记,,框架分割窗口方式,左右 ︵水平︶ 分割 上下 ︵垂直︶ 分割 嵌套分割：浏览器窗口既存在左右分割，又存在上下分割,框架分割窗口方式,左右分割 基本语法 ᠁ ᠁ . 语法解释 cols属性决定了窗口的分割方式为左右分割；“value”定义各个框架的大小，单位可以是像素，也可以是百分比；value的个数决定了标记的个数，即窗口的个数,左右分割示例,,框架分割窗口方式,上下分割 基本语法 ᠁ ᠁ . 语法解释 rows属性决定了窗口的分割方式为上下分割；“value”定义各个框架的大小，单位可以是像素，也可以是百分比；value的个数决定了标记的个数，即窗口的个数,上下分割示例,,嵌套分割,基本语法 ᠁ ᠁ ᠁ ᠁ . ,嵌套分割示例,,,框架标记,基本语法 ᠁ ᠁ . 语法解释 src属性用于设置在框架窗口中显示的内容来自的文件；name属性用于标记框架名称，以便于其他对象对它的引用，如作为链接的一个目标窗口,标记基本设置示例,,常用属性,,框架与链接,框架的一个重要目的是在不同的框架中显示不同的页面，通过链接目标窗口的设置可以很容易实现这一目的 具体实现方法：将框架的框架名属性值作为超链接的target的属性值,普通框架与链接示例,,,,,,,,,创建框架集,1、插入预置框架样式 单击【插入】工具栏【HTML】类别中的【框架】按钮，在弹出的下拉菜单中选择所需的框架类型，即可在页面上插入相应的框架，并弹出【框架标签辅助功能属性】对话框，可为框架指定框架名称。,框架下拉菜单,创建框架集,2、直接新建预定义框架文件 执行“文件/新建”命令，再弹出的“新建文档”对话框“类别”列表框中选择“框架集”选项，在右侧选择预定义的框架集类型。,新建文档对话框,创建框架集,3、创建嵌套框架 先在页面中创建一个框架，将插入点置于要创建嵌套的框架区域，再次执行创建框架的操作。,,为框架添加内容,当窗口被分割为几个框架以后，每个框架都可以作为独立的网页进行编辑，也可以直接把某个已经存在的页面赋给一个框架。也可在框架中打开已有的HTML文档，具体操作步骤如下。 ︵1︶ 在文档窗口中，将光标放置在某一框架内。 ︵2︶ 选择“文件 在框架中打开”命令，打开一个已有文档。,保存框架和框架集,框架集文件和与之相关的框架文件必须先保存，才能在浏览器中预览整个框架网页内容。可以分别保存框架集页面或框架页面，也可以同时保存所有打开的框架文件和框架集页面。 保存框架集文件 — — 选择框架集，然后选择【文件】|【保存框架页】命令。 保存框架中显示的文档 — — 在框架中单击，然后选择【文件】|【保存框架】命令。 保存所有文件 — — 选择【文件】|【保存全部】命令,框架和框架集的选择,在对框架或框架集进行操作之前，必须先选择框架或框架集。 选择框架 按住Alt键同时鼠标左键单击欲选择的框架； “窗口框架”，启用框架控制面板，在面板中用鼠标左键单击欲选择的框架。 选择框架集 在框架面板中鼠标左键单击框架集的边框 在文档窗口中鼠标左键单击框架的边框。,编辑框架或框架集,1.编辑框架 对框架页面的编辑与对普通页面的编辑相同，包括输入文本、插入图像、添加表格和表单的方法都是相同的。此外，还有一种比较简便的编辑框架的方法，即先创建好整个框架集中各部分框架页面，然后将其在框架集中对应的窗口打开。,编辑框架或框架集,2、调整框架的大小 通常调整框架的大小的方法有两种，即通过拖动框架的边框或指定想要的确切设置来调整框架的大小。 ︵1︶ 拖动框架的边框调整框架大小 将光标放在要调整的框架边框上，当光标变为“ ”形状时，按住鼠标左键，并拖动。 ︵2︶ 通过属性面板可精确调整框架大小。,,编辑框架或框架集,3、拆分框架 在框架网页中不但可以调整框架的大小，还可以设置网页中显示的框架的多少。在框架网页中可以任意地拆分框架。 先将光标置于要拆分的框架窗口中，然后选择“修改 框架集”命令，弹出其子菜单，其中有4种拆分方式。 先将光标置于要拆分的框架窗口中，然后单击“插入”面板“布局”选项卡中“框架”按钮右侧的黑色箭头，在弹出的菜单中选择一种拆分框架的方式，将框架窗口再划分。 选定要拆分的框架集，按住键的同时，将鼠标指针放到框架的边框上，当鼠标指针呈双向箭头时，拖曳鼠标拆分框架,编辑框架或框架集,4、删除框架 当加入了一条边线后，发现加错了，如何去掉这条线 一种方法是修改HTML代码，把相关的语句删除； 还有一种方法是用鼠标把要删除的边线拖曳到父框架的边框上，这条边线就被删除了。,设置框架和框架集属性,框架属性确定了框架集内各个框架的名称、源文件、边框的框架能否调整大小等。 框架集属性确定框架的大小和框架之间的边框宽度和颜色等。 在框架结构文档中，框架和框架集都有各自的属性设置面板，它们的属性应该分别进行设置。,设置框架和框架集属性,1、设置框架的属性 在【框架】面板中单击某一框架区域，即可在页面中选择此框架，然后可在属性检查器中设置其属性。,,设置框架和框架集属性,2、设置框架集的属性 单击框架的边框，选择框架集，然后在属性检查器中设置此框架集的属性。,框架集的属性检查器,解决浏览器无法显示框架的问题,在Dreamweaver中允许指定在不支持框架的浏览器中编辑内容。选择【修改】|【框架页】|【编辑无框架内容】命令，然后在文档窗口中像处理普通文档一样输入或插入提示内容。,,,上机练习,,步骤,1插入一个3x2的表格A，宽度设为600px；将第一行、第二行各列分别合并；然后在第一列插入一个SWF文件，设置适当的高度和宽度，在第二行插入图片。 2在第三行第一列插入7x4的表格B，宽度为380px，并设为左对齐；在第三行第二列插入8x2的表格C，宽度为200px，并设为右对齐。 3对表格B进行以下操作： ︵1︶ 将第一、三、五行各单元格合并，分别插入图片“动画”、“桌面”、“音乐”，并设置每个图片的宽度为70px；,, ︵2︶ 在第二、四行各单元格分别插入图片与文字、并将各图片与文字设置成超链接，链接地址为“#”，均为居中对齐，文字大小均为1号字； ︵3︶ 将第六、七行的第一、二单元格合并；将第三、四单元格合并，分别在合并后各单元格内输入文字 ︵森林猜想曲等 ᠁︶ ，文字均设为超链接，文字大小均为2px。 4对表格C进行以下操作： ︵1︶ 设置表格的对齐方式为底部对齐； ︵2︶ 将前6行各单元格合并，分别插入图片与文字； ︵3︶ 在第七、八行的单元格中分别插入图片和文字，“新闻”部分文字前面加列表的前导符，左对齐，“三维”部分文字居中对齐；,, ︵4︶ 该表格中所有文字均设为超链接，文字大小均为2px。 5调整表格之间的大小与搭配，完成示例。,练习案例-美容与化妆 案例练习目标：练习框架的基本操作。 案例操作要点： 新建“上方固定，左侧嵌套”结构的框架，将上方框架命名为top，左侧框架命名为left，右侧框架命名为main。 设置框架t高度为307px，框架main的宽度为250px。 将框架集文件保存为index1.html后，为框架top设置源文件top.html，为框架left设置源文件left.html，为框架main设置源文件caizhuang.html。,框架练习案例,在文字“网站首页”上设置超级链接index.html，目标为_top；在文字“护肤宝典”上设置链接文件为hufu.html，在文字“彩妆攻略”上设置链接文件为caizhuang.html，在文字“美发达人”和“美体物语”上设置空链接，目标为_main。 在网页index.html中的文字“欢迎进入美容与化妆网站 ᠁ ”上设置链接文档index1.html，进入主框架页面。 网站首页效果，框架布局要求，框架网页效果如图所示。,练习案例,