表格网站布局

网页概述曾兰芳教育技术学院zenglf2003@163.
com超文本与超媒体超文本这一术语最早由美国人纳尔松(T.
Nelson)在60年代正式提出来.
超文本(Hypertext)和超媒体(HyperMedia)是按人脑的联想思维方式非线性地组织管理信息的一种先进技术.
一种新型的管理文本或媒体信息的技术.

随着多媒体技术的发展,计算机中表达信息的媒体已不再限于文字与数字,超文本中也广泛采用图形、图像、音频、视频等媒体元素来表达思想.
这时人们改称超文本为"超媒体".

超媒体的三要素(超媒体组成)节点:节点是信息表达单元.
节点中表达信息的媒体可以是文本、图形、图像、动画、音频、视频,甚至可以是一段计算机程序.
链:链是不同节点信息单元之间的逻辑联系,它的主要用途是模拟人脑思维的自由联想.
网:网是由节点和链构成一个网络有向图.
在这个网中节点可以看作是对单一概念或思想的表达,而节点之间的链则表示概念之间的语境关联(上下文关系).

超链接超链接是WWW上的一种链接技巧,它通过已定义好的关键字和图形,只要您点取某个图标或某段文字,就可以自动连上相对应的其他文件.

静态网页和动态网页静态网页使用HTML语言,动态网页使用HTML和ASP/PHP/JSP等.
静态网页技术不需要程序在服务器端运行,而动态网页技术则需要在服务器端运行有关程序,以满足不同客户的不同需求,并返回不同的网页.
例如申请电子邮件的过程.

静态网页的特点每个网页都有一个固定的URL,且网页URL以.
htm、.
html等常见形式为后缀;每个静态网页都是一个独立的文件,并保存在网站服务器上;内容相对稳定;没有数据库的支持,在网站制作和维护方面工作量较大;交互性较差.
动态网页的特点以数据库技术为基础,可以大大降低网站维护的工作量;可以实现更多的功能,如用户注册、用户登录、在线调查、用户管理、订单管理等;动态网页实际上并不是独立存在于服务器上的网页文件,只有当用户请求时服务器才返回一个完整的网页.

制作网站的基本流程1、定位网站的主题和名称主题小而精.
选择自己擅长和喜爱的内容.
题材不要太滥.
目标不要太高.
很难超越已有的优秀网站.
名称名称要正.
合理合法.
易记.
不要太长,便于其他网站的链接和排版要有特色.

2、确定网站的风格风格服务于内容设计网站的标志LOGO设计网站的标准色彩设计网站的标准字体设计网站的宣传语使用统一的语气和人称……3、确定网站的组织结构/目录结构确定网站的链接:页面之间相互链接的拓扑结构树状链接结构、星状链接结构首页栏目一栏目二栏目三1234567首页栏目一12栏目三67栏目二345首页栏目一12栏目三67栏目二3454、设计与制作网页4.
1网页的设计网页构成要素网页布局网页构成要素网页:网站的基本信息单元,是万维网的基本文档.
基本元素:文本和图片超级链接动画表单音频、视频网页的布局页面标题:标识和说明网页的性质和内容网站标识LOGO:代表网站的形象.
一般会放在网页上最显眼的地方,以加深浏览者对网站的印象.
页眉:放置网站最希望浏览者关注的内容.
导航:提供栏目索引,使网站方便易用.
内容:网站的精神所在,一般都有方向性.
4.
2素材的搜集、制作搜集、整理加工、制作、存储网站所需素材4.
3制作网页选择网页制作工具,制作网页Dreamweaver、Frontpage5、测试与发布网站申请域名测试网站发布网站Dreamweaver8.
0的使用(1)要点创建和管理站点创建简单网页利用表格、布局、框架进行网页布局站点管理新建站点站点/新建站点OR站点/编辑站点/新建注意:不要用中文名字来命名站点,容易出错在站点文件夹下,建立专门的image文件夹来存放图片等信息删除站点站点/编辑站点/单击要删除的站点/删除添加既有文件夹为站点在"文件"面板中,单击"管理站点";选择"新建"/站点,为站点取一个名字,单击下一步;选择"否,我不想使用服务器技术",单击下一步;存储位置:选择存放站点文件的文件夹,例如"E:\本科生教学\多媒体技术与网页制作\2008-2009年第二学期\网页制作案例\",表示所有html文件及有关素材都存放在"网页制作案例"文件夹下,单击下一步;在"您如何连接到远程服务器"中,选择"无",单击下一步;单击"完成".

例1:简单网页的制作创建网页文档保存和关闭网页文档打开网页文档预览网页例如创建网页文档选择"文件"/"新建"命令在弹出的"新建文档"对话框中,在"常规"选项卡的"类别"列表框中选择"基本页"在"基本页"中选择"HTML"选择"创建"输入文字在网页中输入诗句,每输入一行,按回车键换行;选中所有文字,在属性面板上选择文字居中,并设置文字的大小、颜色等注意:在html文档的标题栏中输入:枫桥夜泊.

