网页设计报告

合集下载
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

qwertyuiopasdfghjklzxcvbnmqw ertyuiopasdfghjklzxcvbnmqwer tyuiopasdfghjklzxcvbnmqwerty

uiopasdfghjklzxcvbnmqwertyui

opasdfghjklzxcvbnmqwertyuiop asdfghjklzxcvbnmqwertyuiopas dfghjklzxcvbnmqwertyuiopasdf ghjklzxcvbnmqwertyuiopasdfgh jklzxcvbnmqwertyuiopasdfghjkl zxcvbnmqwertyuiopasdfghjklzx cvbnmqwertyuiopasdfghjklzxcv bnmqwertyuiopasdfghjklzxcvbn mqwertyuiopasdfghjklzxcvbnm qwertyuiopasdfghjklzxcvbnmqw ertyuiopasdfghjklzxcvbnmqwer tyuiopasdfghjklzxcvbnmqwerty uiopasdfghjklzxcvbnmrtyuiopas

网页设计报告

姓名:杨丽娟

班级:电子商务1班

学号:201341440123

2.搜集设计网页所需资料

2.1.搜集设计网页所需图片

2.2.使用Photoshop对图片进行处理

2.3.使用flash制作banner以及所需动画图片

3.设计网页结构,给网页划分网格

4.完成首页以及其他页面的制作

4.1使用css+div进行布局,制作首页

4.2使用css+div进行布局,制作首页

4.3创建模板,使用模板创建网页,制作其他子页

5.制作链接

6.修改完善自己的网页

个人网站,包含首页,个人简介,大学生活,我的家人,我的相册,我爱美食六个网页

2.搜集设计网页所需资料

2.1. 搜集设计网页所所需资料

2.2.使用Photoshop对图片进行处理

2.2.1.使用Photoshop设计网站logo

2.2.2.使用Photoshop对其他图片进行处理

2.3.使用flash制作banner以及所需动画图片

先使用Photoshop对图片进行初步设计,再使用flash进行设计。分别设计好主页banner和其他子页banner。

3.设计网页结构,给网页划分网格

使用Excel进行布局设计

首页布局:

个人简介页布局:

大学生活页布局:

我的家人页布局:

我的相册页布局:

我爱美食页布局:

4.完成首页以及其他页面的制作

4.1.新建站点以及各个HTML文本

启动Dreaweaver,在【文件】面板中单击【管理站点】链接,打开【管理站点】链接,打开【管理站点】对话框,单击【新建】按钮;

弹出【站点设置对象】对话框,输入站点名称201341440123+杨丽娟,【本地站点文件夹】选择工作文件夹,单击【保存】,单击【完成】按钮;

新建的站点将出现在【文件】面板中,此时【文件】面板中显示的是当前站点的本地根文件夹中;

右击站点名称,单击【新建文件夹】命名为images,存放设计网页所需的图片资料;再次单击站点名称,单击【新建文件】index.html;introduce.html; University.html;family.html;photo.html;food.html;

4.2.使用css+div进行布局,制作首页

双击文件,打开首页index.html,右击站点点击【新建文件夹】命名为style.c

Ss,在文件夹中【新建文件】分别命名为index.css和globle.css;将css样式链接到index.html中,拖放到之前;

鼠标放置在与之间,在【菜单栏】面板中单击【插入】,【布局对象】再单击【Div标签】,在插入Div中点击【新建CSS规则】,选择或输入选择器名称中输入.logo,单击【确定】,在规则定义中设置背景颜色和方框宽度960,高度200,单击【确定】;

切换到globle.css界面,输入代码margin:0;padding 0;清除浏览器默认边距;

切换到index.html界面,输入代码margin:0 auto;

使用同样的方法插入其他模块,并在index.html的其他模块中输入代码margin:5px auto;使各个模块居中,并相距5px ;

在.logo中分别插入图片logo和flash动画;在.nav中切换到源代码中输入想要输入首页|个人简历|大学生活|我的家人|我的相册|我爱美食等文字,

再切换到index.css样式中输入代码line-height:35px; font-size:16px; text-align:center;使文字居中对齐,最后切换到globle.css样式中输入代码a{color:#000; text-decoration:none;}

a:hover{color:#933; text-decoration:underline}

最后在其它模块插入图片,完善首页。

4.3.创建模板,使用模板创建网页,制作其他子页

首先是必须建立好一个页的基本框架,把固定的元素先确定下来,留出一些

空白的编辑区域给一些变动元素,在菜单栏上依次打开【插入】——【模板对象】——【创建模板】,重新命名你的网页模板,将鼠标光标定位到需要插入编辑区域的地方,然后在菜单栏中打开【插入】——【模板对象】——【可编辑区域】建立好的可编辑区域后以后可以直接在这里面输入相应的内容,大多数需要不断更新的。然后就可以直接CTRL+S保存这个模板了,网页模板的格式是.dwt,使用网页模板,可以在菜单栏中打开【文件】——【新建】——【模板中的页】,选定刚刚重命名的制作好的模板就可以直接引用了。根据设计好的布局设计其它子页。

个人简介效果图:

我的大学效果图:

相关文档
最新文档