目录

  • 1 课程介绍
    • 1.1 欢迎来到网页制作课堂
    • 1.2 第1讲:课程概要
    • 1.3 本课程开设的目的
    • 1.4 总体进度安排
    • 1.5 使用教材
    • 1.6 需装软件
    • 1.7 教学网站
    • 1.8 答疑方式
    • 1.9 教学方法
    • 1.10 评价方法之一(校内网络教学,组长评作业)
    • 1.11 评价方法之二(全国公开课班级)
    • 1.12 得分预算
  • 2 初识DW8(第1、2、3章)
    • 2.1 需阅内容
    • 2.2 考核要点
    • 2.3 教学重点
      • 2.3.1 不同网页制作工具的特点
      • 2.3.2 DW功能及界面了解
      • 2.3.3 WEB服务器架设
      • 2.3.4 网站结构 见演示
      • 2.3.5 如何创建网站和网页
      • 2.3.6 网页的语法结构
      • 2.3.7 常用HTML标记的作用
      • 2.3.8 巧用他人的网站设计模块
      • 2.3.9 番外:DW的前生今世
    • 2.4 作业1:见“历次作业布置.xls”
  • 3 文字与链接(第5章)
    • 3.1 需阅内容
    • 3.2 考核要点
    • 3.3 课前提问
    • 3.4 教学重点
      • 3.4.1 文字处理
      • 3.4.2 列表设置
      • 3.4.3 超链接
    • 3.5 作业2:见“历次作业布置.xls”
    • 3.6 番外:视频文档化
  • 4 图像处理(第6章)
    • 4.1 需阅内容
    • 4.2 考核要点
    • 4.3 课前提问
    • 4.4 教学重点
      • 4.4.1 不同的图像类型
      • 4.4.2 几种图像效果的制作
    • 4.5 作业3:见“历次作业布置.xls”
  • 5 表格(第4章)
    • 5.1 需阅内容
    • 5.2 考核要点
    • 5.3 课前提问
    • 5.4 教学重点
      • 5.4.1 表格的组成与作用
      • 5.4.2 表格基础操作
      • 5.4.3 表格美化
      • 5.4.4 表格布局
    • 5.5 作业4:见“历次作业布置.xls”
  • 6 框架(第8章)
    • 6.1 需阅内容
    • 6.2 考核要点
    • 6.3 课前提问
    • 6.4 教学重点
    • 6.5 框架1:框架布局原理
    • 6.6 框架2:两框式框架制作
    • 6.7 框架3:T型框架基础篇
    • 6.8 框架4:T型框架完美篇
    • 6.9 课堂测试
    • 6.10 总结
    • 6.11 课后复习
    • 6.12 作业5:见“历次作业布置.xls”
  • 7 层(第7章)
    • 7.1 需阅内容
    • 7.2 考核要点
    • 7.3 课前提问
    • 7.4 教学重点
    • 7.5 层1:层的基本操作
    • 7.6 层2:制作简单动画
    • 7.7 实例1:利用层实现变换图片
    • 7.8 实例2:绝对定位的下拉菜单
    • 7.9 实例2延伸:相对定位的下拉菜单
    • 7.10 作业5:见“历次作业布置.xls”
  • 8 表单(第11章)
    • 8.1 需阅内容
    • 8.2 考核要点
    • 8.3 课前提问
    • 8.4 教学重点
    • 8.5 表单1:表单的用途、组成和工作原理
    • 8.6 表单2:创建一个学员登记表
    • 8.7 表单3:表单检查
    • 8.8 作业6:见“历次作业布置.xls”
  • 9 网站风格管理(第9、10章)
    • 9.1 需阅内容
    • 9.2 考核要点
    • 9.3 课前提问
    • 9.4 教学重点
    • 9.5 网站风格管理1:模板-求同
    • 9.6 网站风格管理1:模板-存异
    • 9.7 网站风格管理2:样式
    • 9.8 作业7:见“历次作业布置.xls”
  • 10 自己的考题自己出
    • 10.1 如何自己出考题
    • 10.2 注释——孟凯谛
    • 10.3 热区重叠——熊梓伶
    • 10.4 CSS规则使用方法——杨鸾
    • 10.5 弹出式菜单——曹老师
  • 11 历次作业讲评
    • 11.1 46 作业1集中讲解
    • 11.2 47 作业2集中讲解
    • 11.3 48-53 作业3讲解
    • 11.4 54-58 作业4讲解
    • 11.5 59-64 作业5讲解
    • 11.6 65-66 作业6讲解
    • 11.7 67-69 作业7讲解