保存和关闭网页文档选择"文件"菜单中"保存"命令即可保存网页文档.
选择"文件"菜单中"关闭"命令即可关闭网页文档.
注意:在Dreamweaver中保存网页文档时,文件的名称最好使用英文和数字,而不要使用中文.
如果是主页,文件名称一般为index.
html打开和预览网页文档选择"文件"菜单中"打开"命令,在"打开"对话框中的"查找范围"下拉列表框中选择网页所在的位置,选中需要打开的网页后,单击"打开"按钮即可打开网页文档.
选择"文件"菜单/"在浏览器中预览"/"IExplore6.
0"可以预览网页.

HTML标记语言标记:在HTML中用于描述功能的符号.
必须用括起来.
单标记:只需单独使用就能完整地表达意思的标记.
如(强制换行)双标记:由"始标记"和"尾标记"两部分构成,必须成对使用.
如HTML标记语言(续)标记属性在单标记和双标记中可以包含的一些属性语法:如:具体文字说明:各属性之间无先后次序,属性也可以省略.
如省略,则取默认值.
注释语句可以放在任何地方,不会在浏览器中显示出来目的是方便设计人员的阅读和理解HTML基本结构HTML文件开始文件头开始文件头文件头结束文件体开始文件体文件体结束HTML文件结束文字格式标记用于设置网页中普通文字的显示效果格式文字字体:如黑体、宋体、隶书等字号:1~7;+n;-n.
N的基准值为3颜色:red、white、black等;16进制的RGB颜色,如红色#FF0000段落标记设置文章段落的开始和结束格式…对齐方式:取值可为left,right,center例2:利用表格布局网页在开始制作网页之前,要做好如下准备:应该对网站的页面数量、页面与页面之间的关系有设计应该对要制作的每一个网页页面的布局有设计应该把所有要用到的素材准备好页面属性的设置在属性面板中,选择"页面属性"选项,即可,如下:利用表格布局新建html文档,并保存到站点文件夹下面.
在"常用"插入栏中,单击表格按钮,插入一个6行1列的表格,并设置表格宽度为701,边框粗细、单元格间距、单元格边距均为0.
选择表格,在"属性"面板"对齐"下拉列表框中选择"居中对齐".
将鼠标定位到第4行的单元格中,选择"常用"插入栏中的表格按钮,插入一个1行2列的表格,表格宽度为619像素.
其余为0.

利用表格布局(续)将鼠标定位到嵌套表格的最后,插入一个1行5列、宽度为643像素、单元格间距为5、单元格边距为4的表格.
将鼠标定位到1行5列嵌套表格的最后,插入一个1行2列、表格宽度619像素、其余为0的表格.
将鼠标定位到1行2列嵌套表格的最后,插入一个1行4列、表格宽度643像素、单元格间距为5、单元格边距为4的表格.
将鼠标定位到整个表格的最后一行,插入一个3行1列、表格宽度701像素的表格.

设置表格背景选中整个大表格,在属性面板中,选择背景图像为:bb_bg.
gif.
选中由第4行拆分的表格,方法是将鼠标定位在该表格的最前面,然后单击,然后再属性面板中,选择背景颜色为:#FFFFFF.

往表格中添加内容将已经制作好的素材存放到站点文件夹下,利用"插入"菜单中的有关命令往表格中添加相应的内容:动画、图像表格的创建和删除创建表格插入菜单、常用工具栏表格对话框的设定表格属性的设定明边框和暗边框(是否为0)删除表格表格的编辑选取表格、单元格、行、列;相邻或者不相邻单元格、行、列的属性设置单元格的合并和拆分插入/删除行或列表格的嵌套单击现有表格中的一个单元格,选择"插入">"表格".
表格格式设置的优先顺序如下:单元格、行、表格Photoshop中的切片工具切片的作用:许多网页(比如欢迎页面)为了追求更好的视觉效果,往往采用一整幅图片来布局网页.
而网页图像设计与一般平面设计的最大区别正是图像大小与图像下载速度.
为了加快下载速度,常常需要将一张整图切割成若干部分,分别进行压缩和优化,不仅能缩小图像的体积,还可以分别设置不同的参数和制作不同的效果.

如何使用切片工具在工具箱选择切片工具后,在图像上拖出一个矩形,这个矩形就是创建的用户切片.
同时,图像上其他区域自动生成多个自动切片.

可以通过拖拽切片四周的边框来调整切片的大小,也可以选中该切片,右键单击鼠标,选择"编辑切片选项",在其中精确描述切片大小.

如何保存切片执行【文件】菜单【存储为Web和设备所用格式】命令,可在弹出的对话框中进行网页图像优化设置,如图片的存储格式、透明背景设置、压缩等.