排序公开课.docx

《排序公开课.docx》由会员分享，可在线阅读，更多相关《排序公开课.docx（19页珍藏版）》请在第一文库网上搜索。

1、项目1认识网站与网页任务任务1认识电商网站活动1找到电商网站活动2描述电商网站功能及架构活动3认识网页任务2制作网页活动1初识网页风格活动2制作网页3.制作网页步骤A.认识软件。B.创建站点。C.新建一保存文件。在Dreamweaver中新建一张空白页面D.插入表格。E.插入图片。在网页中插人图片。F.输入文本。在网页中输入文本。G.预览。在浏览器中预览制作的网站。1 .平台购物的流程登录一一选择/浏览商品一一提交订单支付购买成功2 .网页设计与制作流程选择主题一一规划结构一一收集素材一|一制作网页检测网页设计阶段制作阶段检测阶段A.执行【站点】【新建站点】【输入站点名称】【指定本地站点文件夹

2、】单击“保存”按钮即可。B.在软件的初始界面选择【新建】【HTM1】或从文件菜单栏中选择【新建】【空白页】【HTM1】【创建】，即可打开一张空白HTM1文档。单击【文件】【保存】【修改保存路径】【输入文件名(index)】【保存】，即可实现对网页的保存C.在Dreamweavercs66软件的菜单上选择【插入】【表格】在弹出的“表格”对话框中输入参数，单击“确定”按钮。D.将光标定位在第一行单元格中，执行【插入】【图像】【选择IogoJpg图像】【确定】将光标定位在第二行单元格中，执行【插入】【图像】【选择1jPg图像】【确定】E.在表格的第三行单元格中输入文字:Copyright()2017

3、达芙妮F.单击工具栏上的图标，选择在已安装的浏览器中进行预览，或按快捷键F12预览在默认浏览器项目2制作网站注册登录模任务1制作二维码登录页面活动1搜索二维码的生成方法活动2实现一维码登录页面布局A.A.B.C.D.创建站点，新建文件。存放本地用户素材等资料，并为网页的制作创建好文件。插入表格。根据具体样稿设置相应的表格，对网页进行布局。编辑表格。调整表格中各单元格的位置与大小，并插入图片及文字，达到图片混排的效果。网页预览。测试网页效果。B.C.D.A.打开浏览器，进行二维码生成方法的搜索。B.点开链接，找到合适的二维码生成器。C.生成二维码。添加个人信息，完成二维码生成。D.根据个人需要进

4、行二维码的美化。设计属于自己的二维码执行【站点】【新建站点】【输入站点名】【指定本地站点文件夹】【保存】在软件的初始界面选择【新建】【HTM1】或从文件菜单栏中选择【新建】【空白页】【HTM1】【创建】，即可打开一张空白HTM1文档。单击【文件】【保存】【修改保存路径】【输入文件名(index)】【保存】，即可实现对网页的保存。在DreamWeaVerCS6软件的菜单上选择【插入】【表格】，在弹出的“表格”对话框中输入参数,单击“确定”按钮。在属性面板中选择对齐方式为“居中对齐”。编辑表格，并将图片和文字插入对应位置。设置第一行单元格的行高为120px,并将单元格拆分为一行两列，分别放入对应的

5、图片和文字。设置第二行单元格背景颜色为“#e93854,并将单元格拆分为一行两列，在第一列中放入图片A,创建站点，新建并保存文件。B.插入表格。设置表格为一行一列，宽424px,边框Ipx,表格居中对齐。C.嵌套表格。在当前表格中插入一个新的表格，设置表格为五行一列、宽IO0%,表格居中对齐D.插入图像。依次从一至五行插入图像“1.jpg”“2.jpg”“3.jpg”“4.jpg”“5.jpg”。E.预览。按F12键，预览用户登录页面。活动2实现登录页面功能A.认识表单对象。B.创建站点，新建文件。C.插入表格。D,插入表单域。E.嵌套表格F.插入表头图像。G.插入文本域。H.插入图像域。I.

