网页设计与制作

1、学习情境二学习情境二班级主页的制作学习目标学习目标v学习网页布局的基础知识学习网页布局的基础知识v练习使用表格布局练习使用表格布局v练习在网页中插入超级链接、多媒体元素练习在网页中插入超级链接、多媒体元素v完成班级主页的制作完成班级主页的制作任务任务1 认识布局认识布局 2.1.1 页面尺寸页面尺寸v 分辨率在分辨率在800 x600的情况下，页面的显示尺寸为：的情况下，页面的显示尺寸为：780 x428像素；像素；v 分辨率在分辨率在1024x768的情况下，页面的显示尺寸为：的情况下，页面的显示尺寸为：1007x600像素。像素。v 一般情况下，不要让访问者拖动页面超过三屏。一般情况下，不

2、要让访问者拖动页面超过三屏。v 如果需要在同一页面显示超过三屏的内容，那么最好能在如果需要在同一页面显示超过三屏的内容，那么最好能在上面做上页面内部锚点连接，方便访问者浏览。上面做上页面内部锚点连接，方便访问者浏览。 任务任务1 认识布局认识布局2.1.2 整体造型整体造型 1国国字型字型v 即最上面是网站的标题以及横幅广告条，接下来就是网站即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，最下面是网站的的主要内容，左右分列一些两小条内容，最下面是网站的一些基本信息、联系方式、版权声明等。一些基本信息、联系方式、版权声明等。2拐角型拐角型v 这种结构与上一种

3、其实只是形式上的区别，上面是标题及这种结构与上一种其实只是形式上的区别，上面是标题及广告横幅，接下来的左侧（或右侧）是一窄列链接等，右广告横幅，接下来的左侧（或右侧）是一窄列链接等，右列（或左列）是很宽的正文，下面也是一些网站的辅助信列（或左列）是很宽的正文，下面也是一些网站的辅助信息。息。任务任务1 认识布局认识布局国字型国字型拐角型拐角型任务任务1 认识布局认识布局3三三字型字型v 即最上面是网站的标题以及横幅广告条，接下来就是网站即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，主要内容以行的形式罗列，最下面是网站的的主要内容，主要内容以行的形式罗列，最下面是网站的一些基本信

4、息、联系方式、版权声明等。一些基本信息、联系方式、版权声明等。4标题正文型标题正文型v 这种类型即最上面是标题或类似的一些东西，下面是正文。这种类型即最上面是标题或类似的一些东西，下面是正文。任务任务1 认识布局认识布局三字型三字型标题正文型标题正文型任务任务1 认识布局认识布局2.1.3 页面组成页面组成v 1页头页头v 2页脚页脚v 3文本文本v 4图片图片v 5多媒体多媒体任务任务1 认识布局认识布局2.1.4 网页布局技术网页布局技术1表格表格v 在网页用表格显示数据是表格功能的一部分，现在表格在网页更多是在网页用表格显示数据是表格功能的一部分，现在表格在网页更多是用于网页的布局，表格

5、布局的优势在于它能对不同对象加以处理，而用于网页的布局，表格布局的优势在于它能对不同对象加以处理，而又不用担心不同对象之间的影响。又不用担心不同对象之间的影响。2框架框架v 在在Dreamweaver中框架是除了表格以外另一种常用的网页布局排中框架是除了表格以外另一种常用的网页布局排版工具。框架结构就是把浏览器窗口划分为多个区域，每个区域都可版工具。框架结构就是把浏览器窗口划分为多个区域，每个区域都可以分别显示不同的网页。以分别显示不同的网页。 v 使用框架最常见的用途就是导航，在使用了框架以后，用户的浏览器使用框架最常见的用途就是导航，在使用了框架以后，用户的浏览器不需要为每个页面重新加载与

6、导航相关的图形。不需要为每个页面重新加载与导航相关的图形。3层叠样式表层叠样式表v CSS（Cascading Style Sheet，“层叠样式表层叠样式表”）是一组格式设）是一组格式设置规则，用于控制置规则，用于控制Web页面的外观。通过使用页面的外观。通过使用CSS样式设置页面的样式设置页面的格式，可将页面的内容与表现形式分离。格式，可将页面的内容与表现形式分离。 课堂练习课堂练习2-11浏览优秀网站，下载源文件，分析完成如下报告：浏览优秀网站，下载源文件，分析完成如下报告：v 网站地址：网站地址：_v 整体造型（国字型、三字型、拐角型整体造型（国字型、三字型、拐角型）：）：_ v 布局

