网页制作教程04

《网页制作教程04》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、网页设计与制作网页设计与制作Dreamweaver8网页制作与网站管理-2课后学习指导复习电子讲稿，有实际操作的地方要自己试一遍；完成每周的上机练习；按时完成作业，有问题来答疑；考虑作大作业•自己找合作伙伴；•确定主题后，搜集素材；•确定网站主要栏目和结构；•分工制作2内容提要版面布局的概念表格布局框架布局层布局3版面布局版面指浏览器显示的完整页面，版面布局指以最适合浏览的方式将网页中的各种对象放置在不同位置，使网页的浏览效果和视觉效果都达到最佳。logoBANNER栏目主体内容导航版权信息

2、4版面布局原则平衡指画面的图像文字的视觉分量在左右，上下几个方位基本相等，分布匀称,能达到安定平稳的效果呼应在不平衡的布局中的补救措施，使一种元素同时出现在不同的地方形成视觉上的相互联系。5版面布局原则对比利用不同的色彩，形态，线条等视觉元素相互并置对比,造成画面的多种变化,达到丰富视觉的效果。空白网页内容太满、太密、太平均是任何版式设计的大忌,适当的疏密搭配可以使画面产生节奏感,体现出网站的格调与品位6版面布局实例“国”字型：页面最上面是网站的主栏目、标题以及横幅广告条，然后是网站的主要内容（分

3、成左、中、右三列，中间显示具体内容），页面的下方是网站的基本信息、联系方式等。充分利用页面空间、信息量大充分利用页面空间、信息量大与其它页面的链接多、切换方便与其它页面的链接多、切换方便页面拥挤、四面封闭页面拥挤、四面封闭7版面布局实例拐角型顶部是标题及广告横幅，下面分为左、右两侧，左侧是一窄列导航链接，右列较宽放置正文内容。页面结构清晰页面结构清晰8版面布局实例标题正文型最上面是标题或类似的一些东西，下面是正文，一些文章页面或注册页面等常用这种类型布局框架型常用有左右框架型、上下框架型和类似拐角型框

4、架，一般在左框架或上框架放置导航链接，右面或下面框架是正文内容导航非常清晰导航非常清晰9版面布局实例封面型适合制作网站的主页10版面布局技术表格布局使用最广泛的布局技术,将文本、图像等素材放到无边框的表格中，利用表格来确定它们的位置。框架布局通过将浏览器窗口划分为功能独立的多个区域（框架），每个框架显示一个网页内容。层布局可以将层中的内容定位在页面的任意位置。CSS布局CSS布局建立符合WEB标准的网页，使表现与内容分开，可以实现任何形式的布局。11表格布局实例12表格布局实例13表格布局实例14

5、表格布局实例15创建表格“插入”/“表格”命令单击插入栏上表格按钮16表格基本操作选中表格•鼠标放在表格的四周，鼠标指针变为表格图标时，单击鼠标左键•光标定位在表格任一单元格内，单击鼠标右键，从弹出的快捷菜单中选择“表格”/“选择表格”命令选中的表格17设置表格属性随着浏览器窗口不随浏览器窗口0%-100%尺寸变化而变化尺寸变化而变化0-显示器绝对单位分辨率值相对单位表格的表格的表格的背景色边框色边框18设置单元格属性合并、拆单元格内对象的水单元格的单元格边分单元格平和垂直对齐方式背景色框的颜色19表

6、格布局总结利用单元格的合并与拆分，创建不规则的表格单元格的不同填充色、边框线颜色分割区域设置表格属性，整个表格的排版方式设置单元格属性，单元格内对象的排版方式大多数网页布局采用了带有不可见边框的表格20表格布局-例页面中插入两个表格：①2*7，宽760像素，居中对齐，表格边框为0②3*2，宽760像素，居中对齐，表格边框为0合并单元格⑴第一个表格的第一行合并单元格⑵第二个表格第一行第二列和第二行第二列合并单元格，第3行合并单元格21表格布局-例在单元格内插入文字、图片等页面元素22特殊表格制

7、作细线表格•插入表格，设置边框为0，边距0，间距1，并指定背景色•选中所有单元格，设置单元格的背景色•插入2*1表格，宽260，边框为0边距0，间距1，背景色#bdd3ff•设置第一个单元格的背景色#bdd3ff，输入文字•设置第2个单元格的背景色为白色，输入文字23特殊表格制作1像素分割线条•插入表格•设置表格属性•到代码视图删除空格 24框架布局框架是一种将浏览器窗口划分为功能独立的多个区域的常用方法。框架集定义每个框架的大小、位置、名称和初始网页，普通网页提供每个框架的

8、内容。一个框架的超链接可以更改显示在另一个框架中的网页。框架名称框架名称初始网页初始网页bannerindex_top.htmlmainindex_content.htmlmenuindex_menu.html25认识框架集网页框架集是一种特殊的网页，该网页定义150了整体的框架布局，但不提供实际内容bannerIndex_top.html240index_menu.htmlmainIndex_content.h