热线电话:
400-023-4588网页设计与制作
MG体育3.合并单元格 将第一行的所有单元格和第五行的所有单元格分别合并, 方法是选中相邻单元格,点击属性面板的“合并单元格” 用同样方法把第二行的第2个、第3个单元格和第四行的 第2个、第3个单元格分别合并。
1.用表格制作主页 (1)插入表格 (2)网页框架 (3)设计页眉 (4)设计信息区 (5)设置信息区 (6)设计版权区 (7)知识要点
将素材中的photo.swf文件拷入站点flash文件夹 F:\task2\flash,在布局表格第三行第3个单元格设置 水平居中对齐,插入flash文件。 点击flash可以在属性面板中对长度、宽度、参数等进行 设置
1.表格 在网页用表格显示数据是表格功能的一部分,现在表格在网页更多是 用于网页的布局,表格布局的优势在于它能对不同对象加以处理,而 又不用担心不同对象之间的影响。 2.框架 在Dreamweaver中框架是除了表格以外另一种常用的网页布局排 版工具。框架结构就是把浏览器窗口划分为多个区域,每个区域都可 以分别显示不同的网页。 使用框架最常见的用途就是导航,在使用了框架以后,用户的浏览器 不需要为每个页面重新加载与导航相关的图形。 3.层叠样式表 CSS(Cascading Style Sheet,“层叠样式表”)是一组格式 设置规则,用于控制Web页面的外观。通过使用CSS样式设置页面 的格式,可将页面的内容与表现形式分离。
在班级主页第三行第2个单元格,插入字幕文字.txt文档 中的文字,设置字体大小:14,颜色:#c38964
2.插入一个宽640,高120,1行4列的表格,本别插入4张素材图片, 并重新设置图片大小以适应单元格的大小
3.使用插件插入视频文件“clock.avi”,并设置视频窗口大小为 321x321
1.在5个网页page1、page2、page3、page4、 page5之间建立超级链接,要求各链接都要有效。在 page4“站点地图”页面,设置在站点地图相应区域点击, 可打开相关页面。
在第四行第1个单元格嵌套表格内,分别插入代表班主任、班长和副 班长的头像图片 点击插入的图片,查看图片属性,分辨率为120x120 而单元格的大小为90x90,这时需要在属性面板调整图片的宽度和 高度为80
在第二行第1个单元格设置水平对齐方式为“右对齐”, 输入文字“友情链接”,设置字体:默认字体,大小: 18,颜色:#C28863
在最后一行单元格“联系方式”左侧插入“班级主页”,在特殊字符 列表选择 在特殊字符列表选择 多次,插入3个空格字符
_blank 在新的浏览器窗口中打开链 接的文档,同时保持当前窗口不变。 _parent 在显示链接的框架的父框架 集中打开链接的文档,同时替换整个框 架集。 _self 在当前框架中打开链接,同时 替换该框架中的内容。 _top 在当前浏览器窗口中打开链接的 文档,同时替换所有框架。
将单元格对齐方式设为水平居中 在插入栏常用工具面板点击“图像:导航条” ,打开“插 入导航条”窗口
在“项目名称”输入“xiangmu1”,“状态图像”选择1.gif, “鼠标经过图像”选择2.jpg,“按下时,前往的URL”输入链接地 址 点击号,分别添加xiangmu2对应图片3.jpg和4.jpg, xiangmu3对应图片5.jpg和6.jpg,xiangmu4对应图片7.jpg 和8.jpg 在窗口最下方选择“插入”项为“水平”,勾选“使用表格”,点击 确定插入导航条
在第一行输入 “心情寄语”, 字体大小:24, 加粗,颜色: #F0AD28 第一列和第三列 输入各位同学姓 名,字体大小: 14,加粗,颜色: #C28863 第二列和第四列 输入各位同学心情寄语,字体 大小:12,颜色: #fbbb73
在“选择文件”窗口需指定链接前往的地址,在此选择站点中的页面 classweibo.html,使用相对地址 点击“确定”插入超级链接,这时文字变成带有下划线 链接的使用
在最后一行单元格输入“联系方式”,“奇奇: ”,设置字体大小:14,加粗,颜色: #C28863
选中email地址“”,在插入栏常用工具面 板点击“电子邮件链接”,打开电子邮件链接窗口
1.国字型 即最上面是网站的标题以及横幅广告条,接下来就是网站 的主要内容,左右分列一些两小条内容,最下面是网站的 一些基本信息、联系方式、版权声明等。 2.拐角型 这种结构与上一种其实只是形式上的区别,上面是标题及 广告横幅,接下来的左侧(或右侧)是一窄列链接等,右 列(或左列)是很宽的正文,下面也是一些网站的辅助信 息。
2.表格与视图介绍 (1)常用选项卡 在Dreamweaver中的“插入”面板中,选择“常用” 选项卡,可以调出如图所示的常用工具栏。
(2)布局选项卡 在Dreamweaver中的“插入”面板中,选择“布局” 选项卡,可以看到“标准视图”、“扩展视图” 。
3.表格详细介绍 (1)表格 (2)新建表格 (3)表格编辑 (4)表格的整体设置 (5)布局单元格属性面板
学习网页布局的基础知识 练习使用表格布局 练习在网页中插入超级链接、多媒体元素 完成班级主页的制作
分辨率在800x600的情况下,页面的显示尺寸为: 780x428像素; 分辨率在1024x768的情况下,页面的显示尺寸为: 1007x600像素。 一般情况下,不要让访问者拖动页面超过三屏。 如果需要在同一页面显示超过三屏的内容,那么最好能在 上面做上页面内部锚点连接,方便访问者浏览。
在第四行第1个单元格设置水平居中,垂直底部对齐,插入3行2列表 格,宽度200,每行行高90,第1列、第2列列宽分别为90,110 分别输入班主任:何青,班长:魏志国,副班长:齐子聪的个人信息, 字体大小:12,颜色:#fbbb73
用同样的方法在第四行第2个单元格插入6行4列表格,宽度为480 第一行行高设为60,其余各行行高为48 将4列的列宽分别设置为80,160,80,160 合并第一行4个单元格
3.三字型 即最上面是网站的标题以及横幅广告条,接下来就是网站 的主要内容,主要内容以行的形式罗列,最下面是网站的 一些基本信息、联系方式、版权声明等。 4.标题正文型 这种类型即最上面是标题或类似的一些东西,下面是正文。
在Dreamweaver中新建站点“班级主页” 把网页素材拷贝到图像目录下 在站点新建主页文件index.html,标题设为“班级主页” 如要转到其它本地站点,可以在文件面板下拉菜单中切换
1.插入表格 打开index.html文件, 在插入栏“常用”面板选 择“表格”,打开插入表 格窗口 插入一个5行3列,宽度 为750像素的表格,设置 边框粗细:0,单元格边 距:0,单元格间距:0, 点击确认插入表格。 在表格属性面板中设置 “对齐”为居中对齐。
点击“确定”插入电子邮件链接,此时页面中的电子邮件 地址变成带有下划线的样式 点击链接可给作者发邮件
选定何青的头像77.jpg 在图像属性面板“链接”右侧点击“指向文件”,拖拽出一个箭头指 向文件面板中的“heqing.html”
1.在page1页面中插入第六行,背景设置为白色。 2.在page2页面中插入第六列,背景设置为白色。
3.新建page3课程表页面,使用表格布局,设置 表格的格式,美化表格。
在第三行第1个单元格设置水平居中对齐,插入宽度:160,5行1列 的表格,将每行的行高设置为40,对齐方式为“左对齐” 然后在各行插入图片23.jpg和相应文字,文字设置加粗,字体:楷 体_GB2312,字号:18,颜色:#F4CEA1
2.设置表格行高和列宽 将光标放在表格行的左侧,变成实心箭头时单击,可选中 表格行编辑,5行的行高分别设置为150,50,250, 350,80。 将光标放在表格列的上方,变成实心箭头时单击,可选中 表格列编辑,3行的列宽分别设置为200,150,400。
此时插入的flash在Dreamweaver编辑窗口中是个灰 色标志,只有在浏览器中预览才可以看到实际效果
将素材中的qcjnc.mp3文件拷入站点media文件夹 F:\task2\media 在布局表格第四行第2个单元格的嵌套表格“心情寄语”单元格,使
扫一扫关注大业微信公众帐号