7、技术（表格、框架、布局技术（表格、框架、CSS）：）：_v 页面组成：页面组成：_任务任务2 利用表格进行布局利用表格进行布局 v 在在Dreamweaver中新建站点中新建站点“班级主页班级主页”v 把网页素材拷贝到图像目录下把网页素材拷贝到图像目录下v 在站点新建主页文件在站点新建主页文件index.html，标题设为，标题设为“班级主页班级主页”v 如要转到其它本地站点，可以在文件面板下拉菜单中切换如要转到其它本地站点，可以在文件面板下拉菜单中切换任务任务2 利用表格进行布局利用表格进行布局 1插入表格插入表格v 打开打开index.html文件，文件，在插入栏在插入栏“常用常用”面板选

8、面板选择择“表格表格”，打开插入表，打开插入表格窗口格窗口v 插入一个插入一个5行行3列，宽度列，宽度为为750像素的表格，设置像素的表格，设置边框粗细：边框粗细：0，单元格边，单元格边距：距：0，单元格间距：，单元格间距：0，点击确认插入表格。点击确认插入表格。v 在表格属性面板中设置在表格属性面板中设置“对齐对齐”为居中对齐。为居中对齐。任务任务2 利用表格进行布局利用表格进行布局 2设置表格行高和列宽设置表格行高和列宽v 将光标放在表格行的左侧，变成实心箭头时单击，可选中将光标放在表格行的左侧，变成实心箭头时单击，可选中表格行编辑，表格行编辑，5行的行高分别设置为行的行高分别设置为150

9、，50，250，350，80。v 将光标放在表格列的上方，变成实心箭头时单击，可选中将光标放在表格列的上方，变成实心箭头时单击，可选中表格列编辑，表格列编辑，3行的列宽分别设置为行的列宽分别设置为200，150，400。设置行高设置行高设置列宽设置列宽任务任务2 利用表格进行布局利用表格进行布局 3合并单元格合并单元格v 将第一行的所有单元格和第五行的所有单元格分别合并，将第一行的所有单元格和第五行的所有单元格分别合并，方法是选中相邻单元格，点击属性面板的方法是选中相邻单元格，点击属性面板的“合并单元格合并单元格” v 用同样方法把第二行的第用同样方法把第二行的第2个、第个、第3个单元格和第四

10、行的第个单元格和第四行的第2个、第个、第3个单元格分别合并。个单元格分别合并。相关知识相关知识表格表格 1用表格制作主页用表格制作主页v （1）插入表格）插入表格v （2）网页框架）网页框架v （3）设计页眉）设计页眉v （4）设计信息区）设计信息区v （5）设置信息区）设置信息区v （6）设计版权区）设计版权区v （7）知识要点）知识要点相关知识相关知识表格表格 2表格与视图介绍表格与视图介绍（1）常用选项卡）常用选项卡v 在在Dreamweaver中的中的“插入插入”面板中，选择面板中，选择“常用常用”选项卡，可以调出如图所示的常用工具栏。选项卡，可以调出如图所示的常用工具栏。（2）布局选

11、项卡）布局选项卡v 在在Dreamweaver中的中的“插入插入”面板中，选择面板中，选择“布局布局”选项卡，可以看到选项卡，可以看到“标准视图标准视图”、“扩展视图扩展视图” 。相关知识相关知识表格表格 3表格详细介绍表格详细介绍（1）表格）表格 （2）新建表格）新建表格（3）表格编辑）表格编辑 （4）表格的整体设置）表格的整体设置（5）布局单元格属性面板）布局单元格属性面板课堂练习课堂练习2-21在在page1页面中插入第六行，背景设置为白色。页面中插入第六行，背景设置为白色。2在在page2页面中插入第六列，背景设置为白色。页面中插入第六列，背景设置为白色。课堂练习课堂练习2-23新建新

12、建page3课程表页面，使用表格布局，设置课程表页面，使用表格布局，设置表格的格式，美化表格。表格的格式，美化表格。任务任务3 修饰美化表格修饰美化表格 v 将第一行单元背景图片设为将第一行单元背景图片设为6.jpgv 第二行第二行2个单元格背景分别设为个单元格背景分别设为wawa.jpg，12.jpgv 第三行第三行3个单元格背景分别设为个单元格背景分别设为16.jpg，22.jpg，19.jpgv 第四行第四行2个单元格背景分别设为个单元格背景分别设为24.jpg，25.jpgv 第五行单元格背景图片设为第五行单元格背景图片设为10.jpg任务任务3 修饰美化表格修饰美化表格课堂练习课堂练

