实验二简单网页制作及发布.docx
- 文档编号:29435447
- 上传时间:2023-07-23
- 格式:DOCX
- 页数:10
- 大小:3.23MB
实验二简单网页制作及发布.docx
《实验二简单网页制作及发布.docx》由会员分享,可在线阅读,更多相关《实验二简单网页制作及发布.docx(10页珍藏版)》请在冰豆网上搜索。
实验二简单网页制作及发布
学生实验报告
课程名称
电子商务网页制作
实验成绩
实验项目名称
简单网页制作及发布
批阅教师
沈金
实验者
学号
专业班级
电商1111
实验日期
4-02
一、实验预习报告(实验目的、内容,主要设备、仪器,基本原理、实验步骤等)(可加页)
1、使用DW制作网页
2、网页制作采用CSS+DIV方式完成
3、至少有两个页面,包括logo,导航条,主体内容、其他模块推荐信息和版权区域(可参考教材中的页面版式)
二、实验过程记录(包括实验过程、数据记录、实验现象等)(可加页)
本网站总共有四个页面:
网页一设计:
建立第一个网页,先在网页的代码页面中添加5个div,分别如下:
(1)LogoBanner
Navdiv
(2)Contentdiv,又在contentdiv中设置两个textdiv
(3)在text2div中设置三个div,如图:
(4)最后设置footerdiv,如图:
添加CSS样式
(5)先给整个网页添加CSS样式:
(6)给logobanner添加样式,
(7)给nav添加样式:
(8)先给content添加CSS样式;
(9)再给contenttext1添加CSS样式:
(10)给contenttext2添加样式:
(11)给text2中的图片添加样式:
(12)给test2中的三个div分别添加样式:
(13)给footer添加CSS样式
(14)最后网页显示的效果如图:
页面二的设计:
先创建四个div
(1)创建a1div
(2)创建diva2
(3)创建diva3
(4)创建footerdiv:
创建CSS样式:
(5)对整个设置CSS样式:
(5)对diva1添加CSS样式:
(6)对a2a3div添加CSS样式:
(7)对a2div中的文字段落添加CSS样式:
(8)对图片添加CSS样式:
(9)对footerdiv添加CSS样式:
(10)添加CSS样式后的网页的效果如下图所示:
网页三的效果图:
网页四效果图:
三、实验结果分析(可加页)
合理的设置div的长宽以及图片的大小,避免不必要的步骤,设置图片的浮动布局时,合理的利用margin和padding
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 实验 简单 网页 制作 发布