6、插入按钮。J.网页预览。“1pg;在第二列中插入一个宽350px、四行一列的表格，设置背景颜色为白色。在第一行和第四行分别插入图“3ig”“4Jjpg”,在第二行中插人已生成的二维码，在第三行中输入文字“打开手机易购扫码二维码”并设置字体颜色。E.预览。单击工具栏上的图标，选择在已安装的浏览器中进行预览，或按快捷键F12预览在默认浏览器任务2制作网页登录页面活动1实现登录页面布局A.创建站点并新建文件。存放本地用户素材的文件夹，并为网页的制作创建好文件B.插入表格。通过表格的插入，规划好登录框的大小和位置，并通过嵌套新的表格，对登录框进行布局。C.插入图像。放入相应的网页元素，达到图片混排的效

7、果。D.网页预览。测试网页效果。A.认识表单对象。单击【插入记录】【表单】可以选择需要的表单对象B.创建站点。C.新建一保存文件。D.插入表格。设置表格为一行一列，宽420px,边框Ipx,表格居中对齐E.插入表单域。执行“插入-表单表单”。F.插入表格。在当前表格中插入一个新的表格，设置表格为五行一列、宽420x,表格居中对齐。设置表格所有单元格行高为50poG.插入图片。在第一行插入图片“1.jpg”H.插入文本域。在第二行中选择“插入一表单一文本域”，在弹出的对话框中设置标签为“用户名”，单击“确定”按钮。以同样的方法在第三行中插入“密码”文本域。设置两个单元格水平方向居中对齐I.插入登

8、录按钮图像域。选择【插入】【表单【图像域】，插入图像“2jpg”，并设置该单元格水平方向居中对齐。J.插入注册按钮。将光标移至第五行，设置单元格水平方向右对齐，选择【插入】【表单】【图按钮】插入完成，选中该按钮，在属性面板中将其值设置为“注册”K.预览。按F12键，预览用户登录页面。表单的处理流程访问者填写表单并递交给网站服务器处理一一服务器脚本或应用程序对接收的表单信息进行处理一一服务器生成新的HTM1网页并发送给访问者创建站点。文本对齐方式为“右对齐”。最后，在第七行的右列单元格中插入文字“我已阅读并接受服务协议”。6)插入表单对象。按照效果图，在【插入】【表单】中找到相应的表单对象:文本

9、域、复选框、图像域，完成表单对象的插入。(7)预览。按F12键，预览用户注册页面。打开浏览器.运用搜索引擎(如百度)，在搜索栏中输入想要查找的网站名称即可(2)新建一保存文件。将网页命名为“index.htm1”插人表单域。插入表格。设置表格为八行一列，宽450px,分别在表格第二行至第七行单击鼠标右键选择【表格】【拆分单元格】将各行拆分成两列，并设置左列单元格宽度为140PX(5)插入文字。在表格第一行插入文字“易购网注册”并设置文本对齐方式为“居中对齐”。在表格第二行至第六行的左列单元格中，依次插入文字“用户名”“手机号”“短信验证”“设置密码”“确认密码”，并设置任务3制作网页注册页面活

10、动1实现注册页面布局创建站点并新建文件。存放本地用户素材的文件夹，并为网页的制作创建好文件。插入表格。根据具体样稿设置对应表格，确定网页内容的显示范围和基本布局。输入文字。根据样稿添加网页内容标题，制作网页。拆分单元格。进一步对照样稿，完成各输入框及按钮图像的网页布局。插入图像。根据样稿显示，插入相应图像，完善网页内容。网页预览。测试网页效果。活动2实现注册页面功能创建站点并新建文件。存放本地用户素材的文件夹，并为网页的制作创建好文件。插入表单域。为表单对象的插入作准备，证网页中的表单对象能够正常运行。插入表格。完成表单对象的网页布局。插入表单对象。根据样稿设置对应的表单对象，完成用户信息提交

