搜索
学习情境二班级主页的制作学习目标学习网页布局的基础知识练习使用表格布局练习在网页中插入超级链接、多媒体元素完成班级主页的制作任务1认识布局2.1.1页面尺寸分辨率在800x600的情况下，页面的显示尺寸为：780x428像素；分辨率在1024x768的情况下，页面的显示尺寸为：1007x600像素。一般情况下，不要让访问者拖动页面超过三屏。如果需要在同一页面显示超过三屏的内容，那么最好能在上面做上页面内部锚点连接，方便访问者浏览。任务1认识布局2.1.2整体造型1．国字型即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，最下面是网站的一些基本信息、联系方式、版权声明等。2．拐角型这种结构与上一种其实只是形式上的区别，上面是标题及广告横幅，接下来的左侧（或右侧）是一窄列链接等，右列（或左列）是很宽的正文，下面也是一些网站的辅助信息。任务1认识布局国字型拐角型任务1认识布局3．三字型即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，主要内容以行的形式罗列，最下面是网站的一些基本信息、联系方式、版权声明等。4．标题正文型这种类型即最上面是标题或类似的一些东西，下面是正文。任务1认识布局三字型标题正文型任务1认识布局2.1.3页面组成1．页头2．页脚3．文本4．图片5．多媒体任务1认识布局2.1.4网页布局技术1．表格在网页用表格显示数据是表格功能的一部分，现在表格在网页更多是用于网页的布局，表格布局的优势在于它能对不同对象加以处理，而又不用担心不同对象之间的影响。2．框架在Dreamweaver中框架是除了表格以外另一种常用的网页布局排版工具。框架结构就是把浏览器窗口划分为多个区域，每个区域都可以分别显示不同的网页。使用框架最常见的用途就是导航，在使用了框架以后，用户的浏览器不需要为每个页面重新加载与导航相关的图形。3．层叠样式表CSS（CascadingStyleSheet，“层叠样式表”）是一组格式设置规则，用于控制Web页面的外观。通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。课堂练习2-11．浏览优秀网站，下载源文件，分析完成如下报告：网站地址：____________________________整体造型（国字型、三字型、拐角型…）：________布局技术（表格、框架、CSS）：______________页面组成：____________________________任务2利用表格进行布局在Dreamweaver中新建站点“班级主页”把网页素材拷贝到图像目录下在站点新建主页文件index.html，标题设为“班级主页”如要转到其它本地站点，可以在文件面板下拉菜单中切换任务2利用表格进行布局1．插入表格打开index.html文件，在插入栏“常用”面板选择“表格”，打开插入表格窗口插入一个5行3列，宽度为750像素的表格，设置边框粗细：0，单元格边距：0，单元格间距：0，点击确认插入表格。在表格属性面板中设置“对齐”为居中对齐。任务2利用表格进行布局2．设置表格行高和列宽将光标放在表格行的左侧，变成实心箭头时单击，可选中表格行编辑，5行的行高分别设置为150，50，250，350，80。将光标放在表格列的上方，变成实心箭头时单击，可选中表格列编辑，3行的列宽分别设置为200，150，400。设置行高设置列宽任务2利用表格进行布局3．合并单元格将第一行的所有单元格和第五行的所有单元格分别合并，方法是选中相邻单元格，点击属性面板的“合并单元格”用同样方法把第二行的第2个、第3个单元格和第四行的第2个、第3个单元格分别合并。相关知识—表格1．用表格制作主页（1）插入表格（2）网页框架（3）设计页眉（4）设计信息区（5）设置信息区（6）设计版权区（7）知识要点相关知识—表格2．表格与视图介绍（1）常用选项卡在Dreamweaver中的“插入”面板中，选择“常用”选项卡，可以调出如图所示的常用工具栏。（2）布局选项卡在Dreamweaver中的“插入”面板中，选择“布局”选项卡，可以看到“标准视图”、“扩展视图”。相关知识—表格3．表格详细介绍（1）表格（2）新建表格（3）表格编辑（4）表格的整体设置（5）布局单元格属性面板课堂练习2-21．在page1页面中插入第六行，背景设置为白色。2．在page2页面中插入第六列，背景设置为白色。课堂练习2-23．新建page3课程表页面，使用表格布局，设置表格的格式，美化表格。任务3修饰美化表格将第一行单元背景图片设为6.jpg第二行2个单元格背景分别设为wawa.jpg，12.jpg第三行3个单元格背景分别设为16.jpg，22.jpg，19.jpg第四行2个单元格背景分别设为24.jpg，25.jpg第五行单元格背景图片设为10.jpg任务3修饰美化表格课堂练习2-31．制作细线表格效果，要求表格边线效果比边框1像素效果更细。2．制作横竖分隔线效果。细线表格分隔线任务4插入文字2.4.1普通文字插入在第二行第1个单元格设置水平对齐方式为“右对齐”，输入文字“友情链接”，设置字体：默认字体，大小：18，颜色：#C28863任务4插入文字2.4.2使用嵌套表格定位插入文字在第三行第1个单元格设置水平居中对齐，插入宽度：160，5行1列的表格，将每行的行高设置为40，对齐方式为“左对齐”然后在各行插入图片23.jpg和相应文字，文字设置加粗，字体：楷体_GB2312，字号：18，颜色：#F4CEA1任务4插入文字在第四行第1个单元格设置水平居中，垂直底部对齐，插入3行2列表格，宽度200，每行行高90，第1列、第2列列宽分别为90，110分别输入班主任：何青，班长：魏志国，副班长：齐子聪的个人信息，字体大小：12，颜色：#fbbb73任务4插入文字用同样的方法在第四行第2个单元格插入6行4列表格，宽度为480第一行行高设为60，其余各行行高为48将4列的列宽分别设置为80，160，80，160合并第一行4个单元格任务4插入文字在第一行输入“心情寄语”，字体大小：24，加粗，颜色：#F0AD28第一列和第三列输入各位同学姓名，字体大小：14，加粗，颜色：#C28863第二列和第四列输入各位同学的心情寄语，字体大小：12，颜色：#fbbb73课堂练习2-41．使用嵌套表格制作图文混排效果课堂练习2-42．使用素材建立如下页面课堂练习2-43．使用素材建立如下页面任务5插入多媒体元素2.5.1插入图片在第四行第1个单元格嵌套表格内，分别插入代表班主任、班长和副班长的头像图片点击插入的图片，查看图片属性，分辨率为120x120而单元格的大小为90x90，这时需要在属性面板调整图片的宽度和高度为80任务5插入多媒体元素2.5.2插入flash将素材中的photo.swf文件拷入站点flash文件夹F:\task2\flash，在布局表格第三行第3个单元格设置水平居中对齐，插入flash文件。点击flash可以在属性面板中对长度、宽度、参数等进行设置任务5插入多媒体元素此时插入的flash在Dreamweaver编辑窗口中是个灰色标志，只有在浏览器中预览才可以看到实际效果任务5插入多媒体元素2.5.3插入插件将素材中的qcjnc.mp3文件拷入站点media文件夹F:\task2\media在布局表格第四行第2个单元格的嵌套表格“心情寄语”单元格，使用插件插入音频文件。点击插件可以在属性面板中对长度、宽度、参数等进行设置，在此设置宽度：300，高度:40课堂练习2-51．设置鼠标经过图像初始图像鼠标经过图像课堂练习2-52．插入一个宽640，高120，1行4列的表格，本别插入4张素材图片，并重新设置图片大小以适应单元格的大小3．使用插件插入视频文件“clock.avi”，并设置视频窗口大小为321x321任务6链接的使用2.6.1文字链接选中“班级论坛”，在属性面板“链接”右侧选择“浏览文件”在“选择文件”窗口需指定链接前往的地址，在此选择站点中的页面classweibo.html，使用相对地址点击“确定”插入超级链接，这时文字变成带有下划线的样式任务6链接的使用_blank在新的浏览器窗口中打开链接的文档，同时保持当前窗口不变。_parent在显示链接的框架的父框架集中打开链接的文档，同时替换整个框架集。_self在当前框架中打开链接，同时替换该框架中的内容。_top在当前浏览器窗口中打开链接的文档，同时替换所有框架。选择链接属性面板中的目标菜单，可以使网页在不同的地方打开任务6链接的使用2.6.2电子邮件链接在最后一行单元格输入“联系方式”，“奇奇：gigi@riverisland.com”，设置字体大小：14，加粗，颜色：#C28863选中email地址“gigi@riverisland.com”，在插入栏常用工具面板点击“电子邮件链接”，打开电子邮件链接窗口任务6链接的使用点击“确定”插入电子邮件链接，此时页面中的电子邮件地址变成带有下划线的样式点击链接可给作者发邮件任务6链接的使用2.6.3图片链接选定何青的头像77.jpg在图像属性面板“链接”右侧点击“指向文件”，拖拽出一个箭头指向文件面板中的“heqing.html”任务6链接的使用2.6.4插入导航条在第二行第2个单元格插入4个图片链接，需要准备8个图片素材任务6链接的使用将单元格对齐方式设为水平居中在插入栏常用工具面板点击“图像：导航条”，打开“插入导航条”窗口任务6链接的使用在“项目名称”输入“xiangmu1”，“状态图像”选择1.gif，“鼠标经过图像”选择2.jpg，“按下时，前往的URL”输入链接地址点击+号，分别添加xiangmu2对应图片3.jpg和4.jpg，xiangmu3对应图片5.jpg和6.jpg，xiangmu4对应图片7.jpg和8.jpg在窗口最下方选择“插入”项为“水平”，勾选“使用表格”，点击确定插入导航条任务6链接的使用导航条效果如图所示，光标经过导航条时显示的图片会变化如需改变链接地址，可以选定图片，在图像属性面板“链接”处进行修改课堂练习2-61．在5个网页page1、page2、page3、page4、page5之间建立超级链接，要求各链接都要有效。在page4“站点地图”页面，设置在站点地图相应区域点击，可打开相关页面。主页效果图站点地图课堂练习2-62．建立主页“图片欣赏”，设置图片链接，点击小图打开大图效果。任务7特殊字符的输入在最后一行单元格“联系方式”左侧插入“班级主页”，在特殊字符列表选择在特殊字符列表选择多次，插入3个空格字符点击特殊字符下拉列表的，打开“插入其他字符”窗口，可在网页中插入特殊字符课堂练习2-71．插入特殊字符，将素材文字进行排版处理任务8初识HTML2.8.1插入滚动字幕在班级主页第三行第2个单元格，插入字幕文字.txt文档中的文字，设置字体大小：14，颜色：#c38964选定文字，切换到拆分视图或代码视图，在文字左右两侧插入marquee标签在前标签中加入参数behavior=”scroll”，direction=”up”在浏览器中预览网页效果任务8初识HTML任务8初识HTML2.8.2认识HTML1．HTML编程技术HTML（HypertextMarkupLanguage，超文本标记语言）是用于创建Web文档的编辑语言。自从1990年首次用于网页编辑后，由于其编写制作的简单性，HTML迅速成为网页编程的主流语言查看源文件任务8初识HTML2.HTML简介HTML文件是标准的ASCII文本文件，与平台无关，可被任何文本编辑器编辑。文件的扩展名为.html或.htm。3．HTML基本语法和结构（1）HTML文档包括3个主要标记，文档标记html…/html、头