网站的制作
实验步骤：
⏹ 新建网站：站点—新建站点   
⏹ 打开文件窗口：窗口—文件
⏹ 新建网页：文件—新建—基本页—HTML
⏹ 表格布局：
✧ 页面中插入表格：插入—表格，5行1列， 1000像素，边框0 ，背景颜 白
✧ 选中表格，设置属性面板：对齐 居中
✧ 设置页面属性：点击属性面板中的页面属性，设置如下
      外观：背景颜：#eef3fa  文本颜：黑  大小：12px  上边距 0 下边距 0
      标题编码：标题：社区网站
✧ 表格的第一行
✓ 插入单元格的背景图片：
选中<td>，设置属性面板：“背景”中选中images文件夹下的logo_bg.gif ；
                        高100
✓ 插入嵌套表格：插入—表格，2行2列  表格宽度100% 边框0
✧ 左侧第一列的两行合并，插入—图片，images文件夹下的logo.gif
✧ 右侧 第一行 ：输入文字、众、留言，插入图片liuyan .gif、shouye.gif、shoucang.gif
✧ 右侧 第二行：选中单元格<td>，设置属性面板：“背景”中选中 nav_bj.gif
                                              宽670  高36
✓ 嵌套表格： 1行9列，宽95% ，输入“首页”等文字
✧ 表格第二行
插入—图片 banner.jpg
✧ 表格第三行
拆分成两列
左侧单元格
✓ 选中单元格<td>，设置属性面板：宽 220    垂直 顶端 ，水平 居中
✓ 插入嵌套表格：插入—表格  12行1列，宽：210px，边框 0
● 第一行：空
● 第二行 （插入“社区公告”图片）
✓ 选中单元格<td>，设置属性面板：背景颜 #eef3fa
✓ 点击此行单元格，插入--图片 left_bulletin.gif
● 第三行：制作滚动字幕
✓ “插入”-“标签 ”-“HTML标签”-“页元素”-“marquee” 标签，“插入”按钮
转换到代码视图，把光标插入点放在 marquee标签内 输入文字。
设置marquee 标签的属性：“窗口”>“标签检查器”。
<marquee behavior="scroll" direction="up" scrollamount="1" scrolldelay="1"
onmouseover="this.stop()" onmouseout="this.start()">
✓ 选中单元格<td>，设置属性面板：背景颜 #eef3fa
● 第四行：背景颜 #eef3fa
● 第五行：空
● 第六行：插入—图片 left_1.gif
● 第七行：空
● 第八行：插入—图片 left_2.gif
● 第九行：空
● 第十行：插入—图片 left_3.gif
● 第11行：空
● 第12行：插入—图片 left_4.gif
右侧单元格
✓ 属性面板：垂直对齐：垂直
✓ 插入嵌套表格：5行1列 ，宽 100% ，边框 0
● 第一行：空
● 第二行：
✓ 选中单元格<td>，设置属性面板：背景right_news_bg.gif ，高 40px
✓ 插入嵌套表格：1行2列 ，宽 100% ，边框 0
◆ 第一列：插入图片right_news.gif
◆ 第二列：插入图片 more.gif，水平对齐：右
● 第二行
✓ 插入嵌套表格：1行2列 ，宽 100% ，边框 0
◆ 第一列：插入—图像对象—鼠标经过图像 photo5 \photo9
◆ 第二列：
插入嵌套表格：3行1列 ，宽 100% ，边框 0
⏹ 第一行：字体大小：16px
⏹ 第三行：插入嵌套表格：7行2列 ，宽 100% ，边框 0
● 第三行
✓ 拆分成两列
✓ 左侧第一列
◆ 插入嵌套表格：2行1列 ，宽99%
⏹ 第一行：
◆ 选中<td>，属性面板：背景right_news_bg.gif ，高 40px
◆ 插入嵌套表格1行2列，宽 100%
左right_party.gif ，右 more.gif
⏹ 第二行：
插入嵌套表格 7行2列 ，宽100%
✓ 左侧第二列：
    同右侧第一列，插入图片：综合治理right_com.gif
● 第四行
  同第三行： 民政低保right_protect.gif ，计划生育 right_family.gif
✧ 表格第四行
⏹ 选中<td>，属性面板：背景right_news_bg.gif ，高 40px
⏹ 插入嵌套表格 1行2列 ，宽100% ，左图：right_photo.gif 
✧ 表格第五行（图片滚动字幕）
◆ 插入”-“标签 ”-“HTML标签”-“页元素”-“marquee” 标签，“插入”按钮
转换到代码视图，把光标插入点放在 marquee标签内。
设置marquee 标签的属性：“窗口”>“标签检查器”。
<marquee behavior="scroll" direction="right" bgcolor="" width="1000px" scrollamount="2" scrolldelay="3"  onmouseover="this.stop()" onMouseOut="this.start()" >
✧ 表格第六行
地址，电话
超链接
新闻动态中的[详细]  detail.html
导航“首页”
如何制作网页代码CSS 样式
✧ 新闻动态中的[详细]
。detail  （类）： 类型中：大小12px ， 颜 黑 ，  修饰 无
。detai l：hover  （高级）：类型中： 颜 蓝 ，  修饰 无
✧ 新闻动态中的新闻标题
。news  （类）： 类型中：大小12px ， 颜 #333333 ，  修饰 无
。news：hover  （高级）：类型中： 颜 绿 ，  修饰 无
✧ 新闻动态中的新闻时间
。date  （类）： 类型中： 颜 #999999
✧ 新闻动态中的虚线
。bottom （类）： 边框中：样式 下 实线 ，宽度 1px ，颜 下 #CCCCCC
✧ 表格加边框
。table （类）：边框中：样式 实线 ，宽度 1px ，颜 #CCCCCC

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。