11、功能的制作。插入文字。根据样稿添加对应的文字信息，完善页面。网页预览。测试网页效果。项目3制作网站导航系统打开DreamWeaVerCS6软件新建站点，将图像素材存放在ImageS文件夹中。插入表格。插入一个二行一列、宽450PX的表格。插入文字。在第一行中输入文字“易购网注册”。在属性栏中设置格式为“标题1”。拆分单元格。将光标移至第二行，单击【表格】【拆分单元格】，将当前单元格拆分成七行。(5)插入图像。插人图像XJpg至7JPg(6)预览。任务1制作首页导航条活动1实现网站导航条的布局活动2制作鼠标经过效果打开DreamWeaVer软件，新建站点，放入资源包文件夹“项目3/任务“活动2”

12、作为站点文件夹，打开“index.htm1”文件。制作首页图片导航鼠标经过图片效果。鼠标经过图像效果命令:菜单【插入】【图像对象】【鼠标经过图像命令】。用相同方法制作设置“秋季新品”“针织卫衣”“运动系列”“西服套装”“牛仔系列”图片导航鼠标经过图片效果。点开链接。在查找结果中找到该网站官方网址的链接。浏览网页。打开链接之后便可浏览、观察该网站的导航布局。保存网页文件，预览网页效果打开Dreamweaver软件，新建站点，将资源包文件夹“项目3/任务1活动2”作为站点文件夹,打开uindex,htm1w文件。(2)选中第一个导航“首页”图像，按“de1ete”键删除。单击“插入”工具栏“常用”

13、选项下图像按钮的下拉三角形，在下拉菜单中选择“鼠标经过图像”命令，或选择菜单中的【插入】【图像对象】【鼠标经过图像】命令。出现“插入鼠标经过图像”对话框。分别单击右侧的“浏览”按钮。任务2制作首页商品分类活动1实现商品分类栏的制作(1)新建站点，把“项目3/任务2活动1”文件夹作为站点文件夹,打开indexhtm1文件。在导航栏下新建1行2列的表格。制作商品分类板块，在新建表格的左侧单元格中新建6X1的表格，输人文字。修改商品分类列表中文字的样式。为导航文字设置鼠标经过文字变色效果保存网页文件，预览网页效果。活动2实现页面跳转(1)新建站点，将“项目3/任务2/活动2”文件作为站点文件,打开i

14、ndex.htm1文件。为导航文字“秋季新品”设置超链接:运用属性面板“输入链接地址”的方式。为导航文字“外套/风衣/卫衣”设置超链接:运用属性面板“指向文件”图标。(4)为导航文字“针织毛衣”设置超链接:运用属性面板“浏览”图标。为剩余导航文字设置超链接。用相同的方法分别设置“秋季新品”“针织卫衣”“运动系列”(6)保存网页文件，预览网页效果“西服套装”“牛仔系列”。通过“行为”面板进行制作鼠标经过图像打开index.htm1文件。2)选中“首页”图片，单击“行为”面板上的“+”号，选择“交换图像”。在交换图像对话框中，”设定原始档为12.jpg,单击“确定”按钮，完成设置。仿照“首页”图片

15、的操作，完成其他5个导航菜单的设置保存网页文件，预览网页效果。新建站点，放入“项目3/任务2/活动1”的文件，打开index,htm1文件，在导航栏下方插入行，并合并单元格。在新插入的行中插入1行2列的表格，宽度为100%,两个单元格的宽度比为2:8。在1X2表格的左侧单元格中插入6X1的表格，宽度为IO0%,并输入文字“秋季新品”“外套/风衣/卫衣”“针织毛衣”“牛仔裤/休闲裤/短裤”“西服套装”“长袖/衬衫”“马甲/背心”。修改商品分类列表中文字的样式。选择“新CSS规则，编辑CSS规则，选择“复合内容”选择器，默认选择器名称为“tdtab1e”,在得到的对话框中选择“font-size”为18,font-weight为“bo1d”o为导航文字设置鼠标经过文字变色效果。选择“新CSS规则,编辑CSS规则，选择“复合内容”选择器，默认选择器名称为“td:hove