13、习2-3 1制作细线表格效果，要求表格边线效果比边框制作细线表格效果，要求表格边线效果比边框1像素效果像素效果更细。更细。2制作横竖分隔线效果。制作横竖分隔线效果。细线表格细线表格分隔线分隔线任务任务4 插入文字插入文字 2.4.1 普通文字插入普通文字插入v 在第二行第在第二行第1个单元格设置水平对齐方式为个单元格设置水平对齐方式为“右对齐右对齐”，输入文字输入文字“友情链接友情链接”，设置字体：默认字体，大小：，设置字体：默认字体，大小：18，颜色：颜色：#C28863 任务任务4 插入文字插入文字 2.4.2 使用嵌套表格定位插入文字使用嵌套表格定位插入文字v 在第三行第在第三行第1个单

14、元格设置水平居中对齐，插入宽度：个单元格设置水平居中对齐，插入宽度：160，5行行1列列的表格，将每行的行高设置为的表格，将每行的行高设置为40，对齐方式为，对齐方式为“左对齐左对齐”v 然后在各行插入图片然后在各行插入图片23.jpg和相应文字，文字设置加粗，字体：楷和相应文字，文字设置加粗，字体：楷体体_GB2312，字号：，字号：18，颜色：，颜色：#F4CEA1任务任务4 插入文字插入文字 v 在第四行第在第四行第1个单元格设置水平居中，垂直底部对齐，插入个单元格设置水平居中，垂直底部对齐，插入3行行2列表列表格，宽度格，宽度200，每行行高，每行行高90，第，第1列、第列、第2列列宽

15、分别为列列宽分别为90，110v 分别输入班主任：何青，班长：魏志国，副班长：齐子聪的个人信息，分别输入班主任：何青，班长：魏志国，副班长：齐子聪的个人信息，字体大小：字体大小：12，颜色：，颜色：#fbbb73任务任务4 插入文字插入文字 v 用同样的方法在第四行第用同样的方法在第四行第2个单元格插入个单元格插入6行行4列表格，宽度为列表格，宽度为480v 第一行行高设为第一行行高设为60，其余各行行高为，其余各行行高为48v 将将4列的列宽分别设置为列的列宽分别设置为80，160，80，160v 合并第一行合并第一行4个单元格个单元格 任务任务4 插入文字插入文字v 在第一行输入在第一行输

16、入“心情寄语心情寄语”，字体大小：字体大小：24，加粗，颜色：加粗，颜色：#F0AD28v 第一列和第三列第一列和第三列输入各位同学姓输入各位同学姓名，字体大小：名，字体大小：14，加粗，颜色：，加粗，颜色：#C28863v 第二列和第四列第二列和第四列输入各位同学的输入各位同学的心情寄语，字体心情寄语，字体大小：大小：12，颜色：，颜色：#fbbb73 课堂练习课堂练习2-4 1使用嵌套表格制作图文混排效果使用嵌套表格制作图文混排效果 课堂练习课堂练习2-4 2使用素材建立如下页面使用素材建立如下页面 课堂练习课堂练习2-4 3使用素材建立如下页面使用素材建立如下页面 任务任务5 插入多媒体

17、元素插入多媒体元素 2.5.1 插入图片插入图片v 在第四行第在第四行第1个单元格嵌套表格内，分别插入代表班主任、班长和副个单元格嵌套表格内，分别插入代表班主任、班长和副班长的头像图片班长的头像图片 v 点击插入的图片，查看图片属性，分辨率为点击插入的图片，查看图片属性，分辨率为120 x120v 而单元格的大小为而单元格的大小为90 x90，这时需要在属性面板调整图片的宽度和，这时需要在属性面板调整图片的宽度和高度为高度为80任务任务5 插入多媒体元素插入多媒体元素 2.5.2 插入插入flash v 将素材中的将素材中的photo.swf文件拷入站点文件拷入站点flash文件夹文件夹F:t

