当前位置：文档之家› 经典DIV+CSS下拉菜单

经典DIV+CSS下拉菜单

经典DIV+CSS下拉菜单
经典DIV+CSS下拉菜单

实验DivCSS网页布局

实验九 Div+CSS网页布局 一、站点规划 在网页制作中，有许多的术语，例如： HTML、CSS、DIV等等。下面我们就开始一步一步使用DIV+CSS 进行网页布局设计吧。 所有的设计第一步就是构思，构思好了，一般来说还需要制作的界面布局简单的构画出来。 下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分为以下几个部分： 1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片； 2、内容部分又可分为侧边栏、主体内容； 3、底部，包括一些版权信息。 有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:

根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。 DIV结构如下： │body {}/*这是一个HTML元素，具体我就不说明了*/ └#Container {}/*页面层容器*/ ├#Header {}/*页面头部*/

├#PageBody {}/*页面主体*/ │├#Sidebar {}/*侧边栏*/ │└#MainBody {}/*主体内容*/ └#Footer {}/*页面底部*/ 至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。 接下来我们在桌面新建一个文件夹，命名为“DIV+CSS页面布局”，在文件夹下新建两个空的记事本文档，输入以下内容： 这是XHTML的基本结构，将其命名为index.htm，另一个记事本文档则命名为css.css。 下面，我们在标签对中写入DIV的基本结构，代码如下：

Authorware下拉菜单与多级菜单的制作

Authorware下拉菜单与多级菜单的制作Authorware制作下拉菜单需要用到交互图标所提供的下拉菜单 首先是擦除原有菜单的“文件”二字 在用Authorware的菜单交互制作菜单时，Authorware总会在菜单栏上加一个“文件”菜单。这个“文件”菜单与我们的作品总是那么不协调。所以咱们先想办法去掉这个“文件”菜单。具体步骤如下： 1、在主流程线上拖一个交互图标，命名为“文件”。在其右侧放一个组图标（内容为空），在弹出的对话框中，选择“下拉菜单”。双击组图标上方的小方块，弹出属性对话框，选择“永久”及“退出交互”，其他选项就用默认的设置。 2、在交互图标的下方，放一个擦除图标，然后运行一下演示窗口，用鼠标单击演示窗口标题栏上的“文件”二字。仔细看，那个“文件”菜单会随之消失。运行一下看看是不是消除了。 下拉菜单制作 首先在流程线上拖入一交互图标，命名为“文件”，在其右侧放一个组图标，在弹出的对话框中，选择“下拉菜单”。将这个组图标命名为“新建”，范围选择“永久”。然后在其右侧继续放入五个这样的组图标，分别命名为：“打开”、“- ”（这个减号表示分界线）、“保存”、“另存为”、“- ”。最后再放上一个计算图标，命名为“退出”，打开它，输入" quit(0) " ，这样一个下拉菜单就做好了，运行下便能看到效果。

多级菜单制作 1、在流程线上放一个交互图标，命名为“图片欣赏”，在其右侧放一个组图标，选择交互类型“下拉菜单”。将这个组图标命名为“植物图片”。双击组图标上方的那个矩形色块，在弹出的属性对话框中，点击“响应”选项卡，选中其中的“永久”复选项，并将“分支”的值选为“返回”。您可以继续添加几个这样的组图标，分别命名为“动物图片”、“风景图片”等等，当然随便您啦。 2、按同样的方法，在主流程线上再放一个交互图标，其右侧也放几个组图标，分别命名为“梅花”、“兰花”、“菊花”等。各项设置同上面的步骤一样。惟一的不同，就是要把交互图标的命名删除，也就是说要让这个交互图标的名字为空。

DIV+CSS：网站首页布局实例教程

DIV+CSS：网站首页布局实例教程 第一步：页面布局与规划 在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来，以下是我构思好的界面布局图。 下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分为以下几个部分： 1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片； 2、内容部分又可分为侧边栏、主体内容； 3、底部，包括一些版权信息。 有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:

