揭秘搜索引擎网页源代码:Dreamweaver高效套用技巧打造个性化网页
3、将光标置于左侧单元格内,调整其水平布局为左对齐,垂直布局为顶部对齐,随后插入一幅图片,通常用于此处的是网站的标志,即logo。
4、将光标置于右侧单元格内,调整其宽度为500,水平布局为居中对齐,垂直布局为中央,随后插入图片,通常用于网页广告,即banner。
5、将光标置于刚刚完成的表格下方,插入/表格,创建一个1行1列,宽度为760像素,边框和边距均为0的表格。
6、选择刚刚创建的表格,调整其布局方式为居中对齐,背景色为#005173。
7、在该表格中依次插入多幅图片,作为导航栏菜单。
二网页中部(左侧栏目列表、中间网站新闻、右侧栏目列表)
1、在导航栏表格之后,插入/表格,创建一个1行3列,宽度为760像素,边框和边距均为0的表格。并调整其布局方式为居中对齐,背景色为#FFFFFFF。
2、将光标置于左侧单元格内,调整其宽度为18%,水平布局为居中对齐,垂直布局为顶部对齐,随后插入一张图片,插入一个导航栏。
3、将光标置于刚刚插入的图片之后,插入/表格,插入一个12行1列,宽度为90%的表格。设置其单元格间距为1,背景色为#CCCCCC。
4、将光标置于表格第一个单元格中,调整其高度为20,背景色为#FFFFFF。插入/图像,插入一个导航文字前面的小点。同样设置其他11个单元格,这样左边的栏目分类列表就完成了。
5、将光标置于主体表格中间的单元格中,调整其宽度为66%,水平布局为居中对齐,垂直布局为顶部对齐,随后插入/图像,插入一个导航栏。
6、将光标置于图像之后,插入/表格,插入一个4行1列,宽度为95%的表格。设置其单元格间距为1,背景色为#CCCCCC。
7、将光标置于表格第一个单元格中,拖动鼠标,将4个单元格都选中,调整高度为60,背景色为#FFFFFF。
8、将光标置于主体表格右侧的单元格中,调整其宽度为16%,水平布局为居中对齐,垂直布局为顶部对齐,插入/图像,插入一个导航栏。
9、将光标置于图像之后,插入/表格,插入一个7行1列,宽度为90%的表格。设置其间距为1,背景色为#CCCCCC。
10、按住Ctrl键,用鼠标点击刚刚插入的表格的第1、3、5、7单元格,然后调整它们的高度为55,背景色为#FFFFFF。
11、选择第2、4、6单元格,调整其高度为6,背景色为#FFFFFF。
12、切换到源代码窗口,将第2、4、6单元格中的空格符号“”删除。
三网页底部(一般包括版权信息及其他相关内容)
1、将光标置于主体表格之后,插入/表格,创建一个2行2列,宽度为760像素,边框和边距均为0的表格。
2、选择表格,调整其布局方式为居中对齐,背景色为#3366CC。
3、将光标置于表格第1行的左侧单元格中,调整其宽度为50%,水平布局为默认,垂直布局为基线,背景色为#FFFFFF,然后输入版权信息,内容颜色随意。
4、将光标置于表格第1行右侧单元格中,插入/图像,插入一个圆角图像,在其后输入Email字样,设置其大小和颜色为1和#FFFFFF。
5、插入/表单对象/文本域,插入一个文本域,宽度可随意。
6、插入/图像,插入一个GO的图像。
7、设置页属性。点击菜单修改/页面属性,在标题一栏中输入标题,并选择背景图像,将顶部边界设为0。
将整个网页分部分放到不同的表格中组合而成,还可以加快浏览器读取页面的时间。因为浏览器是读完整个表格后才显示内容的,所以最好不要框在整个一个表格中。
八、用布局表格构建完整的页面
1、单击插入/布局,里面的布局视图按钮,就切换到布局视图状态(默认为标准视图)。也可以用菜单里的查看/表格视图/布局视图来进入。
2、先单击绘制布局表格按钮,然后在页面中像绘图一样创建出布局表格。
3、就像上一个例子一样,先绘制好网页的顶部,再中部,再底部的大表格。
4、再单击绘制布局单元格按钮,然后在已经绘制好的布局表格中,再绘制布局单元格。
5、返回到标准视图,在已经划分好的表格里,再插入嵌套的小的表格,把页面再细化,就可以完成整个页面的设计了。
注意把整个页面都放在一个大的布局表格中,因为这样的网页浏览速度会很慢。应该按照页面的版面和内容划分出几个布局表格,然后在其中分别插入布局单元格。
九、层的使用
1、点击插入/层。也可以点击图标,然后拖动鼠标创建出一个层。
3、选择创建的层,查看属性面板。“层编号”和“标签”都使用默认即可。“层编号”是编程时需要用的,我们现在一般不用。“上”即距页面上边界的距离;“左”是距左边界的距离。“z轴”是层的顺序,数字大的叠加在数字小的上面。
如不设置颜色时,层是透明的。
4、点中层左上角的小方框可以随意拖动层,大小也可以调节。
5、“溢出”一栏中,当文字多于层的大小时,visible(超出的部分照样显示)、hidden(超出部分隐藏)、scroll(不管有否超出,都显示滚动条)、auto(有超出时才出现滚动条)。
6、点击菜单窗口/其他/层,此时将出现层管理窗口。可以在其中修改层的名称和Z轴值,也可以点击眼睛图标使层可见或不可见。还有一个防止重叠的选项。
7、层的对齐。按住shift键,同时选择几个层。然后用修改/对齐,用这里的选项。
8、嵌套层。⑴首先在文档中插入一个层。⑵将光标置于该层内,然后继续插入一个层,就得到了嵌套层。⑶里面的叫子层,外面的父层。它们的Z轴顺序是一样的。拖动父层时,子层也会相对移动。移动子层时,父层不会随之移动。
8、嵌套层。⑴首先在文档中植入一个层。⑵将光标置于该层内,然后持续植入一个层,便形成了嵌套层。⑶里面的称为子层,外面的称为父层。它们的Z轴排列是一样的。拖动父层时,子层也会相应移动。移动子层时,父层不会随之移动。
十、掌握时间轴
1、点击菜单中的插入/层,植入一个层。
2、在层中植入图片,如一张飞机的图片。(这里的图片也可以是一张小动画的.gif图像)
3、点击菜单中的窗口/其他/时间轴,开启时间轴窗口。
4、选中页面上创建的层,用鼠标按住层左上角的小方框图标,将层拖放到时间轴的第1帧中。这时自动生成了一个长度为15帧的时间轴。
5、选中时间轴上的第1帧,将页面中的层拖放到页左上角,即动画开始时的位置。
6、选中时间轴上第15帧,可以拖动该帧至任意长度,如30帧。
7、选中第30帧,将层拖放到页面的右下方,此时窗口中显示出层从第1帧到第30帧的运动轨迹。(此时运动为直线)
8、可以点击第15帧,右键选“添加关键帧”,在选中第15帧的状态下,拖动层到页面中下方。
9、勾选“自动播放”选项。
总结:Dreamweaver是一款非常强大的软件,其中有很多功能需要自己不断总结和探索,熟悉之后就会变得很简单了。
网页源代码的基本构成是什么
如图:
1.无论是动态还是静态页面都是以“”开始,然后在网页最后以“”结束。
2.“”页头
其在中的内容是在浏览器中无法显示的,这里是给服务器、浏览器、链接外部JS、a链接CSS样式等区域,而里面“
3.“”
这两个标签里的内容是给搜索引擎看的说明本页关键字及本张网页的主要内容等SEO可以用到。
4.“"
也就是常说的body区,这里放置的内容就可以通过浏览器呈现给用户,其内容可以是table表格布局格式内容,也可以DIV布局的内容,也可以直接是文字。这里也是最主要区域,网页的内容呈现区。
5.最后是以""结束,也就是网页闭合。
以上是一个完整的最简单的html语言基本构成,通过以上可以再增加更多的样式和内容丰富网页。
扩展资料:
标签详解:
1.<!doctype>:是声明用哪个 HTML版本进行编写的指令。并不是 HTML标签。<!doctype html>:html5网页声明,表示网页采用html5。
2.:提供有关页面的元信息(针对搜索引擎和更新频度的描述和关键词等),写在标签内。
a):设置页面的编码格式UTF-8;
b):说明生成工具为EditPlus;
c):告诉搜索引擎站点制作的作者;
d):告诉搜索引擎网站的关键字;
e):告诉搜索引擎网站的内容;
参考资料:html代码-百度百科