18、ask2flash，在布局表格第三行第，在布局表格第三行第3个单元格设置个单元格设置水平居中对齐，插入水平居中对齐，插入flash文件。文件。 v 点击点击flash可以在属性面板中对长度、宽度、参数等进行可以在属性面板中对长度、宽度、参数等进行设置设置任务任务5 插入多媒体元素插入多媒体元素 v 此时插入的此时插入的flash在在Dreamweaver编辑窗口中是个灰编辑窗口中是个灰色标志，只有在浏览器中预览才可以看到实际效果色标志，只有在浏览器中预览才可以看到实际效果任务任务5 插入多媒体元素插入多媒体元素2.5.3 插入插件插入插件v 将素材中的将素材中的qcjnc.mp3文件拷入站点文

19、件拷入站点media文件夹文件夹F:task2mediav 在布局表格第四行第在布局表格第四行第2个单元格的嵌套表格个单元格的嵌套表格“心情寄语心情寄语”单元格，使单元格，使用插件插入音频文件。用插件插入音频文件。 v 点击插件可以在属性面板中对长度、宽度、参数等进行设置，在此设点击插件可以在属性面板中对长度、宽度、参数等进行设置，在此设置宽度：置宽度：300，高度，高度:40 课堂练习课堂练习2-5 1设置鼠标经过图像设置鼠标经过图像 初始图像初始图像鼠标经过图像鼠标经过图像课堂练习课堂练习2-52插入一个宽插入一个宽640，高，高120，1行行4列的表格，本别插入列的表格，本别插入4张素材

20、图片，张素材图片，并重新设置图片大小以适应单元格的大小并重新设置图片大小以适应单元格的大小 3使用插件插入视频文件使用插件插入视频文件“clock.avi”，并设置视频窗口大小为，并设置视频窗口大小为321x321 任务任务6 链接的使用链接的使用 2.6.1 文字链接文字链接v 选中选中“班级论坛班级论坛”，在属性面板，在属性面板“链接链接”右侧选择右侧选择“浏览文件浏览文件”v 在在“选择文件选择文件”窗口需指定链接前往的地址，在此选择站点中的页面窗口需指定链接前往的地址，在此选择站点中的页面classweibo.html，使用相对地址，使用相对地址 v 点击点击“确定确定”插入超级链接，

21、这时文字变成带有下划线的样式插入超级链接，这时文字变成带有下划线的样式 任务任务6 链接的使用链接的使用 v _blank 在新的浏览器窗口中打开链在新的浏览器窗口中打开链接的文档，同时保持当前窗口不变。接的文档，同时保持当前窗口不变。 v _parent 在显示链接的框架的父框架在显示链接的框架的父框架集中打开链接的文档，同时替换整个框集中打开链接的文档，同时替换整个框架集。架集。 v _self 在当前框架中打开链接，同时在当前框架中打开链接，同时替换该框架中的内容。替换该框架中的内容。 v _top 在当前浏览器窗口中打开链接的在当前浏览器窗口中打开链接的文档，同时替换所有框架。文档，同

22、时替换所有框架。v选择链接属性面板中的目标菜单，可以使网页在不同选择链接属性面板中的目标菜单，可以使网页在不同的地方打开的地方打开 任务任务6 链接的使用链接的使用 v2.6.2 电子邮件链接电子邮件链接v 在最后一行单元格输入在最后一行单元格输入“联系方式联系方式”，“奇奇：奇奇：”，设置字体大小：，设置字体大小：14，加粗，颜色：，加粗，颜色：#C28863v 选中选中email地址地址“”，在插入栏常用工具面，在插入栏常用工具面板点击板点击“电子邮件链接电子邮件链接”，打开电子邮件链接窗口，打开电子邮件链接窗口 任务任务6 链接的使用链接的使用 v 点击点击“确定确定”插入电子邮件链接，

23、此时页面中的电子邮件插入电子邮件链接，此时页面中的电子邮件地址变成带有下划线的样式地址变成带有下划线的样式v 点击链接可给作者发邮件点击链接可给作者发邮件任务任务6 链接的使用链接的使用 2.6.3 图片链接图片链接v 选定何青的头像选定何青的头像77.jpgv 在图像属性面板在图像属性面板“链接链接”右侧点击右侧点击“指向文件指向文件”，拖拽出一个箭头指，拖拽出一个箭头指向文件面板中的向文件面板中的“heqing.html”任务任务6 链接的使用链接的使用 2.6.4 插入导航条插入导航条v 在第二行第在第二行第2个单元格插入个单元格插入4个图片链接，需要准备个图片链接，需要准备8个图个图片

