精编最新网页制作与网站设计教程

,第四周,网页制作与网站设计教程,淮安信息职业技术学院计算机科学与工程系 网页制作与网站设计课程组制,第四章Dreamweaver的使用 网页布局设计 网页制作与网站设计课程讲义,网页设计与制作教程,本章要点,表格布局页面实例 用层布局页面实例 框架布局页面实例,网页制作与网站设计教程,网页设计与制作教程,认识布局窗口,网页制作与网站设计教程,网页设计与制作教程,表格布局页面实例,软件演示实例,网页制作与网站设计教程,网页设计与制作教程,表格布局页面实例,1.创建“计算机系迎评网”文件夹，然后在该文件夹中创建images、css文件夹，并且准备相关的素材。,预期的文件夹结构,2.打开Dreamweaver软件，新建网页，并将网页保存到新建的“计算机系迎评网”文件夹中，网页命名为default.htm,设置网页标题为“欢迎访问计算机系迎评网”。,网页制作与网站设计教程,网页设计与制作教程,表格布局页面实例,3.在网页中插入表格，具体参数设置如图所示。,4.插入后设置表格居中对齐 。,网页制作与网站设计教程,网页设计与制作教程,表格布局页面实例,5.分别设置第1行行高13像素，第2行行高139像素，第3行行高30像素，第4行行高500像素，第5行行高100像素，设置每1行垂直对齐方式为顶端对齐 。,6.在第1个单元格中插入“top1.gif”图片，在第2个单元格中插入“top2.gif”图片。在第3个单元格中插入1行7列的表格，具体的参数设置为宽778像素，高28像素，填充为0像素，间距为1像素，边框为0像素，背景颜色为白色。,网页制作与网站设计教程,网页设计与制作教程,表格布局页面实例,7.选中插入的7个单元格，设置为居中对齐，宽度为110像素，设置背景颜色为#D2D2D2。分别在7个单元各种中插入“首 页”、“系部介绍”、“专业介绍”、“师资队伍”、“教学管理”、“实验室训”、“教研科研”等文字，并设置这7组文字的超级链接为“index.html”，按F12键进行浏览。,网页制作与网站设计教程,网页设计与制作教程,表格布局页面实例,8.在第4行中插入1行4列的表格，参数设置为宽778像素，高500像素，背景色为白色，然后分别设置4列的垂直方向为顶端对齐，其宽依次为163像素，25像素，565像素，25像素，设置第1列的背景颜色为“#A9CEFD”，设置完成后 。,网页制作与网站设计教程,网页设计与制作教程,表格布局页面实例,9.在第1列中插入表格8行2列宽163像素，新表格的第1列宽为44像素，居中对齐，行高28像素，第2列宽为119像素。设置完成后，在新表格的第1列中的2至8行中插入文件夹images中的left.gif图片，在新表格的第2列中的2至8行中依次插入“首 页”、“系部介绍”、“专业介绍”、“师资队伍”、“教学管理”、“实验实训”、“教研科研”等文字，并设置这7组文字的超级链接为“index.html” 。,网页制作与网站设计教程,网页设计与制作教程,表格布局页面实例,10.在第3列中插入系部介绍的一段文字，在最下面的一行中插入版权相关信息，设置居中，背景色为白色。保存网页，按F12键预览效果如图所示。,网页制作与网站设计教程,网页设计与制作教程,层布局页面实例,层是一种HTML元素，可以将它定位到网页的任意位置。层可以包含文字、图像或其他任何可在HTML文档正文中放入的内容。层最主要的特性是它可以在网页内容之上悬浮。换句话说，可以在网页上任意改变层的位置，实现对层的精确定位。正是由于层的这种特性，才利用层实现对网页中的内容进行精确定位。 层可以被显示或隐藏，通过程序在网页中控制层的显示或隐藏，实现层上内容的动态交替显示，实现一些特殊的显示效果。层还可以被重叠，因此可以在网页中实现内容的重叠效果。,网页制作与网站设计教程,网页设计与制作教程,层布局页面实例,1.创建“淮安旅行社登录窗口”文件夹，然后在该文件夹中创建images、css文件夹，并且准备相关的素材。 2.打开Dreamweaver软件，新建网页，并将网页保存到新建的“淮安旅行社登录窗口”文件夹中，网页命名为“default.htm”,设置网页标题为“欢迎淮安旅行社网站”，设置背景颜色为“#F2FFCA”。,软件演示实例,网页制作与网站设计教程,网页设计与制作教程,层布局页面实例,3.执行“插入”“布局对象”“层”命令 。,网页制作与网站设计教程,网页设计与制作教程,层布局页面实例,4.选中所添加的新层，设置左边距为222像素，上边距为69像素，宽为560像素，高为347像素，设置背景图像为“images”文件夹中的“login.gif”，参数如图4-30所示。,网页制作与网站设计教程,网页设计与制作教程,层布局页面实例,5.采用步骤三的方式插入新的层，将其拖放到如图所示的位置。,网页制作与网站设计教程,网页设计与制作教程,层布局页面实例,6.将素材文件夹中的dltest.htm网页的表格复制插入到层2中，采用步骤3的方式插入新的层，将其拖放到层2的下方，并在其中输入“Copyright 2003-2008 版权所有 淮安游行社”，将网页保存。,网页制作与网站设计教程,网页设计与制作教程,框架布局页面实例,框架是一个比较早出现的HTML对象，框架的作用就是把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。使用框架可以非常方便的完成导航工作，而且各个框架之间决不存在干扰问题，所以在模板出现以前框架技术一直普遍应用于页面的导航，它可以使网站导航比较清晰。 使用框架建设网站的最大的特点是使网站风格能够保持统一。一个网站的众多网页最好都有相同的地方，来做到风格统一。可以把这个相同的部分单独的制作一个页面，作为框架结构的各个子框架的内容给整个站点公用。通过这个方法达到了网站的风格的统一。,网页制作与网站设计教程,网页设计与制作教程,框架布局页面实例,1.首先来假设这个主页是上下结构，下面又分为左右结构，上方框架显示网站主体信息，左方框架显示导航页面，右侧框架显示主内容。,软件演示实例,网页制作与网站设计教程,网页设计与制作教程,框架布局页面实例,2.首先利用Dreamweaver软件创建新的网页，创建“上方固定，左侧嵌套”的框架集。,网页制作与网站设计教程,网页设计与制作教程,框架布局页面实例,3.创建完成后，保存框架在所提供的素材文件夹中，命名为“index.htm”，标题为“图形图像处理专题学习网站”，执行“窗口”“框架”命令 。,网页制作与网站设计教程,网页设计与制作教程,框架布局页面实例,4.单击“框架”面板中的上侧框架，在属性中“源文件” 后点击【浏览文件】按钮。,5.在弹出的“选择HTML文件”对话框中选择“top.htm”页面。,网页制作与网站设计教程,网页设计与制作教程,框架布局页面实例,6.同理，点击框架面板的左侧框架，在属性面板中“源文件”后单击【浏览文件】按钮，在弹出的“选择HTML文件”对话框中选择页面“left.htm”, 点击“框架”面板的右侧主框架，在“属性”面板中“源文件”后点击【浏览文件】按钮，在弹出的“选择HTML文件”对话框中选择页面“right.htm”，,网页制作与网站设计教程,网页设计与制作教程,框架布局页面实例,7.用鼠标调整框架集中间的边框使其合理，然后保存此框架网页，最终预览效果 。,网页制作与网站设计教程,网页设计与制作教程,习题,简答题 1) 在Dreamweaver中网页的布局方式有几种，各自的优点是什么？ 2)创建简单的框架集网页,网页制作与网站设计教程,网页设计与制作教程,本章总结,表格布局页面实例 用层布局页面实例 框架布局页面实例,网页制作与网站设计教程,谢谢大家！,网页设计与制作教程,网页制作与网站设计教程,