Dreamweaver网页设计形考任务10.docx
- 文档编号:2065795
- 上传时间:2022-10-26
- 格式:DOCX
- 页数:11
- 大小:1.02MB
Dreamweaver网页设计形考任务10.docx
《Dreamweaver网页设计形考任务10.docx》由会员分享,可在线阅读,更多相关《Dreamweaver网页设计形考任务10.docx(11页珍藏版)》请在冰豆网上搜索。
Dreamweaver网页设计形考任务10
3网页设计软件介绍
主体设计
在网页设计过程中,一般是先由美工人员利用AdobePhotoshop进行网页页面效果的处理与制作,包括网页中各种图像的制作,例如网站Logo、Banner、背景图像和页面所需要图像处理等等。
由动画制作人员利用AdobeFlash或者AdobePhotoshop进行Flash动画或者GIF动画的制作。
当美工人员将网页页面效果图制作完成后,使用Photoshop将图像进行切片并输山,此时网页设计人员就可以利用切片输出的图像,以及页面效果图的布局等,使用Dreamweaver对网页进行制作,此时完成的页面还是属于静态网页。
如果有设计成动态网页的需求,则让程序人员编写相应的应用程序,这些应用程序使浏览器与数据库可以发生交互。
由于本文的特殊需求,Photoshop的图像处理与Flash的动画制作过程都在现实中完成,只在此对已经准备好的资源加以运用,而动态网页设计方面也不在论文中详述。
4.1准备工作
网页设计的前期准备工作是不容忽视的,在创建站点前先要规划好站点,例如网站的名字、风格和结构,并收集或者设计好相关的素材、资料,这样才会高效率地完成网页设计。
不管是企业网站,还是个人网站,网站设计的第一件事就是给网站命名。
一般情况下,企业网站直接以企业名字作为网站名,个人网站就可以依照自己的爱好来命名。
本次设计的网站是一个个性化的个人网站,名字可以个性、活泼一些,网站就命名为“黄者风范”。
第二件事就是确定网站的风格。
就犹如命名一样,对于企业网站而言,通常是根据公司的性质以及标志来确定其风格,而个人网站就任意而为。
本次制作的个人网站因为个人的喜好,选用了代表生命、青春、和平、宁静、自然、环保、成长、生机、希望的绿色作为主色调,又加以紫色作为点缀,不仅突出了重点,又能产生强烈的视觉效果。
第三件事就是为网站划分栏目和确定结构。
只有事先将网站的栏目规划好和结构确定好,才能在后面的制作中做到有章可循。
本次设计,我将该网站划分为7个栏目:
首页、日记、推荐大全、轻松一刻、留言、登录和注册。
其中,日记主要记载我的日常生活,推荐大全主要是分为电影推荐、电视剧推荐、音乐推荐、小说推荐和旅游推荐等5个部分,轻松一刻主要是分享一些幽默笑话,留言主要是为了与浏览者互动。
依照这些栏目,我画出了“黄者风范”的网站结构图,如图(4-1)所示:
图(4-1):
网站结构图
4.2定义站点
在正式设计网页之前,最好先定义一个站点,并将建站需要的图像以及其它资源放置在站点文件夹中,这是为了能够更好地利用站点窗口对站点文件进行管理。
现在市场的大部分软件都是不能够用中文进行编程的,而Dreamweaver也不例外,所以在对各种文件、资源命名时,要用英文或者拼音来命名。
接下来就说明定义站点的步骤:
1、首先在本地磁盘创建一个以“personal”命名的文件夹,并在该文件夹下创建一个新文件夹,以“images”命名,以存放站点中的各种图像文件。
2、在Dreamweaver菜单栏中,选择“站点”>“新建站点”菜单,在打开的“未命名站点1的站点定义为”对话框中选择“高级”选项卡。
3、在“站点名称”文本框中输入“personal”,单击“本地根文件夹”文本框后的文件夹图标,在打开的对话框中选择前面创建的文件夹“personal”,然后采用同样的方法,设置“默认图像文件夹”为“images”。
4、单击“确定”按钮,可以看到在Dreamweaver左下角的“文件”面板中显示了刚才定义的站点。
到此,站点定义就算是完成了。
4.3制作首页
为了便于制作,我将网站首页的制作细分为定义CSS样式、制作首页上部、制作首页中部以及制作首页下部等4部分。
4.3.1定义CSS样式
在实际的网页设计中,一般都是先定义“bodv”标签样式,然后再设计网站内容,最后定义其它的样式,但是这里我就一次性全部定义先。
所谓CSS是指CascadingStyleSheets(层叠样式表单)的简称,更多的人把它称作样式表。
顾名思义,它是一种设计网页样式的工具。
以下是对CSS样式定义的步骤:
1、在“文件”面板中的空白处新建一个网页文档,命名为“index.html”。
2、在文档编辑窗口中打开刚刚创建的“index.html”文档,然后点击“属性”面板中的“页面属性”按钮,随着打开“页面属性”的对话框,在“分类”列表中选择“标题,编码”,设置标题为“黄者风范网站主页”,编码为“Unicode(UTF-8)”,然后点击“确定”按钮。
3、打开“CSS样式”面板,点击“新建css规则”按钮,打开“新建CSS规则”对话框。
在随着打开的“选择器类型”对话框中,选择“标签”,在“标签”的下拉列表中选择“bodv”,在“规则定义”列表区选择“新建样式表文件”,然后点击“确定”按钮。
随着打开“保存样式表文件为”的对话框,在“保存在”下拉列表中选择网站的根文件夹“personal”,在“文件名”文本框中输入“c1”,然后点击“保存”按钮,保存完毕。
4、打开“body的CSS规则定义”对话框,设置“大小”为“10像素”,“行高”为“22像素”。
在“分类”列表中选择“方框”,然后在右侧的“边界”区域“上”编辑框中输入“0”,由于“全部相同”的选项已经打钩,所以下方的所有值都将变为“0”,最后点击“确定”按钮,完成了对“bodv”的标签样式定义。
5、再次打开“新建CSS规则”对话框,在“选择器类型”区选择“类”,在“名称”的编辑框中输入“line”,在“规则定义”列表区选择“c1.css”,然后单击“确定”按钮。
随着打开了“.1ine的CSS规则定义”的对话框,在“分类”列表中选择“边框”,点击已经打钩的“全部相同”复选框,取消了选择样式、宽度和颜色列表区的同值化,之后,“下”在样式区的下拉列表中选择“虚线”,“下”在宽度区的编辑框中输入“1”,“下”在颜色区的编辑框中设置颜色为蓝色“#O9F”,单击“确定”按钮,完成对“line”类样式的定义。
6、再次打开“新建css规则”对话框。
在“选择器类型”区中选择“类”,在“名称”编辑框中输入“list”,在“规则定义”列表区中选择“cl.css”,然后点击“确定”按钮。
在随着打开的“.list的CSS规则定义”对话框,设置“大小”为“10像素”,“行高”为“22像素”,“颜色”为深灰色“#666666”。
然后在左侧的“分类”列表中选择“区块”,然后在右侧的“文本对齐”下拉列表中选择“左对齐”。
在左侧的“分类”列表中选择“方框”,取消选择“边界”区的已经打钩的“全部相同”复选框,就取消了选择样式、宽度和颜色列表区的同值化,然后在“上”编辑框中输入“8”,也就是设置上边界为8像素。
最后在左侧的“分类”列表中选择“列表”,然后在右侧的“类型”的下拉列表中选择“圆点”,在“位置”的下拉列表中选择“外”,最后单击“确定”按钮,就会关闭了对话框,完成对“List”的CSS规则定义。
7、再次打开“新建CSS规则”对话框,在“选择器类型”区选择“类”,在“名称”编辑框中输入“top”,在“规则定义”的列表区选择“cl.css”,然后单击“确定”按钮。
随着打开了“.top的CSS规则定义”对话框,在左侧的“分类”列表中选择“边框”,点击已经打钩的“全部相同”复选框,就取消选择样式、宽度和颜色列表区的同值化,之后,“上”在样式区的下拉列表中选择“实线”;“上”在宽度区的编辑框中输入“2”,“上”在颜色区的编辑框中设置颜色为蓝色“#5BBCF7”,最后单击“确定”按钮,关闭对话框,完成对“Top”的CSS规则定义。
8、最后次打开“新建CSS规则”对话框,在“选择区类型”区选择“类”,在“名称”的编辑框中输入“linel”,在“规则定义”的列表区选择“c1.css”,然后点击“确定”按钮。
随着打开了“.1inel的css规则定义”对话框,在左侧的“分类”列表中选择“边框”,然后“上”在样式区的下拉列表中选择“实线”,“上”在宽度区的编辑框中输入“2”,“上”在颜色区的编辑框中设置颜色为浅灰色“#EIEIE1”,之后点击“确定”按钮,完成对“1inel”的CSS规则定义。
9、分别保存“index.html”和“c1.css”。
这就完成了对本次设计所需要的所有CSS样式进行定义,如图(4-2)所示:
图(4-2):
CSS样表
4.3.2制作首页上部
本次设计的个人网站的首页上部主要包括几张图片,图片都是已经制作完成的了,以下是具体的操作步骤:
1、继续在“index.html”文档中操作。
将插入点置于文档编辑窗口,插入一个3行1列,宽1000像素,并且边框粗细、单元格边距和单元格间距等各项都为0的表格,称之为表格1,并且设置表格的对齐方式为“居中对齐”。
2、将插入点置于表格1第一个单元格中,然后点击菜单栏中的插入栏中的“图像”选项,选择本地站点“images”文件夹中的图像“personal_01.jpg”,就会在相应位置插入图像。
3、同理,按照上面的方法,在第2个单元格中分别插入图像“nav-1.jpg”和“nav-2.jpg”、“nav-3.jpg”、“nav-4.jpg”、“nav-5.jpg”、“nav-6.jpg”、“nav-7.jpg”。
4、同理,按照上面的方法,在第3个单元格中插入“images”文件夹中的图像“personal_02.jpg”。
首页的上面部分就制作完毕,效果如图(4-3)所示
图(4-3):
首页上部效果图
4.3.3制作首页中部
本次设计的网站的首页中部主要是一些栏目精华和公告,是由2个大表格中嵌套多个小表格组成的,以下是具体的操作步骤:
1、将插入点置于表格1下方,插入一个2行2列,宽1OOO像素,并且边框粗细、单元格边距和单元格间距等各项都为0的表格,称之为表格2,并设置表格的对齐方式为“居中对齐”。
2、将插入点置于表格2第1行第1列的单元格中,在“属性”面板上“宽”和“高”
文本框中分别输入“720”和“10”,然后点击确认键。
3、在表格2第2行第1列单元格中插入一个3行6列,宽720像素,并且边框粗细、单元格边距和单元格间距等各项均为0的表格,称之为表格2-1,并设置表格的其对齐方式为“左对齐”。
4、拖动鼠标,将表格2-1第1行的6个单元格全选,在“属性”面板上点击“合并”按钮,6个单元格就合并成1个了。
然后将插入点置于合并后的单元格中,在“属性”面板上“样式”的下拉列表中选择“line”,之后插入图像“personal_03.jpg”。
5、拖动鼠标选中表格2-1第2行的6个单元格,在“属性”面板上“宽”的文本框中输入120,并在“水平”的文本框中选择“居中对齐”,之后分别在各个单元格中插入图像,图像为“11.jpg”和“22.jpg”、“33.jpg”、“44.jpg”、“55.jpg”、“66.jpg”,并对各个图像应用样式“linel”。
6、将插入点置于表格2-1第2行第1列单元格中,在“属性”面板上“高”文本框中输入“20”,然后按回车键确认。
7、拖动鼠标,全选表格2-1第3行的6个单元格,选择对齐方式为“居中对齐”,然后分别在各个单元格中输入文本,分别是“天坛”和“深圳华侨城”、“三亚”、“九寨沟”、“迪士尼”、“巴黎铁塔”。
8、将插入点置于表格2第2行第2列单元格中,在“属性”面板上“垂直”的下拉列表中选择“顶端”,然后在其中嵌套1个2行l列,宽280像素,并且边框粗细、单元格边距和单元格间距等各项均为0的表格,称之为表格2-2,并设置表格的对齐方式为“左对齐”。
9、对表格2-2第1个单元格应用样式“line”,并在其中插入图像“personal_04.jpg”,在第2个单元格中输入文本,分别是“本人联系方式”和“北京游记”,之后拖动鼠标选择所有文本,并点击鼠标右键,选择“项目列表”,最后在“样式
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Dreamweaver 网页 设计 任务 10