24、素材片素材 任务任务6 链接的使用链接的使用 v 将单元格对齐方式设为水平居中将单元格对齐方式设为水平居中v 在插入栏常用工具面板点击在插入栏常用工具面板点击“图像：导航条图像：导航条” ，打开，打开“插插入导航条入导航条”窗口窗口 任务任务6 链接的使用链接的使用 v 在在“项目名称项目名称”输入输入“xiangmu1”，“状态图像状态图像”选择选择1.gif，“鼠标经过图像鼠标经过图像”选择选择2.jpg，“按下时，前往的按下时，前往的URL”输入链接地输入链接地址址v 点击点击+号，分别添加号，分别添加xiangmu2对应图片对应图片3.jpg和和4.jpg，xiangmu3对应图片对应

25、图片5.jpg和和6.jpg，xiangmu4对应图片对应图片7.jpg和和8.jpgv 在窗口最下方选择在窗口最下方选择“插入插入”项为项为“水平水平”，勾选，勾选“使用表格使用表格”，点击，点击确定插入导航条确定插入导航条 任务任务6 链接的使用链接的使用 v 导航条效果如图所示，光标经过导航条时显示的图片会变化导航条效果如图所示，光标经过导航条时显示的图片会变化v 如需改变链接地址，可以选定图片，在图像属性面板如需改变链接地址，可以选定图片，在图像属性面板“链接链接”处进行处进行修改修改 课堂练习课堂练习2-6 v 1在在5个网页个网页page1、page2、page3、page4、pa

26、ge5之间建立超级链接，要求各链接都要有效。在之间建立超级链接，要求各链接都要有效。在page4“站点地图站点地图”页面，设置在站点地图相应区域点击，页面，设置在站点地图相应区域点击，可打开相关页面。可打开相关页面。主页效果图主页效果图站点地图站点地图课堂练习课堂练习2-6 2建立主页建立主页“图片欣赏图片欣赏”，设置图片链接，点击小图打开，设置图片链接，点击小图打开大图效果。大图效果。任务任务7 特殊字符的输入特殊字符的输入 v 在最后一行单元格在最后一行单元格“联系方式联系方式”左侧插入左侧插入“班级主页班级主页”，在特殊字符，在特殊字符列表选择列表选择v 在特殊字符列表选择在特殊字符列表

27、选择 多次，插入多次，插入3个空格字符个空格字符v 点击特殊字符下拉列表的，打开点击特殊字符下拉列表的，打开“插入其他字符插入其他字符”窗口，可在网页中窗口，可在网页中插入特殊字符插入特殊字符 课堂练习课堂练习2-71插入特殊字符，将素材文字进行排版处理插入特殊字符，将素材文字进行排版处理 任务任务8 初识初识HTML2.8.1 插入滚动字幕插入滚动字幕v 在班级主页第三行第在班级主页第三行第2个单元格，插入字幕文字个单元格，插入字幕文字.txt文档文档中的文字，设置字体大小：中的文字，设置字体大小：14，颜色：，颜色：#c38964v 选定文字，切换到拆分视图或代码视图，在文字左右两侧选定文

28、字，切换到拆分视图或代码视图，在文字左右两侧插入插入marquee标签标签v 在前标签中加入参数在前标签中加入参数behavior=”scroll”，direction=”up” v 在浏览器中预览网页效果在浏览器中预览网页效果 任务任务8 初识初识HTML 任务任务8 初识初识HTML 2.8.2 认识认识HTML 1HTML编程技术编程技术v HTML（Hypertext Markup Language，超文本标记语言）是用超文本标记语言）是用于创建于创建Web文档的编文档的编辑语言。辑语言。 v 自从自从1990年首次用于年首次用于网页编辑后，由于其编网页编辑后，由于其编写制作的简单性，

29、写制作的简单性，HTML迅速成为网页编迅速成为网页编程的主流语言程的主流语言查看源文件查看源文件任务任务8 初识初识HTML 2.HTML简介简介v HTML文件是标准的文件是标准的ASCII文本文件，与平台无关，可被任何文本编文本文件，与平台无关，可被任何文本编辑器编辑。文件的扩展名为辑器编辑。文件的扩展名为.html或或.htm。3HTML基本语法和结构基本语法和结构（1）HTML文档包括文档包括3个主要标记，文档标记个主要标记，文档标记、头部标记头部标记、体部标记、体部标记。（2）标记不区分大小写。）标记不区分大小写。（3）标记名与）标记名与“”之间不能有空格。之间不能有空格。v 在在内称为文件的头部，这部分信息在浏览器内称为文件的头部，这部分信息在浏览器的