《网页设计》电子商务-教学课件-设计制作商务网站的网页PPT课件.pptx
网页设计
项目描述项目分解项目三设计制作商务网站的网页2学习网页制作的相关知识和技能运用Photoshop的基本方法制作服装网页Banner运用Flash的基本使用技巧制作网页动画任务一设计制作体育商品展示网页任务二设计制作网上服装商品店铺任务三让网上店铺的商品鲜活起来
任务一设计制作体育商品展示网页活动一制作足球体育用品店铺页面活动二制作足球商品店铺相关网页3
活动背景活动一制作足球体育用品店铺页面4“足球天下”店铺的主页面要吸引人，而且要能把需要展示的内容都展示出来，页面布局及内容安排要合理。使用Dreamweaver软件制作网页还是非常直观的，所谓“所见即所得”，操作与常用的一些软件基本相同，使用这个软件来制作网页是一个不错的选择。
活动实施5Step1：页面规划使用表格来控制和创建页面是一个基本且简单的方法。主页面制作，一般包括页头、主体、页尾三个部分。页头一般放置网站的logo和导航链接，主体是网页的内容部分，页尾会放置一些版权声明、使用协议等。在制作网页时应尽量避免出现横向滚动条。新建文件夹①插入一个三行一列的表格②使用表格属性将表格置于页面中心新建文件夹设置表格表格属性窗口①②③
活动实施6Step1：页面规划③插入Banner图片插入Banner图片（一）插入Banner图片（二）2.编辑导航栏拆分单元格设置图片①②
活动实施7Step1：页面规划表格设置后的效果设置表格使用CSS样式定义文字格式颜色CSS样式属性设置用HTML语句设置行高tdheight=“10”?div?td行高修改语句③④⑤⑥
活动实施8Step1：页面规划设置单元格图片插入后的效果图3.编辑内容表①在导航栏右侧单元格内插入一个放置商品内容的表格。②在第一行插入1行3列的表格。③在第二行中插入1行6列的表格。④将第三行拆分为两行。在第三行插入1行2列的表格。在第二行两个单元格内分别插入图片⑦⑧
活动实施9Step1：页面规划图片插入后的效果图⑤在第四行内插入图片4.编辑网页说明与店铺服务将外部表格最后一行拆分为两行，在第三行内插入图片，在第四行内输入文字。网页底部样张
活动实施10Step1：页面规划设置背景颜色5.页面设置6.保存并预览页面网页样张页面设置
任务拓展11设计制作田径赛事商品页面：按步骤完成网页的制作，并以此为例完成田径赛事体育用品的主页。体验活动评价表
活动背景活动二制作足球商品店铺相关网页12一般网站都是由多个页面组成的，彼此间相互链接，链接的设置是必要的。网站内容一般都是有时效性的，每天甚至每小时都会有一些数据的更新与变化，正如世界杯每天都有比赛与大量的比赛新闻。要做到快速更新，我们可以利用导入数据的方法来解决。
活动实施13Step1：导入分页数据①打开“index.html”，分别另存为“hrsjb.html”、“rxtj.html”保存在files文件夹内。打开“hrsjb.html”，删除左侧“友情链接”以及文字下的图片。②将左侧图片导航移至顶端居中。网页修改例图表格设置属性图③选中右侧A组赛事，可把光标定位在表格内用状态栏的table标签选中整个表格，然后删除。
活动实施14Step1：导入分页数据④将光标定在三行表格的第一行，单击“文件”菜单—“导入”命令—导入“Word文档”，在“导入Word文档”对话框中选择“赛程”文件，单击“打开”。对弹出的提示对话框，单击“确定”。导入文档对话框导入确认图②①
活动实施15Step2：导入表格格式化导入网页的表格，需要进行格式化。导入后的数据表格图表格属性设置表格效果图按照以上操作，将其余几张表格都格式化。③④⑤
活动实施16Step3：锚点链接锚点是网页制作中常用的一种页面内的超级链接，通过链接可以快速将访问者带到指定位置。①在scss.html网页右侧“A组”上方插入1行8列表格，宽540像素，输入文字。并设置表格格式水平“居中对齐”垂直“居中”，单元格宽60像素，高40像素，背景颜色为#FF9900。表格设置样图表格属性图②光标定在“A组”文字前，在“A组”前增加一个名为“noa”的锚点，以此类推分别给导入的A~H组都增加一个名为“noa、nab、…、noh”的锚点。
活动实施17Step3：锚点链接③选中表中“B组”文字，单击“插入”菜单—“超级链接”命令，出现超级链接对话框，在“链接”位置输入“#nob”，单击“确定”。此时预览会发现当鼠标单击“B组”文字时，页面会自动跳转到B组赛事安排。以此类推完成其他小组锚点链接，并制作返回锚点。锚点制作效果图
活动实施18Step4：制作“热销推荐”网页①打开“rxtj.html”网页，在内容编辑区域内表格第二行插入2行3列表格，宽99%，