教学重点

1.跟书操作后课堂交流

跟书操作P79100,然后就以下问题进行交流

表格的组成

上台指认表格的各个组成部分

插入表格

在文档中插入表格

导入、导出表格数据

表格的格式

定义表格在页面中的位置(左齐/右齐/居中)

定义表格内元素在表格中的位置(水平方向:左齐/右齐/居中,垂直方向:靠上/靠下/居中)

定义行高和列宽:按像素、按百分比

表格美化:手工设置字体、字色、字号、底纹、背景,套用已有表格格式

排序表格

表格的编辑

合并单元格

拆分单元格

增删行或列

2.利用表格进行网页布局

常见页面布局

垂直三段式:结构简单、层次少、主题突出

     

 

头部30%:放LOGO、导航栏、广告

 
 

中部60%:放主体内容

 
 

底部10%:放网站联系方式、身份证明

 

注:表格的高度用像素法或百分比法皆可;头部和底部的高度用像素法;中部的高度可以缺省,让系统自适应。

 

T型布局:页面较多、层次清晰、每一页长度一屏左右

       

 

头部30%:放LOGO、主导航栏

 
 

辅导航栏

 
 

中部60%:放主体内容

 
 

底部10%:放网站联系方式、身份证明

 

定天元:只在页面最显眼处放一个主题画面,点击相应的热点可以到达相应子页面

 

 

主题画面:可以是线路图、组织结构图、产品线分类图或仅仅是一张画

 


讨论:网站类型与页面布局的关系

1.        形象展示型:主要由文字、图片组成,页面布局宜采用        

2.        信息交流型:主要由文字、图片组成,点击目录页中的信息标题能打开相应内容,页面布局宜采用        

3.        交易型:主要由文字、图片、表单、程序组成,页面布局宜采用        

3.使用布局模式和布局表格

表格的3种模式

标准、扩展、布局,了解其特点和在不同模式下可做的操作

布局模式的实质

也是表格的一种,特点是单元格位置任意定,由DW生成相应表格。

如果说,标准表格的特点是“横平竖直”,跨行或跨列需使用合并或拆分单元格来实现的话,布局表格的特点就是“平面膏药随意贴,DW帮你做表格”,由DW帮你制作高度灵活的表格,用来进行页面排版。

一个布局表格就象是一块膏药,在膏药上你可以画大大小小的布局单元格,在布局单元格里可以放文字、图片等网页元素。同一块膏药(布局表格)中的元素可以一起移动。

布局表格的使用

先建立布局表格

再于布局表格中建立布局单元格

最后在布局单元格中插入网页所需的元素

注意:所有的布局单元格不能重叠,新的单元格只能在网页空白区域未建布局单元格的区域方能建立

关于自动伸展列宽

在布局表格中使用自动伸展列宽的目的,是为了将该表格宽度设成屏幕窗口的一定百分比,如20%30%

默认情况下,DW将自动伸展布局表格中某列的宽度,以便表格与屏幕窗口屏幕等宽。在此情况下,不管布局表格中其它列的宽度原先定义成多少,都会被压缩到最小(仅能容纳已放入列中的元素)。为了不影响其它列的宽度,使用自动伸展列宽时一定要对其它列使用间隔图像。

实际工作中,我们更提倡直接在代码视图中定义表格及各列的宽度为一定的百分数,而不是使用自动伸展列宽和间隔图像。