根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。 DIV结构如下： │body {}/*这是一个HTML元素，具体我就不说明了*/ └#Container {}/*页面层容器*/

├#Header {}/*页面头部*/ ├#PageBody {}/*页面主体*/ │├#Sidebar {}/*侧边栏*/ │└#MainBody {}/*主体内容*/ └#Footer {}/*页面底部*/ 至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。 第二步：写入整体层结构和CSS 接下来我们在桌面新建一个文件夹，命名为“DIV+CSS布局练习”，在文件夹下新建两个空的记事本文档，输入以下内容： 无标题文档 这是XHTML的基本结构，将其命名为index.htm，另一个记事本文档则命名为css.css。 下面，我们在标签对中写入DIV的基本结构，代码如下：

[color=#aaaaaa][/color]
[color=#aaaaaa][/color]
[color=#aaaaaa][/color]
为了使以后阅读代码更简易，我们应该添加相关注释，接下来打开css.css文件，写入CSS 信息，代码如下： /*基本信息*/ body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;} /*页面层容器*/ #container {width:100%} /*页面头部*/ #Header {width:800px;margin:0 auto;height:100px;background:#FFCC99}

在Form1上建立一个二级下拉菜单,第一级共两个菜单项,标题分别为“文件”“编辑”

基础题（1）【考点分析】本题考点有：菜单编辑器的使用（标题、名称和内缩符号）。 【解题思路】通过菜单编辑设置菜单的标题、名称和内缩符号。 【操作步骤】 步骤1：建立界面，添加控件并设置控件的属性。程序中用到的控件及属性见表3.193。 步骤2：调试并运行程序，关闭程序后按题目要求存盘。 基础题（2）【考点分析】本题考点有：文本框的Name、PasswordChar属性和Change 事件。 【解题思路】首先通过属性窗口设置文本框的名称，并将Text1的PasswordChar属性设为*。在文本框的Change事件中，将文本框1显示的内容赋给文本框2。 【操作步骤】 步骤1：建立界面，添加控件并设置控件的属性。程序中用到的控件及属性见表3.194。 步骤2：编写程序代码。 参考答案 Private Sub Text1_Change() Text2.Text = Text1.Text End Sub 步骤3：调试并运行程序，关闭程序后按题目要求存盘。 简答题（1）【考点分析】本题考点有：图片框的Name、Height、Width、Picture属性和命令按钮的Name、Caption属性。 【解题思路】通过图片框的Name、Height、Width、Picture属性分别设置其名称、高、宽和添加图片。在命令按钮的Click事件中，图片的交换用LoadPicture()方法来实现。 【操作步骤】 步骤1：建立界面，添加控件并设置控件的属性。程序中用到的控件及属性见表3.195和表3.196。 表3.195

程序提供代码 Private Sub C1_Click() P1.Picture = LoadPicture("pic2.jpg") P2.Picture = LoadPicture("pic1.bmp") End Sub 程序结束 步骤3：调试并运行程序，关闭程序后按题目要求存盘。 简答题（2）【考点分析】本题考点有：复选框的Name、Caption、Value属性，文本框的Name、Text属性，命令按钮的Name、Caption属性，"+"连接符以及If判断语句。 【解题思路】首先在窗体上建立相应控件，并通过属性窗口设置其属性。通过If语句判断复选框的Value属性值是否为True，来判断文本框中应该显示的内容。 【操作步骤】 步骤1：建立界面，添加控件并设置控件的属性。程序中用到的控件及属性见表3.197。 步骤2：分析并编写程序代码。 程序提供代码 Private Sub C1_Click() '需要考生编写的内容 End Sub Private Sub Form_Unload(Cancel As Integer) Open App.Path & "\out4.txt" For Output As #1 Print #1, Ch1.Value, Ch2.Value, Text1.Text

DIV+CSS实现二级下拉菜单

二级下拉菜单实现代码

相关文档 最新文档