12-2化妆品公司网站设计与制作（2）.docVIP

课程名称 WEB前端开发（1） 课次 44 任务、项目、课题名称 化妆品公司网站设计与制作 课时 2学时 教学内容 创建网页，搭建页面结构，添加页面元素和内容 设置网页中各元素的CSS样式 教学目标 能够创建网页，搭建页面结构，添加页面元素和内容 能够设置网页中各元素的CSS样式 教学重点 创建网页，搭建页面结构，添加页面元素和内容 设置网页中各元素的CSS样式 教学难点 设置网页中各元素的CSS样式 教学活动及主要环节 新授： 一、创建网站文件夹 在磁盘E盘根目录下创建网站文件夹：电商网站，将素材中提供的所有文件夹拷贝到该文件夹下。 二、创建站点 启动DreamWeaver，通过“站点”｜“新建站点”命令，创建网站站点，站点名称为：电商网站，本地站点文件夹为：E:\电商网站\。 三、新建网页 在站点中新建一个网页文件，命名为“index.html”。 四、创建CSS样式表文件 在站点中创建CSS样式表文件，文件名为index.css。然后书写通用样式及初始样式，代码如下： *{ body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, img { margin: 0; padding: 0; border: 0; list-style: none; } body { font-family: 微软雅黑, Arial, Helvetica, sans-serif; font-size: 14px; } a { color: #999; text-decoration: none; } a:hover { color: #fff; } input, textarea { outline: none; } @font-face { font-family: iconfont; src: url(../fonts/iconfont.ttf); } 五、附加样式表文件 在index.html文件的头部标记中，将index.css样式表附加到“index.html”页面中，代码如下： link rel=stylesheet type=text/css href=css/index.css 六、制作网站首页的上部 图12-7网站主页上部 （1）分析效果图 观察效果图12-7不难看出，存放视频的大盒子包含了头部、导航、音视频和图片等。其中，头部可以分为左（logo）和右（登录注册）两部分，导航菜单结构清晰，分为左中右三部分。 当鼠标悬停于导航栏的左侧“选项”上时，出现侧边栏，因此，在导航栏左侧的结构中还需添加侧边栏部分。需要说明的是，导航栏右侧的四个小图标是通过引入字体实现的。 （2）搭建结构 在网站index.html的代码窗口，输入如下代码： !-- videobox begin -- div class=videobox header div class=con section class=left/section section class=right a href=#登录/a a href=#注册/a /section /div /header nav ul li class=left a class=one href=# img src=images/sanxian.png alt= span选项/span img src=images/sanjiao.png alt= /a aside span/span ol class=zuo li class=con护肤/li li洁面/li li爽肤水/li li精华/li li乳液/li li class=con彩妆/li liBB霜/li li卸妆/li li粉底液/li li class=con香氛/li li女士香水/li li男士香水/li li中性香水/li /ol ol class=you li class=con男士专区/li li爽肤水/li li洁面/li li面霜/li li精华/li