开发者学堂课程【网站架构师 CUED 训课程:从零开始做网站】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/548/detail/7554
从零开始做网站
网站分析:
这是一个已经做好的网站
网页有导航、banner、LOGO、登录框、公司介绍、新闻(列表直接引用)、产品展示、文字及图表
关于我们:由文字和图片构成
新闻:比较特殊,有三个不同的块,用三个标签做成
案例展示:有两块内容,产品分类;分类结果
联系我们:地图可以用地图控件完成
以上就是对一个网站的最初步的认识
接下来我们就一起做网页的页头页尾
网站制作:
页头:banner、LOGO、导航、注册按钮
Banner:可以使用全屏幻灯控件来制作,直接选择幻灯秀,然后调试对齐。
透明的底边:
直接用图片的控件把透明的底边加上,同时设置整体的宽度和高度(高度可以通过截屏测量)。
LOGO:同样可以用图片控件完成,找到图片,调整大小。
注册控件:在互动社交里面找到登陆注册的按钮,调节整体样式。
导航:
直接按照网页格式新建若干页面(同时引用页头及页尾),找到导航的控件,调试导航字体、颜色、样式
页尾:版权信息、地址编号、技术支持
底边和文字信息:可以直接用容器控件做(备案号要加一个链接可以直接链接到工信部的网址)
LOGO 共有七个页面,直接新建页面(同时应用页头与页尾)
首页:先选择模板
公司介绍:
直接用文字控件,调节字体和字号,调节居中。网站原型还有两条线,直接用线条,调整位置及长度;查看更多的按钮:用图片的形式做
公司新闻:
直接赋值公司介绍的格式,新闻列表:直接用列表做,将列表的样式添加进来
案例展示:
具体案例可以使用图片,两边的粗线条直接用线条工具添加并调整位置及大小。用文章及列表完成,在网站后台直接添加信息。
关于我们:下面是公司的介绍,依旧使用文字控件及线条
轮播的图集:直接用图集完成,选择相应的图集
新闻动态:
是一个标签,从容器中找到标签的控件,3个标签分别是:公司动态;新闻动态;活动新闻。还可以对标签的颜色及悬停进行编辑。每个标签下都有文章,可以直接用列表控件拉取,每个标签下都应该有列表。
案例展示:是一个分类的控件,直接找到分类的控件并添加整体数据
联系我们:有一个地图,互动社交中有谷歌地图和高德地图,根据需要选择需要的地图控件,并对地点进行描述。其余文字信息可以直接复制。
留言板:
比较简单,完整的留言板控件在互动社交中,可以直接使用留言控件或评论信息进行选择。
视频展示:
用简单的视频控件可以直接使用(可以支持腾讯、优酷、爱奇艺)
这些就是网站设计的部分,从零开始制作出一个网页的形态。